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

package/src/components/Tabs/Tab/Tab.tsx

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef, useState } from 'react';
-import { Tab as ChakraTab } from '@chakra-ui/react';
+import { Button, Tabs } from '@chakra-ui/react';
 
 import { useTabsContext } from '@/components/Tabs/TabsContext';
 
@@ -10,58 +10,43 @@ import {
   verticalStyles,
 } from './Tab.styles';
 
-// A global counter to assign unique IDs to tabs for identification
-let nextTabId = 0;
-
-export const Tab = ({ name, ...props }: TabProps) => {
-  const { orientation, registerTabName } = useTabsContext();
+export const Tab = ({ name, children, ...props }: TabProps) => {
+  const { orientation, registerTabName, getNextTriggerIndex } =
+    useTabsContext();
   const tabRef = useRef<HTMLButtonElement>(null);
-  const [tabId] = useState(() => `tab-${nextTabId++}`);
+  const [tabIndex] = useState(() => getNextTriggerIndex());
+  const tabValue = tabIndex.toString();
 
-  // Record when this tab was mounted in the DOM
+  // Register this tab's name when name is provided
   useLayoutEffect(() => {
-    // After mounting, find this tab's position
-    if (!name || !tabRef.current) {
-      console.warn('[Tab] Missing name or tabRef.current');
-      return;
+    if (name) {
+      registerTabName(tabIndex, name);
     }
-
-    // Use a timeout to ensure tabs are properly rendered
-    const timeoutId = setTimeout(() => {
-      try {
-        // Find all tab elements within the same tablist
-        const tabList = tabRef.current?.closest('[role="tablist"]');
-        if (!tabList) return;
-
-        const tabs = Array.from(tabList.querySelectorAll('[role="tab"]'));
-        const index = tabs.indexOf(tabRef.current!);
-
-        // Register this tab's name with the context
-        if (index !== -1) {
-          registerTabName(index, name);
-        }
-      } catch (error) {
-        console.error('[Tab] Error finding tab index:', error);
-      }
-    }, 50); // Short delay to ensure DOM is ready
-
-    return () => clearTimeout(timeoutId);
-  }, [name, registerTabName]);
+  }, [name, tabIndex, registerTabName]);
 
   return (
-    <ChakraTab
-      ref={tabRef}
-      id={tabId}
+    <Tabs.Trigger
+      value={tabValue}
       data-tab-name={name}
-      {...(orientation === 'vertical' && verticalStyles)}
-      color="gray.800"
-      py={3}
-      _selected={{
-        ...(orientation === 'vertical'
-          ? verticalSelectedStyles
-          : horizontalSelectedStyles),
-      }}
-      {...props}
-    />
+      {...({ asChild: true } as any)}
+    >
+      <Button
+        ref={tabRef}
+        variant="ghost"
+        colorPalette="neutral"
+        borderRadius="none"
+        {...(orientation === 'vertical' && verticalStyles)}
+        color="gray.800"
+        py={3}
+        _selected={{
+          ...(orientation === 'vertical'
+            ? verticalSelectedStyles
+            : horizontalSelectedStyles),
+        }}
+        {...props}
+      >
+        {children}
+      </Button>
+    </Tabs.Trigger>
   );
 };

package/src/components/Tabs/TabList/TabList.tsx

@@ -1,19 +1,34 @@
-import { TabList as ChakraTabList, TabListProps } from '@chakra-ui/react';
+import { useEffect } from 'react';
+import type { BoxProps } from '@chakra-ui/react';
+import { Box, Tabs } from '@chakra-ui/react';
 
 import { useTabsContext } from '@/components/Tabs/TabsContext';
 
 import { tabListStyles, verticalStyles } from './TabList.styles';
 
