@codefast/ui 0.3.9 → 0.3.11-canary.0

package/dist/components/chart.cjs

@@ -1,4 +1,251 @@
+"use strict";
 "use client";
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,t)=>{for(var r in t)__webpack_require__.o(t,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ChartContainer:()=>ChartContainer,ChartLegend:()=>ChartLegend,ChartTooltipContent:()=>ChartTooltipContent,ChartLegendContent:()=>ChartLegendContent,createChartScope:()=>createChartScope,ChartTooltip:()=>ChartTooltip,ChartStyle:()=>ChartStyle});const jsx_runtime_namespaceObject=require("react/jsx-runtime"),external_react_namespaceObject=require("react"),external_recharts_namespaceObject=require("recharts"),tailwind_variants_namespaceObject=require("@codefast/tailwind-variants"),react_context_namespaceObject=require("@radix-ui/react-context"),THEMES={dark:".dark",light:""},CHART_PROVIDER_NAME="ChartProvider",[createChartContext,createChartScope]=(0,react_context_namespaceObject.createContextScope)(CHART_PROVIDER_NAME),[ChartContextProvider,useChartContext]=createChartContext(CHART_PROVIDER_NAME);function ChartContainer({__scopeChart:e,children:t,className:r,config:a,id:n,...o}){let c=(0,external_react_namespaceObject.useId)(),s=`chart-${n??c}`;return(0,jsx_runtime_namespaceObject.jsx)(ChartContextProvider,{config:a,scope:e,children:(0,jsx_runtime_namespaceObject.jsxs)("div",{className:(0,tailwind_variants_namespaceObject.cn)("[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",r),"data-chart":s,"data-slot":"chart",...o,children:[(0,jsx_runtime_namespaceObject.jsx)(ChartStyle,{config:a,id:s}),(0,jsx_runtime_namespaceObject.jsx)(external_recharts_namespaceObject.ResponsiveContainer,{children:t})]})})}function ChartStyle({config:e,id:t}){let r=Object.entries(e).filter(([,e])=>e.theme??e.color);return 0===r.length?null:(0,jsx_runtime_namespaceObject.jsx)("style",{dangerouslySetInnerHTML:{__html:generateChartStyles(t,r)}})}const ChartTooltip=external_recharts_namespaceObject.Tooltip,CHART_TOOLTIP_CONTENT_NAME="ChartTooltipContent";function ChartTooltipContent({__scopeChart:e,active:t,className:r,color:a,formatter:n,hideIndicator:o=!1,hideLabel:c=!1,indicator:s="dot",label:i,labelClassName:_,labelFormatter:l,labelKey:d,nameKey:p,payload:u=[]}){let{config:m}=useChartContext("ChartTooltipContent",e),h=(0,external_react_namespaceObject.useMemo)(()=>{if(c||0===u.length)return null;let[e]=u,t=safeToString(d??e.dataKey??e.name??"value"),r=getPayloadConfigFromPayload(m,e,t),a=d||"string"!=typeof i?r?.label:i in m?m[i].label??i:i;return l?(0,jsx_runtime_namespaceObject.jsx)("div",{className:(0,tailwind_variants_namespaceObject.cn)("font-medium",_),children:l(a,u)}):a?(0,jsx_runtime_namespaceObject.jsx)("div",{className:(0,tailwind_variants_namespaceObject.cn)("font-medium",_),children:a}):null},[i,l,u,c,_,m,d]);if(!t||0===u.length)return null;let b=1===u.length&&"dot"!==s;return(0,jsx_runtime_namespaceObject.jsxs)("div",{className:(0,tailwind_variants_namespaceObject.cn)("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",r),children:[b?null:h,(0,jsx_runtime_namespaceObject.jsx)("div",{className:"grid gap-1.5",children:u.map((e,t)=>{let r=safeToString(p??e.name??e.dataKey??"value"),c=getPayloadConfigFromPayload(m,e,r),i=a??(isRecord(e.payload)&&"fill"in e.payload&&"string"==typeof e.payload.fill?e.payload.fill:void 0)??e.color;return(0,jsx_runtime_namespaceObject.jsx)("div",{className:(0,tailwind_variants_namespaceObject.cn)("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5","dot"===s&&"items-center"),children:n&&void 0!==e.value&&e.name?n(e.value,e.name,e,t,[e]):(0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment,{children:[c?.icon?(0,jsx_runtime_namespaceObject.jsx)(c.icon,{}):!o&&(0,jsx_runtime_namespaceObject.jsx)("div",{className:(0,tailwind_variants_namespaceObject.cn)("shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)",{"h-2.5 w-2.5":"dot"===s,"my-0.5":b&&"dashed"===s,"w-0 border-[1.5px] border-dashed bg-transparent":"dashed"===s,"w-1":"line"===s}),style:{"--color-bg":i,"--color-border":i}}),(0,jsx_runtime_namespaceObject.jsxs)("div",{className:(0,tailwind_variants_namespaceObject.cn)("flex flex-1 justify-between leading-none",b?"items-end":"items-center"),children:[(0,jsx_runtime_namespaceObject.jsxs)("div",{className:"grid gap-1.5",children:[b?h:null,(0,jsx_runtime_namespaceObject.jsx)("span",{className:"text-muted-foreground",children:c?.label??e.name})]}),null!=e.value&&(0,jsx_runtime_namespaceObject.jsx)("span",{className:"text-foreground font-mono font-medium tabular-nums",children:"number"==typeof e.value?e.value.toLocaleString():safeToString(e.value)})]})]})},r)})})]})}const ChartLegend=external_recharts_namespaceObject.Legend,CHART_LEGEND_CONTENT_NAME="ChartLegendContent";function ChartLegendContent({__scopeChart:e,className:t,hideIcon:r=!1,nameKey:a,payload:n,verticalAlign:o="bottom"}){let{config:c}=useChartContext("ChartLegendContent",e);return n?.length?(0,jsx_runtime_namespaceObject.jsx)("div",{className:(0,tailwind_variants_namespaceObject.cn)("flex items-center justify-center gap-4","top"===o?"pb-3":"pt-3",t),children:n.map(e=>{let t="value";a?t=a:null!=e.dataKey&&(t=safeToString(e.dataKey));let n=getPayloadConfigFromPayload(c,e,t);return(0,jsx_runtime_namespaceObject.jsxs)("div",{className:(0,tailwind_variants_namespaceObject.cn)("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3"),children:[n?.icon&&!r?(0,jsx_runtime_namespaceObject.jsx)(n.icon,{}):(0,jsx_runtime_namespaceObject.jsx)("div",{className:"size-2 shrink-0 rounded-md",style:{backgroundColor:e.color}}),n?.label]},a?safeToString(n?.color??""):safeToString(e.value??""))})}):null}function isRecord(e){return"object"==typeof e&&null!==e}function getStringValue(e,t){if(t in e){let r=e[t];return"string"==typeof r?r:void 0}}function safeToString(e){return"string"==typeof e?e:"number"==typeof e?e.toString():null==e?"":"boolean"==typeof e||"bigint"==typeof e||"symbol"==typeof e?e.toString():""}function getPayloadConfigFromPayload(e,t,r){if(!isRecord(t))return;let a=isRecord(t.payload)?t.payload:void 0,n=r,o=getStringValue(t,r);if(o)n=o;else if(a){let e=getStringValue(a,r);e&&(n=e)}return n in e?e[n]:e[r]}function generateCssVariable(e,t,r){let a=t.theme?.[r]??t.color;return a?`  --color-${e}: ${a};`:null}function generateThemeStyles(e,t,r,a){let n=a.map(([t,r])=>generateCssVariable(t,r,e)).filter(Boolean).join("\n");return`${t} [data-chart=${r}] {
-${n}
-}`}function generateChartStyles(e,t){return Object.entries(THEMES).map(([r,a])=>generateThemeStyles(r,a,e,t)).join("\n\n")}for(var __webpack_i__ in exports.ChartContainer=__webpack_exports__.ChartContainer,exports.ChartLegend=__webpack_exports__.ChartLegend,exports.ChartLegendContent=__webpack_exports__.ChartLegendContent,exports.ChartStyle=__webpack_exports__.ChartStyle,exports.ChartTooltip=__webpack_exports__.ChartTooltip,exports.ChartTooltipContent=__webpack_exports__.ChartTooltipContent,exports.createChartScope=__webpack_exports__.createChartScope,__webpack_exports__)-1===["ChartContainer","ChartLegend","ChartLegendContent","ChartStyle","ChartTooltip","ChartTooltipContent","createChartScope"].indexOf(__webpack_i__)&&(exports[__webpack_i__]=__webpack_exports__[__webpack_i__]);Object.defineProperty(exports,"__esModule",{value:!0});
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ChartContainer: ()=>ChartContainer,
+    ChartLegend: ()=>ChartLegend,
+    ChartTooltipContent: ()=>ChartTooltipContent,
+    ChartLegendContent: ()=>ChartLegendContent,
+    createChartScope: ()=>createChartScope,
+    ChartTooltip: ()=>ChartTooltip,
+    ChartStyle: ()=>ChartStyle
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants");
+const react_context_namespaceObject = require("@radix-ui/react-context");
+const external_react_namespaceObject = require("react");
+const external_recharts_namespaceObject = require("recharts");
+const THEMES = {
+    dark: ".dark",
+    light: ""
+};
+const CHART_PROVIDER_NAME = "ChartProvider";
+const [createChartContext, createChartScope] = (0, react_context_namespaceObject.createContextScope)(CHART_PROVIDER_NAME);
+const [ChartContextProvider, useChartContext] = createChartContext(CHART_PROVIDER_NAME);
+function ChartContainer({ __scopeChart, children, className, config, id, ...props }) {
+    const uniqueId = (0, external_react_namespaceObject.useId)();
+    const chartId = `chart-${id ?? uniqueId}`;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ChartContextProvider, {
+        config: config,
+        scope: __scopeChart,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: (0, tailwind_variants_namespaceObject.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),
+            "data-chart": chartId,
+            "data-slot": "chart",
+            ...props,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ChartStyle, {
+                    config: config,
+                    id: chartId
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_recharts_namespaceObject.ResponsiveContainer, {
+                    children: children
+                })
+            ]
+        })
+    });
+}
+function ChartStyle({ config, id }) {
+    const colorConfig = Object.entries(config).filter(([, itemConfig])=>itemConfig.theme ?? itemConfig.color);
+    if (0 === colorConfig.length) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("style", {
+        dangerouslySetInnerHTML: {
+            __html: generateChartStyles(id, colorConfig)
+        }
+    });
+}
+const ChartTooltip = external_recharts_namespaceObject.Tooltip;
+const CHART_TOOLTIP_CONTENT_NAME = "ChartTooltipContent";
+function ChartTooltipContent({ __scopeChart, active, className, color, formatter, hideIndicator = false, hideLabel = false, indicator = "dot", label, labelClassName, labelFormatter, labelKey, nameKey, payload = [] }) {
+    const { config } = useChartContext(CHART_TOOLTIP_CONTENT_NAME, __scopeChart);
+    const tooltipLabel = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (hideLabel || 0 === payload.length) return null;
+        const [item] = payload;
+        const key = safeToString(labelKey ?? item.dataKey ?? item.name ?? "value");
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = labelKey || "string" != typeof label ? itemConfig?.label : label in config ? config[label].label ?? label : label;
+        if (labelFormatter) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: (0, tailwind_variants_namespaceObject.cn)("font-medium", labelClassName),
+            children: labelFormatter(value, payload)
+        });
+        if (!value) return null;
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: (0, tailwind_variants_namespaceObject.cn)("font-medium", labelClassName),
+            children: value
+        });
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey
+    ]);
+    if (!active || 0 === payload.length) return null;
+    const nestLabel = 1 === payload.length && "dot" !== indicator;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, tailwind_variants_namespaceObject.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-xl", className),
+        children: [
+            nestLabel ? null : tooltipLabel,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "grid gap-1.5",
+                children: payload.map((item, index)=>{
+                    const key = safeToString(nameKey ?? item.name ?? item.dataKey ?? "value");
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = color ?? (isRecord(item.payload) && "fill" in item.payload && "string" == typeof item.payload.fill ? item.payload.fill : void 0) ?? item.color;
+                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: (0, tailwind_variants_namespaceObject.cn)("flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-muted-foreground", "dot" === indicator && "items-center"),
+                        children: formatter && void 0 !== item.value && item.name ? formatter(item.value, item.name, item, index, [
+                            item
+                        ]) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                            children: [
+                                itemConfig?.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(itemConfig.icon, {}) : !hideIndicator && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: (0, tailwind_variants_namespaceObject.cn)("shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)", {
+                                        "h-2.5 w-2.5": "dot" === indicator,
+                                        "my-0.5": nestLabel && "dashed" === indicator,
+                                        "border-1.5 w-0 border-dashed bg-transparent": "dashed" === indicator,
+                                        "w-1": "line" === indicator
+                                    }),
+                                    style: {
+                                        "--color-bg": indicatorColor,
+                                        "--color-border": indicatorColor
+                                    }
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: (0, tailwind_variants_namespaceObject.cn)("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                            className: "grid gap-1.5",
+                                            children: [
+                                                nestLabel ? tooltipLabel : null,
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                    className: "text-muted-foreground",
+                                                    children: itemConfig?.label ?? item.name
+                                                })
+                                            ]
+                                        }),
+                                        null != item.value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            className: "font-mono font-medium text-foreground tabular-nums",
+                                            children: "number" == typeof item.value ? item.value.toLocaleString() : safeToString(item.value)
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }, key);
+                })
+            })
+        ]
+    });
+}
+const ChartLegend = external_recharts_namespaceObject.Legend;
+const CHART_LEGEND_CONTENT_NAME = "ChartLegendContent";
+function ChartLegendContent({ __scopeChart, className, hideIcon = false, nameKey, payload, verticalAlign = "bottom" }) {
+    const { config } = useChartContext(CHART_LEGEND_CONTENT_NAME, __scopeChart);
+    if (!payload?.length) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, tailwind_variants_namespaceObject.cn)("flex items-center justify-center gap-4", "top" === verticalAlign ? "pb-3" : "pt-3", className),
+        children: payload.map((item)=>{
+            let key = "value";
+            if (nameKey) key = nameKey;
+            else if (null != item.dataKey) key = safeToString(item.dataKey);
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: (0, tailwind_variants_namespaceObject.cn)("flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:text-muted-foreground"),
+                children: [
+                    itemConfig?.icon && !hideIcon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(itemConfig.icon, {}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "size-2 shrink-0 rounded-md",
+                        style: {
+                            backgroundColor: item.color
+                        }
+                    }),
+                    itemConfig?.label
+                ]
+            }, nameKey ? safeToString(itemConfig?.color ?? "") : safeToString(item.value ?? ""));
+        })
+    });
+}
+function isRecord(value) {
+    return "object" == typeof value && null !== value;
+}
+function getStringValue(record, key) {
+    if (key in record) {
+        const value = record[key];
+        return "string" == typeof value ? value : void 0;
+    }
+}
+function safeToString(value) {
+    if ("string" == typeof value) return value;
+    if ("number" == typeof value) return value.toString();
+    if (null == value) return "";
+    if ("boolean" == typeof value) return value.toString();
+    if ("bigint" == typeof value) return value.toString();
+    if ("symbol" == typeof value) return value.toString();
+    return "";
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (!isRecord(payload)) return;
+    const payloadPayload = isRecord(payload.payload) ? payload.payload : void 0;
+    let configLabelKey = key;
+    const payloadValue = getStringValue(payload, key);
+    if (payloadValue) configLabelKey = payloadValue;
+    else if (payloadPayload) {
+        const nestedValue = getStringValue(payloadPayload, key);
+        if (nestedValue) configLabelKey = nestedValue;
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+function generateCssVariable(key, itemConfig, theme) {
+    const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+}
+function generateThemeStyles(theme, prefix, id, colorConfig) {
+    const cssVariables = colorConfig.map(([key, itemConfig])=>generateCssVariable(key, itemConfig, theme)).filter(Boolean).join("\n");
+    return `${prefix} [data-chart=${id}] {\n${cssVariables}\n}`;
+}
+function generateChartStyles(id, colorConfig) {
+    return Object.entries(THEMES).map(([theme, prefix])=>generateThemeStyles(theme, prefix, id, colorConfig)).join("\n\n");
+}
+exports.ChartContainer = __webpack_exports__.ChartContainer;
+exports.ChartLegend = __webpack_exports__.ChartLegend;
+exports.ChartLegendContent = __webpack_exports__.ChartLegendContent;
+exports.ChartStyle = __webpack_exports__.ChartStyle;
+exports.ChartTooltip = __webpack_exports__.ChartTooltip;
+exports.ChartTooltipContent = __webpack_exports__.ChartTooltipContent;
+exports.createChartScope = __webpack_exports__.createChartScope;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ChartContainer",
+    "ChartLegend",
+    "ChartLegendContent",
+    "ChartStyle",
+    "ChartTooltip",
+    "ChartTooltipContent",
+    "createChartScope"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/chart.d.ts

@@ -1,7 +1,8 @@
+import type { Scope } from "@radix-ui/react-context";
 import type { ComponentProps, ComponentType, JSX, ReactNode } from "react";
 import type { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import type { TooltipContentProps, TooltipProps } from "recharts";
 import * as RechartsPrimitive from "recharts";
-import type { Scope } from "@radix-ui/react-context";
 type ExtractProps<T> = T extends (props: infer P) => ReactNode ? P : never;
 type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 declare const THEMES: {
@@ -32,9 +33,9 @@ interface ChartStyleProps {
     id: string;
 }
 declare function ChartStyle({ config, id }: ChartStyleProps): ReactNode;
-type ChartTooltipProps<TValue extends ValueType, TName extends NameType> = ComponentProps<typeof RechartsPrimitive.Tooltip<TValue, TName>>;
+type ChartTooltipProps<TValue extends ValueType, TName extends NameType> = TooltipProps<TValue, TName>;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
-type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType> = Omit<MakeOptional<ExtractProps<ComponentProps<typeof RechartsPrimitive.Tooltip<TValue, TName>>["content"]>, "accessibilityLayer" | "active" | "activeIndex" | "coordinate" | "payload">, "payload"> & {
+type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType> = Omit<MakeOptional<TooltipContentProps<TValue, TName>, "accessibilityLayer" | "active" | "activeIndex" | "coordinate" | "payload">, "payload"> & {
     hideIndicator?: boolean;
     hideLabel?: boolean;
     indicator?: "dashed" | "dot" | "line";
@@ -46,7 +47,7 @@ type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType>
 };
 declare function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({ __scopeChart, active, className, color, formatter, hideIndicator, hideLabel, indicator, label, labelClassName, labelFormatter, labelKey, nameKey, payload, }: ScopedProps<ChartTooltipContentProps<TValue, TName>>): ReactNode;
 type ChartLegendProps = ComponentProps<typeof RechartsPrimitive.Legend>;
-declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
 type ChartLegendContentProps = ComponentProps<"div"> & ExtractProps<RechartsPrimitive.LegendProps["content"]> & {
     hideIcon?: boolean;
     nameKey?: string;

package/dist/components/chart.js

@@ -1,4 +1,199 @@
 "use client";
-import{Fragment as e,jsx as t,jsxs as r}from"react/jsx-runtime";import{useId as n,useMemo as l}from"react";import{Legend as o,ResponsiveContainer as a,Tooltip as i}from"recharts";import{cn as d}from"@codefast/tailwind-variants";import{createContextScope as c}from"@radix-ui/react-context";let s={dark:".dark",light:""},u="ChartProvider",[f,m]=c(u),[h,p]=f(u);function g({__scopeChart:e,children:l,className:o,config:i,id:c,...s}){let u=n(),f=`chart-${c??u}`;return t(h,{config:i,scope:e,children:r("div",{className:d("[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",o),"data-chart":f,"data-slot":"chart",...s,children:[t(b,{config:i,id:f}),t(a,{children:l})]})})}function b({config:e,id:r}){var n,l;let o=Object.entries(e).filter(([,e])=>e.theme??e.color);return 0===o.length?null:t("style",{dangerouslySetInnerHTML:{__html:(n=r,l=o,Object.entries(s).map(([e,t])=>{let r;return r=l.map(([t,r])=>{let n;return(n=r.theme?.[e]??r.color)?`  --color-${t}: ${n};`:null}).filter(Boolean).join("\n"),`${t} [data-chart=${n}] {
-${r}
-}`}).join("\n\n"))}})}let v=i;function y({__scopeChart:n,active:o,className:a,color:i,formatter:c,hideIndicator:s=!1,hideLabel:u=!1,indicator:f="dot",label:m,labelClassName:h,labelFormatter:g,labelKey:b,nameKey:v,payload:y=[]}){let{config:x}=p("ChartTooltipContent",n),k=l(()=>{if(u||0===y.length)return null;let[e]=y,r=N(b??e.dataKey??e.name??"value"),n=j(x,e,r),l=b||"string"!=typeof m?n?.label:m in x?x[m].label??m:m;return g?t("div",{className:d("font-medium",h),children:g(l,y)}):l?t("div",{className:d("font-medium",h),children:l}):null},[m,g,y,u,h,x,b]);if(!o||0===y.length)return null;let C=1===y.length&&"dot"!==f;return r("div",{className:d("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",a),children:[C?null:k,t("div",{className:"grid gap-1.5",children:y.map((n,l)=>{let o=N(v??n.name??n.dataKey??"value"),a=j(x,n,o),u=i??(_(n.payload)&&"fill"in n.payload&&"string"==typeof n.payload.fill?n.payload.fill:void 0)??n.color;return t("div",{className:d("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5","dot"===f&&"items-center"),children:c&&void 0!==n.value&&n.name?c(n.value,n.name,n,l,[n]):r(e,{children:[a?.icon?t(a.icon,{}):!s&&t("div",{className:d("shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)",{"h-2.5 w-2.5":"dot"===f,"my-0.5":C&&"dashed"===f,"w-0 border-[1.5px] border-dashed bg-transparent":"dashed"===f,"w-1":"line"===f}),style:{"--color-bg":u,"--color-border":u}}),r("div",{className:d("flex flex-1 justify-between leading-none",C?"items-end":"items-center"),children:[r("div",{className:"grid gap-1.5",children:[C?k:null,t("span",{className:"text-muted-foreground",children:a?.label??n.name})]}),null!=n.value&&t("span",{className:"text-foreground font-mono font-medium tabular-nums",children:"number"==typeof n.value?n.value.toLocaleString():N(n.value)})]})]})},o)})})]})}let x=o;function k({__scopeChart:e,className:n,hideIcon:l=!1,nameKey:o,payload:a,verticalAlign:i="bottom"}){let{config:c}=p("ChartLegendContent",e);return a?.length?t("div",{className:d("flex items-center justify-center gap-4","top"===i?"pb-3":"pt-3",n),children:a.map(e=>{let n="value";o?n=o:null!=e.dataKey&&(n=N(e.dataKey));let a=j(c,e,n);return r("div",{className:d("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3"),children:[a?.icon&&!l?t(a.icon,{}):t("div",{className:"size-2 shrink-0 rounded-md",style:{backgroundColor:e.color}}),a?.label]},o?N(a?.color??""):N(e.value??""))})}):null}function _(e){return"object"==typeof e&&null!==e}function C(e,t){if(t in e){let r=e[t];return"string"==typeof r?r:void 0}}function N(e){return"string"==typeof e?e:"number"==typeof e?e.toString():null==e?"":"boolean"==typeof e||"bigint"==typeof e||"symbol"==typeof e?e.toString():""}function j(e,t,r){if(!_(t))return;let n=_(t.payload)?t.payload:void 0,l=r,o=C(t,r);if(o)l=o;else if(n){let e=C(n,r);e&&(l=e)}return l in e?e[l]:e[r]}export{g as ChartContainer,x as ChartLegend,k as ChartLegendContent,b as ChartStyle,v as ChartTooltip,y as ChartTooltipContent,m as createChartScope};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@codefast/tailwind-variants";
+import { createContextScope } from "@radix-ui/react-context";
+import { useId, useMemo } from "react";
+import { Legend, ResponsiveContainer, Tooltip } from "recharts";
+const THEMES = {
+    dark: ".dark",
+    light: ""
+};
+const CHART_PROVIDER_NAME = "ChartProvider";
+const [createChartContext, createChartScope] = createContextScope(CHART_PROVIDER_NAME);
+const [ChartContextProvider, useChartContext] = createChartContext(CHART_PROVIDER_NAME);
+function ChartContainer({ __scopeChart, children, className, config, id, ...props }) {
+    const uniqueId = useId();
+    const chartId = `chart-${id ?? uniqueId}`;
+    return /*#__PURE__*/ jsx(ChartContextProvider, {
+        config: config,
+        scope: __scopeChart,
+        children: /*#__PURE__*/ jsxs("div", {
+            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),
+            "data-chart": chartId,
+            "data-slot": "chart",
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx(ChartStyle, {
+                    config: config,
+                    id: chartId
+                }),
+                /*#__PURE__*/ jsx(ResponsiveContainer, {
+                    children: children
+                })
+            ]
+        })
+    });
+}
+function ChartStyle({ config, id }) {
+    const colorConfig = Object.entries(config).filter(([, itemConfig])=>itemConfig.theme ?? itemConfig.color);
+    if (0 === colorConfig.length) return null;
+    return /*#__PURE__*/ jsx("style", {
+        dangerouslySetInnerHTML: {
+            __html: generateChartStyles(id, colorConfig)
+        }
+    });
+}
+const ChartTooltip = Tooltip;
+const CHART_TOOLTIP_CONTENT_NAME = "ChartTooltipContent";
+function ChartTooltipContent({ __scopeChart, active, className, color, formatter, hideIndicator = false, hideLabel = false, indicator = "dot", label, labelClassName, labelFormatter, labelKey, nameKey, payload = [] }) {
+    const { config } = useChartContext(CHART_TOOLTIP_CONTENT_NAME, __scopeChart);
+    const tooltipLabel = useMemo(()=>{
+        if (hideLabel || 0 === payload.length) return null;
+        const [item] = payload;
+        const key = safeToString(labelKey ?? item.dataKey ?? item.name ?? "value");
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = labelKey || "string" != typeof label ? itemConfig?.label : label in config ? config[label].label ?? label : label;
+        if (labelFormatter) return /*#__PURE__*/ jsx("div", {
+            className: cn("font-medium", labelClassName),
+            children: labelFormatter(value, payload)
+        });
+        if (!value) return null;
+        return /*#__PURE__*/ jsx("div", {
+            className: cn("font-medium", labelClassName),
+            children: value
+        });
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey
+    ]);
+    if (!active || 0 === payload.length) return null;
+    const nestLabel = 1 === payload.length && "dot" !== indicator;
+    return /*#__PURE__*/ 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-xl", className),
+        children: [
+            nestLabel ? null : tooltipLabel,
+            /*#__PURE__*/ jsx("div", {
+                className: "grid gap-1.5",
+                children: payload.map((item, index)=>{
+                    const key = safeToString(nameKey ?? item.name ?? item.dataKey ?? "value");
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = color ?? (isRecord(item.payload) && "fill" in item.payload && "string" == typeof item.payload.fill ? item.payload.fill : void 0) ?? item.color;
+                    return /*#__PURE__*/ jsx("div", {
+                        className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-muted-foreground", "dot" === indicator && "items-center"),
+                        children: formatter && void 0 !== item.value && item.name ? formatter(item.value, item.name, item, index, [
+                            item
+                        ]) : /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                itemConfig?.icon ? /*#__PURE__*/ jsx(itemConfig.icon, {}) : !hideIndicator && /*#__PURE__*/ jsx("div", {
+                                    className: cn("shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)", {
+                                        "h-2.5 w-2.5": "dot" === indicator,
+                                        "my-0.5": nestLabel && "dashed" === indicator,
+                                        "border-1.5 w-0 border-dashed bg-transparent": "dashed" === indicator,
+                                        "w-1": "line" === indicator
+                                    }),
+                                    style: {
+                                        "--color-bg": indicatorColor,
+                                        "--color-border": indicatorColor
+                                    }
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
+                                    children: [
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "grid gap-1.5",
+                                            children: [
+                                                nestLabel ? tooltipLabel : null,
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "text-muted-foreground",
+                                                    children: itemConfig?.label ?? item.name
+                                                })
+                                            ]
+                                        }),
+                                        null != item.value && /*#__PURE__*/ jsx("span", {
+                                            className: "font-mono font-medium text-foreground tabular-nums",
+                                            children: "number" == typeof item.value ? item.value.toLocaleString() : safeToString(item.value)
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }, key);
+                })
+            })
+        ]
+    });
+}
+const ChartLegend = Legend;
+const CHART_LEGEND_CONTENT_NAME = "ChartLegendContent";
+function ChartLegendContent({ __scopeChart, className, hideIcon = false, nameKey, payload, verticalAlign = "bottom" }) {
+    const { config } = useChartContext(CHART_LEGEND_CONTENT_NAME, __scopeChart);
+    if (!payload?.length) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("flex items-center justify-center gap-4", "top" === verticalAlign ? "pb-3" : "pt-3", className),
+        children: payload.map((item)=>{
+            let key = "value";
+            if (nameKey) key = nameKey;
+            else if (null != item.dataKey) key = safeToString(item.dataKey);
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return /*#__PURE__*/ jsxs("div", {
+                className: cn("flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:text-muted-foreground"),
+                children: [
+                    itemConfig?.icon && !hideIcon ? /*#__PURE__*/ jsx(itemConfig.icon, {}) : /*#__PURE__*/ jsx("div", {
+                        className: "size-2 shrink-0 rounded-md",
+                        style: {
+                            backgroundColor: item.color
+                        }
+                    }),
+                    itemConfig?.label
+                ]
+            }, nameKey ? safeToString(itemConfig?.color ?? "") : safeToString(item.value ?? ""));
+        })
+    });
+}
+function isRecord(value) {
+    return "object" == typeof value && null !== value;
+}
+function getStringValue(record, key) {
+    if (key in record) {
+        const value = record[key];
+        return "string" == typeof value ? value : void 0;
+    }
+}
+function safeToString(value) {
+    if ("string" == typeof value) return value;
+    if ("number" == typeof value) return value.toString();
+    if (null == value) return "";
+    if ("boolean" == typeof value) return value.toString();
+    if ("bigint" == typeof value) return value.toString();
+    if ("symbol" == typeof value) return value.toString();
+    return "";
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (!isRecord(payload)) return;
+    const payloadPayload = isRecord(payload.payload) ? payload.payload : void 0;
+    let configLabelKey = key;
+    const payloadValue = getStringValue(payload, key);
+    if (payloadValue) configLabelKey = payloadValue;
+    else if (payloadPayload) {
+        const nestedValue = getStringValue(payloadPayload, key);
+        if (nestedValue) configLabelKey = nestedValue;
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+function generateCssVariable(key, itemConfig, theme) {
+    const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+}
+function generateThemeStyles(theme, prefix, id, colorConfig) {
+    const cssVariables = colorConfig.map(([key, itemConfig])=>generateCssVariable(key, itemConfig, theme)).filter(Boolean).join("\n");
+    return `${prefix} [data-chart=${id}] {\n${cssVariables}\n}`;
+}
+function generateChartStyles(id, colorConfig) {
+    return Object.entries(THEMES).map(([theme, prefix])=>generateThemeStyles(theme, prefix, id, colorConfig)).join("\n\n");
+}
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, createChartScope };

package/dist/components/checkbox-cards.cjs

@@ -1,2 +1,70 @@
+"use strict";
 "use client";
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,r)=>{for(var a in r)__webpack_require__.o(r,a)&&!__webpack_require__.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:r[a]})},__webpack_require__.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CheckboxCards:()=>CheckboxCards,CheckboxCardsItem:()=>CheckboxCardsItem});const jsx_runtime_namespaceObject=require("react/jsx-runtime"),external_lucide_react_namespaceObject=require("lucide-react"),external_label_cjs_namespaceObject=require("./label.cjs"),checkbox_group_cjs_namespaceObject=require("../primitives/checkbox-group.cjs"),tailwind_variants_namespaceObject=require("@codefast/tailwind-variants");function CheckboxCards(e){return(0,jsx_runtime_namespaceObject.jsx)(checkbox_group_cjs_namespaceObject.Root,{"data-slot":"checkbox-cards",...e})}function CheckboxCardsItem({checkboxClassName:e,children:r,className:a,...c}){return(0,jsx_runtime_namespaceObject.jsxs)(external_label_cjs_namespaceObject.Label,{className:(0,tailwind_variants_namespaceObject.cn)("border-input hover:not-has-disabled:not-has-aria-checked:bg-secondary has-aria-checked:bg-primary/10 has-aria-checked:border-primary has-focus-visible:border-ring flex items-start gap-3 rounded-lg border p-3 transition has-disabled:opacity-50",a),"data-slot":"checkbox-card",children:[(0,jsx_runtime_namespaceObject.jsx)(checkbox_group_cjs_namespaceObject.Item,{className:(0,tailwind_variants_namespaceObject.cn)("border-input text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:aria-checked:ring-primary/20 dark:focus-visible:aria-checked:ring-primary/40 aria-checked:border-primary aria-checked:bg-primary dark:bg-input/30 peer flex size-4 shrink-0 rounded-sm border shadow-xs outline-hidden transition focus-visible:ring-3",e),"data-slot":"checkbox-card-item",...c,children:(0,jsx_runtime_namespaceObject.jsx)(checkbox_group_cjs_namespaceObject.CheckboxGroupIndicator,{"data-slot":"checkbox-card-indicator",children:(0,jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CheckIcon,{className:"size-3.5"})})}),r]})}for(var __webpack_i__ in exports.CheckboxCards=__webpack_exports__.CheckboxCards,exports.CheckboxCardsItem=__webpack_exports__.CheckboxCardsItem,__webpack_exports__)-1===["CheckboxCards","CheckboxCardsItem"].indexOf(__webpack_i__)&&(exports[__webpack_i__]=__webpack_exports__[__webpack_i__]);Object.defineProperty(exports,"__esModule",{value:!0});
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    CheckboxCards: ()=>CheckboxCards,
+    CheckboxCardsItem: ()=>CheckboxCardsItem
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_label_cjs_namespaceObject = require("./label.cjs");
+const checkbox_group_cjs_namespaceObject = require("../primitives/checkbox-group.cjs");
+function CheckboxCards(props) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(checkbox_group_cjs_namespaceObject.Root, {
+        "data-slot": "checkbox-cards",
+        ...props
+    });
+}
+function CheckboxCardsItem({ checkboxClassName, children, className, ...props }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_label_cjs_namespaceObject.Label, {
+        className: (0, tailwind_variants_namespaceObject.cn)("flex items-start gap-3 rounded-lg border border-input p-3 transition hover:not-has-disabled:not-has-aria-checked:bg-secondary has-focus-visible:border-ring has-disabled:opacity-50 has-aria-checked:border-primary has-aria-checked:bg-primary/10", className),
+        "data-slot": "checkbox-card",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(checkbox_group_cjs_namespaceObject.Item, {
+                className: (0, tailwind_variants_namespaceObject.cn)("peer flex size-4 shrink-0 rounded-sm border border-input text-primary-foreground shadow-xs outline-hidden transition focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-checked:border-primary aria-checked:bg-primary focus-visible:aria-checked:ring-primary/20 dark:bg-input/30 dark:focus-visible:aria-checked:ring-primary/40", checkboxClassName),
+                "data-slot": "checkbox-card-item",
+                ...props,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(checkbox_group_cjs_namespaceObject.CheckboxGroupIndicator, {
+                    "data-slot": "checkbox-card-indicator",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CheckIcon, {
+                        className: "size-3.5"
+                    })
+                })
+            }),
+            children
+        ]
+    });
+}
+exports.CheckboxCards = __webpack_exports__.CheckboxCards;
+exports.CheckboxCardsItem = __webpack_exports__.CheckboxCardsItem;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CheckboxCards",
+    "CheckboxCardsItem"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/checkbox-cards.js

