@kala-ui/react 0.0.1-beta.1

package/dist/src/components/charts/utils.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Chart Utilities
+ * Helper functions and default configurations for charts
+ */
+import type { ApexOptions } from "apexcharts";
+/**
+ * Get default chart options that match our design system
+ * @param theme - Optional theme override, otherwise detects from DOM
+ */
+export declare function getDefaultChartOptions(theme?: "light" | "dark" | "neutral" | "accent"): ApexOptions;
+/**
+ * Default color palette matching design tokens
+ * @param theme - Optional theme override, otherwise detects from DOM
+ * @deprecated Use getChartColors() instead for theme-aware colors
+ */
+export declare function defaultColors(theme?: "light" | "dark" | "neutral" | "accent"): {
+    primary: import("./theme-utils").ColorPalette;
+    success: import("./theme-utils").ColorPalette;
+    warning: import("./theme-utils").ColorPalette;
+    destructive: import("./theme-utils").ColorPalette;
+    info: import("./theme-utils").ColorPalette;
+    mixed: import("./theme-utils").ColorPalette;
+};
+/**
+ * Format number with appropriate units
+ */
+export declare function formatNumber(value: number): string;
+/**
+ * Format currency values
+ */
+export declare function formatCurrency(value: number, currency?: string): string;
+/**
+ * Format percentage values
+ */
+export declare function formatPercentage(value: number, decimals?: number): string;
+/**
+ * Generate gradient colors for area charts
+ */
+export declare function createGradient(_color: string, opacity?: number): {
+    type: "gradient";
+    gradient: {
+        shadeIntensity: number;
+        opacityFrom: number;
+        opacityTo: number;
+        stops: number[];
+    };
+};
+/**
+ * Get responsive breakpoints for charts
+ */
+export declare function getResponsiveOptions(): ApexResponsive[];
+interface ApexResponsive {
+    breakpoint: number;
+    options: ApexOptions;
+}
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/dist/src/components/charts/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG9C;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAqCnG;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ;;;;;;;EAU5E;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAQlD;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAQ,GAAG,MAAM,CAOtE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,MAAM,CAEpE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC7B,MAAM,EAAE,MAAM,EACd,OAAO,SAAM,GACX;IACF,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE;QACT,cAAc,EAAE,MAAM,CAAC;QACvB,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,EAAE,CAAC;KAChB,CAAC;CACF,CAUA;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,EAAE,CAyBvD;AAED,UAAU,cAAc;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC;CACrB"}

package/dist/src/components/charts/utils.js

