@moduix/solid-tailwind 1.0.0

package/dist/components/toc/Toc.d.ts

@@ -0,0 +1,34 @@
+import { Toc as TocPrimitive, type UseTocProps } from '@ark-ui/solid/toc';
+import type { ComponentProps, JSX } from 'solid-js';
+declare const useToc: (props: UseTocProps) => import("@ark-ui/solid").UseTocReturn;
+declare const useTocContext: () => import("@ark-ui/solid").UseTocContext;
+declare function TocRoot(props: ComponentProps<typeof TocPrimitive.Root>): JSX.Element;
+declare function TocRootProvider(props: ComponentProps<typeof TocPrimitive.RootProvider>): JSX.Element;
+declare function TocContent(props: ComponentProps<typeof TocPrimitive.Content>): JSX.Element;
+declare function TocNav(props: ComponentProps<typeof TocPrimitive.Nav>): JSX.Element;
+declare function TocTitle(props: ComponentProps<typeof TocPrimitive.Title>): JSX.Element;
+declare function TocList(props: ComponentProps<typeof TocPrimitive.List>): JSX.Element;
+declare function TocItem(props: ComponentProps<typeof TocPrimitive.Item>): JSX.Element;
+declare function TocLink(props: ComponentProps<typeof TocPrimitive.Link>): JSX.Element;
+declare function TocIndicator(props: ComponentProps<typeof TocPrimitive.Indicator>): JSX.Element;
+type TocRailProps = ComponentProps<'svg'> & {
+    depth: number;
+    previousDepth?: number;
+    nextDepth?: number;
+};
+declare function TocRail(props: TocRailProps): JSX.Element;
+type TocComponent = typeof TocRoot & {
+    Root: typeof TocRoot;
+    RootProvider: typeof TocRootProvider;
+    Context: typeof TocPrimitive.Context;
+    Content: typeof TocContent;
+    Nav: typeof TocNav;
+    Title: typeof TocTitle;
+    List: typeof TocList;
+    Item: typeof TocItem;
+    Link: typeof TocLink;
+    Indicator: typeof TocIndicator;
+    Rail: typeof TocRail;
+};
+declare const Toc: TocComponent;
+export { Toc, useToc, useTocContext };

package/dist/components/toc/Toc.js

