@c-rex/components 0.0.8 → 0.0.9

package/dist/stories/sidebar.stories.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/periotto/Desktop/workspace/c-rex.net-web-client-foundation/packages/components/dist/stories/sidebar.stories.cjs.js","../../src/stories/sidebar.stories.tsx","../../src/sidebar.tsx"],"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","sidebar_stories_exports","Default","Loading","default","sidebar_stories_default","module","exports","import_sidebar","require","import_skeleton","import_jsx_runtime","AppSidebar","data","loading","props","jsxs","Sidebar","collapsible","className","children","jsx","SidebarContent","SidebarGroup","SidebarMenu","Fragment","Skeleton","map","item","SidebarMenuItem","SidebarMenuButton","asChild","isActive","active","href","link","title","label","length","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuSubButton","id","SidebarRail","meta","component","tags","parameters","layout","argTypes","control","decorators","Story","import_jsx_runtime2","import_sidebar3","SidebarProvider","SidebarTrigger","SidebarInset","mockData","args"],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAIA,YAAYC,OAAOC,cAAc;AACrC,IAAIC,mBAAmBF,OAAOG,wBAAwB;AACtD,IAAIC,oBAAoBJ,OAAOK,mBAAmB;AAClD,IAAIC,eAAeN,OAAOO,SAAS,CAACC,cAAc;AAClD,IAAIC,WAAW,SAACC,QAAQC;IACtB,IAAK,IAAIC,QAAQD,IACfZ,UAAUW,QAAQE,MAAM;QAAEC,KAAKF,GAAG,CAACC,KAAK;QAAEE,YAAY;IAAK;AAC/D;AACA,IAAIC,cAAc,SAACC,IAAIC,MAAMC,QAAQC;IACnC,IAAIF,QAAQ,CAAA,OAAOA,qCAAP,SAAOA,KAAG,MAAM,YAAY,OAAOA,SAAS,YAAY;YAC7D,kCAAA,2BAAA;;;gBAAA,IAAIG,MAAJ;gBACH,IAAI,CAACd,aAAae,IAAI,CAACL,IAAII,QAAQA,QAAQF,QACzCnB,UAAUiB,IAAII,KAAK;oBAAEP,KAAK;+BAAMI,IAAI,CAACG,IAAI;;oBAAEN,YAAY,CAAEK,CAAAA,OAAOjB,iBAAiBe,MAAMG,IAAG,KAAMD,KAAKL,UAAU;gBAAC;;YAFpH,QAAK,YAAWV,kBAAkBa,0BAA7B,SAAA,6BAAA,QAAA,yBAAA;;YAAA;YAAA;;;qBAAA,6BAAA;oBAAA;;;oBAAA;0BAAA;;;;IAGP;IACA,OAAOD;AACT;AACA,IAAIM,eAAe,SAACC;WAAQR,YAAYhB,UAAU,CAAC,GAAG,cAAc;QAAEyB,OAAO;IAAK,IAAID;;AAEtF,kCAAkC;ACnBlC,IAAAE,0BAAA,CAAA;AAAAhB,SAAAgB,yBAAA;IAAAC,SAAA;eAAAA;;IAAAC,SAAA;eAAAA;;IAAAC,SAAA;eAAAC;;AAAA;AAAAC,OAAAC,OAAA,GAAAT,aAAAG;AD4BA,kBAAkB;AEzBlB,IAAAO,iBAWOC,QAAA;AACP,IAAAC,kBAAyBD,QAAA;AAeG,IAAAE,qBAAAF,QAAA;AAPrB,SAASG,WAAW;QAAEC,OAAF,OAAEA,MAAMC,UAAR,OAAQA,SAAYC,mCAApB;QAAEF;QAAMC;;IAC/B,OACI,aAAA,GAAA,CAAA,GAAAH,mBAAAK,IAAA,EAACR,eAAAS,OAAA,EAAA;QAAQC,aAAY;OAAWH;QAAOI,WAAU;QAC7CC,UAAA;YAAA,aAAA,GAAA,CAAA,GAAAT,mBAAAU,GAAA,EAACb,eAAAc,cAAA,EAAA;gBACGF,UAAA,aAAA,GAAA,CAAA,GAAAT,mBAAAU,GAAA,EAACb,eAAAe,YAAA,EAAA;oBACGH,UAAA,aAAA,GAAA,CAAA,GAAAT,mBAAAU,GAAA,EAACb,eAAAgB,WAAA,EAAA;wBAAYL,WAAU;wBAClBC,UAAAN,UACG,aAAA,GAAA,CAAA,GAAAH,mBAAAK,IAAA,EAAAL,mBAAAc,QAAA,EAAA;4BACIL,UAAA;gCAAA,aAAA,GAAA,CAAA,GAAAT,mBAAAU,GAAA,EAACX,gBAAAgB,QAAA,EAAA;oCAASP,WAAU;gCAAA;gCACpB,aAAA,GAAA,CAAA,GAAAR,mBAAAU,GAAA,EAACX,gBAAAgB,QAAA,EAAA;oCAASP,WAAU;gCAAA;gCACpB,aAAA,GAAA,CAAA,GAAAR,mBAAAU,GAAA,EAACX,gBAAAgB,QAAA,EAAA;oCAASP,WAAU;gCAAA;gCACpB,aAAA,GAAA,CAAA,GAAAR,mBAAAU,GAAA,EAACX,gBAAAgB,QAAA,EAAA;oCAASP,WAAU;gCAAA;gCACpB,aAAA,GAAA,CAAA,GAAAR,mBAAAU,GAAA,EAACX,gBAAAgB,QAAA,EAAA;oCAASP,WAAU;gCAAA;gCACpB,aAAA,GAAA,CAAA,GAAAR,mBAAAU,GAAA,EAACX,gBAAAgB,QAAA,EAAA;oCAASP,WAAU;gCAAA;gCACpB,aAAA,GAAA,CAAA,GAAAR,mBAAAU,GAAA,EAACX,gBAAAgB,QAAA,EAAA;oCAASP,WAAU;gCAAA;6BAAmB;wBAAA,KAG3C,aAAA,GAAA,CAAA,GAAAR,mBAAAU,GAAA,EAAAV,mBAAAc,QAAA,EAAA;4BACKL,UAAAP,KAAKc,GAAA,CAAI,SAACC;oCAQFA;uCAPL,aAAA,GAAA,CAAA,GAAAjB,mBAAAK,IAAA,EAACR,eAAAqB,eAAA,EAAA;oCACGT,UAAA;wCAAA,aAAA,GAAA,CAAA,GAAAT,mBAAAU,GAAA,EAACb,eAAAsB,iBAAA,EAAA;4CAAkBC,SAAO;4CAACC,UAAUJ,KAAKK,MAAA;4CACtCb,UAAA,aAAA,GAAA,CAAA,GAAAT,mBAAAU,GAAA,EAAC,KAAA;gDAAEa,MAAMN,KAAKO,IAAA;gDAAMC,OAAOR,KAAKS,KAAA;gDAC3BjB,UAAAQ,KAAKS,KAAA;4CAAA;wCACV;wCAGHT,EAAAA,iBAAAA,KAAKR,QAAA,cAALQ,qCAAAA,eAAeU,MAAA,IACZ,aAAA,GAAA,CAAA,GAAA3B,mBAAAU,GAAA,EAACb,eAAA+B,cAAA,EAAA;4CACInB,UAAAQ,KAAKR,QAAA,CAASO,GAAA,CAAI,SAACC;uDAChB,aAAA,GAAA,CAAA,GAAAjB,mBAAAU,GAAA,EAACb,eAAAgC,kBAAA,EAAA;oDACGpB,UAAA,aAAA,GAAA,CAAA,GAAAT,mBAAAU,GAAA,EAACb,eAAAiC,oBAAA,EAAA;wDACGV,SAAO;wDACPC,UAAUJ,MAAKK,MAAA;wDAEfb,UAAA,aAAA,GAAA,CAAA,GAAAT,mBAAAU,GAAA,EAAC,KAAA;4DAAEa,MAAMN,MAAKO,IAAA;4DAAMC,OAAOR,MAAKS,KAAA;4DAC3BjB,UAAAQ,MAAKS,KAAA;wDAAA;oDACV;gDACJ,GARqBT,MAAKS,KAS9B;;wCACH,KAEL;qCAAA;gCAAA,GAtBcT,KAAKc,EAuB3B;;wBACH;oBACL;gBAER;YACJ;YAEJ,aAAA,GAAA,CAAA,GAAA/B,mBAAAU,GAAA,EAACb,eAAAmC,WAAA,EAAA,CAAA;SAAY;;AAGzB;AFlBA,kCAAkC;ACvDlC,IAAAnC,kBAA8DC,QAAA;AAelD,IAAAE,sBAAAF,QAAA;AAbZ,IAAMmC,OAAO;IACTR,OAAO;IACPS,WAAWjC;IACXkC,MAAM;QAAC;KAAU;IACjBC,YAAY;QACRC,QAAQ;IACZ;IACAC,UAAU;QACNpC,MAAM;YAAEqC,SAAS;QAAS;QAC1BpC,SAAS;YAAEoC,SAAS;QAAU;IAClC;IACAC,YAAY;QACR,SAACC;mBACG,aAAA,GAAA,CAAA,GAAAC,oBAAArC,IAAA,EAACsC,gBAAAC,eAAA,EAAA;gBACGnC,UAAA;oBAAA,aAAA,GAAA,CAAA,GAAAiC,oBAAAhC,GAAA,EAACiC,gBAAAE,cAAA,EAAA,CAAA;oBAED,aAAA,GAAA,CAAA,GAAAH,oBAAAhC,GAAA,EAAC,OAAA;wBAAIF,WAAU;wBACXC,UAAA,aAAA,GAAA,CAAA,GAAAiC,oBAAAhC,GAAA,EAACiC,gBAAAG,YAAA,EAAA;4BACGrC,UAAA,aAAA,GAAA,CAAA,GAAAiC,oBAAAhC,GAAA,EAAC+B,OAAA,CAAA;wBAAM;oBACX;iBACJ;YAAA;;KAIZ;AACJ;AAEA,IAAO/C,0BAAQuC;AAGf,IAAMc,WAAW;IACb;QACIhB,IAAI;QACJL,OAAO;QACPF,MAAM;QACNF,QAAQ;QACRb,UAAU;YACN;gBACIsB,IAAI;gBACJL,OAAO;gBACPF,MAAM;gBACNF,QAAQ;gBACRb,UAAU,EAAC;YACf;YACA;gBACIsB,IAAI;gBACJL,OAAO;gBACPF,MAAM;gBACNF,QAAQ;gBACRb,UAAU,EAAC;YACf;SACJ;IACJ;IACA;QACIsB,IAAI;QACJL,OAAO;QACPF,MAAM;QACNF,QAAQ;QACRb,UAAU;YACN;gBACIsB,IAAI;gBACJL,OAAO;gBACPF,MAAM;gBACNF,QAAQ;gBACRb,UAAU,EAAC;YACf;YACA;gBACIsB,IAAI;gBACJL,OAAO;gBACPF,MAAM;gBACNF,QAAQ;gBACRb,UAAU,EAAC;YACf;SACJ;IACJ;CACJ;AAEO,IAAMlB,UAAiB;IAC1ByD,MAAM;QACF9C,MAAM6C;QACN5C,SAAS;IACb;AACJ;AAEO,IAAMX,UAAiB;IAC1BwD,MAAM;QACF9C,MAAM,EAAC;QACPC,SAAS;IACb;AACJ;AD4CA,6DAA6D;AAC7D,KAAMR,CAAAA,OAAOC,OAAO,GAAG;IACrBL,SAAAA;IACAC,SAAAA;AACF,CAAA","sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\n\n// src/stories/sidebar.stories.tsx\nvar sidebar_stories_exports = {};\n__export(sidebar_stories_exports, {\n  Default: () => Default,\n  Loading: () => Loading,\n  default: () => sidebar_stories_default\n});\nmodule.exports = __toCommonJS(sidebar_stories_exports);\n\n// src/sidebar.tsx\nvar import_sidebar = require(\"@c-rex/ui/sidebar\");\nvar import_skeleton = require(\"@c-rex/ui/skeleton\");\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nfunction AppSidebar({ data, loading, ...props }) {\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sidebar.Sidebar, { collapsible: \"icon\", ...props, className: \"top-20\", children: [\n    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.SidebarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.SidebarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.SidebarMenu, { className: \"pt-4\", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [\n      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: \"w-auto h-10 mb-2\" }),\n      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: \"w-auto h-10 mb-2\" }),\n      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: \"w-auto h-10 mb-2 ml-8\" }),\n      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: \"w-auto h-10 mb-2 ml-8\" }),\n      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: \"w-auto h-10 mb-2 ml-8\" }),\n      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: \"w-auto h-10 mb-2 ml-8\" }),\n      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: \"w-auto h-10 mb-2\" })\n    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sidebar.SidebarMenuItem, { children: [\n      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.SidebarMenuButton, { asChild: true, isActive: item.active, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"a\", { href: item.link, title: item.label, children: item.label }) }),\n      item.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.SidebarMenuSub, { children: item.children.map((item2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.SidebarMenuSubItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\n        import_sidebar.SidebarMenuSubButton,\n        {\n          asChild: true,\n          isActive: item2.active,\n          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"a\", { href: item2.link, title: item2.label, children: item2.label })\n        }\n      ) }, item2.label)) }) : null\n    ] }, item.id)) }) }) }) }),\n    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.SidebarRail, {})\n  ] });\n}\n\n// src/stories/sidebar.stories.tsx\nvar import_sidebar3 = require(\"@c-rex/ui/sidebar\");\nvar import_jsx_runtime2 = require(\"react/jsx-runtime\");\nvar meta = {\n  title: \"Components/Sidebar\",\n  component: AppSidebar,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\"\n  },\n  argTypes: {\n    data: { control: \"object\" },\n    loading: { control: \"boolean\" }\n  },\n  decorators: [\n    (Story) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sidebar3.SidebarProvider, { children: [\n      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sidebar3.SidebarTrigger, {}),\n      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(\"div\", { className: \"flex\", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sidebar3.SidebarInset, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Story, {}) }) })\n    ] })\n  ]\n};\nvar sidebar_stories_default = meta;\nvar mockData = [\n  {\n    id: \"1\",\n    label: \"Getting Started\",\n    link: \"/docs/getting-started\",\n    active: true,\n    children: [\n      {\n        id: \"1-1\",\n        label: \"Installation\",\n        link: \"/docs/getting-started/installation\",\n        active: false,\n        children: []\n      },\n      {\n        id: \"1-2\",\n        label: \"Configuration\",\n        link: \"/docs/getting-started/configuration\",\n        active: false,\n        children: []\n      }\n    ]\n  },\n  {\n    id: \"2\",\n    label: \"Components\",\n    link: \"/docs/components\",\n    active: false,\n    children: [\n      {\n        id: \"2-1\",\n        label: \"Sidebar\",\n        link: \"/docs/components/sidebar\",\n        active: false,\n        children: []\n      },\n      {\n        id: \"2-2\",\n        label: \"Navbar\",\n        link: \"/docs/components/navbar\",\n        active: false,\n        children: []\n      }\n    ]\n  }\n];\nvar Default = {\n  args: {\n    data: mockData,\n    loading: false\n  }\n};\nvar Loading = {\n  args: {\n    data: [],\n    loading: true\n  }\n};\n// Annotate the CommonJS export names for ESM import in node:\n0 && (module.exports = {\n  Default,\n  Loading\n});\n","import type { Meta, StoryObj } from '@storybook/react';\nimport { AppSidebar } from '../sidebar';\nimport { SidebarInset, SidebarProvider, SidebarTrigger } from \"@c-rex/ui/sidebar\";\n\nconst meta = {\n    title: 'Components/Sidebar',\n    component: AppSidebar,\n    tags: ['autodocs'],\n    parameters: {\n        layout: 'centered',\n    },\n    argTypes: {\n        data: { control: 'object' },\n        loading: { control: 'boolean' },\n    },\n    decorators: [\n        (Story: any) => (\n            <SidebarProvider>\n                <SidebarTrigger />\n\n                <div className=\"flex\">\n                    <SidebarInset>\n                        <Story />\n                    </SidebarInset>\n                </div>\n            </SidebarProvider>\n\n        ),\n    ]\n} satisfies Meta<typeof AppSidebar>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst mockData = [\n    {\n        id: '1',\n        label: 'Getting Started',\n        link: '/docs/getting-started',\n        active: true,\n        children: [\n            {\n                id: '1-1',\n                label: 'Installation',\n                link: '/docs/getting-started/installation',\n                active: false,\n                children: [],\n            },\n            {\n                id: '1-2',\n                label: 'Configuration',\n                link: '/docs/getting-started/configuration',\n                active: false,\n                children: [],\n            },\n        ],\n    },\n    {\n        id: '2',\n        label: 'Components',\n        link: '/docs/components',\n        active: false,\n        children: [\n            {\n                id: '2-1',\n                label: 'Sidebar',\n                link: '/docs/components/sidebar',\n                active: false,\n                children: [],\n            },\n            {\n                id: '2-2',\n                label: 'Navbar',\n                link: '/docs/components/navbar',\n                active: false,\n                children: [],\n            },\n        ],\n    },\n];\n\nexport const Default: Story = {\n    args: {\n        data: mockData,\n        loading: false,\n    },\n};\n\nexport const Loading: Story = {\n    args: {\n        data: [],\n        loading: true,\n    },\n};","\"use client\";\n\nimport { ComponentProps } from \"react\";\nimport {\n    Sidebar,\n    SidebarContent,\n    SidebarGroup,\n    SidebarMenu,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    SidebarMenuSub,\n    SidebarMenuSubButton,\n    SidebarMenuSubItem,\n    SidebarRail\n} from \"@c-rex/ui/sidebar\";\nimport { Skeleton } from \"@c-rex/ui/skeleton\";\nimport { TreeOfContent } from \"@c-rex/interfaces\";\n\ninterface SidebarProps extends ComponentProps<typeof Sidebar> {\n    data: TreeOfContent[];\n    loading?: boolean;\n}\n\nexport function AppSidebar({ data, loading, ...props }: SidebarProps) {\n    return (\n        <Sidebar collapsible=\"icon\" {...props} className=\"top-20\">\n            <SidebarContent>\n                <SidebarGroup>\n                    <SidebarMenu className=\"pt-4\">\n                        {loading ? (\n                            <>\n                                <Skeleton className=\"w-auto h-10 mb-2\" />\n                                <Skeleton className=\"w-auto h-10 mb-2\" />\n                                <Skeleton className=\"w-auto h-10 mb-2 ml-8\" />\n                                <Skeleton className=\"w-auto h-10 mb-2 ml-8\" />\n                                <Skeleton className=\"w-auto h-10 mb-2 ml-8\" />\n                                <Skeleton className=\"w-auto h-10 mb-2 ml-8\" />\n                                <Skeleton className=\"w-auto h-10 mb-2\" />\n                            </>\n                        ) : (\n                            <>\n                                {data.map((item) => (\n                                    <SidebarMenuItem key={item.id}>\n                                        <SidebarMenuButton asChild isActive={item.active}>\n                                            <a href={item.link} title={item.label}>\n                                                {item.label}\n                                            </a>\n                                        </SidebarMenuButton>\n\n                                        {item.children?.length ? (\n                                            <SidebarMenuSub>\n                                                {item.children.map((item) => (\n                                                    <SidebarMenuSubItem key={item.label}>\n                                                        <SidebarMenuSubButton\n                                                            asChild\n                                                            isActive={item.active}\n                                                        >\n                                                            <a href={item.link} title={item.label}>\n                                                                {item.label}\n                                                            </a>\n                                                        </SidebarMenuSubButton>\n                                                    </SidebarMenuSubItem>\n                                                ))}\n                                            </SidebarMenuSub>\n                                        ) : null}\n                                    </SidebarMenuItem>\n                                ))}\n                            </>\n                        )}\n                    </SidebarMenu>\n                </SidebarGroup>\n            </SidebarContent>\n            <SidebarRail />\n        </Sidebar>\n    );\n}\n"]}

