@fragment-build/ui 1.0.0 → 1.1.0

package/dist/fragments/sidebar/Sidebar.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSmaller } from '../../hooks/breakpoints';
+import { IconChevronLeft } from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+import { Avatar, Badge, Button, Chip, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Listbox, ListboxItem, ListboxSection, ScrollShadow, Tooltip, User, } from '../../components/base';
+const getAlignmentClasses = (align) => {
+    switch (align) {
+        case 'center':
+            return 'my-auto';
+        case 'bottom':
+            return 'mt-auto sticky bottom-0 bg-content1';
+        default:
+            return '';
+    }
+};
+const renderItems = (item, options) => {
+    switch (item.type) {
+        case 'navigation':
+            return options.layout === 'expanded' ? (_jsx(Listbox, { variant: "flat", "aria-label": "Listbox menu with sections", itemClasses: {
+                    base: 'h-12 gap-6',
+                }, ...item.listboxProps, children: _jsx(ListboxSection, { title: item.label, classNames: { group: 'flex flex-col gap-1' }, children: item.navigation.map((navItem) => (_jsx(ListboxItem, { startContent: navItem.icon, endContent: typeof navItem.badgeContent === 'string' ? _jsx(Chip, { size: "sm", color: "primary", variant: navItem.badgeContent ? 'solid' : 'dot', classNames: { base: 'border-none' }, children: navItem.badgeContent }) : navItem.endContent, href: navItem.link, className: options.activeNav?.link === navItem.link ? "bg-default/40 text-default-foreground" : '', children: navItem.label }, navItem.label))) }) })) : (_jsx("nav", { className: "flex flex-col gap-1", children: item.navigation.map((navItem) => (_jsx(Tooltip, { placement: "right", content: navItem.label, children: _jsx(Button, { variant: options.activeNav?.link === navItem.link ? 'flat' : 'light', size: "lg", as: "a", href: navItem.link, isIconOnly: true, children: _jsx(Badge, { content: navItem.badgeContent, color: "primary", size: "sm", isInvisible: typeof navItem.badgeContent !== 'string', children: navItem.icon }) }) }, navItem.label))) }));
+        case 'user':
+            return (_jsxs(Dropdown, { placement: "bottom-start", classNames: { trigger: options.layout === 'expanded' ? 'justify-start px-2' : 'justify-start' }, ...item.dropdown, children: [_jsx(DropdownTrigger, { children: options.layout === 'expanded' ? (_jsx(User, { as: "button", avatarProps: item.avatar, className: "transition-transform", description: item.description, name: item.name })) : (_jsx(Avatar, { as: "button", className: "transition-transform", ...item.avatar })) }), _jsx(DropdownMenu, { "aria-label": "User Actions", color: "primary", variant: "flat", items: item.dropdownItems || [], children: (dropdownItem) => (_jsx(DropdownItem, { ...dropdownItem, children: dropdownItem.label }, dropdownItem.label)) })] }));
+        case 'custom':
+            return options.layout === 'expanded' || item.showCollapsed ? _jsx("div", { className: "px-2", children: item.render }) : null;
+        default:
+            return null;
+    }
+};
+const getActiveNav = (currentPath, items) => {
+    if (!currentPath)
+        return;
+    const navigations = [];
+    items.forEach((item) => {
+        if (item.type !== 'navigation')
+            return;
+        navigations.push(item.navigation);
+    });
+    const possibleMatches = navigations.flat().filter((navItem) => navItem.link.startsWith(currentPath)).sort((a, b) => b.link.length - a.link.length);
+    return possibleMatches.find((pMatch) => pMatch.link === currentPath) || possibleMatches[0];
+};
+export const Sidebar = ({ items, layout = 'expanded', autoLayout, currentPath }) => {
+    const isMobile = useSmaller('xl');
+    const [activeNav, setActiveNav] = useState(getActiveNav(currentPath, items));
+    useEffect(() => setActiveNav(getActiveNav(currentPath, items)), [currentPath, items]);
+    let renderedLayout = autoLayout ? undefined : layout;
+    if (autoLayout) {
+        if (isMobile) {
+            renderedLayout = 'collapsed';
+        }
+        else {
+            renderedLayout = 'expanded';
+        }
+    }
+    const [collapsed, setCollapsed] = useState(renderedLayout === 'collapsed');
+    useEffect(() => { if (autoLayout)
+        setCollapsed(isMobile); }, [isMobile, setCollapsed, autoLayout]);
+    const layoutStyles = collapsed ? 'w-20 opacity-0 pointer-events-none' : 'w-72';
+    const collapseButtonStyles = collapsed ? 'left-20 translate-x-1/2 rotate-180' : 'left-72 -translate-x-1/2';
+    return (_jsxs("div", { className: 'flex', children: [_jsxs("div", { className: `fixed top-0 left-0 border-r-[1px] border-default-100 flex flex-col h-screen bg-content1 gap-8 transition-all ${collapsed ? '' : 'opacity-0'}`, children: [_jsx(ScrollShadow, { hideScrollBar: true, className: `w-20 items-center flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1`, children: items.map((item) => {
+                            const children = item.align !== 'bottom' ? renderItems(item, { layout: 'collapsed', activeNav }) : null;
+                            return children ? (_jsx("div", { className: getAlignmentClasses(item.align), children: children }, item.key)) : null;
+                        }) }), _jsx("div", { className: `w-20 items-center flex flex-col gap-8 px-3 pb-8`, children: items.map((item) => {
+                            const children = item.align === 'bottom' ? renderItems(item, { layout: 'collapsed', activeNav }) : null;
+                            return children ? (_jsx("div", { className: getAlignmentClasses(item.align), children: children }, item.key)) : null;
+                        }) })] }), _jsxs("div", { className: `${layoutStyles} fixed top-0 left-0 border-r-[1px] border-default-100 flex flex-col h-screen bg-content1 gap-8 overflow-hidden transition-all`, children: [_jsx(ScrollShadow, { hideScrollBar: true, className: `w-72 flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1`, children: items.map((item) => {
+                            const children = item.align !== 'bottom' ? renderItems(item, { layout: 'expanded', activeNav }) : null;
+                            return children ? (_jsx("div", { className: getAlignmentClasses(item.align), children: children }, item.key)) : null;
+                        }) }), _jsx("div", { className: `w-72 flex flex-col gap-8 px-3 pb-8`, children: items.map((item) => {
+                            const children = item.align === 'bottom' ? renderItems(item, { layout: 'expanded', activeNav }) : null;
+                            return children ? (_jsx("div", { className: getAlignmentClasses(item.align), children: children }, item.key)) : null;
+                        }) })] }), _jsx("div", { className: `${layoutStyles} transition-all h-screen` }), _jsx("div", { className: `fixed top-6 transition-all ${collapseButtonStyles}`, children: _jsx(Button, { size: "sm", isIconOnly: true, radius: "full", className: "h-unit-6 w-unit-6 min-w-unit-6 bg-default-100", onClick: () => setCollapsed(!collapsed), children: _jsx(IconChevronLeft, { size: 14 }) }) })] }));
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/fragments/sidebar/Sidebar.js.map

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

package/dist/fragments/sidebar/{Sidebar.stories.jsx → Sidebar.stories.js}

@@ -1,6 +1,7 @@
-import { Button, Card, Input } from "@nextui-org/react";
-import { IconBox, IconBoxMultiple, IconCirclePlus, IconHome, IconMessageCircle, } from "@tabler/icons-react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconBell, IconBox, IconBoxMultiple, IconCirclePlus, IconHome, IconMessageCircle, } from "@tabler/icons-react";
 import { Sidebar } from "./Sidebar";
+import { Button, Card, Input } from "../../components/base";
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
     title: "components/Sidebar",
@@ -44,7 +45,7 @@ export const Primary = {
             {
                 type: "custom",
                 key: "search",
-                render: <Input label="Search..."/>,
+                render: _jsx(Input, { label: "Search..." }),
             },
             {
                 type: "navigation",
@@ -54,15 +55,13 @@ export const Primary = {
                     {
                         label: "Home",
                         link: "/",
-                        icon: <IconHome stroke={1.5}/>,
+                        icon: _jsx(IconHome, { stroke: 1.5 }),
                     },
                     {
                         label: "My Projects",
                         link: "/projects",
-                        icon: <IconBoxMultiple stroke={1.5}/>,
-                        endContent: (<Button size="sm" variant="light" isIconOnly>
-                <IconCirclePlus size={18}/>
-              </Button>),
+                        icon: _jsx(IconBoxMultiple, { stroke: 1.5 }),
+                        endContent: (_jsx(Button, { size: "sm", variant: "light", isIconOnly: true, children: _jsx(IconCirclePlus, { size: 18 }) })),
                         items: [
                             {
                                 type: "navigation",
@@ -87,7 +86,14 @@ export const Primary = {
                     {
                         label: "Chat",
                         link: "/chat",
-                        icon: <IconMessageCircle stroke={1.5}/>,
+                        icon: _jsx(IconMessageCircle, { stroke: 1.5 }),
+                        badgeContent: '',
+                    },
+                    {
+                        label: "Notifications",
+                        link: "/notifications",
+                        icon: _jsx(IconBell, { stroke: 1.5 }),
+                        badgeContent: '9+',
                     },
                 ],
             },
@@ -99,34 +105,39 @@ export const Primary = {
                     {
                         label: "Project 1",
                         link: "/projects/1",
-                        icon: <IconBox stroke={1.5}/>,
+                        icon: _jsx(IconBox, { stroke: 1.5 }),
                     },
                     {
                         label: "Project 2",
                         link: "/projects/2",
-                        icon: <IconBox stroke={1.5}/>,
+                        icon: _jsx(IconBox, { stroke: 1.5 }),
                     },
                     {
                         label: "Project 3",
                         link: "/projects/3",
-                        icon: <IconBox stroke={1.5}/>,
+                        icon: _jsx(IconBox, { stroke: 1.5 }),
                     },
                 ],
             },
             {
                 type: "custom",
                 key: "bottom-banner",
-                render: (<Card radius="lg" className="border-none">
-            <img alt="Woman listing to music" className="object-cover w-full" height={200} src="https://nextui.org/images/hero-card.jpeg" width={200}/>
-          </Card>),
+                render: (_jsx(Card, { radius: "lg", className: "border-none", children: _jsx("img", { alt: "Woman listing to music", className: "object-cover w-full", height: 200, src: "https://nextui.org/images/hero-card.jpeg", width: 200 }) })),
                 align: "bottom",
             },
         ],
     },
 };
 export const Collapsed = {
-    args: Object.assign(Object.assign({}, Primary.args), { layout: "collapsed" }),
+    args: {
+        ...Primary.args,
+        layout: "collapsed",
+    },
 };
 export const Auto = {
-    args: Object.assign(Object.assign({}, Primary.args), { autoLayout: true }),
+    args: {
+        ...Primary.args,
+        autoLayout: true,
+    },
 };
+//# sourceMappingURL=Sidebar.stories.js.map

package/dist/fragments/sidebar/Sidebar.stories.js.map

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

package/dist/hooks/breakpoints.js

@@ -1,2 +1,3 @@
 import { BreakPointHooks, breakpointsTailwind } from '@react-hooks-library/core';
 export const { useGreater, useBetween, useSmaller } = BreakPointHooks(breakpointsTailwind);
+//# sourceMappingURL=breakpoints.js.map

package/dist/hooks/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../src/hooks/breakpoints.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEjF,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,eAAe,CAAC,mBAAmB,CAAC,CAAC"}

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './breakpoints';

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './breakpoints';
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-export * from '@nextui-org/react';
-export * from './components/color-input/ColorInput';
-export * from './fragments/shell/Shell';
-export * from './fragments/sidebar/Sidebar';
+export * from "next-themes";
+export * from './components';
+export * from './fragments';
+export * from './hooks';
+export * from './provider';
+export * from './tailwind.plugin';

package/dist/index.js

@@ -1,4 +1,7 @@
-export * from '@nextui-org/react';
-export * from './components/color-input/ColorInput';
-export * from './fragments/shell/Shell';
-export * from './fragments/sidebar/Sidebar';
+export * from "next-themes";
+export * from './components';
+export * from './fragments';
+export * from './hooks';
+export * from './provider';
+export * from './tailwind.plugin';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAE5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AAExB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}

package/dist/provider.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { NextUIProviderProps } from "@nextui-org/react";
+import { FragmentUIContext } from "./context";
+interface FragmentUIProviderProps {
+    children: React.ReactNode;
+    useNextJS?: boolean;
+    locale?: NextUIProviderProps['locale'];
+    navigate?: NextUIProviderProps['navigate'];
+    defaults?: FragmentUIContext['defaults'];
+}
+export declare const FragmentUIProvider: React.FC<FragmentUIProviderProps>;
+export {};

package/dist/provider.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NextUIProvider } from "@nextui-org/react";
+import { ThemeProvider } from "next-themes";
+import { useEffect, useState } from "react";
+import deepMerge from "deepmerge";
+import { FragmentUIContext, defaultContext } from "./context";
+export const FragmentUIProvider = ({ children, useNextJS = false, defaults = {}, ...rest }) => {
+    const [context, setContext] = useState(defaultContext);
+    useEffect(() => {
+        setContext(deepMerge(context, { defaults }));
+    }, [defaults]);
+    const render = useNextJS
+        ? _jsx(ThemeProvider, { attribute: "class", defaultTheme: "dark", children: children })
+        : children;
+    return (_jsx(FragmentUIContext.Provider, { value: context, children: _jsx(NextUIProvider, { ...rest, children: render }) }));
+};
+//# sourceMappingURL=provider.js.map

