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

package/src/components/MonthPicker/MonthPicker.tsx

@@ -8,13 +8,8 @@ import {
   HStack,
   Input,
   InputGroup,
-  InputLeftElement,
   Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
   Portal,
-  useDisclosure,
   VStack,
 } from '@chakra-ui/react';
 import { format, isAfter, isSameMonth } from 'date-fns';
@@ -51,7 +46,9 @@ export const MonthPicker: React.FC<MonthPickerProps> = ({
   name,
   ...boxProps
 }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [isOpen, setIsOpen] = useState(false);
+  const onOpen = () => setIsOpen(true);
+  const onClose = () => setIsOpen(false);
   const { language: locale } = useLocale();
   const translate = useTranslate();
 
@@ -206,94 +203,111 @@ export const MonthPicker: React.FC<MonthPickerProps> = ({
   }, [onChange]);
 
   const popoverContent = (
-    <PopoverContent width="320px">
-      <PopoverBody>
-        <VStack spacing={4} align="stretch">
-          {/* Year Navigation */}
-          <HStack justify="space-between" align="center">
-            <Button
-              size="sm"
-              variant="ghost"
-              onClick={() => handleYearChange('prev')}
-              disabled={!canNavigateToPrevYear}
-              opacity={!canNavigateToPrevYear ? 0.4 : 1}
-            >
-              <IoIosArrowBack />
-            </Button>
+    <Popover.Positioner>
+      <Popover.Content width="320px">
+        <Popover.Body>
+          <VStack gap={4} align="stretch">
+            {/* Year Navigation */}
+            <HStack justify="space-between" align="center">
+              <Button
+                size="sm"
+                colorPalette="neutral"
+                variant="ghost"
+                onClick={() => handleYearChange('prev')}
+                disabled={!canNavigateToPrevYear}
+                opacity={!canNavigateToPrevYear ? 0.4 : 1}
+              >
+                <IoIosArrowBack />
+              </Button>
 
-            <Text fontWeight="semibold" fontSize="lg">
-              {currentYear}
-            </Text>
+              <Text fontWeight="semibold" textStyle="h5">
+                {currentYear}
+              </Text>
 
-            <Button
-              size="sm"
-              variant="ghost"
-              onClick={() => handleYearChange('next')}
-              disabled={!canNavigateToNextYear}
-              opacity={!canNavigateToNextYear ? 0.4 : 1}
-            >
-              <IoChevronForward />
-            </Button>
-          </HStack>
+              <Button
+                size="sm"
+                colorPalette="neutral"
+                variant="ghost"
+                onClick={() => handleYearChange('next')}
+                disabled={!canNavigateToNextYear}
+                opacity={!canNavigateToNextYear ? 0.4 : 1}
+              >
+                <IoChevronForward />
+              </Button>
+            </HStack>
 
-          {/* Months Grid */}
-          <Grid templateColumns="repeat(3, 1fr)" gap={2}>
-            {monthNames.map((monthName, monthIndex) => (
-              <MonthButton
-                key={monthIndex}
-                month={monthIndex}
-                year={currentYear}
-                monthName={monthName}
-                selectedRange={selectedRange}
-                selectionStart={selectionStart}
-                hoveredMonth={hoveredMonth}
-                minMonth={minMonth}
-                maxMonth={maxMonth}
-                onClick={handleMonthClick}
-                onMouseEnter={handleMonthHover}
-                onMouseLeave={handleMonthHoverLeave}
-              />
-            ))}
-          </Grid>
+            {/* Months Grid */}
+            <Grid templateColumns="repeat(3, 1fr)" gap={2}>
+              {monthNames.map((monthName, monthIndex) => (
+                <MonthButton
+                  key={monthIndex}
+                  month={monthIndex}
+                  year={currentYear}
+                  monthName={monthName}
+                  selectedRange={selectedRange}
+                  selectionStart={selectionStart}
+                  hoveredMonth={hoveredMonth}
+                  minMonth={minMonth}
+                  maxMonth={maxMonth}
+                  onClick={handleMonthClick}
+                  onMouseEnter={handleMonthHover}
+                  onMouseLeave={handleMonthHoverLeave}
+                />
+              ))}
+            </Grid>
 
-          {/* Action Buttons */}
-          <HStack spacing={2} justify="flex-end">
-            <Button size="sm" variant="ghost" onClick={handleClear}>
-              {translate('clear')}
-            </Button>
-          </HStack>
-        </VStack>
-      </PopoverBody>
-    </PopoverContent>
+            {/* Action Buttons */}
+            <HStack gap={2} justify="flex-end">
+              <Button
+                size="sm"
+                colorPalette="neutral"
+                variant="ghost"
+                onClick={handleClear}
+              >
+                {translate('clear')}
+              </Button>
+            </HStack>
+          </VStack>
+        </Popover.Body>
+      </Popover.Content>
+    </Popover.Positioner>
   );
 
   return (
     <Box {...boxProps}>
-      <Popover
-        isOpen={isOpen}
-        onOpen={onOpen}
-        onClose={onClose}
-        placement="bottom-start"
+      <Popover.Root
+        open={isOpen}
+        onOpenChange={(e) => {
+          if (e.open) {
+            onOpen();
+          } else {
+            onClose();
+          }
+        }}
+        positioning={{ placement: 'bottom-start' }}
         {...popoverProps}
       >
-        <PopoverTrigger>
-          <InputGroup>
-            <InputLeftElement>
-              <MdOutlineCalendarToday boxSize="xs" color="gray.800" />
-            </InputLeftElement>
-            <Input
-              name={name}
-              value={displayValue}
-              placeholder={effectivePlaceholder}
-              readOnly
-              disabled={disabled}
-              cursor={disabled ? 'not-allowed' : 'pointer'}
-              onClick={disabled ? undefined : onOpen}
-            />
-          </InputGroup>
-        </PopoverTrigger>
+        <Popover.Trigger {...({ asChild: true } as any)}>
+          <Box>
+            <InputGroup
+              startElement={
+                <MdOutlineCalendarToday boxSize="xs" color="gray.800" />
+              }
+            >
+              <Input
+                name={name}
+                value={displayValue}
+                placeholder={effectivePlaceholder}
+                readOnly
+                disabled={disabled}
+                cursor={disabled ? 'not-allowed' : 'pointer'}
+                onClick={disabled ? undefined : onOpen}
+              />
+            </InputGroup>
+          </Box>
+        </Popover.Trigger>
         {usePortal ? <Portal>{popoverContent}</Portal> : popoverContent}
-      </Popover>
+      </Popover.Root>
     </Box>
   );
 };

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

