@antfu/design 0.1.0

package/components/Action/ActionIconButton.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { vTooltip } from 'floating-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    icon?: string
+    /** Tooltip text (floating-vue). Requires `@antfu/design/styles/floating-vue.css`. */
+    tooltip?: string
+    active?: boolean
+    disabled?: boolean
+    /** Accessible label when the button has no visible text. */
+    label?: string
+    size?: 'sm' | 'md' | 'lg'
+    /** Compact, square (non-circular) icon button for dense toolbars. */
+    compact?: boolean
+    /** Class(es) applied when `active` — overrides the default `color-active bg-active` tint. */
+    activeClass?: string
+  }>(),
+  { size: 'md' },
+)
+
+const SIZE: Record<NonNullable<typeof props.size>, string> = {
+  sm: 'w-7! h-7! text-sm',
+  md: '',
+  lg: 'w-11! h-11! text-lg',
+}
+
+const baseClass = computed(() => (props.compact ? 'btn-icon-compact' : 'btn-icon'))
+const sizeClass = computed(() => (props.compact ? '' : SIZE[props.size]))
+const activeStateClass = computed(() => (props.active ? (props.activeClass || 'color-active bg-active op100') : ''))
+</script>
+
+<template>
+  <button
+    v-tooltip="tooltip"
+    type="button"
+    :class="[baseClass, sizeClass, activeStateClass]"
+    :disabled="disabled"
+    :aria-label="label ?? tooltip"
+    :aria-pressed="active || undefined"
+  >
+    <span v-if="icon" :class="icon" aria-hidden="true" />
+    <slot />
+    <slot name="badge" />
+  </button>
+</template>

package/components/Display/DisplayAvatar.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayAvatar from './DisplayAvatar.vue'
+
+const meta = {
+  title: 'Display/DisplayAvatar',
+  component: DisplayAvatar,
+  tags: ['autodocs'],
+  args: { name: 'Anthony Fu', size: 32 },
+} satisfies Meta<typeof DisplayAvatar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WithImage: Story = {
+  args: { src: 'https://github.com/antfu.png', name: 'Anthony Fu' },
+}
+
+export const InitialsFallback: Story = {
+  args: { name: 'Anthony Fu' },
+}
+
+export const Square: Story = {
+  args: { name: 'Vite Press', square: true, size: 48 },
+}
+
+export const Gallery: Story = {
+  render: () => ({
+    components: { DisplayAvatar },
+    setup() {
+      return { names: ['Vue', 'React Native', 'svelte-kit', 'unocss', 'Anthony Fu', 'esbuild'] }
+    },
+    template: `<div class="flex flex-wrap gap-2 items-center">
+      <DisplayAvatar v-for="n in names" :key="n" :name="n" :size="40" />
+    </div>`,
+  }),
+}

