@ark-ui/solid 0.2.0 → 0.4.0

package/dist/splitter/splitter-panel.cjs

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const splitterContext = require('./splitter-context.cjs');
 
 const SplitterPanel = props => {
-  const [splitterPanelProps, divProps] = createSplitProps.createSplitProps()(props, ['id', 'snapSize']);
-  const splitter = splitterContext.useSplitterContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => splitter().getPanelProps(splitterPanelProps), divProps));
+  const [panelParams, restProps] = createSplitProps.createSplitProps()(props, ['id', 'snapSize']);
+  const api = splitterContext.useSplitterContext();
+  const panelProps = solid.mergeProps(() => api().getPanelProps(panelParams), restProps);
+  return web.createComponent(factory.ark.div, panelProps);
 };
 
 exports.SplitterPanel = SplitterPanel;

package/dist/splitter/splitter-panel.d.ts

@@ -1,8 +1,8 @@
 import type { JSX } from 'solid-js';
-import { type Assign } from '@polymorphic-factory/solid';
 import { type connect } from '@zag-js/splitter';
 import { type HTMLArkProps } from '../factory';
-type GetPanelProps = Parameters<ReturnType<typeof connect>['getPanelProps']>[0];
-export type SplitterPanelProps = Assign<HTMLArkProps<'div'>, GetPanelProps>;
+import type { Assign } from '../types';
+type PanelParams = Parameters<ReturnType<typeof connect>['getPanelProps']>[0];
+export type SplitterPanelProps = Assign<HTMLArkProps<'div'>, PanelParams>;
 export declare const SplitterPanel: (props: SplitterPanelProps) => JSX.Element;
 export {};

package/dist/splitter/splitter-panel.mjs

@@ -1,12 +1,14 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useSplitterContext } from './splitter-context.mjs';
 
 const SplitterPanel = props => {
-  const [splitterPanelProps, divProps] = createSplitProps()(props, ['id', 'snapSize']);
-  const splitter = useSplitterContext();
-  return createComponent(ark.div, mergeProps(() => splitter().getPanelProps(splitterPanelProps), divProps));
+  const [panelParams, restProps] = createSplitProps()(props, ['id', 'snapSize']);
+  const api = useSplitterContext();
+  const panelProps = mergeProps(() => api().getPanelProps(panelParams), restProps);
+  return createComponent(ark.div, panelProps);
 };
 
 export { SplitterPanel };

package/dist/splitter/splitter-resize-trigger.cjs

@@ -2,22 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const solidJs = require('solid-js');
 const web = require('solid-js/web');
