@fragment-build/ui 1.2.3 → 1.4.0

package/dist/components/base/Breadcrumbs.js

@@ -1,5 +1,5 @@
 import { Breadcrumbs as NextBreadcrumbs, BreadcrumbItem as NextBreadcrumbItem, } from '@nextui-org/react';
 import { withFragment } from '../../withFragment';
 export const Breadcrumbs = withFragment(NextBreadcrumbs, 'breadcrumbs');
-export const BreadcrumbItem = withFragment(NextBreadcrumbItem, 'breadcrumbItem');
+export const BreadcrumbItem = NextBreadcrumbItem;
 //# sourceMappingURL=Breadcrumbs.js.map

package/dist/components/base/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/base/Breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,IAAI,eAAe,EAC9B,cAAc,IAAI,kBAAkB,GACrC,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/base/Breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,IAAI,eAAe,EAC9B,cAAc,IAAI,kBAAkB,GACrC,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,kBAAkB,CAAC"}

package/dist/components/base/Button.d.ts

@@ -1 +1,2 @@
 export declare const Button: import("@nextui-org/react").InternalForwardRefRenderFunction<"button", import("@nextui-org/react").ButtonProps, never>;
+export declare const ButtonGroup: import("@nextui-org/react").InternalForwardRefRenderFunction<"div", import("@nextui-org/react").ButtonGroupProps, never>;

package/dist/components/base/Button.js

@@ -1,4 +1,5 @@
-import { Button as NextButton } from '@nextui-org/react';
+import { Button as NextButton, ButtonGroup as NextButtonGroup } from '@nextui-org/react';
 import { withFragment } from '../../withFragment';
 export const Button = withFragment(NextButton, 'button');
+export const ButtonGroup = withFragment(NextButtonGroup, 'buttonGroup');
 //# sourceMappingURL=Button.js.map

package/dist/components/base/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/base/Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/base/Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC"}

package/dist/components/base/Navbar.js

@@ -4,7 +4,7 @@ export const Navbar = withFragment(NextNavbar, 'navbar');
 export const NavbarBrand = withFragment(NextNavbarBrand, 'navbarBrand');
 export const NavbarContent = withFragment(NextNavbarContent, 'navbarContent');
 export const NavbarItem = withFragment(NextNavbarItem, 'navbarItem');
-export const NavbarMenu = withFragment(NextNavbarMenu, 'navbarMenu');
+export const NavbarMenu = NextNavbarMenu;
 export const NavbarMenuItem = withFragment(NextNavbarMenuItem, 'navbarMenuItem');
 export const NavbarMenuToggle = withFragment(NextNavbarMenuToggle, 'navbarMenuToggle');
 //# sourceMappingURL=Navbar.js.map

package/dist/components/base/Navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.js","sourceRoot":"","sources":["../../../src/components/base/Navbar.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,IAAI,UAAU,EACpB,WAAW,IAAI,eAAe,EAC9B,aAAa,IAAI,iBAAiB,EAClC,UAAU,IAAI,cAAc,EAC5B,UAAU,IAAI,cAAc,EAC5B,cAAc,IAAI,kBAAkB,EACpC,gBAAgB,IAAI,oBAAoB,GACzC,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,aAAa,GAAG,YAAY,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,cAAc,GAAG,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC;AACjF,MAAM,CAAC,MAAM,gBAAgB,GAAG,YAAY,CAAC,oBAAoB,EAAE,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"Navbar.js","sourceRoot":"","sources":["../../../src/components/base/Navbar.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,IAAI,UAAU,EACpB,WAAW,IAAI,eAAe,EAC9B,aAAa,IAAI,iBAAiB,EAClC,UAAU,IAAI,cAAc,EAC5B,UAAU,IAAI,cAAc,EAC5B,cAAc,IAAI,kBAAkB,EACpC,gBAAgB,IAAI,oBAAoB,GACzC,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,aAAa,GAAG,YAAY,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC;AACzC,MAAM,CAAC,MAAM,cAAc,GAAG,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC;AACjF,MAAM,CAAC,MAAM,gBAAgB,GAAG,YAAY,CAAC,oBAAoB,EAAE,kBAAkB,CAAC,CAAC"}

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