@@ -0,0 +1,222 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { Toc, useToc, useTocContext } from "@ark-ui/solid/toc";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+var _tmpl$ = /*#__PURE__*/ template("<svg aria-hidden=true data-slot=toc-rail><line y2=100%>"), _tmpl$2 = /*#__PURE__*/ template("<svg><path fill=none></svg>", false, true, false);
+const railBaseOffset = 0;
+const railStep = 12;
+const railBridge = 6;
+const maxRailLevel = 2;
+const getRailOffset = (depth)=>railBaseOffset + Math.min(Math.max(depth - 2, 0), maxRailLevel) * railStep;
+const Toc_useToc = (props)=>useToc({
+        autoScroll: false,
+        ...props
+    });
+const Toc_useTocContext = useTocContext;
+function TocRoot(props) {
+    const [local, others] = splitProps(props, [
+        'autoScroll',
+        'class'
+    ]);
+    return createComponent(Toc.Root, mergeProps({
+        get autoScroll () {
+            return local.autoScroll ?? false;
+        },
+        "data-slot": "toc-root",
+        get ["class"] () {
+            return cn('group/toc box-border grid w-full min-w-0 grid-cols-[minmax(0,1fr)_minmax(12rem,16rem)] gap-6 text-foreground has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(12rem,16rem)_minmax(0,1fr)] max-md:grid-cols-[minmax(0,1fr)] max-md:has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(0,1fr)]', local.class);
+        }
+    }, others));
+}
+function TocRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'style',
+        'value'
+    ]);
+    const getRootStyle = ()=>mergeStyles(local.value().getRootProps().style, local.style);
+    return createComponent(Toc.RootProvider, mergeProps({
+        get value () {
+            return local.value;
+        },
+        "data-slot": "toc-root-provider",
+        get ["class"] () {
+            return cn('group/toc box-border grid w-full min-w-0 grid-cols-[minmax(0,1fr)_minmax(12rem,16rem)] gap-6 text-foreground has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(12rem,16rem)_minmax(0,1fr)] max-md:grid-cols-[minmax(0,1fr)] max-md:has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(0,1fr)]', local.class);
+        },
+        get style () {
+            return getRootStyle();
+        }
+    }, others));
+}
+function TocContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.Content, mergeProps({
+        "data-slot": "toc-content",
+        get ["class"] () {
+            return cn('min-w-0 scroll-smooth group-has-[[data-slot=toc-nav][data-placement=left]]/toc:col-start-2 group-has-[[data-slot=toc-nav][data-placement=left]]/toc:row-start-1 motion-reduce:scroll-auto max-md:group-has-[[data-slot=toc-nav][data-placement=left]]/toc:col-auto max-md:group-has-[[data-slot=toc-nav][data-placement=left]]/toc:row-auto', local.class);
+        }
+    }, others));
+}
+function TocNav(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.Nav, mergeProps({
+        "data-slot": "toc-nav",
+        get ["class"] () {
+            return cn('sticky top-4 max-h-[calc(100dvh-2rem)] min-w-0 self-start overflow-auto rounded-lg border border-border bg-card p-4 text-card-foreground data-[placement=left]:col-start-1 data-[placement=left]:row-start-1 max-md:data-[placement=left]:col-auto max-md:data-[placement=left]:row-auto', local.class);
+        }
+    }, others));
+}
+function TocTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.Title, mergeProps({
+        "data-slot": "toc-title",
+        get ["class"] () {
+            return cn('m-0 mb-2 text-sm leading-5 font-semibold text-foreground', local.class);
+        }
+    }, others));
+}
+function TocList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.List, mergeProps({
+        "data-slot": "toc-list",
+        get ["class"] () {
+            return cn("relative m-0 grid list-none gap-0.5 py-0 ps-1 has-[[data-slot=toc-indicator]]:before:pointer-events-none has-[[data-slot=toc-indicator]]:before:absolute has-[[data-slot=toc-indicator]]:before:inset-y-0.5 has-[[data-slot=toc-indicator]]:before:start-0 has-[[data-slot=toc-indicator]]:before:w-0.5 has-[[data-slot=toc-indicator]]:before:rounded-full has-[[data-slot=toc-indicator]]:before:bg-border has-[[data-slot=toc-indicator]]:before:content-['']", local.class);
+        }
+    }, others));
+}
+function TocItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.Item, mergeProps({
+        "data-slot": "toc-item",
+        get ["class"] () {
+            return cn('min-w-0', local.class);
+        }
+    }, others));
+}
+function TocLink(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.Link, mergeProps({
+        "data-slot": "toc-link",
+        get ["class"] () {
+            return cn('group/toc-link relative block min-w-0 overflow-hidden rounded-sm py-1 ps-[calc(0.875rem+max(0px,((var(--depth)-2)*0.5rem)))] pe-1 text-sm leading-5 text-ellipsis whitespace-nowrap text-muted-foreground no-underline outline-0 transition-colors duration-200 ring-inset focus-visible:ring-1 focus-visible:ring-ring has-[[data-slot=toc-rail]]:overflow-visible data-active:font-medium data-active:text-foreground motion-reduce:transition-none [@media(hover:hover)]:hover:text-foreground', local.class);
+        }
+    }, others));
+}
+function TocIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.Indicator, mergeProps({
+        "data-slot": "toc-indicator",
+        get ["class"] () {
+            return cn('pointer-events-none start-0 top-[calc(var(--top)+0.125rem)] z-1 h-[calc(var(--height)-0.25rem)] w-0.5 rounded-full bg-muted-foreground opacity-70 transition-[top,height] duration-200 motion-reduce:transition-none', local.class);
+        }
+    }, others));
+}
+const nonScalingStrokeProps = {
+    'vector-effect': 'non-scaling-stroke'
+};
+const styleToString = (style)=>Object.entries(style).filter(([, value])=>void 0 !== value).map(([property, value])=>`${property}:${value}`).join(';');
+const getStyleObject = (style)=>'object' == typeof style && null !== style ? style : {};
+const mergeStyles = (base, override)=>{
+    if ('string' == typeof override) {
+        const baseStyle = 'string' == typeof base ? base : styleToString(getStyleObject(base));
+        return baseStyle ? `${baseStyle};${override}` : override;
+    }
+    if ('string' == typeof base) {
+        const overrideStyle = styleToString(getStyleObject(override));
+        return overrideStyle ? `${base};${overrideStyle}` : base;
+    }
+    const baseStyle = getStyleObject(base);
+    const overrideStyle = getStyleObject(override);
+    return Object.keys(baseStyle).length || Object.keys(overrideStyle).length ? {
+        ...baseStyle,
+        ...overrideStyle
+    } : void 0;
+};
+function TocRail(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'depth',
+        'nextDepth',
+        'previousDepth',
+        'style'
+    ]);
+    const lineOffset = ()=>getRailOffset(local.depth);
+    const previousLineOffset = ()=>getRailOffset(local.previousDepth ?? local.depth);
+    const nextLineOffset = ()=>getRailOffset(local.nextDepth ?? local.depth);
+    const hasTurn = ()=>previousLineOffset() !== lineOffset();
+    const width = ()=>Math.max(previousLineOffset(), lineOffset(), nextLineOffset()) + 2;
+    const height = ()=>lineOffset() === nextLineOffset() ? 'calc(100% + 0.5rem)' : '100%';
+    const getRailStyle = ()=>mergeStyles({
+            width: width(),
+            height: height()
+        }, local.style);
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        spread(_el$, mergeProps({
+            get ["class"] () {
+                return cn('pointer-events-none absolute start-0 -top-1.5 overflow-visible text-border group-data-active/toc-link:translate-y-0.5 group-data-active/toc-link:text-muted-foreground group-data-active/toc-link:opacity-70', local.class);
+            },
+            get style () {
+                return getRailStyle();
+            }
+        }, others), true, true);
+        insert(_el$, (()=>{
+            var _c$ = memo(()=>!!hasTurn());
+            return ()=>_c$() && (()=>{
+                    var _el$3 = _tmpl$2();
+                    spread(_el$3, mergeProps({
+                        get d () {
+                            return `M ${previousLineOffset() + 0.5} 0 C ${previousLineOffset() + 0.5} 8 ${lineOffset() + 0.5} 4 ${lineOffset() + 0.5} ${2 * railBridge}`;
+                        }
+                    }, nonScalingStrokeProps, {
+                        stroke: "currentColor",
+                        class: "stroke-1"
+                    }), true, false);
+                    return _el$3;
+                })();
+        })(), _el$2);
+        spread(_el$2, mergeProps({
+            get x1 () {
+                return lineOffset() + 0.5;
+            },
+            get y1 () {
+                return hasTurn() ? 2 * railBridge : railBridge;
+            },
+            get x2 () {
+                return lineOffset() + 0.5;
+            }
+        }, nonScalingStrokeProps, {
+            stroke: "currentColor",
+            class: "stroke-1"
+        }), true, false);
+        return _el$;
+    })();
+}
+const Toc_Toc = Object.assign(TocRoot, {
+    Root: TocRoot,
+    RootProvider: TocRootProvider,
+    Context: Toc.Context,
+    Content: TocContent,
+    Nav: TocNav,
+    Title: TocTitle,
+    List: TocList,
+    Item: TocItem,
+    Link: TocLink,
+    Indicator: TocIndicator,
+    Rail: TocRail
+});
+export { Toc_Toc as Toc, Toc_useToc as useToc, Toc_useTocContext as useTocContext };