-const ssrSpread = require('../ssr-spread.cjs');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
 const splitterContext = require('./splitter-context.cjs');
 
 const SplitterResizeTrigger = props => {
-  const splitter = splitterContext.useSplitterContext();
-  const triggerProps = splitter?.().getResizeTriggerProps(props);
-  const getChildren = solidJs.children(() => ssrSpread.ssrSpread(props.children, triggerProps));
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      web.spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const api = splitterContext.useSplitterContext();
+  const [triggerParams, restProps] = createSplitProps.createSplitProps()(props, ['disabled', 'id', 'step']);
+  const triggerProps = solid.mergeProps(() => api().getResizeTriggerProps(triggerParams), restProps);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.SplitterResizeTrigger = SplitterResizeTrigger;

package/dist/splitter/splitter-resize-trigger.d.ts

@@ -1,10 +1,8 @@
-import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
-import { type Assign } from '@polymorphic-factory/solid';
-import { type connect } from '@zag-js/splitter';
-import { type JSX } from 'solid-js';
-type SplitterContext = Parameters<ReturnType<typeof connect>['getResizeTriggerProps']>[0];
-export type SplitterResizeTriggerProps = Assign<{
-    children: JSX.Element;
-}, SplitterContext>;
-export declare const SplitterResizeTrigger: (props: SplitterResizeTriggerProps) => ResolvedChildren;
+import type { JSX } from 'solid-js';
+import { connect } from '@zag-js/splitter';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+type TriggerParams = Parameters<ReturnType<typeof connect>['getResizeTriggerProps']>[0];
+export type SplitterResizeTriggerProps = Assign<HTMLArkProps<'button'>, TriggerParams>;
+export declare const SplitterResizeTrigger: (props: SplitterResizeTriggerProps) => JSX.Element;
 export {};

package/dist/splitter/splitter-resize-trigger.mjs

@@ -1,19 +1,14 @@
-import { children, createEffect } from 'solid-js';
-import { spread } from 'solid-js/web';
-import { ssrSpread } from '../ssr-spread.mjs';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
 import { useSplitterContext } from './splitter-context.mjs';
 
 const SplitterResizeTrigger = props => {
-  const splitter = useSplitterContext();
-  const triggerProps = splitter?.().getResizeTriggerProps(props);
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const api = useSplitterContext();
+  const [triggerParams, restProps] = createSplitProps()(props, ['disabled', 'id', 'step']);
+  const triggerProps = mergeProps(() => api().getResizeTriggerProps(triggerParams), restProps);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { SplitterResizeTrigger };

package/dist/splitter/splitter.cjs

@@ -3,18 +3,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const splitterContext = require('./splitter-context.cjs');
 const useSplitter = require('./use-splitter.cjs');
 
 const Splitter = props => {
-  const [useSplitterProps, divProps] = createSplitProps.createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onResize', 'onResizeEnd', 'onResizeStart', 'orientation', 'size']);
-  const splitter = useSplitter.useSplitter(useSplitterProps);
+  const [splitterParams, divProps] = createSplitProps.createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onResize', 'onResizeEnd', 'onResizeStart', 'orientation', 'size']);
+  const api = useSplitter.useSplitter(splitterParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, divProps);
   return web.createComponent(splitterContext.SplitterProvider, {
-    value: splitter,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => splitter().rootProps, divProps));
+      return web.createComponent(factory.ark.div, rootProps);
     }
   });
 };

package/dist/splitter/splitter.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from 'solid-js';
-import { type Assign } from '@polymorphic-factory/solid';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type UseSplitterProps } from './use-splitter';
 export type SplitterProps = Assign<HTMLArkProps<'div'>, UseSplitterProps>;
 export declare const Splitter: (props: SplitterProps) => JSX.Element;

package/dist/splitter/splitter.mjs

@@ -1,16 +1,18 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { SplitterProvider } from './splitter-context.mjs';
 import { useSplitter } from './use-splitter.mjs';
 
 const Splitter = props => {
-  const [useSplitterProps, divProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onResize', 'onResizeEnd', 'onResizeStart', 'orientation', 'size']);
-  const splitter = useSplitter(useSplitterProps);
+  const [splitterParams, divProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onResize', 'onResizeEnd', 'onResizeStart', 'orientation', 'size']);
+  const api = useSplitter(splitterParams);
+  const rootProps = mergeProps(() => api().rootProps, divProps);
   return createComponent(SplitterProvider, {
-    value: splitter,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => splitter().rootProps, divProps));
+      return createComponent(ark.div, rootProps);
     }
   });
 };

package/dist/splitter/use-splitter.cjs

@@ -9,7 +9,7 @@ const environmentContext = require('../environment/environment-context.cjs');
 
 const useSplitter = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
   const [state, send] = solid.useMachine(splitter.machine(context), { context });
   return solidJs.createMemo(() => splitter.connect(state, send, solid.normalizeProps));
 };

package/dist/splitter/use-splitter.mjs

