@ark-ui/react 0.14.0 → 0.15.0

package/splitter/index.d.ts

@@ -1,50 +1,21 @@
-import { UseSplitterReturn } from './use-splitter';
-import { Context, PanelProps, ResizeTriggerProps } from '@zag-js/splitter';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, ButtonHTMLAttributes } from 'react';
+import { PanelProps, ResizeTriggerProps } from '@zag-js/splitter';
+import { UseSplitterProps, UseSplitterReturn } from './use-splitter';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 /// <reference types="react" />
 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: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "children" | "getRootNode" | "id" | "ids" | "dir" | "onResize" | "size" | "orientation" | "onResizeStart" | "onResizeEnd" | "defaultSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultSize?: {
-        id: string | number;
-        size?: number | undefined;
-        minSize?: number | undefined;
-        maxSize?: number | undefined;
-    }[] | undefined;
-} & {
+declare const Splitter: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | keyof UseSplitterProps> & UseSplitterProps & {
     children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
 } & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "children" | "getRootNode" | "id" | "ids" | "dir" | "onResize" | "size" | "orientation" | "onResizeStart" | "onResizeEnd" | "defaultSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        defaultSize?: {
-            id: string | number;
-            size?: number | undefined;
-            minSize?: number | undefined;
-            maxSize?: number | undefined;
-        }[] | undefined;
-    } & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | keyof UseSplitterProps> & UseSplitterProps & {
         children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
     } & RefAttributes<HTMLDivElement>>;
-    Panel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, keyof PanelProps> & PanelProps & RefAttributes<HTMLDivElement>>;
-    ResizeTrigger: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, keyof ResizeTriggerProps> & ResizeTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Panel: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof PanelProps> & PanelProps & RefAttributes<HTMLDivElement>>;
+    ResizeTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof ResizeTriggerProps> & ResizeTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
 export { Splitter, SplitterPanel, SplitterResizeTrigger, splitterAnatomy, useSplitterContext };
-export type { SplitterPanelProps, SplitterProps, SplitterResizeTriggerProps };
+export type { SplitterContext, SplitterPanelProps, SplitterProps, SplitterResizeTriggerProps };

package/splitter/splitter-panel.d.ts

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

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

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

package/splitter/splitter.d.ts

@@ -1,23 +1,10 @@
-import { Context } from '@zag-js/splitter';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ReactNode } from 'react';
-import { type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseSplitterProps, type UseSplitterReturn } from './use-splitter';
-export type SplitterProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseSplitterProps & {
+export type SplitterProps = Assign<HTMLArkProps<'div'>, UseSplitterProps & {
     children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
 }>;
-export declare const Splitter: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "children" | "getRootNode" | "id" | "ids" | "dir" | "onResize" | "size" | "orientation" | "onResizeStart" | "onResizeEnd" | "defaultSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultSize?: {
-        id: string | number;
-        size?: number | undefined;
-        minSize?: number | undefined;
-        maxSize?: number | undefined;
-    }[] | undefined;
-} & {
+export declare const Splitter: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | keyof UseSplitterProps> & UseSplitterProps & {
     children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
 } & RefAttributes<HTMLDivElement>>;

package/splitter/splitter.stories.d.ts

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

package/splitter/use-splitter.d.ts

@@ -1,7 +1,7 @@
 import * as splitter from '@zag-js/splitter';
 import { type Optional } from '../types';
-export type UseSplitterProps = Optional<splitter.Context, 'id'> & {
+export interface UseSplitterProps extends Optional<splitter.Context, 'id'> {
     defaultSize?: splitter.Context['size'];
-};
+}
 export type UseSplitterReturn = splitter.Api;
 export declare const useSplitter: (props: UseSplitterProps) => UseSplitterReturn;

package/switch/index.d.ts

@@ -1,42 +1,29 @@
 import { UseSwitchProps, UseSwitchReturn } from './use-switch';
+import { HTMLArkProps } from '..';
 import { Assign } from '../types';
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, ReactNode, RefAttributes, HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, HTMLAttributes } from 'react';
 /// <reference types="react" />
 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: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, UseSwitchProps>, "children"> & {
+declare const Switch: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"label">, UseSwitchProps>, "children"> & {
     children?: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
 } & RefAttributes<HTMLLabelElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, UseSwitchProps>, "children"> & {
+    Root: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"label">, UseSwitchProps>, "children"> & {
         children?: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
     } & RefAttributes<HTMLLabelElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-    } & {
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLSpanElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-    } & {
+    } & RefAttributes<HTMLSpanElement>>;
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLSpanElement>>;
-    Thumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-    } & {
+    } & RefAttributes<HTMLSpanElement>>;
+    Thumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLSpanElement>>;
+    } & RefAttributes<HTMLSpanElement>>;
 };
 export { Switch, SwitchControl, SwitchLabel, SwitchThumb, switchAnatomy, useSwitchContext };