@@ -4,7 +4,7 @@
 import React from "react";
 import type { Props as ApexChartProps } from "react-apexcharts";
 export interface ChartProps {
-    type: 'line';
+    type: 'area' | 'line' | 'column' | 'bar' | 'pie' | 'donut' | 'radial';
     series: ApexAxisChartSeries | ApexNonAxisChartSeries;
     options?: ApexCharts.ApexOptions;
     height?: ApexChartProps['height'];

package/dist/components/chart/Chart.js

@@ -9,16 +9,22 @@ import { FragmentUIContext } from "../../context";
 export const Chart = (props) => {
     const context = useContext(FragmentUIContext);
     const defaults = context['defaults']['chart']?.[props.type];
-    const mergedProps = React.useMemo(() => defaultsDeep(structuredClone(props), defaults ?? {}), [props, defaults]);
+    const mergedProps = React.useMemo(() => defaultsDeep({ ...props }, defaults ?? {}), [props, defaults]);
     const [component, setComponent] = useState(_jsx("div", { style: { height: mergedProps.height, width: mergedProps.width }, className: "flex justify-center align-center", children: _jsx(Spinner, {}) }));
     useEffect(() => {
         const importComponent = async () => {
             const module = await import('react-apexcharts');
             const ApexChart = module.default;
-            setComponent(_jsx(ApexChart, { ...mergedProps }));
+            setComponent(_jsx(ApexChart, { ...mergedProps, type: defaults?.options?.chart?.type, height: props.height ?? defaults?.options?.chart?.height, width: props.width ?? defaults?.options?.chart?.width }));
         };
         importComponent();
-    }, [mergedProps]);
+    }, [
+        mergedProps,
+        defaults?.options?.chart?.type,
+        defaults?.options?.chart?.height,
+        defaults?.options?.chart?.width,
+        props.height, props.width,
+    ]);
     return component;
 };
 //# sourceMappingURL=Chart.js.map

package/dist/components/chart/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","sourceRoot":"","sources":["../../../src/components/chart/Chart.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAUlD,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,KAAK,EAAE,EAAE;IACnD,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAe,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,QAAQ,IAAI,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC7H,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CACxC,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,EAAE,SAAS,EAAC,kCAAkC,YAAC,KAAC,OAAO,KAAG,GAAM,CACrI,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,KAAK,IAAI,EAAE;YACjC,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAChD,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YACjC,YAAY,CAAC,KAAC,SAAS,OAAK,WAAW,GAAI,CAAC,CAAC;QAC/C,CAAC,CAAC;QAEF,eAAe,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC"}
+{"version":3,"file":"Chart.js","sourceRoot":"","sources":["../../../src/components/chart/Chart.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAUlD,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,KAAK,EAAE,EAAE;IACnD,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAmB,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,IAAI,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IACvH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CACxC,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,EAAE,SAAS,EAAC,kCAAkC,YAAC,KAAC,OAAO,KAAG,GAAM,CACrI,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,KAAK,IAAI,EAAE;YACjC,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAChD,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YACjC,YAAY,CACV,KAAC,SAAS,OACJ,WAAW,EACf,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EACpC,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EACxD,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GACrD,CACH,CAAC;QACJ,CAAC,CAAC;QAEF,eAAe,EAAE,CAAC;IACpB,CAAC,EAAE;QACD,WAAW;QACX,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI;QAC9B,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM;QAChC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK;QAC/B,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK;KAC1B,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC"}

package/dist/components/chart/Chart.stories.d.ts

@@ -3,4 +3,10 @@ import { Chart } from "./Chart";
 declare const meta: Meta<typeof Chart>;
 export default meta;
 type Story = StoryObj<typeof meta>;
+export declare const Area: Story;
 export declare const Line: Story;
+export declare const Column: Story;
+export declare const Bar: Story;
+export declare const Pie: Story;
+export declare const Donut: Story;
+export declare const Radial: Story;

package/dist/components/chart/Chart.stories.js

@@ -1,12 +1,30 @@
 import { Chart } from "./Chart";
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
-    title: "component/Chart",
+    title: "components/Chart",
     component: Chart,
     tags: ['autodocs'],
 };
 export default meta;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Area = {
+    args: {
+        type: 'area',
+        height: '500px',
+        options: {
+            xaxis: {
+                categories: ['01 February', '02 February', '03 February', '04 February', '05 February', '06 February', '07 February'],
+            }
+        },
+        series: [
+            {
+                name: "New users",
+                data: [6500, 6418, 6456, 6526, 6356, 6456],
+                color: "#1A56DB",
+            },
+        ],
+    },
+};
 export const Line = {
     args: {
         type: 'line',
@@ -25,4 +43,152 @@ export const Line = {
         ],
     },
 };
