@ark-ui/react 4.1.2 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (159) hide show
  1. package/dist/components/accordion/examples/context/focusedValue.d.cts +1 -0
  2. package/dist/components/accordion/examples/context/focusedValue.d.ts +1 -0
  3. package/dist/components/accordion/examples/context/getItemState.d.cts +1 -0
  4. package/dist/components/accordion/examples/context/getItemState.d.ts +1 -0
  5. package/dist/components/accordion/examples/context/setValue.d.cts +1 -0
  6. package/dist/components/accordion/examples/context/setValue.d.ts +1 -0
  7. package/dist/components/accordion/examples/context/value.d.cts +1 -0
  8. package/dist/components/accordion/examples/context/value.d.ts +1 -0
  9. package/dist/components/client-only/client-only.cjs +23 -0
  10. package/dist/components/client-only/client-only.d.cts +5 -0
  11. package/dist/components/client-only/client-only.d.ts +5 -0
  12. package/dist/components/client-only/client-only.js +19 -0
  13. package/dist/components/client-only/index.cjs +9 -0
  14. package/dist/components/client-only/index.d.cts +1 -0
  15. package/dist/components/client-only/index.d.ts +1 -0
  16. package/dist/components/client-only/index.js +1 -0
  17. package/dist/components/collection.cjs +2 -0
  18. package/dist/components/collection.d.cts +4 -1
  19. package/dist/components/collection.d.ts +4 -1
  20. package/dist/components/collection.js +3 -2
  21. package/dist/components/combobox/combobox-root.cjs +0 -1
  22. package/dist/components/combobox/combobox-root.js +0 -1
  23. package/dist/components/field/field-required-indicator.cjs +24 -0
  24. package/dist/components/field/field-required-indicator.d.cts +8 -0
  25. package/dist/components/field/field-required-indicator.d.ts +8 -0
  26. package/dist/components/field/field-required-indicator.js +20 -0
  27. package/dist/components/field/field-textarea.cjs +14 -2
  28. package/dist/components/field/field-textarea.d.cts +5 -0
  29. package/dist/components/field/field-textarea.d.ts +5 -0
  30. package/dist/components/field/field-textarea.js +15 -3
  31. package/dist/components/field/field.anatomy.cjs +2 -1
  32. package/dist/components/field/field.anatomy.d.cts +2 -2
  33. package/dist/components/field/field.anatomy.d.ts +2 -2
  34. package/dist/components/field/field.anatomy.js +2 -1
  35. package/dist/components/field/field.cjs +14 -12
  36. package/dist/components/field/field.d.cts +9 -8
  37. package/dist/components/field/field.d.ts +9 -8
  38. package/dist/components/field/field.js +7 -6
  39. package/dist/components/field/index.cjs +2 -0
  40. package/dist/components/field/index.d.cts +1 -0
  41. package/dist/components/field/index.d.ts +1 -0
  42. package/dist/components/field/index.js +1 -0
  43. package/dist/components/field/use-field.cjs +9 -1
  44. package/dist/components/field/use-field.d.cts +1 -0
  45. package/dist/components/field/use-field.d.ts +1 -0
  46. package/dist/components/field/use-field.js +9 -1
  47. package/dist/components/index.cjs +13 -8
  48. package/dist/components/index.d.cts +1 -0
  49. package/dist/components/index.d.ts +1 -0
  50. package/dist/components/index.js +7 -5
  51. package/dist/components/slider/index.cjs +2 -0
  52. package/dist/components/slider/index.d.cts +1 -0
  53. package/dist/components/slider/index.d.ts +1 -0
  54. package/dist/components/slider/index.js +1 -0
  55. package/dist/components/slider/slider-dragging-indicator.cjs +23 -0
  56. package/dist/components/slider/slider-dragging-indicator.d.cts +7 -0
  57. package/dist/components/slider/slider-dragging-indicator.d.ts +7 -0
  58. package/dist/components/slider/slider-dragging-indicator.js +19 -0
  59. package/dist/components/slider/slider.cjs +4 -2
  60. package/dist/components/slider/slider.d.cts +12 -11
  61. package/dist/components/slider/slider.d.ts +12 -11
  62. package/dist/components/slider/slider.js +2 -1
  63. package/dist/components/toast/create-toaster.d.cts +1 -1
  64. package/dist/components/toast/create-toaster.d.ts +1 -1
  65. package/dist/components/tree-view/index.cjs +8 -8
  66. package/dist/components/tree-view/index.d.cts +4 -4
  67. package/dist/components/tree-view/index.d.ts +4 -4
  68. package/dist/components/tree-view/index.js +4 -4
  69. package/dist/components/tree-view/tree-view-branch-content.cjs +9 -5
  70. package/dist/components/tree-view/tree-view-branch-content.d.cts +2 -2
  71. package/dist/components/tree-view/tree-view-branch-content.d.ts +2 -2
  72. package/dist/components/tree-view/tree-view-branch-content.js +9 -5
  73. package/dist/components/tree-view/tree-view-branch-control.cjs +3 -3
  74. package/dist/components/tree-view/tree-view-branch-control.js +3 -3
  75. package/dist/components/tree-view/tree-view-branch-indent-guide.cjs +23 -0
  76. package/dist/components/tree-view/tree-view-branch-indent-guide.d.cts +7 -0
  77. package/dist/components/tree-view/tree-view-branch-indent-guide.d.ts +7 -0
  78. package/dist/components/tree-view/tree-view-branch-indent-guide.js +19 -0
  79. package/dist/components/tree-view/tree-view-branch-indicator.cjs +3 -3
  80. package/dist/components/tree-view/tree-view-branch-indicator.js +3 -3
  81. package/dist/components/tree-view/tree-view-branch-text.cjs +3 -3
  82. package/dist/components/tree-view/tree-view-branch-text.js +3 -3
  83. package/dist/components/tree-view/tree-view-branch-trigger.cjs +3 -3
  84. package/dist/components/tree-view/tree-view-branch-trigger.js +3 -3
  85. package/dist/components/tree-view/tree-view-branch.cjs +18 -9
  86. package/dist/components/tree-view/tree-view-branch.d.cts +3 -4
  87. package/dist/components/tree-view/tree-view-branch.d.ts +3 -4
  88. package/dist/components/tree-view/tree-view-branch.js +18 -9
  89. package/dist/components/tree-view/tree-view-context.d.cts +5 -4
  90. package/dist/components/tree-view/tree-view-context.d.ts +5 -4
  91. package/dist/components/tree-view/tree-view-item-indicator.cjs +3 -3
  92. package/dist/components/tree-view/tree-view-item-indicator.js +3 -3
  93. package/dist/components/tree-view/tree-view-item-text.cjs +3 -3
  94. package/dist/components/tree-view/tree-view-item-text.js +3 -3
  95. package/dist/components/tree-view/tree-view-item.cjs +4 -13
  96. package/dist/components/tree-view/tree-view-item.d.cts +3 -4
  97. package/dist/components/tree-view/tree-view-item.d.ts +3 -4
  98. package/dist/components/tree-view/tree-view-item.js +4 -13
  99. package/dist/components/tree-view/tree-view-node-context.cjs +10 -0
  100. package/dist/components/tree-view/tree-view-node-context.d.cts +6 -0
  101. package/dist/components/tree-view/tree-view-node-context.d.ts +6 -0
  102. package/dist/components/tree-view/tree-view-node-context.js +6 -0
  103. package/dist/components/tree-view/tree-view-node-provider.cjs +15 -0
  104. package/dist/components/tree-view/tree-view-node-provider.d.cts +8 -0
  105. package/dist/components/tree-view/tree-view-node-provider.d.ts +8 -0
  106. package/dist/components/tree-view/tree-view-node-provider.js +11 -0
  107. package/dist/components/tree-view/tree-view-root-provider.cjs +11 -10
  108. package/dist/components/tree-view/tree-view-root-provider.d.cts +8 -6
  109. package/dist/components/tree-view/tree-view-root-provider.d.ts +8 -6
  110. package/dist/components/tree-view/tree-view-root-provider.js +11 -10
  111. package/dist/components/tree-view/tree-view-root.cjs +8 -5
  112. package/dist/components/tree-view/tree-view-root.d.cts +6 -4
  113. package/dist/components/tree-view/tree-view-root.d.ts +6 -4
  114. package/dist/components/tree-view/tree-view-root.js +8 -5
  115. package/dist/components/tree-view/tree-view-tree.cjs +1 -2
  116. package/dist/components/tree-view/tree-view-tree.d.cts +2 -2
  117. package/dist/components/tree-view/tree-view-tree.d.ts +2 -2
  118. package/dist/components/tree-view/tree-view-tree.js +1 -2
  119. package/dist/components/tree-view/tree-view.cjs +6 -2
  120. package/dist/components/tree-view/tree-view.d.cts +16 -14
  121. package/dist/components/tree-view/tree-view.d.ts +16 -14
  122. package/dist/components/tree-view/tree-view.js +3 -1
  123. package/dist/components/tree-view/use-tree-view-context.d.cts +3 -2
  124. package/dist/components/tree-view/use-tree-view-context.d.ts +3 -2
  125. package/dist/components/tree-view/use-tree-view-node-context.cjs +17 -0
  126. package/dist/components/tree-view/use-tree-view-node-context.d.cts +5 -0
  127. package/dist/components/tree-view/use-tree-view-node-context.d.ts +5 -0
  128. package/dist/components/tree-view/use-tree-view-node-context.js +12 -0
  129. package/dist/components/tree-view/use-tree-view-node-props-context.cjs +15 -0
  130. package/dist/components/tree-view/use-tree-view-node-props-context.d.cts +5 -0
  131. package/dist/components/tree-view/use-tree-view-node-props-context.d.ts +5 -0
  132. package/dist/components/tree-view/use-tree-view-node-props-context.js +10 -0
  133. package/dist/components/tree-view/use-tree-view.cjs +25 -15
  134. package/dist/components/tree-view/use-tree-view.d.cts +8 -3
  135. package/dist/components/tree-view/use-tree-view.d.ts +8 -3
  136. package/dist/components/tree-view/use-tree-view.js +26 -16
  137. package/dist/index.cjs +13 -8
  138. package/dist/index.js +7 -5
  139. package/package.json +66 -65
  140. package/dist/components/tree-view/tree-view-item-context.cjs +0 -10
  141. package/dist/components/tree-view/tree-view-item-context.d.cts +0 -6
  142. package/dist/components/tree-view/tree-view-item-context.d.ts +0 -6
  143. package/dist/components/tree-view/tree-view-item-context.js +0 -6
  144. package/dist/components/tree-view/use-tree-view-branch-context.cjs +0 -15
  145. package/dist/components/tree-view/use-tree-view-branch-context.d.cts +0 -7
  146. package/dist/components/tree-view/use-tree-view-branch-context.d.ts +0 -7
  147. package/dist/components/tree-view/use-tree-view-branch-context.js +0 -10
  148. package/dist/components/tree-view/use-tree-view-depth-context.cjs +0 -15
  149. package/dist/components/tree-view/use-tree-view-depth-context.d.cts +0 -3
  150. package/dist/components/tree-view/use-tree-view-depth-context.d.ts +0 -3
  151. package/dist/components/tree-view/use-tree-view-depth-context.js +0 -10
  152. package/dist/components/tree-view/use-tree-view-item-context.cjs +0 -17
  153. package/dist/components/tree-view/use-tree-view-item-context.d.cts +0 -5
  154. package/dist/components/tree-view/use-tree-view-item-context.d.ts +0 -5
  155. package/dist/components/tree-view/use-tree-view-item-context.js +0 -12
  156. package/dist/components/tree-view/use-tree-view-item-props-context.cjs +0 -15
  157. package/dist/components/tree-view/use-tree-view-item-props-context.d.cts +0 -5
  158. package/dist/components/tree-view/use-tree-view-item-props-context.d.ts +0 -5
  159. package/dist/components/tree-view/use-tree-view-item-props-context.js +0 -10