package/dist/components/toc/Toc.jsx

@@ -0,0 +1,129 @@
+import { Toc, useToc, useTocContext } from "@ark-ui/solid/toc";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const railBaseOffset = 0;
+const railStep = 12;
+const railBridge = 6;
+const maxRailLevel = 2;
+const getRailOffset = (depth)=>railBaseOffset + Math.min(Math.max(depth - 2, 0), maxRailLevel) * railStep;
+const Toc_useToc = (props)=>useToc({
+        autoScroll: false,
+        ...props
+    });
+const Toc_useTocContext = useTocContext;
+function TocRoot(props) {
+    const [local, others] = splitProps(props, [
+        'autoScroll',
+        'class'
+    ]);
+    return <Toc.Root autoScroll={local.autoScroll ?? false} data-slot="toc-root" class={cn('group/toc box-border grid w-full min-w-0 grid-cols-[minmax(0,1fr)_minmax(12rem,16rem)] gap-6 text-foreground has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(12rem,16rem)_minmax(0,1fr)] max-md:grid-cols-[minmax(0,1fr)] max-md:has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(0,1fr)]', local.class)} {...others}/>;
+}
+function TocRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'style',
+        'value'
+    ]);
+    const getRootStyle = ()=>mergeStyles(local.value().getRootProps().style, local.style);
+    return <Toc.RootProvider value={local.value} data-slot="toc-root-provider" class={cn('group/toc box-border grid w-full min-w-0 grid-cols-[minmax(0,1fr)_minmax(12rem,16rem)] gap-6 text-foreground has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(12rem,16rem)_minmax(0,1fr)] max-md:grid-cols-[minmax(0,1fr)] max-md:has-[[data-slot=toc-nav][data-placement=left]]:grid-cols-[minmax(0,1fr)]', local.class)} style={getRootStyle()} {...others}/>;
+}
+function TocContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.Content data-slot="toc-content" class={cn('min-w-0 scroll-smooth group-has-[[data-slot=toc-nav][data-placement=left]]/toc:col-start-2 group-has-[[data-slot=toc-nav][data-placement=left]]/toc:row-start-1 motion-reduce:scroll-auto max-md:group-has-[[data-slot=toc-nav][data-placement=left]]/toc:col-auto max-md:group-has-[[data-slot=toc-nav][data-placement=left]]/toc:row-auto', local.class)} {...others}/>;
+}
+function TocNav(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.Nav data-slot="toc-nav" class={cn('sticky top-4 max-h-[calc(100dvh-2rem)] min-w-0 self-start overflow-auto rounded-lg border border-border bg-card p-4 text-card-foreground data-[placement=left]:col-start-1 data-[placement=left]:row-start-1 max-md:data-[placement=left]:col-auto max-md:data-[placement=left]:row-auto', local.class)} {...others}/>;
+}
+function TocTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.Title data-slot="toc-title" class={cn('m-0 mb-2 text-sm leading-5 font-semibold text-foreground', local.class)} {...others}/>;
+}
+function TocList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.List data-slot="toc-list" class={cn("relative m-0 grid list-none gap-0.5 py-0 ps-1 has-[[data-slot=toc-indicator]]:before:pointer-events-none has-[[data-slot=toc-indicator]]:before:absolute has-[[data-slot=toc-indicator]]:before:inset-y-0.5 has-[[data-slot=toc-indicator]]:before:start-0 has-[[data-slot=toc-indicator]]:before:w-0.5 has-[[data-slot=toc-indicator]]:before:rounded-full has-[[data-slot=toc-indicator]]:before:bg-border has-[[data-slot=toc-indicator]]:before:content-['']", local.class)} {...others}/>;
+}
+function TocItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.Item data-slot="toc-item" class={cn('min-w-0', local.class)} {...others}/>;
+}
+function TocLink(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.Link data-slot="toc-link" class={cn('group/toc-link relative block min-w-0 overflow-hidden rounded-sm py-1 ps-[calc(0.875rem+max(0px,((var(--depth)-2)*0.5rem)))] pe-1 text-sm leading-5 text-ellipsis whitespace-nowrap text-muted-foreground no-underline outline-0 transition-colors duration-200 ring-inset focus-visible:ring-1 focus-visible:ring-ring has-[[data-slot=toc-rail]]:overflow-visible data-active:font-medium data-active:text-foreground motion-reduce:transition-none [@media(hover:hover)]:hover:text-foreground', local.class)} {...others}/>;
+}
+function TocIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.Indicator data-slot="toc-indicator" class={cn('pointer-events-none start-0 top-[calc(var(--top)+0.125rem)] z-1 h-[calc(var(--height)-0.25rem)] w-0.5 rounded-full bg-muted-foreground opacity-70 transition-[top,height] duration-200 motion-reduce:transition-none', local.class)} {...others}/>;
+}
+const nonScalingStrokeProps = {
+    'vector-effect': 'non-scaling-stroke'
+};
+const styleToString = (style)=>Object.entries(style).filter(([, value])=>void 0 !== value).map(([property, value])=>`${property}:${value}`).join(';');
+const getStyleObject = (style)=>'object' == typeof style && null !== style ? style : {};
+const mergeStyles = (base, override)=>{
+    if ('string' == typeof override) {
+        const baseStyle = 'string' == typeof base ? base : styleToString(getStyleObject(base));
+        return baseStyle ? `${baseStyle};${override}` : override;
+    }
+    if ('string' == typeof base) {
+        const overrideStyle = styleToString(getStyleObject(override));
+        return overrideStyle ? `${base};${overrideStyle}` : base;
+    }
+    const baseStyle = getStyleObject(base);
+    const overrideStyle = getStyleObject(override);
+    return Object.keys(baseStyle).length || Object.keys(overrideStyle).length ? {
+        ...baseStyle,
+        ...overrideStyle
+    } : void 0;
+};
+function TocRail(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'depth',
+        'nextDepth',
+        'previousDepth',
+        'style'
+    ]);
+    const lineOffset = ()=>getRailOffset(local.depth);
+    const previousLineOffset = ()=>getRailOffset(local.previousDepth ?? local.depth);
+    const nextLineOffset = ()=>getRailOffset(local.nextDepth ?? local.depth);
+    const hasTurn = ()=>previousLineOffset() !== lineOffset();
+    const width = ()=>Math.max(previousLineOffset(), lineOffset(), nextLineOffset()) + 2;
+    const height = ()=>lineOffset() === nextLineOffset() ? 'calc(100% + 0.5rem)' : '100%';
+    const getRailStyle = ()=>mergeStyles({
+            width: width(),
+            height: height()
+        }, local.style);
+    return <svg aria-hidden="true" data-slot="toc-rail" class={cn('pointer-events-none absolute start-0 -top-1.5 overflow-visible text-border group-data-active/toc-link:translate-y-0.5 group-data-active/toc-link:text-muted-foreground group-data-active/toc-link:opacity-70', local.class)} style={getRailStyle()} {...others}>
+      {hasTurn() && <path d={`M ${previousLineOffset() + 0.5} 0 C ${previousLineOffset() + 0.5} 8 ${lineOffset() + 0.5} 4 ${lineOffset() + 0.5} ${2 * railBridge}`} fill="none" {...nonScalingStrokeProps} stroke="currentColor" class="stroke-1"/>}
+      <line x1={lineOffset() + 0.5} y1={hasTurn() ? 2 * railBridge : railBridge} x2={lineOffset() + 0.5} y2="100%" {...nonScalingStrokeProps} stroke="currentColor" class="stroke-1"/>
+    </svg>;
+}
+const Toc_Toc = Object.assign(TocRoot, {
+    Root: TocRoot,
+    RootProvider: TocRootProvider,
+    Context: Toc.Context,
+    Content: TocContent,
+    Nav: TocNav,
+    Title: TocTitle,
+    List: TocList,
+    Item: TocItem,
+    Link: TocLink,
+    Indicator: TocIndicator,
+    Rail: TocRail
+});
+export { Toc_Toc as Toc, Toc_useToc as useToc, Toc_useTocContext as useTocContext };

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

