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

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,37 @@
+import { TreeBranch } from './TreeBranch';
+import { TreeBranchContent } from './TreeBranchContent';
+import { TreeBranchControl } from './TreeBranchControl';
+import { TreeBranchIndentGuide } from './TreeBranchIndentGuide';
+import { TreeBranchIndicator } from './TreeBranchIndicator';
+import { TreeBranchText } from './TreeBranchText';
+import { TreeBranchTrigger } from './TreeBranchTrigger';
+import { TreeItem } from './TreeItem';
+import { TreeItemIndicator } from './TreeItemIndicator';
+import { TreeItemText } from './TreeItemText';
+import { TreeLabel } from './TreeLabel';
+import { TreeNode } from './TreeNode';
+import { TreeNodeCheckbox } from './TreeNodeCheckbox';
+import { TreeNodeContext } from './TreeNodeContext';
+import { TreeNodeProvider } from './TreeNodeProvider';
+import { TreeRoot } from './TreeRoot';
+import { TreeTree } from './TreeTree';
+
+export const Tree = {
+  Root: TreeRoot,
+  Tree: TreeTree,
+  Branch: TreeBranch,
+  BranchControl: TreeBranchControl,
+  BranchTrigger: TreeBranchTrigger,
+  BranchIndicator: TreeBranchIndicator,
+  BranchText: TreeBranchText,
+  BranchContent: TreeBranchContent,
+  BranchIndentGuide: TreeBranchIndentGuide,
+  Item: TreeItem,
+  ItemText: TreeItemText,
+  ItemIndicator: TreeItemIndicator,
+  Node: TreeNode,
+  NodeCheckbox: TreeNodeCheckbox,
+  NodeContext: TreeNodeContext,
+  NodeProvider: TreeNodeProvider,
+  Label: TreeLabel,
+};

package/src/components/Tree/Tree.types.ts

@@ -0,0 +1,51 @@
+import type {
+  TreeViewBranchContentProps,
+  TreeViewBranchControlProps,
+  TreeViewBranchIndentGuideProps,
+  TreeViewBranchIndicatorProps,
+  TreeViewBranchProps,
+  TreeViewBranchTextProps,
+  TreeViewBranchTriggerProps,
+  TreeViewItemIndicatorProps,
+  TreeViewItemProps,
+  TreeViewItemTextProps,
+  TreeViewLabelProps,
+  TreeViewNodeCheckboxProps,
+  TreeViewRootProps,
+  TreeViewTreeProps,
+} from '@chakra-ui/react';
+
+export type TreeRootProps = TreeViewRootProps;
+export type TreeTreeProps = TreeViewTreeProps;
+export type TreeBranchProps = TreeViewBranchProps;
+export type TreeBranchControlProps = TreeViewBranchControlProps;
+export type TreeBranchTriggerProps = TreeViewBranchTriggerProps;
+export type TreeBranchIndicatorProps = TreeViewBranchIndicatorProps;
+export type TreeBranchTextProps = TreeViewBranchTextProps;
+export type TreeBranchContentProps = TreeViewBranchContentProps;
+export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps;
+export type TreeItemProps = TreeViewItemProps;
+export type TreeItemTextProps = TreeViewItemTextProps;
+export type TreeItemIndicatorProps = TreeViewItemIndicatorProps;
+export type TreeNodeCheckboxProps = TreeViewNodeCheckboxProps;
+export type TreeLabelProps = TreeViewLabelProps;
+
+// Detail payloads aren't re-exported from `@chakra-ui/react`'s top-level entry,
+// so derive them from the event handler signatures the Root component exposes.
+export type TreeExpandedChangeDetails = Parameters<
+  NonNullable<TreeViewRootProps['onExpandedChange']>
+>[0];
+
+export type TreeSelectionChangeDetails = Parameters<
+  NonNullable<TreeViewRootProps['onSelectionChange']>
+>[0];
+
+export type TreeCheckedChangeDetails = Parameters<
+  NonNullable<TreeViewRootProps['onCheckedChange']>
+>[0];
+
+export type TreeFocusChangeDetails = Parameters<
+  NonNullable<TreeViewRootProps['onFocusChange']>
+>[0];
+
+export type { TreeCollection } from '@chakra-ui/react';

package/src/components/Tree/TreeBranch.tsx

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

package/src/components/Tree/TreeBranchContent.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from 'react';
+import { TreeView as ChakraTreeView } from '@chakra-ui/react';
+
+import { TreeBranchContentProps } from './Tree.types';
+
+export const TreeBranchContent = forwardRef<
+  HTMLDivElement,
+  TreeBranchContentProps
+>((props, ref) => {
+  return (
+    <ChakraTreeView.BranchContent
+      ref={ref}
+      position="relative"
+      display="flex"
+      flexDirection="column"
+      gap={0.5}
+      {...props}
+    />
+  );
+});
+TreeBranchContent.displayName = 'TreeBranchContent';

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';