@gcsa/console-react 0.1.0

package/src/GcsaTimePicker.tsx

@@ -0,0 +1,298 @@
+import {
+  gcsaBuildTimeOptions,
+  gcsaCurrentTimeOption,
+  gcsaResolveTimeDraft,
+  gcsaTimePickerHours,
+  gcsaTimePickerMinutes,
+  gcsaTimePickerScrollIndex,
+  gcsaTimePickerScrollTop
+} from '@gcsa/console-core';
+import { useEffect, useMemo, useRef, useState, type InputHTMLAttributes, type UIEvent } from 'react';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+
+export type GcsaTimePickerProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'type' | 'onChange' | 'value' | 'placeholder' | 'readOnly'
+> & {
+  value?: string;
+  step?: number;
+  min?: string;
+  max?: string;
+  allowClear?: boolean;
+  invalid?: boolean;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+};
+
+function TimePickerIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <circle cx="8" cy="8" r="5.75" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M8 4.75V8l2.25 1.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function GcsaTimePicker({
+  value = '',
+  onChange,
+  className,
+  step = 60,
+  min,
+  max,
+  allowClear = true,
+  invalid = false,
+  placeholder,
+  disabled,
+  ...props
+}: GcsaTimePickerProps) {
+  const messages = useGcsaLocaleMessages();
+  const resolvedPlaceholder = placeholder ?? messages.timePickerPlaceholder;
+  const root = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const hourColumn = useRef<HTMLDivElement>(null);
+  const minuteColumn = useRef<HTMLDivElement>(null);
+  const timers = useRef<{ hour?: ReturnType<typeof setTimeout>; minute?: ReturnType<typeof setTimeout> }>({});
+  const [open, setOpen] = useState(false);
+  const [alignPanelEnd, setAlignPanelEnd] = useState(false);
+  const [draft, setDraft] = useState('00:00');
+
+  const options = useMemo(
+    () => gcsaBuildTimeOptions({ min, max, step }),
+    [min, max, step]
+  );
+  const hours = useMemo(() => gcsaTimePickerHours(options), [options]);
+  const draftHour = draft.slice(0, 2);
+  const draftMinute = draft.slice(3);
+  const minutes = useMemo(
+    () => gcsaTimePickerMinutes(options, draftHour),
+    [options, draftHour]
+  );
+  const nowOption = useMemo(() => gcsaCurrentTimeOption(options), [options]);
+
+  const syncDraft = (next = value) => {
+    setDraft(gcsaResolveTimeDraft(next, options));
+  };
+
+  const scrollColumns = () => {
+    requestAnimationFrame(() => {
+      if (hourColumn.current) {
+        hourColumn.current.scrollTop = gcsaTimePickerScrollTop(hours.indexOf(draftHour));
+      }
+      if (minuteColumn.current) {
+        minuteColumn.current.scrollTop = gcsaTimePickerScrollTop(minutes.indexOf(draftMinute));
+      }
+    });
+  };
+
+  const syncPanelAlignment = () => {
+    requestAnimationFrame(() => {
+      if (!root.current) return;
+      const rect = root.current.getBoundingClientRect();
+      const panelWidth = panelRef.current?.offsetWidth ?? 220;
+      const padding = 8;
+      setAlignPanelEnd(rect.left + panelWidth > window.innerWidth - padding);
+    });
+  };
+
+  const openPicker = () => {
+    if (disabled || open) return;
+    syncDraft();
+    setOpen(true);
+    syncPanelAlignment();
+    scrollColumns();
+  };
+
+  const selectHour = (hour: string) => {
+    const nextMinute = minutes.includes(draftMinute) ? draftMinute : minutes[0] ?? '00';
+    setDraft(`${hour}:${nextMinute}`);
+    requestAnimationFrame(scrollColumns);
+  };
+
+  const handleScroll = (type: 'hour' | 'minute', event: UIEvent<HTMLDivElement>) => {
+    const element = event.currentTarget;
+    clearTimeout(timers.current[type]);
+    timers.current[type] = setTimeout(() => {
+      const values = type === 'hour' ? hours : minutes;
+      const nextValue = values[gcsaTimePickerScrollIndex(element.scrollTop, values.length)];
+      if (type === 'hour' && nextValue) selectHour(nextValue);
+      else if (type === 'minute' && nextValue) setDraft(`${draftHour}:${nextValue}`);
+    }, 80);
+  };
+
+  useEffect(() => {
+    if (!open) syncDraft(value);
+  }, [value, open, options]);
+
+  useEffect(() => {
+    const close = (event: PointerEvent) => {
+      if (!root.current?.contains(event.target as Node)) {
+        setOpen(false);
+        syncDraft();
+      }
+    };
+    document.addEventListener('pointerdown', close);
+    return () => {
+      document.removeEventListener('pointerdown', close);
+      clearTimeout(timers.current.hour);
+      clearTimeout(timers.current.minute);
+    };
+  }, [value, options]);
+
+  const commit = () => {
+    onChange?.(draft);
+    setOpen(false);
+  };
+
+  const cancel = () => {
+    setOpen(false);
+    syncDraft();
+  };
+
+  const onKeyDown: InputHTMLAttributes<HTMLInputElement>['onKeyDown'] = event => {
+    if (event.key === 'Escape') cancel();
+    else if (event.key === 'Enter') {
+      event.preventDefault();
+      if (open) commit();
+      else openPicker();
+    } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      openPicker();
+      const index = options.indexOf(draft);
+      const delta = event.key === 'ArrowDown' ? 1 : -1;
+      syncDraft(options[Math.max(0, Math.min(options.length - 1, index + delta))]);
+      scrollColumns();
+    }
+  };
+
+  return (
+    <div ref={root} className={`gcsa-time-picker__root${className ? ` ${className}` : ''}`}>
+      <div
+        className="gcsa-time-picker__control gcsa-focus-ring"
+        data-invalid={invalid || undefined}
+        onClick={openPicker}
+      >
+        <input
+          {...props}
+          type="text"
+          inputMode="numeric"
+          readOnly
+          value={value}
+          placeholder={resolvedPlaceholder}
+          disabled={disabled}
+          className="gcsa-time-picker__input"
+          aria-invalid={invalid || undefined}
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          autoComplete="off"
+          onFocus={openPicker}
+          onKeyDown={onKeyDown}
+        />
+        <button
+          type="button"
+          className="gcsa-time-picker__trigger gcsa-focus-ring"
+          disabled={disabled}
+          aria-label={messages.timePickerOpen}
+          onMouseDown={event => event.preventDefault()}
+          onClick={event => {
+            event.stopPropagation();
+            openPicker();
+          }}
+        >
+          <TimePickerIcon />
+        </button>
+      </div>
+      {allowClear && value && !disabled ? (
+        <button
+          type="button"
+          className="gcsa-time-picker__clear"
+          aria-label={messages.timePickerClear}
+          onMouseDown={event => event.preventDefault()}
+          onClick={event => {
+            event.stopPropagation();
+            onChange?.('');
+            setOpen(false);
+          }}
+        >
+          ×
+        </button>
+      ) : null}
+      {open && !disabled ? (
+        <div
+          ref={panelRef}
+          className={`gcsa-time-picker__panel gcsa-ui-surface gcsa-time-picker__panel--open${alignPanelEnd ? ' gcsa-time-picker__panel--align-end' : ''}`}
+          role="dialog"
+          aria-label={messages.timePickerSelect}
+        >
+          <div className="gcsa-time-picker__spinner">
+            <div
+              ref={hourColumn}
+              className="gcsa-time-picker__column"
+              role="listbox"
+              aria-label={messages.timeHour}
+              onScroll={event => handleScroll('hour', event)}
+            >
+              {hours.map(hour => (
+                <button
+                  key={hour}
+                  type="button"
+                  className={`gcsa-time-picker__cell${hour === draftHour ? ' gcsa-time-picker__cell--selected' : ''}`}
+                  role="option"
+                  aria-selected={hour === draftHour}
+                  onMouseDown={event => event.preventDefault()}
+                  onClick={() => selectHour(hour)}
+                >
+                  {hour}
+                </button>
+              ))}
+            </div>
+            <div
+              ref={minuteColumn}
+              className="gcsa-time-picker__column"
+              role="listbox"
+              aria-label={messages.timeMinute}
+              onScroll={event => handleScroll('minute', event)}
+            >
+              {minutes.map(minute => (
+                <button
+                  key={minute}
+                  type="button"
+                  className={`gcsa-time-picker__cell${minute === draftMinute ? ' gcsa-time-picker__cell--selected' : ''}`}
+                  role="option"
+                  aria-selected={minute === draftMinute}
+                  onMouseDown={event => event.preventDefault()}
+                  onClick={() => setDraft(`${draftHour}:${minute}`)}
+                >
+                  {minute}
+                </button>
+              ))}
+            </div>
+            <div className="gcsa-time-picker__selection" aria-hidden="true" />
+          </div>
+          <div className="gcsa-time-picker__footer">
+            <button
+              type="button"
+              className="gcsa-time-picker__link"
+              disabled={!nowOption}
+              onMouseDown={event => event.preventDefault()}
+              onClick={() => {
+                syncDraft(nowOption);
+                scrollColumns();
+              }}
+            >
+              此刻
+            </button>
+            <div className="gcsa-time-picker__actions">
+              <button type="button" className="gcsa-time-picker__link" onMouseDown={event => event.preventDefault()} onClick={cancel}>
+                取消
+              </button>
+              <button type="button" className="gcsa-time-picker__confirm" onMouseDown={event => event.preventDefault()} onClick={commit}>
+                确定
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/GcsaTimeline.tsx

@@ -0,0 +1,27 @@
+import type { GcsaTimelineItem } from '@gcsa/console-core';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+
+export type GcsaTimelineProps = { items: GcsaTimelineItem[] };
+
+export function GcsaTimeline({ items }: GcsaTimelineProps) {
+  const messages = useGcsaLocaleMessages();
+
+  return (
+    <ol className="gcsa-timeline" aria-label={messages.timelineLabel}>
+      {items.map(item => (
+        <li key={item.key} className="gcsa-timeline__item">
+          <span className="gcsa-timeline__rail" aria-hidden="true">
+            <span className={`gcsa-timeline__dot gcsa-timeline__dot--${item.tone ?? 'primary'}`} />
+          </span>
+          <div className="gcsa-timeline__body">
+            <div className="gcsa-timeline__meta">
+              {item.label ? <strong>{item.label}</strong> : null}
+              {item.time ? <time>{item.time}</time> : null}
+            </div>
+            <p>{item.content}</p>
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/GcsaToastStack.tsx

@@ -0,0 +1,67 @@
+import type { GcsaMessageType } from '@gcsa/console-core';
+
+export type GcsaToastItem = {
+  id: number;
+  message: string;
+  type: GcsaMessageType;
+};
+
+function ToastIcon({ type }: { type: GcsaMessageType }) {
+  if (type === 'success') {
+    return (
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path
+          d="M20 6 9 17l-5-5"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+
+  if (type === 'error') {
+    return (
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+        <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.75" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.75" />
+      <path d="M12 10v6M12 8h.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export type GcsaToastStackProps = {
+  toasts: GcsaToastItem[];
+  zIndex?: number;
+};
+
+export function GcsaToastStack({ toasts, zIndex }: GcsaToastStackProps) {
+  return (
+    <div
+      className="gcsa-toast-region"
+      aria-live="polite"
+      style={zIndex == null ? undefined : { zIndex }}
+    >
+      {toasts.map(toast => (
+        <div
+          key={toast.id}
+          className={`gcsa-toast gcsa-toast--${toast.type}`}
+          role="status"
+        >
+          <span className="gcsa-toast__icon" aria-hidden="true">
+            <ToastIcon type={toast.type} />
+          </span>
+          <span className="gcsa-toast__content">{toast.message}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/GcsaTooltip.tsx

@@ -0,0 +1,75 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Tooltip } from '@ark-ui/react/tooltip';
+import { Portal } from '@ark-ui/react/portal';
+import { createGcsaPopupPositioning } from '@gcsa/console-core';
+import { GcsaButton } from './GcsaButton';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+import { useGcsaPopupZIndex } from './hooks/useGcsaPopupZIndex';
+
+export type GcsaTooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+
+export type GcsaTooltipProps = {
+  content?: string;
+  tooltip?: ReactNode;
+  triggerLabel?: string;
+  placement?: GcsaTooltipPlacement;
+  disabled?: boolean;
+  openDelay?: number;
+  closeDelay?: number;
+  arrow?: boolean;
+  portalled?: boolean;
+  gutter?: number;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function GcsaTooltip({
+  content = '',
+  tooltip,
+  triggerLabel,
+  placement = 'top',
+  disabled = false,
+  openDelay = 200,
+  closeDelay = 100,
+  arrow = true,
+  portalled = true,
+  gutter = 8,
+  children
+}: GcsaTooltipProps) {
+  const messages = useGcsaLocaleMessages();
+  const { zIndex, onOpenChange } = useGcsaPopupZIndex();
+  const resolvedTriggerLabel = triggerLabel ?? messages.hoverToView;
+  const hasContent = Boolean(content || tooltip);
+  const trigger = children ?? (
+    <GcsaButton variant="secondary">
+      {resolvedTriggerLabel}
+    </GcsaButton>
+  );
+
+  const positionerStyle = (zIndex == null ? undefined : { zIndex }) as CSSProperties | undefined;
+  const contentStyle = (zIndex == null ? undefined : { zIndex }) as CSSProperties | undefined;
+
+  return (
+    <Tooltip.Root
+      disabled={disabled || !hasContent}
+      openDelay={openDelay}
+      closeDelay={closeDelay}
+      positioning={createGcsaPopupPositioning({ placement, gutter })}
+      onOpenChange={details => onOpenChange(details.open)}
+    >
+      <Tooltip.Trigger asChild>{trigger}</Tooltip.Trigger>
+      <Portal disabled={!portalled}>
+        <Tooltip.Positioner style={positionerStyle}>
+          <Tooltip.Content className="gcsa-tooltip gcsa-ui-surface" style={contentStyle}>
+            <span className="gcsa-tooltip__text">{tooltip ?? content}</span>
+            {arrow ? (
+              <Tooltip.Arrow className="gcsa-tooltip__arrow">
+                <Tooltip.ArrowTip className="gcsa-tooltip__arrow-tip" />
+              </Tooltip.Arrow>
+            ) : null}
+          </Tooltip.Content>
+        </Tooltip.Positioner>
+      </Portal>
+    </Tooltip.Root>
+  );
+}

package/src/GcsaTransfer.tsx

@@ -0,0 +1,129 @@
+import { useMemo, useState } from 'react';
+import type { GcsaTransferOption } from '@gcsa/console-core';
+import { GcsaInput } from './GcsaInput';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+
+export type GcsaTransferProps = {
+  options: GcsaTransferOption[];
+  value?: string[];
+  sourceTitle?: string;
+  targetTitle?: string;
+  disabled?: boolean;
+  onValueChange?: (keys: string[]) => void;
+  onChange?: (keys: string[]) => void;
+};
+
+export function GcsaTransfer({
+  options,
+  value = [],
+  sourceTitle,
+  targetTitle,
+  disabled = false,
+  onValueChange,
+  onChange
+}: GcsaTransferProps) {
+  const messages = useGcsaLocaleMessages();
+  const resolvedSourceTitle = sourceTitle ?? messages.transferSourceTitle;
+  const resolvedTargetTitle = targetTitle ?? messages.transferTargetTitle;
+  const [sourceSelected, setSourceSelected] = useState<string[]>([]);
+  const [targetSelected, setTargetSelected] = useState<string[]>([]);
+  const [sourceQuery, setSourceQuery] = useState('');
+  const [targetQuery, setTargetQuery] = useState('');
+  const availableItems = useMemo(
+    () =>
+      options.filter(
+        item =>
+          !value.includes(item.value) &&
+          item.label.toLowerCase().includes(sourceQuery.trim().toLowerCase())
+      ),
+    [options, sourceQuery, value]
+  );
+  const targetItems = useMemo(
+    () =>
+      options.filter(
+        item =>
+          value.includes(item.value) &&
+          item.label.toLowerCase().includes(targetQuery.trim().toLowerCase())
+      ),
+    [options, targetQuery, value]
+  );
+  const update = (next: string[]) => {
+    onValueChange?.(next);
+    onChange?.(next);
+    setSourceSelected([]);
+    setTargetSelected([]);
+  };
+  const toggle = (key: string, side: 'source' | 'target') => {
+    const current = side === 'source' ? sourceSelected : targetSelected;
+    const next = current.includes(key) ? current.filter(item => item !== key) : [...current, key];
+    if (side === 'source') setSourceSelected(next);
+    else setTargetSelected(next);
+  };
+  const panel = (items: GcsaTransferOption[], title: string, side: 'source' | 'target') => (
+    <section className="gcsa-transfer__panel" aria-label={title}>
+      <header className="gcsa-transfer__header">
+        <span>{title}</span>
+        <span>{items.length}</span>
+      </header>
+      <div className="gcsa-transfer__search">
+        <GcsaInput
+          value={side === 'source' ? sourceQuery : targetQuery}
+          placeholder={messages.searchPlaceholder}
+          disabled={disabled}
+          onValueChange={side === 'source' ? setSourceQuery : setTargetQuery}
+        />
+      </div>
+      <div className="gcsa-transfer__list" role="listbox" aria-multiselectable="true">
+        {items.length ? (
+          items.map(item => {
+            const selected = (side === 'source' ? sourceSelected : targetSelected).includes(item.value);
+            return (
+              <button
+                key={item.value}
+                type="button"
+                className={`gcsa-transfer__item gcsa-focus-ring${selected ? ' gcsa-transfer__item--selected' : ''}`}
+                disabled={disabled || item.disabled}
+                role="option"
+                aria-selected={selected}
+                onClick={() => toggle(item.value, side)}
+              >
+                <span className="gcsa-transfer__check" aria-hidden="true">
+                  {selected ? '✓' : ''}
+                </span>
+                <span>{item.label}</span>
+              </button>
+            );
+          })
+        ) : (
+          <span className="gcsa-transfer__empty">{messages.noOptions}</span>
+        )}
+      </div>
+    </section>
+  );
+  return (
+    <div className={`gcsa-transfer${disabled ? ' gcsa-transfer--disabled' : ''}`}>
+      {panel(availableItems, resolvedSourceTitle, 'source')}
+      <div className="gcsa-transfer__actions">
+        <button
+          type="button"
+          className="gcsa-transfer__action gcsa-focus-ring"
+          disabled={disabled || !sourceSelected.length}
+          aria-label={messages.transferMoveRight}
+          onClick={() => update([...value, ...sourceSelected])}
+        >
+          ›
+        </button>
+        <button
+          type="button"
+          className="gcsa-transfer__action gcsa-focus-ring"
+          disabled={disabled || !targetSelected.length}
+          aria-label={messages.transferMoveLeft}
+          onClick={() => update(value.filter(key => !targetSelected.includes(key)))}
+        >
+          ‹
+        </button>
+      </div>
+      {panel(targetItems, resolvedTargetTitle, 'target')}
+    </div>
+  );
+}

package/src/GcsaTree.tsx

@@ -0,0 +1,43 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+import { GcsaIcon } from './GcsaIcon';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+
+export type GcsaTreeNode = { key: string; label: ReactNode; disabled?: boolean; children?: GcsaTreeNode[] };
+export type GcsaTreeProps = { nodes?: GcsaTreeNode[]; expandedKeys?: string[]; selectedKeys?: string[]; multiple?: boolean; onExpandedKeysChange?: (keys: string[]) => void; onSelectedKeysChange?: (keys: string[]) => void; onSelect?: (node: GcsaTreeNode) => void };
+
+export function GcsaTree({ nodes = [], expandedKeys, selectedKeys, multiple = false, onExpandedKeysChange, onSelectedKeysChange, onSelect }: GcsaTreeProps) {
+  const messages = useGcsaLocaleMessages();
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState<string[]>(() => expandedKeys ?? []);
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState<string[]>(() => selectedKeys ?? []);
+  const resolvedExpandedKeys = expandedKeys ?? internalExpandedKeys;
+  const resolvedSelectedKeys = selectedKeys ?? internalSelectedKeys;
+
+  useEffect(() => {
+    if (expandedKeys) setInternalExpandedKeys(expandedKeys);
+  }, [expandedKeys]);
+  useEffect(() => {
+    if (selectedKeys) setInternalSelectedKeys(selectedKeys);
+  }, [selectedKeys]);
+
+  function renderNode(node: GcsaTreeNode, depth: number, position: number, setSize: number): ReactNode {
+    const expanded = resolvedExpandedKeys.includes(node.key);
+    const selected = resolvedSelectedKeys.includes(node.key);
+    const hasChildren = Boolean(node.children?.length);
+    const updateExpanded = () => {
+      const next = expanded ? resolvedExpandedKeys.filter(key => key !== node.key) : [...resolvedExpandedKeys, node.key];
+      if (expandedKeys === undefined) setInternalExpandedKeys(next);
+      onExpandedKeysChange?.(next);
+    };
+    const childrenId = `gcsa-tree-children-${node.key}`;
+    return <div key={node.key} className="gcsa-tree__branch" role="treeitem" aria-level={depth + 1} aria-posinset={position} aria-setsize={setSize} aria-expanded={hasChildren ? expanded : undefined}>
+      <div className="gcsa-tree__node" style={{ paddingInlineStart: depth * 20 + 8 } as CSSProperties} data-selected={selected || undefined} data-expanded={hasChildren ? expanded : undefined} data-leaf={!hasChildren || undefined}>
+        {hasChildren ? <button type="button" className="gcsa-tree__toggle gcsa-focus-ring" aria-label={expanded ? 'Collapse' : 'Expand'} aria-expanded={expanded} aria-controls={childrenId} onClick={updateExpanded}><GcsaIcon name="chevronDown" size="sm" className={`gcsa-tree__caret${expanded ? ' gcsa-tree__caret--expanded' : ''}`} /></button> : <span className="gcsa-tree__spacer" />}
+        <button type="button" className="gcsa-tree__label gcsa-focus-ring" disabled={node.disabled} onClick={() => { const next = multiple ? selected ? resolvedSelectedKeys.filter(key => key !== node.key) : [...resolvedSelectedKeys, node.key] : [node.key]; if (selectedKeys === undefined) setInternalSelectedKeys(next); onSelectedKeysChange?.(next); onSelect?.(node); }}>{node.label}</button>
+        {hasChildren && !expanded ? <span className="gcsa-tree__summary" aria-label={`${node.children!.length} 项`}>{node.children!.length} 项</span> : null}
+      </div>
+      {hasChildren && expanded ? <div id={childrenId} className="gcsa-tree__children" role="group">{node.children!.map((child, index) => renderNode(child, depth + 1, index + 1, node.children!.length))}</div> : null}
+    </div>;
+  }
+  return <div className="gcsa-tree" role="tree" aria-multiselectable={multiple}>{nodes.length ? nodes.map((node, index) => renderNode(node, 0, index + 1, nodes.length)) : <div className="gcsa-tree__empty" role="status">{messages.emptyDefault}</div>}</div>;
+}

package/src/GcsaTypography.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+export type GcsaTypographyProps = {
+  variant?: 'title' | 'text';
+  level?: 1 | 2 | 3 | 4 | 5;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function GcsaTypography({
+  variant = 'text',
+  level = 3,
+  className,
+  children
+}: GcsaTypographyProps) {
+  const classes =
+    variant === 'title'
+      ? `gcsa-typography gcsa-typography-title gcsa-typography-title--l${level}`
+      : 'gcsa-typography gcsa-typography-text';
+
+  return (
+    <div className={`gcsa-ui-surface ${classes}${className ? ` ${className}` : ''}`}>{children}</div>
+  );
+}