@@ -0,0 +1 @@
+export { Toc, useToc, useTocContext } from './Toc.js';

package/dist/components/toc/index.js

@@ -0,0 +1 @@
+export { Toc, useToc, useTocContext } from "./Toc.js";

package/dist/components/toc/index.jsx

@@ -0,0 +1 @@
+export { Toc, useToc, useTocContext } from "./Toc.jsx";

package/dist/components/toggle/Toggle.d.ts

@@ -0,0 +1,17 @@
+import { Toggle as TogglePrimitive, useToggleContext } from '@ark-ui/solid/toggle';
+import type { ComponentProps } from 'solid-js';
+type ToggleVariant = 'default' | 'outline' | 'ghost';
+type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md' | 'icon-lg';
+type ToggleRootProps = ComponentProps<typeof TogglePrimitive.Root> & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+declare function ToggleRoot(props: ToggleRootProps): import("solid-js").JSX.Element;
+declare function ToggleIndicator(props: ComponentProps<typeof TogglePrimitive.Indicator>): import("solid-js").JSX.Element;
+declare const Toggle: typeof ToggleRoot & {
+    Root: typeof ToggleRoot;
+    Indicator: typeof ToggleIndicator;
+    Context: (props: TogglePrimitive.ContextProps) => import("solid-js").JSX.Element;
+};
+export { Toggle, useToggleContext };
+export type { ToggleRootProps, ToggleSize, ToggleVariant };

