@zayne-labs/ui-react 0.10.9 → 0.10.11

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 (76) hide show
  1. package/dist/esm/{cn-s-D7vHW1.js → cn-DdD3uYxA.js} +1 -1
  2. package/dist/esm/{cn-s-D7vHW1.js.map → cn-DdD3uYxA.js.map} +1 -1
  3. package/dist/esm/common/await/index.d.ts +46 -4
  4. package/dist/esm/common/await/index.js +86 -4
  5. package/dist/esm/common/await/index.js.map +1 -0
  6. package/dist/esm/common/error-boundary/index.d.ts +1 -1
  7. package/dist/esm/common/for/index.d.ts +23 -2
  8. package/dist/esm/common/for/index.js +1 -1
  9. package/dist/esm/common/presence/index.js +1 -1
  10. package/dist/esm/common/show/index.d.ts +32 -2
  11. package/dist/esm/common/slot/index.d.ts +16 -2
  12. package/dist/esm/common/suspense-with-boundary/index.d.ts +2 -2
  13. package/dist/esm/common/suspense-with-boundary/index.js +20 -3
  14. package/dist/esm/common/suspense-with-boundary/index.js.map +1 -0
  15. package/dist/esm/common/switch/index.d.ts +28 -2
  16. package/dist/esm/common/switch/index.js +37 -2
  17. package/dist/esm/common/switch/index.js.map +1 -0
  18. package/dist/esm/common/teleport/index.d.ts +14 -2
  19. package/dist/esm/common/teleport/index.js +31 -2
  20. package/dist/esm/common/teleport/index.js.map +1 -0
  21. package/dist/esm/{for-DK5rEY_m.js → for-BYsFEk3R.js} +1 -1
  22. package/dist/esm/{for-DK5rEY_m.js.map → for-BYsFEk3R.js.map} +1 -1
  23. package/dist/esm/{index-C0L6V4Zq.d.ts → index-B0pltiMx.d.ts} +3 -3
  24. package/dist/esm/{index-lw5txqar.d.ts → index-DGomCOFj.d.ts} +4 -4
  25. package/dist/esm/{presence-CL5_GHQH.js → presence-CAQElNtY.js} +1 -1
  26. package/dist/esm/{presence-CL5_GHQH.js.map → presence-CAQElNtY.js.map} +1 -1
  27. package/dist/esm/ui/card/index.d.ts +20 -2
  28. package/dist/esm/ui/card/index.js +94 -4
  29. package/dist/esm/ui/card/index.js.map +1 -0
  30. package/dist/esm/ui/carousel/index.d.ts +95 -2
  31. package/dist/esm/ui/carousel/index.js +285 -13
  32. package/dist/esm/ui/carousel/index.js.map +1 -0
  33. package/dist/esm/ui/drag-scroll/index.d.ts +23 -2
  34. package/dist/esm/ui/drag-scroll/index.js +114 -3
  35. package/dist/esm/ui/drag-scroll/index.js.map +1 -0
  36. package/dist/esm/ui/drop-zone/index.d.ts +346 -2
  37. package/dist/esm/ui/drop-zone/index.js +1026 -14
  38. package/dist/esm/ui/drop-zone/index.js.map +1 -0
  39. package/dist/esm/ui/form/index.d.ts +227 -2
  40. package/dist/esm/ui/form/index.js +573 -5
  41. package/dist/esm/ui/form/index.js.map +1 -0
  42. package/package.json +6 -8
  43. package/dist/esm/await-DDgVzpvI.js +0 -87
  44. package/dist/esm/await-DDgVzpvI.js.map +0 -1
  45. package/dist/esm/card-DDLJVCwL.js +0 -95
  46. package/dist/esm/card-DDLJVCwL.js.map +0 -1
  47. package/dist/esm/carousel-B051PAAX.js +0 -285
  48. package/dist/esm/carousel-B051PAAX.js.map +0 -1
  49. package/dist/esm/common/index.d.ts +0 -9
  50. package/dist/esm/common/index.js +0 -11
  51. package/dist/esm/common-PS3X58Pj.js +0 -0
  52. package/dist/esm/drag-scroll-Bb1SG4On.js +0 -115
  53. package/dist/esm/drag-scroll-Bb1SG4On.js.map +0 -1
  54. package/dist/esm/drop-zone-FkkbzZ3j.js +0 -1019
  55. package/dist/esm/drop-zone-FkkbzZ3j.js.map +0 -1
  56. package/dist/esm/form-DyGy9LnA.js +0 -574
  57. package/dist/esm/form-DyGy9LnA.js.map +0 -1
  58. package/dist/esm/index-BJUTFSec.d.ts +0 -227
  59. package/dist/esm/index-BeCCgTjL.d.ts +0 -16
  60. package/dist/esm/index-BsGxDKlt.d.ts +0 -32
  61. package/dist/esm/index-C1GPFYKG.d.ts +0 -23
  62. package/dist/esm/index-CZjeBSoQ.d.ts +0 -14
  63. package/dist/esm/index-CffEFE66.d.ts +0 -28
  64. package/dist/esm/index-DFHOx2Pf.d.ts +0 -23
  65. package/dist/esm/index-DXwAMkn0.d.ts +0 -46
  66. package/dist/esm/index-RpfwCCWX.d.ts +0 -345
  67. package/dist/esm/index-bD-GMufy.d.ts +0 -20
  68. package/dist/esm/index-ipYGGqwN.d.ts +0 -95
  69. package/dist/esm/suspense-with-boundary-D-1NYDV4.js +0 -21
  70. package/dist/esm/suspense-with-boundary-D-1NYDV4.js.map +0 -1
  71. package/dist/esm/switch-Ch22z21e.js +0 -38
  72. package/dist/esm/switch-Ch22z21e.js.map +0 -1
  73. package/dist/esm/teleport-C8TzRm4M.js +0 -32
  74. package/dist/esm/teleport-C8TzRm4M.js.map +0 -1
  75. package/dist/esm/ui/index.d.ts +0 -6
  76. package/dist/esm/ui/index.js +0 -18
