@hina-ui/vue 1.7.3 → 1.7.4

package/dist/shared/styles/scroll.css

@@ -0,0 +1,53 @@
+.hn-scroll-area .os-scrollbar {
+  --os-size: 6px;
+  --os-handle-bg: var(--hn-fg-disabled);
+  --os-handle-bg-hover: var(--hn-fg-subtle);
+  --os-handle-bg-active: var(--hn-fg-muted);
+}
+
+@utility hn-scroll-shadow {
+  position: absolute;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--hn-duration-base) var(--hn-ease-enter);
+
+  &[data-visible] {
+    opacity: 1;
+  }
+
+  &[data-side='x-start'] {
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 16px;
+    background: linear-gradient(to right, var(--hn-scroll-shadow), transparent);
+
+    &:dir(rtl) {
+      background: linear-gradient(to left, var(--hn-scroll-shadow), transparent);
+    }
+  }
+
+  &[data-side='x-end'] {
+    inset-block: 0;
+    inset-inline-end: 0;
+    width: 16px;
+    background: linear-gradient(to left, var(--hn-scroll-shadow), transparent);
+
+    &:dir(rtl) {
+      background: linear-gradient(to right, var(--hn-scroll-shadow), transparent);
+    }
+  }
+
+  &[data-side='y-start'] {
+    inset-inline: 0;
+    inset-block-start: 0;
+    height: 16px;
+    background: linear-gradient(to bottom, var(--hn-scroll-shadow), transparent);
+  }
+
+  &[data-side='y-end'] {
+    inset-inline: 0;
+    inset-block-end: 0;
+    height: 16px;
+    background: linear-gradient(to top, var(--hn-scroll-shadow), transparent);
+  }
+}

package/dist/shared/styles/semantic.css

