@ultraviolet/form 6.0.0-beta.9 → 6.0.1

package/dist/components/RadioGroupField/index.cjs

@@ -1,45 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const reactHookForm = require("react-hook-form");
-const index = require("../../providers/ErrorContext/index.cjs");
-const RadioGroupField = ({
-  control,
-  name,
-  onChange,
-  required,
-  children,
-  error: customError,
-  shouldUnregister = false,
-  validate,
-  legend = "",
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      required,
-      validate
-    },
-    shouldUnregister
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.RadioGroup, { ...props, error: getError({
-    label: legend
-  }, error) ?? customError, legend, name: field.name, onChange: (event) => {
-    field.onChange(event);
-    onChange?.(event.target.value);
-  }, required, value: field.value, children });
-};
-RadioGroupField.Radio = ui.RadioGroup.Radio;
-exports.RadioGroupField = RadioGroupField;

package/dist/components/SelectInputField/index.cjs

@@ -1,50 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const react = require("react");
-const reactHookForm = require("react-hook-form");
-const index = require("../../providers/ErrorContext/index.cjs");
-const SelectInputField = ({
-  label = "",
-  onBlur,
-  required,
-  name,
-  "aria-label": ariaLabel,
-  shouldUnregister = false,
-  control,
-  validate,
-  onChange,
-  multiselect,
-  ...props
-}) => {
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      required,
-      validate
-    },
-    shouldUnregister
-  });
-  const {
-    getError
-  } = index.useErrors();
-  const handleChange = react.useCallback((value) => {
-    onChange?.(value);
-    field.onChange(value);
-  }, [onChange, field]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectInput, { "aria-label": ariaLabel, error: getError({
-    label: label ?? ariaLabel ?? name
-  }, error), label, multiselect, name: field.name, onBlur: (event) => {
-    field.onBlur();
-    onBlur?.(event);
-  }, onChange: handleChange, required, value: field.value, ...props });
-};
-exports.SelectInputField = SelectInputField;

package/dist/components/SelectableCardField/index.cjs

@@ -1,66 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const reactHookForm = require("react-hook-form");
-const SelectableCardField = ({
-  name,
-  control,
-  value,
-  onChange,
-  type,
-  onFocus,
-  onBlur,
-  required,
-  label,
-  shouldUnregister = false,
-  validate,
-  productIcon,
-  illustration,
-  "aria-label": ariaLabel,
-  ...props
-}) => {
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      required,
-      validate
-    },
-    shouldUnregister
-  });
-  const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCard, { ...props, ...productIcon ? {
-    productIcon
-  } : {
-    illustration
-  }, ...label ? {
-    label
-  } : {
-    "aria-label": ariaLabel
-  }, checked: isChecked, isError: !!error, name: field.name, onBlur: (event) => {
-    field.onBlur();
-    onBlur?.(event);
-  }, onChange: (event) => {
-    if (type === "checkbox") {
-      const fieldValue = field.value ?? [];
-      if (fieldValue?.includes(event.currentTarget.value)) {
-        field.onChange(fieldValue?.filter((currentValue) => currentValue !== event.currentTarget.value));
-      } else {
-        field.onChange([...fieldValue, event.currentTarget.value]);
-      }
-    } else {
-      field.onChange(event);
-    }
-    onChange?.(event.currentTarget.value);
-  }, onFocus: (event) => {
-    onFocus?.(event);
-  }, type, value: value ?? "" });
-};
-exports.SelectableCardField = SelectableCardField;

package/dist/components/SelectableCardGroupField/index.cjs

@@ -1,55 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const reactHookForm = require("react-hook-form");
-const index = require("../../providers/ErrorContext/index.cjs");
-const SelectableCardGroupField = ({
-  legend = "",
-  control,
-  name,
-  onChange,
-  required = false,
-  error: customError,
-  columns = 1,
-  type = "radio",
-  shouldUnregister = false,
-  validate,
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      required,
-      validate
-    },
-    shouldUnregister
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardGroup, { ...props, columns, error: getError({
-    label: legend
-  }, error) ?? customError, legend, name, onChange: (event) => {
-    if (type === "checkbox") {
-      const fieldValue = field.value ?? [];
-      if (fieldValue?.includes(event.currentTarget.value)) {
-        field.onChange(fieldValue?.filter((currentValue) => currentValue !== event.currentTarget.value));
-      } else {
-        field.onChange([...fieldValue, event.currentTarget.value]);
-      }
-    } else {
-      field.onChange(event);
-    }
-    onChange?.(event.currentTarget.value);
-  }, required, type, value: field.value });
-};
-SelectableCardGroupField.Card = ui.SelectableCardGroup.Card;
-exports.SelectableCardGroupField = SelectableCardGroupField;

package/dist/components/SelectableCardOptionGroupField/index.cjs

@@ -1,59 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const reactHookForm = require("react-hook-form");
-const index = require("../../providers/ErrorContext/index.cjs");
-const SelectableCardOptionGroupField = ({
-  legend = "",
-  control,
-  name,
-  optionName,
-  onChange,
-  onChangeOption,
-  required = false,
-  children,
-  error: customError,
-  shouldUnregister = false,
-  validate,
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      required,
-      validate
-    },
-    shouldUnregister
-  });
-  const {
-    field: optionField
-  } = reactHookForm.useController({
-    name: optionName ?? `${name}Option`,
-    rules: {
-      required
-    },
-    shouldUnregister
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardOptionGroup, { error: getError({
-    label: legend
-  }, error) ?? customError, legend, name, onChange: (event) => {
-    field.onChange(event);
-    onChange?.(event);
-  }, onChangeOption: (value) => {
-    optionField.onChange(value);
-    onChangeOption?.(value);
-  }, optionValue: String(optionField.value), required, value: field.value, ...props, children });
-};
-SelectableCardOptionGroupField.Option = ui.SelectableCardOptionGroup.Option;
-exports.SelectableCardOptionGroupField = SelectableCardOptionGroupField;

package/dist/components/SliderField/index.cjs

@@ -1,76 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const react = require("react");
-const reactHookForm = require("react-hook-form");
-const index = require("../../providers/ErrorContext/index.cjs");
-const SliderField = ({
-  name,
-  control,
-  shouldUnregister,
-  max,
-  min,
-  required,
-  validate,
-  onBlur,
-  onChange,
-  label,
-  value,
-  defaultValue,
-  options,
-  "aria-label": ariaLabel,
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      max,
-      min,
-      required,
-      validate
-    },
-    shouldUnregister
-  });
-  const finalValue = react.useMemo(() => {
-    if (options && field.value) {
-      if (!Array.isArray(field.value)) {
-        const processedValue = options.map((option) => option.value).indexOf(field.value);
-        return processedValue;
-      }
-      if (Array.isArray(field.value)) {
-        const processedValue = field.value.map((val) => options.map((option) => option.value).indexOf(val));
-        return processedValue;
-      }
-    }
-    return field.value;
-  }, [field.value, options]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Slider, { "aria-label": ariaLabel, error: getError({
-    label: label ?? ariaLabel ?? name,
-    max,
-    min
-  }, error), label, max, min, name: field.name, onBlur: (event) => {
-    field.onBlur();
-    onBlur?.(event);
-  }, onChange: (newValue) => {
-    if (options) {
-      const processedValue = !Array.isArray(newValue) ? options[newValue]?.value : newValue.map((val) => val ? options[val]?.value : options[0]?.value);
-      field.onChange(processedValue);
-      onChange?.(processedValue);
-    } else {
-      field.onChange(newValue);
-      onChange?.(newValue);
-    }
-  }, options, required, value: finalValue, ...props });
-};
-exports.SliderField = SliderField;

package/dist/components/Submit/index.cjs

@@ -1,25 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const reactHookForm = require("react-hook-form");
-const Submit = ({
-  children,
-  className,
-  disabled = false,
-  size,
-  variant = "filled",
-  sentiment = "primary",
-  tooltip,
-  fullWidth,
-  onClick
-}) => {
-  const {
-    isSubmitting,
-    isValid
-  } = reactHookForm.useFormState();
-  const isDisabled = disabled || isSubmitting || !isValid;
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { className, disabled: isDisabled, fullWidth, isLoading: isSubmitting, onClick, sentiment, size, tooltip, type: "submit", variant, children });
-};
-exports.Submit = Submit;

package/dist/components/SubmitErrorAlert/index.cjs

@@ -1,15 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const reactHookForm = require("react-hook-form");
-const SubmitErrorAlert = ({
-  className
-}) => {
-  const {
-    errors
-  } = reactHookForm.useFormState();
-  return errors?.root?.["submit"]?.message ? /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { className, sentiment: "danger", children: errors.root["submit"].message }) : null;
-};
-exports.SubmitErrorAlert = SubmitErrorAlert;

package/dist/components/SwitchButtonField/index.cjs

