@powerhousedao/design-system 1.18.0 → 1.19.1

package/dist/scalars/components/amount-field/amount-field.js

@@ -0,0 +1,153 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useId as z } from "react";
+import { useAmountField as H } from "./use-amount-field.js";
+import { SelectFieldRaw as v } from "../fragments/select-field/select-field.js";
+import { NumberFieldRaw as J } from "../number-field/number-field.js";
+import { withFieldValidation as K } from "../fragments/with-field-validation/with-field-validation.js";
+import { FormGroup as Q } from "../fragments/form-group/form-group.js";
+import { FormLabel as T } from "../fragments/form-label/form-label.js";
+import { cn as r } from "../../lib/utils.js";
+import { FormDescription as U } from "../fragments/form-description/form-description.js";
+import { FormMessageList as F } from "../fragments/form-message/message-list.js";
+const W = ({
+  label: l,
+  value: y,
+  id: N,
+  precision: C = 0,
+  minValue: k,
+  maxValue: w,
+  trailingZeros: I,
+  onChange: S,
+  onBlur: A,
+  disabled: o,
+  className: B,
+  required: a,
+  errors: n,
+  warnings: d,
+  description: c,
+  defaultValue: R,
+  type: j,
+  allowedCurrencies: L = [],
+  allowedTokens: O = [],
+  numberProps: D,
+  selectProps: t,
+  step: s = 1,
+  currencyPosition: m,
+  tokenIcons: E
+}) => {
+  const G = z(), u = N ?? G, {
+    isShowSelect: g,
+    isPercent: f,
+    options: h,
+    valueSelect: p,
+    valueInput: x,
+    handleOnChangeInput: M,
+    handleOnChangeSelect: b,
+    handleBlur: V
+  } = H({
+    value: y,
+    defaultValue: R,
+    type: j,
+    allowedCurrencies: L,
+    allowedTokens: O,
+    onChange: S,
+    onBlur: A,
+    tokenIcons: E
+  });
+  return /* @__PURE__ */ i(Q, { children: [
+    l && /* @__PURE__ */ e(
+      T,
+      {
+        htmlFor: u,
+        required: a,
+        disabled: o,
+        hasError: !!(n != null && n.length),
+        className: r(o && "text-gray-400 mb-[3px]"),
+        children: l
+      }
+    ),
+    /* @__PURE__ */ i("div", { className: r("relative flex items-center"), children: [
+      /* @__PURE__ */ i("div", { className: r("relative flex items-center"), children: [
+        g && m === "left" && /* @__PURE__ */ e(
+          v,
+          {
+            optionsCheckmark: "Checkmark",
+            value: p,
+            name: "",
+            required: a,
+            options: h,
+            disabled: o,
+            onChange: b,
+            className: r(
+              "border border-gray-300 rounded-l-md rounded-r-none",
+              "border-r-[0.5px] focus:border-r-[1px] focus:ring-1 focus:ring-gray-900",
+              "focus:outline-none",
+              t == null ? void 0 : t.className
+            ),
+            ...t || {}
+          }
+        ),
+        /* @__PURE__ */ e(
+          J,
+          {
+            step: s,
+            required: a,
+            disabled: o,
+            name: "",
+            value: x,
+            id: u,
+            maxValue: w,
+            precision: C,
+            minValue: k,
+            trailingZeros: I,
+            "data-cast": typeof x == "bigint" ? "BigInt" : "Number",
+            onChange: M,
+            className: r(
+              m === "left" && "border border-gray-300 rounded-l-none border-l-[0.5px]",
+              m === "right" && "border border-gray-300 rounded-r-none border-r-[0.5px]",
+              f && "pr-7",
+              B
+            ),
+            onBlur: V,
+            ...D || {}
+          }
+        ),
+        f && s === 0 && /* @__PURE__ */ e(
+          "span",
+          {
+            className: r(
+              "pointer-events-none absolute inset-y-0 right-2 ml-2 flex items-center",
+              o ? "text-gray-400" : "text-gray-900"
+            ),
+            children: "%"
+          }
+        )
+      ] }),
+      g && m === "right" && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        v,
+        {
+          optionsCheckmark: "Checkmark",
+          value: p,
+          name: "",
+          required: a,
+          disabled: o,
+          onChange: b,
+          options: h,
+          className: r(
+            "rounded-l-none rounded-r-md border border-gray-300",
+            "border-l-[0.5px] focus:border-l-[1px] focus:ring-1 focus:ring-gray-900 focus:ring-offset-0",
+            "focus:outline-none"
+          ),
+          ...t || {}
+        }
+      ) })
+    ] }),
+    c && /* @__PURE__ */ e(U, { children: c }),
+    d && /* @__PURE__ */ e(F, { messages: d, type: "warning" }),
+    n && /* @__PURE__ */ e(F, { messages: n, type: "error" })
+  ] });
+}, te = K(W);
+export {
+  te as AmountField
+};
+//# sourceMappingURL=amount-field.js.map