package/components/Display/DisplayAvatar.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useColorScheme } from '../../composables/colorScheme'
+import { getHashColorFromString } from '../../utils/color'
+import DisplaySafeImage from './DisplaySafeImage.vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Image source. Falls back to initials when absent or failed. */
+    src?: string
+    /** Name driving the initials and the hash-tinted fallback color. */
+    name?: string
+    /** Size in pixels (width and height). */
+    size?: number
+    /** Use rounded-corner square instead of a circle. */
+    square?: boolean
+    /**
+     * The app's current color scheme — tunes the fallback hash color for
+     * contrast. Falls back to {@link provideColorScheme} context, then `'light'`.
+     */
+    colorScheme?: 'light' | 'dark'
+  }>(),
+  { size: 32 },
+)
+
+const scheme = useColorScheme(() => props.colorScheme)
+const dark = computed(() => scheme.value === 'dark')
+
+const initials = computed(() =>
+  (props.name ?? '')
+    .split(/[\s/-]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(part => part[0]!.toUpperCase())
+    .join(''),
+)
+
+const fallbackStyle = computed(() => ({
+  background: getHashColorFromString(props.name ?? '', 0.18, dark.value),
+  color: getHashColorFromString(props.name ?? '', 1, dark.value),
+}))
+</script>
+
+<template>
+  <span
+    class="text-xs font-medium inline-flex shrink-0 select-none items-center justify-center overflow-hidden"
+    :class="square ? 'rounded-md' : 'rounded-full'"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+  >
+    <DisplaySafeImage :src="src" :alt="name">
+      <template #fallback>
+        <span class="inline-flex h-full w-full items-center justify-center" :style="fallbackStyle">
+          {{ initials }}
+        </span>
+      </template>
+    </DisplaySafeImage>
+  </span>
+</template>

package/components/Display/DisplayBadge.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayBadge from './DisplayBadge.vue'
+
+const meta = {
+  title: 'Display/DisplayBadge',
+  component: DisplayBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['subtle', 'solid'] },
+    size: { control: 'inline-radio', options: ['sm', 'md'] },
+  },
+  args: { text: 'vite', variant: 'subtle', size: 'md' },
+} satisfies Meta<typeof DisplayBadge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const HashColored: Story = { args: { text: 'unocss' } }
+export const Solid: Story = { args: { text: 'rolldown', variant: 'solid' } }
+export const Palette: Story = { args: { text: 'esm', color: 'green' } }
+export const Muted: Story = { args: { text: 'unknown', color: false } }
+export const WithIcon: Story = { args: { text: 'stable', icon: 'i-ph:seal-check', color: 'green' } }
+
+export const Gallery: Story = {
+  render: () => ({
+    components: { DisplayBadge },
+    template: `<div class="flex flex-wrap gap-2">
+      <DisplayBadge v-for="n in ['vue','react','svelte','vite','unocss','nuxt','rolldown','eslint']" :key="n" :text="n" />
+    </div>`,
+  }),
+}

package/components/Display/DisplayBadge.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useColorScheme } from '../../composables/colorScheme'
+import { getHashColorFromString, getHsla } from '../../utils/color'
+
+const props = withDefaults(
+  defineProps<{
+    /** Text content (also the hash seed when `color` is `true`). */
+    text?: string
+    /**
+     * - `true` (default): deterministic color hashed from `text`
+     * - `false`: neutral / muted
+     * - `number`: explicit hue (0–360)
+     * - `'#...'` / `'hsl(...)'` / `'rgb(...)'`: explicit CSS color
+     * - any other string: a palette name → `badge-color-<name>`
+     */
+    color?: boolean | number | string
+    /** `subtle` = tinted background, `solid` = filled. */
+    variant?: 'subtle' | 'solid'
+    size?: 'sm' | 'md'
+    /** Leading icon class (e.g. `i-ph:seal-check`). */
+    icon?: string
+    /** Render as another element/component. */
+    as?: string
+    /**
+     * The app's current color scheme — tunes hash colors for contrast. Falls
+     * back to {@link provideColorScheme} context, then `'light'`.
+     */
+    colorScheme?: 'light' | 'dark'
+  }>(),
+  {
+    color: true,
+    variant: 'subtle',
+    size: 'md',
+  },
+)
+
+function isCssColor(value: string): boolean {
+  return /^#|^hsl|^rgb|^var\(/.test(value)
+}
+
+const scheme = useColorScheme(() => props.colorScheme)
+const dark = computed(() => scheme.value === 'dark')
+
+const seedColor = computed<string | undefined>(() => {
+  const { color, text } = props
+  if (typeof color === 'number')
+    return getHsla(color, 1, dark.value)
+  if (typeof color === 'string' && isCssColor(color))
+    return color
+  if (color === true && text)
+    return getHashColorFromString(text, 1, dark.value)
+  return undefined
+})
+
+const seedBg = computed<string | undefined>(() => {
+  const { color, text } = props
+  if (typeof color === 'number')
+    return getHsla(color, props.variant === 'solid' ? 1 : 0.12, dark.value)
+  if (typeof color === 'string' && isCssColor(color))
+    return color
+  if (color === true && text)
+    return getHashColorFromString(text, props.variant === 'solid' ? 1 : 0.12, dark.value)
+  return undefined
+})
+
+const style = computed(() => {
+  if (!seedColor.value)
+    return undefined
+  return props.variant === 'solid'
+    ? { color: '#fff', background: seedBg.value }
+    : { color: seedColor.value, background: seedBg.value }
+})
+
+const paletteClass = computed(() =>
+  typeof props.color === 'string' && !isCssColor(props.color)
+    ? `badge-color-${props.color}`
+    : props.color === false
+      ? 'badge-muted'
+      : '',
+)
+
+const sizeClass = computed(() =>
+  props.size === 'sm' ? 'text-micro px-1.5 py-0.25' : 'text-xs px-2 py-0.5',
+)
+</script>
+
+<template>
+  <component
+    :is="as || 'span'"
+    class="badge"
+    :class="[sizeClass, paletteClass]"
+    :style="style"
+  >
+    <span v-if="icon" :class="icon" aria-hidden="true" />
+    <slot>{{ text }}</slot>
+  </component>
+</template>

