@antfu/design 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Anthony Fu <https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,165 @@
+# @antfu/design
+
+> A customizable, **composable** design system for devtools-style Vue apps: a
+> UnoCSS preset (`presetAnthonyDesign`), a set of Vue primitives, a ground-up
+> design skill, and a color-contrast a11y check. Something in between a component
+> library and shadcn.
+
+## Install
+
+```bash
+pnpm add @antfu/design unocss vue
+```
+
+## Quick start
+
+```ts
+// uno.config.ts
+import { presetAnthonyDesign } from '@antfu/design/unocss'
+import { defineConfig, presetIcons, presetWebFonts, presetWind4 } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetAnthonyDesign({ primary: '#49833E' }),
+    presetWind4(), // a base preset is required — bring your own
+    presetIcons(),
+    presetWebFonts({ fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
+  ],
+  content: { pipeline: { include: [/@antfu\/design/] } },
+})
+```
+
+```ts
+// Components are imported by full path (no barrel) — categorized and prefixed:
+import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+import OverlayModal from '@antfu/design/components/Overlay/OverlayModal.vue'
+import '@antfu/design/styles.css'
+```
+
+The package ships **raw `.ts` / `.vue` source** (no bundling) — your build
+compiles it. Point UnoCSS at the package so the components' classes are
+generated (`content: { pipeline: { include: [/@antfu\/design/] } }`).
+
+It's a **single** preset that is **not self-contained**: it contributes only the
+antfu design layer (theme tokens, semantic shortcuts, dynamic rules, severity).
+You compose the base preset, icons, fonts and reset yourself.
+
+## Exports
+
+| Subpath | What |
+|---|---|
+| `./components/*` | one readable `.vue` per component (e.g. `./components/Display/DisplayBadge.vue`) |
+| `./unocss` | the single `presetAnthonyDesign` preset |
+| `./utils` | color, format, path, semver, contrast, keybinding helpers (pure, stateless) |
+| `./composables/*` | Vue helpers: `colorScheme` (opt-in scheme context) and `toast` (`useToast` queue) |
+| `./a11y` | programmatic color-contrast scan |
+| `./styles.css`, `./styles/*` | all styles, or per-concern files |
+| `./splitpanes.d.ts` | opt-in fallback types for older `splitpanes` (v4.1.2+ ships its own) |
+
+> The package is **stateless** — no dark-mode/clipboard/toast state. Components
+> that vary by scheme take a `colorScheme` prop; toasts are controlled. Use VueUse
+> directly for state.
+>
+> Two **opt-in** helpers reduce the boilerplate without adding global state:
+> `provideColorScheme(() => isDark ? 'dark' : 'light')` (from `@antfu/design/composables/colorScheme`)
+> lets scheme-aware components inherit the scheme instead of threading a prop, and
+> `useToast()` (from `@antfu/design/composables/toast`) owns a toast queue for
+> `FeedbackToasts`. Both only read state you own.
+
+## Accessibility
+
+A color-contrast scan (axe-core + Playwright) runs a URL in light **and** dark
+mode. Use it programmatically:
+
+```ts
+import { formatContrastReport, runContrastScan } from '@antfu/design/a11y'
+
+const result = await runContrastScan({ url: 'http://localhost:6006/iframe.html' })
+console.log(formatContrastReport(result))
+```
+
+…or run the bundled script with `tsx`:
+
+```bash
+tsx node_modules/@antfu/design/a11y/cli.ts http://localhost:6006/iframe.html
+```
+
+## Tokens
+
+<!-- TOKENS:START -->
+### Semantic & composite shortcuts
+
+| Token | Expands to |
+|---|---|
+| `color-base` | `color-neutral-800 dark:color-neutral-200` |
+| `color-muted` | `color-neutral-600 dark:color-neutral-400` |
+| `color-faint` | `color-neutral-500 dark:color-neutral-500` |
+| `color-active` | `color-primary-600 dark:color-primary-300` |
+| `bg-base` | `bg-white dark:bg-#111` |
+| `bg-secondary` | `bg-#f5f5f5 dark:bg-#1a1a1a` |
+| `bg-active` | `bg-#8881` |
+| `bg-hover` | `bg-primary/5` |
+| `bg-code` | `bg-gray-500/5` |
+| `bg-tooltip` | `bg-white/75 dark:bg-#111/75 backdrop-blur-8` |
+| `bg-gradient-more` | `bg-gradient-to-t from-white via-white/80 to-white/0 dark:from-#111 dark:via-#111/80 dark:to-#111/0` |
+| `border-base` | `border-#8882` |
+| `border-mute` | `border-#8881` |
+| `border-active` | `border-primary-600/25 dark:border-primary-400/25` |
+| `ring-base` | `ring-#8882` |
+| `op-fade` | `op65 dark:op55` |
+| `op-mute` | `op30 dark:op25` |
+| `btn-action` | `border border-base rounded flex gap-2 items-center px2 py1 op75 hover:op100 hover:bg-active transition disabled:pointer-events-none disabled:op30! outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
+| `btn-action-sm` | `btn-action text-sm` |
+| `btn-action-active` | `color-active border-active! bg-active op100!` |
+| `btn-icon` | `w-9 h-9 rounded-full op-fade hover:op100 hover:bg-active transition flex items-center justify-center disabled:pointer-events-none disabled:op30 outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
+| `btn-icon-compact` | `w-6 h-6 rounded op-fade hover:op100 hover:bg-active transition flex items-center justify-center disabled:pointer-events-none disabled:op30 outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
+| `btn-primary` | `px3 py1.5 rounded flex gap-2 items-center bg-primary-500 hover:bg-primary-600 text-white transition disabled:op50 disabled:pointer-events-none outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
+| `badge` | `inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-xs font-medium leading-none` |
+| `badge-active` | `badge bg-active color-active` |
+| `badge-muted` | `badge bg-#8881 color-muted` |
+
+### Severity scale
+
+| Token | Expands to |
+|---|---|
+| `color-scale-neutral` | `text-gray-700 dark:text-gray-300` |
+| `color-scale-low` | `text-lime-700 dark:text-lime-300 dark:saturate-75` |
+| `color-scale-medium` | `text-amber-700 dark:text-amber-300 dark:saturate-90` |
+| `color-scale-high` | `text-orange-700 dark:text-orange-300` |
+| `color-scale-critical` | `text-red-700 dark:text-red-300` |
+
+### Type sizes
+
+| Token | Expands to |
+|---|---|
+| `text-micro` | `text-[10px] leading-[1.4]` |
+| `text-mini` | `text-[11px] leading-[1.45]` |
+| `text-compact` | `text-[12px] leading-[1.5]` |
+
+### Named z-index layers
+
+| Token | Expands to |
+|---|---|
+| `z-nav` | `z-[30]` |
+| `z-dropdown` | `z-[40]` |
+| `z-tooltip` | `z-[45]` |
+| `z-toast` | `z-[50]` |
+| `z-modal-backdrop` | `z-[60]` |
+| `z-modal-content` | `z-[70]` |
+| `z-drawer-backdrop` | `z-[80]` |
+| `z-drawer-content` | `z-[90]` |
+
+### Dynamic
+
+| Token | Expands to |
+|---|---|
+| `badge-color-<name>` | a chip tinted by any palette color name (dark-aware) |
+| `bg-glass` / `bg-glass:<n>` | translucent surface + `backdrop-blur` |
+| `bg-dots` / `bg-dots-<n>` | radial dot-grid background, variable cell size in px (default 16) |
+| `bg-grid` / `bg-grid-<n>` | crosshatch grid-lines background, variable cell size in px (default 16) |
+<!-- TOKENS:END -->
+
+## License
+
+[MIT](./LICENSE) © [Anthony Fu](https://github.com/antfu)

package/a11y/cli.ts

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+import type { ColorMode, ContrastScanOptions } from './scan'
+import process from 'node:process'
+import { formatContrastReport, runContrastScan } from './scan'
+
+const HELP = `antfu-design-a11y — color-contrast scan (light + dark)
+
+Usage:
+  antfu-design-a11y <url> [options]
+
+Options:
+  --mode <light|dark>    Scan a single mode (repeatable). Default: both.
+  --exclude <selector>   Extra CSS selector to skip (repeatable).
+  --key <storageKey>     localStorage key for color scheme. Default: antfu-design-color-scheme
+  --headed               Run with a visible browser.
+  -h, --help             Show this help.
+
+Exits non-zero when any color-contrast violation is found.`
+
+function parseArgs(argv: string[]): { options: ContrastScanOptions, help: boolean } {
+  let url = ''
+  const modes: ColorMode[] = []
+  const exclude: string[] = []
+  let colorSchemeStorageKey: string | undefined
+  let headless = true
+  let help = false
+
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i]
+    if (arg === '-h' || arg === '--help')
+      help = true
+    else if (arg === '--mode')
+      modes.push(argv[++i] as ColorMode)
+    else if (arg === '--exclude')
+      exclude.push(argv[++i])
+    else if (arg === '--key')
+      colorSchemeStorageKey = argv[++i]
+    else if (arg === '--headed')
+      headless = false
+    else if (!arg.startsWith('-') && !url)
+      url = arg
+  }
+
+  return {
+    help,
+    options: {
+      url,
+      modes: modes.length ? modes : undefined,
+      exclude: exclude.length ? [...['.shiki', '[data-a11y-skip]'], ...exclude] : undefined,
+      colorSchemeStorageKey,
+      headless,
+    },
+  }
+}
+
+async function main(): Promise<void> {
+  const { options, help } = parseArgs(process.argv.slice(2))
+
+  if (help || !options.url) {
+    console.log(HELP)
+    process.exit(help ? 0 : 1)
+  }
+
+  const result = await runContrastScan(options)
+
+  console.log(formatContrastReport(result))
+  process.exit(result.passed ? 0 : 1)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})

