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

package/src/components/Checkbox/Checkbox.tsx

@@ -3,27 +3,33 @@ import { Checkbox as ChakraCheckbox } from '@chakra-ui/react';
 
 import { CheckboxProps } from './Checkbox.types';
 
-export const Checkbox = forwardRef(({ sx, ...rest }: CheckboxProps, ref) => {
-  return (
-    <ChakraCheckbox
-      ref={ref}
-      {...rest}
-      sx={{
-        '.chakra-checkbox__control': {
-          borderRadius: '4px',
-          borderColor: 'gray.400',
-          _checked: {
-            bg: 'primary.main',
+export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
+  ({ size = 'sm', checked, disabled, invalid, ...rest }, ref) => {
+    return (
+      <ChakraCheckbox.Root
+        ref={ref}
+        size={size}
+        checked={checked}
+        disabled={disabled}
+        invalid={invalid}
+        {...rest}
+      >
+        <ChakraCheckbox.HiddenInput />
+        <ChakraCheckbox.Control
+          borderRadius="xs"
+          borderColor="gray.400"
+          borderWidth="1px"
+          _checked={{
+            bgColor: 'primary.main',
             borderColor: 'primary.main',
-          },
-          _indeterminate: {
-            bg: 'primary.main',
-            borderColor: 'primary.main',
-          },
-        },
-      }}
-    />
-  );
-});
+          }}
+          cursor="pointer"
+        >
+          <ChakraCheckbox.Indicator />
+        </ChakraCheckbox.Control>
+      </ChakraCheckbox.Root>
+    );
+  }
+);
 
 Checkbox.displayName = 'Checkbox';

package/src/components/Checkbox/Checkbox.types.ts

@@ -1,3 +1,3 @@
-import { CheckboxProps as ChakraCheckboxProps } from '@chakra-ui/react';
+import { CheckboxRootProps as ChakraCheckboxRootProps } from '@chakra-ui/react';
 
-export interface CheckboxProps extends ChakraCheckboxProps {}
+export interface CheckboxProps extends ChakraCheckboxRootProps {}

package/src/components/Chip/Chip.stories.tsx

@@ -1,14 +1,39 @@
-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Chip, useCaseStyles } from '.';
-import { ChipUseCase } from './Chip.types';
+import { Chip, colorSchemes, variants } from '.';
 
+/**
+ * A chip component for displaying tags, labels, or status indicators.
+ *
+ * Uses a two-dimensional variant system:
+ * - `colorScheme`: What semantic color (primary, secondary, danger, etc.)
+ * - `variant`: How it looks visually (solid, soft, outline)
+ */
 const meta = {
   title: 'Components/Chip',
   component: Chip,
+  tags: ['autodocs'],
   args: {
     children: 'Chip',
+    colorScheme: 'primary',
+    variant: 'soft',
+  },
+  argTypes: {
+    colorScheme: {
+      control: 'select',
+      options: colorSchemes,
+      description: 'The semantic color of the chip',
+    },
+    variant: {
+      control: 'select',
+      options: variants,
+      description: 'The visual style of the chip',
+    },
+    children: {
+      control: 'text',
+      description: 'The content of the chip',
+    },
   },
 } satisfies Meta<typeof Chip>;
 
