@mindlogic-ai/logician-ui 3.2.0-alpha.0 → 3.2.0-alpha.2

package/src/components/Tree/TreeBranchControl.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { focusRing } from '@/utils/focusRing';
+
+import { TreeBranchControlProps } from './Tree.types';
+
+export const TreeBranchControl = forwardRef<
+  HTMLDivElement,
+  TreeBranchControlProps
+>((props, ref) => {
+  // See TreeItem — same reason: the recipe's depth-based padding-inline-
+  // start (`var(--tree-offset)`) gets overridden if we re-declare `px`
+  // here. Only the color/state overrides remain. `cursor: pointer` is
+  // re-added because the recipe's `baseItemStyle` doesn't include it.
+  return (
+    <ChakraTreeView.BranchControl
+      ref={ref}
+      cursor="pointer"
+      color="fg.default"
+      _hover={{ bg: 'bg.subtle' }}
+      _selected={{ bg: 'primary.lightest', color: 'primary.dark' }}
+      {...focusRing}
+      {...props}
+    />
+  );
+});
+TreeBranchControl.displayName = 'TreeBranchControl';

package/src/components/Tree/TreeBranchIndentGuide.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { TreeBranchIndentGuideProps } from './Tree.types';
+
+export const TreeBranchIndentGuide = forwardRef<
+  HTMLDivElement,
+  TreeBranchIndentGuideProps
+>((props, ref) => {
+  // Chakra v3's `branchIndentGuide` slot already renders the vertical
+  // line via `position: absolute`, `width: 1px`, `bg: border`, with
+  // `insetInlineStart` auto-calculated from tree depth. Don't add
+  // `ms`/`ps` (breaks the depth math, pushes the line over content)
+  // or `borderInlineStartWidth` (stacks a second 1px stroke on top of
+  // the slot's own bg-painted 1px). Only override `bg` to lighten.
+  return (
+    <ChakraTreeView.BranchIndentGuide ref={ref} bg="border.subtle" {...props} />
+  );
+});
+TreeBranchIndentGuide.displayName = 'TreeBranchIndentGuide';

package/src/components/Tree/TreeBranchIndicator.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { IoChevronForward } from '@/components/Icon';
+
+import { TreeBranchIndicatorProps } from './Tree.types';
+
+export const TreeBranchIndicator = forwardRef<
+  HTMLDivElement,
+  TreeBranchIndicatorProps
+>(({ children, ...rest }, ref) => {
+  return (
+    <ChakraTreeView.BranchIndicator
+      ref={ref}
+      display="inline-flex"
+      alignItems="center"
+      justifyContent="center"
+      transition="transform 0.15s ease-out"
+      _open={{ transform: 'rotate(90deg)' }}
+      _motionReduce={{ transition: 'none' }}
+      {...rest}
+    >
+      {children ?? <IoChevronForward boxSize="xs" />}
+    </ChakraTreeView.BranchIndicator>
+  );
+});
+TreeBranchIndicator.displayName = 'TreeBranchIndicator';

package/src/components/Tree/TreeBranchText.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { TreeBranchTextProps } from './Tree.types';
+
+export const TreeBranchText = forwardRef<HTMLSpanElement, TreeBranchTextProps>(
+  (props, ref) => {
+    return (
+      <ChakraTreeView.BranchText
+        ref={ref}
+        flex={1}
+        fontWeight="medium"
+        truncate
+        {...props}
+      />
+    );
+  }
+);
+TreeBranchText.displayName = 'TreeBranchText';

package/src/components/Tree/TreeBranchTrigger.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { focusRing } from '@/utils/focusRing';
+
+import { TreeBranchTriggerProps } from './Tree.types';
+
+export const TreeBranchTrigger = forwardRef<
+  HTMLDivElement,
+  TreeBranchTriggerProps
+>((props, ref) => {
+  return (
+    <ChakraTreeView.BranchTrigger
+      ref={ref}
+      display="inline-flex"
+      alignItems="center"
+      justifyContent="center"
+      rounded="sm"
+      cursor="pointer"
+      {...focusRing}
+      {...props}
+    />
+  );
+});
+TreeBranchTrigger.displayName = 'TreeBranchTrigger';

package/src/components/Tree/TreeItem.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { focusRing } from '@/utils/focusRing';
+
+import { TreeItemProps } from './Tree.types';
+
+export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
+  (props, ref) => {
+    // Chakra v3's `treeView.item` recipe already supplies layout,
+    // padding-block, gap, rounded etc — and crucially sets
+    // `padding-inline-start: var(--tree-offset)` so each item indents
+    // by its node depth. Don't re-set `px`/`py`/`display`/`gap`/`rounded`
+    // here or the recipe's depth-based start padding gets overridden
+    // and every item collapses to the same column (no indent guide
+    // alignment, items render under the vertical guide bars).
+    //
+    // `cursor` is the one common-sense interactive default the recipe
+    // does NOT supply, so we add it explicitly.
+    return (
+      <ChakraTreeView.Item
+        ref={ref}
+        cursor="pointer"
+        color="fg.default"
+        _hover={{ bg: 'bg.subtle' }}
+        _selected={{ bg: 'primary.lightest', color: 'primary.dark' }}
+        {...focusRing}
+        {...props}
+      />
+    );
+  }
+);
+TreeItem.displayName = 'TreeItem';

