@hina-ui/vue 1.0.0 → 1.2.0

package/src/components/checkbox/checkbox.variants.ts

@@ -2,10 +2,16 @@ import { tv, type VariantProps } from '../../lib/tv'
 
 export const checkbox = tv({
   base: [
-    'text-fg grid w-fit max-w-full cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-x-[var(--hn-field-gap)] select-none',
+    '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',
@@ -14,7 +20,20 @@ export const checkbox = tv({
   },
   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({
@@ -46,7 +65,14 @@ export const checkboxBox = tv({
 })
 
 export const checkboxTitle = tv({
-  base: 'flex min-h-[1lh] min-w-0 items-center',
+  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({
@@ -54,8 +80,12 @@ export const checkboxTitleText = tv({
 })
 
 export const checkboxDescription = tv({
-  base: 'text-muted col-start-2 block',
+  base: 'text-muted row-start-2 block',
   variants: {
+    controlPlacement: {
+      start: 'col-start-2',
+      end: 'col-start-1',
+    },
     size: {
       sm: 'text-xs',
       md: 'text-sm',
@@ -64,6 +94,7 @@ export const checkboxDescription = tv({
   },
   defaultVariants: {
     size: 'md',
+    controlPlacement: 'start',
   },
 })
 

package/src/components/checkbox-group/CheckboxGroup.vue

@@ -1,18 +1,24 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { CheckboxGroupRoot } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { shieldFormField, useFieldControl } from '../form-field/context'
   import Checkbox from '../checkbox/Checkbox.vue'
   import type { CheckboxVariants } from '../checkbox/checkbox.variants'
   import type { SelectOption } from '../select/types'
-  import { checkboxGroup, type CheckboxGroupVariants } from './checkbox-group.variants'
+  import {
+    checkboxGroup,
+    checkboxGroupItem,
+    type CheckboxGroupVariants,
+  } from './checkbox-group.variants'
 
   defineOptions({ name: 'HnCheckboxGroup' })
 
   const props = defineProps<{
-    options: SelectOption[]
+    options: T[]
     orientation?: CheckboxGroupVariants['orientation']
     size?: CheckboxVariants['size']
+    controlPlacement?: CheckboxVariants['controlPlacement']
+    block?: boolean
     disabled?: boolean
     invalid?: boolean
     class?: string
@@ -26,7 +32,7 @@
   })
   shieldFormField()
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 </script>
 
 <template>
@@ -41,13 +47,16 @@
     data-hn-checkbox-group
     :data-orientation="props.orientation ?? 'vertical'"
     :data-disabled="disabled ? '' : undefined"
-    :class="cn(checkboxGroup({ orientation: props.orientation }), props.class)"
+    :class="cn(checkboxGroup({ orientation: props.orientation, block: props.block }), props.class)"
   >
     <Checkbox
       v-for="option in props.options"
       :key="option.value"
       :value="option.value"
       :size="props.size"
+      :control-placement="props.controlPlacement"
+      :block="props.block"
+      :class="checkboxGroupItem({ orientation: props.orientation, block: props.block })"
       :disabled="disabled || option.disabled"
       :invalid="invalid"
       :description="option.description"

package/src/components/checkbox-group/checkbox-group.variants.ts

@@ -3,6 +3,7 @@ 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',
@@ -13,4 +14,12 @@ export const checkboxGroup = tv({
   },
 })
 
+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/src/components/collapsible/CollapsibleContent.vue

@@ -1,22 +1,13 @@
 <script setup lang="ts">
-  import { onBeforeUpdate, onMounted, shallowRef, type ComponentPublicInstance } from 'vue'
   import { CollapsibleContent as RekaCollapsibleContent } from 'reka-ui'
   import { cn } from '../../lib/cn'
-  import { writeCollapseGap } from '../../lib/collapse'
+  import { useCollapseGap } from '../../lib/collapse'
 
   defineOptions({ name: 'HnCollapsibleContent' })
 
   const props = defineProps<{ class?: string }>()
 
-  const content = shallowRef<ComponentPublicInstance | null>(null)
-
-  function measure() {
-    const el = content.value?.$el as Element | undefined
-    if (el instanceof Element) writeCollapseGap(el, el.parentElement)
-  }
-
-  onMounted(measure)
-  onBeforeUpdate(measure)
+  const content = useCollapseGap()
 </script>
 
 <template>

package/src/components/combobox/Combobox.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed, ref, shallowRef, watch } from 'vue'
   import { ComboboxAnchor, ComboboxInput, ComboboxRoot, ComboboxTrigger } from 'reka-ui'
   import { cn } from '../../lib/cn'
@@ -24,7 +24,7 @@
   defineOptions({ name: 'HnCombobox', inheritAttrs: false })
 
   const props = defineProps<{
-    options: SelectItems
+    options: SelectItems<T>
     placeholder?: string
     ignoreFilter?: boolean
     clearable?: boolean
@@ -40,7 +40,7 @@
   const search = defineModel<string>('search', { default: '' })
   const open = defineModel<boolean>('open', { default: false })
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 
   const t = useUiLocale()
   const group = injectInputGroup()
@@ -93,6 +93,7 @@
       <div
         data-hn-combobox
         :data-invalid="invalid ? '' : undefined"
+        :data-disabled="disabled ? '' : undefined"
         :class="
           cn(
             group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),

package/src/components/combobox/ComboboxList.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { Check } from '@lucide/vue'
   import {
     ComboboxContent,
@@ -19,11 +19,11 @@
 
   defineOptions({ name: 'HnComboboxList' })
 
-  const props = defineProps<{ options: SelectItems; keyboard?: boolean }>()
+  const props = defineProps<{ options: SelectItems<T>; keyboard?: boolean }>()
 
   const fresh = ref(false)
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 
   const t = useUiLocale()
 </script>

package/src/components/date-picker/DatePicker.vue

@@ -73,6 +73,7 @@
         ref="host"
         data-hn-date-picker
         :data-invalid="invalid ? '' : undefined"
+        :data-disabled="disabled ? '' : undefined"
         :class="
           cn(
             outer ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),

package/src/components/date-range-picker/DateRangePicker.vue

@@ -75,6 +75,7 @@
         ref="host"
         data-hn-date-range-picker
         :data-invalid="invalid ? '' : undefined"
+        :data-disabled="disabled ? '' : undefined"
         :class="
           cn(
             outer ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),

package/src/components/date-time-picker/DateTimePicker.vue

@@ -96,6 +96,7 @@
         ref="host"
         data-hn-date-time-picker
         :data-invalid="invalid ? '' : undefined"
+        :data-disabled="disabled ? '' : undefined"
         :class="
           cn(
             outer ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),

package/src/components/dialog/Dialog.vue

@@ -15,8 +15,7 @@
   import Heading from '../heading/Heading.vue'
   import Text from '../text/Text.vue'
   import { cn } from '../../lib/cn'
-  import { useUiLocale } from '../../locale'
-  import { dialogWrapper, dialogCard } from './dialog.variants'
+  import { dialogWrapper, dialogCard, type DialogVariants } from './dialog.variants'
 
   defineOptions({ name: 'HnDialog' })
 
@@ -24,20 +23,30 @@
     defineProps<{
       title: string
       description?: string
-      size?: 'sm' | 'md' | 'lg'
-      placement?: 'center' | 'bottom'
+      size?: DialogVariants['size']
+      placement?: 'center' | 'top' | 'bottom'
+      header?: boolean
+      closable?: boolean
       locked?: boolean
       class?: string
     }>(),
-    { size: 'md', locked: false },
+    { size: 'md', header: true, closable: true, locked: false },
   )
 
+  const slots = defineSlots<{
+    default?(): unknown
+    icon?(): unknown
+    title?(): unknown
+    body?(props: { close: () => void }): unknown
+    content?(props: { close: () => void }): unknown
+    footer?(props: { close: () => void }): unknown
+  }>()
+
   function guard(e: Event) {
     if (props.locked) e.preventDefault()
   }
 
   const open = defineModel<boolean>('open')
-  const t = useUiLocale()
 
   function close() {
     open.value = false
@@ -51,50 +60,72 @@
     </DialogTrigger>
     <DialogPortal>
       <DialogOverlay class="hn-scrim" />
-      <div
-        :class="
-          cn(
-            'pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid',
-            dialogWrapper({ placement: props.placement ?? 'auto' }),
-          )
-        "
-      >
+      <div :class="dialogWrapper({ placement: props.placement ?? 'auto' })">
         <DialogContent as-child @escape-key-down="guard" @interact-outside="guard">
           <Card
+            v-bind="props.description ? {} : { 'aria-describedby': undefined }"
             :padded="false"
             :class="
               cn(
-                'pointer-events-auto flex w-full flex-col gap-4 shadow-lg outline-none',
-                'max-h-[calc(100dvh-2rem)] py-(--hn-panel-p)',
-                dialogCard({ placement: props.placement ?? 'auto', size: props.size }),
+                dialogCard({
+                  placement: props.placement ?? 'auto',
+                  size: props.size,
+                  padded: !slots.body,
+                  fitViewport: true,
+                }),
                 props.class,
               )
             "
           >
-            <div class="flex shrink-0 items-start justify-between gap-4 px-(--hn-panel-p)">
-              <div class="flex min-w-0 flex-col gap-1.5">
-                <DialogTitle as-child>
-                  <Heading :level="2" size="lg">{{ props.title }}</Heading>
-                </DialogTitle>
-                <DialogDescription v-if="props.description" as-child>
-                  <Text tone="muted">{{ props.description }}</Text>
-                </DialogDescription>
+            <template v-if="!props.header || slots.body">
+              <DialogTitle as-child>
+                <Heading :level="2" class="sr-only">{{ props.title }}</Heading>
+              </DialogTitle>
+              <DialogDescription v-if="props.description" class="sr-only">
+                {{ props.description }}
+              </DialogDescription>
+            </template>
+            <slot v-if="slots.body" name="body" :close="close" />
+            <template v-else>
+              <div
+                v-if="props.header"
+                class="flex shrink-0 items-start justify-between gap-4 px-(--hn-panel-p)"
+              >
+                <div class="flex min-w-0 flex-col gap-1.5">
+                  <div class="flex min-w-0 items-center gap-2">
+                    <span
+                      v-if="slots.icon"
+                      class="text-muted flex shrink-0 [&_svg]:size-5"
+                      aria-hidden="true"
+                    >
+                      <slot name="icon" />
+                    </span>
+                    <DialogTitle as-child>
+                      <Heading :level="2" size="lg" class="min-w-0">
+                        <slot name="title">{{ props.title }}</slot>
+                      </Heading>
+                    </DialogTitle>
+                  </div>
+                  <DialogDescription v-if="props.description" as-child>
+                    <Text tone="muted">{{ props.description }}</Text>
+                  </DialogDescription>
+                </div>
+                <DialogClose v-if="props.closable" as-child>
+                  <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
+                </DialogClose>
               </div>
-              <DialogClose as-child>
-                <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
-              </DialogClose>
-            </div>
-            <ScrollArea v-if="$slots.content" class="min-h-0">
-              <div class="px-(--hn-panel-p) py-1">
-                <slot name="content" :close="close" />
+              <ScrollArea v-if="$slots.content" class="min-h-0">
+                <div class="px-(--hn-panel-p) py-1">
+                  <slot name="content" :close="close" />
+                </div>
+              </ScrollArea>
+              <div
+                v-if="$slots.footer"
+                class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
+              >
+                <slot name="footer" :close="close" />
               </div>
-            </ScrollArea>
-            <div
-              v-if="$slots.footer"
-              class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
-            >
-              <slot name="footer" :close="close" />
-            </div>
+            </template>
           </Card>
         </DialogContent>
       </div>

package/src/components/dialog/dialog.variants.ts

@@ -1,10 +1,11 @@
 import { tv, type VariantProps } from '../../lib/tv'
 
 export const dialogWrapper = tv({
-  base: '',
+  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',
     },
@@ -13,10 +14,13 @@ export const dialogWrapper = tv({
 })
 
 export const dialogCard = tv({
-  base: '',
+  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',
     },
@@ -24,9 +28,11 @@ export const dialogCard = tv({
       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' },
+  defaultVariants: { placement: 'auto', size: 'md', padded: true },
 })
 
 export type DialogVariants = VariantProps<typeof dialogCard>

package/src/components/form-field/FormField.vue

@@ -6,8 +6,13 @@
   import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
   import { injectForm } from '../form/context'
   import { provideFormField } from './context'
+  import { useFormFieldLayout } from '../form-layout/context'
+  import type { FormFieldLayoutProps } from './types'
   import {
     formFieldDescription,
+    formFieldLayout,
+    formFieldContent,
+    formFieldControl,
     formFieldLabel,
     formFieldMark,
     formFieldMessage,
@@ -16,16 +21,19 @@
 
   defineOptions({ name: 'HnFormField' })
 
-  const props = defineProps<{
-    name?: string
-    label?: string
-    description?: string
-    error?: string
-    required?: boolean
-    disabled?: boolean
-    class?: string
-  }>()
+  const props = defineProps<
+    FormFieldLayoutProps & {
+      name?: string
+      label?: string
+      description?: string
+      error?: string
+      required?: boolean
+      disabled?: boolean
+      class?: string
+    }
+  >()
 
+  const layout = useFormFieldLayout(props)
   const slots = useSlots()
   const t = useUiLocale()
   const form = injectForm()
@@ -45,6 +53,19 @@
   const invalid = computed(() => !!message.value)
   const disabled = computed(() => !!props.disabled || !!form?.disabled.value)
   const described = computed(() => !!props.description || !!slots.description)
+  const headed = computed(() => !!props.label || !!slots.label)
+  const descriptionWithLabel = computed(
+    () => described.value && layout.value.descriptionPlacement === 'label',
+  )
+  const contentOrientation = computed(() =>
+    headed.value || descriptionWithLabel.value ? layout.value.orientation : 'vertical',
+  )
+  const layoutStyle = computed(() => ({
+    '--hn-form-label-width':
+      typeof layout.value.labelWidth === 'number'
+        ? `${layout.value.labelWidth}px`
+        : layout.value.labelWidth,
+  }))
   const describedBy = computed(() => {
     const ids = []
     if (described.value) ids.push(descriptionId)
@@ -65,39 +86,63 @@
     data-hn-form-field
     :data-invalid="invalid ? '' : undefined"
     :data-disabled="disabled ? '' : undefined"
-    :class="cn(formFieldRoot(), props.class)"
+    :data-orientation="layout.orientation"
+    :class="cn(formFieldRoot({ orientation: layout.orientation }), props.class)"
+    :style="layoutStyle"
     @focusout="onFocusOut"
   >
-    <label
-      v-if="props.label || slots.label"
-      :id="labelId"
-      :for="controlId"
-      :class="formFieldLabel({ disabled })"
-    >
-      <slot name="label">{{ props.label }}</slot>
-      <span v-if="props.required" :class="formFieldMark()" aria-hidden="true">*</span>
-      <VisuallyHidden v-if="props.required">{{ t.form.required }}</VisuallyHidden>
-    </label>
-    <slot />
-    <p v-if="described" :id="descriptionId" :class="formFieldDescription()">
-      <slot name="description">{{ props.description }}</slot>
-    </p>
-    <Transition
-      enter-from-class="hn-collapse-closed"
-      enter-to-class="hn-collapse-open"
-      leave-from-class="hn-collapse-open"
-      leave-to-class="hn-collapse-closed"
-      v-on="hooks"
-    >
+    <div data-hn-form-field-layout :class="formFieldLayout({ orientation: contentOrientation })">
       <div
-        v-if="message"
-        data-hn-form-field-message
-        class="hn-collapse [--hn-collapse-out:var(--hn-duration-fast)]"
+        v-if="headed || descriptionWithLabel"
+        data-hn-form-field-header
+        :class="formFieldContent()"
       >
-        <div class="hn-collapse-body">
-          <p :id="messageId" :class="formFieldMessage()" aria-live="polite">{{ message }}</p>
+        <label
+          v-if="headed"
+          :id="labelId"
+          :for="controlId"
+          :class="formFieldLabel({ disabled, orientation: contentOrientation })"
+        >
+          <slot name="label">{{ props.label }}</slot>
+          <span v-if="props.required" :class="formFieldMark()" aria-hidden="true">*</span>
+          <VisuallyHidden v-if="props.required">{{ t.form.required }}</VisuallyHidden>
+        </label>
+        <p v-if="descriptionWithLabel" :id="descriptionId" :class="formFieldDescription()">
+          <slot name="description">{{ props.description }}</slot>
+        </p>
+      </div>
+      <div data-hn-form-field-body :class="formFieldContent()">
+        <div
+          data-hn-form-field-control
+          :class="formFieldControl({ orientation: contentOrientation })"
+        >
+          <slot />
         </div>
+        <p
+          v-if="described && !descriptionWithLabel"
+          :id="descriptionId"
+          :class="formFieldDescription()"
+        >
+          <slot name="description">{{ props.description }}</slot>
+        </p>
+        <Transition
+          enter-from-class="hn-collapse-closed"
+          enter-to-class="hn-collapse-open"
+          leave-from-class="hn-collapse-open"
+          leave-to-class="hn-collapse-closed"
+          v-on="hooks"
+        >
+          <div
+            v-if="message"
+            data-hn-form-field-message
+            class="hn-collapse [--hn-collapse-out:var(--hn-duration-fast)]"
+          >
+            <div class="hn-collapse-body">
+              <p :id="messageId" :class="formFieldMessage()" aria-live="polite">{{ message }}</p>
+            </div>
+          </div>
+        </Transition>
       </div>
-    </Transition>
+    </div>
   </div>
 </template>

package/src/components/form-field/form-field.variants.ts

@@ -1,12 +1,51 @@
 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',
     },

package/src/components/form-field/types.ts

@@ -0,0 +1,5 @@
+export interface FormFieldLayoutProps {
+  orientation?: 'vertical' | 'horizontal' | 'responsive'
+  descriptionPlacement?: 'label' | 'control'
+  labelWidth?: string | number
+}