@ark-ui/solid 3.0.0-0 → 3.0.0-2

package/dist/source/components/segment-group/segment-group.js

@@ -0,0 +1,8 @@
+export { SegmentGroupContext as Context, } from './segment-group-context';
+export { SegmentGroupIndicator as Indicator, } from './segment-group-indicator';
+export { SegmentGroupItem as Item, } from './segment-group-item';
+export { SegmentGroupItemContext as ItemContext, } from './segment-group-item-context';
+export { SegmentGroupItemControl as ItemControl, } from './segment-group-item-control';
+export { SegmentGroupItemText as ItemText, } from './segment-group-item-text';
+export { SegmentGroupLabel as Label, } from './segment-group-label';
+export { SegmentGroupRoot as Root, } from './segment-group-root';

package/dist/source/components/segment-group/use-segment-group-context.js

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

package/dist/source/components/segment-group/use-segment-group-item-context.js

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

package/dist/source/components/segment-group/use-segment-group-item-props-context.js

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

package/dist/source/components/segment-group/use-segment-group.js

@@ -0,0 +1,11 @@
+import * as segment from '@zag-js/radio-group';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+export const useSegmentGroup = (props) => {
+    const locale = useLocaleContext();
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const [state, send] = useMachine(segment.machine(context), { context });
+    return createMemo(() => segment.connect(state, send, normalizeProps));
+};

package/dist/source/components/select/index.js

@@ -0,0 +1,19 @@
+export { SelectClearTrigger } from './select-clear-trigger';
+export { SelectContent } from './select-content';
+export { SelectContext } from './select-context';
+export { SelectControl } from './select-control';
+export { SelectIndicator } from './select-indicator';
+export { SelectItem } from './select-item';
+export { SelectItemContext } from './select-item-context';
+export { SelectItemGroup } from './select-item-group';
+export { SelectItemGroupLabel } from './select-item-group-label';
+export { SelectItemIndicator } from './select-item-indicator';
+export { SelectItemText } from './select-item-text';
+export { SelectLabel } from './select-label';
+export { SelectPositioner } from './select-positioner';
+export { SelectRoot } from './select-root';
+export { SelectTrigger } from './select-trigger';
+export { SelectValueText } from './select-value-text';
+export { useSelectContext } from './use-select-context';
+export { useSelectItemContext } from './use-select-item-context';
+export * as Select from './select';

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

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

package/dist/source/components/select/select-content.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { useSelectContext } from './use-select-context';
+export const SelectContent = (props) => {
+    const select = useSelectContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => select().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().unmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/components/select/select-context.jsx

@@ -0,0 +1,2 @@
+import { useSelectContext } from './use-select-context';
+export const SelectContext = (props) => props.children(useSelectContext());

package/dist/source/components/select/select-control.jsx

@@ -0,0 +1,20 @@
+import { mergeProps } from '@zag-js/solid';
+import { Index, Show, createMemo } from 'solid-js';
+import { ark } from '../factory';
+import { useSelectContext } from './use-select-context';
+export const SelectControl = (props) => {
+    const select = useSelectContext();
+    const mergedProps = mergeProps(() => select().controlProps, props);
+    const isValueEmpty = createMemo(() => select().value.length === 0);
+    return (<>
+      <ark.div {...mergedProps}/>
+      <select {...select().hiddenSelectProps}>
+        <Show when={isValueEmpty()}>
+          <option value=""/>
+        </Show>
+        <Index each={select().collection.toArray()}>
+          {(option) => <option value={option().value}>{option().label}</option>}
+        </Index>
+      </select>
+    </>);
+};

package/dist/source/components/select/select-indicator.jsx

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

package/dist/source/components/select/select-item-context.jsx

@@ -0,0 +1,2 @@
+import { useSelectItemContext } from './use-select-item-context';
+export const SelectItemContext = (props) => props.children(useSelectItemContext());

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

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSelectContext } from './use-select-context';
+import { useSelectItemGroupPropsContext } from './use-select-item-group-props-context';
+export const SelectItemGroupLabel = (props) => {
+    const select = useSelectContext();
+    const itemGroupProps = useSelectItemGroupPropsContext();
+    const mergedProps = mergeProps(() => select().getItemGroupLabelProps({ htmlFor: itemGroupProps.id }), props);
+    return <ark.div {...mergedProps}/>;
+};

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

@@ -0,0 +1,15 @@
+import { mergeProps } from '@zag-js/solid';
+import { createUniqueId } from 'solid-js';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useSelectContext } from './use-select-context';
+import { SelectItemGroupPropsProvider } from './use-select-item-group-props-context';
+export const SelectItemGroup = (props) => {
+    const [_itemGroupProps, localProps] = createSplitProps()(props, ['id']);
+    const select = useSelectContext();
+    const itemGroupProps = mergeProps({ id: createUniqueId() }, _itemGroupProps);
+    const mergedProps = mergeProps(() => select().getItemGroupProps(itemGroupProps), localProps);
+    return (<SelectItemGroupPropsProvider value={itemGroupProps}>
+      <ark.div {...mergedProps}/>
+    </SelectItemGroupPropsProvider>);
+};

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

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

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

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

