@moduix/solid-tailwind 1.0.0

package/dist/components/split-button/SplitButton.js

@@ -0,0 +1,197 @@
+import { className, createComponent, effect, insert, memo, mergeProps, setAttribute, template, use } from "solid-js/web";
+import { cva } from "class-variance-authority";
+import { children, createContext, splitProps, useContext } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { ChevronDownIcon } from "../../internal/icons/ui/index.js";
+import { Button } from "../button/index.js";
+import { Menu } from "../menu/index.js";
+var _tmpl$ = /*#__PURE__*/ template("<div role=group data-scope=split-button data-part=root data-slot=split-button-root>");
+const splitButtonTriggerVariants = cva("relative min-w-0 -ms-px rounded-s-none before:pointer-events-none before:absolute before:inset-y-1.5 before:start-0 before:w-px before:bg-current before:opacity-[0.16] before:content-['']", {
+    variants: {
+        size: {
+            xs: 'px-2',
+            sm: 'px-2.5',
+            md: 'px-4',
+            lg: 'px-3.5',
+            xl: 'px-4'
+        },
+        variant: {
+            default: '',
+            outline: 'before:opacity-0',
+            secondary: '',
+            destructive: '',
+            'destructive-outline': 'before:opacity-0',
+            ghost: ''
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'default'
+    }
+});
+const SplitButtonContext = createContext();
+function useSplitButtonContext(componentName) {
+    const context = useContext(SplitButtonContext);
+    if (!context) throw new Error(`${componentName} must be used within SplitButton.Root.`);
+    return context;
+}
+function SplitButtonRoot(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class',
+        'onSelect',
+        'positioning',
+        'ref',
+        'size',
+        'variant'
+    ]);
+    return createComponent(SplitButtonContext.Provider, {
+        value: {
+            size: ()=>local.size ?? 'md',
+            variant: ()=>local.variant ?? 'default'
+        },
+        get children () {
+            return createComponent(Menu.Root, mergeProps({
+                get onSelect () {
+                    return local.onSelect;
+                },
+                get positioning () {
+                    return {
+                        placement: 'bottom-end',
+                        gutter: 4,
+                        ...local.positioning
+                    };
+                }
+            }, others, {
+                get children () {
+                    var _el$ = _tmpl$();
+                    var _ref$ = local.ref;
+                    "function" == typeof _ref$ ? use(_ref$, _el$) : local.ref = _el$;
+                    insert(_el$, ()=>local.children);
+                    effect((_p$)=>{
+                        var _v$ = local['aria-label'], _v$2 = local['aria-labelledby'], _v$3 = cn('inline-flex items-stretch', local.class);
+                        _v$ !== _p$.e && setAttribute(_el$, "aria-label", _p$.e = _v$);
+                        _v$2 !== _p$.t && setAttribute(_el$, "aria-labelledby", _p$.t = _v$2);
+                        _v$3 !== _p$.a && className(_el$, _p$.a = _v$3);
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0
+                    });
+                    return _el$;
+                }
+            }));
+        }
+    });
+}
+function SplitButtonAction(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'size',
+        'variant'
+    ]);
+    const context = useSplitButtonContext('SplitButton.Action');
+    return createComponent(Button, mergeProps(others, {
+        "data-slot": "split-button-action",
+        get size () {
+            return local.size ?? context.size();
+        },
+        get variant () {
+            return local.variant ?? context.variant();
+        },
+        get ["class"] () {
+            return cn('rounded-e-none', local.class);
+        }
+    }));
+}
+function SplitButtonTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'size',
+        'variant',
+        'aria-label'
+    ]);
+    const context = useSplitButtonContext('SplitButton.Trigger');
+    const resolvedChildren = children(()=>local.children);
+    const resolvedSize = ()=>local.size ?? context.size();
+    const resolvedVariant = ()=>local.variant ?? context.variant();
+    const isIconOnly = ()=>null == resolvedChildren();
+    const ariaLabel = ()=>isIconOnly() ? local['aria-label'] ?? 'More actions' : local['aria-label'];
+    const triggerClass = ()=>cn(splitButtonTriggerVariants({
+            size: resolvedSize(),
+            variant: resolvedVariant()
+        }), local.class);
+    return createComponent(Menu.Trigger, mergeProps(others, {
+        asChild: (triggerProps)=>createComponent(Button, mergeProps(triggerProps, {
+                "data-slot": "split-button-trigger",
+                get size () {
+                    return resolvedSize();
+                },
+                get variant () {
+                    return resolvedVariant();
+                },
+                get ["class"] () {
+                    return triggerClass();
+                },
+                get ["aria-label"] () {
+                    return ariaLabel();
+                },
+                get children () {
+                    return resolvedChildren() ?? createComponent(ChevronDownIcon, {});
+                }
+            })),
+        "data-slot": "split-button-trigger",
+        get ["aria-label"] () {
+            return ariaLabel();
+        },
+        get ["class"] () {
+            return triggerClass();
+        }
+    }));
+}
+function SplitButtonPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Menu.Positioner, mergeProps(others, {
+        "data-slot": "split-button-positioner",
+        get ["class"] () {
+            return local.class;
+        }
+    }));
+}
+function SplitButtonContent(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Menu.Content, mergeProps(others, {
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "split-button-content",
+        get ["class"] () {
+            return local.class;
+        },
+        get children () {
+            return memo(()=>!!local.asChild)() ? local.children : createComponent(Menu.Viewport, {
+                get children () {
+                    return local.children;
+                }
+            });
+        }
+    }));
+}
+const SplitButton = Object.assign(SplitButtonRoot, {
+    Root: SplitButtonRoot,
+    Action: SplitButtonAction,
+    Trigger: SplitButtonTrigger,
+    Positioner: SplitButtonPositioner,
+    Content: SplitButtonContent
+});
+export { SplitButton };

