@antfu/design 0.1.0

package/components/Feedback/FeedbackToasts.vue

@@ -0,0 +1,105 @@
+<script lang="ts">
+export type ToastType = 'info' | 'success' | 'warning' | 'error'
+
+/** A single toast. The **app** owns the list and the ids — this component is presentational. */
+export interface ToastItem {
+  /** Stable identity, echoed back by the `dismiss` event. */
+  id: string | number
+  message: string
+  title?: string
+  type?: ToastType
+  /** Leading icon class (e.g. `i-ph:check-circle`). */
+  icon?: string
+  /** Auto-dismiss after this many ms (handled by `useToast`, not this component). */
+  duration?: number
+  /** Determinate progress, 0–1 — renders a progress bar (e.g. a download/scan). */
+  progress?: number
+  /** Optional action button label; pressing it fires the `action` event. */
+  action?: string
+}
+</script>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** The toast list — owned and mutated by the app (e.g. a local `ref`). */
+    items: ToastItem[]
+    position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'
+  }>(),
+  { position: 'bottom-right' },
+)
+
+const emit = defineEmits<{
+  /** Fired when a toast's close button is pressed; the app removes it from `items`. */
+  dismiss: [id: string | number]
+  /** Fired when a toast's action button is pressed. */
+  action: [id: string | number]
+}>()
+
+const POSITION = {
+  'top-right': 'top-4 right-4',
+  'bottom-right': 'bottom-4 right-4',
+  'top-left': 'top-4 left-4',
+  'bottom-left': 'bottom-4 left-4',
+} as const
+
+const TYPE_CLASS: Record<ToastType, string> = {
+  info: 'color-active',
+  success: 'text-green-600 dark:text-green-400',
+  warning: 'text-amber-600 dark:text-amber-400',
+  error: 'text-red-600 dark:text-red-400',
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      class="flex flex-col gap-2 max-w-[calc(100vw-2rem)] w-80 fixed z-toast"
+      :class="POSITION[position]"
+      role="region"
+      aria-label="Notifications"
+    >
+      <TransitionGroup
+        enter-active-class="transition duration-250 ease-out"
+        leave-active-class="transition duration-250 ease-out absolute w-full"
+        enter-from-class="op0 translate-y-2 scale-98"
+        leave-to-class="op0 translate-y-2 scale-98"
+      >
+        <div
+          v-for="item in items"
+          :key="item.id"
+          class="p-3 border border-base rounded-lg bg-glass flex gap-2 shadow-lg items-start"
+          role="status"
+          aria-live="polite"
+        >
+          <span v-if="item.icon" :class="[item.icon, TYPE_CLASS[item.type ?? 'info']]" class="mt-0.5 shrink-0" aria-hidden="true" />
+          <div class="flex-1 min-w-0">
+            <div v-if="item.title" class="text-sm font-medium" :class="TYPE_CLASS[item.type ?? 'info']">
+              {{ item.title }}
+            </div>
+            <div class="text-sm color-muted break-words">
+              {{ item.message }}
+            </div>
+            <div v-if="item.progress != null" class="mt-1.5 rounded-full bg-active h-1 w-full overflow-hidden">
+              <div class="rounded-full h-full transition-all duration-300" :class="TYPE_CLASS[item.type ?? 'info']" style="background: currentColor" :style="{ width: `${Math.round(Math.max(0, Math.min(1, item.progress)) * 100)}%` }" />
+            </div>
+            <button
+              v-if="item.action"
+              type="button"
+              class="text-sm font-medium mt-1.5 outline-none rounded hover:underline focus-visible:ring-2 focus-visible:ring-primary-500/40"
+              :class="TYPE_CLASS[item.type ?? 'info']"
+              @click="emit('action', item.id)"
+            >
+              {{ item.action }}
+            </button>
+          </div>
+          <button type="button" class="op-fade shrink-0 transition hover:op100" aria-label="Dismiss" @click="emit('dismiss', item.id)">
+            <svg width="0.9em" height="0.9em" 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>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>

package/components/Form/FormCheckbox.stories.ts

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

package/components/Form/FormCheckbox.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { CheckboxIndicator, CheckboxRoot } 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 }"
+  >
+    <CheckboxRoot
+      v-model="model"
+      :disabled="disabled"
+      class="outline-none border border-base rounded bg-base flex h-4 w-4 transition items-center justify-center data-[state=checked]:border-primary-500 data-[state=checked]:bg-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/40"
+    >
+      <CheckboxIndicator class="text-white">
+        <svg width="0.8em" height="0.8em" 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>
+      </CheckboxIndicator>
+    </CheckboxRoot>
+    <span v-if="label || $slots.default"><slot>{{ label }}</slot></span>
+  </label>
+</template>

