@hina-ui/vue 1.7.3 → 1.7.4

package/dist/shared/variants/disclosure-icon.ts

@@ -0,0 +1,25 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const disclosureIcon = tv({
+  base: 'hn-transition shrink-0',
+  variants: {
+    direction: {
+      down: '',
+      end: '',
+    },
+    state: {
+      auto: '',
+      open: '',
+      closed: '',
+    },
+  },
+  compoundVariants: [
+    { direction: 'down', state: 'auto', class: 'group-data-open/hn-disclosure:rotate-180' },
+    { direction: 'end', state: 'auto', class: 'group-data-open/hn-disclosure:rotate-90' },
+    { direction: 'down', state: 'open', class: 'rotate-180' },
+    { direction: 'end', state: 'open', class: 'rotate-90' },
+  ],
+  defaultVariants: { direction: 'down', state: 'auto' },
+})
+
+export type DisclosureIconVariants = VariantProps<typeof disclosureIcon>

package/dist/shared/variants/drawer.ts

@@ -0,0 +1,23 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const drawerCard = tv({
+  base: [
+    'hn-anim-drawer pointer-events-auto fixed inset-y-0 z-(--hn-z-overlay) flex flex-col',
+    'max-w-[calc(100vw-3rem)] rounded-none shadow-lg outline-none',
+  ],
+  variants: {
+    padded: { true: 'gap-4 py-(--hn-panel-p)' },
+    side: {
+      start: 'start-0',
+      end: 'end-0',
+    },
+    size: {
+      sm: 'w-72',
+      md: 'w-90',
+      lg: 'w-120',
+    },
+  },
+  defaultVariants: { side: 'end', size: 'md', padded: true },
+})
+
+export type DrawerVariants = VariantProps<typeof drawerCard>

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

@@ -0,0 +1,19 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const dropdownItem = 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',
+    'outline-none [&_svg]:size-4 [&_svg]:shrink-0',
+    'data-disabled:pointer-events-none data-disabled:opacity-50',
+  ],
+  variants: {
+    tone: {
+      neutral: 'text-fg',
+      danger: 'text-danger-text [--hn-state-color:var(--hn-danger)]',
+    },
+  },
+  defaultVariants: { tone: 'neutral' },
+})
+
+export type DropdownItemVariants = VariantProps<typeof dropdownItem>

package/dist/shared/variants/editable.ts