package/components/Display/DisplayBytes.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayBytes from './DisplayBytes.vue'
+
+const meta = {
+  title: 'Display/DisplayBytes',
+  component: DisplayBytes,
+  tags: ['autodocs'],
+  args: { bytes: 204800 },
+} satisfies Meta<typeof DisplayBytes>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = { args: { bytes: 204800 } }
+export const Colorized: Story = { args: { bytes: 2097152, colorize: true } }
+export const WithTotal: Story = { args: { bytes: 524288, total: 1048576 } }
+
+export const Scale: Story = {
+  render: () => ({
+    components: { DisplayBytes },
+    template: `<div class="flex flex-col gap-1">
+      <DisplayBytes :bytes="512" colorize />
+      <DisplayBytes :bytes="204800" colorize />
+      <DisplayBytes :bytes="2097152" colorize />
+      <DisplayBytes :bytes="524288" :total="1048576" />
+    </div>`,
+  }),
+}

package/components/Display/DisplayBytes.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { formatBytes, getBytesColor } from '../../utils/format'
+
+const props = withDefaults(
+  defineProps<{
+    bytes: number
+    base?: 1024 | 1000
+    /** Maximum decimal places before trailing-zero trimming. */
+    digits?: number
+    colorize?: boolean
+    /** When given, also show `bytes / total` as a percent. */
+    total?: number
+    mono?: boolean
+  }>(),
+  { mono: true, base: 1024 },
+)
+
+const parts = computed(() => formatBytes(props.bytes, { base: props.base, digits: props.digits }))
+const colorClass = computed(() => (props.colorize ? getBytesColor(props.bytes) : ''))
+const percent = computed(() =>
+  props.total && props.total > 0 ? (props.bytes / props.total) * 100 : undefined,
+)
+</script>
+
+<template>
+  <span :class="[colorClass, { 'font-mono tabular-nums': mono }]">
+    {{ parts[0] }}<span class="text-xs ml-0.5 op-fade">{{ parts[1] }}</span><span v-if="percent != null" class="text-xs ml-1 op-mute">{{ percent.toFixed(0) }}%</span>
+  </span>
+</template>

package/components/Display/DisplayDate.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayDate from './DisplayDate.vue'
+
+const meta = {
+  title: 'Display/DisplayDate',
+  component: DisplayDate,
+  tags: ['autodocs'],
+  args: { date: Date.now() }, // required prop; stories supply their own via render
+} satisfies Meta<typeof DisplayDate>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Recent: Story = {
+  args: { date: Date.now() - 1000 * 60 * 5 },
+}
+
+export const Old: Story = {
+  args: { date: Date.now() - 1000 * 60 * 60 * 24 * 400 },
+}
+
+export const Colorized: Story = {
+  render: () => ({
+    components: { DisplayDate },
+    setup() {
+      const now = Date.now()
+      return {
+        recent: now - 1000 * 60 * 5,
+        old: now - 1000 * 60 * 60 * 24 * 400,
+      }
+    },
+    template: `<div class="flex flex-col gap-1">
+      <DisplayDate :date="recent" colorize />
+      <DisplayDate :date="old" colorize />
+    </div>`,
+  }),
+}