package/dist/components/split-button/SplitButton.jsx

@@ -0,0 +1,117 @@
+import { cva } from "class-variance-authority";
+import { children, createContext, splitProps, useContext } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { ChevronDownIcon } from "../../internal/icons/ui/index.jsx";
+import { Button } from "../button/index.jsx";
+import { Menu } from "../menu/index.jsx";
+const splitButtonTriggerVariants = cva("relative min-w-0 -ms-px rounded-s-none before:pointer-events-none before:absolute before:inset-y-1.5 before:start-0 before:w-px before:bg-current before:opacity-[0.16] before:content-['']", {
+    variants: {
+        size: {
+            xs: 'px-2',
+            sm: 'px-2.5',
+            md: 'px-4',
+            lg: 'px-3.5',
+            xl: 'px-4'
+        },
+        variant: {
+            default: '',
+            outline: 'before:opacity-0',
+            secondary: '',
+            destructive: '',
+            'destructive-outline': 'before:opacity-0',
+            ghost: ''
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'default'
+    }
+});
+const SplitButtonContext = createContext();
+function useSplitButtonContext(componentName) {
+    const context = useContext(SplitButtonContext);
+    if (!context) throw new Error(`${componentName} must be used within SplitButton.Root.`);
+    return context;
+}
+function SplitButtonRoot(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class',
+        'onSelect',
+        'positioning',
+        'ref',
+        'size',
+        'variant'
+    ]);
+    return <SplitButtonContext.Provider value={{
+        size: ()=>local.size ?? 'md',
+        variant: ()=>local.variant ?? 'default'
+    }}>
+      <Menu.Root onSelect={local.onSelect} positioning={{
+        placement: 'bottom-end',
+        gutter: 4,
+        ...local.positioning
+    }} {...others}>
+        <div role="group" aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-scope="split-button" data-part="root" data-slot="split-button-root" class={cn('inline-flex items-stretch', local.class)} ref={local.ref}>
+          {local.children}
+        </div>
+      </Menu.Root>
+    </SplitButtonContext.Provider>;
+}
+function SplitButtonAction(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'size',
+        'variant'
+    ]);
+    const context = useSplitButtonContext('SplitButton.Action');
+    return <Button {...others} data-slot="split-button-action" size={local.size ?? context.size()} variant={local.variant ?? context.variant()} class={cn('rounded-e-none', local.class)}/>;
+}
+function SplitButtonTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'size',
+        'variant',
+        'aria-label'
+    ]);
+    const context = useSplitButtonContext('SplitButton.Trigger');
+    const resolvedChildren = children(()=>local.children);
+    const resolvedSize = ()=>local.size ?? context.size();
+    const resolvedVariant = ()=>local.variant ?? context.variant();
+    const isIconOnly = ()=>null == resolvedChildren();
+    const ariaLabel = ()=>isIconOnly() ? local['aria-label'] ?? 'More actions' : local['aria-label'];
+    const triggerClass = ()=>cn(splitButtonTriggerVariants({
+            size: resolvedSize(),
+            variant: resolvedVariant()
+        }), local.class);
+    return <Menu.Trigger {...others} asChild={(triggerProps)=><Button {...triggerProps()} data-slot="split-button-trigger" size={resolvedSize()} variant={resolvedVariant()} class={triggerClass()} aria-label={ariaLabel()}>
+          {resolvedChildren() ?? <ChevronDownIcon/>}
+        </Button>} data-slot="split-button-trigger" aria-label={ariaLabel()} class={triggerClass()}/>;
+}
+function SplitButtonPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Menu.Positioner {...others} data-slot="split-button-positioner" class={local.class}/>;
+}
+function SplitButtonContent(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <Menu.Content {...others} asChild={local.asChild} data-slot="split-button-content" class={local.class}>
+      {local.asChild ? local.children : <Menu.Viewport>{local.children}</Menu.Viewport>}
+    </Menu.Content>;
+}
+const SplitButton = Object.assign(SplitButtonRoot, {
+    Root: SplitButtonRoot,
+    Action: SplitButtonAction,
+    Trigger: SplitButtonTrigger,
+    Positioner: SplitButtonPositioner,
+    Content: SplitButtonContent
+});
+export { SplitButton };