package/dist/scalars/components/amount-field/amount-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"amount-field.js","sources":["../../../../src/scalars/components/amount-field/amount-field.tsx"],"sourcesContent":["import React, { FC, useId } from \"react\";\nimport { NumberFieldProps, NumberFieldRaw } from \"../number-field\";\nimport {\n  FormDescription,\n  FormGroup,\n  FormLabel,\n  FormMessageList,\n  SelectFieldProps,\n  SelectFieldRaw,\n  withFieldValidation,\n} from \"../fragments\";\nimport { useAmountField } from \"./use-amount-field\";\nimport { cn } from \"@/scalars/lib\";\nimport { InputNumberProps } from \"../number-field/types\";\nimport { AmountValue } from \"./types\";\nimport { AmountFieldPropsGeneric } from \"./types\";\nimport { IconName } from \"@/powerhouse\";\n\nexport interface TokenIcons {\n  [key: string]: IconName | (() => React.JSX.Element);\n}\n\nexport type AmountFieldProps = AmountFieldPropsGeneric &\n  Omit<InputNumberProps, \"onChange\" | \"onBlur\"> & {\n    className?: string;\n    name: string;\n    pattern?: RegExp;\n    numberProps?: Omit<NumberFieldProps, \"name\">;\n    selectProps?: Omit<SelectFieldProps, \"name\">;\n    allowedCurrencies?: string[];\n    allowedTokens?: string[];\n    selectName: string;\n    defaultValue?: AmountValue;\n    value?: AmountValue;\n    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n    currencyPosition?: \"left\" | \"right\";\n    tokenIcons?: TokenIcons;\n  };\n\nconst AmountFieldRaw: FC<AmountFieldProps> = ({\n  label,\n  value,\n  id: propId,\n  precision = 0,\n  minValue,\n  maxValue,\n  trailingZeros,\n  onChange,\n  onBlur,\n  disabled,\n  className,\n  required,\n  errors,\n  warnings,\n  description,\n  defaultValue,\n  type,\n  allowedCurrencies = [],\n  allowedTokens = [],\n  numberProps,\n  selectProps,\n  step = 1,\n  currencyPosition,\n  tokenIcons,\n}) => {\n  const generatedId = useId();\n  const id = propId ?? generatedId;\n  const {\n    isShowSelect,\n    isPercent,\n    options,\n    valueSelect,\n    valueInput,\n    handleOnChangeInput,\n    handleOnChangeSelect,\n    handleBlur,\n  } = useAmountField({\n    value,\n    defaultValue,\n    type,\n    allowedCurrencies,\n    allowedTokens,\n    onChange,\n    onBlur,\n    tokenIcons,\n  });\n\n  return (\n    <FormGroup>\n      {label && (\n        <FormLabel\n          htmlFor={id}\n          required={required}\n          disabled={disabled}\n          hasError={!!errors?.length}\n          className={cn(disabled && \"text-gray-400 mb-[3px]\")}\n        >\n          {label}\n        </FormLabel>\n      )}\n      <div className={cn(\"relative flex items-center\")}>\n        <div className={cn(\"relative flex items-center\")}>\n          {isShowSelect && currencyPosition === \"left\" && (\n            <SelectFieldRaw\n              optionsCheckmark=\"Checkmark\"\n              value={valueSelect}\n              name=\"\"\n              required={required}\n              options={options}\n              disabled={disabled}\n              onChange={handleOnChangeSelect}\n              className={cn(\n                \"border border-gray-300 rounded-l-md rounded-r-none\",\n                \"border-r-[0.5px] focus:border-r-[1px] focus:ring-1 focus:ring-gray-900\",\n                \"focus:outline-none\",\n                selectProps?.className,\n              )}\n              {...(selectProps || {})}\n            />\n          )}\n          <NumberFieldRaw\n            step={step}\n            required={required}\n            disabled={disabled}\n            name=\"\"\n            value={valueInput}\n            id={id}\n            maxValue={maxValue}\n            precision={precision}\n            minValue={minValue}\n            trailingZeros={trailingZeros}\n            data-cast={typeof valueInput === \"bigint\" ? \"BigInt\" : \"Number\"}\n            onChange={handleOnChangeInput}\n            className={cn(\n              currencyPosition === \"left\" &&\n                \"border border-gray-300 rounded-l-none border-l-[0.5px]\",\n              currencyPosition === \"right\" &&\n                \"border border-gray-300 rounded-r-none border-r-[0.5px]\",\n              isPercent && \"pr-7\",\n              className,\n            )}\n            onBlur={handleBlur}\n            {...(numberProps || {})}\n          />\n          {isPercent && step === 0 && (\n            <span\n              className={cn(\n                \"pointer-events-none absolute inset-y-0 right-2 ml-2 flex items-center\",\n                disabled ? \"text-gray-400\" : \"text-gray-900\",\n              )}\n            >\n              %\n            </span>\n          )}\n        </div>\n        {isShowSelect && currencyPosition === \"right\" && (\n          <div>\n            <SelectFieldRaw\n              optionsCheckmark=\"Checkmark\"\n              value={valueSelect}\n              name=\"\"\n              required={required}\n              disabled={disabled}\n              onChange={handleOnChangeSelect}\n              options={options}\n              className={cn(\n                \"rounded-l-none rounded-r-md border border-gray-300\",\n                \"border-l-[0.5px] focus:border-l-[1px] focus:ring-1 focus:ring-gray-900 focus:ring-offset-0\",\n                \"focus:outline-none\",\n              )}\n              {...(selectProps || {})}\n            />\n          </div>\n        )}\n      </div>\n      {description && <FormDescription>{description}</FormDescription>}\n      {warnings && <FormMessageList messages={warnings} type=\"warning\" />}\n      {errors && <FormMessageList messages={errors} type=\"error\" />}\n    </FormGroup>\n  );\n};\n\nexport const AmountField =\n  withFieldValidation<AmountFieldProps>(AmountFieldRaw);\n"],"names":["AmountFieldRaw","label","value","propId","precision","minValue","maxValue","trailingZeros","onChange","onBlur","disabled","className","required","errors","warnings","description","defaultValue","type","allowedCurrencies","allowedTokens","numberProps","selectProps","step","currencyPosition","tokenIcons","generatedId","useId","id","isShowSelect","isPercent","options","valueSelect","valueInput","handleOnChangeInput","handleOnChangeSelect","handleBlur","useAmountField","FormGroup","jsx","FormLabel","cn","jsxs","SelectFieldRaw","NumberFieldRaw","FormDescription","FormMessageList","AmountField","withFieldValidation"],"mappings":"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"}

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

@@ -0,0 +1,79 @@
+import { getCountryCurrencies as j, getTokens as k } from "./utils.js";
+const T = ({
+  value: c,
+  defaultValue: s = 0,
+  type: e,
+  allowedCurrencies: i = [],
+  allowedTokens: l = [],
+  onChange: r,
+  onBlur: u,
+  tokenIcons: m
+}) => {
+  const a = c ?? s, b = e === "Amount" || e === "AmountPercentage" ? a : a.amount, f = e === "AmountPercentage", A = e === "AmountCurrency" || e === "AmountToken", v = j(i), d = k(l, m), g = e === "AmountCurrency" ? v : d, w = e === "AmountCurrency" ? a.currency : a.token;
+  return {
+    isPercent: f,
+    isShowSelect: A,
+    options: g,
+    valueInput: b,
+    valueSelect: w,
+    handleOnChangeInput: (t) => {
+      let n = {};
+      e === "AmountCurrency" && typeof c == "object" && (n = {
+        ...c,
+        amount: Number(t.target.value)
+      }), e === "AmountToken" && typeof c == "object" && (n = {
+        ...c,
+        amount: BigInt(t.target.value)
+      }), (e === "Amount" || e === "AmountPercentage") && (n = Number(t.target.value));
+      const o = new Event("change", {
+        bubbles: !0,
+        cancelable: !0
+      });
+      Object.defineProperty(o, "target", {
+        value: { value: n },
+        writable: !1
+      }), r == null || r(o);
+    },
+    handleOnChangeSelect: (t) => {
+      let n = {};
+      e === "AmountCurrency" && typeof c == "object" && (n = {
+        ...c,
+        currency: typeof t == "string" ? t : void 0
+      }), e === "AmountToken" && typeof c == "object" && (n = {
+        ...c,
+        token: typeof t == "string" ? t : void 0
+      });
+      const o = new Event("change", {
+        bubbles: !0,
+        cancelable: !0
+      });
+      Object.defineProperty(o, "target", {
+        value: { value: n },
+        writable: !1
+      }), r == null || r(o);
+    },
+    handleBlur: (t) => {
+      if ((e === "AmountCurrency" || e === "AmountToken") && typeof c == "object") {
+        const n = {
+          ...c,
+          amount: BigInt(t.target.value)
+        };
+        u == null || u(n);
+      }
+      if (e === "Amount" || e === "AmountPercentage") {
+        const n = Number(t.target.value), o = new Event("change", {
+          bubbles: !0,
+          cancelable: !0
+        });
+        Object.defineProperty(o, "target", {
+          value: { value: n },
+          writable: !1
+        }), r == null || r(o), u == null || u(t);
+      }
+    }
+  };
+};
+export {
+  T as useAmountField
+};
+//# sourceMappingURL=use-amount-field.js.map

