@fragment-build/ui 1.0.0 → 1.0.4

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.js","sourceRoot":"","sources":["../../../src/components/color-input/ColorInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,EAAE,KAAK,EAAc,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQrD,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,YAAY,EACZ,KAAK,GAAG,OAAO,EACf,YAAY,GAAG,+DAA+D,EAC9E,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,SAAS,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/E,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAEvF,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,KAAK,KAAK,EAAE;YAAE,OAAO,KAAK,CAAC;QAE/B,OAAO,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9D,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,KAAC,KAAK,OACA,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,OAAO,IAAI,YAAY,EACrC,UAAU,EAAE,CACV,KAAC,MAAM,IACL,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,IAAI,EACT,YAAY,QACZ,QAAQ,EAAE,gBAAO,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,wCAAwC,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,GAAI,EACrI,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EACjC,UAAU,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,GAC3D,CACH,GACD,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/color-input/{ColorInput.stories.jsx → ColorInput.stories.js}

@@ -12,3 +12,4 @@ export const Primary = {
         onValueChange: console.log,
     },
 };
+//# sourceMappingURL=ColorInput.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.stories.js","sourceRoot":"","sources":["../../../src/components/color-input/ColorInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,qGAAqG;AACrG,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,8FAA8F;AAC9F,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,aAAa,EAAE,OAAO,CAAC,GAAG;KAC3B;CACF,CAAC"}

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

@@ -0,0 +1,10 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Avatar } from '@nextui-org/react';
+import { useEffect, useState } from 'react';
+export const ColorSelector = ({ values, defaultValue, onValueChange, icon, ...rest }) => {
+    const [value, setValue] = useState(defaultValue && values.includes(defaultValue) ? defaultValue : values[0]);
+    useEffect(() => onValueChange(value), [value, onValueChange]);
+    return (_jsx("div", { className: 'flex gap-4', children: values.map((color) => (_jsx(Avatar, { as: "button", showFallback: true, fallback: value === color && icon ? icon : _jsx(_Fragment, {}), style: { backgroundColor: color }, classNames: { base: 'shrink-0' }, isBordered: value === color, onClick: () => setValue(color), ...rest }))) }));
+};
+//# sourceMappingURL=ColorSelector.js.map

package/dist/components/color-selector/ColorSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSelector.js","sourceRoot":"","sources":["../../../src/components/color-selector/ColorSelector.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,EAAe,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAe5C,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACpH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7G,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,cAAK,SAAS,EAAC,YAAY,YACxB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,MAAM,IACL,EAAE,EAAC,QAAQ,EACX,YAAY,QACZ,QAAQ,EAAE,KAAK,KAAK,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAK,EAChD,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EACjC,UAAU,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAChC,UAAU,EAAE,KAAK,KAAK,KAAK,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,KAC1B,IAAI,GACR,CACH,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/color-selector/{ColorSelector.stories.jsx → ColorSelector.stories.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ColorSelector } from "./ColorSelector";
 import { IconCheck } from "@tabler/icons-react";
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
@@ -20,6 +21,7 @@ export const WithIcon = {
         values: ['red', 'green', 'blue'],
         onValueChange: console.log,
         color: 'primary',
-        icon: <IconCheck size={24} stroke={1.5}/>
+        icon: _jsx(IconCheck, { size: 24, stroke: 1.5 })
     },
 };
+//# sourceMappingURL=ColorSelector.stories.js.map

package/dist/components/color-selector/ColorSelector.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSelector.stories.js","sourceRoot":"","sources":["../../../src/components/color-selector/ColorSelector.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,qGAAqG;AACrG,MAAM,IAAI,GAA+B;IACvC,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,8FAA8F;AAC9F,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC;QAChC,aAAa,EAAE,OAAO,CAAC,GAAG;QAC1B,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC;QAChC,aAAa,EAAE,OAAO,CAAC,GAAG;QAC1B,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,GAAI;KAC3C;CACF,CAAC"}