@@ -0,0 +1 @@
1
+ export declare const ContextFocusedValue: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const ContextFocusedValue: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const ContextGetItemState: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const ContextGetItemState: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const ContextSetValue: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const ContextSetValue: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const ContextValue: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const ContextValue: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,23 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const jsxRuntime = require('react/jsx-runtime');
7
+ const react = require('react');
8
+
9
+ const noop = () => void 0;
10
+ const ClientOnly = (props) => {
11
+ const { children, fallback } = props;
12
+ const isClient = react.useSyncExternalStore(
13
+ () => noop,
14
+ () => true,
15
+ () => false
16
+ );
17
+ if (!isClient) {
18
+ return fallback;
19
+ }
20
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
21
+ };
22
+
23
+ exports.ClientOnly = ClientOnly;
@@ -0,0 +1,5 @@
1
+ export interface ClientOnlyProps {
2
+ children: React.ReactNode;
3
+ fallback?: React.ReactNode | undefined;
4
+ }
5
+ export declare const ClientOnly: (props: ClientOnlyProps) => React.ReactNode;
@@ -0,0 +1,5 @@
1
+ export interface ClientOnlyProps {
2
+ children: React.ReactNode;
3
+ fallback?: React.ReactNode | undefined;
4
+ }
5
+ export declare const ClientOnly: (props: ClientOnlyProps) => React.ReactNode;
@@ -0,0 +1,19 @@
1
+ 'use client';
2
+ import { jsx, Fragment } from 'react/jsx-runtime';
3
+ import { useSyncExternalStore } from 'react';
4
+
5
+ const noop = () => void 0;
6
+ const ClientOnly = (props) => {
7
+ const { children, fallback } = props;
8
+ const isClient = useSyncExternalStore(
9
+ () => noop,
10
+ () => true,
11
+ () => false
12
+ );
13
+ if (!isClient) {
14
+ return fallback;
15
+ }
16
+ return /* @__PURE__ */ jsx(Fragment, { children });
17
+ };
18
+
19
+ export { ClientOnly };
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const clientOnly = require('./client-only.cjs');
6
+
7
+
8
+
9
+ exports.ClientOnly = clientOnly.ClientOnly;
@@ -0,0 +1 @@
1
+ export { ClientOnly, type ClientOnlyProps } from './client-only';
@@ -0,0 +1 @@
1
+ export { ClientOnly, type ClientOnlyProps } from './client-only';
@@ -0,0 +1 @@
1
+ export { ClientOnly } from './client-only.js';
@@ -6,5 +6,7 @@ const collection = require('@zag-js/collection');
6
6
  const core = require('@zag-js/core');
