@ark-ui/solid 0.9.0 → 0.10.0

package/switch/index.mjs

@@ -1,7 +1,15 @@
-export { Switch } from './switch.mjs';
+import { Switch as Switch$1 } from './switch.mjs';
 export { useSwitchContext } from './switch-context.mjs';
-export { SwitchControl } from './switch-control.mjs';
-export { SwitchInput } from './switch-input.mjs';
-export { SwitchLabel } from './switch-label.mjs';
-export { SwitchThumb } from './switch-thumb.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,
+  Control: SwitchControl,
+  Label: SwitchLabel,
+  Thumb: SwitchThumb
+});
+
+export { Switch, SwitchControl, SwitchLabel, SwitchThumb };

package/switch/switch-context.d.ts

@@ -1,7 +1,4 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { PublicApi } from '@zag-js/switch';
-import type { Accessor } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseSwitchReturn } from './use-switch';
 export type SwitchContext = UseSwitchReturn;
-export declare const SwitchProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useSwitchContext: () => Accessor<PublicApi<PropTypes>>;
+export declare const SwitchProvider: ContextProviderComponent<UseSwitchReturn>, useSwitchContext: () => UseSwitchReturn;

package/switch/switch-control.cjs

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

package/switch/switch-control.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type SwitchControlProps = HTMLArkProps<'span'>;
 export declare const SwitchControl: (props: SwitchControlProps) => JSX.Element;

package/switch/switch-control.mjs

@@ -1,12 +1,17 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSwitchContext } from './switch-context.mjs';
 
+const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const SwitchControl = props => {
-  const checkbox = useSwitchContext();
-  const controlProps = mergeProps(() => checkbox().controlProps, props);
-  return createComponent(ark.span, controlProps);
+  const api = useSwitchContext();
+  const controlProps = mergeProps(() => api().controlProps, props);
+  return [createComponent(ark.span, controlProps), (() => {
+    const _el$ = _tmpl$();
+    spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
 };
 
 export { SwitchControl };

package/switch/switch-label.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type SwitchLabelProps = HTMLArkProps<'span'>;
 export declare const SwitchLabel: (props: SwitchLabelProps) => JSX.Element;

package/switch/switch-thumb.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type SwitchThumbProps = HTMLArkProps<'span'>;
 export declare const SwitchThumb: (props: SwitchThumbProps) => JSX.Element;

package/switch/switch.stories.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+import { Switch } from '.';
+type SwitchType = typeof Switch;
+declare const meta: Meta<SwitchType>;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const RenderProp: () => JSX.Element;

package/switch/use-switch.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const solid = require('@zag-js/solid');
 const zagSwitch = require('@zag-js/switch');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/switch/use-switch.d.ts

@@ -1,7 +1,7 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { Accessor } from 'solid-js';
+import { type PropTypes } from '@zag-js/solid';
 import * as zagSwitch from '@zag-js/switch';
+import { type Accessor } from 'solid-js';
 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<zagSwitch.PublicApi<PropTypes>>;
+export type UseSwitchReturn = Accessor<zagSwitch.Api<PropTypes>>;
+export declare const useSwitch: (props: UseSwitchProps) => UseSwitchReturn;

package/switch/use-switch.mjs

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

package/tabs/index.cjs

@@ -6,19 +6,25 @@ 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 = require('./tabs.cjs');
+const tabs$1 = require('./tabs.cjs');
 const tabsContext = require('./tabs-context.cjs');
-const tabs$1 = require('@zag-js/tabs');
-
+const tabs = require('@zag-js/tabs');
 
+const Tabs = Object.assign(tabs$1.Tabs, {
+  Root: tabs$1.Tabs,
+  Content: tabContent.TabContent,
+  Indicator: tabIndicator.TabIndicator,
+  List: tabList.TabList,
+  Trigger: tabTrigger.TabTrigger
+});
 
 exports.TabContent = tabContent.TabContent;
 exports.TabIndicator = tabIndicator.TabIndicator;
 exports.TabList = tabList.TabList;
 exports.TabTrigger = tabTrigger.TabTrigger;
-exports.Tabs = tabs.Tabs;
 exports.useTabsContext = tabsContext.useTabsContext;
 Object.defineProperty(exports, 'tabsAnatomy', {
-	enumerable: true,
-	get: () => tabs$1.anatomy
+  enumerable: true,
+  get: () => tabs.anatomy
 });
+exports.Tabs = Tabs;

package/tabs/index.d.ts

@@ -1,7 +1,17 @@
-export { TabContent, type TabContentProps } from './tab-content';
-export { TabIndicator, type TabIndicatorProps } from './tab-indicator';
-export { TabList, type TabListProps } from './tab-list';
-export { TabTrigger, type TabTriggerProps } from './tab-trigger';
-export { Tabs, type TabsProps } from './tabs';
-export { useTabsContext } from './tabs-context';
-export { tabsAnatomy } from './tabs.anatomy';
+import { JSX } from 'solid-js';
+import { TabContent, type TabContentProps } from './tab-content';
+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';
+declare const Tabs: ((props: TabsProps) => JSX.Element) & {
+    Root: (props: TabsProps) => JSX.Element;
+    Content: (props: TabContentProps) => JSX.Element;
+    Indicator: (props: TabIndicatorProps) => 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 };

package/tabs/index.mjs

@@ -1,7 +1,17 @@
-export { TabContent } from './tab-content.mjs';
-export { TabIndicator } from './tab-indicator.mjs';
-export { TabList } from './tab-list.mjs';
-export { TabTrigger } from './tab-trigger.mjs';
-export { Tabs } from './tabs.mjs';
+import { TabContent } from './tab-content.mjs';
+import { TabIndicator } from './tab-indicator.mjs';
+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,
+  Content: TabContent,
+  Indicator: TabIndicator,
+  List: TabList,
+  Trigger: TabTrigger
+});
+
+export { TabContent, TabIndicator, TabList, TabTrigger, Tabs };

package/tabs/tab-content.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type connect } from '@zag-js/tabs';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';