@@ -16,30 +41,223 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Basic: Story = {};
+/**
+ * Default chip with primary color and soft variant.
+ */
+export const Default: Story = {};
+
+/**
+ * Primary color chips in different variants.
+ */
+export const Primary: Story = {
+  render: () => (
+    <Flex gap={3} align="center">
+      <Chip colorScheme="primary" variant="solid">
+        Solid
+      </Chip>
+      <Chip colorScheme="primary" variant="soft">
+        Soft
+      </Chip>
+      <Chip colorScheme="primary" variant="outline">
+        Outline
+      </Chip>
+    </Flex>
+  ),
+};
+
+/**
+ * Secondary color chips in different variants.
+ */
+export const Secondary: Story = {
+  render: () => (
+    <Flex gap={3} align="center">
+      <Chip colorScheme="secondary" variant="solid">
+        Solid
+      </Chip>
+      <Chip colorScheme="secondary" variant="soft">
+        Soft
+      </Chip>
+      <Chip colorScheme="secondary" variant="outline">
+        Outline
+      </Chip>
+    </Flex>
+  ),
+};
+
+/**
+ * Danger color chips for error states.
+ */
+export const Danger: Story = {
+  render: () => (
+    <Flex gap={3} align="center">
+      <Chip colorScheme="danger" variant="solid">
+        Error
+      </Chip>
+      <Chip colorScheme="danger" variant="soft">
+        Error
+      </Chip>
+      <Chip colorScheme="danger" variant="outline">
+        Error
+      </Chip>
+    </Flex>
+  ),
+};
+
+/**
+ * Success color chips for completed states.
+ */
+export const Success: Story = {
+  render: () => (
+    <Flex gap={3} align="center">
+      <Chip colorScheme="success" variant="solid">
+        Completed
+      </Chip>
+      <Chip colorScheme="success" variant="soft">
+        Completed
+      </Chip>
+      <Chip colorScheme="success" variant="outline">
+        Completed
+      </Chip>
+    </Flex>
+  ),
+};
+
+/**
+ * Warning color chips for pending states.
+ */
+export const Warning: Story = {
+  render: () => (
+    <Flex gap={3} align="center">
+      <Chip colorScheme="warning" variant="solid">
+        Pending
+      </Chip>
+      <Chip colorScheme="warning" variant="soft">
+        Pending
+      </Chip>
+      <Chip colorScheme="warning" variant="outline">
+        Pending
+      </Chip>
+    </Flex>
+  ),
+};
+
+/**
+ * Neutral color chips for default states.
+ */
+export const Neutral: Story = {
+  render: () => (
+    <Flex gap={3} align="center">
+      <Chip colorScheme="neutral" variant="solid">
+        Draft
+      </Chip>
+      <Chip colorScheme="neutral" variant="soft">
+        Draft
+      </Chip>
+      <Chip colorScheme="neutral" variant="outline">
+        Draft
+      </Chip>
+    </Flex>
+  ),
+};
+
+/**
+ * Shows all combinations of colorScheme × variant in a matrix layout.
+ */
+export const AllCombinations: Story = {
+  render: () => (
+    <Box>
+      {/* Header row */}
+      <Flex mb={4} gap={4} align="center">
+        <Box w="100px" />
+        {variants.map((variant) => (
+          <Box key={variant} w="100px" textAlign="center">
+            <Text fontWeight="bold" textStyle="subtext">
+              {variant}
+            </Text>
+          </Box>
+        ))}
+      </Flex>
+
+      {/* Color scheme rows */}
+      {colorSchemes.map((colorScheme) => (
+        <Flex key={colorScheme} mb={4} gap={4} align="center">
+          <Box w="100px">
+            <Text fontWeight="medium" textStyle="subtext">
+              {colorScheme}
+            </Text>
+          </Box>
+          {variants.map((variant) => (
+            <Box key={`${colorScheme}-${variant}`} w="100px" textAlign="center">
+              <Chip colorScheme={colorScheme} variant={variant}>
+                Chip
+              </Chip>
+            </Box>
+          ))}
+        </Flex>
+      ))}
+    </Box>
+  ),
+};
 