package/dist/source/components/select/select-item.jsx

@@ -0,0 +1,18 @@
+import { mergeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useSelectContext } from './use-select-context';
+import { SelectItemProvider } from './use-select-item-context';
+import { SelectItemPropsProvider } from './use-select-item-props-context';
+export const SelectItem = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, ['item']);
+    const select = useSelectContext();
+    const mergedProps = mergeProps(() => select().getItemProps(itemProps), localProps);
+    const itemState = createMemo(() => select().getItemState(itemProps));
+    return (<SelectItemPropsProvider value={itemProps}>
+      <SelectItemProvider value={itemState}>
+        <ark.div {...mergedProps}/>
+      </SelectItemProvider>
+    </SelectItemPropsProvider>);
+};

package/dist/source/components/select/select-label.jsx

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

package/dist/source/components/select/select-positioner.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { useSelectContext } from './use-select-context';
+export const SelectPositioner = (props) => {
+    const select = useSelectContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => select().positionerProps, props);
+    return (<Show when={!presenceApi().unmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/components/select/select-root.jsx

@@ -0,0 +1,44 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { useSelect } from './use-select';
+import { SelectProvider } from './use-select-context';
+export const SelectRoot = (props) => {
+    const [presenceProps, selectProps] = splitPresenceProps(props);
+    const [useSelectProps, localProps] = createSplitProps()(selectProps, [
+        'closeOnSelect',
+        'disabled',
+        'form',
+        'highlightedValue',
+        'id',
+        'ids',
+        'invalid',
+        'isItemDisabled',
+        'items',
+        'itemToString',
+        'itemToValue',
+        'loopFocus',
+        'multiple',
+        'name',
+        'onFocusOutside',
+        'onHighlightChange',
+        'onInteractOutside',
+        'onOpenChange',
+        'onPointerDownOutside',
+        'onValueChange',
+        'open',
+        'positioning',
+        'readOnly',
+        'scrollToIndexFn',
+        'value',
+    ]);
+    const select = useSelect(useSelectProps);
+    const presenceApi = usePresence(mergeProps(() => ({ present: select().open }), presenceProps));
+    const mergedProps = mergeProps(() => select().rootProps, localProps);
+    return (<SelectProvider value={select}>
+      <PresenceProvider value={presenceApi}>
+        <ark.div {...mergedProps}/>
+      </PresenceProvider>
+    </SelectProvider>);
+};

package/dist/source/components/select/select-trigger.jsx

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

package/dist/source/components/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 './use-select-context';
+export const SelectValueText = (props) => {
+    const select = useSelectContext();
+    const mergedProps = mergeProps(() => selectAnatomy.build().valueText.attrs, props);
+    return <ark.span {...mergedProps}>{select().valueAsString || props.placeholder}</ark.span>;
+};

package/dist/source/components/select/select.js

@@ -0,0 +1,16 @@
+export { SelectClearTrigger as ClearTrigger, } from './select-clear-trigger';
+export { SelectContent as Content } from './select-content';
+export { SelectContext as Context } from './select-context';
+export { SelectControl as Control } from './select-control';
+export { SelectIndicator as Indicator, } from './select-indicator';
+export { SelectItem as Item } from './select-item';
+export { SelectItemContext as ItemContext, } from './select-item-context';
+export { SelectItemGroup as ItemGroup, } from './select-item-group';
+export { SelectItemGroupLabel as ItemGroupLabel, } from './select-item-group-label';
+export { SelectItemIndicator as ItemIndicator, } from './select-item-indicator';
+export { SelectItemText as ItemText, } from './select-item-text';
+export { SelectLabel as Label } from './select-label';
+export { SelectPositioner as Positioner, } from './select-positioner';
+export { SelectRoot as Root } from './select-root';
+export { SelectTrigger as Trigger } from './select-trigger';
+export { SelectValueText as ValueText, } from './select-value-text';

package/dist/source/components/select/use-select-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+export const [SelectProvider, useSelectContext] = createContext({
+    hookName: 'useSelectContext',
+    providerName: '<SelectProvider />',
+});

package/dist/source/components/select/use-select-item-context.js

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

package/dist/source/components/select/use-select-item-group-props-context.js

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

package/dist/source/components/select/use-select-item-props-context.js

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

package/dist/source/components/select/use-select.js

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

package/dist/source/components/slider/index.js

@@ -0,0 +1,12 @@
+export { SliderContext } from './slider-context';
+export { SliderControl } from './slider-control';
+export { SliderLabel } from './slider-label';
+export { SliderMarker } from './slider-marker';
+export { SliderMarkerGroup } from './slider-marker-group';
+export { SliderRange } from './slider-range';
+export { SliderRoot } from './slider-root';
+export { SliderThumb } from './slider-thumb';
+export { SliderTrack } from './slider-track';
+export { SliderValueText } from './slider-value-text';
+export { useSliderContext } from './use-slider-context';
+export * as Slider from './slider';

package/dist/source/components/slider/slider-context.jsx

@@ -0,0 +1,2 @@
+import { useSliderContext } from './use-slider-context';
+export const SliderContext = (props) => props.children(useSliderContext());

package/dist/source/components/slider/slider-control.jsx

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

package/dist/source/components/slider/slider-label.jsx

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

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

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

package/dist/source/components/slider/slider-marker.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useSliderContext } from './use-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/dist/source/components/slider/slider-range.jsx

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

package/dist/source/components/slider/slider-root.jsx

@@ -0,0 +1,37 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useSlider } from './use-slider';
+import { SliderProvider } from './use-slider-context';
+export const SliderRoot = (props) => {
+    const [useSliderProps, localProps] = createSplitProps()(props, [
+        'aria-label',
+        'aria-labelledby',
+        'disabled',
+        'form',
+        'getAriaValueText',
+        'id',
+        'ids',
+        'invalid',
+        'max',
+        'min',
+        'minStepsBetweenThumbs',
+        'name',
+        'onFocusChange',
+        'onValueChange',
+        'onValueChangeEnd',
+        'orientation',
+        'origin',
+        'readOnly',
+        'step',
+        'thumbAlignment',
+        'thumbAlignment',
+        'thumbSize',
+        'value',
+    ]);
+    const api = useSlider(useSliderProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<SliderProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </SliderProvider>);
+};

