@mindlogic-ai/logician-ui 2.0.0-alpha.21 → 2.0.0-alpha.23

package/dist/index.d.mts

@@ -12,6 +12,8 @@ import { DataKey as DataKey$1 } from 'recharts/types/util/types.d';
 import { Options } from 'react-markdown';
 import { MDXEditorProps as MDXEditorProps$1, MDXEditorMethods } from '@mdxeditor/editor';
 import { GroupBase, Props } from 'react-select';
+import * as _chakra_ui_react_dist_types_toast_toast from '@chakra-ui/react/dist/types/toast/toast';
+import * as _chakra_ui_react_dist_types_toast_toast_types from '@chakra-ui/react/dist/types/toast/toast.types';
 
 declare const Accordion: (props: AccordionProps) => react_jsx_runtime.JSX.Element;
 
@@ -835,7 +837,7 @@ interface SeeMoreButtonProps extends ButtonProps$1 {
 declare const SeeMoreButton: ({ currentCount, maxCount, ...rest }: SeeMoreButtonProps) => react_jsx_runtime.JSX.Element;
 
 type SegmentedControlOption = {
-    label: string;
+    label: ReactNode;
     value: string;
 };
 type SegmentedControlProps = Omit<FlexProps, 'onSelect'> & {
@@ -1017,7 +1019,7 @@ declare const Textarea: _chakra_ui_react.ComponentWithAs<"textarea", TextareaPro
 interface MLToastOptions {
     title?: ReactNode;
     description: ReactNode;
-    status?: Extract<UseToastOptions$1['status'], 'success' | 'error' | 'info'>;
+    status?: Extract<UseToastOptions$1['status'], 'info' | 'warning' | 'success' | 'error'>;
 }
 interface ToastProps extends Omit<BoxProps, 'title'>, MLToastOptions {
 }
@@ -1029,9 +1031,40 @@ declare const Toast: ({ title, description, status, onClose, ...rest }: ToastPro
     onClose?: () => void;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const toastStyles: Record<string, BoxProps>;
+declare const toastStyles: {
+    info: {
+        bg: "primary.light";
+        color: "primary.dark";
+        borderColor: "primary.lighter";
+    };
+    warning: {
+        bg: "warning.lighter";
+        color: "warning.dark";
+        borderColor: "warning.light";
+    };
+    success: {
+        bg: "success.lighter";
+        color: "success.dark";
+        borderColor: "success.light";
+    };
+    error: {
+        bg: "danger.lighter";
+        color: "danger.dark";
+        borderColor: "danger.light";
+    };
+};
 
-declare const useToast: (props?: UseToastOptions) => ({ status, title, description, position, styles: stylesProp, ...rest }: UseToastOptions) => ToastId;
+declare const useToast: (props?: UseToastOptions) => (({ status, title, description, position, styles: stylesProp, ...rest }: UseToastOptions) => ToastId) & {
+    close: (id: ToastId) => void;
+    closeAll: (options?: _chakra_ui_react_dist_types_toast_toast_types.CloseAllToastsOptions | undefined) => void;
+    update: (id: ToastId, options: Omit<_chakra_ui_react.UseToastOptions, "id">) => void;
+    isActive: (id: ToastId) => boolean;
+    promise: <Result extends unknown, Err extends Error = Error>(promise: Promise<Result>, options: {
+        success: _chakra_ui_react_dist_types_toast_toast.MaybeFunction<_chakra_ui_react_dist_types_toast_toast.UseToastPromiseOption, [Result]>;
+        error: _chakra_ui_react_dist_types_toast_toast.MaybeFunction<_chakra_ui_react_dist_types_toast_toast.UseToastPromiseOption, [Err]>;
+        loading: _chakra_ui_react_dist_types_toast_toast.UseToastPromiseOption;
+    }) => void;
+};
 
 interface TooltipProps extends TooltipProps$1 {
 }

package/dist/index.d.ts

@@ -12,6 +12,8 @@ import { DataKey as DataKey$1 } from 'recharts/types/util/types.d';
 import { Options } from 'react-markdown';
 import { MDXEditorProps as MDXEditorProps$1, MDXEditorMethods } from '@mdxeditor/editor';
 import { GroupBase, Props } from 'react-select';
+import * as _chakra_ui_react_dist_types_toast_toast from '@chakra-ui/react/dist/types/toast/toast';
+import * as _chakra_ui_react_dist_types_toast_toast_types from '@chakra-ui/react/dist/types/toast/toast.types';
 
 declare const Accordion: (props: AccordionProps) => react_jsx_runtime.JSX.Element;
 
@@ -835,7 +837,7 @@ interface SeeMoreButtonProps extends ButtonProps$1 {
 declare const SeeMoreButton: ({ currentCount, maxCount, ...rest }: SeeMoreButtonProps) => react_jsx_runtime.JSX.Element;
 
 type SegmentedControlOption = {
-    label: string;
+    label: ReactNode;
     value: string;
 };
 type SegmentedControlProps = Omit<FlexProps, 'onSelect'> & {
@@ -1017,7 +1019,7 @@ declare const Textarea: _chakra_ui_react.ComponentWithAs<"textarea", TextareaPro
 interface MLToastOptions {
     title?: ReactNode;
     description: ReactNode;
-    status?: Extract<UseToastOptions$1['status'], 'success' | 'error' | 'info'>;
+    status?: Extract<UseToastOptions$1['status'], 'info' | 'warning' | 'success' | 'error'>;
 }
 interface ToastProps extends Omit<BoxProps, 'title'>, MLToastOptions {
 }
@@ -1029,9 +1031,40 @@ declare const Toast: ({ title, description, status, onClose, ...rest }: ToastPro
     onClose?: () => void;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const toastStyles: Record<string, BoxProps>;
+declare const toastStyles: {
+    info: {
+        bg: "primary.light";
+        color: "primary.dark";
+        borderColor: "primary.lighter";
+    };
+    warning: {
+        bg: "warning.lighter";
+        color: "warning.dark";
+        borderColor: "warning.light";
+    };
+    success: {
+        bg: "success.lighter";
+        color: "success.dark";
+        borderColor: "success.light";
+    };
+    error: {
+        bg: "danger.lighter";
+        color: "danger.dark";
+        borderColor: "danger.light";
+    };
+};
 
-declare const useToast: (props?: UseToastOptions) => ({ status, title, description, position, styles: stylesProp, ...rest }: UseToastOptions) => ToastId;
+declare const useToast: (props?: UseToastOptions) => (({ status, title, description, position, styles: stylesProp, ...rest }: UseToastOptions) => ToastId) & {
+    close: (id: ToastId) => void;
+    closeAll: (options?: _chakra_ui_react_dist_types_toast_toast_types.CloseAllToastsOptions | undefined) => void;
+    update: (id: ToastId, options: Omit<_chakra_ui_react.UseToastOptions, "id">) => void;
+    isActive: (id: ToastId) => boolean;
+    promise: <Result extends unknown, Err extends Error = Error>(promise: Promise<Result>, options: {
+        success: _chakra_ui_react_dist_types_toast_toast.MaybeFunction<_chakra_ui_react_dist_types_toast_toast.UseToastPromiseOption, [Result]>;
+        error: _chakra_ui_react_dist_types_toast_toast.MaybeFunction<_chakra_ui_react_dist_types_toast_toast.UseToastPromiseOption, [Err]>;
+        loading: _chakra_ui_react_dist_types_toast_toast.UseToastPromiseOption;
+    }) => void;
+};
 
 interface TooltipProps extends TooltipProps$1 {
 }

package/dist/index.js

@@ -2260,9 +2260,10 @@ var CopyableCode = ({
 };
 var ToastIcon = ({ status }) => {
   const iconProps = {
+    info: /* @__PURE__ */ jsxRuntime.jsx(chunkELL2BUC7_js.LuInfo, { boxSize: "md", color: "primary.main" }),
+    warning: /* @__PURE__ */ jsxRuntime.jsx(chunkELL2BUC7_js.IoWarning, { boxSize: "lg", color: "warning.main" }),
     success: /* @__PURE__ */ jsxRuntime.jsx(chunkELL2BUC7_js.IoIosCheckmarkCircle, { boxSize: "lg", color: "success.main" }),
-    error: /* @__PURE__ */ jsxRuntime.jsx(chunkELL2BUC7_js.MdError, { boxSize: "lg", color: "danger.main" }),
-    info: /* @__PURE__ */ jsxRuntime.jsx(chunkELL2BUC7_js.LuInfo, { boxSize: "md", color: "primary.main" })
+    error: /* @__PURE__ */ jsxRuntime.jsx(chunkELL2BUC7_js.MdError, { boxSize: "lg", color: "danger.main" })
   };
   return iconProps[status];
 };
@@ -2303,16 +2304,21 @@ var Toast = ({
 
 // src/components/Toast/Toast.styles.ts
 var toastStyles = {
-  success: {
-    bg: "success.lighter",
-    color: "success.dark",
-    borderColor: "success.light"
-  },
   info: {
     bg: "primary.light",
     color: "primary.dark",
     borderColor: "primary.lighter"
   },
+  warning: {
+    bg: "warning.lighter",
+    color: "warning.dark",
+    borderColor: "warning.light"
+  },
+  success: {
+    bg: "success.lighter",
+    color: "success.dark",
+    borderColor: "success.light"
+  },
   error: {
     bg: "danger.lighter",
     color: "danger.dark",
@@ -2367,7 +2373,13 @@ var useToast = (props) => {
     activeToasts.current.push(toastId);
     return toastId;
   };
-  return showToast;
+  return Object.assign(showToast, {
+    close: toast.close,
+    closeAll: toast.closeAll,
+    update: toast.update,
+    isActive: toast.isActive,
+    promise: toast.promise
+  });
 };
 
 // src/components/CrossPageToasts/CrossPageToasts.tsx
@@ -2543,7 +2555,6 @@ var RangeDatePicker = ({
         dateFormat: configs?.dateFormat ?? "MMM dd, yyyy"
       },
       propsConfigs: {
-        // Manually make it look like an Input
         triggerBtnProps: {
           justifyContent: "left",
           pl: 2,
@@ -2562,9 +2573,80 @@ var RangeDatePicker = ({
           color: "primary.dark",
           ...propsConfigs?.inputProps
         },
+        popoverCompProps: {
+          popoverContentProps: {
+            p: 2,
+            borderRadius: 16,
+            border: "1px solid",
+            borderColor: "blue.300",
+            boxShadow: "lg",
+            bg: "blue.100",
+            sx: {
+              '.chakra-button[aria-pressed="true"]': {
+                borderRadius: "full"
+              },
+              // pressed="true" 직전의 pressed="false" 요소에 borderRight
+              '.chakra-button[aria-pressed="false"]:has(+ .chakra-button[aria-pressed="true"])': {
+                borderRightRadius: "sm"
+              },
+              // pressed="true" 직후의 pressed="false" 요소에 borderLeft
+              '.chakra-button[aria-pressed="true"] + .chakra-button[aria-pressed="false"]': {
+                borderLeftRadius: "sm"
+              },
+              // week row의 왼쪽 테두리
+              '.chakra-button[aria-pressed="false"]:nth-child(7n + 1)': {
+                borderLeftRadius: "sm"
+              },
+              // week row 오른쪽 테두리
+              '.chakra-button[aria-pressed="false"]:nth-child(7n)': {
+                borderRightRadius: "sm"
+              }
+            },
+            ...propsConfigs?.popoverCompProps?.popoverContentProps
+          },
+          ...propsConfigs?.popoverCompProps
+        },
+        calendarPanelProps: {
+          wrapperProps: {
+            gap: 4,
+            ...propsConfigs?.calendarPanelProps?.wrapperProps
+          },
+          dividerProps: {
+            borderStyle: "none",
+            ...propsConfigs?.calendarPanelProps?.dividerProps
+          },
+          contentProps: {
+            px: 6,
+            py: 4,
+            border: "1px solid",
+            borderColor: "blue.300",
+            borderRadius: 16,
+            bg: "white",
+            ...propsConfigs?.calendarPanelProps?.contentProps
+          },
+          bodyProps: {
+            gap: 0,
+            spacingY: 1,
+            ...propsConfigs?.calendarPanelProps?.bodyProps
+          },
+          ...propsConfigs?.calendarPanelProps
+        },
+        dateNavBtnProps: {
+          color: "primary.main",
+          ...propsConfigs?.dateNavBtnProps
+        },
+        weekdayLabelProps: {
+          mb: 2,
+          color: "gray.1000",
+          fontSize: "xs",
+          fontWeight: "regular",
+          ...propsConfigs?.weekdayLabelProps
+        },
         dayOfMonthBtnProps: {
-          // Regular day
           defaultBtnProps: {
+            width: 34,
+            height: 34,
+            color: "gray.1500",
             fontWeight: "regular",
             _hover: {
               background: "primary.light",
@@ -2574,18 +2656,36 @@ var RangeDatePicker = ({
           },
           // Today
           todayBtnProps: {
-            color: "gray.1200",
             fontWeight: "semibold",
             ...propsConfigs?.dayOfMonthBtnProps?.todayBtnProps
           },
           selectedBtnProps: {
-            color: "primary.dark",
+            color: "white",
             background: "primary.light",
+            fontWeight: "semibold",
+            position: "relative",
+            zIndex: 1,
+            borderRadius: 0,
+            _hover: {
+              background: "primary.light"
+            },
+            _before: {
+              content: '""',
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+              background: "primary.main",
+              borderRadius: "full",
+              zIndex: -1
+            },
             ...propsConfigs?.dayOfMonthBtnProps?.selectedBtnProps
           },
           isInRangeBtnProps: {
             color: "primary.dark",
             background: "primary.light",
+            borderRadius: 0,
             ...propsConfigs?.dayOfMonthBtnProps?.isInRangeBtnProps
           },
           ...propsConfigs?.dayOfMonthBtnProps
@@ -2611,14 +2711,12 @@ var SingleDatePicker = ({
         dateFormat: configs?.dateFormat ?? "MM/dd/yyyy"
       },
       propsConfigs: {
-        // Manually make it look like an Input
         triggerBtnProps: {
           justifyContent: "left",
           pl: 2,
           fontWeight: "regular",
           color: "gray.1500",
           fontSize: "md",
-          height: "100%",
           leftIcon: /* @__PURE__ */ jsxRuntime.jsx(
             chunkELL2BUC7_js.MdOutlineCalendarToday,
             {
@@ -2631,9 +2729,53 @@ var SingleDatePicker = ({
           color: "primary.dark",
           ...propsConfigs?.inputProps
         },
+        popoverCompProps: {
+          popoverContentProps: {
+            borderRadius: 16,
+            border: "1px solid",
+            borderColor: "blue.300",
+            boxShadow: "lg",
+            ...propsConfigs?.popoverCompProps?.popoverContentProps
+          },
+          ...propsConfigs?.popoverCompProps
+        },
+        calendarPanelProps: {
+          wrapperProps: {
+            gap: 4,
+            ...propsConfigs?.calendarPanelProps?.wrapperProps
+          },
+          dividerProps: {
+            borderStyle: "none",
+            ...propsConfigs?.calendarPanelProps?.dividerProps
+          },
+          contentProps: {
+            p: 4,
+            border: "none",
+            ...propsConfigs?.calendarPanelProps?.contentProps
+          },
+          bodyProps: {
+            gap: 0,
+            spacingY: 1,
+            ...propsConfigs?.calendarPanelProps?.bodyProps
+          },
+          ...propsConfigs?.calendarPanelProps
+        },
+        dateNavBtnProps: {
+          color: "primary.main",
+          ...propsConfigs?.dateNavBtnProps
+        },
+        weekdayLabelProps: {
+          mb: 2,
+          color: "gray.1000",
+          fontSize: "xs",
+          fontWeight: "regular",
+          ...propsConfigs?.weekdayLabelProps
+        },
         dayOfMonthBtnProps: {
-          // Regular day
           defaultBtnProps: {
+            width: 34,
+            height: 34,
+            color: "gray.1500",
             fontWeight: "regular",
             _hover: {
               background: "primary.light",
@@ -2643,13 +2785,13 @@ var SingleDatePicker = ({
           },
           // Today
           todayBtnProps: {
-            color: "gray.1200",
             fontWeight: "semibold",
             ...propsConfigs?.dayOfMonthBtnProps?.todayBtnProps
           },
           selectedBtnProps: {
-            color: "primary.dark",
-            background: "primary.light",
+            color: "white",
+            background: "primary.main",
+            borderRadius: "full",
             ...propsConfigs?.dayOfMonthBtnProps?.selectedBtnProps
           },
           ...propsConfigs?.dayOfMonthBtnProps