package/dist/scalars/components/amount-field/use-amount-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-amount-field.js","sources":["../../../../src/scalars/components/amount-field/use-amount-field.tsx"],"sourcesContent":["import { TokenIcons } from \"./amount-field\";\nimport {\n  AmountCurrency,\n  AmountFieldPropsGeneric,\n  AmountToken,\n  AmountValue,\n} from \"./types\";\nimport { getCountryCurrencies, getTokens } from \"./utils\";\n\ninterface UseAmountFieldProps {\n  value?: AmountValue;\n  defaultValue?: AmountValue;\n  type: AmountFieldPropsGeneric[\"type\"];\n  allowedCurrencies?: string[];\n  allowedTokens?: string[];\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  tokenIcons?: TokenIcons;\n}\n\nexport const useAmountField = ({\n  value,\n  defaultValue = 0,\n  type,\n  allowedCurrencies = [],\n  allowedTokens = [],\n  onChange,\n  onBlur,\n  tokenIcons,\n}: UseAmountFieldProps) => {\n  const currentValue = value ?? defaultValue;\n\n  const valueInput =\n    type === \"Amount\" || type === \"AmountPercentage\"\n      ? (currentValue as number)\n      : (currentValue as AmountCurrency | AmountToken).amount;\n\n  const isPercent = type === \"AmountPercentage\";\n\n  //Allow select only if type is AmountCurrency or AmountToken\n  const isShowSelect = type === \"AmountCurrency\" || type === \"AmountToken\";\n\n  // Filter only if allowedCurrencies is provided\n  const optionsCurrencies = getCountryCurrencies(allowedCurrencies);\n  const optionsTokenIcons = getTokens(allowedTokens, tokenIcons);\n\n  const options =\n    type === \"AmountCurrency\" ? optionsCurrencies : optionsTokenIcons;\n\n  const valueSelect =\n    type === \"AmountCurrency\"\n      ? (currentValue as AmountCurrency).currency\n      : (currentValue as AmountToken).token;\n\n  // Handle the change of the input\n  const handleOnChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n    let newValue: AmountValue = {} as unknown as AmountValue;\n    if (type === \"AmountCurrency\" && typeof value === \"object\") {\n      newValue = {\n        ...value,\n        amount: Number(e.target.value),\n      } as AmountValue;\n    }\n    if (type === \"AmountToken\" && typeof value === \"object\") {\n      newValue = {\n        ...value,\n        amount: BigInt(e.target.value),\n      } as AmountValue;\n    }\n    if (type === \"Amount\" || type === \"AmountPercentage\") {\n      newValue = Number(e.target.value);\n    }\n\n    //Create the event\n    const nativeEvent = new Event(\"change\", {\n      bubbles: true,\n      cancelable: true,\n    });\n    Object.defineProperty(nativeEvent, \"target\", {\n      value: { value: newValue },\n      writable: false,\n    });\n    onChange?.(nativeEvent as unknown as React.ChangeEvent<HTMLInputElement>);\n  };\n\n  // Handle the change of the select\n  const handleOnChangeSelect = (e: string | string[]) => {\n    let newValue: AmountCurrency | AmountToken = {} as\n      | AmountCurrency\n      | AmountToken;\n    if (type === \"AmountCurrency\" && typeof value === \"object\") {\n      newValue = {\n        ...value,\n        currency: typeof e === \"string\" ? e : undefined,\n      } as AmountCurrency;\n    }\n    if (type === \"AmountToken\" && typeof value === \"object\") {\n      newValue = {\n        ...value,\n        token: typeof e === \"string\" ? e : undefined,\n      } as AmountToken;\n    }\n\n    //Create the event\n    const nativeEvent = new Event(\"change\", {\n      bubbles: true,\n      cancelable: true,\n    });\n    Object.defineProperty(nativeEvent, \"target\", {\n      value: { value: newValue },\n      writable: false,\n    });\n    onChange?.(nativeEvent as unknown as React.ChangeEvent<HTMLInputElement>);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    // Handle the blur of the input if type is AmountCurrency or AmountToken should be a bigint\n    if (\n      (type === \"AmountCurrency\" || type === \"AmountToken\") &&\n      typeof value === \"object\"\n    ) {\n      const newValue = {\n        ...value,\n        amount: BigInt(e.target.value),\n      } as AmountValue;\n\n      onBlur?.(newValue as unknown as React.FocusEvent<HTMLInputElement>);\n    }\n    if (type === \"Amount\" || type === \"AmountPercentage\") {\n      const newValue = Number(e.target.value);\n\n      //Create the event\n      const nativeEvent = new Event(\"change\", {\n        bubbles: true,\n        cancelable: true,\n      });\n      Object.defineProperty(nativeEvent, \"target\", {\n        value: { value: newValue },\n        writable: false,\n      });\n      onChange?.(nativeEvent as unknown as React.ChangeEvent<HTMLInputElement>);\n\n      onBlur?.(e);\n    }\n  };\n\n  return {\n    isPercent,\n    isShowSelect,\n    options,\n    valueInput,\n    valueSelect,\n    handleOnChangeInput,\n    handleOnChangeSelect,\n    handleBlur,\n  };\n};\n"],"names":["useAmountField","value","defaultValue","type","allowedCurrencies","allowedTokens","onChange","onBlur","tokenIcons","currentValue","valueInput","isPercent","isShowSelect","optionsCurrencies","getCountryCurrencies","optionsTokenIcons","getTokens","options","valueSelect","e","newValue","nativeEvent"],"mappings":"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"}

package/dist/scalars/components/amount-field/utils.js

@@ -0,0 +1,17 @@
+const u = (t = []) => t.map((r) => ({
+  value: r,
+  label: r
+})), l = (t = []) => u(t), p = (t = [], r) => t.map((e) => {
+  const n = r == null ? void 0 : r[e];
+  return {
+    value: e,
+    label: e,
+    icon: n
+  };
+});
+export {
+  l as getCountryCurrencies,
+  u as getOptions,
+  p as getTokens
+};
+//# sourceMappingURL=utils.js.map

