sdaia-ui 1.0.1

package/src/components/TreeView/TreeView.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { ReactNode, forwardRef, useMemo, useState } from 'react';
+import { cn } from '../../lib/cn';
+import { TreeViewItem } from '../TreeViewItem';
+import type { TreeViewNode, TreeViewProps } from './TreeView.types';
+import { ITEM_INTERACTIVE, ROOT } from './TreeView.variants';
+
+function clampLevel(level: number): 1 | 2 | 3 | 4 {
+  if (level <= 1) return 1;
+  if (level === 2) return 2;
+  if (level === 3) return 3;
+  return 4;
+}
+
+function flattenIds(nodes: TreeViewNode[], ids: string[] = []) {
+  for (const n of nodes) {
+    ids.push(n.id);
+    if (n.children?.length) flattenIds(n.children, ids);
+  }
+  return ids;
+}
+
+export const TreeView = forwardRef<HTMLDivElement, TreeViewProps>(function TreeView(
+  {
+    items,
+    expandedIds,
+    defaultExpandedIds = [],
+    onExpandedIdsChange,
+    selectedId,
+    defaultSelectedId,
+    onSelectedIdChange,
+    baseLevel = 1,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const allIds = useMemo(() => new Set(flattenIds(items)), [items]);
+
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState<string[]>(defaultExpandedIds);
+
+  const isControlled = expandedIds !== undefined;
+  const currentExpanded = isControlled ? expandedIds : uncontrolledExpanded;
+
+  const isSelectedControlled = selectedId !== undefined;
+  const [uncontrolledSelected, setUncontrolledSelected] = useState<string | undefined>(defaultSelectedId);
+  const currentSelected = isSelectedControlled ? selectedId : uncontrolledSelected;
+
+  const selectNode = (id: string) => {
+    if (!isSelectedControlled) setUncontrolledSelected(id);
+    onSelectedIdChange?.(id);
+  };
+
+  const expandedSet = useMemo(() => new Set(currentExpanded.filter((id) => allIds.has(id))), [
+    currentExpanded,
+    allIds,
+  ]);
+
+  const setExpanded = (next: Set<string>) => {
+    const nextArr = Array.from(next);
+    if (!isControlled) setUncontrolledExpanded(nextArr);
+    onExpandedIdsChange?.(nextArr);
+  };
+
+  const toggle = (id: string) => {
+    const next = new Set(expandedSet);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    setExpanded(next);
+  };
+
+  const renderNodes = (nodes: TreeViewNode[], level: number) =>
+    nodes.flatMap((node): ReactNode[] => {
+      const nodeLevel = clampLevel(level);
+      const hasChildren = Boolean(node.children?.length);
+      const isExpanded = hasChildren ? expandedSet.has(node.id) : false;
+      const isSelected = currentSelected === node.id;
+
+      const row = (
+        <TreeViewItem
+          key={node.id}
+          data-slot="tree-view-row"
+          level={nodeLevel}
+          type={node.type ?? 'none'}
+          expanded={isExpanded}
+          showCollapseIcon={hasChildren}
+          checked={node.checked}
+          onCheckedChange={node.onCheckedChange}
+          disabled={node.disabled}
+          selected={isSelected}
+          label={node.label}
+          role="button"
+          tabIndex={node.disabled ? undefined : 0}
+          aria-expanded={hasChildren ? isExpanded : undefined}
+          onClick={
+            !node.disabled
+              ? (e) => {
+                  e.preventDefault();
+                  if (hasChildren) toggle(node.id);
+                  selectNode(node.id);
+                }
+              : undefined
+          }
+          onKeyDown={
+            !node.disabled
+              ? (e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    if (hasChildren) toggle(node.id);
+                    selectNode(node.id);
+                  }
+                }
+              : undefined
+          }
+          className={cn(ITEM_INTERACTIVE)}
+        />
+      );
+
+      if (!hasChildren || !isExpanded) return [row];
+      return [row, ...renderNodes(node.children ?? [], level + 1)];
+    });
+
+  return (
+    <div ref={ref} data-slot="tree-view" className={cn(ROOT, className)} {...rest}>
+      {renderNodes(items, baseLevel)}
+    </div>
+  );
+});
+

