@repraze/kernelkit 0.0.0-stage → 0.1.0-alpha.0

package/src/components/scroll-area.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import {ScrollArea as ScrollAreaPrimitive} from "@base-ui/react/scroll-area";
+import {cn} from "cn";
+import type * as React from "react";
+
+interface ScrollAreaProps extends ScrollAreaPrimitive.Root.Props {
+    /** Ref to the scrolling element (for virtualizers, scroll restoration, `scrollTo`). */
+    viewportRef?: React.Ref<HTMLDivElement>;
+    /** Classes for the scrolling element (padding, snap, max-height…). */
+    viewportClassName?: string;
+    /** Which scrollbars to render. Defaults to vertical. */
+    orientation?: "vertical" | "horizontal" | "both";
+    /** Fade content out at the scrollable edges (shadcn `scroll-fade` utilities, scroll-driven, no JS). */
+    fade?: boolean;
+}
+
+function ScrollArea({
+    className,
+    children,
+    viewportRef,
+    viewportClassName,
+    orientation = "vertical",
+    fade = false,
+    ...props
+}: ScrollAreaProps) {
+    return (
+        <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
+            <ScrollAreaPrimitive.Viewport
+                ref={viewportRef}
+                data-slot="scroll-area-viewport"
+                className={cn(
+                    "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+                    fade && {vertical: "scroll-fade-y", horizontal: "scroll-fade-x", both: "scroll-fade"}[orientation],
+                    viewportClassName,
+                )}
+            >
+                {children}
+            </ScrollAreaPrimitive.Viewport>
+            {orientation !== "horizontal" && <ScrollBar orientation="vertical" />}
+            {orientation !== "vertical" && <ScrollBar orientation="horizontal" />}
+            <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" />
+        </ScrollAreaPrimitive.Root>
+    );
+}
+
+function ScrollBar({className, orientation = "vertical", ...props}: ScrollAreaPrimitive.Scrollbar.Props) {
+    return (
+        <ScrollAreaPrimitive.Scrollbar
+            data-slot="scroll-area-scrollbar"
+            data-orientation={orientation}
+            orientation={orientation}
+            className={cn(
+                "flex touch-none p-px transition-[opacity,background-color] select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+                className,
+            )}
+            {...props}
+        >
+            <ScrollAreaPrimitive.Thumb
+                data-slot="scroll-area-thumb"
+                className="relative flex-1 rounded-pill bg-foreground/20 transition-colors hover:bg-foreground/35 active:bg-foreground/35 hc:bg-muted-foreground"
+            />
+        </ScrollAreaPrimitive.Scrollbar>
+    );
+}
+
+export {ScrollArea, ScrollBar};
+export type {ScrollAreaProps};

