@hina-ui/vue 1.7.3 → 1.7.4

package/dist/shared/variants/listbox.ts

@@ -0,0 +1,28 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const listbox = tv({
+  base: [
+    'flex w-full min-w-0 flex-col overflow-hidden rounded-md data-disabled:opacity-50',
+    '[&:not(:focus-within)_[data-highlighted]:not(:hover)]:[--hn-state-hover-opacity:0]',
+  ],
+  variants: {
+    variant: {
+      primary: 'border-line bg-surface border shadow-sm',
+      secondary: 'bg-inset',
+      bare: 'rounded-none border-0 bg-transparent shadow-none',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+  },
+})
+
+export const listboxContent = tv({
+  base: 'flex flex-col outline-none',
+  variants: {
+    padded: { true: 'p-1', false: 'p-0' },
+  },
+  defaultVariants: { padded: true },
+})
+
+export type ListboxVariants = VariantProps<typeof listbox>

package/dist/shared/variants/loading-overlay.ts

@@ -0,0 +1,25 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const loadingOverlay = tv({
+  base: 'bg-veil flex flex-col items-center justify-center gap-3',
+  variants: {
+    fixed: {
+      true: 'fixed inset-0 z-(--hn-z-overlay)',
+      false: 'absolute inset-0 z-10',
+    },
+  },
+  defaultVariants: { fixed: false },
+})
+
+export const loadingBlocker = tv({
+  base: '',
+  variants: {
+    fixed: {
+      true: 'fixed inset-0 z-(--hn-z-overlay)',
+      false: 'absolute inset-0 z-10',
+    },
+  },
+  defaultVariants: { fixed: false },
+})
+
+export type LoadingOverlayVariants = VariantProps<typeof loadingOverlay>

package/dist/shared/variants/masonry.ts

@@ -0,0 +1,27 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const masonry = tv({
+  base: 'relative w-full min-w-0',
+  variants: {
+    gap: {
+      none: '[--hn-masonry-gap:0px] [--hn-masonry-row-gap:0px]',
+      xs: '[--hn-masonry-gap:var(--spacing)] [--hn-masonry-row-gap:var(--spacing)]',
+      sm: '[--hn-masonry-gap:calc(var(--spacing)*2)] [--hn-masonry-row-gap:calc(var(--spacing)*2)]',
+      md: '[--hn-masonry-gap:var(--hn-inline-gap)] [--hn-masonry-row-gap:var(--hn-stack-gap)]',
+      lg: '[--hn-masonry-gap:calc(var(--spacing)*6)] [--hn-masonry-row-gap:calc(var(--spacing)*6)]',
+      xl: '[--hn-masonry-gap:calc(var(--spacing)*8)] [--hn-masonry-row-gap:calc(var(--spacing)*8)]',
+    },
+  },
+  defaultVariants: { gap: 'md' },
+})
+export const masonryList = tv({
+  base: 'hn-masonry-list relative m-0 grid list-none items-start gap-x-[var(--hn-masonry-gap)] gap-y-[var(--hn-masonry-row-gap)] p-0',
+})
+export const masonryMeasure = tv({
+  base: 'pointer-events-none invisible absolute start-0 top-0 h-[var(--hn-masonry-row-gap)] w-[var(--hn-masonry-gap)]',
+})
+export const masonryItem = tv({ base: 'hn-masonry-item flow-root min-w-0' })
+export const masonryStatus = tv({
+  base: 'text-muted flex items-center justify-center gap-2 py-8 text-sm',
+})
+export type MasonryGap = NonNullable<VariantProps<typeof masonry>['gap']>

package/dist/shared/variants/menubar.ts

@@ -0,0 +1,17 @@
+import { tv } from '../lib/tv'
+
+export const menubarRoot = tv({
+  base: 'bg-surface border-line inline-flex items-center gap-0.5 rounded-lg border p-1',
+})
+
+export const menubarTrigger = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none relative isolate inline-flex h-8 shrink-0 items-center',
+    'text-fg gap-1.5 rounded-md px-2.5 text-sm font-medium outline-none select-none',
+    'data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
+  ],
+})
+
+export const menubarContent = tv({
+  base: 'hn-anim-pop z-(--hn-z-overlay) flex min-w-40 flex-col gap-0.5 p-1 shadow-md outline-none',
+})

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