package/tabs/tab-indicator.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type TabIndicatorProps = HTMLArkProps<'div'>;
 export declare const TabIndicator: (props: TabIndicatorProps) => JSX.Element;

package/tabs/tab-list.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type TabListProps = HTMLArkProps<'div'>;
 export declare const TabList: (props: TabListProps) => JSX.Element;

package/tabs/tab-trigger.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type TriggerProps } from '@zag-js/tabs';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';

package/tabs/tabs-context.d.ts

@@ -1,7 +1,4 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { PublicApi } from '@zag-js/tabs';
-import type { Accessor } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseTabsReturn } from './use-tabs';
 export type TabsContext = UseTabsReturn;
-export declare const TabsProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useTabsContext: () => Accessor<PublicApi<PropTypes>>;
+export declare const TabsProvider: ContextProviderComponent<UseTabsReturn>, useTabsContext: () => UseTabsReturn;

package/tabs/tabs.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseTabsProps } from './use-tabs';

package/tabs/tabs.stories.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const InitialTab: () => JSX.Element;
+export declare const Indicator: () => JSX.Element;
+export declare const DisabledTab: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Vertical: () => JSX.Element;
+export declare const Manual: () => JSX.Element;

package/tabs/use-tabs.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const solid = require('@zag-js/solid');
 const tabs = require('@zag-js/tabs');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/tabs/use-tabs.d.ts

@@ -1,7 +1,7 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { Accessor } from 'solid-js';
+import { type PropTypes } from '@zag-js/solid';
 import * as tabs from '@zag-js/tabs';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseTabsProps = Optional<tabs.Context, 'id'>;
-export type UseTabsReturn = ReturnType<typeof useTabs>;
-export declare const useTabs: (props: UseTabsProps) => Accessor<tabs.PublicApi<PropTypes>>;
+export type UseTabsReturn = Accessor<tabs.Api<PropTypes>>;
+export declare const useTabs: (props: UseTabsProps) => UseTabsReturn;

package/tabs/use-tabs.mjs

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

package/tags-input/index.cjs

@@ -5,26 +5,35 @@ 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 = require('./tags-input.cjs');
+const tagsInput$1 = 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 tagsInputLabel = require('./tags-input-label.cjs');
-const tagsInput$1 = require('@zag-js/tags-input');
-
+const tagsInput = require('@zag-js/tags-input');
 
