@antfu/design 0.1.0

package/components/Form/FormSelect.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import FormSelect from './FormSelect.vue'
+
+const meta = {
+  title: 'Form/FormSelect',
+  component: FormSelect,
+  tags: ['autodocs'],
+  args: { options: [] }, // required prop; each story supplies real options via render
+} satisfies Meta<typeof FormSelect>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { FormSelect },
+    setup() {
+      return {
+        value: ref('green'),
+        options: [
+          { value: 'green', label: 'antfu green' },
+          { value: 'blue', label: 'GitHub blue' },
+          { value: 'purple', label: 'Vite purple' },
+        ],
+      }
+    },
+    template: `<FormSelect v-model="value" :options="options" placeholder="Pick a theme" />`,
+  }),
+}
+
+export const Empty: Story = {
+  render: () => ({
+    components: { FormSelect },
+    setup() {
+      return {
+        value: ref<string>(),
+        options: [
+          { value: 'a', label: 'Option A' },
+          { value: 'b', label: 'Option B' },
+          { value: 'c', label: 'Disabled', disabled: true },
+        ],
+      }
+    },
+    template: `<FormSelect v-model="value" :options="options" placeholder="Select…" />`,
+  }),
+}

package/components/Form/FormSelect.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectPortal, SelectRoot, SelectTrigger, SelectValue, SelectViewport } from 'reka-ui'
+
+export interface SelectOption {
+  value: string
+  label?: string
+  disabled?: boolean
+}
+
+defineProps<{
+  options: SelectOption[]
+  placeholder?: string
+  disabled?: boolean
+}>()
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <SelectRoot v-model="model" :disabled="disabled">
+    <SelectTrigger
+      class="text-sm px-2.5 outline-none border border-base rounded bg-base inline-flex gap-2 h-9 min-w-40 transition items-center justify-between data-[disabled]:op50 data-[disabled]:pointer-events-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+    >
+      <SelectValue :placeholder="placeholder ?? 'Select…'" />
+      <SelectIcon class="op-fade">
+        <svg width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true">
+          <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="m6 9l6 6l6-6" />
+        </svg>
+      </SelectIcon>
+    </SelectTrigger>
+    <SelectPortal>
+      <SelectContent
+        position="popper"
+        :side-offset="6"
+        class="border border-base rounded-lg bg-base min-w-[--reka-select-trigger-width] shadow-lg z-dropdown overflow-hidden"
+      >
+        <SelectViewport class="p-1">
+          <SelectItem
+            v-for="opt in options"
+            :key="opt.value"
+            :value="opt.value"
+            :disabled="opt.disabled"
+            class="text-sm color-base py-1.5 pl-7 pr-2 outline-none rounded-md flex gap-2 cursor-pointer select-none transition items-center relative data-[highlighted]:bg-active data-[disabled]:op50 data-[disabled]:pointer-events-none"
+          >
+            <SelectItemIndicator class="color-active inline-flex items-center left-1.5 absolute">
+              <svg width="0.85em" height="0.85em" viewBox="0 0 24 24" aria-hidden="true">
+                <path fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M20 6L9 17l-5-5" />
+              </svg>
+            </SelectItemIndicator>
+            <SelectItemText>{{ opt.label ?? opt.value }}</SelectItemText>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>

package/components/Form/FormSwitch.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import FormSwitch from './FormSwitch.vue'
+
+const meta = {
+  title: 'Form/FormSwitch',
+  component: FormSwitch,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FormSwitch>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { FormSwitch },
+    setup() {
+      return { on: ref(true) }
+    },
+    template: `<FormSwitch v-model="on" label="Dark surfaces" />`,
+  }),
+}
+
+export const States: Story = {
+  render: () => ({
+    components: { FormSwitch },
+    setup() {
+      return { a: ref(true), b: ref(false), c: ref(false) }
+    },
+    template: `<div class="flex flex-col gap-3">
+      <FormSwitch v-model="a" label="On" />
+      <FormSwitch v-model="b" label="Off" />
+      <FormSwitch v-model="c" label="Disabled" disabled />
+    </div>`,
+  }),
+}

