@hina-ui/vue 1.7.3 → 1.7.4

package/dist/shared/variants/ring-progress.ts

@@ -0,0 +1,55 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const ringProgress = tv({
+  base: 'inline-flex flex-col items-center gap-1.5',
+})
+
+export const ringProgressRoot = tv({
+  base: 'relative shrink-0',
+  variants: {
+    size: {
+      sm: 'size-10 text-xs',
+      md: 'size-16 text-sm',
+      lg: 'size-24 text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const ringProgressSvg = tv({
+  base: 'hn-ring-spin size-full -rotate-90',
+})
+
+export const ringProgressTrack = tv({
+  base: 'stroke-line-strong fill-none',
+})
+
+export const ringProgressArc = tv({
+  base: 'hn-ring-arc fill-none',
+  variants: {
+    tone: {
+      accent: 'stroke-accent',
+      neutral: 'stroke-neutral-solid',
+      success: 'stroke-success',
+      warning: 'stroke-warning',
+      danger: 'stroke-danger',
+      info: 'stroke-info',
+    },
+  },
+  defaultVariants: {
+    tone: 'accent',
+  },
+})
+
+export const ringProgressCenter = tv({
+  base: 'text-fg absolute inset-0 flex items-center justify-center tabular-nums',
+})
+
+export const ringProgressLabel = tv({
+  base: 'text-muted text-sm',
+})
+
+export type RingProgressVariants = VariantProps<typeof ringProgressRoot> &
+  VariantProps<typeof ringProgressArc>

package/dist/shared/variants/segmented-control.ts

@@ -0,0 +1,46 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const segmentedControl = tv({
+  base: [
+    'group/hn-segmented bg-inset relative isolate max-w-full rounded-md p-1 select-none',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+  ],
+  variants: {
+    orientation: {
+      horizontal: 'flex-row',
+      vertical: 'flex-col',
+    },
+    block: {
+      true: 'flex w-full',
+      false: 'inline-flex w-fit',
+    },
+  },
+  defaultVariants: { orientation: 'horizontal', block: false },
+})
+
+export const segmentedItem = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none text-muted relative z-[1] inline-flex shrink-0 items-center justify-center',
+    'gap-[var(--hn-control-gap)] rounded-xs font-medium whitespace-nowrap',
+    '[--hn-state-selected-opacity:0] [--hn-state-selected-color:var(--hn-fg-muted)] aria-pressed:z-0 aria-pressed:text-fg',
+    'disabled:pointer-events-none disabled:not-in-data-disabled:opacity-50',
+  ],
+  variants: {
+    size: {
+      sm: 'h-[calc(var(--hn-control-h-sm)-(--spacing(2)))] px-[var(--hn-control-px-sm)] text-sm [&_svg]:size-3.5',
+      md: 'h-[calc(var(--hn-control-h-md)-(--spacing(2)))] px-[var(--hn-control-px-md)] text-base [&_svg]:size-4',
+      lg: 'h-[calc(var(--hn-control-h-lg)-(--spacing(2)))] px-[var(--hn-control-px-lg)] text-md [&_svg]:size-[1.125rem]',
+    },
+    block: {
+      true: 'flex-1 basis-0',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const segmentedThumb = tv({
+  base: 'bg-surface absolute inset-0 -z-10 rounded-xs shadow-sm',
+})
+
+export type SegmentedControlVariants = VariantProps<typeof segmentedControl>
+export type SegmentedItemVariants = VariantProps<typeof segmentedItem>

package/dist/shared/variants/select.ts

@@ -0,0 +1,66 @@
+import { tv } from '../lib/tv'
+import { inputActionSlot } from './input'
+
+export const selectTrigger = 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',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    '[&_svg]:size-[var(--hn-input-icon)] [&_svg]:shrink-0',
+  ],
+})
+
+export const selectButton = tv({
+  base: [
+    'group/hn-disclosure flex h-full min-w-0 flex-1 cursor-pointer items-center bg-transparent ps-[var(--hn-input-px)] pe-0 text-start text-inherit outline-none [font:inherit]',
+    'data-placeholder:text-faint data-placeholder:font-normal disabled:cursor-not-allowed',
+    '[&_svg]:size-[var(--hn-input-icon)] [&_svg]:shrink-0',
+  ],
+})
+
+export const selectContent = tv({
+  base: [
+    'hn-anim-pop z-(--hn-z-overlay) flex w-[var(--hn-overlay-anchor-width)] min-w-40 flex-col overflow-hidden shadow-md outline-none',
+    '[&[data-hn-fresh]_[data-highlighted]:not(:hover)]:[--hn-state-hover-opacity:0]',
+  ],
+})
+
+export const selectList = tv({
+  base: 'max-h-[min(20rem,var(--hn-overlay-available-height,20rem))]',
+})
+
+export const selectItem = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none relative isolate flex w-full cursor-pointer',
+    'items-center gap-[var(--hn-control-gap)] rounded-md px-2.5 py-2 text-start text-sm select-none',
+    'text-fg outline-none [&_svg]:size-4 [&_svg]:shrink-0',
+    'data-disabled:pointer-events-none data-disabled:opacity-50',
+  ],
+})
+
+export const selectLabel = tv({
+  base: 'text-muted px-2.5 py-1.5 text-xs font-medium',
+})
+
+export const selectEmpty = tv({
+  base: 'text-muted px-2.5 py-2 text-sm',
+})
+
+export const selectListBody = tv({
+  base: 'flex flex-col p-1',
+})
+
+export const selectHost = tv({
+  base: 'relative cursor-pointer',
+})
+
+export const selectValue = tv({
+  base: 'min-w-0 flex-1 truncate',
+  variants: {
+    clearing: { true: 'pe-[var(--hn-input-h)]' },
+  },
+})
+
+export const selectClearSlot = tv({
+  base: [inputActionSlot(), 'absolute inset-y-0 end-[var(--hn-input-h)]'],
+})

