@hina-ui/vue 1.1.0 → 1.3.0

package/src/components/code-block/CodeBlock.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
-  import { computed, onMounted, shallowRef, watch } from 'vue'
-  import type { ThemedToken } from 'shiki/core'
+  import { computed } from 'vue'
   import { cn } from '../../lib/cn'
-  import { devWarn } from '../../lib/dev'
   import { useUiLocale } from '../../locale'
   import CopyButton from '../copy-button/CopyButton.vue'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
-  import { tokenize } from './highlighter'
+  import { useCodeHighlight } from './composables/useCodeHighlight'
+  import {
+    codeBlock,
+    codeBlockArea,
+    codeBlockContent,
+    codeBlockActions,
+    codeBlockLabel,
+  } from './code-block.variants'
 
   defineOptions({ name: 'HnCodeBlock' })
 
@@ -25,38 +30,18 @@
   const t = useUiLocale()
   const tag = computed(() => props.label ?? props.lang)
 
-  const tokens = shallowRef<ThemedToken[][] | null>(null)
-
-  onMounted(() => {
-    watch(
-      () => [props.code, props.lang, props.html] as const,
-      async ([code, lang, html]) => {
-        if (html || !lang) {
-          tokens.value = null
-          return
-        }
-        try {
-          const result = await tokenize(code, lang)
-          if (code === props.code && lang === props.lang) tokens.value = result
-        } catch (error) {
-          tokens.value = null
-          devWarn('CodeBlock', `着色管线失败,已退回素文本(lang="${lang}"):${String(error)}`, lang)
-        }
-      },
-      { immediate: true },
-    )
-  })
+  const tokens = useCodeHighlight(props)
 </script>
 
 <template>
-  <div :data-lang="props.lang" :class="cn('relative', props.class)">
-    <ScrollArea direction="horizontal" focusable :label="tag" class="hn-pre">
+  <div :data-lang="props.lang" :class="cn(codeBlock(), props.class)">
+    <ScrollArea direction="both" focusable :label="tag" :class="codeBlockArea()">
       <pre
-        class="m-0"
+        :class="codeBlockContent()"
       ><code v-if="props.html" v-html="props.html"></code><code v-else-if="tokens"><template v-for="(line, i) of tokens" :key="i">{{ i ? '\n' : '' }}<span v-for="(tk, j) of line" :key="j" :style="tk.htmlStyle">{{ tk.content }}</span></template></code><code v-else>{{ code }}</code></pre>
     </ScrollArea>
-    <div class="absolute top-2 end-2 flex items-center gap-2">
-      <span v-if="tag" class="text-faint font-mono text-xs select-none">{{ tag }}</span>
+    <div :class="codeBlockActions()">
+      <span v-if="tag" :class="codeBlockLabel()">{{ tag }}</span>
       <CopyButton v-if="copyable" :text="props.code" :label="t.codeblock.copy" />
     </div>
   </div>

package/src/components/code-block/code-block.variants.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/src/components/code-block/composables/useCodeHighlight.ts

@@ -0,0 +1,30 @@
+import { onMounted, shallowRef, watch } from 'vue'
+import type { ThemedToken } from 'shiki/core'
+import { devWarn } from '../../../lib/dev'
+import { tokenize } from '../highlighter'
+
+export function useCodeHighlight(props: { code: string; lang?: string; html?: string }) {
+  const tokens = shallowRef<ThemedToken[][] | null>(null)
+
+  onMounted(() => {
+    watch(
+      () => [props.code, props.lang, props.html] as const,
+      async ([code, lang, html]) => {
+        if (html || !lang) {
+          tokens.value = null
+          return
+        }
+        try {
+          const result = await tokenize(code, lang)
+          if (code === props.code && lang === props.lang) tokens.value = result
+        } catch (error) {
+          tokens.value = null
+          devWarn('CodeBlock', `着色管线失败,已退回素文本(lang="${lang}"):${String(error)}`, lang)
+        }
+      },
+      { immediate: true },
+    )
+  })
+
+  return tokens
+}

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()

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/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/dropdown-menu/DropdownMenu.vue

@@ -5,24 +5,32 @@
     DropdownMenuTrigger,
     DropdownMenuPortal,
     DropdownMenuContent,
+    type DropdownMenuContentEmits,
   } from 'reka-ui'