package/dist/fragments/shell/Shell.js

@@ -0,0 +1,7 @@
+'use client';
+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", children: children })] }));
+};
+//# sourceMappingURL=Shell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Shell.js","sourceRoot":"","sources":["../../../src/fragments/shell/Shell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,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,sDAAsD,YACnE,QAAQ,GACJ,IACH,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card, CardBody, Divider, Input, Tab, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, } from "@nextui-org/react";
+import { IconBox, IconBoxMultiple, IconHome, IconMessageCircle, } from "@tabler/icons-react";
+import { Shell } from "./Shell";
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+    title: "components/Shell",
+    component: Shell,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary = {
+    args: {
+        sidebar: {
+            items: [
+                {
+                    type: "user",
+                    key: "user",
+                    name: "Tony Reichert",
+                    description: "ACME Inc.",
+                    avatar: {
+                        src: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+                    },
+                    dropdownItems: [
+                        {
+                            label: "My Profile",
+                        },
+                        {
+                            label: "Settings",
+                        },
+                        {
+                            label: "Organization Settings",
+                            showDivider: true,
+                        },
+                        {
+                            label: "Logout",
+                            color: "danger",
+                        },
+                    ],
+                },
+                {
+                    type: "custom",
+                    key: "search",
+                    render: _jsx(Input, { label: "Search..." }),
+                },
+                {
+                    type: "navigation",
+                    key: "navigation-overview",
+                    label: "Overview",
+                    navigation: [
+                        {
+                            label: "Home",
+                            link: "/",
+                            icon: _jsx(IconHome, { stroke: 1.5 }),
+                        },
+                        {
+                            label: "My Projects",
+                            link: "/projects",
+                            icon: _jsx(IconBoxMultiple, { stroke: 1.5 }),
+                        },
+                        {
+                            label: "Chat",
+                            link: "/chat",
+                            icon: _jsx(IconMessageCircle, { stroke: 1.5 }),
+                        },
+                    ],
+                },
+                {
+                    type: "navigation",
+                    key: "navigation-projects",
+                    label: "Projects",
+                    navigation: [
+                        {
+                            label: "Project 1",
+                            link: "/projects/1",
+                            icon: _jsx(IconBox, { stroke: 1.5 }),
+                        },
+                        {
+                            label: "Project 2",
+                            link: "/projects/2",
+                            icon: _jsx(IconBox, { stroke: 1.5 }),
+                        },
+                        {
+                            label: "Project 3",
+                            link: "/projects/3",
+                            icon: _jsx(IconBox, { stroke: 1.5 }),
+                        },
+                    ],
+                },
+                {
+                    type: "custom",
+                    key: "bottom-banner",
+                    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",
+                },
+            ],
+        },
+        children: "CONTENT",
+    },
+};
+export const Collapsed = {
+    args: {
+        ...Primary.args,
+        sidebar: Primary.args?.sidebar ? {
+            ...Primary.args.sidebar,
+            layout: "collapsed",
+        } : undefined,
+    },
+};
+export const Auto = {
+    args: {
+        ...Primary.args,
+        sidebar: Primary.args?.sidebar ? {
+            ...Primary.args.sidebar,
+            autoLayout: true,
+        } : undefined,
+    },
+};
+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", removeWrapper: true, 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: "Music", children: _jsx(Card, { children: _jsx(CardBody, { children: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." }) }) }, "music"), _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")] })] })),
+    },
+};
+//# sourceMappingURL=Shell.stories.js.map

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

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