7
7
 
8
8
  const createListCollection = (options) => core.ref(new collection.ListCollection(options));
9
+ const createTreeCollection = (options) => core.ref(new collection.TreeCollection(options));
9
10
 
10
11
  exports.createListCollection = createListCollection;
12
+ exports.createTreeCollection = createTreeCollection;
@@ -1,3 +1,6 @@
1
- import { CollectionOptions, ListCollection } from '@zag-js/collection';
1
+ import { CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions } from '@zag-js/collection';
2
2
  export type { CollectionItem, ListCollection } from '@zag-js/collection';
3
3
  export declare const createListCollection: <T extends unknown>(options: CollectionOptions<T>) => ListCollection<T>;
4
+ export type { TreeCollection, TreeNode } from '@zag-js/collection';
5
+ export declare const createTreeCollection: <T extends unknown>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
6
+ export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;
@@ -1,3 +1,6 @@
1
- import { CollectionOptions, ListCollection } from '@zag-js/collection';
1
+ import { CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions } from '@zag-js/collection';
2
2
  export type { CollectionItem, ListCollection } from '@zag-js/collection';
3
3
  export declare const createListCollection: <T extends unknown>(options: CollectionOptions<T>) => ListCollection<T>;
4
+ export type { TreeCollection, TreeNode } from '@zag-js/collection';
5
+ export declare const createTreeCollection: <T extends unknown>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
6
+ export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;
@@ -1,6 +1,7 @@
1
- import { ListCollection } from '@zag-js/collection';
1
+ import { ListCollection, TreeCollection } from '@zag-js/collection';
2
2
  import { ref } from '@zag-js/core';
