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

package/src/components/Tag/Tag.styles.ts

@@ -1,12 +1,151 @@
-export const variantStyles = {
-  default: {
-    bgColor: 'gray.50',
-    borderColor: 'gray.400',
-    color: 'gray.1200',
+import { BoxProps } from '@chakra-ui/react';
+
+import { TagColorPalette, TagVariant } from './Tag.types';
+
+/**
+ * Tag styles using a two-dimensional variant system.
+ *
+ * Structure: tagColorPaletteStyles[colorPalette][variant]
+ *
+ * Uses semantic color tokens from the Golden Ratio color system.
+ */
+export const tagColorPaletteStyles: Record<
+  TagColorPalette,
+  Record<TagVariant, BoxProps>
+> = {
+  primary: {
+    soft: {
+      bgColor: 'primary.lightest',
+      borderColor: 'primary.light',
+      color: 'primary.dark',
+    },
+    solid: {
+      bgColor: 'primary.main',
+      borderColor: 'primary.main',
+      color: 'white',
+    },
+    outline: {
+      bgColor: 'transparent',
+      borderColor: 'primary.main',
+      color: 'primary.main',
+    },
   },
-  active: {
-    bgColor: 'primary.light',
-    borderColor: 'primary.main',
-    color: 'primary.dark',
+  secondary: {
+    soft: {
+      bgColor: 'secondary.lightest',
+      borderColor: 'secondary.light',
+      color: 'secondary.dark',
+    },
+    solid: {
+      bgColor: 'secondary.main',
+      borderColor: 'secondary.main',
+      color: 'white',
+    },
+    outline: {
+      bgColor: 'transparent',
+      borderColor: 'secondary.main',
+      color: 'secondary.main',
+    },
   },
+  danger: {
+    soft: {
+      bgColor: 'danger.lightest',
+      borderColor: 'danger.light',
+      color: 'danger.dark',
+    },
+    solid: {
+      bgColor: 'danger.main',
+      borderColor: 'danger.main',
+      color: 'white',
+    },
+    outline: {
+      bgColor: 'transparent',
+      borderColor: 'danger.main',
+      color: 'danger.main',
+    },
+  },
+  success: {
+    soft: {
+      bgColor: 'success.lightest',
+      borderColor: 'success.light',
+      color: 'success.dark',
+    },
+    solid: {
+      bgColor: 'success.main',
+      borderColor: 'success.main',
+      color: 'white',
+    },
+    outline: {
+      bgColor: 'transparent',
+      borderColor: 'success.main',
+      color: 'success.main',
+    },
+  },
+  warning: {
+    soft: {
+      bgColor: 'warning.lightest',
+      borderColor: 'warning.light',
+      color: 'warning.dark',
+    },
+    solid: {
+      bgColor: 'warning.main',
+      borderColor: 'warning.main',
+      color: 'white',
+    },
+    outline: {
+      bgColor: 'transparent',
+      borderColor: 'warning.main',
+      color: 'warning.main',
+    },
+  },
+  neutral: {
+    soft: {
+      bgColor: 'gray.100',
+      borderColor: 'gray.300',
+      color: 'gray.800',
+    },
+    solid: {
+      bgColor: 'gray.800',
+      borderColor: 'gray.800',
+      color: 'white',
+    },
+    outline: {
+      bgColor: 'transparent',
+      borderColor: 'gray.500',
+      color: 'gray.700',
+    },
+  },
+};
+
+/**
+ * Helper function to get tag styles for a given colorPalette and variant.
+ */
+export const getTagStyles = (
+  colorPalette: TagColorPalette = 'neutral',
+  variant: TagVariant = 'soft'
+): BoxProps => {
+  return tagColorPaletteStyles[colorPalette][variant];
 };
+
+/** All available color palettes */
+export const tagColorPalettes: TagColorPalette[] = [
+  'primary',
+  'secondary',
+  'danger',
+  'success',
+  'warning',
+  'neutral',
+];
+
+/**
+ * @deprecated Use tagColorPalettes instead. Will be removed in next major version.
+ */
+export const tagColorSchemes = tagColorPalettes;
+
+/**
+ * @deprecated Use tagColorPaletteStyles instead. Will be removed in next major version.
+ */
+export const tagColorSchemeStyles = tagColorPaletteStyles;
+
+/** All available variants */
+export const tagVariants: TagVariant[] = ['soft', 'solid', 'outline'];

package/src/components/Tag/Tag.tsx

@@ -1,21 +1,47 @@
 import { ForwardedRef, forwardRef } from 'react';
 import { Tag as ChakraTag } from '@chakra-ui/react';
 
-import { variantStyles } from './Tag.styles';
+import { getTagStyles } from './Tag.styles';
 import { TagProps } from './Tag.types';
 
+/**
+ * Tag component for categorization, filtering, and labeling.
+ *
+ * Uses a two-dimensional variant system:
+ * - `colorPalette`: What semantic color (primary, secondary, danger, etc.)
+ * - `variant`: How it looks visually (soft, solid, outline)
+ *
+ * Supports close button via TagCloseButton sub-component.
+ *
+ * @example
+ * ```tsx
+ * <Tag colorPalette="primary">Category</Tag>
+ * <Tag colorPalette="danger" variant="solid">Error</Tag>
+ * <Tag colorPalette="success" variant="outline">
+ *   Completed
+ *   <TagCloseButton />
+ * </Tag>
+ * ```
+ */
 export const Tag = forwardRef(
   (
-    { variant = 'default', ...rest }: TagProps,
+    { colorPalette = 'neutral', variant = 'soft', children, ...rest }: TagProps,
     ref?: ForwardedRef<HTMLDivElement>
   ) => {
+    const styles = getTagStyles(colorPalette, variant);
+
     return (
-      <ChakraTag
+      <ChakraTag.Root
         border="1px solid"
-        {...variantStyles[variant]}
+        borderRadius="md"
+        boxShadow="none"
+        fontSize="sm"
+        {...styles}
         {...rest}
         ref={ref}
-      />
+      >
+        {children}
+      </ChakraTag.Root>
     );
   }
 );

package/src/components/Tag/Tag.types.ts

@@ -1,5 +1,46 @@
-import { TagProps as ChakraTagProps } from '@chakra-ui/react';
+import { BoxProps } from '@chakra-ui/react';
 
-export interface TagProps extends ChakraTagProps {
-  variant?: 'default' | 'active';
+/**
+ * Tag color schemes - determines the semantic color of the tag.
+ *
+ * This prop overrides Chakra UI's native `colorPalette` prop to provide
+ * a controlled set of color options that align with our design system.
+ */
+export type TagColorPalette =
+  | 'primary'
+  | 'secondary'
+  | 'danger'
+  | 'success'
+  | 'warning'
+  | 'neutral';
+
+/**
+ * Tag variants - determines the visual style of the tag.
+ *
+ * - soft: Light background tint with darker text (default)
+ * - solid: Filled background with contrasting text
+ * - outline: Transparent background with colored border
+ */
+export type TagVariant = 'soft' | 'solid' | 'outline';
+
+/**
+ * TagProps uses a two-dimensional variant system:
+ * - `colorPalette`: What semantic color (primary, secondary, danger, etc.)
+ * - `variant`: How it looks visually (soft, solid, outline)
+ *
+ * This matches the Button and Chip component architecture for consistency.
+ *
+ * @example
+ * ```tsx
+ * <Tag colorPalette="primary" variant="soft">Category</Tag>
+ * <Tag colorPalette="danger" variant="solid">Error</Tag>
+ * <Tag colorPalette="success" variant="outline">
+ *   Completed
+ *   <TagCloseButton />
+ * </Tag>
+ * ```
+ */
+export interface TagProps extends Omit<BoxProps, 'colorPalette' | 'variant'> {
+  colorPalette?: TagColorPalette;
+  variant?: TagVariant;
 }

package/src/components/Tag/TagCloseButton/TagCloseButton.tsx

@@ -1,11 +1,15 @@
 import { ForwardedRef, forwardRef } from 'react';
-import { TagCloseButton as ChakraTagCloseButton } from '@chakra-ui/react';
+import { Tag } from '@chakra-ui/react';
 
 import { TagCloseButtonProps } from './TagCloseButton.types';
 
 export const TagCloseButton = forwardRef(
-  ({ ...rest }: TagCloseButtonProps, ref?: ForwardedRef<HTMLDivElement>) => {
-    return <ChakraTagCloseButton {...rest} ref={ref} />;
+  ({ ...rest }: TagCloseButtonProps, ref?: ForwardedRef<HTMLButtonElement>) => {
+    return (
+      <Tag.EndElement>
+        <Tag.CloseTrigger {...rest} ref={ref} />
+      </Tag.EndElement>
+    );
   }
 );
 

package/src/components/Tag/TagCloseButton/TagCloseButton.types.ts

@@ -1,3 +1,3 @@
-import { TagCloseButtonProps as ChakraTagCloseButtonProps } from '@chakra-ui/react';
+import { CloseButtonProps } from '@chakra-ui/react';
 
-export interface TagCloseButtonProps extends ChakraTagCloseButtonProps {}
+export interface TagCloseButtonProps extends CloseButtonProps {}

package/src/components/Tag/TagLabel/TagLabel.tsx

@@ -1,11 +1,11 @@
 import { ForwardedRef, forwardRef } from 'react';
-import { TagLabel as ChakraTagLabel } from '@chakra-ui/react';
+import { Tag } from '@chakra-ui/react';
 
 import { TagLabelProps } from './TagLabel.types';
 
 export const TagLabel = forwardRef(
   ({ ...rest }: TagLabelProps, ref?: ForwardedRef<HTMLDivElement>) => {
-    return <ChakraTagLabel {...rest} ref={ref} />;
+    return <Tag.Label {...rest} ref={ref} />;
   }
 );
 

package/src/components/Tag/TagLeftIcon/TagLeftIcon.tsx

@@ -1,11 +1,14 @@
 import { ForwardedRef, forwardRef } from 'react';
-import { TagLeftIcon as ChakraTagLeftIcon } from '@chakra-ui/react';
+import { Icon } from '@chakra-ui/react';
 
 import { TagLeftIconProps } from './TagLeftIcon.types';
 
+/**
+ * @deprecated In Chakra UI v3, use Icon component directly inside Tag
+ */
 export const TagLeftIcon = forwardRef(
   ({ ...rest }: TagLeftIconProps, ref?: ForwardedRef<SVGSVGElement>) => {
-    return <ChakraTagLeftIcon {...rest} ref={ref} />;
+    return <Icon {...rest} ref={ref} />;
   }
 );
 

package/src/components/Tag/TagRightIcon/TagRightIcon.tsx

@@ -1,12 +1,8 @@
-import { ForwardedRef, forwardRef } from 'react';
-import { TagRightIcon as ChakraTagRightIcon } from '@chakra-ui/react';
+import { Icon } from '@chakra-ui/react';
 
-import { TagRightIconProps } from './TagRightIcon.types';
-
-export const TagRightIcon = forwardRef(
-  ({ ...rest }: TagRightIconProps, ref?: ForwardedRef<SVGSVGElement>) => {
-    return <ChakraTagRightIcon {...rest} ref={ref} />;
-  }
-);
+/**
+ * @deprecated In Chakra UI v3, use Icon component directly inside Tag
+ */
+export const TagRightIcon = Icon;
 
 TagRightIcon.displayName = 'TagRightIcon';

package/src/components/Tag/index.ts

@@ -1,5 +1,11 @@
-export * from './Tag';
-export type * from './Tag.types';
+export { Tag } from './Tag';
+export {
+  getTagStyles,
+  tagColorPalettes,
+  tagColorPaletteStyles,
+  tagVariants,
+} from './Tag.styles';
+export type { TagColorPalette, TagProps, TagVariant } from './Tag.types';
 export * from './TagCloseButton';
 export * from './TagLabel';
 export * from './TagLeftIcon';

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import { AutosizeTextarea, Textarea } from '.';
+import { Textarea } from '.';
 
 const meta = {
   title: 'Components/Textarea',
@@ -14,12 +14,8 @@ const meta = {
         options: ['sm', 'md', 'lg'],
       },
     },
-    isDisabled: { control: 'boolean' },
-    isInvalid: { control: 'boolean' },
+    disabled: { control: 'boolean' },
     maxLength: { control: 'number' },
-    minRows: { control: 'number' },
-    maxRows: { control: 'number' },
-    preFocusMaxRows: { control: 'number' },
   },
   render: (args) => {
     const [value, setValue] = useState('');
@@ -42,42 +38,37 @@ type Story = StoryObj<typeof Textarea>;
 export const Basic: Story = {
   args: {
     size: 'md',
-    isDisabled: false,
-    isInvalid: false,
+    disabled: false,
     maxLength: 200,
   },
 };
 
 export const Disabled: Story = {
   args: {
-    isDisabled: true,
+    disabled: true,
     placeholder: 'Disabled textarea',
   },
 };
 
 export const Invalid: Story = {
   args: {
-    isInvalid: true,
     placeholder: 'Invalid state',
-  },
-};
-
-export const Autosize: Story = {
-  args: {
-    minRows: 6,
-    preFocusMaxRows: 8,
-    maxRows: 12,
+    invalid: true,
   },
   render: (args) => {
     const [value, setValue] = useState('');
 
     return (
-      <AutosizeTextarea
-        {...args}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        placeholder={args.placeholder ?? 'Autosize textarea...'}
-      />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        <Textarea
+          {...args}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <span style={{ color: '#D01721', fontSize: '14px' }}>
+          This field contains an error. Please fix it.
+        </span>
+      </div>
     );
   },
 };

package/src/components/Textarea/Textarea.tsx

@@ -1,23 +1,28 @@
-import { ChangeEvent, useEffect, useState } from 'react';
-import {
-  forwardRef,
-  Textarea as ChakraTextarea,
-  TextareaProps,
-  useTheme,
-} from '@chakra-ui/react';
-
-export const Textarea = forwardRef<TextareaProps, 'textarea'>(
+import { ChangeEvent, forwardRef, useEffect, useState } from 'react';
+import { Textarea as ChakraTextarea, useToken } from '@chakra-ui/react';
+
+import { TextareaProps } from './Textarea.types';
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
       placeholder,
       onChange,
       value: propValue,
       _focusVisible,
+      disabled,
+      invalid,
+      readOnly,
       ...props
-    }: TextareaProps,
-    ref?
+    },
+    ref
   ) => {
-    const theme = useTheme();
+    // Get resolved color values for boxShadow
+    const [primaryColor, dangerColor] = useToken('colors', [
+      'primary.main',
+      'danger.main',
+    ]);
+
     const [currentValue, setCurrentValue] = useState<
       string | number | readonly string[] | undefined
     >(propValue);
@@ -40,8 +45,20 @@ export const Textarea = forwardRef<TextareaProps, 'textarea'>(
         placeholder={placeholder}
         value={currentValue}
         onChange={handleChange}
+        disabled={disabled}
+        readOnly={readOnly}
+        data-invalid={invalid || undefined}
         resize="none"
-        focusBorderColor={theme.semanticTokens.colors.primary.main}
+        borderColor={invalid ? 'danger.main' : 'gray.400'}
+        _focus={{
+          borderColor: invalid ? 'danger.main' : 'primary.main',
+          boxShadow: invalid
+            ? `0 0 0 1px ${dangerColor}`
+            : `0 0 0 1px ${primaryColor}`,
+        }}
+        _hover={{
+          borderColor: invalid ? 'danger.main' : 'gray.600',
+        }}
         {...props}
       />
     );

package/src/components/Textarea/Textarea.types.ts

@@ -0,0 +1,6 @@
+import { TextareaProps as ChakraTextareaProps } from '@chakra-ui/react';
+
+export interface TextareaProps extends ChakraTextareaProps {
+  /** Controls invalid visual state */
+  invalid?: boolean;
+}

package/src/components/Textarea/index.ts

@@ -1,2 +1,2 @@
-export { AutosizeTextarea } from './AutosizeTextarea';
 export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea.types';

package/src/components/Toast/Toast.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '../Button';
 import { Toast } from './Toast';
-import { useToast } from './useToast';
+import { Toaster, useToast } from './useToast';
 
 const meta = {
   title: 'Components/Toast',
@@ -19,48 +19,51 @@ export const Toasts: Story = {
     const showToast = useToast();
 
     return (
-      <Flex gap={3}>
-        <Button
-          onClick={() =>
-            showToast({
-              description: 'There was an error processing your request.',
-              status: 'info',
-            })
-          }
-        >
-          Show Info Toast
-        </Button>
-        <Button
-          onClick={() =>
-            showToast({
-              description: 'This is a warning toast.',
-              status: 'warning',
-            })
-          }
-        >
-          Show Warning Toast
-        </Button>
-        <Button
-          onClick={() =>
-            showToast({
-              description: 'Your action was successful.',
-              status: 'success',
-            })
-          }
-        >
-          Show Success Toast
-        </Button>
-        <Button
-          onClick={() =>
-            showToast({
-              description: 'There was an error processing your request.',
-              status: 'error',
-            })
-          }
-        >
-          Show Error Toast
-        </Button>
-      </Flex>
+      <>
+        <Toaster />
+        <Flex gap={3}>
+          <Button
+            onClick={() =>
+              showToast({
+                description: 'There was an error processing your request.',
+                status: 'info',
+              })
+            }
+          >
+            Show Info Toast
+          </Button>
+          <Button
+            onClick={() =>
+              showToast({
+                description: 'This is a warning toast.',
+                status: 'warning',
+              })
+            }
+          >
+            Show Warning Toast
+          </Button>
+          <Button
+            onClick={() =>
+              showToast({
+                description: 'Your action was successful.',
+                status: 'success',
+              })
+            }
+          >
+            Show Success Toast
+          </Button>
+          <Button
+            onClick={() =>
+              showToast({
+                description: 'There was an error processing your request.',
+                status: 'error',
+              })
+            }
+          >
+            Show Error Toast
+          </Button>
+        </Flex>
+      </>
     );
   },
 };

package/src/components/Toast/Toast.styles.ts

@@ -2,25 +2,31 @@ import { BoxProps } from '@chakra-ui/react';
 
 import type { MLToastOptions } from './Toast.types';
 
+/**
+ * Toast variant styles using the Golden Ratio color system.
+ *
+ * Uses `lightest` backgrounds with `lighter` borders and `dark` text
+ * for optimal readability and WCAG AA compliance.
+ */
 export const toastStyles = {
   info: {
-    bg: 'primary.light',
-    color: 'primary.dark',
-    borderColor: 'primary.lighter',
+    bg: 'primary.lightest', // #E8EEFB
+    color: 'primary.dark', // #0D317D
+    borderColor: 'primary.lighter', // #B9CBF3
   },
   warning: {
-    bg: 'warning.lighter',
-    color: 'warning.dark',
-    borderColor: 'warning.light',
+    bg: 'warning.lightest', // #FBF6E8
+    color: 'warning.dark', // #7D610D
+    borderColor: 'warning.lighter', // #F3E4B9
   },
   success: {
-    bg: 'success.lighter',
-    color: 'success.dark',
-    borderColor: 'success.light',
+    bg: 'success.lightest', // #E9FBE8
+    color: 'success.dark', // #147D0D
+    borderColor: 'success.lighter', // #BDF3B9
   },
   error: {
-    bg: 'danger.lighter',
-    color: 'danger.dark',
-    borderColor: 'danger.light',
+    bg: 'danger.lightest', // #FBE8E9
+    color: 'danger.dark', // #7D0D14
+    borderColor: 'danger.lighter', // #F3B9BD
   },
 } satisfies Record<MLToastOptions['status'], BoxProps>;