+const TagsInput = Object.assign(tagsInput$1.TagsInput, {
+  Root: tagsInput$1.TagsInput,
+  ClearTrigger: tagsInputClearTrigger.TagsInputClearTrigger,
+  Control: tagsInputControl.TagsInputControl,
+  Input: tagsInputField.TagsInputInput,
+  Label: tagsInputLabel.TagsInputLabel,
+  Tag: tag.Tag,
+  TagInput: tagInput.TagInput,
+  TagDeleteTrigger: tagDeleteTrigger.TagDeleteTrigger
+});
 
 exports.Tag = tag.Tag;
 exports.TagDeleteTrigger = tagDeleteTrigger.TagDeleteTrigger;
 exports.TagInput = tagInput.TagInput;
-exports.TagsInput = tagsInput.TagsInput;
 exports.TagsInputClearTrigger = tagsInputClearTrigger.TagsInputClearTrigger;
 exports.useTagsInputContext = tagsInputContext.useTagsInputContext;
 exports.TagsInputControl = tagsInputControl.TagsInputControl;
-exports.TagsInputField = tagsInputField.TagsInputField;
+exports.TagsInputInput = tagsInputField.TagsInputInput;
 exports.TagsInputLabel = tagsInputLabel.TagsInputLabel;
 Object.defineProperty(exports, 'tagsInputAnatomy', {
-	enumerable: true,
-	get: () => tagsInput$1.anatomy
+  enumerable: true,
+  get: () => tagsInput.anatomy
 });
+exports.TagsInput = TagsInput;

package/tags-input/index.d.ts

@@ -1,10 +1,25 @@
-export { Tag, type TagProps } from './tag';
-export { TagDeleteTrigger, type TagDeleteTriggerProps } from './tag-delete-trigger';
-export { TagInput, type TagInputProps } from './tag-input';
-export { TagsInput, type TagsInputProps } from './tags-input';
-export { TagsInputClearTrigger, type TagsInputClearTriggerProps } from './tags-input-clear-trigger';
-export { useTagsInputContext } from './tags-input-context';
-export { TagsInputControl, type TagsInputControlProps } from './tags-input-control';
-export { TagsInputField, type TagsInputFieldProps } from './tags-input-field';
-export { TagsInputLabel, type TagsInputLabelProps } from './tags-input-label';
-export { tagsInputAnatomy } from './tags-input.anatomy';
+import { HTMLArkProps } from '../factory';
+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 { TagsInputControl, type TagsInputControlProps } from './tags-input-control';
+import { TagsInputInput, type TagsInputInputProps } from './tags-input-field';
+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;
+    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, };

package/tags-input/index.mjs

@@ -1,10 +1,23 @@
-export { Tag } from './tag.mjs';
-export { TagDeleteTrigger } from './tag-delete-trigger.mjs';
-export { TagInput } from './tag-input.mjs';
-export { TagsInput } from './tags-input.mjs';
-export { TagsInputClearTrigger } from './tags-input-clear-trigger.mjs';
+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';
-export { TagsInputControl } from './tags-input-control.mjs';
-export { TagsInputField } from './tags-input-field.mjs';
-export { TagsInputLabel } from './tags-input-label.mjs';
+import { TagsInputControl } from './tags-input-control.mjs';
+import { TagsInputInput } from './tags-input-field.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
+});
+
+export { Tag, TagDeleteTrigger, TagInput, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputLabel };

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

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type TagProps } from './tag';

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

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type TagProps } from './tag';

package/tags-input/tag.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export type TagProps = {

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

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

package/tags-input/tags-input-context.d.ts

@@ -1,7 +1,4 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { PublicApi } from '@zag-js/tags-input';
-import type { Accessor } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseTagsInputReturn } from './use-tags-input';
 export type TagsInputContext = UseTagsInputReturn;
-export declare const TagsInputProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useTagsInputContext: () => Accessor<PublicApi<PropTypes>>;
+export declare const TagsInputProvider: ContextProviderComponent<UseTagsInputReturn>, useTagsInputContext: () => UseTagsInputReturn;

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