package/src/components/search-dialog.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import {CommandDialog, CommandItem} from "@repraze/kernelkit/components/command";
+import {Kbd} from "@repraze/kernelkit/components/kbd";
+import {cn} from "cn";
+import {CornerDownLeftIcon} from "lucide-react";
+import type * as React from "react";
+
+/**
+ * The suite's site search, opened by SearchTrigger / useSearchHotkeys. A CommandDialog with the search
+ * defaults; put a Command inside with a CommandInput, a CommandList of SearchItem groups and a
+ * SearchFooter.
+ *
+ * ```tsx
+ * <SearchDialog open={open} onOpenChange={setOpen} description="Search docs">
+ *   <Command>
+ *     <CommandInput placeholder="Search…" />
+ *     <CommandList>
+ *       <CommandEmpty>No results.</CommandEmpty>
+ *       <CommandGroup heading="Pages">
+ *         <SearchItem icon={<FileTextIcon />} title="Intro" description="…" onSelect={go} />
+ *       </CommandGroup>
+ *     </CommandList>
+ *     <SearchFooter />
+ *   </Command>
+ * </SearchDialog>
+ * ```
+ */
+function SearchDialog({
+    title = "Search",
+    description = "Search this site",
+    ...props
+}: React.ComponentProps<typeof CommandDialog>) {
+    return <CommandDialog title={title} description={description} {...props} />;
+}
+
+interface SearchItemProps extends Omit<React.ComponentProps<typeof CommandItem>, "title" | "children"> {
+    /** A lucide icon for the result's kind (muted). */
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    /** One line under the title, truncated. */
+    description?: React.ReactNode;
+    /** Trailing content before the enter hint (a Badge). */
+    meta?: React.ReactNode;
+}
+
+/** A result row: kind icon, title over a one-line description, optional meta, ↵ on the selected row. */
+function SearchItem({icon, title, description, meta, className, ...props}: SearchItemProps) {
+    return (
+        <CommandItem data-slot="search-item" className={cn("gap-3 [&>svg:last-child]:hidden", className)} {...props}>
+            {icon ? <span className="flex shrink-0 text-muted-foreground [&_svg]:size-4">{icon}</span> : null}
+            <span className="flex min-w-0 flex-1 flex-col">
+                <span className="truncate font-medium">{title}</span>
+                {description ? <span className="truncate text-muted-foreground">{description}</span> : null}
+            </span>
+            {meta}
+            <CornerDownLeftIcon
+                aria-hidden
+                className="text-muted-foreground opacity-0 group-data-[selected=true]/command-item:opacity-100"
+            />
+        </CommandItem>
+    );
+}
+
+/** Keyboard hints under the results. */
+function SearchFooter({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="search-footer"
+            className={cn("flex items-center gap-4 border-t px-3 py-2 text-xs text-muted-foreground", className)}
+            {...props}
+        >
+            <span className="flex items-center gap-1">
+                <Kbd>↑</Kbd>
+                <Kbd>↓</Kbd> move
+            </span>
+            <span className="flex items-center gap-1">
+                <Kbd>↵</Kbd> open
+            </span>
+            <span className="flex items-center gap-1">
+                <Kbd>esc</Kbd> close
+            </span>
+        </div>
+    );
+}
+
+export {SearchDialog, SearchFooter, SearchItem};

package/src/components/search-trigger.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import {Button} from "@repraze/kernelkit/components/button";
+import {Kbd} from "@repraze/kernelkit/components/kbd";
+import {cn} from "cn";
+import {SearchIcon} from "lucide-react";
+import * as React from "react";
+
+/** "⌘" on Apple keyboards, "Ctrl" elsewhere. SSR-safe: "Ctrl" until mounted. */
+function useModKey(): string {
+    const [mod, setMod] = React.useState("Ctrl");
+    React.useEffect(() => {
+        if (/Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent)) {
+            setMod("⌘");
+        }
+    }, []);
+    return mod;
+}
+
+/** Typing in a field: "/" must type a slash there, not open search. */
+function isEditable(target: EventTarget | null) {
+    const el = target as HTMLElement | null;
+    return !!el && (el.isContentEditable || /^(input|textarea|select)$/i.test(el.tagName));
+}
+
+/**
+ * The suite's search shortcuts: Ctrl/⌘ K anywhere (toggles), "/" outside text fields (opens).
+ * Pass a stable callback (useCallback) or the listener re-binds every render.
+ */
+function useSearchHotkeys(onOpen: (toggle: boolean) => void, {enabled = true}: {enabled?: boolean} = {}) {
+    React.useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                onOpen(true);
+            } else if (e.key === "/" && !e.metaKey && !e.ctrlKey && !e.altKey && !isEditable(e.target)) {
+                e.preventDefault();
+                onOpen(false);
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [onOpen, enabled]);
+}
+
+interface SearchTriggerProps extends React.ComponentProps<typeof Button> {
+    /** Placeholder text. */
+    children?: React.ReactNode;
+}
+
+/** Header search button: icon, placeholder, OS-aware shortcut. Open your dialog in `onClick`. */
+function SearchTrigger({children = "Search…", className, ...props}: SearchTriggerProps) {
+    const mod = useModKey();
+    return (
+        <Button
+            variant="outline"
+            size="sm"
+            aria-label="Search"
+            data-slot="search-trigger"
+            className={cn("w-9 justify-start px-0 text-muted-foreground sm:w-48 sm:px-2.5 md:w-56", className)}
+            {...props}
+        >
+            <SearchIcon data-icon="inline-start" className="mx-auto sm:mx-0" />
+            <span className="hidden flex-1 text-start sm:inline">{children}</span>
+            <Kbd className="hidden sm:inline-flex">{mod} K</Kbd>
+        </Button>
+    );
+}
+
+export {SearchTrigger, useModKey, useSearchHotkeys};
+export type {SearchTriggerProps};

