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

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 
 import { Accordion, AccordionButton, AccordionItem, AccordionPanel } from '.';
 
@@ -11,7 +12,7 @@ const meta = {
   render: (args) => {
     return (
       <Accordion {...args}>
-        <AccordionItem>
+        <AccordionItem value="item-1">
           <AccordionButton>Test button</AccordionButton>
           <AccordionPanel>Test panel</AccordionPanel>
         </AccordionItem>
@@ -30,11 +31,11 @@ export const TwoItems: Story = {
   render: (args) => {
     return (
       <Accordion {...args}>
-        <AccordionItem>
+        <AccordionItem value="item-1">
           <AccordionButton>Test button</AccordionButton>
           <AccordionPanel>Test panel</AccordionPanel>
         </AccordionItem>
-        <AccordionItem>
+        <AccordionItem value="item-2">
           <AccordionButton>Test button 2</AccordionButton>
           <AccordionPanel>Test panel 2</AccordionPanel>
         </AccordionItem>
@@ -42,3 +43,191 @@ export const TwoItems: Story = {
     );
   },
 };
+
+export const EnclosedVariant: Story = {
+  args: {
+    variant: 'enclosed',
+  },
+  render: (args) => {
+    return (
+      <Accordion {...args}>
+        <AccordionItem value="item-1">
+          <AccordionButton>Section 1</AccordionButton>
+          <AccordionPanel>Content for section 1</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Section 2</AccordionButton>
+          <AccordionPanel>Content for section 2</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Section 3</AccordionButton>
+          <AccordionPanel>Content for section 3</AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const OutlineVariant: Story = {
+  args: {
+    variant: 'outline',
+  },
+  render: (args) => {
+    return (
+      <Accordion {...args}>
+        <AccordionItem value="item-1">
+          <AccordionButton>Section 1</AccordionButton>
+          <AccordionPanel>Content for section 1</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Section 2</AccordionButton>
+          <AccordionPanel>Content for section 2</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Section 3</AccordionButton>
+          <AccordionPanel>Content for section 3</AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const SubtleVariant: Story = {
+  args: {
+    variant: 'subtle',
+  },
+  render: (args) => {
+    return (
+      <Accordion {...args}>
+        <AccordionItem value="item-1">
+          <AccordionButton>Section 1</AccordionButton>
+          <AccordionPanel>Content for section 1</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Section 2</AccordionButton>
+          <AccordionPanel>Content for section 2</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Section 3</AccordionButton>
+          <AccordionPanel>Content for section 3</AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const PlainVariant: Story = {
+  args: {
+    variant: 'plain',
+  },
+  render: (args) => {
+    return (
+      <Accordion {...args}>
+        <AccordionItem value="item-1">
+          <AccordionButton>Section 1</AccordionButton>
+          <AccordionPanel>Content for section 1</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Section 2</AccordionButton>
+          <AccordionPanel>Content for section 2</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Section 3</AccordionButton>
+          <AccordionPanel>Content for section 3</AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const Collapsible: Story = {
+  args: {
+    collapsible: true,
+    multiple: false,
+  },
+  render: (args) => {
+    return (
+      <Accordion {...args}>
+        <AccordionItem value="item-1">
+          <AccordionButton>Section 1 (only one can be open)</AccordionButton>
+          <AccordionPanel>Content for section 1</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Section 2 (only one can be open)</AccordionButton>
+          <AccordionPanel>Content for section 2</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Section 3 (only one can be open)</AccordionButton>
+          <AccordionPanel>Content for section 3</AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const WithCustomContent: Story = {
+  args: {
+    lazyMount: true,
+    unmountOnExit: true,
+  },
+  render: (args) => {
+    return (
+      <Accordion {...args} borderColor="red.500">
+        <AccordionItem value="errors">
+          <AccordionButton bg="red.50" p={3} borderBottomColor="red.500">
+            <Flex align="center" gap={2}>
+              <Box
+                as="span"
+                fontSize="xl"
+                color="red.500"
+                aria-label="Error icon"
+              >
+                ⚠️
+              </Box>
+              <Text fontWeight="bold" color="gray.800">
+                Failed Upload Rows (3 errors)
+              </Text>
+            </Flex>
+          </AccordionButton>
+          <AccordionPanel p={4}>
+            <Box bg="gray.50" p={4} borderRadius="md">
+              <Text fontSize="sm" color="gray.700" mb={2}>
+                This heavy content is lazy-loaded only when expanded
+              </Text>
+              <Box as="ul" pl={4}>
+                <li>Error 1: Invalid email format</li>
+                <li>Error 2: Duplicate entry</li>
+                <li>Error 3: Required field missing</li>
+              </Box>
+            </Box>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="warnings">
+          <AccordionButton bg="yellow.50" p={3} borderBottomColor="yellow.500">
+            <Flex align="center" gap={2}>
+              <Box
+                as="span"
+                fontSize="xl"
+                color="yellow.600"
+                aria-label="Warning icon"
+              >
+                ⚡
+              </Box>
+              <Text fontWeight="bold" color="gray.800">
+                Warning Messages (2 warnings)
+              </Text>
+            </Flex>
+          </AccordionButton>
+          <AccordionPanel p={4}>
+            <Box bg="gray.50" p={4} borderRadius="md">
+              <Text fontSize="sm" color="gray.700">
+                Content is mounted when expanded and unmounted when collapsed
+                (check React DevTools)
+              </Text>
+            </Box>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};

package/src/components/Accordion/Accordion.tsx

@@ -1,14 +1,22 @@
-import { Accordion as ChakraAccordion, AccordionProps } from '@chakra-ui/react';
+import {
+  Accordion as ChakraAccordion,
+  AccordionRootProps as ChakraAccordionRootProps,
+} from '@chakra-ui/react';
 
-export const Accordion = (props: AccordionProps) => {
+export type AccordionProps = ChakraAccordionRootProps;
+
+export const Accordion = ({
+  collapsible,
+  multiple = true,
+  variant = 'enclosed',
+  ...rest
+}: AccordionProps) => {
   return (
-    <ChakraAccordion
-      allowMultiple
-      borderRadius={4}
-      overflow="hidden"
-      border="1px solid"
-      borderColor="gray.300"
-      {...props}
+    <ChakraAccordion.Root
+      collapsible={collapsible}
+      multiple={multiple}
+      variant={variant}
+      {...rest}
     />
   );
 };

package/src/components/Accordion/AccordionButton.tsx

@@ -1,40 +1,21 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import {
-  AccordionButton as ChakraAccordionButton,
-  AccordionIcon,
-  ChakraProps,
-  Flex,
-} from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import type { AccordionItemTriggerProps } from '@chakra-ui/react';
+import { Accordion, HStack } from '@chakra-ui/react';
 
-import theme from '@/theme/index';
+export type AccordionButtonProps = AccordionItemTriggerProps & {
+  children?: ReactNode;
+  customIcon?: ReactNode;
+};
 
 export const AccordionButton = ({
-  _hover = {},
-  _expanded = {},
-  customIcon = undefined,
+  customIcon,
   children,
   ...rest
-}: PropsWithChildren<ChakraProps> & {
-  customIcon?: ReactNode;
-}) => {
+}: AccordionButtonProps) => {
   return (
-    <ChakraAccordionButton
-      _hover={{
-        bg: `${theme.colors.main}08`,
-        ..._hover,
-      }}
-      _expanded={{
-        bg: `${theme.colors.main}12`,
-        borderBottomWidth: '1px',
-        ..._expanded,
-      }}
-      fontWeight="bold"
-      {...rest}
-    >
-      <Flex w="100%" justify="space-between" align="center">
-        {children}
-        {customIcon ? customIcon : <AccordionIcon />}
-      </Flex>
-    </ChakraAccordionButton>
+    <Accordion.ItemTrigger fontWeight="bold" {...rest}>
+      <HStack flex="1">{children}</HStack>
+      {customIcon ?? <Accordion.ItemIndicator />}
+    </Accordion.ItemTrigger>
   );
 };

package/src/components/Accordion/AccordionItem.tsx

@@ -1,17 +1,10 @@
-import { AccordionItem as ChakraAccordionItem } from '@chakra-ui/react';
+import {
+  Accordion,
+  AccordionItemProps as ChakraAccordionItemProps,
+} from '@chakra-ui/react';
 
-export const AccordionItem = ({ _first = {}, _last = {}, ...rest }) => {
-  return (
-    <ChakraAccordionItem
-      _first={{
-        borderTopWidth: 0,
-        ..._first,
-      }}
-      _last={{
-        borderBottomWidth: 0,
-        ..._last,
-      }}
-      {...rest}
-    />
-  );
+export type AccordionItemProps = ChakraAccordionItemProps;
+
+export const AccordionItem = (props: AccordionItemProps) => {
+  return <Accordion.Item {...props} />;
 };

package/src/components/Accordion/AccordionPanel.tsx

@@ -0,0 +1,29 @@
+import {
+  Accordion,
+  AccordionItemContentProps as ChakraAccordionItemContentProps,
+} from '@chakra-ui/react';
+
+export type AccordionPanelProps = ChakraAccordionItemContentProps;
+
+/**
+ * @deprecated This component doesn't exist in Chakra UI v3. Use `Accordion.ItemContent` and `Accordion.ItemBody` directly instead.
+ * This component will be removed in the next major version.
+ *
+ * @example
+ * ```tsx
+ * // Before
+ * <AccordionPanel>Content here</AccordionPanel>
+ *
+ * // After (Chakra v3)
+ * <Accordion.ItemContent>
+ *   <Accordion.ItemBody>Content here</Accordion.ItemBody>
+ * </Accordion.ItemContent>
+ * ```
+ */
+export const AccordionPanel = ({ children, ...rest }: AccordionPanelProps) => {
+  return (
+    <Accordion.ItemContent {...rest}>
+      <Accordion.ItemBody>{children}</Accordion.ItemBody>
+    </Accordion.ItemContent>
+  );
+};

package/src/components/Accordion/index.ts

@@ -1,4 +1,8 @@
+export type { AccordionProps } from './Accordion';
 export { Accordion } from './Accordion';
+export type { AccordionButtonProps } from './AccordionButton';
 export { AccordionButton } from './AccordionButton';
+export type { AccordionItemProps } from './AccordionItem';
 export { AccordionItem } from './AccordionItem';
-export { AccordionPanel } from '@chakra-ui/react';
+export type { AccordionPanelProps } from './AccordionPanel';
+export { AccordionPanel } from './AccordionPanel';

package/src/components/Avatar/Avatar.tsx

@@ -1,18 +1,27 @@
 import { forwardRef } from 'react';
 import {
   Avatar as ChakraAvatar,
-  AvatarProps as ChakraAvatarProps,
+  AvatarRootProps as ChakraAvatarRootProps,
 } from '@chakra-ui/react';
 
-export const Avatar = forwardRef(({ ...rest }: ChakraAvatarProps, ref) => {
+export type AvatarProps = ChakraAvatarRootProps & {
+  src?: string;
+  name?: string;
+};
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
+  const { src, name, ...rest } = props;
   return (
-    <ChakraAvatar
+    <ChakraAvatar.Root
       ref={ref}
       borderWidth="1px"
       borderColor="gray.200"
       overflow="hidden"
       {...rest}
-    />
+    >
+      <ChakraAvatar.Fallback name={name} />
+      <ChakraAvatar.Image src={src} />
+    </ChakraAvatar.Root>
   );
 });
 

package/src/components/Badge/Badge.stories.tsx

@@ -1,6 +1,8 @@
+import { Flex, Box } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Badge } from '.';
+import { Badge, badgeVariantStyles } from '.';
+import { BadgeVariant } from './Badge.types';
 
 const meta = {
   title: 'Components/Badge',
@@ -9,6 +11,11 @@ const meta = {
     children: 'Pro Plan',
   },
   argTypes: {
+    variant: {
+      control: 'select',
+      options: Object.keys(badgeVariantStyles),
+      description: 'Color variant of the badge',
+    },
     textTransform: {
       control: 'radio',
       options: ['none', 'uppercase'],
@@ -20,3 +27,66 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {};
+
+/**
+ * All badge color variants using the Golden Ratio color system.
+ * Each variant uses `lightest` background with `dark` text for WCAG AA compliance.
+ */
+export const AllVariants: Story = {
+  render: () => {
+    const variants = Object.keys(badgeVariantStyles) as BadgeVariant[];
+    return (
+      <Flex gap={4} wrap="wrap">
+        {variants.map((variant) => (
+          <Box key={variant} textAlign="center">
+            <Badge variant={variant}>
+              {variant.charAt(0).toUpperCase() + variant.slice(1)}
+            </Badge>
+          </Box>
+        ))}
+      </Flex>
+    );
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Default',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Featured',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    children: 'Completed',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    children: 'Pending',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+    children: 'Error',
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    variant: 'neutral',
+    children: 'Draft',
+  },
+};

package/src/components/Badge/Badge.styles.ts

@@ -1,11 +1,84 @@
+import { BadgeVariant } from './Badge.types';
+
+/**
+ * Badge base styles using the Golden Ratio color system.
+ *
+ * These styles are shared across all badge variants.
+ */
 export const baseStyles = {
   borderRadius: '2xl',
   px: 2.5,
-  fontSize: 'subtitle',
+  textStyle: 'subtitle',
   fontWeight: 'medium',
-  color: 'primary.dark',
-  bgColor: 'primary.light',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
 };
+
+/**
+ * Badge variant styles using the Golden Ratio color system.
+ *
+ * Each variant uses the `lightest` background shade with `dark` text
+ * for optimal readability and WCAG AA compliance.
+ *
+ * Pattern: bg = `*.lightest`, color = `*.dark`
+ * This matches the Alert/Toast/Banner component styling.
+ */
+export const variantStyles: Record<
+  BadgeVariant,
+  { bgColor: string; color: string }
+> = {
+  /**
+   * Primary badge - Default, general purpose
+   * Blue lightest background with dark blue text
+   */
+  primary: {
+    bgColor: 'primary.lightest', // #E8EEFB
+    color: 'primary.dark', // #0D317D
+  },
+
+  /**
+   * Secondary badge - Accent, highlight
+   * Violet lightest background with dark violet text
+   */
+  secondary: {
+    bgColor: 'secondary.lightest', // #F4E8FB
+    color: 'secondary.dark', // #570D7D
+  },
+
+  /**
+   * Success badge - Positive states
+   * Green lightest background with dark green text
+   */
+  success: {
+    bgColor: 'success.lightest', // #E9FBE8
+    color: 'success.dark', // #147D0D
+  },
+
+  /**
+   * Warning badge - Caution states
+   * Gold lightest background with dark gold text
+   */
+  warning: {
+    bgColor: 'warning.lightest', // #FBF6E8
+    color: 'warning.dark', // #7D610D
+  },
+
+  /**
+   * Danger badge - Error/negative states
+   * Rose lightest background with dark rose text
+   */
+  danger: {
+    bgColor: 'danger.lightest', // #FBE8E9
+    color: 'danger.dark', // #7D0D14
+  },
+
+  /**
+   * Neutral badge - Neutral information
+   * Gray background with dark gray text
+   */
+  neutral: {
+    bgColor: 'gray.100', // #F0F3F9
+    color: 'gray.1200', // #2A3142
+  },
+};

package/src/components/Badge/Badge.tsx

@@ -1,19 +1,31 @@
 import { ForwardedRef, forwardRef } from 'react';
-import {
-  Badge as ChakraBadge,
-  BadgeProps as ChakraBadgeProps,
-} from '@chakra-ui/react';
+import { Badge as ChakraBadge } from '@chakra-ui/react';
 
-import { baseStyles } from './Badge.styles';
+import { baseStyles, variantStyles } from './Badge.styles';
+import { BadgeProps } from './Badge.types';
 
+/**
+ * Badge component with color variants using the Golden Ratio color system.
+ *
+ * @example
+ * ```tsx
+ * <Badge>Default</Badge>
+ * <Badge variant="success">Completed</Badge>
+ * <Badge variant="danger">Error</Badge>
+ * <Badge variant="warning">Pending</Badge>
+ * <Badge variant="secondary">Featured</Badge>
+ * <Badge variant="neutral">Draft</Badge>
+ * ```
+ */
 export const Badge = forwardRef(
   (
-    { textTransform = 'none', ...rest }: ChakraBadgeProps,
+    { textTransform = 'none', variant = 'primary', ...rest }: BadgeProps,
     ref?: ForwardedRef<HTMLButtonElement>
   ) => {
     return (
       <ChakraBadge
         {...baseStyles}
+        {...variantStyles[variant]}
         w="fit-content"
         textTransform={textTransform}
         {...rest}

package/src/components/Badge/Badge.types.ts

@@ -0,0 +1,30 @@
+import { BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
+
+/**
+ * Badge variant types for the Golden Ratio color system.
+ *
+ * Each variant uses the `lightest` background shade with `dark` text
+ * for optimal readability and WCAG AA compliance.
+ *
+ * - `primary`: Default blue badge for general purpose
+ * - `secondary`: Violet accent badge
+ * - `success`: Green badge for positive states
+ * - `warning`: Gold badge for caution states
+ * - `danger`: Rose badge for error/negative states
+ * - `neutral`: Gray badge for neutral information
+ */
+export type BadgeVariant =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'neutral';
+
+export interface BadgeProps extends Omit<ChakraBadgeProps, 'variant'> {
+  /**
+   * The color variant of the badge.
+   * @default 'primary'
+   */
+  variant?: BadgeVariant;
+}

package/src/components/Badge/index.ts

@@ -1,2 +1,6 @@
 export { Badge } from './Badge';
-export { baseStyles as badgeStyles } from './Badge.styles';
+export {
+  baseStyles as badgeStyles,
+  variantStyles as badgeVariantStyles,
+} from './Badge.styles';
+export type { BadgeProps, BadgeVariant } from './Badge.types';

package/src/components/Banner/Banner.stories.tsx

@@ -45,7 +45,7 @@ export const Danger: Story = {
 
 export const AllSizes: Story = {
   render: () => (
-    <VStack spacing={4} align="stretch">
+    <VStack gap={4} align="stretch">
       <Banner size="sm" variant="info">
         <Subtext color="inherit">Small banner with Subtext component</Subtext>
       </Banner>
@@ -58,3 +58,17 @@ export const AllSizes: Story = {
     </VStack>
   ),
 };
+
+const variants = ['info', 'success', 'warning', 'danger'] as const;
+
+export const AllVariants: Story = {
+  render: () => (
+    <VStack gap={4} align="stretch">
+      {variants.map((variant) => (
+        <Banner key={variant} variant={variant}>
+          This is a {variant} banner message
+        </Banner>
+      ))}
+    </VStack>
+  ),
+};