-export const TabList = (props: TabListProps) => {
-  const { orientation } = useTabsContext();
+export const TabList = ({
+  children,
+  ...props
+}: BoxProps & { children?: React.ReactNode }) => {
+  const { orientation, resetTriggerIndex } = useTabsContext();
+
+  // Reset tab trigger index counter when TabList renders
+  useEffect(() => {
+    resetTriggerIndex();
+  }, [resetTriggerIndex]);
+
   return (
-    <ChakraTabList
-      width="100%"
-      borderBottom="1px solid"
-      borderColor="gray.100"
-      {...tabListStyles}
-      {...(orientation === 'vertical' && verticalStyles)}
-      {...props}
-    />
+    <Tabs.List {...({ asChild: true } as any)}>
+      <Box
+        width="100%"
+        borderBottom="1px solid"
+        borderColor="gray.100"
+        {...tabListStyles}
+        {...(orientation === 'vertical' && verticalStyles)}
+        {...props}
+      >
+        {children}
+      </Box>
+    </Tabs.List>
   );
 };

package/src/components/Tabs/TabPanel.tsx

@@ -1,5 +1,22 @@
-import { TabPanel as ChakraTabPanel, TabPanelProps } from '@chakra-ui/react';
+import { useState } from 'react';
+import type { BoxProps } from '@chakra-ui/react';
+import { Box, Tabs } from '@chakra-ui/react';
 
-export const TabPanel = (props: TabPanelProps) => {
-  return <ChakraTabPanel p={0} {...props} />;
+import { useTabsContext } from './TabsContext';
+
+export const TabPanel = ({
+  children,
+  ...props
+}: BoxProps & { children?: React.ReactNode }) => {
+  const { getNextPanelIndex } = useTabsContext();
+  const [panelIndex] = useState(() => getNextPanelIndex());
+  const panelValue = panelIndex.toString();
+
+  return (
+    <Tabs.Content value={panelValue} {...({ asChild: true } as any)}>
+      <Box p={0} {...props}>
+        {children}
+      </Box>
+    </Tabs.Content>
+  );
 };

package/src/components/Tabs/TabPanels.tsx

@@ -1,5 +1,25 @@
-import { TabPanels as ChakraTabPanels, TabPanelsProps } from '@chakra-ui/react';
+import { useEffect } from 'react';
+import type { BoxProps } from '@chakra-ui/react';
+import { Box, Tabs } from '@chakra-ui/react';
 
-export const TabPanels = (props: TabPanelsProps) => {
-  return <ChakraTabPanels p={0} {...props} />;
+import { useTabsContext } from './TabsContext';
+
+export const TabPanels = ({
+  children,
+  ...props
+}: BoxProps & { children?: React.ReactNode }) => {
+  const { resetPanelIndex } = useTabsContext();
+
+  // Reset panel index counter when TabPanels renders
+  useEffect(() => {
+    resetPanelIndex();
+  }, [resetPanelIndex]);
+
+  return (
+    <Tabs.ContentGroup {...({ asChild: true } as any)}>
+      <Box p={0} {...props}>
+        {children}
+      </Box>
+    </Tabs.ContentGroup>
+  );
 };

package/src/components/Tabs/Tabs.tsx

@@ -41,7 +41,8 @@ const TabsWithUrlSync = ({
     externalIndex !== undefined ? externalIndex : selectedIndex;
 
   // Handle tab changes
-  const handleTabChange = (newIndex: number) => {
+  const handleTabChange = (details: { value: string }) => {
+    const newIndex = parseInt(details.value, 10);
     // Update the context state
     setSelectedIndex(newIndex);
 
@@ -52,14 +53,14 @@ const TabsWithUrlSync = ({
   };
 
   return (
-    <ChakraTabs
+    <ChakraTabs.Root
       position="relative"
-      variant="unstyled"
-      index={actualIndex}
-      onChange={handleTabChange}
+      variant="plain"
+      value={actualIndex.toString()}
+      onValueChange={handleTabChange}
       {...rest}
     >
       {children}
-    </ChakraTabs>
+    </ChakraTabs.Root>
   );
 };

package/src/components/Tabs/Tabs.types.ts

@@ -1,19 +1,31 @@
 import {
-  TabProps as ChakraTabProps,
-  TabsProps as ChakraTabsProps,
+  ButtonProps,
+  TabsRootProps as ChakraTabsRootProps,
 } from '@chakra-ui/react';
 
-export type TabsProps = ChakraTabsProps & {
+export type TabsProps = Omit<ChakraTabsRootProps, 'onChange' | 'index'> & {
   /**
    * If provided, the selected tab will be synced with the provided url param
    */
   urlParam?: string;
+  /**
+   * The index of the selected tab
+   */
+  index?: number;
+  /**
+   * Callback when tab changes
+   */
+  onChange?: (index: number) => void;
 };
 
-export type TabProps = ChakraTabProps & {
+export type TabProps = ButtonProps & {
   /**
    * The name of the tab
    * @default `tab-${index}`
    */
   name?: string;
+  /**
+   * The content of the tab
+   */
+  children?: React.ReactNode;
 };

package/src/components/Tabs/TabsContext.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, {
+  ComponentProps,
   createContext,
   PropsWithChildren,
   useCallback,
@@ -8,7 +9,7 @@ import React, {
   useLayoutEffect,
   useState,
 } from 'react';
-import { TabsProps as ChakraTabsProps } from '@chakra-ui/react';
+import { Tabs } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
 
 // Optional Next.js navigation hooks with fallbacks
@@ -19,13 +20,14 @@ let usePathname: (() => string) | null = null;
 
 try {
   // Try to import Next.js navigation hooks
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const nextNavigation = require('next/navigation');
   useRouter = nextNavigation.useRouter;
   usePathname = nextNavigation.usePathname;
 } catch (error) {
   // Next.js not available - create fallback implementations
   useRouter = () => ({
-    replace: (url: string, options?: any) => {
+    replace: (url: string, _options?: any) => {
       if (typeof window !== 'undefined') {
         window.history.replaceState(null, '', url);
       }
@@ -36,13 +38,17 @@ try {
 }
 
 interface TabsContextProps {
-  orientation: ChakraTabsProps['orientation'];
+  orientation: ComponentProps<typeof Tabs.Root>['orientation'];
   urlParam?: string;
   tabNames: string[];
   setTabNames: React.Dispatch<React.SetStateAction<string[]>>;
   selectedIndex: number;
   setSelectedIndex: (index: number) => void;
   registerTabName: (index: number, name: string) => void;
+  getNextTriggerIndex: () => number;
+  getNextPanelIndex: () => number;
+  resetTriggerIndex: () => void;
+  resetPanelIndex: () => void;
 }
 
 const TabsContext = createContext<TabsContextProps>({
@@ -53,6 +59,10 @@ const TabsContext = createContext<TabsContextProps>({
   selectedIndex: 0,
   setSelectedIndex: () => {},
   registerTabName: () => {},
+  getNextTriggerIndex: () => 0,
+  getNextPanelIndex: () => 0,
+  resetTriggerIndex: () => {},
+  resetPanelIndex: () => {},
 });
 
 export const useTabsContext = () => useContext(TabsContext);
@@ -62,14 +72,34 @@ export function TabsProvider({
   orientation,
   urlParam,
 }: PropsWithChildren<{
-  orientation: ChakraTabsProps['orientation'];
+  orientation: ComponentProps<typeof Tabs.Root>['orientation'];
   urlParam?: string;
 }>) {
   const [tabNames, setTabNames] = useState<string[]>([]);
   const [selectedIndex, setSelectedIndexState] = useState(0);
+  const triggerIndexRef = React.useRef(0);
+  const panelIndexRef = React.useRef(0);
   const router = useRouter?.() || { replace: () => {} };
   const pathname = usePathname?.() || '/';
 
+  // Functions to manage tab trigger indices
+  const getNextTriggerIndex = useCallback(() => {
+    return triggerIndexRef.current++;
+  }, []);
+
+  const resetTriggerIndex = useCallback(() => {
+    triggerIndexRef.current = 0;
+  }, []);
+
+  // Functions to manage tab panel indices
+  const getNextPanelIndex = useCallback(() => {
+    return panelIndexRef.current++;
+  }, []);
+
+  const resetPanelIndex = useCallback(() => {
+    panelIndexRef.current = 0;
+  }, []);
+
   // A function to register a tab name at a specific index
   const registerTabName = useCallback((index: number, name: string) => {
     setTabNames((prev) => {
@@ -147,6 +177,10 @@ export function TabsProvider({
         selectedIndex,
         setSelectedIndex,
         registerTabName,
+        getNextTriggerIndex,
+        getNextPanelIndex,
+        resetTriggerIndex,
+        resetPanelIndex,
       }}
     >
       {children}

package/src/components/Tag/Tag.stories.tsx

@@ -1,13 +1,26 @@
+import { Box, Flex, Text, VStack } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Tag } from './Tag';
+import { Tag, tagColorPalettes, tagVariants } from '.';
 import { TagCloseButton } from './TagCloseButton';
 
 const meta = {
   title: 'Components/Tag',
   component: Tag,
   args: {
-    children: 'Insert your tag',
+    children: 'Tag',
+  },
+  argTypes: {
+    colorPalette: {
+      control: 'select',
+      options: tagColorPalettes,
+      description: 'Semantic color of the tag',
+    },
+    variant: {
+      control: 'select',
+      options: tagVariants,
+      description: 'Visual style of the tag',
+    },
   },
 } satisfies Meta<typeof Tag>;
 
@@ -15,17 +28,196 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  render: (args) => <Tag {...args} />,
+export const Basic: Story = {};
+
+export const Primary: Story = {
+  args: {
+    colorPalette: 'primary',
+    children: 'Primary',
+  },
 };
 
-export const Closable: Story = {
+export const Secondary: Story = {
+  args: {
+    colorPalette: 'secondary',
+    children: 'Secondary',
+  },
+};
+
+export const Success: Story = {
   args: {
-    children: (
-      <>
-        Insert your tag
-        <TagCloseButton />
-      </>
-    ),
+    colorPalette: 'success',
+    children: 'Success',
   },
 };
+
+export const Warning: Story = {
+  args: {
+    colorPalette: 'warning',
+    children: 'Warning',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    colorPalette: 'danger',
+    children: 'Danger',
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    colorPalette: 'neutral',
+    children: 'Neutral',
+  },
+};
+
+export const Soft: Story = {
+  args: {
+    colorPalette: 'primary',
+    variant: 'soft',
+    children: 'Soft',
+  },
+};
+
+export const Solid: Story = {
+  args: {
+    colorPalette: 'primary',
+    variant: 'solid',
+    children: 'Solid',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    colorPalette: 'primary',
+    variant: 'outline',
+    children: 'Outline',
+  },
+};
+
+/**
+ * Tags with close button for removable items.
+ */
+export const Closable: Story = {
+  render: () => (
+    <Flex gap={2} wrap="wrap">
+      {tagColorPalettes.map((colorPalette) => (
+        <Tag key={colorPalette} colorPalette={colorPalette} variant="soft">
+          {colorPalette}
+          <TagCloseButton />
+        </Tag>
+      ))}
+    </Flex>
+  ),
+};
+
+/**
+ * Shows all combinations of colorPalette × variant in a matrix layout.
+ */
+export const AllCombinations: Story = {
+  render: () => (
+    <Box>
+      {/* Header row */}
+      <Flex mb={4} gap={4} align="center">
+        <Box w="100px" />
+        {tagVariants.map((variant) => (
+          <Box key={variant} w="100px" textAlign="center">
+            <Text fontWeight="bold" textStyle="subtext">
+              {variant}
+            </Text>
+          </Box>
+        ))}
+      </Flex>
+
+      {/* Color scheme rows */}
+      {tagColorPalettes.map((colorPalette) => (
+        <Flex key={colorPalette} mb={4} gap={4} align="center">
+          <Box w="100px">
+            <Text fontWeight="medium" textStyle="subtext">
+              {colorPalette}
+            </Text>
+          </Box>
+          {tagVariants.map((variant) => (
+            <Box key={`${colorPalette}-${variant}`} w="100px" textAlign="center">
+              <Tag colorPalette={colorPalette} variant={variant}>
+                Tag
+              </Tag>
+            </Box>
+          ))}
+        </Flex>
+      ))}
+    </Box>
+  ),
+};
+
+/**
+ * Example use case: categorization tags
+ */
+export const Categories: Story = {
+  render: () => (
+    <VStack align="start" gap={4}>
+      <Box>
+        <Text fontWeight="bold" mb={2}>
+          Article Categories
+        </Text>
+        <Flex gap={2} wrap="wrap">
+          <Tag colorPalette="primary" variant="soft">Technology</Tag>
+          <Tag colorPalette="secondary" variant="soft">Design</Tag>
+          <Tag colorPalette="success" variant="soft">Business</Tag>
+          <Tag colorPalette="warning" variant="soft">Opinion</Tag>
+        </Flex>
+      </Box>
+
+      <Box>
+        <Text fontWeight="bold" mb={2}>
+          Task Status
+        </Text>
+        <Flex gap={2} wrap="wrap">
+          <Tag colorPalette="neutral" variant="outline">Draft</Tag>
+          <Tag colorPalette="primary" variant="solid">In Progress</Tag>
+          <Tag colorPalette="warning" variant="soft">Review</Tag>
+          <Tag colorPalette="success" variant="solid">Completed</Tag>
+          <Tag colorPalette="danger" variant="soft">Blocked</Tag>
+        </Flex>
+      </Box>
+
+      <Box>
+        <Text fontWeight="bold" mb={2}>
+          Priority Labels
+        </Text>
+        <Flex gap={2} wrap="wrap">
+          <Tag colorPalette="danger" variant="solid">Critical</Tag>
+          <Tag colorPalette="warning" variant="solid">High</Tag>
+          <Tag colorPalette="primary" variant="soft">Medium</Tag>
+          <Tag colorPalette="neutral" variant="soft">Low</Tag>
+        </Flex>
+      </Box>
+    </VStack>
+  ),
+};
+
+/**
+ * Removable filter tags
+ */
+export const FilterTags: Story = {
+  render: () => (
+    <VStack align="start" gap={4}>
+      <Text fontWeight="bold">Active Filters</Text>
+      <Flex gap={2} wrap="wrap">
+        <Tag colorPalette="primary" variant="soft">
+          Category: Design
+          <TagCloseButton />
+        </Tag>
+        <Tag colorPalette="primary" variant="soft">
+          Status: Active
+          <TagCloseButton />
+        </Tag>
+        <Tag colorPalette="primary" variant="soft">
+          Date: Last 7 days
+          <TagCloseButton />
+        </Tag>
+      </Flex>
+    </VStack>
+  ),
+};