@ark-ui/solid 0.1.0 → 0.3.0

package/dist/slider/slider-output.cjs

@@ -3,16 +3,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
-const solidJs = require('solid-js');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderOutput = props => {
   const slider = sliderContext.useSliderContext();
-  const view = () => solidJs.children(() => runIfFn.runIfFn(props.children, slider()));
-  return web.createComponent(factory.ark.output, web.mergeProps(() => slider().outputProps, props, {
-    children: view
+  const getChildren = () => runIfFn.runIfFn(props.children, slider);
+  const outputProps = solid.mergeProps(() => slider().outputProps, props);
+  return web.createComponent(factory.ark.output, web.mergeProps(outputProps, {
+    get children() {
+      return getChildren();
+    }
   }));
 };
 

package/dist/slider/slider-output.d.ts

@@ -1,8 +1,8 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type UseSliderReturn } from './use-slider';
 export type SliderOutputProps = Assign<HTMLArkProps<'output'>, {
-    children?: ((pages: ReturnType<UseSliderReturn>) => JSX.Element) | JSX.Element;
+    children?: ((pages: UseSliderReturn) => JSX.Element) | JSX.Element;
 }>;
 export declare const SliderOutput: (props: SliderOutputProps) => JSX.Element;

package/dist/slider/slider-output.mjs

@@ -1,14 +1,17 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import { children } from 'solid-js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderOutput = props => {
   const slider = useSliderContext();
-  const view = () => children(() => runIfFn(props.children, slider()));
-  return createComponent(ark.output, mergeProps(() => slider().outputProps, props, {
-    children: view
+  const getChildren = () => runIfFn(props.children, slider);
+  const outputProps = mergeProps(() => slider().outputProps, props);
+  return createComponent(ark.output, mergeProps$1(outputProps, {
+    get children() {
+      return getChildren();
+    }
   }));
 };
 

package/dist/slider/slider-range.cjs

@@ -3,12 +3,14 @@
 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 sliderContext = require('./slider-context.cjs');
 
 const SliderRange = props => {
   const slider = sliderContext.useSliderContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().rangeProps, props));
+  const rangeProps = solid.mergeProps(() => slider().rangeProps, props);
+  return web.createComponent(factory.ark.div, rangeProps);
 };
 
 exports.SliderRange = SliderRange;

package/dist/slider/slider-range.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderRange = props => {
   const slider = useSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().rangeProps, props));
+  const rangeProps = mergeProps(() => slider().rangeProps, props);
+  return createComponent(ark.div, rangeProps);
 };
 
 export { SliderRange };

package/dist/slider/slider-thumb.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 factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderThumb = props => {
-  const slider = sliderContext.useSliderContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().thumbProps, props, {
+  const api = sliderContext.useSliderContext();
+  const thumbProps = solid.mergeProps(() => api().thumbProps, props);
+  return web.createComponent(factory.ark.div, web.mergeProps(thumbProps, {
     get children() {
-      return [web.createComponent(factory.ark.input, web.mergeProps(() => slider().hiddenInputProps)), web.memo(() => props.children)];
+      return [web.createComponent(factory.ark.input, web.mergeProps(() => api().hiddenInputProps)), web.memo(() => props.children)];
     }
   }));
 };

package/dist/slider/slider-thumb.mjs

@@ -1,12 +1,14 @@
-import { createComponent, mergeProps, memo } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, memo } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderThumb = props => {
-  const slider = useSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().thumbProps, props, {
+  const api = useSliderContext();
+  const thumbProps = mergeProps(() => api().thumbProps, props);
+  return createComponent(ark.div, mergeProps$1(thumbProps, {
     get children() {
-      return [createComponent(ark.input, mergeProps(() => slider().hiddenInputProps)), memo(() => props.children)];
+      return [createComponent(ark.input, mergeProps$1(() => api().hiddenInputProps)), memo(() => props.children)];
     }
   }));
 };

package/dist/slider/slider-track.cjs

@@ -3,12 +3,14 @@
 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 sliderContext = require('./slider-context.cjs');
 
 const SliderTrack = props => {
   const slider = sliderContext.useSliderContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().trackProps, props));
+  const trackProps = solid.mergeProps(() => slider().trackProps, props);
+  return web.createComponent(factory.ark.div, trackProps);
 };
 
 exports.SliderTrack = SliderTrack;