@@ -1,6 +1,6 @@
-import { useMachine, normalizeProps } from '@zag-js/solid';
+import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { machine, connect } from '@zag-js/splitter';
-import { mergeProps, createUniqueId, createMemo } from 'solid-js';
+import { createUniqueId, createMemo } from 'solid-js';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSplitter = (props) => {

package/dist/spread.cjs

@@ -2,24 +2,37 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const solidJs = require('solid-js');
 const web = require('solid-js/web');
-const filterObject = require('./filter-object.cjs');
+const filterProps = require('./filter-props.cjs');
+const mergeStyle = require('./merge-style.cjs');
 
 const getEventKey = (key) => `$$${key.toLowerCase().slice(2)}`;
+const hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
 const spread = (node, props) => {
-  const eventListeners = filterObject.filterObject(props, ([key]) => key.slice(0, 2) === "on");
-  const events = filterObject.filterObject(node, ([key]) => key.slice(0, 2) === "$$");
-  const result = Object.fromEntries(
-    Object.entries(eventListeners).map(([key, value]) => {
-      const prop = getEventKey(key);
-      const newValue = prop in events ? function(...args) {
-        events[prop](...args);
-        value(...args);
-      } : value;
-      return [key, newValue];
-    })
+  const parentProps = filterProps.filterProps(
+    props,
+    (key) => typeof key === "string" && key.slice(0, 2) === "on"
+  );
+  const nodeEvents = Object.fromEntries(
+    Object.keys(node).filter((prop) => prop.startsWith("$$")).map((prop) => [prop, node[prop]])
   );
-  web.spread(node, { ...props, ...result });
+  const composedProps = solidJs.createMemo(() => {
+    return filterProps.mapProps(parentProps, (key, value) => {
+      const prop = getEventKey(key);
+      if (hasOwn(nodeEvents, prop)) {
+        return function next(...args) {
+          value(...args);
+          nodeEvents[prop](...args);
+        };
+      }
+      if (key === "style") {
+        return mergeStyle.mergeStyle(node.style.cssText, value);
+      }
+      return value;
+    });
+  });
+  web.spread(node, solidJs.mergeProps(props, composedProps));
 };
 
 exports.spread = spread;

package/dist/spread.mjs

@@ -1,21 +1,34 @@
+import { createMemo, mergeProps } from 'solid-js';
 import { spread as spread$1 } from 'solid-js/web';
-import { filterObject } from './filter-object.mjs';
+import { filterProps, mapProps } from './filter-props.mjs';
+import { mergeStyle } from './merge-style.mjs';
 
 const getEventKey = (key) => `$$${key.toLowerCase().slice(2)}`;
+const hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
 const spread = (node, props) => {
-  const eventListeners = filterObject(props, ([key]) => key.slice(0, 2) === "on");
-  const events = filterObject(node, ([key]) => key.slice(0, 2) === "$$");
-  const result = Object.fromEntries(
-    Object.entries(eventListeners).map(([key, value]) => {
-      const prop = getEventKey(key);
-      const newValue = prop in events ? function(...args) {
-        events[prop](...args);
-        value(...args);
-      } : value;
-      return [key, newValue];
-    })
+  const parentProps = filterProps(
+    props,
+    (key) => typeof key === "string" && key.slice(0, 2) === "on"
+  );
+  const nodeEvents = Object.fromEntries(
+    Object.keys(node).filter((prop) => prop.startsWith("$$")).map((prop) => [prop, node[prop]])
   );
-  spread$1(node, { ...props, ...result });
+  const composedProps = createMemo(() => {
+    return mapProps(parentProps, (key, value) => {
+      const prop = getEventKey(key);
+      if (hasOwn(nodeEvents, prop)) {
+        return function next(...args) {
+          value(...args);
+          nodeEvents[prop](...args);
+        };
+      }
+      if (key === "style") {
+        return mergeStyle(node.style.cssText, value);
+      }
+      return value;
+    });
+  });
+  spread$1(node, mergeProps(props, composedProps));
 };
 
 export { spread };

package/dist/switch/index.d.ts

@@ -0,0 +1,6 @@
+export { Switch, type SwitchProps } from './switch';
+export { SwitchControl, type SwitchControlProps } from './switch-control';
+export { SwitchInput, type SwitchInputProps } from './switch-input';
+export { SwitchLabel, type SwitchLabelProps } from './switch-label';
+export { SwitchThumb, type SwitchThumbProps } from './switch-thumb';
+export { switchAnatomy } from './switch.anatomy';

package/dist/switch/switch-context.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [SwitchProvider, useSwitchContext] = createContext.createContext({
+  hookName: "useSwitchContext",
+  providerName: "<SwitchProvider />"
+});
+
+exports.SwitchProvider = SwitchProvider;
+exports.useSwitchContext = useSwitchContext;

package/dist/switch/switch-context.d.ts

@@ -0,0 +1,27 @@
+import type { Accessor, JSX } from 'solid-js';
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { type UseSwitchReturn } from './use-switch';
+export type SwitchContext = UseSwitchReturn;
+export declare const SwitchProvider: ContextProviderComponent<Accessor<{
+    isChecked: boolean;
+    isDisabled: boolean | undefined;
+    isFocused: boolean | undefined;
+    setChecked(checked: boolean): void;
+    toggleChecked(): void;
+    rootProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
+    labelProps: JSX.HTMLAttributes<any>;
+    thumbProps: JSX.HTMLAttributes<any>;
+    controlProps: JSX.HTMLAttributes<any>;
+    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+}>>, useSwitchContext: () => Accessor<{
+    isChecked: boolean;
+    isDisabled: boolean | undefined;
+    isFocused: boolean | undefined;
+    setChecked(checked: boolean): void;
+    toggleChecked(): void;
+    rootProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
+    labelProps: JSX.HTMLAttributes<any>;
+    thumbProps: JSX.HTMLAttributes<any>;
+    controlProps: JSX.HTMLAttributes<any>;
+    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+}>;

package/dist/switch/switch-context.mjs

@@ -0,0 +1,8 @@
+import { createContext } from '../create-context.mjs';
+
+const [SwitchProvider, useSwitchContext] = createContext({
+  hookName: "useSwitchContext",
+  providerName: "<SwitchProvider />"
+});
+
+export { SwitchProvider, useSwitchContext };

package/dist/switch/switch-control.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const switchContext = require('./switch-context.cjs');
+
+const SwitchControl = props => {
+  const checkbox = switchContext.useSwitchContext();
+  const controlProps = solid.mergeProps(() => checkbox().controlProps, props);
+  return web.createComponent(factory.ark.span, controlProps);
+};
+
+exports.SwitchControl = SwitchControl;

package/dist/switch/switch-control.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type SwitchControlProps = HTMLArkProps<'span'>;
+export declare const SwitchControl: (props: SwitchControlProps) => JSX.Element;

package/dist/switch/switch-control.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSwitchContext } from './switch-context.mjs';
+
+const SwitchControl = props => {
+  const checkbox = useSwitchContext();
+  const controlProps = mergeProps(() => checkbox().controlProps, props);
+  return createComponent(ark.span, controlProps);
+};
+
+export { SwitchControl };

package/dist/switch/switch-input.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const switchContext = require('./switch-context.cjs');
+
+const SwitchInput = props => {
+  const checkbox = switchContext.useSwitchContext();
+  const inputProps = solid.mergeProps(() => checkbox().inputProps, props);
+  return web.createComponent(factory.ark.input, inputProps);
+};
+
+exports.SwitchInput = SwitchInput;

package/dist/switch/switch-input.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type SwitchInputProps = HTMLArkProps<'input'>;
+export declare const SwitchInput: (props: SwitchInputProps) => JSX.Element;

package/dist/switch/switch-input.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSwitchContext } from './switch-context.mjs';
+
+const SwitchInput = props => {
+  const checkbox = useSwitchContext();
+  const inputProps = mergeProps(() => checkbox().inputProps, props);
+  return createComponent(ark.input, inputProps);
+};
+
+export { SwitchInput };

package/dist/switch/switch-label.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const switchContext = require('./switch-context.cjs');
+
+const SwitchLabel = props => {
+  const checkbox = switchContext.useSwitchContext();
+  const labelProps = solid.mergeProps(() => checkbox().labelProps, props);
+  return web.createComponent(factory.ark.span, labelProps);
+};
+
+exports.SwitchLabel = SwitchLabel;

package/dist/switch/switch-label.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type SwitchLabelProps = HTMLArkProps<'span'>;
+export declare const SwitchLabel: (props: SwitchLabelProps) => JSX.Element;

package/dist/switch/switch-label.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSwitchContext } from './switch-context.mjs';
+
+const SwitchLabel = props => {
+  const checkbox = useSwitchContext();
+  const labelProps = mergeProps(() => checkbox().labelProps, props);
+  return createComponent(ark.span, labelProps);
+};
+
+export { SwitchLabel };