package/dist/components/split-button/index.d.ts

@@ -0,0 +1 @@
+export { SplitButton } from './SplitButton.js';

package/dist/components/split-button/index.js

@@ -0,0 +1 @@
+export { SplitButton } from "./SplitButton.js";

package/dist/components/split-button/index.jsx

@@ -0,0 +1 @@
+export { SplitButton } from "./SplitButton.jsx";

package/dist/components/splitter/Splitter.d.ts

@@ -0,0 +1,18 @@
+import type { SplitterPanelData } from '@ark-ui/solid/splitter';
+import { createSplitterRegistry, Splitter as SplitterPrimitive, useSplitter, useSplitterContext } from '@ark-ui/solid/splitter';
+import type { ComponentProps, JSX } from 'solid-js';
+declare function SplitterRoot(props: ComponentProps<typeof SplitterPrimitive.Root>): JSX.Element;
+declare function SplitterRootProvider(props: ComponentProps<typeof SplitterPrimitive.RootProvider>): JSX.Element;
+declare function SplitterPanel(props: ComponentProps<typeof SplitterPrimitive.Panel>): JSX.Element;
+declare function SplitterResizeTriggerIndicator(props: ComponentProps<typeof SplitterPrimitive.ResizeTriggerIndicator>): JSX.Element;
+declare function SplitterResizeTrigger(props: ComponentProps<typeof SplitterPrimitive.ResizeTrigger>): JSX.Element;
+type SplitterComponent = typeof SplitterRoot & {
+    Root: typeof SplitterRoot;
+    RootProvider: typeof SplitterRootProvider;
+    Context: typeof SplitterPrimitive.Context;
+    Panel: typeof SplitterPanel;
+    ResizeTrigger: typeof SplitterResizeTrigger;
+    ResizeTriggerIndicator: typeof SplitterResizeTriggerIndicator;
+};
+declare const Splitter: SplitterComponent;
+export { createSplitterRegistry, Splitter, type SplitterPanelData, useSplitter, useSplitterContext, };

package/dist/components/splitter/Splitter.js

