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

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',

package/src/components/Select/Select.stories.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Box, Text } from '@chakra-ui/react';
 
 import { Select } from '.';
 
@@ -38,43 +39,45 @@ export const Combobox: Story = {
   },
 };
 
-export const OnScrollToBottom: Story = {
+export const ManyOptions: Story = {
   args: {
-    options: Array.from({ length: 50 }, (_, i) => ({
+    options: Array.from({ length: 100 }, (_, i) => ({
       label: `Option ${i + 1}`,
       value: `option${i + 1}`,
     })),
-    onMenuScrollToBottom: () => {
-      console.log('scrolled to bottom');
-    },
   },
 };
 
-export const OnScrollToBottomNewItems: Story = {
-  render: (args) => {
-    const [options, setOptions] = useState(
-      Array.from({ length: 500 }, (_, i) => ({
-        label: `Option ${i + 1}`,
-        value: `option${i + 1}`,
-      }))
-    );
-    return (
+export const WithValueDisplay = () => {
+  const [selectedOption, setSelectedOption] = useState<{
+    label: string;
+    value: string;
+  } | null>({ label: 'Option 1', value: 'option1' });
+
+  const options = [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+    { label: 'Option 4', value: 'option4' },
+  ];
+
+  return (
+    <Box>
       <Select
-        {...args}
         options={options}
-        isMulti={true}
-        isSearchable={true}
-        onMenuScrollToBottom={() => {
-          console.log('scrolled to bottom');
-          setOptions((prev) => [
-            ...prev,
-            ...Array.from({ length: 500 }, (_, i) => ({
-              label: `Option ${prev.length + i + 1}`,
-              value: `option${prev.length + i + 1}`,
-            })),
-          ]);
-        }}
+        value={selectedOption}
+        onChange={(newValue) => setSelectedOption(newValue)}
       />
-    );
-  },
+      <Box mt={4} p={4} borderWidth="1px" borderRadius="md" bg="gray.50">
+        <Text fontWeight="semibold" mb={2}>
+          Selected Value:
+        </Text>
+        <Text color="primary.dark" fontWeight="bold">
+          {selectedOption
+            ? `${selectedOption.label} (${selectedOption.value})`
+            : 'None selected'}
+        </Text>
+      </Box>
+    </Box>
+  );
 };

package/src/components/Select/Select.styles.ts

@@ -1,100 +1,77 @@
-import { useToken } from '@chakra-ui/react';
+/**
+ * Select component styles (Chakra v3 compatible)
+ *
+ * Note: These functions accept resolved color values from useToken()
+ * since Chakra v3 doesn't export useTheme() hook.
+ */
 
-import theme from '@/theme/index';
+export type SelectColors = Record<string, string>;
 
-import { SelectVariant } from './Select.types';
-
-export const placeholderStyles = {
-  color: theme.colors.gray[800],
-  fontSize: theme.fontSizes.p,
-  fontWeight: theme.fontWeights.semibold,
-};
+export const getPlaceholderStyles = (colors: SelectColors) => ({
+  color: colors.gray600,
+  fontSize: '14px',
+  fontWeight: 'semibold',
+});
 
-export const menuStyles = {
+export const getMenuStyles = (colors: SelectColors) => ({
   width: 'max-content',
   minWidth: '100%',
-  backgroundColor: theme.colors.white,
-  borderRadius: theme.radii.md,
-  border: `1px solid ${theme.colors.gray[400]}`,
-  marginTop: 3,
+  backgroundColor: 'white',
+  borderRadius: 8,
+  border: `1px solid ${colors.gray300}`,
+  marginTop: 12,
   boxShadow: '0px 5px 20px 0px rgba(0, 0, 0, 0.10)',
   zIndex: 9,
-};
+});
 
-export const optionStyles = ({
-  isDisabled,
-  isFocused,
+export const getOptionStyles = ({
   isSelected,
+  isFocused,
+  isDisabled,
+  colors,
 }: {
-  isDisabled: boolean;
-  isFocused: boolean;
   isSelected: boolean;
+  isFocused: boolean;
+  isDisabled: boolean;
+  colors?: SelectColors;
 }) => ({
   cursor: isDisabled ? 'not-allowed' : 'pointer',
-  height: theme.sizes[9],
-  margin: `${theme.space[1]} 0`,
-  borderRadius: theme.radii.sm,
-  fontSize: theme.fontSizes.p,
+  height: 36,
+  margin: '4px 0',
+  borderRadius: 4,
+  fontSize: 14,
+  // Note: No padding! react-select handles this internally
   backgroundColor:
-    isSelected || isFocused || isDisabled
-      ? theme.colors.gray[50]
-      : theme.colors.white,
+    isSelected || isFocused || isDisabled ? colors.primaryLightest : 'white',
   color: isSelected
-    ? theme.colors.gray[1500]
+    ? colors.primaryDark
     : isDisabled
-      ? theme.colors.gray[800]
-      : theme.colors.gray[1200],
-  fontWeight: isSelected
-    ? theme.fontWeights.semibold
-    : theme.fontWeights.normal,
+      ? colors.gray500
+      : colors.gray1200,
+  fontWeight: isSelected ? 700 : 400,
   '&:hover': {
-    backgroundColor: theme.colors.gray[50],
+    backgroundColor: colors.gray50,
   },
 });
 
-export const controlStyles = {
-  borderRadius: theme.radii.md,
-  cursor: 'pointer',
-  maxWidth: '100%',
-  height: '100%',
-  color: theme.colors.gray[1200],
-  fontSize: theme.fontSizes.p,
-  fontWeight: theme.fontWeights.semibold,
-  paddingLeft: 4,
-  paddingRight: 3,
-  border: `1px solid ${theme.colors.gray[400]}`,
-  boxShadow: 'none',
-};
+export const getControlStyles = (variant: string, colors: SelectColors) => {
+  const baseStyles = {
+    borderRadius: 6,
+    cursor: 'pointer',
+    minHeight: 40,
+    fontSize: 14,
+    fontWeight: 600,
+    paddingLeft: 4,
+    paddingRight: 3,
+  };
 
-export const getControlVariantStyles = (state: any, variant: SelectVariant) => {
-  const primaryColor = useToken(
-    'colors',
-    theme.semanticTokens.colors.primary.main
-  );
-  const dangerColor = useToken(
-    'colors',
-    theme.semanticTokens.colors.danger.main
-  );
-  switch (variant) {
-    case 'danger':
-      return {
-        border: `1px solid ${dangerColor}`,
-        boxShadow: `0 0 0 1px ${dangerColor}`,
-      };
-    default:
-      return {
-        fontWeight: theme.fontWeights.semibold,
-        border: `1px solid ${state.isFocused ? primaryColor : theme.colors.gray[400]}`,
-        boxShadow: state.isFocused
-          ? `0 0 0 1px ${primaryColor} !important`
-          : 'none',
-        '&:hover': state.isFocused
-          ? {
-              borderColor: primaryColor,
-            }
-          : {
-              borderColor: useToken('colors', 'gray.600'),
-            },
-      };
+  if (variant === 'danger') {
+    return {
+      ...baseStyles,
+      border: `1px solid ${colors.dangerColor}`,
+      boxShadow: `0 0 0 1px ${colors.dangerColor}`,
+    };
   }
+
+  return baseStyles;
 };