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

package/src/components/Radio/Radio.stories.tsx

@@ -1,9 +1,8 @@
-import { Box, Stack, VStack } from '@chakra-ui/react';
+import { Box, HStack, Stack, VStack } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
 import { Radio, RadioGroup } from '.';
-import { RadioOption } from './Radio.types';
 
 const meta = {
   title: 'Components/Radio',
@@ -23,23 +22,6 @@ const meta = {
       control: 'text',
       description: 'The label text for the radio button',
     },
-    value: {
-      control: 'text',
-      description: 'The value of the radio button',
-    },
-    isChecked: {
-      control: 'boolean',
-      description: 'Whether the radio button is checked',
-    },
-    isDisabled: {
-      control: 'boolean',
-      description: 'Whether the radio button is disabled',
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-      description: 'The size of the radio button',
-    },
   },
   args: {
     children: 'Radio option',
@@ -51,58 +33,80 @@ export default meta;
 
 type Story = StoryObj<typeof Radio>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  render: (args) => (
+    <RadioGroup defaultValue="option1">
+      <Radio {...args} />
+    </RadioGroup>
+  ),
+};
 
 export const Checked: Story = {
   args: {
     children: 'Selected option',
-    isChecked: true,
   },
+  render: (args) => (
+    <RadioGroup defaultValue="option1">
+      <Radio {...args} value="option1" />
+    </RadioGroup>
+  ),
 };
 
 export const Disabled: Story = {
   render: (args) => (
-    <Stack spacing={3}>
-      <Radio {...args} isDisabled>
-        Disabled unchecked
-      </Radio>
-      <Radio {...args} isDisabled isChecked>
-        Disabled checked
-      </Radio>
-    </Stack>
+    <RadioGroup defaultValue="disabled-checked">
+      <Stack gap={3}>
+        <Radio {...args} value="disabled-unchecked" disabled>
+          Disabled unchecked
+        </Radio>
+        <Radio {...args} value="disabled-checked" disabled>
+          Disabled checked
+        </Radio>
+      </Stack>
+    </RadioGroup>
   ),
 };
 
 export const Sizes: Story = {
   render: (args) => (
-    <Stack spacing={4}>
-      <Radio {...args} size="sm">
-        Small radio
-      </Radio>
-      <Radio {...args} size="md">
-        Medium radio
-      </Radio>
-      <Radio {...args} size="lg">
-        Large radio
-      </Radio>
+    <Stack gap={4}>
+      <RadioGroup size="sm" defaultValue="sm">
+        <Radio {...args} value="sm">
+          Small radio
+        </Radio>
+      </RadioGroup>
+      <RadioGroup size="md" defaultValue="md">
+        <Radio {...args} value="md">
+          Medium radio
+        </Radio>
+      </RadioGroup>
+      <RadioGroup size="lg" defaultValue="lg">
+        <Radio {...args} value="lg">
+          Large radio
+        </Radio>
+      </RadioGroup>
     </Stack>
   ),
 };
 
 export const States: Story = {
   render: (args) => (
-    <Stack spacing={3}>
-      <Radio {...args}>Default state</Radio>
-      <Radio {...args} isChecked>
-        Checked state
-      </Radio>
-      <Radio {...args} isDisabled>
-        Disabled state
-      </Radio>
-      <Radio {...args} isDisabled isChecked>
-        Disabled checked state
-      </Radio>
-    </Stack>
+    <RadioGroup defaultValue="checked">
+      <Stack gap={3}>
+        <Radio {...args} value="default">
+          Default state
+        </Radio>
+        <Radio {...args} value="checked">
+          Checked state
+        </Radio>
+        <Radio {...args} value="disabled" disabled>
+          Disabled state
+        </Radio>
+        <Radio {...args} value="disabled-checked" disabled>
+          Disabled checked state
+        </Radio>
+      </Stack>
+    </RadioGroup>
   ),
 };
 
