@hina-ui/vue 1.7.3 → 1.7.4

package/dist/shared/variants/calendar.ts

@@ -0,0 +1,83 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const calendarRoot = tv({
+  base: 'text-fg inline-flex flex-col select-none [--hn-calendar-row-gap:--spacing(0.5)] data-disabled:pointer-events-none data-disabled:opacity-50',
+  variants: {
+    size: {
+      sm: 'text-sm [--hn-calendar-cell:var(--hn-control-h-sm)]',
+      md: 'text-base [--hn-calendar-cell:var(--hn-control-h-md)]',
+      lg: 'text-md [--hn-calendar-cell:var(--hn-control-h-lg)]',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const calendarPicker = tv({
+  base: 'flex w-[calc(7*var(--hn-calendar-cell))] flex-col gap-2 outline-none',
+})
+
+export const calendarHeader = tv({
+  base: 'flex items-center justify-between gap-2',
+})
+
+export const calendarHeading = tv({
+  base: 'min-w-0 flex-1 justify-center font-medium whitespace-nowrap tabular-nums',
+  variants: {
+    still: {
+      true: 'inline-flex h-[var(--hn-calendar-cell)] items-center px-[var(--hn-control-px-sm)]',
+    },
+  },
+})
+
+export const calendarGrid = tv({
+  base: 'w-full border-separate [border-spacing:0_var(--hn-calendar-row-gap)]',
+  variants: {
+    units: {
+      true: 'table-fixed border-spacing-0',
+    },
+  },
+})
+
+export const calendarUnits = tv({
+  base: 'flex h-[calc(7*var(--hn-calendar-cell)+8*var(--hn-calendar-row-gap))] flex-col justify-center',
+})
+
+export const calendarHeadCell = tv({
+  base: 'text-muted size-[var(--hn-calendar-cell)] p-0 text-center align-middle font-normal',
+  variants: {
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-sm',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const calendarCell = tv({
+  base: 'p-0 text-center align-middle',
+})
+
+export const calendarDay = tv({
+  base: [
+    'hn-interactive hn-state-layer relative inline-flex size-[var(--hn-calendar-cell)] items-center justify-center rounded-md tabular-nums',
+    'data-[outside-view]:text-faint data-[today]:not-[[data-selected]]:text-accent-text data-[today]:not-[[data-selected]]:font-semibold',
+    'data-[selected]:bg-accent data-[selected]:text-accent-on data-[selected]:font-medium',
+    'data-disabled:text-faint data-disabled:pointer-events-none data-[unavailable]:text-faint data-[unavailable]:line-through data-[unavailable]:pointer-events-none',
+  ],
+})
+
+export const calendarUnitCell = tv({
+  base: 'p-1 align-middle',
+})
+
+export const calendarUnit = tv({
+  base: [
+    'hn-interactive hn-state-layer relative flex h-[var(--hn-calendar-cell)] w-full items-center justify-center rounded-md whitespace-nowrap tabular-nums',
+    'data-[today]:not-[[data-selected]]:text-accent-text data-[today]:not-[[data-selected]]:font-semibold',
+    'data-[selected]:bg-accent data-[selected]:text-accent-on data-[selected]:font-medium',
+    'data-disabled:text-faint data-disabled:pointer-events-none data-[unavailable]:text-faint data-[unavailable]:pointer-events-none',
+  ],
+})
+
+export type CalendarVariants = VariantProps<typeof calendarRoot>

package/dist/shared/variants/callout.ts

@@ -0,0 +1,33 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const callout = tv({
+  base: 'flex gap-3 rounded-lg p-4',
+  variants: {
+    tone: {
+      neutral: 'bg-subtle',
+      accent: 'bg-accent-soft',
+      info: 'bg-info-soft',
+      success: 'bg-success-soft',
+      warning: 'bg-warning-soft',
+      danger: 'bg-danger-soft',
+    },
+  },
+  defaultVariants: { tone: 'neutral' },
+})
+
+export const calloutIcon = tv({
+  base: 'mt-0.5 size-5 shrink-0',
+  variants: {
+    tone: {
+      neutral: 'text-muted',
+      accent: 'text-accent-text',
+      info: 'text-info-text',
+      success: 'text-success-text',
+      warning: 'text-warning-text',
+      danger: 'text-danger-text',
+    },
+  },
+  defaultVariants: { tone: 'neutral' },
+})
+
+export type CalloutVariants = VariantProps<typeof callout>

package/dist/shared/variants/card.ts

@@ -0,0 +1,16 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const card = tv({
+  base: 'bg-surface border-line block rounded-lg border shadow-sm',
+  variants: {
+    padded: {
+      true: 'p-[var(--hn-panel-p)]',
+      false: 'overflow-hidden',
+    },
+  },
+  defaultVariants: {
+    padded: true,
+  },
+})
+
+export type CardVariants = VariantProps<typeof card>

package/dist/shared/variants/carousel.ts

@@ -0,0 +1,41 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const carousel = tv({
+  base: 'hn-carousel @container/hn-carousel relative min-w-0 w-full',
+  variants: {
+    gap: {
+      none: '[--hn-carousel-gap:0px]',
+      xs: '[--hn-carousel-gap:--spacing(1)]',
+      sm: '[--hn-carousel-gap:--spacing(2)]',
+      md: '[--hn-carousel-gap:var(--hn-inline-gap)]',
+      lg: '[--hn-carousel-gap:--spacing(6)]',
+      xl: '[--hn-carousel-gap:--spacing(8)]',
+    },
+  },
+  defaultVariants: { gap: 'md' },
+})
+export const carouselViewport = tv({
+  base: 'hn-carousel-viewport min-w-0 rounded-xl focus-visible:outline-2 focus-visible:outline-accent focus-visible:-outline-offset-2',
+})
+export const carouselTrack = tv({ base: 'hn-carousel-track flex items-stretch' })
+export const carouselItem = tv({ base: 'hn-carousel-item min-w-0 shrink-0 grow-0 basis-full' })
+export const carouselControls = tv({
+  base: 'mt-3 flex min-h-[var(--hn-control-h-md)] flex-wrap items-center justify-center gap-2',
+})
+export const carouselIndicators = tv({
+  base: 'flex min-w-0 flex-wrap items-center justify-center',
+  variants: { custom: { false: 'bg-subtle rounded-full px-1', true: 'gap-1' } },
+  defaultVariants: { custom: false },
+})
+export const carouselIndicator = tv({
+  base: 'hn-interactive hn-state-layer hn-press-none relative isolate inline-flex min-h-8 min-w-8 shrink-0 items-center justify-center',
+  variants: { custom: { false: 'size-8 rounded-full', true: 'rounded-lg p-1' } },
+  defaultVariants: { custom: false },
+})
+export const carouselDot = tv({
+  base: 'bg-line-strong h-1.5 w-1.5 rounded-full transition-[width,background-color] duration-(--hn-duration-base) ease-move data-current:w-6 data-current:bg-accent motion-reduce:transition-none',
+})
+export const carouselStatus = tv({
+  base: 'text-muted flex items-center justify-center py-8 text-sm',
+})
+export type CarouselGap = NonNullable<VariantProps<typeof carousel>['gap']>

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

@@ -0,0 +1,25 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const checkboxGroup = tv({
+  base: 'flex min-w-0',
+  variants: {
+    block: { true: 'w-full' },
+    orientation: {
+      vertical: 'flex-col gap-2',
+      horizontal: 'flex-row flex-wrap gap-x-[var(--hn-inline-gap)] gap-y-2',
+    },
+  },
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+})
+
+export const checkboxGroupItem = tv({
+  variants: {
+    orientation: { vertical: '', horizontal: '' },
+    block: { true: '' },
+  },
+  compoundVariants: [{ orientation: 'horizontal', block: true, class: 'flex-1' }],
+})
+
+export type CheckboxGroupVariants = VariantProps<typeof checkboxGroup>

package/dist/shared/variants/checkbox.ts

@@ -0,0 +1,101 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const checkbox = tv({
+  base: [
+    'text-fg grid w-fit max-w-full cursor-pointer items-center gap-x-[var(--hn-field-gap)] select-none',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+  ],
+  variants: {
+    controlPlacement: {
+      start: 'grid-cols-[auto_minmax(0,1fr)]',
+      end: 'grid-cols-[minmax(0,1fr)_auto]',
+    },
+    block: { true: 'w-full' },
+    bare: { true: 'gap-x-0' },
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-md',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    controlPlacement: 'start',
+    block: false,
+  },
+})
+
+export const checkboxControl = tv({
+  base: 'row-start-1',
+  variants: {
+    controlPlacement: {
+      start: 'col-start-1 justify-self-start',
+      end: 'col-start-2 justify-self-end',
+    },
+  },
+  defaultVariants: { controlPlacement: 'start' },
+})
+
+export const checkboxBox = tv({
+  base: [
+    'hn-focus-ring hn-state-layer hn-transition-base relative grid shrink-0 cursor-pointer place-items-center',
+    'size-[var(--hn-checkbox-size)] border',
+    'border-line bg-surface shadow-sm disabled:cursor-not-allowed',
+    '[--hn-state-selected-color:var(--hn-accent-on)] [--hn-state-selected-opacity:0]',
+    'data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:text-surface',
+    'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent data-[state=indeterminate]:text-surface',
+    'data-invalid:border-danger data-invalid:focus-visible:outline-danger',
+    '[&_svg]:col-start-1 [&_svg]:row-start-1 [&_svg]:size-[var(--hn-checkbox-icon)] [&_svg]:stroke-[3]',
+  ],
+  variants: {
+    shape: {
+      square: 'rounded-xs',
+      round: 'rounded-full',
+    },
+    size: {
+      sm: '[--hn-checkbox-icon:0.625rem] [--hn-checkbox-size:0.875rem]',
+      md: '[--hn-checkbox-icon:0.75rem] [--hn-checkbox-size:1rem]',
+      lg: '[--hn-checkbox-icon:0.875rem] [--hn-checkbox-size:1.125rem]',
+    },
+  },
+  defaultVariants: {
+    shape: 'square',
+    size: 'md',
+  },
+})
+
+export const checkboxTitle = tv({
+  base: 'row-start-1 flex min-h-[1lh] min-w-0 items-center',
+  variants: {
+    controlPlacement: {
+      start: 'col-start-2',
+      end: 'col-start-1',
+    },
+  },
+  defaultVariants: { controlPlacement: 'start' },
+})
+
+export const checkboxTitleText = tv({
+  base: 'block [text-box:trim-both_cap_alphabetic]',
+})
+
+export const checkboxDescription = tv({
+  base: 'text-muted row-start-2 block',
+  variants: {
+    controlPlacement: {
+      start: 'col-start-2',
+      end: 'col-start-1',
+    },
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-base',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    controlPlacement: 'start',
+  },
+})
+
+export type CheckboxVariants = VariantProps<typeof checkbox>

package/dist/shared/variants/chip.ts

@@ -0,0 +1,67 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const chip = tv({
+  base: [
+    'relative inline-flex shrink-0 items-center rounded-full border border-transparent',
+    'font-medium whitespace-nowrap select-none',
+  ],
+  variants: {
+    variant: {
+      soft: '',
+      outline: 'border-line',
+    },
+    tone: {
+      neutral: '',
+      accent: '',
+    },
+    size: {
+      sm: 'h-[calc(var(--hn-control-h-sm)-0.25rem)] px-2 text-xs [&_svg]:size-3',
+      md: 'h-[var(--hn-control-h-sm)] px-2.5 text-sm [&_svg]:size-3.5',
+    },
+    interactive: {
+      true: 'hn-interactive hn-state-layer',
+    },
+    selected: {
+      true: '',
+    },
+    disabled: {
+      true: 'pointer-events-none opacity-50',
+    },
+  },
+  compoundVariants: [
+    { variant: 'soft', tone: 'neutral', class: 'bg-subtle text-fg' },
+    { variant: 'soft', tone: 'accent', class: 'bg-accent-soft text-accent-text' },
+    { variant: 'outline', tone: 'neutral', class: 'text-fg' },
+    { variant: 'outline', tone: 'accent', class: 'text-accent-text' },
+    { selected: true, class: 'text-accent-text' },
+  ],
+  defaultVariants: {
+    variant: 'soft',
+    tone: 'neutral',
+    size: 'md',
+  },
+})
+
+export const chipIcon = tv({
+  base: 'relative inline-flex shrink-0 items-center justify-center',
+  variants: {
+    size: {
+      sm: 'me-1 size-3',
+      md: 'me-1.5 size-3.5',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const chipRemove = tv({
+  base: 'hn-press-none disabled:opacity-100',
+  variants: {
+    size: {
+      sm: 'ms-1 -me-1 size-4 [&_svg]:size-3',
+      md: 'ms-1 -me-1.5 [&_svg]:size-3.5',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type ChipVariants = VariantProps<typeof chip>

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

@@ -0,0 +1,21 @@
+import { tv } from '../lib/tv'
+
+export const codeBlock = tv({
+  base: 'relative flex min-h-0 min-w-0 flex-col',
+})
+
+export const codeBlockArea = tv({
+  base: 'hn-pre min-h-0 grow p-0',
+})
+
+export const codeBlockContent = tv({
+  base: 'hn-pre-content m-0 w-max min-w-full',
+})
+
+export const codeBlockActions = tv({
+  base: 'absolute top-2 end-2 flex items-center gap-2',
+})
+
+export const codeBlockLabel = tv({
+  base: 'text-faint font-mono text-xs select-none',
+})

package/dist/shared/variants/combobox.ts

@@ -0,0 +1,12 @@
+import { tv } from '../lib/tv'
+
+export const comboboxContent = 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 comboboxList = tv({
+  base: 'max-h-[min(20rem,var(--hn-overlay-available-height,20rem))]',
+})

package/dist/shared/variants/command-palette.ts

@@ -0,0 +1,45 @@
+import { tv } from '../lib/tv'
+
+export const commandWrapper = tv({
+  base: 'pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid items-start justify-items-center p-4 pt-[15dvh] max-sm:pt-4',
+})
+
+export const commandCard = tv({
+  base: 'flex w-full max-w-xl flex-col overflow-hidden outline-none',
+  variants: {
+    inline: {
+      false: 'hn-anim-modal pointer-events-auto shadow-lg',
+    },
+  },
+  defaultVariants: {
+    inline: false,
+  },
+})
+
+export const commandInputRow = tv({
+  base: 'border-line text-muted flex h-12 shrink-0 items-center gap-2.5 border-b px-4 [&>svg]:size-4 [&>svg]:shrink-0',
+})
+
+export const commandInput = tv({
+  base: 'text-fg placeholder:text-faint h-full min-w-0 flex-1 bg-transparent text-sm outline-none',
+})
+
+export const commandList = tv({
+  base: 'max-h-[min(24rem,60dvh)]',
+})
+
+export const commandItemBody = tv({
+  base: 'flex min-w-0 flex-1 flex-col',
+})
+
+export const commandItemMatch = tv({
+  base: 'text-accent-text font-medium',
+})
+
+export const commandItemHint = tv({
+  base: 'ms-auto flex shrink-0 items-center gap-1',
+})
+
+export const commandEmpty = tv({
+  base: 'text-muted px-4 py-8 text-center text-sm',
+})

package/dist/shared/variants/container.ts

@@ -0,0 +1,18 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const container = tv({
+  base: 'mx-auto w-full px-4 sm:px-6',
+  variants: {
+    size: {
+      sm: 'max-w-3xl',
+      md: 'max-w-5xl',
+      lg: 'max-w-6xl',
+      xl: 'max-w-7xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export type ContainerVariants = VariantProps<typeof container>

package/dist/shared/variants/data-list.ts

@@ -0,0 +1,105 @@
+import { tv, type VariantProps } from '../lib/tv'
+export const dataList = tv({ base: '@container/hn-data-list flex w-full min-w-0 flex-col gap-4' })
+export const dataListHeader = tv({
+  base: 'flex min-w-0 flex-wrap items-center justify-between gap-3',
+})
+export const dataListBody = tv({ base: 'relative isolate grid min-h-0 min-w-0 grid-cols-1' })
+export const dataListFooter = tv({
+  base: 'flex min-w-0 flex-wrap items-center justify-between gap-3',
+})
+export const dataListPager = tv({ base: 'ms-auto min-w-0 max-w-full' })
+export const dataListAnnouncement = tv({ base: 'sr-only' })
+export const dataListLoading = tv({ base: '[border-radius:inherit]' })
+export const dataListViewport = tv({ base: 'h-full min-h-0 [border-radius:inherit]' })
+export const dataListContent = tv({
+  base: 'm-0 min-w-0 list-none p-0',
+  variants: {
+    layout: {
+      list: 'flex flex-col',
+      grid: 'grid grid-cols-[repeat(auto-fill,minmax(min(100%,var(--hn-data-list-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',
+    },
+  },
+})
+export const dataListSpacer = tv({ base: 'pointer-events-none col-span-full list-none' })
+export const dataListItem = tv({
+  base: 'min-w-0',
+  variants: {
+    layout: { list: '', grid: '' },
+    divided: { true: '', false: '' },
+    size: {
+      sm: 'text-sm [--hn-data-list-media:calc(var(--hn-control-h-sm)*2)] [--hn-data-list-padding:calc(var(--hn-stack-gap)*0.75)]',
+      md: 'text-base [--hn-data-list-media:calc(var(--hn-control-h-md)*2)] [--hn-data-list-padding:var(--hn-stack-gap)]',
+      lg: 'text-base [--hn-data-list-media:calc(var(--hn-control-h-lg)*2)] [--hn-data-list-padding:calc(var(--hn-stack-gap)*1.5)]',
+    },
+    structured: { true: '', false: '' },
+  },
+  compoundVariants: [
+    { layout: 'list', class: 'py-(--hn-data-list-padding)' },
+    { layout: 'list', divided: true, class: 'border-line not-last:border-b' },
+    {
+      layout: 'grid',
+      structured: true,
+      class: 'rounded-lg border border-line bg-surface',
+    },
+  ],
+  defaultVariants: { layout: 'list', divided: true, size: 'md' },
+})
+export const dataListAnatomy = tv({
+  base: 'flex min-w-0',
+  variants: {
+    layout: { list: 'items-center gap-(--hn-stack-gap)', grid: 'h-full flex-col' },
+  },
+})
+export const dataListMedia = tv({
+  base: 'bg-inset shrink-0 overflow-hidden',
+  variants: {
+    layout: {
+      list: 'aspect-square w-(--hn-data-list-media) rounded-md',
+      grid: 'aspect-[16/10] w-full rounded-t-lg',
+    },
+  },
+})
+export const dataListDetails = tv({
+  base: 'flex min-w-0 flex-1 gap-(--hn-inline-gap)',
+  variants: {
+    layout: {
+      list: 'flex-col @lg/hn-data-list:flex-row @lg/hn-data-list:items-center @lg/hn-data-list:gap-6',
+      grid: 'flex-col p-(--hn-data-list-padding)',
+    },
+  },
+})
+export const dataListCopy = tv({ base: 'flex min-w-0 flex-1 flex-col gap-1' })
+export const dataListTitle = tv({ base: 'font-medium text-fg [overflow-wrap:anywhere]' })
+export const dataListDescription = tv({ base: 'text-sm text-muted [overflow-wrap:anywhere]' })
+export const dataListMeta = tv({
+  base: 'mt-1 flex min-w-0 flex-wrap items-center gap-2 text-xs text-muted',
+})
+export const dataListActions = tv({
+  base: 'flex max-w-full shrink-0 flex-wrap items-center gap-2',
+  variants: { layout: { list: '', grid: 'mt-auto' } },
+})
+export const dataListStatus = tv({
+  base: 'flex h-full min-h-0 items-center justify-center px-4 py-6 text-muted',
+})
+export const dataListPagination = tv({ base: 'flex max-w-full items-center justify-end gap-2' })
+export const dataListPlaceholder = tv({
+  variants: {
+    part: {
+      media: 'size-full',
+      title: 'h-lh w-1/2 rounded-sm',
+      description: 'h-lh w-3/4 rounded-sm',
+      meta: 'h-lh w-1/3 rounded-sm',
+      action: 'h-(--hn-control-h-sm) w-16 rounded-md',
+    },
+  },
+})
+export type DataListContentVariants = VariantProps<typeof dataListContent>
+export type DataListItemVariants = VariantProps<typeof dataListItem>

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

@@ -0,0 +1,33 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const dateFieldHost = tv({
+  base: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+})
+
+export const dateFieldControl = tv({
+  base: 'flex h-full min-w-0 flex-1 items-center px-[var(--hn-input-px)] tabular-nums select-none',
+  variants: {
+    leading: {
+      true: 'ps-0',
+    },
+    trailing: {
+      true: 'pe-0',
+    },
+  },
+})
+
+export const dateFieldSegment = tv({
+  base: 'hn-transition rounded-xs outline-none',
+  variants: {
+    part: {
+      literal: 'text-faint px-px',
+      editable: [
+        'px-0.5 focus:bg-accent-soft focus:text-accent-text',
+        'data-placeholder:text-faint data-placeholder:font-normal data-disabled:cursor-not-allowed',
+      ],
+    },
+  },
+  defaultVariants: { part: 'editable' },
+})
+
+export type DateFieldVariants = VariantProps<typeof dateFieldSegment>

package/dist/shared/variants/date-picker.ts

@@ -0,0 +1,5 @@
+import { tv } from '../lib/tv'
+
+export const datePickerContent = tv({
+  base: 'hn-anim-pop z-(--hn-z-overlay) p-2 shadow-md outline-none',
+})

package/dist/shared/variants/date-range-field.ts

@@ -0,0 +1,5 @@
+import { tv } from '../lib/tv'
+
+export const dateRangeFieldSeparator = tv({
+  base: 'text-faint shrink-0 px-1 select-none',
+})

package/dist/shared/variants/date-time-picker.ts

@@ -0,0 +1,5 @@
+import { tv } from '../lib/tv'
+
+export const dateTimePickerFooter = tv({
+  base: 'mt-2 flex items-center justify-between gap-2',
+})

package/dist/shared/variants/dialog.ts

@@ -0,0 +1,38 @@
+import { tv, type VariantProps } from '../lib/tv'
+
+export const dialogWrapper = tv({
+  base: 'pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid',
+  variants: {
+    placement: {
+      center: 'place-items-center p-4',
+      top: 'items-start justify-items-center p-4',
+      bottom: 'items-end justify-items-center p-4',
+      auto: 'place-items-center p-4 max-sm:items-end max-sm:justify-items-stretch',
+    },
+  },
+  defaultVariants: { placement: 'auto' },
+})
+
+export const dialogCard = tv({
+  base: 'pointer-events-auto flex w-full flex-col shadow-lg outline-none',
+  variants: {
+    padded: { true: 'gap-4 py-(--hn-panel-p)' },
+    fitViewport: { true: 'max-h-[calc(100dvh-2rem)]' },
+    placement: {
+      center: 'hn-anim-modal',
+      top: 'hn-anim-sheet-top',
+      bottom: 'hn-anim-sheet-bottom',
+      auto: 'hn-anim-modal max-sm:hn-anim-sheet-bottom max-sm:max-w-none',
+    },
+    size: {
+      sm: 'max-w-sm',
+      md: 'max-w-md',
+      lg: 'max-w-xl',
+      xl: 'max-w-2xl',
+      '2xl': 'max-w-4xl',
+    },
+  },
+  defaultVariants: { placement: 'auto', size: 'md', padded: true },
+})
+
+export type DialogVariants = VariantProps<typeof dialogCard>