@multicomma/arkcn 0.1.0

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

@@ -0,0 +1,82 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { ScrollArea as ScrollAreaPrimitive } from "@ark-ui/react"
+
+function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
+      <ScrollAreaViewport>
+        <ScrollAreaContent>{children}</ScrollAreaContent>
+      </ScrollAreaViewport>
+      <ScrollBar />
+      <ScrollAreaCorner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollAreaContext({ ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Context>) {
+  return <ScrollAreaPrimitive.Context {...props} />
+}
+
+function ScrollAreaViewport({ className, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>) {
+  return (
+    <ScrollAreaPrimitive.Viewport
+      data-slot="scroll-area-viewport"
+      className={cn(
+        "no-scrollbar size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ScrollAreaContent({ className, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Content>) {
+  return (
+    <ScrollAreaPrimitive.Content data-slot="scroll-area-content" className={cn("min-w-full", className)} {...props} />
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-horizontal:not-data-overflow-x:hidden data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent data-vertical:not-data-overflow-y:hidden",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaThumb />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
+
+function ScrollAreaThumb({ className, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Thumb>) {
+  return (
+    <ScrollAreaPrimitive.Thumb
+      data-slot="scroll-area-thumb"
+      className={cn("relative flex-1 rounded-full bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ScrollAreaCorner({ ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Corner>) {
+  return <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" {...props} />
+}
+
+export {
+  ScrollArea,
+  ScrollAreaContent,
+  ScrollAreaContext,
+  ScrollAreaCorner,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+  ScrollBar,
+}

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

@@ -0,0 +1,95 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { SegmentGroup as SegmentGroupPrimitive } from "@ark-ui/react"
+
+function SegmentGroup({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof SegmentGroupPrimitive.Root>) {
+  return (
+    <SegmentGroupPrimitive.Root
+      data-slot="segment-group"
+      orientation={orientation}
+      className={cn(
+        "relative inline-flex h-8 w-fit items-center gap-0.5 rounded-lg bg-muted p-0.75 text-muted-foreground data-vertical:h-auto data-vertical:flex-col data-vertical:items-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SegmentGroupContext({ ...props }: React.ComponentProps<typeof SegmentGroupPrimitive.Context>) {
+  return <SegmentGroupPrimitive.Context {...props} />
+}
+
+function SegmentGroupLabel({ className, ...props }: React.ComponentProps<typeof SegmentGroupPrimitive.Label>) {
+  return (
+    <SegmentGroupPrimitive.Label
+      data-slot="segment-group-label"
+      className={cn("text-sm font-medium select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SegmentGroupIndicator({ className, ...props }: React.ComponentProps<typeof SegmentGroupPrimitive.Indicator>) {
+  return (
+    <SegmentGroupPrimitive.Indicator
+      data-slot="segment-group-indicator"
+      className={cn(
+        "top-(--top) left-(--left) z-0 h-(--height) w-(--width) rounded-md bg-background shadow-sm transition-[left,top,width,height] duration-200 dark:border dark:border-input dark:bg-input/30",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SegmentGroupItem({ className, children, ...props }: React.ComponentProps<typeof SegmentGroupPrimitive.Item>) {
+  return (
+    <SegmentGroupPrimitive.Item
+      data-slot="segment-group-item"
+      className={cn(
+        "relative z-10 inline-flex h-full cursor-pointer items-center justify-center gap-1.5 rounded-md px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-colors select-none hover:text-foreground data-focus-visible:ring-3 data-focus-visible:ring-ring/50 data-checked:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <SegmentGroupItemText>{children}</SegmentGroupItemText>
+      <SegmentGroupItemControl />
+      <SegmentGroupItemHiddenInput />
+    </SegmentGroupPrimitive.Item>
+  )
+}
+
+function SegmentGroupItemContext({ ...props }: React.ComponentProps<typeof SegmentGroupPrimitive.ItemContext>) {
+  return <SegmentGroupPrimitive.ItemContext {...props} />
+}
+
+function SegmentGroupItemText({ ...props }: React.ComponentProps<typeof SegmentGroupPrimitive.ItemText>) {
+  return <SegmentGroupPrimitive.ItemText data-slot="segment-group-item-text" {...props} />
+}
+
+function SegmentGroupItemControl({ ...props }: React.ComponentProps<typeof SegmentGroupPrimitive.ItemControl>) {
+  return <SegmentGroupPrimitive.ItemControl data-slot="segment-group-item-control" {...props} />
+}
+
+function SegmentGroupItemHiddenInput({ ...props }: React.ComponentProps<typeof SegmentGroupPrimitive.ItemHiddenInput>) {
+  return <SegmentGroupPrimitive.ItemHiddenInput {...props} />
+}
+
+export {
+  SegmentGroup,
+  SegmentGroupContext,
+  SegmentGroupIndicator,
+  SegmentGroupItem,
+  SegmentGroupItemContext,
+  SegmentGroupItemControl,
+  SegmentGroupItemHiddenInput,
+  SegmentGroupItemText,
+  SegmentGroupLabel,
+}

package/src/components/ui/select.tsx

@@ -0,0 +1,354 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import {
+  Select as SelectPrimitive,
+  Portal as PortalPrimitive,
+  createListCollection,
+  type CollectionItem,
+  type ListCollection,
+} from "@ark-ui/react"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select<T extends CollectionItem>({
+  positioning,
+  lazyMount = true,
+  unmountOnExit = true,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root<T>>) {
+  return (
+    <SelectPrimitive.Root
+      data-slot="select"
+      positioning={{
+        placement: "bottom",
+        gutter: 4,
+        sameWidth: true,
+        ...positioning,
+      }}
+      lazyMount={lazyMount}
+      unmountOnExit={unmountOnExit}
+      {...props}
+    />
+  )
+}
+
+function SelectContext({ ...props }: React.ComponentProps<typeof SelectPrimitive.Context>) {
+  return <SelectPrimitive.Context {...props} />
+}
+
+function SelectHiddenSelect({ ...props }: React.ComponentProps<typeof SelectPrimitive.HiddenSelect>) {
+  return <SelectPrimitive.HiddenSelect {...props} />
+}
+
+function SelectRootLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label data-slot="select-root-label" className={cn("text-sm font-medium", className)} {...props} />
+  )
+}
+
+function SelectControl({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Control>) {
+  return (
+    <SelectPrimitive.Control
+      data-slot="select-control"
+      className={cn("flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectGroup({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ItemGroup>) {
+  return <SelectPrimitive.ItemGroup data-slot="select-group" className={cn("scroll-my-1 p-1", className)} {...props} />
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.ValueText>) {
+  return <SelectPrimitive.ValueText data-slot="select-value" {...props} />
+}
+
+function SelectIndicator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Indicator>) {
+  return (
+    <SelectPrimitive.Indicator
+      data-slot="select-indicator"
+      className={cn("pointer-events-none text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectClearTrigger({ ...props }: React.ComponentProps<typeof SelectPrimitive.ClearTrigger>) {
+  return <SelectPrimitive.ClearTrigger data-slot="select-clear-trigger" {...props} />
+}
+
+/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */
+/**
+ * `variant="unstyled"` keeps only the layout (flex, gap, icon sizing) so a host
+ * can supply its own chrome, e.g. an editable grid cell that already draws the
+ * focus ring.
+ */
+function SelectTrigger({
+  className,
+  size = "default",
+  variant = "default",
+  children,
+  ...props
+}: Omit<React.ComponentProps<typeof SelectPrimitive.Trigger>, "id"> & {
+  size?: "sm" | "default"
+  variant?: "default" | "unstyled"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      data-variant={variant}
+      className={cn(
+        "flex items-center justify-between gap-1.5 text-sm whitespace-nowrap outline-none select-none disabled:cursor-not-allowed disabled:opacity-50 data-placeholder-shown:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        variant === "default" &&
+          "w-fit rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] dark:bg-input/30 dark:hover:bg-input/50 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectIndicator asChild>
+        <ChevronDownIcon className="size-4" />
+      </SelectIndicator>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectPositioner({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Positioner>) {
+  return (
+    <SelectPrimitive.Positioner data-slot="select-positioner" className={cn("[--z-index:50]", className)} {...props} />
+  )
+}
+
+/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */
+function SelectContent({
+  className,
+  children,
+  ...props
+}: Omit<React.ComponentProps<typeof SelectPrimitive.Content>, "id">) {
+  return (
+    <PortalPrimitive>
+      <SelectPositioner>
+        <SelectPrimitive.Content
+          data-slot="select-content"
+          className={cn(
+            "relative z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          {children}
+          <SelectScrollDownButton />
+        </SelectPrimitive.Content>
+      </SelectPositioner>
+    </PortalPrimitive>
+  )
+}
+
+function SelectList({ ...props }: React.ComponentProps<typeof SelectPrimitive.List>) {
+  return <SelectPrimitive.List data-slot="select-list" {...props} />
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ItemGroupLabel>) {
+  return (
+    <SelectPrimitive.ItemGroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  item,
+  value,
+  ...props
+}: Omit<React.ComponentProps<typeof SelectPrimitive.Item>, "item"> & {
+  /** The collection item. Falls back to `value` for string collections. */
+  item?: CollectionItem
+  value?: string
+}) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      item={item ?? value}
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectItemIndicator>
+        <CheckIcon className="pointer-events-none" />
+      </SelectItemIndicator>
+      <SelectPrimitive.ItemText data-slot="select-item-text">{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectItemText({ ...props }: React.ComponentProps<typeof SelectPrimitive.ItemText>) {
+  return <SelectPrimitive.ItemText data-slot="select-item-text" {...props} />
+}
+
+function SelectItemIndicator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ItemIndicator>) {
+  return (
+    <SelectPrimitive.ItemIndicator
+      data-slot="select-item-indicator"
+      className={cn("pointer-events-none absolute right-2 flex size-4 items-center justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectSeparator({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="separator"
+      aria-orientation="horizontal"
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Ark's Select content is its own scroll container and has no scroll buttons.
+ * These reproduce Radix's: shown only when the content can scroll in that
+ * direction, and they scroll while hovered.
+ */
+function useSelectScrollButton(direction: "up" | "down") {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const [visible, setVisible] = React.useState(false)
+  const timer = React.useRef<number | null>(null)
+
+  const getContent = React.useCallback(
+    () => ref.current?.closest<HTMLElement>('[data-slot="select-content"]') ?? null,
+    []
+  )
+
+  React.useEffect(() => {
+    const content = getContent()
+    if (!content) return
+    const update = () => {
+      const canUp = content.scrollTop > 0
+      const canDown = content.scrollTop + content.clientHeight < content.scrollHeight - 1
+      setVisible(direction === "up" ? canUp : canDown)
+    }
+    update()
+    content.addEventListener("scroll", update)
+    const observer = new ResizeObserver(update)
+    observer.observe(content)
+    return () => {
+      content.removeEventListener("scroll", update)
+      observer.disconnect()
+    }
+  }, [direction, getContent])
+
+  const stop = React.useCallback(() => {
+    if (timer.current !== null) window.clearInterval(timer.current)
+    timer.current = null
+  }, [])
+
+  const start = React.useCallback(() => {
+    stop()
+    timer.current = window.setInterval(() => {
+      getContent()?.scrollBy({ top: direction === "up" ? -8 : 8 })
+    }, 40)
+  }, [direction, getContent, stop])
+
+  React.useEffect(() => stop, [stop])
+
+  return { ref, visible, start, stop }
+}
+
+function SelectScrollUpButton({ className, onPointerEnter, onPointerLeave, ...props }: React.ComponentProps<"div">) {
+  const { ref, visible, start, stop } = useSelectScrollButton("up")
+  return (
+    <div
+      ref={ref}
+      aria-hidden
+      hidden={!visible}
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "sticky top-0 z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      onPointerEnter={(event) => {
+        onPointerEnter?.(event)
+        start()
+      }}
+      onPointerLeave={(event) => {
+        onPointerLeave?.(event)
+        stop()
+      }}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </div>
+  )
+}
+
+function SelectScrollDownButton({ className, onPointerEnter, onPointerLeave, ...props }: React.ComponentProps<"div">) {
+  const { ref, visible, start, stop } = useSelectScrollButton("down")
+  return (
+    <div
+      ref={ref}
+      aria-hidden
+      hidden={!visible}
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "sticky bottom-0 z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      onPointerEnter={(event) => {
+        onPointerEnter?.(event)
+        start()
+      }}
+      onPointerLeave={(event) => {
+        onPointerLeave?.(event)
+        stop()
+      }}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </div>
+  )
+}
+
+/** Render-prop access to one item's state (`{ selected, highlighted, disabled, ... }`). */
+function SelectItemContext({ ...props }: React.ComponentProps<typeof SelectPrimitive.ItemContext>) {
+  return <SelectPrimitive.ItemContext {...props} />
+}
+
+export {
+  Select,
+  SelectClearTrigger,
+  SelectContent,
+  SelectContext,
+  SelectControl,
+  SelectGroup,
+  SelectHiddenSelect,
+  SelectIndicator,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectList,
+  SelectPositioner,
+  SelectRootLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  createListCollection,
+  type CollectionItem,
+  type ListCollection,
+  SelectItemContext,
+}

package/src/components/ui/separator.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+/**
+ * Ark UI has no Separator primitive. This mirrors Radix's: a `div` with
+ * `role="separator"` (or `role="none"` when decorative) and `data-orientation`.
+ */
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<"div"> & {
+  orientation?: "horizontal" | "vertical"
+  decorative?: boolean
+}) {
+  return (
+    <div
+      data-slot="separator"
+      data-orientation={orientation}
+      role={decorative ? "none" : "separator"}
+      aria-orientation={!decorative && orientation === "vertical" ? "vertical" : undefined}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/src/components/ui/sheet.tsx

@@ -0,0 +1,130 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Dialog as SheetPrimitive, Portal as PortalPrimitive } from "@ark-ui/react"
+
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ lazyMount = true, unmountOnExit = true, ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.CloseTrigger>) {
+  return <SheetPrimitive.CloseTrigger data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof PortalPrimitive>) {
+  return <PortalPrimitive {...props} />
+}
+
+function SheetContext({ ...props }: React.ComponentProps<typeof SheetPrimitive.Context>) {
+  return <SheetPrimitive.Context {...props} />
+}
+
+function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetPositioner({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Positioner>) {
+  return (
+    <SheetPrimitive.Positioner
+      data-slot="sheet-positioner"
+      className={cn("fixed inset-0 z-50", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPositioner data-side={side}>
+        <SheetPrimitive.Content
+          data-slot="sheet-content"
+          data-side={side}
+          className={cn(
+            "absolute flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <SheetPrimitive.CloseTrigger data-slot="sheet-close" asChild>
+              <Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+                <XIcon />
+                <span className="sr-only">Close</span>
+              </Button>
+            </SheetPrimitive.CloseTrigger>
+          )}
+        </SheetPrimitive.Content>
+      </SheetPositioner>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="sheet-header" className={cn("flex flex-col gap-0.5 p-4", className)} {...props} />
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("font-heading text-base font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetContext,
+  SheetHeader,
+  SheetFooter,
+  SheetOverlay,
+  SheetPortal,
+  SheetPositioner,
+  SheetTitle,
+  SheetDescription,
+}