package/dist/stories/sidebar.stories.d.cts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StoryObj } from '@storybook/react';
+import { AppSidebar } from '../sidebar.cjs';
+import 'react';
+import '@c-rex/ui/sidebar';
+import '@c-rex/interfaces';
+
+declare const meta: {
+    title: string;
+    component: typeof AppSidebar;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        data: {
+            control: "object";
+        };
+        loading: {
+            control: "boolean";
+        };
+    };
+    decorators: ((Story: any) => react_jsx_runtime.JSX.Element)[];
+};
+
+type Story = StoryObj<typeof meta>;
+declare const Default: Story;
+declare const Loading: Story;
+
+export { Default, Loading, meta as default };

package/dist/stories/sidebar.stories.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StoryObj } from '@storybook/react';
+import { AppSidebar } from '../sidebar.js';
+import 'react';
+import '@c-rex/ui/sidebar';
+import '@c-rex/interfaces';
+
+declare const meta: {
+    title: string;
+    component: typeof AppSidebar;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        data: {
+            control: "object";
+        };
+        loading: {
+            control: "boolean";
+        };
+    };
+    decorators: ((Story: any) => react_jsx_runtime.JSX.Element)[];
+};
+
+type Story = StoryObj<typeof meta>;
+declare const Default: Story;
+declare const Loading: Story;
+
+export { Default, Loading, meta as default };