@@ -7,10 +7,15 @@ 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 controlProps = solid.mergeProps(() => api().controlProps, props);
-  return web.createComponent(factory.ark.div, controlProps);
+  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$;
+  })()];
 };
 
 exports.TagsInputControl = TagsInputControl;

package/tags-input/tags-input-control.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type TagsInputControlProps = HTMLArkProps<'div'>;
 export declare const TagsInputControl: (props: TagsInputControlProps) => JSX.Element;

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

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

package/tags-input/tags-input-field.cjs

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

package/tags-input/tags-input-field.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type TagsInputFieldProps = HTMLArkProps<'input'>;
-export declare const TagsInputField: (props: TagsInputFieldProps) => JSX.Element;
+export type TagsInputInputProps = HTMLArkProps<'input'>;
+export declare const TagsInputInput: (props: TagsInputInputProps) => JSX.Element;

package/tags-input/tags-input-field.mjs

@@ -3,10 +3,10 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useTagsInputContext } from './tags-input-context.mjs';
 
-const TagsInputField = props => {
+const TagsInputInput = props => {
   const api = useTagsInputContext();
   const inputProps = mergeProps(() => api().inputProps, props);
   return createComponent(ark.input, inputProps);
 };
 
-export { TagsInputField };
+export { TagsInputInput };

package/tags-input/tags-input-label.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type TagsInputLabelProps = HTMLArkProps<'label'>;
 export declare const TagsInputLabel: (props: TagsInputLabelProps) => JSX.Element;

package/tags-input/tags-input.cjs

@@ -11,7 +11,7 @@ const tagsInputContext = require('./tags-input-context.cjs');
 const useTagsInput = require('./use-tags-input.cjs');
 
 const TagsInput = props => {
-  const [tagsInputParams, restProps] = createSplitProps.createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onChange', 'onHighlight', 'onInteractOutside', 'onInvalid', 'onTagUpdate', 'readOnly', 'translations', 'validate', 'value']);
+  const [tagsInputParams, restProps] = createSplitProps.createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onChange', 'onFocusChange', 'onFocusOutside', 'onInteractOutside', 'onInvalid', 'onInvalid', 'onPointerDownOutside', 'readOnly', 'translations', 'validate', 'value']);
   const api = useTagsInput.useTagsInput(tagsInputParams);
   const rootProps = solid.mergeProps(() => api().rootProps, restProps);
   const getChildren = () => runIfFn.runIfFn(restProps.children, api);

package/tags-input/tags-input.mjs

@@ -7,7 +7,7 @@ import { TagsInputProvider } from './tags-input-context.mjs';
 import { useTagsInput } from './use-tags-input.mjs';
 
 const TagsInput = props => {
-  const [tagsInputParams, restProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onChange', 'onHighlight', 'onInteractOutside', 'onInvalid', 'onTagUpdate', 'readOnly', 'translations', 'validate', 'value']);
+  const [tagsInputParams, restProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onChange', 'onFocusChange', 'onFocusOutside', 'onInteractOutside', 'onInvalid', 'onInvalid', 'onPointerDownOutside', 'readOnly', 'translations', 'validate', 'value']);
   const api = useTagsInput(tagsInputParams);
   const rootProps = mergeProps(() => api().rootProps, restProps);
   const getChildren = () => runIfFn(restProps.children, api);

package/tags-input/tags-input.stories.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;

package/tags-input/use-tags-input.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const solid = require('@zag-js/solid');
 const tagsInput = require('@zag-js/tags-input');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/tags-input/use-tags-input.d.ts

@@ -1,7 +1,7 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { Accessor } from 'solid-js';
+import { type PropTypes } from '@zag-js/solid';
 import * as tagsInput from '@zag-js/tags-input';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseTagsInputProps = Optional<tagsInput.Context, 'id'>;
-export type UseTagsInputReturn = ReturnType<typeof useTagsInput>;
-export declare const useTagsInput: (props: UseTagsInputProps) => Accessor<tagsInput.PublicApi<PropTypes>>;
+export type UseTagsInputReturn = Accessor<tagsInput.Api<PropTypes>>;
+export declare const useTagsInput: (props: UseTagsInputProps) => UseTagsInputReturn;