@@ -1,35 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const reactHookForm = require("react-hook-form");
-const SwitchButtonField = ({
-  name,
-  size,
-  control,
-  shouldUnregister,
-  onBlur,
-  onChange,
-  onFocus,
-  tooltip,
-  className,
-  ...props
-}) => {
-  const {
-    field
-  } = reactHookForm.useController({
-    control,
-    name,
-    shouldUnregister
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SwitchButton, { ...props, className, name, onBlur: (event) => {
-    field.onBlur();
-    onBlur?.(event);
-  }, onChange: (event) => {
-    field.onChange(event);
-    onChange?.(event.target);
-  }, onFocus, size, tooltip, value: field.value });
-};
-SwitchButtonField.Option = ui.SwitchButton.Option;
-exports.SwitchButtonField = SwitchButtonField;

package/dist/components/TagInputField/index.cjs

@@ -1,51 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const reactHookForm = require("react-hook-form");
-const validateRegex = require("../../utils/validateRegex.cjs");
-const index = require("../../providers/ErrorContext/index.cjs");
-const TagInputField = ({
-  regex: regexes,
-  control,
-  name,
-  onChange,
-  required,
-  shouldUnregister = false,
-  label,
-  validate,
-  "aria-label": ariaLabel,
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      required,
-      shouldUnregister,
-      validate: {
-        ...regexes ? {
-          pattern: (value) => value.every((val) => validateRegex.validateRegex(val, regexes))
-        } : {},
-        ...validate
-      }
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.TagInput, { ...props, "aria-label": ariaLabel, error: getError({
-    label: label ?? ariaLabel ?? name,
-    regex: regexes
-  }, error), label, name: field.name, onChange: (newTags) => {
-    field.onChange(newTags);
-    onChange?.(newTags);
-  }, value: field.value });
-};
-exports.TagInputField = TagInputField;

package/dist/components/TextAreaField/index.cjs

@@ -1,84 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const reactHookForm = require("react-hook-form");
-const validateRegex = require("../../utils/validateRegex.cjs");
-const index = require("../../providers/ErrorContext/index.cjs");
-const TextAreaField = ({
-  control,
-  label,
-  onChange,
-  minLength,
-  maxLength,
-  name,
-  onBlur,
-  onKeyDown,
-  required,
-  regex: regexes,
-  submitOnEnter,
-  validate,
-  "aria-label": ariaLabel,
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      maxLength,
-      minLength,
-      required,
-      validate: {
-        ...regexes ? {
-          pattern: (value) => validateRegex.validateRegex(value, regexes)
-        } : {},
-        ...validate
-      }
-    }
-  });
-  const onKeyDownHandler = (event) => {
-    if (submitOnEnter && event.key === "Enter" && !event.shiftKey) {
-      event.preventDefault();
-      event.stopPropagation();
-      const {
-        form
-      } = event.currentTarget;
-      if (form) {
-        const submitEvent = new Event("submit", {
-          bubbles: true,
-          cancelable: true
-        });
-        form.dispatchEvent(submitEvent);
-      }
-    } else {
-      onKeyDown?.(event);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.TextArea, { ...props, error: getError({
-    label: label ?? ariaLabel ?? name,
-    maxLength,
-    minLength,
-    regex: regexes,
-    value: field.value
-  }, error), maxLength, minLength, name, onBlur: (event) => {
-    onBlur?.(event);
-    field.onBlur();
-  }, onChange: (event) => {
-    field.onChange(event);
-    onChange?.(event);
-  }, onKeyDown: onKeyDownHandler, required, value: field.value, ...label ? {
-    label
-  } : {
-    "aria-label": ariaLabel
-  } });
-};
-exports.TextAreaField = TextAreaField;

package/dist/components/TextInputField/index.cjs

@@ -1,62 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const reactHookForm = require("react-hook-form");
-const validateRegex = require("../../utils/validateRegex.cjs");
-const index = require("../../providers/ErrorContext/index.cjs");
-const TextInputField = ({
-  regex: regexes,
-  onChange,
-  label,
-  required = false,
-  name,
-  onBlur,
-  minLength,
-  maxLength,
-  "aria-label": ariaLabel,
-  shouldUnregister,
-  validate,
-  control,
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      maxLength,
-      minLength,
-      required,
-      validate: {
-        ...regexes ? {
-          pattern: (value) => validateRegex.validateRegex(value, regexes)
-        } : {},
-        ...validate
-      }
-    },
-    shouldUnregister
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.TextInput, { ...props, "aria-label": ariaLabel, error: getError({
-    label: label ?? ariaLabel ?? name,
-    maxLength,
-    minLength,
-    regex: regexes,
-    value: field.value
-  }, error), label, maxLength, minLength, name, onBlur: (event) => {
-    onBlur?.(event);
-    field.onBlur();
-  }, onChange: (event) => {
-    field.onChange(event);
-    onChange?.(event.target.value);
-  }, required, value: field.value === void 0 ? "" : field.value });
-};
-exports.TextInputField = TextInputField;

package/dist/components/TimeInputField/index.cjs

@@ -1,46 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ui = require("@ultraviolet/ui");
-const reactHookForm = require("react-hook-form");
-const index = require("../../providers/ErrorContext/index.cjs");
-const TimeInputField = ({
-  onChange,
-  label,
-  required = false,
-  name,
-  onBlur,
-  "aria-label": ariaLabel,
-  shouldUnregister,
-  control,
-  ...props
-}) => {
-  const {
-    getError
-  } = index.useErrors();
-  const {
-    field,
-    fieldState: {
-      error
-    }
-  } = reactHookForm.useController({
-    control,
-    name,
-    rules: {
-      required
-    },
-    shouldUnregister
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.TimeInput, { ...props, error: getError({
-    label: label ?? ariaLabel ?? name,
-    value: field.value
-  }, error), label, onBlur: (event) => {
-    onBlur?.(event);
-    field.onBlur();
-  }, onChange: (value) => {
-    field.onChange(value);
-    onChange?.(value);
-  }, required, value: field.value });
-};
-exports.TimeInputField = TimeInputField;