@@ -0,0 +1,135 @@
+/**
+ * Chart Utilities
+ * Helper functions and default configurations for charts
+ */
+import { getChartColors, getThemeAwareChartOptions } from "./theme-utils";
+/**
+ * Get default chart options that match our design system
+ * @param theme - Optional theme override, otherwise detects from DOM
+ */
+export function getDefaultChartOptions(theme) {
+    const themeColors = getChartColors(theme);
+    const themeOptions = getThemeAwareChartOptions(theme);
+    return {
+        chart: {
+            fontFamily: "inherit",
+            foreColor: "hsl(var(--muted-foreground))",
+            background: "transparent",
+            toolbar: {
+                show: false,
+            },
+            zoom: {
+                enabled: false,
+            },
+        },
+        grid: {
+            borderColor: themeColors.grid,
+            strokeDashArray: 3,
+            xaxis: {
+                lines: {
+                    show: false,
+                },
+            },
+        },
+        dataLabels: {
+            enabled: false,
+        },
+        tooltip: {
+            theme: themeOptions.tooltip.theme,
+        },
+        legend: {
+            labels: {
+                colors: themeOptions.legend.labels.colors,
+            },
+        },
+    };
+}
+/**
+ * Default color palette matching design tokens
+ * @param theme - Optional theme override, otherwise detects from DOM
+ * @deprecated Use getChartColors() instead for theme-aware colors
+ */
+export function defaultColors(theme) {
+    const colors = getChartColors(theme);
+    return {
+        primary: colors.primary,
+        success: colors.success,
+        warning: colors.warning,
+        destructive: colors.destructive,
+        info: colors.info,
+        mixed: colors.mixed,
+    };
+}
+/**
+ * Format number with appropriate units
+ */
+export function formatNumber(value) {
+    if (value >= 1000000) {
+        return `${(value / 1000000).toFixed(1)}M`;
+    }
+    if (value >= 1000) {
+        return `${(value / 1000).toFixed(1)}K`;
+    }
+    return value.toFixed(0);
+}
+/**
+ * Format currency values
+ */
+export function formatCurrency(value, currency = "USD") {
+    return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+    }).format(value);
+}
+/**
+ * Format percentage values
+ */
+export function formatPercentage(value, decimals = 1) {
+    return `${value.toFixed(decimals)}%`;
+}
+/**
+ * Generate gradient colors for area charts
+ */
+export function createGradient(_color, opacity = 0.7) {
+    return {
+        type: "gradient",
+        gradient: {
+            shadeIntensity: 1,
+            opacityFrom: opacity,
+            opacityTo: opacity * 0.3,
+            stops: [0, 90, 100],
+        },
+    };
+}
+/**
+ * Get responsive breakpoints for charts
+ */
+export function getResponsiveOptions() {
+    return [
+        {
+            breakpoint: 768,
+            options: {
+                chart: {
+                    height: 300,
+                },
+                legend: {
+                    position: "bottom",
+                },
+            },
+        },
+        {
+            breakpoint: 480,
+            options: {
+                chart: {
+                    height: 250,
+                },
+                legend: {
+                    show: false,
+                },
+            },
+        },
+    ];
+}
+//# sourceMappingURL=utils.js.map

package/dist/src/components/charts/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/charts/utils.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+import type { CheckboxProps } from "./checkbox.types";
+declare function Checkbox({ className, isLoading, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/src/components/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,SAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAuB1E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/src/components/checkbox/checkbox.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import { checkboxIndicatorStyles, checkboxStyles } from "../../config/checkbox";
+import { cn } from "../../lib/utils";
+import { Skeleton } from "../skeleton/skeleton";
+function Checkbox({ className, isLoading = false, ...props }) {
+    if (isLoading) {
+        return _jsx(Skeleton, { className: cn("h-4 w-4 rounded", className) });
+    }
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn(checkboxStyles.base, className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: checkboxIndicatorStyles.base, children: props.checked === "indeterminate" ? (_jsx(Minus, { className: "size-3.5 stroke-3" })) : (_jsx(Check, { className: "size-3.5 stroke-3" })) }) }));
+}
+export { Checkbox };
+//# sourceMappingURL=checkbox.js.map