package/a11y/index.ts

@@ -0,0 +1,13 @@
+// WCAG contrast math is browser-free and reusable for unit-testing token pairs.
+export {
+  checkContrast,
+  type ContrastLevel,
+  contrastRatio,
+  type ContrastResult,
+  meetsContrast,
+  parseColor,
+  relativeLuminance,
+  type RGB,
+} from '../utils/contrast'
+
+export * from './scan'

package/a11y/scan.ts

@@ -0,0 +1,127 @@
+/**
+ * Programmatic color-contrast scan, adapted from config-inspector's
+ * `a11y.spec.ts`: launch a URL, toggle light **and** dark mode, run axe-core's
+ * `color-contrast` rule, and collect violations. `@axe-core/playwright` and
+ * `playwright` are optional peers, imported lazily so the rest of the package
+ * stays usable without them.
+ */
+
+export type ColorMode = 'light' | 'dark'
+
+export interface ContrastScanOptions {
+  /** Target URL (an app or Storybook iframe). */
+  url: string
+  /** Modes to scan. Default `['light', 'dark']`. */
+  modes?: ColorMode[]
+  /** CSS selectors to exclude (e.g. code blocks). */
+  exclude?: string[]
+  /** localStorage key the app reads its color scheme from. */
+  colorSchemeStorageKey?: string
+  /** Stored value representing light mode. */
+  lightValue?: string
+  /** Stored value representing dark mode. */
+  darkValue?: string
+  /** Headless browser. Default `true`. */
+  headless?: boolean
+  /** Max ms to wait for the `dark` class to settle. Default `5000`. */
+  timeout?: number
+}
+
+export interface ContrastViolationNode {
+  target: string[]
+  failureSummary?: string
+}
+
+export interface ContrastViolation {
+  id: string
+  impact?: string | null
+  help: string
+  mode: ColorMode
+  nodes: ContrastViolationNode[]
+}
+
+export interface ContrastScanResult {
+  passed: boolean
+  violations: ContrastViolation[]
+}
+
+const DEFAULT_EXCLUDE = ['.shiki', '[data-a11y-skip]']
+
+/** Run the contrast scan and return structured violations. */
+export async function runContrastScan(options: ContrastScanOptions): Promise<ContrastScanResult> {
+  const {
+    url,
+    modes = ['light', 'dark'],
+    exclude = DEFAULT_EXCLUDE,
+    colorSchemeStorageKey = 'antfu-design-color-scheme',
+    lightValue = 'light',
+    darkValue = 'dark',
+    headless = true,
+    timeout = 5000,
+  } = options
+
+  const { chromium } = await import('playwright')
+  const { default: AxeBuilder } = await import('@axe-core/playwright')
+
+  const browser = await chromium.launch({ headless })
+  const violations: ContrastViolation[] = []
+
+  try {
+    for (const mode of modes) {
+      const context = await browser.newContext()
+      const page = await context.newPage()
+      await page.addInitScript(
+        ([key, value]) => {
+          try {
+            localStorage.setItem(key, value)
+          }
+          catch {}
+        },
+        [colorSchemeStorageKey, mode === 'dark' ? darkValue : lightValue] as [string, string],
+      )
+      await page.goto(url, { waitUntil: 'networkidle' })
+      await page.waitForFunction(
+        m => document.documentElement.classList.contains('dark') === (m === 'dark'),
+        mode,
+        { timeout },
+      ).catch(() => {})
+
+      let builder = new AxeBuilder({ page }).withRules(['color-contrast'])
+      for (const sel of exclude)
+        builder = builder.exclude(sel)
+
+      const results = await builder.analyze()
+      for (const v of results.violations) {
+        violations.push({
+          id: v.id,
+          impact: v.impact,
+          help: v.help,
+          mode,
+          nodes: v.nodes.map(n => ({
+            target: n.target.map(String),
+            failureSummary: n.failureSummary,
+          })),
+        })
+      }
+      await context.close()
+    }
+  }
+  finally {
+    await browser.close()
+  }
+
+  return { passed: violations.length === 0, violations }
+}
+
+/** Format a scan result as a readable, multi-line report. */
+export function formatContrastReport(result: ContrastScanResult): string {
+  if (result.passed)
+    return '✓ No color-contrast violations found.'
+  const lines: string[] = [`✗ ${result.violations.length} color-contrast violation(s):`, '']
+  for (const v of result.violations) {
+    lines.push(`  [${v.mode}] ${v.help}${v.impact ? ` (${v.impact})` : ''}`)
+    for (const node of v.nodes)
+      lines.push(`    - ${node.target.join(' ')}`)
+  }
+  return lines.join('\n')
+}