3
3
 
4
4
  const createListCollection = (options) => ref(new ListCollection(options));
5
+ const createTreeCollection = (options) => ref(new TreeCollection(options));
5
6
 
6
- export { createListCollection };
7
+ export { createListCollection, createTreeCollection };
@@ -27,7 +27,6 @@ const ComboboxImpl = (props, ref) => {
27
27
  "disabled",
28
28
  "disableLayer",
29
29
  "form",
30
- "getSelectionValue",
31
30
  "highlightedValue",
32
31
  "id",
33
32
  "ids",
@@ -23,7 +23,6 @@ const ComboboxImpl = (props, ref) => {
23
23
  "disabled",
24
24
  "disableLayer",
25
25
  "form",
26
- "getSelectionValue",
27
26
  "highlightedValue",
28
27
  "id",
29
28
  "ids",
@@ -0,0 +1,24 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const jsxRuntime = require('react/jsx-runtime');
7
+ const core = require('@zag-js/core');
8
+ const react = require('react');
9
+ const factory = require('../factory.cjs');
10
+ const useFieldContext = require('./use-field-context.cjs');
11
+
12
+ const FieldRequiredIndicator = react.forwardRef(
13
+ ({ fallback, ...props }, ref) => {
14
+ const field = useFieldContext.useFieldContext();
15
+ if (!field.required) {
16
+ return fallback;
17
+ }
18
+ const mergedProps = core.mergeProps(field.getRequiredIndicatorProps(), props);
19
+ return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children ?? "*" });
20
+ }
21
+ );
22
+ FieldRequiredIndicator.displayName = "FieldRequiredIndicator";
23
+
24
+ exports.FieldRequiredIndicator = FieldRequiredIndicator;
@@ -0,0 +1,8 @@
1
+ import { HTMLProps, PolymorphicProps } from '../factory';
2
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
+ export interface FieldRequiredIndicatorBaseProps extends PolymorphicProps {
4
+ fallback?: React.ReactNode;
5
+ }
6
+ export interface FieldRequiredIndicatorProps extends HTMLProps<'span'>, FieldRequiredIndicatorBaseProps {
7
+ }
8
+ export declare const FieldRequiredIndicator: ForwardRefExoticComponent<FieldRequiredIndicatorProps & RefAttributes<HTMLSpanElement>>;
@@ -0,0 +1,8 @@
1
+ import { HTMLProps, PolymorphicProps } from '../factory';
2
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
+ export interface FieldRequiredIndicatorBaseProps extends PolymorphicProps {
4
+ fallback?: React.ReactNode;
5
+ }
6
+ export interface FieldRequiredIndicatorProps extends HTMLProps<'span'>, FieldRequiredIndicatorBaseProps {
7
+ }
8
+ export declare const FieldRequiredIndicator: ForwardRefExoticComponent<FieldRequiredIndicatorProps & RefAttributes<HTMLSpanElement>>;
@@ -0,0 +1,20 @@
1
+ 'use client';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { mergeProps } from '@zag-js/core';
4
+ import { forwardRef } from 'react';
5
+ import { ark } from '../factory.js';
6
+ import { useFieldContext } from './use-field-context.js';
7
+
8
+ const FieldRequiredIndicator = forwardRef(
9
+ ({ fallback, ...props }, ref) => {
10
+ const field = useFieldContext();
11
+ if (!field.required) {
12
+ return fallback;
13
+ }
14
+ const mergedProps = mergeProps(field.getRequiredIndicatorProps(), props);
15
+ return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children ?? "*" });
16
+ }
17
+ );
18
+ FieldRequiredIndicator.displayName = "FieldRequiredIndicator";
19
+
20
+ export { FieldRequiredIndicator };
@@ -4,15 +4,27 @@
4
4
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
 
6
6
  const jsxRuntime = require('react/jsx-runtime');
7
+ const autoResize = require('@zag-js/auto-resize');
7
8
  const react$1 = require('@zag-js/react');
