@moduix/solid-tailwind 1.0.0

package/dist/components/sidebar/Sidebar.js

@@ -0,0 +1,590 @@
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { createContext, splitProps, useContext } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { ChevronLeftIcon } from "../../internal/icons/ui/Icons.js";
+import { Input } from "../input/index.js";
+import { Separator } from "../separator/index.js";
+import { Splitter, useSplitterContext } from "../splitter/index.js";
+import { Tooltip } from "../tooltip/index.js";
+var _tmpl$ = /*#__PURE__*/ template("<span data-slot=sidebar-navigation-sub-label>");
+const sidebarPanel = {
+    id: 'sidebar',
+    minSize: '3rem',
+    maxSize: '18rem',
+    collapsible: true,
+    collapsedSize: '3rem'
+};
+const contentPanel = {
+    id: 'content'
+};
+const defaultPanelsBySide = {
+    left: [
+        sidebarPanel,
+        contentPanel
+    ],
+    right: [
+        contentPanel,
+        sidebarPanel
+    ]
+};
+const SidebarConfigContext = createContext({
+    panelId: ()=>'sidebar',
+    side: ()=>'left'
+});
+function getDefaultSidebarSize(side) {
+    if ('left' === side) return [
+        '16rem'
+    ];
+    const defaultSize = [];
+    defaultSize[1] = '16rem';
+    return defaultSize;
+}
+function getDefaultPanels(side, panelId) {
+    const panels = defaultPanelsBySide[side];
+    return panels.map((panel)=>'sidebar' === panel.id ? {
+            ...panel,
+            id: panelId
+        } : panel);
+}
+function toggleSidebarPanel(splitter, panelId) {
+    if (splitter().isPanelCollapsed(panelId)) return void splitter().expandPanel(panelId);
+    splitter().collapsePanel(panelId);
+}
+function useSidebarConfig() {
+    const config = useContext(SidebarConfigContext);
+    if (!config) throw new Error('Sidebar components must be used within Sidebar.Root');
+    return config;
+}
+function SidebarRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'defaultSize',
+        'panelId',
+        'side'
+    ]);
+    const panelId = ()=>local.panelId ?? 'sidebar';
+    const side = ()=>local.side ?? 'left';
+    return createComponent(SidebarConfigContext.Provider, {
+        value: {
+            panelId,
+            side
+        },
+        get children () {
+            return createComponent(Splitter.Root, mergeProps(others, {
+                get panels () {
+                    return getDefaultPanels(side(), panelId());
+                },
+                get defaultSize () {
+                    return local.defaultSize ?? getDefaultSidebarSize(side());
+                },
+                orientation: "horizontal",
+                get ["data-side"] () {
+                    return side();
+                },
+                "data-slot": "sidebar-root",
+                get ["class"] () {
+                    return cn('isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', local.class);
+                }
+            }));
+        }
+    });
+}
+function useSidebar() {
+    const config = useSidebarConfig();
+    const splitter = useSplitterContext();
+    const collapsed = ()=>splitter().isPanelCollapsed(config.panelId());
+    return {
+        collapsed,
+        side: config.side,
+        state: ()=>collapsed() ? 'collapsed' : 'expanded',
+        toggleSidebar: ()=>toggleSidebarPanel(splitter, config.panelId())
+    };
+}
+function SidebarPanel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const config = useSidebarConfig();
+    const splitter = useSplitterContext();
+    const collapsed = ()=>splitter().isPanelCollapsed(config.panelId());
+    return createComponent(Splitter.Panel, mergeProps(others, {
+        get id () {
+            return config.panelId();
+        },
+        get ["data-side"] () {
+            return config.side();
+        },
+        "data-slot": "sidebar-panel",
+        get ["data-state"] () {
+            return collapsed() ? 'collapsed' : 'expanded';
+        },
+        get ["class"] () {
+            return cn('group/sidebar-panel @container/sidebar-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-card p-0 text-card-foreground transition-colors duration-200 ease-in-out motion-reduce:transition-none', local.class);
+        }
+    }));
+}
+function SidebarInset(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const config = useSidebarConfig();
+    return createComponent(Splitter.Panel, mergeProps(others, {
+        id: "content",
+        get ["data-side"] () {
+            return config.side();
+        },
+        "data-slot": "sidebar-inset",
+        get ["class"] () {
+            return cn('relative min-w-0 overflow-auto bg-background p-0 text-foreground', local.class);
+        }
+    }));
+}
+function SidebarResizeTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'class',
+        'children'
+    ]);
+    const config = useSidebarConfig();
+    const id = ()=>'left' === config.side() ? `${config.panelId()}:content` : `content:${config.panelId()}`;
+    return createComponent(Splitter.ResizeTrigger, mergeProps(others, {
+        get id () {
+            return id();
+        },
+        get ["aria-label"] () {
+            return local['aria-label'] ?? 'Resize sidebar';
+        },
+        get ["data-side"] () {
+            return config.side();
+        },
+        "data-slot": "sidebar-resize-trigger",
+        get ["class"] () {
+            return cn('z-2', local.class);
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function SidebarTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'asChild',
+        'children',
+        'class',
+        'onClick',
+        'type'
+    ]);
+    const config = useSidebarConfig();
+    const splitter = useSplitterContext();
+    const collapsed = ()=>splitter().isPanelCollapsed(config.panelId());
+    const handleClick = (event)=>{
+        local.onClick?.(event);
+        if (event.defaultPrevented) return;
+        toggleSidebarPanel(splitter, config.panelId());
+    };
+    return createComponent(ark.button, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        get type () {
+            return local.type ?? 'button';
+        },
+        get ["aria-label"] () {
+            return local['aria-label'] ?? 'Toggle sidebar';
+        },
+        get ["aria-expanded"] () {
+            return !collapsed();
+        },
+        "data-scope": "sidebar",
+        "data-part": "trigger",
+        get ["data-side"] () {
+            return config.side();
+        },
+        "data-slot": "sidebar-trigger",
+        get ["data-state"] () {
+            return collapsed() ? 'collapsed' : 'expanded';
+        },
+        get ["class"] () {
+            return cn('relative z-4 -mx-3.5 inline-flex size-7 flex-none translate-y-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background p-0 text-muted-foreground shadow-sm outline-0 transition-[background-color,color,box-shadow] duration-200 ease-in-out', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none', '[&>svg]:size-4 [&>svg]:transition-transform [&>svg]:duration-200 [&>svg]:ease-in-out data-[side=left]:data-[state=collapsed]:[&>svg]:rotate-180 data-[side=right]:data-[state=expanded]:[&>svg]:rotate-180', 'hover:bg-accent hover:text-accent-foreground', local.class);
+        },
+        onClick: handleClick
+    }, others, {
+        get children () {
+            return memo(()=>!!(void 0 === local.children && !local.asChild))() ? createComponent(ChevronLeftIcon, {}) : local.children;
+        }
+    }));
+}
+function SidebarLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "label",
+        "data-slot": "sidebar-label",
+        get ["class"] () {
+            return cn('min-w-0 truncate group-data-[state=collapsed]/sidebar-panel:sr-only', local.class);
+        }
+    }, others));
+}
+function SidebarHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.header, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "header",
+        "data-slot": "sidebar-header",
+        get ["class"] () {
+            return cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1 [&>*:only-child]:w-full group-data-[state=collapsed]/sidebar-panel:[&>*:only-child]:w-auto', local.class);
+        }
+    }, others));
+}
+function SidebarContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "content",
+        "data-slot": "sidebar-content",
+        get ["class"] () {
+            return cn('flex min-h-0 flex-auto [scrollbar-gutter:stable] flex-col overflow-auto overscroll-contain group-data-[state=collapsed]/sidebar-panel:[scrollbar-width:none] group-data-[state=collapsed]/sidebar-panel:[scrollbar-gutter:auto] group-data-[state=collapsed]/sidebar-panel:overflow-x-hidden group-data-[state=collapsed]/sidebar-panel:overflow-y-auto', local.class);
+        }
+    }, others));
+}
+function SidebarExpandedContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const { collapsed } = useSidebar();
+    return createComponent(ark.div, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "expanded-content",
+        "data-slot": "sidebar-expanded-content",
+        get ["class"] () {
+            return local.class;
+        }
+    }, others, {
+        get hidden () {
+            return collapsed();
+        }
+    }));
+}
+function SidebarCollapsedContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const { collapsed } = useSidebar();
+    return createComponent(ark.div, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "collapsed-content",
+        "data-slot": "sidebar-collapsed-content",
+        get ["class"] () {
+            return local.class;
+        }
+    }, others, {
+        get hidden () {
+            return !collapsed();
+        }
+    }));
+}
+function SidebarFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.footer, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "footer",
+        "data-slot": "sidebar-footer",
+        get ["class"] () {
+            return cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1', local.class);
+        }
+    }, others));
+}
+function SidebarGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.section, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "group",
+        "data-slot": "sidebar-group",
+        get ["class"] () {
+            return cn('flex flex-col gap-1 p-3 group-data-[state=collapsed]/sidebar-panel:px-1', local.class);
+        }
+    }, others));
+}
+function SidebarGroupHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "group-header",
+        "data-slot": "sidebar-group-header",
+        get ["class"] () {
+            return cn('flex min-w-0 items-center gap-2', local.class);
+        }
+    }, others));
+}
+function SidebarGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.h3, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "group-label",
+        "data-slot": "sidebar-group-label",
+        get ["class"] () {
+            return cn('min-w-0 flex-1 truncate px-2 text-xs leading-4 font-medium text-muted-foreground group-data-[state=collapsed]/sidebar-panel:sr-only', local.class);
+        }
+    }, others));
+}
+function SidebarGroupAction(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'type'
+    ]);
+    return createComponent(ark.button, mergeProps({
+        get type () {
+            return local.type ?? 'button';
+        },
+        "data-scope": "sidebar",
+        "data-part": "group-action",
+        "data-slot": "sidebar-group-action",
+        get ["class"] () {
+            return cn('focus-visible:outline-offset-0.5 me-2 inline-flex size-control-xs flex-none cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground outline-0 transition-colors duration-200 ease-in-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-ring motion-reduce:transition-none @max-[7rem]:hidden [&>svg]:size-4', local.class);
+        }
+    }, others));
+}
+function SidebarNavigationList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.ul, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "navigation-list",
+        "data-slot": "sidebar-navigation-list",
+        get ["class"] () {
+            return cn('flex w-full min-w-0 flex-col gap-1', local.class);
+        }
+    }, others));
+}
+function SidebarNavigationItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.li, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "navigation-item",
+        "data-slot": "sidebar-navigation-item",
+        get ["class"] () {
+            return cn('relative min-w-0', local.class);
+        }
+    }, others));
+}
+function SidebarNavigationButton(props) {
+    const [local, others] = splitProps(props, [
+        'active',
+        'aria-current',
+        'asChild',
+        'class',
+        'size',
+        'type'
+    ]);
+    return createComponent(ark.button, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        get type () {
+            return local.type ?? 'button';
+        },
+        get ["aria-current"] () {
+            return local['aria-current'] ?? (local.active ? 'page' : void 0);
+        },
+        "data-scope": "sidebar",
+        "data-part": "navigation-button",
+        "data-slot": "sidebar-navigation-button",
+        get ["data-active"] () {
+            return local.active ? '' : void 0;
+        },
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["class"] () {
+            return cn('flex w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 py-1 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-colors duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', 'group-data-[state=collapsed]/sidebar-panel:mx-auto group-data-[state=collapsed]/sidebar-panel:min-h-control-md group-data-[state=collapsed]/sidebar-panel:w-control-md group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:bg-transparent group-data-[state=collapsed]/sidebar-panel:px-0 group-data-[state=collapsed]/sidebar-panel:hover:bg-transparent', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', '[&>[data-scope=select][data-part=indicator]]:ms-auto @max-[7rem]:[&>[data-scope=select][data-part=indicator]]:hidden', '[&>[data-slot=collapsible-indicator]]:ms-auto [&>[data-slot=collapsible-indicator]]:size-control-xs @max-[7rem]:[&>[data-slot=collapsible-indicator]]:hidden [&>[data-slot=collapsible-indicator]>svg]:size-3', '[&>[data-slot=menu-indicator]]:ms-auto [&>[data-slot=menu-indicator]]:size-control-xs [&>[data-slot=menu-indicator]]:leading-none [&>[data-slot=menu-indicator]]:text-muted-foreground @max-[7rem]:[&>[data-slot=menu-indicator]]:hidden [&>[data-slot=menu-indicator]>svg]:block [&>[data-slot=menu-indicator]>svg]:size-4', 'sm' === local.size && 'min-h-control-sm text-xs', (void 0 === local.size || 'md' === local.size) && 'min-h-control-md', 'lg' === local.size && 'min-h-control-lg', local.class);
+        }
+    }, others));
+}
+function SidebarNavigationBadge(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "navigation-badge",
+        "data-slot": "sidebar-navigation-badge",
+        get ["class"] () {
+            return cn('pointer-events-none absolute end-2.5 top-1/2 z-1 box-border inline-grid size-5 -translate-y-1/2 place-items-center rounded-full bg-primary p-0 text-[0.5625rem] leading-none font-medium text-primary-foreground tabular-nums @max-[7rem]:hidden', local.class);
+        }
+    }, others));
+}
+function SidebarNavigationSubList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.ul, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-list",
+        "data-slot": "sidebar-navigation-sub-list",
+        get ["class"] () {
+            return cn('ms-4 mt-1 flex w-auto min-w-0 flex-col gap-1 border-s border-border ps-2 group-data-[state=collapsed]/sidebar-panel:hidden', local.class);
+        }
+    }, others));
+}
+function SidebarNavigationSubItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.li, mergeProps({
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-item",
+        "data-slot": "sidebar-navigation-sub-item",
+        get ["class"] () {
+            return cn('relative min-w-0', local.class);
+        }
+    }, others));
+}
+function SidebarNavigationSubButton(props) {
+    const [local, others] = splitProps(props, [
+        'active',
+        'aria-current',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(ark.a, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        get ["aria-current"] () {
+            return local['aria-current'] ?? (local.active ? 'page' : void 0);
+        },
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-button",
+        "data-slot": "sidebar-navigation-sub-button",
+        get ["data-active"] () {
+            return local.active ? '' : void 0;
+        },
+        get ["class"] () {
+            return cn('flex min-h-control-sm w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-[background-color,border-color,color,box-shadow] duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', local.class);
+        }
+    }, others, {
+        get children () {
+            return memo(()=>'string' == typeof local.children)() ? (()=>{
+                var _el$ = _tmpl$();
+                insert(_el$, ()=>local.children);
+                return _el$;
+            })() : local.children;
+        }
+    }));
+}
+function SidebarTooltip(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'closeDelay',
+        'content',
+        'openDelay',
+        'positioning'
+    ]);
+    const { collapsed, side } = useSidebar();
+    return createComponent(Tooltip, mergeProps(others, {
+        get openDelay () {
+            return local.openDelay ?? 200;
+        },
+        get closeDelay () {
+            return local.closeDelay ?? 0;
+        },
+        get disabled () {
+            return !collapsed();
+        },
+        get positioning () {
+            return {
+                placement: 'left' === side() ? 'right' : 'left',
+                gutter: 8,
+                ...local.positioning
+            };
+        },
+        get children () {
+            return [
+                createComponent(Tooltip.Trigger, {
+                    get asChild () {
+                        return local.children;
+                    }
+                }),
+                createComponent(Tooltip.Positioner, {
+                    get children () {
+                        return createComponent(Tooltip.Content, {
+                            get children () {
+                                return local.content;
+                            }
+                        });
+                    }
+                })
+            ];
+        }
+    }));
+}
+function SidebarInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Input.Root, mergeProps({
+        "data-slot": "sidebar-input",
+        get ["class"] () {
+            return cn('w-full group-data-[state=collapsed]/sidebar-panel:hidden', local.class);
+        }
+    }, others));
+}
+function SidebarSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Separator.Root, mergeProps({
+        "data-slot": "sidebar-separator",
+        get ["class"] () {
+            return cn('border-border', local.class);
+        }
+    }, others));
+}
+const Sidebar = Object.assign(SidebarRoot, {
+    Root: SidebarRoot,
+    Panel: SidebarPanel,
+    Inset: SidebarInset,
+    ResizeTrigger: SidebarResizeTrigger,
+    Trigger: SidebarTrigger,
+    Label: SidebarLabel,
+    Input: SidebarInput,
+    Header: SidebarHeader,
+    Content: SidebarContent,
+    ExpandedContent: SidebarExpandedContent,
+    CollapsedContent: SidebarCollapsedContent,
+    Footer: SidebarFooter,
+    Separator: SidebarSeparator,
+    Group: SidebarGroup,
+    GroupHeader: SidebarGroupHeader,
+    GroupLabel: SidebarGroupLabel,
+    GroupAction: SidebarGroupAction,
+    NavigationList: SidebarNavigationList,
+    NavigationItem: SidebarNavigationItem,
+    Tooltip: SidebarTooltip,
+    NavigationButton: SidebarNavigationButton,
+    NavigationBadge: SidebarNavigationBadge,
+    NavigationSubList: SidebarNavigationSubList,
+    NavigationSubItem: SidebarNavigationSubItem,
+    NavigationSubButton: SidebarNavigationSubButton
+});
+export { Sidebar, useSidebar };