<script module lang="ts">
  import { defineMeta } from "@storybook/addon-svelte-csf";
  import IconButton from "../components/IconButton.svelte";
  import FocusPreview from "./FocusPreview.svelte";

  const { Story } = defineMeta({
    title: "Base UI/IconButton",
    component: IconButton,
    tags: ["autodocs"],
  });
</script>

<Story name="Refresh" args={{ icon: "mdi:refresh", label: "Refresh" }} />
<Story name="Open" args={{ icon: "mdi:open-in-new", label: "Open" }} />
<Story name="Inspect" args={{ icon: "mdi:magnify-scan", label: "Inspect" }} />
<Story name="Disabled" args={{ icon: "mdi:refresh", label: "Disabled", disabled: true }} />
<Story name="Active" args={{ icon: "mdi:refresh", label: "Active", active: true }} />
<Story name="Focus Visible" asChild>
  <FocusPreview>
    <IconButton icon="mdi:keyboard" label="Focus visible" />
  </FocusPreview>
</Story>
