@moduix/solid-tailwind 1.0.0

package/dist/components/stack/Stack.jsx

@@ -0,0 +1,68 @@
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+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 <ark.div asChild={local.asChild} {...others} data-scope="stack" data-part="root" data-slot="stack-root" class={cn(stackVariants({
+        mobileDirection: mobileDirection(),
+        desktopDirection: desktopDirection(),
+        fill: local.fill
+    }), local.class)} style={stackStyle()}/>;
+}
+const Stack = Object.assign(StackRoot, {
+    Root: StackRoot
+});
+export { Stack };

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

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

package/dist/components/stack/index.js

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

package/dist/components/stack/index.jsx

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

package/dist/components/steps/Steps.d.ts

@@ -0,0 +1,35 @@
+import { Steps as StepsPrimitive, useSteps, useStepsContext, useStepsItemContext } from '@ark-ui/solid/steps';
+import type { ComponentProps } from 'solid-js';
+declare function StepsRoot(props: ComponentProps<typeof StepsPrimitive.Root>): import("solid-js").JSX.Element;
+declare function StepsRootProvider(props: ComponentProps<typeof StepsPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function StepsList(props: ComponentProps<typeof StepsPrimitive.List>): import("solid-js").JSX.Element;
+declare function StepsItem(props: ComponentProps<typeof StepsPrimitive.Item>): import("solid-js").JSX.Element;
+declare function StepsTrigger(props: ComponentProps<typeof StepsPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function StepsIndicator(props: ComponentProps<typeof StepsPrimitive.Indicator>): import("solid-js").JSX.Element;
+declare function StepsSeparator(props: ComponentProps<typeof StepsPrimitive.Separator>): import("solid-js").JSX.Element;
+declare function StepsContent(props: ComponentProps<typeof StepsPrimitive.Content>): import("solid-js").JSX.Element;
+declare function StepsCompletedContent(props: ComponentProps<typeof StepsPrimitive.CompletedContent>): import("solid-js").JSX.Element;
+declare function StepsPrevTrigger(props: ComponentProps<typeof StepsPrimitive.PrevTrigger>): import("solid-js").JSX.Element;
+declare function StepsNextTrigger(props: ComponentProps<typeof StepsPrimitive.NextTrigger>): import("solid-js").JSX.Element;
+declare function StepsProgress(props: ComponentProps<typeof StepsPrimitive.Progress>): import("solid-js").JSX.Element;
+declare const Steps: typeof StepsRoot & {
+    Root: typeof StepsRoot;
+    RootProvider: typeof StepsRootProvider;
+    Context: (props: StepsPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    ItemContext: {
+        (props: StepsPrimitive.ItemContextProps): import("solid-js").JSX.Element;
+        displayName: string;
+    };
+    List: typeof StepsList;
+    Item: typeof StepsItem;
+    Trigger: typeof StepsTrigger;
+    Indicator: typeof StepsIndicator;
+    Separator: typeof StepsSeparator;
+    Content: typeof StepsContent;
+    CompletedContent: typeof StepsCompletedContent;
+    PrevTrigger: typeof StepsPrevTrigger;
+    NextTrigger: typeof StepsNextTrigger;
+    Progress: typeof StepsProgress;
+    useSteps: typeof useSteps;
+};
+export { Steps, useSteps, useStepsContext, useStepsItemContext };

package/dist/components/steps/Steps.js

@@ -0,0 +1,162 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Steps, useSteps, useStepsContext, useStepsItemContext } from "@ark-ui/solid/steps";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon } from "../../internal/icons/ui/index.js";
+function StepsRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Steps.Root, mergeProps({
+        "data-slot": "steps-root",
+        get ["class"] () {
+            return cn('box-border flex w-full max-w-[52rem] min-w-0 text-foreground data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-6 max-[40rem]:data-[orientation=vertical]:flex-col max-[40rem]:data-[orientation=vertical]:gap-4', local.class);
+        }
+    }, others));
+}
+function StepsRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Steps.RootProvider, mergeProps({
+        "data-slot": "steps-root-provider",
+        get ["class"] () {
+            return cn('box-border flex w-full max-w-[52rem] min-w-0 text-foreground data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-6 max-[40rem]:data-[orientation=vertical]:flex-col max-[40rem]:data-[orientation=vertical]:gap-4', local.class);
+        }
+    }, others));
+}
+function StepsList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Steps.List, mergeProps({
+        "data-slot": "steps-list",
+        get ["class"] () {
+            return cn('flex w-full min-w-0 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:items-center data-[orientation=vertical]:w-fit data-[orientation=vertical]:flex-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start data-[orientation=vertical]:gap-4 max-[40rem]:data-[orientation=horizontal]:[scrollbar-width:thin] max-[40rem]:data-[orientation=horizontal]:overflow-x-auto', local.class);
+        }
+    }, others));
+}
+function StepsItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Steps.Item, mergeProps({
+        "data-slot": "steps-item",
+        get ["class"] () {
+            return cn('group/steps-item relative flex min-w-0 flex-1 items-center gap-3 last:flex-none data-[orientation=vertical]:min-h-16 data-[orientation=vertical]:flex-none data-[orientation=vertical]:items-start max-[40rem]:data-[orientation=horizontal]:flex-none', local.class);
+        }
+    }, others));
+}
+function StepsTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Steps.Trigger, mergeProps({
+        "data-slot": "steps-trigger",
+        get ["class"] () {
+            return cn('group/steps-trigger relative z-1 inline-flex min-w-0 cursor-pointer items-center gap-3 rounded-md border-0 bg-transparent p-0 text-left text-inherit no-underline outline-none select-none [font:inherit] focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:items-start', local.class);
+        }
+    }, others));
+}
+function StepsIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'children'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const item = useStepsItemContext();
+    return createComponent(Steps.Indicator, mergeProps({
+        "data-slot": "steps-indicator",
+        get ["class"] () {
+            return cn('box-border inline-flex size-8 flex-none items-center justify-center rounded-full border border-border bg-background text-sm leading-none font-semibold text-muted-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out data-complete:border-foreground data-complete:bg-foreground data-complete:text-background data-current:border-foreground data-current:bg-background data-current:text-foreground motion-reduce:transition-none [&_svg]:size-3.5 [@media(hover:hover)]:group-hover/steps-trigger:data-incomplete:border-foreground [@media(hover:hover)]:group-hover/steps-trigger:data-incomplete:text-foreground', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (item().completed ? createComponent(CheckIcon, {}) : item().index + 1);
+        }
+    }));
+}
+function StepsSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Steps.Separator, mergeProps({
+        "data-slot": "steps-separator",
+        get ["class"] () {
+            return cn('pointer-events-none mx-2 h-px min-w-8 flex-auto bg-border group-last/steps-item:hidden data-complete:bg-foreground data-[orientation=vertical]:absolute data-[orientation=vertical]:start-[15.5px] data-[orientation=vertical]:top-10 data-[orientation=vertical]:-bottom-4 data-[orientation=vertical]:m-0 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px data-[orientation=vertical]:min-w-0', local.class);
+        }
+    }, others));
+}
+function StepsContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Steps.Content, mergeProps({
+        "data-slot": "steps-content",
+        get ["class"] () {
+            return cn("box-border grid min-h-40 min-w-0 place-items-center rounded-md bg-muted px-4 py-4 text-sm leading-5 text-foreground outline-none focus-visible:outline-1 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:flex-auto [&[hidden]:not([hidden='until-found'])]:hidden", local.class);
+        }
+    }, others));
+}
+function StepsCompletedContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Steps.CompletedContent, mergeProps({
+        "data-slot": "steps-completed-content",
+        get ["class"] () {
+            return cn("box-border grid min-h-40 min-w-0 place-items-center rounded-md bg-muted px-4 py-4 text-center text-sm leading-5 font-medium text-foreground outline-none focus-visible:outline-1 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:flex-auto [&[hidden]:not([hidden='until-found'])]:hidden", local.class);
+        }
+    }, others));
+}
+function StepsPrevTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Steps.PrevTrigger, mergeProps({
+        "data-slot": "steps-prev-trigger",
+        get ["class"] () {
+            return cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 text-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-accent', local.class);
+        }
+    }, others));
+}
+function StepsNextTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Steps.NextTrigger, mergeProps({
+        "data-slot": "steps-next-trigger",
+        get ["class"] () {
+            return cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-foreground bg-foreground px-3 py-1.5 text-sm leading-5 text-background transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 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 StepsProgress(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Steps.Progress, mergeProps({
+        "data-slot": "steps-progress",
+        get ["class"] () {
+            return cn("relative block h-0.5 w-full overflow-hidden rounded-full bg-border before:absolute before:inset-y-0 before:start-0 before:w-[var(--percent,0%)] before:rounded-[inherit] before:bg-foreground before:transition-[width] before:duration-200 before:ease-in-out before:content-[''] motion-reduce:before:transition-none", local.class);
+        }
+    }, others));
+}
+const Steps_Steps = Object.assign(StepsRoot, {
+    Root: StepsRoot,
+    RootProvider: StepsRootProvider,
+    Context: Steps.Context,
+    ItemContext: Steps.ItemContext,
+    List: StepsList,
+    Item: StepsItem,
+    Trigger: StepsTrigger,
+    Indicator: StepsIndicator,
+    Separator: StepsSeparator,
+    Content: StepsContent,
+    CompletedContent: StepsCompletedContent,
+    PrevTrigger: StepsPrevTrigger,
+    NextTrigger: StepsNextTrigger,
+    Progress: StepsProgress,
+    useSteps: useSteps
+});
+export { Steps_Steps as Steps, useSteps, useStepsContext, useStepsItemContext };

package/dist/components/steps/Steps.jsx

@@ -0,0 +1,99 @@
+import { Steps, useSteps, useStepsContext, useStepsItemContext } from "@ark-ui/solid/steps";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CheckIcon } from "../../internal/icons/ui/index.jsx";
+function StepsRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Steps.Root data-slot="steps-root" class={cn('box-border flex w-full max-w-[52rem] min-w-0 text-foreground data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-6 max-[40rem]:data-[orientation=vertical]:flex-col max-[40rem]:data-[orientation=vertical]:gap-4', local.class)} {...others}/>;
+}
+function StepsRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Steps.RootProvider data-slot="steps-root-provider" class={cn('box-border flex w-full max-w-[52rem] min-w-0 text-foreground data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-6 max-[40rem]:data-[orientation=vertical]:flex-col max-[40rem]:data-[orientation=vertical]:gap-4', local.class)} {...others}/>;
+}
+function StepsList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Steps.List data-slot="steps-list" class={cn('flex w-full min-w-0 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:items-center data-[orientation=vertical]:w-fit data-[orientation=vertical]:flex-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start data-[orientation=vertical]:gap-4 max-[40rem]:data-[orientation=horizontal]:[scrollbar-width:thin] max-[40rem]:data-[orientation=horizontal]:overflow-x-auto', local.class)} {...others}/>;
+}
+function StepsItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Steps.Item data-slot="steps-item" class={cn('group/steps-item relative flex min-w-0 flex-1 items-center gap-3 last:flex-none data-[orientation=vertical]:min-h-16 data-[orientation=vertical]:flex-none data-[orientation=vertical]:items-start max-[40rem]:data-[orientation=horizontal]:flex-none', local.class)} {...others}/>;
+}
+function StepsTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Steps.Trigger data-slot="steps-trigger" class={cn('group/steps-trigger relative z-1 inline-flex min-w-0 cursor-pointer items-center gap-3 rounded-md border-0 bg-transparent p-0 text-left text-inherit no-underline outline-none select-none [font:inherit] focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:items-start', local.class)} {...others}/>;
+}
+function StepsIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'children'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const item = useStepsItemContext();
+    return <Steps.Indicator data-slot="steps-indicator" class={cn('box-border inline-flex size-8 flex-none items-center justify-center rounded-full border border-border bg-background text-sm leading-none font-semibold text-muted-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out data-complete:border-foreground data-complete:bg-foreground data-complete:text-background data-current:border-foreground data-current:bg-background data-current:text-foreground motion-reduce:transition-none [&_svg]:size-3.5 [@media(hover:hover)]:group-hover/steps-trigger:data-incomplete:border-foreground [@media(hover:hover)]:group-hover/steps-trigger:data-incomplete:text-foreground', local.class)} {...others}>
+      {resolvedChildren() ?? (item().completed ? <CheckIcon/> : item().index + 1)}
+    </Steps.Indicator>;
+}
+function StepsSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Steps.Separator data-slot="steps-separator" class={cn('pointer-events-none mx-2 h-px min-w-8 flex-auto bg-border group-last/steps-item:hidden data-complete:bg-foreground data-[orientation=vertical]:absolute data-[orientation=vertical]:start-[15.5px] data-[orientation=vertical]:top-10 data-[orientation=vertical]:-bottom-4 data-[orientation=vertical]:m-0 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px data-[orientation=vertical]:min-w-0', local.class)} {...others}/>;
+}
+function StepsContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Steps.Content data-slot="steps-content" class={cn("box-border grid min-h-40 min-w-0 place-items-center rounded-md bg-muted px-4 py-4 text-sm leading-5 text-foreground outline-none focus-visible:outline-1 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:flex-auto [&[hidden]:not([hidden='until-found'])]:hidden", local.class)} {...others}/>;
+}
+function StepsCompletedContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Steps.CompletedContent data-slot="steps-completed-content" class={cn("box-border grid min-h-40 min-w-0 place-items-center rounded-md bg-muted px-4 py-4 text-center text-sm leading-5 font-medium text-foreground outline-none focus-visible:outline-1 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:flex-auto [&[hidden]:not([hidden='until-found'])]:hidden", local.class)} {...others}/>;
+}
+function StepsPrevTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Steps.PrevTrigger data-slot="steps-prev-trigger" class={cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 text-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-accent', local.class)} {...others}/>;
+}
+function StepsNextTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Steps.NextTrigger data-slot="steps-next-trigger" class={cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-foreground bg-foreground px-3 py-1.5 text-sm leading-5 text-background transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 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 StepsProgress(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Steps.Progress data-slot="steps-progress" class={cn("relative block h-0.5 w-full overflow-hidden rounded-full bg-border before:absolute before:inset-y-0 before:start-0 before:w-[var(--percent,0%)] before:rounded-[inherit] before:bg-foreground before:transition-[width] before:duration-200 before:ease-in-out before:content-[''] motion-reduce:before:transition-none", local.class)} {...others}/>;
+}
+const Steps_Steps = Object.assign(StepsRoot, {
+    Root: StepsRoot,
+    RootProvider: StepsRootProvider,
+    Context: Steps.Context,
+    ItemContext: Steps.ItemContext,
+    List: StepsList,
+    Item: StepsItem,
+    Trigger: StepsTrigger,
+    Indicator: StepsIndicator,
+    Separator: StepsSeparator,
+    Content: StepsContent,
+    CompletedContent: StepsCompletedContent,
+    PrevTrigger: StepsPrevTrigger,
+    NextTrigger: StepsNextTrigger,
+    Progress: StepsProgress,
+    useSteps: useSteps
+});
+export { Steps_Steps as Steps, useSteps, useStepsContext, useStepsItemContext };

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

@@ -0,0 +1 @@
+export { Steps, useSteps, useStepsContext, useStepsItemContext } from './Steps.js';

package/dist/components/steps/index.js

@@ -0,0 +1 @@
+export { Steps, useSteps, useStepsContext, useStepsItemContext } from "./Steps.js";

package/dist/components/steps/index.jsx

@@ -0,0 +1 @@
+export { Steps, useSteps, useStepsContext, useStepsItemContext } from "./Steps.jsx";

package/dist/components/swap/Swap.d.ts

@@ -0,0 +1,20 @@
+import { Swap as SwapPrimitive, useSwap, useSwapContext } from '@ark-ui/solid/swap';
+import type { ComponentProps } from 'solid-js';
+type SwapAnimation = 'fade' | 'scale' | 'rotate' | 'flip' | (string & {});
+type SwapRootProps = ComponentProps<typeof SwapPrimitive.Root> & {
+    animation?: SwapAnimation;
+};
+type SwapRootProviderProps = ComponentProps<typeof SwapPrimitive.RootProvider> & {
+    animation?: SwapAnimation;
+};
+declare function SwapRoot(props: SwapRootProps): import("solid-js").JSX.Element;
+declare function SwapRootProvider(props: SwapRootProviderProps): import("solid-js").JSX.Element;
+declare function SwapIndicator(props: ComponentProps<typeof SwapPrimitive.Indicator>): import("solid-js").JSX.Element;
+type SwapComponent = typeof SwapRoot & {
+    Root: typeof SwapRoot;
+    RootProvider: typeof SwapRootProvider;
+    Indicator: typeof SwapIndicator;
+    useSwap: typeof useSwap;
+};
+declare const Swap: SwapComponent;
+export { Swap, useSwap, useSwapContext, type SwapAnimation };

package/dist/components/swap/Swap.js

@@ -0,0 +1,52 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Swap, useSwap, useSwapContext } from "@ark-ui/solid/swap";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function SwapRoot(props) {
+    const [local, others] = splitProps(props, [
+        'animation',
+        'class'
+    ]);
+    return createComponent(Swap.Root, mergeProps({
+        "data-slot": "swap-root",
+        get ["data-animation"] () {
+            return local.animation ?? 'scale';
+        },
+        get ["class"] () {
+            return cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class);
+        }
+    }, others));
+}
+function SwapRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'animation',
+        'class'
+    ]);
+    return createComponent(Swap.RootProvider, mergeProps({
+        "data-slot": "swap-root-provider",
+        get ["data-animation"] () {
+            return local.animation ?? 'scale';
+        },
+        get ["class"] () {
+            return cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class);
+        }
+    }, others));
+}
+function SwapIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Swap.Indicator, mergeProps({
+        "data-slot": "swap-indicator",
+        get ["class"] () {
+            return cn('inline-flex items-center justify-center text-inherit [grid-area:swap] group-data-[animation=flip]/swap:[backface-visibility:hidden] group-data-[animation=fade]/swap:data-[state=closed]:animate-moduix-swap-fade-exit group-data-[animation=flip]/swap:data-[state=closed]:animate-moduix-swap-flip-exit group-data-[animation=rotate]/swap:data-[state=closed]:animate-moduix-swap-rotate-exit group-data-[animation=scale]/swap:data-[state=closed]:animate-moduix-swap-scale-exit group-data-[animation=fade]/swap:data-[state=open]:animate-moduix-swap-fade-enter group-data-[animation=flip]/swap:data-[state=open]:animate-moduix-swap-flip-enter group-data-[animation=rotate]/swap:data-[state=open]:animate-moduix-swap-rotate-enter group-data-[animation=scale]/swap:data-[state=open]:animate-moduix-swap-scale-enter motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class);
+        }
+    }, others));
+}
+const Swap_Swap = Object.assign(SwapRoot, {
+    Root: SwapRoot,
+    RootProvider: SwapRootProvider,
+    Indicator: SwapIndicator,
+    useSwap: useSwap
+});
+export { Swap_Swap as Swap, useSwap, useSwapContext };