package/dist/scalars/components/amount-field/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/scalars/components/amount-field/utils.ts"],"sourcesContent":["import { TokenIcons } from \"./amount-field\";\n\nexport const getOptions = (items: string[] = []) => {\n  return items.map((item) => ({\n    value: item,\n    label: item,\n  }));\n};\n\nexport const getCountryCurrencies = (allowedCurrencies: string[] = []) => {\n  return getOptions(allowedCurrencies);\n};\n\nexport const getTokens = (\n  allowedTokens: string[] = [],\n  tokenIcons?: TokenIcons,\n) => {\n  const options = allowedTokens.map((token) => {\n    const iconFn = tokenIcons?.[token];\n\n    return {\n      value: token,\n      label: token,\n      icon: iconFn,\n    };\n  });\n\n  return options;\n};\n"],"names":["getOptions","items","item","getCountryCurrencies","allowedCurrencies","getTokens","allowedTokens","tokenIcons","token","iconFn"],"mappings":"AAEO,MAAMA,IAAa,CAACC,IAAkB,OACpCA,EAAM,IAAI,CAACC,OAAU;AAAA,EAC1B,OAAOA;AAAA,EACP,OAAOA;AAAA,EACP,GAGSC,IAAuB,CAACC,IAA8B,OAC1DJ,EAAWI,CAAiB,GAGxBC,IAAY,CACvBC,IAA0B,IAC1BC,MAEgBD,EAAc,IAAI,CAACE,MAAU;AACrC,QAAAC,IAASF,KAAA,gBAAAA,EAAaC;AAErB,SAAA;AAAA,IACL,OAAOA;AAAA,IACP,OAAOA;AAAA,IACP,MAAMC;AAAA,EACR;AAAA,CACD;"}

package/dist/scalars/components/country-code-field/country-code-field.js

@@ -0,0 +1,64 @@
+import { jsx as m } from "react/jsx-runtime";
+import k from "react";
+import s from "world-countries";
+import { CircleFlag as F } from "react-circle-flags";
+import { SelectFieldRaw as b } from "../fragments/select-field/select-field.js";
+import { withFieldValidation as R } from "../fragments/with-field-validation/with-field-validation.js";
+const C = k.forwardRef(
+  ({
+    onChange: l,
+    placeholder: t,
+    allowedCountries: r,
+    excludedCountries: e,
+    includeDependentAreas: o = !1,
+    viewMode: i = "NamesOnly",
+    showFlagIcons: f = !0,
+    enableSearch: p,
+    ...d
+  }, h) => {
+    const n = s.filter(
+      (a) => (o ? !0 : a.independent) && a.cca2 !== "AQ"
+      // exclude Antarctica
+    ).map((a) => ({
+      value: a.cca2,
+      label: i === "CodesOnly" ? a.cca2 : i === "NamesAndCodes" ? `${a.name.common} (${a.cca2})` : a.name.common,
+      icon: f ? () => /* @__PURE__ */ m(
+        F,
+        {
+          className: "size-4",
+          countryCode: a.cca2.toLowerCase(),
+          height: 16
+        }
+      ) : void 0
+    })).sort((a, c) => a.label > c.label ? 1 : a.label < c.label ? -1 : 0), v = r || e ? n.filter(
+      (a) => (!r || r.includes(a.value)) && !(e != null && e.includes(a.value))
+    ) : n;
+    return /* @__PURE__ */ m(
+      b,
+      {
+        ref: h,
+        options: v,
+        optionsCheckmark: "Checkmark",
+        optionsCheckmarkPosition: "Right",
+        searchable: p,
+        onChange: l,
+        placeholder: t,
+        ...d
+      }
+    );
+  }
+), N = R(
+  C,
+  {
+    validations: {
+      _validOption: ({ allowedCountries: l, excludedCountries: t, includeDependentAreas: r }) => (e) => e === "" || e === void 0 ? !0 : !s.filter(
+        (i) => (r ? !0 : i.independent) && i.cca2 !== "AQ"
+      ).map((i) => i.cca2).includes(e) || l && !l.includes(e) || t != null && t.includes(e) ? "Please select a valid country" : !0
+    }
+  }
+);
+N.displayName = "CountryCodeField";
+export {
+  N as CountryCodeField
+};
+//# sourceMappingURL=country-code-field.js.map