-export const AllChipVariants: Story = {
-  render: (args) => {
-    const useCases = Object.keys(useCaseStyles) as Array<ChipUseCase>;
-    const variants = ['solid', 'outline', 'subtle'];
-    return (
+/**
+ * Chips in use cases with labels.
+ */
+export const UseCases: Story = {
+  render: () => (
+    <Flex direction="column" gap={6}>
       <Box>
-        <Flex mb="16px" gap="16px" align="center">
-          <p>default</p>
-          <Chip {...args} />
+        <Text mb={2} fontWeight="bold">
+          Status indicators:
+        </Text>
+        <Flex gap={2} wrap="wrap">
+          <Chip colorScheme="success" variant="soft">
+            Active
+          </Chip>
+          <Chip colorScheme="warning" variant="soft">
+            Pending
+          </Chip>
+          <Chip colorScheme="danger" variant="soft">
+            Inactive
+          </Chip>
+          <Chip colorScheme="neutral" variant="soft">
+            Draft
+          </Chip>
         </Flex>
-        {useCases.map((useCase) => (
-          <Flex mb="16px" gap="16px" align="center">
-            <p style={{ width: '100px' }}>{useCase}</p>
-            {variants.map((variant) => (
-              <div>
-                <p>{variant}</p>
-                <Chip {...args} useCase={useCase} variant={variant} />
-              </div>
-            ))}
-          </Flex>
-        ))}
       </Box>
-    );
-  },
+
+      <Box>
+        <Text mb={2} fontWeight="bold">
+          Category tags:
+        </Text>
+        <Flex gap={2} wrap="wrap">
+          <Chip colorScheme="primary" variant="outline">
+            React
+          </Chip>
+          <Chip colorScheme="secondary" variant="outline">
+            TypeScript
+          </Chip>
+          <Chip colorScheme="success" variant="outline">
+            Chakra UI
+          </Chip>
+        </Flex>
+      </Box>
+
+      <Box>
+        <Text mb={2} fontWeight="bold">
+          Priority levels:
+        </Text>
+        <Flex gap={2} wrap="wrap">
+          <Chip colorScheme="danger" variant="solid">
+            High
+          </Chip>
+          <Chip colorScheme="warning" variant="solid">
+            Medium
+          </Chip>
+          <Chip colorScheme="neutral" variant="solid">
+            Low
+          </Chip>
+        </Flex>
+      </Box>
+    </Flex>
+  ),
 };

package/src/components/Chip/Chip.styles.ts

@@ -1,114 +1,142 @@
-import * as CSS from 'csstype';
+import { BadgeProps } from '@chakra-ui/react';
 
-import theme from '@/theme/index';
+import { ChipColorScheme, ChipVariant } from './Chip.types';
 
-import { ChipProps, ChipUseCase } from './Chip.types';
-
-export const baseStyles = {
-  borderRadius: '32px', // large border radius to round it
+export const baseStyles: BadgeProps = {
+  borderRadius: '32px',
   px: 3,
-  py: 2, // Use direct spacing value instead of theme.spacing[2]
-  textTransform: 'none' as CSS.Property.TextTransform,
+  py: 2,
+  textTransform: 'none',
 };
 
-export const useCaseStyles: Record<
-  ChipUseCase,
-  Record<string, Partial<ChipProps>>
+/**
+ * Chip styles using a two-dimensional variant system.
+ *
+ * Structure: colorSchemeStyles[colorScheme][variant]
+ *
+ * Uses semantic color tokens from the Golden Ratio color system.
+ */
+export const colorSchemeStyles: Record<
+  ChipColorScheme,
+  Record<ChipVariant, BadgeProps>
 > = {
   primary: {
     solid: {
-      bgColor: theme.semanticTokens.colors.primary.main,
+      bgColor: 'primary.main',
       color: 'white',
     },
+    soft: {
+      bgColor: 'primary.lightest',
+      color: 'primary.dark',
+    },
     outline: {
       border: '1px solid',
-      borderColor: theme.semanticTokens.colors.primary.main,
-      color: theme.semanticTokens.colors.primary.main,
-      bgColor: 'white',
-    },
-    subtle: {
-      bgColor: '#EBF0FB',
-      color: theme.semanticTokens.colors.primary.main,
+      borderColor: 'primary.main',
+      color: 'primary.main',
+      bgColor: 'transparent',
     },
   },
   secondary: {
     solid: {
-      bgColor: theme.colors.blue[700],
-      color: theme.colors.white,
+      bgColor: 'secondary.main',
+      color: 'white',
+    },
+    soft: {
+      bgColor: 'secondary.lightest',
+      color: 'secondary.dark',
     },
     outline: {
       border: '1px solid',
-      borderColor: theme.colors.blue[700],
-      color: theme.colors.blue[700],
-      bgColor: 'white',
-    },
-    subtle: {
-      bgColor: theme.colors.blue[50],
-      color: theme.colors.blue[700],
+      borderColor: 'secondary.main',
+      color: 'secondary.main',
+      bgColor: 'transparent',
     },
   },
-  success: {
+  danger: {
     solid: {
-      bgColor: theme.semanticTokens.colors.success.main,
+      bgColor: 'danger.main',
       color: 'white',
     },
+    soft: {
+      bgColor: 'danger.lightest',
+      color: 'danger.dark',
+    },
     outline: {
       border: '1px solid',
-      borderColor: theme.semanticTokens.colors.success.main,
-      color: theme.semanticTokens.colors.success.main,
-      bgColor: 'white',
-    },
-    subtle: {
-      bgColor: theme.colors.green[50],
-      color: theme.semanticTokens.colors.success.main,
+      borderColor: 'danger.main',
+      color: 'danger.main',
+      bgColor: 'transparent',
     },
   },
-  danger: {
+  success: {
     solid: {
-      bgColor: theme.semanticTokens.colors.danger.main,
+      bgColor: 'success.main',
       color: 'white',
     },
+    soft: {
+      bgColor: 'success.lightest',
+      color: 'success.dark',
+    },
     outline: {
       border: '1px solid',
-      borderColor: theme.semanticTokens.colors.danger.main,
-      color: theme.semanticTokens.colors.danger.main,
-      bgColor: 'white',
-    },
-    subtle: {
-      bgColor: theme.semanticTokens.colors.danger.lighter,
-      color: theme.semanticTokens.colors.danger.main,
+      borderColor: 'success.main',
+      color: 'success.main',
+      bgColor: 'transparent',
     },
   },
-  dark: {
+  warning: {
     solid: {
-      bgColor: theme.colors.gray[800],
+      bgColor: 'warning.main',
       color: 'white',
     },
+    soft: {
+      bgColor: 'warning.lightest',
+      color: 'warning.dark',
+    },
     outline: {
       border: '1px solid',
-      backgroundColor: 'transparent',
-      borderColor: theme.colors.gray[700],
-      color: theme.colors.gray[700],
-    },
-    subtle: {
-      bgColor: theme.colors.gray[100],
-      color: theme.colors.gray[800],
+      borderColor: 'warning.main',
+      color: 'warning.main',
+      bgColor: 'transparent',
     },
   },
-  highlight: {
+  neutral: {
     solid: {
-      bgColor: theme.colors.purple[600],
+      bgColor: 'gray.800',
       color: 'white',
     },
+    soft: {
+      bgColor: 'gray.100',
+      color: 'gray.800',
+    },
     outline: {
       border: '1px solid',
-      backgroundColor: 'transparent',
-      borderColor: theme.colors.purple[600],
-      color: theme.colors.purple[600],
-    },
-    subtle: {
-      bgColor: theme.colors.purple[50],
-      color: theme.colors.purple[600],
+      borderColor: 'gray.700',
+      color: 'gray.700',
+      bgColor: 'transparent',
     },
   },
 };
+
+/**
+ * Helper function to get chip styles for a given colorScheme and variant.
+ */
+export const getChipStyles = (
+  colorScheme: ChipColorScheme = 'primary',
+  variant: ChipVariant = 'soft'
+): BadgeProps => {
+  return colorSchemeStyles[colorScheme][variant];
+};
+
+/** All available color schemes */
+export const colorSchemes: ChipColorScheme[] = [
+  'primary',
+  'secondary',
+  'danger',
+  'success',
+  'warning',
+  'neutral',
+];
+
+/** All available variants */
+export const variants: ChipVariant[] = ['solid', 'soft', 'outline'];

package/src/components/Chip/Chip.tsx

@@ -1,23 +1,32 @@
+import { ForwardedRef, forwardRef } from 'react';
 import { Badge as ChakraBadge } from '@chakra-ui/react';
 
-import { baseStyles, useCaseStyles } from './Chip.styles';
+import { baseStyles, getChipStyles } from './Chip.styles';
 import { ChipProps } from './Chip.types';
 
 /**
- * A component that wraps the Chakra Badge component, but styled to look like a Chip component
+ * A chip component for displaying tags, labels, or status indicators.
+ *
+ * Uses a two-dimensional variant system:
+ * - `colorScheme`: What semantic color (primary, secondary, danger, etc.)
+ * - `variant`: How it looks visually (solid, soft, outline)
+ *
+ * @example
+ * ```tsx
+ * <Chip colorScheme="primary" variant="solid">Active</Chip>
+ * <Chip colorScheme="danger" variant="soft">Error</Chip>
+ * <Chip colorScheme="success" variant="outline">Completed</Chip>
+ * ```
  */
-export const Chip = ({
-  useCase = 'primary', // default to secondary as they are less likely to cause bigger design issues
-  variant = 'subtle',
-  ...rest
-}: ChipProps) => {
-  return (
-    <ChakraBadge
-      {...baseStyles}
-      {...useCaseStyles[useCase][variant]}
-      {...rest}
-    />
-  );
-};
+export const Chip = forwardRef(
+  (
+    { colorScheme = 'primary', variant = 'soft', ...rest }: ChipProps,
+    ref?: ForwardedRef<HTMLButtonElement>
+  ) => {
+    const styles = getChipStyles(colorScheme, variant);
+
+    return <ChakraBadge {...baseStyles} {...styles} {...rest} ref={ref} />;
+  }
+);
 
 Chip.displayName = 'Chip';

package/src/components/Chip/Chip.types.ts

@@ -1,14 +1,43 @@
 import { BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
 
-export type ChipUseCase =
-  | 'danger'
-  | 'success'
+/**
+ * Chip color schemes - determines the semantic color of the chip.
+ *
+ * This prop overrides Chakra UI's native `colorScheme` prop to provide
+ * a controlled set of color options that align with our design system.
+ *
+ * @example
+ * <Chip colorScheme="primary" variant="solid">Primary</Chip>
+ * <Chip colorScheme="danger" variant="soft">Error</Chip>
+ */
+export type ChipColorScheme =
   | 'primary'
   | 'secondary'
-  | 'dark'
-  | 'highlight';
+  | 'danger'
+  | 'success'
+  | 'warning'
+  | 'neutral';
+
+/**
+ * Chip variants - determines the visual style of the chip.
+ *
+ * - solid: Filled background with contrasting text
+ * - soft: Light background tint with darker text
+ * - outline: Transparent background with colored border
+ */
+export type ChipVariant = 'solid' | 'soft' | 'outline';
 
-export interface ChipProps extends ChakraBadgeProps {
-  useCase?: ChipUseCase;
-  variant?: string;
+/**
+ * ChipProps uses a two-dimensional variant system:
+ * - `colorScheme`: What semantic color (primary, secondary, danger, etc.)
+ * - `variant`: How it looks visually (solid, soft, outline)
+ *
+ * This matches the Button component's architecture for consistency.
+ */
+export interface ChipProps extends Omit<
+  ChakraBadgeProps,
+  'colorScheme' | 'variant'
+> {
+  colorScheme?: ChipColorScheme;
+  variant?: ChipVariant;
 }

package/src/components/Chip/index.ts

@@ -1,3 +1,8 @@
 export { Chip } from './Chip';
-export { useCaseStyles } from './Chip.styles';
-export type * from './Chip.types';
+export {
+  colorSchemes,
+  colorSchemeStyles,
+  getChipStyles,
+  variants,
+} from './Chip.styles';
+export type { ChipColorScheme, ChipProps, ChipVariant } from './Chip.types';

package/src/components/Code/Code.tsx

@@ -74,6 +74,7 @@ export const Code = ({
     <Card
       p={0}
       borderRadius="none"
+      textStyle="p"
       {...containerProps}
       className={['ml-code', containerProps?.className].join(' ')}
     >