-export type { SwitchControlProps, SwitchLabelProps, SwitchProps, SwitchThumbProps };
+export type { SwitchContext, SwitchControlProps, SwitchLabelProps, SwitchProps, SwitchThumbProps };

package/switch/switch-control.cjs

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

package/switch/switch-control.d.ts

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

package/switch/switch-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 { useSwitchContext } from './switch-context.mjs';
 
 const SwitchControl = forwardRef((props, ref) => {
-  const { controlProps, hiddenInputProps } = useSwitchContext();
-  const mergedProps = mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref }),
-    /* @__PURE__ */ jsx("input", { ...hiddenInputProps })
-  ] });
+  const api = useSwitchContext();
+  const mergedProps = mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
 SwitchControl.displayName = "SwitchControl";
 

package/switch/switch-label.d.ts

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

package/switch/switch-thumb.d.ts

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

package/switch/switch.cjs

@@ -18,7 +18,6 @@ const Switch = react.forwardRef((props, ref) => {
     "defaultChecked",
     "dir",
     "disabled",
-    "focusable",
     "form",
     "getRootNode",
     "id",
@@ -34,7 +33,10 @@ const Switch = react.forwardRef((props, ref) => {
   const api = useSwitch.useSwitch(switchProps);
   const view = runIfFn.runIfFn(children, api);
   const mergedProps = react$1.mergeProps(api.rootProps, labelProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(switchContext.SwitchProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(switchContext.SwitchProvider, { value: api, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 Switch.displayName = "Switch";
 

package/switch/switch.d.ts

@@ -1,15 +1,10 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, ReactNode } from 'react';
-import { type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseSwitchProps, type UseSwitchReturn } from './use-switch';
-export type SwitchProps = Assign<Assign<ComponentPropsWithoutRef<typeof ark.label>, UseSwitchProps>, {
+export type SwitchProps = Assign<Assign<HTMLArkProps<'label'>, UseSwitchProps>, {
     children?: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
 }>;
-export declare const Switch: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, UseSwitchProps>, "children"> & {
+export declare const Switch: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"label">, UseSwitchProps>, "children"> & {
     children?: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
 } & RefAttributes<HTMLLabelElement>>;

package/switch/switch.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';
@@ -14,7 +14,6 @@ const Switch = forwardRef((props, ref) => {
     "defaultChecked",
     "dir",
     "disabled",
-    "focusable",
     "form",
     "getRootNode",
     "id",
@@ -30,7 +29,10 @@ const Switch = forwardRef((props, ref) => {
   const api = useSwitch(switchProps);
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, labelProps);
-  return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsxs(SwitchProvider, { value: api, children: [
+    /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 Switch.displayName = "Switch";
 

package/switch/switch.stories.d.ts

@@ -6,4 +6,5 @@ declare const meta: Meta<SwitchType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const Controlled: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;
 export declare const RenderProp: () => JSX.Element;

package/switch/switch.test.d.ts

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

package/switch/use-switch.d.ts

@@ -1,7 +1,7 @@
 import * as zagSwitch from '@zag-js/switch';
 import { type Optional } from '../types';
-export type UseSwitchProps = Optional<zagSwitch.Context, 'id'> & {
-    defaultChecked?: boolean;
-};
+export interface UseSwitchProps extends Optional<zagSwitch.Context, 'id'> {
+    defaultChecked?: zagSwitch.Context['checked'];
+}
 export type UseSwitchReturn = zagSwitch.Api;
 export declare const useSwitch: (props: UseSwitchProps) => UseSwitchReturn;

package/tabs/index.d.ts

@@ -1,48 +1,28 @@
 import { TabPresenceProps } from './tab-presence';
-import { Context, ContentProps, TriggerProps } from '@zag-js/tabs';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ButtonHTMLAttributes } from 'react';
+import { ContentProps, TriggerProps } from '@zag-js/tabs';
+import { UseTabsProps } from './use-tabs';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes } from 'react';
 /// <reference types="react" />
 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 { useTabsContext, type TabsContext } from './tabs-context';
 import { tabsAnatomy } from './tabs.anatomy';
-declare const Tabs: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "value" | "getRootNode" | "id" | "ids" | "defaultValue" | "dir" | "onFocus" | "onChange" | "orientation" | "loop" | "translations" | "activationMode" | "onDelete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string | null | undefined;
-} & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+declare const Tabs: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseTabsProps> & UseTabsProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseTabsProps> & UseTabsProps & RefAttributes<HTMLDivElement>>;
+    Content: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "value" | "getRootNode" | "id" | "ids" | "defaultValue" | "dir" | "onFocus" | "onChange" | "orientation" | "loop" | "translations" | "activationMode" | "onDelete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        defaultValue?: string | null | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Content: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & ContentProps & Omit<TabPresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
-    Indicator: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    List: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & ContentProps & Omit<TabPresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+    Indicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    List: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, keyof TriggerProps> & TriggerProps & RefAttributes<HTMLButtonElement>>;
+    } & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof TriggerProps> & TriggerProps & RefAttributes<HTMLButtonElement>>;
 };
 export { TabContent, TabIndicator, TabList, TabTrigger, Tabs, tabsAnatomy, useTabsContext };
-export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsProps };
+export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsContext, TabsProps, };

package/tabs/tab-content.d.ts

@@ -1,12 +1,11 @@
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
 import { type ContentProps } from '@zag-js/tabs';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { type HTMLArkProps } from '../factory';
 import { type TabPresenceProps } from './tab-presence';
 export type TabContentProps = InnerTabContentProps & Omit<TabPresenceProps, 'children'>;
-export declare const TabContent: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+export declare const TabContent: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & ContentProps & Omit<TabPresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
-type InnerTabContentProps = ComponentPropsWithoutRef<typeof ark.div> & ContentProps;
+} & ContentProps & Omit<TabPresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+type InnerTabContentProps = HTMLArkProps<'div'> & ContentProps;
 export {};

package/tabs/tab-indicator.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type TabIndicatorProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const TabIndicator: 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 TabIndicatorProps = HTMLArkProps<'div'>;
+export declare const TabIndicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/tabs/tab-list.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type TabListProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const TabList: 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 TabListProps = HTMLArkProps<'div'>;
+export declare const TabList: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/tabs/tab-trigger.d.ts

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

package/tabs/tabs.cjs

@@ -21,7 +21,6 @@ const Tabs = react.forwardRef((props, ref) => {
     "ids",
     "loop",
     "onChange",
-    "onDelete",
     "onFocus",
     "orientation",
     "translations",

package/tabs/tabs.d.ts

@@ -1,13 +1,7 @@
-import { Context } from '@zag-js/tabs';
-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 UseTabsProps } from './use-tabs';
-export type TabsProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseTabsProps>;
-export declare const Tabs: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "value" | "getRootNode" | "id" | "ids" | "defaultValue" | "dir" | "onFocus" | "onChange" | "orientation" | "loop" | "translations" | "activationMode" | "onDelete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string | null | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export type TabsProps = Assign<HTMLArkProps<'div'>, UseTabsProps>;
+export declare const Tabs: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseTabsProps> & UseTabsProps & RefAttributes<HTMLDivElement>>;

package/tabs/tabs.mjs

@@ -17,7 +17,6 @@ const Tabs = forwardRef((props, ref) => {
     "ids",
     "loop",
     "onChange",
-    "onDelete",
     "onFocus",
     "orientation",
     "translations",

package/tabs/tabs.stories.d.ts

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

package/tabs/use-tabs.d.ts

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