sdaia-ui 1.0.1 → 1.0.3

package/src/components/TreeView/TreeView.tsx

@@ -1,130 +0,0 @@
-'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

@@ -1,42 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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

package/src/components/TreeViewItem/TreeViewItem.tsx

@@ -1,108 +0,0 @@
-'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

@@ -1,34 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

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

package/src/components/VerticalTabs/VerticalTabs.tsx

@@ -1,84 +0,0 @@
-'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

@@ -1,37 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

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