@ark-ui/solid 1.0.0-beta.0 → 1.0.0-beta.2

package/source/select/index.js

@@ -0,0 +1,33 @@
+import { Select as SelectRoot } from './select';
+import { SelectClearTrigger } from './select-clear-trigger';
+import { SelectContent } from './select-content';
+import { useSelectContext } from './select-context';
+import { SelectControl } from './select-control';
+import { SelectIndicator } from './select-indicator';
+import { SelectItem } from './select-item';
+import { useSelectItemContext } from './select-item-context';
+import { SelectItemGroup } from './select-item-group';
+import { SelectItemGroupLabel } from './select-item-group-label';
+import { SelectItemIndicator } from './select-item-indicator';
+import { SelectItemText } from './select-item-text';
+import { SelectLabel } from './select-label';
+import { SelectPositioner } from './select-positioner';
+import { SelectTrigger } from './select-trigger';
+import { SelectValueText } from './select-value-text';
+const Select = Object.assign(SelectRoot, {
+    Root: SelectRoot,
+    ClearTrigger: SelectClearTrigger,
+    Content: SelectContent,
+    Control: SelectControl,
+    Indicator: SelectIndicator,
+    Item: SelectItem,
+    ItemGroup: SelectItemGroup,
+    ItemGroupLabel: SelectItemGroupLabel,
+    ItemIndicator: SelectItemIndicator,
+    ItemText: SelectItemText,
+    Label: SelectLabel,
+    Positioner: SelectPositioner,
+    Trigger: SelectTrigger,
+    ValueText: SelectValueText,
+});
+export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, useSelectContext, useSelectItemContext, };

package/source/select/select-clear-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSelectContext } from './select-context';
+export const SelectClearTrigger = (props) => {
+    const api = useSelectContext();
+    const mergedProps = mergeProps(() => api().clearTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/select/select-content.jsx

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { Presence, splitPresenceProps } from '../presence';
+import { useSelectContext } from './select-context';
+export const SelectContent = (props) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const api = useSelectContext();
+    const mergedProps = mergeProps(() => api().contentProps, localProps);
+    return (<Presence present={api().isOpen} {...presenceProps}>
+      <ark.div {...mergedProps}/>
+    </Presence>);
+};

package/source/select/select-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../create-context';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const [SelectProvider, useSelectContext] = createContext({
+    hookName: 'useSelectContext',
+    providerName: '<SelectProvider />',
+});

package/source/select/select-control.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSelectContext } from './select-context';
+export const SelectControl = (props) => {
+    const api = useSelectContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/select/select-indicator.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSelectContext } from './select-context';
+export const SelectIndicator = (props) => {
+    const api = useSelectContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/select/select-item-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [SelectItemProvider, useSelectItemContext] = createContext({
+    hookName: 'useSelectItemContext',
+    providerName: '<SelectItemProvider />',
+});

package/source/select/select-item-group-label.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useSelectContext } from './select-context';
+export const SelectItemGroupLabel = (props) => {
+    const [labelProps, localProps] = createSplitProps()(props, ['htmlFor']);
+    const api = useSelectContext();
+    const mergedProps = mergeProps(() => api().getItemGroupLabelProps(labelProps), localProps);
+    return <ark.div {...mergedProps}/>;
+};

package/source/select/select-item-group.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useSelectContext } from './select-context';
+export const SelectItemGroup = (props) => {
+    const [groupProps, localProps] = createSplitProps()(props, ['id']);
+    const api = useSelectContext();
+    const mergedProps = mergeProps(() => api().getItemGroupProps(groupProps), localProps);
+    return <ark.div {...mergedProps}/>;
+};

package/source/select/select-item-indicator.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSelectContext } from './select-context';
+import { useSelectItemContext } from './select-item-context';
+export const SelectItemIndicator = (props) => {
+    const api = useSelectContext();
+    const itemProps = useSelectItemContext();
+    const mergedProps = mergeProps(() => api().getItemIndicatorProps(itemProps), props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/select/select-item-text.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSelectContext } from './select-context';
+import { useSelectItemContext } from './select-item-context';
+export const SelectItemText = (props) => {
+    const api = useSelectContext();
+    const itemProps = useSelectItemContext();
+    const mergedProps = mergeProps(() => api().getItemTextProps(itemProps), props);
+    return <ark.span {...mergedProps}/>;
+};

package/source/select/select-item.jsx

@@ -0,0 +1,15 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useSelectContext } from './select-context';
+import { SelectItemProvider } from './select-item-context';
+export const SelectItem = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, ['item']);
+    const api = useSelectContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+    const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+    return (<SelectItemProvider value={itemProps}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </SelectItemProvider>);
+};

