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

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}
     />
   );
 });

package/src/components/Typography/Link.tsx

@@ -1,39 +1,24 @@
 import { forwardRef } from 'react';
-import {
-  Link as ChakraLink,
-  LinkProps,
-  useTheme,
-  useToken,
-} from '@chakra-ui/react';
-import { darken } from 'polished';
+import { Link as ChakraLink, LinkProps } from '@chakra-ui/react';
 
-export interface LinkCustomProps extends LinkProps {
+export interface LinkCustomProps extends Omit<LinkProps, 'variant'> {
   variant?: 'error';
 }
 
 export const Link = forwardRef<HTMLAnchorElement, LinkCustomProps>(
   ({ color, variant, ...rest }, ref) => {
-    const theme = useTheme();
-    const defaultColor = theme.semanticTokens.colors.primary.main;
-    const errorColor = theme.semanticTokens.colors.danger.main;
-    const tokenKey =
+    const defaultColor = 'primary.main';
+    const errorColor = 'danger.main';
+    const defaultHoverColor = 'primary.dark';
+    const errorHoverColor = 'danger.dark';
+
+    const linkColor =
       variant === 'error'
         ? errorColor
         : (typeof color === 'string' ? color : undefined) || defaultColor;
 
-    const linkColor =
-      useToken('colors', tokenKey) ??
-      (typeof color === 'string' ? color : defaultColor);
-
-    const getHoverColor = () => {
-      let hoverColor;
-      try {
-        hoverColor = darken(0.1, linkColor);
-      } catch (e) {
-        hoverColor = 'inherit';
-      }
-      return hoverColor;
-    };
+    const hoverColor =
+      variant === 'error' ? errorHoverColor : defaultHoverColor;
 
     return (
       <ChakraLink
@@ -42,8 +27,9 @@ export const Link = forwardRef<HTMLAnchorElement, LinkCustomProps>(
         wordBreak="keep-all"
         color={linkColor}
         _hover={{
-          color: getHoverColor(),
-        }} // Darken by 10% on hover
+          color: hoverColor,
+          textDecor: 'none',
+        }}
         {...rest}
       />
     );

package/src/components/Typography/Subtext.tsx

@@ -1,19 +1,23 @@
 import React, { forwardRef } from 'react';
-import { Text, TextProps, useTheme } from '@chakra-ui/react';
+import { Text, TextProps } from '@chakra-ui/react';
 
-export const Subtext = forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
-  const theme = useTheme();
+export const Subtext = forwardRef<HTMLParagraphElement, TextProps>(
+  (props, ref) => {
+    const { fontSize, ...rest } = props;
 
-  return (
-    <Text
-      ref={ref}
-      fontSize={theme.fontSizes.subtext}
-      fontWeight="regular"
-      color="gray.1500"
-      wordBreak="keep-all"
-      {...props}
-    />
-  );
-});
+    return (
+      <Text
+        ref={ref}
+        textStyle={fontSize ? undefined : 'subtext'}
+        fontSize={fontSize}
+        lineHeight="1.5"
+        fontWeight="regular"
+        color="gray.1500"
+        wordBreak="keep-all"
+        {...rest}
+      />
+    );
+  }
+);
 
 Subtext.displayName = 'Subtext';

package/src/components/Typography/Subtitle.tsx

@@ -1,19 +1,24 @@
 import { forwardRef } from 'react';
-import { Text, TextProps, useTheme } from '@chakra-ui/react';
+import { Text, TextProps } from '@chakra-ui/react';
 
-export const Subtitle = forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
-  const theme = useTheme();
-  return (
-    <Text
-      ref={ref}
-      as="h6"
-      fontSize={theme.fontSizes.p}
-      fontWeight="medium"
-      color="gray.1000"
-      wordBreak="keep-all"
-      {...props}
-    />
-  );
-});
+export const Subtitle = forwardRef<HTMLParagraphElement, TextProps>(
+  (props, ref) => {
+    const { fontSize, ...rest } = props;
+
+    return (
+      <Text
+        ref={ref}
+        as="h6"
+        textStyle={fontSize ? undefined : 'subtitle'}
+        fontSize={fontSize}
+        lineHeight="1.5"
+        fontWeight="medium"
+        color="gray.1000"
+        wordBreak="keep-all"
+        {...rest}
+      />
+    );
+  }
+);
 
 Subtitle.displayName = 'Subtitle';