package/components/Action/ActionButton.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import ActionButton from './ActionButton.vue'
+
+const meta = {
+  title: 'Action/ActionButton',
+  component: ActionButton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['action', 'primary', 'text'] },
+    size: { control: 'inline-radio', options: ['sm', 'md'] },
+  },
+  args: { variant: 'action', size: 'md' },
+} satisfies Meta<typeof ActionButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Action: Story = {
+  render: (args: Record<string, unknown>) => ({
+    components: { ActionButton },
+    setup() {
+      return { args }
+    },
+    template: `<ActionButton v-bind="args">Action</ActionButton>`,
+  }),
+}
+
+export const Primary: Story = {
+  render: () => ({
+    components: { ActionButton },
+    template: `<ActionButton variant="primary">Primary</ActionButton>`,
+  }),
+}
+
+export const Variants: Story = {
+  render: () => ({
+    components: { ActionButton },
+    template: `<div class="flex items-center gap-3">
+      <ActionButton>Action</ActionButton>
+      <ActionButton variant="primary">Primary</ActionButton>
+      <ActionButton variant="text">Text</ActionButton>
+      <ActionButton :loading="true">Loading</ActionButton>
+      <ActionButton :disabled="true">Disabled</ActionButton>
+    </div>`,
+  }),
+}
+
+export const WithIconAndSizes: Story = {
+  render: () => ({
+    components: { ActionButton },
+    template: `<div class="flex items-center gap-3">
+      <ActionButton icon="i-ph:folder" size="sm">Small</ActionButton>
+      <ActionButton icon="i-ph:folder" size="md">Medium</ActionButton>
+    </div>`,
+  }),
+}