package/dist/components/swap/Swap.jsx

@@ -0,0 +1,30 @@
+import { Swap, useSwap, useSwapContext } from "@ark-ui/solid/swap";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function SwapRoot(props) {
+    const [local, others] = splitProps(props, [
+        'animation',
+        'class'
+    ]);
+    return <Swap.Root data-slot="swap-root" data-animation={local.animation ?? 'scale'} class={cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class)} {...others}/>;
+}
+function SwapRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'animation',
+        'class'
+    ]);
+    return <Swap.RootProvider data-slot="swap-root-provider" data-animation={local.animation ?? 'scale'} class={cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", local.class)} {...others}/>;
+}
+function SwapIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Swap.Indicator data-slot="swap-indicator" class={cn('inline-flex items-center justify-center text-inherit [grid-area:swap] group-data-[animation=flip]/swap:[backface-visibility:hidden] group-data-[animation=fade]/swap:data-[state=closed]:animate-moduix-swap-fade-exit group-data-[animation=flip]/swap:data-[state=closed]:animate-moduix-swap-flip-exit group-data-[animation=rotate]/swap:data-[state=closed]:animate-moduix-swap-rotate-exit group-data-[animation=scale]/swap:data-[state=closed]:animate-moduix-swap-scale-exit group-data-[animation=fade]/swap:data-[state=open]:animate-moduix-swap-fade-enter group-data-[animation=flip]/swap:data-[state=open]:animate-moduix-swap-flip-enter group-data-[animation=rotate]/swap:data-[state=open]:animate-moduix-swap-rotate-enter group-data-[animation=scale]/swap:data-[state=open]:animate-moduix-swap-scale-enter motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others}/>;
+}
+const Swap_Swap = Object.assign(SwapRoot, {
+    Root: SwapRoot,
+    RootProvider: SwapRootProvider,
+    Indicator: SwapIndicator,
+    useSwap: useSwap
+});
+export { Swap_Swap as Swap, useSwap, useSwapContext };

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

@@ -0,0 +1 @@
+export { Swap, useSwap, useSwapContext, type SwapAnimation } from './Swap.js';

package/dist/components/swap/index.js

@@ -0,0 +1 @@
+export { Swap, useSwap, useSwapContext } from "./Swap.js";

package/dist/components/swap/index.jsx

@@ -0,0 +1 @@
+export { Swap, useSwap, useSwapContext } from "./Swap.jsx";

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,25 @@
+import { Switch as SwitchPrimitive, useSwitch, useSwitchContext } from '@ark-ui/solid/switch';
+import type { ComponentProps } from 'solid-js';
+type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SwitchRootProps = ComponentProps<typeof SwitchPrimitive.Root> & {
+    size?: SwitchSize;
+};
+type SwitchRootProviderProps = ComponentProps<typeof SwitchPrimitive.RootProvider> & {
+    size?: SwitchSize;
+};
+declare function SwitchRoot(props: SwitchRootProps): import("solid-js").JSX.Element;
+declare function SwitchRootProvider(props: SwitchRootProviderProps): import("solid-js").JSX.Element;
+declare function SwitchControl(props: ComponentProps<typeof SwitchPrimitive.Control>): import("solid-js").JSX.Element;
+declare function SwitchThumb(props: ComponentProps<typeof SwitchPrimitive.Thumb>): import("solid-js").JSX.Element;
+declare function SwitchLabel(props: ComponentProps<typeof SwitchPrimitive.Label>): import("solid-js").JSX.Element;
+declare const Switch: typeof SwitchRoot & {
+    Root: typeof SwitchRoot;
+    RootProvider: typeof SwitchRootProvider;
+    HiddenInput: (props: SwitchPrimitive.HiddenInputProps) => import("solid-js").JSX.Element;
+    Control: typeof SwitchControl;
+    Thumb: typeof SwitchThumb;
+    Label: typeof SwitchLabel;
+    Context: (props: SwitchPrimitive.ContextProps) => import("solid-js").JSX.Element;
+};
+export { Switch, useSwitch, useSwitchContext };
+export type { SwitchRootProps, SwitchRootProviderProps, SwitchSize };

package/dist/components/switch/Switch.js

@@ -0,0 +1,101 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Switch, SwitchContext, useSwitch, useSwitchContext } from "@ark-ui/solid/switch";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function SwitchRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return createComponent(Switch.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "switch-root",
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["class"] () {
+            return cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function SwitchRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return createComponent(Switch.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "switch-root-provider",
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["class"] () {
+            return cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function SwitchControl(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Switch.Control, mergeProps({
+        "data-slot": "switch-control",
+        get ["class"] () {
+            return cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent relative inline-flex h-control-xs w-11 shrink-0 items-center rounded-full border border-border bg-muted p-0.5 leading-none outline-0 transition-[background-color,border-color,opacity] duration-200 ease-in-out select-none group-data-[size=lg]/switch:h-7 group-data-[size=lg]/switch:w-13 group-data-[size=sm]/switch:h-5 group-data-[size=sm]/switch:w-9 group-data-[size=xl]/switch:h-control-sm group-data-[size=xl]/switch:w-15 group-data-[size=xs]/switch:h-4 group-data-[size=xs]/switch:w-7 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary motion-reduce:transition-none", local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(SwitchThumb, {});
+        }
+    }));
+}
+function SwitchThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Switch.Thumb, mergeProps({
+        "data-slot": "switch-thumb",
+        get ["class"] () {
+            return cn('inline-flex size-5 translate-x-0 items-center justify-center rounded-full border-transparent bg-background text-muted shadow-sm transition-[translate,background-color,color] duration-200 ease-in-out group-data-[size=lg]/switch:size-control-xs group-data-[size=sm]/switch:size-4 group-data-[size=xl]/switch:size-7 group-data-[size=xs]/switch:size-3 data-[state=checked]:translate-x-[18px] data-[state=checked]:bg-primary-foreground data-[state=checked]:text-primary group-data-[size=lg]/switch:data-[state=checked]:translate-x-[22px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=xl]/switch:data-[state=checked]:translate-x-[26px] group-data-[size=xs]/switch:data-[state=checked]:translate-x-[10px] motion-reduce:transition-none rtl:data-[state=checked]:-translate-x-[18px] group-data-[size=lg]/switch:rtl:data-[state=checked]:-translate-x-[22px] group-data-[size=sm]/switch:rtl:data-[state=checked]:-translate-x-[14px] group-data-[size=xl]/switch:rtl:data-[state=checked]:-translate-x-[26px] group-data-[size=xs]/switch:rtl:data-[state=checked]:-translate-x-[10px] [&>svg]:block [&>svg]:size-[65%] [&>svg]:shrink-0', local.class);
+        }
+    }, others));
+}
+function SwitchLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Switch.Label, mergeProps({
+        "data-slot": "switch-label",
+        get ["class"] () {
+            return cn('text-sm leading-5 font-medium text-foreground select-none', local.class);
+        }
+    }, others));
+}
+const Switch_Switch = Object.assign(SwitchRoot, {
+    Root: SwitchRoot,
+    RootProvider: SwitchRootProvider,
+    HiddenInput: Switch.HiddenInput,
+    Control: SwitchControl,
+    Thumb: SwitchThumb,
+    Label: SwitchLabel,
+    Context: SwitchContext
+});
+export { Switch_Switch as Switch, useSwitch, useSwitchContext };