@ark-ui/react 0.14.0 → 0.15.0

package/tags-input/index.d.ts

@@ -1,56 +1,37 @@
 import { UseTagsInputProps } from './use-tags-input';
+import { HTMLArkProps } from '..';
 import { Assign } from '../types';
-import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, ReactNode, RefAttributes, ButtonHTMLAttributes, HTMLAttributes, LabelHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
 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 { TagsInputLabel, type TagsInputLabelProps } from './tags-input-label';
 import { tagsInputAnatomy } from './tags-input.anatomy';
-declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, UseTagsInputProps>, "children"> & {
+declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"input">, UseTagsInputProps>, "children"> & {
     children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
 } & RefAttributes<HTMLInputElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, UseTagsInputProps>, "children"> & {
+    Root: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"input">, UseTagsInputProps>, "children"> & {
         children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
     } & RefAttributes<HTMLInputElement>>;
-    ClearTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    ClearTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Input: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLInputElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Input: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLLabelElement>>;
-    Tag: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLInputElement>>;
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, keyof {
+    } & RefAttributes<HTMLLabelElement>>;
+    Tag: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof {
         index: string | number;
         value: string;
         disabled?: boolean | undefined;
@@ -59,11 +40,7 @@ declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<Detaile
         value: string;
         disabled?: boolean | undefined;
     } & RefAttributes<HTMLDivElement>>;
-    TagInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, keyof {
+    TagInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"input">, keyof {
         index: string | number;
         value: string;
         disabled?: boolean | undefined;
@@ -72,11 +49,7 @@ declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<Detaile
         value: string;
         disabled?: boolean | undefined;
     } & RefAttributes<HTMLInputElement>>;
-    TagDeleteTrigger: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, keyof {
+    TagDeleteTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof {
         index: string | number;
         value: string;
         disabled?: boolean | undefined;
@@ -87,4 +60,4 @@ declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<Detaile
     } & RefAttributes<HTMLButtonElement>>;
 };
 export { Tag, TagDeleteTrigger, TagInput, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputLabel, tagsInputAnatomy, useTagsInputContext, };
-export type { TagDeleteTriggerProps, TagInputProps, TagProps, TagsInputClearTriggerProps, TagsInputControlProps, TagsInputInputProps, TagsInputLabelProps, TagsInputProps, };
+export type { TagDeleteTriggerProps, TagInputProps, TagProps, TagsInputClearTriggerProps, TagsInputContext, TagsInputControlProps, TagsInputInputProps, TagsInputLabelProps, TagsInputProps, };

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

@@ -1,15 +1,12 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 type _TagProps = {
     index: string | number;
     value: string;
     disabled?: boolean;
 };
-export type TagDeleteTriggerProps = Assign<ComponentPropsWithoutRef<typeof ark.button>, _TagProps>;
-export declare const TagDeleteTrigger: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, keyof _TagProps> & _TagProps & RefAttributes<HTMLButtonElement>>;
+export type TagDeleteTriggerProps = Assign<HTMLArkProps<'button'>, _TagProps>;
+export declare const TagDeleteTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof _TagProps> & _TagProps & RefAttributes<HTMLButtonElement>>;
 export {};

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

@@ -1,15 +1,12 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 type _TagProps = {
     index: string | number;
     value: string;
     disabled?: boolean;
 };
-export type TagInputProps = Assign<ComponentPropsWithoutRef<typeof ark.input>, _TagProps>;
-export declare const TagInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, keyof _TagProps> & _TagProps & RefAttributes<HTMLInputElement>>;
+export type TagInputProps = Assign<HTMLArkProps<'input'>, _TagProps>;
+export declare const TagInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"input">, keyof _TagProps> & _TagProps & RefAttributes<HTMLInputElement>>;
 export {};

package/tags-input/tag.d.ts

@@ -1,15 +1,12 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 type _TagProps = {
     index: string | number;
     value: string;
     disabled?: boolean;
 };
-export type TagProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, _TagProps>;
-export declare const Tag: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, keyof _TagProps> & _TagProps & RefAttributes<HTMLDivElement>>;
+export type TagProps = Assign<HTMLArkProps<'div'>, _TagProps>;
+export declare const Tag: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof _TagProps> & _TagProps & RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type TagsInputClearTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
-export declare const TagsInputClearTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type TagsInputClearTriggerProps = HTMLArkProps<'button'>;
+export declare const TagsInputClearTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLButtonElement>>;
+} & RefAttributes<HTMLButtonElement>>;

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

@@ -10,12 +10,9 @@ const factory = require('../factory.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 
 const TagsInputControl = react.forwardRef((props, ref) => {
-  const { controlProps, hiddenInputProps } = tagsInputContext.useTagsInputContext();
-  const mergedProps = react$1.mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...hiddenInputProps })
-  ] });
+  const api = tagsInputContext.useTagsInputContext();
+  const mergedProps = react$1.mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 TagsInputControl.displayName = "TagsInputControl";
 

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

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type TagsInputControlProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const TagsInputControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type TagsInputControlProps = HTMLArkProps<'div'>;
+export declare const TagsInputControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

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