package/components/Form/FormSwitch.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { SwitchRoot, SwitchThumb } from 'reka-ui'
+
+defineProps<{
+  label?: string
+  disabled?: boolean
+}>()
+
+const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <label
+    class="text-sm inline-flex gap-2 cursor-pointer select-none items-center"
+    :class="{ 'op50 pointer-events-none': disabled }"
+  >
+    <SwitchRoot
+      v-model="model"
+      :disabled="disabled"
+      class="outline-none rounded-full bg-active h-5 w-9 transition relative data-[state=checked]:bg-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/40"
+    >
+      <SwitchThumb class="rounded-full bg-white h-4 w-4 block shadow translate-x-0.5 transition-transform data-[state=checked]:translate-x-4" />
+    </SwitchRoot>
+    <span v-if="label || $slots.default"><slot>{{ label }}</slot></span>
+  </label>
+</template>

package/components/Form/FormTextInput.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import FormTextInput from './FormTextInput.vue'
+
+const meta = {
+  title: 'Form/FormTextInput',
+  component: FormTextInput,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'inline-radio', options: ['sm', 'md'] },
+  },
+} satisfies Meta<typeof FormTextInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { FormTextInput },
+    setup() {
+      return { text: ref('') }
+    },
+    template: `<div class="w-72"><FormTextInput v-model="text" placeholder="Your name" icon="i-ph:folder" clearable /></div>`,
+  }),
+}
+
+export const States: Story = {
+  render: () => ({
+    components: { FormTextInput },
+    setup() {
+      return { a: ref('Hello'), b: ref(''), c: ref('Locked') }
+    },
+    template: `<div class="flex flex-col gap-3 w-72">
+      <FormTextInput v-model="a" placeholder="Default" clearable />
+      <FormTextInput v-model="b" placeholder="Small" size="sm" />
+      <FormTextInput v-model="c" placeholder="Disabled" disabled />
+    </div>`,
+  }),
+}

package/components/Form/FormTextInput.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    icon?: string
+    clearable?: boolean
+    placeholder?: string
+    type?: string
+    size?: 'sm' | 'md'
+    disabled?: boolean
+    /** Render the invalid (red) state. */
+    invalid?: boolean
+  }>(),
+  { type: 'text', size: 'md' },
+)
+
+const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <label
+    class="px-2 border rounded bg-base inline-flex gap-2 transition items-center focus-within:ring-2"
+    :class="[
+      size === 'sm' ? 'h-7 text-sm' : 'h-9',
+      invalid ? 'border-red-500/60 focus-within:ring-red-500/40' : 'border-base focus-within:ring-primary-500/40',
+      { 'op50 pointer-events-none': disabled },
+    ]"
+  >
+    <span v-if="icon" :class="icon" class="op-fade shrink-0" aria-hidden="true" />
+    <slot name="prefix" />
+    <input
+      v-model="model"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-invalid="invalid || undefined"
+      class="color-base outline-none bg-transparent flex-1 min-w-0 placeholder:op-mute"
+    >
+    <button
+      v-if="clearable && model"
+      type="button"
+      class="op-fade shrink-0 transition hover:op100"
+      aria-label="Clear"
+      @click="model = ''"
+    >
+      <svg width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true">
+        <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M6 6l12 12M18 6L6 18" />
+      </svg>
+    </button>
+    <slot name="suffix" />
+  </label>
+</template>

package/components/Form/FormTextarea.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import FormTextarea from './FormTextarea.vue'
+
+const meta = {
+  title: 'Form/FormTextarea',
+  component: FormTextarea,
+  tags: ['autodocs'],
+  args: { placeholder: 'Write something…', rows: 4, resize: true },
+} satisfies Meta<typeof FormTextarea>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { FormTextarea },
+    setup() {
+      return { args, text: ref('') }
+    },
+    template: `<div class="w-72"><FormTextarea v-bind="args" v-model="text" /></div>`,
+  }),
+}
+
+export const Invalid: Story = {
+  render: args => ({
+    components: { FormTextarea },
+    setup() {
+      return { args, text: ref('Too short') }
+    },
+    template: `<div class="w-72"><FormTextarea v-bind="args" v-model="text" invalid /></div>`,
+  }),
+}
+
+export const States: Story = {
+  render: () => ({
+    components: { FormTextarea },
+    setup() {
+      return { a: ref('Resizable by default'), b: ref('No resize handle'), c: ref('Disabled') }
+    },
+    template: `<div class="flex flex-col gap-3 w-72">
+      <FormTextarea v-model="a" placeholder="Default" />
+      <FormTextarea v-model="b" placeholder="Fixed" :resize="false" />
+      <FormTextarea v-model="c" placeholder="Disabled" disabled />
+    </div>`,
+  }),
+}

