@fragment-build/ui 1.2.3 → 1.4.0

package/dist/context.js

@@ -12,10 +12,75 @@ export const defaultContext = {
                 radius: 'full',
             },
         },
+        multiSwitch: {
+            variant: 'flat',
+        },
         chart: {
+            area: {
+                options: {
+                    chart: {
+                        height: "100%",
+                        width: "100%",
+                        type: "area",
+                        fontFamily: "Inter, sans-serif",
+                        dropShadow: {
+                            enabled: false,
+                        },
+                        toolbar: {
+                            show: false,
+                        },
+                        zoom: {
+                            enabled: false,
+                        },
+                    },
+                    tooltip: {
+                        theme: 'dark',
+                        enabled: true,
+                        x: {
+                            show: false,
+                        },
+                    },
+                    fill: {
+                        type: "gradient",
+                        gradient: {
+                            opacityFrom: 0.55,
+                            opacityTo: 0,
+                            shade: "#1C64F2",
+                            gradientToColors: ["#1C64F2"],
+                        },
+                    },
+                    dataLabels: {
+                        enabled: false,
+                    },
+                    stroke: {
+                        width: 3,
+                    },
+                    grid: {
+                        show: false,
+                        strokeDashArray: 4,
+                        padding: {
+                            left: 2,
+                            right: 2,
+                            top: 0
+                        },
+                    },
+                    xaxis: {
+                        labels: {
+                            show: false,
+                        },
+                        axisBorder: {
+                            show: false,
+                        },
+                        axisTicks: {
+                            show: false,
+                        },
+                    },
+                    yaxis: {
+                        show: false,
+                    },
+                },
+            },
             line: {
-                width: '100%',
-                height: '100%',
                 options: {
                     chart: {
                         type: 'line',
@@ -31,6 +96,9 @@ export const defaultContext = {
                         animations: {
                             enabled: false
                         },
+                        zoom: {
+                            enabled: false,
+                        },
                     },
                     tooltip: {
                         theme: 'dark',
@@ -80,6 +148,312 @@ export const defaultContext = {
                     },
                 },
             },
+            column: {
+                options: {
+                    chart: {
+                        type: "bar",
+                        fontFamily: "Inter, sans-serif",
+                        toolbar: {
+                            show: false,
+                        },
+                    },
+                    plotOptions: {
+                        bar: {
+                            horizontal: false,
+                            columnWidth: "70%",
+                            borderRadiusApplication: "end",
+                            borderRadius: 8,
+                        },
+                    },
+                    tooltip: {
+                        theme: 'dark',
+                        shared: true,
+                        intersect: false,
+                        style: {
+                            fontFamily: "Inter, sans-serif",
+                        },
+                    },
+                    states: {
+                        hover: {
+                            filter: {
+                                type: "darken",
+                                value: 1,
+                            },
+                        },
+                    },
+                    grid: {
+                        show: false,
+                        strokeDashArray: 4,
+                        padding: {
+                            left: 2,
+                            right: 2,
+                            top: -14
+                        },
+                    },
+                    dataLabels: {
+                        enabled: false,
+                    },
+                    legend: {
+                        show: false,
+                    },
+                    xaxis: {
+                        floating: false,
+                        labels: {
+                            show: true,
+                            style: {
+                                fontFamily: "Inter, sans-serif",
+                                cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
+                            }
+                        },
+                        axisBorder: {
+                            show: false,
+                        },
+                        axisTicks: {
+                            show: false,
+                        },
+                    },
+                    yaxis: {
+                        show: false,
+                    },
+                    fill: {
+                        opacity: 1,
+                    },
+                },
+            },
+            bar: {
+                options: {
+                    chart: {
+                        sparkline: {
+                            enabled: false,
+                        },
+                        type: "bar",
+                        width: "100%",
+                        height: 400,
+                        toolbar: {
+                            show: false,
+                        }
+                    },
+                    fill: {
+                        opacity: 1,
+                    },
+                    plotOptions: {
+                        bar: {
+                            horizontal: true,
+                            columnWidth: "100%",
+                            borderRadiusApplication: "end",
+                            borderRadius: 6,
+                            dataLabels: {
+                                position: "top",
+                            },
+                        },
+                    },
+                    legend: {
+                        show: true,
+                        position: "bottom",
+                    },
+                    dataLabels: {
+                        enabled: false,
+                    },
+                    tooltip: {
+                        theme: 'dark',
+                        shared: true,
+                        intersect: false,
+                    },
+                    xaxis: {
+                        labels: {
+                            show: true,
+                            style: {
+                                fontFamily: "Inter, sans-serif",
+                            },
+                            formatter: function (value) {
+                                return "$" + value;
+                            }
+                        },
+                        categories: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+                        axisTicks: {
+                            show: false,
+                        },
+                        axisBorder: {
+                            show: false,
+                        },
+                    },
+                    yaxis: {
+                        labels: {
+                            show: true,
+                            style: {
+                                fontFamily: "Inter, sans-serif",
+                            }
+                        }
+                    },
+                    grid: {
+                        show: true,
+                        strokeDashArray: 4,
+                        padding: {
+                            left: 2,
+                            right: 2,
+                            top: -20
+                        },
+                    }
+                },
+            },
+            pie: {
+                options: {
+                    chart: {
+                        height: "100%",
+                        width: "100%",
+                        type: "pie",
+                    },
+                    stroke: {
+                        width: 5,
+                    },
+                    plotOptions: {
+                        pie: {
+                            expandOnClick: false,
+                            dataLabels: {
+                                offset: -25,
+                            }
+                        },
+                    },
+                    dataLabels: {
+                        enabled: true,
+                        style: {
+                            fontFamily: "Inter, sans-serif",
+                        },
+                        background: {
+                            enabled: true,
+                            padding: 10,
+                            borderWidth: 0,
+                            borderRadius: 5,
+                            dropShadow: {
+                                enabled: true,
+                            }
+                        },
+                        dropShadow: {
+                            enabled: false,
+                        }
+                    },
+                    legend: {
+                        position: "bottom",
+                        fontFamily: "Inter, sans-serif",
+                    },
+                    xaxis: {
+                        axisTicks: {
+                            show: false,
+                        },
+                        axisBorder: {
+                            show: false,
+                        },
+                    },
+                },
+            },
+            donut: {
+                options: {
+                    chart: {
+                        height: "100%",
+                        width: "100%",
+                        type: "donut",
+                    },
+                    stroke: {
+                        width: 5,
+                    },
+                    plotOptions: {
+                        pie: {
+                            donut: {
+                                labels: {
+                                    show: true,
+                                    name: {
+                                        show: true,
+                                        fontFamily: "Inter, sans-serif",
+                                        offsetY: 20,
+                                    },
+                                    total: {
+                                        showAlways: true,
+                                        show: true,
+                                        fontFamily: "Inter, sans-serif",
+                                    },
+                                    value: {
+                                        show: true,
+                                        fontFamily: "Inter, sans-serif",
+                                        offsetY: -20,
+                                    },
+                                },
+                                size: "80%",
+                            },
+                        },
+                    },
+                    grid: {
+                        padding: {
+                            top: -2,
+                        },
+                    },
+                    dataLabels: {
+                        enabled: false,
+                    },
+                    legend: {
+                        position: "bottom",
+                        fontFamily: "Inter, sans-serif",
+                    },
+                    xaxis: {
+                        axisTicks: {
+                            show: false,
+                        },
+                        axisBorder: {
+                            show: false,
+                        },
+                    },
+                },
+            },
+            radial: {
+                options: {
+                    chart: {
+                        height: "100%",
+                        width: "100%",
+                        type: "radialBar",
+                        sparkline: {
+                            enabled: true,
+                        },
+                    },
+                    stroke: {
+                        lineCap: 'round',
+                    },
+                    plotOptions: {
+                        radialBar: {
+                            dataLabels: {
+                                show: false,
+                            },
+                            hollow: {
+                                margin: 0,
+                                size: "32%",
+                            }
+                        },
+                    },
+                    grid: {
+                        show: false,
+                        strokeDashArray: 4,
+                        padding: {
+                            left: 2,
+                            right: 2,
+                            top: -23,
+                            bottom: -20,
+                        },
+                    },
+                    legend: {
+                        show: true,
+                        position: "bottom",
+                        fontFamily: "Inter, sans-serif",
+                    },
+                    tooltip: {
+                        theme: 'dark',
+                        enabled: true,
+                        x: {
+                            show: false,
+                        },
+                    },
+                    yaxis: {
+                        show: false,
+                    }
+                },
+            },
         },
     },
 };