package/dist/scalars/components/country-code-field/country-code-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-code-field.js","sources":["../../../../src/scalars/components/country-code-field/country-code-field.tsx"],"sourcesContent":["import React from \"react\";\nimport { SelectFieldRaw } from \"@/scalars/components/fragments/select-field\";\nimport { withFieldValidation } from \"@/scalars/components/fragments/with-field-validation\";\nimport countries from \"world-countries\";\nimport { CircleFlag } from \"react-circle-flags\";\nimport { FieldCommonProps, ErrorHandling } from \"@/scalars/components/types\";\nimport { CountryCodeProps } from \"./types\";\n\nexport type CountryCodeFieldProps = FieldCommonProps<string> &\n  ErrorHandling &\n  CountryCodeProps;\n\nconst CountryCodeFieldRaw: React.FC<CountryCodeFieldProps> = React.forwardRef<\n  HTMLButtonElement,\n  CountryCodeFieldProps\n>(\n  (\n    {\n      onChange,\n      placeholder,\n      allowedCountries,\n      excludedCountries,\n      includeDependentAreas = false,\n      viewMode = \"NamesOnly\",\n      showFlagIcons = true,\n      enableSearch,\n      ...props\n    },\n    ref,\n  ) => {\n    const defaultOptions = countries\n      .filter(\n        (country) =>\n          (includeDependentAreas ? true : country.independent) &&\n          country.cca2 !== \"AQ\", // exclude Antarctica\n      )\n      .map((country) => ({\n        value: country.cca2,\n        label:\n          viewMode === \"CodesOnly\"\n            ? country.cca2\n            : viewMode === \"NamesAndCodes\"\n              ? `${country.name.common} (${country.cca2})`\n              : country.name.common,\n        icon: showFlagIcons\n          ? () => (\n              <CircleFlag\n                className=\"size-4\"\n                countryCode={country.cca2.toLowerCase()}\n                height={16}\n              />\n            )\n          : undefined,\n      }))\n      .sort((a, b) => (a.label > b.label ? 1 : a.label < b.label ? -1 : 0));\n\n    const options =\n      allowedCountries || excludedCountries\n        ? defaultOptions.filter(\n            (option) =>\n              (!allowedCountries || allowedCountries.includes(option.value)) &&\n              !excludedCountries?.includes(option.value),\n          )\n        : defaultOptions;\n\n    return (\n      <SelectFieldRaw\n        ref={ref}\n        options={options}\n        optionsCheckmark=\"Checkmark\"\n        optionsCheckmarkPosition=\"Right\"\n        searchable={enableSearch}\n        onChange={onChange}\n        placeholder={placeholder}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const CountryCodeField = withFieldValidation<CountryCodeFieldProps>(\n  CountryCodeFieldRaw,\n  {\n    validations: {\n      _validOption:\n        ({ allowedCountries, excludedCountries, includeDependentAreas }) =>\n        (value: string | undefined) => {\n          if (value === \"\" || value === undefined) {\n            return true;\n          }\n\n          const validCountries = countries\n            .filter(\n              (country) =>\n                (includeDependentAreas ? true : country.independent) &&\n                country.cca2 !== \"AQ\",\n            )\n            .map((country) => country.cca2);\n\n          // First check if it's a valid country code\n          if (!validCountries.includes(value)) {\n            return \"Please select a valid country\";\n          }\n          // Check if country is in allowed list\n          if (allowedCountries && !allowedCountries.includes(value)) {\n            return \"Please select a valid country\";\n          }\n          // Check if country is in excluded list\n          if (excludedCountries?.includes(value)) {\n            return \"Please select a valid country\";\n          }\n\n          return true;\n        },\n    },\n  },\n);\n\nCountryCodeField.displayName = \"CountryCodeField\";\n"],"names":["CountryCodeFieldRaw","React","onChange","placeholder","allowedCountries","excludedCountries","includeDependentAreas","viewMode","showFlagIcons","enableSearch","props","ref","defaultOptions","countries","country","jsx","CircleFlag","b","options","option","SelectFieldRaw","CountryCodeField","withFieldValidation","value"],"mappings":";;;;;;AAYA,MAAMA,IAAuDC,EAAM;AAAA,EAIjE,CACE;AAAA,IACE,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,uBAAAC,IAAwB;AAAA,IACxB,UAAAC,IAAW;AAAA,IACX,eAAAC,IAAgB;AAAA,IAChB,cAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAiBC,EACpB;AAAA,MACC,CAACC,OACER,IAAwB,KAAOQ,EAAQ,gBACxCA,EAAQ,SAAS;AAAA;AAAA,IAAA,EAEpB,IAAI,CAACA,OAAa;AAAA,MACjB,OAAOA,EAAQ;AAAA,MACf,OACEP,MAAa,cACTO,EAAQ,OACRP,MAAa,kBACX,GAAGO,EAAQ,KAAK,MAAM,KAAKA,EAAQ,IAAI,MACvCA,EAAQ,KAAK;AAAA,MACrB,MAAMN,IACF,MACE,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAaF,EAAQ,KAAK,YAAY;AAAA,UACtC,QAAQ;AAAA,QAAA;AAAA,MAAA,IAGZ;AAAA,IAAA,EACJ,EACD,KAAK,CAAC,GAAGG,MAAO,EAAE,QAAQA,EAAE,QAAQ,IAAI,EAAE,QAAQA,EAAE,QAAQ,KAAK,CAAE,GAEhEC,IACJd,KAAoBC,IAChBO,EAAe;AAAA,MACb,CAACO,OACE,CAACf,KAAoBA,EAAiB,SAASe,EAAO,KAAK,MAC5D,EAACd,KAAA,QAAAA,EAAmB,SAASc,EAAO;AAAA,IAAK,IAE7CP;AAGJ,WAAA,gBAAAG;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,KAAAT;AAAA,QACA,SAAAO;AAAA,QACA,kBAAiB;AAAA,QACjB,0BAAyB;AAAA,QACzB,YAAYT;AAAA,QACZ,UAAAP;AAAA,QACA,aAAAC;AAAA,QACC,GAAGO;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN,GAEaW,IAAmBC;AAAA,EAC9BtB;AAAA,EACA;AAAA,IACE,aAAa;AAAA,MACX,cACE,CAAC,EAAE,kBAAAI,GAAkB,mBAAAC,GAAmB,uBAAAC,EAAsB,MAC9D,CAACiB,MACKA,MAAU,MAAMA,MAAU,SACrB,KAYL,CATmBV,EACpB;AAAA,QACC,CAACC,OACER,IAAwB,KAAOQ,EAAQ,gBACxCA,EAAQ,SAAS;AAAA,MAEpB,EAAA,IAAI,CAACA,MAAYA,EAAQ,IAAI,EAGZ,SAASS,CAAK,KAI9BnB,KAAoB,CAACA,EAAiB,SAASmB,CAAK,KAIpDlB,KAAA,QAAAA,EAAmB,SAASkB,KACvB,kCAGF;AAAA,IACT;AAAA,EACJ;AAEJ;AAEAF,EAAiB,cAAc;"}

package/dist/scalars/components/currency-code-field/currency-code-field.js

@@ -0,0 +1,69 @@
+import { jsx as d } from "react/jsx-runtime";
+import c, { useMemo as y } from "react";
+import { SelectFieldRaw as u } from "../fragments/select-field/select-field.js";
+import { withFieldValidation as b } from "../fragments/with-field-validation/with-field-validation.js";
+const f = [
+  { code: "ARS", name: "Argentine Peso", symbol: "$" },
+  { code: "AUD", name: "Australian Dollar", symbol: "A$" },
+  { code: "BRL", name: "Brazilian Real", symbol: "R$" },
+  { code: "CAD", name: "Canadian Dollar", symbol: "C$" },
+  { code: "CHF", name: "Swiss Franc", symbol: "CHF" },
+  { code: "CLP", name: "Chilean Peso", symbol: "$" },
+  { code: "CNY", name: "Chinese Yuan", symbol: "¥" },
+  { code: "COP", name: "Colombian Peso", symbol: "$" },
+  { code: "EUR", name: "Euro", symbol: "€" },
+  { code: "GBP", name: "British Pound", symbol: "£" },
+  { code: "INR", name: "Indian Rupee", symbol: "₹" },
+  { code: "JPY", name: "Japanese Yen", symbol: "¥" },
+  { code: "MXN", name: "Mexican Peso", symbol: "$" },
+  { code: "USD", name: "United States Dollar", symbol: "$" },
+  { code: "UYU", name: "Uruguayan Peso", symbol: "$" },
+  { code: "ZAR", name: "South African Rand", symbol: "R" }
+], n = c.forwardRef(
+  ({
+    placeholder: o,
+    allowedCurrencies: r,
+    excludedCurrencies: e,
+    multiple: i = !1,
+    // maxSelection is not used in the component, but in the validation
+    // declared here to prevent forwarding it to the select via props
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    maxSelection: R,
+    // TODO: implement following props
+    // includeCurrencySymbols,
+    // enableAutocomplete,
+    // showFlagIcons,
+    ...t
+  }, l) => {
+    const s = y(() => f.filter((a) => !(r !== void 0 && Array.isArray(r) && !r.includes(a.code) || e !== void 0 && Array.isArray(e) && e.includes(a.code))).map((a) => ({
+      label: a.name,
+      value: a.code
+    })).sort((a, m) => a.label.localeCompare(m.label)), [r, e]);
+    return /* @__PURE__ */ d(
+      u,
+      {
+        ref: l,
+        options: s,
+        optionsCheckmark: "Checkmark",
+        searchable: !0,
+        multiple: i,
+        placeholder: o,
+        ...t
+      }
+    );
+  }
+);
+n.displayName = "CurrencyCodeFieldRaw";
+const C = b(
+  n,
+  {
+    validations: {
+      _validateMaxSelection: ({ value: o, multiple: r, maxSelection: e }) => () => o === void 0 || Array.isArray(o) && o.length === 0 || !r || e === void 0 ? !0 : Array.isArray(o) && o.length > e ? `You can select up to ${e} currencies only` : !0
+    }
+  }
+);
+C.displayName = "CurrencyCodeField";
+export {
+  C as CurrencyCodeField
+};
+//# sourceMappingURL=currency-code-field.js.map

package/dist/scalars/components/currency-code-field/currency-code-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-code-field.js","sources":["../../../../src/scalars/components/currency-code-field/currency-code-field.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ErrorHandling, FieldCommonProps } from \"../types\";\nimport { SelectFieldRaw, withFieldValidation } from \"../fragments\";\nimport type { SelectOption } from \"../enum-field/types\";\n\nexport interface CurrencyCodeFieldProps\n  extends FieldCommonProps<string | string[]>,\n    ErrorHandling {\n  placeholder?: string;\n  allowedCurrencies?: string[];\n  excludedCurrencies?: string[];\n  includeCurrencySymbols?: boolean;\n  enableAutocomplete?: boolean;\n  showFlagIcons?: boolean;\n  multiple?: boolean;\n  maxSelection?: number;\n  onChange?: (value: string | string[]) => void;\n  onBlur?: () => void;\n}\n\ninterface Currency {\n  code: string;\n  name: string;\n  symbol: string;\n}\n\n// TODO: replace with the full list of currencies\nconst CURRENCIES: Currency[] = [\n  { code: \"ARS\", name: \"Argentine Peso\", symbol: \"$\" },\n  { code: \"AUD\", name: \"Australian Dollar\", symbol: \"A$\" },\n  { code: \"BRL\", name: \"Brazilian Real\", symbol: \"R$\" },\n  { code: \"CAD\", name: \"Canadian Dollar\", symbol: \"C$\" },\n  { code: \"CHF\", name: \"Swiss Franc\", symbol: \"CHF\" },\n  { code: \"CLP\", name: \"Chilean Peso\", symbol: \"$\" },\n  { code: \"CNY\", name: \"Chinese Yuan\", symbol: \"¥\" },\n  { code: \"COP\", name: \"Colombian Peso\", symbol: \"$\" },\n  { code: \"EUR\", name: \"Euro\", symbol: \"€\" },\n  { code: \"GBP\", name: \"British Pound\", symbol: \"£\" },\n  { code: \"INR\", name: \"Indian Rupee\", symbol: \"₹\" },\n  { code: \"JPY\", name: \"Japanese Yen\", symbol: \"¥\" },\n  { code: \"MXN\", name: \"Mexican Peso\", symbol: \"$\" },\n  { code: \"USD\", name: \"United States Dollar\", symbol: \"$\" },\n  { code: \"UYU\", name: \"Uruguayan Peso\", symbol: \"$\" },\n  { code: \"ZAR\", name: \"South African Rand\", symbol: \"R\" },\n];\n\nconst CurrencyCodeFieldRaw = React.forwardRef<\n  HTMLButtonElement,\n  CurrencyCodeFieldProps\n>(\n  (\n    {\n      placeholder,\n      allowedCurrencies,\n      excludedCurrencies,\n      multiple = false,\n      // maxSelection is not used in the component, but in the validation\n      // declared here to prevent forwarding it to the select via props\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      maxSelection,\n      // TODO: implement following props\n      // includeCurrencySymbols,\n      // enableAutocomplete,\n      // showFlagIcons,\n      ...props\n    },\n    ref,\n  ) => {\n    const options: SelectOption[] = useMemo(() => {\n      const filteredCurrencies = CURRENCIES.filter((currency) => {\n        // filter the allowed currencies only\n        if (\n          allowedCurrencies !== undefined &&\n          Array.isArray(allowedCurrencies) &&\n          !allowedCurrencies.includes(currency.code)\n        ) {\n          return false; // not allowed\n        }\n        // filter the excluded currencies\n        if (\n          excludedCurrencies !== undefined &&\n          Array.isArray(excludedCurrencies) &&\n          excludedCurrencies.includes(currency.code)\n        ) {\n          return false; // excluded\n        }\n        return true;\n      });\n\n      return filteredCurrencies\n        .map((currency) => ({\n          label: currency.name,\n          value: currency.code,\n        }))\n        .sort((a, b) => a.label.localeCompare(b.label));\n    }, [allowedCurrencies, excludedCurrencies]);\n\n    return (\n      <SelectFieldRaw\n        ref={ref}\n        options={options}\n        optionsCheckmark=\"Checkmark\"\n        searchable\n        multiple={multiple}\n        placeholder={placeholder}\n        {...props}\n      />\n    );\n  },\n);\n\nCurrencyCodeFieldRaw.displayName = \"CurrencyCodeFieldRaw\";\n\nexport const CurrencyCodeField = withFieldValidation<CurrencyCodeFieldProps>(\n  CurrencyCodeFieldRaw,\n  {\n    validations: {\n      _validateMaxSelection:\n        ({ value, multiple, maxSelection }) =>\n        () => {\n          if (\n            value === undefined ||\n            (Array.isArray(value) && value.length === 0)\n          )\n            return true;\n          if (!multiple) return true;\n          if (maxSelection === undefined) return true;\n\n          if (Array.isArray(value) && value.length > maxSelection) {\n            return `You can select up to ${maxSelection} currencies only`;\n          }\n          return true;\n        },\n    },\n  },\n);\n\nCurrencyCodeField.displayName = \"CurrencyCodeField\";\n"],"names":["CURRENCIES","CurrencyCodeFieldRaw","React","placeholder","allowedCurrencies","excludedCurrencies","multiple","maxSelection","props","ref","options","useMemo","currency","b","jsx","SelectFieldRaw","CurrencyCodeField","withFieldValidation","value"],"mappings":";;;;AA2BA,MAAMA,IAAyB;AAAA,EAC7B,EAAE,MAAM,OAAO,MAAM,kBAAkB,QAAQ,IAAI;AAAA,EACnD,EAAE,MAAM,OAAO,MAAM,qBAAqB,QAAQ,KAAK;AAAA,EACvD,EAAE,MAAM,OAAO,MAAM,kBAAkB,QAAQ,KAAK;AAAA,EACpD,EAAE,MAAM,OAAO,MAAM,mBAAmB,QAAQ,KAAK;AAAA,EACrD,EAAE,MAAM,OAAO,MAAM,eAAe,QAAQ,MAAM;AAAA,EAClD,EAAE,MAAM,OAAO,MAAM,gBAAgB,QAAQ,IAAI;AAAA,EACjD,EAAE,MAAM,OAAO,MAAM,gBAAgB,QAAQ,IAAI;AAAA,EACjD,EAAE,MAAM,OAAO,MAAM,kBAAkB,QAAQ,IAAI;AAAA,EACnD,EAAE,MAAM,OAAO,MAAM,QAAQ,QAAQ,IAAI;AAAA,EACzC,EAAE,MAAM,OAAO,MAAM,iBAAiB,QAAQ,IAAI;AAAA,EAClD,EAAE,MAAM,OAAO,MAAM,gBAAgB,QAAQ,IAAI;AAAA,EACjD,EAAE,MAAM,OAAO,MAAM,gBAAgB,QAAQ,IAAI;AAAA,EACjD,EAAE,MAAM,OAAO,MAAM,gBAAgB,QAAQ,IAAI;AAAA,EACjD,EAAE,MAAM,OAAO,MAAM,wBAAwB,QAAQ,IAAI;AAAA,EACzD,EAAE,MAAM,OAAO,MAAM,kBAAkB,QAAQ,IAAI;AAAA,EACnD,EAAE,MAAM,OAAO,MAAM,sBAAsB,QAAQ,IAAI;AACzD,GAEMC,IAAuBC,EAAM;AAAA,EAIjC,CACE;AAAA,IACE,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA;AAAA;AAAA;AAAA,IAIX,cAAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,GAAGC;AAAA,KAELC,MACG;AACG,UAAAC,IAA0BC,EAAQ,MACXX,EAAW,OAAO,CAACY,MAG1C,EAAAR,MAAsB,UACtB,MAAM,QAAQA,CAAiB,KAC/B,CAACA,EAAkB,SAASQ,EAAS,IAAI,KAMzCP,MAAuB,UACvB,MAAM,QAAQA,CAAkB,KAChCA,EAAmB,SAASO,EAAS,IAAI,EAK5C,EAGE,IAAI,CAACA,OAAc;AAAA,MAClB,OAAOA,EAAS;AAAA,MAChB,OAAOA,EAAS;AAAA,IAClB,EAAE,EACD,KAAK,CAAC,GAAGC,MAAM,EAAE,MAAM,cAAcA,EAAE,KAAK,CAAC,GAC/C,CAACT,GAAmBC,CAAkB,CAAC;AAGxC,WAAA,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAN;AAAA,QACA,SAAAC;AAAA,QACA,kBAAiB;AAAA,QACjB,YAAU;AAAA,QACV,UAAAJ;AAAA,QACA,aAAAH;AAAA,QACC,GAAGK;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;AAEAP,EAAqB,cAAc;AAE5B,MAAMe,IAAoBC;AAAA,EAC/BhB;AAAA,EACA;AAAA,IACE,aAAa;AAAA,MACX,uBACE,CAAC,EAAE,OAAAiB,GAAO,UAAAZ,GAAU,cAAAC,QACpB,MAEIW,MAAU,UACT,MAAM,QAAQA,CAAK,KAAKA,EAAM,WAAW,KAGxC,CAACZ,KACDC,MAAiB,SAAkB,KAEnC,MAAM,QAAQW,CAAK,KAAKA,EAAM,SAASX,IAClC,wBAAwBA,CAAY,qBAEtC;AAAA,IACT;AAAA,EACJ;AAEJ;AAEAS,EAAkB,cAAc;"}