package/dist/src/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAChF,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGhD,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,EAAiB;IAC1E,IAAI,SAAS,EAAE,CAAC;QACf,OAAO,KAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,GAAI,CAAC;IAClE,CAAC;IAED,OAAO,CACN,KAAC,iBAAiB,CAAC,IAAI,iBACZ,UAAU,EACpB,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,SAAS,CAAC,KACzC,KAAK,YAET,KAAC,iBAAiB,CAAC,SAAS,iBACjB,oBAAoB,EAC9B,SAAS,EAAE,uBAAuB,CAAC,IAAI,YAEtC,KAAK,CAAC,OAAO,KAAK,eAAe,CAAC,CAAC,CAAC,CACpC,KAAC,KAAK,IAAC,SAAS,EAAC,mBAAmB,GAAG,CACvC,CAAC,CAAC,CAAC,CACH,KAAC,KAAK,IAAC,SAAS,EAAC,mBAAmB,GAAG,CACvC,GAC4B,GACN,CACzB,CAAC;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/src/components/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,28 @@
+import type { StoryObj } from "@storybook/react";
+import { Checkbox } from "./checkbox";
+declare const meta: {
+    title: string;
+    component: typeof Checkbox;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        checked: {
+            control: "select";
+            options: (string | boolean)[];
+        };
+        disabled: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const AllStates: Story;
+export declare const WithLabels: Story;
+export declare const MultipleOptions: Story;
+export declare const FormExamples: Story;
+export declare const SelectAllInteractive: Story;
+export declare const LoadingSkeleton: Story;
+//# sourceMappingURL=checkbox.stories.d.ts.map

package/dist/src/components/checkbox/checkbox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAgBuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,SAAS,EAAE,KAqCvB,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KA+BxB,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAoD7B,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KA+D1B,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,KA4DlC,CAAC;AACF,eAAO,MAAM,eAAe,EAAE,KAwB7B,CAAC"}

package/dist/src/components/checkbox/checkbox.stories.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Label } from "../label";
+import { Skeleton } from "../skeleton/skeleton";
+import { Checkbox } from "./checkbox";
+const meta = {
+    title: "Forms/Checkbox",
+    component: Checkbox,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        checked: {
+            control: "select",
+            options: [true, false, "indeterminate"],
+        },
+        disabled: {
+            control: "boolean",
+        },
+    },
+};
+export default meta;
+// All States Showcase
+export const AllStates = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-40 text-sm font-medium", children: "Unchecked:" }), _jsx(Checkbox, { "aria-label": "Unchecked checkbox" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-40 text-sm font-medium", children: "Checked:" }), _jsx(Checkbox, { defaultChecked: true, "aria-label": "Checked checkbox" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-40 text-sm font-medium", children: "Indeterminate:" }), _jsx(Checkbox, { checked: "indeterminate", "aria-label": "Indeterminate checkbox" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-40 text-sm font-medium", children: "Disabled:" }), _jsx(Checkbox, { disabled: true, "aria-label": "Disabled unchecked checkbox" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-40 text-sm font-medium", children: "Disabled Checked:" }), _jsx(Checkbox, { disabled: true, defaultChecked: true, "aria-label": "Disabled checked checkbox" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-40 text-sm font-medium", children: "Disabled Indeterminate:" }), _jsx(Checkbox, { disabled: true, checked: "indeterminate", "aria-label": "Disabled indeterminate checkbox" })] })] })),
+};
+// With Labels and Descriptions
+export const WithLabels = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "simple-label" }), _jsx(Label, { htmlFor: "simple-label", children: "Accept terms and conditions" })] }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Checkbox, { id: "with-description", defaultChecked: true }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "with-description", children: "Enable notifications" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "You can enable or disable notifications at any time in your settings." })] })] }), _jsxs(Label, { htmlFor: "interactive-card", className: "flex cursor-pointer items-start gap-3 rounded-lg border border-input p-4 transition-all hover:bg-accent hover:text-accent-foreground has-aria-checked:border-primary has-aria-checked:bg-primary/10 h-auto", children: [_jsx(Checkbox, { id: "interactive-card", defaultChecked: true }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx("p", { className: "text-sm font-medium leading-none", children: "Marketing emails" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Receive emails about new products, features, and updates." })] })] })] })),
+};
+// Multiple Options and Layouts
+export const MultipleOptions = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsxs("div", { children: [_jsx("h4", { className: "mb-3 text-sm font-semibold", children: "Vertical Layout" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "option1", defaultChecked: true }), _jsx(Label, { htmlFor: "option1", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "option2" }), _jsx(Label, { htmlFor: "option2", children: "Option 2" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "option3", defaultChecked: true }), _jsx(Label, { htmlFor: "option3", children: "Option 3" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "option4", disabled: true }), _jsx(Label, { htmlFor: "option4", className: "text-muted-foreground", children: "Disabled option" })] })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "mb-3 text-sm font-semibold", children: "Inline Layout" }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "inline1", defaultChecked: true }), _jsx(Label, { htmlFor: "inline1", children: "Option A" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "inline2" }), _jsx(Label, { htmlFor: "inline2", children: "Option B" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "inline3", defaultChecked: true }), _jsx(Label, { htmlFor: "inline3", children: "Option C" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "inline4" }), _jsx(Label, { htmlFor: "inline4", children: "Option D" })] })] })] })] })),
+};
+// Form Examples
+export const FormExamples = {
+    render: () => (_jsxs("div", { className: "flex gap-6", children: [_jsxs("div", { className: "w-72 rounded-md border p-4", children: [_jsx("h4", { className: "mb-4 text-base font-semibold", children: "Notification Preferences" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "email-pref", defaultChecked: true }), _jsx(Label, { htmlFor: "email-pref", children: "Email notifications" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "push-pref", defaultChecked: true }), _jsx(Label, { htmlFor: "push-pref", children: "Push notifications" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "sms-pref" }), _jsx(Label, { htmlFor: "sms-pref", children: "SMS notifications" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "marketing-pref" }), _jsx(Label, { htmlFor: "marketing-pref", children: "Marketing emails" })] })] })] }), _jsxs("div", { className: "w-80 space-y-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "mb-3 text-sm font-semibold", children: "Account Settings" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "public-profile" }), _jsx(Label, { htmlFor: "public-profile", children: "Make profile public" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "show-email" }), _jsx(Label, { htmlFor: "show-email", children: "Show email address" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "searchable", defaultChecked: true }), _jsx(Label, { htmlFor: "searchable", children: "Searchable by others" })] })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "mb-3 text-sm font-semibold", children: "Privacy" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "analytics", defaultChecked: true }), _jsx(Label, { htmlFor: "analytics", children: "Analytics cookies" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "cookies" }), _jsx(Label, { htmlFor: "cookies", children: "Marketing cookies" })] })] })] })] })] })),
+};
+// Select All with Indeterminate (Interactive)
+export const SelectAllInteractive = {
+    render: function SelectAllComponent() {
+        const [items, setItems] = useState([
+            { id: 1, label: "Item 1", checked: false },
+            { id: 2, label: "Item 2", checked: false },
+            { id: 3, label: "Item 3", checked: false },
+            { id: 4, label: "Item 4", checked: false },
+        ]);
+        const checkedCount = items.filter((item) => item.checked).length;
+        const allChecked = checkedCount === items.length;
+        const someChecked = checkedCount > 0 && checkedCount < items.length;
+        const handleSelectAll = () => {
+            setItems(items.map((item) => ({ ...item, checked: !allChecked })));
+        };
+        const handleItemChange = (id) => {
+            setItems(items.map((item) => item.id === id ? { ...item, checked: !item.checked } : item));
+        };
+        return (_jsxs("div", { className: "w-80 rounded-md border p-4", children: [_jsxs("div", { className: "mb-4 flex items-center gap-2 border-b pb-3", children: [_jsx(Checkbox, { id: "select-all", checked: allChecked ? true : someChecked ? "indeterminate" : false, onCheckedChange: handleSelectAll, "aria-label": allChecked
+                                ? "Deselect all items"
+                                : someChecked
+                                    ? "Select all items (partial selection)"
+                                    : "Select all items" }), _jsxs(Label, { htmlFor: "select-all", className: "font-semibold", children: ["Select All (", checkedCount, "/", items.length, ")"] })] }), _jsx("div", { className: "flex flex-col gap-3", children: items.map((item) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: `item-${item.id}`, checked: item.checked, onCheckedChange: () => handleItemChange(item.id), "aria-label": `${item.checked ? "Deselect" : "Select"} ${item.label}` }), _jsx(Label, { htmlFor: `item-${item.id}`, children: item.label })] }, item.id))) })] }));
+    },
+};
+export const LoadingSkeleton = {
+    render: () => (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-4 rounded" }), _jsx(Skeleton, { className: "h-4 w-32" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-4 rounded" }), _jsx(Skeleton, { className: "h-4 w-40" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-4 rounded" }), _jsx(Skeleton, { className: "h-4 w-36" })] })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: "Loading skeleton placeholders for checkbox options while loading.",
+            },
+        },
+    },
+};
+//# sourceMappingURL=checkbox.stories.js.map