package/components/Form/FormTextarea.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    placeholder?: string
+    /** Visible rows. */
+    rows?: number
+    disabled?: boolean
+    /** Render the invalid (red) state. */
+    invalid?: boolean
+    /** Allow the user to resize the textarea. */
+    resize?: boolean
+  }>(),
+  { rows: 4, resize: true },
+)
+
+const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <textarea
+    v-model="model"
+    :rows="rows"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :aria-invalid="invalid || undefined"
+    class="color-base px-2 py-1.5 outline-none border rounded bg-base w-full transition placeholder:op-mute focus:ring-2"
+    :class="[
+      invalid ? 'border-red-500/60 focus:ring-red-500/40' : 'border-base focus:ring-primary-500/40',
+      { 'resize-none': !resize, 'op50 pointer-events-none': disabled },
+    ]"
+  />
+</template>

package/components/Layout/LayoutBreadcrumb.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import LayoutBreadcrumb from './LayoutBreadcrumb.vue'
+
+const meta = {
+  title: 'Layout/LayoutBreadcrumb',
+  component: LayoutBreadcrumb,
+  tags: ['autodocs'],
+  args: {
+    items: [
+      { label: 'Home', href: '#' },
+      { label: 'Projects', href: '#' },
+      { label: 'design', href: '#' },
+      { label: 'LayoutBreadcrumb.vue' },
+    ],
+  },
+} satisfies Meta<typeof LayoutBreadcrumb>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const ChevronSeparator: Story = {
+  render: args => ({
+    components: { LayoutBreadcrumb },
+    setup() {
+      return { args }
+    },
+    template: `<LayoutBreadcrumb v-bind="args">
+      <template #separator>
+        <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
+          <path fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M6 3l5 5-5 5" />
+        </svg>
+      </template>
+    </LayoutBreadcrumb>`,
+  }),
+}
+
+export const Truncated: Story = {
+  args: {
+    items: [
+      { label: 'Home', href: '#' },
+      { label: 'A very long intermediate section name that should truncate', href: '#' },
+      { label: 'Another long current page title that is also quite verbose' },
+    ],
+  },
+  render: args => ({
+    components: { LayoutBreadcrumb },
+    setup() {
+      return { args }
+    },
+    template: `<div class="w-72"><LayoutBreadcrumb v-bind="args" /></div>`,
+  }),
+}

package/components/Layout/LayoutBreadcrumb.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+export interface Crumb {
+  label: string
+  /** Link target; the last crumb is rendered as plain text regardless. */
+  href?: string
+  /** Optional leading icon class. */
+  icon?: string
+}
+
+withDefaults(
+  defineProps<{
+    items: Crumb[]
+    /** Text rendered between crumbs; overridden by the `#separator` slot. */
+    separator?: string
+  }>(),
+  { separator: '/' },
+)
+
+defineSlots<{
+  separator?: () => any
+}>()
+</script>
+
+<template>
+  <nav aria-label="Breadcrumb">
+    <ol class="text-sm flex flex-wrap min-w-0 items-center">
+      <li
+        v-for="(item, i) in items"
+        :key="i"
+        class="flex min-w-0 items-center"
+      >
+        <span v-if="i > 0" class="mx-1 op-mute shrink-0" aria-hidden="true">
+          <slot name="separator">{{ separator }}</slot>
+        </span>
+        <a
+          v-if="item.href && i < items.length - 1"
+          :href="item.href"
+          class="color-muted outline-none rounded inline-flex gap-1 min-w-0 transition items-center hover:color-active focus-visible:ring-2 focus-visible:ring-primary-500/40"
+        >
+          <span v-if="item.icon" :class="item.icon" class="shrink-0" aria-hidden="true" />
+          <span class="truncate">{{ item.label }}</span>
+        </a>
+        <span
+          v-else
+          class="color-base inline-flex gap-1 min-w-0 items-center"
+          :aria-current="i === items.length - 1 ? 'page' : undefined"
+        >
+          <span v-if="item.icon" :class="item.icon" class="shrink-0" aria-hidden="true" />
+          <span class="truncate">{{ item.label }}</span>
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>

