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

package/slider/slider.mjs

@@ -7,14 +7,14 @@ import { SliderProvider } from './slider-context.mjs';
 import { useSlider } from './use-slider.mjs';
 
 const Slider = props => {
-  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', 'thumbSize', 'value']);
+  const [sliderParams, restProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
   const api = useSlider(sliderParams);
-  const rootProps = mergeProps(() => api().rootProps, restProps);
+  const mergedProps = mergeProps(() => api().rootProps, restProps);
   const getChildren = () => runIfFn(restProps.children, api);
   return createComponent(SliderProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, mergeProps$1(rootProps, {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
         get children() {
           return getChildren();
         }

package/splitter/index.cjs

@@ -2,14 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const splitter$1 = require('./splitter.cjs');
+const splitter = require('./splitter.cjs');
 const splitterContext = require('./splitter-context.cjs');
 const splitterPanel = require('./splitter-panel.cjs');
 const splitterResizeTrigger = require('./splitter-resize-trigger.cjs');
-const splitter = require('@zag-js/splitter');
 
-const Splitter = Object.assign(splitter$1.Splitter, {
-  Root: splitter$1.Splitter,
+const Splitter = Object.assign(splitter.Splitter, {
+  Root: splitter.Splitter,
   Panel: splitterPanel.SplitterPanel,
   ResizeTrigger: splitterResizeTrigger.SplitterResizeTrigger
 });
@@ -17,8 +16,4 @@ const Splitter = Object.assign(splitter$1.Splitter, {
 exports.useSplitterContext = splitterContext.useSplitterContext;
 exports.SplitterPanel = splitterPanel.SplitterPanel;
 exports.SplitterResizeTrigger = splitterResizeTrigger.SplitterResizeTrigger;
-Object.defineProperty(exports, 'splitterAnatomy', {
-  enumerable: true,
-  get: () => splitter.anatomy
-});
 exports.Splitter = Splitter;

package/splitter/index.d.ts

@@ -1,13 +1,12 @@
 import { JSX } from 'solid-js';
 import { type SplitterProps } from './splitter';
-import { useSplitterContext } from './splitter-context';
+import { useSplitterContext, type SplitterContext } from './splitter-context';
 import { SplitterPanel, type SplitterPanelProps } from './splitter-panel';
 import { SplitterResizeTrigger, type SplitterResizeTriggerProps } from './splitter-resize-trigger';
-import { splitterAnatomy } from './splitter.anatomy';
 declare const Splitter: ((props: SplitterProps) => JSX.Element) & {
     Root: (props: SplitterProps) => JSX.Element;
     Panel: (props: SplitterPanelProps) => JSX.Element;
     ResizeTrigger: (props: SplitterResizeTriggerProps) => JSX.Element;
 };
-export { Splitter, SplitterPanel, SplitterResizeTrigger, splitterAnatomy, useSplitterContext };
-export type { SplitterPanelProps, SplitterProps, SplitterResizeTriggerProps };
+export { Splitter, SplitterPanel, SplitterResizeTrigger, useSplitterContext };
+export type { SplitterContext, SplitterPanelProps, SplitterProps, SplitterResizeTriggerProps };

package/splitter/index.mjs

@@ -2,7 +2,6 @@ import { Splitter as Splitter$1 } from './splitter.mjs';
 export { useSplitterContext } from './splitter-context.mjs';
 import { SplitterPanel } from './splitter-panel.mjs';
 import { SplitterResizeTrigger } from './splitter-resize-trigger.mjs';
-export { anatomy as splitterAnatomy } from '@zag-js/splitter';
 
 const Splitter = Object.assign(Splitter$1, {
   Root: Splitter$1,

package/splitter/splitter.cjs

@@ -11,7 +11,7 @@ const splitterContext = require('./splitter-context.cjs');
 const useSplitter = require('./use-splitter.cjs');
 
 const Splitter = props => {
-  const [splitterParams, localProps] = createSplitProps.createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onResize', 'onResizeEnd', 'onResizeStart', 'orientation', 'size']);
+  const [splitterParams, localProps] = createSplitProps.createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'onSizeChangeStart', 'orientation', 'size']);
   const api = useSplitter.useSplitter(splitterParams);
   const getChildren = () => runIfFn.runIfFn(localProps.children, api);
   const rootProps = solid.mergeProps(() => api().rootProps, localProps);

package/splitter/splitter.mjs

@@ -7,7 +7,7 @@ import { SplitterProvider } from './splitter-context.mjs';
 import { useSplitter } from './use-splitter.mjs';
 
 const Splitter = props => {
-  const [splitterParams, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onResize', 'onResizeEnd', 'onResizeStart', 'orientation', 'size']);
+  const [splitterParams, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'onSizeChangeStart', 'orientation', 'size']);
   const api = useSplitter(splitterParams);
   const getChildren = () => runIfFn(localProps.children, api);
   const rootProps = mergeProps(() => api().rootProps, localProps);

package/spread.cjs

@@ -4,35 +4,39 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const solidJs = require('solid-js');
 const web = require('solid-js/web');
-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);
+function mapProps(props, mapper) {
+  return Object.fromEntries(Object.entries(props).map(([key, value]) => [key, mapper(key, value)]));
+}
 const spread = (node, props) => {
-  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]])
   );
-  const composedProps = solidJs.createMemo(() => {
-    return filterProps.mapProps(parentProps, (key, value) => {
-      const prop = getEventKey(key);
-      if (hasOwn(nodeEvents, prop)) {
+  const childProps = solidJs.createMemo(
+    () => mapProps(props, (key, value) => {
+      const eventKey = getEventKey(key);
+      if (hasOwn(nodeEvents, eventKey)) {
         return function next(...args) {
-          value(...args);
-          nodeEvents[prop](...args);
+          if (typeof value === "function")
+            value(...args);
+          nodeEvents[eventKey](...args);
         };
       }
       if (key === "style") {
         return mergeStyle.mergeStyle(node.style.cssText, value);
       }
+      if (key === "class") {
+        return [node.className, value].filter(Boolean).join(" ");
+      }
+      if (node.hasAttribute(key))
+        return;
       return value;
-    });
-  });
-  web.spread(node, solidJs.mergeProps(props, composedProps));
+    })
+  );
+  web.spread(node, solidJs.mergeProps(childProps));
 };
 
 exports.spread = spread;

package/spread.mjs

@@ -1,34 +1,38 @@
 import { createMemo, mergeProps } from 'solid-js';
 import { spread as spread$1 } from 'solid-js/web';
-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);
+function mapProps(props, mapper) {
+  return Object.fromEntries(Object.entries(props).map(([key, value]) => [key, mapper(key, value)]));
+}
 const spread = (node, props) => {
-  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]])
   );
-  const composedProps = createMemo(() => {
-    return mapProps(parentProps, (key, value) => {
-      const prop = getEventKey(key);
-      if (hasOwn(nodeEvents, prop)) {
+  const childProps = createMemo(
+    () => mapProps(props, (key, value) => {
+      const eventKey = getEventKey(key);
+      if (hasOwn(nodeEvents, eventKey)) {
         return function next(...args) {
-          value(...args);
-          nodeEvents[prop](...args);
+          if (typeof value === "function")
+            value(...args);
+          nodeEvents[eventKey](...args);
         };
       }
       if (key === "style") {
         return mergeStyle(node.style.cssText, value);
       }
+      if (key === "class") {
+        return [node.className, value].filter(Boolean).join(" ");
+      }
+      if (node.hasAttribute(key))
+        return;
       return value;
-    });
-  });
-  spread$1(node, mergeProps(props, composedProps));
+    })
+  );
+  spread$1(node, mergeProps(childProps));
 };
 
 export { spread };

package/spread.test.d.ts

@@ -0,0 +1 @@
+export {};

package/switch/index.cjs

@@ -7,7 +7,6 @@ const switchContext = require('./switch-context.cjs');
 const switchControl = require('./switch-control.cjs');
 const switchLabel = require('./switch-label.cjs');
 const switchThumb = require('./switch-thumb.cjs');
-const zagSwitch = require('@zag-js/switch');
 
 const Switch = Object.assign(_switch.Switch, {
   Root: _switch.Switch,
@@ -20,8 +19,4 @@ exports.useSwitchContext = switchContext.useSwitchContext;
 exports.SwitchControl = switchControl.SwitchControl;
 exports.SwitchLabel = switchLabel.SwitchLabel;
 exports.SwitchThumb = switchThumb.SwitchThumb;
-Object.defineProperty(exports, 'switchAnatomy', {
-  enumerable: true,
-  get: () => zagSwitch.anatomy
-});
 exports.Switch = Switch;

package/switch/index.d.ts

@@ -1,15 +1,14 @@
 import { JSX } from 'solid-js';
 import { type SwitchProps } from './switch';
-import { useSwitchContext } from './switch-context';
+import { useSwitchContext, type SwitchContext } from './switch-context';
 import { SwitchControl, type SwitchControlProps } from './switch-control';
 import { SwitchLabel, type SwitchLabelProps } from './switch-label';
 import { SwitchThumb, type SwitchThumbProps } from './switch-thumb';
-import { switchAnatomy } from './switch.anatomy';
 declare const Switch: ((props: SwitchProps) => JSX.Element) & {
     Root: (props: SwitchProps) => JSX.Element;
     Control: (props: SwitchControlProps) => JSX.Element;
     Label: (props: SwitchLabelProps) => JSX.Element;
     Thumb: (props: SwitchThumbProps) => JSX.Element;
 };
-export { Switch, SwitchControl, SwitchLabel, SwitchThumb, switchAnatomy, useSwitchContext };
-export type { SwitchControlProps, SwitchLabelProps, SwitchProps, SwitchThumbProps };
+export { Switch, SwitchControl, SwitchLabel, SwitchThumb, useSwitchContext };
+export type { SwitchContext, SwitchControlProps, SwitchLabelProps, SwitchProps, SwitchThumbProps };

package/switch/index.mjs

@@ -3,7 +3,6 @@ export { useSwitchContext } from './switch-context.mjs';
 import { SwitchControl } from './switch-control.mjs';
 import { SwitchLabel } from './switch-label.mjs';
 import { SwitchThumb } from './switch-thumb.mjs';
-export { anatomy as switchAnatomy } from '@zag-js/switch';
 
 const Switch = Object.assign(Switch$1, {
   Root: Switch$1,

package/switch/switch-control.cjs

@@ -10,8 +10,8 @@ const switchContext = require('./switch-context.cjs');
 const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const SwitchControl = props => {
   const api = switchContext.useSwitchContext();
-  const controlProps = solid.mergeProps(() => api().controlProps, props);
-  return [web.createComponent(factory.ark.span, controlProps), (() => {
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return [web.createComponent(factory.ark.span, mergedProps), (() => {
     const _el$ = _tmpl$();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;

package/switch/switch-control.mjs

@@ -6,8 +6,8 @@ import { useSwitchContext } from './switch-context.mjs';
 const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const SwitchControl = props => {
   const api = useSwitchContext();
-  const controlProps = mergeProps(() => api().controlProps, props);
-  return [createComponent(ark.span, controlProps), (() => {
+  const mergedProps = mergeProps(() => api().controlProps, props);
+  return [createComponent(ark.span, mergedProps), (() => {
     const _el$ = _tmpl$();
     spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
     return _el$;

package/switch/switch.cjs

@@ -11,14 +11,14 @@ const switchContext = require('./switch-context.cjs');
 const useSwitch = require('./use-switch.cjs');
 
 const Switch = props => {
-  const [switchProps, labelProps] = createSplitProps.createSplitProps()(props, ['checked', 'dir', 'disabled', 'focusable', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'label', 'name', 'onChange', 'readOnly', 'required', 'value']);
+  const [switchProps, labelProps] = createSplitProps.createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', 'required', 'value']);
   const api = useSwitch.useSwitch(switchProps);
-  const rootProps = solid.mergeProps(() => api().rootProps, labelProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, labelProps);
   const getChildren = () => runIfFn.runIfFn(props.children, api);
   return web.createComponent(switchContext.SwitchProvider, {
     value: api,
     get children() {
-      return web.createComponent(factory.ark.label, web.mergeProps(rootProps, {
+      return web.createComponent(factory.ark.label, web.mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }

package/switch/switch.mjs

@@ -7,14 +7,14 @@ import { SwitchProvider } from './switch-context.mjs';
 import { useSwitch } from './use-switch.mjs';
 
 const Switch = props => {
-  const [switchProps, labelProps] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'focusable', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'label', 'name', 'onChange', 'readOnly', 'required', 'value']);
+  const [switchProps, labelProps] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', 'required', 'value']);
   const api = useSwitch(switchProps);
-  const rootProps = mergeProps(() => api().rootProps, labelProps);
+  const mergedProps = mergeProps(() => api().rootProps, labelProps);
   const getChildren = () => runIfFn(props.children, api);
   return createComponent(SwitchProvider, {
     value: api,
     get children() {
-      return createComponent(ark.label, mergeProps$1(rootProps, {
+      return createComponent(ark.label, mergeProps$1(mergedProps, {
         get children() {
           return getChildren();
         }

package/switch/switch.stories.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'solid-js';
 import type { Meta } from 'storybook-solidjs';
-import { Switch } from '.';
+import { Switch } from './';
 type SwitchType = typeof Switch;
 declare const meta: Meta<SwitchType>;
 export default meta;

package/tabs/index.cjs

@@ -6,12 +6,11 @@ const tabContent = require('./tab-content.cjs');
 const tabIndicator = require('./tab-indicator.cjs');
 const tabList = require('./tab-list.cjs');
 const tabTrigger = require('./tab-trigger.cjs');
-const tabs$1 = require('./tabs.cjs');
+const tabs = require('./tabs.cjs');
 const tabsContext = require('./tabs-context.cjs');
-const tabs = require('@zag-js/tabs');
 
-const Tabs = Object.assign(tabs$1.Tabs, {
-  Root: tabs$1.Tabs,
+const Tabs = Object.assign(tabs.Tabs, {
+  Root: tabs.Tabs,
   Content: tabContent.TabContent,
   Indicator: tabIndicator.TabIndicator,
   List: tabList.TabList,
@@ -23,8 +22,4 @@ exports.TabIndicator = tabIndicator.TabIndicator;
 exports.TabList = tabList.TabList;
 exports.TabTrigger = tabTrigger.TabTrigger;
 exports.useTabsContext = tabsContext.useTabsContext;
-Object.defineProperty(exports, 'tabsAnatomy', {
-  enumerable: true,
-  get: () => tabs.anatomy
-});
 exports.Tabs = Tabs;

package/tabs/index.d.ts

@@ -4,8 +4,7 @@ import { TabIndicator, type TabIndicatorProps } from './tab-indicator';
 import { TabList, type TabListProps } from './tab-list';
 import { TabTrigger, type TabTriggerProps } from './tab-trigger';
 import { type TabsProps } from './tabs';
-import { useTabsContext } from './tabs-context';
-import { tabsAnatomy } from './tabs.anatomy';
+import { useTabsContext, type TabsContext } from './tabs-context';
 declare const Tabs: ((props: TabsProps) => JSX.Element) & {
     Root: (props: TabsProps) => JSX.Element;
     Content: (props: TabContentProps) => JSX.Element;
@@ -13,5 +12,5 @@ declare const Tabs: ((props: TabsProps) => JSX.Element) & {
     List: (props: TabListProps) => JSX.Element;
     Trigger: (props: TabTriggerProps) => JSX.Element;
 };
-export { TabContent, TabIndicator, TabList, TabTrigger, Tabs, tabsAnatomy, useTabsContext };
-export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsProps };
+export { TabContent, TabIndicator, TabList, TabTrigger, Tabs, useTabsContext };
+export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsContext, TabsProps, };

package/tabs/index.mjs

@@ -4,7 +4,6 @@ import { TabList } from './tab-list.mjs';
 import { TabTrigger } from './tab-trigger.mjs';
 import { Tabs as Tabs$1 } from './tabs.mjs';
 export { useTabsContext } from './tabs-context.mjs';
-export { anatomy as tabsAnatomy } from '@zag-js/tabs';
 
 const Tabs = Object.assign(Tabs$1, {
   Root: Tabs$1,

package/tabs/tabs.cjs

@@ -10,7 +10,7 @@ const tabsContext = require('./tabs-context.cjs');
 const useTabs = require('./use-tabs.cjs');
 
 const Tabs = props => {
-  const [tabsParams, restProps] = createSplitProps.createSplitProps()(props, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onChange', 'onDelete', 'onFocus', 'orientation', 'translations', 'value']);
+  const [tabsParams, restProps] = createSplitProps.createSplitProps()(props, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
   const api = useTabs.useTabs(tabsParams);
   const rootProps = solid.mergeProps(() => api().rootProps, restProps);
   return web.createComponent(tabsContext.TabsProvider, {

package/tabs/tabs.mjs

@@ -6,7 +6,7 @@ import { TabsProvider } from './tabs-context.mjs';
 import { useTabs } from './use-tabs.mjs';
 
 const Tabs = props => {
-  const [tabsParams, restProps] = createSplitProps()(props, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onChange', 'onDelete', 'onFocus', 'orientation', 'translations', 'value']);
+  const [tabsParams, restProps] = createSplitProps()(props, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
   const api = useTabs(tabsParams);
   const rootProps = mergeProps(() => api().rootProps, restProps);
   return createComponent(TabsProvider, {

package/tags-input/index.cjs

@@ -2,38 +2,38 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const tag = require('./tag.cjs');
-const tagDeleteTrigger = require('./tag-delete-trigger.cjs');
-const tagInput = require('./tag-input.cjs');
-const tagsInput$1 = require('./tags-input.cjs');
+const tagsInput = require('./tags-input.cjs');
 const tagsInputClearTrigger = require('./tags-input-clear-trigger.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 const tagsInputControl = require('./tags-input-control.cjs');
-const tagsInputField = require('./tags-input-field.cjs');
+const tagsInputInput = require('./tags-input-input.cjs');
+const tagsInputItem = require('./tags-input-item.cjs');
+const tagsInputItemContext = require('./tags-input-item-context.cjs');
+const tagsInputItemDeleteTrigger = require('./tags-input-item-delete-trigger.cjs');
+const tagsInputItemInput = require('./tags-input-item-input.cjs');
+const tagsInputItemText = require('./tags-input-item-text.cjs');
 const tagsInputLabel = require('./tags-input-label.cjs');
-const tagsInput = require('@zag-js/tags-input');
 
-const TagsInput = Object.assign(tagsInput$1.TagsInput, {
-  Root: tagsInput$1.TagsInput,
+const TagsInput = Object.assign(tagsInput.TagsInput, {
+  Root: tagsInput.TagsInput,
   ClearTrigger: tagsInputClearTrigger.TagsInputClearTrigger,
   Control: tagsInputControl.TagsInputControl,
-  Input: tagsInputField.TagsInputInput,
-  Label: tagsInputLabel.TagsInputLabel,
-  Tag: tag.Tag,
-  TagInput: tagInput.TagInput,
-  TagDeleteTrigger: tagDeleteTrigger.TagDeleteTrigger
+  Input: tagsInputInput.TagsInputInput,
+  Item: tagsInputItem.TagsInputItem,
+  ItemDeleteTrigger: tagsInputItemDeleteTrigger.TagsInputItemDeleteTrigger,
+  ItemInput: tagsInputItemInput.TagsInputItemInput,
+  ItemText: tagsInputItemText.TagsInputItemText,
+  Label: tagsInputLabel.TagsInputLabel
 });
 
-exports.Tag = tag.Tag;
-exports.TagDeleteTrigger = tagDeleteTrigger.TagDeleteTrigger;
-exports.TagInput = tagInput.TagInput;
 exports.TagsInputClearTrigger = tagsInputClearTrigger.TagsInputClearTrigger;
 exports.useTagsInputContext = tagsInputContext.useTagsInputContext;
 exports.TagsInputControl = tagsInputControl.TagsInputControl;
-exports.TagsInputInput = tagsInputField.TagsInputInput;
+exports.TagsInputInput = tagsInputInput.TagsInputInput;
+exports.TagsInputItem = tagsInputItem.TagsInputItem;
+exports.useTagsInputItemContext = tagsInputItemContext.useTagsInputItemContext;
+exports.TagsInputItemDeleteTrigger = tagsInputItemDeleteTrigger.TagsInputItemDeleteTrigger;
+exports.TagsInputItemInput = tagsInputItemInput.TagsInputItemInput;
+exports.TagsInputItemText = tagsInputItemText.TagsInputItemText;
 exports.TagsInputLabel = tagsInputLabel.TagsInputLabel;
-Object.defineProperty(exports, 'tagsInputAnatomy', {
-  enumerable: true,
-  get: () => tagsInput.anatomy
-});
 exports.TagsInput = TagsInput;

package/tags-input/index.d.ts

@@ -1,25 +1,25 @@
-import { HTMLArkProps } from '..';
-import { Assign } from '../types';
 import { JSX } from 'solid-js';
-import { Tag, type TagProps } from './tag';
-import { TagDeleteTrigger, type TagDeleteTriggerProps } from './tag-delete-trigger';
-import { TagInput, type TagInputProps } from './tag-input';
 import { type TagsInputProps } from './tags-input';
 import { TagsInputClearTrigger, type TagsInputClearTriggerProps } from './tags-input-clear-trigger';
-import { useTagsInputContext } from './tags-input-context';
+import { useTagsInputContext, type TagsInputContext } from './tags-input-context';
 import { TagsInputControl, type TagsInputControlProps } from './tags-input-control';
-import { TagsInputInput, type TagsInputInputProps } from './tags-input-field';
+import { TagsInputInput, type TagsInputInputProps } from './tags-input-input';
+import { TagsInputItem, type TagsInputItemProps } from './tags-input-item';
+import { useTagsInputItemContext, type TagsInputItemContext } from './tags-input-item-context';
+import { TagsInputItemDeleteTrigger, type TagsInputItemDeleteTriggerProps } from './tags-input-item-delete-trigger';
+import { TagsInputItemInput, type TagsInputItemInputProps } from './tags-input-item-input';
+import { TagsInputItemText, type TagsInputItemTextProps } from './tags-input-item-text';
 import { TagsInputLabel, type TagsInputLabelProps } from './tags-input-label';
-import { tagsInputAnatomy } from './tags-input.anatomy';
 declare const TagsInput: ((props: TagsInputProps) => JSX.Element) & {
     Root: (props: TagsInputProps) => JSX.Element;
     ClearTrigger: (props: TagsInputClearTriggerProps) => JSX.Element;
     Control: (props: TagsInputControlProps) => JSX.Element;
     Input: (props: TagsInputInputProps) => JSX.Element;
+    Item: (props: TagsInputItemProps) => JSX.Element;
+    ItemDeleteTrigger: (props: TagsInputItemDeleteTriggerProps) => JSX.Element;
+    ItemInput: (props: TagsInputItemInputProps) => JSX.Element;
+    ItemText: (props: TagsInputItemTextProps) => JSX.Element;
     Label: (props: TagsInputLabelProps) => JSX.Element;
-    Tag: (props: Assign<HTMLArkProps<"div">, TagProps>) => JSX.Element;
-    TagInput: (props: TagInputProps) => JSX.Element;
-    TagDeleteTrigger: (props: TagDeleteTriggerProps) => JSX.Element;
 };
-export { Tag, TagDeleteTrigger, TagInput, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputLabel, tagsInputAnatomy, useTagsInputContext, };
-export type { TagDeleteTriggerProps, TagInputProps, TagProps, TagsInputClearTriggerProps, TagsInputControlProps, TagsInputInputProps, TagsInputLabelProps, TagsInputProps, };
+export { TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, useTagsInputContext, useTagsInputItemContext, };
+export type { TagsInputClearTriggerProps, TagsInputContext, TagsInputControlProps, TagsInputInputProps, TagsInputItemContext, TagsInputItemDeleteTriggerProps, TagsInputItemInputProps, TagsInputItemProps, TagsInputItemTextProps, TagsInputLabelProps, TagsInputProps, };

package/tags-input/index.mjs

@@ -1,23 +1,25 @@
-import { Tag } from './tag.mjs';
-import { TagDeleteTrigger } from './tag-delete-trigger.mjs';
-import { TagInput } from './tag-input.mjs';
 import { TagsInput as TagsInput$1 } from './tags-input.mjs';
 import { TagsInputClearTrigger } from './tags-input-clear-trigger.mjs';
 export { useTagsInputContext } from './tags-input-context.mjs';
 import { TagsInputControl } from './tags-input-control.mjs';
-import { TagsInputInput } from './tags-input-field.mjs';
+import { TagsInputInput } from './tags-input-input.mjs';
+import { TagsInputItem } from './tags-input-item.mjs';
+export { useTagsInputItemContext } from './tags-input-item-context.mjs';
+import { TagsInputItemDeleteTrigger } from './tags-input-item-delete-trigger.mjs';
+import { TagsInputItemInput } from './tags-input-item-input.mjs';
+import { TagsInputItemText } from './tags-input-item-text.mjs';
 import { TagsInputLabel } from './tags-input-label.mjs';
-export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
 
 const TagsInput = Object.assign(TagsInput$1, {
   Root: TagsInput$1,
   ClearTrigger: TagsInputClearTrigger,
   Control: TagsInputControl,
   Input: TagsInputInput,
-  Label: TagsInputLabel,
-  Tag,
-  TagInput,
-  TagDeleteTrigger
+  Item: TagsInputItem,
+  ItemDeleteTrigger: TagsInputItemDeleteTrigger,
+  ItemInput: TagsInputItemInput,
+  ItemText: TagsInputItemText,
+  Label: TagsInputLabel
 });
 
-export { Tag, TagDeleteTrigger, TagInput, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputLabel };
+export { TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel };

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

@@ -8,9 +8,9 @@ const factory = require('../factory.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 
 const TagsInputClearTrigger = props => {
-  const tagsInput = tagsInputContext.useTagsInputContext();
-  const triggerProps = solid.mergeProps(() => tagsInput().clearTriggerProps, props);
-  return web.createComponent(factory.ark.button, triggerProps);
+  const api = tagsInputContext.useTagsInputContext();
+  const mergedProps = solid.mergeProps(() => api().clearTriggerProps, props);
+  return web.createComponent(factory.ark.button, mergedProps);
 };
 
 exports.TagsInputClearTrigger = TagsInputClearTrigger;

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

@@ -4,9 +4,9 @@ import { ark } from '../factory.mjs';
 import { useTagsInputContext } from './tags-input-context.mjs';
 
 const TagsInputClearTrigger = props => {
-  const tagsInput = useTagsInputContext();
-  const triggerProps = mergeProps(() => tagsInput().clearTriggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps(() => api().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 export { TagsInputClearTrigger };

package/tags-input/tags-input-control.cjs

@@ -7,15 +7,10 @@ const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 
-const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const TagsInputControl = props => {
   const api = tagsInputContext.useTagsInputContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
-  return [web.createComponent(factory.ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$();
-    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.TagsInputControl = TagsInputControl;

package/tags-input/tags-input-control.mjs

@@ -1,17 +1,12 @@
-import { createComponent, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
+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 _tmpl$ = /*#__PURE__*/template(`<input>`);
 const TagsInputControl = props => {
   const api = useTagsInputContext();
   const mergedProps = mergeProps(() => api().controlProps, props);
-  return [createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$();
-    spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  return createComponent(ark.div, mergedProps);
 };
 
 export { TagsInputControl };

package/tags-input/{tags-input-field.cjs → tags-input-input.cjs}

@@ -9,8 +9,8 @@ const tagsInputContext = require('./tags-input-context.cjs');
 
 const TagsInputInput = props => {
   const api = tagsInputContext.useTagsInputContext();
-  const inputProps = solid.mergeProps(() => api().inputProps, props);
-  return web.createComponent(factory.ark.input, inputProps);
+  const mergedProps = solid.mergeProps(() => api().inputProps, props);
+  return web.createComponent(factory.ark.input, mergedProps);
 };
 
 exports.TagsInputInput = TagsInputInput;