package/dist/components/toggle/Toggle.js

@@ -0,0 +1,76 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Toggle, ToggleContext, useToggleContext } from "@ark-ui/solid/toggle";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const toggleVariants = cva('box-border inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium appearance-none transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none whitespace-nowrap data-focus-visible:outline-2 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none data-[state=off]:active:bg-accent [@media(hover:hover)]:data-[state=off]:hover:bg-accent [&>svg]:block [&>svg]:size-4 [&>svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'border-secondary bg-secondary text-secondary-foreground data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
+            outline: 'border-border bg-background text-foreground data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
+            ghost: 'border-transparent bg-transparent text-foreground data-[state=on]:bg-accent data-[state=on]:text-foreground'
+        },
+        size: {
+            xs: 'min-h-control-xs px-2.5 py-0.5 text-xs',
+            sm: 'min-h-control-sm px-3 py-1',
+            md: 'min-h-control-md px-4 py-1',
+            lg: 'min-h-control-lg px-5 py-1.5 text-md',
+            'icon-sm': 'size-control-sm min-w-control-sm gap-0 p-0',
+            'icon-md': 'size-control-md min-w-control-md gap-0 p-0',
+            'icon-lg': 'size-control-lg min-w-control-lg gap-0 p-0'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});
+function ToggleRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'size',
+        'variant'
+    ]);
+    return createComponent(Toggle.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-slot": "toggle-root",
+        get ["data-variant"] () {
+            return local.variant ?? 'default';
+        },
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["class"] () {
+            return cn(toggleVariants({
+                variant: local.variant,
+                size: local.size
+            }), local.class);
+        }
+    }));
+}
+function ToggleIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Toggle.Indicator, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-slot": "toggle-indicator",
+        get ["class"] () {
+            return cn('inline-flex items-center justify-center text-inherit [&>svg]:block [&>svg]:size-4 [&>svg]:shrink-0', local.class);
+        }
+    }));
+}
+const Toggle_Toggle = Object.assign(ToggleRoot, {
+    Root: ToggleRoot,
+    Indicator: ToggleIndicator,
+    Context: ToggleContext
+});
+export { Toggle_Toggle as Toggle, useToggleContext };