package/src/components/Tree/TreeItemIndicator.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { TreeItemIndicatorProps } from './Tree.types';
+
+export const TreeItemIndicator = forwardRef<
+  HTMLDivElement,
+  TreeItemIndicatorProps
+>((props, ref) => {
+  return (
+    <ChakraTreeView.ItemIndicator
+      ref={ref}
+      display="inline-flex"
+      alignItems="center"
+      justifyContent="center"
+      {...props}
+    />
+  );
+});
+TreeItemIndicator.displayName = 'TreeItemIndicator';

package/src/components/Tree/TreeItemText.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { TreeItemTextProps } from './Tree.types';
+
+export const TreeItemText = forwardRef<HTMLSpanElement, TreeItemTextProps>(
+  (props, ref) => {
+    return (
+      <ChakraTreeView.ItemText
+        ref={ref}
+        flex={1}
+        fontWeight="medium"
+        truncate
+        {...props}
+      />
+    );
+  }
+);
+TreeItemText.displayName = 'TreeItemText';

package/src/components/Tree/TreeLabel.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { TreeLabelProps } from './Tree.types';
+
+export const TreeLabel = forwardRef<HTMLLabelElement, TreeLabelProps>(
+  (props, ref) => {
+    return (
+      <ChakraTreeView.Label
+        ref={ref}
+        fontSize="sm"
+        fontWeight="semibold"
+        color="fg.muted"
+        {...props}
+      />
+    );
+  }
+);
+TreeLabel.displayName = 'TreeLabel';

package/src/components/Tree/TreeNode.tsx

@@ -0,0 +1,6 @@
+import type { TreeViewNodeProps } from '@chakra-ui/react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+export type TreeNodeProps<T> = TreeViewNodeProps<T>;
+
+export const TreeNode = ChakraTreeView.Node;

package/src/components/Tree/TreeNodeCheckbox.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { TreeNodeCheckboxProps } from './Tree.types';
+
+export const TreeNodeCheckbox = forwardRef<
+  HTMLDivElement,
+  TreeNodeCheckboxProps
+>((props, ref) => {
+  return <ChakraTreeView.NodeCheckbox ref={ref} {...props} />;
+});
+TreeNodeCheckbox.displayName = 'TreeNodeCheckbox';

package/src/components/Tree/TreeNodeContext.tsx

@@ -0,0 +1,3 @@
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+export const TreeNodeContext = ChakraTreeView.NodeContext;

package/src/components/Tree/TreeNodeProvider.tsx

@@ -0,0 +1,6 @@
+import type { TreeViewNodeProviderProps } from '@chakra-ui/react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+export type TreeNodeProviderProps<T> = TreeViewNodeProviderProps<T>;
+
+export const TreeNodeProvider = ChakraTreeView.NodeProvider;

package/src/components/Tree/TreeRoot.tsx

@@ -0,0 +1,11 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { TreeRootProps } from './Tree.types';
+
+export const TreeRoot = forwardRef<HTMLDivElement, TreeRootProps>(
+  (props, ref) => {
+    return <ChakraTreeView.Root ref={ref} {...props} />;
+  }
+);
+TreeRoot.displayName = 'TreeRoot';

package/src/components/Tree/TreeTree.tsx

@@ -0,0 +1,11 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { TreeTreeProps } from './Tree.types';
+
+export const TreeTree = forwardRef<HTMLDivElement, TreeTreeProps>(
+  (props, ref) => {
+    return <ChakraTreeView.Tree ref={ref} {...props} />;
+  }
+);
+TreeTree.displayName = 'TreeTree';

package/src/components/Tree/index.ts

@@ -0,0 +1,42 @@
+export { Tree } from './Tree';
+export type {
+  TreeBranchContentProps,
+  TreeBranchControlProps,
+  TreeBranchIndentGuideProps,
+  TreeBranchIndicatorProps,
+  TreeBranchProps,
+  TreeBranchTextProps,
+  TreeBranchTriggerProps,
+  TreeCheckedChangeDetails,
+  TreeCollection,
+  TreeExpandedChangeDetails,
+  TreeFocusChangeDetails,
+  TreeItemIndicatorProps,
+  TreeItemProps,
+  TreeItemTextProps,
+  TreeLabelProps,
+  TreeNodeCheckboxProps,
+  TreeRootProps,
+  TreeSelectionChangeDetails,
+  TreeTreeProps,
+} from './Tree.types';
+export { TreeBranch } from './TreeBranch';
+export { TreeBranchContent } from './TreeBranchContent';
+export { TreeBranchControl } from './TreeBranchControl';
+export { TreeBranchIndentGuide } from './TreeBranchIndentGuide';
+export { TreeBranchIndicator } from './TreeBranchIndicator';
+export { TreeBranchText } from './TreeBranchText';
+export { TreeBranchTrigger } from './TreeBranchTrigger';
+export { TreeItem } from './TreeItem';
+export { TreeItemIndicator } from './TreeItemIndicator';
+export { TreeItemText } from './TreeItemText';
+export { TreeLabel } from './TreeLabel';
+export type { TreeNodeProps } from './TreeNode';
+export { TreeNode } from './TreeNode';
+export { TreeNodeCheckbox } from './TreeNodeCheckbox';
+export { TreeNodeContext } from './TreeNodeContext';
+export type { TreeNodeProviderProps } from './TreeNodeProvider';
+export { TreeNodeProvider } from './TreeNodeProvider';
+export { TreeRoot } from './TreeRoot';
+export { TreeTree } from './TreeTree';
+export { createTreeCollection } from '@chakra-ui/react';