@@ -0,0 +1,232 @@
+:root {
+  --hn-bg-canvas: var(--color-neutral-50);
+  --hn-surface: var(--color-neutral-0);
+  --hn-bg-subtle: var(--color-neutral-100);
+  --hn-bg-inset: var(--color-neutral-150);
+  --hn-bg-scrim: rgb(0 0 0 / 0.32);
+  --hn-bg-veil: color-mix(in srgb, var(--hn-surface) 70%, transparent);
+  --hn-blur-scrim: 8px;
+
+  --hn-fg-default: var(--color-neutral-900);
+  --hn-fg-max: var(--color-neutral-1000);
+  --hn-fg-muted: var(--color-neutral-600);
+  --hn-fg-subtle: var(--color-neutral-500);
+  --hn-fg-disabled: var(--color-neutral-400);
+
+  --hn-border: rgb(0 0 0 / 0.08);
+  --hn-border-strong: rgb(0 0 0 / 0.15);
+
+  --hn-accent: var(--color-brand-500);
+  --hn-accent-on: var(--color-neutral-950);
+  --hn-accent-text: var(--color-brand-700);
+  --hn-accent-soft: color-mix(in oklab, var(--color-brand-500) 12%, var(--hn-surface));
+  --hn-accent-border: color-mix(in oklab, var(--color-brand-500) 34%, transparent);
+
+  --hn-focus-ring: var(--color-brand-600);
+  --hn-focus-ring-width: 2px;
+  --hn-focus-ring-offset: 2px;
+
+  --hn-state-hover-opacity: 0.06;
+  --hn-state-press-opacity: 0.1;
+  --hn-state-selected-opacity: 0.14;
+  --hn-press-scale: 0.98;
+  --hn-press-scale-lg: 0.995;
+
+  --hn-neutral-solid: var(--color-neutral-900);
+  --hn-neutral-solid-on: var(--color-neutral-0);
+
+  --hn-success: #147438;
+  --hn-success-on: var(--color-neutral-0);
+  --hn-success-text: #15803d;
+  --hn-success-soft: color-mix(in oklab, var(--hn-success) 12%, var(--hn-surface));
+
+  --hn-warning: #f59e0b;
+  --hn-warning-on: var(--color-neutral-900);
+  --hn-warning-text: #b45309;
+  --hn-warning-soft: color-mix(in oklab, var(--hn-warning) 14%, var(--hn-surface));
+
+  --hn-danger: #dc2626;
+  --hn-danger-on: var(--color-neutral-0);
+  --hn-danger-text: #b91c1c;
+  --hn-danger-soft: color-mix(in oklab, var(--hn-danger) 12%, var(--hn-surface));
+
+  --hn-info: #0369a1;
+  --hn-info-on: var(--color-neutral-0);
+  --hn-info-text: #0369a1;
+  --hn-info-soft: color-mix(in oklab, var(--hn-info) 12%, var(--hn-surface));
+
+  --hn-expr-blue-text: #0e7fb8;
+  --hn-expr-purple-text: #7a3fd0;
+  --hn-expr-cyan-text: #0a7d7d;
+  --hn-expr-orange-text: #b45a26;
+  --hn-expr-coral-text: #c33d3d;
+  --hn-expr-yellow-text: #8a6a00;
+
+  --hn-shadow-sm:
+    0 1px 2px rgb(0 0 0 / 0.06), 0 2px 4px -1px rgb(0 0 0 / 0.04), 0 4px 8px -2px rgb(0 0 0 / 0.04);
+  --hn-shadow-md:
+    0 2px 4px rgb(0 0 0 / 0.05), 0 6px 12px -3px rgb(0 0 0 / 0.07),
+    0 16px 32px -12px rgb(0 0 0 / 0.09);
+  --hn-shadow-lg:
+    0 4px 8px rgb(0 0 0 / 0.05), 0 16px 32px -8px rgb(0 0 0 / 0.1),
+    0 40px 80px -24px rgb(0 0 0 / 0.16);
+
+  --hn-scroll-shadow: rgb(0 0 0 / 0.1);
+  --hn-skeleton-bg: var(--color-neutral-200);
+  --hn-skeleton-wave: rgb(255 255 255 / 0.4);
+
+  --hn-qr-foreground: var(--color-neutral-950);
+  --hn-qr-background: var(--color-neutral-0);
+
+  --hn-z-overlay: 100;
+  --hn-z-toast: 110;
+}
+
+.dark {
+  --hn-bg-canvas: var(--color-neutral-950);
+  --hn-surface: var(--color-neutral-1000);
+  --hn-bg-subtle: #141414;
+  --hn-bg-inset: var(--color-neutral-800);
+  --hn-bg-scrim: rgb(0 0 0 / 0.6);
+
+  --hn-fg-default: var(--color-neutral-150);
+  --hn-fg-max: var(--color-neutral-0);
+  --hn-fg-muted: var(--color-neutral-400);
+  --hn-fg-subtle: var(--color-neutral-500);
+  --hn-fg-disabled: var(--color-neutral-600);
+
+  --hn-border: rgb(255 255 255 / 0.1);
+  --hn-border-strong: rgb(255 255 255 / 0.18);
+
+  --hn-accent: var(--color-brand-400);
+  --hn-accent-on: var(--color-neutral-1000);
+  --hn-accent-text: var(--color-brand-400);
+  --hn-accent-soft: color-mix(in oklab, var(--color-brand-400) 24%, var(--hn-surface));
+  --hn-accent-border: color-mix(in oklab, var(--color-brand-400) 30%, transparent);
+
+  --hn-focus-ring: var(--color-brand-400);
+
+  --hn-state-hover-opacity: 0.09;
+  --hn-state-press-opacity: 0.13;
+  --hn-state-selected-opacity: 0.2;
+
+  --hn-neutral-solid: var(--color-neutral-150);
+  --hn-neutral-solid-on: var(--color-neutral-950);
+
+  --hn-success: #22c55e;
+  --hn-success-on: var(--color-neutral-950);
+  --hn-success-text: #4ade80;
+  --hn-success-soft: color-mix(in oklab, var(--hn-success) 24%, var(--hn-surface));
+
+  --hn-warning: #f59e0b;
+  --hn-warning-on: var(--color-neutral-950);
+  --hn-warning-text: #fbbf24;
+  --hn-warning-soft: color-mix(in oklab, var(--hn-warning) 28%, var(--hn-surface));
+
+  --hn-danger: #f15050;
+  --hn-danger-on: var(--color-neutral-950);
+  --hn-danger-text: #f87171;
+  --hn-danger-soft: color-mix(in oklab, var(--hn-danger) 24%, var(--hn-surface));
+
+  --hn-info: #0ea5e9;
+  --hn-info-on: var(--color-neutral-950);
+  --hn-info-text: #38bdf8;
+  --hn-info-soft: color-mix(in oklab, var(--hn-info) 24%, var(--hn-surface));
+
+  --hn-expr-blue-text: #7dd3fc;
+  --hn-expr-purple-text: #c9a2ff;
+  --hn-expr-cyan-text: #4ee0e0;
+  --hn-expr-orange-text: #ffb896;
+  --hn-expr-coral-text: #ff9d9d;
+  --hn-expr-yellow-text: #ffd93d;
+
+  --hn-shadow-sm:
+    inset 0 1px 0 rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.5),
+    0 2px 6px -2px rgb(0 0 0 / 0.4);
+  --hn-shadow-md:
+    inset 0 1px 0 rgb(255 255 255 / 0.05), 0 4px 8px rgb(0 0 0 / 0.45),
+    0 12px 24px -8px rgb(0 0 0 / 0.5);
+  --hn-shadow-lg:
+    inset 0 1px 0 rgb(255 255 255 / 0.06), 0 8px 16px rgb(0 0 0 / 0.5),
+    0 32px 64px -16px rgb(0 0 0 / 0.55);
+
+  --hn-scroll-shadow: rgb(0 0 0 / 0.5);
+  --hn-skeleton-bg: rgb(255 255 255 / 0.06);
+  --hn-skeleton-wave: rgb(255 255 255 / 0.04);
+}
+
+:root {
+  --hn-font-sans:
+    'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
+  --hn-font-mono:
+    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Noto Sans SC', 'PingFang SC',
+    'Microsoft YaHei', monospace;
+
+  --hn-text-xs: 0.8125rem;
+  --hn-text-sm: 0.875rem;
+  --hn-text-base: 1rem;
+  --hn-text-md: 1.125rem;
+  --hn-text-lg: 1.25rem;
+  --hn-text-xl: 1.5rem;
+  --hn-text-2xl: 1.875rem;
+
+  --hn-leading-xs: 1.25rem;
+  --hn-leading-sm: 1.375rem;
+  --hn-leading-base: 1.5rem;
+  --hn-leading-md: 1.75rem;
+  --hn-leading-lg: 1.875rem;
+  --hn-leading-xl: 2.125rem;
+  --hn-leading-2xl: 2.5rem;
+
+  --hn-weight-normal: 400;
+  --hn-weight-medium: 500;
+  --hn-weight-semibold: 600;
+
+  --hn-tracking-tight: -0.01em;
+  --hn-tracking-normal: 0;
+  --hn-tracking-wide: 0.08em;
+
+  --hn-radius-xs: 4px;
+  --hn-radius-sm: 6px;
+  --hn-radius-md: 8px;
+  --hn-radius-lg: 8px;
+  --hn-radius-xl: 14px;
+  --hn-radius-full: 9999px;
+
+  --hn-duration-fast: 200ms;
+  --hn-duration-base: 300ms;
+  --hn-duration-slow: 450ms;
+  --hn-duration-exit: 200ms;
+
+  --hn-ease-enter: cubic-bezier(0, 0, 0.2, 1);
+  --hn-ease-enter-strong: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --hn-ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --hn-ease-move: cubic-bezier(0.4, 0, 0.2, 1);
+  --hn-ease-press: cubic-bezier(0.3, 1.2, 0.6, 1);
+  --hn-ease-linear: linear;
+
+  --hn-travel-sm: 4px;
+  --hn-travel-md: 10px;
+  --hn-stagger: 24ms;
+  --hn-spin-duration: 700ms;
+  --hn-skeleton-duration: 1200ms;
+  --hn-ripple-in: 75ms;
+  --hn-ripple-out: 375ms;
+  --hn-pulse-duration: 1500ms;
+  --hn-progress-duration: 1800ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --hn-duration-fast: 1ms;
+    --hn-duration-base: 1ms;
+    --hn-duration-slow: 1ms;
+    --hn-duration-exit: 1ms;
+    --hn-travel-sm: 0px;
+    --hn-travel-md: 0px;
+    --hn-stagger: 0ms;
+    --hn-ease-press: linear;
+    --hn-ripple-in: 1ms;
+    --hn-ripple-out: 1ms;
+  }
+}

