@ark-ui/solid 0.2.0 → 0.4.0

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

@@ -0,0 +1,17 @@
+import type { Accessor, JSX } from 'solid-js';
+import * as zagSwitch from '@zag-js/switch';
+import { type Optional } from '../types';
+export type UseSwitchProps = Optional<zagSwitch.Context, 'id'>;
+export type UseSwitchReturn = ReturnType<typeof useSwitch>;
+export declare const useSwitch: (props: UseSwitchProps) => Accessor<{
+    isChecked: boolean;
+    isDisabled: boolean | undefined;
+    isFocused: boolean | undefined;
+    setChecked(checked: boolean): void;
+    toggleChecked(): void;
+    rootProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
+    labelProps: JSX.HTMLAttributes<any>;
+    thumbProps: JSX.HTMLAttributes<any>;
+    controlProps: JSX.HTMLAttributes<any>;
+    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+}>;

package/dist/switch/use-switch.mjs

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

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,6 @@
-import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
-import { type Assign } from '@polymorphic-factory/solid';
-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;
-export {};
+import type { JSX } from 'solid-js';
+import { type TriggerProps } from '@zag-js/tabs';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type TabTriggerProps = Assign<HTMLArkProps<'button'>, TriggerProps>;
+export declare const TabTrigger: (props: TabTriggerProps) => JSX.Element;

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-context.d.ts

@@ -1,4 +1,4 @@
-import type { TabProps } from '@zag-js/tabs/dist/tabs.types';
+import type { TriggerProps, ContentProps } from '@zag-js/tabs/dist/tabs.types';
 import type { Accessor, JSX } from 'solid-js';
 import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
 import { type UseTabsReturn } from './use-tabs';
@@ -9,13 +9,12 @@ export declare const TabsProvider: ContextProviderComponent<Accessor<{
     previousValues: string[];
     setValue(value: string): void;
     clearValue(): void;
+    setIndicatorRect(id: string | null | undefined): void;
     rootProps: JSX.HTMLAttributes<any>;
     tablistProps: JSX.HTMLAttributes<any>;
-    getTriggerProps(props: TabProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    getTriggerProps(props: TriggerProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
     contentGroupProps: JSX.HTMLAttributes<any>;
-    getContentProps({ value }: {
-        value: string;
-    }): JSX.HTMLAttributes<any>;
+    getContentProps({ value }: ContentProps): JSX.HTMLAttributes<any>;
     indicatorProps: JSX.HTMLAttributes<any>;
 }>>, useTabsContext: () => Accessor<{
     value: string | null;
@@ -23,12 +22,11 @@ export declare const TabsProvider: ContextProviderComponent<Accessor<{
     previousValues: string[];
     setValue(value: string): void;
     clearValue(): void;
+    setIndicatorRect(id: string | null | undefined): void;
     rootProps: JSX.HTMLAttributes<any>;
     tablistProps: JSX.HTMLAttributes<any>;
-    getTriggerProps(props: TabProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    getTriggerProps(props: TriggerProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
     contentGroupProps: JSX.HTMLAttributes<any>;
-    getContentProps({ value }: {
-        value: string;
-    }): JSX.HTMLAttributes<any>;
+    getContentProps({ value }: ContentProps): JSX.HTMLAttributes<any>;
     indicatorProps: JSX.HTMLAttributes<any>;
 }>;

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/tabs/use-tabs.cjs

@@ -28,7 +28,7 @@ const tabs__namespace = /*#__PURE__*/_interopNamespaceDefault(tabs);
 
 const useTabs = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
   const [state, send] = solid.useMachine(tabs__namespace.machine(context), { context });
   return solidJs.createMemo(() => tabs__namespace.connect(state, send, solid.normalizeProps));
 };

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

@@ -1,4 +1,3 @@
-import type { TabProps } from '@zag-js/tabs/dist/tabs.types';
 import type { Accessor, JSX } from 'solid-js';
 import * as tabs from '@zag-js/tabs';
 import { type Optional } from '../types';
@@ -10,12 +9,11 @@ export declare const useTabs: (props: UseTabsProps) => Accessor<{
     previousValues: string[];
     setValue(value: string): void;
     clearValue(): void;
+    setIndicatorRect(id: string | null | undefined): void;
     rootProps: JSX.HTMLAttributes<any>;
     tablistProps: JSX.HTMLAttributes<any>;
-    getTriggerProps(props: TabProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    getTriggerProps(props: tabs.TriggerProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
     contentGroupProps: JSX.HTMLAttributes<any>;
-    getContentProps({ value }: {
-        value: string;
-    }): JSX.HTMLAttributes<any>;
+    getContentProps({ value }: tabs.ContentProps): JSX.HTMLAttributes<any>;
     indicatorProps: JSX.HTMLAttributes<any>;
 }>;

package/dist/tabs/use-tabs.mjs

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

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;

package/dist/tags-input/tag.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';
 export type TagProps = {
     index: string | number;
     value: string;

package/dist/tags-input/tag.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 Tag = props => {
-  const [tagProps, divProps] = createSplitProps()(props, ['index', 'disabled', 'value']);
-  const tagsInput = useTagsInputContext();
-  return createComponent(ark.div, mergeProps(() => tagsInput().getTagProps(tagProps), divProps));
+  const [tagParams, restProps] = createSplitProps()(props, ['index', 'disabled', 'value']);
+  const api = useTagsInputContext();
+  const tagProps = mergeProps(() => api().getTagProps(tagParams), restProps);
+  return createComponent(ark.div, tagProps);
 };
 
 export { Tag };

package/dist/tags-input/tags-input-clear-trigger.cjs

@@ -2,22 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const solidJs = require('solid-js');
 const web = require('solid-js/web');
-const ssrSpread = require('../ssr-spread.cjs');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 
 const TagsInputClearTrigger = props => {
   const tagsInput = tagsInputContext.useTagsInputContext();
-  const triggerProps = tagsInput().clearTriggerProps;
-  const getChildren = solidJs.children(() => ssrSpread.ssrSpread(props.children, triggerProps));
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      web.spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const triggerProps = solid.mergeProps(() => tagsInput().clearTriggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.TagsInputClearTrigger = TagsInputClearTrigger;

package/dist/tags-input/tags-input-clear-trigger.d.ts

@@ -1,6 +1,4 @@
-import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
-import { type JSX } from 'solid-js';
-export type TagsInputClearTriggerProps = {
-    children: JSX.Element;
-};
-export declare const TagsInputClearTrigger: (props: TagsInputClearTriggerProps) => ResolvedChildren;
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type TagsInputClearTriggerProps = HTMLArkProps<'button'>;
+export declare const TagsInputClearTrigger: (props: TagsInputClearTriggerProps) => JSX.Element;

package/dist/tags-input/tags-input-clear-trigger.mjs

@@ -1,19 +1,12 @@
-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 { ark } from '../factory.mjs';
 import { useTagsInputContext } from './tags-input-context.mjs';
 
 const TagsInputClearTrigger = props => {
   const tagsInput = useTagsInputContext();
-  const triggerProps = tagsInput().clearTriggerProps;
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const triggerProps = mergeProps(() => tagsInput().clearTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { TagsInputClearTrigger };