package/components/Form/FormCombobox.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import FormCombobox from './FormCombobox.vue'
+
+const meta = {
+  title: 'Form/FormCombobox',
+  component: FormCombobox,
+  tags: ['autodocs'],
+  args: { options: [] }, // required prop; each story supplies real options via render
+} satisfies Meta<typeof FormCombobox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const frameworks = [
+  { value: 'vue', label: 'Vue' },
+  { value: 'react', label: 'React' },
+  { value: 'svelte', label: 'Svelte' },
+  { value: 'solid', label: 'Solid' },
+  { value: 'angular', label: 'Angular' },
+  { value: 'qwik', label: 'Qwik' },
+]
+
+export const Default: Story = {
+  render: () => ({
+    components: { FormCombobox },
+    setup() {
+      return {
+        value: ref('vue'),
+        options: frameworks,
+      }
+    },
+    template: `<FormCombobox v-model="value" :options="options" placeholder="Search a framework…" />`,
+  }),
+}

package/components/Form/FormCombobox.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxPortal, ComboboxRoot, ComboboxViewport } from 'reka-ui'
+
+export interface ComboboxOption {
+  value: string
+  label?: string
+  disabled?: boolean
+}
+
+withDefaults(
+  defineProps<{
+    /** Selectable options. `label` falls back to `value`; `disabled` blocks selection. */
+    options: ComboboxOption[]
+    /** Placeholder shown in the search input while empty. */
+    placeholder?: string
+    /** Disable the whole combobox. */
+    disabled?: boolean
+  }>(),
+  {},
+)
+
+/** The selected option's `value`. */
+const model = defineModel<string>()
+
+// reka-ui filters items by their `textValue` against the typed query, so we
+// surface the visible label as the search text — this keeps filtering correct
+// even when the `#option` slot customises rendering.
+function optionLabel(option: ComboboxOption) {
+  return option.label ?? option.value
+}
+</script>
+
+<template>
+  <ComboboxRoot v-model="model" :disabled="disabled">
+    <ComboboxAnchor
+      class="text-sm px-2 border border-base rounded bg-base inline-flex gap-2 h-9 min-w-40 transition items-center data-[disabled]:op50 data-[disabled]:pointer-events-none focus-within:ring-2 focus-within:ring-primary-500/40"
+    >
+      <svg width="1em" height="1em" viewBox="0 0 24 24" class="op-fade shrink-0" aria-hidden="true">
+        <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <circle cx="11" cy="11" r="7" />
+          <path d="m21 21l-4.3-4.3" />
+        </g>
+      </svg>
+      <ComboboxInput
+        :placeholder="placeholder ?? 'Search…'"
+        class="color-base outline-none bg-transparent flex-1 min-w-0 placeholder:op-mute"
+      />
+    </ComboboxAnchor>
+    <ComboboxPortal>
+      <ComboboxContent
+        position="popper"
+        :side-offset="6"
+        class="p-1 border border-base rounded-lg bg-base min-w-[--reka-combobox-trigger-width] shadow-lg z-dropdown"
+        data-af-animate
+      >
+        <ComboboxViewport>
+          <ComboboxItem
+            v-for="opt in options"
+            :key="opt.value"
+            :value="opt.value"
+            :text-value="optionLabel(opt)"
+            :disabled="opt.disabled"
+            class="text-sm color-base px-2 py-1.5 outline-none rounded-md flex gap-2 cursor-pointer select-none transition items-center data-[highlighted]:bg-active data-[disabled]:op50 data-[disabled]:pointer-events-none"
+          >
+            <span class="flex-1">
+              <slot name="option" :option="opt">{{ optionLabel(opt) }}</slot>
+            </span>
+            <ComboboxItemIndicator class="color-active inline-flex shrink-0 items-center">
+              <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>
+            </ComboboxItemIndicator>
+          </ComboboxItem>
+          <ComboboxEmpty class="text-sm px-2 py-1.5 text-center op-fade">
+            <slot name="empty">
+              No results
+            </slot>
+          </ComboboxEmpty>
+        </ComboboxViewport>
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
+</template>

package/components/Form/FormField.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import FormField from './FormField.vue'
+import FormTextInput from './FormTextInput.vue'
+
+const meta = {
+  title: 'Form/FormField',
+  component: FormField,
+  tags: ['autodocs'],
+  args: { label: 'Project name' },
+} satisfies Meta<typeof FormField>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { FormField, FormTextInput },
+    setup() {
+      return { args, text: ref('') }
+    },
+    template: `<div class="w-72">
+      <FormField v-bind="args" id="project-name" description="Shown publicly on your profile.">
+        <FormTextInput v-model="text" id="project-name" placeholder="my-awesome-lib" clearable />
+      </FormField>
+    </div>`,
+  }),
+}
+
+export const Required: Story = {
+  render: args => ({
+    components: { FormField, FormTextInput },
+    setup() {
+      return { args, text: ref('') }
+    },
+    template: `<div class="w-72">
+      <FormField v-bind="args" id="project-required" required description="This field is mandatory.">
+        <FormTextInput v-model="text" id="project-required" placeholder="my-awesome-lib" />
+      </FormField>
+    </div>`,
+  }),
+}
+
+export const WithError: Story = {
+  render: args => ({
+    components: { FormField, FormTextInput },
+    setup() {
+      return { args, text: ref('') }
+    },
+    template: `<div class="w-72">
+      <FormField v-bind="args" id="project-error" required error="A project name is required.">
+        <FormTextInput v-model="text" id="project-error" placeholder="my-awesome-lib" />
+      </FormField>
+    </div>`,
+  }),
+}

