@moduix/solid-tailwind 1.0.0

package/dist/components/clipboard/Clipboard.js

@@ -0,0 +1,143 @@
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+import { Clipboard, useClipboard, useClipboardContext } from "@ark-ui/solid/clipboard";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, CopyIcon } from "../../internal/icons/ui/Icons.js";
+var _tmpl$ = /*#__PURE__*/ template('<span aria-hidden=true data-slot=clipboard-indicator-copied-icon class="inline-flex shrink-0 items-center justify-center">'), _tmpl$2 = /*#__PURE__*/ template('<span aria-hidden=true data-slot=clipboard-indicator-idle-icon class="inline-flex shrink-0 items-center justify-center">');
+function ClipboardRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.Root, mergeProps({
+        "data-slot": "clipboard-root",
+        get ["class"] () {
+            return cn('flex w-full flex-col gap-1.5 text-foreground', local.class);
+        }
+    }, others));
+}
+function ClipboardRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.RootProvider, mergeProps({
+        "data-slot": "clipboard-root-provider",
+        get ["class"] () {
+            return cn('flex w-full flex-col gap-1.5 text-foreground', local.class);
+        }
+    }, others));
+}
+function ClipboardLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.Label, mergeProps({
+        "data-slot": "clipboard-label",
+        get ["class"] () {
+            return cn('text-sm leading-5 font-medium', local.class);
+        }
+    }, others));
+}
+function ClipboardControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.Control, mergeProps({
+        "data-slot": "clipboard-control",
+        get ["class"] () {
+            return cn('flex w-full items-center gap-2', local.class);
+        }
+    }, others));
+}
+function ClipboardInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.Input, mergeProps({
+        "data-slot": "clipboard-input",
+        get ["class"] () {
+            return cn('box-border min-h-control-md w-full min-w-0 rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', local.class);
+        }
+    }, others));
+}
+function ClipboardTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.Trigger, mergeProps({
+        "data-slot": "clipboard-trigger",
+        get ["class"] () {
+            return cn('box-border inline-flex min-h-control-md shrink-0 cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', local.class);
+        }
+    }, others));
+}
+function ClipboardIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'copied'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Clipboard.Indicator, mergeProps({
+        "data-slot": "clipboard-indicator",
+        get ["class"] () {
+            return cn('inline-flex shrink-0 items-center justify-center', local.class);
+        },
+        get copied () {
+            return local.copied ?? (()=>{
+                var _el$ = _tmpl$();
+                insert(_el$, createComponent(CheckIcon, {}));
+                return _el$;
+            })();
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (()=>{
+                var _el$2 = _tmpl$2();
+                insert(_el$2, createComponent(CopyIcon, {}));
+                return _el$2;
+            })();
+        }
+    }));
+}
+function ClipboardValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.ValueText, mergeProps({
+        "data-slot": "clipboard-value-text",
+        get ["class"] () {
+            return cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
+        }
+    }, others));
+}
+function ClipboardCopyText(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'copied'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ClipboardIndicator, mergeProps({
+        "data-slot": "clipboard-copy-text",
+        get copied () {
+            return memo(()=>void 0 === local.copied)() ? 'Copied' : local.copied;
+        }
+    }, others, {
+        get children () {
+            return memo(()=>void 0 === resolvedChildren())() ? 'Copy' : resolvedChildren();
+        }
+    }));
+}
+const Clipboard_Clipboard = Object.assign(ClipboardRoot, {
+    Root: ClipboardRoot,
+    RootProvider: ClipboardRootProvider,
+    Context: Clipboard.Context,
+    Label: ClipboardLabel,
+    Control: ClipboardControl,
+    Input: ClipboardInput,
+    Trigger: ClipboardTrigger,
+    Indicator: ClipboardIndicator,
+    CopyText: ClipboardCopyText,
+    ValueText: ClipboardValueText,
+    useClipboard: useClipboard
+});
+export { Clipboard_Clipboard as Clipboard, useClipboard, useClipboardContext };

package/dist/components/clipboard/Clipboard.jsx

