@ciridae/ui 0.2.0

package/dist/components/ui/carousel.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { cn } from "@ciridae/ui/utils";
+import { Button } from "@ciridae/ui/button";
+const CarouselContext = React.createContext(null);
+function useCarousel() {
+    const context = React.useContext(CarouselContext);
+    if (!context) {
+        throw new Error("useCarousel must be used within a <Carousel />");
+    }
+    return context;
+}
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+    const [carouselRef, api] = useEmblaCarousel({
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+    }, plugins);
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const onSelect = React.useCallback((api) => {
+        if (!api)
+            return;
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+    }, []);
+    const scrollPrev = React.useCallback(() => {
+        api?.scrollPrev();
+    }, [api]);
+    const scrollNext = React.useCallback(() => {
+        api?.scrollNext();
+    }, [api]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            scrollPrev();
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            scrollNext();
+        }
+    }, [scrollPrev, scrollNext]);
+    React.useEffect(() => {
+        if (!api || !setApi)
+            return;
+        setApi(api);
+    }, [api, setApi]);
+    React.useEffect(() => {
+        if (!api)
+            return;
+        onSelect(api);
+        api.on("reInit", onSelect);
+        api.on("select", onSelect);
+        return () => {
+            api?.off("select", onSelect);
+        };
+    }, [api, onSelect]);
+    const contextValue = useCarouselContextValue({
+        api,
+        canScrollNext,
+        canScrollPrev,
+        carouselRef,
+        opts,
+        orientation,
+        scrollNext,
+        scrollPrev,
+    });
+    return (_jsx(CarouselContext.Provider, { value: contextValue, children: _jsx("div", { onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", ...props, children: children }) }));
+}
+function useCarouselContextValue({ api, canScrollNext, canScrollPrev, carouselRef, opts, orientation, scrollNext, scrollPrev, }) {
+    return React.useMemo(() => ({
+        carouselRef,
+        api,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+    }), [api, canScrollNext, canScrollPrev, carouselRef, opts, orientation, scrollNext, scrollPrev]);
+}
+function CarouselContent({ className, ...props }) {
+    const { carouselRef, orientation } = useCarousel();
+    return (_jsx("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-content", children: _jsx("div", { className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className), ...props }) }));
+}
+function CarouselItem({ className, ...props }) {
+    const { orientation } = useCarousel();
+    return (_jsx("div", { role: "group", "aria-roledescription": "slide", "data-slot": "carousel-item", className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className), ...props }));
+}
+function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }) {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+    return (_jsxs(Button, { "data-slot": "carousel-previous", variant: variant, size: size, className: cn("absolute size-8 rounded-full", orientation === "horizontal"
+            ? "top-1/2 -left-12 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev, ...props, children: [_jsx(ArrowLeft, {}), _jsx("span", { className: "sr-only", children: "Previous slide" })] }));
+}
+function CarouselNext({ className, variant = "outline", size = "icon", ...props }) {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+    return (_jsxs(Button, { "data-slot": "carousel-next", variant: variant, size: size, className: cn("absolute size-8 rounded-full", orientation === "horizontal"
+            ? "top-1/2 -right-12 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext, ...props, children: [_jsx(ArrowRight, {}), _jsx("span", { className: "sr-only", children: "Next slide" })] }));
+}
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+export declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export declare const THEME_NAMES: readonly ["light", "dark"];
+export type ChartConfig = Record<string, {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+type ChartContextProps = {
+    config: ChartConfig;
+};
+export declare const ChartContext: React.Context<ChartContextProps | null>;
+export declare function useChart(): ChartContextProps;
+export declare function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string): ({
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})) | undefined;
+export declare function getNestedPayloadString(payload: unknown, key: string): string | undefined;
+export {};

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+export const THEMES = { light: "", dark: ".dark" };
+export const THEME_NAMES = ["light", "dark"];
+export const ChartContext = React.createContext(null);
+export function useChart() {
+    const context = React.useContext(ChartContext);
+    if (!context) {
+        throw new Error("useChart must be used within a <ChartContainer />");
+    }
+    return context;
+}
+export function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null) {
+        return undefined;
+    }
+    const payloadRecord = getRecord(payload);
+    const nestedPayloadRecord = getRecord(payloadRecord.payload);
+    const configLabelKey = getStringValue(payloadRecord, key) ?? getStringValue(nestedPayloadRecord, key) ?? key;
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+export function getNestedPayloadString(payload, key) {
+    return getStringValue(getRecord(getRecord(payload).payload), key);
+}
+function getRecord(value) {
+    if (!isRecord(value)) {
+        return {};
+    }
+    return value;
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null;
+}
+function getStringValue(record, key) {
+    const value = record[key];
+    return typeof value === "string" ? value : undefined;
+}

package/dist/components/ui/chart-panel.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+type ChartPanelProps = React.ComponentProps<"section"> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    meta?: React.ReactNode;
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+};
+declare function ChartPanel({ title, description, meta, actions, children, className, ...props }: ChartPanelProps): import("react/jsx-runtime").JSX.Element;
+export { ChartPanel };
+export type { ChartPanelProps };

package/dist/components/ui/chart-panel.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@ciridae/ui/utils";
+function ChartPanel({ title, description, meta, actions, children, className, ...props }) {
+    return (_jsxs("section", { "data-slot": "chart-panel", className: cn("flex flex-col gap-(--panel-gap) border-t border-border bg-transparent py-(--panel-padding) text-foreground", className), ...props, children: [_jsxs("div", { className: "flex flex-col gap-2 px-(--panel-padding) sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-3 gap-y-1", children: [_jsx("h2", { className: "leading-none font-medium", children: title }), meta ? (_jsx("div", { className: "font-mono text-sm text-muted-foreground tabular-nums", children: meta })) : null] }), description ? _jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null] }), actions ? _jsx("div", { className: "flex items-center gap-2", children: actions }) : null] }), _jsx("div", { className: "px-(--panel-padding)", children: children })] }));
+}
+export { ChartPanel };