package/dist/stories/sidebar.stories.esm.js

@@ -0,0 +1,258 @@
+// src/sidebar.tsx
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { Sidebar, SidebarContent, SidebarGroup, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarRail } from "@c-rex/ui/sidebar";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AppSidebar(_param) {
+    var data = _param.data, loading = _param.loading, props = _object_without_properties(_param, [
+        "data",
+        "loading"
+    ]);
+    return /* @__PURE__ */ jsxs(Sidebar, _object_spread_props(_object_spread({
+        collapsible: "icon"
+    }, props), {
+        className: "top-20",
+        children: [
+            /* @__PURE__ */ jsx(SidebarContent, {
+                children: /* @__PURE__ */ jsx(SidebarGroup, {
+                    children: /* @__PURE__ */ jsx(SidebarMenu, {
+                        className: "pt-4",
+                        children: loading ? /* @__PURE__ */ jsxs(Fragment, {
+                            children: [
+                                /* @__PURE__ */ jsx(Skeleton, {
+                                    className: "w-auto h-10 mb-2"
+                                }),
+                                /* @__PURE__ */ jsx(Skeleton, {
+                                    className: "w-auto h-10 mb-2"
+                                }),
+                                /* @__PURE__ */ jsx(Skeleton, {
+                                    className: "w-auto h-10 mb-2 ml-8"
+                                }),
+                                /* @__PURE__ */ jsx(Skeleton, {
+                                    className: "w-auto h-10 mb-2 ml-8"
+                                }),
+                                /* @__PURE__ */ jsx(Skeleton, {
+                                    className: "w-auto h-10 mb-2 ml-8"
+                                }),
+                                /* @__PURE__ */ jsx(Skeleton, {
+                                    className: "w-auto h-10 mb-2 ml-8"
+                                }),
+                                /* @__PURE__ */ jsx(Skeleton, {
+                                    className: "w-auto h-10 mb-2"
+                                })
+                            ]
+                        }) : /* @__PURE__ */ jsx(Fragment, {
+                            children: data.map(function(item) {
+                                var _item_children;
+                                return /* @__PURE__ */ jsxs(SidebarMenuItem, {
+                                    children: [
+                                        /* @__PURE__ */ jsx(SidebarMenuButton, {
+                                            asChild: true,
+                                            isActive: item.active,
+                                            children: /* @__PURE__ */ jsx("a", {
+                                                href: item.link,
+                                                title: item.label,
+                                                children: item.label
+                                            })
+                                        }),
+                                        ((_item_children = item.children) === null || _item_children === void 0 ? void 0 : _item_children.length) ? /* @__PURE__ */ jsx(SidebarMenuSub, {
+                                            children: item.children.map(function(item2) {
+                                                return /* @__PURE__ */ jsx(SidebarMenuSubItem, {
+                                                    children: /* @__PURE__ */ jsx(SidebarMenuSubButton, {
+                                                        asChild: true,
+                                                        isActive: item2.active,
+                                                        children: /* @__PURE__ */ jsx("a", {
+                                                            href: item2.link,
+                                                            title: item2.label,
+                                                            children: item2.label
+                                                        })
+                                                    })
+                                                }, item2.label);
+                                            })
+                                        }) : null
+                                    ]
+                                }, item.id);
+                            })
+                        })
+                    })
+                })
+            }),
+            /* @__PURE__ */ jsx(SidebarRail, {})
+        ]
+    }));
+}
+// src/stories/sidebar.stories.tsx
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@c-rex/ui/sidebar";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var meta = {
+    title: "Components/Sidebar",
+    component: AppSidebar,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        data: {
+            control: "object"
+        },
+        loading: {
+            control: "boolean"
+        }
+    },
+    decorators: [
+        function(Story) {
+            return /* @__PURE__ */ jsxs2(SidebarProvider, {
+                children: [
+                    /* @__PURE__ */ jsx2(SidebarTrigger, {}),
+                    /* @__PURE__ */ jsx2("div", {
+                        className: "flex",
+                        children: /* @__PURE__ */ jsx2(SidebarInset, {
+                            children: /* @__PURE__ */ jsx2(Story, {})
+                        })
+                    })
+                ]
+            });
+        }
+    ]
+};
+var sidebar_stories_default = meta;
+var mockData = [
+    {
+        id: "1",
+        label: "Getting Started",
+        link: "/docs/getting-started",
+        active: true,
+        children: [
+            {
+                id: "1-1",
+                label: "Installation",
+                link: "/docs/getting-started/installation",
+                active: false,
+                children: []
+            },
+            {
+                id: "1-2",
+                label: "Configuration",
+                link: "/docs/getting-started/configuration",
+                active: false,
+                children: []
+            }
+        ]
+    },
+    {
+        id: "2",
+        label: "Components",
+        link: "/docs/components",
+        active: false,
+        children: [
+            {
+                id: "2-1",
+                label: "Sidebar",
+                link: "/docs/components/sidebar",
+                active: false,
+                children: []
+            },
+            {
+                id: "2-2",
+                label: "Navbar",
+                link: "/docs/components/navbar",
+                active: false,
+                children: []
+            }
+        ]
+    }
+];
+var Default = {
+    args: {
+        data: mockData,
+        loading: false
+    }
+};
+var Loading = {
+    args: {
+        data: [],
+        loading: true
+    }
+};
+export { Default, Loading, sidebar_stories_default as default };
+//# sourceMappingURL=sidebar.stories.esm.js.map