@@ -0,0 +1,85 @@
+import { Clipboard, useClipboard, useClipboardContext } from "@ark-ui/solid/clipboard";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CheckIcon, CopyIcon } from "../../internal/icons/ui/Icons.jsx";
+function ClipboardRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.Root data-slot="clipboard-root" class={cn('flex w-full flex-col gap-1.5 text-foreground', local.class)} {...others}/>;
+}
+function ClipboardRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.RootProvider data-slot="clipboard-root-provider" class={cn('flex w-full flex-col gap-1.5 text-foreground', local.class)} {...others}/>;
+}
+function ClipboardLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.Label data-slot="clipboard-label" class={cn('text-sm leading-5 font-medium', local.class)} {...others}/>;
+}
+function ClipboardControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.Control data-slot="clipboard-control" class={cn('flex w-full items-center gap-2', local.class)} {...others}/>;
+}
+function ClipboardInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.Input data-slot="clipboard-input" class={cn('box-border min-h-control-md w-full min-w-0 rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', local.class)} {...others}/>;
+}
+function ClipboardTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.Trigger data-slot="clipboard-trigger" class={cn('box-border inline-flex min-h-control-md shrink-0 cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', local.class)} {...others}/>;
+}
+function ClipboardIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'copied'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Clipboard.Indicator data-slot="clipboard-indicator" class={cn('inline-flex shrink-0 items-center justify-center', local.class)} copied={local.copied ?? <span aria-hidden="true" data-slot="clipboard-indicator-copied-icon" class="inline-flex shrink-0 items-center justify-center">
+            <CheckIcon/>
+          </span>} {...others}>
+      {resolvedChildren() ?? <span aria-hidden="true" data-slot="clipboard-indicator-idle-icon" class="inline-flex shrink-0 items-center justify-center">
+          <CopyIcon/>
+        </span>}
+    </Clipboard.Indicator>;
+}
+function ClipboardValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.ValueText data-slot="clipboard-value-text" class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+}
+function ClipboardCopyText(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'copied'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ClipboardIndicator data-slot="clipboard-copy-text" copied={void 0 === local.copied ? 'Copied' : local.copied} {...others}>
+      {void 0 === resolvedChildren() ? 'Copy' : resolvedChildren()}
+    </ClipboardIndicator>;
+}
+const Clipboard_Clipboard = Object.assign(ClipboardRoot, {
+    Root: ClipboardRoot,
+    RootProvider: ClipboardRootProvider,
+    Context: Clipboard.Context,
+    Label: ClipboardLabel,
+    Control: ClipboardControl,
+    Input: ClipboardInput,
+    Trigger: ClipboardTrigger,
+    Indicator: ClipboardIndicator,
+    CopyText: ClipboardCopyText,
+    ValueText: ClipboardValueText,
+    useClipboard: useClipboard
+});
+export { Clipboard_Clipboard as Clipboard, useClipboard, useClipboardContext };

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

@@ -0,0 +1 @@
+export { Clipboard, useClipboard, useClipboardContext } from './Clipboard.js';

package/dist/components/clipboard/index.js

@@ -0,0 +1 @@
+export { Clipboard, useClipboard, useClipboardContext } from "./Clipboard.js";

package/dist/components/clipboard/index.jsx

@@ -0,0 +1 @@
+export { Clipboard, useClipboard, useClipboardContext } from "./Clipboard.jsx";

package/dist/components/close-button/CloseButton.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { JSX } from 'solid-js';
+type CloseButtonRootProps = HTMLArkProps<'button'> & {
+    'data-disabled'?: string;
+    'data-part'?: string;
+    'data-scope'?: string;
+    'data-slot'?: string;
+    onClickCapture?: (event: MouseEvent) => void;
+};
+declare function CloseButtonRoot(props: CloseButtonRootProps): JSX.Element;
+declare const CloseButton: typeof CloseButtonRoot & {
+    Root: typeof CloseButtonRoot;
+};
+export { CloseButton };

package/dist/components/close-button/CloseButton.js

