@moduix/solid 1.0.0

package/dist/components/toc/Toc.js

@@ -0,0 +1,221 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { Toc, useToc, useTocContext } from "@ark-ui/solid/toc";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Toc_module from "./Toc.module.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 clsx(Toc_module.root, 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 clsx(Toc_module.root, 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 clsx(Toc_module.content, local.class);
+        }
+    }, others));
+}
+function TocNav(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.Nav, mergeProps({
+        "data-slot": "toc-nav",
+        get ["class"] () {
+            return clsx(Toc_module.nav, local.class);
+        }
+    }, others));
+}
+function TocTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.Title, mergeProps({
+        "data-slot": "toc-title",
+        get ["class"] () {
+            return clsx(Toc_module.title, local.class);
+        }
+    }, others));
+}
+function TocList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.List, mergeProps({
+        "data-slot": "toc-list",
+        get ["class"] () {
+            return clsx(Toc_module.list, local.class);
+        }
+    }, others));
+}
+function TocItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.Item, mergeProps({
+        "data-slot": "toc-item",
+        get ["class"] () {
+            return clsx(Toc_module.item, local.class);
+        }
+    }, others));
+}
+function TocLink(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.Link, mergeProps({
+        "data-slot": "toc-link",
+        get ["class"] () {
+            return clsx(Toc_module.link, local.class);
+        }
+    }, others));
+}
+function TocIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toc.Indicator, mergeProps({
+        "data-slot": "toc-indicator",
+        get ["class"] () {
+            return clsx(Toc_module.indicator, 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% + ${railBridge}px + var(--moduix-table-of-contents-list-gap, var(--moduix-spacing-0-5)))` : '100%';
+    const getRailStyle = ()=>mergeStyles({
+            width: width(),
+            height: height()
+        }, local.style);
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        spread(_el$, mergeProps({
+            get ["class"] () {
+                return clsx(Toc_module.rail, 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"
+                    }), 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"
+        }), 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,130 @@
+import { Toc, useToc, useTocContext } from "@ark-ui/solid/toc";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Toc_module from "./Toc.module.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={clsx(Toc_module.root, 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={clsx(Toc_module.root, local.class)} style={getRootStyle()} {...others}/>;
+}
+function TocContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.Content data-slot="toc-content" class={clsx(Toc_module.content, local.class)} {...others}/>;
+}
+function TocNav(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.Nav data-slot="toc-nav" class={clsx(Toc_module.nav, local.class)} {...others}/>;
+}
+function TocTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.Title data-slot="toc-title" class={clsx(Toc_module.title, local.class)} {...others}/>;
+}
+function TocList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.List data-slot="toc-list" class={clsx(Toc_module.list, local.class)} {...others}/>;
+}
+function TocItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.Item data-slot="toc-item" class={clsx(Toc_module.item, local.class)} {...others}/>;
+}
+function TocLink(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.Link data-slot="toc-link" class={clsx(Toc_module.link, local.class)} {...others}/>;
+}
+function TocIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toc.Indicator data-slot="toc-indicator" class={clsx(Toc_module.indicator, 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% + ${railBridge}px + var(--moduix-table-of-contents-list-gap, var(--moduix-spacing-0-5)))` : '100%';
+    const getRailStyle = ()=>mergeStyles({
+            width: width(),
+            height: height()
+        }, local.style);
+    return <svg aria-hidden="true" data-slot="toc-rail" class={clsx(Toc_module.rail, 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"/>}
+      <line x1={lineOffset() + 0.5} y1={hasTurn() ? 2 * railBridge : railBridge} x2={lineOffset() + 0.5} y2="100%" {...nonScalingStrokeProps} stroke="currentColor"/>
+    </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/Toc.module.js

@@ -0,0 +1,13 @@
+import "./Toc_module.css";
+const Toc_module = {
+    root: "root-VBggED",
+    content: "content-AHeziM",
+    nav: "nav-q0EDqs",
+    title: "title-RjjR4J",
+    list: "list-KZD4Qg",
+    indicator: "indicator-Zeit8l",
+    item: "item-xFlCTb",
+    link: "link-L4LQA0",
+    rail: "rail-BwE9eo"
+};
+export default Toc_module;

package/dist/components/toc/Toc.module.jsx

@@ -0,0 +1,13 @@
+import "./Toc_module.css";
+const Toc_module = {
+    root: "root-VBggED",
+    content: "content-AHeziM",
+    nav: "nav-q0EDqs",
+    title: "title-RjjR4J",
+    list: "list-KZD4Qg",
+    indicator: "indicator-Zeit8l",
+    item: "item-xFlCTb",
+    link: "link-L4LQA0",
+    rail: "rail-BwE9eo"
+};
+export default Toc_module;

package/dist/components/toc/Toc_module.css

@@ -0,0 +1,184 @@
+@layer moduix.components {
+  .root-VBggED {
+    box-sizing: border-box;
+    grid-template-columns: minmax(0, 1fr) minmax(var(--moduix-table-of-contents-nav-min-width, 12rem),
+        var(--moduix-table-of-contents-nav-width, 16rem));
+    gap: var(--moduix-table-of-contents-gap, var(--moduix-spacing-6));
+    width: 100%;
+    min-width: 0;
+    color: var(--moduix-table-of-contents-color, var(--moduix-color-foreground));
+    --_moduix-toc-indicator-top: var(--top);
+    --_moduix-toc-indicator-height: var(--height);
+    display: grid;
+  }
+
+  @media (width <= 48rem) {
+    .root-VBggED {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  .content-AHeziM {
+    scroll-behavior: smooth;
+    min-width: 0;
+  }
+
+  .content-AHeziM:has( ~ .nav-q0EDqs[data-placement="left"]) {
+    grid-area: 1 / 2;
+  }
+
+  .nav-q0EDqs {
+    top: var(--moduix-table-of-contents-nav-top, var(--moduix-spacing-4));
+    max-height: var(--moduix-table-of-contents-nav-max-height, calc(100dvh - 2rem));
+    padding: var(--moduix-table-of-contents-nav-padding, var(--moduix-spacing-4));
+    border: var(--moduix-table-of-contents-nav-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-table-of-contents-nav-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-table-of-contents-nav-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-table-of-contents-nav-bg, var(--moduix-color-card));
+    align-self: start;
+    position: sticky;
+    overflow: auto;
+  }
+
+  .nav-q0EDqs[data-placement="left"] {
+    grid-area: 1 / 1;
+  }
+
+  .root-VBggED:has(.nav-q0EDqs[data-placement="left"]) {
+    grid-template-columns: minmax(var(--moduix-table-of-contents-nav-min-width, 12rem),
+        var(--moduix-table-of-contents-nav-width, 16rem)) minmax(0, 1fr);
+  }
+
+  @media (width <= 48rem) {
+    .root-VBggED:has(.nav-q0EDqs[data-placement="left"]) .nav-q0EDqs[data-placement="left"] {
+      grid-area: auto;
+    }
+
+    .root-VBggED:has(.nav-q0EDqs[data-placement="left"]) .content-AHeziM:has( ~ .nav-q0EDqs[data-placement="left"]) {
+      grid-area: auto;
+    }
+  }
+
+  .title-RjjR4J {
+    margin: 0 0 var(--moduix-table-of-contents-title-margin-bottom, var(--moduix-spacing-2));
+    color: var(--moduix-table-of-contents-title-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-table-of-contents-title-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-table-of-contents-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-table-of-contents-title-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  .list-KZD4Qg {
+    gap: var(--moduix-table-of-contents-list-gap, var(--moduix-spacing-0-5));
+    margin: 0;
+    padding-block: 0;
+    padding-inline-start: var(--moduix-table-of-contents-list-padding-start, var(--moduix-spacing-1));
+    list-style: none;
+    display: grid;
+    position: relative;
+  }
+
+  .list-KZD4Qg:has(.indicator-Zeit8l):before {
+    top: var(--moduix-spacing-0-5);
+    bottom: var(--moduix-spacing-0-5);
+    width: var(--moduix-table-of-contents-indicator-width, var(--moduix-border-width-md));
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-table-of-contents-indicator-track-bg, var(--moduix-color-border));
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    inset-inline-start: 0;
+  }
+
+  .item-xFlCTb {
+    min-width: 0;
+  }
+
+  .link-L4LQA0 {
+    min-width: 0;
+    padding-block: var(--moduix-table-of-contents-link-padding-y, var(--moduix-spacing-1));
+    border-radius: var(--moduix-table-of-contents-link-radius, var(--moduix-radius-sm));
+    color: var(--moduix-table-of-contents-link-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-table-of-contents-link-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-table-of-contents-link-line-height, var(--moduix-line-height-text-sm));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: color var(--moduix-transition-default);
+    outline: none;
+    padding-inline-start: calc(var(--moduix-table-of-contents-link-padding-x, var(--moduix-spacing-1)) +
+        var(--moduix-table-of-contents-indicator-width, var(--moduix-border-width-md)) +
+        var(--moduix-spacing-2) +
+        max(0px,
+          calc((var(--depth) - 2) *
+              var(--moduix-table-of-contents-link-indent, var(--moduix-spacing-2)))));
+    padding-inline-end: var(--moduix-table-of-contents-link-padding-x, var(--moduix-spacing-1));
+    text-decoration: none;
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  @media (hover: hover) {
+    .link-L4LQA0:hover {
+      color: var(--moduix-table-of-contents-link-color-hover, var(--moduix-color-foreground));
+    }
+  }
+
+  .link-L4LQA0:focus-visible {
+    box-shadow: 0 0 0
+        var(--moduix-table-of-contents-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        var(--moduix-table-of-contents-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .link-L4LQA0[data-active] {
+    color: var(--moduix-table-of-contents-link-color-active, var(--moduix-color-foreground));
+    font-weight: var(--moduix-table-of-contents-link-font-weight-active, var(--moduix-weight-medium));
+  }
+
+  .link-L4LQA0[data-active] .rail-BwE9eo {
+    color: var(--moduix-table-of-contents-indicator-bg, var(--moduix-color-muted-foreground));
+    opacity: .7;
+    translate: 0 var(--moduix-spacing-0-5);
+  }
+
+  .link-L4LQA0:has(.rail-BwE9eo) {
+    overflow: visible;
+  }
+
+  .indicator-Zeit8l {
+    z-index: 1;
+    top: calc(var(--_moduix-toc-indicator-top) + var(--moduix-spacing-0-5));
+    width: var(--moduix-table-of-contents-indicator-width, var(--moduix-border-width-md));
+    height: calc(var(--_moduix-toc-indicator-height) - var(--moduix-spacing-1));
+    border-radius: var(--moduix-table-of-contents-indicator-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-table-of-contents-indicator-bg, var(--moduix-color-muted-foreground));
+    opacity: .7;
+    pointer-events: none;
+    transition: top var(--moduix-transition-default),
+      height var(--moduix-transition-default);
+    inset-inline-start: 0;
+  }
+
+  .rail-BwE9eo {
+    top: calc(-1 * var(--moduix-spacing-1-5));
+    color: var(--moduix-table-of-contents-rail-color, var(--moduix-color-border));
+    pointer-events: none;
+    position: absolute;
+    inset-inline-start: 0;
+    overflow: visible;
+  }
+
+  .rail-BwE9eo :is(line, path) {
+    stroke-width: var(--moduix-border-width-sm);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .content-AHeziM {
+      scroll-behavior: auto;
+    }
+
+    .indicator-Zeit8l {
+      transition: none;
+    }
+  }
+}
+

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,51 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Toggle, ToggleContext, useToggleContext } from "@ark-ui/solid/toggle";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Toggle_module from "./Toggle.module.js";
+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 clsx(Toggle_module.root, 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 clsx(Toggle_module.indicator, 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,26 @@
+import { Toggle, ToggleContext, useToggleContext } from "@ark-ui/solid/toggle";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Toggle_module from "./Toggle.module.jsx";
+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={clsx(Toggle_module.root, local.class)}/>;
+}
+function ToggleIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Toggle.Indicator asChild={local.asChild} {...others} data-slot="toggle-indicator" class={clsx(Toggle_module.indicator, 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.module.js

@@ -0,0 +1,6 @@
+import "./Toggle_module.css";
+const Toggle_module = {
+    root: "root-FOmqpM",
+    indicator: "indicator-zhyTn2"
+};
+export default Toggle_module;

package/dist/components/toggle/Toggle.module.jsx

@@ -0,0 +1,6 @@
+import "./Toggle_module.css";
+const Toggle_module = {
+    root: "root-FOmqpM",
+    indicator: "indicator-zhyTn2"
+};
+export default Toggle_module;