@@ -0,0 +1,101 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { Splitter, createSplitterRegistry, useSplitter, useSplitterContext } from "@ark-ui/solid/splitter";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function getRootStyle(style) {
+    if ('string' == typeof style) return `width:;height:;${style}`;
+    return {
+        width: void 0,
+        height: void 0,
+        ...style
+    };
+}
+function SplitterRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'style'
+    ]);
+    return createComponent(Splitter.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "splitter-root",
+        get ["class"] () {
+            return cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', local.class);
+        },
+        get style () {
+            return getRootStyle(local.style);
+        }
+    }, others));
+}
+function SplitterRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'style'
+    ]);
+    return createComponent(Splitter.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "splitter-root-provider",
+        get ["class"] () {
+            return cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', local.class);
+        },
+        get style () {
+            return getRootStyle(local.style);
+        }
+    }, others));
+}
+function SplitterPanel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Splitter.Panel, mergeProps({
+        "data-slot": "splitter-panel",
+        get ["class"] () {
+            return cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', local.class);
+        }
+    }, others));
+}
+function SplitterResizeTriggerIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Splitter.ResizeTriggerIndicator, mergeProps({
+        "data-slot": "splitter-resize-trigger-indicator",
+        get ["class"] () {
+            return cn('pointer-events-none absolute start-1/2 top-1/2 z-2 box-border h-control-xs w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-background shadow-sm transition-[background-color,border-color,box-shadow,transform] duration-200 ease-in-out group-hover/trigger:border-muted-foreground/40 group-hover/trigger:shadow-md group-focus-visible/trigger:outline-2 group-focus-visible/trigger:outline-offset-1 group-focus-visible/trigger:outline-ring data-disabled:invisible data-dragging:scale-[1.08] data-dragging:bg-background data-dragging:shadow-md data-[orientation=vertical]:h-1.5 data-[orientation=vertical]:w-control-xs', local.class);
+        }
+    }, others));
+}
+function SplitterResizeTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Splitter.ResizeTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "splitter-resize-trigger",
+        get ["class"] () {
+            return cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", local.class);
+        }
+    }, others, {
+        get children () {
+            return memo(()=>!!(void 0 === local.children && !local.asChild))() ? createComponent(SplitterResizeTriggerIndicator, {}) : local.children;
+        }
+    }));
+}
+const Splitter_Splitter = Object.assign(SplitterRoot, {
+    Root: SplitterRoot,
+    RootProvider: SplitterRootProvider,
+    Context: Splitter.Context,
+    Panel: SplitterPanel,
+    ResizeTrigger: SplitterResizeTrigger,
+    ResizeTriggerIndicator: SplitterResizeTriggerIndicator
+});
+export { Splitter_Splitter as Splitter, createSplitterRegistry, useSplitter, useSplitterContext };

package/dist/components/splitter/Splitter.jsx

@@ -0,0 +1,58 @@
+import { Splitter, createSplitterRegistry, useSplitter, useSplitterContext } from "@ark-ui/solid/splitter";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function getRootStyle(style) {
+    if ('string' == typeof style) return `width:;height:;${style}`;
+    return {
+        width: void 0,
+        height: void 0,
+        ...style
+    };
+}
+function SplitterRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'style'
+    ]);
+    return <Splitter.Root asChild={local.asChild} data-slot="splitter-root" class={cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', local.class)} style={getRootStyle(local.style)} {...others}/>;
+}
+function SplitterRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'style'
+    ]);
+    return <Splitter.RootProvider asChild={local.asChild} data-slot="splitter-root-provider" class={cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', local.class)} style={getRootStyle(local.style)} {...others}/>;
+}
+function SplitterPanel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Splitter.Panel data-slot="splitter-panel" class={cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', local.class)} {...others}/>;
+}
+function SplitterResizeTriggerIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Splitter.ResizeTriggerIndicator data-slot="splitter-resize-trigger-indicator" class={cn('pointer-events-none absolute start-1/2 top-1/2 z-2 box-border h-control-xs w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-background shadow-sm transition-[background-color,border-color,box-shadow,transform] duration-200 ease-in-out group-hover/trigger:border-muted-foreground/40 group-hover/trigger:shadow-md group-focus-visible/trigger:outline-2 group-focus-visible/trigger:outline-offset-1 group-focus-visible/trigger:outline-ring data-disabled:invisible data-dragging:scale-[1.08] data-dragging:bg-background data-dragging:shadow-md data-[orientation=vertical]:h-1.5 data-[orientation=vertical]:w-control-xs', local.class)} {...others}/>;
+}
+function SplitterResizeTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <Splitter.ResizeTrigger asChild={local.asChild} data-slot="splitter-resize-trigger" class={cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", local.class)} {...others}>
+      {void 0 === local.children && !local.asChild ? <SplitterResizeTriggerIndicator/> : local.children}
+    </Splitter.ResizeTrigger>;
+}
+const Splitter_Splitter = Object.assign(SplitterRoot, {
+    Root: SplitterRoot,
+    RootProvider: SplitterRootProvider,
+    Context: Splitter.Context,
+    Panel: SplitterPanel,
+    ResizeTrigger: SplitterResizeTrigger,
+    ResizeTriggerIndicator: SplitterResizeTriggerIndicator
+});
+export { Splitter_Splitter as Splitter, createSplitterRegistry, useSplitter, useSplitterContext };