package/dist/stories/sidebar.stories.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/periotto/Desktop/workspace/c-rex.net-web-client-foundation/packages/components/dist/stories/sidebar.stories.esm.js","../../src/sidebar.tsx","../../src/stories/sidebar.stories.tsx"],"names":["Sidebar","SidebarContent","SidebarGroup","SidebarMenu","SidebarMenuButton","SidebarMenuItem","SidebarMenuSub","SidebarMenuSubButton","SidebarMenuSubItem","SidebarRail","Skeleton","Fragment","jsx","jsxs","AppSidebar","data","loading","props","collapsible","className","children","map","item","asChild","isActive","active","href","link","title","label","length","id","SidebarInset","SidebarProvider","SidebarTrigger","meta","component","tags","parameters","layout","argTypes","control","decorators","Story","sidebar_stories_default","mockData","Default","args","Loading","default"],"mappings":"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","sourcesContent":["// src/sidebar.tsx\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail\n} from \"@c-rex/ui/sidebar\";\nimport { Skeleton } from \"@c-rex/ui/skeleton\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nfunction AppSidebar({ data, loading, ...props }) {\n  return /* @__PURE__ */ jsxs(Sidebar, { collapsible: \"icon\", ...props, className: \"top-20\", children: [\n    /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarMenu, { className: \"pt-4\", children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [\n      /* @__PURE__ */ jsx(Skeleton, { className: \"w-auto h-10 mb-2\" }),\n      /* @__PURE__ */ jsx(Skeleton, { className: \"w-auto h-10 mb-2\" }),\n      /* @__PURE__ */ jsx(Skeleton, { className: \"w-auto h-10 mb-2 ml-8\" }),\n      /* @__PURE__ */ jsx(Skeleton, { className: \"w-auto h-10 mb-2 ml-8\" }),\n      /* @__PURE__ */ jsx(Skeleton, { className: \"w-auto h-10 mb-2 ml-8\" }),\n      /* @__PURE__ */ jsx(Skeleton, { className: \"w-auto h-10 mb-2 ml-8\" }),\n      /* @__PURE__ */ jsx(Skeleton, { className: \"w-auto h-10 mb-2\" })\n    ] }) : /* @__PURE__ */ jsx(Fragment, { children: data.map((item) => /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [\n      /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, isActive: item.active, children: /* @__PURE__ */ jsx(\"a\", { href: item.link, title: item.label, children: item.label }) }),\n      item.children?.length ? /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.children.map((item2) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(\n        SidebarMenuSubButton,\n        {\n          asChild: true,\n          isActive: item2.active,\n          children: /* @__PURE__ */ jsx(\"a\", { href: item2.link, title: item2.label, children: item2.label })\n        }\n      ) }, item2.label)) }) : null\n    ] }, item.id)) }) }) }) }),\n    /* @__PURE__ */ jsx(SidebarRail, {})\n  ] });\n}\n\n// src/stories/sidebar.stories.tsx\nimport { SidebarInset, SidebarProvider, SidebarTrigger } from \"@c-rex/ui/sidebar\";\nimport { jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar meta = {\n  title: \"Components/Sidebar\",\n  component: AppSidebar,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\"\n  },\n  argTypes: {\n    data: { control: \"object\" },\n    loading: { control: \"boolean\" }\n  },\n  decorators: [\n    (Story) => /* @__PURE__ */ jsxs2(SidebarProvider, { children: [\n      /* @__PURE__ */ jsx2(SidebarTrigger, {}),\n      /* @__PURE__ */ jsx2(\"div\", { className: \"flex\", children: /* @__PURE__ */ jsx2(SidebarInset, { children: /* @__PURE__ */ jsx2(Story, {}) }) })\n    ] })\n  ]\n};\nvar sidebar_stories_default = meta;\nvar mockData = [\n  {\n    id: \"1\",\n    label: \"Getting Started\",\n    link: \"/docs/getting-started\",\n    active: true,\n    children: [\n      {\n        id: \"1-1\",\n        label: \"Installation\",\n        link: \"/docs/getting-started/installation\",\n        active: false,\n        children: []\n      },\n      {\n        id: \"1-2\",\n        label: \"Configuration\",\n        link: \"/docs/getting-started/configuration\",\n        active: false,\n        children: []\n      }\n    ]\n  },\n  {\n    id: \"2\",\n    label: \"Components\",\n    link: \"/docs/components\",\n    active: false,\n    children: [\n      {\n        id: \"2-1\",\n        label: \"Sidebar\",\n        link: \"/docs/components/sidebar\",\n        active: false,\n        children: []\n      },\n      {\n        id: \"2-2\",\n        label: \"Navbar\",\n        link: \"/docs/components/navbar\",\n        active: false,\n        children: []\n      }\n    ]\n  }\n];\nvar Default = {\n  args: {\n    data: mockData,\n    loading: false\n  }\n};\nvar Loading = {\n  args: {\n    data: [],\n    loading: true\n  }\n};\nexport {\n  Default,\n  Loading,\n  sidebar_stories_default as default\n};\n","\"use client\";\n\nimport { ComponentProps } from \"react\";\nimport {\n    Sidebar,\n    SidebarContent,\n    SidebarGroup,\n    SidebarMenu,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    SidebarMenuSub,\n    SidebarMenuSubButton,\n    SidebarMenuSubItem,\n    SidebarRail\n} from \"@c-rex/ui/sidebar\";\nimport { Skeleton } from \"@c-rex/ui/skeleton\";\nimport { TreeOfContent } from \"@c-rex/interfaces\";\n\ninterface SidebarProps extends ComponentProps<typeof Sidebar> {\n    data: TreeOfContent[];\n    loading?: boolean;\n}\n\nexport function AppSidebar({ data, loading, ...props }: SidebarProps) {\n    return (\n        <Sidebar collapsible=\"icon\" {...props} className=\"top-20\">\n            <SidebarContent>\n                <SidebarGroup>\n                    <SidebarMenu className=\"pt-4\">\n                        {loading ? (\n                            <>\n                                <Skeleton className=\"w-auto h-10 mb-2\" />\n                                <Skeleton className=\"w-auto h-10 mb-2\" />\n                                <Skeleton className=\"w-auto h-10 mb-2 ml-8\" />\n                                <Skeleton className=\"w-auto h-10 mb-2 ml-8\" />\n                                <Skeleton className=\"w-auto h-10 mb-2 ml-8\" />\n                                <Skeleton className=\"w-auto h-10 mb-2 ml-8\" />\n                                <Skeleton className=\"w-auto h-10 mb-2\" />\n                            </>\n                        ) : (\n                            <>\n                                {data.map((item) => (\n                                    <SidebarMenuItem key={item.id}>\n                                        <SidebarMenuButton asChild isActive={item.active}>\n                                            <a href={item.link} title={item.label}>\n                                                {item.label}\n                                            </a>\n                                        </SidebarMenuButton>\n\n                                        {item.children?.length ? (\n                                            <SidebarMenuSub>\n                                                {item.children.map((item) => (\n                                                    <SidebarMenuSubItem key={item.label}>\n                                                        <SidebarMenuSubButton\n                                                            asChild\n                                                            isActive={item.active}\n                                                        >\n                                                            <a href={item.link} title={item.label}>\n                                                                {item.label}\n                                                            </a>\n                                                        </SidebarMenuSubButton>\n                                                    </SidebarMenuSubItem>\n                                                ))}\n                                            </SidebarMenuSub>\n                                        ) : null}\n                                    </SidebarMenuItem>\n                                ))}\n                            </>\n                        )}\n                    </SidebarMenu>\n                </SidebarGroup>\n            </SidebarContent>\n            <SidebarRail />\n        </Sidebar>\n    );\n}\n","import type { Meta, StoryObj } from '@storybook/react';\nimport { AppSidebar } from '../sidebar';\nimport { SidebarInset, SidebarProvider, SidebarTrigger } from \"@c-rex/ui/sidebar\";\n\nconst meta = {\n    title: 'Components/Sidebar',\n    component: AppSidebar,\n    tags: ['autodocs'],\n    parameters: {\n        layout: 'centered',\n    },\n    argTypes: {\n        data: { control: 'object' },\n        loading: { control: 'boolean' },\n    },\n    decorators: [\n        (Story: any) => (\n            <SidebarProvider>\n                <SidebarTrigger />\n\n                <div className=\"flex\">\n                    <SidebarInset>\n                        <Story />\n                    </SidebarInset>\n                </div>\n            </SidebarProvider>\n\n        ),\n    ]\n} satisfies Meta<typeof AppSidebar>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst mockData = [\n    {\n        id: '1',\n        label: 'Getting Started',\n        link: '/docs/getting-started',\n        active: true,\n        children: [\n            {\n                id: '1-1',\n                label: 'Installation',\n                link: '/docs/getting-started/installation',\n                active: false,\n                children: [],\n            },\n            {\n                id: '1-2',\n                label: 'Configuration',\n                link: '/docs/getting-started/configuration',\n                active: false,\n                children: [],\n            },\n        ],\n    },\n    {\n        id: '2',\n        label: 'Components',\n        link: '/docs/components',\n        active: false,\n        children: [\n            {\n                id: '2-1',\n                label: 'Sidebar',\n                link: '/docs/components/sidebar',\n                active: false,\n                children: [],\n            },\n            {\n                id: '2-2',\n                label: 'Navbar',\n                link: '/docs/components/navbar',\n                active: false,\n                children: [],\n            },\n        ],\n    },\n];\n\nexport const Default: Story = {\n    args: {\n        data: mockData,\n        loading: false,\n    },\n};\n\nexport const Loading: Story = {\n    args: {\n        data: [],\n        loading: true,\n    },\n};"]}