package/dist/shared/styles/tokens.css

@@ -0,0 +1,19 @@
+@import 'overlayscrollbars/overlayscrollbars.css';
+@import './palette.css';
+@import './semantic.css';
+@import './density.css';
+@import './mappings.css';
+@import './motion.css';
+@import './interaction.css';
+@import './typography.css';
+@import './spoiler.css';
+@import './scroll.css';
+@import './data-table.css';
+@import './timeline.css';
+@import './stepper.css';
+@import './float-button.css';
+@import './masonry.css';
+@import './carousel.css';
+@import './base.css';
+
+@source '../variants/*.ts';

package/dist/shared/types/virtual.ts

@@ -0,0 +1 @@
+export type VirtualizeOptions = boolean | { estimateSize?: number; overscan?: number }

package/dist/shared/variants/accordion.ts

@@ -0,0 +1,19 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const accordion = tv({
+  base: 'divide-line flex flex-col divide-y',
+})
+
+export const accordionTrigger = tv({
+  base: [
+    'group/hn-disclosure hn-interactive hn-state-layer hn-press-none',
+    'text-fg -mx-3 flex w-[calc(100%+--spacing(6))] items-center justify-between gap-3 rounded-md px-3 py-3 text-start text-base font-medium',
+    'disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4',
+  ],
+})
+
+export const accordionContent = tv({
+  base: 'hn-anim-collapse',
+})
+
+export type AccordionVariants = VariantProps<typeof accordion>