+export const Column = {
+    args: {
+        type: 'column',
+        height: '500px',
+        series: [
+            {
+                name: "Organic",
+                color: "#1A56DB",
+                data: [
+                    { x: "Mon", y: 231 },
+                    { x: "Tue", y: 122 },
+                    { x: "Wed", y: 63 },
+                    { x: "Thu", y: 421 },
+                    { x: "Fri", y: 122 },
+                    { x: "Sat", y: 323 },
+                    { x: "Sun", y: 111 },
+                ],
+            },
+            {
+                name: "Social media",
+                color: "#FDBA8C",
+                data: [
+                    { x: "Mon", y: 232 },
+                    { x: "Tue", y: 113 },
+                    { x: "Wed", y: 341 },
+                    { x: "Thu", y: 224 },
+                    { x: "Fri", y: 522 },
+                    { x: "Sat", y: 411 },
+                    { x: "Sun", y: 243 },
+                ],
+            },
+        ],
+    },
+};
+export const Bar = {
+    args: {
+        type: 'bar',
+        height: '500px',
+        options: {
+            tooltip: {
+                y: {
+                    formatter: function (value) {
+                        return "$" + value;
+                    }
+                }
+            },
+        },
+        series: [
+            {
+                name: "Income",
+                color: "#31C48D",
+                data: [1420, 1620, 1820, 1420, 1650, 2120],
+            },
+            {
+                name: "Expense",
+                data: [788, 810, 866, 788, 1100, 1200],
+                color: "#F05252",
+            }
+        ]
+    },
+};
+export const Pie = {
+    args: {
+        type: 'pie',
+        height: '500px',
+        options: {
+            labels: ["Direct", "Organic search", "Referrals"],
+            yaxis: {
+                labels: {
+                    formatter: function (value) {
+                        return value + "%";
+                    },
+                },
+            },
+            xaxis: {
+                labels: {
+                    formatter: function (value) {
+                        return value + "%";
+                    },
+                },
+            }
+        },
+        series: [52.8, 26.8, 20.4],
+    },
+};
+export const Donut = {
+    args: {
+        type: 'donut',
+        height: '500px',
+        options: {
+            labels: ["Direct", "Sponsor", "Affiliate", "Email marketing"],
+            plotOptions: {
+                pie: {
+                    donut: {
+                        labels: {
+                            total: {
+                                label: "Unique visitors",
+                                formatter: function (w) {
+                                    const sum = w.globals.seriesTotals.reduce((a, b) => {
+                                        return a + b;
+                                    }, 0);
+                                    return '$' + sum + 'k';
+                                },
+                            },
+                            value: {
+                                formatter: function (value) {
+                                    return value + "k";
+                                },
+                            }
+                        }
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    formatter: function (value) {
+                        return value + "k";
+                    },
+                },
+            },
+            xaxis: {
+                labels: {
+                    formatter: function (value) {
+                        return value + "k";
+                    },
+                },
+            },
+        },
+        series: [35.1, 23.5, 2.4, 5.4],
+    },
+};
+export const Radial = {
+    args: {
+        type: 'radial',
+        height: '500px',
+        options: {
+            labels: ["Done", "In progress", "To do"],
+            yaxis: {
+                labels: {
+                    formatter: function (value) {
+                        return value + '%';
+                    }
+                }
+            }
+        },
+        series: [90, 85, 70],
+    },
+};
 //# sourceMappingURL=Chart.stories.js.map

package/dist/components/chart/Chart.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.stories.js","sourceRoot":"","sources":["../../../src/components/chart/Chart.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,qGAAqG;AACrG,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,8FAA8F;AAC9F,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,OAAO;QACf,MAAM,EAAE;YACN;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;gBAC1C,KAAK,EAAE,SAAS;aACjB;YACD;gBACE,IAAI,EAAE,KAAK;gBACX,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;gBAC1C,KAAK,EAAE,SAAS;aACjB;SACF;KACF;CACF,CAAC"}
+{"version":3,"file":"Chart.stories.js","sourceRoot":"","sources":["../../../src/components/chart/Chart.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/color-input/ColorInput.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { InputProps } from '@nextui-org/react';
 /**
  * Primary UI component for selecting a color
  */
 export interface ColorInputProps extends InputProps {
 }
-export declare const ColorInput: import("react").ForwardRefExoticComponent<Omit<ColorInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const ColorInput: ({ defaultValue, label, errorMessage, onValueChange, isInvalid, ...rest }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/color-input/ColorInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Avatar, Input } from '../base';
 import { withFragment } from '../../withFragment';
-export const ColorInput = withFragment(forwardRef(({ defaultValue, label = 'Color', errorMessage = "Please enter a valid color in hex format e.g. #f3f or #ff33ff", onValueChange, isInvalid, ...rest }, ref) => {
+export const ColorInput = withFragment(({ defaultValue, label = 'Color', errorMessage = "Please enter a valid color in hex format e.g. #f3f or #ff33ff", onValueChange, isInvalid, ...rest }) => {
     const [value, setValue] = useState(defaultValue || '#7d7d7d');
     useEffect(() => onValueChange && onValueChange(value), [value, onValueChange]);
     const validateHexColor = (value) => value.match(/^#(?:[0-9a-fA-F]{3}){1,2}$/i);
@@ -11,6 +11,11 @@ export const ColorInput = withFragment(forwardRef(({ defaultValue, label = 'Colo
             return false;
         return validateHexColor(value) && !isInvalid ? false : true;
     }, [value, isInvalid]);
-    return (_jsx(Input, { ...rest, ref: ref, label: label, type: "text", value: value, onValueChange: setValue, isInvalid: invalid, errorMessage: invalid && errorMessage, endContent: (_jsx(Avatar, { as: "button", size: "sm", showFallback: true, fallback: _jsx("input", { type: 'color', className: "w-full h-full opacity-0 cursor-pointer", onChange: (e) => setValue(e.currentTarget.value) }), style: { backgroundColor: value }, classNames: { base: 'shrink-0', fallback: 'w-full h-full' } })) }));
-}), 'colorInput');
+    const handleOnChange = (e) => {
+        if (rest.onChange)
+            rest.onChange(e);
+        setValue(e.currentTarget.value);
+    };
+    return (_jsx(Input, { ...rest, label: label, type: "text", value: value, onValueChange: setValue, isInvalid: invalid, errorMessage: invalid && errorMessage, endContent: (_jsx(Avatar, { as: "button", size: "sm", showFallback: true, fallback: _jsx("input", { type: 'color', className: "w-full h-full opacity-0 cursor-pointer", onChange: handleOnChange }), style: { backgroundColor: value }, classNames: { base: 'shrink-0 self-center -mb-0.5', fallback: 'w-full h-full' } })) }));
+}, 'colorInput');
 //# sourceMappingURL=ColorInput.js.map

package/dist/components/color-input/ColorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","sourceRoot":"","sources":["../../../src/components/color-input/ColorInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAQlD,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,UAAU,CAAoC,CAAC,EACpF,YAAY,EACZ,KAAK,GAAG,OAAO,EACf,YAAY,GAAG,+DAA+D,EAC9E,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACS,EAAE,GAAG,EAAE,EAAE;IACzB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,SAAS,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/E,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAEvF,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,KAAK,KAAK,EAAE;YAAE,OAAO,KAAK,CAAC;QAE/B,OAAO,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9D,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,KAAC,KAAK,OACA,IAAI,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,OAAO,IAAI,YAAY,EACrC,UAAU,EAAE,CACV,KAAC,MAAM,IACL,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,IAAI,EACT,YAAY,QACZ,QAAQ,EAAE,gBAAO,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,wCAAwC,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,GAAI,EACrI,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EACjC,UAAU,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,GAC3D,CACH,GACD,CACH,CAAC;AACJ,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC"}
+{"version":3,"file":"ColorInput.js","sourceRoot":"","sources":["../../../src/components/color-input/ColorInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAe,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAQlD,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,EACtC,YAAY,EACZ,KAAK,GAAG,OAAO,EACf,YAAY,GAAG,+DAA+D,EAC9E,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACS,EAAE,EAAE;IACpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,SAAS,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/E,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAEvF,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,KAAK,KAAK,EAAE;YAAE,OAAO,KAAK,CAAC;QAE/B,OAAO,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9D,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,MAAM,cAAc,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC1D,IAAI,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACpC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IACjC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,KAAK,OACA,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,OAAO,IAAI,YAAY,EACrC,UAAU,EAAE,CACV,KAAC,MAAM,IACL,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,IAAI,EACT,YAAY,QACZ,QAAQ,EAAE,gBAAO,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,wCAAwC,EAAC,QAAQ,EAAE,cAAc,GAAI,EAC7G,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EACjC,UAAU,EAAE,EAAE,IAAI,EAAE,8BAA8B,EAAE,QAAQ,EAAE,eAAe,EAAE,GAC/E,CACH,GACD,CACH,CAAC;AACJ,CAAC,EAAE,YAAY,CAAC,CAAC"}

package/dist/components/grid/Grid.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * Primary UI component for selecting a color
+ */
+export interface GridProps {
+    children: React.ReactNode;
+    size: 'sm' | 'md' | 'lg';
+}
+export declare const Grid: React.FC<GridProps>;

package/dist/components/grid/Grid.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from '@nextui-org/react';
+const grid = tv({
+    slots: {
+        base: 'grid gap-6 grid-flow-row-dense',
+    },
+    variants: {
+        size: {
+            sm: {
+                base: 'grid-cols-1'
+            },
+            md: {
+                base: 'grid-cols-1 lg:grid-cols-2'
+            },
+            lg: {
+                base: 'grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+export const Grid = ({ children, ...props }) => {
+    const { base } = grid(props);
+    return _jsx("div", { className: base(), children: children });
+};
+//# sourceMappingURL=Grid.js.map

package/dist/components/grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/grid/Grid.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAWvC,MAAM,IAAI,GAAG,EAAE,CAAC;IACd,KAAK,EAAE;QACL,IAAI,EAAE,gCAAgC;KACvC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE;gBACF,IAAI,EAAE,aAAa;aACpB;YACD,EAAE,EAAE;gBACF,IAAI,EAAE,4BAA4B;aACnC;YACD,EAAE,EAAE;gBACF,IAAI,EAAE,4CAA4C;aACnD;SACF;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IAE7B,OAAO,cAAK,SAAS,EAAE,IAAI,EAAE,YAAG,QAAQ,GAAO,CAAC;AAClD,CAAC,CAAC"}

package/dist/components/grid/Grid.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Grid } from "./Grid";
+declare const meta: Meta<typeof Grid>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;

package/dist/components/grid/Grid.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid } from "./Grid";
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+    title: "components/Grid",
+    component: Grid,
+    tags: ["autodocs"],
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Small = {
+    args: {
+        size: 'sm',
+        children: (_jsxs(_Fragment, { children: [_jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } }), _jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } }), _jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } }), _jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } }), _jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } })] })),
+    },
+};
+export const Medium = {
+    args: {
+        size: 'md',
+        children: (_jsxs(_Fragment, { children: [_jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } }), _jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } }), _jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } }), _jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } }), _jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } })] })),
+    },
+};
+export const Large = {
+    args: {
+        size: 'lg',
+        children: (_jsxs(_Fragment, { children: [_jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } }), _jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } }), _jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } }), _jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } }), _jsx("div", { style: { backgroundColor: 'lightblue', height: '250px' } })] })),
+    },
+};
+//# sourceMappingURL=Grid.stories.js.map