package/dist/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAuB,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAU9D,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,EAAE,EACb,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAA;IAC9C,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,MAAM,GAAG,SAAS;QACtB,CAAC,CAAC,KAAC,aAAa,IAAC,SAAS,EAAC,OAAO,EAAC,YAAY,EAAC,MAAM,YAAE,QAAQ,GAAiB;QACjF,CAAC,CAAC,QAAQ,CAAC;IAEb,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YACxC,KAAC,cAAc,OAAK,IAAI,YAAG,MAAM,GAAkB,GACxB,CAC9B,CAAC;AACJ,CAAC,CAAA"}

package/dist/tailwind.plugin.d.ts

@@ -0,0 +1,4 @@
+export declare const fragmentui: () => {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/dist/tailwind.plugin.js

@@ -0,0 +1,18 @@
+import plugin from "tailwindcss/plugin";
+export const fragmentui = () => plugin(function ({ addBase, config }) {
+    addBase({
+        'h1': {
+            fontSize: config('theme.fontSize.3xl'),
+            fontWeight: config('theme.fontWeight.semibold'),
+        },
+        'h2': {
+            fontSize: config('theme.fontSize.2xl'),
+            fontWeight: config('theme.fontWeight.bold'),
+        },
+        'h3': {
+            fontSize: config('theme.fontSize.xl'),
+            fontWeight: config('theme.fontWeight.bold'),
+        },
+    });
+});
+//# sourceMappingURL=tailwind.plugin.js.map

package/dist/tailwind.plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.plugin.js","sourceRoot":"","sources":["../src/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,UAAS,EAAE,OAAO,EAAE,MAAM,EAAE;IACjE,OAAO,CAAC;QACN,IAAI,EAAE;YACJ,QAAQ,EAAE,MAAM,CAAC,oBAAoB,CAAC;YACtC,UAAU,EAAE,MAAM,CAAC,2BAA2B,CAAC;SAChD;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,MAAM,CAAC,oBAAoB,CAAC;YACtC,UAAU,EAAE,MAAM,CAAC,uBAAuB,CAAC;SAC5C;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,MAAM,CAAC,mBAAmB,CAAC;YACrC,UAAU,EAAE,MAAM,CAAC,uBAAuB,CAAC;SAC5C;KACF,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/withFragment.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FragmentUIContext } from "./context";
+export declare function withFragment<P extends React.ComponentType<any>>(Component: P, configId: keyof FragmentUIContext['defaults']): P;