package/dist/src/components/checkbox/checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/checkbox/checkbox.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=checkbox.test.d.ts.map

package/dist/src/components/checkbox/checkbox.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.test.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.test.tsx"],"names":[],"mappings":""}

package/dist/src/components/checkbox/checkbox.test.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Checkbox } from "./checkbox";
+describe("Checkbox", () => {
+    it("should render checkbox", () => {
+        render(_jsx(Checkbox, {}));
+        const checkbox = screen.getByRole("checkbox");
+        expect(checkbox).toBeInTheDocument();
+    });
+    it("should be unchecked by default", () => {
+        render(_jsx(Checkbox, {}));
+        const checkbox = screen.getByRole("checkbox");
+        expect(checkbox).not.toBeChecked();
+    });
+    it("should toggle checked state when clicked", async () => {
+        const user = userEvent.setup();
+        const handleChange = vi.fn();
+        render(_jsx(Checkbox, { onCheckedChange: handleChange }));
+        const checkbox = screen.getByRole("checkbox");
+        await user.click(checkbox);
+        expect(handleChange).toHaveBeenCalledWith(true);
+    });
+    it("should render as checked when checked prop is true", () => {
+        render(_jsx(Checkbox, { checked: true }));
+        const checkbox = screen.getByRole("checkbox");
+        expect(checkbox).toBeChecked();
+    });
+    it("should be disabled when disabled prop is true", () => {
+        render(_jsx(Checkbox, { disabled: true }));
+        const checkbox = screen.getByRole("checkbox");
+        expect(checkbox).toBeDisabled();
+    });
+    it("should apply custom className", () => {
+        const { container } = render(_jsx(Checkbox, { className: "custom-checkbox" }));
+        const checkbox = container.querySelector('[data-slot="checkbox"]');
+        expect(checkbox).toHaveClass("custom-checkbox");
+    });
+    it("should render with aria-invalid when invalid", () => {
+        render(_jsx(Checkbox, { "aria-invalid": true }));
+        const checkbox = screen.getByRole("checkbox");
+        expect(checkbox).toHaveAttribute("aria-invalid");
+    });
+    it("should render check icon when checked", () => {
+        const { container } = render(_jsx(Checkbox, { checked: true }));
+        const indicator = container.querySelector('[data-slot="checkbox-indicator"]');
+        expect(indicator).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=checkbox.test.js.map

package/dist/src/components/checkbox/checkbox.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.test.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.test.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/checkbox/checkbox.types.d.ts

@@ -0,0 +1,7 @@
+import type * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import type * as React from "react";
+export interface CheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
+    /** Show loading skeleton */
+    isLoading?: boolean;
+}
+//# sourceMappingURL=checkbox.types.d.ts.map

package/dist/src/components/checkbox/checkbox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.types.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AACnE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,aAChB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC;IAC3D,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/src/components/checkbox/checkbox.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=checkbox.types.js.map

package/dist/src/components/checkbox/checkbox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.types.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.types.ts"],"names":[],"mappings":""}

package/dist/src/components/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox } from "./checkbox";
+export type { CheckboxProps } from "./checkbox.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/src/components/checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox } from "./checkbox";
+//# sourceMappingURL=index.js.map

package/dist/src/components/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/components/combobox/combobox-skeleton.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Combobox Skeleton Component
+ *
+ * Loading placeholder for the Combobox component.
+ * Supports both single and multi-select appearances.
+ */
+export interface ComboboxSkeletonConfig {
+    /**
+     * Multi-select mode (shows selected tags)
+     */
+    multiSelect?: boolean;
+    /**
+     * Number of selected items to show (for multi-select)
+     */
+    selectedCount?: number;
+    /**
+     * Size variant
+     */
+    size?: "sm" | "default";
+}
+export interface ComboboxSkeletonProps extends ComboboxSkeletonConfig {
+    /**
+     * Additional className for the skeleton container
+     */
+    className?: string;
+    /**
+     * Test ID for querying the element
+     */
+    "data-testid"?: string;
+}
+/**
+ * Combobox skeleton component
+ *
+ * @example
+ * ```tsx
+ * <ComboboxSkeleton />
+ *
+ * <ComboboxSkeleton multiSelect selectedCount={3} />
+ * ```
+ */
+export declare function ComboboxSkeleton({ multiSelect, selectedCount, size, className, "data-testid": dataTestId, }: ComboboxSkeletonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=combobox-skeleton.d.ts.map

package/dist/src/components/combobox/combobox-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-skeleton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,MAAM,WAAW,sBAAsB;IACtC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB;IACpE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,EAChC,WAAmB,EACnB,aAAiB,EACjB,IAAgB,EAChB,SAAS,EACT,aAAa,EAAE,UAAU,GACzB,EAAE,qBAAqB,2CA4BvB"}

package/dist/src/components/combobox/combobox-skeleton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Combobox Skeleton Component
+ *
+ * Loading placeholder for the Combobox component.
+ * Supports both single and multi-select appearances.
+ */
+import { cn } from "../../lib/utils";
+import { Skeleton } from "../skeleton/skeleton";
+/**
+ * Combobox skeleton component
+ *
+ * @example
+ * ```tsx
+ * <ComboboxSkeleton />
+ *
+ * <ComboboxSkeleton multiSelect selectedCount={3} />
+ * ```
+ */
+export function ComboboxSkeleton({ multiSelect = false, selectedCount = 2, size = "default", className, "data-testid": dataTestId, }) {
+    const height = size === "sm" ? "h-9" : "h-10";
+    return (_jsxs("div", { "data-testid": dataTestId || "combobox-skeleton", className: cn("flex items-center gap-2 border rounded-md px-3", height, className), children: [multiSelect && (_jsx("div", { className: "flex gap-1", children: Array.from({ length: selectedCount }).map((_, i) => (_jsx(Skeleton, { className: "h-6 w-20 rounded-full" }, `selected-${i}`))) })), _jsx(Skeleton, { className: cn("h-5 flex-1", multiSelect && "min-w-[8rem]") }), _jsx(Skeleton, { className: "h-4 w-4 flex-shrink-0" })] }));
+}
+//# sourceMappingURL=combobox-skeleton.js.map

package/dist/src/components/combobox/combobox-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-skeleton.js","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-skeleton.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AA4BhD;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAChC,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,CAAC,EACjB,IAAI,GAAG,SAAS,EAChB,SAAS,EACT,aAAa,EAAE,UAAU,GACF;IACvB,MAAM,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;IAE9C,OAAO,CACN,8BACc,UAAU,IAAI,mBAAmB,EAC9C,SAAS,EAAE,EAAE,CACZ,gDAAgD,EAChD,MAAM,EACN,SAAS,CACT,aAGA,WAAW,IAAI,CACf,cAAK,SAAS,EAAC,YAAY,YACzB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACpD,KAAC,QAAQ,IAAuB,SAAS,EAAC,uBAAuB,IAAlD,YAAY,CAAC,EAAE,CAAsC,CACpE,CAAC,GACG,CACN,EAGD,KAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,WAAW,IAAI,cAAc,CAAC,GAAI,EAGxE,KAAC,QAAQ,IAAC,SAAS,EAAC,uBAAuB,GAAG,IACzC,CACN,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../../primitives/command";
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    /**
+     * Options to display in the combobox
+     */
+    options: ComboboxOption[];
+    /**
+     * Selected value
+     */
+    value?: string;
+    /**
+     * Callback when value changes
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Placeholder text when no value is selected
+     * @default "Select option..."
+     */
+    placeholder?: string;
+    /**
+     * Placeholder text for search input
+     * @default "Search..."
+     */
+    searchPlaceholder?: string;
+    /**
+     * Text to show when no results found
+     * @default "No results found."
+     */
+    emptyText?: string;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes for trigger button
+     */
+    className?: string;
+    /**
+     * Size variant
+     * @default "default"
+     */
+    size?: "sm" | "default";
+    /**
+     * Match dropdown width to trigger width. When true, also wraps long text.
+     * @default true
+     */
+    matchTriggerWidth?: boolean;
+}
+declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLButtonElement>>;
+export { Combobox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, };
+//# sourceMappingURL=combobox.d.ts.map

package/dist/src/components/combobox/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACN,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,MAAM,0BAA0B,CAAC;AAMlC,MAAM,WAAW,cAAc;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC7B;;OAEG;IACH,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,QAAQ,yFAwHb,CAAC;AAGF,OAAO,EACN,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,GACX,CAAC"}