package/dist/source/components/slider/slider-thumb.jsx

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

package/dist/source/components/slider/slider-track.jsx

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

package/dist/source/components/slider/slider-value-text.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSliderContext } from './use-slider-context';
+export const SliderValueText = (props) => {
+    const api = useSliderContext();
+    const mergedProps = mergeProps(() => api().valueTextProps, props);
+    return <ark.span {...mergedProps}>{props.children || api().value.join(',')}</ark.span>;
+};

package/dist/source/components/slider/slider.js

@@ -0,0 +1,10 @@
+export { SliderContext as Context } from './slider-context';
+export { SliderControl as Control } from './slider-control';
+export { SliderLabel as Label } from './slider-label';
+export { SliderMarker as Marker } from './slider-marker';
+export { SliderMarkerGroup as MarkerGroup, } from './slider-marker-group';
+export { SliderRange as Range } from './slider-range';
+export { SliderRoot as Root } from './slider-root';
+export { SliderThumb as Thumb } from './slider-thumb';
+export { SliderTrack as Track } from './slider-track';
+export { SliderValueText as ValueText, } from './slider-value-text';

package/dist/source/components/slider/use-slider-context.js

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

package/dist/source/components/slider/use-slider.js

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

package/dist/source/components/splitter/index.js

@@ -0,0 +1,6 @@
+export { SplitterContext } from './splitter-context';
+export { SplitterPanel } from './splitter-panel';
+export { SplitterResizeTrigger } from './splitter-resize-trigger';
+export { SplitterRoot } from './splitter-root';
+export { useSplitterContext } from './use-splitter-context';
+export * as Splitter from './splitter';

package/dist/source/components/splitter/splitter-context.jsx

@@ -0,0 +1,2 @@
+import { useSplitterContext } from './use-splitter-context';
+export const SplitterContext = (props) => props.children(useSplitterContext());

package/dist/source/components/splitter/splitter-panel.jsx

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

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

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

package/dist/source/components/splitter/splitter-root.jsx

@@ -0,0 +1,20 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useSplitter } from './use-splitter';
+import { SplitterProvider } from './use-splitter-context';
+export const SplitterRoot = (props) => {
+    const [useSplitterProps, localProps] = createSplitProps()(props, [
+        'id',
+        'ids',
+        'onSizeChange',
+        'onSizeChangeEnd',
+        'orientation',
+        'size',
+    ]);
+    const api = useSplitter(useSplitterProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<SplitterProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </SplitterProvider>);
+};

package/dist/source/components/splitter/splitter.js

@@ -0,0 +1,4 @@
+export { SplitterContext as Context, } from './splitter-context';
+export { SplitterPanel as Panel } from './splitter-panel';
+export { SplitterResizeTrigger as ResizeTrigger, } from './splitter-resize-trigger';
+export { SplitterRoot as Root } from './splitter-root';

package/dist/source/components/splitter/use-splitter-context.js

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

package/dist/source/components/splitter/use-splitter.js

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