package/dist/components/splitter/index.d.ts

@@ -0,0 +1 @@
+export { createSplitterRegistry, Splitter, type SplitterPanelData, useSplitter, useSplitterContext, } from './Splitter.js';

package/dist/components/splitter/index.js

@@ -0,0 +1 @@
+export { Splitter, createSplitterRegistry, useSplitter, useSplitterContext } from "./Splitter.js";

package/dist/components/splitter/index.jsx

@@ -0,0 +1 @@
+export { Splitter, createSplitterRegistry, useSplitter, useSplitterContext } from "./Splitter.jsx";

package/dist/components/stack/Stack.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { JSX } from 'solid-js';
+type StackDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type StackRootProps = HTMLArkProps<'div'> & {
+    direction?: StackDirection | {
+        mobile?: StackDirection;
+        desktop?: StackDirection;
+    };
+    gap?: number | string;
+    align?: JSX.CSSProperties['align-items'];
+    justify?: JSX.CSSProperties['justify-content'];
+    wrap?: JSX.CSSProperties['flex-wrap'];
+    fill?: boolean;
+};
+declare function StackRoot(props: StackRootProps): JSX.Element;
+declare const Stack: typeof StackRoot & {
+    Root: typeof StackRoot;
+};
+export { Stack };

package/dist/components/stack/Stack.js

@@ -0,0 +1,83 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const stackVariants = cva('flex', {
+    variants: {
+        mobileDirection: {
+            row: 'flex-row',
+            'row-reverse': 'flex-row-reverse',
+            column: 'flex-col',
+            'column-reverse': 'flex-col-reverse'
+        },
+        desktopDirection: {
+            row: 'sm:flex-row',
+            'row-reverse': 'sm:flex-row-reverse',
+            column: 'sm:flex-col',
+            'column-reverse': 'sm:flex-col-reverse'
+        },
+        fill: {
+            true: 'flex-1',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        mobileDirection: 'column'
+    }
+});
+const toCssLength = (value)=>'number' == typeof value ? `${value}px` : value;
+function StackRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'direction',
+        'gap',
+        'align',
+        'justify',
+        'wrap',
+        'fill',
+        'style'
+    ]);
+    const mobileDirection = ()=>'string' == typeof local.direction ? local.direction : local.direction?.mobile ?? local.direction?.desktop;
+    const desktopDirection = ()=>'string' == typeof local.direction ? local.direction : local.direction?.desktop ?? local.direction?.mobile;
+    const stackStyle = ()=>{
+        const generatedStyle = {
+            gap: toCssLength(local.gap),
+            'align-items': local.align,
+            'justify-content': local.justify,
+            'flex-wrap': local.wrap
+        };
+        if ('string' == typeof local.style) {
+            const generatedStyleText = Object.entries(generatedStyle).filter(([, value])=>void 0 !== value).map(([property, value])=>`${property}:${value}`).join(';');
+            return `${generatedStyleText}${generatedStyleText && local.style ? ';' : ''}${local.style}`;
+        }
+        return {
+            ...generatedStyle,
+            ...local.style
+        };
+    };
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "stack",
+        "data-part": "root",
+        "data-slot": "stack-root",
+        get ["class"] () {
+            return cn(stackVariants({
+                mobileDirection: mobileDirection(),
+                desktopDirection: desktopDirection(),
+                fill: local.fill
+            }), local.class);
+        },
+        get style () {
+            return stackStyle();
+        }
+    }));
+}
+const Stack = Object.assign(StackRoot, {
+    Root: StackRoot
+});
+export { Stack };