package/src/components/section.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {cn} from "cn";
+
+/**
+ * A landing-page section: a header (title, description, and its call to action on the right) over
+ * content. Sections stack inside a SiteContainer; every section ends in somewhere to go next.
+ *
+ * ```tsx
+ * <Section>
+ *   <SectionHeader>
+ *     <SectionTitle>Ports</SectionTitle>
+ *     <SectionDescription>…</SectionDescription>
+ *     <SectionAction><Button variant="ghost">All ports <ArrowRightIcon /></Button></SectionAction>
+ *   </SectionHeader>
+ *   …content…
+ * </Section>
+ * ```
+ */
+/** A titled block of a landing page. */
+function Section({className, render, ...props}: useRender.ComponentProps<"section">) {
+    return useRender({
+        defaultTagName: "section",
+        props: mergeProps<"section">(
+            {className: cn("flex scroll-mt-24 flex-col gap-6 py-12 md:py-16", className)},
+            props,
+        ),
+        render,
+        state: {slot: "section"},
+    });
+}
+
+/** Title and description on the left, the section's action bottom-right (below on phones). */
+function SectionHeader({className, render, ...props}: useRender.ComponentProps<"header">) {
+    return useRender({
+        defaultTagName: "header",
+        props: mergeProps<"header">(
+            {className: cn("grid gap-x-6 gap-y-2 sm:grid-cols-[1fr_auto] sm:items-end", className)},
+            props,
+        ),
+        render,
+        state: {slot: "section-header"},
+    });
+}
+
+/** A short mono label above the title. */
+function SectionEyebrow({className, render, ...props}: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">(
+            {className: cn("font-mono text-xs font-medium text-primary-text uppercase sm:col-start-1", className)},
+            props,
+        ),
+        render,
+        state: {slot: "section-eyebrow"},
+    });
+}
+
+/** The section's h2. */
+function SectionTitle({className, render, ...props}: useRender.ComponentProps<"h2">) {
+    return useRender({
+        defaultTagName: "h2",
+        props: mergeProps<"h2">(
+            {
+                className: cn(
+                    "font-heading text-2xl font-semibold tracking-tight text-balance sm:col-start-1 md:text-3xl",
+                    className,
+                ),
+            },
+            props,
+        ),
+        render,
+        state: {slot: "section-title"},
+    });
+}
+
+/** What the section shows, in a sentence. */
+function SectionDescription({className, render, ...props}: useRender.ComponentProps<"p">) {
+    return useRender({
+        defaultTagName: "p",
+        props: mergeProps<"p">(
+            {className: cn("max-w-2xl text-pretty text-muted-foreground sm:col-start-1", className)},
+            props,
+        ),
+        render,
+        state: {slot: "section-description"},
+    });
+}
+
+/** Where to go next: usually a ghost or outline Button with a trailing arrow. */
+function SectionAction({className, render, ...props}: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">(
+            {
+                className: cn(
+                    "flex items-center gap-2 sm:col-start-2 sm:row-span-3 sm:row-start-1 sm:self-end",
+                    className,
+                ),
+            },
+            props,
+        ),
+        render,
+        state: {slot: "section-action"},
+    });
+}
+
+export {Section, SectionAction, SectionDescription, SectionEyebrow, SectionHeader, SectionTitle};

