@rachelallyson/hero-hook-form 1.1.0 → 1.2.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 (5) hide show
  1. package/dist/index.d.ts +1 -1
  2. package/dist/index.js +70 -15
  3. package/dist/react/index.d.ts +1 -1
  4. package/dist/react/index.js +70 -15
  5. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -117,7 +117,7 @@ interface FormConfig<TFieldValues extends FieldValues> {
117
117
  className?: string;
118
118
  defaultValues?: Partial<TFieldValues>;
119
119
  }
120
- type ZodFormFieldConfig<TFieldValues extends FieldValues> = Omit<StringFieldConfig<TFieldValues>, "rules"> | Omit<BooleanFieldConfig<TFieldValues>, "rules"> | Omit<RadioFieldConfig<TFieldValues>, "rules"> | Omit<SliderFieldConfig<TFieldValues>, "rules"> | Omit<DateFieldConfig<TFieldValues>, "rules"> | Omit<FileFieldConfig<TFieldValues>, "rules"> | Omit<FontPickerFieldConfig<TFieldValues>, "rules">;
120
+ type ZodFormFieldConfig<TFieldValues extends FieldValues> = Omit<StringFieldConfig<TFieldValues>, "rules"> | Omit<BooleanFieldConfig<TFieldValues>, "rules"> | Omit<RadioFieldConfig<TFieldValues>, "rules"> | Omit<SliderFieldConfig<TFieldValues>, "rules"> | Omit<DateFieldConfig<TFieldValues>, "rules"> | Omit<FileFieldConfig<TFieldValues>, "rules"> | Omit<FontPickerFieldConfig<TFieldValues>, "rules"> | Omit<CustomFieldConfig<TFieldValues>, "rules">;
121
121
  interface ZodFormConfig<TFieldValues extends FieldValues> extends UseFormProps<TFieldValues> {
122
122
  schema: zod.ZodSchema<TFieldValues>;
123
123
  fields: ZodFormFieldConfig<TFieldValues>[];
package/dist/index.js CHANGED
@@ -1,10 +1,3 @@
1
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
2
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
3
- }) : x)(function(x) {
4
- if (typeof require !== "undefined") return require.apply(this, arguments);
5
- throw Error('Dynamic require of "' + x + '" is not supported');
6
- });
7
-
8
1
  // src/components/Form.tsx
9
2
  import React13 from "react";
10
3
  import { Button as Button2 } from "@heroui/react";
@@ -355,12 +348,9 @@ function FileField(props) {
355
348
  import React5 from "react";
356
349
  import { Controller as Controller4 } from "react-hook-form";
357
350
  var FontPickerComponent = null;
358
- try {
359
- const fontPickerModule = __require("@rachelallyson/heroui-font-picker");
360
- FontPickerComponent = fontPickerModule.FontPicker;
361
- } catch (e) {
362
- console.debug("Font picker package not available - FontPickerField will show fallback UI");
363
- }
351
+ var fontPickerLoaded = false;
352
+ var fontPickerLoading = false;
353
+ var loadingCallbacks = [];
364
354
  function FontPickerField(props) {
365
355
  const {
366
356
  className,
@@ -372,7 +362,72 @@ function FontPickerField(props) {
372
362
  name,
373
363
  rules
374
364
  } = props;
375
- if (!FontPickerComponent) {
365
+ const [fontPickerState, setFontPickerState] = React5.useState({
366
+ component: FontPickerComponent,
367
+ loading: false,
368
+ error: null
369
+ });
370
+ React5.useEffect(() => {
371
+ if (fontPickerLoaded && FontPickerComponent) {
372
+ setFontPickerState({
373
+ component: FontPickerComponent,
374
+ loading: false,
375
+ error: null
376
+ });
377
+ return;
378
+ }
379
+ if (fontPickerLoading) {
380
+ setFontPickerState((prev) => ({ ...prev, loading: true }));
381
+ const callback = () => {
382
+ if (fontPickerLoaded && FontPickerComponent) {
383
+ setFontPickerState({
384
+ component: FontPickerComponent,
385
+ loading: false,
386
+ error: null
387
+ });
388
+ } else {
389
+ setFontPickerState({
390
+ component: null,
391
+ loading: false,
392
+ error: "Font picker package not found"
393
+ });
394
+ }
395
+ };
396
+ loadingCallbacks.push(callback);
397
+ return;
398
+ }
399
+ const loadFontPicker = async () => {
400
+ fontPickerLoading = true;
401
+ setFontPickerState((prev) => ({ ...prev, loading: true }));
402
+ try {
403
+ const fontPickerModule = await import("@rachelallyson/heroui-font-picker");
404
+ FontPickerComponent = fontPickerModule.FontPicker || fontPickerModule.default;
405
+ fontPickerLoaded = true;
406
+ fontPickerLoading = false;
407
+ setFontPickerState({
408
+ component: FontPickerComponent,
409
+ loading: false,
410
+ error: null
411
+ });
412
+ loadingCallbacks.forEach((callback) => callback());
413
+ loadingCallbacks.length = 0;
414
+ } catch (error) {
415
+ fontPickerLoading = false;
416
+ setFontPickerState({
417
+ component: null,
418
+ loading: false,
419
+ error: "Font picker package not found"
420
+ });
421
+ loadingCallbacks.forEach((callback) => callback());
422
+ loadingCallbacks.length = 0;
423
+ }
424
+ };
425
+ void loadFontPicker();
426
+ }, []);
427
+ if (fontPickerState.loading) {
428
+ return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React5.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React5.createElement("div", { className: "p-4 border border-default-200 bg-default-50 rounded-medium" }, /* @__PURE__ */ React5.createElement("p", { className: "text-default-600 text-sm" }, "Loading font picker..."))));
429
+ }
430
+ if (!fontPickerState.component) {
376
431
  return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React5.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React5.createElement("div", { className: "p-4 border border-warning-200 bg-warning-50 rounded-medium" }, /* @__PURE__ */ React5.createElement("p", { className: "text-warning-800 text-sm" }, "Font picker requires the @rachelallyson/heroui-font-picker package. Please install it as a peer dependency for advanced font selection features."))));
377
432
  }