package/components/Display/DisplayDate.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useNow } from '@vueuse/core'
+import { vTooltip } from 'floating-vue'
+import { computed } from 'vue'
+import { formatDateTime, formatTimeAgo, getAgeColor } from '../../utils/format'
+
+const props = withDefaults(
+  defineProps<{
+    date: number | string | Date
+    /** Tint by age (freshness scale). */
+    colorize?: boolean
+    /** Update the relative label over time. */
+    live?: boolean
+  }>(),
+  {},
+)
+
+const now = useNow({ interval: 30_000 })
+const time = computed(() => new Date(props.date).getTime())
+const relative = computed(() => formatTimeAgo(time.value, props.live ? now.value.getTime() : Date.now()))
+const exact = computed(() => formatDateTime(time.value))
+const colorClass = computed(() => (props.colorize ? getAgeColor(Math.abs(now.value.getTime() - time.value)) : ''))
+</script>
+
+<template>
+  <time v-tooltip="exact" :datetime="new Date(time).toISOString()" :class="colorClass">
+    <slot :relative="relative" :exact="exact">{{ relative }}</slot>
+  </time>
+</template>

package/components/Display/DisplayDonut.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayDonut from './DisplayDonut.vue'
+
+const meta = {
+  title: 'Display/DisplayDonut',
+  component: DisplayDonut,
+  tags: ['autodocs'],
+  args: { value: 0.6, size: 48, thickness: 4 },
+} satisfies Meta<typeof DisplayDonut>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = { args: { value: 0.6 } }
+export const CustomColor: Story = { args: { value: 0.75, size: 64, color: '#3178c6' } }
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { DisplayDonut },
+    template: `<div class="flex items-center gap-4">
+      <DisplayDonut :value="0.25" />
+      <DisplayDonut :value="0.6" :size="48" />
+      <DisplayDonut :value="0.9" :size="64" :thickness="6" />
+    </div>`,
+  }),
+}