package/dist/slider/slider-track.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderTrack = props => {
   const slider = useSliderContext();
-  return createComponent(ark.div, mergeProps(() => slider().trackProps, props));
+  const trackProps = mergeProps(() => slider().trackProps, props);
+  return createComponent(ark.div, trackProps);
 };
 
 export { SliderTrack };

package/dist/slider/slider.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
-const solidJs = require('solid-js');
+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');
@@ -11,14 +11,17 @@ const sliderContext = require('./slider-context.cjs');
 const useSlider = require('./use-slider.cjs');
 
 const Slider = props => {
-  const [useSliderProps, divProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'focusThumbOnChange', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'value']);
-  const slider = useSlider.useSlider(useSliderProps);
-  const view = () => solidJs.children(() => runIfFn.runIfFn(divProps.children, slider()));
+  const [sliderParams, restProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'focusThumbOnChange', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'value']);
+  const api = useSlider.useSlider(sliderParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn.runIfFn(restProps.children, api);
   return web.createComponent(sliderContext.SliderProvider, {
-    value: slider,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => slider().rootProps, divProps, {
-        children: view
+      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, {
+        get children() {
+          return getChildren();
+        }
       }));
     }
   });

package/dist/slider/slider.d.ts

@@ -1,8 +1,8 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type UseSliderProps, type UseSliderReturn } from './use-slider';
 export type SliderProps = Assign<HTMLArkProps<'div'>, UseSliderProps & {
-    children?: ((api: ReturnType<UseSliderReturn>) => JSX.Element) | JSX.Element;
+    children?: ((api: UseSliderReturn) => JSX.Element) | JSX.Element;
 }>;
 export declare const Slider: (props: SliderProps) => JSX.Element;

package/dist/slider/slider.mjs

@@ -1,5 +1,5 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import { children } from 'solid-js';
+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';
@@ -7,14 +7,17 @@ import { SliderProvider } from './slider-context.mjs';
 import { useSlider } from './use-slider.mjs';
 
 const Slider = props => {
-  const [useSliderProps, divProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'focusThumbOnChange', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'value']);
-  const slider = useSlider(useSliderProps);
-  const view = () => children(() => runIfFn(divProps.children, slider()));
+  const [sliderParams, restProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'focusThumbOnChange', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'value']);
+  const api = useSlider(sliderParams);
+  const rootProps = mergeProps(() => api().rootProps, restProps);
+  const getChildren = () => runIfFn(restProps.children, api);
   return createComponent(SliderProvider, {
-    value: slider,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => slider().rootProps, divProps, {
-        children: view
+      return createComponent(ark.div, mergeProps$1(rootProps, {
+        get children() {
+          return getChildren();
+        }
       }));
     }
   });

package/dist/splitter/index.d.ts

@@ -0,0 +1,4 @@
+export { Splitter, type SplitterProps } from './splitter';
+export { SplitterPanel, type SplitterPanelProps } from './splitter-panel';
+export { SplitterResizeTrigger, type SplitterResizeTriggerProps } from './splitter-resize-trigger';
+export { splitterAnatomy } from './splitter.anatomy';

package/dist/splitter/splitter-context.cjs

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

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