8
9
  const react = require('react');
10
+ const composeRefs = require('../../utils/compose-refs.cjs');
9
11
  const factory = require('../factory.cjs');
10
12
  const useFieldContext = require('./use-field-context.cjs');
11
13
 
12
14
  const FieldTextarea = react.forwardRef((props, ref) => {
15
+ const { autoresize, ...textareaProps } = props;
16
+ const textareaRef = react.useRef(null);
13
17
  const field = useFieldContext.useFieldContext();
14
- const mergedProps = react$1.mergeProps(field?.getTextareaProps(), props);
15
- return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.textarea, { ...mergedProps, ref });
18
+ const mergedProps = react$1.mergeProps(
19
+ field?.getTextareaProps(),
20
+ { style: { resize: autoresize ? "none" : void 0 } },
21
+ textareaProps
22
+ );
23
+ react.useEffect(() => {
24
+ if (!autoresize) return;
25
+ return autoResize.autoresizeTextarea(textareaRef.current);
26
+ }, [autoresize]);
27
+ return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.textarea, { ...mergedProps, ref: composeRefs.composeRefs(ref, textareaRef) });
16
28
  });
17
29
  FieldTextarea.displayName = "FieldTextarea";
18
30
 
@@ -1,6 +1,11 @@
1
1
  import { HTMLProps, PolymorphicProps } from '../factory';
2
2
  import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
3
  export interface FieldTextareaBaseProps extends PolymorphicProps {
4
+ /**
5
+ * Whether the textarea should autoresize
6
+ * @default false
7
+ */
8
+ autoresize?: boolean;
4
9
  }
5
10
  export interface FieldTextareaProps extends HTMLProps<'textarea'>, FieldTextareaBaseProps {
6
11
  }
@@ -1,6 +1,11 @@
1
1
  import { HTMLProps, PolymorphicProps } from '../factory';
2
2
  import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
3
  export interface FieldTextareaBaseProps extends PolymorphicProps {
4
+ /**
5
+ * Whether the textarea should autoresize
6
+ * @default false
7
+ */
8
+ autoresize?: boolean;
4
9
  }
5
10
  export interface FieldTextareaProps extends HTMLProps<'textarea'>, FieldTextareaBaseProps {
6
11
  }
@@ -1,14 +1,26 @@
1
1
  'use client';
2
2
  import { jsx } from 'react/jsx-runtime';
3
+ import { autoresizeTextarea } from '@zag-js/auto-resize';
3
4
  import { mergeProps } from '@zag-js/react';
4
- import { forwardRef } from 'react';
5
+ import { forwardRef, useRef, useEffect } from 'react';
6
+ import { composeRefs } from '../../utils/compose-refs.js';
5
7
  import { ark } from '../factory.js';
6
8
  import { useFieldContext } from './use-field-context.js';
7
9
 
8
10
  const FieldTextarea = forwardRef((props, ref) => {
11
+ const { autoresize, ...textareaProps } = props;
12
+ const textareaRef = useRef(null);
9
13
  const field = useFieldContext();
10
- const mergedProps = mergeProps(field?.getTextareaProps(), props);
11
- return /* @__PURE__ */ jsx(ark.textarea, { ...mergedProps, ref });
14
+ const mergedProps = mergeProps(
15
+ field?.getTextareaProps(),
16
+ { style: { resize: autoresize ? "none" : void 0 } },
17
+ textareaProps
18
+ );
19
+ useEffect(() => {
20
+ if (!autoresize) return;
21
+ return autoresizeTextarea(textareaRef.current);
22
+ }, [autoresize]);
23
+ return /* @__PURE__ */ jsx(ark.textarea, { ...mergedProps, ref: composeRefs(ref, textareaRef) });
12
24
  });
13
25
  FieldTextarea.displayName = "FieldTextarea";
14
26
 
@@ -12,7 +12,8 @@ const fieldAnatomy = anatomy.createAnatomy("field").parts(
12
12
  "input",
13
13
  "label",
14
14
  "select",
15
- "textarea"
15
+ "textarea",
16
+ "requiredIndicator"
16
17
  );
17
18
  const parts = fieldAnatomy.build();
18
19
 
@@ -1,3 +1,3 @@
1
1
  import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
2
- export declare const fieldAnatomy: AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText">;
3
- export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText", AnatomyPart>;
2
+ export declare const fieldAnatomy: AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator">;
3
+ export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", AnatomyPart>;
@@ -1,3 +1,3 @@
1
1
  import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
2
- export declare const fieldAnatomy: AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText">;
3
- export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText", AnatomyPart>;
2
+ export declare const fieldAnatomy: AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator">;
3
+ export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", AnatomyPart>;
@@ -8,7 +8,8 @@ const fieldAnatomy = createAnatomy("field").parts(
8
8
  "input",
9
9
  "label",
10
10
  "select",
11
- "textarea"
11
+ "textarea",
12
+ "requiredIndicator"
12
13
  );
13
14
  const parts = fieldAnatomy.build();
14
15
 