378
433
  return /* @__PURE__ */ React5.createElement(
@@ -381,7 +436,7 @@ function FontPickerField(props) {
381
436
  control,
382
437
  name,
383
438
  render: ({ field, fieldState }) => /* @__PURE__ */ React5.createElement(
384
- FontPickerComponent,
439
+ fontPickerState.component,
385
440
  {
386
441
  label,
387
442
  description,
package/dist/react/index.d.ts CHANGED
@@ -109,7 +109,7 @@ interface FormConfig<TFieldValues extends FieldValues> {
109
109
  className?: string;
110
110
  defaultValues?: Partial<TFieldValues>;
111
111
  }
112
- type ZodFormFieldConfig<TFieldValues extends FieldValues> = Omit<StringFieldConfig<TFieldValues>, "rules"> | Omit<BooleanFieldConfig<TFieldValues>, "rules"> | Omit<RadioFieldConfig<TFieldValues>, "rules"> | Omit<SliderFieldConfig<TFieldValues>, "rules"> | Omit<DateFieldConfig<TFieldValues>, "rules"> | Omit<FileFieldConfig<TFieldValues>, "rules"> | Omit<FontPickerFieldConfig<TFieldValues>, "rules">;
112
+ type ZodFormFieldConfig<TFieldValues extends FieldValues> = Omit<StringFieldConfig<TFieldValues>, "rules"> | Omit<BooleanFieldConfig<TFieldValues>, "rules"> | Omit<RadioFieldConfig<TFieldValues>, "rules"> | Omit<SliderFieldConfig<TFieldValues>, "rules"> | Omit<DateFieldConfig<TFieldValues>, "rules"> | Omit<FileFieldConfig<TFieldValues>, "rules"> | Omit<FontPickerFieldConfig<TFieldValues>, "rules"> | Omit<CustomFieldConfig<TFieldValues>, "rules">;
113
113
  interface ZodFormConfig<TFieldValues extends FieldValues> extends UseFormProps<TFieldValues> {
114
114
  schema: zod.ZodSchema<TFieldValues>;
115
115
  fields: ZodFormFieldConfig<TFieldValues>[];
package/dist/react/index.js CHANGED
@@ -1,10 +1,3 @@
1
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
2
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
3
- }) : x)(function(x) {
4
- if (typeof require !== "undefined") return require.apply(this, arguments);
5
- throw Error('Dynamic require of "' + x + '" is not supported');
6
- });
7
-
8
1
  // src/components/Form.tsx
9
2
  import React13 from "react";
10
3
  import { Button as Button2 } from "@heroui/react";
@@ -360,12 +353,9 @@ function FileField(props) {
360
353
  import React5 from "react";
361
354
  import { Controller as Controller4 } from "react-hook-form";
362
355
  var FontPickerComponent = null;
363
- try {
364
- const fontPickerModule = __require("@rachelallyson/heroui-font-picker");
365
- FontPickerComponent = fontPickerModule.FontPicker;
366
- } catch (e) {
367
- console.debug("Font picker package not available - FontPickerField will show fallback UI");
368
- }
356
+ var fontPickerLoaded = false;
357
+ var fontPickerLoading = false;
358
+ var loadingCallbacks = [];
369
359
  function FontPickerField(props) {
370
360
  const {
371
361
  className,
@@ -377,7 +367,72 @@ function FontPickerField(props) {
377
367
  name,
378
368
  rules
379
369
  } = props;
380
- if (!FontPickerComponent) {
370
+ const [fontPickerState, setFontPickerState] = React5.useState({
371
+ component: FontPickerComponent,
372
+ loading: false,
373
+ error: null
374
+ });
375
+ React5.useEffect(() => {
376
+ if (fontPickerLoaded && FontPickerComponent) {
377
+ setFontPickerState({
378
+ component: FontPickerComponent,
379
+ loading: false,
380
+ error: null
381
+ });
382
+ return;
383
+ }
384
+ if (fontPickerLoading) {
385
+ setFontPickerState((prev) => ({ ...prev, loading: true }));
386
+ const callback = () => {
387
+ if (fontPickerLoaded && FontPickerComponent) {
388
+ setFontPickerState({
389
+ component: FontPickerComponent,
390
+ loading: false,
391
+ error: null
392
+ });
393
+ } else {
394
+ setFontPickerState({
395
+ component: null,
396
+ loading: false,
397
+ error: "Font picker package not found"
398
+ });
399
+ }
400
+ };
401
+ loadingCallbacks.push(callback);
402
+ return;
403
+ }
404
+ const loadFontPicker = async () => {
405
+ fontPickerLoading = true;
406
+ setFontPickerState((prev) => ({ ...prev, loading: true }));
407
+ try {
408
+ const fontPickerModule = await import("@rachelallyson/heroui-font-picker");
409
+ FontPickerComponent = fontPickerModule.FontPicker || fontPickerModule.default;
410
+ fontPickerLoaded = true;
411
+ fontPickerLoading = false;
412
+ setFontPickerState({
413
+ component: FontPickerComponent,
414
+ loading: false,
415
+ error: null
416
+ });
417
+ loadingCallbacks.forEach((callback) => callback());
418
+ loadingCallbacks.length = 0;
419
+ } catch (error) {
420
+ fontPickerLoading = false;
421
+ setFontPickerState({
422
+ component: null,
423
+ loading: false,
424
+ error: "Font picker package not found"
425
+ });
426
+ loadingCallbacks.forEach((callback) => callback());
427
+ loadingCallbacks.length = 0;
428
+ }
429
+ };
430
+ void loadFontPicker();
431
+ }, []);
432
+ if (fontPickerState.loading) {
433
+ return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React5.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React5.createElement("div", { className: "p-4 border border-default-200 bg-default-50 rounded-medium" }, /* @__PURE__ */ React5.createElement("p", { className: "text-default-600 text-sm" }, "Loading font picker..."))));
434
+ }
435
+ if (!fontPickerState.component) {
381
436
  return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React5.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React5.createElement("div", { className: "p-4 border border-warning-200 bg-warning-50 rounded-medium" }, /* @__PURE__ */ React5.createElement("p", { className: "text-warning-800 text-sm" }, "Font picker requires the @rachelallyson/heroui-font-picker package. Please install it as a peer dependency for advanced font selection features."))));
382
437
  }
383
438
  return /* @__PURE__ */ React5.createElement(
@@ -386,7 +441,7 @@ function FontPickerField(props) {
386
441
  control,
387
442
  name,
388
443
  render: ({ field, fieldState }) => /* @__PURE__ */ React5.createElement(
389
- FontPickerComponent,
444
+ fontPickerState.component,
390
445
  {
391
446
  label,
392
447
  description,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rachelallyson/hero-hook-form",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "Typed form helpers that combine React Hook Form and HeroUI components.",
5
5
  "author": "Rachel Higley",
6
6
  "homepage": "https://github.com/rachelallyson/hero-hook-form#readme",