package/src/components/TreeView/TreeView.types.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { TreeViewItemLevel, TreeViewItemType } from '../TreeViewItem';
+
+export interface TreeViewNode {
+  /** Stable unique id for expansion state and rendering keys. */
+  id: string;
+  /** Primary label for the row. */
+  label: ReactNode;
+  /** Structural type (icon / checkbox / none). */
+  type?: TreeViewItemType;
+  /** Checkbox value when `type="checkbox"`. */
+  checked?: boolean;
+  /** Called when checkbox is toggled (only when `type="checkbox"`). */
+  onCheckedChange?: (checked: boolean) => void;
+  /** Disables interactions on this row. */
+  disabled?: boolean;
+  /** Optional nested children. */
+  children?: TreeViewNode[];
+}
+
+export interface TreeViewProps extends HTMLAttributes<HTMLDivElement> {
+  /** Tree nodes to render. */
+  items: TreeViewNode[];
+  /** Controlled expanded ids. */
+  expandedIds?: string[];
+  /** Uncontrolled initial expanded ids. */
+  defaultExpandedIds?: string[];
+  /** Called whenever expansion state changes. */
+  onExpandedIdsChange?: (expandedIds: string[]) => void;
+  /** Controlled selected node id. */
+  selectedId?: string;
+  /** Uncontrolled initial selected node id. */
+  defaultSelectedId?: string;
+  /** Called when a node is selected. */
+  onSelectedIdChange?: (id: string) => void;
+  /**
+   * Base indentation level for the first rendered row.
+   * Figma set covers levels 1–4.
+   */
+  baseLevel?: TreeViewItemLevel;
+}
+

package/src/components/TreeView/TreeView.variants.ts

@@ -0,0 +1,6 @@
+export const ROOT =
+  'flex flex-col items-start gap-spacing-lg rounded-(--radius/radius-md,8px) bg-white p-spacing-lg dark:bg-[rgba(17,25,39,1)]';
+
+export const ITEM_INTERACTIVE =
+  'w-full cursor-pointer disabled:cursor-not-allowed';
+

package/src/components/TreeView/index.ts

@@ -0,0 +1,3 @@
+export { TreeView } from './TreeView';
+export type { TreeViewProps, TreeViewNode } from './TreeView.types';
+