@@ -0,0 +1,38 @@
+import { tv } from '../lib/tv'
+
+export const meterGroup = tv({
+  base: 'flex w-full min-w-0 flex-col gap-2',
+})
+
+export const meterHeader = tv({
+  base: 'text-fg flex items-baseline justify-between gap-3 text-sm',
+})
+
+export const meterSegment = tv({
+  base: 'hn-progress-bar block h-full shrink-0',
+  variants: {
+    tone: {
+      accent: 'bg-accent',
+      neutral: 'bg-neutral-solid',
+      success: 'bg-success',
+      warning: 'bg-warning',
+      danger: 'bg-danger',
+      info: 'bg-info',
+    },
+  },
+  defaultVariants: {
+    tone: 'accent',
+  },
+})
+
+export const meterLegend = tv({
+  base: 'flex flex-wrap gap-x-4 gap-y-1 text-sm',
+})
+
+export const meterLegendItem = tv({
+  base: 'inline-flex items-center gap-1.5',
+})
+
+export const meterValue = tv({
+  base: 'text-muted tabular-nums',
+})

package/dist/shared/variants/month-grid.ts

@@ -0,0 +1,34 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const monthGrid = tv({
+  base: '@container/hn-month-grid bg-surface text-fg border-line w-full min-w-0 overflow-clip rounded-xl border',
+  variants: {
+    size: {
+      sm: '[--hn-calendar-cell:var(--hn-control-h-sm)] [--hn-month-grid-cell:--spacing(16)] text-sm',
+      md: '[--hn-calendar-cell:var(--hn-control-h-md)] [--hn-month-grid-cell:--spacing(24)] text-sm',
+      lg: '[--hn-calendar-cell:var(--hn-control-h-lg)] [--hn-month-grid-cell:--spacing(32)] text-base',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+export const monthGridHeader = tv({ base: 'flex min-w-0 flex-wrap items-center gap-2 p-3' })
+export const monthGridActions = tv({
+  base: 'flex min-w-0 flex-wrap items-center gap-2 @max-[520px]/hn-month-grid:basis-full',
+})
+export const monthGridTable = tv({ base: 'w-full table-fixed border-collapse' })
+export const monthGridWeekday = tv({
+  base: 'text-muted border-line border-b px-1 py-2 text-center text-xs font-normal',
+})
+export const monthGridCell = tv({
+  base: 'border-line border-e border-b p-0 align-top last:border-e-0 [overflow-wrap:anywhere]',
+})
+export const monthGridDay = tv({
+  base: 'flex min-h-[var(--hn-month-grid-cell)] min-w-0 flex-col gap-1 [--hn-month-grid-default-padding:--spacing(1)] @min-[400px]/hn-month-grid:[--hn-month-grid-default-padding:--spacing(2)] p-[var(--hn-month-grid-padding,var(--hn-month-grid-default-padding))]',
+})
+export const monthGridDayHeader = tv({
+  base: 'flex min-w-0 items-center justify-between gap-1',
+})
+export const monthGridDate = tv({
+  base: 'inline-flex size-6 shrink-0 items-center justify-center rounded-full text-sm tabular-nums data-[outside]:text-faint data-disabled:text-faint data-[today]:bg-accent-soft data-[today]:text-accent-text data-[today]:font-medium',
+})
+export type MonthGridSize = NonNullable<VariantProps<typeof monthGrid>['size']>

package/dist/shared/variants/multi-combobox.ts

@@ -0,0 +1,14 @@
+import { tv } from '../lib/tv'
+
+export const multiComboboxHost = tv({
+  base: '',
+  variants: {
+    clearing: {
+      true: 'pe-[calc(2*var(--hn-input-h))]',
+    },
+  },
+})
+
+export const multiComboboxEnd = tv({
+  base: 'absolute inset-y-0 end-0 flex items-stretch',
+})

package/dist/shared/variants/multi-select.ts

@@ -0,0 +1,13 @@
+import { tv } from '../lib/tv'
+
+export const multiSelectTrigger = tv({
+  base: [
+    'group/hn-disclosure cursor-pointer items-center ps-[var(--hn-input-px)] pe-0 text-start',
+    'data-placeholder:text-faint data-placeholder:font-normal',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+  ],
+})
+
+export const multiSelectChips = tv({
+  base: 'flex min-w-0 flex-1 items-center gap-1 overflow-hidden',
+})

package/dist/shared/variants/nav-link.ts

@@ -0,0 +1,21 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const navLink = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none relative isolate flex cursor-pointer items-center',
+    'data-disabled:pointer-events-none data-disabled:opacity-50',
+    'h-9 gap-[var(--hn-control-gap)] rounded-md ps-2.5 pe-2 text-sm select-none',
+    '[&_svg]:size-4 [&_svg]:shrink-0',
+  ],
+  variants: {
+    active: {
+      true: 'text-fg font-medium',
+      false: 'text-muted',
+    },
+  },
+  defaultVariants: { active: false },
+})
+
+export const navLinkLabel = tv({
+  base: 'hn-sidebar-label shrink-0 whitespace-nowrap',
+})

package/dist/shared/variants/navigation-menu.ts

@@ -0,0 +1,82 @@
+import { tv } from '../lib/tv'
+
+export const navigationMenu = tv({
+  base: 'relative w-fit max-w-full',
+})
+
+export const navigationMenuList = tv({
+  base: 'm-0 flex list-none gap-1 p-0',
+  variants: {
+    orientation: {
+      horizontal: 'flex-wrap items-center',
+      vertical: 'flex-col items-stretch',
+    },
+  },
+})
+
+export const navigationMenuControl = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none relative isolate flex cursor-pointer items-center',
+    'text-fg gap-(--hn-control-gap) rounded-md text-start font-medium no-underline outline-none select-none [&_svg]:shrink-0',
+    'data-[state=open]:bg-inset data-active:text-accent-text data-active:bg-accent-soft',
+    'data-disabled:pointer-events-none data-disabled:opacity-50',
+  ],
+  variants: {
+    size: {
+      sm: 'min-h-(--hn-control-h-sm) px-(--hn-control-px-sm) text-xs [&_svg]:size-3.5',
+      md: 'min-h-(--hn-control-h-md) px-(--hn-control-px-md) text-sm [&_svg]:size-4',
+      lg: 'min-h-(--hn-control-h-lg) px-(--hn-control-px-lg) text-base [&_svg]:size-[1.125rem]',
+    },
+    orientation: {
+      horizontal: '',
+      vertical: 'w-full',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const navigationMenuTrigger = tv({
+  base: 'group/hn-disclosure',
+})
+
+export const navigationMenuIcon = tv({
+  base: 'inline-flex shrink-0 items-center justify-center gap-1',
+})
+
+export const navigationMenuDisclosure = tv({
+  base: 'inline-flex shrink-0 text-muted',
+  variants: {
+    orientation: { horizontal: '', vertical: 'rtl:-scale-x-100' },
+  },
+})
+
+export const navigationMenuLink = tv({
+  base: 'py-2',
+})
+
+export const navigationMenuContent = tv({
+  base: 'hn-anim-navigation-content absolute start-0 top-0 w-80 max-w-[min(calc(100vw-2rem),var(--hn-navigation-max-width,100vw))] outline-none rtl:start-auto rtl:end-0',
+  variants: {
+    padded: { true: 'p-2', false: '' },
+  },
+  defaultVariants: { padded: true },
+})
+
+export const navigationMenuViewport = tv({
+  base: [
+    'hn-navigation-viewport bg-surface border-line absolute z-(--hn-z-overlay) overflow-hidden rounded-lg border shadow-md',
+    'h-(--hn-navigation-height) w-(--hn-navigation-width)',
+  ],
+  variants: {
+    orientation: {
+      horizontal:
+        'top-full mt-2 [left:clamp(var(--hn-navigation-min-x,0px),var(--hn-navigation-left),calc(var(--hn-navigation-bound-end,100vw)-var(--hn-navigation-width)-2px))]',
+      vertical: '[top:var(--hn-navigation-top)]',
+    },
+    side: { start: '', end: '' },
+  },
+  compoundVariants: [
+    { orientation: 'vertical', side: 'end', class: 'start-full ms-2' },
+    { orientation: 'vertical', side: 'start', class: 'end-full me-2' },
+  ],
+})

package/dist/shared/variants/number-input.ts

@@ -0,0 +1,32 @@
+import { tv } from '../lib/tv'
+
+export const numberInputStepper = tv({
+  base: 'flex shrink-0 flex-col',
+  variants: {
+    divided: {
+      true: 'border-line border-s',
+    },
+    size: {
+      sm: '[&_svg]:size-3',
+      md: '[&_svg]:size-3',
+      lg: '[&_svg]:size-3.5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    divided: true,
+  },
+})
+
+export const numberInputStep = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none text-muted',
+    'flex min-h-0 flex-1 basis-0 items-center justify-center px-1.5 outline-none',
+    'disabled:pointer-events-none disabled:opacity-40',
+  ],
+  variants: {
+    divided: {
+      true: 'border-line border-t',
+    },
+  },
+})