package/dist/shared/variants/affix.ts

@@ -0,0 +1,16 @@
+import { tv } from '../lib/tv'
+
+export const affix = tv({
+  base: 'min-w-0 flow-root',
+  variants: {
+    position: {
+      top: '[inset-block-start:var(--hn-affix-offset)]',
+      bottom: '[inset-block-end:var(--hn-affix-offset)]',
+    },
+    disabled: {
+      true: 'relative [inset-block-start:auto] [inset-block-end:auto]',
+      false: 'sticky z-10',
+    },
+  },
+  defaultVariants: { position: 'top', disabled: false },
+})

package/dist/shared/variants/alert-dialog.ts

@@ -0,0 +1,17 @@
+import { tv } from '../lib/tv'
+
+export const alertDialogHeader = tv({
+  base: 'flex min-w-0 flex-col gap-1.5 px-(--hn-panel-p)',
+})
+
+export const alertDialogContent = tv({
+  base: 'px-(--hn-panel-p)',
+})
+
+export const alertDialogActions = tv({
+  base: 'flex justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)',
+})
+
+export const alertDialogCountdown = tv({
+  base: 'tabular-nums',
+})

package/dist/shared/variants/autocomplete.ts

@@ -0,0 +1,9 @@
+import { tv } from '../lib/tv'
+
+export const autocompleteContent = tv({
+  base: 'w-[var(--hn-overlay-anchor-width)] max-w-none overflow-hidden',
+})
+
+export const autocompleteList = tv({
+  base: 'max-h-[min(20rem,var(--hn-overlay-available-height,20rem))]',
+})

package/dist/shared/variants/avatar-group.ts

