@ciridae/ui 0.2.0

package/dist/components/ui/context-menu.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+const ContextMenuPortalContainerContext = React.createContext({
+    container: null,
+    disableModalBehavior: false,
+});
+function ContextMenuPortalContainerProvider({ children, container, disableModalBehavior = false, }) {
+    const value = React.useMemo(() => ({ container, disableModalBehavior }), [container, disableModalBehavior]);
+    return (_jsx(ContextMenuPortalContainerContext.Provider, { value: value, children: children }));
+}
+function ContextMenu({ modal, ...props }) {
+    const { disableModalBehavior } = React.useContext(ContextMenuPortalContainerContext);
+    const resolvedModal = modal ?? (disableModalBehavior ? false : undefined);
+    return _jsx(ContextMenuPrimitive.Root, { "data-slot": "context-menu", modal: resolvedModal, ...props });
+}
+function ContextMenuTrigger({ ...props }) {
+    return _jsx(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", ...props });
+}
+function ContextMenuGroup({ ...props }) {
+    return _jsx(ContextMenuPrimitive.Group, { "data-slot": "context-menu-group", ...props });
+}
+function ContextMenuPortal({ container, ...props }) {
+    const { container: contextualContainer } = React.useContext(ContextMenuPortalContainerContext);
+    return (_jsx(ContextMenuPrimitive.Portal, { container: container ?? contextualContainer ?? undefined, "data-slot": "context-menu-portal", ...props }));
+}
+function ContextMenuSub({ ...props }) {
+    return _jsx(ContextMenuPrimitive.Sub, { "data-slot": "context-menu-sub", ...props });
+}
+function ContextMenuRadioGroup({ ...props }) {
+    return _jsx(ContextMenuPrimitive.RadioGroup, { "data-slot": "context-menu-radio-group", ...props });
+}
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(ContextMenuPrimitive.SubTrigger, { "data-slot": "context-menu-sub-trigger", "data-inset": inset, className: cn("flex min-h-(--menu-item-height) cursor-default items-center rounded-sm px-(--menu-item-padding-x) py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+}
+function ContextMenuSubContent({ className, ...props }) {
+    return (_jsx(ContextMenuPrimitive.SubContent, { "data-slot": "context-menu-sub-content", className: cn("z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className), ...props }));
+}
+function ContextMenuContent({ className, ...props }) {
+    return (_jsx(ContextMenuPortal, { children: _jsx(ContextMenuPrimitive.Content, { "data-slot": "context-menu-content", className: cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className), ...props }) }));
+}
+function ContextMenuItem({ className, inset, variant = "default", ...props }) {
+    return (_jsx(ContextMenuPrimitive.Item, { "data-slot": "context-menu-item", "data-inset": inset, "data-variant": variant, className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm px-(--menu-item-padding-x) py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className), ...props }));
+}
+function ContextMenuCheckboxItem({ className, children, checked, ...props }) {
+    return (_jsxs(ContextMenuPrimitive.CheckboxItem, { "data-slot": "context-menu-checkbox-item", className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm py-1 pr-(--menu-item-padding-x) pl-8 text-sm outline-hidden select-none focus:bg-accent focus: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", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
+}
+function ContextMenuRadioItem({ className, children, ...props }) {
+    return (_jsxs(ContextMenuPrimitive.RadioItem, { "data-slot": "context-menu-radio-item", className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm py-1 pr-(--menu-item-padding-x) pl-8 text-sm outline-hidden select-none focus:bg-accent focus: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", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Label, { "data-slot": "context-menu-label", "data-inset": inset, className: cn("px-(--menu-item-padding-x) py-1 text-meta text-muted-foreground data-[inset]:pl-8", className), ...props }));
+}
+function ContextMenuSeparator({ className, ...props }) {
+    return (_jsx(ContextMenuPrimitive.Separator, { "data-slot": "context-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function ContextMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "context-menu-shortcut", className: cn("ml-auto text-meta font-mono text-muted-foreground", className), ...props }));
+}
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuPortalContainerProvider, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };

package/dist/components/ui/data-table.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type TableSkeletonProps } from "@ciridae/ui/loading-state";
+import { TableHead } from "@ciridae/ui/table";
+type SortDirection = "asc" | "desc";
+declare function DataTable({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DataTableToolbar({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DataTableContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DataTableEmpty({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DataTableSkeleton({ className, ...props }: TableSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function SortableTableHead({ active, children, className, direction, onSort, align, ...props }: React.ComponentProps<typeof TableHead> & {
+    active?: boolean;
+    align?: "left" | "right";
+    direction?: SortDirection;
+    onSort: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export { DataTable, DataTableToolbar, DataTableContent, DataTableEmpty, DataTableSkeleton, SortableTableHead, };
+export type { SortDirection };

package/dist/components/ui/data-table.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
+import { cn } from "@ciridae/ui/utils";
+import { Button } from "@ciridae/ui/button";
+import { TableSkeleton } from "@ciridae/ui/loading-state";
+import { TableHead } from "@ciridae/ui/table";
+function DataTable({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "data-table", className: cn("grid gap-(--panel-gap)", className), ...props }));
+}
+function DataTableToolbar({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "data-table-toolbar", className: cn("flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", className), ...props }));
+}
+function DataTableContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "data-table-content", className: cn("border-t border-border", className), ...props }));
+}
+function DataTableEmpty({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "data-table-empty", className: cn("flex min-h-32 items-center justify-center border-b border-border px-(--panel-padding) py-8 text-sm text-muted-foreground", className), ...props }));
+}
+function DataTableSkeleton({ className, ...props }) {
+    return (_jsx(DataTableContent, { className: "border-t-0", children: _jsx(TableSkeleton, { className: cn("rounded-none border-x-0 border-b-0", className), ...props }) }));
+}
+function SortableTableHead({ active = false, children, className, direction = "asc", onSort, align = "left", ...props }) {
+    const Icon = active ? (direction === "asc" ? ArrowUpIcon : ArrowDownIcon) : ArrowUpDownIcon;
+    return (_jsx(TableHead, { "aria-sort": active ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...props, children: _jsxs(Button, { "aria-pressed": active, className: cn("h-auto px-0 py-0 text-meta text-muted-foreground hover:bg-transparent hover:text-foreground", align === "right" ? "ml-auto justify-end" : "justify-start"), onClick: onSort, size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: children }), _jsx(Icon, {})] }) }));
+}
+export { DataTable, DataTableToolbar, DataTableContent, DataTableEmpty, DataTableSkeleton, SortableTableHead, };

package/dist/components/ui/dialog.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+declare function DialogPortalContainerProvider({ children, container, disableModalBehavior, }: {
+    children: React.ReactNode;
+    container: HTMLElement | null;
+    disableModalBehavior?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Dialog({ modal, ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ container, ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogPortalContainerProvider, DialogTitle, DialogTrigger, };

package/dist/components/ui/dialog.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+import { Button } from "@ciridae/ui/button";
+const DialogPortalContainerContext = React.createContext({
+    container: null,
+    disableModalBehavior: false,
+});
+function DialogPortalContainerProvider({ children, container, disableModalBehavior = false, }) {
+    const value = React.useMemo(() => ({ container, disableModalBehavior }), [container, disableModalBehavior]);
+    return (_jsx(DialogPortalContainerContext.Provider, { value: value, children: children }));
+}
+function Dialog({ modal, ...props }) {
+    const { disableModalBehavior } = React.useContext(DialogPortalContainerContext);
+    const resolvedModal = modal ?? (disableModalBehavior ? false : undefined);
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", modal: resolvedModal, ...props });
+}
+function DialogTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ container, ...props }) {
+    const { container: contextualContainer } = React.useContext(DialogPortalContainerContext);
+    return (_jsx(DialogPrimitive.Portal, { container: container ?? contextualContainer ?? undefined, "data-slot": "dialog-portal", ...props }));
+}
+function DialogClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 z-50 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className), ...props }));
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-(--panel-gap) rounded-lg border bg-background p-(--panel-padding) shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 sm:max-w-lg", className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-[var(--focus-ring-width)] focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className), ...props }));
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }))] }));
+}
+function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-lg leading-none font-medium", className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogPortalContainerProvider, DialogTitle, DialogTrigger, };