package/source/select/select-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSelectContext } from './select-context';
+export const SelectLabel = (props) => {
+    const api = useSelectContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
+};

package/source/select/select-positioner.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSelectContext } from './select-context';
+export const SelectPositioner = (props) => {
+    const api = useSelectContext();
+    const mergedProps = mergeProps(() => api().positionerProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/select/select-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSelectContext } from './select-context';
+export const SelectTrigger = (props) => {
+    const api = useSelectContext();
+    const mergedProps = mergeProps(() => api().triggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/select/select-value-text.jsx

@@ -0,0 +1,9 @@
+import { selectAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSelectContext } from './select-context';
+export const SelectValueText = (props) => {
+    const api = useSelectContext();
+    const mergedProps = mergeProps(() => selectAnatomy.build().valueText.attrs, props);
+    return <ark.span {...mergedProps}>{api().valueAsString || props.placeholder}</ark.span>;
+};

package/source/select/select.jsx

@@ -0,0 +1,43 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { SelectProvider } from './select-context';
+import { useSelect } from './use-select';
+export const Select = (props) => {
+    const [selectProps, localProps] = createSplitProps()(props, [
+        'closeOnSelect',
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'highlightedValue',
+        'id',
+        'ids',
+        'invalid',
+        'isItemDisabled',
+        'items',
+        'itemToString',
+        'itemToValue',
+        'loop',
+        'multiple',
+        'name',
+        'onFocusOutside',
+        'onHighlightChange',
+        'onInteractOutside',
+        'onOpenChange',
+        'onPointerDownOutside',
+        'onValueChange',
+        'open',
+        'positioning',
+        'readOnly',
+        'selectOnBlur',
+        'value',
+    ]);
+    const api = useSelect(selectProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<SelectProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </SelectProvider>);
+};

package/source/select/use-select.js

@@ -0,0 +1,20 @@
+import * as select from '@zag-js/select';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { useEnvironmentContext } from '../environment';
+export const useSelect = (props) => {
+    const [collectionOptions, rest] = createSplitProps()(props, [
+        'isItemDisabled',
+        'itemToValue',
+        'itemToString',
+        'items',
+    ]);
+    const collection = select.collection(collectionOptions);
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode, collection }, rest);
+    const [state, send] = useMachine(select.machine(context), {
+        context,
+    });
+    return createMemo(() => select.connect(state, send, normalizeProps));
+};

package/source/slider/index.js

@@ -0,0 +1,22 @@
+import { Slider as SliderRoot } from './slider';
+import { useSliderContext } from './slider-context';
+import { SliderControl } from './slider-control';
+import { SliderLabel } from './slider-label';
+import { SliderMarker } from './slider-marker';
+import { SliderMarkerGroup } from './slider-marker-group';
+import { SliderOutput } from './slider-output';
+import { SliderRange } from './slider-range';
+import { SliderThumb } from './slider-thumb';
+import { SliderTrack } from './slider-track';
+const Slider = Object.assign(SliderRoot, {
+    Root: SliderRoot,
+    Control: SliderControl,
+    Label: SliderLabel,
+    Marker: SliderMarker,
+    MarkerGroup: SliderMarkerGroup,
+    Output: SliderOutput,
+    Range: SliderRange,
+    Thumb: SliderThumb,
+    Track: SliderTrack,
+});
+export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack, useSliderContext, };

package/source/slider/slider-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [SliderProvider, useSliderContext] = createContext({
+    hookName: 'useSliderContext',
+    providerName: '<SliderProvider />',
+});

package/source/slider/slider-control.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSliderContext } from './slider-context';
+export const SliderControl = (props) => {
+    const api = useSliderContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/slider/slider-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSliderContext } from './slider-context';
+export const SliderLabel = (props) => {
+    const api = useSliderContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
+};