package/dist/switch/switch-thumb.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const switchContext = require('./switch-context.cjs');
+
+const SwitchThumb = props => {
+  const checkbox = switchContext.useSwitchContext();
+  const thumbProps = solid.mergeProps(() => checkbox().thumbProps, props);
+  return web.createComponent(factory.ark.span, thumbProps);
+};
+
+exports.SwitchThumb = SwitchThumb;

package/dist/switch/switch-thumb.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type SwitchThumbProps = HTMLArkProps<'span'>;
+export declare const SwitchThumb: (props: SwitchThumbProps) => JSX.Element;

package/dist/switch/switch-thumb.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSwitchContext } from './switch-context.mjs';
+
+const SwitchThumb = props => {
+  const checkbox = useSwitchContext();
+  const thumbProps = mergeProps(() => checkbox().thumbProps, props);
+  return createComponent(ark.span, thumbProps);
+};
+
+export { SwitchThumb };

package/dist/switch/switch.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as switchAnatomy } from '@zag-js/switch';

package/dist/switch/switch.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const switchContext = require('./switch-context.cjs');
+const useSwitch = require('./use-switch.cjs');
+
+const Switch = props => {
+  const [switchProps, labelProps] = createSplitProps.createSplitProps()(props, ['checked', 'dir', 'disabled', 'focusable', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'label', 'name', 'onChange', 'readOnly', 'required', 'value']);
+  const api = useSwitch.useSwitch(switchProps);
+  const rootProps = solid.mergeProps(() => api().rootProps, labelProps);
+  const getChildren = () => runIfFn.runIfFn(props.children, api);
+  return web.createComponent(switchContext.SwitchProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(factory.ark.label, web.mergeProps(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+exports.Switch = Switch;

package/dist/switch/switch.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type SwitchContext } from './switch-context';
+import { type UseSwitchProps } from './use-switch';
+export type SwitchProps = Assign<HTMLArkProps<'label'>, UseSwitchProps & {
+    children?: JSX.Element | ((context: SwitchContext) => JSX.Element);
+}>;
+export declare const Switch: (props: SwitchProps) => JSX.Element;

package/dist/switch/switch.mjs

@@ -0,0 +1,26 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { SwitchProvider } from './switch-context.mjs';
+import { useSwitch } from './use-switch.mjs';
+
+const Switch = props => {
+  const [switchProps, labelProps] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'focusable', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'label', 'name', 'onChange', 'readOnly', 'required', 'value']);
+  const api = useSwitch(switchProps);
+  const rootProps = mergeProps(() => api().rootProps, labelProps);
+  const getChildren = () => runIfFn(props.children, api);
+  return createComponent(SwitchProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.label, mergeProps$1(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+export { Switch };

package/dist/switch/use-switch.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const solid = require('@zag-js/solid');
+const zagSwitch = require('@zag-js/switch');
+const solidJs = require('solid-js');
+const environmentContext = require('../environment/environment-context.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const zagSwitch__namespace = /*#__PURE__*/_interopNamespaceDefault(zagSwitch);
+
+const useSwitch = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const [state, send] = solid.useMachine(zagSwitch__namespace.machine(context), { context });
+  return solidJs.createMemo(() => zagSwitch__namespace.connect(state, send, solid.normalizeProps));
+};
+
+exports.useSwitch = useSwitch;