package/dist/components/ui/direction-context.d.ts

@@ -0,0 +1,3 @@
+import { Direction } from "radix-ui";
+declare const useDirection: typeof Direction.useDirection;
+export { useDirection };

package/dist/components/ui/direction-context.js

@@ -0,0 +1,3 @@
+import { Direction } from "radix-ui";
+const useDirection = Direction.useDirection;
+export { useDirection };

package/dist/components/ui/direction.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { Direction } from "radix-ui";
+declare function DirectionProvider({ dir, direction, children, }: React.ComponentProps<typeof Direction.DirectionProvider> & {
+    direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"];
+}): import("react/jsx-runtime").JSX.Element;
+export { DirectionProvider };

package/dist/components/ui/direction.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Direction } from "radix-ui";
+function DirectionProvider({ dir, direction, children, }) {
+    return (_jsx(Direction.DirectionProvider, { dir: direction ?? dir, children: children }));
+}
+export { DirectionProvider };

package/dist/components/ui/drawer.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+declare function DrawerPortalContainerProvider({ children, container, disableModalBehavior, }: {
+    children: React.ReactNode;
+    container: HTMLElement | null;
+    disableModalBehavior?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Drawer({ container, disablePreventScroll, modal, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerPortal({ container, ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerPortalContainerProvider, };

package/dist/components/ui/drawer.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "@ciridae/ui/utils";
+const DrawerPortalContainerContext = React.createContext({
+    container: null,
+    disableModalBehavior: false,
+});
+function DrawerPortalContainerProvider({ children, container, disableModalBehavior = false, }) {
+    const value = React.useMemo(() => ({ container, disableModalBehavior }), [container, disableModalBehavior]);
+    return (_jsx(DrawerPortalContainerContext.Provider, { value: value, children: children }));
+}
+function Drawer({ container, disablePreventScroll, modal, ...props }) {
+    const { container: contextualContainer, disableModalBehavior } = React.useContext(DrawerPortalContainerContext);
+    const resolvedModal = modal ?? (disableModalBehavior ? false : undefined);
+    const resolvedDisablePreventScroll = disablePreventScroll ?? (disableModalBehavior ? true : undefined);
+    return (_jsx(DrawerPrimitive.Root, { container: container ?? contextualContainer ?? undefined, "data-slot": "drawer", disablePreventScroll: resolvedDisablePreventScroll, modal: resolvedModal, ...props }));
+}
+function DrawerTrigger({ ...props }) {
+    return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ container, ...props }) {
+    const { container: contextualContainer } = React.useContext(DrawerPortalContainerContext);
+    return (_jsx(DrawerPrimitive.Portal, { container: container ?? contextualContainer ?? undefined, "data-slot": "drawer-portal", ...props }));
+}
+function DrawerClose({ ...props }) {
+    return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Overlay, { "data-slot": "drawer-overlay", className: cn("fixed inset-0 z-50 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className), ...props }));
+}
+function DrawerContent({ className, children, ...props }) {
+    return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-background", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm", className), ...props, children: [_jsx("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children] })] }));
+}
+function DrawerHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-header", className: cn("flex flex-col gap-0.5 p-(--panel-padding) group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left", className), ...props }));
+}
+function DrawerFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex flex-col gap-2 p-(--panel-padding)", className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn("font-medium text-foreground", className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerPortalContainerProvider, };

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+declare function DropdownMenuPortalContainerProvider({ children, container, disableModalBehavior, }: {
+    children: React.ReactNode;
+    container: HTMLElement | null;
+    disableModalBehavior?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenu({ modal, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ container, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuPortalContainerProvider, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+const DropdownMenuPortalContainerContext = React.createContext({
+    container: null,
+    disableModalBehavior: false,
+});
+function DropdownMenuPortalContainerProvider({ children, container, disableModalBehavior = false, }) {
+    const value = React.useMemo(() => ({ container, disableModalBehavior }), [container, disableModalBehavior]);
+    return (_jsx(DropdownMenuPortalContainerContext.Provider, { value: value, children: children }));
+}
+function DropdownMenu({ modal, ...props }) {
+    const { disableModalBehavior } = React.useContext(DropdownMenuPortalContainerContext);
+    const resolvedModal = modal ?? (disableModalBehavior ? false : undefined);
+    return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", modal: resolvedModal, ...props });
+}
+function DropdownMenuPortal({ container, ...props }) {
+    const { container: contextualContainer } = React.useContext(DropdownMenuPortalContainerContext);
+    return (_jsx(DropdownMenuPrimitive.Portal, { container: container ?? contextualContainer ?? undefined, "data-slot": "dropdown-menu-portal", ...props }));
+}
+function DropdownMenuTrigger({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+    return (_jsx(DropdownMenuPortal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className), ...props }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm px-(--menu-item-padding-x) py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className), ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm py-1 pr-(--menu-item-padding-x) pl-8 text-sm outline-hidden select-none focus:bg-accent focus: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", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm py-1 pr-(--menu-item-padding-x) pl-8 text-sm outline-hidden select-none focus:bg-accent focus: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", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-(--menu-item-padding-x) py-1 text-meta text-muted-foreground data-[inset]:pl-8", className), ...props }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-meta font-mono text-muted-foreground", className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm px-(--menu-item-padding-x) py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto size-4" })] }));
+}
+function DropdownMenuSubContent({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn("z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuPortalContainerProvider, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/ui/empty.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "class-variance-authority";
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react/jsx-runtime").JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };

package/dist/components/ui/empty.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "@ciridae/ui/utils";
+function Empty({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty", className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-(--panel-gap) rounded-lg border-dashed p-(--panel-padding) text-center text-balance md:p-8", className), ...props }));
+}
+function EmptyHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm flex-col items-center gap-2 text-center", 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: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+    return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn(emptyMediaVariants({ variant, className })), ...props }));
+}
+function EmptyTitle({ className, ...props }) {
+    return _jsx("div", { "data-slot": "empty-title", className: cn("text-lg font-medium", className), ...props });
+}
+function EmptyDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-description", className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+}
+function EmptyContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-content", className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className), ...props }));
+}
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };

package/dist/components/ui/expandable-data-table.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { DataTable } from "@ciridae/ui/data-table";
+type ExpandableDataTableColumn<TRow> = {
+    id: string;
+    header: React.ReactNode;
+    cell: (row: TRow) => React.ReactNode;
+    align?: "left" | "right";
+    className?: string;
+    headerClassName?: string;
+};
+type ExpandableDataTableProps<TRow> = Omit<React.ComponentProps<typeof DataTable>, "children"> & {
+    rows: TRow[];
+    columns: ExpandableDataTableColumn<TRow>[];
+    getRowId: (row: TRow) => string;
+    getRowLabel: (row: TRow) => string;
+    renderExpandedRow: (row: TRow) => React.ReactNode;
+    defaultExpandedRowId?: string | null;
+    expandedRowId?: string | null;
+    onExpandedRowIdChange?: (rowId: string | null) => void;
+    empty?: React.ReactNode;
+};
+declare function ExpandableDataTable<TRow>({ rows, columns, getRowId, getRowLabel, renderExpandedRow, defaultExpandedRowId, expandedRowId, onExpandedRowIdChange, empty, className, ...props }: ExpandableDataTableProps<TRow>): import("react/jsx-runtime").JSX.Element;
+export { ExpandableDataTable };
+export type { ExpandableDataTableColumn, ExpandableDataTableProps };

package/dist/components/ui/expandable-data-table.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronRightIcon } from "lucide-react";
+import { cn } from "@ciridae/ui/utils";
+import { Button } from "@ciridae/ui/button";
+import { DataTable, DataTableContent, DataTableEmpty } from "@ciridae/ui/data-table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@ciridae/ui/table";
+function ExpandableDataTable({ rows, columns, getRowId, getRowLabel, renderExpandedRow, defaultExpandedRowId = null, expandedRowId, onExpandedRowIdChange, empty = "No rows found.", className, ...props }) {
+    const tableId = React.useId();
+    const [uncontrolledExpandedRowId, setUncontrolledExpandedRowId] = React.useState(defaultExpandedRowId);
+    const isControlled = expandedRowId !== undefined;
+    const activeExpandedRowId = isControlled ? expandedRowId : uncontrolledExpandedRowId;
+    const setExpandedRowId = React.useCallback((nextRowId) => {
+        if (!isControlled) {
+            setUncontrolledExpandedRowId(nextRowId);
+        }
+        onExpandedRowIdChange?.(nextRowId);
+    }, [isControlled, onExpandedRowIdChange]);
+    const toggleRow = React.useCallback((rowId) => {
+        setExpandedRowId(activeExpandedRowId === rowId ? null : rowId);
+    }, [activeExpandedRowId, setExpandedRowId]);
+    if (!rows.length) {
+        return (_jsx(DataTable, { className: className, ...props, children: _jsx(DataTableContent, { children: _jsx(DataTableEmpty, { children: empty }) }) }));
+    }
+    return (_jsx(DataTable, { className: className, ...props, children: _jsx(DataTableContent, { children: _jsx(ExpandableDataTableContent, { activeExpandedRowId: activeExpandedRowId, columns: columns, getRowId: getRowId, getRowLabel: getRowLabel, renderExpandedRow: renderExpandedRow, rows: rows, tableId: tableId, toggleRow: toggleRow }) }) }));
+}
+function ExpandableDataTableContent({ rows, columns, getRowId, getRowLabel, renderExpandedRow, tableId, activeExpandedRowId, toggleRow, }) {
+    return (_jsxs(Table, { children: [_jsx(ExpandableDataTableHeader, { columns: columns }), _jsx(TableBody, { children: rows.map((row) => (_jsx(ExpandableDataTableRow, { activeExpandedRowId: activeExpandedRowId, columns: columns, getRowId: getRowId, getRowLabel: getRowLabel, renderExpandedRow: renderExpandedRow, row: row, tableId: tableId, toggleRow: toggleRow }, getRowId(row)))) })] }));
+}
+function ExpandableDataTableHeader({ columns, }) {
+    return (_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-10", children: _jsx("span", { className: "sr-only", children: "Expand row" }) }), columns.map((column) => (_jsx(TableHead, { className: cn(column.align === "right" && "text-right", column.headerClassName), children: column.header }, column.id)))] }) }));
+}
+function ExpandableDataTableRow({ row, columns, getRowId, getRowLabel, renderExpandedRow, tableId, activeExpandedRowId, toggleRow, }) {
+    const rowId = getRowId(row);
+    const rowLabel = getRowLabel(row);
+    const isExpanded = activeExpandedRowId === rowId;
+    const detailsId = `${tableId}-${rowId}-details`;
+    return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { "aria-controls": detailsId, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${rowLabel}`, className: "cursor-pointer outline-none focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", onClick: (event) => toggleRowFromEvent(event, rowId, toggleRow), onKeyDown: (event) => toggleRowFromKeyboardEvent(event, rowId, toggleRow), tabIndex: 0, children: [_jsx(TableCell, { children: _jsx(Button, { "aria-controls": detailsId, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${rowLabel}`, className: "size-7", onClick: (event) => {
+                                event.stopPropagation();
+                                toggleRow(rowId);
+                            }, size: "icon", type: "button", variant: "ghost", children: _jsx(ChevronRightIcon, { className: cn("transition-transform duration-150", isExpanded && "rotate-90") }) }) }), columns.map((column) => (_jsx(TableCell, { className: cn(column.align === "right" && "text-right", column.className), children: column.cell(row) }, column.id)))] }), isExpanded ? (_jsx(TableRow, { id: detailsId, children: _jsx(TableCell, { className: "bg-muted/30 px-(--panel-padding) py-4 whitespace-normal", colSpan: columns.length + 1, children: renderExpandedRow(row) }) })) : null] }));
+}
+function toggleRowFromEvent(event, rowId, toggleRow) {
+    if (isInteractiveTarget(event.target))
+        return;
+    toggleRow(rowId);
+}
+function toggleRowFromKeyboardEvent(event, rowId, toggleRow) {
+    if (event.key !== "Enter" && event.key !== " ")
+        return;
+    if (isInteractiveTarget(event.target))
+        return;
+    event.preventDefault();
+    toggleRow(rowId);
+}
+function isInteractiveTarget(target) {
+    if (!(target instanceof Element))
+        return false;
+    return Boolean(target.closest('a,button,input,select,textarea,[role="menuitem"],[data-row-interactive]'));
+}
+export { ExpandableDataTable };

package/dist/components/ui/field.d.ts

@@ -0,0 +1,26 @@
+import { type VariantProps } from "class-variance-authority";
+import { Label } from "@ciridae/ui/label";
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react/jsx-runtime").JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react/jsx-runtime").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FieldLabel({ children, className, required, ...props }: React.ComponentProps<typeof Label> & {
+    required?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): import("react/jsx-runtime").JSX.Element | null;
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };