@ark-ui/react 0.8.0-beta.0 → 0.8.0

package/slider/slider.mjs

@@ -0,0 +1,46 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { forwardRef } from '../forward-ref.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { SliderProvider } from './slider-context.mjs';
+import { useSlider } from './use-slider.mjs';
+
+const Slider = forwardRef((props, ref) => {
+  const { children, ...restProps } = props;
+  const [useSliderProps, divProps] = createSplitProps()(restProps, [
+    "aria-label",
+    "aria-labelledby",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "focusThumbOnChange",
+    "form",
+    "getAriaValueText",
+    "getRootNode",
+    "id",
+    "ids",
+    "invalid",
+    "max",
+    "min",
+    "name",
+    "onChange",
+    "onChangeEnd",
+    "onChangeStart",
+    "orientation",
+    "origin",
+    "readOnly",
+    "step",
+    "thumbAlignment",
+    "value"
+  ]);
+  const slider = useSlider(useSliderProps);
+  const mergedProps = mergeProps(slider.rootProps, divProps);
+  const view = runIfFn(children, slider);
+  return /* @__PURE__ */ jsx(SliderProvider, { value: slider, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+
+export { Slider };

package/slider/use-slider.cjs

@@ -0,0 +1,53 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('@zag-js/react');
+const slider = require('@zag-js/slider');
+const React = require('react');
+const reactDom = require('react-dom');
+const environmentContext = require('../environment/environment-context.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const slider__namespace = /*#__PURE__*/_interopNamespaceDefault(slider);
+
+const useSlider = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const initialContext = {
+    id: React.useId(),
+    getRootNode,
+    ...props,
+    value: props.defaultValue ?? props.value
+  };
+  const onChange = props.onChange;
+  const onChangeWithFlushSync = React.useCallback(
+    (e) => reactDom.flushSync(() => onChange?.(e)),
+    [onChange]
+  );
+  const context = {
+    ...initialContext,
+    value: props.value,
+    onChange: onChangeWithFlushSync
+  };
+  const [state, send] = react.useMachine(slider__namespace.machine(initialContext), { context });
+  return slider__namespace.connect(state, send, react.normalizeProps);
+};
+
+exports.useSlider = useSlider;

package/slider/use-slider.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, CSSProperties } from 'react';
+import * as slider from '@zag-js/slider';
+import { type Optional } from '../types';
+export type UseSliderProps = Optional<slider.Context, 'id'> & {
+    defaultValue?: slider.Context['value'];
+};
+export type UseSliderReturn = ReturnType<typeof useSlider>;
+export declare const useSlider: (props: UseSliderProps) => slider.PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>;

package/slider/use-slider.mjs

@@ -0,0 +1,30 @@
+'use client';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import * as slider from '@zag-js/slider';
+import { useId, useCallback } from 'react';
+import { flushSync } from 'react-dom';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
+
+const useSlider = (props) => {
+  const getRootNode = useEnvironmentContext();
+  const initialContext = {
+    id: useId(),
+    getRootNode,
+    ...props,
+    value: props.defaultValue ?? props.value
+  };
+  const onChange = props.onChange;
+  const onChangeWithFlushSync = useCallback(
+    (e) => flushSync(() => onChange?.(e)),
+    [onChange]
+  );
+  const context = {
+    ...initialContext,
+    value: props.value,
+    onChange: onChangeWithFlushSync
+  };
+  const [state, send] = useMachine(slider.machine(initialContext), { context });
+  return slider.connect(state, send, normalizeProps);
+};
+
+export { useSlider };

package/splitter/index.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const splitter = require('./splitter.cjs');
+const splitterContext = require('./splitter-context.cjs');
+const splitterPanel = require('./splitter-panel.cjs');
+const splitterResizeTrigger = require('./splitter-resize-trigger.cjs');
+const splitter$1 = require('@zag-js/splitter');
+
+
+
+exports.Splitter = splitter.Splitter;
+exports.useSplitterContext = splitterContext.useSplitterContext;
+exports.SplitterPanel = splitterPanel.SplitterPanel;
+exports.SplitterResizeTrigger = splitterResizeTrigger.SplitterResizeTrigger;
+Object.defineProperty(exports, 'splitterAnatomy', {
+	enumerable: true,
+	get: () => splitter$1.anatomy
+});

package/splitter/index.d.ts

@@ -0,0 +1,5 @@
+export { Splitter, type SplitterProps } from './splitter';
+export { useSplitterContext } from './splitter-context';
+export { SplitterPanel, type SplitterPanelProps } from './splitter-panel';
+export { SplitterResizeTrigger, type SplitterResizeTriggerProps } from './splitter-resize-trigger';
+export { splitterAnatomy } from './splitter.anatomy';

package/splitter/index.mjs

@@ -0,0 +1,6 @@
+'use client';
+export { Splitter } from './splitter.mjs';
+export { useSplitterContext } from './splitter-context.mjs';
+export { SplitterPanel } from './splitter-panel.mjs';
+export { SplitterResizeTrigger } from './splitter-resize-trigger.mjs';
+export { anatomy as splitterAnatomy } from '@zag-js/splitter';

package/splitter/splitter-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [SplitterProvider, useSplitterContext] = createContext.createContext({
+  name: "SplitterContext",
+  hookName: "useSplitterContext",
+  providerName: "<SplitterProvider />"
+});
+
+exports.SplitterProvider = SplitterProvider;
+exports.useSplitterContext = useSplitterContext;

package/splitter/splitter-context.d.ts

@@ -0,0 +1,11 @@
+import type { PublicApi } from '@zag-js/splitter';
+import type { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { type UseSplitterReturn } from './use-splitter';
+export type SplitterContext = UseSplitterReturn;
+export declare const SplitterProvider: Provider<PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>>, useSplitterContext: () => PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>;

package/splitter/splitter-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [SplitterProvider, useSplitterContext] = createContext({
+  name: "SplitterContext",
+  hookName: "useSplitterContext",
+  providerName: "<SplitterProvider />"
+});
+
+export { SplitterProvider, useSplitterContext };

package/splitter/splitter-panel.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+require('@zag-js/splitter');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const splitterContext = require('./splitter-context.cjs');
+
+const SplitterPanel = forwardRef.forwardRef((props, ref) => {
+  const [splitterPanelProps, divProps] = createSplitProps.createSplitProps()(props, ["id", "snapSize"]);
+  const { getPanelProps } = splitterContext.useSplitterContext();
+  const mergedProps = react.mergeProps(getPanelProps(splitterPanelProps), divProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+
+exports.SplitterPanel = SplitterPanel;

package/splitter/splitter-panel.d.ts

@@ -0,0 +1,6 @@
+import type { ForwardRefExoticComponent } from 'react';
+import { type PanelProps } from '@zag-js/splitter';
+import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type SplitterPanelProps = Assign<HTMLArkProps<'div'>, PanelProps>;
+export declare const SplitterPanel: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, PanelProps>>;

package/splitter/splitter-panel.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import '@zag-js/splitter';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { forwardRef } from '../forward-ref.mjs';
+import { useSplitterContext } from './splitter-context.mjs';
+
+const SplitterPanel = forwardRef((props, ref) => {
+  const [splitterPanelProps, divProps] = createSplitProps()(props, ["id", "snapSize"]);
+  const { getPanelProps } = useSplitterContext();
+  const mergedProps = mergeProps(getPanelProps(splitterPanelProps), divProps);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+
+export { SplitterPanel };

package/splitter/splitter-resize-trigger.cjs

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+require('@zag-js/splitter');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const splitterContext = require('./splitter-context.cjs');
+
+const SplitterResizeTrigger = forwardRef.forwardRef(
+  (props, ref) => {
+    const [triggerProps, restProps] = createSplitProps.createSplitProps()(props, [
+      "disabled",
+      "id",
+      "step"
+    ]);
+    const { getResizeTriggerProps } = splitterContext.useSplitterContext();
+    const mergedProps = react.mergeProps(getResizeTriggerProps(triggerProps), restProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ref, ...mergedProps });
+  }
+);
+
+exports.SplitterResizeTrigger = SplitterResizeTrigger;

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

@@ -0,0 +1,8 @@
+import type { AsChildComponentProps } from '../factory';
+import type { Assign } from '../types';
+import type { ForwardRefExoticComponent } from 'react';
+import type { ResizeTriggerProps, type connect } from '@zag-js/splitter';
+type ResizeTriggerProps = Parameters<ReturnType<typeof connect>['getResizeTriggerProps']>[0];
+export type SplitterResizeTriggerProps = ResizeTriggerProps;
+export declare const SplitterResizeTrigger: ForwardRefExoticComponent<Assign<AsChildComponentProps<"button">, ResizeTriggerProps>>;
+export {};

package/splitter/splitter-resize-trigger.mjs

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import '@zag-js/splitter';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { forwardRef } from '../forward-ref.mjs';
+import { useSplitterContext } from './splitter-context.mjs';
+
+const SplitterResizeTrigger = forwardRef(
+  (props, ref) => {
+    const [triggerProps, restProps] = createSplitProps()(props, [
+      "disabled",
+      "id",
+      "step"
+    ]);
+    const { getResizeTriggerProps } = useSplitterContext();
+    const mergedProps = mergeProps(getResizeTriggerProps(triggerProps), restProps);
+    return /* @__PURE__ */ jsx(ark.button, { ref, ...mergedProps });
+  }
+);
+
+export { SplitterResizeTrigger };

package/splitter/splitter.cjs

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const splitterContext = require('./splitter-context.cjs');
+const useSplitter = require('./use-splitter.cjs');
+
+const Splitter = forwardRef.forwardRef((props, ref) => {
+  const [useSplitterProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
+    props,
+    [
+      "defaultSize",
+      "dir",
+      "getRootNode",
+      "id",
+      "ids",
+      "onResize",
+      "onResizeEnd",
+      "onResizeStart",
+      "orientation",
+      "size"
+    ]
+  );
+  const splitter = useSplitter.useSplitter(useSplitterProps);
+  const mergedProps = react.mergeProps(splitter.rootProps, divProps);
+  const view = runIfFn.runIfFn(children, splitter);
+  return /* @__PURE__ */ jsxRuntime.jsx(splitterContext.SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+});
+
+exports.Splitter = Splitter;

package/splitter/splitter.d.ts

@@ -0,0 +1,8 @@
+import type { ForwardRefExoticComponent, ReactNode } from 'react';
+import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseSplitterProps, type UseSplitterReturn } from './use-splitter';
+export type SplitterProps = Assign<HTMLArkProps<'div'>, UseSplitterProps & {
+    children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
+}>;
+export declare const Splitter: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, SplitterProps>>;

package/splitter/splitter.mjs

@@ -0,0 +1,33 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { forwardRef } from '../forward-ref.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { SplitterProvider } from './splitter-context.mjs';
+import { useSplitter } from './use-splitter.mjs';
+
+const Splitter = forwardRef((props, ref) => {
+  const [useSplitterProps, { children, ...divProps }] = createSplitProps()(
+    props,
+    [
+      "defaultSize",
+      "dir",
+      "getRootNode",
+      "id",
+      "ids",
+      "onResize",
+      "onResizeEnd",
+      "onResizeStart",
+      "orientation",
+      "size"
+    ]
+  );
+  const splitter = useSplitter(useSplitterProps);
+  const mergedProps = mergeProps(splitter.rootProps, divProps);
+  const view = runIfFn(children, splitter);
+  return /* @__PURE__ */ jsx(SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+
+export { Splitter };

package/splitter/use-splitter.cjs

@@ -0,0 +1,46 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('@zag-js/react');
+const splitter = require('@zag-js/splitter');
+const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const splitter__namespace = /*#__PURE__*/_interopNamespaceDefault(splitter);
+
+const useSplitter = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const initialContext = {
+    id: React.useId(),
+    getRootNode,
+    ...props,
+    size: props.defaultSize
+  };
+  const context = {
+    ...initialContext,
+    size: props.size
+  };
+  const [state, send] = react.useMachine(splitter__namespace.machine(initialContext), { context });
+  return splitter__namespace.connect(state, send, react.normalizeProps);
+};
+
+exports.useSplitter = useSplitter;

package/splitter/use-splitter.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, CSSProperties } from 'react';
+import * as splitter from '@zag-js/splitter';
+import { type Optional } from '../types';
+export type UseSplitterProps = Optional<splitter.Context, 'id'> & {
+    defaultSize?: splitter.Context['size'];
+};
+export type UseSplitterReturn = ReturnType<typeof useSplitter>;
+export declare const useSplitter: (props: UseSplitterProps) => splitter.PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>;

package/splitter/use-splitter.mjs

@@ -0,0 +1,23 @@
+'use client';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import * as splitter from '@zag-js/splitter';
+import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
+
+const useSplitter = (props) => {
+  const getRootNode = useEnvironmentContext();
+  const initialContext = {
+    id: useId(),
+    getRootNode,
+    ...props,
+    size: props.defaultSize
+  };
+  const context = {
+    ...initialContext,
+    size: props.size
+  };
+  const [state, send] = useMachine(splitter.machine(initialContext), { context });
+  return splitter.connect(state, send, normalizeProps);
+};
+
+export { useSplitter };

package/switch/index.cjs

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const _switch = require('./switch.cjs');
+const switchContext = require('./switch-context.cjs');
+const switchControl = require('./switch-control.cjs');
+const switchInput = require('./switch-input.cjs');
+const switchLabel = require('./switch-label.cjs');
+const switchThumb = require('./switch-thumb.cjs');
+const zagSwitch = require('@zag-js/switch');
+
+
+
+exports.Switch = _switch.Switch;
+exports.useSwitchContext = switchContext.useSwitchContext;
+exports.SwitchControl = switchControl.SwitchControl;
+exports.SwitchInput = switchInput.SwitchInput;
+exports.SwitchLabel = switchLabel.SwitchLabel;
+exports.SwitchThumb = switchThumb.SwitchThumb;
+Object.defineProperty(exports, 'switchAnatomy', {
+	enumerable: true,
+	get: () => zagSwitch.anatomy
+});

package/switch/index.d.ts

@@ -0,0 +1,7 @@
+export { Switch, type SwitchProps } from './switch';
+export { useSwitchContext } from './switch-context';
+export { SwitchControl, type SwitchControlProps } from './switch-control';
+export { SwitchInput, type SwitchInputProps } from './switch-input';
+export { SwitchLabel, type SwitchLabelProps } from './switch-label';
+export { SwitchThumb, type SwitchThumbProps } from './switch-thumb';
+export { switchAnatomy } from './switch.anatomy';

package/switch/index.mjs

@@ -0,0 +1,8 @@
+'use client';
+export { Switch } 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';
+export { anatomy as switchAnatomy } from '@zag-js/switch';

package/switch/switch-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [SwitchProvider, useSwitchContext] = createContext.createContext({
+  name: "SwitchContext",
+  hookName: "useSwitchContext",
+  providerName: "<SwitchProvider />"
+});
+
+exports.SwitchProvider = SwitchProvider;
+exports.useSwitchContext = useSwitchContext;

package/switch/switch-context.d.ts

@@ -0,0 +1,11 @@
+import type { PublicApi } from '@zag-js/switch';
+import type { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { type UseSwitchReturn } from './use-switch';
+export type SwitchContext = UseSwitchReturn;
+export declare const SwitchProvider: Provider<PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>>, useSwitchContext: () => PublicApi<JSX.IntrinsicElements & {
+    element: HTMLAttributes<HTMLElement>;
+    style: CSSProperties;
+}>;

package/switch/switch-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [SwitchProvider, useSwitchContext] = createContext({
+  name: "SwitchContext",
+  hookName: "useSwitchContext",
+  providerName: "<SwitchProvider />"
+});
+
+export { SwitchProvider, useSwitchContext };

package/switch/switch-control.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const switchContext = require('./switch-context.cjs');
+
+const SwitchControl = forwardRef.forwardRef((props, ref) => {
+  const { controlProps } = switchContext.useSwitchContext();
+  const mergedProps = react.mergeProps(controlProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
+});
+
+exports.SwitchControl = SwitchControl;

package/switch/switch-control.d.ts

@@ -0,0 +1,5 @@
+import type { Assign } from '../types';
+import type { ForwardRefExoticComponent } from 'react';
+import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+export type SwitchControlProps = HTMLArkProps<'span'>;
+export declare const SwitchControl: ForwardRefExoticComponent<Assign<AsChildComponentProps<"span">, Record<never, never>>>;

package/switch/switch-control.mjs

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { ark } from '../factory.mjs';
+import { forwardRef } from '../forward-ref.mjs';
+import { useSwitchContext } from './switch-context.mjs';
+
+const SwitchControl = forwardRef((props, ref) => {
+  const { controlProps } = useSwitchContext();
+  const mergedProps = mergeProps(controlProps, props);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+});
+
+export { SwitchControl };

package/switch/switch-input.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
+const factory = require('../factory.cjs');
+const forwardRef = require('../forward-ref.cjs');
+const switchContext = require('./switch-context.cjs');
+
+const SwitchInput = forwardRef.forwardRef((props, ref) => {
+  const { inputProps } = switchContext.useSwitchContext();
+  const mergedProps = react.mergeProps(inputProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+});
+
+exports.SwitchInput = SwitchInput;

package/switch/switch-input.d.ts

@@ -0,0 +1,5 @@
+import type { Assign } from '../types';
+import type { ForwardRefExoticComponent } from 'react';
+import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+export type SwitchInputProps = HTMLArkProps<'input'>;
+export declare const SwitchInput: ForwardRefExoticComponent<Assign<AsChildComponentProps<"input">, Record<never, never>>>;