package/dist/components/ui/chart-tooltip.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import type { TooltipValueType } from "recharts";
+type TooltipNameType = number | string;
+type ChartTooltipContentProps = React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+export { ChartTooltipContent };

package/dist/components/ui/chart-tooltip.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@ciridae/ui/utils";
+import { getNestedPayloadString, getPayloadConfigFromPayload, useChart, } from "@ciridae/ui/chart-context";
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
+    const { config } = useChart();
+    const tooltipLabel = useChartTooltipLabel({
+        config,
+        hideLabel,
+        label,
+        labelClassName,
+        labelFormatter,
+        labelKey,
+        payload,
+    });
+    if (!active || !payload?.length) {
+        return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return (_jsxs("div", { className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-md", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
+                    .filter((item) => item.type !== "none")
+                    .map((item, index) => (_jsx(ChartTooltipItem, { color: color, config: config, formatter: formatter, hideIndicator: hideIndicator, index: index, indicator: indicator, item: item, nameKey: nameKey, nestLabel: nestLabel, payload: payload, tooltipLabel: tooltipLabel }, index))) })] }));
+}
+function useChartTooltipLabel({ config, hideLabel, label, labelClassName, labelFormatter, labelKey, payload, }) {
+    return React.useMemo(() => getChartTooltipLabel({
+        config,
+        hideLabel,
+        label,
+        labelClassName,
+        labelFormatter,
+        labelKey,
+        payload,
+    }), [config, hideLabel, label, labelClassName, labelFormatter, labelKey, payload]);
+}
+function getChartTooltipLabel({ config, hideLabel, label, labelClassName, labelFormatter, labelKey, payload, }) {
+    if (hideLabel || !payload?.length)
+        return null;
+    const value = getChartTooltipLabelValue({ config, label, labelKey, payload });
+    if (labelFormatter) {
+        return _jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+    }
+    return value ? _jsx("div", { className: cn("font-medium", labelClassName), children: value }) : null;
+}
+function getChartTooltipLabelValue({ config, label, labelKey, payload, }) {
+    const [item] = payload ?? [];
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    return !labelKey && typeof label === "string"
+        ? (config[label]?.label ?? label)
+        : itemConfig?.label;
+}
+function ChartTooltipItem({ color, config, formatter, hideIndicator, index, indicator, item, nameKey, nestLabel, payload, tooltipLabel, }) {
+    const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    if (formatter && item.value !== undefined && item.name) {
+        return (_jsx("div", { className: getTooltipItemClassName(indicator), children: formatter(item.value, item.name, item, index, payload) }));
+    }
+    return (_jsx("div", { className: getTooltipItemClassName(indicator), children: _jsx(DefaultTooltipItem, { color: color, hideIndicator: hideIndicator, indicator: indicator, item: item, itemConfig: itemConfig, nestLabel: nestLabel, tooltipLabel: tooltipLabel }) }));
+}
+function DefaultTooltipItem({ color, hideIndicator, indicator, item, itemConfig, nestLabel, tooltipLabel, }) {
+    return (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx(ChartTooltipIndicator, { color: color, indicator: indicator, item: item, nestLabel: nestLabel }))), _jsx(ChartTooltipItemBody, { item: item, itemConfig: itemConfig, nestLabel: nestLabel, children: tooltipLabel })] }));
+}
+function ChartTooltipIndicator({ color, indicator, item, nestLabel, }) {
+    const indicatorColor = color ?? getNestedPayloadString(item, "fill") ?? item.color;
+    return (_jsx("div", { className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+            "h-2.5 w-2.5": indicator === "dot",
+            "w-1": indicator === "line",
+            "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+            "my-0.5": nestLabel && indicator === "dashed",
+        }), style: getChartIndicatorStyle(indicatorColor) }));
+}
+function ChartTooltipItemBody({ children, item, itemConfig, nestLabel, }) {
+    return (_jsxs("div", { className: cn("flex min-w-0 flex-1 justify-between gap-4 leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid min-w-0 gap-1.5", children: [nestLabel ? children : null, _jsx("span", { className: "truncate text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "shrink-0 font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) }))] }));
+}
+function getTooltipItemClassName(indicator) {
+    return cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center");
+}
+function getChartIndicatorStyle(indicatorColor) {
+    return {
+        "--color-bg": indicatorColor,
+        "--color-border": indicatorColor,
+    };
+}
+export { ChartTooltipContent };

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { type ChartConfig } from "@ciridae/ui/chart-context";
+import { ChartTooltipContent } from "@ciridae/ui/chart-tooltip";
+declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+declare function ChartStyle({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+} & RechartsPrimitive.DefaultLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
+export { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/components/ui/chart.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "@ciridae/ui/utils";
+import { ChartContext, THEMES, THEME_NAMES, getPayloadConfigFromPayload, useChart, } from "@ciridae/ui/chart-context";
+import { ChartTooltipContent } from "@ciridae/ui/chart-tooltip";
+const INITIAL_DIMENSION = { width: 320, height: 200 };
+function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+    const contextValue = React.useMemo(() => ({ config }), [config]);
+    return (_jsx(ChartContext.Provider, { value: contextValue, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
+}
+function ChartStyle({ id, config }) {
+    const colorConfig = Object.entries(config).filter(([, itemConfig]) => itemConfig.theme ?? itemConfig.color);
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: THEME_NAMES.map((theme) => {
+                const prefix = THEMES[theme];
+                return `
+${prefix} [data-chart=${id}] {
+${colorConfig
+                    .map(([key, itemConfig]) => {
+                    const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+                    return color ? `  --color-${key}: ${color};` : null;
+                })
+                    .join("\n")}
+}
+`;
+            }).join("\n"),
+        } }));
+}
+const ChartTooltip = RechartsPrimitive.Tooltip;
+const ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, }) {
+    const { config } = useChart();
+    if (!payload?.length) {
+        return null;
+    }
+    return (_jsx("div", { className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className), children: payload
+            .filter((item) => item.type !== "none")
+            .map((item, index) => {
+            const key = `${nameKey ?? item.dataKey ?? "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return (_jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                            backgroundColor: item.color,
+                        } })), itemConfig?.label] }, index));
+        }) }));
+}
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

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

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

package/dist/components/ui/checkbox.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-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-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none", children: _jsx(CheckIcon, { className: "size-3.5" }) }) }));
+}
+export { Checkbox };

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

@@ -0,0 +1,5 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react/jsx-runtime").JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/components/ui/collapsible.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+function Collapsible({ ...props }) {
+    return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({ ...props }) {
+    return _jsx(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsibleContent({ ...props }) {
+    return _jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", ...props });
+}
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/components/ui/combobox-anchor.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
+export { useComboboxAnchor };

package/dist/components/ui/combobox-anchor.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+function useComboboxAnchor() {
+    return React.useRef(null);
+}
+export { useComboboxAnchor };

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+declare const Combobox: typeof ComboboxPrimitive.Root;
+declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxPrimitive.Input.Props & {
+    showTrigger?: boolean;
+    showClear?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxPrimitive.Chip.Props & {
+    showRemove?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
+export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, };

package/dist/components/ui/combobox.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+import { cn } from "@ciridae/ui/utils";
+import { Button } from "@ciridae/ui/button";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@ciridae/ui/input-group";
+const Combobox = ComboboxPrimitive.Root;
+function ComboboxValue({ ...props }) {
+    return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
+}
+function ComboboxTrigger({ className, children, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", className: cn("[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronDownIcon, { "data-slot": "combobox-trigger-icon", className: "pointer-events-none size-4 text-muted-foreground" })] }));
+}
+function ComboboxClear({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs" }), className: cn(className), ...props, children: _jsx(XIcon, { className: "pointer-events-none" }) }));
+}
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+    return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", asChild: true, "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled, children: _jsx(ComboboxTrigger, {}) })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
+}
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) 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-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-(--control-height-sm) *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }) }) }));
+}
+function ComboboxList({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0", className), ...props }));
+}
+function ComboboxItem({ className, children, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-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 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { "data-slot": "combobox-item-indicator", render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none size-4 pointer-coarse:size-5" }) })] }));
+}
+function ComboboxGroup({ className, ...props }) {
+    return _jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props });
+}
+function ComboboxLabel({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn("px-(--menu-item-padding-x) py-1 text-meta text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm", className), ...props }));
+}
+function ComboboxCollection({ ...props }) {
+    return _jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });
+}
+function ComboboxEmpty({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className), ...props }));
+}
+function ComboboxSeparator({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function ComboboxChips({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-(--control-height) flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-(--control-padding-x) py-1 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[var(--focus-ring-width)] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[var(--focus-ring-width)] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className), ...props }));
+}
+function ComboboxChip({ className, children, showRemove = true, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn("flex h-(--control-height-xs) w-fit items-center justify-center gap-1 rounded-[var(--badge-radius)] bg-muted px-(--badge-padding-x) text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
+}
+function ComboboxChipsInput({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn("min-w-16 flex-1 outline-none", className), ...props }));
+}
+export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, };

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Dialog } from "@ciridae/ui/dialog";
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
+declare function CommandDialog({ title, description, children, className, commandProps, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    commandProps?: React.ComponentProps<typeof Command>;
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/components/ui/command.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon, XIcon } from "lucide-react";
+import { cn } from "@ciridae/ui/utils";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@ciridae/ui/dialog";
+function Command({ className, ...props }) {
+    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className), ...props }));
+}
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, commandProps, showCloseButton = true, ...props }) {
+    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsxs(DialogContent, { className: cn("overflow-hidden p-0", showCloseButton &&
+                    "[&_[data-slot=command-input-wrapper]]:pr-[calc(var(--control-height)+var(--control-padding-x))]", className), showCloseButton: false, children: [_jsx(Command, { ...commandProps, className: cn("**:data-[slot=command-input-wrapper]:h-(--control-height) [&_[cmdk-group-heading]]:px-(--menu-item-padding-x) [&_[cmdk-group-heading]]:text-[0.6875rem] [&_[cmdk-group-heading]]:leading-none [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:tracking-[var(--font-ciridae-metadata-spacing)] [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:size-4 [&_[cmdk-input]]:h-(--control-height) [&_[cmdk-item]]:min-h-(--menu-item-height) [&_[cmdk-item]]:px-(--menu-item-padding-x) [&_[cmdk-item]]:py-1 [&_[cmdk-item]_svg]:size-4", commandProps?.className), children: children }), showCloseButton && _jsx(CommandDialogClose, {})] })] }));
+}
+function CommandDialogClose() {
+    return (_jsxs(DialogClose, { className: "absolute top-0 right-(--control-padding-x) inline-flex size-(--control-height) items-center justify-center 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]:size-4 [&_svg]:shrink-0", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }));
+}
+function CommandInput({ className, ...props }) {
+    return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-(--control-height) items-center gap-(--control-gap) border-b px-(--control-padding-x)", children: [_jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("flex h-(--control-height) w-full rounded-md bg-transparent py-1 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className), ...props })] }));
+}
+function CommandList({ className, ...props }) {
+    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className), ...props }));
+}
+function CommandEmpty({ ...props }) {
+    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: "py-(--panel-padding) text-center text-sm", ...props }));
+}
+function CommandGroup({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-(--menu-item-padding-x) [&_[cmdk-group-heading]]:py-1 [&_[cmdk-group-heading]]:text-[0.6875rem] [&_[cmdk-group-heading]]:leading-none [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:tracking-[var(--font-ciridae-metadata-spacing)] [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase", className), ...props }));
+}
+function CommandSeparator({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn("-mx-1 h-px bg-border", className), ...props }));
+}
+function CommandItem({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Item, { "data-slot": "command-item", 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 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]: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 }));
+}
+function CommandShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn("ml-auto text-meta font-mono text-muted-foreground", className), ...props }));
+}
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+declare function ContextMenuPortalContainerProvider({ children, container, disableModalBehavior, }: {
+    children: React.ReactNode;
+    container: HTMLElement | null;
+    disableModalBehavior?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenu({ modal, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuPortal({ container, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuPortalContainerProvider, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };