@cmdniels/uikit 1.1.6 → 1.2.0

package/README.md

@@ -113,13 +113,13 @@ export default function MyComponent() {
 
 ## Available Components
 
-- **Layout**: Accordion, Card, Item, Separator, Table
+- **Layout**: Accordion, AspectRatio, Card, Item, ScrollArea, Separator, Sheet, Sidebar, Table
 - **Forms**: Button, ButtonGroup, Checkbox, Input, InputGroup, Label, Select, Switch, Textarea, Toggle
-- **Data Entry**: Calendar, Combobox, DatePicker, Field, FileDropzone
-- **Feedback**: Alert, AlertDialog, Error, Skeleton, Toaster (Sonner)
+- **Data Entry**: Calendar, Combobox, CopyInput, DatePicker, Field, FileDropzone, LinkInput
+- **Feedback**: Alert, AlertDialog, Error, Skeleton, Spinner, Toaster (Sonner)
 - **Navigation**: ContextMenu, DropdownMenu
 - **Overlay**: Popover, Tooltip
-- **Utilities**: AspectRatio, Badge, Sortable
+- **Utilities**: Badge, Chart, Sortable
 - **Typography**: Complete set of typography components
 
 ## Development

package/out/components/button/Button.js

@@ -16,5 +16,5 @@ import Spinner from "../../components/spinner/Spinner";
 import { buttonVariants } from "./buttonVariants";
 export default function Button(_a) {
     var { className, children, variant = "default", size = "default", loading = false, disabled } = _a, props = __rest(_a, ["className", "children", "variant", "size", "loading", "disabled"]);
-    return (_jsxs(ButtonPrimitive, Object.assign({ "data-slot": "button", className: cn(buttonVariants({ variant, size, className }), loading && "relative"), disabled: disabled !== null && disabled !== void 0 ? disabled : loading }, props, { children: [loading && _jsx(Spinner, { className: "absolute inset-0 m-auto" }), _jsx("span", { className: cn("contents", loading && "invisible"), children: children })] })));
+    return (_jsxs(ButtonPrimitive, Object.assign({ "data-slot": "button", className: cn(buttonVariants({ variant, size, className }), loading && "relative"), disabled: loading || disabled }, props, { children: [loading && _jsx(Spinner, { className: "absolute inset-0 m-auto" }), _jsx("span", { className: cn("contents", loading && "invisible"), children: children })] })));
 }

package/out/components/chart/ChartContainer.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentProps } from "react";
+import { ResponsiveContainer as RechartsResponsiveContainer } from "recharts";
+import { type ChartConfig } from "./ChartContext";
+export default function ChartContainer({ id, className, children, config, ...props }: ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: ComponentProps<typeof RechartsResponsiveContainer>["children"];
+}): import("react/jsx-runtime").JSX.Element;

package/out/components/chart/ChartContainer.js

@@ -0,0 +1,24 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { ResponsiveContainer as RechartsResponsiveContainer } from "recharts";
+import cn from "../../cn";
+import { ChartContext } from "./ChartContext";
+import ChartStyle from "./ChartStyle";
+export default function ChartContainer(_a) {
+    var { id, className, children, config } = _a, props = __rest(_a, ["id", "className", "children", "config"]);
+    const uniqueId = useId();
+    const chartId = `chart-${id !== null && id !== void 0 ? id : uniqueId.replace(/:/g, "")}`;
+    return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", Object.assign({ "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-none [&_.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-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-none [&_g]:focus:outline-none", className) }, props, { children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsResponsiveContainer, { children: children })] })) }));
+}

package/out/components/chart/ChartContext.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentType, type ReactNode } from "react";
+export type ChartConfig = {
+    [k in string]: {
+        label?: ReactNode;
+        icon?: ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<"light" | "dark", string>;
+    });
+};
+export declare const ChartContext: import("react").Context<{
+    config: ChartConfig;
+} | null>;

package/out/components/chart/ChartContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const ChartContext = createContext(null);

package/out/components/chart/ChartLegend.d.ts

@@ -0,0 +1,3 @@
+import { type ComponentProps } from "react";
+import { Legend as RechartsLegend } from "recharts";
+export default function ChartLegend(props: ComponentProps<typeof RechartsLegend>): import("react/jsx-runtime").JSX.Element;

package/out/components/chart/ChartLegend.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Legend as RechartsLegend } from "recharts";
+export default function ChartLegend(props) {
+    return _jsx(RechartsLegend, Object.assign({}, props));
+}