package/dist/shared/variants/pagination.ts

@@ -0,0 +1,32 @@
+import { tv } from '../lib/tv'
+
+export const pagination = tv({
+  base: 'flex w-full shrink-0 flex-wrap items-center gap-x-4 gap-y-3',
+  variants: {
+    align: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+    },
+  },
+})
+
+export const paginationList = tv({
+  base: 'relative isolate flex max-w-full flex-wrap items-center gap-1',
+})
+
+export const paginationItem = tv({
+  base: 'min-w-0 px-0 tabular-nums [&>span]:min-w-0',
+  variants: {
+    size: {
+      sm: 'size-[var(--hn-control-h-sm)]',
+      md: 'size-[var(--hn-control-h-md)]',
+      lg: 'size-[var(--hn-control-h-lg)]',
+    },
+    selected: { true: 'bg-accent text-accent-on' },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const paginationArrow = tv({ variants: { dir: { ltr: '', rtl: 'rotate-180' } } })

package/dist/shared/variants/panel.ts

@@ -0,0 +1,29 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const panelHeader = tv({
+  base: 'flex items-start justify-between gap-4 px-(--hn-panel-p) pt-(--hn-panel-p)',
+})
+
+export const panelTitle = tv({
+  base: 'flex min-w-0 items-center gap-2',
+})
+
+export const panelIcon = tv({
+  base: 'text-muted flex shrink-0 [&_svg]:size-4.5',
+})
+
+export const panelActions = tv({
+  base: 'flex shrink-0 items-center gap-2',
+})
+
+export const panelBody = tv({
+  base: 'pt-4',
+  variants: {
+    padded: {
+      true: 'px-(--hn-panel-p) pb-(--hn-panel-p)',
+    },
+  },
+  defaultVariants: { padded: true },
+})
+
+export type PanelVariants = VariantProps<typeof panelBody>

package/dist/shared/variants/pin-input.ts

@@ -0,0 +1,31 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const pinInput = tv({
+  base: 'inline-flex max-w-full gap-2',
+})
+
+export const pinInputCell = tv({
+  base: [
+    'hn-field text-fg shrink-0 rounded-md border text-center font-medium tabular-nums outline-none [font-family:inherit]',
+    'placeholder:text-faint placeholder:font-normal',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+  ],
+  variants: {
+    variant: {
+      primary:
+        'border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]',
+      secondary: 'border-transparent [--hn-field-bg:var(--hn-bg-inset)]',
+    },
+    size: {
+      sm: 'size-[var(--hn-control-h-sm)] text-sm',
+      md: 'size-[var(--hn-control-h-md)] text-base',
+      lg: 'size-[var(--hn-control-h-lg)] text-md',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md',
+  },
+})
+
+export type PinInputVariants = VariantProps<typeof pinInputCell>

package/dist/shared/variants/prev-next.ts

@@ -0,0 +1,28 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const prevNextLink = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-lg flex flex-col gap-1 rounded-lg p-4 text-start',
+    'bg-surface border-line border shadow-sm',
+  ],
+  variants: {
+    direction: {
+      prev: 'items-start',
+      next: 'items-end text-end sm:col-start-2',
+    },
+  },
+  defaultVariants: { direction: 'next' },
+})
+
+export const prevNextEyebrow = tv({
+  base: 'text-muted inline-flex items-center gap-1 text-sm',
+  variants: {
+    direction: {
+      prev: '',
+      next: 'flex-row-reverse',
+    },
+  },
+  defaultVariants: { direction: 'next' },
+})
+
+export type PrevNextVariants = VariantProps<typeof prevNextLink>

package/dist/shared/variants/progress.ts

@@ -0,0 +1,46 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const progress = tv({
+  base: 'flex w-full min-w-0 flex-col gap-1.5',
+})
+
+export const progressHeader = tv({
+  base: 'text-fg flex items-baseline justify-between gap-3 text-sm',
+})
+
+export const progressValue = tv({
+  base: 'text-muted ms-auto tabular-nums',
+})
+
+export const progressTrack = tv({
+  base: 'bg-line-strong relative w-full overflow-hidden rounded-full rtl:[--hn-progress-dir:-1]',
+  variants: {
+    size: {
+      sm: 'h-1',
+      md: 'h-2',
+      lg: 'h-3',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const progressBar = tv({
+  base: 'hn-progress-bar block h-full w-[calc(var(--hn-progress-p,0)*100%)] rounded-full',
+  variants: {
+    tone: {
+      accent: 'bg-accent',
+      neutral: 'bg-neutral-solid',
+      success: 'bg-success',
+      warning: 'bg-warning',
+      danger: 'bg-danger',
+      info: 'bg-info',
+    },
+  },
+  defaultVariants: {
+    tone: 'accent',
+  },
+})
+
+export type ProgressVariants = VariantProps<typeof progressTrack> & VariantProps<typeof progressBar>

package/dist/shared/variants/qr-code.ts

@@ -0,0 +1,11 @@
+import { tv } from '../lib/tv'
+
+export const qrCode = tv({
+  base: 'relative isolate inline-block aspect-square w-[var(--hn-qr-size)] max-w-full shrink-0 overflow-hidden rounded-xl align-middle bg-[var(--hn-qr-background)]',
+  variants: { bordered: { true: 'border-line border', false: '' } },
+  defaultVariants: { bordered: true },
+})
+export const qrCodeSvg = tv({ base: 'block size-full' })
+export const qrCodeStatus = tv({
+  base: 'bg-subtle text-muted absolute inset-0 flex flex-col items-center justify-center gap-2 p-3 text-center text-sm',
+})

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

@@ -0,0 +1,5 @@
+import { tv } from '../lib/tv'
+
+export const radioDot = tv({
+  base: 'block size-[calc(var(--hn-checkbox-size)/2)] bg-surface rounded-full',
+})

package/dist/shared/variants/range-calendar.ts

@@ -0,0 +1,24 @@
+import { tv } from '../lib/tv'
+import { calendarCell, calendarDay } from './calendar'
+
+export const rangeCalendarCell = tv({
+  extend: calendarCell,
+  base: [
+    'first:rounded-s-md last:rounded-e-md',
+    'has-[[data-selected]]:bg-accent-soft has-[[data-highlighted]]:bg-accent-soft',
+    'has-[[data-selection-start]]:rounded-s-md has-[[data-highlighted-start]]:rounded-s-md',
+    'has-[[data-selection-end]]:rounded-e-md has-[[data-highlighted-end]]:rounded-e-md',
+  ],
+})
+
+export const rangeCalendarDay = tv({
+  extend: calendarDay,
+  base: [
+    'data-[highlighted]:text-accent-text',
+    'data-[highlighted]:not-[[data-highlighted-end]]:[--hn-state-hover-opacity:0]',
+    'data-[selected]:not-[[data-selection-start]]:not-[[data-selection-end]]:bg-transparent',
+    'data-[selected]:not-[[data-selection-start]]:not-[[data-selection-end]]:text-accent-text',
+    'data-[selected]:not-[[data-selection-start]]:not-[[data-selection-end]]:font-normal',
+    'data-[selected]:[--hn-state-selected-opacity:0]',
+  ],
+})

package/dist/shared/variants/rating.ts

@@ -0,0 +1,46 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const ratingRoot = tv({
+  base: 'inline-flex items-center gap-0.5 data-disabled:pointer-events-none data-disabled:opacity-50',
+  variants: {
+    size: {
+      sm: '[--hn-rating-size:--spacing(4)]',
+      md: '[--hn-rating-size:--spacing(5)]',
+      lg: '[--hn-rating-size:--spacing(6)]',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const ratingItem = tv({
+  base: [
+    'relative inline-flex size-[var(--hn-rating-size)] shrink-0 rounded-xs',
+    'has-[:focus-visible]:[outline:var(--hn-focus-ring-width)_solid_var(--hn-focus-ring)] has-[:focus-visible]:[outline-offset:var(--hn-focus-ring-offset)]',
+  ],
+})
+
+export const ratingStep = tv({
+  base: [
+    'group/hn-rating-step absolute inset-y-0 start-0 cursor-pointer overflow-hidden outline-none',
+    '[width:var(--hn-rating-step-width)] [opacity:var(--hn-rating-step-opacity)] [z-index:var(--hn-rating-step-z-index)]',
+    'disabled:cursor-not-allowed',
+  ],
+})
+
+export const ratingStar = tv({
+  base: 'text-line-strong size-[var(--hn-rating-size)] shrink-0 fill-transparent transition-[color,fill] duration-(--hn-duration-fast) ease-(--hn-ease-enter)',
+  variants: {
+    active: {
+      true: 'text-warning fill-current',
+      false:
+        'group-data-[state=active]/hn-rating-step:text-warning group-data-[state=active]/hn-rating-step:fill-current',
+    },
+  },
+  defaultVariants: { active: false },
+})
+
+export const ratingFill = tv({
+  base: 'absolute inset-y-0 start-0 overflow-hidden',
+})
+
+export type RatingVariants = VariantProps<typeof ratingRoot>

package/dist/shared/variants/result.ts

@@ -0,0 +1,24 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const resultIcon = tv({
+  base: 'flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0',
+  variants: {
+    status: {
+      success: 'bg-success-soft text-success-text',
+      error: 'bg-danger-soft text-danger-text',
+      warning: 'bg-warning-soft text-warning-text',
+      info: 'bg-info-soft text-info-text',
+    },
+    size: {
+      sm: 'size-12 [&_svg]:size-6',
+      md: 'size-14 [&_svg]:size-7',
+      lg: 'size-18 [&_svg]:size-9',
+    },
+  },
+  defaultVariants: {
+    status: 'info',
+    size: 'md',
+  },
+})
+
+export type ResultVariants = VariantProps<typeof resultIcon>