package/dist/components/grid/Grid.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.stories.js","sourceRoot":"","sources":["../../../src/components/grid/Grid.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,qGAAqG;AACrG,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,8FAA8F;AAC9F,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,CACR,8BACE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,EACrE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,EACrE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,EACrE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,EACrE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,IACpE,CACJ;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,CACR,8BACE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,EACrE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,EACrE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,EACrE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,EACrE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,IACpE,CACJ;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,CACR,8BACE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,EACrE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,EACrE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,EACrE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,EACrE,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAQ,IACpE,CACJ;KACF;CACF,CAAC"}

package/dist/components/index.d.ts

@@ -1,4 +1,6 @@
 export * from './base';
 export * from './chart/Chart';
 export * from './color-input/ColorInput';
+export * from './grid/Grid';
+export * from './multi-switch/MultiSwitch';
 export * from './color-selector/ColorSelector';

package/dist/components/index.js

@@ -1,5 +1,7 @@
 export * from './base';
 export * from './chart/Chart';
 export * from './color-input/ColorInput';
+export * from './grid/Grid';
+export * from './multi-switch/MultiSwitch';
 export * from './color-selector/ColorSelector';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,aAAa,CAAC;AAC5B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC"}

package/dist/components/multi-switch/MultiSwitch.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ButtonGroupProps } from '@nextui-org/react';
+/**
+ * Primary UI component for selecting a color
+ */
+export interface MultiSwitchProps extends Omit<ButtonGroupProps, 'className'> {
+    defaultValue?: number;
+    onValueChange: (value: number) => void;
+}
+export declare const MultiSwitch: import("react").ForwardRefExoticComponent<Omit<MultiSwitchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/multi-switch/MultiSwitch.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from 'react';
+import { Button, ButtonGroup } from '../base';
+import { withFragment } from '../../withFragment';
+import { IconCheck, IconSlash, IconX } from '@tabler/icons-react';
+import { tv } from '@nextui-org/react';
+const multiSwitch = tv({
+    slots: {
+        button: 'min-w-0',
+    },
+    variants: {
+        size: {
+            sm: {
+                button: 'px-3'
+            },
+            md: {
+                button: 'px-4'
+            },
+            lg: {
+                button: 'px-5'
+            }
+        }
+    },
+});
+export const MultiSwitch = withFragment(forwardRef(({ defaultValue, onValueChange, size = 'md', ...props }, ref) => {
+    const [value, setValue] = useState(defaultValue ?? 0);
+    const { button } = multiSwitch({ size });
+    useEffect(() => onValueChange && onValueChange(value), [value, onValueChange]);
+    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: ref, value: value, type: "number", className: "hidden", min: 0, max: 2, required: true }), _jsxs(ButtonGroup, { size: size, ...props, children: [_jsx(Button, { className: button(), onClick: () => setValue(0), ...value === 0 ? { color: 'danger' } : {}, children: _jsx(IconX, { size: 20 }) }), _jsx(Button, { className: button(), onClick: () => setValue(1), ...value === 1 ? { color: 'default', variant: 'solid' } : {}, children: _jsx(IconSlash, { size: 20 }) }), _jsx(Button, { className: button(), onClick: () => setValue(2), ...value === 2 ? { color: 'success' } : {}, children: _jsx(IconCheck, { size: 20 }) })] })] }));
+}), 'multiSwitch');
+//# sourceMappingURL=MultiSwitch.js.map