package/components/Display/DisplayDonut.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { clamp } from '@antfu/utils'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Progress 0..1. */
+    value: number
+    size?: number
+    thickness?: number
+    /** Override the foreground color (defaults to the active token). */
+    color?: string
+  }>(),
+  { size: 36, thickness: 4 },
+)
+
+const radius = computed(() => (props.size - props.thickness) / 2)
+const circumference = computed(() => 2 * Math.PI * radius.value)
+const offset = computed(() => circumference.value * (1 - clamp(props.value, 0, 1)))
+</script>
+
+<template>
+  <svg :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`" class="-rotate-90">
+    <circle
+      :cx="size / 2"
+      :cy="size / 2"
+      :r="radius"
+      fill="none"
+      :stroke-width="thickness"
+      class="op-mute stroke-current"
+    />
+    <circle
+      :cx="size / 2"
+      :cy="size / 2"
+      :r="radius"
+      fill="none"
+      :stroke-width="thickness"
+      :stroke-dasharray="circumference"
+      :stroke-dashoffset="offset"
+      stroke-linecap="round"
+      class="transition-all stroke-current"
+      :class="{ 'color-active': !color }"
+      :style="color ? { color } : undefined"
+    />
+  </svg>
+</template>

package/components/Display/DisplayDuration.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayDuration from './DisplayDuration.vue'
+
+const meta = {
+  title: 'Display/DisplayDuration',
+  component: DisplayDuration,
+  tags: ['autodocs'],
+  args: { ms: 750 },
+} satisfies Meta<typeof DisplayDuration>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = { args: { ms: 750 } }
+export const Colorized: Story = { args: { ms: 3200, colorize: true } }
+
+export const Scale: Story = {
+  render: () => ({
+    components: { DisplayDuration },
+    template: `<div class="flex flex-col gap-1">
+      <DisplayDuration :ms="12" colorize />
+      <DisplayDuration :ms="180" colorize />
+      <DisplayDuration :ms="750" colorize />
+      <DisplayDuration :ms="3200" colorize />
+      <DisplayDuration :ms="9000" colorize />
+    </div>`,
+  }),
+}

package/components/Display/DisplayDuration.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { DurationUnit } from '../../utils/format'
+import { computed } from 'vue'
+import { formatDuration, getDurationColor } from '../../utils/format'
+
+const props = withDefaults(
+  defineProps<{
+    /** Duration value, interpreted in `unit`. */
+    ms: number
+    /** Input unit: `'ns'`, `'us'`, `'ms'` (default) or `'s'`. */
+    unit?: DurationUnit
+    /** Tint by severity threshold. */
+    colorize?: boolean
+    mono?: boolean
+  }>(),
+  { mono: true, unit: 'ms' },
+)
+
+const FACTOR_MS: Record<DurationUnit, number> = { ns: 1e-6, us: 1e-3, ms: 1, s: 1000 }
+const parts = computed(() => formatDuration(props.ms, { unit: props.unit }))
+const colorClass = computed(() => (props.colorize ? getDurationColor(props.ms * FACTOR_MS[props.unit]) : ''))
+</script>
+
+<template>
+  <span :class="[colorClass, { 'font-mono tabular-nums': mono }]">
+    {{ parts[0] }}<span class="text-xs ml-0.5 op-fade">{{ parts[1] }}</span>
+  </span>
+</template>

package/components/Display/DisplayFileIcon.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayFileIcon from './DisplayFileIcon.vue'
+
+const meta = {
+  title: 'Display/DisplayFileIcon',
+  component: DisplayFileIcon,
+  tags: ['autodocs'],
+  args: { path: 'a.vue' },
+} satisfies Meta<typeof DisplayFileIcon>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = { args: { path: 'component.vue' } }
+
+export const ByType: Story = {
+  render: () => ({
+    components: { DisplayFileIcon },
+    template: `<div class="text-xl flex items-center gap-2">
+      <DisplayFileIcon path="a.vue" />
+      <DisplayFileIcon path="b.ts" />
+      <DisplayFileIcon path="c.json" />
+      <DisplayFileIcon path="d.css" />
+      <DisplayFileIcon path="e.md" />
+    </div>`,
+  }),
+}

package/components/Display/DisplayFileIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { FileIconRule } from '../../utils/icon'
+import { computed } from 'vue'
+import { getFileType, getFolderIcon } from '../../utils/icon'
+
+const props = defineProps<{
+  /** File path or module id (or folder name when `directory`). */
+  path: string
+  /** Override the default (catppuccin) file rule list — e.g. `vscodeFileIconRules`. */
+  rules?: FileIconRule[]
+  /** Render a folder icon instead of a file icon. */
+  directory?: boolean
+  /** For directories: show the open-folder glyph. */
+  open?: boolean
+  /** Named-folder lookup for directories. */
+  folderRules?: Record<string, string>
+}>()
+
+const type = computed(() => {
+  if (props.directory) {
+    const name = props.path.replace(/\/+$/, '').split('/').pop() || 'folder'
+    return { name, icon: getFolderIcon(name, props.open, props.folderRules) }
+  }
+  return getFileType(props.path, props.rules)
+})
+</script>
+
+<template>
+  <span :class="type.icon" :title="type.name" aria-hidden="true" />
+</template>

package/components/Display/DisplayFilePath.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayFilePath from './DisplayFilePath.vue'
+
+const meta = {
+  title: 'Display/DisplayFilePath',
+  component: DisplayFilePath,
+  tags: ['autodocs'],
+  args: { path: '/project/src/components/Badge.vue', root: '/project' },
+} satisfies Meta<typeof DisplayFilePath>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WithRoot: Story = {
+  args: { path: '/project/src/components/Badge.vue', root: '/project' },
+}
+
+export const Module: Story = {
+  args: { path: '/project/node_modules/.pnpm/vue@3.5.0/node_modules/vue/dist/vue.mjs' },
+}
+
+export const Examples: Story = {
+  render: () => ({
+    components: { DisplayFilePath },
+    template: `<div class="flex flex-col gap-2 max-w-md">
+      <DisplayFilePath path="/project/src/components/Badge.vue" root="/project" />
+      <DisplayFilePath path="/project/node_modules/.pnpm/vue@3.5.0/node_modules/vue/dist/vue.mjs" />
+    </div>`,
+  }),
+}