package/dist/fragments/sidebar/Sidebar.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Listbox, ListboxItem, ListboxSection, ScrollShadow, Tooltip, User, } from '@nextui-org/react';
+import { useSmaller } from '../../hooks/breakpoints';
+import { IconChevronLeft } from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+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: 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", startContent: navItem.icon, href: navItem.link, isIconOnly: true }) }, 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 border-r-[1px] border-default-100', children: [_jsxs("div", { className: `fixed top-0 left-0 flex flex-col h-screen bg-content1 gap-8 transition-all ${collapsed ? '' : 'opacity-0'}`, children: [_jsx(ScrollShadow, { 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 flex flex-col h-screen bg-content1 gap-8 overflow-hidden transition-all`, children: [_jsx(ScrollShadow, { 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,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, Card, Input } from "@nextui-org/react";
 import { IconBox, IconBoxMultiple, IconCirclePlus, IconHome, IconMessageCircle, } from "@tabler/icons-react";
 import { Sidebar } from "./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,7 @@ export const Primary = {
                     {
                         label: "Chat",
                         link: "/chat",
-                        icon: <IconMessageCircle stroke={1.5}/>,
+                        icon: _jsx(IconMessageCircle, { stroke: 1.5 }),
                     },
                 ],
             },
@@ -99,34 +98,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/index.d.ts

@@ -1,4 +1,6 @@
 export * from '@nextui-org/react';
 export * from './components/color-input/ColorInput';
+export * from './components/color-selector/ColorSelector';
 export * from './fragments/shell/Shell';
 export * from './fragments/sidebar/Sidebar';
+export * from './hooks/breakpoints';

package/dist/index.js

@@ -1,4 +1,7 @@
 export * from '@nextui-org/react';
 export * from './components/color-input/ColorInput';
+export * from './components/color-selector/ColorSelector';
 export * from './fragments/shell/Shell';
 export * from './fragments/sidebar/Sidebar';
+export * from './hooks/breakpoints';
+//# 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,mBAAmB,CAAC;AAElC,cAAc,qCAAqC,CAAC;AACpD,cAAc,2CAA2C,CAAC;AAE1D,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAE5C,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragment-build/ui",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {

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>);
-};

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