package/package.json

@@ -1,62 +1,74 @@
 {
   "name": "@c-rex/components",
-  "version": "0.0.8",
+  "version": "0.0.9",
+  "type": "module",
   "files": [
-    "src"
+    "dist"
   ],
   "publishConfig": {
     "access": "public"
   },
   "exports": {
     "./autocomplete": {
-      "types": "./src/autocomplete.tsx",
-      "import": "./src/autocomplete.tsx"
+      "types": "./dist/autocomplete.d.ts",
+      "import": "./dist/autocomplete.esm.js",
+      "require": "./dist/autocomplete.cjs.js"
     },
     "./blog-card": {
-      "types": "./src/blog-card.tsx",
-      "import": "./src/blog-card.tsx"
+      "types": "./dist/blog-card.d.ts",
+      "import": "./dist/blog-card.esm.js",
+      "require": "./dist/blog-card.cjs.js"
     },
     "./blur-image": {
-      "types": "./src/blur-image.tsx",
-      "import": "./src/blur-image.tsx"
+      "types": "./dist/blur-image.d.ts",
+      "import": "./dist/blur-image.esm.js",
+      "require": "./dist/blur-image.cjs.js"
     },
     "./breadcrumb": {
-      "types": "./src/breadcrumb.tsx",
-      "import": "./src/breadcrumb.tsx"
+      "types": "./dist/breadcrumb.d.ts",
+      "import": "./dist/breadcrumb.esm.js",
+      "require": "./dist/breadcrumb.cjs.js"
     },
     "./empty": {
-      "types": "./src/empty.tsx",
-      "import": "./src/empty.tsx"
+      "types": "./dist/empty.d.ts",
+      "import": "./dist/empty.esm.js",
+      "require": "./dist/empty.cjs.js"
     },
     "./navbar": {
-      "types": "./src/navbar.tsx",
-      "import": "./src/navbar.tsx"
+      "types": "./dist/navbar.d.ts",
+      "import": "./dist/navbar.esm.js",
+      "require": "./dist/navbar.cjs.js"
     },
     "./search-wrapper": {
-      "types": "./src/providers/search-state-wrapper.tsx",
-      "import": "./src/providers/search-state-wrapper.tsx"
+      "types": "./dist/providers/search-state-wrapper.d.ts",
+      "import": "./dist/providers/search-state-wrapper.esm.js",
+      "require": "./dist/providers/search-state-wrapper.cjs.js"
     },
     "./result-list": {
-      "types": "./src/result-list.tsx",
-      "import": "./src/result-list.tsx"
+      "types": "./dist/result-list.d.ts",
+      "import": "./dist/result-list.esm.js",
+      "require": "./dist/result-list.cjs.js"
     },
     "./result-view/blog": {
-      "types": "./src/result-view/blog.tsx",
-      "import": "./src/result-view/blog.tsx"
+      "types": "./dist/result-view/blog.d.ts",
+      "import": "./dist/result-view/blog.esm.js",
+      "require": "./dist/result-view/blog.cjs.js"
     },
     "./result-view/table": {
-      "types": "./src/result-view/table.tsx",
-      "import": "./src/result-view/table.tsx"
+      "types": "./dist/result-view/table.d.ts",
+      "import": "./dist/result-view/table.esm.js",
+      "require": "./dist/result-view/table.cjs.js"
     },
     "./sidebar": {
-      "types": "./src/sidebar.tsx",
-      "import": "./src/sidebar.tsx"
+      "types": "./dist/sidebar.d.ts",
+      "import": "./dist/sidebar.esm.js",
+      "require": "./dist/sidebar.cjs.js"
     },
     "./package.json": "./package.json"
   },
   "scripts": {
-    "dev": "echo 'Nothing to build — using raw TypeScript files'",
-    "build": "echo 'No build needed'",
+    "dev": "tsup --watch",
+    "build": "tsup",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -70,6 +82,7 @@
     "@storybook/nextjs": "^8.6.12",
     "@storybook/react": "^8.6.12",
     "@storybook/test": "^8.6.12",
+    "@swc/core": "^1.11.21",
     "@turbo/gen": "^2.4.4",
     "@types/node": "^22.13.10",
     "@types/react": "19.0.10",
@@ -84,12 +97,12 @@
     "typescript": "latest"
   },
   "dependencies": {
+    "@c-rex/config": "*",
     "@c-rex/contexts": "*",
     "@c-rex/interfaces": "*",
     "@c-rex/services": "*",
     "@c-rex/ui": "*",
     "@c-rex/utils": "*",
-    "@c-rex/config": "*",
     "next": "^14",
     "react": "^18",
     "react-dom": "^18",

package/src/autocomplete.tsx

@@ -1,113 +0,0 @@
-import { Command as CommandPrimitive } from "cmdk";
-import { Check } from "lucide-react";
-import { useEffect, useState } from "react";
-import { Input } from "@c-rex/ui/input";
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandItem,
-    CommandList
-} from "@c-rex/ui/command";
-import {
-    Popover,
-    PopoverAnchor,
-    PopoverContent
-} from "@c-rex/ui/popover";
-
-type Props = {
-    initialValue: string;
-    onSelect: (value: string) => void;
-    onSearch: (value: string) => Promise<string[]>;
-};
-
-export const AutoComplete = ({
-    initialValue,
-    onSearch,
-    onSelect,
-}: Props) => {
-    const [query, setQuery] = useState(initialValue);
-    const [suggestions, setSuggestions] = useState<string[]>([]);
-
-    const [open, setOpen] = useState(false);
-
-    useEffect(() => {
-        const debounceFetch = setTimeout(() => {
-            if (query) {
-                onSearch(query).then(setSuggestions);
-            } else {
-                setSuggestions([]);
-            }
-        }, 300);
-
-        return () => clearTimeout(debounceFetch);
-    }, [onSearch, query]);
-
-    return (
-        <div className="flex items-center">
-            <Popover open={open} onOpenChange={setOpen}>
-                <Command shouldFilter={false}>
-                    <PopoverAnchor asChild>
-                        <CommandPrimitive.Input
-                            asChild
-                            value={query}
-                            onValueChange={setQuery}
-                            onKeyDown={(e) => setOpen(e.key !== "Escape")}
-                            onMouseDown={() => setOpen(false)}
-                            onFocus={() => setOpen(true)}
-                        >
-                            <Input />
-                        </CommandPrimitive.Input>
-                    </PopoverAnchor>
-
-                    {!open && <CommandList aria-hidden="true" className="hidden" />}
-
-                    <PopoverContent
-                        asChild
-                        onOpenAutoFocus={(e) => e.preventDefault()}
-                        onInteractOutside={(e) => {
-                            if (
-                                e.target instanceof Element &&
-                                e.target.hasAttribute("cmdk-input")
-                            ) {
-                                e.preventDefault();
-                            }
-                        }}
-                        className="w-[--radix-popover-trigger-width] p-0"
-                    >
-                        <CommandList>
-                            {/*isLoading && (
-                                <CommandPrimitive.Loading>
-                                    <div className="p-1">
-                                        <Skeleton className="h-6 w-full" />
-                                    </div>
-                                </CommandPrimitive.Loading>
-                            )*/}
-
-                            {suggestions.length > 0 ? (
-                                <CommandGroup>
-                                    {suggestions.map((option) => (
-                                        <CommandItem
-                                            key={option}
-                                            value={option}
-                                            onMouseDown={(e) => e.preventDefault()}
-                                            onSelect={(inputValue) => {
-                                                setOpen(false);
-                                                onSelect(inputValue ?? "");
-                                            }}
-                                        >
-                                            <Check className="mr-2 h-4 w-4 opacity-0" />
-                                            {option}
-                                        </CommandItem>
-                                    ))}
-                                </CommandGroup>
-                            ) : (
-                                <CommandEmpty>No suggestions.</CommandEmpty>
-                            )}
-                        </CommandList>
-                    </PopoverContent>
-                </Command>
-            </Popover>
-        </div>
-    );
-}