@@ -1,17 +1,14 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { useTagsInputContext } from './tags-input-context.mjs';
 
 const TagsInputControl = forwardRef((props, ref) => {
-  const { controlProps, hiddenInputProps } = useTagsInputContext();
-  const mergedProps = mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }),
-    /* @__PURE__ */ jsx("input", { ...hiddenInputProps })
-  ] });
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 TagsInputControl.displayName = "TagsInputControl";
 

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

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type TagsInputInputProps = ComponentPropsWithoutRef<typeof ark.input>;
-export declare const TagsInputInput: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type TagsInputInputProps = HTMLArkProps<'input'>;
+export declare const TagsInputInput: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLInputElement>>;
+} & RefAttributes<HTMLInputElement>>;

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

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type TagsInputLabelProps = ComponentPropsWithoutRef<typeof ark.label>;
-export declare const TagsInputLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type TagsInputLabelProps = HTMLArkProps<'label'>;
+export declare const TagsInputLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLLabelElement>>;
+} & RefAttributes<HTMLLabelElement>>;

package/tags-input/tags-input.cjs

@@ -46,10 +46,13 @@ const TagsInput = react.forwardRef((props, ref) => {
       "value"
     ]
   );
-  const tagsInput = useTagsInput.useTagsInput(useTagsInputProps);
-  const mergedProps = react$1.mergeProps(tagsInput.rootProps, inputProps);
-  const view = runIfFn.runIfFn(children, tagsInput);
-  return /* @__PURE__ */ jsxRuntime.jsx(tagsInputContext.TagsInputProvider, { value: tagsInput, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+  const api = useTagsInput.useTagsInput(useTagsInputProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, inputProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsxs(tagsInputContext.TagsInputProvider, { value: api, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 TagsInput.displayName = "TagsInput";
 

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

@@ -1,14 +1,10 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseTagsInputProps } from './use-tags-input';
-export type TagsInputProps = Assign<Assign<ComponentPropsWithoutRef<typeof ark.input>, UseTagsInputProps>, {
+export type TagsInputProps = Assign<Assign<HTMLArkProps<'input'>, UseTagsInputProps>, {
     children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
 }>;
-export declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, UseTagsInputProps>, "children"> & {
+export declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"input">, UseTagsInputProps>, "children"> & {
     children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
 } & RefAttributes<HTMLInputElement>>;

package/tags-input/tags-input.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -42,10 +42,13 @@ const TagsInput = forwardRef((props, ref) => {
       "value"
     ]
   );
-  const tagsInput = useTagsInput(useTagsInputProps);
-  const mergedProps = mergeProps(tagsInput.rootProps, inputProps);
-  const view = runIfFn(children, tagsInput);
-  return /* @__PURE__ */ jsx(TagsInputProvider, { value: tagsInput, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+  const api = useTagsInput(useTagsInputProps);
+  const mergedProps = mergeProps(api.rootProps, inputProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsxs(TagsInputProvider, { value: api, children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 TagsInput.displayName = "TagsInput";
 

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

@@ -1,7 +1,7 @@
 import * as tagsInput from '@zag-js/tags-input';
 import { type Optional } from '../types';
-export type UseTagsInputProps = Optional<tagsInput.Context, 'id'> & {
+export interface UseTagsInputProps extends Optional<tagsInput.Context, 'id'> {
     defaultValue?: tagsInput.Context['value'];
-};
+}
 export type UseTagsInputReturn = tagsInput.Api;
 export declare const useTagsInput: (props: UseTagsInputProps) => UseTagsInputReturn;

package/toast/index.d.ts

@@ -1,52 +1,35 @@
 import { Placement, Service } from '@zag-js/toast';
 import { JSX } from 'react/jsx-runtime';
 import { UseToastItemProps } from './use-toast-item';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
 /// <reference types="react" />
 import { Toast as ToastRoot, type ToastProps } from './toast';
 import { ToastCloseTrigger, type ToastCloseTriggerProps } from './toast-close-trigger';
 import { ToastDescription, type ToastDescriptionProps } from './toast-description';
 import { ToastGroup, type ToastGroupProps } from './toast-group';
-import { useToastItemContext } from './toast-item-context';
+import { useToastItemContext, type ToastItemContext } from './toast-item-context';
 import { ToastPlacements, type ToastPlacementsProps } from './toast-placements';
 import { ToastProvider, useToast, type ToastProviderProps } from './toast-provider';
 import { ToastTitle, type ToastTitleProps } from './toast-title';
 import { toastAnatomy } from './toast.anatomy';
-declare const Toast: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>> & {
+declare const Toast: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>> & {
     Provider: (props: ToastProviderProps) => JSX.Element;
-    Title: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-        ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined;
-    } & {
+    Title: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLHeadingElement>>;
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLHeadingElement>>;
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>>;
+    Description: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>>;
-    Description: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-        ref?: ((instance: HTMLParagraphElement | null) => void) | RefObject<HTMLParagraphElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLParagraphElement>>;
+    CloseTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLParagraphElement>>;
-    CloseTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
+    } & RefAttributes<HTMLButtonElement>>;
     Placements: (props: ToastPlacementsProps) => JSX.Element;
-    Group: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "children" | "placement"> & {
+    Group: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | "placement"> & {
         placement: Placement;
         children?: ReactNode | ((toasts: Service[]) => ReactNode);
     } & RefAttributes<HTMLDivElement>>;
 };
 export { Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastPlacements, ToastProvider, ToastRoot, ToastTitle, toastAnatomy, useToast, useToastItemContext, };
-export type { ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastPlacementsProps, ToastProps, ToastProviderProps, ToastTitleProps, };
+export type { ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastItemContext, ToastPlacementsProps, ToastProps, ToastProviderProps, ToastTitleProps, };

package/toast/toast-close-trigger.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ToastCloseTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
-export declare const ToastCloseTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ToastCloseTriggerProps = HTMLArkProps<'button'>;
+export declare const ToastCloseTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLButtonElement>>;
+} & RefAttributes<HTMLButtonElement>>;

package/toast/toast-description.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ToastDescriptionProps = ComponentPropsWithoutRef<typeof ark.p>;
-export declare const ToastDescription: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void) | RefObject<HTMLParagraphElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ToastDescriptionProps = HTMLArkProps<'p'>;
+export declare const ToastDescription: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLParagraphElement>>;
+} & RefAttributes<HTMLParagraphElement>>;

package/toast/toast-group.d.ts

@@ -1,16 +1,12 @@
 import { type Placement, type Service } from '@zag-js/toast';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-export type ToastGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, {
+export type ToastGroupProps = Assign<HTMLArkProps<'div'>, {
     placement: Placement;
     children?: ReactNode | ((toasts: Service[]) => ReactNode);
 }>;
-export declare const ToastGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "children" | "placement"> & {
+export declare const ToastGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | "placement"> & {
     placement: Placement;
     children?: ReactNode | ((toasts: Service[]) => ReactNode);
 } & RefAttributes<HTMLDivElement>>;

package/toast/toast-provider.cjs

@@ -40,6 +40,5 @@ const ToastProvider = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ToastContextProvider, { value: api, children });
 };
 
-exports.ToastContextProvider = ToastContextProvider;
 exports.ToastProvider = ToastProvider;
 exports.useToast = useToast;

package/toast/toast-provider.d.ts

@@ -1,11 +1,10 @@
 import { JSX } from 'react/jsx-runtime';
 import { PropTypes } from '@zag-js/types';
 import * as toast from '@zag-js/toast';
-import { Provider, type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import { type Optional } from '../types';
 type GroupPublicContext = Parameters<(typeof toast)['group']['machine']>[0];
-export type ToastContext = ReturnType<(typeof toast)['group']['connect']>;
-export declare const ToastContextProvider: Provider<toast.GroupApi<PropTypes>>, useToast: () => toast.GroupApi<PropTypes>;
+declare const useToast: () => toast.GroupApi<PropTypes>;
 export type ToastProviderProps = PropsWithChildren & Optional<GroupPublicContext, 'id'>;
 export declare const ToastProvider: (props: ToastProviderProps) => JSX.Element;
-export {};
+export { useToast };

package/toast/toast-provider.mjs

@@ -17,4 +17,4 @@ const ToastProvider = (props) => {
   return /* @__PURE__ */ jsx(ToastContextProvider, { value: api, children });
 };
 
-export { ToastContextProvider, ToastProvider, useToast };
+export { ToastProvider, useToast };

package/toast/toast-title.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ToastTitleProps = ComponentPropsWithoutRef<typeof ark.h3>;
-export declare const ToastTitle: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-    ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ToastTitleProps = HTMLArkProps<'h3'>;
+export declare const ToastTitle: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLHeadingElement>>;
+} & RefAttributes<HTMLHeadingElement>>;

package/toast/toast.d.ts

@@ -1,10 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseToastItemProps } from './use-toast-item';
-export type ToastProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseToastItemProps>;
-export declare const Toast: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>>;
+export type ToastProps = Assign<HTMLArkProps<'div'>, UseToastItemProps>;
+export declare const Toast: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>>;

package/toast/toast.stories.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Toast, type ToastProviderProps } from '.';
+import { Toast, type ToastProviderProps } from './';
 type ToastType = typeof Toast;
 declare const meta: Meta<ToastType>;
 export default meta;

package/toggle-group/index.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const toggle = require('./toggle.cjs');
+const toggleGroup = require('./toggle-group.cjs');
+const toggleGroupContext = require('./toggle-group-context.cjs');
+const toggleGroup_anatomy = require('./toggle-group.anatomy.cjs');
+
+const ToggleGroup = Object.assign(toggleGroup.ToggleGroup, {
+  Root: toggleGroup.ToggleGroup,
+  Toggle: toggle.Toggle
+});
+
+exports.Toggle = toggle.Toggle;
+exports.useToggleGroupContext = toggleGroupContext.useToggleGroupContext;
+exports.toggleGroupAnatomy = toggleGroup_anatomy.toggleGroupAnatomy;
+exports.ToggleGroup = ToggleGroup;

package/toggle-group/index.d.ts

@@ -0,0 +1,20 @@
+import { UseToggleGroupProps } from './use-toggle-group';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { Toggle, type ToggleProps } from './toggle';
+import { type ToggleGroupProps } from './toggle-group';
+import { useToggleGroupContext, type ToggleGroupContext } from './toggle-group-context';
+import { toggleGroupAnatomy } from './toggle-group.anatomy';
+declare const ToggleGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseToggleGroupProps> & UseToggleGroupProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseToggleGroupProps> & UseToggleGroupProps & RefAttributes<HTMLDivElement>>;
+    Toggle: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof {
+        value: string;
+        disabled?: boolean | undefined;
+    }> & {
+        value: string;
+        disabled?: boolean | undefined;
+    } & RefAttributes<HTMLButtonElement>>;
+};
+export { Toggle, ToggleGroup, toggleGroupAnatomy, useToggleGroupContext };
+export type { ToggleGroupContext, ToggleGroupProps, ToggleProps };