package/dist/components/multi-switch/MultiSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSwitch.js","sourceRoot":"","sources":["../../../src/components/multi-switch/MultiSwitch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAoB,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAWzD,MAAM,WAAW,GAAG,EAAE,CAAC;IACrB,KAAK,EAAE;QACL,MAAM,EAAE,SAAS;KAClB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE;gBACF,MAAM,EAAE,MAAM;aACf;YACD,EAAE,EAAE;gBACF,MAAM,EAAE,MAAM;aACf;YACD,EAAE,EAAE;gBACF,MAAM,EAAE,MAAM;aACf;SACF;KACF;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,UAAU,CAAqC,CAAC,EACtF,YAAY,EACZ,aAAa,EACb,IAAI,GAAG,IAAI,EACX,GAAG,KAAK,EACT,EAAE,GAAG,EAAE,EAAE;IACR,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC;IACtD,MAAM,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/E,OAAO,CACL,8BACE,gBAAO,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,SAAG,EAC3F,MAAC,WAAW,IAAC,IAAI,EAAE,IAAI,KAAM,KAAK,aAChC,KAAC,MAAM,IAAC,SAAS,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAM,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,YAAE,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GAAS,EACjI,KAAC,MAAM,IAAC,SAAS,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAM,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,YAAE,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,GAAS,EACxJ,KAAC,MAAM,IAAC,SAAS,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAM,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,YAAE,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,GAAS,IAC1H,IACb,CACJ,CAAC;AACJ,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC"}