@@ -0,0 +1,50 @@
+import type { PanelId, ResizeTriggerProps, PanelProps } from '@zag-js/splitter/dist/splitter.types';
+import type { Accessor, JSX } from 'solid-js';
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { type UseSplitterReturn } from './use-splitter';
+export type SplitterContext = UseSplitterReturn;
+export declare const SplitterProvider: ContextProviderComponent<Accessor<{
+    isFocused: boolean;
+    isDragging: boolean;
+    bounds: {
+        min: number;
+        max: number;
+    } | undefined;
+    collapse(id: PanelId): void;
+    expand(id: PanelId): void;
+    toggle(id: PanelId): void;
+    setSize(id: PanelId, size: number): void;
+    getResizeTriggerState(props: ResizeTriggerProps): {
+        isDisabled: boolean;
+        isFocused: boolean;
+        panelIds: string[];
+        min: number | undefined;
+        max: number | undefined;
+        value: number;
+    };
+    rootProps: JSX.HTMLAttributes<any>;
+    getPanelProps(props: PanelProps): JSX.HTMLAttributes<any>;
+    getResizeTriggerProps(props: ResizeTriggerProps): JSX.HTMLAttributes<any>;
+}>>, useSplitterContext: () => Accessor<{
+    isFocused: boolean;
+    isDragging: boolean;
+    bounds: {
+        min: number;
+        max: number;
+    } | undefined;
+    collapse(id: PanelId): void;
+    expand(id: PanelId): void;
+    toggle(id: PanelId): void;
+    setSize(id: PanelId, size: number): void;
+    getResizeTriggerState(props: ResizeTriggerProps): {
+        isDisabled: boolean;
+        isFocused: boolean;
+        panelIds: string[];
+        min: number | undefined;
+        max: number | undefined;
+        value: number;
+    };
+    rootProps: JSX.HTMLAttributes<any>;
+    getPanelProps(props: PanelProps): JSX.HTMLAttributes<any>;
+    getResizeTriggerProps(props: ResizeTriggerProps): JSX.HTMLAttributes<any>;
+}>;

package/dist/splitter/splitter-context.mjs

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

package/dist/splitter/splitter-panel.cjs

@@ -0,0 +1,18 @@
+'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 splitterContext = require('./splitter-context.cjs');
+
+const SplitterPanel = props => {
+  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

@@ -0,0 +1,8 @@
+import type { JSX } from 'solid-js';
+import { type connect } from '@zag-js/splitter';
+import { type HTMLArkProps } from '../factory';
+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

@@ -0,0 +1,14 @@
+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 [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

@@ -0,0 +1,18 @@
+'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 splitterContext = require('./splitter-context.cjs');
+
+const SplitterResizeTrigger = props => {
+  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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,14 @@
+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 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.anatomy.d.ts

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

package/dist/splitter/splitter.cjs

@@ -0,0 +1,24 @@
+'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 splitterContext = require('./splitter-context.cjs');
+const useSplitter = require('./use-splitter.cjs');
+
+const Splitter = props => {
+  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: api,
+    get children() {
+      return web.createComponent(factory.ark.div, rootProps);
+    }
+  });
+};
+
+exports.Splitter = Splitter;

package/dist/splitter/splitter.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+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

@@ -0,0 +1,20 @@
+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 [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: api,
+    get children() {
+      return createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+export { Splitter };

package/dist/splitter/use-splitter.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const solid = require('@zag-js/solid');
+const splitter = require('@zag-js/splitter');
+const solidJs = require('solid-js');
+const environmentContext = require('../environment/environment-context.cjs');
+
+const useSplitter = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const [state, send] = solid.useMachine(splitter.machine(context), { context });
+  return solidJs.createMemo(() => splitter.connect(state, send, solid.normalizeProps));
+};
+
+exports.useSplitter = useSplitter;

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

@@ -0,0 +1,29 @@
+import type { PanelId, ResizeTriggerProps, PanelProps } from '@zag-js/splitter/dist/splitter.types';
+import type { Accessor, JSX } from 'solid-js';
+import { type Context } from '@zag-js/splitter';
+import { type Optional } from '../types';
+export type UseSplitterProps = Optional<Context, 'id'>;
+export type UseSplitterReturn = ReturnType<typeof useSplitter>;
+export declare const useSplitter: (props: UseSplitterProps) => Accessor<{
+    isFocused: boolean;
+    isDragging: boolean;
+    bounds: {
+        min: number;
+        max: number;
+    } | undefined;
+    collapse(id: PanelId): void;
+    expand(id: PanelId): void;
+    toggle(id: PanelId): void;
+    setSize(id: PanelId, size: number): void;
+    getResizeTriggerState(props: ResizeTriggerProps): {
+        isDisabled: boolean;
+        isFocused: boolean;
+        panelIds: string[];
+        min: number | undefined;
+        max: number | undefined;
+        value: number;
+    };
+    rootProps: JSX.HTMLAttributes<any>;
+    getPanelProps(props: PanelProps): JSX.HTMLAttributes<any>;
+    getResizeTriggerProps(props: ResizeTriggerProps): JSX.HTMLAttributes<any>;
+}>;

package/dist/splitter/use-splitter.mjs

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

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;