package/dist/components/toggle/Toggle.jsx

@@ -0,0 +1,51 @@
+import { Toggle, ToggleContext, useToggleContext } from "@ark-ui/solid/toggle";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const toggleVariants = cva('box-border inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium appearance-none transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none whitespace-nowrap data-focus-visible:outline-2 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none data-[state=off]:active:bg-accent [@media(hover:hover)]:data-[state=off]:hover:bg-accent [&>svg]:block [&>svg]:size-4 [&>svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'border-secondary bg-secondary text-secondary-foreground data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
+            outline: 'border-border bg-background text-foreground data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
+            ghost: 'border-transparent bg-transparent text-foreground data-[state=on]:bg-accent data-[state=on]:text-foreground'
+        },
+        size: {
+            xs: 'min-h-control-xs px-2.5 py-0.5 text-xs',
+            sm: 'min-h-control-sm px-3 py-1',
+            md: 'min-h-control-md px-4 py-1',
+            lg: 'min-h-control-lg px-5 py-1.5 text-md',
+            'icon-sm': 'size-control-sm min-w-control-sm gap-0 p-0',
+            'icon-md': 'size-control-md min-w-control-md gap-0 p-0',
+            'icon-lg': 'size-control-lg min-w-control-lg gap-0 p-0'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});
+function ToggleRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'size',
+        'variant'
+    ]);
+    return <Toggle.Root asChild={local.asChild} {...others} data-slot="toggle-root" data-variant={local.variant ?? 'default'} data-size={local.size ?? 'md'} class={cn(toggleVariants({
+        variant: local.variant,
+        size: local.size
+    }), local.class)}/>;
+}
+function ToggleIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Toggle.Indicator asChild={local.asChild} {...others} data-slot="toggle-indicator" class={cn('inline-flex items-center justify-center text-inherit [&>svg]:block [&>svg]:size-4 [&>svg]:shrink-0', local.class)}/>;
+}
+const Toggle_Toggle = Object.assign(ToggleRoot, {
+    Root: ToggleRoot,
+    Indicator: ToggleIndicator,
+    Context: ToggleContext
+});
+export { Toggle_Toggle as Toggle, useToggleContext };

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