package/dist/components/multi-switch/MultiSwitch.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MultiSwitch } from "./MultiSwitch";
+declare const meta: Meta<typeof MultiSwitch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;

package/dist/components/multi-switch/MultiSwitch.stories.js

@@ -0,0 +1,28 @@
+import { MultiSwitch } from "./MultiSwitch";
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+    title: "components/MultiSwitch",
+    component: MultiSwitch,
+    tags: ["autodocs"],
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Small = {
+    args: {
+        onValueChange: console.log,
+        size: 'sm',
+    },
+};
+export const Medium = {
+    args: {
+        onValueChange: console.log,
+        size: 'md',
+    },
+};
+export const Large = {
+    args: {
+        onValueChange: console.log,
+        size: 'lg',
+    },
+};
+//# sourceMappingURL=MultiSwitch.stories.js.map

package/dist/components/multi-switch/MultiSwitch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSwitch.stories.js","sourceRoot":"","sources":["../../../src/components/multi-switch/MultiSwitch.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,qGAAqG;AACrG,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,8FAA8F;AAC9F,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,aAAa,EAAE,OAAO,CAAC,GAAG;QAC1B,IAAI,EAAE,IAAI;KACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,aAAa,EAAE,OAAO,CAAC,GAAG;QAC1B,IAAI,EAAE,IAAI;KACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,aAAa,EAAE,OAAO,CAAC,GAAG;QAC1B,IAAI,EAAE,IAAI;KACX;CACF,CAAC"}

