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

package/src/components/Code/Code.types.ts

@@ -4,9 +4,8 @@ import { BoxProps } from '@chakra-ui/react';
 /**
  * Code component props
  */
-export interface CodeProps
-  extends Omit<SyntaxHighlighterProps, 'style' | 'customStyle'> {
-  children: string;
+export interface CodeProps extends SyntaxHighlighterProps {
+  children: string; // Restrict to string only (original allows string | string[])
   /**
    * Callback for when the copy button is clicked. No copy button is rendered if this prop is not provided.
    * The user is expected to handle the copying behavior.
@@ -15,14 +14,6 @@ export interface CodeProps
    */
   onCopy?: (str: string) => void;
 
-  language?: string;
-
-  // Style object from react-syntax-highlighter
-  style?: { [key: string]: React.CSSProperties };
-
-  // Custom style object for the syntax highlighter
-  customStyle?: React.CSSProperties;
-
   containerProps?: BoxProps;
 
   /**

package/src/components/Code/_components/CopyButton.tsx

@@ -35,14 +35,17 @@ export const CopyButton = ({
   };
 
   return (
-    <Tooltip label={labelText} isOpen={isTooltipOpen} placement="top">
+    <Tooltip content={labelText} open={isTooltipOpen} placement="top">
       <IconButton
         aria-label="Copy code"
-        icon={<FaRegCopy boxSize="sm" />}
         onClick={handleClick}
         p={0}
+        colorPalette="neutral"
+        variant="ghost"
         {...rest}
-      />
+      >
+        <FaRegCopy boxSize="sm" />
+      </IconButton>
     </Tooltip>
   );
 };

package/src/components/CodeTabs/CodeTabs.tsx

@@ -10,35 +10,66 @@ import { IconButton } from '../IconButton';
 import { useTabsContext } from '../Tabs/TabsContext';
 import { Tooltip } from '../Tooltip';
 import { CodeTabsProps } from './CodeTabs.types';
+
 const CopyButton = ({
   onCopy,
   code,
 }: Pick<CodeTabsProps, 'onCopy' | 'code'>) => {
   const translate = useTranslate();
   const [tooltipText, setTooltipText] = useState(translate('copy'));
+  const [isTooltipOpen, setIsTooltipOpen] = useState<boolean | undefined>(
+    undefined
+  );
   const { selectedIndex } = useTabsContext();
 
-  const handleCopyClick = () => {
-    onCopy?.(code[Object.keys(code)[selectedIndex]]);
+  const handleCopyClick = async () => {
+    const codeToCopy = code[Object.keys(code)[selectedIndex]];
+
+    // Copy to clipboard
+    try {
+      await navigator.clipboard.writeText(codeToCopy || '');
+    } catch {
+      // Fallback for older browsers
+      const textArea = document.createElement('textarea');
+      textArea.value = codeToCopy || '';
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textArea);
+    }
+
+    // Call onCopy callback if provided
+    onCopy?.(codeToCopy);
+
+    // Show "Copied!" tooltip
     setTooltipText(translate('copied'));
-    const t = setTimeout(() => {
+    setIsTooltipOpen(true);
+
+    setTimeout(() => {
       setTooltipText(translate('copy'));
+      setIsTooltipOpen(undefined);
     }, 1500);
-    return () => clearTimeout(t);
   };
 
   return (
-    <Tooltip label={tooltipText} placement="top">
+    <Tooltip content={tooltipText} placement="top" open={isTooltipOpen}>
       <IconButton
         aria-label="Copy"
         borderRadius="full"
-        icon={<FaRegCopy boxSize="xs" />}
         size="sm"
+        colorPalette="neutral"
+        variant="ghost"
+        color="gray.800"
         _hover={{
-          bgColor: 'whiteAlpha.500',
+          bgColor: 'whiteAlpha.400',
+        }}
+        _active={{
+          bgColor: 'whiteAlpha.400',
         }}
         onClick={handleCopyClick}
-      />
+      >
+        <FaRegCopy boxSize="xs" />
+      </IconButton>
     </Tooltip>
   );
 };
@@ -58,7 +89,7 @@ export const CodeTabs = ({ code, onCopy, ...rest }: CodeTabsProps) => {
           {languages.map((language) => (
             <Tab
               key={`${language}-tab`}
-              color="gray.800"
+              bg="none"
               px={3}
               py={1}
               m={2}

package/src/components/CodeTabs/CodeTabs.types.ts

@@ -1,4 +1,4 @@
-import { TabsProps } from '@chakra-ui/react';
+import { TabsProps } from '@/components/Tabs';
 
 export interface CodeTabsProps extends Omit<TabsProps, 'children' | 'onCopy'> {
   /**

package/src/components/CopyableCode/CopyableCode.tsx

@@ -38,11 +38,9 @@ export const CopyableCode = ({
         />
       </Card>
       <Button
-        variant="primary"
-        bgColor="primary.dark"
-        borderColor="primary.dark"
+        colorPalette="primary"
+        variant="solid"
         size="xs"
-        leftIcon={<FaRegCopy boxSize="xs" />}
         onClick={onCopy}
         position="absolute"
         right={4}
@@ -50,7 +48,7 @@ export const CopyableCode = ({
         transform="translateY(-50%)"
         zIndex={1}
       >
-        {translate('copy')}
+        <FaRegCopy boxSize="xs" /> {translate('copy')}
       </Button>
     </Flex>
   );

package/src/components/DatePicker/RangeDatePicker.tsx

@@ -1,8 +1,11 @@
+import { Popover } from '@chakra-ui/react';
 import {
   RangeDatepicker as BaseRangeDatePicker,
   RangeDatepickerProps,
 } from 'chakra-dayzed-datepicker';
+import { format } from 'date-fns';
 
+import { Button, ButtonProps } from '../Button';
 import { MdOutlineCalendarToday } from '../Icon';
 
 export const RangeDatePicker = ({
@@ -11,27 +14,22 @@ export const RangeDatePicker = ({
   usePortal = true,
   ...rest
 }: RangeDatepickerProps) => {
+  const dateFormat = configs?.dateFormat ?? 'MMM dd, yyyy';
+
   return (
     <BaseRangeDatePicker
       usePortal={usePortal}
       {...rest}
       configs={{
         ...configs,
-        dateFormat: configs?.dateFormat ?? 'MMM dd, yyyy',
+        dateFormat,
       }}
       propsConfigs={{
         triggerBtnProps: {
-          justifyContent: 'left',
-          pl: 2,
           fontWeight: 'regular',
           color: 'gray.1500',
           fontSize: 'md',
-          leftIcon: (
-            <MdOutlineCalendarToday
-              color="gray.600"
-              style={{ marginInlineEnd: 3 }}
-            />
-          ),
+          ...propsConfigs?.triggerBtnProps,
         },
         inputProps: {
           color: 'primary.dark',
@@ -39,31 +37,21 @@ export const RangeDatePicker = ({
         },
         popoverCompProps: {
           popoverContentProps: {
-            p: 2,
-            borderRadius: 16,
-            border: '1px solid',
-            borderColor: 'blue.300',
-            boxShadow: 'lg',
-            bg: 'blue.100',
-            sx: {
+            css: {
               '.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',
               },
@@ -75,24 +63,25 @@ export const RangeDatePicker = ({
         calendarPanelProps: {
           wrapperProps: {
             gap: 4,
+            border: 'none',
             ...propsConfigs?.calendarPanelProps?.wrapperProps,
           },
           dividerProps: {
-            borderStyle: 'none',
+            display: 'none',
             ...propsConfigs?.calendarPanelProps?.dividerProps,
           },
           contentProps: {
             px: 6,
             py: 4,
-            border: '1px solid',
-            borderColor: 'blue.300',
+            borderWidth: '1px',
+            borderColor: 'primary.lightest',
             borderRadius: 16,
             bg: 'white',
             ...propsConfigs?.calendarPanelProps?.contentProps,
           },
           bodyProps: {
             gap: 0,
-            spacingY: 1,
+            rowGap: 1,
             ...propsConfigs?.calendarPanelProps?.bodyProps,
           },
           ...propsConfigs?.calendarPanelProps,
@@ -104,7 +93,7 @@ export const RangeDatePicker = ({
         weekdayLabelProps: {
           mb: 2,
           color: 'gray.1000',
-          fontSize: 'xs',
+          fontSize: 'sm',
           fontWeight: 'regular',
           ...propsConfigs?.weekdayLabelProps,
         },
@@ -115,25 +104,25 @@ export const RangeDatePicker = ({
             color: 'gray.1500',
             fontWeight: 'regular',
             _hover: {
-              background: 'primary.light',
+              background: 'primary.lightest',
               ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps?._hover,
             },
             ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps,
           },
-          // Today
           todayBtnProps: {
             fontWeight: 'semibold',
             ...propsConfigs?.dayOfMonthBtnProps?.todayBtnProps,
           },
           selectedBtnProps: {
             color: 'white',
-            background: 'primary.light',
+            background: 'none',
             fontWeight: 'semibold',
             position: 'relative',
+            border: 'none',
             zIndex: 1,
             borderRadius: 0,
             _hover: {
-              background: 'primary.light',
+              background: 'none',
             },
             _before: {
               content: '""',
@@ -150,14 +139,35 @@ export const RangeDatePicker = ({
           },
           isInRangeBtnProps: {
             color: 'primary.dark',
-            background: 'primary.light',
-            borderRadius: 0,
+            background: 'primary.lightest',
+            borderRadius: 'md',
             ...propsConfigs?.dayOfMonthBtnProps?.isInRangeBtnProps,
           },
           ...propsConfigs?.dayOfMonthBtnProps,
         },
         ...propsConfigs,
       }}
-    />
+    >
+      {(selectedDates) => (
+        <Popover.Trigger asChild>
+          <Button
+            pl={2}
+            colorPalette="neutral"
+            variant="outline"
+            {...(propsConfigs?.triggerBtnProps as ButtonProps)}
+          >
+            <MdOutlineCalendarToday
+              color="gray.400"
+              style={{ marginInlineEnd: 3 }}
+            />
+            {selectedDates && selectedDates.length > 0
+              ? selectedDates.length === 1
+                ? `${format(selectedDates[0], dateFormat)} - ${dateFormat}`
+                : `${format(selectedDates[0], dateFormat)} - ${format(selectedDates[1], dateFormat)}`
+              : ''}
+          </Button>
+        </Popover.Trigger>
+      )}
+    </BaseRangeDatePicker>
   );
 };

package/src/components/DatePicker/SingleDatePicker.tsx

@@ -1,8 +1,11 @@
+import { Popover } from '@chakra-ui/react';
 import {
   SingleDatepicker,
   SingleDatepickerProps,
 } from 'chakra-dayzed-datepicker';
+import { format } from 'date-fns';
 
+import { Button, ButtonProps } from '../Button';
 import { MdOutlineCalendarToday } from '../Icon';
 
 export const SingleDatePicker = ({
@@ -11,27 +14,23 @@ export const SingleDatePicker = ({
   usePortal = true,
   ...rest
 }: SingleDatepickerProps) => {
+  const dateFormat = configs?.dateFormat ?? 'MM/dd/yyyy';
+
   return (
     <SingleDatepicker
       usePortal={usePortal}
       {...rest}
       configs={{
         ...configs,
-        dateFormat: configs?.dateFormat ?? 'MM/dd/yyyy',
+        dateFormat,
       }}
       propsConfigs={{
         triggerBtnProps: {
           justifyContent: 'left',
-          pl: 2,
           fontWeight: 'regular',
           color: 'gray.1500',
           fontSize: 'md',
-          leftIcon: (
-            <MdOutlineCalendarToday
-              color="gray.600"
-              style={{ marginInlineEnd: 3 }}
-            />
-          ),
+          ...propsConfigs?.triggerBtnProps,
         },
         inputProps: {
           color: 'primary.dark',
@@ -39,9 +38,6 @@ export const SingleDatePicker = ({
         },
         popoverCompProps: {
           popoverContentProps: {
-            borderRadius: 16,
-            border: '1px solid',
-            borderColor: 'blue.300',
             boxShadow: 'lg',
             ...propsConfigs?.popoverCompProps?.popoverContentProps,
           },
@@ -53,17 +49,17 @@ export const SingleDatePicker = ({
             ...propsConfigs?.calendarPanelProps?.wrapperProps,
           },
           dividerProps: {
-            borderStyle: 'none',
+            display: 'none',
             ...propsConfigs?.calendarPanelProps?.dividerProps,
           },
           contentProps: {
+            borderWidth: 0,
             p: 4,
-            border: 'none',
             ...propsConfigs?.calendarPanelProps?.contentProps,
           },
           bodyProps: {
             gap: 0,
-            spacingY: 1,
+            rowGap: 1,
             ...propsConfigs?.calendarPanelProps?.bodyProps,
           },
           ...propsConfigs?.calendarPanelProps,
@@ -75,7 +71,6 @@ export const SingleDatePicker = ({
         weekdayLabelProps: {
           mb: 2,
           color: 'gray.1000',
-          fontSize: 'xs',
           fontWeight: 'regular',
           ...propsConfigs?.weekdayLabelProps,
         },
@@ -84,20 +79,21 @@ export const SingleDatePicker = ({
             width: 34,
             height: 34,
             color: 'gray.1500',
+            fontSize: 'sm',
             fontWeight: 'regular',
             _hover: {
-              background: 'primary.light',
+              background: 'primary.lightest',
               ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps?._hover,
             },
             ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps,
           },
-          // Today
           todayBtnProps: {
             fontWeight: 'semibold',
             ...propsConfigs?.dayOfMonthBtnProps?.todayBtnProps,
           },
           selectedBtnProps: {
             color: 'white',
+            border: 'none',
             background: 'primary.main',
             borderRadius: 'full',
             ...propsConfigs?.dayOfMonthBtnProps?.selectedBtnProps,
@@ -106,6 +102,23 @@ export const SingleDatePicker = ({
         },
         ...propsConfigs,
       }}
-    />
+    >
+      {(selectedDate) => (
+        <Popover.Trigger asChild>
+          <Button
+            pl={2}
+            colorPalette="neutral"
+            variant="outline"
+            {...(propsConfigs?.triggerBtnProps as ButtonProps)}
+          >
+            <MdOutlineCalendarToday
+              color="gray.400"
+              style={{ marginInlineEnd: 3 }}
+            />
+            {selectedDate ? format(selectedDate, dateFormat) : ''}
+          </Button>
+        </Popover.Trigger>
+      )}
+    </SingleDatepicker>
   );
 };

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -70,32 +70,32 @@ User Agent: ${errorInfo.userAgent}`;
           bgColor="white"
           boxShadow="2xl"
         >
-          <VStack spacing={6} align="center" w="full" mx="auto">
+          <VStack gap={6} align="center" w="full" mx="auto">
             {/* Error Icon */}
             <Box
               position="relative"
               p={4}
-              bg="danger.lighter"
+              bg="danger.lightest"
               borderRadius="full"
             >
               <MdError boxSize="xl" color="danger.main" />
             </Box>
 
             {/* Error Title */}
-            <VStack spacing={3} align="center" w="full">
-              <H1 color="gray.1200" fontSize="3xl" fontWeight="bold">
+            <VStack gap={3} align="center" w="full">
+              <H1 color="gray.1200" textStyle="h2" fontWeight="bold">
                 {translate('error_boundary_title')}
               </H1>
-              <Subtitle color="gray.1000" fontSize="lg" maxW="md">
+              <Subtitle color="gray.1000" textStyle="h5" maxW="md">
                 {translate('error_boundary_subtitle')}
               </Subtitle>
             </VStack>
 
             {/* Error Message */}
             <Card
-              bg="danger.lighter"
+              bg="danger.lightest"
               border="1px solid"
-              borderColor="danger.light"
+              borderColor="danger.lighter"
               p={4}
               w="full"
             >
@@ -109,11 +109,16 @@ User Agent: ${errorInfo.userAgent}`;
             </Card>
 
             {/* Support Information */}
-            <Card bg="primary.light" borderColor="primary.light" p={6} w="full">
+            <Card
+              bg="primary.lightest"
+              borderColor="primary.lighter"
+              p={6}
+              w="full"
+            >
               <H4 color="primary.dark" mb={4} textAlign="center">
                 {translate('support_information')}
               </H4>
-              <VStack spacing={2} align="stretch" mb={4}>
+              <VStack gap={2} align="stretch" mb={4}>
                 <Flex justify="space-between">
                   <Text color="primary.main" fontWeight="semibold">
                     {translate('error_id')}:
@@ -165,21 +170,19 @@ User Agent: ${errorInfo.userAgent}`;
                   onClick={copyErrorInfo}
                   size="sm"
                   minW="fit-content"
-                  variant="tertiary"
-                  leftIcon={<FaRegCopy boxSize="xs" />}
+                  variant="ghost"
                 >
-                  {translate('copy_error_details')}
+                  <FaRegCopy boxSize="xs" /> {translate('copy_error_details')}
                 </Button>
               </Flex>
             </Card>
 
             {/* Action Buttons */}
-            <VStack spacing={3} w="full" align="center">
+            <VStack gap={3} w="full" align="center">
               <Button
                 onClick={onErrorReset}
                 size="lg"
-                variant="primary"
-                leftIcon={<HiRefresh />}
+                variant="solid"
                 _hover={{
                   transform: 'translateY(-1px)',
                   boxShadow: 'lg',
@@ -187,16 +190,15 @@ User Agent: ${errorInfo.userAgent}`;
                 w="full"
                 maxW="300px"
               >
-                {translate('try_again')}
+                <HiRefresh /> {translate('try_again')}
               </Button>
 
               <Button
                 onClick={() => window.location.reload()}
                 size="sm"
-                variant="tertiary"
-                leftIcon={<HiRefresh />}
+                variant="ghost"
               >
-                {translate('refresh_page')}
+                <HiRefresh /> {translate('refresh_page')}
               </Button>
             </VStack>
           </VStack>

package/src/components/ExpandableText/ExpandableText.tsx

@@ -53,12 +53,15 @@ export const ExpandableText = ({
     <Component {...rest}>
       {displayText}
       {isLong && (
-        <>
-          {' '}
-          <Link as="button" onClick={handleToggle} aria-expanded={isExpanded}>
-            {isExpanded ? translate('see_less') : translate('see_more')}
-          </Link>
-        </>
+        <Link
+          as="button"
+          textDecor="none"
+          _hover={{ color: 'primary.dark' }}
+          onClick={handleToggle}
+          aria-expanded={isExpanded}
+        >
+          {isExpanded ? translate('see_less') : translate('see_more')}
+        </Link>
       )}
     </Component>
   );

package/src/components/FileInput/FileInput.tsx

@@ -1,9 +1,9 @@
 import { ChangeEventHandler, forwardRef } from 'react';
-import { Box, Flex, Input, useTheme } from '@chakra-ui/react';
+import { Box, Flex, Input } from '@chakra-ui/react';
 
 import { LuUpload } from '@/components/Icon';
 import { Spinner } from '@/components/Spinner';
-import { Text } from '@/components/Typography';
+import { Subtext } from '@/components/Typography';
 import { useTranslate } from '@/hooks/useTranslate';
 
 import { FileInputProps } from './FileInput.types';
@@ -20,7 +20,6 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
     },
     ref
   ) => {
-    const theme = useTheme();
     const translate = useTranslate();
 
     const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -37,7 +36,7 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
         align="center"
         justify="center"
         border="1px dashed"
-        borderColor="gray.500"
+        borderColor="gray.300"
         position="relative"
         overflow="hidden"
         borderRadius="md"
@@ -75,7 +74,7 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
             flexDir="column"
             justify="center"
             align="center"
-            bgColor={`${theme.colors.white}da`}
+            bgColor="rgba(255, 255, 255, 0.85)"
             opacity={bgImage ? 0 : 1}
             transition="ease-in"
             _groupHover={{ opacity: 1 }} // Set opacity to 1 on parent hover
@@ -86,16 +85,16 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
               <Flex w="100%" flexDir="column" align="center" justify="center">
                 <Box
                   borderRadius="lg"
-                  bgColor={bgImage ? 'transparent' : 'gray.50'}
+                  bgColor={bgImage ? 'transparent' : 'gray.100'}
                   p={3}
                   mb={1}
                   w="fit-content"
                 >
-                  <LuUpload color={bgImage ? 'gray.1200' : 'gray.800'} />
+                  <LuUpload color={bgImage ? 'gray.1200' : 'gray.600'} />
                 </Box>
-                <Text color={bgImage ? 'gray.1200' : 'gray.800'}>
+                <Subtext color={bgImage ? 'gray.1200' : 'gray.600'}>
                   {fileInputLabel || translate('upload_your_file')}
-                </Text>
+                </Subtext>
               </Flex>
             )}
           </Flex>