@@ -1,2 +1,33 @@
 "use client";
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import{CheckIcon as i}from"lucide-react";import{Label as a}from"./label.js";import{CheckboxGroupIndicator as o,Item as c,Root as s}from"../primitives/checkbox-group.js";import{cn as d}from"@codefast/tailwind-variants";function t(e){return r(s,{"data-slot":"checkbox-cards",...e})}function n({checkboxClassName:s,children:t,className:n,...b}){return e(a,{className:d("border-input hover:not-has-disabled:not-has-aria-checked:bg-secondary has-aria-checked:bg-primary/10 has-aria-checked:border-primary has-focus-visible:border-ring flex items-start gap-3 rounded-lg border p-3 transition has-disabled:opacity-50",n),"data-slot":"checkbox-card",children:[r(c,{className:d("border-input text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:aria-checked:ring-primary/20 dark:focus-visible:aria-checked:ring-primary/40 aria-checked:border-primary aria-checked:bg-primary dark:bg-input/30 peer flex size-4 shrink-0 rounded-sm border shadow-xs outline-hidden transition focus-visible:ring-3",s),"data-slot":"checkbox-card-item",...b,children:r(o,{"data-slot":"checkbox-card-indicator",children:r(i,{className:"size-3.5"})})}),t]})}export{t as CheckboxCards,n as CheckboxCardsItem};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@codefast/tailwind-variants";
+import { CheckIcon } from "lucide-react";
+import { Label } from "./label.js";
+import { CheckboxGroupIndicator, Item, Root } from "../primitives/checkbox-group.js";
+function CheckboxCards(props) {
+    return /*#__PURE__*/ jsx(Root, {
+        "data-slot": "checkbox-cards",
+        ...props
+    });
+}
+function CheckboxCardsItem({ checkboxClassName, children, className, ...props }) {
+    return /*#__PURE__*/ jsxs(Label, {
+        className: cn("flex items-start gap-3 rounded-lg border border-input p-3 transition hover:not-has-disabled:not-has-aria-checked:bg-secondary has-focus-visible:border-ring has-disabled:opacity-50 has-aria-checked:border-primary has-aria-checked:bg-primary/10", className),
+        "data-slot": "checkbox-card",
+        children: [
+            /*#__PURE__*/ jsx(Item, {
+                className: cn("peer flex size-4 shrink-0 rounded-sm border border-input text-primary-foreground shadow-xs outline-hidden transition focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-checked:border-primary aria-checked:bg-primary focus-visible:aria-checked:ring-primary/20 dark:bg-input/30 dark:focus-visible:aria-checked:ring-primary/40", checkboxClassName),
+                "data-slot": "checkbox-card-item",
+                ...props,
+                children: /*#__PURE__*/ jsx(CheckboxGroupIndicator, {
+                    "data-slot": "checkbox-card-indicator",
+                    children: /*#__PURE__*/ jsx(CheckIcon, {
+                        className: "size-3.5"
+                    })
+                })
+            }),
+            children
+        ]
+    });
+}
+export { CheckboxCards, CheckboxCardsItem };