@moduix/solid 1.0.0

package/dist/components/floating-panel/FloatingPanel.js

@@ -0,0 +1,339 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { FloatingPanel, useFloatingPanel, useFloatingPanelContext } from "@ark-ui/solid/floating-panel";
+import { clsx } from "clsx";
+import { For, children, splitProps } from "solid-js";
+import { GripIcon, MaximizeIcon, MinusIcon, RestoreIcon } from "../../internal/icons/ui/Icons.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+import FloatingPanel_module from "./FloatingPanel.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<span aria-hidden=true data-slot=floating-panel-drag-indicator>");
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close panel';
+const resizeTriggerAxes = [
+    'n',
+    'e',
+    's',
+    'w',
+    'ne',
+    'se',
+    'sw',
+    'nw'
+];
+function FloatingPanelRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'closeOnEscape',
+        'lazyMount',
+        'persistRect',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(FloatingPanel.Root, mergeProps({
+                get closeOnEscape () {
+                    return local.closeOnEscape ?? true;
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get persistRect () {
+                    return local.persistRect ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function FloatingPanelRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(FloatingPanel.RootProvider, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function FloatingPanelTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(FloatingPanel.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "floating-panel-trigger",
+        get ["class"] () {
+            return clsx(!local.asChild && FloatingPanel_module.trigger, local.class);
+        }
+    }, others));
+}
+function FloatingPanelPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(FloatingPanel.Positioner, mergeProps({
+                "data-slot": "floating-panel-positioner",
+                get ["class"] () {
+                    return clsx(FloatingPanel_module.positioner, local.class);
+                }
+            }, others));
+        }
+    });
+}
+function FloatingPanelContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.Content, mergeProps({
+        "data-slot": "floating-panel-content",
+        get ["class"] () {
+            return clsx(FloatingPanel_module.content, local.class);
+        }
+    }, others));
+}
+function FloatingPanelDragTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.DragTrigger, mergeProps({
+        "data-slot": "floating-panel-drag-trigger",
+        get ["class"] () {
+            return clsx(FloatingPanel_module.dragTrigger, local.class);
+        }
+    }, others));
+}
+function FloatingPanelHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.Header, mergeProps({
+        "data-slot": "floating-panel-header",
+        get ["class"] () {
+            return clsx(FloatingPanel_module.header, local.class);
+        }
+    }, others));
+}
+function FloatingPanelTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.Title, mergeProps({
+        "data-slot": "floating-panel-title",
+        get ["class"] () {
+            return clsx(FloatingPanel_module.title, local.class);
+        }
+    }, others));
+}
+function FloatingPanelControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.Control, mergeProps({
+        "data-slot": "floating-panel-control",
+        get ["class"] () {
+            return clsx(FloatingPanel_module.control, local.class);
+        }
+    }, others));
+}
+function FloatingPanelStageTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'asChild',
+        'children',
+        'class',
+        'stage'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const shouldRenderDefaultIcon = ()=>null == local.children && !local.asChild;
+    return createComponent(FloatingPanel.StageTrigger, mergeProps({
+        get ["aria-label"] () {
+            return local['aria-label'];
+        },
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "floating-panel-stage-trigger",
+        get ["class"] () {
+            return clsx(!local.asChild && FloatingPanel_module.controlButton, local.class);
+        },
+        get stage () {
+            return local.stage;
+        }
+    }, others, {
+        get children () {
+            return [
+                memo(()=>resolvedChildren()),
+                memo(()=>memo(()=>!!(shouldRenderDefaultIcon() && 'minimized' === local.stage))() ? createComponent(MinusIcon, {}) : null),
+                memo(()=>memo(()=>!!(shouldRenderDefaultIcon() && 'maximized' === local.stage))() ? createComponent(MaximizeIcon, {}) : null),
+                memo(()=>memo(()=>!!(shouldRenderDefaultIcon() && 'default' === local.stage))() ? createComponent(RestoreIcon, {}) : null)
+            ];
+        }
+    }));
+}
+function FloatingPanelCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(FloatingPanel.CloseTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "floating-panel-close-trigger",
+        get ["class"] () {
+            return clsx(!local.asChild && FloatingPanel_module.controlButton, local.class);
+        }
+    }, others));
+}
+function FloatingPanelCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(FloatingPanel.CloseTrigger, mergeProps({
+        asChild: (triggerProps)=>createComponent(CloseButton.Root, mergeProps(triggerProps, {
+                "data-slot": "floating-panel-close-icon",
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? DEFAULT_CLOSE_BUTTON_LABEL;
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return clsx(FloatingPanel_module.controlButton, local.class);
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            }))
+    }, others));
+}
+function FloatingPanelBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.Body, mergeProps({
+        "data-slot": "floating-panel-body",
+        get ["class"] () {
+            return clsx(FloatingPanel_module.body, local.class);
+        }
+    }, others));
+}
+function FloatingPanelFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const floatingPanel = useFloatingPanelContext();
+    return createComponent(ark.div, mergeProps(others, {
+        "data-slot": "floating-panel-footer",
+        get ["data-minimized"] () {
+            return floatingPanel().getContentProps()['data-minimized'];
+        },
+        get ["class"] () {
+            return clsx(FloatingPanel_module.footer, local.class);
+        }
+    }));
+}
+function FloatingPanelResizeTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.ResizeTrigger, mergeProps({
+        "data-slot": "floating-panel-resize-trigger",
+        get ["class"] () {
+            return clsx(FloatingPanel_module.resizeTrigger, local.class);
+        }
+    }, others));
+}
+function FloatingPanelResizeTriggerGroup(props) {
+    return createComponent(For, {
+        get each () {
+            return props.axes ?? resizeTriggerAxes;
+        },
+        children: (axis)=>createComponent(FloatingPanelResizeTrigger, {
+                axis: axis
+            })
+    });
+}
+function FloatingPanelDragIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps({
+            get ["class"] () {
+                return clsx(FloatingPanel_module.dragIndicator, local.class);
+            }
+        }, others), false, true);
+        insert(_el$, ()=>resolvedChildren() ?? createComponent(GripIcon, {}));
+        return _el$;
+    })();
+}
+const FloatingPanel_FloatingPanel = Object.assign(FloatingPanelRoot, {
+    Context: FloatingPanel.Context,
+    Root: FloatingPanelRoot,
+    RootProvider: FloatingPanelRootProvider,
+    Trigger: FloatingPanelTrigger,
+    Positioner: FloatingPanelPositioner,
+    Content: FloatingPanelContent,
+    DragTrigger: FloatingPanelDragTrigger,
+    Header: FloatingPanelHeader,
+    Title: FloatingPanelTitle,
+    Control: FloatingPanelControl,
+    StageTrigger: FloatingPanelStageTrigger,
+    CloseTrigger: FloatingPanelCloseTrigger,
+    CloseIcon: FloatingPanelCloseIcon,
+    Body: FloatingPanelBody,
+    Footer: FloatingPanelFooter,
+    ResizeTrigger: FloatingPanelResizeTrigger,
+    ResizeTriggerGroup: FloatingPanelResizeTriggerGroup,
+    DragIndicator: FloatingPanelDragIndicator,
+    useFloatingPanel: useFloatingPanel,
+    useFloatingPanelContext: useFloatingPanelContext
+});
+export { FloatingPanel_FloatingPanel as FloatingPanel, resizeTriggerAxes, useFloatingPanel, useFloatingPanelContext };