@@ -0,0 +1,89 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CloseIcon } from "../../internal/icons/ui/Icons.js";
+const ArkButton = ark.button;
+function CloseButtonRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'aria-disabled',
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class',
+        'data-disabled',
+        'data-part',
+        'data-scope',
+        'data-slot',
+        'disabled',
+        'onClick',
+        'onClickCapture',
+        'type'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const isDisabled = ()=>local.disabled || true === local['aria-disabled'] || 'true' === local['aria-disabled'] || void 0 !== local['data-disabled'];
+    const handleClickCapture = (event)=>{
+        if (isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        local.onClickCapture?.(event);
+    };
+    const handleClick = (event)=>{
+        if (isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        local.onClick?.(event);
+    };
+    return createComponent(ArkButton, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        get type () {
+            return memo(()=>!!local.asChild)() ? local.type : local.type ?? 'button';
+        },
+        get disabled () {
+            return memo(()=>!!local.asChild)() ? void 0 : local.disabled;
+        },
+        get ["data-scope"] () {
+            return local['data-scope'] ?? 'close-button';
+        },
+        get ["data-part"] () {
+            return local['data-part'] ?? 'root';
+        },
+        get ["data-slot"] () {
+            return local['data-slot'] ?? 'close-button-root';
+        },
+        get ["data-disabled"] () {
+            return local['data-disabled'] ?? (isDisabled() ? '' : void 0);
+        },
+        get ["class"] () {
+            return cn("m-0 box-border inline-flex size-7 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 [&:active:not([data-disabled])]:opacity-[0.94] [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-3 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-foreground", local.class);
+        },
+        get ["aria-disabled"] () {
+            return memo(()=>!!(local.asChild && local.disabled))() ? true : local['aria-disabled'];
+        },
+        get ["aria-label"] () {
+            return local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Close' : void 0);
+        },
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        "oncapture:click": handleClickCapture,
+        onClick: handleClick,
+        get children () {
+            return memo(()=>!!local.asChild)() ? void 0 : resolvedChildren() || createComponent(CloseIcon, {
+                class: "size-3 shrink-0"
+            });
+        }
+    }));
+}
+const CloseButton = Object.assign(CloseButtonRoot, {
+    Root: CloseButtonRoot
+});
+export { CloseButton };

package/dist/components/close-button/CloseButton.jsx