package/dist/scalars/components/enum-field/enum-field.js

@@ -1,13 +1,23 @@
-import { jsx as m } from "react/jsx-runtime";
-import { RadioGroupField as d } from "../fragments/radio-group-field/radio-group-field.js";
-import { SelectField as i } from "../fragments/select-field/select-field.js";
-const l = ({
-  variant: u = "Auto",
+import { jsx as c } from "react/jsx-runtime";
+import { RadioGroupField as l } from "../fragments/radio-group-field/radio-group-field.js";
+import { SelectField as m } from "../fragments/select-field/select-field.js";
+const u = ({
+  variant: i = "Auto",
   options: e = [],
   ...r
-}) => u === "Auto" ? e.length < 6 ? /* @__PURE__ */ m(d, { options: e, ...r }) : /* @__PURE__ */ m(i, { options: e, ...r }) : u === "RadioGroup" ? /* @__PURE__ */ m(d, { options: e, ...r }) : /* @__PURE__ */ m(i, { options: e, ...r });
-l.displayName = "EnumField";
+}) => {
+  const t = /* @__PURE__ */ c(l, { options: e, ...r }), o = /* @__PURE__ */ c(m, { options: e, ...r });
+  switch (i) {
+    case "RadioGroup":
+      return t;
+    case "Select":
+      return o;
+    case "Auto":
+      return e.length < 6 ? t : o;
+  }
+};
+u.displayName = "EnumField";
 export {
-  l as EnumField
+  u as EnumField
 };
 //# sourceMappingURL=enum-field.js.map

