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

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,3 +1,4 @@
+import { Box, Flex, VStack, HStack, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Avatar } from '.';
@@ -22,4 +23,348 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Basic: Story = {};
+export const Basic: Story = {
+  args: {
+    name: 'John Doe',
+  },
+};
+
+/**
+ * All available avatar sizes.
+ *
+ * ## Sizes:
+ * - `2xs`: Extra extra small
+ * - `xs`: Extra small
+ * - `sm`: Small
+ * - `md`: Medium - Default
+ * - `lg`: Large
+ * - `xl`: Extra large
+ * - `2xl`: Extra extra large
+ * - `full`: Full width/height (takes container size)
+ */
+export const Sizes: Story = {
+  render: () => {
+    const sizes = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const;
+
+    return (
+      <VStack gap={8} align="stretch">
+        {/* Sizes with name fallback */}
+        <Box>
+          <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+            Sizes with Name Fallback
+          </Text>
+          <Flex gap={4} wrap="wrap" align="center">
+            {sizes.map((size) => (
+              <VStack key={size} gap={2} align="center">
+                <Text fontSize="sm" color="gray.600" fontWeight="medium">
+                  {size}
+                </Text>
+                <Avatar name="John Doe" size={size} />
+              </VStack>
+            ))}
+          </Flex>
+        </Box>
+
+        {/* Sizes with image */}
+        <Box>
+          <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+            Sizes with Image
+          </Text>
+          <Flex gap={4} wrap="wrap" align="center">
+            {sizes.map((size) => (
+              <VStack key={size} gap={2} align="center">
+                <Text fontSize="sm" color="gray.600" fontWeight="medium">
+                  {size}
+                </Text>
+                <Avatar
+                  name="Jane Smith"
+                  src="https://i.pravatar.cc/150?img=1"
+                  size={size}
+                />
+              </VStack>
+            ))}
+          </Flex>
+        </Box>
+
+        {/* Sizes comparison */}
+        <Box>
+          <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+            Size Comparison
+          </Text>
+          <HStack gap={4} align="flex-end">
+            {sizes.map((size) => (
+              <VStack key={size} gap={2} align="center">
+                <Avatar
+                  name="User"
+                  src="https://i.pravatar.cc/150?img=2"
+                  size={size}
+                />
+                <Text fontSize="xs" color="gray.600">
+                  {size}
+                </Text>
+              </VStack>
+            ))}
+          </HStack>
+        </Box>
+      </VStack>
+    );
+  },
+};
+
+/**
+ * Avatar with image source.
+ * Includes examples with transparent background images.
+ */
+export const WithImage: Story = {
+  render: () => (
+    <VStack gap={8} align="stretch">
+      {/* Regular image */}
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+          Regular Image
+        </Text>
+        <HStack gap={4}>
+          <Avatar
+            name="Jane Smith"
+            src="https://i.pravatar.cc/150?img=5"
+            size="lg"
+          />
+          <Avatar
+            name="John Doe"
+            src="https://i.pravatar.cc/150?img=1"
+            size="lg"
+          />
+          <Avatar
+            name="Bob Johnson"
+            src="https://i.pravatar.cc/150?img=8"
+            size="lg"
+          />
+        </HStack>
+      </Box>
+      {/* Custom background override */}
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+          Custom Background (bg prop)
+        </Text>
+        <HStack gap={4}>
+          <VStack gap={2}>
+            <Avatar
+              name="GitHub"
+              src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg"
+              size="lg"
+              bg="white"
+            />
+            <Text fontSize="xs" color="gray.600">
+              bg="white"
+            </Text>
+          </VStack>
+          <VStack gap={2}>
+            <Avatar
+              name="React"
+              src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg"
+              size="lg"
+              bg="blue.100"
+            />
+            <Text fontSize="xs" color="gray.600">
+              bg="blue.100"
+            </Text>
+          </VStack>
+        </HStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+/**
+ * Avatar with fallback to initials.
+ */
+export const WithFallback: Story = {
+  args: {
+    name: 'John Doe',
+    size: 'lg',
+  },
+};
+
+/**
+ * Avatar without name or image shows default icon.
+ */
+export const Empty: Story = {
+  args: {
+    size: 'lg',
+  },
+};
+
+/**
+ * Avatar group showing multiple users.
+ */
+export const Group: Story = {
+  render: () => (
+    <VStack gap={8} align="stretch">
+      {/* Small group */}
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+          Small Group (md size)
+        </Text>
+        <HStack gap={-2}>
+          <Avatar name="John Doe" src="https://i.pravatar.cc/150?img=1" />
+          <Avatar name="Jane Smith" src="https://i.pravatar.cc/150?img=5" />
+          <Avatar name="Bob Johnson" src="https://i.pravatar.cc/150?img=8" />
+        </HStack>
+      </Box>
+
+      {/* Large group with size variation */}
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+          Large Group (sm size)
+        </Text>
+        <HStack gap={-2}>
+          <Avatar
+            name="Alice Cooper"
+            src="https://i.pravatar.cc/150?img=10"
+            size="sm"
+          />
+          <Avatar
+            name="Bob Dylan"
+            src="https://i.pravatar.cc/150?img=12"
+            size="sm"
+          />
+          <Avatar
+            name="Charlie Brown"
+            src="https://i.pravatar.cc/150?img=15"
+            size="sm"
+          />
+          <Avatar
+            name="David Lee"
+            src="https://i.pravatar.cc/150?img=20"
+            size="sm"
+          />
+          <Avatar name="Eve Wilson" size="sm" />
+        </HStack>
+      </Box>
+
+      {/* Extra large group */}
+      <Box>
+        <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+          Extra Large Group (lg size)
+        </Text>
+        <HStack gap={-3}>
+          <Avatar
+            name="User 1"
+            src="https://i.pravatar.cc/150?img=30"
+            size="lg"
+          />
+          <Avatar
+            name="User 2"
+            src="https://i.pravatar.cc/150?img=31"
+            size="lg"
+          />
+          <Avatar
+            name="User 3"
+            src="https://i.pravatar.cc/150?img=32"
+            size="lg"
+          />
+          <Avatar name="User 4" size="lg" />
+        </HStack>
+      </Box>
+    </VStack>
+  ),
+};
+
+/**
+ * Different name formats showing initials.
+ */
+export const Initials: Story = {
+  render: () => (
+    <VStack gap={4} align="stretch">
+      <Text fontSize="lg" fontWeight="bold" mb={2} color="gray.700">
+        Different Name Formats
+      </Text>
+      <Flex gap={4} wrap="wrap">
+        <VStack gap={1}>
+          <Avatar name="John Doe" size="lg" />
+          <Text fontSize="sm" color="gray.600">
+            John Doe
+          </Text>
+        </VStack>
+        <VStack gap={1}>
+          <Avatar name="Jane" size="lg" />
+          <Text fontSize="sm" color="gray.600">
+            Jane
+          </Text>
+        </VStack>
+        <VStack gap={1}>
+          <Avatar name="A B C" size="lg" />
+          <Text fontSize="sm" color="gray.600">
+            A B C
+          </Text>
+        </VStack>
+        <VStack gap={1}>
+          <Avatar name="김철수" size="lg" />
+          <Text fontSize="sm" color="gray.600">
+            김철수
+          </Text>
+        </VStack>
+      </Flex>
+    </VStack>
+  ),
+};
+
+/**
+ * All sizes in a comparison matrix.
+ */
+export const SizeMatrix: Story = {
+  render: () => {
+    const sizes = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const;
+    const users = [
+      { name: 'John Doe', src: 'https://i.pravatar.cc/150?img=1' },
+      { name: 'Jane Smith', src: 'https://i.pravatar.cc/150?img=5' },
+      { name: 'Bob Johnson', src: 'https://i.pravatar.cc/150?img=8' },
+    ];
+
+    return (
+      <VStack gap={6} align="stretch">
+        {/* Header row */}
+        <HStack gap={4}>
+          <Box w="120px" />
+          {sizes.map((size) => (
+            <Box key={size} w="80px" textAlign="center">
+              <Text fontWeight="bold" color="gray.600">
+                {size}
+              </Text>
+            </Box>
+          ))}
+        </HStack>
+
+        {/* User rows */}
+        {users.map((user, idx) => (
+          <HStack key={idx} gap={4} align="center">
+            <Box w="120px">
+              <Text fontWeight="medium" color="gray.600">
+                {user.name}
+              </Text>
+            </Box>
+            {sizes.map((size) => (
+              <Box key={`${idx}-${size}`} w="80px" textAlign="center">
+                <Avatar name={user.name} src={user.src} size={size} />
+              </Box>
+            ))}
+          </HStack>
+        ))}
+
+        {/* Fallback row */}
+        <HStack gap={4} align="center">
+          <Box w="120px">
+            <Text fontWeight="medium" color="gray.600">
+              Fallback
+            </Text>
+          </Box>
+          {sizes.map((size) => (
+            <Box key={`fallback-${size}`} w="80px" textAlign="center">
+              <Avatar name="Test User" size={size} />
+            </Box>
+          ))}
+        </HStack>
+      </VStack>
+    );
+  },
+};

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>
+  ),
+};