@@ -0,0 +1,48 @@
+import { ark } from "@ark-ui/solid/factory";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CloseIcon } from "../../internal/icons/ui/Icons.jsx";
+const ArkButton = ark.button;
+function CloseButtonRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'aria-disabled',
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class',
+        'data-disabled',
+        'data-part',
+        'data-scope',
+        'data-slot',
+        'disabled',
+        'onClick',
+        'onClickCapture',
+        'type'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const isDisabled = ()=>local.disabled || true === local['aria-disabled'] || 'true' === local['aria-disabled'] || void 0 !== local['data-disabled'];
+    const handleClickCapture = (event)=>{
+        if (isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        local.onClickCapture?.(event);
+    };
+    const handleClick = (event)=>{
+        if (isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        local.onClick?.(event);
+    };
+    return <ArkButton asChild={local.asChild} {...others} type={local.asChild ? local.type : local.type ?? 'button'} disabled={local.asChild ? void 0 : local.disabled} data-scope={local['data-scope'] ?? 'close-button'} data-part={local['data-part'] ?? 'root'} data-slot={local['data-slot'] ?? 'close-button-root'} data-disabled={local['data-disabled'] ?? (isDisabled() ? '' : void 0)} class={cn("m-0 box-border inline-flex size-7 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 [&:active:not([data-disabled])]:opacity-[0.94] [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-3 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-foreground", local.class)} aria-disabled={local.asChild && local.disabled ? true : local['aria-disabled']} aria-label={local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Close' : void 0)} aria-labelledby={local['aria-labelledby']} oncapture:click={handleClickCapture} onClick={handleClick}>
+      {local.asChild ? void 0 : resolvedChildren() || <CloseIcon class="size-3 shrink-0"/>}
+    </ArkButton>;
+}
+const CloseButton = Object.assign(CloseButtonRoot, {
+    Root: CloseButtonRoot
+});
+export { CloseButton };

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

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

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

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

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

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

package/dist/components/collapsible/Collapsible.d.ts

@@ -0,0 +1,19 @@
+import { Collapsible as CollapsiblePrimitive, useCollapsible, useCollapsibleContext } from '@ark-ui/solid/collapsible';
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { ComponentProps } from 'solid-js';
+declare function CollapsibleRoot(props: ComponentProps<typeof CollapsiblePrimitive.Root>): import("solid-js").JSX.Element;
+declare function CollapsibleRootProvider(props: ComponentProps<typeof CollapsiblePrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function CollapsibleTrigger(props: ComponentProps<typeof CollapsiblePrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function CollapsibleIndicator(props: ComponentProps<typeof CollapsiblePrimitive.Indicator>): import("solid-js").JSX.Element;
+declare function CollapsibleContent(props: ComponentProps<typeof CollapsiblePrimitive.Content>): import("solid-js").JSX.Element;
+declare function CollapsibleBody(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare const Collapsible: typeof CollapsibleRoot & {
+    Root: typeof CollapsibleRoot;
+    RootProvider: typeof CollapsibleRootProvider;
+    Context: (props: CollapsiblePrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Trigger: typeof CollapsibleTrigger;
+    Indicator: typeof CollapsibleIndicator;
+    Content: typeof CollapsibleContent;
+    Body: typeof CollapsibleBody;
+};
+export { Collapsible, useCollapsible, useCollapsibleContext };

package/dist/components/collapsible/Collapsible.js

@@ -0,0 +1,92 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Collapsible, useCollapsible, useCollapsibleContext } from "@ark-ui/solid/collapsible";
+import { ark } from "@ark-ui/solid/factory";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { ChevronDownIcon } from "../../internal/icons/ui/Icons.js";
+function CollapsibleRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Collapsible.Root, mergeProps({
+        "data-slot": "collapsible-root",
+        get ["class"] () {
+            return cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', local.class);
+        }
+    }, others));
+}
+function CollapsibleRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Collapsible.RootProvider, mergeProps({
+        "data-slot": "collapsible-root-provider",
+        get ["class"] () {
+            return cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', local.class);
+        }
+    }, others));
+}
+function CollapsibleTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Collapsible.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "collapsible-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'box-border flex w-full cursor-pointer items-center justify-between gap-2 bg-transparent px-0 py-1 text-start text-sm outline-0 transition-colors duration-200 select-none focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', local.class);
+        }
+    }, others));
+}
+function CollapsibleIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Collapsible.Indicator, mergeProps({
+        "data-slot": "collapsible-indicator",
+        get ["class"] () {
+            return cn('inline-flex size-3 shrink-0 items-center justify-center transition-transform duration-200 data-disabled:opacity-50 data-[state=open]:rotate-180 motion-reduce:transition-none [&_svg]:size-full', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronDownIcon, {});
+        }
+    }));
+}
+function CollapsibleContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Collapsible.Content, mergeProps({
+        "data-slot": "collapsible-content",
+        get ["class"] () {
+            return cn('box-border overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-moduix-collapsible-closed data-[has-collapsed-size]:data-[state=closed]:animate-moduix-collapsible-closed-partial data-[state=open]:animate-moduix-collapsible-open data-[has-collapsed-size]:data-[state=open]:animate-moduix-collapsible-open-partial motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class);
+        }
+    }, others));
+}
+function CollapsibleBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "collapsible-body",
+        get ["class"] () {
+            return cn('grid min-w-0 gap-2', local.class);
+        }
+    }, others));
+}
+const Collapsible_Collapsible = Object.assign(CollapsibleRoot, {
+    Root: CollapsibleRoot,
+    RootProvider: CollapsibleRootProvider,
+    Context: Collapsible.Context,
+    Trigger: CollapsibleTrigger,
+    Indicator: CollapsibleIndicator,
+    Content: CollapsibleContent,
+    Body: CollapsibleBody
+});
+export { Collapsible_Collapsible as Collapsible, useCollapsible, useCollapsibleContext };

package/dist/components/collapsible/Collapsible.jsx