@@ -0,0 +1,15 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const avatarGroup = tv({
+  base: 'flex flex-row-reverse justify-end [&>*]:ring-surface [&>*]:ring-2 [&>*:first-child]:me-0',
+  variants: {
+    size: {
+      sm: '[&>*]:-me-1.5',
+      md: '[&>*]:-me-2',
+      lg: '[&>*]:-me-2.5',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type AvatarGroupVariants = VariantProps<typeof avatarGroup>

package/dist/shared/variants/avatar.ts

@@ -0,0 +1,18 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const avatar = tv({
+  base: [
+    'bg-inset text-muted relative inline-flex shrink-0 items-center justify-center',
+    'overflow-hidden rounded-full align-middle font-medium select-none',
+  ],
+  variants: {
+    size: {
+      sm: 'size-6 text-xs [&_svg]:size-3.5',
+      md: 'size-8 text-sm [&_svg]:size-4',
+      lg: 'size-10 text-base [&_svg]:size-5',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type AvatarVariants = VariantProps<typeof avatar>

package/dist/shared/variants/badge.ts

@@ -0,0 +1,54 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const badge = tv({
+  base: [
+    'pointer-events-none absolute z-[1] inline-flex items-center justify-center rounded-full will-change-transform',
+    'font-medium leading-none whitespace-nowrap select-none',
+  ],
+  variants: {
+    tone: {
+      accent: 'bg-accent text-accent-on',
+      neutral: 'bg-neutral-solid text-neutral-solid-on',
+      success: 'bg-success text-success-on',
+      warning: 'bg-warning text-warning-on',
+      danger: 'bg-danger text-danger-on',
+      info: 'bg-info text-info-on',
+    },
+    size: {
+      sm: 'h-4 min-w-4 px-1 text-xs',
+      md: 'h-5 min-w-5 px-1.5 text-xs',
+    },
+    placement: {
+      'top-end': 'top-0 end-0 translate-x-1/2 -translate-y-1/2',
+      'top-start': 'top-0 start-0 -translate-x-1/2 -translate-y-1/2',
+      'bottom-end': 'bottom-0 end-0 translate-x-1/2 translate-y-1/2',
+      'bottom-start': 'bottom-0 start-0 -translate-x-1/2 translate-y-1/2',
+    },
+    shape: {
+      rect: '',
+      circle: '',
+    },
+    outline: {
+      true: 'ring-surface ring-2',
+      false: '',
+    },
+    bare: {
+      true: 'h-auto min-w-0 bg-transparent p-0',
+    },
+  },
+  compoundVariants: [
+    { shape: 'circle', placement: 'top-end', class: 'top-[14%] end-[14%]' },
+    { shape: 'circle', placement: 'top-start', class: 'top-[14%] start-[14%]' },
+    { shape: 'circle', placement: 'bottom-end', class: 'bottom-[14%] end-[14%]' },
+    { shape: 'circle', placement: 'bottom-start', class: 'bottom-[14%] start-[14%]' },
+  ],
+  defaultVariants: {
+    tone: 'danger',
+    size: 'sm',
+    placement: 'top-end',
+    shape: 'rect',
+    outline: true,
+  },
+})
+
+export type BadgeVariants = VariantProps<typeof badge>

package/dist/shared/variants/banner.ts

@@ -0,0 +1,52 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const banner = tv({
+  base: 'hn-transition-base grid w-full grid-cols-[1fr_auto] items-center gap-3 px-4 py-2.5 text-sm sm:grid-cols-[1fr_auto_1fr] [&_a]:[--hn-link-color:currentColor]',
+  variants: {
+    tone: {
+      neutral: 'bg-neutral-solid text-neutral-solid-on',
+      accent: 'bg-accent text-accent-on',
+      info: 'bg-info text-info-on',
+      success: 'bg-success text-success-on',
+      warning: 'bg-warning text-warning-on',
+      danger: 'bg-danger text-danger-on',
+    },
+  },
+  defaultVariants: { tone: 'accent' },
+})
+
+export const bannerContent = tv({
+  base: 'flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 sm:col-start-2 sm:justify-center sm:text-center',
+})
+
+export const bannerIcon = tv({
+  base: 'size-4 shrink-0',
+})
+
+export const bannerActions = tv({
+  base: 'flex shrink-0 items-center gap-2',
+})
+
+export const bannerItem = tv({
+  base: 'flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 sm:justify-center',
+})
+
+export const bannerControls = tv({
+  base: 'col-start-2 -my-1 -me-1 flex shrink-0 items-center gap-1 justify-self-end sm:col-start-3',
+})
+
+export const bannerCounter = tv({
+  base: 'text-xs tabular-nums',
+})
+
+const slideForward = {
+  enterFrom: 'opacity-0 translate-x-4 rtl:-translate-x-4',
+  leaveTo: 'opacity-0 -translate-x-4 rtl:translate-x-4',
+}
+
+export const bannerSlide = {
+  forward: slideForward,
+  backward: { enterFrom: slideForward.leaveTo, leaveTo: slideForward.enterFrom },
+}
+
+export type BannerVariants = VariantProps<typeof banner>

package/dist/shared/variants/button-group.ts

@@ -0,0 +1,51 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const buttonGroup = tv({
+  base: ['isolate align-middle', '[&>*]:[--hn-press-scale:1]', '[&>*:focus-visible]:z-10'],
+  variants: {
+    orientation: {
+      horizontal: [
+        '[&>*:not(:first-child)]:-ms-px',
+        '[&>*:not(:first-child)]:rounded-s-none',
+        '[&>*:not(:last-child)]:rounded-e-none',
+      ],
+      vertical: [
+        'flex-col',
+        '[&>*:not(:first-child)]:-mt-px',
+        '[&>*:not(:first-child)]:rounded-t-none',
+        '[&>*:not(:last-child)]:rounded-b-none',
+      ],
+    },
+    block: {
+      true: 'flex w-full [&>*]:flex-1',
+      false: 'inline-flex',
+    },
+    divider: {
+      true: [
+        '[&>*:not(:first-child)]:before:absolute',
+        '[&>*:not(:first-child)]:before:bg-current',
+        '[&>*:not(:first-child)]:before:opacity-25',
+      ],
+    },
+  },
+  compoundVariants: [
+    {
+      divider: true,
+      orientation: 'horizontal',
+      class:
+        '[&>*:not(:first-child)]:before:start-0 [&>*:not(:first-child)]:before:inset-y-1/4 [&>*:not(:first-child)]:before:w-px',
+    },
+    {
+      divider: true,
+      orientation: 'vertical',
+      class:
+        '[&>*:not(:first-child)]:before:top-0 [&>*:not(:first-child)]:before:inset-x-1/4 [&>*:not(:first-child)]:before:h-px',
+    },
+  ],
+  defaultVariants: {
+    orientation: 'horizontal',
+    block: false,
+  },
+})
+
+export type ButtonGroupVariants = VariantProps<typeof buttonGroup>

package/dist/shared/variants/button.ts

@@ -0,0 +1,113 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const button = tv({
+  base: [
+    'hn-interactive relative isolate inline-flex shrink-0 items-center justify-center',
+    'gap-[var(--hn-control-gap)] rounded-md border border-transparent',
+    'font-medium whitespace-nowrap select-none',
+    'disabled:pointer-events-none disabled:opacity-50',
+    'data-disabled:pointer-events-none data-disabled:opacity-50',
+  ],
+  variants: {
+    variant: {
+      solid: 'hn-state-layer',
+      soft: 'hn-state-layer',
+      outline: 'hn-state-layer border-line hover:border-line-strong',
+      ghost: 'hn-state-layer',
+      link: 'hn-link hn-press-none',
+    },
+    tone: {
+      accent: '',
+      neutral: '',
+      danger: '',
+    },
+    size: {
+      sm: 'h-[var(--hn-control-h-sm)] px-[var(--hn-control-px-sm)] text-sm [&_svg]:size-3.5',
+      md: 'h-[var(--hn-control-h-md)] px-[var(--hn-control-px-md)] text-base [&_svg]:size-4',
+      lg: 'h-[var(--hn-control-h-lg)] px-[var(--hn-control-px-lg)] text-md [&_svg]:size-[1.125rem]',
+    },
+    iconOnly: {
+      true: 'aspect-square px-0',
+    },
+    block: {
+      true: 'w-full',
+    },
+    pill: {
+      true: 'rounded-full',
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'solid',
+      tone: 'accent',
+      class: 'bg-accent text-accent-on',
+    },
+    {
+      variant: 'solid',
+      tone: 'neutral',
+      class: 'bg-neutral-solid text-neutral-solid-on',
+    },
+    {
+      variant: 'solid',
+      tone: 'danger',
+      class: 'bg-danger text-danger-on',
+    },
+    {
+      variant: 'soft',
+      tone: 'accent',
+      class: 'bg-accent-soft text-accent-text',
+    },
+    { variant: 'soft', tone: 'neutral', class: 'bg-subtle text-fg' },
+    {
+      variant: 'soft',
+      tone: 'danger',
+      class: 'bg-danger-soft text-danger-text',
+    },
+    {
+      variant: 'outline',
+      tone: 'accent',
+      class: 'text-accent-text',
+    },
+    { variant: 'outline', tone: 'neutral', class: 'text-fg' },
+    {
+      variant: 'outline',
+      tone: 'danger',
+      class: 'text-danger-text',
+    },
+    {
+      variant: 'ghost',
+      tone: 'accent',
+      class: 'text-accent-text',
+    },
+    { variant: 'ghost', tone: 'neutral', class: 'text-fg' },
+    {
+      variant: 'ghost',
+      tone: 'danger',
+      class: 'text-danger-text',
+    },
+    { variant: 'link', tone: 'accent', class: '[--hn-link-color:var(--hn-accent-text)]' },
+    { variant: 'link', tone: 'neutral', class: '[--hn-link-color:var(--hn-fg-default)]' },
+    { variant: 'link', tone: 'danger', class: '[--hn-link-color:var(--hn-danger-text)]' },
+    { variant: 'link', class: 'h-auto rounded-none border-0 px-0' },
+    { size: 'lg', iconOnly: true, class: 'hn-press-lg' },
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    tone: 'accent',
+    size: 'md',
+  },
+})
+
+export const buttonIconBox = tv({
+  base: 'relative inline-flex shrink-0 items-center justify-center',
+  variants: {
+    size: {
+      sm: 'size-3.5',
+      md: 'size-4',
+      lg: 'size-[1.125rem]',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type ButtonVariants = VariantProps<typeof button>