package/dist/components/floating-panel/FloatingPanel.jsx

@@ -0,0 +1,187 @@
+import { ark } from "@ark-ui/solid/factory";
+import { FloatingPanel, useFloatingPanel, useFloatingPanelContext } from "@ark-ui/solid/floating-panel";
+import { clsx } from "clsx";
+import { For, children, splitProps } from "solid-js";
+import { GripIcon, MaximizeIcon, MinusIcon, RestoreIcon } from "../../internal/icons/ui/Icons.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+import FloatingPanel_module from "./FloatingPanel.module.jsx";
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close panel';
+const resizeTriggerAxes = [
+    'n',
+    'e',
+    's',
+    'w',
+    'ne',
+    'se',
+    'sw',
+    'nw'
+];
+function FloatingPanelRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'closeOnEscape',
+        'lazyMount',
+        'persistRect',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <FloatingPanel.Root closeOnEscape={local.closeOnEscape ?? true} lazyMount={local.lazyMount ?? true} persistRect={local.persistRect ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </FloatingPanel.Root>
+    </OverlayPortalProvider>;
+}
+function FloatingPanelRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <FloatingPanel.RootProvider lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </FloatingPanel.RootProvider>
+    </OverlayPortalProvider>;
+}
+function FloatingPanelTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <FloatingPanel.Trigger asChild={local.asChild} data-slot="floating-panel-trigger" class={clsx(!local.asChild && FloatingPanel_module.trigger, local.class)} {...others}/>;
+}
+function FloatingPanelPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <FloatingPanel.Positioner data-slot="floating-panel-positioner" class={clsx(FloatingPanel_module.positioner, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function FloatingPanelContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.Content data-slot="floating-panel-content" class={clsx(FloatingPanel_module.content, local.class)} {...others}/>;
+}
+function FloatingPanelDragTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.DragTrigger data-slot="floating-panel-drag-trigger" class={clsx(FloatingPanel_module.dragTrigger, local.class)} {...others}/>;
+}
+function FloatingPanelHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.Header data-slot="floating-panel-header" class={clsx(FloatingPanel_module.header, local.class)} {...others}/>;
+}
+function FloatingPanelTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.Title data-slot="floating-panel-title" class={clsx(FloatingPanel_module.title, local.class)} {...others}/>;
+}
+function FloatingPanelControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.Control data-slot="floating-panel-control" class={clsx(FloatingPanel_module.control, local.class)} {...others}/>;
+}
+function FloatingPanelStageTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'asChild',
+        'children',
+        'class',
+        'stage'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const shouldRenderDefaultIcon = ()=>null == local.children && !local.asChild;
+    return <FloatingPanel.StageTrigger aria-label={local['aria-label']} asChild={local.asChild} data-slot="floating-panel-stage-trigger" class={clsx(!local.asChild && FloatingPanel_module.controlButton, local.class)} stage={local.stage} {...others}>
+      {resolvedChildren()}
+      {shouldRenderDefaultIcon() && 'minimized' === local.stage ? <MinusIcon/> : null}
+      {shouldRenderDefaultIcon() && 'maximized' === local.stage ? <MaximizeIcon/> : null}
+      {shouldRenderDefaultIcon() && 'default' === local.stage ? <RestoreIcon/> : null}
+    </FloatingPanel.StageTrigger>;
+}
+function FloatingPanelCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <FloatingPanel.CloseTrigger asChild={local.asChild} data-slot="floating-panel-close-trigger" class={clsx(!local.asChild && FloatingPanel_module.controlButton, local.class)} {...others}/>;
+}
+function FloatingPanelCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <FloatingPanel.CloseTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} data-slot="floating-panel-close-icon" aria-label={local['aria-label'] ?? DEFAULT_CLOSE_BUTTON_LABEL} aria-labelledby={local['aria-labelledby']} class={clsx(FloatingPanel_module.controlButton, local.class)}>
+          {resolvedChildren()}
+        </CloseButton.Root>} {...others}/>;
+}
+function FloatingPanelBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.Body data-slot="floating-panel-body" class={clsx(FloatingPanel_module.body, local.class)} {...others}/>;
+}
+function FloatingPanelFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const floatingPanel = useFloatingPanelContext();
+    return <ark.div {...others} data-slot="floating-panel-footer" data-minimized={floatingPanel().getContentProps()['data-minimized']} class={clsx(FloatingPanel_module.footer, local.class)}/>;
+}
+function FloatingPanelResizeTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FloatingPanel.ResizeTrigger data-slot="floating-panel-resize-trigger" class={clsx(FloatingPanel_module.resizeTrigger, local.class)} {...others}/>;
+}
+function FloatingPanelResizeTriggerGroup(props) {
+    return <For each={props.axes ?? resizeTriggerAxes}>
+      {(axis)=><FloatingPanelResizeTrigger axis={axis}/>}
+    </For>;
+}
+function FloatingPanelDragIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <span aria-hidden="true" data-slot="floating-panel-drag-indicator" class={clsx(FloatingPanel_module.dragIndicator, local.class)} {...others}>
+      {resolvedChildren() ?? <GripIcon/>}
+    </span>;
+}
+const FloatingPanel_FloatingPanel = Object.assign(FloatingPanelRoot, {
+    Context: FloatingPanel.Context,
+    Root: FloatingPanelRoot,
+    RootProvider: FloatingPanelRootProvider,
+    Trigger: FloatingPanelTrigger,
+    Positioner: FloatingPanelPositioner,
+    Content: FloatingPanelContent,
+    DragTrigger: FloatingPanelDragTrigger,
+    Header: FloatingPanelHeader,
+    Title: FloatingPanelTitle,
+    Control: FloatingPanelControl,
+    StageTrigger: FloatingPanelStageTrigger,
+    CloseTrigger: FloatingPanelCloseTrigger,
+    CloseIcon: FloatingPanelCloseIcon,
+    Body: FloatingPanelBody,
+    Footer: FloatingPanelFooter,
+    ResizeTrigger: FloatingPanelResizeTrigger,
+    ResizeTriggerGroup: FloatingPanelResizeTriggerGroup,
+    DragIndicator: FloatingPanelDragIndicator,
+    useFloatingPanel: useFloatingPanel,
+    useFloatingPanelContext: useFloatingPanelContext
+});
+export { FloatingPanel_FloatingPanel as FloatingPanel, resizeTriggerAxes, useFloatingPanel, useFloatingPanelContext };

