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

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/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 {