package/components/Form/FormField.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** Visible field label. Overridable via the `#label` slot. */
+    label?: string
+    /** Helper text shown below the control. Overridable via the `#description` slot. */
+    description?: string
+    /** Error message shown below the control (with `role="alert"`). Overridable via the `#error` slot. */
+    error?: string
+    /** Show a red `*` marker after the label. */
+    required?: boolean
+    /** Associates the `<label>` with a control via its `id`. */
+    id?: string
+  }>(),
+  {},
+)
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="label || $slots.label" :for="id" class="text-sm color-base font-medium">
+      <slot name="label">{{ label }}<span v-if="required" class="text-red-500" aria-hidden="true">&nbsp;*</span></slot>
+    </label>
+    <slot />
+    <p v-if="description || $slots.description" class="text-sm color-faint">
+      <slot name="description">
+        {{ description }}
+      </slot>
+    </p>
+    <p v-if="error || $slots.error" role="alert" class="text-sm text-red-600 dark:text-red-400">
+      <slot name="error">
+        {{ error }}
+      </slot>
+    </p>
+  </div>
+</template>

package/components/Form/FormNumberInput.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import FormNumberInput from './FormNumberInput.vue'
+
+const meta = {
+  title: 'Form/FormNumberInput',
+  component: FormNumberInput,
+  tags: ['autodocs'],
+  args: { step: 1, controls: true },
+} satisfies Meta<typeof FormNumberInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { FormNumberInput },
+    setup() {
+      return { args, value: ref<number | undefined>(3) }
+    },
+    template: `<div class="w-40"><FormNumberInput v-bind="args" v-model="value" placeholder="0" /></div>`,
+  }),
+}
+
+export const MinMax: Story = {
+  render: args => ({
+    components: { FormNumberInput },
+    setup() {
+      return { args, value: ref<number | undefined>(5) }
+    },
+    template: `<div class="w-40"><FormNumberInput v-bind="args" v-model="value" :min="0" :max="10" /></div>`,
+  }),
+}
+
+export const States: Story = {
+  render: () => ({
+    components: { FormNumberInput },
+    setup() {
+      return { a: ref<number | undefined>(2), b: ref<number | undefined>(8), c: ref<number | undefined>(42) }
+    },
+    template: `<div class="flex flex-col gap-3 w-40">
+      <FormNumberInput v-model="a" :min="0" :max="10" :step="2" />
+      <FormNumberInput v-model="b" :controls="false" placeholder="No controls" />
+      <FormNumberInput v-model="c" invalid />
+    </div>`,
+  }),
+}

package/components/Form/FormNumberInput.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { clamp } from '../../utils'
+
+const props = withDefaults(
+  defineProps<{
+    min?: number
+    max?: number
+    /** Increment/decrement applied by the stepper buttons. */
+    step?: number
+    placeholder?: string
+    disabled?: boolean
+    /** Render the invalid (red) state. */
+    invalid?: boolean
+    /** Show the −/+ stepper buttons. */
+    controls?: boolean
+  }>(),
+  { step: 1, controls: true },
+)
+
+const model = defineModel<number>()
+
+function bounded(value: number): number {
+  return clamp(value, props.min ?? -Infinity, props.max ?? Infinity)
+}
+
+function onInput(event: Event): void {
+  const raw = (event.target as HTMLInputElement).value
+  model.value = raw === '' ? undefined : Number(raw)
+}
+
+function stepBy(direction: number): void {
+  model.value = bounded((model.value ?? 0) + direction * props.step)
+}
+
+const atMin = computed(() => props.min != null && model.value != null && model.value <= props.min)
+const atMax = computed(() => props.max != null && model.value != null && model.value >= props.max)
+</script>
+
+<template>
+  <div
+    class="px-2 border rounded bg-base inline-flex gap-1 h-9 transition items-center focus-within:ring-2"
+    :class="[
+      invalid ? 'border-red-500/60 focus-within:ring-red-500/40' : 'border-base focus-within:ring-primary-500/40',
+      { 'op50 pointer-events-none': disabled },
+    ]"
+  >
+    <button
+      v-if="controls"
+      type="button"
+      class="op-fade shrink-0 transition disabled:op-mute hover:op100 disabled:pointer-events-none"
+      :disabled="disabled || atMin"
+      aria-label="Decrement"
+      @click="stepBy(-1)"
+    >
+      <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="M5 12h14" />
+      </svg>
+    </button>
+    <input
+      :value="model"
+      type="number"
+      :min="min"
+      :max="max"
+      :step="step"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-invalid="invalid || undefined"
+      class="color-base outline-none bg-transparent flex-1 min-w-0"
+      @input="onInput"
+    >
+    <button
+      v-if="controls"
+      type="button"
+      class="op-fade shrink-0 transition disabled:op-mute hover:op100 disabled:pointer-events-none"
+      :disabled="disabled || atMax"
+      aria-label="Increment"
+      @click="stepBy(1)"
+    >
+      <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="M12 5v14M5 12h14" />
+      </svg>
+    </button>
+  </div>
+</template>