@@ -2,24 +2,26 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
+ const fieldContext = require('./field-context.cjs');
6
+ const fieldErrorText = require('./field-error-text.cjs');
7
+ const fieldHelperText = require('./field-helper-text.cjs');
8
+ const fieldInput = require('./field-input.cjs');
9
+ const fieldLabel = require('./field-label.cjs');
10
+ const fieldRequiredIndicator = require('./field-required-indicator.cjs');
5
11
  const fieldRoot = require('./field-root.cjs');
6
12
  const fieldRootProvider = require('./field-root-provider.cjs');
7
- const fieldLabel = require('./field-label.cjs');
8
- const fieldInput = require('./field-input.cjs');
9
- const fieldTextarea = require('./field-textarea.cjs');
10
13
  const fieldSelect = require('./field-select.cjs');
11
- const fieldHelperText = require('./field-helper-text.cjs');
12
- const fieldErrorText = require('./field-error-text.cjs');
13
- const fieldContext = require('./field-context.cjs');
14
+ const fieldTextarea = require('./field-textarea.cjs');
14
15
 
15
16
 
16
17
 
18
+ exports.Context = fieldContext.FieldContext;
19
+ exports.ErrorText = fieldErrorText.FieldErrorText;
20
+ exports.HelperText = fieldHelperText.FieldHelperText;
21
+ exports.Input = fieldInput.FieldInput;
22
+ exports.Label = fieldLabel.FieldLabel;
23
+ exports.RequiredIndicator = fieldRequiredIndicator.FieldRequiredIndicator;
17
24
  exports.Root = fieldRoot.FieldRoot;
18
25
  exports.RootProvider = fieldRootProvider.FieldRootProvider;
19
- exports.Label = fieldLabel.FieldLabel;
20
- exports.Input = fieldInput.FieldInput;
21
- exports.Textarea = fieldTextarea.FieldTextarea;
22
26
  exports.Select = fieldSelect.FieldSelect;
23
- exports.HelperText = fieldHelperText.FieldHelperText;
24
- exports.ErrorText = fieldErrorText.FieldErrorText;
25
- exports.Context = fieldContext.FieldContext;
27
+ exports.Textarea = fieldTextarea.FieldTextarea;
@@ -1,9 +1,10 @@
1
- export { FieldRoot as Root, type FieldRootProps as RootProps, type FieldRootBaseProps as RootBaseProps, } from './field-root';
2
- export { FieldRootProvider as RootProvider, type FieldRootProviderProps as RootProviderProps, type FieldRootProviderBaseProps as RootProviderBaseProps, } from './field-root-provider';
3
- export { FieldLabel as Label, type FieldLabelProps as LabelProps, type FieldLabelBaseProps as LabelBaseProps, } from './field-label';
4
- export { FieldInput as Input, type FieldInputProps as InputProps, type FieldInputBaseProps as InputBaseProps, } from './field-input';
5
- export { FieldTextarea as Textarea, type FieldTextareaProps as TextareaProps, type FieldTextareaBaseProps as TextareaBaseProps, } from './field-textarea';
6
- export { FieldSelect as Select, type FieldSelectProps as SelectProps, type FieldSelectBaseProps as SelectBaseProps, } from './field-select';
7
- export { FieldHelperText as HelperText, type FieldHelperTextProps as HelperTextProps, type FieldHelperTextBaseProps as HelperTextBaseProps, } from './field-helper-text';
8
- export { FieldErrorText as ErrorText, type FieldErrorTextProps as ErrorTextProps, type FieldErrorTextBaseProps as ErrorTextBaseProps, } from './field-error-text';
9
1
  export { FieldContext as Context, type FieldContextProps as ContextProps } from './field-context';
2
+ export { FieldErrorText as ErrorText, type FieldErrorTextBaseProps as ErrorTextBaseProps, type FieldErrorTextProps as ErrorTextProps, } from './field-error-text';
3
+ export { FieldHelperText as HelperText, type FieldHelperTextBaseProps as HelperTextBaseProps, type FieldHelperTextProps as HelperTextProps, } from './field-helper-text';
4
+ export { FieldInput as Input, type FieldInputBaseProps as InputBaseProps, type FieldInputProps as InputProps, } from './field-input';
5
+ export { FieldLabel as Label, type FieldLabelBaseProps as LabelBaseProps, type FieldLabelProps as LabelProps, } from './field-label';
6
+ export { FieldRequiredIndicator as RequiredIndicator, type FieldRequiredIndicatorBaseProps as RequiredIndicatorBaseProps, type FieldRequiredIndicatorProps as RequiredIndicatorProps, } from './field-required-indicator';
7
+ export { FieldRoot as Root, type FieldRootBaseProps as RootBaseProps, type FieldRootProps as RootProps, } from './field-root';
8
+ export { FieldRootProvider as RootProvider, type FieldRootProviderBaseProps as RootProviderBaseProps, type FieldRootProviderProps as RootProviderProps, } from './field-root-provider';
9
+ export { FieldSelect as Select, type FieldSelectBaseProps as SelectBaseProps, type FieldSelectProps as SelectProps, } from './field-select';
10
+ export { FieldTextarea as Textarea, type FieldTextareaBaseProps as TextareaBaseProps, type FieldTextareaProps as TextareaProps, } from './field-textarea';
@@ -1,9 +1,10 @@
1
- export { FieldRoot as Root, type FieldRootProps as RootProps, type FieldRootBaseProps as RootBaseProps, } from './field-root';
2
- export { FieldRootProvider as RootProvider, type FieldRootProviderProps as RootProviderProps, type FieldRootProviderBaseProps as RootProviderBaseProps, } from './field-root-provider';
3
- export { FieldLabel as Label, type FieldLabelProps as LabelProps, type FieldLabelBaseProps as LabelBaseProps, } from './field-label';
4
- export { FieldInput as Input, type FieldInputProps as InputProps, type FieldInputBaseProps as InputBaseProps, } from './field-input';
5
- export { FieldTextarea as Textarea, type FieldTextareaProps as TextareaProps, type FieldTextareaBaseProps as TextareaBaseProps, } from './field-textarea';
6
- export { FieldSelect as Select, type FieldSelectProps as SelectProps, type FieldSelectBaseProps as SelectBaseProps, } from './field-select';
7
- export { FieldHelperText as HelperText, type FieldHelperTextProps as HelperTextProps, type FieldHelperTextBaseProps as HelperTextBaseProps, } from './field-helper-text';
8
- export { FieldErrorText as ErrorText, type FieldErrorTextProps as ErrorTextProps, type FieldErrorTextBaseProps as ErrorTextBaseProps, } from './field-error-text';
9
1
  export { FieldContext as Context, type FieldContextProps as ContextProps } from './field-context';
2
+ export { FieldErrorText as ErrorText, type FieldErrorTextBaseProps as ErrorTextBaseProps, type FieldErrorTextProps as ErrorTextProps, } from './field-error-text';
3
+ export { FieldHelperText as HelperText, type FieldHelperTextBaseProps as HelperTextBaseProps, type FieldHelperTextProps as HelperTextProps, } from './field-helper-text';
4
+ export { FieldInput as Input, type FieldInputBaseProps as InputBaseProps, type FieldInputProps as InputProps, } from './field-input';
5
+ export { FieldLabel as Label, type FieldLabelBaseProps as LabelBaseProps, type FieldLabelProps as LabelProps, } from './field-label';
6
+ export { FieldRequiredIndicator as RequiredIndicator, type FieldRequiredIndicatorBaseProps as RequiredIndicatorBaseProps, type FieldRequiredIndicatorProps as RequiredIndicatorProps, } from './field-required-indicator';
7
+ export { FieldRoot as Root, type FieldRootBaseProps as RootBaseProps, type FieldRootProps as RootProps, } from './field-root';
8
+ export { FieldRootProvider as RootProvider, type FieldRootProviderBaseProps as RootProviderBaseProps, type FieldRootProviderProps as RootProviderProps, } from './field-root-provider';
9
+ export { FieldSelect as Select, type FieldSelectBaseProps as SelectBaseProps, type FieldSelectProps as SelectProps, } from './field-select';
10
+ export { FieldTextarea as Textarea, type FieldTextareaBaseProps as TextareaBaseProps, type FieldTextareaProps as TextareaProps, } from './field-textarea';
@@ -1,9 +1,10 @@
1
+ export { FieldContext as Context } from './field-context.js';
2
+ export { FieldErrorText as ErrorText } from './field-error-text.js';
3
+ export { FieldHelperText as HelperText } from './field-helper-text.js';
4
+ export { FieldInput as Input } from './field-input.js';
5
+ export { FieldLabel as Label } from './field-label.js';
6
+ export { FieldRequiredIndicator as RequiredIndicator } from './field-required-indicator.js';
1
7
  export { FieldRoot as Root } from './field-root.js';
2
8
  export { FieldRootProvider as RootProvider } from './field-root-provider.js';
3
- export { FieldLabel as Label } from './field-label.js';
4
- export { FieldInput as Input } from './field-input.js';
5
- export { FieldTextarea as Textarea } from './field-textarea.js';
6
9
  export { FieldSelect as Select } from './field-select.js';
7
- export { FieldHelperText as HelperText } from './field-helper-text.js';
8
- export { FieldErrorText as ErrorText } from './field-error-text.js';
9
- export { FieldContext as Context } from './field-context.js';
10
+ export { FieldTextarea as Textarea } from './field-textarea.js';
@@ -11,6 +11,7 @@ const fieldRoot = require('./field-root.cjs');
11
11
  const fieldRootProvider = require('./field-root-provider.cjs');
12
12
  const fieldSelect = require('./field-select.cjs');
13
13
  const fieldTextarea = require('./field-textarea.cjs');
14
+ const fieldRequiredIndicator = require('./field-required-indicator.cjs');
14
15
  const field_anatomy = require('./field.anatomy.cjs');
15
16
  const useFieldContext = require('./use-field-context.cjs');
16
17
  const field = require('./field.cjs');
@@ -26,6 +27,7 @@ exports.FieldRoot = fieldRoot.FieldRoot;
26
27
  exports.FieldRootProvider = fieldRootProvider.FieldRootProvider;
