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

package/src/components/Slider/Slider.tsx

@@ -1,11 +1,50 @@
-import { ForwardedRef, forwardRef } from 'react';
+import { Children, ForwardedRef, forwardRef, isValidElement } from 'react';
 import { Slider as ChakraSlider } from '@chakra-ui/react';
 
 import { SliderProps } from './Slider.types';
+import { SliderControl } from './SliderControl';
 
+/**
+ * Slider component using Chakra UI v3 API.
+ *
+ * Uses v3 API pattern:
+ * - value: number[]
+ * - onValueChange: (details) => void
+ *
+ * Automatically wraps children in SliderControl if not already wrapped.
+ */
 export const Slider = forwardRef(
-  ({ ...rest }: SliderProps, ref?: ForwardedRef<HTMLDivElement>) => {
-    return <ChakraSlider isolation="isolate" ref={ref} {...rest} />;
+  (
+    { value, defaultValue, onValueChange, children, ...rest }: SliderProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    // Check if children already contains SliderControl
+    const hasSliderControl = Children.toArray(children).some(
+      (child) =>
+        isValidElement(child) &&
+        (child.type === SliderControl ||
+          (child.type as any)?.displayName === 'SliderControl')
+    );
+
+    // Wrap children in SliderControl if not already wrapped
+    const wrappedChildren = hasSliderControl ? (
+      children
+    ) : (
+      <SliderControl>{children}</SliderControl>
+    );
+
+    return (
+      <ChakraSlider.Root
+        isolation="isolate"
+        ref={ref}
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        {...rest}
+      >
+        {wrappedChildren}
+      </ChakraSlider.Root>
+    );
   }
 );
 

package/src/components/Slider/Slider.types.ts

@@ -1,3 +1,15 @@
-import { SliderProps as ChakraSliderProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import { Slider } from '@chakra-ui/react';
 
-export interface SliderProps extends ChakraSliderProps {}
+export interface SliderProps extends Omit<
+  Slider.RootProps,
+  'value' | 'defaultValue' | 'onValueChange'
+> {
+  /** Slider value as array */
+  value?: number[];
+  /** Default slider value as array */
+  defaultValue?: number[];
+  /** Callback when slider value changes */
+  onValueChange?: Slider.RootProps['onValueChange'];
+  children?: ReactNode;
+}

package/src/components/Slider/SliderControl/SliderControl.tsx

@@ -0,0 +1,21 @@
+import { ForwardedRef, forwardRef, ReactNode } from 'react';
+import { Slider } from '@chakra-ui/react';
+
+export interface SliderControlProps {
+  children?: ReactNode;
+}
+
+export const SliderControl = forwardRef(
+  (
+    { children, ...rest }: SliderControlProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <Slider.Control {...rest} ref={ref}>
+        {children}
+      </Slider.Control>
+    );
+  }
+);
+
+SliderControl.displayName = 'SliderControl';

package/src/components/Slider/SliderControl/index.ts

@@ -0,0 +1 @@
+export * from './SliderControl';

package/src/components/Slider/SliderFilledTrack/SliderFilledTrack.tsx

@@ -1,12 +1,19 @@
 import { ForwardedRef, forwardRef } from 'react';
-import { SliderFilledTrack as ChakraSliderFilledTrack } from '@chakra-ui/react';
+import { Slider } from '@chakra-ui/react';
 
 import { SliderFilledTrackProps } from './SliderFilledTrack.types';
 
 export const SliderFilledTrack = forwardRef(
   ({ ...rest }: SliderFilledTrackProps, ref?: ForwardedRef<HTMLDivElement>) => {
     return (
-      <ChakraSliderFilledTrack bgColor="primary.main" {...rest} ref={ref} />
+      <Slider.Range
+        bg="primary.main"
+        _disabled={{
+          bg: 'gray.400',
+        }}
+        {...rest}
+        ref={ref}
+      />
     );
   }
 );

package/src/components/Slider/SliderFilledTrack/SliderFilledTrack.types.ts

@@ -1,3 +1,3 @@
-import { SliderTrackProps as ChakraSliderFilledTrackProps } from '@chakra-ui/react';
+import { Slider } from '@chakra-ui/react';
 
-export interface SliderFilledTrackProps extends ChakraSliderFilledTrackProps {}
+export interface SliderFilledTrackProps extends Slider.RangeProps {}

package/src/components/Slider/SliderMark/SliderMark.tsx

@@ -1,11 +1,11 @@
 import { ForwardedRef, forwardRef } from 'react';
-import { SliderMark as ChakraSliderMark } from '@chakra-ui/react';
+import { Slider } from '@chakra-ui/react';
 
 import { SliderMarkProps } from './SliderMark.types';
 
 export const SliderMark = forwardRef(
   ({ ...rest }: SliderMarkProps, ref?: ForwardedRef<HTMLDivElement>) => {
-    return <ChakraSliderMark {...rest} ref={ref} />;
+    return <Slider.Marker {...rest} ref={ref} />;
   }
 );
 

package/src/components/Slider/SliderMark/SliderMark.types.ts

@@ -1,3 +1,3 @@
-import { SliderMarkProps as ChakraSliderMarkProps } from '@chakra-ui/react';
+import { Slider } from '@chakra-ui/react';
 
-export interface SliderMarkProps extends ChakraSliderMarkProps {}
+export interface SliderMarkProps extends Slider.MarkerProps {}

package/src/components/Slider/SliderThumb/SliderThumb.tsx

@@ -1,17 +1,26 @@
 import { ForwardedRef, forwardRef } from 'react';
-import { SliderThumb as ChakraSliderThumb } from '@chakra-ui/react';
+import { Slider } from '@chakra-ui/react';
 
 import { SliderThumbProps } from './SliderThumb.types';
 
 export const SliderThumb = forwardRef(
-  ({ ...rest }: SliderThumbProps, ref?: ForwardedRef<HTMLDivElement>) => {
+  (
+    { index = 0, ...rest }: SliderThumbProps & { index?: number },
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
     return (
-      <ChakraSliderThumb
-        border="3px solid"
-        w={4}
-        h={4}
+      <Slider.Thumb
+        index={index}
+        boxSize={4}
+        bg="white"
         borderColor="primary.main"
-        boxShadow="none"
+        borderWidth={3}
+        borderStyle="solid"
+        _disabled={{
+          bg: 'gray.100',
+          borderColor: 'gray.400',
+          cursor: 'not-allowed',
+        }}
         {...rest}
         ref={ref}
       />

package/src/components/Slider/SliderThumb/SliderThumb.types.ts

@@ -1,3 +1,6 @@
-import { SliderThumbProps as ChakraSliderThumbProps } from '@chakra-ui/react';
+import { Slider } from '@chakra-ui/react';
 
-export interface SliderThumbProps extends ChakraSliderThumbProps {}
+export interface SliderThumbProps extends Omit<Slider.ThumbProps, 'index'> {
+  /** The index of the thumb (optional, defaults to 0 for single slider) */
+  index?: number;
+}

package/src/components/Slider/SliderThumbs/SliderThumbs.tsx

@@ -0,0 +1,36 @@
+import { forwardRef } from 'react';
+import { Slider } from '@chakra-ui/react';
+
+/**
+ * SliderThumbs - Convenience component that automatically renders thumbs
+ * based on the slider value array length.
+ *
+ * This is a thin wrapper around Chakra UI's Slider.Thumbs.
+ * Colors are inherited from Slider root component via CSS variables.
+ * For individual thumb customization, use SliderThumb with explicit index prop.
+ *
+ * @example
+ * Single slider:
+ * <Slider defaultValue={[50]}>
+ *   <SliderThumbs />
+ * </Slider>
+ *
+ * Range slider:
+ * <Slider defaultValue={[20, 80]}>
+ *   <SliderThumbs />
+ * </Slider>
+ */
+export const SliderThumbs = forwardRef((props, _ref) => {
+  return (
+    <Slider.Thumbs
+      boxSize={4}
+      bg="white"
+      borderColor="primary.main"
+      borderWidth={3}
+      borderStyle="solid"
+      {...props}
+    />
+  );
+});
+
+SliderThumbs.displayName = 'SliderThumbs';

package/src/components/Slider/SliderThumbs/index.tsx

@@ -0,0 +1 @@
+export { SliderThumbs } from './SliderThumbs';

package/src/components/Slider/SliderTrack/SliderTrack.tsx

@@ -1,11 +1,18 @@
-import { ForwardedRef, forwardRef } from 'react';
-import { SliderTrack as ChakraSliderTrack } from '@chakra-ui/react';
+import { ForwardedRef, forwardRef, ReactNode } from 'react';
+import { Slider } from '@chakra-ui/react';
 
 import { SliderTrackProps } from './SliderTrack.types';
 
 export const SliderTrack = forwardRef(
-  ({ ...rest }: SliderTrackProps, ref?: ForwardedRef<HTMLDivElement>) => {
-    return <ChakraSliderTrack {...rest} ref={ref} />;
+  (
+    { children, ...rest }: SliderTrackProps & { children?: ReactNode },
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <Slider.Track bg="gray.200" {...rest} ref={ref}>
+        {children}
+      </Slider.Track>
+    );
   }
 );
 

package/src/components/Slider/SliderTrack/SliderTrack.types.ts

@@ -1,3 +1,3 @@
-import { SliderTrackProps as ChakraSliderTrackProps } from '@chakra-ui/react';
+import { Slider } from '@chakra-ui/react';
 
-export interface SliderTrackProps extends ChakraSliderTrackProps {}
+export interface SliderTrackProps extends Slider.TrackProps {}

package/src/components/Slider/index.ts

@@ -1,6 +1,8 @@
 export * from './Slider';
 export type * from './Slider.types';
+export * from './SliderControl';
 export * from './SliderFilledTrack';
 export * from './SliderMark';
 export * from './SliderThumb';
+export * from './SliderThumbs';
 export * from './SliderTrack';

package/src/components/Spinner/Spinner.tsx

@@ -7,11 +7,11 @@ export const Spinner = forwardRef(
   ({ ...rest }: SpinnerProps, ref?: ForwardedRef<HTMLDivElement>) => {
     return (
       <ChakraSpinner
-        emptyColor="gray.200"
         color="primary.main"
-        speed="0.65s"
-        {...rest}
+        animationDuration="0.65s"
+        css={{ '--spinner-track-color': 'colors.gray.200' }}
         ref={ref}
+        {...rest}
       />
     );
   }

package/src/components/Switch/Switch.stories.tsx

@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
-import { Stack, Switch, Text } from '@chakra-ui/react';
+import { Stack, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
+import { Switch } from './Switch';
+
 const meta = {
   title: 'Components/Switch',
   component: Switch,
   argTypes: {
-    isChecked: { control: 'boolean' },
-    isDisabled: { control: 'boolean' },
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
     size: {
       control: { type: 'select' },
       options: ['sm', 'md', 'lg'], // Available sizes in Chakra's Switch
@@ -23,33 +25,33 @@ type Story = StoryObj<typeof meta>;
 export const Uncontrolled: Story = {
   args: {
     size: 'md',
-    isDisabled: false,
+    disabled: false,
   },
 };
 
 // Controlled Story: Manage state externally
 export const Controlled: Story = {
   render: (args) => {
-    const [isChecked, setIsChecked] = useState(false);
+    const [checked, setChecked] = useState(false);
 
-    const handleToggle = () => {
-      setIsChecked(!isChecked);
+    const handleToggle = (e: any) => {
+      setChecked(e.checked);
     };
 
     return (
-      <Stack direction="row" align="center" spacing={4}>
+      <Stack direction="row" align="center" gap={4}>
         <Switch
           {...args}
-          isChecked={isChecked} // Controlled isChecked state
-          onChange={handleToggle} // Toggling state
+          checked={checked} // Controlled checked state
+          onCheckedChange={handleToggle} // Toggling state
         />
-        <Text>{isChecked ? 'On' : 'Off'}</Text>
+        <Text>{checked ? 'On' : 'Off'}</Text>
       </Stack>
     );
   },
   args: {
     size: 'md',
-    isDisabled: false,
+    disabled: false,
   },
 };
 
@@ -57,7 +59,7 @@ export const Controlled: Story = {
 export const Disabled: Story = {
   args: {
     size: 'md',
-    isDisabled: true,
-    isChecked: true,
+    disabled: true,
+    checked: true,
   },
 };

package/src/components/Switch/Switch.tsx

@@ -1,8 +1,27 @@
 import React from 'react';
 import { Switch as ChakraSwitch } from '@chakra-ui/react';
 
-export const Switch = ({ ...rest }) => {
-  return <ChakraSwitch {...rest} />;
+import { SwitchProps } from './Switch.types';
+
+export const Switch = ({ checked, disabled, ...rest }: SwitchProps) => {
+  return (
+    <ChakraSwitch.Root
+      colorPalette="primary"
+      checked={checked}
+      disabled={disabled}
+      {...rest}
+    >
+      <ChakraSwitch.HiddenInput />
+      <ChakraSwitch.Control
+        bg="gray.200"
+        _checked={{
+          bg: 'primary.main',
+        }}
+      >
+        <ChakraSwitch.Thumb />
+      </ChakraSwitch.Control>
+    </ChakraSwitch.Root>
+  );
 };
 
 Switch.displayName = 'Switch';

package/src/components/Switch/Switch.types.ts

@@ -0,0 +1,3 @@
+import { SwitchRootProps as ChakraSwitchRootProps } from '@chakra-ui/react';
+
+export interface SwitchProps extends ChakraSwitchRootProps {}

package/src/components/Switch/index.ts

@@ -1 +1,2 @@
 export { Switch } from './Switch';
+export type { SwitchProps } from './Switch.types';

package/src/components/Table/ExpandingTr/ExpandingTr.tsx

@@ -1,5 +1,5 @@
 import { Children } from 'react';
-import { Collapse } from '@chakra-ui/react';
+import { Collapsible } from '@chakra-ui/react';
 
 import { Td } from '../Td';
 import { Tr } from '../Tr';
@@ -9,7 +9,6 @@ export const ExpandingTr: React.FC<ExpandingTrProps> = ({
   children,
   expandedContent,
   isExpanded,
-  onExpandChange,
   expandedRowProps,
   ...rest
 }) => {
@@ -20,10 +19,21 @@ export const ExpandingTr: React.FC<ExpandingTrProps> = ({
       {/* Main Row */}
       <Tr {...rest}>{children}</Tr>
 
-      {/* Expanded Row */}
-      <Tr h={isExpanded ? undefined : 0} {...expandedRowProps}>
+      {/* Expanded Row - always render for Collapsible animation */}
+      <Tr
+        h={isExpanded ? undefined : 0}
+        style={{
+          // When collapsed, make it invisible and non-interactive
+          ...(!isExpanded && {
+            visibility: 'collapse' as const,
+          }),
+        }}
+        {...expandedRowProps}
+      >
         <Td colSpan={childrenArray.length} p={0}>
-          <Collapse in={isExpanded}>{expandedContent}</Collapse>
+          <Collapsible.Root open={isExpanded}>
+            <Collapsible.Content>{expandedContent}</Collapsible.Content>
+          </Collapsible.Root>
         </Td>
       </Tr>
     </>

package/src/components/Table/ExpandingTr/ExpandingTr.types.ts

@@ -3,7 +3,6 @@ import { TableRowProps } from '@chakra-ui/react';
 export interface ExpandingTrProps extends TableRowProps {
   children: React.ReactNode;
   isExpanded: boolean; // Controls whether the expanded content is visible
-  onExpandChange?: (isExpanded: boolean) => void; // Callback for when expansion state changes
   expandedRowProps?: TableRowProps;
   expandedContent: React.ReactNode;
 }

package/src/components/Table/Table.stories.tsx

@@ -131,6 +131,7 @@ export const ExpandedContent: Story = {
             {columns.map((column) => (
               <Th key={column.key}>{column.label}</Th>
             ))}
+            <Th w={2}></Th>
           </Tr>
         </Thead>
         <Tbody>
@@ -139,7 +140,6 @@ export const ExpandedContent: Story = {
             return (
               <ExpandingTr
                 isExpanded={isExpanded}
-                onExpandChange={setIsExpanded}
                 expandedContent={
                   <Flex p={4} align="center" justify="center">
                     {item.expandedText}
@@ -152,8 +152,10 @@ export const ExpandedContent: Story = {
                 <Td w={2}>
                   <IconButton
                     aria-label="Expand"
-                    icon={<IoChevronDownOutline />}
+                    {...({icon: <IoChevronDownOutline />} as any)}
                     onClick={() => setIsExpanded((e) => !e)}
+                    colorScheme="neutral"
+                    variant="ghost"
                   />
                 </Td>
               </ExpandingTr>

package/src/components/Table/Table.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  Table as ChakraTable,
-  TableProps as ChakraTableProps,
-} from '@chakra-ui/react';
+import { Table as ChakraTable } from '@chakra-ui/react';
 
-export const Table = ({ ...rest }: ChakraTableProps) => {
-  return <ChakraTable {...rest} />;
+export const Table = ({ ...rest }: ChakraTable.RootProps) => {
+  return <ChakraTable.Root {...rest} />;
 };

package/src/components/Table/Table.types.ts

@@ -1,15 +1,12 @@
-import {
-  TableCellProps as ChakraTableCellProps,
-  TableContainerProps as ChakraTableContainerProps,
-} from '@chakra-ui/react';
+import { Table } from '@chakra-ui/react';
 
 import { StickyDirection } from './Table.styles';
 
-export interface TableContainerProps extends ChakraTableContainerProps {
+export interface TableContainerProps extends Table.ScrollAreaProps {
   children: React.ReactNode;
 }
 
-export interface TableCellProps extends ChakraTableCellProps {
+export interface TableCellProps extends Table.CellProps {
   isSticky?: boolean;
   stickyDirection?: StickyDirection;
   stickyIndex?: number;

package/src/components/Table/TableContainer.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useCallback } from 'react';
-import { TableContainer as ChakraTableContainer } from '@chakra-ui/react';
+import { Table } from '@chakra-ui/react';
 
 import { TableContainerProps } from './Table.types';
 import { TableProvider, useTableContext } from './TableContext';
@@ -26,15 +26,15 @@ const TableContainerInner = forwardRef<HTMLDivElement, TableContainerProps>(
     );
 
     return (
-      <ChakraTableContainer
+      <Table.ScrollArea
         border="1px solid"
         borderRadius="md"
-        borderColor="gray.300"
+        borderColor="gray.200"
         ref={handleRef}
         {...rest}
       >
         {children}
-      </ChakraTableContainer>
+      </Table.ScrollArea>
     );
   }
 );

package/src/components/Table/Tbody.tsx

@@ -1,10 +1,21 @@
 import { forwardRef } from 'react';
-import { TableBodyProps, Tbody as ChakraTbody } from '@chakra-ui/react';
+import { Table } from '@chakra-ui/react';
 
-export const Tbody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+export const Tbody = forwardRef<HTMLTableSectionElement, Table.BodyProps>(
   (props, ref) => {
     return (
-      <ChakraTbody ref={ref} color="gray.1500" fontWeight="medium" {...props} />
+      <Table.Body
+        ref={ref}
+        color="gray.1500"
+        fontWeight="medium"
+        css={{
+          // Remove bottom border from last row to prevent overlap with container border
+          '& > tr:last-of-type > td': {
+            borderBottom: 'none',
+          },
+        }}
+        {...props}
+      />
     );
   }
 );

package/src/components/Table/Td.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { Td as ChakraTd, useToken } from '@chakra-ui/react';
+import { Table, useToken } from '@chakra-ui/react';
 
 import { getStickyStyles } from './Table.styles';
 import { TableCellProps } from './Table.types';
@@ -23,7 +23,6 @@ export const Td = ({
   const tableContext = useTableContext();
 
   // Define all style variables ahead of time so they can be used constantly
-  const grayColor = useToken('colors', 'gray.300');
   const paddingToken = useToken('space', '3'); // py={3} equivalent
   const fontSizeToken = useToken('fontSizes', 'p');
   const spacingToken = useToken('space', '4'); // spacing 4 for paddingInlineStart
@@ -43,16 +42,23 @@ export const Td = ({
       <td
         ref={cellRef}
         style={{
-          border: 0,
-          borderTop: '1px solid',
-          borderTopColor: grayColor,
           color: 'inherit',
-          fontSize: fontSizeToken,
-          paddingTop: paddingToken,
-          paddingBottom: paddingToken,
+          fontSize: Array.isArray(fontSizeToken)
+            ? fontSizeToken[0]
+            : fontSizeToken,
+          paddingTop: Array.isArray(paddingToken)
+            ? paddingToken[0]
+            : paddingToken,
+          paddingBottom: Array.isArray(paddingToken)
+            ? paddingToken[0]
+            : paddingToken,
           overflow: 'hidden',
           textOverflow: 'ellipsis',
-          paddingInlineStart: _first ? spacingToken : undefined,
+          paddingInlineStart: _first
+            ? Array.isArray(spacingToken)
+              ? spacingToken[0]
+              : spacingToken
+            : undefined,
           ...(wrap
             ? {
                 whiteSpace: 'normal',
@@ -103,12 +109,8 @@ export const Td = ({
   );
 
   return (
-    <ChakraTd
-      border={0}
-      borderTop="1px solid"
-      borderTopColor="gray.300"
+    <Table.Cell
       color="inherit"
-      fontSize="p"
       py={3}
       overflow="hidden"
       textOverflow="ellipsis"
@@ -131,7 +133,7 @@ export const Td = ({
       {...rest}
     >
       {children}
-    </ChakraTd>
+    </Table.Cell>
   );
 };