package/dist/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAwFtC,MAAM,CAAC,MAAM,cAAc,GAAsB;IAC/C,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,MAAM,EAAE,MAAM;SACf;QACD,KAAK,EAAE;YACL,aAAa,EAAE,IAAI;SACpB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,MAAM,EAAE,MAAM;aACf;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE;gBACJ,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE;oBACP,KAAK,EAAE;wBACL,IAAI,EAAE,MAAM;wBACZ,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,UAAU,EAAE,mBAAmB;wBAC/B,UAAU,EAAE;4BACV,OAAO,EAAE,KAAK;yBACf;wBACD,OAAO,EAAE;4BACP,IAAI,EAAE,KAAK;yBACZ;wBACD,UAAU,EAAE;4BACV,OAAO,EAAE,KAAK;yBACf;qBACF;oBACD,OAAO,EAAE;wBACP,KAAK,EAAE,MAAM;wBACb,OAAO,EAAE,IAAI;wBACb,CAAC,EAAE;4BACD,IAAI,EAAE,KAAK;yBACZ;qBACF;oBACD,UAAU,EAAE;wBACV,OAAO,EAAE,KAAK;qBACf;oBACD,MAAM,EAAE;wBACN,KAAK,EAAE,CAAC;wBACR,KAAK,EAAE,QAAQ;qBAChB;oBACD,IAAI,EAAE;wBACJ,IAAI,EAAE,IAAI;wBACV,eAAe,EAAE,CAAC;wBAClB,OAAO,EAAE;4BACP,IAAI,EAAE,EAAE;4BACR,KAAK,EAAE,EAAE;yBACV;qBACF;oBACD,MAAM,EAAE;wBACN,IAAI,EAAE,IAAI;wBACV,QAAQ,EAAE,KAAK;wBACf,eAAe,EAAE,MAAM;qBACxB;oBACD,KAAK,EAAE;wBACL,UAAU,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;wBAClF,MAAM,EAAE;4BACN,IAAI,EAAE,IAAI;4BACV,KAAK,EAAE;gCACL,UAAU,EAAE,mBAAmB;gCAC/B,QAAQ,EAAE,sDAAsD;6BACjE;yBACF;wBACD,UAAU,EAAE;4BACV,IAAI,EAAE,KAAK;yBACZ;wBACD,SAAS,EAAE;4BACT,IAAI,EAAE,KAAK;yBACZ;qBACF;oBACD,KAAK,EAAE;wBACL,IAAI,EAAE,KAAK;qBACZ;iBACF;aACF;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"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"}

