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

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

package/src/components/Tooltip/Tooltip.tsx

@@ -1,20 +1,68 @@
-import { ForwardedRef, forwardRef } from 'react';
-import { Tooltip as ChakraTooltip, useTheme } from '@chakra-ui/react';
+import { cloneElement, ForwardedRef, forwardRef, isValidElement } from 'react';
+import { Portal, Tooltip as ChakraTooltip } from '@chakra-ui/react';
 
 import { TooltipProps } from './Tooltip.types';
 
 export const Tooltip = forwardRef(
-  ({ ...rest }: TooltipProps, ref?: ForwardedRef<HTMLDivElement>) => {
-    const theme = useTheme();
+  (
+    {
+      children,
+      content,
+      open,
+      onOpenChange,
+      placement = 'top',
+      disabled,
+      showArrow = false,
+      contentProps,
+      arrowProps,
+      ...rest
+    }: TooltipProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    if (disabled) {
+      return <>{children}</>;
+    }
+
     return (
-      <ChakraTooltip
-        bgColor="gray.1200"
-        placement="top"
-        fontSize={theme.fontSizes.p}
+      <ChakraTooltip.Root
+        positioning={{ placement }}
         closeOnScroll
+        open={open}
+        onOpenChange={onOpenChange}
+        openDelay={200}
+        closeDelay={0}
         {...rest}
-        ref={ref}
-      />
+      >
+        <ChakraTooltip.Trigger>
+          {isValidElement(children)
+            ? cloneElement(children as React.ReactElement<any>)
+            : children}
+        </ChakraTooltip.Trigger>
+        <Portal>
+          <ChakraTooltip.Positioner>
+            <ChakraTooltip.Content
+              ref={ref}
+              color="white"
+              fontSize="sm"
+              px={2}
+              py={1}
+              borderRadius="md"
+              maxW="320px"
+              css={{
+                '--tooltip-bg': 'var(--chakra-colors-gray-1200)',
+              }}
+              {...contentProps}
+            >
+              {showArrow && (
+                <ChakraTooltip.Arrow {...arrowProps}>
+                  <ChakraTooltip.ArrowTip />
+                </ChakraTooltip.Arrow>
+              )}
+              {content}
+            </ChakraTooltip.Content>
+          </ChakraTooltip.Positioner>
+        </Portal>
+      </ChakraTooltip.Root>
     );
   }
 );

package/src/components/Tooltip/Tooltip.types.ts

@@ -1,3 +1,33 @@
-import { TooltipProps as ChakraTooltipProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import {
+  TooltipArrowProps as ChakraTooltipArrowProps,
+  TooltipContentProps as ChakraTooltipContentProps,
+  TooltipRootProps as ChakraTooltipRootProps,
+} from '@chakra-ui/react';
 
-export interface TooltipProps extends ChakraTooltipProps {}
+export interface TooltipProps extends ChakraTooltipRootProps {
+  /** Tooltip content */
+  content?: ReactNode;
+  /** Props to pass to the tooltip content element */
+  contentProps?: ChakraTooltipContentProps;
+  /** Props to pass to the tooltip arrow element */
+  arrowProps?: ChakraTooltipArrowProps;
+  /** Disable the tooltip */
+  disabled?: boolean;
+  /** Tooltip placement */
+  placement?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end';
+  /** Show arrow indicator */
+  showArrow?: boolean;
+}

package/src/components/Typography/H1.tsx

@@ -1,16 +1,19 @@
 import { forwardRef } from 'react';
-import { Heading, HeadingProps, useTheme } from '@chakra-ui/react';
+import { Heading, HeadingProps } from '@chakra-ui/react';
 
 export const H1 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
-  const theme = useTheme();
+  const { fontSize, ...rest } = props;
+
   return (
     <Heading
       ref={ref}
       as="h1"
-      fontSize={theme.fontSizes.h1}
+      textStyle={fontSize ? undefined : 'h1'}
+      fontSize={fontSize}
+      lineHeight="1.33"
       fontWeight="bold"
       wordBreak="keep-all"
-      {...props}
+      {...rest}
     />
   );
 });

package/src/components/Typography/H2.tsx

@@ -1,16 +1,19 @@
 import { forwardRef } from 'react';
-import { Heading, HeadingProps, useTheme } from '@chakra-ui/react';
+import { Heading, HeadingProps } from '@chakra-ui/react';
 
 export const H2 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
-  const theme = useTheme();
+  const { fontSize, ...rest } = props;
+
   return (
     <Heading
       ref={ref}
       as="h2"
-      fontSize={theme.fontSizes.h2}
+      textStyle={fontSize ? undefined : 'h2'}
+      fontSize={fontSize}
+      lineHeight="1.33"
       fontWeight="semibold"
       wordBreak="keep-all"
-      {...props}
+      {...rest}
     />
   );
 });

package/src/components/Typography/H3.tsx

@@ -1,17 +1,20 @@
 import { forwardRef } from 'react';
-import { Heading, HeadingProps, useTheme } from '@chakra-ui/react';
+import { Heading, HeadingProps } from '@chakra-ui/react';
 
 export const H3 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
-  const theme = useTheme();
+  const { fontSize, ...rest } = props;
+
   return (
     <Heading
       ref={ref}
       as="h3"
       color="gray.1500"
-      fontSize={theme.fontSizes.h3}
+      textStyle={fontSize ? undefined : 'h3'}
+      fontSize={fontSize}
+      lineHeight="1.33"
       fontWeight="semibold"
       wordBreak="keep-all"
-      {...props}
+      {...rest}
     />
   );
 });

package/src/components/Typography/H4.tsx

@@ -1,16 +1,19 @@
 import { forwardRef } from 'react';
-import { Heading, HeadingProps, useTheme } from '@chakra-ui/react';
+import { Heading, HeadingProps } from '@chakra-ui/react';
 
 export const H4 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
-  const theme = useTheme();
+  const { fontSize, ...rest } = props;
+
   return (
     <Heading
       ref={ref}
       as="h4"
-      fontSize={theme.fontSizes.h4}
+      textStyle={fontSize ? undefined : 'h4'}
+      fontSize={fontSize}
+      lineHeight="1.4"
       fontWeight="semibold"
       wordBreak="keep-all"
-      {...props}
+      {...rest}
     />
   );
 });

package/src/components/Typography/H5.tsx

@@ -1,16 +1,19 @@
 import { forwardRef } from 'react';
-import { Heading, HeadingProps, useTheme } from '@chakra-ui/react';
+import { Heading, HeadingProps } from '@chakra-ui/react';
 
 export const H5 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
-  const theme = useTheme();
+  const { fontSize, ...rest } = props;
+
   return (
     <Heading
       ref={ref}
       as="h5"
-      fontSize={theme.fontSizes.h5}
+      textStyle={fontSize ? undefined : 'h5'}
+      fontSize={fontSize}
+      lineHeight="1.4"
       fontWeight="bold"
       wordBreak="keep-all"
-      {...props}
+      {...rest}
     />
   );
 });