package/components/Form/FormRadioGroup.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import FormRadioGroup from './FormRadioGroup.vue'
+
+const meta = {
+  title: 'Form/FormRadioGroup',
+  component: FormRadioGroup,
+  tags: ['autodocs'],
+  args: { options: [] }, // required prop; each story supplies real options via render
+} satisfies Meta<typeof FormRadioGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { FormRadioGroup },
+    setup() {
+      return {
+        value: ref('wind4'),
+        options: [
+          { value: 'wind4', label: 'Wind 4' },
+          { value: 'wind3', label: 'Wind 3' },
+          { value: 'mini', label: 'Mini' },
+        ],
+      }
+    },
+    template: `<FormRadioGroup v-model="value" :options="options" />`,
+  }),
+}
+
+export const Horizontal: Story = {
+  render: () => ({
+    components: { FormRadioGroup },
+    setup() {
+      return {
+        value: ref('a'),
+        options: [
+          { value: 'a', label: 'Option A' },
+          { value: 'b', label: 'Option B' },
+          { value: 'c', label: 'Disabled', disabled: true },
+        ],
+      }
+    },
+    template: `<FormRadioGroup v-model="value" :options="options" orientation="horizontal" />`,
+  }),
+}

package/components/Form/FormRadioGroup.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'reka-ui'
+
+export interface RadioOption {
+  value: string
+  label?: string
+  disabled?: boolean
+}
+
+withDefaults(
+  defineProps<{
+    options: RadioOption[]
+    orientation?: 'horizontal' | 'vertical'
+  }>(),
+  { orientation: 'vertical' },
+)
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-model="model"
+    class="flex gap-3"
+    :class="orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap'"
+  >
+    <label
+      v-for="opt in options"
+      :key="opt.value"
+      class="text-sm inline-flex gap-2 cursor-pointer select-none items-center"
+      :class="{ 'op50 pointer-events-none': opt.disabled }"
+    >
+      <RadioGroupItem
+        :value="opt.value"
+        :disabled="opt.disabled"
+        class="outline-none border border-base rounded-full bg-base flex h-4 w-4 transition items-center justify-center data-[state=checked]:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/40"
+      >
+        <RadioGroupIndicator class="rounded-full bg-primary-500 h-2 w-2 block" />
+      </RadioGroupItem>
+      {{ opt.label ?? opt.value }}
+    </label>
+  </RadioGroupRoot>
+</template>

package/components/Form/FormSearchField.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import FormSearchField from './FormSearchField.vue'
+
+const meta = {
+  title: 'Form/FormSearchField',
+  component: FormSearchField,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FormSearchField>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { FormSearchField },
+    setup() {
+      return { search: ref('') }
+    },
+    template: `<div class="w-72"><FormSearchField v-model="search" shortcut="mod+k" /></div>`,
+  }),
+}

package/components/Form/FormSearchField.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import DisplayKbd from '../Display/DisplayKbd.vue'
+import FormTextInput from './FormTextInput.vue'
+
+withDefaults(
+  defineProps<{
+    placeholder?: string
+    /** A keyboard hint shown while empty, e.g. `mod+k`. */
+    shortcut?: string
+    size?: 'sm' | 'md'
+  }>(),
+  { placeholder: 'Search…' },
+)
+
+const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <FormTextInput v-model="model" :placeholder="placeholder" :size="size" clearable type="search">
+    <template #prefix>
+      <svg width="1em" height="1em" viewBox="0 0 24 24" class="op-fade shrink-0" aria-hidden="true">
+        <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <circle cx="11" cy="11" r="7" />
+          <path d="m21 21l-4.3-4.3" />
+        </g>
+      </svg>
+    </template>
+    <template #suffix>
+      <DisplayKbd v-if="shortcut && !model" :keys="shortcut" />
+    </template>
+  </FormTextInput>
+</template>