@ark-ui/solid 0.2.0 → 0.3.0

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

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

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

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

package/dist/splitter/splitter.cjs

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

package/dist/splitter/splitter.d.ts

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

package/dist/splitter/splitter.mjs

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

package/dist/spread.cjs

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

package/dist/spread.mjs

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

package/dist/tabs/tab-content.cjs

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const tabsContext = require('./tabs-context.cjs');
 
 const TabContent = props => {
-  const [tabContentProps, divProps] = createSplitProps.createSplitProps()(props, ['value']);
-  const tabs = tabsContext.useTabsContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => tabs().getContentProps(tabContentProps), divProps));
+  const [tabParams, restProps] = createSplitProps.createSplitProps()(props, ['value']);
+  const api = tabsContext.useTabsContext();
+  const contentProps = solid.mergeProps(() => api().getContentProps(tabParams), restProps);
+  return web.createComponent(factory.ark.div, contentProps);
 };
 
 exports.TabContent = TabContent;

package/dist/tabs/tab-content.d.ts

@@ -1,8 +1,8 @@
 import type { JSX } from 'solid-js';
-import { type Assign } from '@polymorphic-factory/solid';
 import { type connect } from '@zag-js/tabs';
 import { type HTMLArkProps } from '../factory';
-type GetContentPropsArgs = Parameters<ReturnType<typeof connect>['getContentProps']>[0];
-export type TabContentProps = Assign<HTMLArkProps<'div'>, GetContentPropsArgs>;
+import type { Assign } from '../types';
+type TabContentParams = Parameters<ReturnType<typeof connect>['getContentProps']>[0];
+export type TabContentProps = Assign<HTMLArkProps<'div'>, TabContentParams>;
 export declare const TabContent: (props: TabContentProps) => JSX.Element;
 export {};

package/dist/tabs/tab-content.mjs

@@ -1,12 +1,14 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useTabsContext } from './tabs-context.mjs';
 
 const TabContent = props => {
-  const [tabContentProps, divProps] = createSplitProps()(props, ['value']);
-  const tabs = useTabsContext();
-  return createComponent(ark.div, mergeProps(() => tabs().getContentProps(tabContentProps), divProps));
+  const [tabParams, restProps] = createSplitProps()(props, ['value']);
+  const api = useTabsContext();
+  const contentProps = mergeProps(() => api().getContentProps(tabParams), restProps);
+  return createComponent(ark.div, contentProps);
 };
 
 export { TabContent };

package/dist/tabs/tab-indicator.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 tabsContext = require('./tabs-context.cjs');
 
 const TabIndicator = props => {
-  const tabs = tabsContext.useTabsContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => tabs().indicatorProps, props));
+  const api = tabsContext.useTabsContext();
+  const indicatorProps = solid.mergeProps(() => api().indicatorProps, props);
+  return web.createComponent(factory.ark.div, indicatorProps);
 };
 
 exports.TabIndicator = TabIndicator;

package/dist/tabs/tab-indicator.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 { useTabsContext } from './tabs-context.mjs';
 
 const TabIndicator = props => {
-  const tabs = useTabsContext();
-  return createComponent(ark.div, mergeProps(() => tabs().indicatorProps, props));
+  const api = useTabsContext();
+  const indicatorProps = mergeProps(() => api().indicatorProps, props);
+  return createComponent(ark.div, indicatorProps);
 };
 
 export { TabIndicator };

package/dist/tabs/tab-list.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 tabsContext = require('./tabs-context.cjs');
 
 const TabList = props => {
-  const tabs = tabsContext.useTabsContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => tabs().tablistProps, props));
+  const api = tabsContext.useTabsContext();
+  const tablistProps = solid.mergeProps(() => api().tablistProps, props);
+  return web.createComponent(factory.ark.div, tablistProps);
 };
 
 exports.TabList = TabList;

package/dist/tabs/tab-list.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 { useTabsContext } from './tabs-context.mjs';
 
 const TabList = props => {
-  const tabs = useTabsContext();
-  return createComponent(ark.div, mergeProps(() => tabs().tablistProps, props));
+  const api = useTabsContext();
+  const tablistProps = mergeProps(() => api().tablistProps, props);
+  return createComponent(ark.div, tablistProps);
 };
 
 export { TabList };

package/dist/tabs/tab-trigger.cjs