@@ -0,0 +1,38 @@
+import { tv } from '../lib/tv'
+
+export const editable = tv({
+  base: 'flex w-full min-w-0 flex-col gap-2 text-fg',
+  variants: {
+    size: {
+      sm: 'text-sm [--hn-editable-h:var(--hn-control-h-sm)] [--hn-editable-px:var(--hn-control-px-sm)]',
+      md: 'text-base [--hn-editable-h:var(--hn-control-h-md)] [--hn-editable-px:var(--hn-control-px-md)]',
+      lg: 'text-md [--hn-editable-h:var(--hn-control-h-lg)] [--hn-editable-px:var(--hn-control-px-lg)]',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const editablePreview = tv({
+  base: [
+    'relative flex min-h-(--hn-editable-h) w-full min-w-0 items-center gap-3 rounded-md border border-transparent px-(--hn-editable-px) py-[calc((var(--hn-editable-h)-1lh)/2-1px)] text-start [font:inherit]',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+    'data-invalid:border-danger',
+  ],
+  variants: { interactive: { true: 'hn-focus-ring hn-state-layer cursor-pointer outline-none' } },
+})
+
+export const editablePreviewText = tv({
+  base: 'min-w-0 flex-1 data-empty:text-faint',
+  variants: { multiline: { true: 'whitespace-pre-wrap break-words', false: 'truncate' } },
+})
+
+export const editableInput = tv({
+  base: [
+    'hn-field block h-(--hn-editable-h) w-full min-w-0 rounded-md border border-line px-(--hn-editable-px) py-[calc((var(--hn-editable-h)-1lh)/2-1px)] outline-none [font:inherit]',
+    '[--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]',
+    'placeholder:text-faint disabled:cursor-not-allowed disabled:opacity-50',
+  ],
+})
+
+export const editableActions = tv({ base: 'flex min-w-0 items-center justify-end gap-1' })
+export const editableError = tv({ base: 'px-(--hn-editable-px) text-sm text-danger-text' })

package/dist/shared/variants/empty.ts

@@ -0,0 +1,67 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const empty = tv({
+  base: 'flex w-full min-w-0 flex-col items-center justify-center text-center',
+  variants: {
+    size: {
+      sm: 'gap-2 px-4 py-6',
+      md: 'gap-3 px-6 py-10',
+      lg: 'gap-4 px-8 py-14',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const emptyIcon = tv({
+  base: 'bg-subtle text-muted flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0',
+  variants: {
+    size: {
+      sm: 'size-10 [&_svg]:size-5',
+      md: 'size-12 [&_svg]:size-6',
+      lg: 'size-14 [&_svg]:size-7',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const emptyText = tv({
+  base: 'flex max-w-sm flex-col items-center gap-1',
+})
+
+export const emptyTitle = tv({
+  base: 'text-fg font-medium text-balance',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const emptyDescription = tv({
+  base: 'text-muted text-balance',
+  variants: {
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-sm',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const emptyActions = tv({
+  base: 'flex flex-wrap items-center justify-center gap-2',
+})
+
+export type EmptyVariants = VariantProps<typeof empty>

package/dist/shared/variants/file-upload.ts

@@ -0,0 +1,31 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const fileUploadRoot = tv({
+  base: 'flex w-full min-w-0 flex-col gap-2',
+})
+
+export const fileUploadArea = tv({
+  base: [
+    'hn-interactive hn-state-layer text-muted border-line flex w-full flex-1 flex-col items-center justify-center gap-2 rounded-md border border-dashed px-4 py-6 text-center text-sm',
+    'hover:border-line-strong data-[dragging]:border-accent data-[dragging]:text-accent-text',
+    'data-invalid:border-danger disabled:cursor-not-allowed disabled:opacity-50',
+  ],
+})
+
+export const fileUploadList = tv({
+  base: 'flex flex-col gap-1',
+})
+
+export const fileUploadItem = tv({
+  base: 'bg-subtle flex min-w-0 items-center gap-3 rounded-md px-3 py-2',
+})
+
+export const fileUploadThumb = tv({
+  base: 'text-muted flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-sm bg-inset [&>img]:size-full [&>img]:object-cover [&>svg]:size-5',
+})
+
+export const fileUploadMeta = tv({
+  base: 'flex min-w-0 flex-1 flex-col',
+})
+
+export type FileUploadVariants = VariantProps<typeof fileUploadArea>

package/dist/shared/variants/flex.ts

@@ -0,0 +1,49 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const flex = tv({
+  base: 'flex',
+  variants: {
+    direction: {
+      row: 'flex-row',
+      col: 'flex-col',
+      'row-reverse': 'flex-row-reverse',
+      'col-reverse': 'flex-col-reverse',
+    },
+    gap: {
+      none: 'gap-0',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: '',
+      lg: 'gap-6',
+      xl: 'gap-8',
+    },
+    align: {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      baseline: 'items-baseline',
+      stretch: 'items-stretch',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+    wrap: {
+      true: 'flex-wrap',
+      false: 'flex-nowrap',
+    },
+  },
+  compoundVariants: [
+    { direction: ['row', 'row-reverse'], gap: 'md', class: 'gap-[var(--hn-inline-gap)]' },
+    { direction: ['col', 'col-reverse'], gap: 'md', class: 'gap-[var(--hn-stack-gap)]' },
+  ],
+  defaultVariants: {
+    direction: 'row',
+  },
+})
+
+export type FlexVariants = VariantProps<typeof flex>

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

@@ -0,0 +1,17 @@
+import { tv } from '../lib/tv'
+
+export const floatButton = tv({
+  base: 'hn-float-button z-20 max-w-full shadow-md [&>span]:min-w-0',
+  variants: {
+    variant: { solid: '', soft: '', outline: 'bg-surface' },
+    position: { fixed: 'fixed', absolute: 'absolute', static: 'relative' },
+    shape: { circle: 'rounded-full', square: 'rounded-xl' },
+    size: {
+      sm: 'h-10 [&_svg]:size-4',
+      md: 'h-12 [&_svg]:size-5',
+      lg: 'h-14 [&_svg]:size-6',
+    },
+    extended: { true: 'px-5', false: 'aspect-square px-0' },
+  },
+  defaultVariants: { position: 'fixed', shape: 'circle', size: 'md', extended: false },
+})

package/dist/shared/variants/form-field.ts

@@ -0,0 +1,65 @@
+import { tv } from '../lib/tv'
+
+export const formFieldRoot = tv({
+  base: 'min-w-0',
+  variants: {
+    orientation: {
+      vertical: '',
+      horizontal: '',
+      responsive: '@container/hn-form-field',
+    },
+  },
+})
+
+export const formFieldLayout = tv({
+  base: 'grid min-w-0 grid-cols-1 items-start gap-x-6 gap-y-1.5',
+  variants: {
+    orientation: {
+      vertical: '',
+      horizontal: 'grid-cols-[var(--hn-form-label-width)_minmax(0,1fr)]',
+      responsive: '@min-[32rem]/hn-form-field:grid-cols-[var(--hn-form-label-width)_minmax(0,1fr)]',
+    },
+  },
+})
+
+export const formFieldContent = tv({
+  base: 'flex min-w-0 flex-col gap-1.5',
+})
+
+export const formFieldControl = tv({
+  base: 'min-w-0',
+  variants: {
+    orientation: {
+      vertical: '',
+      horizontal: 'grid min-h-[var(--hn-control-h-md)] items-center',
+      responsive:
+        '@min-[32rem]/hn-form-field:grid @min-[32rem]/hn-form-field:min-h-[var(--hn-control-h-md)] @min-[32rem]/hn-form-field:items-center',
+    },
+  },
+})
+
+export const formFieldLabel = tv({
+  base: 'text-fg inline-flex items-center gap-1 text-sm font-medium',
+  variants: {
+    orientation: {
+      vertical: '',
+      horizontal: 'min-h-[var(--hn-control-h-md)]',
+      responsive: '@min-[32rem]/hn-form-field:min-h-[var(--hn-control-h-md)]',
+    },
+    disabled: {
+      true: 'text-disabled',
+    },
+  },
+})
+
+export const formFieldMark = tv({
+  base: 'text-danger-text',
+})
+
+export const formFieldDescription = tv({
+  base: 'text-muted text-sm',
+})
+
+export const formFieldMessage = tv({
+  base: 'text-danger-text text-sm',
+})

package/dist/shared/variants/form-layout.ts

@@ -0,0 +1,33 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const formLayoutRoot = tv({
+  base: 'm-0 min-w-0 border-0 p-0',
+})
+
+export const formLayoutLegend = tv({
+  base: 'text-fg p-0 text-base font-medium',
+})
+
+export const formLayoutDescription = tv({
+  base: 'text-muted mt-1 text-sm',
+})
+
+export const formLayoutGrid = tv({
+  base: 'grid gap-4',
+  variants: {
+    columns: {
+      1: 'grid-cols-1',
+      2: 'grid-cols-1 sm:grid-cols-2',
+      3: 'grid-cols-1 sm:grid-cols-3',
+      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    },
+    headed: {
+      true: 'mt-4',
+    },
+  },
+  defaultVariants: {
+    columns: 1,
+  },
+})
+
+export type FormLayoutVariants = VariantProps<typeof formLayoutGrid>

package/dist/shared/variants/form.ts

@@ -0,0 +1,5 @@
+import { tv } from '../lib/tv'
+
+export const formRoot = tv({
+  base: 'flex flex-col gap-4',
+})

package/dist/shared/variants/grid.ts

@@ -0,0 +1,35 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const grid = tv({
+  base: 'grid',
+  variants: {
+    cols: {
+      1: 'grid-cols-1',
+      2: 'grid-cols-2',
+      3: 'grid-cols-3',
+      4: 'grid-cols-4',
+      5: 'grid-cols-5',
+      6: 'grid-cols-6',
+      7: 'grid-cols-7',
+      8: 'grid-cols-8',
+      9: 'grid-cols-9',
+      10: 'grid-cols-10',
+      11: 'grid-cols-11',
+      12: 'grid-cols-12',
+    },
+    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: {
+    cols: 1,
+    gap: 'md',
+  },
+})
+
+export type GridVariants = VariantProps<typeof grid>

package/dist/shared/variants/heading.ts

@@ -0,0 +1,30 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const heading = tv({
+  base: 'text-fg',
+  variants: {
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      base: 'text-base',
+      md: 'text-md',
+      lg: 'text-lg',
+      xl: 'text-xl',
+      '2xl': 'text-2xl',
+    },
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+    },
+    truncate: {
+      true: 'truncate',
+    },
+  },
+  compoundVariants: [{ size: ['xl', '2xl'], class: 'tracking-tight' }],
+  defaultVariants: {
+    weight: 'semibold',
+  },
+})
+
+export type HeadingVariants = VariantProps<typeof heading>

package/dist/shared/variants/image.ts

@@ -0,0 +1,31 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const imageRoot = tv({
+  // An explicit minimum lets WebKit use height + aspect-ratio instead of the
+  // image's intrinsic width when sizing shrink-to-fit ancestors.
+  base: 'relative isolate block w-full min-w-0 overflow-hidden',
+  variants: {
+    preview: {
+      true: 'hn-focus-ring cursor-zoom-in',
+    },
+  },
+})
+
+export const image = tv({
+  base: 'relative z-10 block size-full',
+  variants: {
+    lazy: {
+      true: 'transition-opacity duration-(--hn-duration-base) ease-enter motion-reduce:transition-none',
+    },
+    fit: {
+      cover: 'object-cover',
+      contain: 'object-contain',
+      fill: 'object-fill',
+      none: 'object-none',
+      'scale-down': 'object-scale-down',
+    },
+  },
+  defaultVariants: { fit: 'cover' },
+})
+
+export type ImageVariants = VariantProps<typeof image>

package/dist/shared/variants/indicator.ts

@@ -0,0 +1,26 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const indicator = tv({
+  base: 'relative inline-flex shrink-0 rounded-full align-middle',
+  variants: {
+    tone: {
+      accent: 'bg-accent',
+      neutral: 'bg-neutral-solid',
+      success: 'bg-success',
+      warning: 'bg-warning',
+      danger: 'bg-danger',
+      info: 'bg-info',
+    },
+    size: {
+      sm: 'size-1.5',
+      md: 'size-2',
+      lg: 'size-2.5',
+    },
+  },
+  defaultVariants: {
+    tone: 'neutral',
+    size: 'md',
+  },
+})
+
+export type IndicatorVariants = VariantProps<typeof indicator>

package/dist/shared/variants/inline.ts

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

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

@@ -0,0 +1,20 @@
+import { tv } from '../lib/tv'
+
+export const inputGroup = tv({
+  base: [
+    '[&>button]:h-auto [&>button]:rounded-none [&>button]:[--hn-press-scale:1]',
+    '[&>button:focus-visible]:-outline-offset-2',
+  ],
+  variants: {
+    divided: {
+      true: '[&>*+*]:border-s [&>*+*]:border-s-line',
+    },
+  },
+  defaultVariants: {
+    divided: true,
+  },
+})
+
+export const inputGroupAddon = tv({
+  base: 'text-muted flex shrink-0 items-center gap-2 px-[var(--hn-input-px)] whitespace-nowrap [&>svg]:size-[var(--hn-input-icon)]',
+})

package/dist/shared/variants/input.ts

@@ -0,0 +1,82 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const inputHost = tv({
+  base: [
+    'group/hn-field text-fg flex w-full min-w-0 cursor-text items-stretch overflow-hidden rounded-md border font-medium',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+  ],
+  variants: {
+    variant: {
+      primary:
+        'hn-field border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]',
+      secondary: 'hn-field border-transparent [--hn-field-bg:var(--hn-bg-inset)]',
+    },
+    size: {
+      sm: 'h-[var(--hn-control-h-sm)] text-sm [--hn-input-h:var(--hn-control-h-sm)] [--hn-input-px:var(--hn-control-px-sm)] [--hn-input-icon:0.875rem]',
+      md: 'h-[var(--hn-control-h-md)] text-base [--hn-input-h:var(--hn-control-h-md)] [--hn-input-px:var(--hn-control-px-md)] [--hn-input-icon:1rem]',
+      lg: 'h-[var(--hn-control-h-lg)] text-md [--hn-input-h:var(--hn-control-h-lg)] [--hn-input-px:var(--hn-control-px-lg)] [--hn-input-icon:1.125rem]',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md',
+  },
+})
+
+export const textInputHost = tv({
+  extend: inputHost,
+  variants: {
+    variant: {
+      bare: 'rounded-none border-0 bg-transparent shadow-none outline-none',
+    },
+  },
+})
+
+export const inputControl = tv({
+  base: [
+    'h-full min-w-0 flex-1 bg-transparent px-[var(--hn-input-px)] text-inherit outline-none [font:inherit]',
+    'placeholder:text-faint placeholder:font-normal disabled:cursor-not-allowed',
+  ],
+  variants: {
+    leading: {
+      true: 'ps-0',
+    },
+    trailing: {
+      true: 'pe-0',
+    },
+  },
+})
+
+export const inputAdornment = tv({
+  base: [
+    'text-muted relative flex min-w-[var(--hn-input-h)] shrink-0 items-center justify-center self-stretch px-1',
+    '[&>svg]:size-[var(--hn-input-icon)] [&>span_svg]:size-[var(--hn-input-icon)]',
+  ],
+})
+
+export const inputAction = tv({
+  base: [
+    'hn-interactive hn-state-layer text-fg cursor-pointer outline-none',
+    'focus-visible:[outline-offset:calc(var(--hn-focus-ring-offset)*-1)]',
+    'disabled:pointer-events-none',
+  ],
+})
+
+export const inputIndicator = tv({
+  base: 'cursor-pointer outline-none',
+})
+
+export const inputActionSlot = tv({
+  base: 'flex shrink-0 items-stretch self-stretch',
+})
+
+export type InputVariants = VariantProps<typeof inputHost>
+export type TextInputVariants = VariantProps<typeof textInputHost>
+
+export const inputEmbedded = tv({
+  base: [
+    'group/hn-field flex min-w-0 flex-1 items-stretch',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+    'group-data-disabled/hn-field:data-disabled:opacity-100',
+  ],
+})

package/dist/shared/variants/lightbox.ts

@@ -0,0 +1,5 @@
+import { tv } from '../lib/tv'
+
+export const lightboxStage = tv({
+  base: 'dark fixed inset-0 z-(--hn-z-overlay) touch-none p-4 outline-none select-none sm:p-6',
+})

package/dist/shared/variants/link.ts

@@ -0,0 +1,14 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const link = tv({
+  base: 'hn-link cursor-pointer',
+  variants: {
+    tone: {
+      accent: '[--hn-link-color:var(--hn-accent-text)]',
+      neutral: '[--hn-link-color:var(--hn-fg-default)]',
+    },
+  },
+  defaultVariants: { tone: 'accent' },
+})
+
+export type LinkVariants = VariantProps<typeof link>