@ark-ui/solid 0.3.0 → 0.4.0

package/dist/pressable/use-pressable.cjs

@@ -28,7 +28,7 @@ const pressable__namespace = /*#__PURE__*/_interopNamespaceDefault(pressable);
 
 const usePressable = props => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solidJs.mergeProps({
+  const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);

package/dist/pressable/use-pressable.d.ts

@@ -3,7 +3,7 @@ import * as pressable from '@zag-js/pressable';
 import { type Optional } from '../types';
 export type UsePressableProps = Optional<pressable.Context, 'id'>;
 export type UsePressableReturn = ReturnType<typeof usePressable>;
-export declare const usePressable: (props?: UsePressableProps) => Accessor<{
+export declare const usePressable: (props: UsePressableProps) => Accessor<{
     isPressed: boolean;
     pressableProps: JSX.HTMLAttributes<any>;
 }>;

package/dist/pressable/use-pressable.mjs

@@ -1,6 +1,6 @@
 import * as pressable from '@zag-js/pressable';
-import { useMachine, normalizeProps } from '@zag-js/solid';
-import { mergeProps, createUniqueId, createMemo } from 'solid-js';
+import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
+import { createUniqueId, createMemo } from 'solid-js';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const usePressable = props => {

package/dist/radio-group/radio-group-context.d.ts

@@ -25,6 +25,7 @@ export declare const RadioGroupProvider: ContextProviderComponent<Accessor<{
     getRadioLabelProps(props: RadioProps): JSX.HTMLAttributes<any>;
     getRadioControlProps(props: RadioProps): JSX.HTMLAttributes<any>;
     getRadioInputProps(props: InputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
+    indicatorProps: JSX.HTMLAttributes<any>;
 }>>, useRadioGroupContext: () => Accessor<{
     value: string | null;
     setValue(value: string): void;
@@ -47,4 +48,5 @@ export declare const RadioGroupProvider: ContextProviderComponent<Accessor<{
     getRadioLabelProps(props: RadioProps): JSX.HTMLAttributes<any>;
     getRadioControlProps(props: RadioProps): JSX.HTMLAttributes<any>;
     getRadioInputProps(props: InputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
+    indicatorProps: JSX.HTMLAttributes<any>;
 }>;

package/dist/radio-group/use-radio-group.cjs

@@ -28,7 +28,7 @@ const radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 
 const useRadioGroup = props => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solidJs.mergeProps({
+  const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);

package/dist/radio-group/use-radio-group.d.ts

@@ -26,4 +26,5 @@ export declare const useRadioGroup: (props: UseRadioGroupProps) => Accessor<{
     getRadioLabelProps(props: RadioProps): JSX.HTMLAttributes<any>;
     getRadioControlProps(props: RadioProps): JSX.HTMLAttributes<any>;
     getRadioInputProps(props: InputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
+    indicatorProps: JSX.HTMLAttributes<any>;
 }>;

package/dist/radio-group/use-radio-group.mjs

@@ -1,6 +1,6 @@
 import * as radio from '@zag-js/radio-group';
-import { useMachine, normalizeProps } from '@zag-js/solid';
-import { mergeProps, createUniqueId, createMemo } from 'solid-js';
+import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
+import { createUniqueId, createMemo } from 'solid-js';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRadioGroup = props => {

package/dist/range-slider/use-range-slider.cjs

@@ -28,7 +28,7 @@ const rangeSlider__namespace = /*#__PURE__*/_interopNamespaceDefault(rangeSlider
 
 const useRangeSlider = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), values: props.value, getRootNode }, props);
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), values: props.value, getRootNode }, props);
   const [state, send] = solid.useMachine(rangeSlider__namespace.machine(context), {
     context
   });

package/dist/range-slider/use-range-slider.mjs

@@ -1,6 +1,6 @@
 import * as rangeSlider from '@zag-js/range-slider';
-import { useMachine, normalizeProps } from '@zag-js/solid';
-import { mergeProps, createUniqueId, createMemo } from 'solid-js';
+import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
+import { createUniqueId, createMemo } from 'solid-js';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRangeSlider = (props) => {

package/dist/rating-group/rating-context.d.ts

@@ -1,17 +1,6 @@
+import type { ItemState } from '@zag-js/rating-group/dist/rating-group.types';
 import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
 import { type connect } from '@zag-js/rating-group';
 import type { Accessor } from 'solid-js';
 export type RatingContext = ReturnType<ReturnType<typeof connect>['getRatingState']>;
-export declare const RatingProvider: ContextProviderComponent<Accessor<{
-    isEqual: boolean;
-    isValueEmpty: boolean;
-    isHighlighted: boolean;
-    isHalf: boolean;
-    isChecked: boolean;
-}>>, useRatingContext: () => Accessor<{
-    isEqual: boolean;
-    isValueEmpty: boolean;
-    isHighlighted: boolean;
-    isHalf: boolean;
-    isChecked: boolean;
-}>;
+export declare const RatingProvider: ContextProviderComponent<Accessor<ItemState>>, useRatingContext: () => Accessor<ItemState>;

package/dist/rating-group/rating-group-context.d.ts

@@ -1,3 +1,4 @@
+import type { ItemProps, ItemState } from '@zag-js/rating-group/dist/rating-group.types';
 import type { Accessor, JSX } from 'solid-js';
 import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
 import { type UseRatingGroupReturn } from './use-rating-group';
@@ -10,20 +11,12 @@ export declare const RatingGroupProvider: ContextProviderComponent<Accessor<{
     hoveredValue: number;
     size: number;
     sizeArray: number[];
-    getRatingState(index: number): {
-        isEqual: boolean;
-        isValueEmpty: boolean;
-        isHighlighted: boolean;
-        isHalf: boolean;
-        isChecked: boolean;
-    };
+    getRatingState(props: ItemProps): ItemState;
     rootProps: JSX.HTMLAttributes<any>;
     hiddenInputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
     labelProps: JSX.HTMLAttributes<any>;
     controlProps: JSX.HTMLAttributes<any>;
-    getRatingProps({ index }: {
-        index: number;
-    }): JSX.HTMLAttributes<any>;
+    getRatingProps(props: ItemProps): JSX.HTMLAttributes<any>;
 }>>, useRatingGroupContext: () => Accessor<{
     setValue(value: number): void;
     clearValue(): void;
@@ -32,18 +25,10 @@ export declare const RatingGroupProvider: ContextProviderComponent<Accessor<{
     hoveredValue: number;
     size: number;
     sizeArray: number[];
-    getRatingState(index: number): {
-        isEqual: boolean;
-        isValueEmpty: boolean;
-        isHighlighted: boolean;
-        isHalf: boolean;
-        isChecked: boolean;
-    };
+    getRatingState(props: ItemProps): ItemState;
     rootProps: JSX.HTMLAttributes<any>;
     hiddenInputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
     labelProps: JSX.HTMLAttributes<any>;
     controlProps: JSX.HTMLAttributes<any>;
-    getRatingProps({ index }: {
-        index: number;
-    }): JSX.HTMLAttributes<any>;
+    getRatingProps(props: ItemProps): JSX.HTMLAttributes<any>;
 }>;

package/dist/rating-group/rating.cjs

@@ -13,7 +13,7 @@ const ratingGroupContext = require('./rating-group-context.cjs');
 const Rating = props => {
   const [ratingParams, restProps] = createSplitProps.createSplitProps()(props, ['index']);
   const api = ratingGroupContext.useRatingGroupContext();
-  const ratingState = () => api().getRatingState(ratingParams.index);
+  const ratingState = () => api().getRatingState(ratingParams);
   const getChildren = () => runIfFn.runIfFn(restProps.children, ratingState);
   const ratingProps = solid.mergeProps(() => api().getRatingProps(ratingParams), restProps);
   return web.createComponent(factory.ark.span, web.mergeProps(ratingProps, {

package/dist/rating-group/rating.d.ts

@@ -1,10 +1,10 @@
+import type { ItemProps } from '@zag-js/rating-group';
 import type { Accessor } from 'solid-js';
 import { type JSX } from 'solid-js/jsx-runtime';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type RatingContext } from './rating-context';
-export type RatingProps = Assign<HTMLArkProps<'span'>, {
-    index: number;
+export type RatingProps = Assign<HTMLArkProps<'span'>, ItemProps & {
     children: (state: Accessor<RatingContext>) => JSX.Element | JSX.Element;
 }>;
 export declare const Rating: (props: RatingProps) => JSX.Element;

package/dist/rating-group/rating.mjs

@@ -9,7 +9,7 @@ import { useRatingGroupContext } from './rating-group-context.mjs';
 const Rating = props => {
   const [ratingParams, restProps] = createSplitProps()(props, ['index']);
   const api = useRatingGroupContext();
-  const ratingState = () => api().getRatingState(ratingParams.index);
+  const ratingState = () => api().getRatingState(ratingParams);
   const getChildren = () => runIfFn(restProps.children, ratingState);
   const ratingProps = mergeProps(() => api().getRatingProps(ratingParams), restProps);
   return createComponent(ark.span, mergeProps$1(ratingProps, {

package/dist/rating-group/use-rating-group.cjs

@@ -28,7 +28,7 @@ const rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
 
 const useRatingGroup = props => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solidJs.mergeProps({
+  const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode
   }, props);

package/dist/rating-group/use-rating-group.d.ts

@@ -11,18 +11,10 @@ export declare const useRatingGroup: (props: UseRatingGroupProps) => Accessor<{
     hoveredValue: number;
     size: number;
     sizeArray: number[];
-    getRatingState(index: number): {
-        isEqual: boolean;
-        isValueEmpty: boolean;
-        isHighlighted: boolean;
-        isHalf: boolean;
-        isChecked: boolean;
-    };
+    getRatingState(props: rating.ItemProps): rating.ItemState;
     rootProps: JSX.HTMLAttributes<any>;
     hiddenInputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
     labelProps: JSX.HTMLAttributes<any>;
     controlProps: JSX.HTMLAttributes<any>;
-    getRatingProps({ index }: {
-        index: number;
-    }): JSX.HTMLAttributes<any>;
+    getRatingProps(props: rating.ItemProps): JSX.HTMLAttributes<any>;
 }>;

package/dist/rating-group/use-rating-group.mjs

@@ -1,6 +1,6 @@
 import * as rating from '@zag-js/rating-group';
-import { useMachine, normalizeProps } from '@zag-js/solid';
-import { mergeProps, createUniqueId, createMemo } from 'solid-js';
+import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
+import { createUniqueId, createMemo } from 'solid-js';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRatingGroup = props => {

package/dist/select/use-select.cjs

@@ -28,7 +28,7 @@ const select__namespace = /*#__PURE__*/_interopNamespaceDefault(select);
 
 const useSelect = (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(select__namespace.machine(context), {
     context
   });

package/dist/select/use-select.mjs

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

package/dist/slider/use-slider.cjs

@@ -28,7 +28,7 @@ const slider__namespace = /*#__PURE__*/_interopNamespaceDefault(slider);
 
 const useSlider = (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(slider__namespace.machine(context), { context });
   return solidJs.createMemo(() => slider__namespace.connect(state, send, solid.normalizeProps));
 };

package/dist/slider/use-slider.mjs

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

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/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;