@ceed/ads 0.0.92 → 0.0.93

package/dist/index.js

@@ -1182,7 +1182,7 @@ Container.displayName = "Container";
 // src/components/CurrencyInput/CurrencyInput.tsx
 import React14, { useCallback as useCallback3, useState as useState3 } from "react";
 import { IntlMessageFormat } from "intl-messageformat";
-import { IMaskInput } from "react-imask";
+import { IMask, IMaskInput } from "react-imask";
 import InfoOutlined from "@mui/icons-material/esm/InfoOutlined.js";
 
 // src/components/Input/Input.tsx
@@ -1234,115 +1234,119 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/CurrencyInput/CurrencyInput.tsx
-function getCurrencySymbol(currencyCode) {
-  const formatted = new Intl.NumberFormat("en-us", {
-    style: "currency",
-    currency: currencyCode
-  }).format(0);
-  return formatted.replace(/[\d\s.,]/g, "");
+function formatCurrency(value, currencyCode = "usd") {
+  const formatter = new IntlMessageFormat(
+    `{amount, number, ::currency/${currencyCode} unit-width-narrow}`
+  );
+  const amount = value || 0;
+  const formatted = formatter.format({ amount }).toString();
+  const symbol = formatted.replace(/[0-9.,]/g, "").trim();
+  const formattedAmount = formatted.replace(symbol, "").trim();
+  return {
+    symbol,
+    amount,
+    formattedAmount
+  };
 }
 var TextMaskAdapter = React14.forwardRef(
   function TextMaskAdapter2(props, ref) {
     const { onChange, currency, ...innerProps } = props;
-    const [value, setValue] = useState3(props.value || 0);
-    const currencySymbol = getCurrencySymbol(currency);
+    const [formatted, setFormatted] = useState3(formatCurrency(props.value, currency));
     return /* @__PURE__ */ React14.createElement(
       IMaskInput,
       {
         ...innerProps,
         inputRef: ref,
-        mask: `${currencySymbol}num`,
-        lazy: false,
-        overwrite: true,
-        onAccept: (value2) => {
-          setValue(Number(value2));
+        onAccept: (value) => {
+          const unmaskedValue = value.replace(/[^\d\.]/g, "");
+          setFormatted(formatCurrency(Number(unmaskedValue), currency));
           onChange({
             target: {
               name: props.name,
-              value: value2
+              value: unmaskedValue
             }
           });
         },
-        value: value.toString(),
-        unmask: true,
+        mask: `${formatted.symbol} integer\`.float`,
         blocks: {
-          num: {
+          integer: {
             mask: Number,
-            thousandsSeparator: ",",
-            radix: ".",
-            expose: true,
-            scale: 2,
-            padFractionalZeros: currency !== "krw"
+            thousandsSeparator: ","
+          },
+          float: {
+            mask: IMask.MaskedRange,
+            from: 0,
+            to: 99,
+            maxLength: 2
           }
         },
-        placeholder: `${currencySymbol}0.00`
+        value: formatted.formattedAmount,
+        overwrite: "shift"
       }
     );
   }
 );
-var CurrencyInput = React14.forwardRef(
-  function CurrencyInput2(props, ref) {
-    const {
-      currency = "usd",
-      max = 1e5,
-      name,
-      onChange,
-      label,
-      error,
-      helperText,
-      required,
+var CurrencyInput = React14.forwardRef(function CurrencyInput2(props, ref) {
+  const {
+    currency = "usd",
+    max = 1e5,
+    name,
+    onChange,
+    label,
+    error,
+    helperText,
+    required,
+    disabled,
+    ...innerProps
+  } = props;
+  const [isOverLimit, setIsOverLimit] = useState3(
+    !!props.value && props.value > Number(max)
+  );
+  const handleChange = useCallback3(
+    (event) => {
+      const amount = Number(event.target.value);
+      onChange?.({ ...event, target: { name, value: amount } });
+      if (amount > Number(max)) {
+        setIsOverLimit(true);
+      } else {
+        setIsOverLimit(false);
+      }
+    },
+    []
+  );
+  const currencyFormatter = /* @__PURE__ */ React14.createElement(
+    Input_default,
+    {
+      size: "sm",
+      ref,
+      onChange: handleChange,
       disabled,
-      ...innerProps
-    } = props;
-    const [isOverLimit, setIsOverLimit] = useState3(
-      !!props.value && props.value > Number(max)
-    );
-    const handleChange = useCallback3(
-      (event) => {
-        const amount = Number(event.target.value);
-        onChange?.({ ...event, target: { name, value: amount } });
-        if (amount > Number(max)) {
-          setIsOverLimit(true);
-        } else {
-          setIsOverLimit(false);
-        }
+      required,
+      slotProps: { input: { component: TextMaskAdapter, currency } },
+      sx: {
+        fontFamily: "monospace"
       },
-      []
-    );
-    const currencyFormatter = /* @__PURE__ */ React14.createElement(
-      Input_default,
+      ...innerProps
+    }
+  );
+  if (label) {
+    return /* @__PURE__ */ React14.createElement(
+      FormControl_default,
       {
         size: "sm",
-        ref,
-        onChange: handleChange,
         disabled,
         required,
-        slotProps: { input: { component: TextMaskAdapter, currency, max } },
-        sx: {
-          fontFamily: "monospace"
-        },
-        ...innerProps
-      }
+        error: error || isOverLimit
+      },
+      /* @__PURE__ */ React14.createElement(FormLabel_default, null, label),
+      currencyFormatter,
+      isOverLimit ? /* @__PURE__ */ React14.createElement(FormHelperText_default, null, /* @__PURE__ */ React14.createElement(InfoOutlined, null), new IntlMessageFormat(
+        `limit: {amount, number, ::currency/${currency} unit-width-narrow}`
+      ).format({ amount: max })) : helperText && /* @__PURE__ */ React14.createElement(FormHelperText_default, null, helperText)
     );
-    if (label) {
-      return /* @__PURE__ */ React14.createElement(
-        FormControl_default,
-        {
-          size: "sm",
-          disabled,
-          required,
-          error: error || isOverLimit
-        },
-        /* @__PURE__ */ React14.createElement(FormLabel_default, null, label),
-        currencyFormatter,
-        isOverLimit ? /* @__PURE__ */ React14.createElement(FormHelperText_default, null, /* @__PURE__ */ React14.createElement(InfoOutlined, null), new IntlMessageFormat(
-          `limit: {amount, number, ::currency/${currency} unit-width-narrow}`
-        ).format({ amount: max })) : helperText && /* @__PURE__ */ React14.createElement(FormHelperText_default, null, helperText)
-      );
-    }
-    return currencyFormatter;
   }
-);
+  return currencyFormatter;
+});
 
 // src/components/DataTable/DataTable.tsx
 import React16, {
@@ -1876,7 +1880,7 @@ DataTable.displayName = "DataTable";
 
 // src/components/DatePicker/DatePicker.tsx
 import React17, { forwardRef as forwardRef4, useCallback as useCallback5, useState as useState5 } from "react";
-import { IMaskInput as IMaskInput2, IMask } from "react-imask";
+import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
 import CalendarTodayIcon from "@mui/icons-material/esm/CalendarToday.js";
 import { styled as styled6 } from "@mui/joy";
 import { FocusTrap, ClickAwayListener, Popper } from "@mui/base";
@@ -1936,19 +1940,19 @@ var TextMaskAdapter3 = React17.forwardRef(
         pattern: "Y/`m/`d",
         blocks: {
           d: {
-            mask: IMask.MaskedRange,
+            mask: IMask2.MaskedRange,
             from: 1,
             to: 31,
             maxLength: 2
           },
           m: {
-            mask: IMask.MaskedRange,
+            mask: IMask2.MaskedRange,
             from: 1,
             to: 12,
             maxLength: 2
           },
           Y: {
-            mask: IMask.MaskedRange,
+            mask: IMask2.MaskedRange,
             from: 1900,
             to: 9999
           }
@@ -2088,7 +2092,7 @@ DatePicker.displayName = "DatePicker";
 
 // src/components/DateRangePicker/DateRangePicker.tsx
 import React18, { forwardRef as forwardRef5, useCallback as useCallback6, useMemo as useMemo4, useState as useState6 } from "react";
-import { IMaskInput as IMaskInput3, IMask as IMask2 } from "react-imask";
+import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon2 from "@mui/icons-material/esm/CalendarToday.js";
 import { styled as styled7 } from "@mui/joy";
 import { FocusTrap as FocusTrap2, ClickAwayListener as ClickAwayListener2, Popper as Popper2 } from "@mui/base";
@@ -2152,19 +2156,19 @@ var TextMaskAdapter5 = React18.forwardRef(
         pattern: "Y/`m/`d - Y/`m/`d",
         blocks: {
           d: {
-            mask: IMask2.MaskedRange,
+            mask: IMask3.MaskedRange,
             from: 1,
             to: 31,
             maxLength: 2
           },
           m: {
-            mask: IMask2.MaskedRange,
+            mask: IMask3.MaskedRange,
             from: 1,
             to: 12,
             maxLength: 2
           },
           Y: {
-            mask: IMask2.MaskedRange,
+            mask: IMask3.MaskedRange,
             from: 1900,
             to: 9999
           }
@@ -2413,7 +2417,7 @@ Grid.displayName = "Grid";
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
 import React23, { forwardRef as forwardRef6, useCallback as useCallback7, useMemo as useMemo5, useState as useState7 } from "react";
-import { IMaskInput as IMaskInput4, IMask as IMask3 } from "react-imask";
+import { IMaskInput as IMaskInput4, IMask as IMask4 } from "react-imask";
 import CalendarTodayIcon3 from "@mui/icons-material/esm/CalendarToday.js";
 import { styled as styled12 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper3 } from "@mui/base";
@@ -2466,13 +2470,13 @@ var TextMaskAdapter7 = React23.forwardRef(
         pattern: "Y/`m - Y/`m",
         blocks: {
           m: {
-            mask: IMask3.MaskedRange,
+            mask: IMask4.MaskedRange,
             from: 1,
             to: 12,
             maxLength: 2
           },
           Y: {
-            mask: IMask3.MaskedRange,
+            mask: IMask4.MaskedRange,
             from: 1900,
             to: 9999
           }

package/framer/index.js

@@ -43871,127 +43871,131 @@ Input3.displayName = "Input";
 var Input_default2 = Input3;
 
 // src/components/CurrencyInput/CurrencyInput.tsx
-function getCurrencySymbol(currencyCode) {
-  const formatted = new Intl.NumberFormat("en-us", {
-    style: "currency",
-    currency: currencyCode
-  }).format(0);
-  return formatted.replace(/[\d\s.,]/g, "");
+function formatCurrency(value, currencyCode = "usd") {
+  const formatter = new IntlMessageFormat(
+    `{amount, number, ::currency/${currencyCode} unit-width-narrow}`
+  );
+  const amount = value || 0;
+  const formatted = formatter.format({ amount }).toString();
+  const symbol = formatted.replace(/[0-9.,]/g, "").trim();
+  const formattedAmount = formatted.replace(symbol, "").trim();
+  return {
+    symbol,
+    amount,
+    formattedAmount
+  };
 }
 var TextMaskAdapter = React179.forwardRef(
   function TextMaskAdapter2(props, ref) {
     const _a2 = props, { onChange, currency } = _a2, innerProps = __objRest(_a2, ["onChange", "currency"]);
-    const [value, setValue] = useState26(props.value || 0);
-    const currencySymbol = getCurrencySymbol(currency);
+    const [formatted, setFormatted] = useState26(formatCurrency(props.value, currency));
     return /* @__PURE__ */ jsx2(
       IMaskInput,
       __spreadProps(__spreadValues({}, innerProps), {
         inputRef: ref,
-        mask: `${currencySymbol}num`,
-        lazy: false,
-        overwrite: true,
-        onAccept: (value2) => {
-          setValue(Number(value2));
+        onAccept: (value) => {
+          const unmaskedValue = value.replace(/[^\d\.]/g, "");
+          setFormatted(formatCurrency(Number(unmaskedValue), currency));
           onChange({
             target: {
               name: props.name,
-              value: value2
+              value: unmaskedValue
             }
           });
         },
-        value: value.toString(),
-        unmask: true,
+        mask: `${formatted.symbol} integer\`.float`,
         blocks: {
-          num: {
+          integer: {
             mask: Number,
-            thousandsSeparator: ",",
-            radix: ".",
-            expose: true,
-            scale: 2,
-            padFractionalZeros: currency !== "krw"
+            thousandsSeparator: ","
+          },
+          float: {
+            mask: IMask.MaskedRange,
+            from: 0,
+            to: 99,
+            maxLength: 2
           }
         },
-        placeholder: `${currencySymbol}0.00`
+        value: formatted.formattedAmount,
+        overwrite: "shift"
       })
     );
   }
 );
-var CurrencyInput = React179.forwardRef(
-  function CurrencyInput2(props, ref) {
-    const _a2 = props, {
-      currency = "usd",
-      max: max2 = 1e5,
-      name,
-      onChange,
-      label,
-      error,
-      helperText,
+var CurrencyInput = React179.forwardRef(function CurrencyInput2(props, ref) {
+  const _a2 = props, {
+    currency = "usd",
+    max: max2 = 1e5,
+    name,
+    onChange,
+    label,
+    error,
+    helperText,
+    required,
+    disabled
+  } = _a2, innerProps = __objRest(_a2, [
+    "currency",
+    "max",
+    "name",
+    "onChange",
+    "label",
+    "error",
+    "helperText",
+    "required",
+    "disabled"
+  ]);
+  const [isOverLimit, setIsOverLimit] = useState26(
+    !!props.value && props.value > Number(max2)
+  );
+  const handleChange = useCallback27(
+    (event) => {
+      const amount = Number(event.target.value);
+      onChange == null ? void 0 : onChange(__spreadProps(__spreadValues({}, event), { target: { name, value: amount } }));
+      if (amount > Number(max2)) {
+        setIsOverLimit(true);
+      } else {
+        setIsOverLimit(false);
+      }
+    },
+    []
+  );
+  const currencyFormatter = /* @__PURE__ */ jsx2(
+    Input_default2,
+    __spreadValues({
+      size: "sm",
+      ref,
+      onChange: handleChange,
+      disabled,
       required,
-      disabled
-    } = _a2, innerProps = __objRest(_a2, [
-      "currency",
-      "max",
-      "name",
-      "onChange",
-      "label",
-      "error",
-      "helperText",
-      "required",
-      "disabled"
-    ]);
-    const [isOverLimit, setIsOverLimit] = useState26(
-      !!props.value && props.value > Number(max2)
-    );
-    const handleChange = useCallback27(
-      (event) => {
-        const amount = Number(event.target.value);
-        onChange == null ? void 0 : onChange(__spreadProps(__spreadValues({}, event), { target: { name, value: amount } }));
-        if (amount > Number(max2)) {
-          setIsOverLimit(true);
-        } else {
-          setIsOverLimit(false);
-        }
-      },
-      []
-    );
-    const currencyFormatter = /* @__PURE__ */ jsx2(
-      Input_default2,
-      __spreadValues({
+      slotProps: { input: { component: TextMaskAdapter, currency } },
+      sx: {
+        fontFamily: "monospace"
+      }
+    }, innerProps)
+  );
+  if (label) {
+    return /* @__PURE__ */ jsxs2(
+      FormControl_default2,
+      {
         size: "sm",
-        ref,
-        onChange: handleChange,
         disabled,
         required,
-        slotProps: { input: { component: TextMaskAdapter, currency, max: max2 } },
-        sx: {
-          fontFamily: "monospace"
-        }
-      }, innerProps)
+        error: error || isOverLimit,
+        children: [
+          /* @__PURE__ */ jsx2(FormLabel_default2, { children: label }),
+          currencyFormatter,
+          isOverLimit ? /* @__PURE__ */ jsxs2(FormHelperText_default2, { children: [
+            /* @__PURE__ */ jsx2(InfoOutlined_default, {}),
+            new IntlMessageFormat(
+              `limit: {amount, number, ::currency/${currency} unit-width-narrow}`
+            ).format({ amount: max2 })
+          ] }) : helperText && /* @__PURE__ */ jsx2(FormHelperText_default2, { children: helperText })
+        ]
+      }
     );
-    if (label) {
-      return /* @__PURE__ */ jsxs2(
-        FormControl_default2,
-        {
-          size: "sm",
-          disabled,
-          required,
-          error: error || isOverLimit,
-          children: [
-            /* @__PURE__ */ jsx2(FormLabel_default2, { children: label }),
-            currencyFormatter,
-            isOverLimit ? /* @__PURE__ */ jsxs2(FormHelperText_default2, { children: [
-              /* @__PURE__ */ jsx2(InfoOutlined_default, {}),
-              new IntlMessageFormat(
-                `limit: {amount, number, ::currency/${currency} unit-width-narrow}`
-              ).format({ amount: max2 })
-            ] }) : helperText && /* @__PURE__ */ jsx2(FormHelperText_default2, { children: helperText })
-          ]
-        }
-      );
-    }
-    return currencyFormatter;
   }
-);
+  return currencyFormatter;
+});
 
 // src/components/DataTable/DataTable.tsx
 import {
@@ -46020,8 +46024,7 @@ var currencyInputPropertyControls = {
   },
   max: {
     title: "Max",
-    type: ControlType11.Number,
-    defaultValue: void 0
+    type: ControlType11.String
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/ads",
-  "version": "0.0.92",
+  "version": "0.0.93",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",