@@ -1,170 +0,0 @@
-var _a, _b;
-import { Card, CardBody, Divider, Input, Tab, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, } from "@nextui-org/react";
-import { IconBox, IconBoxMultiple, IconHome, IconMessageCircle, } from "@tabler/icons-react";
-import { Shell } from "./Shell";
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-const meta = {
-    title: "components/Shell",
-    component: Shell,
-    tags: ["autodocs"],
-    parameters: {
-        layout: "fullscreen",
-    },
-};
-export default meta;
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Primary = {
-    args: {
-        sidebar: {
-            items: [
-                {
-                    type: "user",
-                    key: "user",
-                    name: "Tony Reichert",
-                    description: "ACME Inc.",
-                    avatar: {
-                        src: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
-                    },
-                    dropdownItems: [
-                        {
-                            label: "My Profile",
-                        },
-                        {
-                            label: "Settings",
-                        },
-                        {
-                            label: "Organization Settings",
-                            showDivider: true,
-                        },
-                        {
-                            label: "Logout",
-                            color: "danger",
-                        },
-                    ],
-                },
-                {
-                    type: "custom",
-                    key: "search",
-                    render: <Input label="Search..."/>,
-                },
-                {
-                    type: "navigation",
-                    key: "navigation-overview",
-                    label: "Overview",
-                    navigation: [
-                        {
-                            label: "Home",
-                            link: "/",
-                            icon: <IconHome stroke={1.5}/>,
-                        },
-                        {
-                            label: "My Projects",
-                            link: "/projects",
-                            icon: <IconBoxMultiple stroke={1.5}/>,
-                        },
-                        {
-                            label: "Chat",
-                            link: "/chat",
-                            icon: <IconMessageCircle stroke={1.5}/>,
-                        },
-                    ],
-                },
-                {
-                    type: "navigation",
-                    key: "navigation-projects",
-                    label: "Projects",
-                    navigation: [
-                        {
-                            label: "Project 1",
-                            link: "/projects/1",
-                            icon: <IconBox stroke={1.5}/>,
-                        },
-                        {
-                            label: "Project 2",
-                            link: "/projects/2",
-                            icon: <IconBox stroke={1.5}/>,
-                        },
-                        {
-                            label: "Project 3",
-                            link: "/projects/3",
-                            icon: <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>),
-                    align: "bottom",
-                },
-            ],
-        },
-        children: "CONTENT",
-    },
-};
-export const Collapsed = {
-    args: Object.assign(Object.assign({}, Primary.args), { sidebar: ((_a = Primary.args) === null || _a === void 0 ? void 0 : _a.sidebar) ? Object.assign(Object.assign({}, Primary.args.sidebar), { layout: "collapsed" }) : undefined }),
-};
-export const Auto = {
-    args: Object.assign(Object.assign({}, Primary.args), { sidebar: ((_b = Primary.args) === null || _b === void 0 ? void 0 : _b.sidebar) ? Object.assign(Object.assign({}, Primary.args.sidebar), { autoLayout: true }) : undefined }),
-};
-export const WithTable = {
-    args: Object.assign(Object.assign({}, Primary.args), { children: (<>
-        <h1>Customers</h1>
-        <p className="mt-2 text-foreground-500">Blablabla</p>
-        <Divider className="my-4"/>
-        <Tabs aria-label="Options">
-          <Tab key="table" title="Table">
-            <Table aria-label="Example static collection table" selectionMode="multiple" removeWrapper>
-              <TableHeader>
-                <TableColumn>NAME</TableColumn>
-                <TableColumn>ROLE</TableColumn>
-                <TableColumn>STATUS</TableColumn>
-              </TableHeader>
-              <TableBody>
-                <TableRow key="1">
-                  <TableCell>Tony Reichert</TableCell>
-                  <TableCell>CEO</TableCell>
-                  <TableCell>Active</TableCell>
-                </TableRow>
-                <TableRow key="2">
-                  <TableCell>Zoey Lang</TableCell>
-                  <TableCell>Technical Lead</TableCell>
-                  <TableCell>Paused</TableCell>
-                </TableRow>
-                <TableRow key="3">
-                  <TableCell>Jane Fisher</TableCell>
-                  <TableCell>Senior Developer</TableCell>
-                  <TableCell>Active</TableCell>
-                </TableRow>
-                <TableRow key="4">
-                  <TableCell>William Howard</TableCell>
-                  <TableCell>Community Manager</TableCell>
-                  <TableCell>Vacation</TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </Tab>
-          <Tab key="music" title="Music">
-            <Card>
-              <CardBody>
-                Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-                dolor in reprehenderit in voluptate velit esse cillum dolore eu
-                fugiat nulla pariatur.
-              </CardBody>
-            </Card>
-          </Tab>
-          <Tab key="videos" title="Videos">
-            <Card>
-              <CardBody>
-                Excepteur sint occaecat cupidatat non proident, sunt in culpa
-                qui officia deserunt mollit anim id est laborum.
-              </CardBody>
-            </Card>
-          </Tab>
-        </Tabs>
-      </>) }),
-};

package/dist/fragments/sidebar/Sidebar.jsx

@@ -1,129 +0,0 @@
-'use client';
-import { Avatar, Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Listbox, ListboxItem, ListboxSection, ScrollShadow, Tooltip, User, } from '@nextui-org/react';
-import { useSmaller } from '../../hooks/breakpoints';
-import { IconChevronLeft } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
-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' ? (<Listbox variant="flat" aria-label="Listbox menu with sections" itemClasses={{
-                    base: 'h-12 gap-6',
-                }} {...item.listboxProps}>
-          <ListboxSection title={item.label} classNames={{ group: 'flex flex-col gap-1' }}>
-            {item.navigation.map((navItem) => {
-                    var _a;
-                    return (<ListboxItem key={navItem.label} startContent={navItem.icon} endContent={navItem.endContent} href={navItem.link} className={((_a = options.activeNav) === null || _a === void 0 ? void 0 : _a.link) === navItem.link ? "bg-default/40 text-default-foreground" : ''}>
-                {navItem.label}
-              </ListboxItem>);
-                })}
-          </ListboxSection>
-        </Listbox>) : (<nav className="flex flex-col gap-1">
-          {item.navigation.map((navItem) => {
-                    var _a;
-                    return (<Tooltip key={navItem.label} placement="right" content={navItem.label}>
-              <Button variant={((_a = options.activeNav) === null || _a === void 0 ? void 0 : _a.link) === navItem.link ? 'flat' : 'light'} size="lg" as="a" startContent={navItem.icon} href={navItem.link} isIconOnly/>
-            </Tooltip>);
-                })}
-        </nav>);
-        case 'user':
-            return (<Dropdown placement="bottom-start" classNames={{ trigger: options.layout === 'expanded' ? 'justify-start px-2' : 'justify-start' }} {...item.dropdown}>
-          <DropdownTrigger>
-            {options.layout === 'expanded' ? (<User as="button" avatarProps={item.avatar} className="transition-transform" description={item.description} name={item.name}/>) : (<Avatar as="button" className="transition-transform" {...item.avatar}/>)}
-          </DropdownTrigger>
-          <DropdownMenu aria-label="User Actions" color="primary" variant="flat" items={item.dropdownItems || []}>
-            {(dropdownItem) => (<DropdownItem key={dropdownItem.label} {...dropdownItem}>
-                {dropdownItem.label}
-              </DropdownItem>)}
-          </DropdownMenu>
-        </Dropdown>);
-        case 'custom':
-            return options.layout === 'expanded' || item.showCollapsed ? <div className="px-2">{item.render}</div> : 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 (<div className='flex border-r-[1px] border-default-100'>
-      <div className={`fixed top-0 left-0 flex flex-col h-screen bg-content1 gap-8 transition-all ${collapsed ? '' : 'opacity-0'}`}>
-        <ScrollShadow className={`w-20 items-center flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1`}>
-          {items.map((item) => {
-            const children = item.align !== 'bottom' ? renderItems(item, { layout: 'collapsed', activeNav }) : null;
-            return children ? (<div key={item.key} className={getAlignmentClasses(item.align)}>
-                {children}
-              </div>) : null;
-        })}
-        </ScrollShadow>
-        <div className={`w-20 items-center flex flex-col gap-8 px-3 pb-8`}>
-          {items.map((item) => {
-            const children = item.align === 'bottom' ? renderItems(item, { layout: 'collapsed', activeNav }) : null;
-            return children ? (<div key={item.key} className={getAlignmentClasses(item.align)}>
-                {children}
-              </div>) : null;
-        })}
-        </div>
-      </div>
-      <div className={`${layoutStyles} fixed top-0 left-0 flex flex-col h-screen bg-content1 gap-8 overflow-hidden transition-all`}>
-        <ScrollShadow className={`w-72 flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1`}>
-          {items.map((item) => {
-            const children = item.align !== 'bottom' ? renderItems(item, { layout: 'expanded', activeNav }) : null;
-            return children ? (<div key={item.key} className={getAlignmentClasses(item.align)}>
-                {children}
-              </div>) : null;
-        })}
-        </ScrollShadow>
-        <div className={`w-72 flex flex-col gap-8 px-3 pb-8`}>
-          {items.map((item) => {
-            const children = item.align === 'bottom' ? renderItems(item, { layout: 'expanded', activeNav }) : null;
-            return children ? (<div key={item.key} className={getAlignmentClasses(item.align)}>
-                {children}
-              </div>) : null;
-        })}
-        </div>
-      </div>
-      <div className={`${layoutStyles} transition-all h-screen`}/>
-      <div className={`fixed top-6 transition-all ${collapseButtonStyles}`}>
-        <Button size="sm" isIconOnly radius="full" className="h-unit-6 w-unit-6 min-w-unit-6 bg-default-100" onClick={() => setCollapsed(!collapsed)}>
-          <IconChevronLeft size={14}/>
-        </Button>
-      </div>
-    </div>);
-};