package/source/slider/slider-marker-group.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSliderContext } from './slider-context';
+export const SliderMarkerGroup = (props) => {
+    const api = useSliderContext();
+    const mergedProps = mergeProps(() => api().markerGroupProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/slider/slider-marker.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useSliderContext } from './slider-context';
+export const SliderMarker = (props) => {
+    const [markerProps, localProps] = createSplitProps()(props, ['value']);
+    const api = useSliderContext();
+    const mergedProps = mergeProps(() => api().getMarkerProps(markerProps), localProps);
+    return <ark.span {...mergedProps}/>;
+};

package/source/slider/slider-output.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useSliderContext } from './slider-context';
+export const SliderOutput = (props) => {
+    const slider = useSliderContext();
+    const getChildren = () => runIfFn(props.children, slider);
+    const outputProps = mergeProps(() => slider().outputProps, props);
+    return <ark.output {...outputProps}>{getChildren()}</ark.output>;
+};

package/source/slider/slider-range.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSliderContext } from './slider-context';
+export const SliderRange = (props) => {
+    const api = useSliderContext();
+    const mergedProps = mergeProps(() => api().rangeProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/slider/slider-thumb.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useSliderContext } from './slider-context';
+export const SliderThumb = (props) => {
+    const [thumbProps, localProps] = createSplitProps()(props, ['index']);
+    const api = useSliderContext();
+    const mergePdrops = mergeProps(() => api().getThumbProps(thumbProps), localProps);
+    return <ark.div {...mergePdrops}/>;
+};

package/source/slider/slider-track.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSliderContext } from './slider-context';
+export const SliderTrack = (props) => {
+    const api = useSliderContext();
+    const mergedProps = mergeProps(() => api().trackProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/slider/slider.jsx

@@ -0,0 +1,41 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { SliderProvider } from './slider-context';
+import { useSlider } from './use-slider';
+export const Slider = (props) => {
+    const [sliderParams, restProps] = createSplitProps()(props, [
+        'aria-label',
+        'aria-labelledby',
+        'dir',
+        'disabled',
+        'form',
+        'getAriaValueText',
+        'getRootNode',
+        'id',
+        'ids',
+        'invalid',
+        'max',
+        'min',
+        'minStepsBetweenThumbs',
+        'name',
+        'onFocusChange',
+        'onValueChange',
+        'onValueChangeEnd',
+        'orientation',
+        'origin',
+        'readOnly',
+        'step',
+        'thumbAlignment',
+        'thumbAlignment',
+        'thumbSize',
+        'value',
+    ]);
+    const api = useSlider(sliderParams);
+    const mergedProps = mergeProps(() => api().rootProps, restProps);
+    const getChildren = () => runIfFn(restProps.children, api);
+    return (<SliderProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </SliderProvider>);
+};

package/source/slider/use-slider.js

@@ -0,0 +1,10 @@
+import * as slider from '@zag-js/slider';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useSlider = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(slider.machine(context), { context });
+    return createMemo(() => slider.connect(state, send, normalizeProps));
+};

package/source/splitter/index.js

@@ -0,0 +1,10 @@
+import { Splitter as SplitterRoot } from './splitter';
+import { useSplitterContext } from './splitter-context';
+import { SplitterPanel } from './splitter-panel';
+import { SplitterResizeTrigger } from './splitter-resize-trigger';
+const Splitter = Object.assign(SplitterRoot, {
+    Root: SplitterRoot,
+    Panel: SplitterPanel,
+    ResizeTrigger: SplitterResizeTrigger,
+});
+export { Splitter, SplitterPanel, SplitterResizeTrigger, useSplitterContext };

package/source/splitter/splitter-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [SplitterProvider, useSplitterContext] = createContext({
+    hookName: 'useSplitterContext',
+    providerName: '<SplitterProvider />',
+});

package/source/splitter/splitter-panel.jsx

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

package/source/splitter/splitter-resize-trigger.jsx

@@ -0,0 +1,14 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useSplitterContext } from './splitter-context';
+export const SplitterResizeTrigger = (props) => {
+    const api = useSplitterContext();
+    const [triggerParams, restProps] = createSplitProps()(props, [
+        'disabled',
+        'id',
+        'step',
+    ]);
+    const triggerProps = mergeProps(() => api().getResizeTriggerProps(triggerParams), restProps);
+    return <ark.button {...triggerProps}/>;
+};

package/source/splitter/splitter.jsx