@@ -1,4 +1,4 @@
-import { BoxProps, PopoverProps } from '@chakra-ui/react';
+import { BoxProps, Popover } from '@chakra-ui/react';
 
 export interface MonthRange {
   startMonth: Date;
@@ -34,7 +34,7 @@ export interface MonthPickerProps extends Omit<BoxProps, 'onChange'> {
   usePortal?: boolean;
 
   /** Props for the popover */
-  popoverProps?: Partial<PopoverProps>;
+  popoverProps?: Partial<Popover.RootProps>;
 
   /** Name attribute for form usage */
   name?: string;

package/src/components/Pagination/Pagination.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { SingleValue } from 'react-select';
-import { Flex, useTheme } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 
 import { IoChevronForward, IoIosArrowBack } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
@@ -36,7 +36,6 @@ export const Pagination = ({
   onItemsPerPageOptionChange,
   ...rest
 }: PaginationProps) => {
-  const theme = useTheme();
   const translate = useTranslate();
   const [uncontrolledCurrentPage, setUncontrolledCurrentPage] =
     useState<number>(1);
@@ -86,15 +85,15 @@ export const Pagination = ({
           <Flex align="center" gap={2}>
             <Select
               styles={{
-                control: (base, state) => ({
+                control: (base, _state) => ({
                   ...base,
-                  fontSize: theme.fontSizes.sm,
+                  fontSize: '0.875rem',
                   padding: 0,
                   minHeight: '28px',
                 }),
-                dropdownIndicator: (base, props) => ({
+                dropdownIndicator: (base, _props) => ({
                   ...base,
-                  padding: `0 ${theme.space[1]}`,
+                  padding: '0 4px',
                 }),
               }}
               options={itemsPerPageOptions.map((option) => ({
@@ -128,19 +127,25 @@ export const Pagination = ({
             </Subtitle>
             <Flex align="center">
               <IconButton
-                icon={<IoIosArrowBack boxSize="sm" />}
+                colorPalette="neutral"
+                variant="ghost"
                 aria-label={translate('previous') as string}
                 onClick={handleBack}
-                isDisabled={currentPage <= 1}
+                disabled={currentPage <= 1}
                 color={currentPage === 1 ? 'gray.400' : 'gray.1500'}
-              />
+              >
+                <IoIosArrowBack boxSize="sm" />
+              </IconButton>
               <IconButton
-                icon={<IoChevronForward boxSize="sm" />}
+                colorPalette="neutral"
+                variant="ghost"
                 aria-label={translate('go_next_page_button') as string}
                 onClick={handleNext}
-                isDisabled={currentPage >= maxPage}
+                disabled={currentPage >= maxPage}
                 color={currentPage === maxPage ? 'gray.400' : 'gray.1500'}
-              />
+              >
+                <IoChevronForward boxSize="sm" />
+              </IconButton>
             </Flex>
           </>
         )}

package/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -1,10 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Stack, Text } from '@chakra-ui/react';
 
 import { PasswordInput } from './PasswordInput';
 
 const meta = {
   title: 'Components/PasswordInput',
   component: PasswordInput,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg'],
+    },
+  },
 } satisfies Meta<typeof PasswordInput>;
 
 export default meta;
@@ -12,3 +20,37 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const WithSizes: Story = {
+  render: () => (
+    <Stack maxW="300px">
+      <PasswordInput placeholder="xs" size="xs" />
+      <PasswordInput placeholder="sm" size="sm" />
+      <PasswordInput placeholder="md" size="md" />
+      <PasswordInput placeholder="lg" size="lg" />
+    </Stack>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [visible, setVisible] = useState(false);
+    return (
+      <Stack maxW="300px">
+        <PasswordInput
+          defaultValue="secret"
+          visible={visible}
+          onVisibleChange={setVisible}
+        />
+        <Text>Password is {visible ? 'visible' : 'hidden'}</Text>
+      </Stack>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    defaultValue: 'password123',
+  },
+};

package/src/components/PasswordInput/PasswordInput.tsx

@@ -1,40 +1,66 @@
-import { ForwardedRef, forwardRef, useState } from 'react';
+import { ForwardedRef, forwardRef } from 'react';
+import { LuEye, LuEyeOff } from 'react-icons/lu';
+import {
+  IconButton,
+  InputGroup,
+  mergeRefs,
+  useControllableState,
+} from '@chakra-ui/react';
 
-import { FaRegEye, FaRegEyeSlash } from '../Icon';
-import { IconButton } from '../IconButton';
 import { Input } from '../Input';
 import { PasswordInputProps } from './PasswordInput.types';
 
 export const PasswordInput = forwardRef(
   (
-    { wrapperProps, rightElementProps, ...rest }: PasswordInputProps,
+    {
+      rootProps,
+      defaultVisible = false,
+      visible: visibleProp,
+      onVisibleChange,
+      visibilityIcon = { on: <LuEye />, off: <LuEyeOff /> },
+      disabled,
+      ...rest
+    }: PasswordInputProps,
     ref?: ForwardedRef<HTMLInputElement>
   ) => {
-    const [show, setShow] = useState<boolean>(false);
-    const handleClick = () => setShow(!show);
+    const [visible, setVisible] = useControllableState({
+      value: visibleProp,
+      defaultValue: defaultVisible,
+      onChange: onVisibleChange,
+    });
+
+    const handleToggle = () => setVisible(!visible);
 
     return (
-      <Input
-        ref={ref}
-        wrapperProps={{ ...wrapperProps }}
-        trimWhiteSpace
-        {...rest}
-        type={show ? 'text' : 'password'}
-        rightIcon={
+      <InputGroup
+        endElement={
           <IconButton
-            icon={
-              show ? (
-                <FaRegEye fill="gray.900" boxSize="sm" />
-              ) : (
-                <FaRegEyeSlash fill="gray.900" boxSize="sm" />
-              )
-            }
-            onClick={handleClick}
+            tabIndex={-1}
+            me="-2"
+            aspectRatio="square"
+            size="sm"
+            variant="ghost"
+            height="calc(100% - {spacing.2})"
             aria-label="Toggle password visibility"
-          />
+            onPointerDown={(e) => {
+              if (disabled) return;
+              if (e.button !== 0) return;
+              e.preventDefault();
+              handleToggle();
+            }}
+          >
+            {visible ? visibilityIcon.off : visibilityIcon.on}
+          </IconButton>
         }
-        rightElementProps={{ ...rightElementProps }}
-      />
+        {...rootProps}
+      >
+        <Input
+          {...rest}
+          disabled={disabled}
+          ref={mergeRefs(ref as any)}
+          type={visible ? 'text' : 'password'}
+        />
+      </InputGroup>
     );
   }
 );

package/src/components/PasswordInput/PasswordInput.types.ts

@@ -1,11 +1,25 @@
-import {
-  InputGroupProps,
-  InputProps as ChakraInputProps,
-  InputRightElementProps,
-} from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import { GroupProps, InputProps } from '@chakra-ui/react';
 
-export interface PasswordInputProps
-  extends Omit<ChakraInputProps, 'rightIcon'> {
-  wrapperProps?: InputGroupProps;
-  rightElementProps?: InputRightElementProps;
+export interface PasswordInputProps extends Omit<InputProps, 'type'> {
+  /**
+   * Props for the root InputGroup wrapper
+   */
+  rootProps?: GroupProps;
+  /**
+   * The default visibility state of the password input.
+   */
+  defaultVisible?: boolean;
+  /**
+   * The controlled visibility state of the password input.
+   */
+  visible?: boolean;
+  /**
+   * Callback invoked when the visibility state changes.
+   */
+  onVisibleChange?: (visible: boolean) => void;
+  /**
+   * Custom icons for the visibility toggle button.
+   */
+  visibilityIcon?: { on: ReactNode; off: ReactNode };
 }

package/src/components/PinInput/PinInput.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import ReactPinInput from 'react-pin-input';
-import { useTheme, useToken } from '@chakra-ui/react';
+import { useToken } from '@chakra-ui/react';
 
 import { PinInputProps } from './PinInput.types';
 
@@ -14,7 +14,8 @@ export const PinInput = ({
   ...rest
 }: PinInputProps) => {
   const pinInputRef = useRef<ReactPinInput>(null);
-  const theme = useTheme();
+  const primaryColor = useToken('colors', 'primary.main')[0];
+  const grayColor = useToken('colors', 'gray.200')[0];
 
   useEffect(() => {
     // Automatically focus the PinInput component on mount
@@ -29,18 +30,15 @@ export const PinInput = ({
       type={isNumberOnly ? 'numeric' : 'custom'}
       inputMode={isNumberOnly ? 'number' : 'text'}
       inputStyle={{
-        borderColor: 'gray.200',
-        borderRadius: theme.radii.md,
-        width: theme.sizes[12],
-        height: theme.sizes[12],
+        borderColor: grayColor,
+        borderRadius: '8px',
+        width: '48px',
+        height: '48px',
         ...inputStyle,
       }}
       inputFocusStyle={{
-        borderColor: useToken(
-          'colors',
-          theme.semanticTokens.colors.primary.main
-        ),
-        boxShadow: `0 0 0 1px ${useToken('colors', theme.semanticTokens.colors.primary.main)}`,
+        borderColor: primaryColor,
+        boxShadow: `0 0 0 1px ${primaryColor}`,
       }}
       onComplete={onChange}
       autoSelect

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -23,33 +23,33 @@ export const Basic: Story = {};
 // All sizes in one view
 export const AllSizes: Story = {
   render: () => (
-    <VStack spacing={4} align="stretch">
+    <VStack gap={4} align="stretch">
       <Box>
-        <Text mb={2} fontSize="sm" fontWeight="medium">
+        <Text mb={2} fontWeight="medium">
           Extra Small (xs) - 4px
         </Text>
         <ProgressBar size="xs" value={60} />
       </Box>
       <Box>
-        <Text mb={2} fontSize="sm" fontWeight="medium">
+        <Text mb={2} fontWeight="medium">
           Small (sm) - 8px
         </Text>
         <ProgressBar size="sm" value={60} />
       </Box>
       <Box>
-        <Text mb={2} fontSize="sm" fontWeight="medium">
+        <Text mb={2} fontWeight="medium">
           Medium (md) - 16px (Default)
         </Text>
         <ProgressBar size="md" value={60} />
       </Box>
       <Box>
-        <Text mb={2} fontSize="sm" fontWeight="medium">
+        <Text mb={2} fontWeight="medium">
           Large (lg) - 24px
         </Text>
         <ProgressBar size="lg" value={60} />
       </Box>
       <Box>
-        <Text mb={2} fontSize="sm" fontWeight="medium">
+        <Text mb={2} fontWeight="medium">
           Extra Large (xl) - 32px
         </Text>
         <ProgressBar size="xl" value={60} />

package/src/components/ProgressBar/ProgressBar.tsx

@@ -4,7 +4,7 @@ import { sizeStyles } from './ProgressBar.styles';
 import { ProgressBarProps } from './ProgressBar.types';
 
 export const ProgressBar = ({
-  filledTrackColor,
+  filledTrackColor = 'primary.main',
   value,
   size = 'md',
   ...rest
@@ -12,18 +12,20 @@ export const ProgressBar = ({
   const styles = sizeStyles[size];
 
   return (
-    <ChakraProgress
-      sx={{
-        '& > div': {
-          backgroundColor: filledTrackColor ?? 'primary.main', // filledTrack
-          transition: 'width 0.3s ease-in-out',
-        },
-        bg: 'gray.200',
-      }}
-      value={value}
-      {...styles}
-      {...rest}
-    />
+    <ChakraProgress.Root value={value} {...rest}>
+      <ChakraProgress.Track
+        bgColor="gray.200"
+        height={styles.height}
+        borderRadius={styles.borderRadius}
+        overflow="hidden"
+      >
+        <ChakraProgress.Range
+          bgColor={filledTrackColor}
+          borderRadius={styles.borderRadius}
+          transition="width 0.3s ease-in-out"
+        />
+      </ChakraProgress.Track>
+    </ChakraProgress.Root>
   );
 };
 

package/src/components/ProgressBar/ProgressBar.types.ts

@@ -1,8 +1,8 @@
-import { ProgressProps as ChakraProgressProps } from '@chakra-ui/react';
+import { ProgressRootProps as ChakraProgressRootProps } from '@chakra-ui/react';
 
 export type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
-export interface ProgressBarProps extends ChakraProgressProps {
+export interface ProgressBarProps extends ChakraProgressRootProps {
   filledTrackColor?: string;
   size?: ProgressBarSize;
 }

package/src/components/RadialProgress/RadialProgress.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, useTheme, useToken } from '@chakra-ui/react';
+import { Box, useToken } from '@chakra-ui/react';
 
 import { Text } from '../Typography';
 import {
@@ -18,13 +18,11 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
   className,
   ...rest
 }) => {
-  const theme = useTheme();
-
   // Helper function to resolve color tokens
   const resolveColor = (color: string): string => {
     try {
       // Try to resolve as a token first
-      const resolvedColor = useToken('colors', color);
+      const resolvedColor = useToken('colors', color)[0];
       return resolvedColor || color;
     } catch {
       // If token resolution fails, return the original color