@@ -2,24 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const solidJs = require('solid-js');
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
-const ssrSpread = require('../ssr-spread.cjs');
+const factory = require('../factory.cjs');
 const tabsContext = require('./tabs-context.cjs');
 
 const TabTrigger = props => {
-  const [tabProps, localProps] = createSplitProps.createSplitProps()(props, ['disabled', 'value']);
-  const tabs = tabsContext.useTabsContext();
-  const triggerProps = tabs().getTriggerProps(tabProps);
-  const getChildren = solidJs.children(() => ssrSpread.ssrSpread(localProps.children, triggerProps));
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      web.spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const [tabParams, restProps] = createSplitProps.createSplitProps()(props, ['disabled', 'value']);
+  const api = tabsContext.useTabsContext();
+  const triggerProps = solid.mergeProps(() => api().getTriggerProps(tabParams), restProps);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.TabTrigger = TabTrigger;

package/dist/tabs/tab-trigger.d.ts

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

package/dist/tabs/tab-trigger.mjs

@@ -1,21 +1,14 @@
-import { children, createEffect } from 'solid-js';
-import { spread } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
-import { ssrSpread } from '../ssr-spread.mjs';
+import { ark } from '../factory.mjs';
 import { useTabsContext } from './tabs-context.mjs';
 
 const TabTrigger = props => {
-  const [tabProps, localProps] = createSplitProps()(props, ['disabled', 'value']);
-  const tabs = useTabsContext();
-  const triggerProps = tabs().getTriggerProps(tabProps);
-  const getChildren = children(() => ssrSpread(localProps.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const [tabParams, restProps] = createSplitProps()(props, ['disabled', 'value']);
+  const api = useTabsContext();
+  const triggerProps = mergeProps(() => api().getTriggerProps(tabParams), restProps);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { TabTrigger };

package/dist/tabs/tabs.cjs

@@ -3,18 +3,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const tabsContext = require('./tabs-context.cjs');
 const useTabs = require('./use-tabs.cjs');
 
 const Tabs = props => {
-  const [useTabsProps, divProps] = createSplitProps.createSplitProps()(props, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onChange', 'onDelete', 'onFocus', 'orientation', 'translations', 'value']);
-  const tabs = useTabs.useTabs(useTabsProps);
+  const [tabsParams, restProps] = createSplitProps.createSplitProps()(props, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onChange', 'onDelete', 'onFocus', 'orientation', 'translations', 'value']);
+  const api = useTabs.useTabs(tabsParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
   return web.createComponent(tabsContext.TabsProvider, {
-    value: tabs,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => tabs().rootProps, divProps));
+      return web.createComponent(factory.ark.div, rootProps);
     }
   });
 };

package/dist/tabs/tabs.d.ts

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

package/dist/tabs/tabs.mjs

@@ -1,16 +1,18 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { TabsProvider } from './tabs-context.mjs';
 import { useTabs } from './use-tabs.mjs';
 
 const Tabs = props => {
-  const [useTabsProps, divProps] = createSplitProps()(props, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onChange', 'onDelete', 'onFocus', 'orientation', 'translations', 'value']);
-  const tabs = useTabs(useTabsProps);
+  const [tabsParams, restProps] = createSplitProps()(props, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onChange', 'onDelete', 'onFocus', 'orientation', 'translations', 'value']);
+  const api = useTabs(tabsParams);
+  const rootProps = mergeProps(() => api().rootProps, restProps);
   return createComponent(TabsProvider, {
-    value: tabs,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => tabs().rootProps, divProps));
+      return createComponent(ark.div, rootProps);
     }
   });
 };

package/dist/tags-input/tag-delete-trigger.cjs

@@ -2,24 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const solidJs = require('solid-js');
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
-const ssrSpread = require('../ssr-spread.cjs');
+const factory = require('../factory.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 
 const TagDeleteTrigger = props => {
-  const [tagProps, localProps] = createSplitProps.createSplitProps()(props, ['index', 'disabled', 'value']);
-  const tagsInput = tagsInputContext.useTagsInputContext();
-  const triggerProps = tagsInput().getTagDeleteTriggerProps(tagProps);
-  const getChildren = solidJs.children(() => ssrSpread.ssrSpread(localProps.children, triggerProps));
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      web.spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const [tagParams, restProps] = createSplitProps.createSplitProps()(props, ['index', 'disabled', 'value']);
+  const api = tagsInputContext.useTagsInputContext();
+  const triggerProps = solid.mergeProps(() => api().getTagDeleteTriggerProps(tagParams), restProps);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.TagDeleteTrigger = TagDeleteTrigger;

package/dist/tags-input/tag-delete-trigger.d.ts

@@ -1,8 +1,6 @@
-import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
-import { type Assign } from '@polymorphic-factory/solid';
-import { type JSX } from 'solid-js';
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type TagProps } from './tag';
-export type TagDeleteTriggerProps = Assign<{
-    children: JSX.Element;
-}, TagProps>;
-export declare const TagDeleteTrigger: (props: TagDeleteTriggerProps) => ResolvedChildren;
+export type TagDeleteTriggerProps = Assign<HTMLArkProps<'button'>, TagProps>;
+export declare const TagDeleteTrigger: (props: TagDeleteTriggerProps) => JSX.Element;

package/dist/tags-input/tag-delete-trigger.mjs

@@ -1,21 +1,14 @@
-import { children, createEffect } from 'solid-js';
-import { spread } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
-import { ssrSpread } from '../ssr-spread.mjs';
+import { ark } from '../factory.mjs';
 import { useTagsInputContext } from './tags-input-context.mjs';
 
 const TagDeleteTrigger = props => {
-  const [tagProps, localProps] = createSplitProps()(props, ['index', 'disabled', 'value']);
-  const tagsInput = useTagsInputContext();
-  const triggerProps = tagsInput().getTagDeleteTriggerProps(tagProps);
-  const getChildren = children(() => ssrSpread(localProps.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const [tagParams, restProps] = createSplitProps()(props, ['index', 'disabled', 'value']);
+  const api = useTagsInputContext();
+  const triggerProps = mergeProps(() => api().getTagDeleteTriggerProps(tagParams), restProps);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { TagDeleteTrigger };

package/dist/tags-input/tag-input.cjs

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 
 const TagInput = props => {
-  const [tagInputProps, inputProps] = createSplitProps.createSplitProps()(props, ['index', 'disabled', 'value']);
-  const tagsInput = tagsInputContext.useTagsInputContext();
-  return web.createComponent(factory.ark.input, web.mergeProps(() => tagsInput().getTagInputProps(tagInputProps), inputProps));
+  const [tagParams, restProps] = createSplitProps.createSplitProps()(props, ['index', 'disabled', 'value']);
+  const api = tagsInputContext.useTagsInputContext();
+  const inputProps = solid.mergeProps(() => api().getTagInputProps(tagParams), restProps);
+  return web.createComponent(factory.ark.input, inputProps);
 };
 
 exports.TagInput = TagInput;

package/dist/tags-input/tag-input.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from 'solid-js';
-import { type Assign } from '@polymorphic-factory/solid';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type TagProps } from './tag';
 export type TagInputProps = Assign<HTMLArkProps<'input'>, TagProps>;
 export declare const TagInput: (props: TagInputProps) => JSX.Element;

package/dist/tags-input/tag-input.mjs

@@ -1,12 +1,14 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useTagsInputContext } from './tags-input-context.mjs';
 
 const TagInput = props => {
-  const [tagInputProps, inputProps] = createSplitProps()(props, ['index', 'disabled', 'value']);
-  const tagsInput = useTagsInputContext();
-  return createComponent(ark.input, mergeProps(() => tagsInput().getTagInputProps(tagInputProps), inputProps));
+  const [tagParams, restProps] = createSplitProps()(props, ['index', 'disabled', 'value']);
+  const api = useTagsInputContext();
+  const inputProps = mergeProps(() => api().getTagInputProps(tagParams), restProps);
+  return createComponent(ark.input, inputProps);
 };
 
 export { TagInput };

package/dist/tags-input/tag.cjs

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 
 const Tag = props => {
-  const [tagProps, divProps] = createSplitProps.createSplitProps()(props, ['index', 'disabled', 'value']);
-  const tagsInput = tagsInputContext.useTagsInputContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => tagsInput().getTagProps(tagProps), divProps));
+  const [tagParams, restProps] = createSplitProps.createSplitProps()(props, ['index', 'disabled', 'value']);
+  const api = tagsInputContext.useTagsInputContext();
+  const tagProps = solid.mergeProps(() => api().getTagProps(tagParams), restProps);
+  return web.createComponent(factory.ark.div, tagProps);
 };
 
 exports.Tag = Tag;