@ciridae/ui 0.2.0

package/dist/components/ui/radio-group.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircleIcon } from "lucide-react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+function RadioGroup({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn("grid gap-3", className), ...props }));
+}
+function RadioGroupItem({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn("aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx(CircleIcon, { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" }) }) }));
+}
+export { RadioGroup, RadioGroupItem };

package/dist/components/ui/registry-docs-api.d.ts

@@ -0,0 +1,11 @@
+type RegistryDocsApiProp = {
+    defaultValue?: string;
+    description: string;
+    name: string;
+    type: string;
+};
+declare function RegistryDocsApiTable({ props }: {
+    props: RegistryDocsApiProp[];
+}): import("react/jsx-runtime").JSX.Element;
+export { RegistryDocsApiTable };
+export type { RegistryDocsApiProp };

package/dist/components/ui/registry-docs-api.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@ciridae/ui/table";
+function RegistryDocsApiTable({ props }) {
+    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Prop" }), _jsx(TableHead, { children: "Type" }), _jsx(TableHead, { children: "Default" }), _jsx(TableHead, { children: "Description" })] }) }), _jsx(TableBody, { children: props.map((prop) => (_jsx(RegistryDocsApiTableRow, { prop: prop }, prop.name))) })] }));
+}
+function RegistryDocsApiTableRow({ prop }) {
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("code", { className: "font-mono text-xs", children: prop.name }) }), _jsx(TableCell, { className: "max-w-72", children: _jsx("code", { className: "font-mono text-xs text-muted-foreground whitespace-normal", children: prop.type }) }), _jsx(TableCell, { children: prop.defaultValue ? (_jsx("code", { className: "font-mono text-xs text-muted-foreground", children: prop.defaultValue })) : (_jsx("span", { className: "text-muted-foreground", children: "None" })) }), _jsx(TableCell, { className: "whitespace-normal text-muted-foreground", children: prop.description })] }));
+}
+export { RegistryDocsApiTable };

