@zen-ui-capri/system 0.0.0-stage → 1.1.0

package/src/lib/components/ZenSegmentedControl.tsx

@@ -0,0 +1,113 @@
+import { useRef, type KeyboardEvent, type ReactNode } from 'react';
+
+export interface ZenSegmentItem<T extends string> {
+  readonly value: T;
+  readonly label: ReactNode;
+  readonly icon?: ReactNode;
+  readonly count?: string | number;
+  readonly disabled?: boolean;
+}
+
+export interface ZenSegmentedControlProps<T extends string> {
+  readonly items: readonly ZenSegmentItem<T>[];
+  readonly value: T;
+  readonly onChange: (nextValue: T) => void;
+  readonly ariaLabel: string;
+  readonly size?: 'sm' | 'md';
+  readonly className?: string;
+}
+
+export function ZenSegmentedControl<T extends string>({
+  items,
+  value,
+  onChange,
+  ariaLabel,
+  size = 'md',
+  className = '',
+}: ZenSegmentedControlProps<T>) {
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const enabledIndices = items
+    .map((item, idx) => (item.disabled ? -1 : idx))
+    .filter((idx) => idx !== -1);
+
+  const focusAndSelect = (targetIdx: number) => {
+    const target = items[targetIdx];
+    if (!target || target.disabled) return;
+    buttonRefs.current[targetIdx]?.focus();
+    onChange(target.value);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>, idx: number) => {
+    const pos = enabledIndices.indexOf(idx);
+    if (pos === -1) return;
+
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      const nextIdx = enabledIndices[(pos + 1) % enabledIndices.length];
+      focusAndSelect(nextIdx);
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prevIdx =
+        enabledIndices[
+          (pos - 1 + enabledIndices.length) % enabledIndices.length
+        ];
+      focusAndSelect(prevIdx);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      focusAndSelect(enabledIndices[0]);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      focusAndSelect(enabledIndices[enabledIndices.length - 1]);
+    }
+  };
+
+  const padClass = size === 'sm' ? 'px-2.5 sm:px-3 py-1.5 text-[11px]' : 'px-3.5 sm:px-4 py-2 text-xs';
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      data-zen-occlude="true"
+      className={`inline-flex flex-wrap items-center gap-1.5 p-1.5 max-w-full rounded-2xl zen-surface-static ${className}`.trim()}
+    >
+      {items.map((item, idx) => {
+        const isSelected = item.value === value;
+        return (
+          <button
+            key={item.value}
+            ref={(el) => {
+              buttonRefs.current[idx] = el;
+            }}
+            type="button"
+            role="radio"
+            aria-checked={isSelected}
+            disabled={item.disabled}
+            tabIndex={isSelected ? 0 : -1}
+            onClick={() => onChange(item.value)}
+            onKeyDown={(e) => handleKeyDown(e, idx)}
+            className={`zen-focus-ring rounded-xl zen-font-mono ${padClass} inline-flex items-center gap-1.5 transition-all cursor-pointer ${
+              isSelected
+                ? 'bg-[var(--zen-accent-primary)] text-[var(--zen-ink-on-accent)] font-semibold shadow-sm'
+                : 'text-[var(--zen-ink-secondary)] hover:text-[var(--zen-ink-primary)] hover:bg-[var(--zen-surface-subtle)]'
+            } ${item.disabled ? 'opacity-40 cursor-not-allowed' : ''}`.trim()}
+          >
+            {item.icon && <span className="shrink-0 inline-flex">{item.icon}</span>}
+            <span>{item.label}</span>
+            {item.count !== undefined && (
+              <span
+                className={`px-1.5 py-0.2 rounded-full text-[10px] ${
+                  isSelected
+                    ? 'bg-black/20 text-[var(--zen-ink-on-accent)]'
+                    : 'bg-[var(--zen-surface-subtle)] text-[var(--zen-ink-muted)]'
+                }`}
+              >
+                {item.count}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/lib/components/ZenSwitch.tsx

@@ -0,0 +1,63 @@
+import { useId, type ReactNode } from 'react';
+
+export interface ZenSwitchProps {
+  readonly checked: boolean;
+  readonly onChange: (nextChecked: boolean) => void;
+  readonly label: ReactNode;
+  readonly description?: string;
+  readonly disabled?: boolean;
+  readonly className?: string;
+}
+
+export function ZenSwitch({
+  checked,
+  onChange,
+  label,
+  description,
+  disabled = false,
+  className = '',
+}: ZenSwitchProps) {
+  const labelId = useId();
+  return (
+    <div
+      data-zen-occlude="true"
+      className={`flex items-center justify-between gap-4 ${className}`.trim()}
+    >
+      <div className="min-w-0">
+        <div
+          id={labelId}
+          className="text-sm font-medium text-[var(--zen-ink-primary)]"
+        >
+          {label}
+        </div>
+        {description && (
+          <div className="zen-font-mono text-[11px] text-[var(--zen-ink-muted)] mt-0.5">
+            {description}
+          </div>
+        )}
+      </div>
+
+      <button
+        type="button"
+        role="switch"
+        aria-labelledby={labelId}
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => onChange(!checked)}
+        className={`zen-focus-ring relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors cursor-pointer ${
+          checked
+            ? 'bg-[var(--zen-accent-primary)] border-[var(--zen-accent-primary)]'
+            : 'bg-[var(--zen-surface-subtle)] border-[var(--zen-border-control)]'
+        } ${disabled ? 'opacity-40 cursor-not-allowed' : ''}`}
+      >
+        <span
+          className={`inline-block h-4 w-4 rounded-full transition-transform ${
+            checked
+              ? 'translate-x-5 bg-[var(--zen-ink-on-accent)]'
+              : 'translate-x-1 bg-[var(--zen-ink-primary)]'
+          }`}
+        />
+      </button>
+    </div>
+  );
+}

package/src/lib/components/ZenTabs.tsx

@@ -0,0 +1,103 @@
+import { useRef, type KeyboardEvent, type ReactNode } from 'react';
+
+export interface ZenTabItem<T extends string> {
+  readonly id: T;
+  readonly label: ReactNode;
+  readonly icon?: ReactNode;
+  readonly badge?: string | number;
+  readonly disabled?: boolean;
+}
+
+export interface ZenTabsProps<T extends string> {
+  readonly tabs: readonly ZenTabItem<T>[];
+  readonly activeTab: T;
+  readonly onChange: (nextTab: T) => void;
+  readonly ariaLabel: string;
+  readonly className?: string;
+}
+
+export function ZenTabs<T extends string>({
+  tabs,
+  activeTab,
+  onChange,
+  ariaLabel,
+  className = '',
+}: ZenTabsProps<T>) {
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const enabledIndices = tabs
+    .map((t, idx) => (t.disabled ? -1 : idx))
+    .filter((idx) => idx !== -1);
+
+  const focusAndActivate = (targetIdx: number) => {
+    const target = tabs[targetIdx];
+    if (!target || target.disabled) return;
+    tabRefs.current[targetIdx]?.focus();
+    onChange(target.id);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>, idx: number) => {
+    const pos = enabledIndices.indexOf(idx);
+    if (pos === -1) return;
+
+    if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      const nextIdx = enabledIndices[(pos + 1) % enabledIndices.length];
+      focusAndActivate(nextIdx);
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      const prevIdx =
+        enabledIndices[
+          (pos - 1 + enabledIndices.length) % enabledIndices.length
+        ];
+      focusAndActivate(prevIdx);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      focusAndActivate(enabledIndices[0]);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      focusAndActivate(enabledIndices[enabledIndices.length - 1]);
+    }
+  };
+
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel}
+      data-zen-occlude="true"
+      className={`flex flex-wrap items-center gap-1.5 max-w-full border-b border-[var(--zen-border-subtle)] pb-2 ${className}`.trim()}
+    >
+      {tabs.map((tab, idx) => {
+        const isSelected = tab.id === activeTab;
+        return (
+          <button
+            key={tab.id}
+            ref={(el) => {
+              tabRefs.current[idx] = el;
+            }}
+            type="button"
+            role="tab"
+            aria-selected={isSelected}
+            disabled={tab.disabled}
+            tabIndex={isSelected ? 0 : -1}
+            onClick={() => onChange(tab.id)}
+            onKeyDown={(e) => handleKeyDown(e, idx)}
+            className={`zen-focus-ring px-3 sm:px-4 py-2 rounded-xl zen-font-mono text-xs inline-flex items-center gap-2 shrink-0 transition-all cursor-pointer ${
+              isSelected
+                ? 'bg-[var(--zen-accent-subtle)] text-[var(--zen-accent-primary)] border border-[var(--zen-accent-border)] font-semibold'
+                : 'text-[var(--zen-ink-secondary)] hover:text-[var(--zen-ink-primary)] hover:bg-[var(--zen-surface-subtle)] border border-transparent'
+            } ${tab.disabled ? 'opacity-40 cursor-not-allowed' : ''}`.trim()}
+          >
+            {tab.icon && <span className="shrink-0 inline-flex">{tab.icon}</span>}
+            <span>{tab.label}</span>
+            {tab.badge !== undefined && (
+              <span className="px-1.5 py-0.5 rounded-full text-[10px] bg-[var(--zen-surface-subtle)] text-[var(--zen-ink-muted)]">
+                {tab.badge}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/lib/components/ZenTimelineCard.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import { ZenCard, ZenCheckList } from './ZenCard';
+import { ZenTagList } from './ZenBadge';
+
+export interface ZenTimelineCardProps {
+  readonly period: string;
+  readonly location: string;
+  readonly title: string;
+  readonly institution: string;
+  readonly summary: string;
+  readonly bullets?: readonly string[];
+  readonly tags: readonly string[];
+  readonly icon?: ReactNode;
+  readonly className?: string;
+}
+
+export function ZenTimelineCard({
+  period,
+  location,
+  title,
+  institution,
+  summary,
+  bullets,
+  tags,
+  icon,
+  className = '',
+}: ZenTimelineCardProps) {
+  return (
+    <ZenCard
+      variant="static"
+      padding="md"
+      className={`flex flex-col justify-between ${className}`.trim()}
+    >
+      <div>
+        <div className="flex items-center justify-between gap-2 zen-font-mono text-xs mb-4">
+          <span className="inline-flex items-center gap-1.5 text-[var(--zen-accent-primary)]">
+            {icon}
+            <span>{period}</span>
+          </span>
+          <span className="text-[var(--zen-ink-muted)]">{location}</span>
+        </div>
+
+        <h3 className="zen-font-display text-xl sm:text-2xl font-bold text-[var(--zen-ink-primary)]">
+          {title}
+        </h3>
+        <div className="zen-font-serif italic text-xl text-[var(--zen-accent-primary)] mt-0.5 mb-3">
+          {institution}
+        </div>
+
+        <p className="text-sm text-[var(--zen-ink-secondary)] leading-relaxed mb-4">
+          {summary}
+        </p>
+
+        {bullets && bullets.length > 0 && (
+          <ZenCheckList items={bullets} className="mb-5" />
+        )}
+      </div>
+
+      <div className="pt-3 border-t border-[var(--zen-border-subtle)]">
+        <ZenTagList tags={tags} />
+      </div>
+    </ZenCard>
+  );
+}

package/src/lib/components/ZenToast.tsx

@@ -0,0 +1,96 @@
+import { useState, useCallback, type ReactNode } from 'react';
+import { CheckCircle2, AlertTriangle, Info, X } from 'lucide-react';
+
+export type ZenToastTone = 'info' | 'success' | 'warning';
+
+export interface ZenToastItem {
+  readonly id: string;
+  readonly title: string;
+  readonly detail?: string;
+  readonly tone?: ZenToastTone;
+}
+
+export interface ZenToastStackProps {
+  readonly toasts: readonly ZenToastItem[];
+  readonly onDismiss: (id: string) => void;
+}
+
+const TONE_ICONS: Record<ZenToastTone, ReactNode> = {
+  info: <Info className="w-4 h-4 text-[var(--zen-status-info)] shrink-0" />,
+  success: (
+    <CheckCircle2 className="w-4 h-4 text-[var(--zen-status-success)] shrink-0" />
+  ),
+  warning: (
+    <AlertTriangle className="w-4 h-4 text-[var(--zen-accent-primary)] shrink-0" />
+  ),
+};
+
+export function ZenToastStack({ toasts, onDismiss }: ZenToastStackProps) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <div
+      aria-live="polite"
+      data-zen-occlude="true"
+      className="fixed bottom-4 inset-x-4 sm:inset-x-auto sm:bottom-6 sm:right-6 z-50 flex flex-col gap-2.5 sm:max-w-sm sm:w-full pointer-events-none"
+    >
+      {toasts.map((t) => {
+        const tone = t.tone ?? 'info';
+        return (
+          <div
+            key={t.id}
+            role="status"
+            className="pointer-events-auto flex items-start justify-between gap-3 p-4 rounded-2xl bg-[var(--zen-bg-elevated)] border border-[var(--zen-border-strong)] shadow-[var(--zen-shadow-hud)] backdrop-blur-xl"
+          >
+            <div className="flex items-start gap-2.5 min-w-0">
+              <div className="mt-0.5">{TONE_ICONS[tone]}</div>
+              <div className="min-w-0">
+                <div className="zen-font-mono text-xs font-semibold text-[var(--zen-ink-primary)]">
+                  {t.title}
+                </div>
+                {t.detail && (
+                  <div className="text-xs text-[var(--zen-ink-secondary)] mt-0.5 break-words">
+                    {t.detail}
+                  </div>
+                )}
+              </div>
+            </div>
+            <button
+              type="button"
+              aria-label="Dismiss notification"
+              onClick={() => onDismiss(t.id)}
+              className="zen-focus-ring p-1 rounded-lg text-[var(--zen-ink-muted)] hover:text-[var(--zen-ink-primary)] cursor-pointer shrink-0"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function useZenToast() {
+  const [toasts, setToasts] = useState<readonly ZenToastItem[]>([]);
+
+  const dismissToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+
+  const pushToast = useCallback(
+    (toast: Omit<ZenToastItem, 'id'>) => {
+      const id = `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+      setToasts((prev) => [...prev.slice(-3), { ...toast, id }]);
+      window.setTimeout(() => {
+        dismissToast(id);
+      }, 4200);
+    },
+    [dismissToast]
+  );
+
+  return {
+    toasts,
+    pushToast,
+    dismissToast,
+  };
+}