package/dist/context.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { AccordionItemProps, AccordionProps, AutocompleteItemProps, AutocompleteProps, AutocompleteSectionProps, AvatarGroupProps, AvatarProps, BadgeProps, BreadcrumbItemProps, BreadcrumbsProps, ButtonProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, CircularProgressProps, CodeProps, DividerProps, DropdownItemProps, DropdownMenuProps, DropdownProps, DropdownSectionProps, DropdownTriggerProps, HTMLNextUIProps, ImageProps, InputProps, KbdProps, LinkProps, ListboxItemProps, ListboxProps, ListboxSectionProps, ModalBodyProps, ModalContentProps, ModalFooterProps, ModalHeaderProps, ModalProps, NavbarBrandProps, NavbarContentProps, NavbarItemProps, NavbarMenuItemProps, NavbarMenuProps, NavbarMenuToggleProps, NavbarProps, PaginationCursorProps, PaginationItemProps, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupProps, RadioProps, ScrollShadowProps, SelectItemProps, SelectProps, SelectSectionProps, SkeletonProps, SliderProps, SnippetProps, SpacerProps, SpinnerProps, SwitchProps, TabItemProps, TableBodyProps, TableCellProps, TableColumnProps, TableHeaderProps, TableProps, TabsProps, TextAreaProps, TooltipProps, UserProps } from "@nextui-org/react";
+import { AccordionItemProps, AccordionProps, AutocompleteItemProps, AutocompleteProps, AutocompleteSectionProps, AvatarGroupProps, AvatarProps, BadgeProps, BreadcrumbsProps, ButtonGroupProps, ButtonProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, CircularProgressProps, CodeProps, DividerProps, DropdownItemProps, DropdownMenuProps, DropdownProps, DropdownSectionProps, DropdownTriggerProps, HTMLNextUIProps, ImageProps, InputProps, KbdProps, LinkProps, ListboxItemProps, ListboxProps, ListboxSectionProps, ModalBodyProps, ModalContentProps, ModalFooterProps, ModalHeaderProps, ModalProps, NavbarBrandProps, NavbarContentProps, NavbarItemProps, NavbarMenuItemProps, NavbarMenuToggleProps, NavbarProps, PaginationCursorProps, PaginationItemProps, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupProps, RadioProps, ScrollShadowProps, SelectItemProps, SelectProps, SelectSectionProps, SkeletonProps, SliderProps, SnippetProps, SpacerProps, SpinnerProps, SwitchProps, TabItemProps, TableBodyProps, TableCellProps, TableColumnProps, TableHeaderProps, TableProps, TabsProps, TextAreaProps, TooltipProps, UserProps } from "@nextui-org/react";
 import { RowProps } from '@react-types/table';