package/out/components/chart/ChartLegendContent.d.ts

@@ -0,0 +1,9 @@
+import type { LegendPayload } from "recharts/types/component/DefaultLegendContent";
+import type { Props as LegendProps } from "recharts/types/component/Legend";
+export default function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: {
+    className?: string;
+    hideIcon?: boolean;
+    verticalAlign?: LegendProps["verticalAlign"];
+    payload?: readonly LegendPayload[];
+    nameKey?: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/out/components/chart/ChartLegendContent.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from "../../cn";
+import getPayloadConfigFromPayload from "./getPayloadConfigFromPayload";
+import useChart from "./useChart";
+export default function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, }) {
+    const { config } = useChart();
+    if (!(payload === null || payload === void 0 ? void 0 : 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.map((item) => {
+            var _a;
+            const key = `${(_a = nameKey !== null && nameKey !== void 0 ? nameKey : item.dataKey) !== null && _a !== void 0 ? _a : "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return (_jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:size-3  [&>svg]:text-muted-foreground"), children: [(itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.icon) && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "size-2  shrink-0 rounded-[2px]", style: {
+                            backgroundColor: item.color,
+                        } })), itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.label] }, item.value));
+        }) }));
+}

package/out/components/chart/ChartStyle.d.ts

@@ -0,0 +1,5 @@
+import { type ChartConfig } from "./ChartContext";
+export default function ChartStyle({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}): import("react/jsx-runtime").JSX.Element | null;

package/out/components/chart/ChartStyle.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const THEMES = { light: "", dark: ".dark" }; // Format: { THEME_NAME: CSS_SELECTOR }
+export default function ChartStyle({ id, config }) {
+    const colorConfig = Object.entries(config).filter(([, _config]) => { var _a; return (_a = _config.theme) !== null && _a !== void 0 ? _a : _config.color; });
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES)
+                .map(([theme, prefix]) => `
+            ${prefix} [data-chart=${id}] {
+            ${colorConfig
+                .map(([key, itemConfig]) => {
+                var _a, _b;
+                const color = (_b = (_a = itemConfig.theme) === null || _a === void 0 ? void 0 : _a[theme]) !== null && _b !== void 0 ? _b : itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+            })
+                .join("\n")}
+            }
+            `)
+                .join("\n"),
+        } }));
+}

package/out/components/chart/ChartTooltip.d.ts

@@ -0,0 +1,3 @@
+import { type ComponentProps } from "react";
+import { Tooltip as RechartsTooltip } from "recharts";
+export default function ChartTooltip({ ...props }: ComponentProps<typeof RechartsTooltip>): import("react/jsx-runtime").JSX.Element;

package/out/components/chart/ChartTooltip.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as RechartsTooltip } from "recharts";
+export default function ChartTooltip(_a) {
+    var props = __rest(_a, []);
+    return _jsx(RechartsTooltip, Object.assign({}, props));
+}

package/out/components/chart/ChartTooltipContent.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import type { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import type { TooltipContentProps } from "recharts/types/component/Tooltip";
+export default function ChartTooltipContent({ active, payload, label, className, indicator, hideLabel, hideIndicator, labelFormatter, formatter, labelClassName, color, nameKey, labelKey, }: TooltipContentProps<ValueType, NameType> & {
+    className?: string;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    labelFormatter?: (label: TooltipContentProps<number, string>["label"], payload: TooltipContentProps<number, string>["payload"]) => ReactNode;
+    formatter?: (value: number | string, name: string, item: Payload<number | string, string>, index: number, payload: ReadonlyArray<Payload<number | string, string>>) => ReactNode;
+    labelClassName?: string;
+    color?: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/out/components/chart/ChartTooltipContent.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import cn from "../../cn";
+import getPayloadConfigFromPayload from "./getPayloadConfigFromPayload";
+import useChart from "./useChart";
+export default function ChartTooltipContent({ active, payload, label, className, indicator = "dot", hideLabel = false, hideIndicator = false, labelFormatter, formatter, labelClassName, color, nameKey, labelKey, }) {
+    const { config } = useChart();
+    const tooltipLabel = useMemo(() => {
+        var _a, _b;
+        if (hideLabel || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
+            return null;
+        }
+        const [item] = payload;
+        const key = `${(_b = (_a = labelKey !== null && labelKey !== void 0 ? labelKey : item === null || item === void 0 ? void 0 : item.dataKey) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.name) !== null && _b !== void 0 ? _b : "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = (() => {
+            var _a, _b;
+            const v = !labelKey && typeof label === "string" ? ((_b = (_a = config[label]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : label) : itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.label;
+            return typeof v === "string" || typeof v === "number" ? v : undefined;
+        })();
+        if (labelFormatter) {
+            return _jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+        }
+        if (!value) {
+            return null;
+        }
+        return _jsx("div", { className: cn("font-medium", labelClassName), children: value });
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+    if (!active || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
+        return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return (_jsxs("div", { className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
+                    var _a, _b, _c, _d;
+                    const key = `${(_b = (_a = nameKey !== null && nameKey !== void 0 ? nameKey : item.name) !== null && _a !== void 0 ? _a : item.dataKey) !== null && _b !== void 0 ? _b : "value"}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = (_c = color !== null && color !== void 0 ? color : item.payload.fill) !== null && _c !== void 0 ? _c : item.color;
+                    return (_jsx("div", { className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5  [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && (item === null || item === void 0 ? void 0 : item.value) !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [(itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.icon) ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+                                        "size-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: {
+                                        "--color-bg": indicatorColor,
+                                        "--color-border": indicatorColor,
+                                    } }))), _jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: (_d = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.label) !== null && _d !== void 0 ? _d : item.name })] }), item.value && (_jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: item.value.toLocaleString() }))] })] })) }, item.dataKey));
+                }) })] }));
+}

package/out/components/chart/getPayloadConfigFromPayload.d.ts

@@ -0,0 +1,11 @@
+import { type ChartConfig } from "./ChartContext";
+export default function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string): ({
+    label?: import("react").ReactNode;
+    icon?: import("react").ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<"light" | "dark", string>;
+})) | undefined;

package/out/components/chart/getPayloadConfigFromPayload.js

@@ -0,0 +1,18 @@
+export default function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (key in payload && typeof payload[key] === "string") {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === "string") {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}

package/out/components/chart/useChart.d.ts

@@ -0,0 +1,3 @@
+export default function useChart(): {
+    config: import("./ChartContext").ChartConfig;
+};

package/out/components/chart/useChart.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { ChartContext } from "./ChartContext";
+export default function useChart() {
+    const context = useContext(ChartContext);
+    if (!context) {
+        throw new Error("useChart must be used within a <ChartContainer />");
+    }
+    return context;
+}

package/out/components/copy-input/CopyInput.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconCopy } from "@tabler/icons-react";
-import { useState, useRef, Children, isValidElement } from "react";
+import { useState, useRef, Children, isValidElement, } from "react";
 import Button from "../../components/button/Button";
 import InputGroup from "../../components/input-group/InputGroup";
 import InputGroupAddon from "../../components/input-group/InputGroupAddon";
@@ -31,8 +31,7 @@ export default function CopyInput(_a) {
         const text = (_d = (_c = Children.map(children, (child) => {
             if (isValidElement(child) && child.props.children) {
                 const inputGroupText = child.props.children;
-                if (isValidElement(inputGroupText) &&
-                    inputGroupText.props.children) {
+                if (isValidElement(inputGroupText) && inputGroupText.props.children) {
                     const innerText = inputGroupText.props.children;
                     if (typeof innerText === "string" || typeof innerText === "number") {
                         return innerText;

package/out/components/error/Error.d.ts

@@ -1,4 +1,5 @@
-export default function Error({ title, message, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+import { type HTMLAttributes } from "react";
+export default function Error({ title, message, className, ...props }: HTMLAttributes<HTMLDivElement> & {
     title: string;
     message: string;
 }): import("react/jsx-runtime").JSX.Element;

package/out/components/item/ItemActions.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from "react";
+declare function ItemActions({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export default ItemActions;

package/out/components/item/ItemContent.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from "react";
+declare function ItemContent({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export default ItemContent;

package/out/components/item/ItemDescription.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare function ItemDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+import type { ComponentProps } from "react";
+declare function ItemDescription({ className, ...props }: ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
 export default ItemDescription;

package/out/components/item/ItemFooter.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+import type { ComponentProps } from "react";
+declare function ItemFooter({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export default ItemFooter;

package/out/components/item/ItemGroup.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+import type { ComponentProps } from "react";
+declare function ItemGroup({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export default ItemGroup;

package/out/components/item/ItemHeader.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+import type { ComponentProps } from "react";
+declare function ItemHeader({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export default ItemHeader;

package/out/components/item/ItemMedia.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
+import { type ComponentProps } from "react";
 import itemMediaVariants from "./itemMediaVariants";
 import type { VariantProps } from "class-variance-authority";
-declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): import("react/jsx-runtime").JSX.Element;
+declare function ItemMedia({ className, variant, ...props }: ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): import("react/jsx-runtime").JSX.Element;
 export default ItemMedia;

package/out/components/item/ItemSeparator.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { type ComponentProps } from "react";
 import Separator from "../../components/separator/Separator";
-declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+declare function ItemSeparator({ className, ...props }: ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
 export default ItemSeparator;

package/out/components/item/ItemTitle.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+import type { ComponentProps } from "react";
+declare function ItemTitle({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export default ItemTitle;

package/out/components/link-input/LinkInput.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconExternalLink } from "@tabler/icons-react";
-import { useState, useRef, isValidElement, Children } from "react";
+import { useState, useRef, isValidElement, Children, } from "react";
 import Button from "../../components/button/Button";
 import InputGroup from "../../components/input-group/InputGroup";
 import InputGroupAddon from "../../components/input-group/InputGroupAddon";

package/out/components/sheet/Sheet.d.ts

@@ -0,0 +1,2 @@
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+export default function Sheet({ ...props }: SheetPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;

package/out/components/sheet/Sheet.js

@@ -0,0 +1,18 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+export default function Sheet(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SheetPrimitive.Root, Object.assign({ "data-slot": "sheet" }, props));
+}

package/out/components/sheet/SheetClose.d.ts

@@ -0,0 +1,2 @@
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+export default function SheetClose({ ...props }: SheetPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;

package/out/components/sheet/SheetClose.js

@@ -0,0 +1,18 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+export default function SheetClose(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SheetPrimitive.Close, Object.assign({ "data-slot": "sheet-close" }, props));
+}

package/out/components/sheet/SheetContent.d.ts

@@ -0,0 +1,5 @@
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+export default function SheetContent({ className, children, side, showCloseButton, ...props }: SheetPrimitive.Popup.Props & {
+    side?: "top" | "right" | "bottom" | "left";
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/out/components/sheet/SheetContent.js

@@ -0,0 +1,23 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { IconX } from "@tabler/icons-react";
+import cn from "../../cn";
+import Button from "../../components/button/Button";
+import SheetOverlay from "./SheetOverlay";
+import SheetPortal from "./SheetPortal";
+export default function SheetContent(_a) {
+    var { className, children, side = "right", showCloseButton = true } = _a, props = __rest(_a, ["className", "children", "side", "showCloseButton"]);
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, Object.assign({ "data-slot": "sheet-content", "data-side": side, className: cn("fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10", className) }, props, { children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-4 right-4", size: "icon-sm" }), children: [_jsx(IconX, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] }))] }));
+}

package/out/components/sheet/SheetDescription.d.ts

@@ -0,0 +1,2 @@
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+export default function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;

package/out/components/sheet/SheetDescription.js

@@ -0,0 +1,19 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import cn from "../../cn";
+export default function SheetDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(SheetPrimitive.Description, Object.assign({ "data-slot": "sheet-description", className: cn("text-sm text-muted-foreground", className) }, props)));
+}

package/out/components/sheet/SheetFooter.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentProps } from "react";
+export default function SheetFooter({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/out/components/sheet/SheetFooter.js

@@ -0,0 +1,18 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "../../cn";
+export default function SheetFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx("div", Object.assign({ "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className) }, props));
+}

package/out/components/sheet/SheetHeader.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentProps } from "react";
+export default function SheetHeader({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/out/components/sheet/SheetHeader.js

@@ -0,0 +1,18 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "../../cn";
+export default function SheetHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx("div", Object.assign({ "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-4", className) }, props));
+}

package/out/components/sheet/SheetOverlay.d.ts

@@ -0,0 +1,2 @@
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+export default function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props): import("react/jsx-runtime").JSX.Element;

package/out/components/sheet/SheetOverlay.js

@@ -0,0 +1,19 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import cn from "../../cn";
+export default function SheetOverlay(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(SheetPrimitive.Backdrop, Object.assign({ "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className) }, props)));
+}

package/out/components/sheet/SheetPortal.d.ts

@@ -0,0 +1,2 @@
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+export default function SheetPortal({ ...props }: SheetPrimitive.Portal.Props): import("react/jsx-runtime").JSX.Element;