package/components/Layout/LayoutCard.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import LayoutCard from './LayoutCard.vue'
+
+const meta = {
+  title: 'Layout/LayoutCard',
+  component: LayoutCard,
+  tags: ['autodocs'],
+} satisfies Meta<typeof LayoutCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { LayoutCard },
+    template: `<LayoutCard class="w-64">
+      <div class="font-medium">Card title</div>
+      <p class="text-sm color-muted mt-1">A bordered, token-driven surface.</p>
+    </LayoutCard>`,
+  }),
+}
+
+export const Elevated: Story = {
+  render: () => ({
+    components: { LayoutCard },
+    template: `<LayoutCard class="w-64" elevated>
+      <div class="font-medium">Elevated card</div>
+      <p class="text-sm color-muted mt-1">With a subtle drop shadow.</p>
+    </LayoutCard>`,
+  }),
+}

package/components/Layout/LayoutCard.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    as?: string
+    padding?: boolean
+    /** Subtle drop shadow. */
+    elevated?: boolean
+  }>(),
+  { padding: true },
+)
+</script>
+
+<template>
+  <component
+    :is="as || 'div'"
+    class="border border-base rounded-xl bg-base"
+    :class="[{ 'p-4': padding }, { 'shadow-sm': elevated }]"
+  >
+    <slot />
+  </component>
+</template>

package/components/Layout/LayoutDataTable.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import LayoutDataTable from './LayoutDataTable.vue'
+
+// `component` is omitted: this is a generic SFC, which doesn't fit Storybook's
+// `Meta<typeof Component>` typing. The render below uses it directly.
+const meta = {
+  title: 'Layout/LayoutDataTable',
+  tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const columns = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'type', label: 'Type' },
+  { key: 'size', label: 'Size', align: 'right' as const, sortable: true, width: '6rem' },
+  { key: 'time', label: 'Modified', align: 'right' as const, sortable: true, width: '8rem' },
+]
+
+const rows = [
+  { name: 'index.ts', type: 'file', size: 1240, time: '2026-06-20' },
+  { name: 'components', type: 'dir', size: 8, time: '2026-06-25' },
+  { name: 'README.md', type: 'file', size: 3072, time: '2026-06-18' },
+  { name: 'package.json', type: 'file', size: 856, time: '2026-06-26' },
+  { name: 'utils', type: 'dir', size: 12, time: '2026-06-22' },
+]
+
+export const Default: Story = {
+  render: () => ({
+    components: { LayoutDataTable },
+    setup() {
+      return { columns, rows, sortBy: ref<string | undefined>('name') }
+    },
+    template: `<div class="border border-base rounded-lg max-w-2xl overflow-hidden">
+      <LayoutDataTable v-model:sortBy="sortBy" :columns="columns" :rows="rows" />
+    </div>`,
+  }),
+}
+
+export const CustomCells: Story = {
+  render: () => ({
+    components: { LayoutDataTable },
+    setup() {
+      return { columns, rows }
+    },
+    template: `<div class="border border-base rounded-lg max-w-2xl overflow-hidden">
+      <LayoutDataTable :columns="columns" :rows="rows" :sticky-header="false">
+        <template #cell="{ column, value }">
+          <span v-if="column.key === 'name'" class="font-mono">{{ value }}</span>
+          <span v-else-if="column.key === 'type'" class="badge-muted">{{ value }}</span>
+          <span v-else-if="column.key === 'size'" class="tabular-nums">{{ value }} B</span>
+          <span v-else class="color-muted tabular-nums">{{ value }}</span>
+        </template>
+      </LayoutDataTable>
+    </div>`,
+  }),
+}
+
+export const StickyHeader: Story = {
+  render: () => ({
+    components: { LayoutDataTable },
+    setup() {
+      const many = Array.from({ length: 30 }, (_, i) => ({
+        name: `file-${i + 1}.ts`,
+        type: i % 3 === 0 ? 'dir' : 'file',
+        size: (i + 1) * 128,
+        time: `2026-06-${String((i % 28) + 1).padStart(2, '0')}`,
+      }))
+      return { columns, rows: many, sortBy: ref<string | undefined>('size'), sortDir: ref<'asc' | 'desc'>('desc') }
+    },
+    template: `<div class="border border-base rounded-lg max-w-2xl h-64 overflow-auto">
+      <LayoutDataTable v-model:sortBy="sortBy" v-model:sortDir="sortDir" :columns="columns" :rows="rows" />
+    </div>`,
+  }),
+}