package/dist/shared/variants/sheet.ts

@@ -0,0 +1,32 @@
+import { tv } from '../lib/tv'
+
+export const sheetPanel = tv({
+  base: [
+    'hn-anim-sheet-bottom hn-transition pointer-events-auto fixed inset-x-0 bottom-0 z-(--hn-z-overlay)',
+    'mx-auto flex max-h-[calc(100dvh-3rem)] w-full flex-col sm:max-w-xl',
+    'rounded-t-xl rounded-b-none border-b-0 shadow-lg outline-none',
+    'data-dragging:transition-none',
+  ],
+  variants: {
+    padded: { true: 'gap-4 pb-[max(var(--hn-panel-p),env(safe-area-inset-bottom))]' },
+    grip: { true: '', false: '' },
+  },
+  compoundVariants: [
+    { padded: true, grip: true, class: 'pt-2' },
+    { padded: true, grip: false, class: 'pt-(--hn-panel-p)' },
+  ],
+  defaultVariants: { grip: true, padded: true },
+})
+
+export const sheetGrip = tv({
+  base: 'flex shrink-0 cursor-grab touch-none flex-col select-none data-dragging:cursor-grabbing',
+  variants: { standalone: { true: 'py-2' } },
+})
+
+export const sheetHandle = tv({
+  base: 'bg-line-strong hn-transition-base mx-auto h-1.5 w-10 rounded-full data-disabled:opacity-50',
+  variants: {
+    header: { true: 'mb-3', false: '' },
+  },
+  defaultVariants: { header: true },
+})

package/dist/shared/variants/sidebar.ts

@@ -0,0 +1,36 @@
+import { tv } from '../lib/tv'
+
+export const sidebarRoot = tv({
+  base: 'flex h-full min-h-0 shrink-0 flex-col overflow-hidden',
+  variants: {
+    inDrawer: {
+      true: 'w-full',
+      false:
+        'hn-sidebar border-line w-64 border-e data-[state=rail]:w-14 data-[state=hidden]:w-0 data-[state=hidden]:border-e-transparent',
+    },
+  },
+})
+
+export const sidebarRegion = tv({
+  base: 'shrink-0 py-3',
+  variants: {
+    inDrawer: { true: 'w-full', false: 'w-[calc(16rem-1px)] px-3' },
+    footer: { true: 'border-line w-full border-t' },
+  },
+})
+
+export const sidebarLabel = tv({
+  base: 'hn-sidebar-label min-w-0',
+})
+
+export const sidebarBrand = tv({
+  base: 'flex min-h-8 items-center gap-2',
+})
+
+export const sidebarIcon = tv({
+  base: 'flex size-8 shrink-0 items-center justify-center overflow-hidden [&>*]:size-full [&_img]:size-full [&_img]:object-contain [&_svg]:size-full',
+})
+
+export const sidebarWordmark = tv({
+  base: 'flex flex-1 items-center [&_img]:max-h-8 [&_img]:max-w-full [&_img]:object-contain [&_svg]:max-h-8 [&_svg]:max-w-full',
+})

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

