@moduix/solid 1.0.0

package/dist/components/sidebar/Sidebar.jsx

@@ -0,0 +1,309 @@
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { createContext, splitProps, useContext } from "solid-js";
+import { ChevronLeftIcon } from "../../internal/icons/ui/Icons.jsx";
+import { Input } from "../input/index.jsx";
+import { Separator } from "../separator/index.jsx";
+import { Splitter, useSplitterContext } from "../splitter/index.jsx";
+import { Tooltip } from "../tooltip/index.jsx";
+import Sidebar_module from "./Sidebar.module.jsx";
+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 <SidebarConfigContext.Provider value={{
+        panelId,
+        side
+    }}>
+      <Splitter.Root {...others} panels={getDefaultPanels(side(), panelId())} defaultSize={local.defaultSize ?? getDefaultSidebarSize(side())} orientation="horizontal" data-side={side()} data-slot="sidebar-root" class={clsx(Sidebar_module.root, local.class)}/>
+    </SidebarConfigContext.Provider>;
+}
+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 <Splitter.Panel {...others} id={config.panelId()} data-side={config.side()} data-slot="sidebar-panel" data-state={collapsed() ? 'collapsed' : 'expanded'} class={clsx(Sidebar_module.panel, local.class)}/>;
+}
+function SidebarInset(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const config = useSidebarConfig();
+    return <Splitter.Panel {...others} id="content" data-side={config.side()} data-slot="sidebar-inset" class={clsx(Sidebar_module.inset, 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 <Splitter.ResizeTrigger {...others} id={id()} aria-label={local['aria-label'] ?? 'Resize sidebar'} data-side={config.side()} data-slot="sidebar-resize-trigger" class={clsx(Sidebar_module.resizeTrigger, local.class)}>
+      {local.children}
+    </Splitter.ResizeTrigger>;
+}
+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 <ark.button asChild={local.asChild} type={local.type ?? 'button'} aria-label={local['aria-label'] ?? 'Toggle sidebar'} aria-expanded={!collapsed()} data-scope="sidebar" data-part="trigger" data-side={config.side()} data-slot="sidebar-trigger" data-state={collapsed() ? 'collapsed' : 'expanded'} class={clsx(Sidebar_module.trigger, local.class)} onClick={handleClick} {...others}>
+      {void 0 === local.children && !local.asChild ? <ChevronLeftIcon/> : local.children}
+    </ark.button>;
+}
+function SidebarLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-scope="sidebar" data-part="label" data-slot="sidebar-label" class={clsx(Sidebar_module.label, local.class)} {...others}/>;
+}
+function SidebarHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.header data-scope="sidebar" data-part="header" data-slot="sidebar-header" class={clsx(Sidebar_module.header, local.class)} {...others}/>;
+}
+function SidebarContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-scope="sidebar" data-part="content" data-slot="sidebar-content" class={clsx(Sidebar_module.content, local.class)} {...others}/>;
+}
+function SidebarExpandedContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const { collapsed } = useSidebar();
+    return <ark.div data-scope="sidebar" data-part="expanded-content" data-slot="sidebar-expanded-content" class={local.class} {...others} hidden={collapsed()}/>;
+}
+function SidebarCollapsedContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const { collapsed } = useSidebar();
+    return <ark.div data-scope="sidebar" data-part="collapsed-content" data-slot="sidebar-collapsed-content" class={local.class} {...others} hidden={!collapsed()}/>;
+}
+function SidebarFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.footer data-scope="sidebar" data-part="footer" data-slot="sidebar-footer" class={clsx(Sidebar_module.footer, local.class)} {...others}/>;
+}
+function SidebarGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.section data-scope="sidebar" data-part="group" data-slot="sidebar-group" class={clsx(Sidebar_module.group, local.class)} {...others}/>;
+}
+function SidebarGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.h3 data-scope="sidebar" data-part="group-label" data-slot="sidebar-group-label" class={clsx(Sidebar_module.groupLabel, local.class)} {...others}/>;
+}
+function SidebarGroupHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-scope="sidebar" data-part="group-header" data-slot="sidebar-group-header" class={clsx(Sidebar_module.groupHeader, local.class)} {...others}/>;
+}
+function SidebarGroupAction(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'type'
+    ]);
+    return <ark.button type={local.type ?? 'button'} data-scope="sidebar" data-part="group-action" data-slot="sidebar-group-action" class={clsx(Sidebar_module.groupAction, local.class)} {...others}/>;
+}
+function SidebarNavigationList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.ul data-scope="sidebar" data-part="navigation-list" data-slot="sidebar-navigation-list" class={clsx(Sidebar_module.menu, local.class)} {...others}/>;
+}
+function SidebarNavigationItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.li data-scope="sidebar" data-part="navigation-item" data-slot="sidebar-navigation-item" class={clsx(Sidebar_module.menuItem, local.class)} {...others}/>;
+}
+function SidebarNavigationButton(props) {
+    const [local, others] = splitProps(props, [
+        'active',
+        'aria-current',
+        'asChild',
+        'class',
+        'size',
+        'type'
+    ]);
+    return <ark.button asChild={local.asChild} type={local.type ?? 'button'} aria-current={local['aria-current'] ?? (local.active ? 'page' : void 0)} data-scope="sidebar" data-part="navigation-button" data-slot="sidebar-navigation-button" data-active={local.active ? '' : void 0} data-size={local.size ?? 'md'} class={clsx(Sidebar_module.menuButton, local.class)} {...others}/>;
+}
+function SidebarNavigationBadge(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-scope="sidebar" data-part="navigation-badge" data-slot="sidebar-navigation-badge" class={clsx(Sidebar_module.menuBadge, local.class)} {...others}/>;
+}
+function SidebarNavigationSubList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.ul data-scope="sidebar" data-part="navigation-sub-list" data-slot="sidebar-navigation-sub-list" class={clsx(Sidebar_module.menuSub, local.class)} {...others}/>;
+}
+function SidebarNavigationSubItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.li data-scope="sidebar" data-part="navigation-sub-item" data-slot="sidebar-navigation-sub-item" class={clsx(Sidebar_module.menuSubItem, local.class)} {...others}/>;
+}
+function SidebarNavigationSubButton(props) {
+    const [local, others] = splitProps(props, [
+        'active',
+        'aria-current',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <ark.a asChild={local.asChild} aria-current={local['aria-current'] ?? (local.active ? 'page' : void 0)} data-scope="sidebar" data-part="navigation-sub-button" data-slot="sidebar-navigation-sub-button" data-active={local.active ? '' : void 0} class={clsx(Sidebar_module.menuSubButton, local.class)} {...others}>
+      {'string' == typeof local.children ? <span data-slot="sidebar-navigation-sub-label">{local.children}</span> : local.children}
+    </ark.a>;
+}
+function SidebarTooltip(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'closeDelay',
+        'content',
+        'openDelay',
+        'positioning'
+    ]);
+    const { collapsed, side } = useSidebar();
+    return <Tooltip {...others} openDelay={local.openDelay ?? 200} closeDelay={local.closeDelay ?? 0} disabled={!collapsed()} positioning={{
+        placement: 'left' === side() ? 'right' : 'left',
+        gutter: 8,
+        ...local.positioning
+    }}>
+      <Tooltip.Trigger asChild={local.children}/>
+      <Tooltip.Positioner>
+        <Tooltip.Content>{local.content}</Tooltip.Content>
+      </Tooltip.Positioner>
+    </Tooltip>;
+}
+function SidebarInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Input.Root data-slot="sidebar-input" class={clsx(Sidebar_module.input, local.class)} {...others}/>;
+}
+function SidebarSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Separator.Root data-slot="sidebar-separator" class={clsx(Sidebar_module.separator, 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 };

package/dist/components/sidebar/Sidebar.module.js

@@ -0,0 +1,26 @@
+import "./Sidebar_module.css";
+const Sidebar_module = {
+    root: "root-TgY_3s",
+    panel: "panel-l44YAX",
+    header: "header-YkNEAV",
+    footer: "footer-RydM38",
+    group: "group-cwd3z7",
+    content: "content-v0UxPJ",
+    label: "label-trHnso",
+    groupLabel: "groupLabel-IvBtsR",
+    menuSub: "menuSub-xn2r86",
+    groupAction: "groupAction-aoQPc4",
+    input: "input-nqDU3w",
+    menuButton: "menuButton-OAl6eQ",
+    inset: "inset-FQP9mn",
+    resizeTrigger: "resizeTrigger-xFDgel",
+    trigger: "trigger-_fUcgc",
+    groupHeader: "groupHeader-N4qFFK",
+    menu: "menu-UwagMF",
+    menuItem: "menuItem-ktGhRk",
+    menuSubItem: "menuSubItem-NeKVH5",
+    menuBadge: "menuBadge-GKf4u4",
+    menuSubButton: "menuSubButton-MjeEfX",
+    separator: "separator-KuEG4k"
+};
+export default Sidebar_module;

package/dist/components/sidebar/Sidebar.module.jsx

@@ -0,0 +1,26 @@
+import "./Sidebar_module.css";
+const Sidebar_module = {
+    root: "root-TgY_3s",
+    panel: "panel-l44YAX",
+    header: "header-YkNEAV",
+    footer: "footer-RydM38",
+    group: "group-cwd3z7",
+    content: "content-v0UxPJ",
+    label: "label-trHnso",
+    groupLabel: "groupLabel-IvBtsR",
+    menuSub: "menuSub-xn2r86",
+    groupAction: "groupAction-aoQPc4",
+    input: "input-nqDU3w",
+    menuButton: "menuButton-OAl6eQ",
+    inset: "inset-FQP9mn",
+    resizeTrigger: "resizeTrigger-xFDgel",
+    trigger: "trigger-_fUcgc",
+    groupHeader: "groupHeader-N4qFFK",
+    menu: "menu-UwagMF",
+    menuItem: "menuItem-ktGhRk",
+    menuSubItem: "menuSubItem-NeKVH5",
+    menuBadge: "menuBadge-GKf4u4",
+    menuSubButton: "menuSubButton-MjeEfX",
+    separator: "separator-KuEG4k"
+};
+export default Sidebar_module;