@@ -0,0 +1,2 @@
+export { Toggle, useToggleContext } from './Toggle.js';
+export type { ToggleRootProps, ToggleSize, ToggleVariant } from './Toggle.js';

package/dist/components/toggle/index.js

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

package/dist/components/toggle/index.jsx

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

package/dist/components/toggle-group/ToggleGroup.d.ts

@@ -0,0 +1,27 @@
+import { ToggleGroup as ToggleGroupPrimitive, useToggleGroup, useToggleGroupContext } from '@ark-ui/solid/toggle-group';
+import type { ComponentProps } from 'solid-js';
+type ToggleVariant = 'default' | 'outline' | 'ghost';
+type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md' | 'icon-lg';
+type ToggleGroupRootProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+type ToggleGroupRootProviderProps = ComponentProps<typeof ToggleGroupPrimitive.RootProvider> & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item> & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+declare function ToggleGroupRoot(props: ToggleGroupRootProps): import("solid-js").JSX.Element;
+declare function ToggleGroupRootProvider(props: ToggleGroupRootProviderProps): import("solid-js").JSX.Element;
+declare function ToggleGroupItem(props: ToggleGroupItemProps): import("solid-js").JSX.Element;
+declare const ToggleGroup: typeof ToggleGroupRoot & {
+    Root: typeof ToggleGroupRoot;
+    RootProvider: typeof ToggleGroupRootProvider;
+    Context: (props: ToggleGroupPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Item: typeof ToggleGroupItem;
+};
+export { ToggleGroup, useToggleGroup, useToggleGroupContext };
+export type { ToggleGroupItemProps, ToggleGroupRootProps, ToggleGroupRootProviderProps, ToggleSize, ToggleVariant, };