@cmdniels/uikit 1.1.7 → 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/index.d.ts

@@ -33,6 +33,13 @@ export { default as CardDescription } from "./components/card/CardDescription";
 export { default as CardFooter } from "./components/card/CardFooter";
 export { default as CardHeader } from "./components/card/CardHeader";
 export { default as CardTitle } from "./components/card/CardTitle";
+export type { ChartConfig } from "./components/chart/ChartContext";
+export { default as ChartContainer } from "./components/chart/ChartContainer";
+export { default as ChartLegend } from "./components/chart/ChartLegend";
+export { default as ChartLegendContent } from "./components/chart/ChartLegendContent";
+export { default as ChartStyle } from "./components/chart/ChartStyle";
+export { default as ChartTooltip } from "./components/chart/ChartTooltip";
+export { default as ChartTooltipContent } from "./components/chart/ChartTooltipContent";
 export { default as Checkbox } from "./components/checkbox/Checkbox";
 export { default as Combobox } from "./components/combobox/Combobox";
 export { default as ComboboxChip } from "./components/combobox/ComboboxChip";

package/out/index.js

@@ -42,6 +42,12 @@ export { default as CardDescription } from "./components/card/CardDescription";
 export { default as CardFooter } from "./components/card/CardFooter";
 export { default as CardHeader } from "./components/card/CardHeader";
 export { default as CardTitle } from "./components/card/CardTitle";
+export { default as ChartContainer } from "./components/chart/ChartContainer";
+export { default as ChartLegend } from "./components/chart/ChartLegend";
+export { default as ChartLegendContent } from "./components/chart/ChartLegendContent";
+export { default as ChartStyle } from "./components/chart/ChartStyle";
+export { default as ChartTooltip } from "./components/chart/ChartTooltip";
+export { default as ChartTooltipContent } from "./components/chart/ChartTooltipContent";
 // Checkbox
 export { default as Checkbox } from "./components/checkbox/Checkbox";
 // Combobox

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmdniels/uikit",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "private": false,
   "license": "MIT",
   "type": "module",
@@ -30,6 +30,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@clerk/themes": "^2.4.46",
+    "recharts": "^3.6.0",
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"