package/dist/components/floating-panel/FloatingPanel.module.js

@@ -0,0 +1,20 @@
+import "./FloatingPanel_module.css";
+const FloatingPanel_module = {
+    trigger: "trigger-awuX4X",
+    positioner: "positioner-wbaVAV",
+    content: "content-E0MFTN",
+    "floating-panel-enter": "floating-panel-enter-rrMENh",
+    floatingPanelEnter: "floating-panel-enter-rrMENh",
+    "floating-panel-exit": "floating-panel-exit-OEiiHc",
+    floatingPanelExit: "floating-panel-exit-OEiiHc",
+    dragTrigger: "dragTrigger-RpAl6o",
+    header: "header-an6_mA",
+    title: "title-LhPus2",
+    control: "control-fFWykW",
+    controlButton: "controlButton-E61lzL",
+    dragIndicator: "dragIndicator-Yn6EB9",
+    body: "body-As5cBj",
+    footer: "footer-sMNhjQ",
+    resizeTrigger: "resizeTrigger-ciQngF"
+};
+export default FloatingPanel_module;

package/dist/components/floating-panel/FloatingPanel.module.jsx

@@ -0,0 +1,20 @@
+import "./FloatingPanel_module.css";
+const FloatingPanel_module = {
+    trigger: "trigger-awuX4X",
+    positioner: "positioner-wbaVAV",
+    content: "content-E0MFTN",
+    "floating-panel-enter": "floating-panel-enter-rrMENh",
+    floatingPanelEnter: "floating-panel-enter-rrMENh",
+    "floating-panel-exit": "floating-panel-exit-OEiiHc",
+    floatingPanelExit: "floating-panel-exit-OEiiHc",
+    dragTrigger: "dragTrigger-RpAl6o",
+    header: "header-an6_mA",
+    title: "title-LhPus2",
+    control: "control-fFWykW",
+    controlButton: "controlButton-E61lzL",
+    dragIndicator: "dragIndicator-Yn6EB9",
+    body: "body-As5cBj",
+    footer: "footer-sMNhjQ",
+    resizeTrigger: "resizeTrigger-ciQngF"
+};
+export default FloatingPanel_module;