@mindlogic-ai/logician-ui 2.0.0 → 3.0.0-alpha.1

package/src/components/Menu/MenuButton.types.ts

@@ -1,26 +1,28 @@
-import { MenuButtonProps as ChakraMenuButtonProps } from '@chakra-ui/react';
-
 import { Button } from '@/components/Button';
 import type { ButtonProps } from '@/components/Button/Button.types';
 import { IconButton } from '@/components/IconButton';
 import type { IconButtonProps as CustomIconButtonProps } from '@/components/IconButton/IconButton.types';
 
 // as 속성에 들어갈 `Button`과 `IconButton`에 따른 조건부 타입
-interface ButtonMenuButtonProps
-  extends ChakraMenuButtonProps,
-    Omit<ButtonProps, 'children'> {
+interface ButtonMenuButtonProps extends Omit<
+  ButtonProps,
+  'as' | 'colorScheme'
+> {
   as: typeof Button;
   rightIcon?: React.ReactElement;
   icon?: never;
+  children?: React.ReactNode;
 }
 
-interface IconButtonMenuButtonProps
-  extends Omit<ChakraMenuButtonProps, 'aria-label'>,
-    Omit<CustomIconButtonProps, 'children'> {
+interface IconButtonMenuButtonProps extends Omit<
+  CustomIconButtonProps,
+  'as' | 'colorScheme'
+> {
   as: typeof IconButton;
   icon?: React.ReactElement;
   rightIcon?: never;
   'aria-label': string;
+  children?: React.ReactNode;
 }
 
 export type CustomMenuButtonProps =

package/src/components/Menu/MenuItem.tsx

@@ -1,36 +1,36 @@
-import { MenuItem as ChakraMenuItem, useTheme } from '@chakra-ui/react';
+import { Menu, Spacer } from '@chakra-ui/react';
 
 import { ItemVariant, MenuItemProps } from './MenuItem.types';
 
 export const MenuItem = ({
   variant = ItemVariant.Default,
+  value,
   children,
+  icon,
+  rightIcon,
   ...rest
 }: MenuItemProps) => {
-  const theme = useTheme();
   const isDangerVariant = variant === ItemVariant.Danger;
 
   return (
-    <ChakraMenuItem
-      color={
-        isDangerVariant ? theme.semanticTokens.colors.danger.main : 'gray.1000'
-      }
-      iconSpacing={0}
-      fontSize="md"
+    <Menu.Item
+      value={value}
+      color={isDangerVariant ? 'danger.main' : 'gray.1000'}
       borderRadius="sm"
       py={2}
       minW="fit-content"
       fontWeight="semibold"
       gap={3}
       _hover={{
-        color: isDangerVariant
-          ? theme.semanticTokens.colors.danger.main
-          : 'gray.1500',
+        color: isDangerVariant ? 'danger.main' : 'gray.1500',
         backgroundColor: 'gray.50',
       }}
       {...rest}
     >
+      {icon && icon}
       {children}
-    </ChakraMenuItem>
+      {rightIcon && <Spacer />}
+      {rightIcon && rightIcon}
+    </Menu.Item>
   );
 };

package/src/components/Menu/MenuItem.types.ts

@@ -8,6 +8,9 @@ export const ItemVariant = {
 export type ItemVariant = (typeof ItemVariant)[keyof typeof ItemVariant];
 
 export interface MenuItemProps extends ChakraMenuItemProps {
+  value: string; // Required in Chakra v3 for menu item identification
   variant?: ItemVariant | null;
   onClick?: () => void;
+  icon?: React.ReactElement;
+  rightIcon?: React.ReactElement;
 }

package/src/components/Menu/MenuList.tsx

@@ -1,19 +1,26 @@
 import {
-  MenuList as ChakraMenuList,
-  MenuListProps as ChakraMenuListProps,
-  useTheme,
-  useToken,
+  Menu,
+  MenuContentProps as ChakraMenuContentProps,
+  Portal,
 } from '@chakra-ui/react';
 
-export const MenuList = ({ ...rest }: ChakraMenuListProps) => {
-  const theme = useTheme();
+export interface MenuListProps extends ChakraMenuContentProps {}
+
+export const MenuList = ({ children, ...rest }: MenuListProps) => {
   return (
-    <ChakraMenuList
-      border={`1px solid ${useToken('colors', 'gray.400')}`}
-      borderRadius="md"
-      boxShadow={`0 5px 20px 1px ${useToken('colors', 'gray.50')}`}
-      padding={1.5}
-      {...rest}
-    />
+    <Portal>
+      <Menu.Positioner>
+        <Menu.Content
+          border="1px solid"
+          borderColor="gray.200"
+          borderRadius="md"
+          boxShadow="0 5px 20px 1px var(--chakra-colors-gray-50)"
+          p="1.5"
+          {...rest}
+        >
+          {children}
+        </Menu.Content>
+      </Menu.Positioner>
+    </Portal>
   );
 };

package/src/components/Modal/Modal.stories.tsx

@@ -47,7 +47,7 @@ export const Default: Story = {
     return (
       <>
         <Button onClick={() => setIsOpen(true)}>Open Confirm Modal</Button>
-        <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
           <ModalContent>
             {args.headerTitle && <ModalHeader>{args.headerTitle}</ModalHeader>}
             {args.hasCloseButton && <ModalCloseButton />}
@@ -55,7 +55,7 @@ export const Default: Story = {
             {args.footerButtons && (
               <ModalFooter>
                 {args.footerButtons.map((button, index) => (
-                  <Button key={index} variant={button.variant || 'primary'}>
+                  <Button key={index} variant={button.variant || 'soft'}>
                     {button.label}
                   </Button>
                 ))}
@@ -78,7 +78,7 @@ export const WithHeader: Story = {
     return (
       <>
         <Button onClick={() => setIsOpen(true)}>Open Confirm Modal</Button>
-        <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
           <ModalContent>
             {args.headerTitle && <ModalHeader>{args.headerTitle}</ModalHeader>}
             {args.hasCloseButton && <ModalCloseButton />}
@@ -86,7 +86,7 @@ export const WithHeader: Story = {
             {args.footerButtons && (
               <ModalFooter>
                 {args.footerButtons.map((button, index) => (
-                  <Button key={index} variant={button.variant || 'primary'}>
+                  <Button key={index} variant={button.variant || 'soft'}>
                     {button.label}
                   </Button>
                 ))}
@@ -110,7 +110,7 @@ export const WithFooterButton: Story = {
     return (
       <>
         <Button onClick={() => setIsOpen(true)}>Open Confirm Modal</Button>
-        <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
           <ModalContent>
             {args.headerTitle && <ModalHeader>{args.headerTitle}</ModalHeader>}
             {args.hasCloseButton && <ModalCloseButton />}
@@ -118,7 +118,7 @@ export const WithFooterButton: Story = {
             {args.footerButtons && (
               <ModalFooter>
                 {args.footerButtons.map((button, index) => (
-                  <Button key={index} variant={button.variant || 'primary'}>
+                  <Button key={index} variant={button.variant || 'soft'}>
                     {button.label}
                   </Button>
                 ))}
@@ -134,8 +134,8 @@ export const WithFooterButton: Story = {
 export const TwoButtons: Story = {
   args: {
     footerButtons: [
-      { label: 'Cancel', variant: 'tertiary' },
-      { label: 'Save', variant: 'primary' },
+      { label: 'Cancel', variant: 'ghost' },
+      { label: 'Save', variant: 'solid' },
     ],
   },
   render: (args) => {
@@ -144,7 +144,7 @@ export const TwoButtons: Story = {
     return (
       <>
         <Button onClick={() => setIsOpen(true)}>Open Confirm Modal</Button>
-        <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
           <ModalContent>
             {args.headerTitle && <ModalHeader>{args.headerTitle}</ModalHeader>}
             {args.hasCloseButton && <ModalCloseButton />}
@@ -152,7 +152,7 @@ export const TwoButtons: Story = {
             {args.footerButtons && (
               <ModalFooter>
                 {args.footerButtons.map((button, index) => (
-                  <Button key={index} variant={button.variant || 'primary'}>
+                  <Button key={index} variant={button.variant || 'soft'}>
                     {button.label}
                   </Button>
                 ))}

package/src/components/Modal/Modal.tsx

@@ -1,14 +1,25 @@
 import React from 'react';
-import { Modal as ChakraModal } from '@chakra-ui/react';
+import { Dialog } from '@chakra-ui/react';
 
 import { ModalProps } from './Modal.types';
 import { ModalOverlay } from './ModalOverlay';
 
-export const Modal = ({ children, ...rest }: ModalProps) => {
+export const Modal = ({
+  children,
+  open,
+  onOpenChange,
+  ...rest
+}: ModalProps) => {
   return (
-    <ChakraModal isCentered closeOnOverlayClick {...rest}>
+    <Dialog.Root
+      open={open}
+      onOpenChange={onOpenChange}
+      placement="center"
+      closeOnInteractOutside
+      {...rest}
+    >
       <ModalOverlay />
       {children}
-    </ChakraModal>
+    </Dialog.Root>
   );
 };

package/src/components/Modal/Modal.types.ts

@@ -1,3 +1,3 @@
-import { ModalProps as ChakraModalProps } from '@chakra-ui/react';
+import { Dialog } from '@chakra-ui/react';
 
-export type ModalProps = ChakraModalProps;
+export type ModalProps = Dialog.RootProps;

package/src/components/Modal/ModalBody.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  ModalBody as ChakraModalBody,
-  ModalBodyProps as ChakraModalBodyProps,
-} from '@chakra-ui/react';
+import { Dialog } from '@chakra-ui/react';
 
-export const ModalBody = ({ ...rest }: ChakraModalBodyProps) => {
-  return <ChakraModalBody px={6} py={4} {...rest} />;
+export const ModalBody = ({ ...rest }: Dialog.BodyProps) => {
+  return <Dialog.Body px={6} py={4} {...rest} />;
 };

package/src/components/Modal/ModalCloseButton.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
-import {
-  ModalCloseButton as ChakraModalCloseButton,
-  ModalCloseButtonProps as ChakraModalCloseButtonProps,
-} from '@chakra-ui/react';
+import { Dialog } from '@chakra-ui/react';
 
-export const ModalCloseButton = ({ ...rest }: ChakraModalCloseButtonProps) => {
+export const ModalCloseButton = ({ ...rest }: Dialog.CloseTriggerProps) => {
   return (
-    <ChakraModalCloseButton
+    <Dialog.CloseTrigger
       color="gray.600"
       _hover={{
         color: 'primary.main',

package/src/components/Modal/ModalContent/ModalContent.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
-import { ModalContent as ChakraModalContent } from '@chakra-ui/react';
+import { Dialog, Portal } from '@chakra-ui/react';
 
 import { ModalContentProps } from './ModalContent.types';
 
-export const ModalContent = ({ ...rest }: ModalContentProps) => {
-  return <ChakraModalContent {...rest} />;
+export const ModalContent = ({ children, ...rest }: ModalContentProps) => {
+  return (
+    <Portal>
+      <Dialog.Positioner>
+        <Dialog.Content {...rest}>{children}</Dialog.Content>
+      </Dialog.Positioner>
+    </Portal>
+  );
 };

package/src/components/Modal/ModalContent/ModalContent.types.ts

@@ -1,3 +1,3 @@
-import { ModalContentProps as ChakraModalContentProps } from '@chakra-ui/react';
+import { DialogContentProps } from '@chakra-ui/react';
 
-export type ModalContentProps = ChakraModalContentProps;
+export interface ModalContentProps extends DialogContentProps {}

package/src/components/Modal/ModalFooter/ModalFooter.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
-import {
-  ModalFooter as ChakraModalFooter,
-  ModalFooterProps as ChakraModalFooterProps,
-} from '@chakra-ui/react';
+import { Dialog } from '@chakra-ui/react';
 
 import styles from './ModalFooter.module.css';
 
-export const ModalFooter = ({ className, ...rest }: ChakraModalFooterProps) => {
+export const ModalFooter = ({ className, ...rest }: Dialog.FooterProps) => {
   return (
-    <ChakraModalFooter
+    <Dialog.Footer
       className={[styles['ml-modal-footer'], className].join(' ')}
       gap={3}
       pt={4}

package/src/components/Modal/ModalHeader.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  ModalHeader as ChakraModalHeader,
-  ModalHeaderProps as ChakraModalHeaderProps,
-} from '@chakra-ui/react';
+import { Dialog } from '@chakra-ui/react';
 
-export const ModalHeader = ({ ...rest }: ChakraModalHeaderProps) => {
-  return <ChakraModalHeader fontSize="xl" {...rest} />;
+export const ModalHeader = ({ ...rest }: Dialog.HeaderProps) => {
+  return <Dialog.Header textStyle="h4" {...rest} />;
 };

package/src/components/Modal/ModalOverlay.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  ModalOverlay as ChakraModalOverlay,
-  ModalOverlayProps as ChakraModalOverlayProps,
-} from '@chakra-ui/react';
+import { Dialog } from '@chakra-ui/react';
 
-export const ModalOverlay = ({ ...rest }: ChakraModalOverlayProps) => {
-  return <ChakraModalOverlay {...rest} />;
+export const ModalOverlay = ({ ...rest }: Dialog.BackdropProps) => {
+  return <Dialog.Backdrop {...rest} />;
 };

package/src/components/MonthPicker/MonthButton/MonthButton.tsx

@@ -1,7 +1,10 @@
 import React, { memo } from 'react';
 
 import { Button } from '@/components/Button';
-import { ButtonVariant } from '@/components/Button/Button.types';
+import {
+  ButtonColorPalette,
+  ButtonVariant,
+} from '@/components/Button/Button.types';
 
 import {
   isMonthDisabled,
@@ -13,6 +16,11 @@ import {
 import { MonthRange } from '../MonthPicker.types';
 import { MonthButtonProps } from './MonthButton.types';
 
+type MonthButtonStyle = {
+  colorScheme: ButtonColorPalette;
+  variant: ButtonVariant;
+};
+
 export const MonthButton: React.FC<MonthButtonProps> = memo(
   ({
     month,
@@ -48,21 +56,27 @@ export const MonthButton: React.FC<MonthButtonProps> = memo(
       }
     };
 
-    const getMonthButtonVariant = (
+    const getMonthButtonStyle = (
       month: number,
       year: number,
       selectedRange?: MonthRange | null,
       selectionStart?: Date | null,
-      hoveredMonth?: { month: number; year: number } | null,
-      minMonth?: Date,
-      maxMonth?: Date
-    ): ButtonVariant => {
-      if (isMonthDisabled(month, year, minMonth, maxMonth)) return 'tertiary';
-      if (isMonthSelected(month, year, selectedRange)) return 'primary';
-      if (isSelectionStart(month, year, selectionStart)) return 'primary';
-      if (isMonthInRange(month, year, selectedRange)) return 'secondary';
+      hoveredMonth?: { month: number; year: number } | null
+    ): MonthButtonStyle => {
+      // Selected months get solid primary
+      if (isMonthSelected(month, year, selectedRange)) {
+        return { colorScheme: 'primary', variant: 'solid' };
+      }
+      if (isSelectionStart(month, year, selectionStart)) {
+        return { colorScheme: 'primary', variant: 'solid' };
+      }
+
+      // In-range months get soft primary
+      if (isMonthInRange(month, year, selectedRange)) {
+        return { colorScheme: 'primary', variant: 'soft' };
+      }
 
-      // Show preview range when hovering with a selection start
+      // Preview range when hovering with a selection start
       if (
         isMonthInPreviewRange(
           month,
@@ -71,24 +85,26 @@ export const MonthButton: React.FC<MonthButtonProps> = memo(
           hoveredMonth || null
         )
       ) {
-        return 'secondary';
+        return { colorScheme: 'primary', variant: 'soft' };
       }
 
-      return 'tertiary';
+      // Default: ghost neutral
+      return { colorScheme: 'neutral', variant: 'outline' };
     };
 
+    const style = getMonthButtonStyle(
+      month,
+      year,
+      selectedRange,
+      selectionStart,
+      hoveredMonth
+    );
+
     return (
       <Button
         size="sm"
-        variant={getMonthButtonVariant(
-          month,
-          year,
-          selectedRange,
-          selectionStart,
-          hoveredMonth,
-          minMonth,
-          maxMonth
-        )}
+        colorPalette={style.colorScheme}
+        variant={style.variant}
         onClick={handleClick}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}

package/src/components/MonthPicker/MonthButton/MonthButton.types.ts

@@ -2,11 +2,10 @@ import { ButtonProps } from '@/components/Button/Button.types';
 
 import { MonthRange } from '../MonthPicker.types';
 
-export interface MonthButtonProps
-  extends Omit<
-    ButtonProps,
-    'onClick' | 'variant' | 'disabled' | 'onMouseEnter' | 'onMouseLeave'
-  > {
+export interface MonthButtonProps extends Omit<
+  ButtonProps,
+  'onClick' | 'variant' | 'disabled' | 'onMouseEnter' | 'onMouseLeave'
+> {
   /** The month index (0-11) */
   month: number;
 

package/src/components/MonthPicker/MonthPicker.stories.tsx

@@ -30,7 +30,7 @@ const meta = {
       );
 
       return (
-        <VStack spacing={4} align="start" width="400px">
+        <VStack gap={4} align="start" width="400px">
           {context.parameters?.additionalContent}
           <Story
             args={{
@@ -48,10 +48,10 @@ const meta = {
               border="1px solid"
               borderColor="green.200"
             >
-              <Text fontSize="sm" fontWeight="semibold" color="green.700">
+              <Text textStyle="subtext" fontWeight="semibold" color="green.700">
                 ✓ Range Selected:
               </Text>
-              <Text fontSize="sm" color="green.600">
+              <Text textStyle="subtext" color="green.600">
                 {selectedRange.startMonth.toLocaleDateString()}
                 {selectedRange.endMonth ? (
                   <> - {selectedRange.endMonth.toLocaleDateString()}</>
@@ -90,10 +90,10 @@ export const WithConstraints: Story = {
   parameters: {
     additionalContent: (
       <Box>
-        <Text fontSize="md" fontWeight="semibold" mb={2}>
+        <Text fontWeight="semibold" mb={2}>
           With Date Constraints
         </Text>
-        <Text fontSize="sm" color="gray.600" mb={4}>
+        <Text textStyle="subtext" color="gray.600" mb={4}>
           Only allows selection 6 months before/after current date
         </Text>
       </Box>
@@ -108,10 +108,10 @@ export const Disabled: Story = {
   parameters: {
     additionalContent: (
       <Box>
-        <Text fontSize="md" fontWeight="semibold" mb={2}>
+        <Text fontWeight="semibold" mb={2}>
           Disabled State
         </Text>
-        <Text fontSize="sm" color="gray.600" mb={4}>
+        <Text textStyle="subtext" color="gray.600" mb={4}>
           The picker is disabled and cannot be interacted with
         </Text>
       </Box>
@@ -127,10 +127,10 @@ export const CustomFormat: Story = {
   parameters: {
     additionalContent: (
       <Box>
-        <Text fontSize="md" fontWeight="semibold" mb={2}>
+        <Text fontWeight="semibold" mb={2}>
           Custom Date Format
         </Text>
-        <Text fontSize="sm" color="gray.600" mb={4}>
+        <Text textStyle="subtext" color="gray.600" mb={4}>
           Uses full month names (MMMM yyyy) instead of abbreviated
         </Text>
       </Box>
@@ -142,14 +142,14 @@ export const CrossYearSelection: Story = {
   parameters: {
     additionalContent: (
       <Box>
-        <Text fontSize="md" fontWeight="semibold" mb={2}>
+        <Text fontWeight="semibold" mb={2}>
           Cross-Year Range Selection
         </Text>
-        <Text fontSize="sm" color="gray.600" mb={4}>
+        <Text textStyle="subtext" color="gray.600" mb={4}>
           Demonstrates selecting ranges across different years with immediate
           feedback.
         </Text>
-        <Box fontSize="sm" color="gray.700">
+        <Box textStyle="subtext" color="gray.700">
           <Text>
             • Click a month to start selection (shows immediately in input)
           </Text>