package/components/Action/ActionButton.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import FeedbackSpinner from '../Feedback/FeedbackSpinner.vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Render as another element/component (e.g. `RouterLink`). */
+    as?: string
+    to?: string
+    href?: string
+    icon?: string
+    variant?: 'action' | 'primary' | 'text'
+    size?: 'sm' | 'md'
+    loading?: boolean
+    disabled?: boolean
+  }>(),
+  { variant: 'action', size: 'md' },
+)
+
+const tag = computed(() => {
+  if (props.as)
+    return props.as
+  if (props.href != null || props.to != null)
+    return 'a'
+  return 'button'
+})
+
+const isLink = computed(() => tag.value === 'a')
+const isButton = computed(() => tag.value === 'button')
+const sm = computed(() => props.size === 'sm')
+
+const variantClass = computed(() => {
+  if (props.variant === 'primary')
+    return sm.value ? 'btn-primary text-sm px-2.5! py-1!' : 'btn-primary'
+  if (props.variant === 'text')
+    return `inline-flex items-center gap-1.5 op75 hover:op100 transition${sm.value ? ' text-sm' : ''}`
+  return sm.value ? 'btn-action-sm' : 'btn-action'
+})
+
+const disabledState = computed(() => props.disabled || props.loading)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="[variantClass, { 'pointer-events-none op-mute': disabledState && !isButton }]"
+    :href="isLink ? (href ?? to) : undefined"
+    :to="as && to != null ? to : undefined"
+    :disabled="isButton ? disabledState : undefined"
+    :aria-disabled="disabledState || undefined"
+    :aria-busy="loading || undefined"
+  >
+    <FeedbackSpinner v-if="loading" size="1em" />
+    <span v-else-if="icon" :class="icon" aria-hidden="true" />
+    <slot />
+  </component>
+</template>