@@ -112,16 +116,16 @@ export const BasicGroup: RadioGroupStory = {
   render: () => {
     const [value, setValue] = useState<string>('option1');
 
-    const options: RadioOption[] = [
-      { value: 'option1', label: 'First option' },
-      { value: 'option2', label: 'Second option' },
-      { value: 'option3', label: 'Third option' },
-    ];
-
     return (
-      <VStack align="flex-start" spacing={4}>
+      <VStack align="flex-start" gap={4}>
         <Box>Selected value: {value}</Box>
-        <RadioGroup options={options} value={value} onChange={setValue} />
+        <RadioGroup value={value} onValueChange={(e) => setValue(e.value)}>
+          <Stack gap={3}>
+            <Radio value="option1">First option</Radio>
+            <Radio value="option2">Second option</Radio>
+            <Radio value="option3">Third option</Radio>
+          </Stack>
+        </RadioGroup>
       </VStack>
     );
   },
@@ -131,22 +135,16 @@ export const HorizontalGroup: RadioGroupStory = {
   render: () => {
     const [value, setValue] = useState<string>('email');
 
-    const options: RadioOption[] = [
-      { value: 'email', label: 'Email' },
-      { value: 'sms', label: 'SMS' },
-      { value: 'phone', label: 'Phone call' },
-    ];
-
     return (
-      <VStack align="flex-start" spacing={4}>
+      <VStack align="flex-start" gap={4}>
         <Box>Preferred contact method: {value}</Box>
-        <RadioGroup
-          options={options}
-          value={value}
-          onChange={setValue}
-          direction="row"
-          spacing={6}
-        />
+        <RadioGroup value={value} onValueChange={(e) => setValue(e.value)}>
+          <HStack gap={6}>
+            <Radio value="email">Email</Radio>
+            <Radio value="sms">SMS</Radio>
+            <Radio value="phone">Phone call</Radio>
+          </HStack>
+        </RadioGroup>
       </VStack>
     );
   },
@@ -156,31 +154,23 @@ export const WithLongLabels: RadioGroupStory = {
   render: () => {
     const [value, setValue] = useState<string>('option1');
 
-    const options: RadioOption[] = [
-      {
-        value: 'option1',
-        label:
-          'This is a very long label that demonstrates how radio buttons handle longer text content',
-      },
-      {
-        value: 'option2',
-        label:
-          'Another option with extended descriptive text that might wrap to multiple lines',
-      },
-      {
-        value: 'option3',
-        label: 'A third choice with substantial explanatory content',
-      },
-    ];
-
     return (
       <Box maxW="400px">
-        <RadioGroup
-          options={options}
-          value={value}
-          onChange={setValue}
-          spacing={4}
-        />
+        <RadioGroup value={value} onValueChange={(e) => setValue(e.value)}>
+          <Stack gap={4}>
+            <Radio value="option1">
+              This is a very long label that demonstrates how radio buttons
+              handle longer text content
+            </Radio>
+            <Radio value="option2">
+              Another option with extended descriptive text that might wrap to
+              multiple lines
+            </Radio>
+            <Radio value="option3">
+              A third choice with substantial explanatory content
+            </Radio>
+          </Stack>
+        </RadioGroup>
       </Box>
     );
   },
@@ -191,50 +181,42 @@ export const FormExample: RadioGroupStory = {
     const [notifications, setNotifications] = useState<string>('all');
     const [theme, setTheme] = useState<string>('light');
 
-    const notificationOptions: RadioOption[] = [
-      { value: 'all', label: 'All notifications' },
-      { value: 'important', label: 'Important only' },
-      { value: 'none', label: 'No notifications' },
-    ];
-
-    const themeOptions: RadioOption[] = [
-      { value: 'light', label: 'Light theme' },
-      { value: 'dark', label: 'Dark theme' },
-      { value: 'auto', label: 'Auto (system preference)' },
-    ];
-
     return (
-      <VStack align="flex-start" spacing={6} maxW="300px">
+      <VStack align="flex-start" gap={6} maxW="300px">
         <Box>
           <Box fontWeight="semibold" mb={2}>
             Notification Preferences
           </Box>
           <RadioGroup
-            options={notificationOptions}
             value={notifications}
-            onChange={setNotifications}
-            spacing={3}
-          />
+            onValueChange={(e) => setNotifications(e.value)}
+          >
+            <Stack gap={3}>
+              <Radio value="all">All notifications</Radio>
+              <Radio value="important">Important only</Radio>
+              <Radio value="none">No notifications</Radio>
+            </Stack>
+          </RadioGroup>
         </Box>
 
         <Box>
           <Box fontWeight="semibold" mb={2}>
             Theme Preference
           </Box>
-          <RadioGroup
-            options={themeOptions}
-            value={theme}
-            onChange={setTheme}
-            direction="row"
-            spacing={4}
-          />
+          <RadioGroup value={theme} onValueChange={(e) => setTheme(e.value)}>
+            <HStack gap={4}>
+              <Radio value="light">Light theme</Radio>
+              <Radio value="dark">Dark theme</Radio>
+              <Radio value="auto">Auto (system preference)</Radio>
+            </HStack>
+          </RadioGroup>
         </Box>
 
         <Box p={4} bg="gray.50" borderRadius="md" w="100%">
           <Box fontWeight="semibold" mb={2}>
             Current Settings:
           </Box>
-          <Box fontSize="sm">
+          <Box textStyle="subtext">
             <Box>Notifications: {notifications}</Box>
             <Box>Theme: {theme}</Box>
           </Box>

package/src/components/Radio/Radio.tsx

@@ -1,35 +1,18 @@
 import React, { forwardRef } from 'react';
-import { Radio as ChakraRadio } from '@chakra-ui/react';
+import { RadioGroup } from '@chakra-ui/react';
 
 import { RadioProps } from './Radio.types';
 
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  ({ children, ...rest }, ref) => {
-    return (
-      <ChakraRadio
-        ref={ref}
-        _checked={{
-          bg: 'primary.main',
-          borderColor: 'primary.main',
-          position: 'relative',
-          _before: {
-            content: '""',
-            bg: 'white',
-            w: '50%',
-            h: '50%',
-            borderRadius: 'full',
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-          },
-        }}
-        {...rest}
-      >
-        {children}
-      </ChakraRadio>
-    );
-  }
-);
+export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
+  const { children, inputProps, rootRef, ...rest } = props;
+
+  return (
+    <RadioGroup.Item ref={rootRef} {...rest}>
+      <RadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
+      <RadioGroup.ItemIndicator />
+      {children && <RadioGroup.ItemText>{children}</RadioGroup.ItemText>}
+    </RadioGroup.Item>
+  );
+});
 
 Radio.displayName = 'Radio';

package/src/components/Radio/Radio.types.ts

@@ -1,21 +1,6 @@
-import {
-  RadioGroupProps as ChakraRadioGroupProps,
-  RadioProps as ChakraRadioProps,
-  StackDirection,
-} from '@chakra-ui/react';
+import { RadioGroup } from '@chakra-ui/react';
 
-export interface RadioOption {
-  value: string;
-  label: string;
-}
-
-export interface RadioProps extends ChakraRadioProps {
-  children?: React.ReactNode;
-}
-
-export interface RadioGroupProps
-  extends Omit<ChakraRadioGroupProps, 'children'> {
-  options: RadioOption[];
-  direction?: StackDirection;
-  spacing?: number;
+export interface RadioProps extends RadioGroup.ItemProps {
+  rootRef?: React.RefObject<HTMLDivElement | null>;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }

package/src/components/Radio/RadioGroup.tsx

@@ -1,26 +1,14 @@
-import React, { forwardRef } from 'react';
-import { RadioGroup as ChakraRadioGroup, Stack } from '@chakra-ui/react';
+import { RadioGroup as ChakraRadioGroup } from '@chakra-ui/react';
 
-import { Radio } from './Radio';
-import { RadioGroupProps, RadioOption } from './Radio.types';
-
-export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
-  (
-    { options, value, onChange, direction = 'column', spacing = 3, ...rest },
-    ref
-  ) => {
-    return (
-      <ChakraRadioGroup value={value} onChange={onChange} {...rest}>
-        <Stack direction={direction} spacing={spacing} ref={ref}>
-          {options.map((option: RadioOption) => (
-            <Radio key={option.value} value={option.value}>
-              {option.label}
-            </Radio>
-          ))}
-        </Stack>
-      </ChakraRadioGroup>
-    );
-  }
-);
-
-RadioGroup.displayName = 'RadioGroup';
+export const RadioGroup = ({ ...rest }) => {
+  return (
+    <ChakraRadioGroup.Root
+      css={{
+        '--chakra-colors-color-palette-solid':
+          'var(--chakra-colors-primary-main)',
+        '--chakra-colors-color-palette-contrast': 'var(--chakra-colors-white)',
+      }}
+      {...rest}
+    />
+  );
+};

package/src/components/Radio/index.ts

@@ -1,3 +1,3 @@
 export { Radio } from './Radio';
-export type { RadioGroupProps, RadioOption, RadioProps } from './Radio.types';
+export type { RadioProps } from './Radio.types';
 export { RadioGroup } from './RadioGroup';

package/src/components/SeeMoreButton/SeeMoreButton.styles.ts

@@ -1,7 +1,7 @@
 export const seeMoreButtonStyles = {
   alignSelf: 'stretch',
   w: '100%',
-  variant: 'unstyled',
+  variant: 'unstyled' as any,
   display: 'flex',
   borderTop: '1px solid',
   borderRadius: 'none',

package/src/components/SeeMoreButton/SeeMoreButton.tsx

@@ -23,12 +23,9 @@ export const SeeMoreButton = ({
   const translate = useTranslate();
 
   return (
-    <Button
-      rightIcon={<IoChevronDownOutline color="inherit" />}
-      {...seeMoreButtonStyles}
-      {...rest}
-    >
-      {translate('see_more')} ({currentCount}/{maxCount})
+    <Button {...seeMoreButtonStyles} {...rest}>
+      {translate('see_more')} ({currentCount}/{maxCount}){' '}
+      <IoChevronDownOutline color="inherit" />
     </Button>
   );
 };

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -95,17 +95,36 @@ export const Rounded: Story = {
 export const Small: Story = {
   args: {
     size: 'sm',
-    borderRadius: 'full',
     w: 'fit-content',
   },
 };
 
+export const WithDisabledOption = {
+  args: {
+    options: [
+      {
+        label: 'Complete',
+        value: 'complete',
+      },
+      {
+        label: 'Incomplete',
+        value: 'incomplete',
+        disabled: true,
+      },
+      {
+        label: 'Pending',
+        value: 'pending',
+      },
+    ],
+  },
+};
+
 export const WithCustomContent = {
   args: {
     options: [
       {
         label: (
-          <HStack spacing={2}>
+          <HStack gap={2}>
             <Icon as={FiHome} />
             <Text>Home</Text>
           </HStack>
@@ -114,7 +133,7 @@ export const WithCustomContent = {
       },
       {
         label: (
-          <HStack spacing={2}>
+          <HStack gap={2}>
             <Icon as={FiUser} />
             <Text>Profile</Text>
           </HStack>
@@ -123,7 +142,7 @@ export const WithCustomContent = {
       },
       {
         label: (
-          <HStack spacing={2}>
+          <HStack gap={2}>
             <Icon as={FiSettings} />
             <Text>Settings</Text>
           </HStack>