@ceed/ads 0.0.93 → 0.0.94

package/dist/components/CurrencyInput/hooks/use-currency-setting.d.ts

@@ -0,0 +1,7 @@
+export declare const useCurrencySetting: (currencyCode?: "usd" | "krw") => {
+    symbol: string;
+    thousandSeparator: string;
+    decimalSeparator: string;
+    placeholder: string;
+    fixedDecimalScale: boolean;
+};

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { type SelectProps } from "@mui/joy";
 import { type MotionProps } from "framer-motion";
+import { SelectValue } from "@mui/base";
 declare const Option: import("framer-motion").CustomDomComponent<{
     color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").OptionPropsColorOverrides> | undefined;
     children?: React.ReactNode;
@@ -13,10 +14,16 @@ declare const Option: import("framer-motion").CustomDomComponent<{
     ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
 }, "label" | "children" | "color" | "variant" | "sx" | "disabled" | "value" | keyof import("@mui/joy").OptionSlotsAndSlotProps>>;
 export { Option };
-declare function Select<OptionValue extends {}, Multiple extends boolean = false>(props: {
+declare function Select<OptionValue extends string, Multiple extends boolean = false>(props: {
     label?: string;
     helperText?: string;
     error?: boolean;
+    onChange?: (event: {
+        target: {
+            name?: string;
+            value?: SelectValue<OptionValue, Multiple>;
+        };
+    }) => void;
 } & SelectProps<OptionValue, Multiple> & MotionProps): React.JSX.Element;
 declare namespace Select {
     var displayName: string;

package/dist/components/Tabs/Tabs.d.ts

@@ -8,7 +8,7 @@ declare const Tabs: import("framer-motion").CustomDomComponent<Omit<import("@mui
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "children" | "color" | "direction" | "defaultValue" | "className" | "onChange" | "variant" | "sx" | "size" | "orientation" | "value" | "selectionFollowsFocus" | keyof import("@mui/joy").TabsSlotsAndSlotProps>>;
 export { Tabs };
-declare const Tab: import("framer-motion").CustomDomComponent<{
+declare const Tab: import("@emotion/styled").StyledComponent<Omit<{
     action?: React.Ref<{
         focusVisible(): void;
     }> | undefined;
@@ -24,7 +24,7 @@ declare const Tab: import("framer-motion").CustomDomComponent<{
     variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").TabPropsVariantOverrides> | undefined;
 } & import("@mui/joy").TabSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | "onChange" | "variant" | "sx" | "disabled" | "orientation" | "value" | "action" | "disableIndicator" | "indicatorPlacement" | "indicatorInset" | keyof import("@mui/joy").TabSlotsAndSlotProps>>;
+}, "color" | "onChange" | "variant" | "sx" | "disabled" | "orientation" | "value" | "action" | "disableIndicator" | "indicatorPlacement" | "indicatorInset" | keyof import("@mui/joy").TabSlotsAndSlotProps> & import("framer-motion").MotionProps, "ref"> & React.RefAttributes<HTMLElement | SVGElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme>, {}, {}>;
 export { Tab };
 declare const TabList: import("framer-motion").CustomDomComponent<{
     color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").TabListPropsColorOverrides> | undefined;

package/dist/index.js

@@ -1181,8 +1181,8 @@ Container.displayName = "Container";
 
 // src/components/CurrencyInput/CurrencyInput.tsx
 import React14, { useCallback as useCallback3, useState as useState3 } from "react";
-import { IntlMessageFormat } from "intl-messageformat";
-import { IMask, IMaskInput } from "react-imask";
+import { IntlMessageFormat as IntlMessageFormat2 } from "intl-messageformat";
+import { NumericFormat } from "react-number-format";
 import InfoOutlined from "@mui/icons-material/esm/InfoOutlined.js";
 
 // src/components/Input/Input.tsx
@@ -1233,55 +1233,37 @@ Input.displayName = "Input";
 // src/components/Input/index.ts
 var Input_default = Input;
 
-// src/components/CurrencyInput/CurrencyInput.tsx
-function formatCurrency(value, currencyCode = "usd") {
-  const formatter = new IntlMessageFormat(
+// src/components/CurrencyInput/hooks/use-currency-setting.ts
+import IntlMessageFormat from "intl-messageformat";
+var useCurrencySetting = (currencyCode = "usd") => {
+  const [symbol, thousandSeparator, decimalSeparator] = 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();
+  ).format({ amount: 1e3 }).toString().replace(/\d/g, "").split("");
   return {
-    symbol,
-    amount,
-    formattedAmount
+    symbol: `${symbol} `,
+    thousandSeparator,
+    decimalSeparator,
+    placeholder: decimalSeparator ? `${symbol} 0${decimalSeparator}00` : `${symbol} 0`,
+    fixedDecimalScale: !!decimalSeparator
   };
-}
+};
+
+// src/components/CurrencyInput/CurrencyInput.tsx
 var TextMaskAdapter = React14.forwardRef(
   function TextMaskAdapter2(props, ref) {
-    const { onChange, currency, ...innerProps } = props;
-    const [formatted, setFormatted] = useState3(formatCurrency(props.value, currency));
+    const { onChange, ...innerProps } = props;
     return /* @__PURE__ */ React14.createElement(
-      IMaskInput,
+      NumericFormat,
       {
         ...innerProps,
-        inputRef: ref,
-        onAccept: (value) => {
-          const unmaskedValue = value.replace(/[^\d\.]/g, "");
-          setFormatted(formatCurrency(Number(unmaskedValue), currency));
-          onChange({
-            target: {
-              name: props.name,
-              value: unmaskedValue
-            }
+        onValueChange: ({ floatValue }) => {
+          onChange?.({
+            target: { name: props.name, value: floatValue?.toString() }
           });
         },
-        mask: `${formatted.symbol} integer\`.float`,
-        blocks: {
-          integer: {
-            mask: Number,
-            thousandsSeparator: ","
-          },
-          float: {
-            mask: IMask.MaskedRange,
-            from: 0,
-            to: 99,
-            maxLength: 2
-          }
-        },
-        value: formatted.formattedAmount,
-        overwrite: "shift"
+        valueIsNumericString: true,
+        getInputRef: ref,
+        decimalScale: 2
       }
     );
   }
@@ -1299,12 +1281,15 @@ var CurrencyInput = React14.forwardRef(function CurrencyInput2(props, ref) {
     disabled,
     ...innerProps
   } = props;
+  const { symbol, thousandSeparator, decimalSeparator, placeholder, fixedDecimalScale } = useCurrencySetting(currency);
+  const [value, setValue] = useState3(props.value);
   const [isOverLimit, setIsOverLimit] = useState3(
     !!props.value && props.value > Number(max)
   );
   const handleChange = useCallback3(
     (event) => {
       const amount = Number(event.target.value);
+      setValue(amount);
       onChange?.({ ...event, target: { name, value: amount } });
       if (amount > Number(max)) {
         setIsOverLimit(true);
@@ -1317,16 +1302,26 @@ var CurrencyInput = React14.forwardRef(function CurrencyInput2(props, ref) {
   const currencyFormatter = /* @__PURE__ */ React14.createElement(
     Input_default,
     {
+      ...innerProps,
       size: "sm",
       ref,
+      value,
+      placeholder,
       onChange: handleChange,
       disabled,
       required,
-      slotProps: { input: { component: TextMaskAdapter, currency } },
+      slotProps: {
+        input: {
+          component: TextMaskAdapter,
+          decimalSeparator,
+          thousandSeparator,
+          prefix: symbol,
+          fixedDecimalScale
+        }
+      },
       sx: {
         fontFamily: "monospace"
-      },
-      ...innerProps
+      }
     }
   );
   if (label) {
@@ -1340,7 +1335,7 @@ var CurrencyInput = React14.forwardRef(function CurrencyInput2(props, ref) {
       },
       /* @__PURE__ */ React14.createElement(FormLabel_default, null, label),
       currencyFormatter,
-      isOverLimit ? /* @__PURE__ */ React14.createElement(FormHelperText_default, null, /* @__PURE__ */ React14.createElement(InfoOutlined, null), new IntlMessageFormat(
+      isOverLimit ? /* @__PURE__ */ React14.createElement(FormHelperText_default, null, /* @__PURE__ */ React14.createElement(InfoOutlined, null), new IntlMessageFormat2(
         `limit: {amount, number, ::currency/${currency} unit-width-narrow}`
       ).format({ amount: max })) : helperText && /* @__PURE__ */ React14.createElement(FormHelperText_default, null, helperText)
     );
@@ -1880,7 +1875,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 as IMask2 } from "react-imask";
+import { IMaskInput, IMask } 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";
@@ -1931,7 +1926,7 @@ var TextMaskAdapter3 = React17.forwardRef(
   function TextMaskAdapter4(props, ref) {
     const { onChange, ...other } = props;
     return /* @__PURE__ */ React17.createElement(
-      IMaskInput2,
+      IMaskInput,
       {
         ...other,
         inputRef: ref,
@@ -1940,19 +1935,19 @@ var TextMaskAdapter3 = React17.forwardRef(
         pattern: "Y/`m/`d",
         blocks: {
           d: {
-            mask: IMask2.MaskedRange,
+            mask: IMask.MaskedRange,
             from: 1,
             to: 31,
             maxLength: 2
           },
           m: {
-            mask: IMask2.MaskedRange,
+            mask: IMask.MaskedRange,
             from: 1,
             to: 12,
             maxLength: 2
           },
           Y: {
-            mask: IMask2.MaskedRange,
+            mask: IMask.MaskedRange,
             from: 1900,
             to: 9999
           }
@@ -2092,7 +2087,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 IMask3 } from "react-imask";
+import { IMaskInput as IMaskInput2, IMask as IMask2 } 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";
@@ -2147,7 +2142,7 @@ var TextMaskAdapter5 = React18.forwardRef(
   function TextMaskAdapter6(props, ref) {
     const { onChange, ...other } = props;
     return /* @__PURE__ */ React18.createElement(
-      IMaskInput3,
+      IMaskInput2,
       {
         ...other,
         inputRef: ref,
@@ -2156,19 +2151,19 @@ var TextMaskAdapter5 = React18.forwardRef(
         pattern: "Y/`m/`d - Y/`m/`d",
         blocks: {
           d: {
-            mask: IMask3.MaskedRange,
+            mask: IMask2.MaskedRange,
             from: 1,
             to: 31,
             maxLength: 2
           },
           m: {
-            mask: IMask3.MaskedRange,
+            mask: IMask2.MaskedRange,
             from: 1,
             to: 12,
             maxLength: 2
           },
           Y: {
-            mask: IMask3.MaskedRange,
+            mask: IMask2.MaskedRange,
             from: 1900,
             to: 9999
           }
@@ -2417,7 +2412,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 IMask4 } from "react-imask";
+import { IMaskInput as IMaskInput3, IMask as IMask3 } 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";
@@ -2461,7 +2456,7 @@ var TextMaskAdapter7 = React23.forwardRef(
   function TextMaskAdapter8(props, ref) {
     const { onChange, ...other } = props;
     return /* @__PURE__ */ React23.createElement(
-      IMaskInput4,
+      IMaskInput3,
       {
         ...other,
         inputRef: ref,
@@ -2470,13 +2465,13 @@ var TextMaskAdapter7 = React23.forwardRef(
         pattern: "Y/`m - Y/`m",
         blocks: {
           m: {
-            mask: IMask4.MaskedRange,
+            mask: IMask3.MaskedRange,
             from: 1,
             to: 12,
             maxLength: 2
           },
           Y: {
-            mask: IMask4.MaskedRange,
+            mask: IMask3.MaskedRange,
             from: 1900,
             to: 9999
           }
@@ -2646,8 +2641,30 @@ function Select(props) {
     color,
     disabled,
     required,
+    onChange,
     ...innerProps
   } = props;
+  const handleChange = (event, newValue) => {
+    const _event = event || { target: {} };
+    const newEvent = {
+      ..._event,
+      // @ts-expect-error target에 name이 있을 수 있다.
+      target: { name: _event.target?.name, value: newValue || void 0 }
+    };
+    console.log(newEvent);
+    onChange?.(newEvent);
+  };
+  const select = /* @__PURE__ */ React25.createElement(
+    JoySelect,
+    {
+      ...innerProps,
+      required,
+      disabled,
+      size,
+      color,
+      onChange: handleChange
+    }
+  );
   if (label) {
     return /* @__PURE__ */ React25.createElement(
       FormControl_default,
@@ -2659,20 +2676,11 @@ function Select(props) {
         error
       },
       /* @__PURE__ */ React25.createElement(FormLabel_default, null, label),
-      /* @__PURE__ */ React25.createElement(JoySelect, { ...innerProps }),
+      select,
       helperText && /* @__PURE__ */ React25.createElement(FormHelperText_default, null, helperText)
     );
   }
-  return /* @__PURE__ */ React25.createElement(
-    JoySelect,
-    {
-      required,
-      disabled,
-      size,
-      color,
-      ...innerProps
-    }
-  );
+  return select;
 }
 Select.displayName = "Select";
 
@@ -2724,12 +2732,23 @@ var Switch = (props) => {
 Switch.displayName = "Switch";
 
 // src/components/Tabs/Tabs.tsx
-import { Tabs as JoyTabs, Tab as JoyTab, TabList as JoyTabList, TabPanel as JoyTabPanel } from "@mui/joy";
+import {
+  Tabs as JoyTabs,
+  Tab as JoyTab,
+  TabList as JoyTabList,
+  TabPanel as JoyTabPanel,
+  styled as styled14,
+  tabClasses
+} from "@mui/joy";
 import { motion as motion27 } from "framer-motion";
 var MotionTabs = motion27(JoyTabs);
 var Tabs = MotionTabs;
 Tabs.displayName = "Tabs";
-var MotionTab = motion27(JoyTab);
+var MotionTab = styled14(motion27(JoyTab))(({ theme }) => ({
+  [`&:not(.${tabClasses.selected})`]: {
+    color: theme.palette.neutral[700]
+  }
+}));
 var Tab = MotionTab;
 Tab.displayName = "Tab";
 var MotionTabList = motion27(JoyTabList);