@ark-ui/react 2.0.2 → 2.1.1

package/CHANGELOG.md

@@ -6,16 +6,53 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [2.1.1] - 2024-02-14
+
+### Fixed
+
+- Resolved an issue where the `Clipboard` component was missing a specifier in the `@ark-ui/react` package.
+
+## [2.1.0] - 2024-02-14
+
+### Added
+
+- Introduced `Clipboard` component. Refer to the [documentation](https://ark-ui.com/docs/components/clipboard) for details.
+- Implemented programmable control over the open state for `ColorPicker`, `DatePicker`, `Dialog`, `HoverCard`, `Menu`, `Popover`, `Select`, and `Tooltip`.
+- Added a `PresetTrigger` part to the `DatePicker` component, enabling custom triggers for common date presets (e.g., Last 7 days, Last 30 days).
+- Enhanced the `DatePicker.Control` component to support multiple inputs by introducing an optional `index` attribute to `DatePicker.Input`. Example usage:
+
+```jsx
+<DatePicker.Control>
+  <DatePicker.Input index={0} />
+  <DatePicker.Input index={1} />
+</DatePicker.Control>
+```
+
+### Changed
+
+- Refined the `TreeView` component API for streamlined component usage. See the [documentation](https://ark-ui.com/docs/components/tree-view) for details.
+
+### Fixed
+
+- Resolved unintentional interactions when clicking the scrollbar.
+- Addressed an issue where positioned components failed to adjust to window resizing.
+- Corrected a behavior where restoring scroll position triggered a smooth scroll effect back to the starting point.
+- Rectified a problem in `Combobox`, `Menu`, and `Select` where scrolling into view inadvertently scrolled the body element.
+- Fixed a discrepancy in `DatePicker` regarding the incorrect display of weeks when setting `startOfWeek`.
+- Solved an issue in the `Editable` preventing text deletion upon reaching `maxLength`.
+- Corrected an issue in the `Select` where an item group's label `id` was misdirected.
+- Adjusted `Select` to use the correct `id` for the `aria-activedescendant` attribute.
+
 ## [2.0.2] - 2024-02-10
 
 ### Added
 
-- Exported `SelectionDetails` type for `Menu` component
+- Exported `SelectionDetails` type for the `Menu` component.
 
 ### Changed
 
-- Changed `Dialog.Description` and `Popover.Description` from `p` to `div` to allow for multiple paragraphs.
-- Changed `TreeView.BranchTrigger` from `button` to `div` for the accessibility reasons.
+- Updated `Dialog.Description` and `Popover.Description` elements from `p` to `div` for better paragraph handling.
+- Altered `TreeView.BranchTrigger` element from `button` to `div` for accessibility enhancements.
 
 ### Fixed
 

package/clipboard/clipboard-context.cjs

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

package/clipboard/clipboard-context.d.ts

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import { type UseClipboardReturn } from './use-clipboard';
+export interface ClipboardContext extends UseClipboardReturn {
+}
+export declare const ClipboardProvider: Provider<ClipboardContext>, useClipboardContext: () => ClipboardContext;

package/clipboard/clipboard-context.mjs

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

package/clipboard/clipboard-control.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const clipboardContext = require('./clipboard-context.cjs');
+
+const ClipboardControl = react.forwardRef((props, ref) => {
+  const api = clipboardContext.useClipboardContext();
+  const mergedProps = react$1.mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+ClipboardControl.displayName = "ClipboardControl";
+
+exports.ClipboardControl = ClipboardControl;

package/clipboard/clipboard-control.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ClipboardControlProps extends HTMLArkProps<'div'> {
+}
+export declare const ClipboardControl: ForwardRefExoticComponent<ClipboardControlProps & RefAttributes<HTMLDivElement>>;

package/clipboard/clipboard-control.mjs

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useClipboardContext } from './clipboard-context.mjs';
+
+const ClipboardControl = forwardRef((props, ref) => {
+  const api = useClipboardContext();
+  const mergedProps = mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+ClipboardControl.displayName = "ClipboardControl";
+
+export { ClipboardControl };

package/clipboard/clipboard-indicator.cjs

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const clipboardContext = require('./clipboard-context.cjs');
+
+const ClipboardIndicator = react.forwardRef(
+  (props, ref) => {
+    const { children, copied, ...localProps } = props;
+    const api = clipboardContext.useClipboardContext();
+    const mergedProps = react$1.mergeProps(api.getIndicatorProps({ copied: api.isCopied }), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: api.isCopied ? copied : children });
+  }
+);
+ClipboardIndicator.displayName = "Clipb oardIndicator";
+
+exports.ClipboardIndicator = ClipboardIndicator;

package/clipboard/clipboard-indicator.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+export interface ClipboardIndicatorProps extends HTMLArkProps<'div'> {
+    copied?: ReactNode;
+}
+export declare const ClipboardIndicator: ForwardRefExoticComponent<ClipboardIndicatorProps & RefAttributes<HTMLDivElement>>;

package/clipboard/clipboard-indicator.mjs

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useClipboardContext } from './clipboard-context.mjs';
+
+const ClipboardIndicator = forwardRef(
+  (props, ref) => {
+    const { children, copied, ...localProps } = props;
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(api.getIndicatorProps({ copied: api.isCopied }), localProps);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: api.isCopied ? copied : children });
+  }
+);
+ClipboardIndicator.displayName = "Clipb oardIndicator";
+
+export { ClipboardIndicator };

package/clipboard/clipboard-input.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const clipboardContext = require('./clipboard-context.cjs');
+
+const ClipboardInput = react.forwardRef((props, ref) => {
+  const api = clipboardContext.useClipboardContext();
+  const mergedProps = react$1.mergeProps(api.inputProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+});
+ClipboardInput.displayName = "ClipboardInput";
+
+exports.ClipboardInput = ClipboardInput;

package/clipboard/clipboard-input.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ClipboardInputProps extends HTMLArkProps<'input'> {
+}
+export declare const ClipboardInput: ForwardRefExoticComponent<ClipboardInputProps & RefAttributes<HTMLInputElement>>;

package/clipboard/clipboard-input.mjs

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useClipboardContext } from './clipboard-context.mjs';
+
+const ClipboardInput = forwardRef((props, ref) => {
+  const api = useClipboardContext();
+  const mergedProps = mergeProps(api.inputProps, props);
+  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+});
+ClipboardInput.displayName = "ClipboardInput";
+
+export { ClipboardInput };

package/clipboard/clipboard-label.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const clipboardContext = require('./clipboard-context.cjs');
+
+const ClipboardLabel = react.forwardRef((props, ref) => {
+  const api = clipboardContext.useClipboardContext();
+  const mergedProps = react$1.mergeProps(api.labelProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+});
+ClipboardLabel.displayName = "ClipboardLabel";
+
+exports.ClipboardLabel = ClipboardLabel;

package/clipboard/clipboard-label.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ClipboardLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const ClipboardLabel: ForwardRefExoticComponent<ClipboardLabelProps & RefAttributes<HTMLLabelElement>>;

package/clipboard/clipboard-label.mjs

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useClipboardContext } from './clipboard-context.mjs';
+
+const ClipboardLabel = forwardRef((props, ref) => {
+  const api = useClipboardContext();
+  const mergedProps = mergeProps(api.labelProps, props);
+  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+});
+ClipboardLabel.displayName = "ClipboardLabel";
+
+export { ClipboardLabel };

package/clipboard/clipboard-root.cjs

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const clipboardContext = require('./clipboard-context.cjs');
+const useClipboard = require('./use-clipboard.cjs');
+
+const ClipboardRoot = react.forwardRef((props, ref) => {
+  const [useClipboardProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
+    props,
+    ["getRootNode", "id", "ids", "value", "timeout", "onCopyStatusChange"]
+  );
+  const api = useClipboard.useClipboard(useClipboardProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(clipboardContext.ClipboardProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ref, ...mergedProps, children: view }) });
+});
+ClipboardRoot.displayName = "ClipboardRoot";
+
+exports.ClipboardRoot = ClipboardRoot;