package/src/components/Typography/Text.tsx

@@ -1,20 +1,23 @@
 import React, { forwardRef } from 'react';
-import { Text as ChakraText, TextProps, useTheme } from '@chakra-ui/react';
+import { Text as ChakraText, TextProps } from '@chakra-ui/react';
 
 export const Text = forwardRef<HTMLParagraphElement, TextProps>(
   (props, ref) => {
-    const theme = useTheme();
+    // Extract fontSize and textStyle to handle them conditionally
+    const { fontSize, ...rest } = props;
 
     return (
       <ChakraText
         ref={ref}
         as="p"
-        fontSize={theme.fontSizes.p}
+        // If fontSize is provided, disable textStyle to allow fontSize override
+        textStyle={fontSize ? undefined : 'p'}
+        fontSize={fontSize}
         lineHeight="1.5"
         fontWeight="medium"
         color="gray.1200"
         wordBreak="keep-all"
-        {...props}
+        {...rest}
       />
     );
   }

package/src/index.ts

@@ -1,24 +1,17 @@
 // Core Components
 export * from './components/Accordion';
-export * from './components/Alert';
-export * from './components/AutowidthInput';
 export * from './components/Avatar';
 export * from './components/Badge';
 export * from './components/Banner';
 export * from './components/Breadcrumb';
 export * from './components/Button';
 export * from './components/Card';
-export * from './components/Carousel';
-export * from './components/CarouselModal';
 export * from './components/Checkbox';
 export * from './components/Chip';
-export * from './components/ChipButton';
 export * from './components/Code';
 export * from './components/CodeTabs';
 export * from './components/Container';
 export * from './components/CopyableCode';
-export * from './components/CrossPageToasts';
-export * from './components/DataField';
 export * from './components/DatePicker';
 export * from './components/ErrorFallback';
 export * from './components/ExpandableText';
@@ -31,7 +24,6 @@ export * from './components/FileList';
 // Form Components
 export * from './components/FormControl';
 export * from './components/FormLabel';
-export * from './components/GuideCue';
 
 // Icon Components (wrapper only, individual icons available via @mindlogic-ai/logician-ui/icons)
 export type { IconProps } from './components/Icon/_utils/createIcon';
@@ -104,4 +96,9 @@ export {
   Subtitle,
   Text,
 } from './components/Typography';
-export * from './components/UrlInput';
+
+// Chakra UI v3 Primitives (for advanced composition patterns)
+export * from './primitives';
+
+// Theme exports
+export { logicianConfig, system, theme } from './theme';

package/src/primitives.ts

@@ -0,0 +1,51 @@
+/**
+ * Chakra UI v3 Primitive Components
+ *
+ * These are the original Chakra UI v3 components with composition pattern support.
+ * Use these when you need more control over the component structure than
+ * the logician-ui wrapped components provide.
+ *
+ * @example
+ * ```tsx
+ * import { V3Checkbox } from '@mindlogic-ai/logician-ui';
+ *
+ * <V3Checkbox.Root>
+ *   <V3Checkbox.HiddenInput />
+ *   <V3Checkbox.Control>
+ *     <V3Checkbox.Indicator />
+ *   </V3Checkbox.Control>
+ *   <V3Checkbox.Label>Label</V3Checkbox.Label>
+ * </V3Checkbox.Root>
+ * ```
+ */
+
+export {
+  // Disclosure
+  Accordion as V3Accordion,
+  // Data Display
+  Avatar as V3Avatar,
+  Badge as V3Badge,
+  // Navigation
+  Breadcrumb as V3Breadcrumb,
+  Card as V3Card,
+  // Form Controls
+  Checkbox as V3Checkbox,
+  Collapsible as V3Collapsible,
+  // Overlay & Dialogs
+  Dialog as V3Dialog,
+  Field as V3Field,
+  // Layout
+  List as V3List,
+  Menu as V3Menu,
+  NumberInput as V3NumberInput,
+  PinInput as V3PinInput,
+  Popover as V3Popover,
+  Progress as V3Progress,
+  RadioGroup as V3RadioGroup,
+  Slider as V3Slider,
+  Switch as V3Switch,
+  Table as V3Table,
+  Tabs as V3Tabs,
+  Tag as V3Tag,
+  Tooltip as V3Tooltip,
+} from '@chakra-ui/react';