@adea-ai/ui 0.60.4 → 0.61.0

package/src/components/ui/popover/popover.tsx

@@ -0,0 +1,81 @@
+import { Popover as KobaltePopover } from '@kobalte/core/popover'
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { menuContentPadding, popoverArrow, popoverMotion, overlaySurface } from '#lib/overlay'
+import { cn } from '#lib/utils'
+
+/**
+ * Popover.
+ *
+ * A floating surface with arbitrary content, anchored to a control. Use it for
+ * something interactive that would not fit in a menu: a small form, a colour
+ * picker, a filter panel. For a list of *actions* use DropdownMenu, which
+ * carries the menu keyboard contract; for a sentence of explanation use
+ * Tooltip, which is not focusable and cannot hold a control.
+ *
+ * Kobalte handles the anchoring, collision flipping, the focus trap for modal
+ * popovers, and dismissal on outside click and Escape.
+ */
+export function Popover(props: ComponentProps<typeof KobaltePopover>) {
+  return <KobaltePopover {...props} />
+}
+
+export function PopoverTrigger(props: ComponentProps<typeof KobaltePopover.Trigger>) {
+  return <KobaltePopover.Trigger {...props} />
+}
+
+export function PopoverAnchor(props: ComponentProps<typeof KobaltePopover.Anchor>) {
+  return <KobaltePopover.Anchor {...props} />
+}
+
+export type PopoverContentProps = ComponentProps<typeof KobaltePopover.Content> & {
+  /** Hide the caret pointing at the trigger. */
+  hideArrow?: boolean
+}
+
+export function PopoverContent(props: PopoverContentProps) {
+  const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children'])
+
+  return (
+    <KobaltePopover.Portal>
+      <KobaltePopover.Content
+        class={cn(
+          overlaySurface,
+          popoverMotion,
+          'z-(--z-menu) w-72 origin-(--kb-popover-content-transform-origin)',
+          menuContentPadding,
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+        <KobaltePopover.Arrow aria-hidden="true" class={popoverArrow} />
+      </KobaltePopover.Content>
+    </KobaltePopover.Portal>
+  )
+}
+
+export function PopoverTitle(props: ComponentProps<typeof KobaltePopover.Title>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobaltePopover.Title
+      class={cn('px-2 pt-1 pb-1.5 text-sm font-medium', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function PopoverDescription(props: ComponentProps<typeof KobaltePopover.Description>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobaltePopover.Description
+      class={cn('text-muted-foreground px-2 pb-1.5 text-sm', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function PopoverCloseButton(props: ComponentProps<typeof KobaltePopover.CloseButton>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobaltePopover.CloseButton class={cn(local.class)} {...rest} />
+}

package/src/components/ui/progress/index.ts

@@ -0,0 +1 @@
+export { Progress, type ProgressProps } from './progress'

package/src/components/ui/progress/progress.tsx

@@ -0,0 +1,67 @@
+import { Progress as KobalteProgress } from '@kobalte/core/progress'
+import type { ComponentProps } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Progress.
+ *
+ * A determinate bar. Kobalte publishes the value as `aria-valuenow`, so a
+ * screen reader reports the percentage instead of just "progress bar" — which
+ * is why a caller must pass a real `value`, or use Spinner when there is none.
+ *
+ * `indeterminate` renders the sweeping bar for an operation that reports no
+ * progress at all. It is a visibly different treatment so the two states are
+ * never confused by someone glancing at the screen.
+ */
+export type ProgressProps = ComponentProps<typeof KobalteProgress> & {
+  /**
+   * The visible label, which is also the bar's accessible name.
+   *
+   * Pass this, or `aria-label` when the label is drawn elsewhere. A progressbar
+   * with neither announces "progress bar, 64%" and no subject — the reader
+   * cannot tell whether it is a build, an upload or a download.
+   */
+  label?: string
+  trackClass?: string
+  indicatorClass?: string
+  /** Hide the numeric readout that otherwise sits beside the track. */
+  hideValue?: boolean
+}
+
+export function Progress(props: ProgressProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'trackClass',
+    'indicatorClass',
+    'hideValue',
+    'label',
+  ])
+
+  return (
+    <KobalteProgress class={cn('flex w-full flex-col gap-1.5', local.class)} {...rest}>
+      <div class="flex items-center justify-between gap-3">
+        <KobalteProgress.Label class="text-muted-foreground text-sm">
+          {local.label}
+        </KobalteProgress.Label>
+        <Show when={!local.hideValue}>
+          <KobalteProgress.ValueLabel class="text-muted-foreground text-sm tabular-nums" />
+        </Show>
+      </div>
+      <KobalteProgress.Track
+        class={cn('bg-input relative h-1.5 w-full overflow-hidden rounded-full', local.trackClass)}
+      >
+        <KobalteProgress.Fill
+          class={cn(
+            'bg-primary h-full rounded-full',
+            {
+              'animate-indeterminate w-1/4': props.indeterminate,
+              'w-(--kb-progress-fill-width)': !props.indeterminate,
+            },
+            local.indicatorClass
+          )}
+        />
+      </KobalteProgress.Track>
+    </KobalteProgress>
+  )
+}

package/src/components/ui/radio-group/index.ts

@@ -0,0 +1 @@
+export { RadioGroup, RadioGroupItem, type RadioGroupItemProps } from './radio-group'

package/src/components/ui/radio-group/radio-group.tsx

@@ -0,0 +1,78 @@
+import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'
+import { Circle } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * RadioGroup.
+ *
+ * A single choice from a small, visible set. The group owns the value and the
+ * arrow-key navigation, so a caller sets `value` once instead of wiring a
+ * `name` and a handler onto every item.
+ *
+ * Below about five options a Select hides the choices behind a click, which is
+ * the wrong trade; above about seven, radios become a wall and the Select wins.
+ * That call belongs to the caller, and both controls are drawn from the same
+ * tokens so either choice sits correctly next to the other.
+ */
+export function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteRadioGroup class={cn('grid gap-2', local.class)} {...rest} />
+}
+
+export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {
+  controlClass?: string
+  /**
+   * The option's visible label. A radio with no accessible name is unreachable
+   * by a screen reader and by voice control, so supply this or a child.
+   */
+  label?: string
+  description?: string
+}
+
+export function RadioGroupItem(props: RadioGroupItemProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'controlClass',
+    'label',
+    'description',
+    'children',
+  ])
+
+  return (
+    <KobalteRadioGroup.Item
+      class={cn('group/radio flex items-start gap-2.5', local.class)}
+      {...rest}
+    >
+      <KobalteRadioGroup.ItemInput />
+      <KobalteRadioGroup.ItemControl
+        class={cn(
+          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',
+          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',
+          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+          'data-[checked]:border-primary data-[checked]:text-primary',
+          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',
+          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+          local.controlClass
+        )}
+      >
+        <KobalteRadioGroup.ItemIndicator class="flex items-center justify-center">
+          <Circle class="size-2 fill-current" />
+        </KobalteRadioGroup.ItemIndicator>
+      </KobalteRadioGroup.ItemControl>
+      {local.children ?? (
+        <div class="grid gap-0.5 leading-none">
+          <KobalteRadioGroup.ItemLabel class="text-sm font-medium">
+            {local.label}
+          </KobalteRadioGroup.ItemLabel>
+          {local.description ? (
+            <KobalteRadioGroup.ItemDescription class="text-muted-foreground text-sm">
+              {local.description}
+            </KobalteRadioGroup.ItemDescription>
+          ) : null}
+        </div>
+      )}
+    </KobalteRadioGroup.Item>
+  )
+}

package/src/components/ui/resizable/index.ts

@@ -0,0 +1,6 @@
+export {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  type ResizableHandleProps,
+} from './resizable'

package/src/components/ui/resizable/resizable.tsx

@@ -0,0 +1,74 @@
+import Resizable from '@corvu/resizable'
+import { GripVertical } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Resizable.
+ *
+ * A split layout: panels the user can resize, with a handle between them. This
+ * is the shape of every IDE-like surface — rail, file tree, editor, terminal —
+ * and the reason it is a primitive rather than something each view improvises.
+ *
+ * corvu supplies the pointer capture, the min/max constraints and the keyboard
+ * resizing, which is what makes a divider operable without a mouse. The handle
+ * is a real focusable element with an accessible role, so a split pane can be
+ * adjusted from the keyboard; a bare `cursor-col-resize` div cannot.
+ */
+export function ResizablePanelGroup(props: ComponentProps<typeof Resizable> & { class?: string }) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <Resizable
+      class={cn('flex size-full data-[orientation=vertical]:flex-col', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function ResizablePanel(props: ComponentProps<typeof Resizable.Panel> & { class?: string }) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <Resizable.Panel class={cn('min-h-0 min-w-0 overflow-hidden', local.class)} {...rest} />
+}
+
+export type ResizableHandleProps = ComponentProps<typeof Resizable.Handle> & {
+  class?: string
+  /** Draw a visible grip in the middle of the divider. */
+  withHandle?: boolean
+  /**
+   * The divider's accessible name. It is a focusable control — arrow keys move
+   * the split — so it needs one; without it a screen reader announces an
+   * unlabelled button between the two panels.
+   */
+  label?: string
+}
+
+export function ResizableHandle(props: ResizableHandleProps) {
+  const [local, rest] = splitProps(props, ['class', 'withHandle', 'label'])
+
+  return (
+    <Resizable.Handle
+      aria-label={local.label ?? 'Resize panels'}
+      aria-orientation="vertical"
+      class={cn(
+        'group/resize bg-border relative flex w-px shrink-0 items-center justify-center',
+        /* Widen the hit target without moving the visual line: the divider is
+           a hairline, but a hairline is far too small to grab. */
+        'after:absolute after:inset-y-0 after:-inset-x-1 after:w-3',
+        'transition-colors ease-out hover:bg-primary',
+        'focus-visible:bg-primary focus-visible:outline-none',
+        'data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full',
+        'data-[orientation=vertical]:after:inset-x-0 data-[orientation=vertical]:after:-inset-y-1 data-[orientation=vertical]:after:h-3 data-[orientation=vertical]:after:w-full',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.withHandle ? (
+        <div class="bg-border z-(--z-docked) flex h-4 w-2.5 items-center justify-center rounded-sm border border-border">
+          <GripVertical class="size-2.5 text-muted-foreground" />
+        </div>
+      ) : null}
+    </Resizable.Handle>
+  )
+}

package/src/components/ui/scroll-area/index.ts

@@ -0,0 +1 @@
+export { ScrollArea, type ScrollAreaProps } from './scroll-area'

package/src/components/ui/scroll-area/scroll-area.tsx

@@ -0,0 +1,66 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * ScrollArea.
+ *
+ * A scroll container with the design system's scrollbar treatment, plus an
+ * optional fade at each edge so a long list reads as continuing rather than
+ * ending at the fold.
+ *
+ * This is a styled native scroller, not a reimplementation of scrolling. The
+ * platform scroller already handles momentum, rubber-banding, keyboard paging,
+ * trackpad gestures, `scrollIntoView`, focus-into-view and find-in-page. A
+ * custom scrollbar over a transformed div gives up every one of those to gain
+ * nothing but the scrollbar's appearance, which CSS already controls.
+ *
+ * `orientation` only decides which edges the fade appears on; `overflow-auto`
+ * stays on both axes in `both` mode so a wide table can still be reached.
+ */
+export type ScrollAreaProps = ComponentProps<'div'> & {
+  orientation?: 'vertical' | 'horizontal' | 'both'
+  /** Draw a fade at the leading and trailing edges of the scrolled axis. */
+  fade?: boolean
+  /** Replace the browser's scrollbar with the system's thin treatment. */
+  hideScrollbar?: boolean
+}
+
+export function ScrollArea(props: ScrollAreaProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'orientation',
+    'fade',
+    'hideScrollbar',
+    'tabIndex',
+  ])
+
+  return (
+    <div
+      data-slot="scroll-area"
+      /*
+       * Focusable, because that is what makes a scroll region reachable from the
+       * keyboard. A `div` with `overflow: auto` scrolls with a mouse or a
+       * trackpad and not at all with the arrow keys until it can take focus, so
+       * a long list inside one is unreachable without a pointer. The cost is a
+       * focus ring around the region, which is correct: it *is* focusable, and
+       * `outline-none` keeps the ring to the drawn one.
+       */
+      tabIndex={local.tabIndex ?? 0}
+      class={cn(
+        'relative min-h-0 min-w-0 outline-none focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        {
+          'overflow-y-auto overflow-x-hidden':
+            local.orientation === 'vertical' || local.orientation === undefined,
+          'overflow-x-auto overflow-y-hidden': local.orientation === 'horizontal',
+          'overflow-auto': local.orientation === 'both',
+          'no-scrollbar': local.hideScrollbar,
+          'scroll-shadow-y':
+            local.fade && (local.orientation === 'vertical' || local.orientation === undefined),
+        },
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}

package/src/components/ui/select/index.ts

@@ -0,0 +1,11 @@
+export {
+  Select,
+  SelectChevronsUpDown,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectSection,
+  SelectTrigger,
+  SelectValue,
+  type SelectTriggerProps,
+} from './select'

package/src/components/ui/select/select.tsx

@@ -0,0 +1,188 @@
+import { Select as KobalteSelect } from '@kobalte/core/select'
+import { Check, ChevronDown, ChevronsUpDown } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { menuContentPadding, menuItem, popoverArrow } from '#lib/overlay'
+import { cn } from '#lib/utils'
+
+/**
+ * Select.
+ *
+ * A single choice from a list that is too long to show, or whose options are
+ * only known at runtime. The distinction from RadioGroup is disclosure: a
+ * Select hides the choices behind a click, which is right above roughly seven
+ * options and wrong below it.
+ *
+ * `Select.Value` renders the human-readable label of the selection, not its
+ * value — the reason a Select takes both `options` and `optionValue`/`optionText`
+ * rather than a bare list of strings, and the reason the trigger never shows a
+ * raw id.
+ */
+export function Select<Option, OptGroup = never>(
+  props: ComponentProps<typeof KobalteSelect<Option, OptGroup>>
+) {
+  return <KobalteSelect {...props} />
+}
+
+export type SelectTriggerProps = ComponentProps<typeof KobalteSelect.Trigger> & {
+  size?: 'sm' | 'md' | 'lg'
+  /** Hide the chevron, e.g. when a caller draws its own affordance. */
+  hideIcon?: boolean
+}
+
+export function SelectTrigger(props: SelectTriggerProps) {
+  const [local, rest] = splitProps(props, ['class', 'size', 'hideIcon', 'children'])
+
+  return (
+    <KobalteSelect.Trigger
+      class={cn(
+        'border-input bg-transparent flex w-fit items-center justify-between gap-2 rounded-md border px-control-md',
+        'whitespace-nowrap transition-[color,box-shadow,border-color] ease-out outline-none',
+        'data-[placeholder-shown]:text-muted-foreground',
+        'hover:border-input',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
+        {
+          'h-control-sm text-xs': local.size === 'sm',
+          'h-control-md text-sm': local.size === 'md' || local.size === undefined,
+          'h-control-lg text-sm': local.size === 'lg',
+        },
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <Show when={!local.hideIcon}>
+        <KobalteSelect.Icon class="text-muted-foreground">
+          <ChevronDown />
+        </KobalteSelect.Icon>
+      </Show>
+    </KobalteSelect.Trigger>
+  )
+}
+
+/**
+ * What the trigger shows for the current selection.
+ *
+ * The default renderer is the reason a single-select needs no render prop at all.
+ * Kobalte's own `Value` draws *only* its children, so a bare `<SelectValue />`
+ * shows the placeholder and then goes blank the moment something is chosen: the
+ * value is there, nothing paints it.
+ *
+ * Kobalte cannot supply a default itself, because an option is the caller's type
+ * — it has no way to know which field is the label. So this reads a field by
+ * convention: `label`, then `name`, then `textValue`. An option shaped
+ * `{ value, label }` therefore needs nothing, and anything else passes
+ * `optionLabel`.
+ *
+ * A multiple-select still supplies its own renderer, because "3 selected" is a
+ * summary a caller has to phrase, not something a component can guess.
+ */
+type SelectValueChildren = ComponentProps<typeof KobalteSelect.Value>['children']
+
+export type SelectValueProps = ComponentProps<typeof KobalteSelect.Value> & {
+  /**
+   * Read the display text from the selected option. Supply this when the option's
+   * label does not live in a field called `label`, `name` or `textValue`.
+   */
+  optionLabel?: (option: unknown) => string
+  /** Replace the default readout entirely, for a multiple-select summary. */
+  children?: SelectValueChildren
+}
+
+/** Fields a label is read from, in order. See `SelectValueProps.optionLabel`. */
+const LABEL_FIELDS = ['label', 'name', 'textValue'] as const
+
+function labelFromOption(option: unknown): string {
+  if (option === null || typeof option !== 'object') {
+    return typeof option === 'string' ? option : ''
+  }
+
+  for (const field of LABEL_FIELDS) {
+    const value = (option as Record<string, unknown>)[field]
+    if (typeof value === 'string') return value
+  }
+
+  return ''
+}
+
+export function SelectValue(props: SelectValueProps) {
+  const [local, rest] = splitProps(props, ['class', 'children', 'optionLabel'])
+
+  const readLabel = (state: { selectedOption: () => unknown }): string => {
+    const option = state.selectedOption()
+    return local.optionLabel ? local.optionLabel(option) : labelFromOption(option)
+  }
+
+  return (
+    <KobalteSelect.Value data-slot="select-value" class={cn('truncate', local.class)} {...rest}>
+      {local.children ?? (readLabel as unknown as SelectValueChildren)}
+    </KobalteSelect.Value>
+  )
+}
+
+/**
+ * The option list. The items themselves come from the root's `itemComponent`,
+ * which is what makes a Select able to render a typed option rather than a
+ * string; `children` here is for content above the list, such as a filter hint.
+ */
+export function SelectContent(props: ComponentProps<typeof KobalteSelect.Content>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteSelect.Portal>
+      <KobalteSelect.Content
+        class={cn(
+          'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',
+          'z-(--z-menu) max-h-(--kb-popper-content-available-height) min-w-[8rem] origin-(--kb-select-content-transform-origin) overflow-y-auto overflow-x-hidden',
+          menuContentPadding,
+          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
+          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+          'data-expanded:duration-150 data-closed:duration-100',
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+        <KobalteSelect.Listbox class="flex flex-col" />
+        <KobalteSelect.Arrow aria-hidden="true" class={popoverArrow} />
+      </KobalteSelect.Content>
+    </KobalteSelect.Portal>
+  )
+}
+
+export function SelectItem(props: ComponentProps<typeof KobalteSelect.Item>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteSelect.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>
+      <KobalteSelect.ItemLabel>{local.children}</KobalteSelect.ItemLabel>
+      <KobalteSelect.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+        <Check class="size-4" />
+      </KobalteSelect.ItemIndicator>
+    </KobalteSelect.Item>
+  )
+}
+
+export function SelectSection(props: ComponentProps<typeof KobalteSelect.Section>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteSelect.Section class={cn('flex flex-col', local.class)} {...rest} />
+}
+
+export function SelectLabel(props: ComponentProps<typeof KobalteSelect.Label>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteSelect.Label
+      class={cn('text-muted-foreground px-2 py-1.5 text-2xs font-medium uppercase', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/** The chevron pair used when a Select is composed by hand in a field. */
+export function SelectChevronsUpDown(props: ComponentProps<'svg'>) {
+  return <ChevronsUpDown aria-hidden="true" {...props} />
+}

package/src/components/ui/separator/index.ts

@@ -0,0 +1 @@
+export { Separator, type SeparatorProps } from './separator'

package/src/components/ui/separator/separator.tsx

@@ -0,0 +1,40 @@
+import { Separator as KobalteSeparator } from '@kobalte/core/separator'
+import type { PolymorphicProps } from '@kobalte/core/polymorphic'
+import { type ComponentProps, splitProps, type ValidComponent } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Separator.
+ *
+ * Renders `role="separator"` with the right orientation, so a screen reader
+ * understands it as a boundary rather than as an empty element. A plain
+ * `<div>` with a border looks identical and announces nothing.
+ */
+export type SeparatorProps<T extends ValidComponent = 'div'> = PolymorphicProps<
+  T,
+  {
+    class?: string
+    /** Draw the line as a dashed rule. For an "or" between alternative paths. */
+    variant?: 'solid' | 'dashed'
+    orientation?: 'horizontal' | 'vertical'
+  }
+>
+
+export function Separator<T extends ValidComponent = 'div'>(props: SeparatorProps<T>) {
+  const [local, rest] = splitProps(props as SeparatorProps, ['class', 'variant', 'orientation'])
+
+  return (
+    <KobalteSeparator
+      orientation={local.orientation ?? 'horizontal'}
+      class={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        {
+          'border-t border-dashed border-border bg-transparent data-[orientation=horizontal]:h-0':
+            local.variant === 'dashed',
+        },
+        local.class
+      )}
+      {...(rest as ComponentProps<'div'>)}
+    />
+  )
+}

package/src/components/ui/sheet/index.ts

@@ -0,0 +1,13 @@
+export {
+  Sheet,
+  SheetBody,
+  SheetCloseButton,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  sheetVariants,
+  type SheetContentProps,
+} from './sheet'