27
28
  exports.FieldSelect = fieldSelect.FieldSelect;
28
29
  exports.FieldTextarea = fieldTextarea.FieldTextarea;
30
+ exports.FieldRequiredIndicator = fieldRequiredIndicator.FieldRequiredIndicator;
29
31
  exports.fieldAnatomy = field_anatomy.fieldAnatomy;
30
32
  exports.useFieldContext = useFieldContext.useFieldContext;
31
33
  exports.Field = field;
@@ -7,6 +7,7 @@ export { FieldRoot, type FieldRootBaseProps, type FieldRootProps } from './field
7
7
  export { FieldRootProvider, type FieldRootProviderBaseProps, type FieldRootProviderProps, } from './field-root-provider';
8
8
  export { FieldSelect, type FieldSelectBaseProps, type FieldSelectProps } from './field-select';
9
9
  export { FieldTextarea, type FieldTextareaBaseProps, type FieldTextareaProps, } from './field-textarea';
10
+ export { FieldRequiredIndicator, type FieldRequiredIndicatorProps, type FieldRequiredIndicatorBaseProps, } from './field-required-indicator';
10
11
  export { fieldAnatomy } from './field.anatomy';
11
12
  export { useFieldContext, type UseFieldContext } from './use-field-context';
12
13
  export * as Field from './field';
@@ -7,6 +7,7 @@ export { FieldRoot, type FieldRootBaseProps, type FieldRootProps } from './field
7
7
  export { FieldRootProvider, type FieldRootProviderBaseProps, type FieldRootProviderProps, } from './field-root-provider';
8
8
  export { FieldSelect, type FieldSelectBaseProps, type FieldSelectProps } from './field-select';
9
9
  export { FieldTextarea, type FieldTextareaBaseProps, type FieldTextareaProps, } from './field-textarea';
10
+ export { FieldRequiredIndicator, type FieldRequiredIndicatorProps, type FieldRequiredIndicatorBaseProps, } from './field-required-indicator';
10
11
  export { fieldAnatomy } from './field.anatomy';
11
12
  export { useFieldContext, type UseFieldContext } from './use-field-context';
12
13
  export * as Field from './field';
@@ -7,6 +7,7 @@ export { FieldRoot } from './field-root.js';
7
7
  export { FieldRootProvider } from './field-root-provider.js';
8
8
  export { FieldSelect } from './field-select.js';
9
9
  export { FieldTextarea } from './field-textarea.js';
10
+ export { FieldRequiredIndicator } from './field-required-indicator.js';
10
11
  export { fieldAnatomy } from './field.anatomy.js';
11
12
  export { useFieldContext } from './use-field-context.js';
12
13
  import * as field from './field.js';
@@ -119,6 +119,13 @@ const useField = (props) => {
119
119
  }),
120
120
  [errorTextId]
121
121
  );
122
+ const getRequiredIndicatorProps = react.useMemo(
123
+ () => () => ({
124
+ "aria-hidden": true,
125
+ ...field_anatomy.parts.requiredIndicator.attrs
126
+ }),
127
+ []
128
+ );
122
129
  return {
123
130
  ariaDescribedby: labelIds,
124
131
  ids: {
@@ -141,7 +148,8 @@ const useField = (props) => {
141
148
  getTextareaProps,
142
149
  getSelectProps,
143
150
  getHelperTextProps,
144
- getErrorTextProps
151
+ getErrorTextProps,
152
+ getRequiredIndicatorProps
145
153
  };
146
154
  };
147
155
 
@@ -57,4 +57,5 @@ export declare const useField: (props: UseFieldProps) => {
57
57
  getSelectProps: () => HTMLProps<"select">;
58
58
  getHelperTextProps: () => HTMLProps<"span">;
59
59
  getErrorTextProps: () => HTMLProps<"span">;
60
+ getRequiredIndicatorProps: () => HTMLProps<"span">;
60
61
  };
@@ -57,4 +57,5 @@ export declare const useField: (props: UseFieldProps) => {
57
57
  getSelectProps: () => HTMLProps<"select">;
58
58
  getHelperTextProps: () => HTMLProps<"span">;
59
59
  getErrorTextProps: () => HTMLProps<"span">;
60
+ getRequiredIndicatorProps: () => HTMLProps<"span">;
60
61
  };
@@ -115,6 +115,13 @@ const useField = (props) => {
115
115
  }),
116
116
  [errorTextId]
117
117
  );
118
+ const getRequiredIndicatorProps = useMemo(
119
+ () => () => ({
120
+ "aria-hidden": true,
121
+ ...parts.requiredIndicator.attrs
122
+ }),
123
+ []
124
+ );
118
125
  return {
119
126
  ariaDescribedby: labelIds,
120
127
  ids: {
@@ -137,7 +144,8 @@ const useField = (props) => {
137
144
  getTextareaProps,
138
145
  getSelectProps,
139
146
  getHelperTextProps,
140
- getErrorTextProps
147
+ getErrorTextProps,
148
+ getRequiredIndicatorProps
141
149
  };
142
150
  };
143
151