@@ -0,0 +1,25 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { SplitterProvider } from './splitter-context';
+import { useSplitter } from './use-splitter';
+export const Splitter = (props) => {
+    const [splitterParams, localProps] = createSplitProps()(props, [
+        'dir',
+        'getRootNode',
+        'id',
+        'ids',
+        'onSizeChange',
+        'onSizeChangeEnd',
+        'onSizeChangeStart',
+        'orientation',
+        'size',
+    ]);
+    const api = useSplitter(splitterParams);
+    const getChildren = () => runIfFn(localProps.children, api);
+    const rootProps = mergeProps(() => api().rootProps, localProps);
+    return (<SplitterProvider value={api}>
+      <ark.div {...rootProps}>{getChildren()}</ark.div>
+    </SplitterProvider>);
+};

package/source/splitter/use-splitter.js

@@ -0,0 +1,10 @@
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import * as splitter from '@zag-js/splitter';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useSplitter = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(splitter.machine(context), { context });
+    return createMemo(() => splitter.connect(state, send, normalizeProps));
+};

package/source/spread.js

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { createMemo, mergeProps } from 'solid-js';
+import { spread as solidSpread } from 'solid-js/web';
+import { mergeStyle } from './merge-style';
+const getEventKey = (key) => `$$${key.toLowerCase().slice(2)}`;
+const hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
+function mapProps(props, mapper) {
+    return Object.fromEntries(Object.entries(props).map(([key, value]) => [key, mapper(key, value)]));
+}
+export const spread = (node, props) => {
+    const nodeEvents = Object.fromEntries(Object.keys(node)
+        .filter((prop) => prop.startsWith('$$'))
+        // @ts-expect-error - fix later
+        .map((prop) => [prop, node[prop]]));
+    const childProps = createMemo(() => mapProps(props, (key, value) => {
+        const eventKey = getEventKey(key);
+        // event composition
+        if (hasOwn(nodeEvents, eventKey)) {
+            return function next(...args) {
+                if (typeof value === 'function')
+                    value(...args);
+                nodeEvents[eventKey](...args);
+            };
+        }
+        // style composition
+        if (key === 'style') {
+            return mergeStyle(node.style.cssText, value);
+        }
+        // class composition
+        if (key === 'class') {
+            return [node.className, value].filter(Boolean).join(' ');
+        }
+        // don't override existing child attributes
+        if (node.hasAttribute(key))
+            return;
+        return value;
+    }));
+    solidSpread(node, mergeProps(childProps));
+};

package/source/ssr-spread.js

@@ -0,0 +1,19 @@
+import { filterBooleanAttributeValues, filterEmptyValues, filterFunctionValues, } from './filter-object';
+import { mergeStyle } from './merge-style';
+import { parse, render } from './parse-template';
+import { pipe } from './pipe';
+export const ssrSpread = (children, attributes) => {
+    if (isJSXElement(children))
+        return children;
+    const { t } = children;
+    const ast = parse(t);
+    const [node] = ast.children;
+    const mergedAttributes = Object.assign({}, attributes, {
+        class: [attributes?.class, node.attributes.class].filter(Boolean).join(' '),
+        style: mergeStyle(attributes.style, node.attributes.style),
+    });
+    const ssrAttributes = pipe(mergedAttributes, filterEmptyValues, filterFunctionValues, filterBooleanAttributeValues);
+    Object.assign(node.attributes, ssrAttributes);
+    return { t: render(ast) };
+};
+const isJSXElement = (children) => !Object.hasOwnProperty.call(children, 't');

package/source/switch/index.js

@@ -0,0 +1,12 @@
+import { Switch as SwitchRoot } from './switch';
+import { useSwitchContext } from './switch-context';
+import { SwitchControl } from './switch-control';
+import { SwitchLabel } from './switch-label';
+import { SwitchThumb } from './switch-thumb';
+const Switch = Object.assign(SwitchRoot, {
+    Root: SwitchRoot,
+    Control: SwitchControl,
+    Label: SwitchLabel,
+    Thumb: SwitchThumb,
+});
+export { Switch, SwitchControl, SwitchLabel, SwitchThumb, useSwitchContext };

package/source/switch/switch-context.js

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

package/source/switch/switch-control.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSwitchContext } from './switch-context';
+export const SwitchControl = (props) => {
+    const api = useSwitchContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return (<>
+      <ark.span {...mergedProps}/>
+      <input {...api().hiddenInputProps}/>
+    </>);
+};

package/source/switch/switch-label.jsx

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

package/source/switch/switch-thumb.jsx

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