@@ -0,0 +1,56 @@
+import { Collapsible, useCollapsible, useCollapsibleContext } from "@ark-ui/solid/collapsible";
+import { ark } from "@ark-ui/solid/factory";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { ChevronDownIcon } from "../../internal/icons/ui/Icons.jsx";
+function CollapsibleRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Collapsible.Root data-slot="collapsible-root" class={cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', local.class)} {...others}/>;
+}
+function CollapsibleRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Collapsible.RootProvider data-slot="collapsible-root-provider" class={cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', local.class)} {...others}/>;
+}
+function CollapsibleTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Collapsible.Trigger asChild={local.asChild} data-slot="collapsible-trigger" class={cn(!local.asChild && 'box-border flex w-full cursor-pointer items-center justify-between gap-2 bg-transparent px-0 py-1 text-start text-sm outline-0 transition-colors duration-200 select-none focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function CollapsibleIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Collapsible.Indicator data-slot="collapsible-indicator" class={cn('inline-flex size-3 shrink-0 items-center justify-center transition-transform duration-200 data-disabled:opacity-50 data-[state=open]:rotate-180 motion-reduce:transition-none [&_svg]:size-full', local.class)} {...others}>
+      {resolvedChildren() ?? <ChevronDownIcon/>}
+    </Collapsible.Indicator>;
+}
+function CollapsibleContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Collapsible.Content data-slot="collapsible-content" class={cn('box-border overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-moduix-collapsible-closed data-[has-collapsed-size]:data-[state=closed]:animate-moduix-collapsible-closed-partial data-[state=open]:animate-moduix-collapsible-open data-[has-collapsed-size]:data-[state=open]:animate-moduix-collapsible-open-partial motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others}/>;
+}
+function CollapsibleBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="collapsible-body" class={cn('grid min-w-0 gap-2', local.class)} {...others}/>;
+}
+const Collapsible_Collapsible = Object.assign(CollapsibleRoot, {
+    Root: CollapsibleRoot,
+    RootProvider: CollapsibleRootProvider,
+    Context: Collapsible.Context,
+    Trigger: CollapsibleTrigger,
+    Indicator: CollapsibleIndicator,
+    Content: CollapsibleContent,
+    Body: CollapsibleBody
+});
+export { Collapsible_Collapsible as Collapsible, useCollapsible, useCollapsibleContext };

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

@@ -0,0 +1 @@
+export { Collapsible, useCollapsible, useCollapsibleContext } from './Collapsible.js';

package/dist/components/collapsible/index.js

@@ -0,0 +1 @@
+export { Collapsible, useCollapsible, useCollapsibleContext } from "./Collapsible.js";

package/dist/components/collapsible/index.jsx

@@ -0,0 +1 @@
+export { Collapsible, useCollapsible, useCollapsibleContext } from "./Collapsible.jsx";

package/dist/components/color-picker/ColorPicker.d.ts

@@ -0,0 +1,66 @@
+import { ColorPicker as ColorPickerPrimitive, parseColor, useColorPicker, useColorPickerContext } from '@ark-ui/solid/color-picker';
+import { type ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type ColorPickerRootProps = ComponentProps<typeof ColorPickerPrimitive.Root> & OverlayPortalProps;
+type ColorPickerRootProviderProps = ComponentProps<typeof ColorPickerPrimitive.RootProvider> & OverlayPortalProps;
+declare function ColorPickerRoot(props: ColorPickerRootProps): import("solid-js").JSX.Element;
+declare function ColorPickerRootProvider(props: ColorPickerRootProviderProps): import("solid-js").JSX.Element;
+declare function ColorPickerLabel(props: ComponentProps<typeof ColorPickerPrimitive.Label>): import("solid-js").JSX.Element;
+declare function ColorPickerControl(props: ComponentProps<typeof ColorPickerPrimitive.Control>): import("solid-js").JSX.Element;
+declare function ColorPickerTrigger(props: ComponentProps<typeof ColorPickerPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function ColorPickerPositioner(props: ComponentProps<typeof ColorPickerPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function ColorPickerContent(props: ComponentProps<typeof ColorPickerPrimitive.Content>): import("solid-js").JSX.Element;
+declare function ColorPickerArea(props: ComponentProps<typeof ColorPickerPrimitive.Area>): import("solid-js").JSX.Element;
+declare function ColorPickerAreaBackground(props: ComponentProps<typeof ColorPickerPrimitive.AreaBackground>): import("solid-js").JSX.Element;
+declare function ColorPickerAreaThumb(props: ComponentProps<typeof ColorPickerPrimitive.AreaThumb>): import("solid-js").JSX.Element;
+declare function ColorPickerChannelSlider(props: ComponentProps<typeof ColorPickerPrimitive.ChannelSlider>): import("solid-js").JSX.Element;
+declare function ColorPickerSliders(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+declare function ColorPickerChannelSliderTrack(props: ComponentProps<typeof ColorPickerPrimitive.ChannelSliderTrack>): import("solid-js").JSX.Element;
+declare function ColorPickerChannelSliderThumb(props: ComponentProps<typeof ColorPickerPrimitive.ChannelSliderThumb>): import("solid-js").JSX.Element;
+declare function ColorPickerChannelSliderLabel(props: ComponentProps<typeof ColorPickerPrimitive.ChannelSliderLabel>): import("solid-js").JSX.Element;
+declare function ColorPickerChannelSliderValueText(props: ComponentProps<typeof ColorPickerPrimitive.ChannelSliderValueText>): import("solid-js").JSX.Element;
+declare function ColorPickerChannelInput(props: ComponentProps<typeof ColorPickerPrimitive.ChannelInput>): import("solid-js").JSX.Element;
+declare function ColorPickerEyeDropperTrigger(props: ComponentProps<typeof ColorPickerPrimitive.EyeDropperTrigger>): import("solid-js").JSX.Element;
+declare function ColorPickerFormatSelect(props: ComponentProps<typeof ColorPickerPrimitive.FormatSelect>): import("solid-js").JSX.Element;
+declare function ColorPickerFormatTrigger(props: ComponentProps<typeof ColorPickerPrimitive.FormatTrigger>): import("solid-js").JSX.Element;
+declare function ColorPickerSwatchGroup(props: ComponentProps<typeof ColorPickerPrimitive.SwatchGroup>): import("solid-js").JSX.Element;
+declare function ColorPickerSwatchTrigger(props: ComponentProps<typeof ColorPickerPrimitive.SwatchTrigger>): import("solid-js").JSX.Element;
+declare function ColorPickerSwatch(props: ComponentProps<typeof ColorPickerPrimitive.Swatch>): import("solid-js").JSX.Element;
+declare function ColorPickerSwatchIndicator(props: ComponentProps<typeof ColorPickerPrimitive.SwatchIndicator>): import("solid-js").JSX.Element;
+declare function ColorPickerTransparencyGrid(props: ComponentProps<typeof ColorPickerPrimitive.TransparencyGrid>): import("solid-js").JSX.Element;
+declare function ColorPickerValueSwatch(props: ComponentProps<typeof ColorPickerPrimitive.ValueSwatch>): import("solid-js").JSX.Element;
+declare function ColorPickerValueText(props: ComponentProps<typeof ColorPickerPrimitive.ValueText>): import("solid-js").JSX.Element;
+declare function ColorPickerView(props: ComponentProps<typeof ColorPickerPrimitive.View>): import("solid-js").JSX.Element;
+declare const ColorPicker: typeof ColorPickerRoot & {
+    Root: typeof ColorPickerRoot;
+    RootProvider: typeof ColorPickerRootProvider;
+    Context: (props: ColorPickerPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    HiddenInput: (props: ColorPickerPrimitive.HiddenInputProps) => import("solid-js").JSX.Element;
+    Label: typeof ColorPickerLabel;
+    Control: typeof ColorPickerControl;
+    Trigger: typeof ColorPickerTrigger;
+    Positioner: typeof ColorPickerPositioner;
+    Content: typeof ColorPickerContent;
+    Area: typeof ColorPickerArea;
+    AreaBackground: typeof ColorPickerAreaBackground;
+    AreaThumb: typeof ColorPickerAreaThumb;
+    ChannelSlider: typeof ColorPickerChannelSlider;
+    Sliders: typeof ColorPickerSliders;
+    ChannelSliderTrack: typeof ColorPickerChannelSliderTrack;
+    ChannelSliderThumb: typeof ColorPickerChannelSliderThumb;
+    ChannelSliderLabel: typeof ColorPickerChannelSliderLabel;
+    ChannelSliderValueText: typeof ColorPickerChannelSliderValueText;
+    ChannelInput: typeof ColorPickerChannelInput;
+    EyeDropperTrigger: typeof ColorPickerEyeDropperTrigger;
+    FormatSelect: typeof ColorPickerFormatSelect;
+    FormatTrigger: typeof ColorPickerFormatTrigger;
+    SwatchGroup: typeof ColorPickerSwatchGroup;
+    SwatchTrigger: typeof ColorPickerSwatchTrigger;
+    Swatch: typeof ColorPickerSwatch;
+    SwatchIndicator: typeof ColorPickerSwatchIndicator;
+    TransparencyGrid: typeof ColorPickerTransparencyGrid;
+    ValueSwatch: typeof ColorPickerValueSwatch;
+    ValueText: typeof ColorPickerValueText;
+    View: typeof ColorPickerView;
+};
+export { ColorPicker, parseColor, useColorPicker, useColorPickerContext };