package/dist/components/ui/registry-docs-code.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+type RegistryDocsCodeBlockProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+    children?: React.ReactNode;
+    code?: string;
+    label?: string;
+    language?: string;
+};
+declare function RegistryDocsCodeBlock({ children, className, code, label, language, ...props }: RegistryDocsCodeBlockProps): import("react/jsx-runtime").JSX.Element;
+declare function RegistryDocsCodeSnippet({ children, className, code, language, ...props }: RegistryDocsCodeBlockProps): import("react/jsx-runtime").JSX.Element;
+declare function RegistryDocsCommand({ className, label, value, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+    label?: string;
+    value: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function RegistryDocsCopyButton({ ariaLabel, showLabel, value, }: {
+    ariaLabel: string;
+    showLabel?: boolean;
+    value: string;
+}): import("react/jsx-runtime").JSX.Element;
+export { RegistryDocsCodeBlock, RegistryDocsCodeSnippet, RegistryDocsCommand, RegistryDocsCopyButton, };

package/dist/components/ui/registry-docs-code.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { codeToHtml } from "shiki/bundle/web";
+import { Button } from "@ciridae/ui/button";
+import { cn } from "@ciridae/ui/utils";
+function RegistryDocsCodeBlock({ children, className, code, label, language = "tsx", ...props }) {
+    return (_jsx(RegistryDocsCodeFrame, { code: code, label: label, children: _jsx(RegistryDocsCodeSnippet, { className: className, code: code, language: language, ...props, children: children }) }));
+}
+function RegistryDocsCodeSnippet({ children, className, code, language = "tsx", ...props }) {
+    const highlightedHtml = useHighlightedCode(code, language);
+    const hasCode = typeof code === "string";
+    if (hasCode && highlightedHtml) {
+        return _jsx(HighlightedCodeBlock, { className: className, html: highlightedHtml, ...props });
+    }
+    return (_jsx("pre", { "data-slot": "registry-docs-code-block", className: cn("overflow-x-auto p-(--panel-padding) font-mono text-xs leading-relaxed text-foreground", className), ...props, children: hasCode ? _jsx("code", { children: code }) : children }));
+}
+function useHighlightedCode(code, language) {
+    const [highlightedHtml, setHighlightedHtml] = React.useState();
+    const hasCode = typeof code === "string";
+    React.useEffect(() => {
+        if (!hasCode) {
+            setHighlightedHtml(undefined);
+            return;
+        }
+        let active = true;
+        setHighlightedHtml(undefined);
+        codeToHtml(code, {
+            defaultColor: false,
+            lang: language,
+            themes: { dark: "github-dark", light: "github-light" },
+        })
+            .then((html) => {
+            if (active)
+                setHighlightedHtml(html);
+        })
+            .catch(() => {
+            if (active)
+                setHighlightedHtml(undefined);
+        });
+        return () => {
+            active = false;
+        };
+    }, [code, hasCode, language]);
+    return highlightedHtml;
+}
+function HighlightedCodeBlock({ className, html, ...props }) {
+    return (_jsx("div", { "data-slot": "registry-docs-code-block", className: cn("overflow-hidden p-(--panel-padding) font-mono text-xs leading-relaxed text-foreground", "[&_.shiki]:m-0 [&_.shiki]:overflow-x-auto [&_.shiki]:p-0 [&_.shiki]:font-mono [&_.shiki]:text-xs [&_.shiki]:leading-relaxed", className), dangerouslySetInnerHTML: { __html: html }, ...props }));
+}
+function RegistryDocsCodeFrame({ children, code, label, }) {
+    return (_jsxs("div", { "data-slot": "registry-docs-code-frame", className: "overflow-hidden rounded-lg border bg-muted/30", children: [label || code ? _jsx(RegistryDocsCodeHeader, { code: code, label: label }) : null, children] }));
+}
+function RegistryDocsCodeHeader({ code, label }) {
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-2 border-b bg-muted/20 px-3 py-2", children: [label ? (_jsx("div", { className: "min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground", children: label })) : (_jsx("div", { className: "min-w-0 flex-1" })), code ? _jsx(RegistryDocsCopyButton, { ariaLabel: "Copy code", value: code }) : null] }));
+}
+function RegistryDocsCommand({ className, label = "Command", value, ...props }) {
+    return (_jsxs("div", { "data-slot": "registry-docs-command", className: cn("grid gap-2", className), ...props, children: [_jsx("div", { className: "text-meta text-muted-foreground", children: label }), _jsxs("div", { className: "flex min-w-0 items-center gap-2 rounded-lg border bg-muted/30 px-3 py-2", children: [_jsx("code", { className: "min-w-0 flex-1 truncate font-mono text-xs text-foreground", children: value }), _jsx(RegistryDocsCopyButton, { ariaLabel: "Copy command", value: value })] })] }));
+}
+function RegistryDocsCopyButton({ ariaLabel, showLabel = true, value, }) {
+    const [copied, setCopied] = React.useState(false);
+    React.useEffect(() => {
+        if (!copied)
+            return;
+        const timeout = window.setTimeout(() => setCopied(false), 1400);
+        return () => window.clearTimeout(timeout);
+    }, [copied]);
+    const copyValue = async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+        }
+        catch {
+            setCopied(false);
+        }
+    };
+    return (_jsxs(Button, { "aria-label": copied ? "Copied" : ariaLabel, className: cn("shrink-0", showLabel ? "" : "size-8 p-0"), onClick: copyValue, size: "sm", type: "button", variant: "ghost", children: [copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}), showLabel ? (copied ? "Copied" : "Copy") : null] }));
+}
+export { RegistryDocsCodeBlock, RegistryDocsCodeSnippet, RegistryDocsCommand, RegistryDocsCopyButton, };

package/dist/components/ui/registry-docs-showcase.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+type RegistryDocsShowcaseProps = Omit<React.ComponentProps<"div">, "children"> & {
+    code: string;
+    codeLabel?: string;
+    defaultExpanded?: boolean;
+    preview: React.ReactNode;
+    previewMode?: "default" | "page" | "canvas";
+};
+declare function RegistryDocsShowcase({ className, code, codeLabel, defaultExpanded, preview, previewMode, ...props }: RegistryDocsShowcaseProps): import("react/jsx-runtime").JSX.Element;
+export { RegistryDocsShowcase };
+export type { RegistryDocsShowcaseProps };