-import { ColorInputProps, ColorSelectorProps } from "./components";
-import { ChartProps } from "./components/chart/Chart";
+import type { Props as ApexChartProps } from "react-apexcharts";
+import { ChartProps, ColorInputProps, ColorSelectorProps, MultiSwitchProps } from "./components";
 export type TableRowProps<T = object> = RowProps<T> & Omit<HTMLNextUIProps<"tr">, keyof RowProps<T>>;
 export interface FragmentUIContext {
     defaults: {
@@ -15,11 +15,11 @@ export interface FragmentUIContext {
         autocompleteSection?: Partial<AutocompleteSectionProps>;
         badge?: Partial<BadgeProps>;
         button?: Partial<ButtonProps>;
+        buttonGroup?: Partial<ButtonGroupProps>;
         breadcrumbs?: Partial<BreadcrumbsProps>;
-        breadcrumbItem?: Partial<BreadcrumbItemProps>;
         card?: Partial<CardProps>;
         chart?: Partial<{
-            [chartType in ChartProps['type']]: Partial<ChartProps>;
+            [chartType in ChartProps['type']]: Partial<Pick<ApexChartProps, 'options' | 'series'>>;
         }>;
         checkbox?: Partial<CheckboxProps>;
         checkboxGroup?: Partial<CheckboxGroupProps>;
@@ -46,11 +46,11 @@ export interface FragmentUIContext {
         modalContent?: Partial<ModalContentProps>;
         modalFooter?: Partial<ModalFooterProps>;
         modalHeader?: Partial<ModalHeaderProps>;
+        multiSwitch?: Partial<MultiSwitchProps>;
         navbar?: Partial<NavbarProps>;
         navbarBrand?: Partial<NavbarBrandProps>;
         navbarContent?: Partial<NavbarContentProps>;
         navbarItem?: Partial<NavbarItemProps>;
-        navbarMenu?: Partial<NavbarMenuProps>;
         navbarMenuItem?: Partial<NavbarMenuItemProps>;
         navbarMenuToggle?: Partial<NavbarMenuToggleProps>;
         pagination?: Partial<PaginationProps>;