@@ -1,574 +0,0 @@
1
- import { __export } from "./chunk-CTAAG5j7.js";
2
- import { SlotRoot } from "./slot-WVWfOlr3.js";
3
- import { ForWithWrapper } from "./for-DK5rEY_m.js";
4
- import { cnMerge } from "./cn-s-D7vHW1.js";
5
- import { composeRefs, composeTwoEventHandlers, getMultipleSlots } from "@zayne-labs/toolkit-react/utils";
6
- import { defineEnum, isObject } from "@zayne-labs/toolkit-type-helpers";
7
- import { Fragment, createElement, useEffect, useId, useMemo, useRef } from "react";
8
- import { ContextError, createCustomContext, useCallbackRef, useToggle } from "@zayne-labs/toolkit-react";
9
- import { jsx, jsxs } from "react/jsx-runtime";
10
- import { dataAttr, on, toArray } from "@zayne-labs/toolkit-core";
11
- import { Controller, FormProvider, useFormContext, useFormContext as useFormRootContext, useFormState, useWatch } from "react-hook-form";
12
-
13
- //#region src/components/ui/form/icons.tsx
14
- const EyeIconClosed = (props) => /* @__PURE__ */ jsx("svg", {
15
- xmlns: "http://www.w3.org/2000/svg",
16
- width: "1em",
17
- height: "1em",
18
- viewBox: "0 0 24 24",
19
- ...props,
20
- children: /* @__PURE__ */ jsx("path", {
21
- fill: "currentColor",
22
- d: "M15.175 8.325q.725.725 1.063 1.65t.237 1.9q0 .375-.275.638t-.65.262t-.638-.262t-.262-.638q.125-.65-.075-1.25T13.95 9.6t-1.025-.65t-1.275-.1q-.375 0-.638-.275t-.262-.65t.263-.637t.637-.263q.95-.1 1.875.238t1.65 1.062M12 6q-.475 0-.925.037t-.9.138q-.425.075-.763-.125t-.462-.6t.088-.775t.612-.45q.575-.125 1.163-.175T12 4q3.425 0 6.263 1.8t4.337 4.85q.1.2.15.413t.05.437t-.038.438t-.137.412q-.45 1-1.112 1.875t-1.463 1.6q-.3.275-.7.225t-.65-.4t-.212-.763t.337-.687q.6-.575 1.1-1.25t.875-1.45q-1.25-2.525-3.613-4.012T12 6m0 13q-3.35 0-6.125-1.812T1.5 12.425q-.125-.2-.187-.437T1.25 11.5t.05-.475t.175-.45q.5-1 1.163-1.912T4.15 7L2.075 4.9q-.275-.3-.262-.712T2.1 3.5t.7-.275t.7.275l17 17q.275.275.288.688t-.288.712q-.275.275-.7.275t-.7-.275l-3.5-3.45q-.875.275-1.775.413T12 19M5.55 8.4q-.725.65-1.325 1.425T3.2 11.5q1.25 2.525 3.613 4.013T12 17q.5 0 .975-.062t.975-.138l-.9-.95q-.275.075-.525.113T12 16q-1.875 0-3.188-1.312T7.5 11.5q0-.275.038-.525t.112-.525zm4.2 4.2"
23
- })
24
- });
25
- const EyeIconOpen = (props) => /* @__PURE__ */ jsx("svg", {
26
- xmlns: "http://www.w3.org/2000/svg",
27
- width: "1em",
28
- height: "1em",
29
- viewBox: "0 0 24 24",
30
- ...props,
31
- children: /* @__PURE__ */ jsx("path", {
32
- fill: "currentColor",
33
- d: "M12 16q1.875 0 3.188-1.312T16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.788T9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2m0 4.8q-3.35 0-6.113-1.8t-4.362-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q1.6-2.95 4.363-4.75T12 4t6.113 1.8t4.362 4.75q.125.225.188.463t.062.487t-.062.488t-.188.462q-1.6 2.95-4.362 4.75T12 19m0-2q2.825 0 5.188-1.487T20.8 11.5q-1.25-2.525-3.613-4.012T12 6T6.813 7.488T3.2 11.5q1.25 2.525 3.613 4.013T12 17"
34
- })
35
- });
36
-
37
- //#endregion
38
- //#region src/components/ui/form/utils.ts
39
- const getFieldErrorMessage = (options) => {
40
- const { errors, fieldName, type } = options;
41
- if (fieldName === void 0 || !errors || Object.keys(errors).length === 0) return;
42
- if (type === "root") return errors.root?.[fieldName]?.message;
43
- const pathParts = fieldName.includes(".") ? fieldName.split(".") : null;
44
- if (!pathParts) return errors[fieldName]?.message;
45
- let extractedError = errors;
46
- for (const part of pathParts) {
47
- const currentError = extractedError[part];
48
- if (!isObject(currentError)) break;
49
- extractedError = currentError;
50
- }
51
- return extractedError.message;
52
- };
53
- const getEyeIcon = (options) => {
54
- const { classNames, iconType, renderIconProps, withEyeIcon } = options;
55
- if (!withEyeIcon) return null;
56
- if (withEyeIcon === true) return {
57
- closed: createElement(EyeIconClosed, { className: cnMerge("size-full", classNames?.eyeIcon) }),
58
- open: createElement(EyeIconOpen, { className: cnMerge("size-full", classNames?.eyeIcon) })
59
- }[iconType];
60
- if (withEyeIcon.renderIcon) return withEyeIcon.renderIcon(renderIconProps);
61
- if (withEyeIcon[iconType]) return withEyeIcon[iconType];
62
- return null;
63
- };
64
-
65
- //#endregion
66
- //#region src/components/ui/form/form-context.ts
67
- const useFormMethodsContext = (options = {}) => {
68
- const { strict = true } = options;
69
- const formContext = useFormContext();
70
- if (strict && !formContext) throw new ContextError(`useFormRootContext returned "null". Did you forget to wrap the necessary components within FormRoot?`);
71
- return formContext;
72
- };
73
- const [LaxFormRootProvider, useLaxFormRootContext] = createCustomContext({
74
- defaultValue: null,
75
- hookName: "useLaxFormRootContext",
76
- name: "LaxFormRootContext",
77
- providerName: "FormRoot",
78
- strict: false
79
- });
80
- const [StrictFormFieldProvider, useStrictFormFieldContext] = createCustomContext({
81
- hookName: "useFormFieldContext",
82
- name: "StrictFormFieldContext",
83
- providerName: "FormField"
84
- });
85
- const [LaxFormFieldProvider, useLaxFormFieldContext] = createCustomContext({
86
- defaultValue: null,
87
- hookName: "useLaxFormFieldContext",
88
- name: "LaxFormFieldContext",
89
- providerName: "FormField",
90
- strict: false
91
- });
92
- const useLaxFormFieldState = (options) => {
93
- const { control = options?.control } = useFormMethodsContext({ strict: false }) ?? {};
94
- const { name = options?.name } = useLaxFormFieldContext() ?? {};
95
- const { disabled, errors } = (control ? useFormState : () => ({}))({
96
- control,
97
- name
98
- });
99
- const errorMessage = getFieldErrorMessage({
100
- errors,
101
- fieldName: name,
102
- type: "regular"
103
- });
104
- return {
105
- errors,
106
- isDisabled: disabled,
107
- isInvalid: Boolean(errorMessage)
108
- };
109
- };
110
-
111
- //#endregion
112
- //#region src/components/ui/form/form.tsx
113
- function FormRoot(props) {
114
- const { children, className, methods, withEyeIcon,...restOfProps } = props;
115
- const formContextValue = useMemo(() => ({ withEyeIcon }), [withEyeIcon]);
116
- return /* @__PURE__ */ jsx(FormProvider, {
117
- ...methods,
118
- children: /* @__PURE__ */ jsx(LaxFormRootProvider, {
119
- value: formContextValue,
120
- children: /* @__PURE__ */ jsx("form", {
121
- className: cnMerge("flex flex-col", className),
122
- ...restOfProps,
123
- "data-scope": "form",
124
- "data-part": "root",
125
- "data-slot": "form-root",
126
- children
127
- })
128
- })
129
- });
130
- }
131
- function FormField(props) {
132
- const { children, className, name, withWrapper = true } = props;
133
- const { isDisabled, isInvalid } = useLaxFormFieldState({ name });
134
- const uniqueId = useId();
135
- const fieldContextValue = useMemo(() => ({
136
- formDescriptionId: `${name}-(${uniqueId})-form-item-description`,
137
- formItemId: `${name}-(${uniqueId})-form-item`,
138
- formMessageId: `${name}-(${uniqueId})-form-item-message`,
139
- name
140
- }), [name, uniqueId]);
141
- const WrapperElement = withWrapper ? "div" : Fragment;
142
- const wrapperElementProps = withWrapper && {
143
- className: cnMerge("flex flex-col gap-2", className),
144
- "data-part": "field",
145
- "data-scope": "form",
146
- "data-slot": "form-field",
147
- "data-disabled": dataAttr(isDisabled),
148
- "data-invalid": dataAttr(isInvalid)
149
- };
150
- return /* @__PURE__ */ jsx(StrictFormFieldProvider, {
151
- value: fieldContextValue,
152
- children: /* @__PURE__ */ jsx(LaxFormFieldProvider, {
153
- value: fieldContextValue,
154
- children: /* @__PURE__ */ jsx(WrapperElement, {
155
- ...wrapperElementProps,
156
- children
157
- })
158
- })
159
- });
160
- }
161
- function FormFieldController(props) {
162
- const { control } = useFormMethodsContext();
163
- const { name } = useStrictFormFieldContext();
164
- const { render,...restOfProps } = props;
165
- return /* @__PURE__ */ jsx(Controller, {
166
- name,
167
- control,
168
- render,
169
- ...restOfProps
170
- });
171
- }
172
- function FormFieldControlledField(props) {
173
- const { name } = props;
174
- const uniqueId = useId();
175
- const fieldContextValue = useMemo(() => ({
176
- formDescriptionId: `${name}-(${uniqueId})-form-item-description`,
177
- formItemId: `${name}-(${uniqueId})-form-item`,
178
- formMessageId: `${name}-(${uniqueId})-form-item-message`,
179
- name
180
- }), [name, uniqueId]);
181
- return /* @__PURE__ */ jsx(StrictFormFieldProvider, {
182
- value: fieldContextValue,
183
- children: /* @__PURE__ */ jsx(LaxFormFieldProvider, {
184
- value: fieldContextValue,
185
- children: /* @__PURE__ */ jsx(Controller, { ...props })
186
- })
187
- });
188
- }
189
- function FormFieldContext(props) {
190
- const { children, render } = props;
191
- const fieldContextValues = useStrictFormFieldContext();
192
- if (typeof children === "function") return children(fieldContextValues);
193
- return render(fieldContextValues);
194
- }
195
- function FormLabel(props) {
196
- const fieldContextValues = useStrictFormFieldContext();
197
- const { children, htmlFor = fieldContextValues.formItemId,...restOfProps } = props;
198
- const { isDisabled, isInvalid } = useLaxFormFieldState({ name: fieldContextValues.name });
199
- return /* @__PURE__ */ jsx("label", {
200
- "data-scope": "form",
201
- "data-part": "label",
202
- "data-slot": "form-label",
203
- "data-disabled": dataAttr(isDisabled),
204
- "data-invalid": dataAttr(isInvalid),
205
- htmlFor,
206
- ...restOfProps,
207
- children
208
- });
209
- }
210
- function FormInputGroup(props) {
211
- const { children, className,...restOfProps } = props;
212
- const { isDisabled, isInvalid } = useLaxFormFieldState();
213
- const { regularChildren, slots: [leftItemSlot, rightItemSlot] } = getMultipleSlots(children, [FormInputLeftItem, FormInputRightItem]);
214
- return /* @__PURE__ */ jsxs("div", {
215
- "data-scope": "form",
216
- "data-part": "input-group",
217
- "data-slot": "form-input-group",
218
- "data-invalid": dataAttr(isInvalid),
219
- "data-disabled": dataAttr(isDisabled),
220
- className: cnMerge("flex items-center justify-between gap-2", className),
221
- ...restOfProps,
222
- children: [
223
- leftItemSlot,
224
- regularChildren,
225
- rightItemSlot
226
- ]
227
- });
228
- }
229
- function FormInputLeftItem(props) {
230
- const { as: Element = "span", children, className,...restOfProps } = props;
231
- return /* @__PURE__ */ jsx(Element, {
232
- "data-scope": "form",
233
- "data-part": "left-item",
234
- "data-slot": "form-left-item",
235
- className: cnMerge("inline-flex items-center justify-center", className),
236
- ...restOfProps,
237
- children
238
- });
239
- }
240
- FormInputLeftItem.slotSymbol = Symbol("input-left-item");
241
- function FormInputRightItem(props) {
242
- const { as: Element = "span", children, className,...restOfProps } = props;
243
- return /* @__PURE__ */ jsx(Element, {
244
- "data-scope": "form",
245
- "data-part": "right-item",
246
- "data-slot": "form-right-item",
247
- className: cnMerge("inline-flex items-center justify-center", className),
248
- ...restOfProps,
249
- children
250
- });
251
- }
252
- FormInputRightItem.slotSymbol = Symbol("input-right-item");
253
- const inputTypesWithoutFullWith = new Set(["checkbox", "radio"]);
254
- function FormInputPrimitive(props) {
255
- const fieldContextValues = useLaxFormFieldContext();
256
- const formRootContextValues = useLaxFormRootContext();
257
- const { className, classNames, control, fieldState, id = fieldContextValues?.formItemId, name = fieldContextValues?.name, rules, type = "text", withEyeIcon = formRootContextValues?.withEyeIcon ?? true,...restOfProps } = props;
258
- const fieldStateFromLaxFormField = useLaxFormFieldState({
259
- control,
260
- name
261
- });
262
- const { isDisabled, isInvalid } = fieldState ?? fieldStateFromLaxFormField;
263
- const [isPasswordVisible, toggleVisibility] = useToggle(false);
264
- const shouldHaveEyeIcon = withEyeIcon && type === "password";
265
- const WrapperElement = shouldHaveEyeIcon ? FormInputGroup : Fragment;
266
- const wrapperElementProps = shouldHaveEyeIcon && { className: cnMerge("w-full", classNames?.inputGroup, isInvalid && classNames?.error) };
267
- const { register } = useFormMethodsContext({ strict: false }) ?? {};
268
- const eyeIcon = getEyeIcon({
269
- classNames,
270
- iconType: isPasswordVisible ? "closed" : "open",
271
- renderIconProps: { isPasswordVisible },
272
- withEyeIcon
273
- });
274
- return /* @__PURE__ */ jsxs(WrapperElement, {
275
- ...wrapperElementProps,
276
- children: [/* @__PURE__ */ jsx("input", {
277
- "data-scope": "form",
278
- "data-part": "input",
279
- "data-slot": "form-input",
280
- "aria-describedby": !isInvalid ? fieldContextValues?.formDescriptionId : `${fieldContextValues?.formDescriptionId} ${fieldContextValues?.formMessageId}`,
281
- "aria-invalid": dataAttr(isInvalid),
282
- "data-invalid": dataAttr(isInvalid),
283
- "data-disabled": dataAttr(isDisabled),
284
- id,
285
- name,
286
- type: type === "password" && isPasswordVisible ? "text" : type,
287
- className: cnMerge(!inputTypesWithoutFullWith.has(type) && "flex w-full", `bg-transparent text-sm file:border-0 file:bg-transparent
288
- placeholder:text-zu-muted-foreground focus-visible:outline-hidden
289
- disabled:cursor-not-allowed disabled:opacity-50`, className, classNames?.input, type !== "password" && isInvalid && classNames?.error),
290
- ...Boolean(name) && register?.(name, rules),
291
- ...restOfProps
292
- }), shouldHaveEyeIcon && /* @__PURE__ */ jsx(FormInputRightItem, {
293
- as: "button",
294
- type: "button",
295
- onClick: toggleVisibility,
296
- className: "size-5 shrink-0 lg:size-6",
297
- children: eyeIcon
298
- })]
299
- });
300
- }
301
- function FormTextAreaPrimitive(props) {
302
- const fieldContextValues = useLaxFormFieldContext();
303
- const { className, classNames, control, fieldState, id = fieldContextValues?.formItemId, name = fieldContextValues?.name, rules,...restOfProps } = props;
304
- const fieldStateFromLaxFormField = useLaxFormFieldState({
305
- control,
306
- name
307
- });
308
- const { isDisabled, isInvalid } = fieldState ?? fieldStateFromLaxFormField;
309
- const { register } = useFormMethodsContext({ strict: false }) ?? {};
310
- return /* @__PURE__ */ jsx("textarea", {
311
- "data-scope": "form",
312
- "data-part": "textarea",
313
- "data-slot": "form-textarea",
314
- "aria-describedby": !isInvalid ? fieldContextValues?.formDescriptionId : `${fieldContextValues?.formDescriptionId} ${fieldContextValues?.formMessageId}`,
315
- "aria-invalid": dataAttr(isInvalid),
316
- "data-disabled": dataAttr(isDisabled),
317
- "data-invalid": dataAttr(isInvalid),
318
- id,
319
- name,
320
- className: cnMerge(`w-full bg-transparent text-sm placeholder:text-zu-muted-foreground
321
- focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50`, className, classNames?.base, isInvalid && classNames?.error),
322
- ...Boolean(name) && register?.(name, rules),
323
- ...restOfProps
324
- });
325
- }
326
- function FormSelectPrimitive(props) {
327
- const fieldContextValues = useLaxFormFieldContext();
328
- const { className, classNames, control, fieldState, id = fieldContextValues?.formItemId, name = fieldContextValues?.name, rules,...restOfProps } = props;
329
- const fieldStateFromLaxFormField = useLaxFormFieldState({
330
- control,
331
- name
332
- });
333
- const { isDisabled, isInvalid } = fieldState ?? fieldStateFromLaxFormField;
334
- const { register } = useFormMethodsContext({ strict: false }) ?? {};
335
- return /* @__PURE__ */ jsx("select", {
336
- defaultValue: "",
337
- "data-scope": "form",
338
- "data-part": "select",
339
- "data-slot": "form-select",
340
- "aria-describedby": !isInvalid ? fieldContextValues?.formDescriptionId : `${fieldContextValues?.formDescriptionId} ${fieldContextValues?.formMessageId}`,
341
- "aria-invalid": dataAttr(isInvalid),
342
- "data-disabled": dataAttr(isDisabled),
343
- "data-invalid": dataAttr(isInvalid),
344
- id,
345
- name,
346
- className: cnMerge(`w-full bg-transparent text-sm placeholder:text-zu-muted-foreground
347
- focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50`, className, classNames?.base, isInvalid && classNames?.error),
348
- ...Boolean(name) && register?.(name, rules),
349
- ...restOfProps
350
- });
351
- }
352
- const InputTypeMap = defineEnum({
353
- select: FormSelectPrimitive,
354
- textarea: FormTextAreaPrimitive
355
- });
356
- function FormInput(props) {
357
- const { onBlur, onChange, ref, rules, type,...restOfProps } = props;
358
- const { name } = useStrictFormFieldContext();
359
- const { register } = useFormMethodsContext();
360
- const SelectedInput = type === "textarea" || type === "select" ? InputTypeMap[type] : FormInputPrimitive;
361
- const registerProps = name ? register(name, rules) : null;
362
- return /* @__PURE__ */ jsx(SelectedInput, {
363
- type,
364
- name,
365
- ...registerProps,
366
- ...restOfProps,
367
- ref: composeRefs(registerProps?.ref, ref),
368
- onChange: composeTwoEventHandlers(registerProps?.onChange, onChange),
369
- onBlur: composeTwoEventHandlers(registerProps?.onBlur, onBlur)
370
- });
371
- }
372
- function FormTextArea(props) {
373
- return /* @__PURE__ */ jsx(FormInput, {
374
- ...props,
375
- type: "textarea"
376
- });
377
- }
378
- function FormSelect(props) {
379
- return /* @__PURE__ */ jsx(FormInput, {
380
- ...props,
381
- type: "select"
382
- });
383
- }
384
- function FormDescription(props) {
385
- const { className,...restOfProps } = props;
386
- const { formDescriptionId } = useLaxFormFieldContext() ?? {};
387
- return /* @__PURE__ */ jsx("p", {
388
- id: formDescriptionId,
389
- className: cnMerge("text-[12px]", className),
390
- ...restOfProps
391
- });
392
- }
393
- const FormErrorMessagePrimitive = (props) => {
394
- const fieldContextValues = useLaxFormFieldContext();
395
- const rootContextValues = useFormMethodsContext({ strict: false });
396
- const { children, className, classNames, control = rootContextValues?.control, disableErrorAnimation = false, disableScrollToErrorField = false, fieldName = fieldContextValues?.name, renderItem, type = "regular" } = props;
397
- const { errors } = useLaxFormFieldState({
398
- control,
399
- name: fieldName
400
- });
401
- const { formMessageId } = useLaxFormFieldContext() ?? {};
402
- const containerRef = useRef(null);
403
- const errorAnimationClass = classNames?.errorMessageAnimation ?? "animate-shake";
404
- const getErrorElements = useCallbackRef(() => containerRef.current?.children ?? []);
405
- useEffect(() => {
406
- if (disableErrorAnimation) return;
407
- if (!errors || Object.keys(errors).length === 0) return;
408
- const errorMessageElements = getErrorElements();
409
- if (errorMessageElements.length === 0) return;
410
- const controller = new AbortController();
411
- for (const element of errorMessageElements) {
412
- element.classList.add(errorAnimationClass);
413
- const onAnimationEnd = () => element.classList.remove(errorAnimationClass);
414
- on("animationend", element, onAnimationEnd, {
415
- once: true,
416
- signal: controller.signal
417
- });
418
- }
419
- return () => {
420
- controller.abort();
421
- };
422
- }, [
423
- disableErrorAnimation,
424
- errorAnimationClass,
425
- errors,
426
- getErrorElements
427
- ]);
428
- useEffect(() => {
429
- if (disableScrollToErrorField) return;
430
- if (!errors || Object.keys(errors).length === 0) return;
431
- const errorMessageElements = getErrorElements();
432
- if (errorMessageElements.length === 0) return;
433
- const firstErrorElement = errorMessageElements[0];
434
- if (!firstErrorElement) return;
435
- if (document.querySelector(`[name='${fieldName}']`)?.matches(":is(input, select, textarea, [contenteditable='true'])")) return;
436
- const frameID = requestAnimationFrame(() => {
437
- const elementRect = firstErrorElement.getBoundingClientRect();
438
- if (elementRect.top === 0) return;
439
- const topWithOffset = elementRect.top - 100;
440
- window.scrollTo({
441
- behavior: "smooth",
442
- top: window.scrollY + topWithOffset
443
- });
444
- });
445
- return () => {
446
- cancelAnimationFrame(frameID);
447
- };
448
- }, [
449
- disableScrollToErrorField,
450
- fieldName,
451
- errors,
452
- getErrorElements
453
- ]);
454
- const fieldErrorMessage = getFieldErrorMessage({
455
- errors,
456
- fieldName,
457
- type
458
- });
459
- if (!fieldErrorMessage) return null;
460
- const errorMessageArray = toArray(fieldErrorMessage);
461
- if (errorMessageArray.length === 0) return null;
462
- const getRenderProps = (options) => {
463
- const { index } = options;
464
- return {
465
- className: cnMerge(className, classNames?.errorMessage),
466
- "data-index": index,
467
- "data-part": "error-message",
468
- "data-scope": "form",
469
- "data-slot": "form-error-message",
470
- id: formMessageId
471
- };
472
- };
473
- const getRenderState = (options) => {
474
- const { errorMessage, index } = options;
475
- return {
476
- errorMessage,
477
- errorMessageArray,
478
- index
479
- };
480
- };
481
- const selectedChildren = typeof children === "function" ? children : renderItem;
482
- return /* @__PURE__ */ jsx(ForWithWrapper, {
483
- ref: containerRef,
484
- className: cnMerge("flex flex-col", classNames?.container),
485
- "data-part": "error-message-container",
486
- "data-scope": "form",
487
- "data-slot": "form-error-message-container",
488
- each: errorMessageArray,
489
- renderItem: (errorMessage, index) => {
490
- return selectedChildren({
491
- props: getRenderProps({ index }),
492
- state: getRenderState({
493
- errorMessage,
494
- index
495
- })
496
- });
497
- }
498
- });
499
- };
500
- function FormErrorMessage(props) {
501
- const fieldContextValues = useLaxFormFieldContext();
502
- const { className, errorField = fieldContextValues?.name, type = "regular" } = props;
503
- const { control } = useFormMethodsContext();
504
- return /* @__PURE__ */ jsx(FormErrorMessagePrimitive, {
505
- control,
506
- fieldName: errorField,
507
- type,
508
- renderItem: ({ props: renderProps, state }) => /* @__PURE__ */ jsx("li", {
509
- ...renderProps,
510
- className: cnMerge("text-[13px] text-zu-destructive", "data-[index=0]:mt-1", renderProps.className, className),
511
- children: state.errorMessage
512
- }, state.errorMessage)
513
- });
514
- }
515
- function FormSubmit(props) {
516
- const { as: Element = "button", asChild, children, type = "submit",...restOfProps } = props;
517
- const Component$1 = asChild ? SlotRoot : Element;
518
- return /* @__PURE__ */ jsx(Component$1, {
519
- "data-part": "submit",
520
- "data-scope": "form",
521
- "data-slot": "form-submit",
522
- type,
523
- ...restOfProps,
524
- children
525
- });
526
- }
527
- function FormSubscribeToFieldValue(props) {
528
- const fieldContextValues = useLaxFormFieldContext();
529
- const { children, name = fieldContextValues?.name, render } = props;
530
- const { control } = useFormMethodsContext();
531
- const formValue = useWatch({
532
- control,
533
- name
534
- });
535
- return (typeof children === "function" ? children : render)({ value: formValue });
536
- }
537
- function FormSubscribeToFormState(props) {
538
- const fieldContextValues = useLaxFormFieldContext();
539
- const { children, control, name = fieldContextValues?.name, render } = props;
540
- const formState = useFormState({
541
- control,
542
- name
543
- });
544
- return (typeof children === "function" ? children : render)(formState);
545
- }
546
-
547
- //#endregion
548
- //#region src/components/ui/form/form-parts.ts
549
- var form_parts_exports = __export({
550
- ControlledField: () => FormFieldControlledField,
551
- Description: () => FormDescription,
552
- ErrorMessage: () => FormErrorMessage,
553
- ErrorMessagePrimitive: () => FormErrorMessagePrimitive,
554
- Field: () => FormField,
555
- FieldContext: () => FormFieldContext,
556
- FieldController: () => FormFieldController,
557
- Input: () => FormInput,
558
- InputGroup: () => FormInputGroup,
559
- InputLeftItem: () => FormInputLeftItem,
560
- InputPrimitive: () => FormInputPrimitive,
561
- InputRightItem: () => FormInputRightItem,
562
- Label: () => FormLabel,
563
- Root: () => FormRoot,
564
- Select: () => FormSelect,
565
- Submit: () => FormSubmit,
566
- SubscribeToFieldValue: () => FormSubscribeToFieldValue,
567
- SubscribeToFormState: () => FormSubscribeToFormState,
568
- TextArea: () => FormTextArea,
569
- TextAreaPrimitive: () => FormTextAreaPrimitive
570
- });
571
-
572
- //#endregion
573
- export { FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormField, FormFieldContext, FormFieldControlledField, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, form_parts_exports, useFormRootContext, useStrictFormFieldContext };
574
- //# sourceMappingURL=form-DyGy9LnA.js.map