@@ -0,0 +1,25 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const simpleGrid = tv({
+  base: 'grid',
+  variants: {
+    fit: {
+      false: 'grid-cols-[repeat(auto-fill,minmax(var(--hn-simple-grid-min),1fr))]',
+      true: 'grid-cols-[repeat(auto-fit,minmax(var(--hn-simple-grid-min),1fr))]',
+    },
+    gap: {
+      none: 'gap-0',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-x-[var(--hn-inline-gap)] gap-y-[var(--hn-stack-gap)]',
+      lg: 'gap-6',
+      xl: 'gap-8',
+    },
+  },
+  defaultVariants: {
+    fit: false,
+    gap: 'md',
+  },
+})
+
+export type SimpleGridVariants = VariantProps<typeof simpleGrid>

package/dist/shared/variants/slider.ts

@@ -0,0 +1,65 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const slider = tv({
+  base: 'group/hn-slider relative flex w-full min-w-0 flex-col data-disabled:cursor-not-allowed data-disabled:opacity-50',
+  variants: {
+    size: {
+      sm: '[--hn-slider-h:1.25rem] [--hn-slider-thumb:0.75rem]',
+      md: '[--hn-slider-h:1.5rem] [--hn-slider-thumb:1rem]',
+      lg: '[--hn-slider-h:1.75rem] [--hn-slider-thumb:1.25rem]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const sliderRoot = tv({
+  base: [
+    'bg-line-strong relative flex h-[var(--hn-slider-h)] w-full cursor-pointer touch-none rounded-full select-none',
+    'data-disabled:pointer-events-none',
+  ],
+})
+
+export const sliderTrack = tv({
+  base: 'absolute inset-0 overflow-hidden rounded-full',
+})
+
+export const sliderRange = tv({
+  base: [
+    'hn-slider-move bg-accent absolute inset-y-0 start-0 rounded-full group-data-dragging/hn-slider:transition-none',
+    'w-[calc((100%-var(--hn-slider-thumb)-0.5rem)*var(--hn-slider-p)+var(--hn-slider-thumb)+0.5rem)]',
+  ],
+})
+
+export const sliderRangeBetween = tv({
+  base: [
+    'hn-slider-move bg-accent absolute inset-y-0 rounded-full group-data-dragging/hn-slider:transition-none',
+    'start-[calc(var(--hn-slider-p)*(100%-var(--hn-slider-thumb)-0.5rem))]',
+    'w-[calc((var(--hn-slider-q)-var(--hn-slider-p))*(100%-var(--hn-slider-thumb)-0.5rem)+var(--hn-slider-thumb)+0.5rem)]',
+  ],
+})
+
+export const sliderThumb = tv({
+  base: [
+    '[--hn-slider-thumb-transform:translateX(-50%)] rtl:[--hn-slider-thumb-transform:translateX(50%)]',
+    'hn-state-layer hn-slider-move border-line bg-surface text-fg top-1 !block size-[var(--hn-slider-thumb)] cursor-grab rounded-full border shadow-sm outline-none',
+    '!start-[calc(0.25rem+var(--hn-slider-thumb)/2+var(--hn-slider-p)*(100%-0.5rem-var(--hn-slider-thumb)))]',
+    'data-focus-ring:outline-2 data-focus-ring:outline-offset-2 data-focus-ring:outline-solid data-focus-ring:outline-(--hn-focus-ring)',
+    'group-data-dragging/hn-slider:cursor-grabbing group-data-dragging/hn-slider:transition-none data-disabled:cursor-not-allowed',
+  ],
+})
+
+export const sliderMarks = tv({
+  base: 'pointer-events-none absolute inset-x-[calc(var(--hn-slider-thumb)/2+0.25rem)] top-1/2 h-0',
+})
+
+export const sliderMark = tv({
+  base: 'border-line-strong bg-surface block size-1.5 shrink-0 rounded-full border',
+})
+
+export const sliderMarkLabels = tv({
+  base: 'text-muted relative mx-[calc(var(--hn-slider-thumb)/2+0.25rem)] h-4 text-xs',
+})
+
+export type SliderVariants = VariantProps<typeof slider>

package/dist/shared/variants/space.ts

@@ -0,0 +1,18 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const space = tv({
+  base: 'shrink-0',
+  variants: {
+    size: {
+      xs: 'size-1',
+      sm: 'size-2',
+      md: 'size-4',
+      lg: 'size-6',
+      xl: 'size-8',
+      flex: 'flex-1 self-stretch',
+    },
+  },
+  defaultVariants: { size: 'flex' },
+})
+
+export type SpaceVariants = VariantProps<typeof space>

package/dist/shared/variants/spinner.ts

@@ -0,0 +1,15 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const spinner = tv({
+  base: 'inline-block shrink-0 rounded-full border-current border-e-transparent align-[-0.125em]',
+  variants: {
+    size: {
+      sm: 'size-3.5 border-[1.5px]',
+      md: 'size-4 border-2',
+      lg: 'size-5 border-2',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type SpinnerVariants = VariantProps<typeof spinner>

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

@@ -0,0 +1,11 @@
+import { tv } from '../lib/tv'
+
+export const splitButton = tv({
+  base: 'max-w-full',
+  variants: { block: { true: 'flex w-full', false: 'inline-flex' } },
+  defaultVariants: { block: false },
+})
+
+export const splitButtonAction = tv({
+  base: 'min-w-0 flex-1 shrink [&>span]:min-w-0',
+})

package/dist/shared/variants/stack.ts

@@ -0,0 +1,34 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const stack = tv({
+  base: 'flex flex-col',
+  variants: {
+    gap: {
+      none: 'gap-0',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-[var(--hn-stack-gap)]',
+      lg: 'gap-6',
+      xl: 'gap-8',
+    },
+    align: {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+  },
+  defaultVariants: {
+    gap: 'md',
+  },
+})
+
+export type StackVariants = VariantProps<typeof stack>

package/dist/shared/variants/statistic.ts

@@ -0,0 +1,51 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const statistic = tv({
+  base: 'flex min-w-0 items-start justify-between gap-4',
+})
+
+export const statisticBody = tv({
+  base: 'flex min-w-0 flex-col gap-1',
+})
+
+export const statisticLabel = tv({
+  base: 'text-muted text-sm',
+})
+
+export const statisticValue = tv({
+  base: 'text-fg flex items-baseline gap-1 font-semibold tracking-tight tabular-nums',
+  variants: {
+    size: {
+      sm: 'text-xl',
+      md: 'text-2xl',
+      lg: 'text-3xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const statisticAffix = tv({
+  base: 'text-muted text-sm font-normal',
+})
+
+export const statisticDelta = tv({
+  base: 'flex flex-wrap items-center gap-x-1 text-sm whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0',
+  variants: {
+    tone: {
+      success: 'text-success-text',
+      danger: 'text-danger-text',
+      neutral: 'text-muted',
+    },
+  },
+  defaultVariants: {
+    tone: 'neutral',
+  },
+})
+
+export const statisticIcon = tv({
+  base: 'bg-subtle text-muted flex size-10 shrink-0 items-center justify-center rounded-md [&_svg]:size-5',
+})
+
+export type StatisticVariants = VariantProps<typeof statisticValue>

package/dist/shared/variants/stepper.ts

@@ -0,0 +1,39 @@
+import { tv } from '../lib/tv'
+
+export const stepper = tv({
+  base: 'flex w-full min-w-0 flex-col gap-(--hn-stack-gap)',
+  variants: {
+    size: {
+      sm: 'text-sm [--hn-stepper-indicator:var(--hn-control-h-sm)]',
+      md: 'text-sm [--hn-stepper-indicator:var(--hn-control-h-md)]',
+      lg: 'text-base [--hn-stepper-indicator:var(--hn-control-h-lg)]',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const stepperTrigger = tv({
+  base: [
+    'hn-focus-ring cursor-pointer text-fg relative flex min-w-0 gap-(--hn-inline-gap) rounded-md p-1',
+    'disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed',
+  ],
+  variants: {
+    orientation: {
+      horizontal: 'w-full flex-col items-center text-center',
+      vertical: 'items-start text-start',
+    },
+  },
+})
+
+export const stepperIndicator = tv({
+  base: 'hn-transition-base flex size-(--hn-stepper-indicator) shrink-0 items-center justify-center rounded-full border text-sm font-medium tabular-nums [&_svg]:size-[1em]',
+  variants: {
+    state: {
+      inactive: 'border-line text-muted bg-surface',
+      active: 'border-accent bg-accent text-accent-on',
+      completed: 'border-transparent bg-accent-soft text-accent-text',
+      error: 'border-danger bg-danger-soft text-danger-text',
+    },
+  },
+  defaultVariants: { state: 'inactive' },
+})

package/dist/shared/variants/switch.ts

@@ -0,0 +1,34 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const switchTrack = tv({
+  base: [
+    'hn-focus-ring hn-state-layer hn-transition-base group/hn-switch relative box-border shrink-0 cursor-pointer',
+    'h-[var(--hn-switch-h)] w-[var(--hn-switch-w)] rounded-full border border-transparent',
+    'bg-line-strong text-fg disabled:cursor-not-allowed',
+    '[--hn-state-selected-color:currentColor] [--hn-state-selected-opacity:0]',
+    '[--hn-switch-p:0] [--hn-switch-travel:calc(var(--hn-switch-w)-var(--hn-switch-thumb)-8px)] rtl:[--hn-switch-dir:-1]',
+    'data-hn-on:bg-accent data-hn-on:text-accent-on data-hn-on:[--hn-switch-p:1]',
+    'data-invalid:border-danger data-invalid:focus-visible:outline-danger',
+  ],
+  variants: {
+    size: {
+      sm: '[--hn-switch-h:1.25rem] [--hn-switch-thumb:0.75rem] [--hn-switch-w:2rem]',
+      md: '[--hn-switch-h:1.5rem] [--hn-switch-thumb:1rem] [--hn-switch-w:2.5rem]',
+      lg: '[--hn-switch-h:1.75rem] [--hn-switch-thumb:1.25rem] [--hn-switch-w:3rem]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const switchThumb = tv({
+  base: [
+    'hn-switch-thumb pointer-events-none absolute top-0.75 start-0.75 box-border block rounded-full',
+    'size-[var(--hn-switch-thumb)]',
+    '[translate:calc(var(--hn-switch-p)*var(--hn-switch-travel)*var(--hn-switch-dir,1))_0]',
+    'border-line bg-surface border shadow-sm',
+  ],
+})
+
+export type SwitchVariants = VariantProps<typeof switchTrack>

package/dist/shared/variants/table.ts

@@ -0,0 +1,55 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const tableWrapper = tv({
+  base: [
+    'max-w-full rounded-lg',
+    '[&_th]:h-(--hn-row-h) [&_td]:h-(--hn-row-h)',
+    '[&_caption>span]:sticky [&_caption>span]:start-[0.75em] [&_caption>span]:inline-block',
+    '[&_tbody_tr:last-child_td]:border-b-0',
+  ],
+  variants: {
+    variant: {
+      primary:
+        'bg-surface border-line border shadow-sm [&_thead_th]:bg-subtle [--hn-table-bg:var(--hn-surface)] [--hn-table-head-bg:var(--hn-bg-subtle)]',
+      secondary:
+        '[&_thead_th]:bg-inset [&_thead_th:first-child]:rounded-ss-md [&_thead_th:last-child]:rounded-se-md [--hn-table-bg:var(--hn-bg-canvas)] [--hn-table-head-bg:var(--hn-bg-inset)]',
+    },
+    hover: {
+      true: '[&_tbody_tr]:hn-state-layer',
+      false: '',
+    },
+    stickyHeader: {
+      true: '[&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-[2]',
+      false: '',
+    },
+  },
+  defaultVariants: { variant: 'primary', hover: true, stickyHeader: false },
+})
+
+export type TableVariants = VariantProps<typeof tableWrapper>
+
+export const tableCell = tv({
+  base: 'py-0',
+  variants: {
+    align: {
+      start: '',
+      center: 'text-center',
+      end: 'text-end',
+    },
+    sticky: {
+      true: 'border-line sticky start-0 z-[1] border-e',
+      false: '',
+    },
+    head: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    { sticky: true, head: false, class: 'bg-(--hn-table-bg)' },
+    { sticky: true, head: true, class: 'bg-(--hn-table-head-bg) z-[3]!' },
+  ],
+  defaultVariants: { align: 'start', sticky: false, head: false },
+})
+
+export type TableCellVariants = VariantProps<typeof tableCell>