package/clipboard/clipboard-root.d.ts

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseClipboardProps, type UseClipboardReturn } from './use-clipboard';
+export interface ClipboardRootProps extends Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseClipboardReturn) => ReactNode);
+}>, UseClipboardProps {
+}
+export declare const ClipboardRoot: ForwardRefExoticComponent<ClipboardRootProps & RefAttributes<HTMLDivElement>>;

package/clipboard/clipboard-root.mjs

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { ClipboardProvider } from './clipboard-context.mjs';
+import { useClipboard } from './use-clipboard.mjs';
+
+const ClipboardRoot = forwardRef((props, ref) => {
+  const [useClipboardProps, { children, ...localProps }] = createSplitProps()(
+    props,
+    ["getRootNode", "id", "ids", "value", "timeout", "onCopyStatusChange"]
+  );
+  const api = useClipboard(useClipboardProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(ClipboardProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ref, ...mergedProps, children: view }) });
+});
+ClipboardRoot.displayName = "ClipboardRoot";
+
+export { ClipboardRoot };

package/clipboard/clipboard-trigger.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const clipboardContext = require('./clipboard-context.cjs');
+
+const ClipboardTrigger = react.forwardRef(
+  (props, ref) => {
+    const api = clipboardContext.useClipboardContext();
+    const mergedProps = react$1.mergeProps(api.triggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+ClipboardTrigger.displayName = "ClipboardTrigger";
+
+exports.ClipboardTrigger = ClipboardTrigger;

package/clipboard/clipboard-trigger.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ClipboardTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const ClipboardTrigger: ForwardRefExoticComponent<ClipboardTriggerProps & RefAttributes<HTMLButtonElement>>;

package/clipboard/clipboard-trigger.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useClipboardContext } from './clipboard-context.mjs';
+
+const ClipboardTrigger = forwardRef(
+  (props, ref) => {
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(api.triggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+ClipboardTrigger.displayName = "ClipboardTrigger";
+
+export { ClipboardTrigger };

package/clipboard/clipboard.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const clipboardControl = require('./clipboard-control.cjs');
+const clipboardIndicator = require('./clipboard-indicator.cjs');
+const clipboardInput = require('./clipboard-input.cjs');
+const clipboardLabel = require('./clipboard-label.cjs');
+const clipboardRoot = require('./clipboard-root.cjs');
+const clipboardTrigger = require('./clipboard-trigger.cjs');
+
+
+
+exports.Control = clipboardControl.ClipboardControl;
+exports.Indicator = clipboardIndicator.ClipboardIndicator;
+exports.Input = clipboardInput.ClipboardInput;
+exports.Label = clipboardLabel.ClipboardLabel;
+exports.Root = clipboardRoot.ClipboardRoot;
+exports.Trigger = clipboardTrigger.ClipboardTrigger;

package/clipboard/clipboard.d.ts

@@ -0,0 +1,7 @@
+import { ClipboardControl as Control } from './clipboard-control';
+import { ClipboardIndicator as Indicator } from './clipboard-indicator';
+import { ClipboardInput as Input } from './clipboard-input';
+import { ClipboardLabel as Label } from './clipboard-label';
+import { ClipboardRoot as Root } from './clipboard-root';
+import { ClipboardTrigger as Trigger } from './clipboard-trigger';
+export { Control, Indicator, Input, Label, Root, Trigger };

package/clipboard/clipboard.mjs

@@ -0,0 +1,6 @@
+export { ClipboardControl as Control } from './clipboard-control.mjs';
+export { ClipboardIndicator as Indicator } from './clipboard-indicator.mjs';
+export { ClipboardInput as Input } from './clipboard-input.mjs';
+export { ClipboardLabel as Label } from './clipboard-label.mjs';
+export { ClipboardRoot as Root } from './clipboard-root.mjs';
+export { ClipboardTrigger as Trigger } from './clipboard-trigger.mjs';

package/clipboard/index.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+require('@zag-js/clipboard');
+const clipboardContext = require('./clipboard-context.cjs');
+const clipboardControl = require('./clipboard-control.cjs');
+const clipboardIndicator = require('./clipboard-indicator.cjs');
+const clipboardInput = require('./clipboard-input.cjs');
+const clipboardLabel = require('./clipboard-label.cjs');
+const clipboardRoot = require('./clipboard-root.cjs');
+const clipboardTrigger = require('./clipboard-trigger.cjs');
+const clipboard = require('./clipboard.cjs');
+
+
+
+exports.useClipboardContext = clipboardContext.useClipboardContext;
+exports.ClipboardControl = clipboardControl.ClipboardControl;
+exports.ClipboardIndicator = clipboardIndicator.ClipboardIndicator;
+exports.ClipboardInput = clipboardInput.ClipboardInput;
+exports.ClipboardLabel = clipboardLabel.ClipboardLabel;
+exports.ClipboardRoot = clipboardRoot.ClipboardRoot;
+exports.ClipboardTrigger = clipboardTrigger.ClipboardTrigger;
+exports.Clipboard = clipboard;

package/clipboard/index.d.ts

@@ -0,0 +1,11 @@
+import { type CopyStatusDetails as ClipboardCopyStatusDetails } from '@zag-js/clipboard';
+import { useClipboardContext, type ClipboardContext } from './clipboard-context';
+import { ClipboardControl, type ClipboardControlProps } from './clipboard-control';
+import { ClipboardIndicator, type ClipboardIndicatorProps } from './clipboard-indicator';
+import { ClipboardInput, type ClipboardInputProps } from './clipboard-input';
+import { ClipboardLabel, type ClipboardLabelProps } from './clipboard-label';
+import { ClipboardRoot, type ClipboardRootProps } from './clipboard-root';
+import { ClipboardTrigger, type ClipboardTriggerProps } from './clipboard-trigger';
+export * as Clipboard from './clipboard';
+export { ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardTrigger, useClipboardContext, };
+export type { ClipboardContext, ClipboardControlProps, ClipboardCopyStatusDetails, ClipboardIndicatorProps, ClipboardInputProps, ClipboardLabelProps, ClipboardRootProps, ClipboardTriggerProps, };

package/clipboard/index.mjs

@@ -0,0 +1,10 @@
+import '@zag-js/clipboard';
+export { useClipboardContext } from './clipboard-context.mjs';
+export { ClipboardControl } from './clipboard-control.mjs';
+export { ClipboardIndicator } from './clipboard-indicator.mjs';
+export { ClipboardInput } from './clipboard-input.mjs';
+export { ClipboardLabel } from './clipboard-label.mjs';
+export { ClipboardRoot } from './clipboard-root.mjs';
+export { ClipboardTrigger } from './clipboard-trigger.mjs';
+import * as clipboard from './clipboard.mjs';
+export { clipboard as Clipboard };

package/clipboard/use-clipboard.cjs

@@ -0,0 +1,43 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const clipboard = require('@zag-js/clipboard');
+const react$1 = require('@zag-js/react');
+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 clipboard__namespace = /*#__PURE__*/_interopNamespaceDefault(clipboard);
+
+const useClipboard = (props) => {
+  const initialContext = {
+    id: react.useId(),
+    getRootNode: environmentContext.useEnvironmentContext(),
+    ...props
+  };
+  const context = {
+    ...initialContext
+  };
+  const [state, send] = react$1.useMachine(clipboard__namespace.machine(initialContext), { context });
+  return clipboard__namespace.connect(state, send, react$1.normalizeProps);
+};
+
+exports.useClipboard = useClipboard;

package/clipboard/use-clipboard.d.ts

@@ -0,0 +1,8 @@
+import * as clipboard from '@zag-js/clipboard';
+import { type PropTypes } from '@zag-js/react';
+import { type Optional } from '../types';
+export interface UseClipboardProps extends Optional<clipboard.Context, 'id'> {
+}
+export interface UseClipboardReturn extends clipboard.Api<PropTypes> {
+}
+export declare const useClipboard: (props: UseClipboardProps) => clipboard.Api<PropTypes>;

package/clipboard/use-clipboard.mjs

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

package/color-picker/use-color-picker.cjs

@@ -33,7 +33,8 @@ const useColorPicker = (props) => {
     id: react.useId(),
     getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
-    value: props.defaultValue ? colorPicker__namespace.parse(props.defaultValue) : void 0
+    value: props.defaultValue ? colorPicker__namespace.parse(props.defaultValue) : void 0,
+    "open.controlled": props.open !== void 0
   };
   const context = {
     ...initialContext,

package/color-picker/use-color-picker.d.ts

@@ -1,7 +1,7 @@
 import * as colorPicker from '@zag-js/color-picker';
 import { type PropTypes } from '@zag-js/react';
 import type { Optional } from '../types';
-export interface UseColorPickerProps extends Optional<Omit<colorPicker.Context, 'value'>, 'id'> {
+export interface UseColorPickerProps extends Omit<Optional<Omit<colorPicker.Context, 'value'>, 'id'>, 'open.controlled'> {
     /**
      * The initial value of the color picker.
      */

package/color-picker/use-color-picker.mjs

@@ -10,7 +10,8 @@ const useColorPicker = (props) => {
     id: useId(),
     getRootNode: useEnvironmentContext(),
     ...props,
-    value: props.defaultValue ? colorPicker.parse(props.defaultValue) : void 0
+    value: props.defaultValue ? colorPicker.parse(props.defaultValue) : void 0,
+    "open.controlled": props.open !== void 0
   };
   const context = {
     ...initialContext,

package/date-picker/date-picker-input.cjs

@@ -6,12 +6,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerInput = react.forwardRef((props, ref) => {
+  const [inputProps, localProps] = createSplitProps.createSplitProps()(props, ["index"]);
   const api = datePickerContext.useDatePickerContext();
-  const mergedProps = react$1.mergeProps(api.inputProps, props);
+  const mergedProps = react$1.mergeProps(api.getInputProps(inputProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
 });
 DatePickerInput.displayName = "DatePickerInput";

package/date-picker/date-picker-input.d.ts

@@ -1,6 +1,8 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
+import type { InputProps } from '@zag-js/date-picker';
 import { type HTMLArkProps } from '../factory';
-export interface DatePickerInputProps extends HTMLArkProps<'input'> {
+import type { Assign } from '../types';
+export interface DatePickerInputProps extends Assign<HTMLArkProps<'input'>, InputProps> {
 }
 export declare const DatePickerInput: ForwardRefExoticComponent<DatePickerInputProps & RefAttributes<HTMLInputElement>>;

package/date-picker/date-picker-input.mjs

@@ -2,12 +2,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
 
 const DatePickerInput = forwardRef((props, ref) => {
+  const [inputProps, localProps] = createSplitProps()(props, ["index"]);
   const api = useDatePickerContext();
-  const mergedProps = mergeProps(api.inputProps, props);
+  const mergedProps = mergeProps(api.getInputProps(inputProps), localProps);
   return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
 });
 DatePickerInput.displayName = "DatePickerInput";