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

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,89 +1,95 @@
-import { useState } from 'react';
-import { Button, Flex, useTheme } from '@chakra-ui/react';
-import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
+import { SegmentGroup } from '@chakra-ui/react';
 
-import { OptionStyles } from './SegmentedControl.styles';
-import { SegmentedControlProps } from './SegmentedControl.types';
+import {
+  SegmentedControlOption,
+  SegmentedControlProps,
+} from './SegmentedControl.types';
 
-export const SegmentedControl = ({
-  options,
-  value,
-  onSelect,
-  borderRadius = 'md',
-  size,
-  ...rest
-}: SegmentedControlProps) => {
-  const [internalValue, setInternalValue] = useState(options[0].value);
-  const theme = useTheme();
+export const SegmentedControl = forwardRef<
+  HTMLDivElement,
+  SegmentedControlProps
+>(function SegmentedControl(props, ref) {
+  const {
+    options,
+    value,
+    onSelect,
+    defaultValue,
+    size = 'md',
+    borderRadius = 'md',
+    ...rest
+  } = props;
 
-  // Use the controlled value if provided, otherwise use the internal state
-  const activeValue = value !== undefined ? value : internalValue;
-  const activeIndex = options.findIndex(
-    (option) => option.value === activeValue
-  );
+  // Normalize options to the format expected by SegmentGroup.Items
+  const items = options.map((option: SegmentedControlOption) => ({
+    value: option.value,
+    label: option.label,
+    disabled: option.disabled,
+  }));
 
-  const getControlPadding: (
-    size: SegmentedControlProps['size']
-  ) => SegmentedControlProps['padding'] = (size = 'md') => {
-    const paddings = {
-      xs: theme.space[1],
-      sm: theme.space[1],
-      md: theme.space[1],
-      lg: {},
-      xl: {},
-    };
-    return paddings[size];
+  // Map borderRadius values to actual pixel values for indicator
+  const borderRadiusMap: Record<string, string> = {
+    none: '0',
+    sm: '6px',
+    md: '8px',
+    lg: '12px',
+    xl: '32px',
+    full: '9999px',
   };
 
-  const handleSelect = (selectedValue: string) => {
-    if (value === undefined) {
-      setInternalValue(selectedValue);
-    }
-    if (onSelect) onSelect(selectedValue);
-  };
+  const indicatorRadius =
+    typeof borderRadius === 'string'
+      ? borderRadiusMap[borderRadius] || borderRadius
+      : borderRadius;
 
   return (
-    <Flex
-      position="relative"
-      borderRadius={borderRadius}
+    <SegmentGroup.Root
+      ref={ref}
+      value={value}
+      defaultValue={defaultValue ?? options[0]?.value}
+      onValueChange={(details: { value: string }) => {
+        if (onSelect) {
+          onSelect(details.value);
+        }
+      }}
+      size={size}
       bg="gray.50"
-      // p="1"
+      p="1"
+      borderRadius={borderRadius}
+      boxShadow="none"
+      w="100%"
+      css={{
+        // Chakra v3 CSS variables for styling
+        '--segment-indicator-bg': 'white',
+        '--segment-indicator-shadow':
+          '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)',
+        // Apply borderRadius to indicator
+        '& [data-part="indicator"]': {
+          borderRadius: indicatorRadius,
+        },
+        // Make all items equal width
+        '& [data-part="item"]': {
+          flex: 1,
+          _hover: {
+            bg: 'transparent',
+          },
+        },
+        // Item text colors - matching original design
+        '& [data-part="item-text"]': {
+          color: 'gray.600',
+          fontWeight: '500',
+        },
+        '& [data-part="item"][data-state="checked"] [data-part="item-text"]': {
+          color: 'gray.1300',
+          fontWeight: '600',
+        },
+      }}
       {...rest}
     >
-      <motion.div
-        initial={false}
-        animate={{
-          x: `calc(${100 * activeIndex}% + ${getControlPadding(size)})`,
-        }}
-        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
-        style={{
-          position: 'absolute',
-          // @ts-expect-error - Chakra UI responsive values in Framer Motion styles
-          top: getControlPadding(size),
-          // @ts-expect-error - Chakra UI responsive values in Framer Motion styles
-          bottom: getControlPadding(size),
-          left: `calc(${activeIndex * 2} * ${getControlPadding(size)})`,
-          width: `calc(${100 / options.length}% - 2 * ${getControlPadding(size)})`,
-          borderRadius: theme.radii[borderRadius],
-          background: theme.colors.white,
-          boxShadow: theme.shadows.md,
-        }}
-      />
-
-      {options.map((option) => (
-        <Button
-          key={option.value}
-          flex={1}
-          variant="ghost"
-          color={activeValue === option.value ? 'gray.1200' : 'gray.600'}
-          onClick={() => handleSelect(option.value)}
-          _hover={{ bg: 'transparent' }}
-          fontSize={size}
-          {...OptionStyles[size ?? 'md']}
-        >
-          {option.label}
-        </Button>
-      ))}
-    </Flex>
+      <SegmentGroup.Indicator />
+      <SegmentGroup.Items items={items} />
+    </SegmentGroup.Root>
   );
-};
+});
+
+SegmentedControl.displayName = 'SegmentedControl';

package/src/components/SegmentedControl/SegmentedControl.types.ts

@@ -1,16 +1,17 @@
 import { ReactNode } from 'react';
-import { FlexProps, theme } from '@chakra-ui/react';
+import { SegmentGroup } from '@chakra-ui/react';
 
 export type SegmentedControlOption = {
   label: ReactNode;
   value: string;
+  disabled?: boolean;
 };
 
-export type SegmentedControlProps = Omit<FlexProps, 'onSelect'> & {
+export type SegmentedControlProps = Omit<
+  SegmentGroup.RootProps,
+  'onValueChange' | 'defaultValue' | 'onSelect'
+> & {
   options: Array<SegmentedControlOption>;
-  value?: string;
   onSelect?: (selectedValue: string) => void;
-  // Value is key in Chakra theme
-  borderRadius?: string;
-  size?: Extract<keyof typeof theme.sizes, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
+  defaultValue?: string;
 };

package/src/components/SegmentedProgressBar/SegmentedProgressBar.stories.tsx

@@ -51,7 +51,7 @@ export const Default: Story = {
 
 export const BasicUsage: Story = {
   render: () => (
-    <VStack spacing={6} align="stretch" width="400px">
+    <VStack gap={6} align="stretch" width="400px">
       <Box>
         <Text mb={2} fontWeight="semibold">
           Basic Two-Segment Progress
@@ -60,7 +60,7 @@ export const BasicUsage: Story = {
           <ProgressSegment value={60} filledTrackColor="primary.main" />
           <ProgressSegment value={25} filledTrackColor="success.main" />
         </SegmentedProgressBar>
-        <Flex justify="space-between" mt={1} fontSize="sm" color="gray.600">
+        <Flex justify="space-between" mt={1} textStyle="subtext" color="gray.600">
           <Text>Primary: 60</Text>
           <Text>Success: 25</Text>
           <Text>Remaining: 15</Text>
@@ -72,7 +72,7 @@ export const BasicUsage: Story = {
 
 export const MultipleSegments: Story = {
   render: () => (
-    <VStack spacing={6} align="stretch" width="400px">
+    <VStack gap={6} align="stretch" width="400px">
       <Box>
         <Text mb={2} fontWeight="semibold">
           Multiple Segments with Different Colors
@@ -83,7 +83,7 @@ export const MultipleSegments: Story = {
           <ProgressSegment value={30} filledTrackColor="warning.main" />
           <ProgressSegment value={25} filledTrackColor="danger.main" />
         </SegmentedProgressBar>
-        <Flex justify="space-between" mt={2} fontSize="sm" color="gray.600">
+        <Flex justify="space-between" mt={2} textStyle="subtext" color="gray.600">
           <Text>Primary: 80</Text>
           <Text>Success: 45</Text>
           <Text>Warning: 30</Text>
@@ -96,7 +96,7 @@ export const MultipleSegments: Story = {
 
 export const WithStripes: Story = {
   render: () => (
-    <VStack spacing={6} align="stretch" width="400px">
+    <VStack gap={6} align="stretch" width="400px">
       <Box>
         <Text mb={2} fontWeight="semibold">
           Progress Segments with Stripes
@@ -105,20 +105,20 @@ export const WithStripes: Story = {
           <ProgressSegment
             value={45}
             filledTrackColor="primary.main"
-            hasStripe
+            striped
           />
           <ProgressSegment
             value={30}
             filledTrackColor="success.main"
-            hasStripe
+            striped
           />
           <ProgressSegment
             value={15}
             filledTrackColor="danger.main"
-            hasStripe
+            striped
           />
         </SegmentedProgressBar>
-        <Flex justify="space-between" mt={2} fontSize="sm" color="gray.600">
+        <Flex justify="space-between" mt={2} textStyle="subtext" color="gray.600">
           <Text>Completed: 45</Text>
           <Text>In Progress: 30</Text>
           <Text>Failed: 15</Text>
@@ -130,7 +130,7 @@ export const WithStripes: Story = {
 
 export const DifferentSizes: Story = {
   render: () => (
-    <VStack spacing={6} align="stretch" width="400px">
+    <VStack gap={6} align="stretch" width="400px">
       <Box>
         <Text mb={2} fontWeight="semibold">
           Small Progress Bar (8px)
@@ -166,12 +166,12 @@ export const DifferentSizes: Story = {
 
 export const RealWorldExample: Story = {
   render: () => (
-    <VStack spacing={6} align="stretch" width="500px">
+    <VStack gap={6} align="stretch" width="500px">
       <Box>
         <Text mb={2} fontWeight="semibold">
           Member Invitation Progress
         </Text>
-        <Text mb={4} fontSize="sm" color="gray.600">
+        <Text mb={4} textStyle="subtext" color="gray.600">
           Inviting 1,500 members in batches of 100
         </Text>
 
@@ -179,16 +179,16 @@ export const RealWorldExample: Story = {
           <ProgressSegment
             value={1200}
             filledTrackColor="success.main"
-            hasStripe
+            striped
           />
           <ProgressSegment
             value={150}
             filledTrackColor="danger.main"
-            hasStripe
+            striped
           />
         </SegmentedProgressBar>
 
-        <Flex justify="space-between" mt={2} fontSize="sm" color="gray.600">
+        <Flex justify="space-between" mt={2} textStyle="subtext" color="gray.600">
           <Text color="success.600">✓ 1,200 successful</Text>
           <Text color="danger.600">✗ 150 failed</Text>
           <Text>90% complete</Text>
@@ -200,7 +200,7 @@ export const RealWorldExample: Story = {
 
 export const EmptyState: Story = {
   render: () => (
-    <VStack spacing={6} align="stretch" width="400px">
+    <VStack gap={6} align="stretch" width="400px">
       <Box>
         <Text mb={2} fontWeight="semibold">
           Empty Progress Bar
@@ -208,7 +208,7 @@ export const EmptyState: Story = {
         <SegmentedProgressBar max={100} height="12px">
           {/* No segments - shows empty state */}
         </SegmentedProgressBar>
-        <Text mt={2} fontSize="sm" color="gray.600">
+        <Text mt={2} textStyle="subtext" color="gray.600">
           No progress yet
         </Text>
       </Box>
@@ -218,7 +218,7 @@ export const EmptyState: Story = {
 
 export const SingleSegment: Story = {
   render: () => (
-    <VStack spacing={6} align="stretch" width="400px">
+    <VStack gap={6} align="stretch" width="400px">
       <Box>
         <Text mb={2} fontWeight="semibold">
           Single Segment Progress
@@ -226,7 +226,7 @@ export const SingleSegment: Story = {
         <SegmentedProgressBar max={100} height="12px">
           <ProgressSegment value={75} filledTrackColor="primary.main" />
         </SegmentedProgressBar>
-        <Text mt={2} fontSize="sm" color="gray.600">
+        <Text mt={2} textStyle="subtext" color="gray.600">
           75% complete
         </Text>
       </Box>
@@ -236,7 +236,7 @@ export const SingleSegment: Story = {
 
 export const CustomColors: Story = {
   render: () => (
-    <VStack spacing={6} align="stretch" width="400px">
+    <VStack gap={6} align="stretch" width="400px">
       <Box>
         <Text mb={2} fontWeight="semibold">
           Custom Color Segments
@@ -247,7 +247,7 @@ export const CustomColors: Story = {
           <ProgressSegment value={25} filledTrackColor="#45B7D1" />
           <ProgressSegment value={20} filledTrackColor="#96CEB4" />
         </SegmentedProgressBar>
-        <Flex justify="space-between" mt={2} fontSize="sm" color="gray.600">
+        <Flex justify="space-between" mt={2} textStyle="subtext" color="gray.600">
           <Text>Red: 25</Text>
           <Text>Teal: 25</Text>
           <Text>Blue: 25</Text>

package/src/components/Select/MenuList/VirtualizedMenuList.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import { GroupBase } from 'react-select';
-import { useTheme } from '@chakra-ui/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
-import { optionStyles } from '../Select.styles';
+import { getOptionStyles } from '../Select.styles';
 import { MenuList } from './MenuList';
 import { VirtualizedMenuListProps } from './MenuList.types';
 import { useVirtualizedMenuListState } from './VirtualizedMenuListContext';
@@ -22,7 +21,6 @@ export const VirtualizedMenuList = <
   const childrenArray = React.Children.toArray(children ?? []);
   const childrenCount = childrenArray.length;
   const menuListRef = useRef(null);
-  const theme = useTheme();
   const { isInitialRender, previousChildrenCount } =
     useVirtualizedMenuListState();
 
@@ -75,7 +73,7 @@ export const VirtualizedMenuList = <
   }, [childrenArray.length, virtualizer]);
 
   // Default option styles with fallback values
-  const baseOptionStyle = optionStyles({
+  const baseOptionStyle = getOptionStyles({
     isDisabled: false,
     isFocused: false,
     isSelected: false,
@@ -121,7 +119,7 @@ export const VirtualizedMenuList = <
               cursor: baseOptionStyle.cursor,
               borderRadius: baseOptionStyle.borderRadius,
               // Add some necessary styles for proper display
-              padding: `${theme.space[0.5]} ${theme.space[1]}`,
+              padding: '2px 4px',
               userSelect: 'none',
               WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
               display: 'block',