package/components/Action/ActionDarkToggle.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import ActionDarkToggle from './ActionDarkToggle.vue'
+
+const meta = {
+  title: 'Action/ActionDarkToggle',
+  component: ActionDarkToggle,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ActionDarkToggle>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// The component is controlled: the app owns the `colorScheme` and reacts to
+// `@update:color-scheme`. Here a local ref also toggles the document class.
+export const Default: Story = {
+  render: () => ({
+    components: { ActionDarkToggle },
+    setup() {
+      const colorScheme = ref<'light' | 'dark'>(
+        document.documentElement.classList.contains('dark') ? 'dark' : 'light',
+      )
+      function onUpdate(value: 'light' | 'dark'): void {
+        colorScheme.value = value
+        document.documentElement.classList.toggle('dark', value === 'dark')
+      }
+      return { colorScheme, onUpdate }
+    },
+    template: `<ActionDarkToggle :color-scheme="colorScheme" @update:color-scheme="onUpdate" />`,
+  }),
+}

package/components/Action/ActionDarkToggle.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, nextTick } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Current color scheme — the app owns this state. */
+    colorScheme?: 'light' | 'dark'
+    /** Disable the view-transition circular reveal. */
+    animated?: boolean
+  }>(),
+  { colorScheme: 'light', animated: true },
+)
+
+const emit = defineEmits<{ 'update:colorScheme': ['light' | 'dark'] }>()
+
+const isDark = computed(() => props.colorScheme === 'dark')
+
+function prefersReducedMotion(): boolean {
+  return typeof matchMedia !== 'undefined'
+    && matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+function onClick(event: MouseEvent): void {
+  const next = isDark.value ? 'light' : 'dark'
+  const doc = document as Document & {
+    startViewTransition?: (cb: () => Promise<void> | void) => { ready: Promise<void> }
+  }
+  const canAnimate = props.animated
+    && typeof doc.startViewTransition === 'function'
+    && !prefersReducedMotion()
+
+  if (!canAnimate) {
+    emit('update:colorScheme', next)
+    return
+  }
+
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
+  const toDark = next === 'dark'
+
+  const transition = doc.startViewTransition!(async () => {
+    emit('update:colorScheme', next)
+    await nextTick()
+  })
+
+  transition.ready.then(() => {
+    const clip = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ]
+    document.documentElement.animate(
+      { clipPath: toDark ? clip : [...clip].reverse() },
+      {
+        duration: 400,
+        easing: 'ease-in',
+        pseudoElement: toDark ? '::view-transition-new(root)' : '::view-transition-old(root)',
+      },
+    )
+  })
+}
+</script>
+
+<template>
+  <slot :is-dark="isDark" :toggle="onClick">
+    <button
+      type="button"
+      class="btn-icon"
+      :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+      :aria-pressed="isDark"
+      @click="onClick"
+    >
+      <svg v-if="isDark" width="1.1em" height="1.1em" viewBox="0 0 24 24" aria-hidden="true">
+        <path
+          fill="currentColor"
+          d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-5.4-5.4c0-1.81.89-3.41 2.26-4.4-.44-.06-.9-.1-1.36-.1Z"
+        />
+      </svg>
+      <svg v-else width="1.1em" height="1.1em" viewBox="0 0 24 24" aria-hidden="true">
+        <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4" />
+        </g>
+      </svg>
+    </button>
+  </slot>
+</template>

package/components/Action/ActionIconButton.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import ActionIconButton from './ActionIconButton.vue'
+
+const meta = {
+  title: 'Action/ActionIconButton',
+  component: ActionIconButton,
+  tags: ['autodocs'],
+  args: { icon: 'i-ph:folder', tooltip: 'Open folder' },
+} satisfies Meta<typeof ActionIconButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { icon: 'i-ph:folder', tooltip: 'Open folder' },
+}
+
+export const Active: Story = {
+  args: { icon: 'i-ph:gear', tooltip: 'Settings', active: true },
+}
+
+export const States: Story = {
+  render: () => ({
+    components: { ActionIconButton },
+    template: `<div class="flex items-center gap-2">
+      <ActionIconButton icon="i-ph:folder" tooltip="Open folder" />
+      <ActionIconButton icon="i-ph:gear" tooltip="Settings" :active="true" />
+      <ActionIconButton icon="i-ph:trash" tooltip="Delete" :disabled="true" />
+    </div>`,
+  }),
+}
+
+export const Compact: Story = {
+  args: { icon: 'i-ph:dots-three', tooltip: 'More', compact: true },
+}
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { ActionIconButton },
+    template: `<div class="flex items-center gap-2">
+      <ActionIconButton icon="i-ph:gear" tooltip="sm" size="sm" />
+      <ActionIconButton icon="i-ph:gear" tooltip="md" size="md" />
+      <ActionIconButton icon="i-ph:gear" tooltip="lg" size="lg" />
+      <ActionIconButton icon="i-ph:gear" tooltip="compact" :compact="true" />
+    </div>`,
+  }),
+}