package/dist/withFragment.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import deepMerge from "deepmerge";
+import { FragmentUIContext } from "./context";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function withFragment(Component, configId) {
+    const ComponentWithContext = (props) => {
+        const context = useContext(FragmentUIContext);
+        return _jsx(Component, { ...deepMerge(context['defaults'][configId] || {}, props) });
+    };
+    // fix react-aria collection
+    if ('getCollectionNode' in Component) {
+        ComponentWithContext.getCollectionNode = Component.getCollectionNode;
+    }
+    return ComponentWithContext;
+}
+//# sourceMappingURL=withFragment.js.map

package/dist/withFragment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withFragment.js","sourceRoot":"","sources":["../src/withFragment.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAG,UAAU,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C,8DAA8D;AAC9D,MAAM,UAAU,YAAY,CAAqC,SAAY,EAAE,QAA6C;IAC1H,MAAM,oBAAoB,GAAG,CAAC,KAA8B,EAAE,EAAE;QAC9D,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;QAC9C,OAAO,KAAC,SAAS,OAAK,SAAS,CAAI,OAAO,CAAC,UAAU,CAAC,CAAC,QAAQ,CAA4B,IAAI,EAAE,EAAE,KAAK,CAA4B,GAAG,CAAA;IACzI,CAAC,CAAC;IAEF,4BAA4B;IAC5B,IAAI,mBAAmB,IAAI,SAAS,EAAE,CAAC;QACpC,oBAAyC,CAAC,iBAAiB,GAAG,SAAS,CAAC,iBAAiB,CAAC;IAC7F,CAAC;IAED,OAAO,oBAAyB,CAAC;AACnC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragment-build/ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {
@@ -9,32 +9,33 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "@storybook/addon-a11y": "8.0.0",
-    "@storybook/addon-essentials": "8.0.0",
-    "@storybook/addon-interactions": "8.0.0",
-    "@storybook/addon-links": "8.0.0",
+    "@storybook/addon-a11y": "8.0.2",
+    "@storybook/addon-essentials": "8.0.2",
+    "@storybook/addon-interactions": "8.0.2",
+    "@storybook/addon-links": "8.0.2",
     "@storybook/addon-styling": "1.3.7",
-    "@storybook/blocks": "8.0.0",
-    "@storybook/react": "8.0.0",
-    "@storybook/react-vite": "8.0.0",
-    "@types/react": "18.2.65",
-    "@types/react-dom": "18.2.21",
-    "@typescript-eslint/eslint-plugin": "7.2.0",
-    "@typescript-eslint/parser": "7.2.0",
+    "@storybook/blocks": "8.0.2",
+    "@storybook/react": "8.0.2",
+    "@storybook/react-vite": "8.0.2",
+    "@storybook/test": "8.0.2",
+    "@types/react": "18.2.67",
+    "@types/react-dom": "18.2.22",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
     "@vitejs/plugin-react": "4.2.1",
     "@vitejs/plugin-react-swc": "3.6.0",
-    "autoprefixer": "10.4.18",
+    "autoprefixer": "10.4.19",
     "eslint": "8.57.0",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-react-refresh": "0.4.5",
+    "eslint-plugin-react-refresh": "0.4.6",
     "eslint-plugin-storybook": "0.8.0",
-    "postcss": "8.4.35",
+    "postcss": "8.4.38",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "8.0.0",
-    "storybook-dark-mode": "4.0.0",
-    "typescript": "5.4.2",
-    "vite": "5.1.6"
+    "storybook": "8.0.2",
+    "storybook-dark-mode": "4.0.1",
+    "typescript": "5.4.3",
+    "vite": "5.2.2"
   },
   "scripts": {
     "build": "tsc",
@@ -45,10 +46,9 @@
   "dependencies": {
     "@nextui-org/react": "2.2.10",
     "@react-hooks-library/core": "0.6.2",
-    "@storybook/test": "8.0.0",
-    "@tabler/icons-react": "3.0.1",
+    "@tabler/icons-react": "3.1.0",
     "framer-motion": "10.18.0",
-    "react-color-palette": "7.1.0",
+    "next-themes": "0.3.0",
     "tailwindcss": "3.4.1"
   }
 }

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

