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

package/src/components/drawer.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import {Drawer as DrawerPrimitive} from "@base-ui/react/drawer";
+import {heading} from "@repraze/kernelkit/lib/recipes";
+import {usePortalContainer} from "@repraze/kernelkit/provider";
+import {cn} from "cn";
+import * as React from "react";
+
+type DrawerContextProps = {
+    hasSnapPoints: boolean;
+    modal: DrawerPrimitive.Root.Props["modal"];
+    showSwipeHandle: boolean;
+    swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>;
+};
+
+const DrawerContext = React.createContext<DrawerContextProps | null>(null);
+
+function useDrawer() {
+    const context = React.useContext(DrawerContext);
+
+    if (!context) {
+        throw new Error("useDrawer must be used within a Drawer.");
+    }
+
+    return context;
+}
+
+function Drawer({
+    modal = true,
+    showSwipeHandle = false,
+    snapPoints,
+    swipeDirection = "down",
+    ...props
+}: DrawerPrimitive.Root.Props & {
+    showSwipeHandle?: boolean;
+}) {
+    const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+    const contextValue = React.useMemo(
+        () => ({hasSnapPoints, modal, showSwipeHandle, swipeDirection}),
+        [hasSnapPoints, modal, showSwipeHandle, swipeDirection],
+    );
+
+    return (
+        <DrawerContext.Provider value={contextValue}>
+            <DrawerPrimitive.Root
+                data-slot="drawer"
+                modal={modal}
+                snapPoints={snapPoints}
+                swipeDirection={swipeDirection}
+                {...props}
+            />
+        </DrawerContext.Provider>
+    );
+}
+
+function DrawerTrigger({...props}: DrawerPrimitive.Trigger.Props) {
+    return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({...props}: DrawerPrimitive.Portal.Props) {
+    return <DrawerPrimitive.Portal container={usePortalContainer()} data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({...props}: DrawerPrimitive.Close.Props) {
+    return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({className, ...props}: DrawerPrimitive.Backdrop.Props) {
+    return (
+        <DrawerPrimitive.Backdrop
+            data-slot="drawer-overlay"
+            className={cn(
+                // Same scrim as the `backdrop` recipe, but driven by the swipe progress instead of keyframes.
+                "fixed inset-0 z-50 min-h-dvh bg-black/40 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute", // lint-design-ignore: scrim is not a role
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function DrawerSwipeHandle({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="drawer-swipe-handle"
+            aria-hidden="true"
+            className={cn(
+                "relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-pill after:bg-input group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function DrawerContent({className, children, ...props}: DrawerPrimitive.Popup.Props) {
+    const {hasSnapPoints, modal, showSwipeHandle, swipeDirection} = useDrawer();
+    const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+
+    return (
+        <DrawerPortal data-slot="drawer-portal">
+            {modal === true && <DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />}
+            <DrawerPrimitive.Viewport
+                data-slot="drawer-viewport"
+                data-modal={modal}
+                className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
+            >
+                <DrawerPrimitive.Popup
+                    data-slot="drawer-popup"
+                    data-swipe-axis={swipeAxis}
+                    data-snap-points={hasSnapPoints ? "" : undefined}
+                    className={cn(
+                        // Base.
+                        "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col border-border bg-popover text-sm text-popover-foreground shadow-xl shadow-(color:--shadow-color) transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
+                        // Nested.
+                        "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
+                        // Bleed.
+                        "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
+                        // Sizing.
+                        "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+                        // Stack.
+                        "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
+                        // Transitions.
+                        "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+                        // Axis: y.
+                        "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
+                        // Axis: x.
+                        "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
+                        // Direction: down.
+                        "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
+                        // Direction: up.
+                        "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
+                        // Direction: left.
+                        "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
+                        // Direction: right.
+                        "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
+                        className,
+                    )}
+                    {...props}
+                >
+                    {showSwipeHandle && <DrawerSwipeHandle />}
+                    <DrawerPrimitive.Content
+                        data-slot="drawer-content"
+                        className={cn(
+                            "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none",
+                        )}
+                    >
+                        {children}
+                    </DrawerPrimitive.Content>
+                </DrawerPrimitive.Popup>
+            </DrawerPrimitive.Viewport>
+        </DrawerPortal>
+    );
+}
+
+function DrawerHeader({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="drawer-header"
+            className={cn(
+                "flex shrink-0 flex-col gap-1 p-4 group-data-[swipe-axis=y]/drawer-popup:text-center md:text-left",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function DrawerBody({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="drawer-body"
+            className={cn("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4", className)}
+            {...props}
+        />
+    );
+}
+
+function DrawerFooter({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="drawer-footer"
+            className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4", className)}
+            {...props}
+        />
+    );
+}
+
+function DrawerTitle({className, ...props}: DrawerPrimitive.Title.Props) {
+    return (
+        <DrawerPrimitive.Title
+            data-slot="drawer-title"
+            className={cn(heading, "text-base text-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+function DrawerDescription({className, ...props}: DrawerPrimitive.Description.Props) {
+    return (
+        <DrawerPrimitive.Description
+            data-slot="drawer-description"
+            className={cn("text-sm text-balance text-muted-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+export {
+    Drawer,
+    DrawerBody,
+    DrawerClose,
+    DrawerContent,
+    DrawerDescription,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerOverlay,
+    DrawerPortal,
+    DrawerSwipeHandle,
+    DrawerTitle,
+    DrawerTrigger,
+};

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+import {Menu as MenuPrimitive} from "@base-ui/react/menu";
+import {listItem, listLabel, listSeparator, popupMotion, popupSurface} from "@repraze/kernelkit/lib/recipes";
+import {usePortalContainer} from "@repraze/kernelkit/provider";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+import {CheckIcon, ChevronRightIcon} from "lucide-react";
+import * as React from "react";
+
+/** Menu popup: shared by dropdown, context menu and menubar. */
+const menuContentClass = cn(
+    popupSurface,
+    popupMotion,
+    "z-50 max-h-(--available-height) overflow-x-hidden overflow-y-auto p-1 outline-none data-closed:overflow-hidden",
+);
+
+/** `danger` (alias `destructive`) items: danger text and a danger-tinted highlight (GUIDELINES §4). */
+type MenuItemVariant = "default" | "danger" | "destructive";
+
+/** Menu row classes. `inset` lines text up with items that lead with an icon. */
+const menuItemVariants = cva([listItem, "group/menu-item data-inset:pl-8"], {
+    variants: {
+        variant: {
+            default: "",
+            danger: "text-danger data-highlighted:bg-danger/15 data-highlighted:text-danger [&_svg:not([class*='text-'])]:text-danger data-highlighted:[&_svg:not([class*='text-'])]:text-danger",
+        },
+    },
+    defaultVariants: {variant: "default"},
+});
+
+function resolveItemVariant(variant: MenuItemVariant | undefined) {
+    return variant === "destructive" || variant === "danger" ? "danger" : "default";
+}
+
+/** Keyboard shortcut hint at the end of a menu row. */
+const menuShortcutClass =
+    "ml-auto pl-4 font-mono text-xs text-muted-foreground group-data-highlighted/menu-item:text-accent-foreground";
+
+/** Right-side indicator of checkbox and radio rows. */
+const menuIndicatorClass = "pointer-events-none absolute right-2 flex size-4 items-center justify-center";
+
+function DropdownMenu({...props}: MenuPrimitive.Root.Props) {
+    return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({...props}: MenuPrimitive.Portal.Props) {
+    return <MenuPrimitive.Portal container={usePortalContainer()} data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({...props}: MenuPrimitive.Trigger.Props) {
+    return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+    align = "start",
+    alignOffset = 0,
+    side = "bottom",
+    sideOffset = 4,
+    className,
+    ...props
+}: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+    return (
+        <MenuPrimitive.Portal container={usePortalContainer()}>
+            <MenuPrimitive.Positioner
+                className="isolate z-50 outline-none"
+                align={align}
+                alignOffset={alignOffset}
+                side={side}
+                sideOffset={sideOffset}
+            >
+                <MenuPrimitive.Popup
+                    data-slot="dropdown-menu-content"
+                    className={cn(menuContentClass, "w-(--anchor-width) min-w-40", className)}
+                    {...props}
+                />
+            </MenuPrimitive.Positioner>
+        </MenuPrimitive.Portal>
+    );
+}
+
+function DropdownMenuGroup({...props}: MenuPrimitive.Group.Props) {
+    return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+/** Plain caption: works inside or outside a `DropdownMenuGroup` (Base UI's GroupLabel requires a Group). */
+function DropdownMenuLabel({
+    className,
+    inset,
+    ...props
+}: React.ComponentProps<"div"> & {
+    inset?: boolean;
+}) {
+    return (
+        <div
+            data-slot="dropdown-menu-label"
+            data-inset={inset}
+            className={cn(listLabel, "data-inset:pl-8", className)}
+            {...props}
+        />
+    );
+}
+
+function DropdownMenuItem({
+    className,
+    inset,
+    variant = "default",
+    ...props
+}: MenuPrimitive.Item.Props & {
+    inset?: boolean;
+    variant?: MenuItemVariant;
+}) {
+    const v = resolveItemVariant(variant);
+    return (
+        <MenuPrimitive.Item
+            data-slot="dropdown-menu-item"
+            data-inset={inset}
+            data-variant={v}
+            className={cn(menuItemVariants({variant: v}), className)}
+            {...props}
+        />
+    );
+}
+
+function DropdownMenuSub({...props}: MenuPrimitive.SubmenuRoot.Props) {
+    return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+    className,
+    inset,
+    children,
+    ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+}) {
+    return (
+        <MenuPrimitive.SubmenuTrigger
+            data-slot="dropdown-menu-sub-trigger"
+            data-inset={inset}
+            className={cn(
+                menuItemVariants(),
+                "data-popup-open:bg-accent data-popup-open:text-accent-foreground",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <ChevronRightIcon className="ml-auto" />
+        </MenuPrimitive.SubmenuTrigger>
+    );
+}
+
+function DropdownMenuSubContent({
+    align = "start",
+    alignOffset = -5,
+    side = "right",
+    sideOffset = 0,
+    className,
+    ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+    return (
+        <DropdownMenuContent
+            data-slot="dropdown-menu-sub-content"
+            className={cn("w-auto", className)}
+            align={align}
+            alignOffset={alignOffset}
+            side={side}
+            sideOffset={sideOffset}
+            {...props}
+        />
+    );
+}
+
+function DropdownMenuCheckboxItem({
+    className,
+    children,
+    checked,
+    inset,
+    ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+}) {
+    return (
+        <MenuPrimitive.CheckboxItem
+            data-slot="dropdown-menu-checkbox-item"
+            data-inset={inset}
+            className={cn(menuItemVariants(), "pr-8", className)}
+            checked={checked}
+            {...props}
+        >
+            <span className={menuIndicatorClass} data-slot="dropdown-menu-checkbox-item-indicator">
+                <MenuPrimitive.CheckboxItemIndicator>
+                    <CheckIcon />
+                </MenuPrimitive.CheckboxItemIndicator>
+            </span>
+            {children}
+        </MenuPrimitive.CheckboxItem>
+    );
+}
+
+function DropdownMenuRadioGroup({...props}: MenuPrimitive.RadioGroup.Props) {
+    return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+function DropdownMenuRadioItem({
+    className,
+    children,
+    inset,
+    ...props
+}: MenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+}) {
+    return (
+        <MenuPrimitive.RadioItem
+            data-slot="dropdown-menu-radio-item"
+            data-inset={inset}
+            className={cn(menuItemVariants(), "pr-8", className)}
+            {...props}
+        >
+            <span className={menuIndicatorClass} data-slot="dropdown-menu-radio-item-indicator">
+                <MenuPrimitive.RadioItemIndicator>
+                    <CheckIcon />
+                </MenuPrimitive.RadioItemIndicator>
+            </span>
+            {children}
+        </MenuPrimitive.RadioItem>
+    );
+}
+
+function DropdownMenuSeparator({className, ...props}: MenuPrimitive.Separator.Props) {
+    return (
+        <MenuPrimitive.Separator
+            data-slot="dropdown-menu-separator"
+            className={cn(listSeparator, className)}
+            {...props}
+        />
+    );
+}
+
+function DropdownMenuShortcut({className, ...props}: React.ComponentProps<"span">) {
+    return <span data-slot="dropdown-menu-shortcut" className={cn(menuShortcutClass, className)} {...props} />;
+}
+
+export {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+    menuContentClass,
+    menuIndicatorClass,
+    menuItemVariants,
+    menuShortcutClass,
+    resolveItemVariant,
+};
+export type {MenuItemVariant};

package/src/components/empty.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import {heading} from "@repraze/kernelkit/lib/recipes";
+import {cva, type VariantProps} from "class-variance-authority";
+import {cn} from "cn";
+
+const emptyVariants = cva(
+    "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl p-6 text-center text-balance",
+    {
+        variants: {
+            variant: {
+                default: "",
+                // drop zone / placeholder region: a dashed outline marks where content will appear
+                outline: "border border-dashed border-border",
+            },
+        },
+        defaultVariants: {variant: "default"},
+    },
+);
+
+function Empty({className, variant, ...props}: React.ComponentProps<"div"> & VariantProps<typeof emptyVariants>) {
+    return (
+        <div
+            data-slot="empty"
+            data-variant={variant ?? "default"}
+            className={cn(emptyVariants({variant}), className)}
+            {...props}
+        />
+    );
+}
+
+function EmptyHeader({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="empty-header"
+            className={cn("flex max-w-sm flex-col items-center gap-1.5", className)}
+            {...props}
+        />
+    );
+}
+
+const emptyMediaVariants = cva(
+    "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    {
+        variants: {
+            variant: {
+                default: "bg-transparent",
+                icon: "size-10 rounded-lg border border-transparent bg-muted text-foreground hc:border-border [&_svg:not([class*='size-'])]:size-5",
+            },
+        },
+        defaultVariants: {variant: "default"},
+    },
+);
+
+function EmptyMedia({
+    className,
+    variant = "default",
+    ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+    return (
+        <div
+            data-slot="empty-icon"
+            data-variant={variant}
+            className={cn(emptyMediaVariants({variant}), className)}
+            {...props}
+        />
+    );
+}
+
+function EmptyTitle({className, ...props}: React.ComponentProps<"div">) {
+    return <div data-slot="empty-title" className={cn(heading, "text-sm", className)} {...props} />;
+}
+
+function EmptyDescription({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="empty-description"
+            className={cn(
+                "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-text",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function EmptyContent({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="empty-content"
+            className={cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className)}
+            {...props}
+        />
+    );
+}
+
+export {Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, emptyMediaVariants, EmptyTitle, emptyVariants};