package/dist/fragments/form/FormSection.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "@nextui-org/react";
 const formSection = tv({
     slots: {
-        base: 'flex gap-4 py-6 border-t-1 border-default-100 max-w-3xl',
+        base: 'flex gap-4 py-6 border-t-1 border-default-100 max-w-3xl flex-col',
         content: 'flex flex-col gap-4 flex-1',
         info: 'flex-1',
         description: 'text-small text-foreground-500',
@@ -13,13 +13,10 @@ const formSection = tv({
     variants: {
         direction: {
             horizontal: {
-                base: 'flex-row',
-                content: 'items-end justify-center',
+                base: 'sm:flex-row',
+                content: 'sm:items-end sm:justify-center',
             },
-            vertical: {
-                base: 'flex-col',
-                content: 'items-start',
-            }
+            vertical: {},
         }
     },
     defaultVariants: {

package/dist/fragments/form/FormSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormSection.js","sourceRoot":"","sources":["../../../src/fragments/form/FormSection.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AASvC,MAAM,WAAW,GAAG,EAAE,CAAC;IACrB,KAAK,EAAE;QACL,IAAI,EAAE,yDAAyD;QAC/D,OAAO,EAAE,4BAA4B;QACrC,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,gCAAgC;KAC9C;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,UAAU,EAAE;gBACV,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,0BAA0B;aACpC;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,aAAa;aACvB;SACF;KACF;IACD,eAAe,EAAE;QACf,SAAS,EAAE,UAAU;KACtB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACpG,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAEpF,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,EAAE,aACpB,eAAK,SAAS,EAAE,IAAI,EAAE,aACpB,uBAAK,KAAK,GAAM,EAChB,YAAG,SAAS,EAAE,kBAAkB,EAAE,YAAG,WAAW,GAAK,IACjD,EACN,cAAK,SAAS,EAAE,OAAO,EAAE,YACtB,QAAQ,GACL,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"FormSection.js","sourceRoot":"","sources":["../../../src/fragments/form/FormSection.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AASvC,MAAM,WAAW,GAAG,EAAE,CAAC;IACrB,KAAK,EAAE;QACL,IAAI,EAAE,kEAAkE;QACxE,OAAO,EAAE,4BAA4B;QACrC,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,gCAAgC;KAC9C;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,UAAU,EAAE;gBACV,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,gCAAgC;aAC1C;YACD,QAAQ,EAAE,EAAE;SACb;KACF;IACD,eAAe,EAAE;QACf,SAAS,EAAE,UAAU;KACtB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACpG,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAEpF,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,EAAE,aACpB,eAAK,SAAS,EAAE,IAAI,EAAE,aACpB,uBAAK,KAAK,GAAM,EAChB,YAAG,SAAS,EAAE,kBAAkB,EAAE,YAAG,WAAW,GAAK,IACjD,EACN,cAAK,SAAS,EAAE,OAAO,EAAE,YACtB,QAAQ,GACL,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/fragments/shell/Shell.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Sidebar } from '../sidebar/Sidebar';
 export const Shell = ({ sidebar, children }) => {
-    return (_jsxs("div", { className: `flex min-h-screen`, children: [_jsx(Sidebar, { ...sidebar }), _jsx("main", { className: "flex-1 px-6 lg:px-12 xl:px-20 py-14 max-w-screen-2xl min-w-0", children: children })] }));
+    return (_jsxs("div", { className: "flex min-h-screen", children: [_jsx(Sidebar, { ...sidebar }), _jsx("main", { className: "flex-1 px-6 lg:px-12 xl:px-20 py-14 max-w-screen-2xl", children: children })] }));
 };
 //# sourceMappingURL=Shell.js.map

package/dist/fragments/shell/Shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shell.js","sourceRoot":"","sources":["../../../src/fragments/shell/Shell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAgB,MAAM,oBAAoB,CAAC;AAW3D,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnE,OAAO,CACL,eAAK,SAAS,EAAE,mBAAmB,aACjC,KAAC,OAAO,OAAK,OAAO,GAAI,EACxB,eAAM,SAAS,EAAC,8DAA8D,YAC3E,QAAQ,GACJ,IACH,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Shell.js","sourceRoot":"","sources":["../../../src/fragments/shell/Shell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAgB,MAAM,oBAAoB,CAAC;AAW3D,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnE,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,OAAO,OAAK,OAAO,GAAI,EACxB,eAAM,SAAS,EAAC,sDAAsD,YACnE,QAAQ,GACJ,IACH,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/fragments/shell/Shell.stories.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { IconBox, IconBoxMultiple, IconHome, IconMessageCircle, } from "@tabler/icons-react";
 import { Shell } from "./Shell";
-import { Card, CardBody, Divider, Input, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tab, Tabs } from "../../components/base";
+import { Card, CardBody, Divider, Input, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tab, Tabs, BreadcrumbItem, Breadcrumbs, Textarea, Switch } from "../../components/base";
 import { FormSection } from "../form/FormSection";
 import { Widget } from "../widget/Widget";
+import { Chart, Grid } from "../../components";
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
     title: "fragments/Shell",
@@ -125,13 +126,151 @@ export const Auto = {
 export const WithTable = {
     args: {
         ...Primary.args,
-        children: (_jsxs(_Fragment, { children: [_jsx("h1", { children: "Customers" }), _jsx("p", { className: "mt-2 text-foreground-500", children: "Blablabla" }), _jsx(Divider, { className: "my-4" }), _jsxs(Tabs, { "aria-label": "Options", children: [_jsx(Tab, { title: "Table", children: _jsxs(Table, { "aria-label": "Example static collection table", selectionMode: "multiple", children: [_jsxs(TableHeader, { children: [_jsx(TableColumn, { children: "NAME" }), _jsx(TableColumn, { children: "ROLE" }), _jsx(TableColumn, { children: "STATUS" })] }), _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: "Tony Reichert" }), _jsx(TableCell, { children: "CEO" }), _jsx(TableCell, { children: "Active" })] }, "1"), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Zoey Lang" }), _jsx(TableCell, { children: "Technical Lead" }), _jsx(TableCell, { children: "Paused" })] }, "2"), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Jane Fisher" }), _jsx(TableCell, { children: "Senior Developer" }), _jsx(TableCell, { children: "Active" })] }, "3"), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "William Howard" }), _jsx(TableCell, { children: "Community Manager" }), _jsx(TableCell, { children: "Vacation" })] }, "4")] })] }) }, "table"), _jsx(Tab, { title: "Settings", children: _jsxs("form", { children: [_jsx("h2", { children: "First Section" }), _jsx(FormSection, { title: "Title", description: "Description", children: _jsx(Input, {}) }), _jsx(FormSection, { title: "Title", description: "Description", children: _jsx(Input, {}) }), _jsx(FormSection, { title: "Title", description: "Description", children: _jsx(Input, {}) }), _jsx(FormSection, { title: "Title", description: "Description", children: _jsx(Input, {}) }), _jsx("h2", { children: "Second Section" }), _jsx(FormSection, { title: "Title", description: "Description", children: _jsx(Input, {}) }), _jsx(FormSection, { title: "Title", description: "Description", children: _jsx(Input, {}) }), _jsx(FormSection, { title: "Title", description: "Description", children: _jsx(Input, {}) }), _jsx(FormSection, { title: "Title", description: "Description", children: _jsx(Input, {}) })] }) }, "settings"), _jsx(Tab, { title: "Videos", children: _jsx(Card, { children: _jsx(CardBody, { children: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }) }) }, "videos")] })] })),
+        sidebar: Primary.args?.sidebar ? {
+            ...Primary.args.sidebar,
+            autoLayout: true,
+        } : undefined,
+        children: (_jsxs(_Fragment, { children: [_jsx("h1", { children: "Customers" }), _jsx("p", { className: "mt-2 text-foreground-500", children: "Blablabla" }), _jsx(Divider, { className: "my-4" }), _jsxs(Tabs, { "aria-label": "Options", children: [_jsx(Tab, { title: "Table", children: _jsxs(Table, { "aria-label": "Example static collection table", selectionMode: "multiple", children: [_jsxs(TableHeader, { children: [_jsx(TableColumn, { children: "NAME" }), _jsx(TableColumn, { children: "ROLE" }), _jsx(TableColumn, { children: "STATUS" })] }), _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: "Tony Reichert" }), _jsx(TableCell, { children: "CEO" }), _jsx(TableCell, { children: "Active" })] }, "1"), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Zoey Lang" }), _jsx(TableCell, { children: "Technical Lead" }), _jsx(TableCell, { children: "Paused" })] }, "2"), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Jane Fisher" }), _jsx(TableCell, { children: "Senior Developer" }), _jsx(TableCell, { children: "Active" })] }, "3"), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "William Howard" }), _jsx(TableCell, { children: "Community Manager" }), _jsx(TableCell, { children: "Vacation" })] }, "4")] })] }) }, "table"), _jsx(Tab, { title: "Settings", children: _jsxs("form", { children: [_jsx("h2", { children: "First Section" }), _jsxs(FormSection, { title: "Name", description: "Description", direction: "horizontal", children: [_jsx(Input, { label: "First name" }), _jsx(Input, { label: "Last name" })] }), _jsx(FormSection, { title: "Biography", description: "Description", children: _jsx(Textarea, { label: "Biography", minRows: 6 }) }), _jsx(FormSection, { title: "Notifications", description: "Turn on/off email notifications.", direction: "horizontal", children: _jsx(Switch, {}) }), _jsx("h2", { children: "Second Section" }), _jsxs(FormSection, { title: "Title", description: "Description", direction: "horizontal", children: [_jsx(Input, { label: "First name" }), _jsx(Input, { label: "Last name" })] }), _jsxs(FormSection, { title: "Title", description: "Description", direction: "horizontal", children: [_jsx(Input, { label: "First name" }), _jsx(Input, { label: "Last name" })] })] }) }, "settings"), _jsx(Tab, { title: "Videos", children: _jsx(Card, { children: _jsx(CardBody, { children: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }) }) }, "videos")] })] })),
     },
 };
 export const WithGrid = {
     args: {
         ...Primary.args,
-        children: (_jsxs(_Fragment, { children: [_jsx("h1", { children: "Customers" }), _jsx("p", { className: "mt-2 text-foreground-500", children: "Blablabla" }), _jsx(Divider, { className: "my-4" }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-4 gap-6", children: [_jsx(Widget, { title: "Bla", children: "Bla" }), _jsx(Widget, { title: "Bla", children: "Bla" }), _jsx(Widget, { title: "Bla", children: "Bla" }), _jsx(Widget, { title: "Bla", children: "Bla" })] })] })),
+        sidebar: Primary.args?.sidebar ? {
+            ...Primary.args.sidebar,
+            autoLayout: true,
+        } : undefined,
+        children: (_jsxs(_Fragment, { children: [_jsxs(Breadcrumbs, { children: [_jsx(BreadcrumbItem, { children: "Home" }), _jsx(BreadcrumbItem, { children: "Customers" })] }), _jsx("h1", { children: "Customers" }), _jsx("p", { className: "mt-2 text-foreground-500", children: "Blablabla" }), _jsx(Divider, { className: "my-4" }), _jsxs(Grid, { size: "lg", children: [_jsx(Widget, { title: "Analytics", colSpan: 2, children: _jsx(Chart, { type: "line", series: [
+                                    {
+                                        name: "Clicks",
+                                        data: [6500, 6418, 6456, 6526, 6356, 6456],
+                                        color: "#1A56DB",
+                                    },
+                                    {
+                                        name: "CPC",
+                                        data: [6456, 6356, 6526, 6332, 6418, 6500],
+                                        color: "#7E3AF2",
+                                    },
+                                ], height: "350px" }) }), _jsx(Widget, { title: "Traffic", children: _jsx(Chart, { type: "pie", 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], height: "350px" }) }), _jsx(Widget, { title: "Origins", colSpan: 2, children: _jsx(Chart, { type: "column", 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 },
+                                        ],
+                                    },
+                                ], height: "350px" }) }), _jsx(Widget, { title: "Cost", children: _jsx(Chart, { type: "bar", 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",
+                                    }
+                                ] }) }), _jsx(Widget, { title: "New Users", children: _jsx(Chart, { type: "area", 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",
+                                    },
+                                ] }) }), _jsx(Widget, { title: "Website traffic", children: _jsx(Chart, { type: "donut", 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], height: "350px" }) }), _jsx(Widget, { title: "New Users", children: _jsx(Chart, { type: "radial", options: {
+                                    labels: ["Done", "In progress", "To do"],
+                                    yaxis: {
+                                        labels: {
+                                            formatter: function (value) {
+                                                return value + '%';
+                                            }
+                                        }
+                                    }
+                                }, series: [90, 85, 70], height: "350px" }) })] })] })),
     },
 };
 //# sourceMappingURL=Shell.stories.js.map