package/dist/scalars/components/enum-field/enum-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"enum-field.js","sources":["../../../../src/scalars/components/enum-field/enum-field.tsx"],"sourcesContent":["import React from \"react\";\nimport { RadioGroupField } from \"@/scalars/components/fragments/radio-group-field\";\nimport { SelectField } from \"@/scalars/components/fragments/select-field\";\nimport { FieldCommonProps, ErrorHandling } from \"@/scalars/components/types\";\nimport { EnumProps } from \"./types\";\n\nexport type EnumFieldProps = FieldCommonProps<string | string[]> &\n  ErrorHandling &\n  EnumProps;\n\ntype RadioGroupVariant = Omit<\n  EnumFieldProps,\n  \"defaultValue\" | \"value\" | \"onChange\"\n> & {\n  defaultValue?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n};\n\ntype SelectVariant = Omit<\n  EnumFieldProps,\n  \"defaultValue\" | \"value\" | \"onChange\"\n> & {\n  defaultValue?: string[];\n  value?: string[];\n  onChange?: (value: string | string[]) => void;\n};\n\nexport const EnumField: React.FC<EnumFieldProps> = ({\n  variant = \"Auto\",\n  options = [],\n  ...props\n}) => {\n  if (variant === \"Auto\") {\n    return options.length < 6 ? (\n      <RadioGroupField options={options} {...(props as RadioGroupVariant)} />\n    ) : (\n      <SelectField options={options} {...(props as SelectVariant)} />\n    );\n  }\n\n  if (variant === \"RadioGroup\") {\n    return (\n      <RadioGroupField options={options} {...(props as RadioGroupVariant)} />\n    );\n  }\n\n  return <SelectField options={options} {...(props as SelectVariant)} />;\n};\n\nEnumField.displayName = \"EnumField\";\n"],"names":["EnumField","variant","options","props","jsx","RadioGroupField","SelectField"],"mappings":";;;AA4BO,MAAMA,IAAsC,CAAC;AAAA,EAClD,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU,CAAC;AAAA,EACX,GAAGC;AACL,MACMF,MAAY,SACPC,EAAQ,SAAS,IACtB,gBAAAE,EAACC,GAAgB,EAAA,SAAAH,GAAmB,GAAIC,EAA6B,CAAA,IAErE,gBAAAC,EAACE,GAAY,EAAA,SAAAJ,GAAmB,GAAIC,GAAyB,IAI7DF,MAAY,eAEX,gBAAAG,EAAAC,GAAA,EAAgB,SAAAH,GAAmB,GAAIC,EAA6B,CAAA,IAIjE,gBAAAC,EAAAE,GAAA,EAAY,SAAAJ,GAAmB,GAAIC,EAAyB,CAAA;AAGtEH,EAAU,cAAc;"}
+{"version":3,"file":"enum-field.js","sources":["../../../../src/scalars/components/enum-field/enum-field.tsx"],"sourcesContent":["import React from \"react\";\nimport { RadioGroupField } from \"@/scalars/components/fragments/radio-group-field\";\nimport { SelectField } from \"@/scalars/components/fragments/select-field\";\nimport { FieldCommonProps, ErrorHandling } from \"@/scalars/components/types\";\nimport { EnumProps } from \"./types\";\n\nexport type EnumFieldProps = FieldCommonProps<string | string[]> &\n  ErrorHandling &\n  EnumProps;\n\ntype RadioGroupVariant = Omit<\n  EnumFieldProps,\n  \"defaultValue\" | \"value\" | \"onChange\"\n> & {\n  defaultValue?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n};\n\ntype SelectVariant = Omit<\n  EnumFieldProps,\n  \"defaultValue\" | \"value\" | \"onChange\"\n> & {\n  defaultValue?: string[];\n  value?: string[];\n  onChange?: (value: string | string[]) => void;\n};\n\nexport const EnumField: React.FC<EnumFieldProps> = ({\n  variant = \"Auto\",\n  options = [],\n  ...props\n}) => {\n  const radio = (\n    <RadioGroupField options={options} {...(props as RadioGroupVariant)} />\n  );\n  const select = (\n    <SelectField options={options} {...(props as SelectVariant)} />\n  );\n\n  switch (variant) {\n    case \"RadioGroup\":\n      return radio;\n    case \"Select\":\n      return select;\n    case \"Auto\":\n      return options.length < 6 ? radio : select;\n  }\n};\n\nEnumField.displayName = \"EnumField\";\n"],"names":["EnumField","variant","options","props","radio","jsx","RadioGroupField","select","SelectField"],"mappings":";;;AA4BO,MAAMA,IAAsC,CAAC;AAAA,EAClD,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU,CAAC;AAAA,EACX,GAAGC;AACL,MAAM;AACJ,QAAMC,IACJ,gBAAAC,EAACC,GAAgB,EAAA,SAAAJ,GAAmB,GAAIC,GAA6B,GAEjEI,IACJ,gBAAAF,EAACG,GAAY,EAAA,SAAAN,GAAmB,GAAIC,GAAyB;AAG/D,UAAQF,GAAS;AAAA,IACf,KAAK;AACI,aAAAG;AAAA,IACT,KAAK;AACI,aAAAG;AAAA,IACT,KAAK;AACI,aAAAL,EAAQ,SAAS,IAAIE,IAAQG;AAAA,EAAA;AAE1C;AAEAP,EAAU,cAAc;"}

package/dist/scalars/components/form/form.js

@@ -1,60 +1,74 @@
-import { jsx as p } from "react/jsx-runtime";
-import { deepEqual as d } from "../../lib/deep-equal.js";
-import { isEmpty as E } from "../../lib/is-empty.js";
-import { forwardRef as S, useImperativeHandle as u, useEffect as O, useCallback as a } from "react";
-import { useForm as k, FormProvider as y } from "react-hook-form";
-const w = S(
+import { jsx as u } from "react/jsx-runtime";
+import { deepEqual as S } from "../../lib/deep-equal.js";
+import { isEmpty as O } from "../../lib/is-empty.js";
+import { castValue as y } from "../../lib/value-cast.js";
+import { forwardRef as I, useId as h, useImperativeHandle as F, useEffect as k, useCallback as q } from "react";
+import { useForm as v, FormProvider as x } from "react-hook-form";
+const M = I(
   ({
-    children: m,
+    children: i,
     onSubmit: f,
-    resetOnSuccessfulSubmit: c = !1,
-    submitChangesOnly: s = !1,
-    defaultValues: t,
+    resetOnSuccessfulSubmit: a = !1,
+    submitChangesOnly: p = !1,
+    defaultValues: c,
     className: b
   }, j) => {
-    const r = k({
-      defaultValues: t,
+    const m = h(), t = v({
+      defaultValues: c,
       criteriaMode: "all"
       // display all errors at once
     });
-    u(j, () => r, [r]), O(() => {
-      c && r.formState.isSubmitSuccessful && r.reset({ ...t ?? {} });
+    F(j, () => t, [t]), k(() => {
+      a && t.formState.isSubmitSuccessful && t.reset({ ...c ?? {} });
     }, [
-      c,
-      r,
-      r.formState.isSubmitSuccessful,
-      t
+      a,
+      t,
+      t.formState.isSubmitSuccessful,
+      c
     ]);
-    const l = a(
-      (n) => {
-        let e = n;
-        return Object.keys(r.control._fields).forEach((o) => {
-          Object.keys(e).includes(o) || (e[o] = null);
-        }), s && t && (e = Object.fromEntries(
-          Object.entries(n).filter(
-            ([o, i]) => !d(i, t[o])
+    const E = q(
+      (l) => {
+        let e = l;
+        Object.keys(t.control._fields).forEach((r) => {
+          Object.keys(e).includes(r) || (e[r] = null);
+        }), p && c && (e = Object.fromEntries(
+          Object.entries(l).filter(
+            ([r, o]) => !S(o, c[r])
           )
         )), e = Object.fromEntries(
-          Object.entries(e).map(([o, i]) => [
-            o,
-            E(i) ? null : i
+          Object.entries(e).map(([r, o]) => [
+            r,
+            O(o) ? null : o
           ])
-        ), f(e);
+        );
+        const s = document.getElementById(m);
+        return Object.keys(e).map((r) => {
+          try {
+            const o = e[r];
+            if (o !== null) {
+              const n = s == null ? void 0 : s.querySelector(`[name="${r}"]`), d = n == null ? void 0 : n.getAttribute("data-cast");
+              d && (e[r] = y(o, d));
+            }
+          } catch (o) {
+            console.error(o);
+          }
+        }), f(e);
       },
-      [r, t, s, f]
+      [t.control, p, c, m, f]
     );
-    return /* @__PURE__ */ p(y, { ...r, children: /* @__PURE__ */ p(
+    return /* @__PURE__ */ u(x, { ...t, children: /* @__PURE__ */ u(
       "form",
       {
-        onSubmit: r.handleSubmit(l),
+        id: m,
+        onSubmit: t.handleSubmit(E),
         className: b,
         noValidate: !0,
-        children: typeof m == "function" ? m(r) : m
+        children: typeof i == "function" ? i(t) : i
       }
     ) });
   }
 );
 export {
-  w as Form
+  M as Form
 };
 //# sourceMappingURL=form.js.map