@@ -1,26 +0,0 @@
-'use client';
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { Avatar, Input } from '@nextui-org/react';
-import { useEffect, useMemo, useState } from 'react';
-export const ColorInput = (_a) => {
-    var { defaultValue, label = 'Color', errorMessage = "Please enter a valid color in hex format e.g. #f3f or #ff33ff", onValueChange, isInvalid } = _a, rest = __rest(_a, ["defaultValue", "label", "errorMessage", "onValueChange", "isInvalid"]);
-    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);
-    const invalid = useMemo(() => {
-        if (value === "")
-            return false;
-        return validateHexColor(value) && !isInvalid ? false : true;
-    }, [value, isInvalid]);
-    return (<Input {...rest} label={label} type="text" value={value} onValueChange={setValue} isInvalid={invalid} errorMessage={invalid && errorMessage} endContent={(<Avatar as="button" size="sm" showFallback fallback={<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' }}/>)}/>);
-};

package/dist/components/color-selector/ColorSelector.jsx

@@ -1,22 +0,0 @@
-'use client';
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { Avatar } from '@nextui-org/react';
-import { useEffect, useState } from 'react';
-export const ColorSelector = (_a) => {
-    var { values, defaultValue, onValueChange, icon } = _a, rest = __rest(_a, ["values", "defaultValue", "onValueChange", "icon"]);
-    const [value, setValue] = useState(defaultValue && values.includes(defaultValue) ? defaultValue : values[0]);
-    useEffect(() => onValueChange(value), [value, onValueChange]);
-    return (<div className='flex gap-4'>
-      {values.map((color) => (<Avatar as="button" showFallback fallback={value === color && icon ? icon : <></>} style={{ backgroundColor: color }} classNames={{ base: 'shrink-0' }} isBordered={value === color} onClick={() => setValue(color)} {...rest}/>))}
-    </div>);
-};

package/dist/fragments/shell/Shell.jsx

@@ -1,10 +0,0 @@
-'use client';
-import { Sidebar } from '../sidebar/Sidebar';
-export const Shell = ({ sidebar, children }) => {
-    return (<div className={`flex min-h-screen`}>
-      <Sidebar {...sidebar}/>
-      <main className="flex-1 px-6 lg:px-12 xl:px-20 py-14 max-w-screen-2xl">
-        {children}
-      </main>
-    </div>);
-};