+  import { useAnchoredOverlay } from '../../lib/anchored-overlay'
   import Card from '../card/Card.vue'
   import { cn } from '../../lib/cn'
 
-  defineOptions({ name: 'HnDropdownMenu' })
+  defineOptions({ name: 'HnDropdownMenu', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
       label?: string
+      anchor?: HTMLElement | null
+      modal?: boolean
+      dir?: 'ltr' | 'rtl'
       side?: 'top' | 'right' | 'bottom' | 'left'
       align?: 'start' | 'center' | 'end'
       sideOffset?: number
       class?: string
     }>(),
-    { side: 'bottom', align: 'center', sideOffset: 8 },
+    { side: 'bottom', align: 'center', sideOffset: 8, modal: true },
   )
 
   const open = defineModel<boolean>('open')
+  const emit = defineEmits<DropdownMenuContentEmits>()
+  defineSlots<{ default?(): unknown; content?(): unknown }>()
+  const { trigger, reference, visible, events } = useAnchoredOverlay(props, open, emit)
 
   const pressOrigin = computed(() => {
     if (props.side === 'left') return 'right'
@@ -34,8 +42,10 @@
 </script>
 
 <template>
-  <DropdownMenuRoot v-model:open="open" modal>
+  <DropdownMenuRoot v-model:open="visible" :modal="props.modal" :dir="props.dir">
     <DropdownMenuTrigger
+      v-if="$slots.default"
+      ref="trigger"
       as-child
       class="group/hn-disclosure"
       :style="{ transformOrigin: pressOrigin }"
@@ -44,8 +54,10 @@
     </DropdownMenuTrigger>
     <DropdownMenuPortal>
       <DropdownMenuContent
+        v-if="reference"
+        v-bind="{ 'aria-label': props.label, ...$attrs, ...events }"
+        :reference="reference"
         as-child
-        :aria-label="props.label"
         :side="props.side"
         :align="props.align"
         :side-offset="props.sideOffset"

package/src/components/highlight/Highlight.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-  import { computed } from 'vue'
   import { Motion } from 'motion-v'
   import { cn } from '../../lib/cn'
-  import { TRANSITION, prefersReducedMotion } from '../../motion'
+  import { useHighlightMotion } from './composables/useHighlightMotion'
 
   defineOptions({ name: 'HnHighlight' })
 
   const props = withDefaults(
     defineProps<{
       id?: string
+      axis?: 'x' | 'y' | 'both'
       as?: 'div' | 'li'
       class?: string
     }>(),
-    { id: undefined, as: 'div' },
+    { id: undefined, axis: 'both', as: 'div' },
   )
 
-  const transition = computed(() => (prefersReducedMotion() ? { duration: 0 } : TRANSITION.layout))
+  const { transition, transformTemplate } = useHighlightMotion(() => props.axis)
 </script>
 
 <template>
@@ -26,6 +26,7 @@
     aria-hidden="true"
     data-hn-highlight
     :transition="transition"
+    :transform-template="transformTemplate"
     :class="cn('pointer-events-none', props.class)"
   />
 </template>

package/src/components/highlight/composables/useHighlightMotion.ts

@@ -0,0 +1,22 @@
+import { computed } from 'vue'
+import type { MotionProps } from 'motion-v'
+import { TRANSITION, prefersReducedMotion } from '../../../motion'
+
+export function useHighlightMotion(axis: () => 'x' | 'y' | 'both') {
+  const transition = computed(() => (prefersReducedMotion() ? { duration: 0 } : TRANSITION.layout))
+  const transformTemplate = computed<MotionProps['transformTemplate']>(() => {
+    const direction = axis()
+    if (direction === 'both') return undefined
+
+    return (_, generated) => {
+      if (!generated || generated === 'none' || typeof DOMMatrix === 'undefined') return generated
+
+      const matrix = new DOMMatrix(generated)
+      if (direction === 'x') matrix.m42 = 0
+      else matrix.m41 = 0
+      return matrix.toString()
+    }
+  })
+
+  return { transition, transformTemplate }
+}

package/src/components/image/ImageGroup.vue

@@ -1,40 +1,12 @@
 <script setup lang="ts">
-  import { computed, reactive, shallowRef } from 'vue'
   import Lightbox from '../lightbox/Lightbox.vue'
-  import type { LightboxItem } from '../lightbox/types'
-  import { provideImageGroup } from './context'
+  import { useImageGroupState } from './composables/useImageGroupState'
 
   defineOptions({ name: 'HnImageGroup' })
 
   const props = defineProps<{ loop?: boolean }>()
 
-  const registry = reactive(new Map<string, () => LightboxItem>())
-  const open = shallowRef(false)
-  const index = shallowRef(0)
-
-  function byDom(a: LightboxItem, b: LightboxItem): number {
-    const first = a.source?.()
-    const second = b.source?.()
-    if (!first || !second || first === second) return 0
-    return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
-  }
-
-  const items = computed(() => [...registry.values()].map(read => read()).sort(byDom))
-
-  provideImageGroup({
-    register: (id, item) => {
-      registry.set(id, item)
-    },
-    unregister: id => {
-      registry.delete(id)
-    },
-    open: id => {
-      const at = items.value.findIndex(item => item.id === id)
-      if (at < 0) return
-      index.value = at
-      open.value = true
-    },
-  })
+  const { items, open, index } = useImageGroupState()
 </script>
 
 <template>

package/src/components/image/composables/useImageGroupState.ts

@@ -0,0 +1,35 @@
+import { computed, reactive, shallowRef } from 'vue'
+import type { LightboxItem } from '../../lightbox/types'
+import { provideImageGroup } from '../context'
+
+export function useImageGroupState() {
+  const registry = reactive(new Map<string, () => LightboxItem>())
+  const open = shallowRef(false)
+  const index = shallowRef(0)
+
+  function byDom(a: LightboxItem, b: LightboxItem): number {
+    const first = a.source?.()
+    const second = b.source?.()
+    if (!first || !second || first === second) return 0
+    return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+  }
+
+  const items = computed(() => [...registry.values()].map(read => read()).sort(byDom))
+
+  provideImageGroup({
+    register: (id, item) => {
+      registry.set(id, item)
+    },
+    unregister: id => {
+      registry.delete(id)
+    },
+    open: id => {
+      const at = items.value.findIndex(item => item.id === id)
+      if (at < 0) return
+      index.value = at
+      open.value = true
+    },
+  })
+
+  return { items, open, index }
+}

package/src/components/input/Input.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
   import { shallowRef } from 'vue'
   import InputBase from './InputBase.vue'
-  import type { InputVariants } from './input.variants'
+  import type { TextInputVariants } from './input.variants'
 
   defineOptions({ name: 'HnInput', inheritAttrs: false })
 
   const props = defineProps<{
-    variant?: InputVariants['variant']
-    size?: InputVariants['size']
+    variant?: TextInputVariants['variant']
+    size?: TextInputVariants['size']
     clearable?: boolean
     loading?: boolean
     disabled?: boolean

package/src/components/input/InputBase.vue

@@ -14,15 +14,15 @@
     inputAdornment,
     inputControl,
     inputEmbedded,
-    inputHost,
-    type InputVariants,
+    textInputHost,
+    type TextInputVariants,
   } from './input.variants'
 
   defineOptions({ name: 'HnInputBase', inheritAttrs: false })
 
   const props = defineProps<{
-    variant?: InputVariants['variant']
-    size?: InputVariants['size']
+    variant?: TextInputVariants['variant']
+    size?: TextInputVariants['size']
     clearable?: boolean
     loading?: boolean
     disabled?: boolean
@@ -70,7 +70,7 @@
     :aria-busy="props.loading || undefined"
     :class="
       cn(
-        group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+        group ? inputEmbedded() : textInputHost({ variant: props.variant, size: props.size }),
         props.class,
       )
     "

package/src/components/input/input.variants.ts

@@ -2,14 +2,14 @@ import { tv, type VariantProps } from '../../lib/tv'
 
 export const inputHost = tv({
   base: [
-    'group/hn-field hn-field text-fg flex w-full min-w-0 cursor-text items-stretch overflow-hidden rounded-md border font-medium',
+    '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:
-        '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)]',
+        '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]',
@@ -23,6 +23,15 @@ export const inputHost = tv({
   },
 })
 
+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]',
@@ -62,6 +71,7 @@ export const inputActionSlot = tv({
 })
 
 export type InputVariants = VariantProps<typeof inputHost>
+export type TextInputVariants = VariantProps<typeof textInputHost>
 
 export const inputEmbedded = tv({
   base: [