package/src/components/Typography/Overline.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react';
+import { Text, TextProps } from '@chakra-ui/react';
+
+/**
+ * Small, uppercase, letter-spaced label used as a section "eyebrow" or category
+ * heading (e.g. an "EXECUTION MODE" eyebrow above a panel heading, or a
+ * "RECENT" group label).
+ *
+ * Part of the typography scale alongside `Subtext` — it shares the subtext size
+ * but adds the baked-in overline styling (`textStyle="overline"`: uppercase,
+ * wider tracking, medium weight). Every aspect stays one Chakra prop away, so
+ * brand/status variants are a single override (e.g. `color="primary.main"`,
+ * `fontWeight="extrabold"`).
+ */
+export const Overline = forwardRef<HTMLParagraphElement, TextProps>(
+  (props, ref) => {
+    const { fontSize, ...rest } = props;
+
+    return (
+      <Text
+        ref={ref}
+        // If fontSize is provided, disable textStyle to allow the override
+        textStyle={fontSize ? undefined : 'overline'}
+        fontSize={fontSize}
+        color="slate.800"
+        wordBreak="keep-all"
+        {...rest}
+      />
+    );
+  }
+);
+
+Overline.displayName = 'Overline';

package/src/components/Typography/Typography.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { H1, H2, H3, H4, H5, Link, Subtext, Subtitle, Text } from '.';
+import { H1, H2, H3, H4, H5, Link, Overline, Subtext, Subtitle, Text } from '.';
 
 const meta = {
   title: 'Components/Typography',
@@ -13,6 +13,7 @@ type Story = StoryObj<typeof Text>;
 export const AllTextStyles: Story = {
   render: (props) => (
     <>
+      <Overline {...props}>Overline - section eyebrow</Overline>
       <H1 {...props}>
         H1 - Lorem ipsum dolor sit amet,{' '}
         <Link variant="error" href="https://example.com">

package/src/components/Typography/index.ts

@@ -5,6 +5,7 @@ export { H3 } from './H3';
 export { H4 } from './H4';
 export { H5 } from './H5';
 export { Link } from './Link';
+export { Overline } from './Overline';
 export { Subtext } from './Subtext';
 export { Subtitle } from './Subtitle';
 export { Text } from './Text';
@@ -12,6 +13,7 @@ export { Text } from './Text';
 // Type exports
 export type { LinkCustomProps as LinkProps } from './Link';
 export type {
+  TypographyProps as OverlineProps,
   TypographyProps as SubtextProps,
   TypographyProps as SubtitleProps,
   TypographyProps as TextProps,

package/src/index.ts

@@ -88,6 +88,7 @@ export * from './components/Tag';
 export * from './components/Textarea';
 export * from './components/Toast';
 export * from './components/Tooltip';
+export * from './components/Tree';
 export * from './components/Workflow';
 // Typography Components (excluding Link to avoid conflict with Link component)
 export {
@@ -97,6 +98,7 @@ export {
   H4,
   H5,
   Link,
+  Overline,
   Subtext,
   Subtitle,
   Text,

package/src/theme/index.ts

@@ -60,6 +60,14 @@ const SHARED_TEXT_STYLE_VALUES = {
     fontWeight: '500',
     lineHeight: '1.5',
   },
+  overline: {
+    fontFamily: 'body',
+    fontSize: { base: '0.805em', md: '0.875em' }, // 12.88px → 14px (matches subtext)
+    fontWeight: '500',
+    lineHeight: '1.5',
+    letterSpacing: '0.05em', // Chakra 'wider' tracking
+    textTransform: 'uppercase',
+  },
 } as const;
 
 /**
@@ -172,6 +180,11 @@ export const textStyles = defineTextStyles({
     description: 'Small caption text - responsive 12.88-14px',
     value: SHARED_TEXT_STYLE_VALUES.subtext,
   },
+  overline: {
+    description:
+      'Eyebrow / section label - uppercase, wider tracking (12.88-14px)',
+    value: SHARED_TEXT_STYLE_VALUES.overline,
+  },
 });
 
 /**