@ark-ui/react 3.5.0 → 3.6.1

package/README.md

@@ -31,6 +31,8 @@ Ark UI is available for the following JavaScript frameworks:
 - [Date Picker](https://ark-ui.com/react/docs/components/date-picker)
 - [Dialog](https://ark-ui.com/react/docs/components/dialog)
 - [Editable](https://ark-ui.com/react/docs/components/editable)
+- [Field](https://ark-ui.com/react/docs/components/field)
+- [Fieldset](https://ark-ui.com/react/docs/components/fieldset)
 - [File Upload](https://ark-ui.com/react/docs/components/file-upload)
 - [Hover Card](https://ark-ui.com/react/docs/components/hover-card)
 - [Menu](https://ark-ui.com/react/docs/components/menu)
@@ -51,6 +53,7 @@ Ark UI is available for the following JavaScript frameworks:
 - [Switch](https://ark-ui.com/react/docs/components/switch)
 - [Tabs](https://ark-ui.com/react/docs/components/tabs)
 - [Tags Input](https://ark-ui.com/react/docs/components/tags-input)
+- [Time Picker](https://ark-ui.com/react/docs/components/time-picker)
 - [Toast](https://ark-ui.com/react/docs/components/toast)
 - [Toggle Group](https://ark-ui.com/react/docs/components/toggle-group)
 - [Tooltip](https://ark-ui.com/react/docs/components/tooltip)

package/dist/components/dialog/dialog-root.d.cts

@@ -4,7 +4,7 @@ import { UseDialogProps } from './use-dialog';
 
 export interface DialogRootBaseProps extends UseDialogProps, UsePresenceProps {
 }
-export interface DialogRootProps extends UseDialogProps, UsePresenceProps {
+export interface DialogRootProps extends DialogRootBaseProps {
     children?: ReactNode;
 }
 export declare const DialogRoot: (props: DialogRootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dialog/dialog-root.d.ts

@@ -4,7 +4,7 @@ import { UseDialogProps } from './use-dialog';
 
 export interface DialogRootBaseProps extends UseDialogProps, UsePresenceProps {
 }
-export interface DialogRootProps extends UseDialogProps, UsePresenceProps {
+export interface DialogRootProps extends DialogRootBaseProps {
     children?: ReactNode;
 }
 export declare const DialogRoot: (props: DialogRootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/field/use-field.cjs

@@ -5,12 +5,19 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const domQuery = require('@zag-js/dom-query');
 const react = require('react');
+const useFieldsetContext = require('../fieldset/use-fieldset-context.cjs');
 const field_anatomy = require('./field.anatomy.cjs');
 
 const useField = (props) => {
-  const { required = false, disabled = false, invalid = false, readOnly = false } = props;
-  const [hasErrorText, setHasErrorText] = react.useState(false);
-  const [hasHelperText, setHasHelperText] = react.useState(false);
+  const fieldset = useFieldsetContext.useFieldsetContext();
+  const {
+    disabled = Boolean(fieldset?.disabled),
+    invalid = false,
+    readOnly = false,
+    required = false
+  } = props;
+  const hasErrorText = react.useRef(false);
+  const hasHelperText = react.useRef(false);
   const id = props.id ?? react.useId();
   const rootRef = react.useRef(null);
   const errorTextId = `field::${id}::error-text`;
@@ -22,65 +29,93 @@ const useField = (props) => {
     const win = domQuery.getWindow(rootNode);
     const doc = win.document;
     const checkTextElements = () => {
-      setHasErrorText(!!doc.getElementById(errorTextId));
-      setHasHelperText(!!doc.getElementById(helperTextId));
+      hasErrorText.current = !!doc.getElementById(errorTextId);
+      hasHelperText.current = !!doc.getElementById(helperTextId);
     };
     checkTextElements();
     const observer = new win.MutationObserver(checkTextElements);
     observer.observe(rootNode, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, [errorTextId, helperTextId]);
-  const getRootProps = () => ({
-    ...field_anatomy.parts.root.attrs,
-    role: "group",
-    "data-disabled": dataAttr(disabled),
-    "data-invalid": dataAttr(invalid),
-    "data-readonly": dataAttr(readOnly)
-  });
-  const getLabelProps = () => ({
-    ...field_anatomy.parts.label.attrs,
-    id: labelId,
-    "data-disabled": dataAttr(disabled),
-    "data-invalid": dataAttr(invalid),
-    "data-readonly": dataAttr(readOnly),
-    htmlFor: id
-  });
-  const labelIds = [];
-  if (hasErrorText && invalid) labelIds.push(errorTextId);
-  if (hasHelperText) labelIds.push(helperTextId);
-  const getControlProps = () => ({
-    "aria-describedby": labelIds.join(" ") || void 0,
-    "aria-invalid": ariaAttr(invalid),
-    "aria-required": ariaAttr(required),
-    "aria-readonly": ariaAttr(readOnly),
-    id,
-    required,
-    disabled,
-    readOnly
-  });
-  const getInputProps = () => ({
-    ...getControlProps(),
-    ...field_anatomy.parts.input.attrs
-  });
-  const getTextareaProps = () => ({
-    ...getControlProps(),
-    ...field_anatomy.parts.textarea.attrs
-  });
-  const getSelectProps = () => ({
-    ...getControlProps(),
-    ...field_anatomy.parts.select.attrs
-  });
-  const getHelperTextProps = () => ({
-    id: helperTextId,
-    ...field_anatomy.parts.helperText.attrs
-  });
-  const getErrorTextProps = () => ({
-    id: errorTextId,
-    ...field_anatomy.parts.errorText.attrs,
-    "aria-live": "polite"
-  });
+  const labelIds = react.useMemo(() => {
+    const ids = [];
+    if (hasErrorText.current && invalid) ids.push(errorTextId);
+    if (hasHelperText.current) ids.push(helperTextId);
+    return ids.join(" ") || void 0;
+  }, [invalid, errorTextId, helperTextId]);
+  const getRootProps = react.useMemo(
+    () => () => ({
+      ...field_anatomy.parts.root.attrs,
+      ref: rootRef,
+      role: "group",
+      "data-disabled": dataAttr(disabled),
+      "data-invalid": dataAttr(invalid),
+      "data-readonly": dataAttr(readOnly)
+    }),
+    [disabled, invalid, readOnly]
+  );
+  const getLabelProps = react.useMemo(
+    () => () => ({
+      ...field_anatomy.parts.label.attrs,
+      id: labelId,
+      "data-disabled": dataAttr(disabled),
+      "data-invalid": dataAttr(invalid),
+      "data-readonly": dataAttr(readOnly),
+      htmlFor: id
+    }),
+    [disabled, invalid, readOnly, id, labelId]
+  );
+  const getControlProps = react.useMemo(
+    () => () => ({
+      "aria-describedby": labelIds,
+      "aria-invalid": ariaAttr(invalid),
+      "aria-required": ariaAttr(required),
+      "aria-readonly": ariaAttr(readOnly),
+      id,
+      required,
+      disabled,
+      readOnly
+    }),
+    [labelIds, invalid, required, readOnly, id, disabled]
+  );
+  const getInputProps = react.useMemo(
+    () => () => ({
+      ...getControlProps(),
+      ...field_anatomy.parts.input.attrs
+    }),
+    [getControlProps]
+  );
+  const getTextareaProps = react.useMemo(
+    () => () => ({
+      ...getControlProps(),
+      ...field_anatomy.parts.textarea.attrs
+    }),
+    [getControlProps]
+  );
+  const getSelectProps = react.useMemo(
+    () => () => ({
+      ...getControlProps(),
+      ...field_anatomy.parts.select.attrs
+    }),
+    [getControlProps]
+  );
+  const getHelperTextProps = react.useMemo(
+    () => () => ({
+      id: helperTextId,
+      ...field_anatomy.parts.helperText.attrs
+    }),
+    [helperTextId]
+  );
+  const getErrorTextProps = react.useMemo(
+    () => () => ({
+      id: errorTextId,
+      ...field_anatomy.parts.errorText.attrs,
+      "aria-live": "polite"
+    }),
+    [errorTextId]
+  );
   return {
-    ariaDescribedby: labelIds.join(" "),
+    ariaDescribedby: labelIds,
     ids: {
       control: id,
       label: labelId,
@@ -103,7 +138,7 @@ const useField = (props) => {
     getErrorTextProps
   };
 };
-const dataAttr = (condition) => condition ? "" : void 0;
+const dataAttr = (condition) => condition ? "true" : void 0;
 const ariaAttr = (condition) => condition ? true : void 0;
 
 exports.useField = useField;

package/dist/components/field/use-field.d.cts

@@ -22,7 +22,7 @@ export interface UseFieldProps {
 }
 export type UseFieldReturn = ReturnType<typeof useField>;
 export declare const useField: (props: UseFieldProps) => {
-    ariaDescribedby: string;
+    ariaDescribedby: string | undefined;
     ids: {
         control: string;
         label: string;
@@ -36,65 +36,11 @@ export declare const useField: (props: UseFieldProps) => {
     invalid: boolean;
     readOnly: boolean;
     required: boolean;
-    getLabelProps: () => {
-        id: string;
-        'data-disabled': Booleanish;
-        'data-invalid': Booleanish;
-        'data-readonly': Booleanish;
-        htmlFor: string;
-        "data-scope": string;
-        "data-part": string;
-    };
-    getRootProps: () => {
-        role: string;
-        'data-disabled': Booleanish;
-        'data-invalid': Booleanish;
-        'data-readonly': Booleanish;
-        "data-scope": string;
-        "data-part": string;
-    };
-    getInputProps: () => {
-        "data-scope": string;
-        "data-part": string;
-        'aria-describedby': string | undefined;
-        'aria-invalid': boolean | undefined;
-        'aria-required': boolean | undefined;
-        'aria-readonly': boolean | undefined;
-        id: string;
-        required: boolean;
-        disabled: boolean;
-        readOnly: boolean;
-    };
-    getTextareaProps: () => {
-        "data-scope": string;
-        "data-part": string;
-        'aria-describedby': string | undefined;
-        'aria-invalid': boolean | undefined;
-        'aria-required': boolean | undefined;
-        'aria-readonly': boolean | undefined;
-        id: string;
-        required: boolean;
-        disabled: boolean;
-        readOnly: boolean;
-    };
-    getSelectProps: () => {
-        "data-scope": string;
-        "data-part": string;
-        'aria-describedby': string | undefined;
-        'aria-invalid': boolean | undefined;
-        'aria-required': boolean | undefined;
-        'aria-readonly': boolean | undefined;
-        id: string;
-        required: boolean;
-        disabled: boolean;
-        readOnly: boolean;
-    };
-    getHelperTextProps: () => {
-        "data-scope": string;
-        "data-part": string;
-        id: string;
-    };
+    getLabelProps: () => HTMLProps<"label">;
+    getRootProps: () => HTMLProps<"div">;
+    getInputProps: () => HTMLProps<"input">;
+    getTextareaProps: () => HTMLProps<"textarea">;
+    getSelectProps: () => HTMLProps<"select">;
+    getHelperTextProps: () => HTMLProps<"span">;
     getErrorTextProps: () => HTMLProps<"span">;
 };
-type Booleanish = boolean | 'true' | 'false';
-export {};

package/dist/components/field/use-field.d.ts

@@ -22,7 +22,7 @@ export interface UseFieldProps {
 }
 export type UseFieldReturn = ReturnType<typeof useField>;
 export declare const useField: (props: UseFieldProps) => {
-    ariaDescribedby: string;
+    ariaDescribedby: string | undefined;
     ids: {
         control: string;
         label: string;
@@ -36,65 +36,11 @@ export declare const useField: (props: UseFieldProps) => {
     invalid: boolean;
     readOnly: boolean;
     required: boolean;
-    getLabelProps: () => {
-        id: string;
-        'data-disabled': Booleanish;
-        'data-invalid': Booleanish;
-        'data-readonly': Booleanish;
-        htmlFor: string;
-        "data-scope": string;
-        "data-part": string;
-    };
-    getRootProps: () => {
-        role: string;
-        'data-disabled': Booleanish;
-        'data-invalid': Booleanish;
-        'data-readonly': Booleanish;
-        "data-scope": string;
-        "data-part": string;
-    };
-    getInputProps: () => {
-        "data-scope": string;
-        "data-part": string;
-        'aria-describedby': string | undefined;
-        'aria-invalid': boolean | undefined;
-        'aria-required': boolean | undefined;
-        'aria-readonly': boolean | undefined;
-        id: string;
-        required: boolean;
-        disabled: boolean;
-        readOnly: boolean;
-    };
-    getTextareaProps: () => {
-        "data-scope": string;
-        "data-part": string;
-        'aria-describedby': string | undefined;
-        'aria-invalid': boolean | undefined;
-        'aria-required': boolean | undefined;
-        'aria-readonly': boolean | undefined;
-        id: string;
-        required: boolean;
-        disabled: boolean;
-        readOnly: boolean;
-    };
-    getSelectProps: () => {
-        "data-scope": string;
-        "data-part": string;
-        'aria-describedby': string | undefined;
-        'aria-invalid': boolean | undefined;
-        'aria-required': boolean | undefined;
-        'aria-readonly': boolean | undefined;
-        id: string;
-        required: boolean;
-        disabled: boolean;
-        readOnly: boolean;
-    };
-    getHelperTextProps: () => {
-        "data-scope": string;
-        "data-part": string;
-        id: string;
-    };
+    getLabelProps: () => HTMLProps<"label">;
+    getRootProps: () => HTMLProps<"div">;
+    getInputProps: () => HTMLProps<"input">;
+    getTextareaProps: () => HTMLProps<"textarea">;
+    getSelectProps: () => HTMLProps<"select">;
+    getHelperTextProps: () => HTMLProps<"span">;
     getErrorTextProps: () => HTMLProps<"span">;
 };
-type Booleanish = boolean | 'true' | 'false';
-export {};

package/dist/components/field/use-field.js

@@ -1,12 +1,19 @@
 'use client';
 import { getWindow } from '@zag-js/dom-query';
-import { useState, useId, useRef, useLayoutEffect } from 'react';
+import { useRef, useId, useLayoutEffect, useMemo } from 'react';
+import { useFieldsetContext } from '../fieldset/use-fieldset-context.js';
 import { parts } from './field.anatomy.js';
 
 const useField = (props) => {
-  const { required = false, disabled = false, invalid = false, readOnly = false } = props;
-  const [hasErrorText, setHasErrorText] = useState(false);
-  const [hasHelperText, setHasHelperText] = useState(false);
+  const fieldset = useFieldsetContext();
+  const {
+    disabled = Boolean(fieldset?.disabled),
+    invalid = false,
+    readOnly = false,
+    required = false
+  } = props;
+  const hasErrorText = useRef(false);
+  const hasHelperText = useRef(false);
   const id = props.id ?? useId();
   const rootRef = useRef(null);
   const errorTextId = `field::${id}::error-text`;
@@ -18,65 +25,93 @@ const useField = (props) => {
     const win = getWindow(rootNode);
     const doc = win.document;
     const checkTextElements = () => {
-      setHasErrorText(!!doc.getElementById(errorTextId));
-      setHasHelperText(!!doc.getElementById(helperTextId));
+      hasErrorText.current = !!doc.getElementById(errorTextId);
+      hasHelperText.current = !!doc.getElementById(helperTextId);
     };
     checkTextElements();
     const observer = new win.MutationObserver(checkTextElements);
     observer.observe(rootNode, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, [errorTextId, helperTextId]);
-  const getRootProps = () => ({
-    ...parts.root.attrs,
-    role: "group",
-    "data-disabled": dataAttr(disabled),
-    "data-invalid": dataAttr(invalid),
-    "data-readonly": dataAttr(readOnly)
-  });
-  const getLabelProps = () => ({
-    ...parts.label.attrs,
-    id: labelId,
-    "data-disabled": dataAttr(disabled),
-    "data-invalid": dataAttr(invalid),
-    "data-readonly": dataAttr(readOnly),
-    htmlFor: id
-  });
-  const labelIds = [];
-  if (hasErrorText && invalid) labelIds.push(errorTextId);
-  if (hasHelperText) labelIds.push(helperTextId);
-  const getControlProps = () => ({
-    "aria-describedby": labelIds.join(" ") || void 0,
-    "aria-invalid": ariaAttr(invalid),
-    "aria-required": ariaAttr(required),
-    "aria-readonly": ariaAttr(readOnly),
-    id,
-    required,
-    disabled,
-    readOnly
-  });
-  const getInputProps = () => ({
-    ...getControlProps(),
-    ...parts.input.attrs
-  });
-  const getTextareaProps = () => ({
-    ...getControlProps(),
-    ...parts.textarea.attrs
-  });
-  const getSelectProps = () => ({
-    ...getControlProps(),
-    ...parts.select.attrs
-  });
-  const getHelperTextProps = () => ({
-    id: helperTextId,
-    ...parts.helperText.attrs
-  });
-  const getErrorTextProps = () => ({
-    id: errorTextId,
-    ...parts.errorText.attrs,
-    "aria-live": "polite"
-  });
+  const labelIds = useMemo(() => {
+    const ids = [];
+    if (hasErrorText.current && invalid) ids.push(errorTextId);
+    if (hasHelperText.current) ids.push(helperTextId);
+    return ids.join(" ") || void 0;
+  }, [invalid, errorTextId, helperTextId]);
+  const getRootProps = useMemo(
+    () => () => ({
+      ...parts.root.attrs,
+      ref: rootRef,
+      role: "group",
+      "data-disabled": dataAttr(disabled),
+      "data-invalid": dataAttr(invalid),
+      "data-readonly": dataAttr(readOnly)
+    }),
+    [disabled, invalid, readOnly]
+  );
+  const getLabelProps = useMemo(
+    () => () => ({
+      ...parts.label.attrs,
+      id: labelId,
+      "data-disabled": dataAttr(disabled),
+      "data-invalid": dataAttr(invalid),
+      "data-readonly": dataAttr(readOnly),
+      htmlFor: id
+    }),
+    [disabled, invalid, readOnly, id, labelId]
+  );
+  const getControlProps = useMemo(
+    () => () => ({
+      "aria-describedby": labelIds,
+      "aria-invalid": ariaAttr(invalid),
+      "aria-required": ariaAttr(required),
+      "aria-readonly": ariaAttr(readOnly),
+      id,
+      required,
+      disabled,
+      readOnly
+    }),
+    [labelIds, invalid, required, readOnly, id, disabled]
+  );
+  const getInputProps = useMemo(
+    () => () => ({
+      ...getControlProps(),
+      ...parts.input.attrs
+    }),
+    [getControlProps]
+  );
+  const getTextareaProps = useMemo(
+    () => () => ({
+      ...getControlProps(),
+      ...parts.textarea.attrs
+    }),
+    [getControlProps]
+  );
+  const getSelectProps = useMemo(
+    () => () => ({
+      ...getControlProps(),
+      ...parts.select.attrs
+    }),
+    [getControlProps]
+  );
+  const getHelperTextProps = useMemo(
+    () => () => ({
+      id: helperTextId,
+      ...parts.helperText.attrs
+    }),
+    [helperTextId]
+  );
+  const getErrorTextProps = useMemo(
+    () => () => ({
+      id: errorTextId,
+      ...parts.errorText.attrs,
+      "aria-live": "polite"
+    }),
+    [errorTextId]
+  );
   return {
-    ariaDescribedby: labelIds.join(" "),
+    ariaDescribedby: labelIds,
     ids: {
       control: id,
       label: labelId,
@@ -99,7 +134,7 @@ const useField = (props) => {
     getErrorTextProps
   };
 };
-const dataAttr = (condition) => condition ? "" : void 0;
+const dataAttr = (condition) => condition ? "true" : void 0;
 const ariaAttr = (condition) => condition ? true : void 0;
 
 export { useField };

package/dist/components/fieldset/fieldset-context.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useFieldsetContext = require('./use-fieldset-context.cjs');
+
+const FieldsetContext = (props) => props.children(useFieldsetContext.useFieldsetContext());
+
+exports.FieldsetContext = FieldsetContext;

package/dist/components/fieldset/fieldset-context.d.cts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { UseFieldsetContext } from './use-fieldset-context';
+
+export interface FieldsetContextProps {
+    children: (context: UseFieldsetContext) => ReactNode;
+}
+export declare const FieldsetContext: (props: FieldsetContextProps) => ReactNode;

package/dist/components/fieldset/fieldset-context.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { UseFieldsetContext } from './use-fieldset-context';
+
+export interface FieldsetContextProps {
+    children: (context: UseFieldsetContext) => ReactNode;
+}
+export declare const FieldsetContext: (props: FieldsetContextProps) => ReactNode;

package/dist/components/fieldset/fieldset-context.js

@@ -0,0 +1,6 @@
+'use client';
+import { useFieldsetContext } from './use-fieldset-context.js';
+
+const FieldsetContext = (props) => props.children(useFieldsetContext());
+
+export { FieldsetContext };

package/dist/components/fieldset/fieldset-error-text.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 useFieldsetContext = require('./use-fieldset-context.cjs');
+
+const FieldsetErrorText = react.forwardRef(
+  (props, ref) => {
+    const fieldset = useFieldsetContext.useFieldsetContext();
+    const mergedProps = react$1.mergeProps(fieldset.getErrorTextProps(), props);
+    return fieldset.invalid ? /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref }) : null;
+  }
+);
+FieldsetErrorText.displayName = "FieldsetErrorText";
+
+exports.FieldsetErrorText = FieldsetErrorText;

package/dist/components/fieldset/fieldset-error-text.d.cts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldsetErrorTextBaseProps extends PolymorphicProps {
+}
+export interface FieldsetErrorTextProps extends HTMLProps<'span'>, FieldsetErrorTextBaseProps {
+}
+export declare const FieldsetErrorText: ForwardRefExoticComponent<FieldsetErrorTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/fieldset/fieldset-error-text.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldsetErrorTextBaseProps extends PolymorphicProps {
+}
+export interface FieldsetErrorTextProps extends HTMLProps<'span'>, FieldsetErrorTextBaseProps {
+}
+export declare const FieldsetErrorText: ForwardRefExoticComponent<FieldsetErrorTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/fieldset/fieldset-error-text.js

@@ -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.js';
+import { useFieldsetContext } from './use-fieldset-context.js';
+
+const FieldsetErrorText = forwardRef(
+  (props, ref) => {
+    const fieldset = useFieldsetContext();
+    const mergedProps = mergeProps(fieldset.getErrorTextProps(), props);
+    return fieldset.invalid ? /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref }) : null;
+  }
+);
+FieldsetErrorText.displayName = "FieldsetErrorText";
+
+export { FieldsetErrorText };