package/src/components/select.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import {Select as SelectPrimitive} from "@base-ui/react/select";
+import {
+    fieldSurface,
+    focusRing,
+    invalidRing,
+    listItem,
+    listLabel,
+    listSeparator,
+    popupMotion,
+    popupSurface,
+} from "@repraze/kernelkit/lib/recipes";
+import {usePortalContainer} from "@repraze/kernelkit/provider";
+import {cn} from "cn";
+import {CheckIcon, ChevronDownIcon, ChevronUpIcon} from "lucide-react";
+import * as React from "react";
+
+const Select = SelectPrimitive.Root;
+
+function SelectGroup({className, ...props}: SelectPrimitive.Group.Props) {
+    return <SelectPrimitive.Group data-slot="select-group" className={cn("scroll-my-1", className)} {...props} />;
+}
+
+function SelectValue({className, ...props}: SelectPrimitive.Value.Props) {
+    return (
+        <SelectPrimitive.Value data-slot="select-value" className={cn("flex flex-1 text-left", className)} {...props} />
+    );
+}
+
+function SelectTrigger({
+    className,
+    size = "default",
+    children,
+    ...props
+}: SelectPrimitive.Trigger.Props & {
+    size?: "sm" | "default" | "lg";
+}) {
+    return (
+        <SelectPrimitive.Trigger
+            data-slot="select-trigger"
+            data-size={size}
+            className={cn(
+                fieldSurface,
+                focusRing,
+                invalidRing,
+                "flex w-fit items-center justify-between gap-1.5 py-2 pr-2 pl-2.5 text-sm whitespace-nowrap select-none hover:bg-field-hover data-popup-open:bg-field-hover",
+                "data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-md data-[size=lg]:h-9",
+                "*: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",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <SelectPrimitive.Icon
+                render={<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />}
+            />
+        </SelectPrimitive.Trigger>
+    );
+}
+
+function SelectContent({
+    className,
+    children,
+    side = "bottom",
+    sideOffset = 4,
+    align = "center",
+    alignOffset = 0,
+    alignItemWithTrigger = true,
+    ...props
+}: SelectPrimitive.Popup.Props &
+    Pick<SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">) {
+    return (
+        <SelectPrimitive.Portal container={usePortalContainer()}>
+            <SelectPrimitive.Positioner
+                side={side}
+                sideOffset={sideOffset}
+                align={align}
+                alignOffset={alignOffset}
+                alignItemWithTrigger={alignItemWithTrigger}
+                className="isolate z-50"
+            >
+                <SelectPrimitive.Popup
+                    data-slot="select-content"
+                    data-align-trigger={alignItemWithTrigger}
+                    className={cn(
+                        popupSurface,
+                        popupMotion,
+                        "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 overflow-x-hidden overflow-y-auto p-1 data-[align-trigger=true]:animate-none",
+                        className,
+                    )}
+                    {...props}
+                >
+                    <SelectScrollUpButton />
+                    <SelectPrimitive.List>{children}</SelectPrimitive.List>
+                    <SelectScrollDownButton />
+                </SelectPrimitive.Popup>
+            </SelectPrimitive.Positioner>
+        </SelectPrimitive.Portal>
+    );
+}
+
+function SelectLabel({className, ...props}: SelectPrimitive.GroupLabel.Props) {
+    return <SelectPrimitive.GroupLabel data-slot="select-label" className={cn(listLabel, className)} {...props} />;
+}
+
+function SelectItem({className, children, ...props}: SelectPrimitive.Item.Props) {
+    return (
+        <SelectPrimitive.Item
+            data-slot="select-item"
+            className={cn(
+                listItem,
+                "w-full pr-8 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+                className,
+            )}
+            {...props}
+        >
+            <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+                {children}
+            </SelectPrimitive.ItemText>
+            <SelectPrimitive.ItemIndicator
+                render={
+                    <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+                }
+            >
+                <CheckIcon className="pointer-events-none" />
+            </SelectPrimitive.ItemIndicator>
+        </SelectPrimitive.Item>
+    );
+}
+
+function SelectSeparator({className, ...props}: SelectPrimitive.Separator.Props) {
+    return (
+        <SelectPrimitive.Separator
+            data-slot="select-separator"
+            className={cn(listSeparator, "pointer-events-none", className)}
+            {...props}
+        />
+    );
+}
+
+function SelectScrollUpButton({className, ...props}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+    return (
+        <SelectPrimitive.ScrollUpArrow
+            data-slot="select-scroll-up-button"
+            className={cn(
+                "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            {...props}
+        >
+            <ChevronUpIcon />
+        </SelectPrimitive.ScrollUpArrow>
+    );
+}
+
+function SelectScrollDownButton({className, ...props}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+    return (
+        <SelectPrimitive.ScrollDownArrow
+            data-slot="select-scroll-down-button"
+            className={cn(
+                "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            {...props}
+        >
+            <ChevronDownIcon />
+        </SelectPrimitive.ScrollDownArrow>
+    );
+}
+
+export {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectScrollDownButton,
+    SelectScrollUpButton,
+    SelectSeparator,
+    SelectTrigger,
+    SelectValue,
+};

package/src/components/separator.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import {Separator as SeparatorPrimitive} from "@base-ui/react/separator";
+import {cn} from "cn";
+
+function Separator({className, orientation = "horizontal", ...props}: SeparatorPrimitive.Props) {
+    return (
+        <SeparatorPrimitive
+            data-slot="separator"
+            orientation={orientation}
+            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/sheet.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import {Dialog as SheetPrimitive} from "@base-ui/react/dialog";
+import {Button} from "@repraze/kernelkit/components/button";
+import {backdrop, heading} from "@repraze/kernelkit/lib/recipes";
+import {usePortalContainer} from "@repraze/kernelkit/provider";
+import {cn} from "cn";
+import {XIcon} from "lucide-react";
+import * as React from "react";
+
+function Sheet({...props}: SheetPrimitive.Root.Props) {
+    return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({...props}: SheetPrimitive.Trigger.Props) {
+    return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({...props}: SheetPrimitive.Close.Props) {
+    return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({...props}: SheetPrimitive.Portal.Props) {
+    return <SheetPrimitive.Portal container={usePortalContainer()} data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({className, ...props}: SheetPrimitive.Backdrop.Props) {
+    return <SheetPrimitive.Backdrop data-slot="sheet-overlay" className={cn(backdrop, className)} {...props} />;
+}
+
+function SheetContent({
+    className,
+    children,
+    side = "right",
+    showCloseButton = true,
+    ...props
+}: SheetPrimitive.Popup.Props & {
+    side?: "top" | "right" | "bottom" | "left";
+    showCloseButton?: boolean;
+}) {
+    return (
+        <SheetPortal>
+            <SheetOverlay />
+            <SheetPrimitive.Popup
+                data-slot="sheet-content"
+                data-side={side}
+                className={cn(
+                    "fixed z-50 flex flex-col gap-4 border-border bg-popover bg-clip-padding text-sm text-popover-foreground shadow-xl shadow-(color:--shadow-color) transition duration-200 ease-in-out motion-reduce:transition-none data-[side=bottom]:rounded-t-xl data-[side=left]:rounded-r-xl data-[side=right]:rounded-l-xl data-[side=top]:rounded-b-xl data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] 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=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] 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=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                {showCloseButton && (
+                    <SheetPrimitive.Close
+                        data-slot="sheet-close"
+                        render={<Button variant="ghost" className="absolute top-3.5 right-3.5" size="icon-sm" />}
+                    >
+                        <XIcon />
+                        <span className="sr-only">Close</span>
+                    </SheetPrimitive.Close>
+                )}
+            </SheetPrimitive.Popup>
+        </SheetPortal>
+    );
+}
+
+function SheetHeader({className, ...props}: React.ComponentProps<"div">) {
+    return <div data-slot="sheet-header" className={cn("flex flex-col gap-1 p-4 pr-12 pb-0", className)} {...props} />;
+}
+
+function SheetBody({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="sheet-body"
+            className={cn("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-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}: SheetPrimitive.Title.Props) {
+    return (
+        <SheetPrimitive.Title
+            data-slot="sheet-title"
+            className={cn(heading, "text-base text-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+function SheetDescription({className, ...props}: SheetPrimitive.Description.Props) {
+    return (
+        <SheetPrimitive.Description
+            data-slot="sheet-description"
+            className={cn("text-sm text-muted-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+export {
+    Sheet,
+    SheetBody,
+    SheetClose,
+    SheetContent,
+    SheetDescription,
+    SheetFooter,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+};