@ceed/ads 0.0.92 → 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 { 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,116 +1233,115 @@ Input.displayName = "Input";
 // src/components/Input/index.ts
 var Input_default = Input;
 
+// 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}`
+  ).format({ amount: 1e3 }).toString().replace(/\d/g, "").split("");
+  return {
+    symbol: `${symbol} `,
+    thousandSeparator,
+    decimalSeparator,
+    placeholder: decimalSeparator ? `${symbol} 0${decimalSeparator}00` : `${symbol} 0`,
+    fixedDecimalScale: !!decimalSeparator
+  };
+};
+
 // 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, "");
-}
 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 { onChange, ...innerProps } = props;
     return /* @__PURE__ */ React14.createElement(
-      IMaskInput,
+      NumericFormat,
       {
         ...innerProps,
-        inputRef: ref,
-        mask: `${currencySymbol}num`,
-        lazy: false,
-        overwrite: true,
-        onAccept: (value2) => {
-          setValue(Number(value2));
-          onChange({
-            target: {
-              name: props.name,
-              value: value2
-            }
+        onValueChange: ({ floatValue }) => {
+          onChange?.({
+            target: { name: props.name, value: floatValue?.toString() }
           });
         },
-        value: value.toString(),
-        unmask: true,
-        blocks: {
-          num: {
-            mask: Number,
-            thousandsSeparator: ",",
-            radix: ".",
-            expose: true,
-            scale: 2,
-            padFractionalZeros: currency !== "krw"
-          }
-        },
-        placeholder: `${currencySymbol}0.00`
+        valueIsNumericString: true,
+        getInputRef: ref,
+        decimalScale: 2
       }
     );
   }
 );
-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 { 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);
+      } else {
+        setIsOverLimit(false);
+      }
+    },
+    []
+  );
+  const currencyFormatter = /* @__PURE__ */ React14.createElement(
+    Input_default,
+    {
+      ...innerProps,
+      size: "sm",
+      ref,
+      value,
+      placeholder,
+      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,
+          decimalSeparator,
+          thousandSeparator,
+          prefix: symbol,
+          fixedDecimalScale
         }
       },
-      []
-    );
-    const currencyFormatter = /* @__PURE__ */ React14.createElement(
-      Input_default,
+      sx: {
+        fontFamily: "monospace"
+      }
+    }
+  );
+  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 IntlMessageFormat2(
+        `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 +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 } 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";
@@ -1927,7 +1926,7 @@ var TextMaskAdapter3 = React17.forwardRef(
   function TextMaskAdapter4(props, ref) {
     const { onChange, ...other } = props;
     return /* @__PURE__ */ React17.createElement(
-      IMaskInput2,
+      IMaskInput,
       {
         ...other,
         inputRef: ref,
@@ -2088,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 IMask2 } 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";
@@ -2143,7 +2142,7 @@ var TextMaskAdapter5 = React18.forwardRef(
   function TextMaskAdapter6(props, ref) {
     const { onChange, ...other } = props;
     return /* @__PURE__ */ React18.createElement(
-      IMaskInput3,
+      IMaskInput2,
       {
         ...other,
         inputRef: ref,
@@ -2413,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 IMask3 } 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";
@@ -2457,7 +2456,7 @@ var TextMaskAdapter7 = React23.forwardRef(
   function TextMaskAdapter8(props, ref) {
     const { onChange, ...other } = props;
     return /* @__PURE__ */ React23.createElement(
-      IMaskInput4,
+      IMaskInput3,
       {
         ...other,
         inputRef: ref,
@@ -2642,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,
@@ -2655,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";
 
@@ -2720,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);