package/dist/components/ui/registry-docs-showcase.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CodeXmlIcon } from "lucide-react";
+import { Button } from "@ciridae/ui/button";
+import { RegistryDocsCodeSnippet, RegistryDocsCopyButton } from "./registry-docs-code";
+import { cn } from "@ciridae/ui/utils";
+function RegistryDocsShowcase({ className, code, codeLabel = "preview.tsx", defaultExpanded = false, preview, previewMode = "default", ...props }) {
+    const [expanded, setExpanded] = React.useState(defaultExpanded);
+    const codeId = React.useId();
+    return (_jsxs("div", { "data-slot": "registry-docs-showcase", className: cn("min-w-0 overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs", className), ...props, children: [_jsx(RegistryDocsShowcasePreview, { previewMode: previewMode, children: preview }), _jsx(RegistryDocsShowcaseCode, { code: code, codeId: codeId, codeLabel: codeLabel, expanded: expanded, onExpandedChange: setExpanded })] }));
+}
+function RegistryDocsShowcasePreview({ children, previewMode, }) {
+    return (_jsx("div", { "data-slot": "registry-docs-showcase-preview", "data-preview-mode": previewMode, className: "flex min-h-[28rem] items-center justify-center overflow-auto bg-background p-(--panel-padding) data-[preview-mode=canvas]:min-h-[34rem] data-[preview-mode=canvas]:items-stretch data-[preview-mode=canvas]:justify-stretch data-[preview-mode=canvas]:p-2 data-[preview-mode=page]:min-h-[36rem] data-[preview-mode=page]:items-start data-[preview-mode=page]:p-0 md:data-[preview-mode=canvas]:min-h-[42rem] md:data-[preview-mode=canvas]:p-3", children: _jsx("div", { className: "flex min-w-0 w-full items-center justify-center data-[preview-mode=canvas]:min-h-full data-[preview-mode=canvas]:items-stretch data-[preview-mode=canvas]:justify-stretch data-[preview-mode=page]:min-h-full data-[preview-mode=page]:items-stretch", "data-preview-mode": previewMode, children: children }) }));
+}
+function RegistryDocsShowcaseCode({ code, codeId, codeLabel, expanded, onExpandedChange, }) {
+    return (_jsxs("div", { "data-slot": "registry-docs-showcase-code", className: "relative border-t bg-muted/20", children: [_jsx(RegistryDocsShowcaseToggle, { codeId: codeId, expanded: expanded, onExpandedChange: onExpandedChange }), _jsxs("div", { id: codeId, "aria-label": codeLabel, className: cn("relative", expanded ? "max-h-[42rem] overflow-auto" : "max-h-44 overflow-hidden"), children: [_jsxs("div", { className: "mx-auto w-full max-w-5xl", children: [expanded ? _jsx(RegistryDocsShowcaseCopyButton, { code: code }) : null, _jsx(RegistryDocsCodeSnippet, { code: code, className: cn("text-sm [&_.shiki]:text-sm", expanded ? "px-6 pt-8 pb-8 md:px-8" : "p-7 pb-16 opacity-80") })] }), expanded ? null : _jsx(RegistryDocsShowcaseFade, {})] })] }));
+}
+function RegistryDocsShowcaseCopyButton({ code }) {
+    return (_jsx("div", { className: "sticky top-4 z-10 flex h-0 justify-end pr-4", children: _jsx(RegistryDocsCopyButton, { ariaLabel: "Copy preview code", showLabel: false, value: code }) }));
+}
+function RegistryDocsShowcaseFade() {
+    return (_jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-28 bg-linear-to-b from-card/0 via-card/90 to-card", "data-slot": "registry-docs-showcase-fade" }));
+}
+function RegistryDocsShowcaseToggle({ codeId, expanded, onExpandedChange, }) {
+    return (_jsxs(Button, { "aria-controls": codeId, "aria-expanded": expanded, className: "absolute top-0 left-1/2 z-20 -translate-x-1/2 -translate-y-1/2 shadow-xs", onClick: () => onExpandedChange(!expanded), size: "sm", type: "button", variant: expanded ? "outline" : "default", children: [_jsx(CodeXmlIcon, {}), expanded ? "Hide code" : "View code"] }));
+}
+export { RegistryDocsShowcase };

package/dist/components/ui/registry-docs.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Card, type CardVariant } from "@ciridae/ui/card";
+import { RegistryDocsApiTable, type RegistryDocsApiProp } from "./registry-docs-api";
+import { RegistryDocsCodeBlock, RegistryDocsCommand } from "./registry-docs-code";
+import { RegistryDocsShowcase } from "./registry-docs-showcase";
+type RegistryDocsPreviewSize = "compact" | "default" | "detail";
+type RegistryDocsMetadataItem = {
+    label: string;
+    value: React.ReactNode;
+};
+declare function RegistryDocsPage({ className, ...props }: React.ComponentProps<"main">): import("react/jsx-runtime").JSX.Element;
+declare function RegistryDocsBody({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function RegistryDocsGrid({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function RegistryDocsSection({ children, className, description, title, variant, ...props }: Omit<React.ComponentProps<typeof Card>, "variant"> & {
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+    variant?: CardVariant;
+}): import("react/jsx-runtime").JSX.Element;
+declare function RegistryDocsRail({ className, ...props }: React.ComponentProps<"aside">): import("react/jsx-runtime").JSX.Element;
+declare function RegistryDocsPreview({ className, size, ...props }: React.ComponentProps<"div"> & {
+    size?: RegistryDocsPreviewSize;
+}): import("react/jsx-runtime").JSX.Element;
+declare function RegistryDocsMetadata({ items }: {
+    items: RegistryDocsMetadataItem[];
+}): import("react/jsx-runtime").JSX.Element;
+export { RegistryDocsApiTable, RegistryDocsBody, RegistryDocsCodeBlock, RegistryDocsCommand, RegistryDocsGrid, RegistryDocsMetadata, RegistryDocsPage, RegistryDocsPreview, RegistryDocsRail, RegistryDocsSection, RegistryDocsShowcase, };
+export type { RegistryDocsApiProp, RegistryDocsMetadataItem };

package/dist/components/ui/registry-docs.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader } from "@ciridae/ui/card";
+import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "@ciridae/ui/property-list";
+import { RegistryDocsApiTable } from "./registry-docs-api";
+import { RegistryDocsCodeBlock, RegistryDocsCommand } from "./registry-docs-code";
+import { RegistryDocsShowcase } from "./registry-docs-showcase";
+import { cn } from "@ciridae/ui/utils";
+function RegistryDocsPage({ className, ...props }) {
+    return (_jsx("main", { "data-slot": "registry-docs-page", className: cn("min-h-svh bg-background text-foreground", className), ...props }));
+}
+function RegistryDocsBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "registry-docs-body", className: cn("flex flex-col gap-4 px-4 py-4 md:px-6 lg:px-8", className), ...props }));
+}
+function RegistryDocsGrid({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "registry-docs-grid", className: cn("grid gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4", className), ...props }));
+}
+function RegistryDocsSection({ children, className, description, title, variant = "surface", ...props }) {
+    return (_jsxs(Card, { "data-slot": "registry-docs-section", className: cn("min-w-0", className), variant: variant, ...props, children: [title || description ? (_jsx(CardHeader, { children: _jsx(RegistryDocsSectionHeader, { description: description, title: title }) })) : null, _jsx(CardContent, { children: children })] }));
+}
+function RegistryDocsSectionHeader({ description, title, }) {
+    return (_jsxs("div", { className: "grid gap-1", children: [title ? _jsx("h2", { className: "leading-none font-medium", children: title }) : null, description ? _jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null] }));
+}
+function RegistryDocsRail({ className, ...props }) {
+    return (_jsx("aside", { "data-slot": "registry-docs-rail", className: cn("grid content-start gap-3 xl:sticky xl:top-4", className), ...props }));
+}
+function RegistryDocsPreview({ className, size = "default", ...props }) {
+    return (_jsx("div", { "data-slot": "registry-docs-preview", "data-size": size, className: cn("flex items-center justify-center rounded-lg border bg-muted/20 p-(--panel-padding)", "data-[size=compact]:min-h-28 data-[size=compact]:p-4", "data-[size=default]:min-h-40", "data-[size=detail]:min-h-72", className), ...props }));
+}
+function RegistryDocsMetadata({ items }) {
+    return (_jsx(PropertyList, { children: items.map((item) => (_jsxs(PropertyListItem, { children: [_jsx(PropertyListLabel, { children: item.label }), _jsx(PropertyListValue, { children: item.value })] }, item.label))) }));
+}
+export { RegistryDocsApiTable, RegistryDocsBody, RegistryDocsCodeBlock, RegistryDocsCommand, RegistryDocsGrid, RegistryDocsMetadata, RegistryDocsPage, RegistryDocsPreview, RegistryDocsRail, RegistryDocsSection, RegistryDocsShowcase, };

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

