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

package/src/components/Textarea/Textarea.tsx

@@ -1,23 +1,22 @@
-import { ChangeEvent, useEffect, useState } from 'react';
-import {
-  forwardRef,
-  Textarea as ChakraTextarea,
-  TextareaProps,
-  useTheme,
-} from '@chakra-ui/react';
+import { ChangeEvent, forwardRef, useEffect, useState } from 'react';
+import { Textarea as ChakraTextarea } from '@chakra-ui/react';
 
-export const Textarea = forwardRef<TextareaProps, 'textarea'>(
+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();
     const [currentValue, setCurrentValue] = useState<
       string | number | readonly string[] | undefined
     >(propValue);
@@ -40,8 +39,26 @@ 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',
+        }}
+        _hover={{
+          borderColor: invalid ? 'danger.main' : 'gray.600',
+        }}
+        _invalid={{
+          borderColor: 'danger.main',
+          _hover: {
+            borderColor: 'danger.main',
+          },
+          _focus: {
+            borderColor: 'danger.main',
+          },
+        }}
         {...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>;

package/src/components/Toast/Toast.tsx

@@ -1,4 +1,4 @@
-import { Box, CloseButton, Flex } from '@chakra-ui/react'; // Import CloseButton
+import { Box, CloseButton, Flex } from '@chakra-ui/react';
 
 import { H5, Text } from '../Typography';
 import { ToastProps } from './Toast.types';
@@ -8,7 +8,7 @@ export const Toast = ({
   title,
   description,
   status = 'success',
-  onClose, // Add onClose prop
+  onClose,
   ...rest
 }: ToastProps & { onClose?: () => void }) => (
   <Flex
@@ -20,7 +20,9 @@ export const Toast = ({
     boxShadow="lg"
     whiteSpace="pre-line"
     position="relative"
-    {...rest}
+    animationName="slide-from-top, fade-in"
+    animationDuration="0.3s"
+    {...(rest as any)}
   >
     <ToastIcon status={status} />
     <Box flex={1}>
@@ -31,8 +33,6 @@ export const Toast = ({
       )}
       <Text color="inherit">{description}</Text>
     </Box>
-    <CloseButton
-      onClick={onClose} // Call onClose when clicked
-    />
+    <CloseButton onClick={onClose} size="sm" />
   </Flex>
 );

package/src/components/Toast/Toast.types.ts

@@ -1,22 +1,26 @@
 import { ReactNode } from 'react';
-import {
-  BoxProps,
-  ChakraProps,
-  UseToastOptions as ChakraUseToastOptions,
-} from '@chakra-ui/react';
+import { BoxProps } from '@chakra-ui/react';
 
 export interface MLToastOptions {
   title?: ReactNode;
   description: ReactNode;
-  status?: Extract<
-    ChakraUseToastOptions['status'],
-    'info' | 'warning' | 'success' | 'error'
-  >;
+  status?: 'info' | 'warning' | 'success' | 'error';
 }
 
 export interface ToastProps extends Omit<BoxProps, 'title'>, MLToastOptions {}
 
-export type UseToastOptions = ChakraUseToastOptions &
-  MLToastOptions & {
-    styles?: ChakraProps;
-  };
+export type ToastPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end';
+
+export interface UseToastOptions extends MLToastOptions {
+  duration?: number;
+  /** Toast placement */
+  placement?: ToastPlacement;
+  styles?: BoxProps;
+  [key: string]: any;
+}

package/src/components/Toast/useToast.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { ToastId, useToast as useChakraToast } from '@chakra-ui/react';
+import { createToaster, Toaster as ChakraToaster } from '@chakra-ui/react';
 
 import { Toast } from './Toast';
 import { toastStyles } from './Toast.styles';
@@ -7,18 +7,32 @@ import { UseToastOptions } from './Toast.types';
 
 const MAX_TOASTS = 3;
 
-export const useToast = (props?: UseToastOptions) => {
-  const toast = useChakraToast();
-  const activeToasts = useRef<ToastId[]>([]); // Track active toast IDs
+// Create a toaster instance
+const toaster = createToaster({
+  placement: 'top',
+  duration: 5000,
+});
+
+// Export Toaster component for rendering in app
+export const Toaster = () => (
+  <ChakraToaster toaster={toaster as any} insetInline={{ mdDown: '4' }}>
+    {(toast: any) => toast.render?.({ id: toast.id })}
+  </ChakraToaster>
+);
+
+export const useToast = () => {
+  const activeToasts = useRef<string[]>([]); // Track active toast IDs
 
   const showToast = ({
     status = 'success',
     title,
     description,
-    position = 'top',
+    placement,
     styles: stylesProp,
+    duration = 5000,
     ...rest
   }: UseToastOptions) => {
+    const toastPlacement = placement ?? 'top';
     const styles = {
       ...toastStyles[status],
       ...stylesProp,
@@ -28,34 +42,34 @@ export const useToast = (props?: UseToastOptions) => {
     if (activeToasts.current.length >= MAX_TOASTS) {
       const [oldestToastId] = activeToasts.current;
       if (oldestToastId) {
-        toast.close(oldestToastId); // Close the oldest toast
+        toaster.dismiss(oldestToastId); // Close the oldest toast
         activeToasts.current.shift(); // Remove it from the list
       }
     }
 
     // Create a new toast and capture its ID
-    const toastId = toast({
-      duration: 5000,
-      isClosable: true,
-      position,
-      ...props,
-      render: () => (
+    const toastId = toaster.create({
+      duration,
+      placement: toastPlacement,
+      render: ({ id }) => (
         <Toast
           title={title || ''}
           description={description}
           status={status}
-          onClose={() => toast.close(toastId)} // Close this specific toast
+          onClose={() => toaster.dismiss(id)} // Close this specific toast
           {...styles} // Apply status-specific styles
         />
       ),
-      onCloseComplete: () => {
-        // Remove the toast ID from the active list once closed
-        activeToasts.current = activeToasts.current.filter(
-          (id) => id !== toastId
-        );
+      onStatusChange: ({ status: toastStatus }) => {
+        if (toastStatus === 'unmounted') {
+          // Remove the toast ID from the active list once closed
+          activeToasts.current = activeToasts.current.filter(
+            (id) => id !== toastId
+          );
+        }
       },
       ...rest,
-    });
+    } as any);
 
     // Add the new toast ID to the active list
     activeToasts.current.push(toastId);
@@ -63,11 +77,14 @@ export const useToast = (props?: UseToastOptions) => {
     return toastId;
   };
 
+  const dismissAll = () => {
+    activeToasts.current.forEach((id) => toaster.dismiss(id));
+    activeToasts.current = [];
+  };
+
   return Object.assign(showToast, {
-    close: toast.close,
-    closeAll: toast.closeAll,
-    update: toast.update,
-    isActive: toast.isActive,
-    promise: toast.promise,
+    dismiss: toaster.dismiss,
+    dismissAll,
+    update: toaster.update,
   });
 };

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -9,15 +9,11 @@ const meta = {
   title: 'Components/Tooltip',
   component: Tooltip,
   args: {
-    label: 'This is a tooltip',
+    content: 'This is a tooltip',
     children: <Button>Hover me</Button>,
   },
   argTypes: {
-    placement: {
-      control: { type: 'select' },
-      options: ['top', 'bottom', 'left', 'right', 'auto'],
-    },
-    isOpen: {
+    open: {
       control: { type: 'boolean' },
     },
   },
@@ -37,18 +33,18 @@ export const Default: Story = {
 
 export const DifferentPlacements: Story = {
   render: () => (
-    <VStack spacing={8} p={8}>
-      <HStack spacing={8}>
-        <Tooltip label="Top tooltip" placement="top">
+    <VStack gap={8} p={8}>
+      <HStack gap={8}>
+        <Tooltip content="Top tooltip" placement="top">
           <Button>Top</Button>
         </Tooltip>
-        <Tooltip label="Bottom tooltip" placement="bottom">
+        <Tooltip content="Bottom tooltip" placement="bottom">
           <Button>Bottom</Button>
         </Tooltip>
-        <Tooltip label="Left tooltip" placement="left">
+        <Tooltip content="Left tooltip" placement="left">
           <Button>Left</Button>
         </Tooltip>
-        <Tooltip label="Right tooltip" placement="right">
+        <Tooltip content="Right tooltip" placement="right">
           <Button>Right</Button>
         </Tooltip>
       </HStack>
@@ -63,7 +59,7 @@ export const LongTooltipContent: Story = {
   render: (args) => (
     <Box p={8} display="flex" justifyContent="center">
       <Tooltip
-        label="This is a much longer tooltip content that demonstrates how the tooltip handles wrapping and longer text content. It should display nicely even with multiple lines."
+        content="This is a much longer tooltip content that demonstrates how the tooltip handles wrapping and longer text content. It should display nicely even with multiple lines."
         placement="top"
         {...args}
       />
@@ -91,15 +87,197 @@ export const CopyButtonExample: Story = {
 
     return (
       <Box p={8} display="flex" justifyContent="center">
-        <Tooltip label={tooltipLabel} isOpen={isTooltipOpen} placement="top">
+        <Tooltip content={tooltipLabel} open={isTooltipOpen}>
           <IconButton
             aria-label="Copy text"
-            icon={<FaRegCopy />}
             onClick={handleCopy}
-            variant="tertiary"
-          />
+            variant="ghost"
+          >
+            <FaRegCopy />
+          </IconButton>
         </Tooltip>
       </Box>
     );
   },
 };
+
+export const WithArrow: Story = {
+  render: () => (
+    <VStack gap={8} p={8}>
+      <HStack gap={8}>
+        <Tooltip content="Arrow pointing down" placement="top" showArrow>
+          <Button>Top</Button>
+        </Tooltip>
+        <Tooltip content="Arrow pointing up" placement="bottom" showArrow>
+          <Button>Bottom</Button>
+        </Tooltip>
+        <Tooltip content="Arrow pointing right" placement="left" showArrow>
+          <Button>Left</Button>
+        </Tooltip>
+        <Tooltip content="Arrow pointing left" placement="right" showArrow>
+          <Button>Right</Button>
+        </Tooltip>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const CustomStylesWithArrow: Story = {
+  render: () => (
+    <VStack gap={8} p={8}>
+      <HStack gap={8}>
+        <Tooltip
+          content="Primary color tooltip"
+          showArrow
+          contentProps={{
+            css: { '--tooltip-bg': 'var(--chakra-colors-primary-main)' },
+            bgColor: 'primary.main',
+          }}
+        >
+          <Button colorPalette="primary" variant="outline">
+            Primary
+          </Button>
+        </Tooltip>
+
+        <Tooltip
+          content="Danger color tooltip"
+          showArrow
+          contentProps={{
+            css: { '--tooltip-bg': 'var(--chakra-colors-danger-main)' },
+            bgColor: 'danger.main',
+          }}
+        >
+          <Button colorPalette="danger" variant="outline">
+            Danger
+          </Button>
+        </Tooltip>
+
+        <Tooltip
+          content="Success color tooltip"
+          showArrow
+          contentProps={{
+            css: { '--tooltip-bg': 'var(--chakra-colors-success-main)' },
+            bgColor: 'success.main',
+          }}
+        >
+          <Button colorPalette="success" variant="outline">
+            Success
+          </Button>
+        </Tooltip>
+
+        <Tooltip
+          content="Warning color tooltip"
+          showArrow
+          contentProps={{
+            css: { '--tooltip-bg': 'var(--chakra-colors-warning-main)' },
+            bgColor: 'warning.main',
+            color: 'gray.1500',
+          }}
+        >
+          <Button colorPalette="warning" variant="outline">
+            Warning
+          </Button>
+        </Tooltip>
+      </HStack>
+
+      <HStack gap={8}>
+        <Tooltip
+          content="Large padding tooltip"
+          showArrow
+          contentProps={{
+            px: 4,
+            py: 3,
+            fontSize: 'md',
+          }}
+        >
+          <Button>Large Padding</Button>
+        </Tooltip>
+
+        <Tooltip
+          content="Custom border radius"
+          showArrow
+          contentProps={{
+            borderRadius: 'xl',
+          }}
+        >
+          <Button>Rounded</Button>
+        </Tooltip>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const CustomStylesWithoutArrow: Story = {
+  render: () => (
+    <VStack gap={8} p={8}>
+      <HStack gap={8}>
+        <Tooltip
+          content="Primary color tooltip"
+          contentProps={{
+            bgColor: 'primary.main',
+          }}
+        >
+          <Button colorPalette="primary" variant="outline">
+            Primary
+          </Button>
+        </Tooltip>
+
+        <Tooltip
+          content="Danger color tooltip"
+          contentProps={{
+            bgColor: 'danger.main',
+          }}
+        >
+          <Button colorPalette="danger" variant="outline">
+            Danger
+          </Button>
+        </Tooltip>
+
+        <Tooltip
+          content="Success color tooltip"
+          contentProps={{
+            bgColor: 'success.main',
+          }}
+        >
+          <Button colorPalette="success" variant="outline">
+            Success
+          </Button>
+        </Tooltip>
+
+        <Tooltip
+          content="Warning color tooltip"
+          contentProps={{
+            bgColor: 'warning.main',
+            color: 'gray.1500',
+          }}
+        >
+          <Button colorPalette="warning" variant="outline">
+            Warning
+          </Button>
+        </Tooltip>
+      </HStack>
+
+      <HStack gap={8}>
+        <Tooltip
+          content="Large padding tooltip"
+          contentProps={{
+            px: 4,
+            py: 3,
+            fontSize: 'md',
+          }}
+        >
+          <Button>Large Padding</Button>
+        </Tooltip>
+
+        <Tooltip
+          content="Custom border radius"
+          contentProps={{
+            borderRadius: 'xl',
+          }}
+        >
+          <Button>Rounded</Button>
+        </Tooltip>
+      </HStack>
+    </VStack>
+  ),
+};