package/src/components/TreeViewItem/TreeViewItem.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Checkbox } from '../Checkbox';
+import type { TreeViewItemProps } from './TreeViewItem.types';
+import {
+  COLLAPSE_ICON_COLOR,
+  COLLAPSE_ICON_WRAPPER,
+  ITEM_ICON_COLOR,
+  ITEM_ICON_WRAPPER,
+  LABEL,
+  LEVEL_PADDING_START,
+  ROOT_BASE,
+  SELECTED_BG,
+  TYPE_HAS_MIDDLE_SLOT,
+} from './TreeViewItem.variants';
+import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, FolderFilledIcon } from '../../icons/IconFactory';
+
+export const TreeViewItem = forwardRef<HTMLElement, TreeViewItemProps>(function TreeViewItem(
+  {
+    level = 1,
+    type = 'none',
+    expanded = false,
+    showCollapseIcon = true,
+    showItemIcon = true,
+    label,
+    checked,
+    onCheckedChange,
+    disabled = false,
+    selected = false,
+    as,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const Comp = (as ?? 'div') as React.ElementType;
+
+  const collapseIcon =
+    expanded ? (
+      <ArrowDownIcon />
+    ) : (
+      <>
+        <span className="ltr:block rtl:hidden">
+          <ArrowRightIcon />
+        </span>
+        <span className="rtl:block ltr:hidden">
+          <ArrowLeftIcon />
+        </span>
+      </>
+    );
+
+  const showMiddle = TYPE_HAS_MIDDLE_SLOT[type];
+
+  return (
+    <Comp
+      ref={ref}
+      data-slot="tree-view-item"
+      aria-disabled={disabled ? true : undefined}
+      aria-selected={selected || undefined}
+      className={cn(ROOT_BASE, LEVEL_PADDING_START[level], disabled && 'opacity-50', selected && SELECTED_BG, className)}
+      {...rest}
+    >
+      {showCollapseIcon ? (
+        <span data-slot="collapse-icon" className={cn(COLLAPSE_ICON_WRAPPER, COLLAPSE_ICON_COLOR)}>
+          {collapseIcon}
+        </span>
+      ) : null}
+
+      {showMiddle ? (
+        <span data-slot="middle" className="inline-flex shrink-0 items-center gap-spacing-md">
+          {type === 'icon' && showItemIcon ? (
+            <span data-slot="item-icon" className={cn(ITEM_ICON_WRAPPER, ITEM_ICON_COLOR)}>
+              <FolderFilledIcon />
+            </span>
+          ) : null}
+
+          {type === 'checkbox' ? (
+            <span
+              data-slot="checkbox"
+              className="inline-flex shrink-0"
+              onClick={(e) => e.stopPropagation()}
+              onKeyDown={(e) => e.stopPropagation()}
+            >
+              <Checkbox
+                size="md"
+                variant="neutral"
+                checked={Boolean(checked)}
+                disabled={disabled}
+                label={undefined}
+                onChange={(e) => onCheckedChange?.(e.currentTarget.checked)}
+                className="gap-0!"
+              />
+            </span>
+          ) : null}
+        </span>
+      ) : null}
+
+      {label ? (
+        <span data-slot="label" className={LABEL}>
+          {label}
+        </span>
+      ) : null}
+    </Comp>
+  );
+});
+

package/src/components/TreeViewItem/TreeViewItem.types.ts

@@ -0,0 +1,34 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+
+export type TreeViewItemLevel = 1 | 2 | 3 | 4;
+
+export type TreeViewItemType = 'icon' | 'checkbox' | 'none';
+
+export interface TreeViewItemProps extends HTMLAttributes<HTMLElement> {
+  /** Controls the indentation level for nested items. */
+  level?: TreeViewItemLevel;
+  /** Structural content type rendered between collapse icon and label. */
+  type?: TreeViewItemType;
+  /** Whether the item is expanded (controls the collapse icon direction). */
+  expanded?: boolean;
+  /** Whether to show the collapse / expand icon. */
+  showCollapseIcon?: boolean;
+  /** Whether to show the folder icon when `type="icon"`. */
+  showItemIcon?: boolean;
+  /** The primary label. */
+  label?: ReactNode;
+  /**
+   * Checkbox value when `type="checkbox"`.
+   * This is controlled purely by the consumer (no internal state).
+   */
+  checked?: boolean;
+  /** Called when checkbox is toggled (only when `type="checkbox"`). */
+  onCheckedChange?: (checked: boolean) => void;
+  /** Disables interactions (e.g. checkbox + click handlers). */
+  disabled?: boolean;
+  /** Marks this item as the currently selected node. */
+  selected?: boolean;
+  /** Override the rendered element (e.g. `button`, `a`, `div`). */
+  as?: ElementType;
+}
+

package/src/components/TreeViewItem/TreeViewItem.variants.ts

@@ -0,0 +1,40 @@
+import type { TreeViewItemLevel, TreeViewItemType } from './TreeViewItem.types';
+
+export const ROOT_BASE =
+  'flex items-center gap-spacing-md min-w-0 w-full select-none';
+
+export const COLLAPSE_ICON_WRAPPER = 'inline-flex shrink-0 items-center justify-center size-icon-md';
+
+export const ITEM_ICON_WRAPPER = 'inline-flex shrink-0 items-center justify-center size-icon-lg';
+
+export const CHECKBOX_WRAPPER =
+  'inline-flex shrink-0 items-center justify-center size-icon-lg';
+
+export const CHECKBOX_BOX =
+  'size-icon-lg rounded-[var(--Radius-radius-4,4px)] border border-[color:var(--Controls-control-border,#6c737f)] bg-transparent dark:border-[rgba(75,85,99,1)]';
+
+export const LABEL =
+  'flex-1 min-w-0 text-text-md font-[400] text-[color:var(--Text-text-primary-paragraph,#384250)] dark:text-[rgba(156,163,175,1)] rtl:text-right truncate';
+
+export const LEVEL_PADDING_START: Record<TreeViewItemLevel, string> = {
+  1: 'ps-spacing-none',
+  2: 'ps-spacing-lg',
+  3: 'ps-spacing-3xl',
+  4: 'ps-[36px]',
+};
+
+export const COLLAPSE_ICON_COLOR =
+  'text-[color:var(--Icon-icon-default-500,#6c737f)] dark:text-[rgba(107,114,128,1)]';
+
+export const ITEM_ICON_COLOR =
+  'text-[color:var(--Icon-icon-default-500,#6c737f)] dark:text-[rgba(107,114,128,1)]';
+
+export const SELECTED_BG =
+  '';
+
+export const TYPE_HAS_MIDDLE_SLOT: Record<TreeViewItemType, boolean> = {
+  icon: true,
+  checkbox: true,
+  none: false,
+};
+

package/src/components/TreeViewItem/index.ts

@@ -0,0 +1,3 @@
+export { TreeViewItem } from './TreeViewItem';
+export type { TreeViewItemProps, TreeViewItemLevel, TreeViewItemType } from './TreeViewItem.types';
+

package/src/components/VerticalTabs/VerticalTabs.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { forwardRef, useState, useCallback } from 'react';
+import { cn } from '../../lib/cn';
+import { Tab } from '../Tab';
+import type { VerticalTabsProps } from './VerticalTabs.types';
+import {
+  ROOT,
+  TYPE_ROOT_CLASSES,
+  TAB_TYPE_MAP,
+  TAB_CLASSES,
+} from './VerticalTabs.variants';
+
+/**
+ * VerticalTabs — vertical tab list where every tab stretches to full width.
+ *
+ * Supports 4 container types (primary, neutral, line-vertical, outline).
+ * Responsive sizing: sm on mobile, md on tablet, lg on desktop.
+ * Composes the shared `Tab` component for each item.
+ * RTL-aware via ambient `dir` — logical properties mirror automatically.
+ */
+export const VerticalTabs = forwardRef<HTMLDivElement, VerticalTabsProps>(
+  function VerticalTabs(
+    {
+      items,
+      type = 'primary',
+      value,
+      defaultValue,
+      onValueChange,
+      disabled: groupDisabled = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* ── Selection state (controlled / uncontrolled) ──────── */
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = useState<string | undefined>(
+      defaultValue ?? items[0]?.value,
+    );
+    const selectedValue = isControlled ? value : internal;
+
+    const handleSelect = useCallback(
+      (next: string) => {
+        if (!isControlled) setInternal(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange],
+    );
+
+    /* ── Resolve inner Tab type from container type ──────── */
+    const tabType = TAB_TYPE_MAP[type];
+
+    return (
+      <div
+        ref={ref}
+        role="tablist"
+        aria-orientation="vertical"
+        data-slot="vertical-tabs"
+        data-type={type}
+        className={cn(ROOT, TYPE_ROOT_CLASSES[type], className)}
+        {...rest}
+      >
+        {items.map((item) => {
+          const isSelected = item.value === selectedValue;
+          return (
+            <Tab
+              key={item.value}
+              type={tabType}
+              size="sm"
+              selected={isSelected}
+              disabled={groupDisabled || item.disabled}
+              label={item.label ?? item.value}
+              leadingIcon={item.leadingIcon}
+              count={item.count}
+              onClick={() => handleSelect(item.value)}
+              className={TAB_CLASSES}
+            />
+          );
+        })}
+      </div>
+    );
+  },
+);

package/src/components/VerticalTabs/VerticalTabs.types.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Container-level type. Determines both the wrapper styling and the
+ *  inner `Tab` variant used for each item. */
+export type VerticalTabsType =
+  | 'primary'
+  | 'neutral'
+  | 'line-vertical'
+  | 'outline';
+
+export interface VerticalTabItem {
+  /** Stable value used for selection. */
+  value: string;
+  /** Label — defaults to `value` when omitted. */
+  label?: ReactNode;
+  /** Optional leading icon (inline-start). */
+  leadingIcon?: ReactNode;
+  /** Optional count badge. */
+  count?: ReactNode;
+  /** Disable this tab only. */
+  disabled?: boolean;
+}
+
+export interface VerticalTabsProps extends HTMLAttributes<HTMLDivElement> {
+  /** Tabs to render. */
+  items: VerticalTabItem[];
+  /** Visual type. */
+  type?: VerticalTabsType;
+  /** Controlled selected value. */
+  value?: string;
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  /** Selection change callback. */
+  onValueChange?: (value: string) => void;
+  /** Disable the entire tab group. */
+  disabled?: boolean;
+}

package/src/components/VerticalTabs/VerticalTabs.variants.ts

@@ -0,0 +1,43 @@
+import type { VerticalTabsType } from './VerticalTabs.types';
+import type { TabType } from '../Tab/Tab.types';
+
+/* ── Container root ──────────────────────────────────────────── */
+
+/** Base classes shared by all types.
+ *  Icons are always 16px (size-icon-sm) across all sizes per Figma. */
+export const ROOT = [
+  'flex flex-col items-start gap-spacing-xs',
+  '[&_[data-slot=tab-leading-icon]]:size-icon-sm',
+].join(' ');
+
+/** Type-specific container wrapper classes. */
+export const TYPE_ROOT_CLASSES: Record<VerticalTabsType, string> = {
+  primary: '',
+  neutral: '',
+  'line-vertical': '',
+  outline: '',
+};
+
+/* ── Tab type mapping ────────────────────────────────────────── */
+
+/** Maps the container-level type to the inner `Tab` component's `type` prop. */
+export const TAB_TYPE_MAP: Record<VerticalTabsType, TabType> = {
+  primary: 'primary',
+  neutral: 'neutral',
+  'line-vertical': 'line-vertical',
+  outline: 'outline',
+};
+
+/* ── Individual tab overrides ────────────────────────────────── */
+
+/** Every tab inside VerticalTabs stretches to full width
+ *  and uses responsive sizing matched exactly to Figma:
+ *  - mobile (default): h-24, px-md(8), gap-md(8), text-sm(14)
+ *  - tablet (md):      h-32, px-lg(12), gap-md(8), text-sm(14)
+ *  - desktop (lg):     h-40, px-lg(12), gap-md(8), text-md(16) */
+export const TAB_CLASSES = [
+  'w-full',
+  'h-[24px] px-spacing-md gap-spacing-md',
+  'md:h-[32px] md:px-spacing-lg',
+  'lg:h-[40px]',
+].join(' ');

package/src/components/VerticalTabs/index.ts

@@ -0,0 +1,6 @@
+export { VerticalTabs } from './VerticalTabs';
+export type {
+  VerticalTabsProps,
+  VerticalTabsType,
+  VerticalTabItem,
+} from './VerticalTabs.types';