@@ -0,0 +1,7 @@
+import * as ResizablePrimitive from "react-resizable-panels";
+declare function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps): import("react/jsx-runtime").JSX.Element;
+declare function ResizableHandle({ withHandle, className, ...props }: ResizablePrimitive.SeparatorProps & {
+    withHandle?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/components/ui/resizable.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GripVerticalIcon } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { cn } from "@ciridae/ui/utils";
+function ResizablePanelGroup({ className, ...props }) {
+    return (_jsx(ResizablePrimitive.Group, { "data-slot": "resizable-panel-group", className: cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className), ...props }));
+}
+function ResizablePanel({ ...props }) {
+    return _jsx(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+}
+function ResizableHandle({ withHandle, className, ...props }) {
+    return (_jsx(ResizablePrimitive.Separator, { "data-slot": "resizable-handle", className: cn("relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90", className), ...props, children: withHandle && (_jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border", children: _jsx(GripVerticalIcon, { className: "size-2.5" }) })) }));
+}
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/components/ui/scroll-area.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+declare function ScrollArea({ className, children, scrollbars, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+    scrollbars?: "both" | "horizontal" | "none" | "vertical";
+}): import("react/jsx-runtime").JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
+export { ScrollArea, ScrollBar };

package/dist/components/ui/scroll-area.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+function ScrollArea({ className, children, scrollbars = "vertical", ...props }) {
+    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 focus-visible:outline-1", children: children }), scrollbars === "vertical" || scrollbars === "both" ? _jsx(ScrollBar, {}) : null, scrollbars === "horizontal" || scrollbars === "both" ? (_jsx(ScrollBar, { orientation: "horizontal" })) : null, scrollbars === "both" ? _jsx(ScrollAreaPrimitive.Corner, {}) : null] }));
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+    return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full bg-border" }) }));
+}
+export { ScrollArea, ScrollBar };

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/ui/select.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+function Select({ ...props }) {
+    return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({ ...props }) {
+    return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-(--control-gap) rounded-md border border-input bg-transparent px-(--control-padding-x) py-1 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-(--control-height) data-[size=sm]:h-(--control-height-sm) *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-(--control-gap) dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_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(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
+}
+function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover 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", position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+                        "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-(--menu-item-padding-x) py-1 text-meta text-muted-foreground", className), ...props }));
+}
+function SelectItem({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex min-h-(--menu-item-height) w-full cursor-default items-center gap-(--control-gap) rounded-sm py-1 pr-8 pl-(--menu-item-padding-x) 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 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-(--control-gap)", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function SelectScrollUpButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUpIcon, { className: "size-4" }) }));
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDownIcon, { className: "size-4" }) }));
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Separator };

package/dist/components/ui/separator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className), ...props }));
+}
+export { Separator };

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+declare function SheetPortalContainerProvider({ children, container, disableModalBehavior, }: {
+    children: React.ReactNode;
+    container: HTMLElement | null;
+    disableModalBehavior?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Sheet({ modal, ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, size, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+    size?: "sm" | "md" | "lg";
+    side?: "top" | "right" | "bottom" | "left";
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SheetBody({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetBody, SheetFooter, SheetTitle, SheetDescription, SheetPortalContainerProvider, };

package/dist/components/ui/sheet.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+const SheetPortalContainerContext = React.createContext({
+    container: null,
+    disableModalBehavior: false,
+});
+function SheetPortalContainerProvider({ children, container, disableModalBehavior = false, }) {
+    const value = React.useMemo(() => ({ container, disableModalBehavior }), [container, disableModalBehavior]);
+    return (_jsx(SheetPortalContainerContext.Provider, { value: value, children: children }));
+}
+function Sheet({ modal, ...props }) {
+    const { disableModalBehavior } = React.useContext(SheetPortalContainerContext);
+    const resolvedModal = modal ?? (disableModalBehavior ? false : undefined);
+    return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", modal: resolvedModal, ...props });
+}
+function SheetTrigger({ ...props }) {
+    return _jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+    return _jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ container, ...props }) {
+    const { container: contextualContainer } = React.useContext(SheetPortalContainerContext);
+    return (_jsx(SheetPrimitive.Portal, { container: container ?? contextualContainer ?? undefined, "data-slot": "sheet-portal", ...props }));
+}
+function SheetOverlay({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Overlay, { "data-slot": "sheet-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 SheetContent({ className, children, side = "right", showCloseButton = true, size = "sm", ...props }) {
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", className: cn("@container/sheet fixed z-50 flex flex-col overflow-hidden bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500", side === "right" &&
+                    cn("inset-y-0 right-0 h-full w-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:w-3/4", getSheetSideSizeClass(size)), side === "left" &&
+                    cn("inset-y-0 left-0 h-full w-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:w-3/4", getSheetSideSizeClass(size)), side === "top" &&
+                    "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", side === "bottom" &&
+                    "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.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-secondary", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function SheetHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-(--panel-padding)", className), ...props }));
+}
+function SheetBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-body", className: cn("min-h-0 flex-1 overflow-y-auto px-(--panel-padding)", className), ...props }));
+}
+function SheetFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col-reverse gap-2 border-t bg-background p-(--panel-padding)", "@md/sheet:flex-row @md/sheet:justify-end", "[&_[data-slot=button]]:w-full @md/sheet:[&_[data-slot=button]]:w-auto", className), ...props }));
+}
+function SheetTitle({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn("font-medium text-foreground", className), ...props }));
+}
+function SheetDescription({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function getSheetSideSizeClass(size) {
+    if (size === "lg")
+        return "sm:max-w-2xl";
+    if (size === "md")
+        return "sm:max-w-xl";
+    return "sm:max-w-sm";
+}
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetBody, SheetFooter, SheetTitle, SheetDescription, SheetPortalContainerProvider, };

package/dist/components/ui/sidebar/context.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export declare const SIDEBAR_COOKIE_MAX_AGE: number;
+export declare const SIDEBAR_WIDTH = "14rem";
+export declare const SIDEBAR_WIDTH_MOBILE = "18rem";
+export declare const SIDEBAR_WIDTH_ICON = "3rem";
+export declare const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+export type SidebarContextProps = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+export type SidebarProviderStyle = React.CSSProperties & Record<"--sidebar-width" | "--sidebar-width-icon", string>;
+export type SidebarMobileStyle = React.CSSProperties & Record<"--sidebar-width", string>;
+export type SidebarSkeletonStyle = React.CSSProperties & Record<"--skeleton-width", string>;
+export declare const SidebarContext: React.Context<SidebarContextProps | null>;
+export declare function useSidebar(): SidebarContextProps;

package/dist/components/ui/sidebar/context.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+export const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "14rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+export const SidebarContext = React.createContext(null);
+export function useSidebar() {
+    const context = React.useContext(SidebarContext);
+    if (!context) {
+        throw new Error("useSidebar must be used within a SidebarProvider.");
+    }
+    return context;
+}

package/dist/components/ui/sidebar/group.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel };

package/dist/components/ui/sidebar/group.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+function SidebarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col gap-(--sidebar-group-gap) p-(--sidebar-group-padding)", className), ...props }));
+}
+function SidebarGroupLabel({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "div";
+    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn("flex h-(--sidebar-item-height-sm) shrink-0 items-center rounded-[var(--sidebar-item-radius)] px-(--sidebar-item-padding-x) text-meta text-sidebar-foreground/45 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-[var(--focus-ring-width)] [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className), ...props }));
+}
+function SidebarGroupAction({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "button";
+    return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn("absolute top-(--sidebar-group-padding) right-(--sidebar-group-padding) flex size-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--sidebar-item-radius)] p-0 text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] after:absolute after:-inset-2 md:after:hidden [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0", "group-data-[collapsible=icon]:hidden", className), ...props }));
+}
+function SidebarGroupContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props }));
+}
+export { SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel };

package/dist/components/ui/sidebar/layout.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Input } from "@ciridae/ui/input";
+import { Separator } from "@ciridae/ui/separator";
+type SidebarProps = React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+    expandOnCollapsedBlankClick?: boolean;
+};
+declare function Sidebar({ side, variant, collapsible, expandOnCollapsedBlankClick, className, children, onClick, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInput, SidebarInset, SidebarSeparator, };