@hina-ui/vue 1.4.0 → 1.6.0

package/src/components/sheet/Sheet.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { computed, shallowRef } from 'vue'
+  import { computed } from 'vue'
   import {
     DialogClose,
     DialogContent,
@@ -10,8 +10,9 @@
     DialogTitle,
     DialogTrigger,
   } from 'reka-ui'
+  import { useOverlayPortal } from '../../lib/overlay-portal'
+  import { useScrollViewport } from '../../lib/scroll-viewport'
   import { cn } from '../../lib/cn'
-  import { useUiLocale } from '../../locale'
   import Card from '../card/Card.vue'
   import CloseButton from '../close-button/CloseButton.vue'
   import Heading from '../heading/Heading.vue'
@@ -26,16 +27,29 @@
     defineProps<{
       title: string
       description?: string
+      header?: boolean
+      closable?: boolean
       handle?: boolean
       locked?: boolean
       class?: string
     }>(),
-    { handle: true, locked: false },
+    { header: true, closable: true, handle: 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
+  }>()
+
+  const { scrollArea, viewport } = useScrollViewport()
+  defineExpose({ viewport })
+
   const open = defineModel<boolean>('open')
-  const t = useUiLocale()
-  const panel = shallowRef<{ $el: HTMLElement } | null>(null)
+  const { content: panel, present } = useOverlayPortal(open)
 
   const { dragging, offset, onPointerDown } = useDragToDismiss(() => panel.value?.$el ?? null, {
     enabled: () => !props.locked,
@@ -63,54 +77,83 @@
     <DialogTrigger v-if="$slots.default" as-child>
       <slot />
     </DialogTrigger>
-    <DialogPortal>
+    <DialogPortal v-if="present">
       <DialogOverlay class="hn-scrim" />
       <DialogContent as-child @escape-key-down="guard" @interact-outside="guard">
         <Card
           ref="panel"
+          v-bind="props.description ? {} : { 'aria-describedby': undefined }"
           data-hn-sheet
           :data-dragging="dragging ? '' : undefined"
           :padded="false"
           :style="style"
-          :class="cn(sheetPanel(), props.class)"
+          :class="
+            cn(sheetPanel({ grip: props.header || props.handle, padded: !slots.body }), props.class)
+          "
         >
+          <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>
           <div
+            v-if="props.handle || (props.header && !slots.body)"
             data-hn-sheet-grip
             :data-dragging="dragging ? '' : undefined"
-            :class="sheetGrip()"
+            :class="sheetGrip({ standalone: !!slots.body })"
             @pointerdown="onPointerDown"
           >
             <div
               v-if="props.handle"
               aria-hidden="true"
               :data-disabled="props.locked ? '' : undefined"
-              :class="sheetHandle()"
+              :class="sheetHandle({ header: props.header && !slots.body })"
             />
-            <div class="flex items-start justify-between gap-4 px-(--hn-panel-p)">
+            <div
+              v-if="props.header && !slots.body"
+              class="flex 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>
+                <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.handle" as-child>
+              <DialogClose v-if="!props.handle && props.closable" as-child>
                 <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
               </DialogClose>
             </div>
           </div>
-          <ScrollArea v-if="$slots.content" class="min-h-0 grow">
-            <div class="px-(--hn-panel-p) py-1">
-              <slot name="content" :close="close" />
+          <slot v-if="slots.body" name="body" :close="close" />
+          <template v-else>
+            <ScrollArea v-if="$slots.content" ref="scrollArea" class="min-h-0 grow">
+              <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>
     </DialogPortal>

package/src/components/sheet/sheet.variants.ts

@@ -3,17 +3,30 @@ 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 gap-4 sm:max-w-xl',
-    'rounded-t-xl rounded-b-none border-b-0 pt-2 shadow-lg outline-none',
-    'pb-[max(var(--hn-panel-p),env(safe-area-inset-bottom))]',
+    '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 mb-3 h-1.5 w-10 rounded-full data-disabled:opacity-50',
+  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/src/components/sidebar/Sidebar.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { Motion } from 'motion-v'
   import { cn } from '../../lib/cn'
-  import { TRANSITION, prefersReducedMotion } from '../../motion'
   import { useUiLocale } from '../../locale'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
-  import { useSidebar } from './context'
+  import { useSidebar, type SidebarState } from './context'
+  import SidebarLabel from './SidebarLabel.vue'
+  import {
+    sidebarRoot,
+    sidebarRegion,
+    sidebarBrand,
+    sidebarIcon,
+    sidebarWordmark,
+  } from './sidebar.variants'
 
   defineOptions({ name: 'HnSidebar' })
 
@@ -14,54 +20,58 @@
     class?: string
   }>()
 
+  defineSlots<{
+    default?(): unknown
+    header?(props: { state: SidebarState }): unknown
+    icon?(props: { state: SidebarState }): unknown
+    wordmark?(props: { state: SidebarState }): unknown
+    footer?(props: { state: SidebarState }): unknown
+  }>()
+
   const t = useUiLocale()
   const sidebar = useSidebar()
   const state = computed(() => sidebar?.state.value ?? 'expanded')
   const inDrawer = computed(() => sidebar?.inDrawer ?? false)
-
-  const width = computed(() => {
-    if (state.value === 'rail') return 56
-    if (state.value === 'hidden') return 0
-    return 256
-  })
-
-  const transition = computed(() => (prefersReducedMotion() ? { duration: 0 } : TRANSITION.layout))
 </script>
 
 <template>
-  <Motion
-    as="aside"
-    :initial="false"
-    :animate="inDrawer ? undefined : { width }"
-    :transition="transition"
+  <aside
     :data-state="state"
-    :class="
-      cn(
-        'flex h-full min-h-0 shrink-0 flex-col overflow-hidden',
-        inDrawer
-          ? 'w-full'
-          : 'border-line border-e [transition:border-color_var(--hn-duration-base)_var(--hn-ease-move)]',
-        !inDrawer && state === 'hidden' && 'border-e-transparent',
-        props.class,
-      )
-    "
+    :inert="state === 'hidden'"
+    :class="cn(sidebarRoot({ inDrawer }), props.class)"
   >
-    <div v-if="$slots.header" :class="cn('shrink-0', !inDrawer && 'px-3 py-3')">
+    <div v-if="$slots.header" :class="sidebarRegion({ inDrawer })">
       <slot name="header" :state="state" />
     </div>
+    <div
+      v-else-if="$slots.icon || $slots.wordmark"
+      class="hn-collapse shrink-0"
+      :data-state="state === 'rail' && !$slots.icon ? 'closed' : 'open'"
+      :inert="state === 'rail' && !$slots.icon"
+    >
+      <div class="hn-collapse-body">
+        <div :class="sidebarRegion({ inDrawer })">
+          <div :class="sidebarBrand()">
+            <div v-if="$slots.icon" :class="sidebarIcon()">
+              <slot name="icon" :state="state" />
+            </div>
+            <SidebarLabel v-if="$slots.wordmark" as="div" :class="sidebarWordmark()">
+              <slot name="wordmark" :state="state" />
+            </SidebarLabel>
+          </div>
+        </div>
+      </div>
+    </div>
     <ScrollArea class="min-h-0 flex-1">
       <nav
         :aria-label="props.label ?? t.sidebar.navLabel"
-        :class="cn('flex flex-col gap-1', !inDrawer && 'px-2.5 py-2')"
+        :class="cn('flex flex-col gap-1 py-2', !inDrawer && 'px-2.5')"
       >
         <slot />
       </nav>
     </ScrollArea>
-    <div
-      v-if="$slots.footer"
-      :class="cn('border-line shrink-0 border-t', !inDrawer && 'px-3 py-3')"
-    >
+    <div v-if="$slots.footer" :class="sidebarRegion({ inDrawer, footer: true })">
       <slot name="footer" :state="state" />
     </div>
-  </Motion>
+  </aside>
 </template>

package/src/components/sidebar/SidebarGroup.vue

@@ -31,8 +31,13 @@
     :class="cn(props.class)"
     @update:open="v => (rail ? undefined : (open = v))"
   >
-    <div class="hn-collapse" :class="rail ? 'hn-collapse-closed' : 'hn-collapse-open'">
-      <div class="hn-collapse-body">
+    <div class="relative h-(--hn-control-h-sm)">
+      <div
+        class="hn-sidebar-label"
+        :data-collapsed="rail ? '' : undefined"
+        :aria-hidden="rail ? 'true' : undefined"
+        :inert="rail"
+      >
         <CollapsibleTrigger as-child>
           <Button
             variant="ghost"
@@ -49,15 +54,11 @@
           </Button>
         </CollapsibleTrigger>
       </div>
-    </div>
-    <div
-      aria-hidden="true"
-      class="hn-collapse"
-      :class="rail ? 'hn-collapse-open' : 'hn-collapse-closed'"
-    >
-      <div class="hn-collapse-body">
-        <div class="border-line mx-2 my-1.5 border-t" />
-      </div>
+      <div
+        aria-hidden="true"
+        class="hn-sidebar-label border-line pointer-events-none absolute inset-x-2 top-1/2 border-t"
+        :data-collapsed="rail ? undefined : ''"
+      />
     </div>
     <CollapsibleContent>
       <div class="flex flex-col gap-0.5 pt-1">

package/src/components/sidebar/SidebarLabel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useSidebar } from './context'
+  import { sidebarLabel } from './sidebar.variants'
+
+  defineOptions({ name: 'HnSidebarLabel' })
+
+  const props = withDefaults(defineProps<{ as?: string; class?: string }>(), { as: 'span' })
+  const sidebar = useSidebar()
+  const collapsed = computed(() => sidebar?.state.value === 'rail')
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :data-collapsed="collapsed ? '' : undefined"
+    :aria-hidden="collapsed ? 'true' : undefined"
+    :inert="collapsed"
+    :class="cn(sidebarLabel(), props.class)"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/sidebar/sidebar.variants.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 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/src/components/tree/Tree.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+  import { TreeItem, TreeRoot } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import { useFieldControl } from '../form-field/context'
+  import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
+  import TreeCheck from './TreeCheck.vue'
+  import { useTree } from './composables/useTree'
+  import { tree, treeEmpty, treeRow, treeToggle } from './tree.variants'
+  import type { TreeNode, TreeNodeSlot, TreeValue } from './types'
+
+  defineOptions({ name: 'HnTree', inheritAttrs: false })
+  const props = withDefaults(
+    defineProps<{
+      items: TreeNode[]
+      multiple?: boolean
+      defaultExpanded?: TreeValue[]
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { defaultExpanded: () => [] },
+  )
+  const model = defineModel<TreeValue | TreeValue[] | null>()
+  const expandedModel = defineModel<TreeValue[]>('expanded')
+  defineSlots<{
+    node?(props: TreeNodeSlot): unknown
+    trailing?(props: TreeNodeSlot): unknown
+    empty?(): unknown
+  }>()
+  const t = useUiLocale()
+  const { id, labelledBy, describedBy, disabled, invalid } = useFieldControl({
+    disabled: () => props.disabled,
+    invalid: () => props.invalid,
+  })
+  const { selected, expanded, key, getChildren, state, select, toggle, keepRowClick } = useTree(
+    props,
+    model,
+    expandedModel,
+    disabled,
+  )
+</script>
+
+<template>
+  <div
+    v-if="props.items.length === 0"
+    v-bind="$attrs"
+    :id="id"
+    role="status"
+    :aria-labelledby="labelledBy"
+    :aria-describedby="describedBy"
+    data-hn-tree
+    :class="cn(treeEmpty(), props.class)"
+  >
+    <slot name="empty">{{ t.tree.empty }}</slot>
+  </div>
+  <TreeRoot
+    v-else
+    v-bind="$attrs"
+    :id="id"
+    v-slot="{ flattenItems }"
+    v-model:expanded="expanded"
+    :items="props.items"
+    :get-key="key"
+    :get-children="getChildren"
+    :model-value="props.multiple ? selected : selected[0]"
+    :multiple="props.multiple"
+    :disabled="disabled"
+    :aria-labelledby="labelledBy"
+    :aria-describedby="describedBy"
+    :aria-invalid="invalid || undefined"
+    :aria-disabled="disabled || undefined"
+    data-hn-tree
+    :data-disabled="disabled ? '' : undefined"
+    :data-invalid="invalid ? '' : undefined"
+    :class="cn(tree(), props.class)"
+  >
+    <TreeItem
+      v-for="item in flattenItems"
+      :key="item._id"
+      v-slot="{ isExpanded }"
+      v-bind="item.bind"
+      :disabled="state(item.value).disabled"
+      as-child
+      @select="select"
+      @toggle="keepRowClick"
+    >
+      <li
+        :aria-selected="props.multiple ? undefined : state(item.value).selected"
+        :aria-checked="
+          props.multiple
+            ? state(item.value).indeterminate
+              ? 'mixed'
+              : state(item.value).selected
+            : undefined
+        "
+        :style="{ '--hn-tree-level': item.level - 1 }"
+        :class="treeRow()"
+      >
+        <span
+          v-if="item.hasChildren"
+          :class="treeToggle()"
+          aria-hidden="true"
+          data-hn-tree-toggle
+          @click.stop="toggle(item.value)"
+        >
+          <DisclosureIcon direction="end" :open="isExpanded" />
+        </span>
+        <span v-else class="size-5 shrink-0" aria-hidden="true" />
+        <TreeCheck
+          v-if="props.multiple"
+          :selected="state(item.value).selected"
+          :indeterminate="state(item.value).indeterminate"
+        />
+        <span class="min-w-0 flex-1">
+          <slot name="node" :node="item.value" :expanded="isExpanded" v-bind="state(item.value)">
+            <span class="block truncate">{{ item.value.label }}</span>
+            <span v-if="item.value.description" class="text-muted block truncate text-xs">
+              {{ item.value.description }}
+            </span>
+          </slot>
+        </span>
+        <slot
+          name="trailing"
+          :node="item.value"
+          :expanded="isExpanded"
+          v-bind="state(item.value)"
+        />
+      </li>
+    </TreeItem>
+  </TreeRoot>
+</template>

package/src/components/tree/TreeCheck.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+  import { Check, Minus } from '@lucide/vue'
+  import { checkboxBox } from '../checkbox/checkbox.variants'
+
+  defineOptions({ name: 'HnTreeCheck' })
+  const props = defineProps<{ selected: boolean; indeterminate: boolean }>()
+</script>
+
+<template>
+  <span
+    aria-hidden="true"
+    :data-state="props.indeterminate ? 'indeterminate' : props.selected ? 'checked' : 'unchecked'"
+    :class="checkboxBox()"
+    class="pointer-events-none"
+  >
+    <Transition
+      enter-active-class="hn-transition-press"
+      enter-from-class="scale-50 opacity-0"
+      leave-active-class="hn-transition"
+      leave-to-class="scale-50 opacity-0"
+    >
+      <Check v-if="props.selected" />
+    </Transition>
+    <Transition
+      enter-active-class="hn-transition-press"
+      enter-from-class="scale-50 opacity-0"
+      leave-active-class="hn-transition"
+      leave-to-class="scale-50 opacity-0"
+    >
+      <Minus v-if="props.indeterminate" />
+    </Transition>
+  </span>
+</template>

package/src/components/tree/composables/useTree.ts

@@ -0,0 +1,81 @@
+import { computed, type Ref } from 'vue'
+import type { TreeNode, TreeNodeState, TreeValue } from '../types'
+import { checkedState, indexTree, toggleChecked } from '../utils/selection'
+
+interface Options {
+  items: TreeNode[]
+  multiple?: boolean
+  defaultExpanded: TreeValue[]
+}
+
+export function useTree(
+  props: Options,
+  model: Ref<TreeValue | TreeValue[] | null | undefined>,
+  expandedModel: Ref<TreeValue[] | undefined>,
+  disabled: Ref<boolean>,
+) {
+  const initialExpanded = [...props.defaultExpanded]
+  const index = computed(() => indexTree(props.items))
+  const states = computed(() => {
+    if (props.multiple)
+      return checkedState(index.value, Array.isArray(model.value) ? model.value : [])
+    return new Map(
+      [...index.value.entries].map(([value, entry]) => [
+        value,
+        {
+          selected: value === model.value,
+          indeterminate: false,
+          disabled: entry.disabled,
+        },
+      ]),
+    )
+  })
+  const selected = computed(() =>
+    [...index.value.entries.values()]
+      .filter(entry => states.value.get(entry.node.value)?.selected)
+      .map(entry => entry.node),
+  )
+  const keys = computed(
+    () => new Map([...index.value.entries].map(([value, entry]) => [key(entry.node), value])),
+  )
+  const expanded = computed({
+    get: () => (expandedModel.value ?? initialExpanded).map(value => key({ value })),
+    set: value => {
+      expandedModel.value = value.flatMap(key =>
+        keys.value.has(key) ? [keys.value.get(key)!] : [],
+      )
+    },
+  })
+
+  function key(node: Pick<TreeNode, 'value'>) {
+    return `${typeof node.value}:${node.value}`
+  }
+  function getChildren(node: TreeNode) {
+    return node.children?.length ? node.children : undefined
+  }
+  function state(node: TreeNode): TreeNodeState {
+    const value = states.value.get(node.value)!
+    return { ...value, disabled: disabled.value || value.disabled }
+  }
+  function select(event: CustomEvent<{ value?: TreeNode }>) {
+    event.preventDefault()
+    const node = event.detail.value
+    if (!node || state(node).disabled) return
+    model.value = props.multiple
+      ? toggleChecked(index.value, Array.isArray(model.value) ? model.value : [], node.value)
+      : model.value === node.value
+        ? null
+        : node.value
+  }
+  function toggle(node: TreeNode) {
+    if (state(node).disabled || !getChildren(node)) return
+    const value = key(node)
+    expanded.value = expanded.value.includes(value)
+      ? expanded.value.filter(key => key !== value)
+      : [...expanded.value, value]
+  }
+  function keepRowClick(event: CustomEvent<{ originalEvent: Event }>) {
+    if (event.detail.originalEvent.type === 'click') event.preventDefault()
+  }
+  return { selected, expanded, key, getChildren, state, select, toggle, keepRowClick }
+}

package/src/components/tree/tree.variants.ts

@@ -0,0 +1,22 @@
+import { tv } from '../../lib/tv'
+
+export const tree = tv({
+  base: 'flex w-full min-w-0 flex-col outline-none',
+})
+
+export const treeRow = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none relative isolate flex w-full cursor-pointer',
+    'items-center gap-(--hn-control-gap) rounded-md py-2 pe-2.5 text-start text-sm select-none',
+    'ps-[calc(0.375rem+var(--hn-tree-level)*1.25rem)] text-fg outline-none',
+    'data-disabled:pointer-events-none data-disabled:opacity-50',
+  ],
+})
+
+export const treeToggle = tv({
+  base: 'text-muted flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm rtl:-scale-x-100 [&>span>svg]:size-3.5',
+})
+
+export const treeEmpty = tv({
+  base: 'text-muted px-2.5 py-2 text-sm',
+})