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

package/src/lib/components/ZenDropdown.tsx

@@ -0,0 +1,208 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useId,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react';
+import { ChevronDown, Check } from 'lucide-react';
+
+export interface ZenDropdownOption<T extends string> {
+  readonly value: T;
+  readonly label: string;
+  readonly description?: string;
+  readonly icon?: ReactNode;
+  readonly disabled?: boolean;
+}
+
+export interface ZenDropdownProps<T extends string> {
+  readonly label?: string;
+  readonly options: readonly ZenDropdownOption<T>[];
+  readonly value: T;
+  readonly onChange: (nextValue: T) => void;
+  readonly ariaLabel?: string;
+  readonly align?: 'start' | 'end';
+  readonly className?: string;
+}
+
+export function ZenDropdown<T extends string>({
+  label,
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  align = 'start',
+  className = '',
+}: ZenDropdownProps<T>) {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number>(() =>
+    Math.max(
+      0,
+      options.findIndex((o) => o.value === value)
+    )
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const listboxId = useId();
+
+  const selectedOption =
+    options.find((o) => o.value === value) ?? options[0];
+
+  useEffect(() => {
+    const idx = options.findIndex((o) => o.value === value);
+    if (idx !== -1) {
+      setActiveIndex(idx);
+    }
+  }, [value, options]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDownOutside = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener('mousedown', handlePointerDownOutside);
+    return () =>
+      window.removeEventListener('mousedown', handlePointerDownOutside);
+  }, [open]);
+
+  const commitSelection = (nextValue: T) => {
+    onChange(nextValue);
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+    if (!open) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        setOpen(true);
+      }
+      return;
+    }
+
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      setOpen(false);
+      triggerRef.current?.focus();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIndex((prev) => (prev + 1) % options.length);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIndex((prev) => (prev - 1 + options.length) % options.length);
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      const candidate = options[activeIndex];
+      if (candidate && !candidate.disabled) {
+        commitSelection(candidate.value);
+      }
+    } else if (e.key === 'Tab') {
+      setOpen(false);
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      data-zen-occlude="true"
+      className={`relative flex flex-col gap-1.5 min-w-0 ${className}`.trim()}
+    >
+      {label && (
+        <span className="zen-telemetry-label text-[var(--zen-ink-secondary)]">
+          {label}
+        </span>
+      )}
+
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={listboxId}
+        aria-label={ariaLabel ?? label}
+        onClick={() => setOpen((prev) => !prev)}
+        onKeyDown={handleKeyDown}
+        className="zen-focus-ring flex items-center justify-between gap-3 px-3.5 py-2.5 rounded-xl bg-[var(--zen-surface-1)] border border-[var(--zen-border-default)] hover:border-[var(--zen-border-strong)] text-left text-xs sm:text-sm text-[var(--zen-ink-primary)] cursor-pointer transition-colors"
+      >
+        <span className="inline-flex items-center gap-2 truncate min-w-0">
+          {selectedOption?.icon && (
+            <span className="text-[var(--zen-accent-primary)] shrink-0">
+              {selectedOption.icon}
+            </span>
+          )}
+          <span className="zen-font-mono font-medium truncate">
+            {selectedOption?.label}
+          </span>
+        </span>
+        <ChevronDown
+          className={`w-4 h-4 text-[var(--zen-ink-muted)] shrink-0 transition-transform ${
+            open ? 'rotate-180 text-[var(--zen-accent-primary)]' : ''
+          }`}
+        />
+      </button>
+
+      {open && (
+        <ul
+          id={listboxId}
+          role="listbox"
+          aria-label={ariaLabel ?? label}
+          className={`absolute z-50 top-full mt-2 w-full max-w-[calc(100vw-2rem)] max-h-64 overflow-y-auto p-1.5 rounded-2xl bg-[var(--zen-bg-elevated)] border border-[var(--zen-border-strong)] shadow-[var(--zen-shadow-hud)] backdrop-blur-xl ${
+            align === 'end' ? 'right-0' : 'left-0'
+          }`}
+        >
+          {options.map((opt, idx) => {
+            const isSelected = opt.value === value;
+            const isFocused = idx === activeIndex;
+            return (
+              <li
+                key={opt.value}
+                role="option"
+                aria-selected={isSelected}
+                aria-disabled={opt.disabled}
+                onMouseEnter={() => setActiveIndex(idx)}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  if (!opt.disabled) {
+                    commitSelection(opt.value);
+                  }
+                }}
+                className={`flex items-center justify-between gap-3 px-3 py-2 rounded-xl cursor-pointer transition-colors ${
+                  isFocused
+                    ? 'bg-[var(--zen-accent-subtle)] text-[var(--zen-ink-primary)]'
+                    : 'text-[var(--zen-ink-secondary)]'
+                } ${opt.disabled ? 'opacity-40 cursor-not-allowed' : ''}`}
+              >
+                <div className="flex items-center gap-2.5 min-w-0">
+                  {opt.icon && (
+                    <span className="text-[var(--zen-accent-primary)] shrink-0">
+                      {opt.icon}
+                    </span>
+                  )}
+                  <div className="min-w-0">
+                    <div className="zen-font-mono text-xs font-medium truncate">
+                      {opt.label}
+                    </div>
+                    {opt.description && (
+                      <div className="text-[11px] text-[var(--zen-ink-muted)] truncate">
+                        {opt.description}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                {isSelected && (
+                  <Check className="w-3.5 h-3.5 text-[var(--zen-accent-primary)] shrink-0" />
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/lib/components/ZenFeedback.tsx

@@ -0,0 +1,137 @@
+import type { ReactNode } from 'react';
+import {
+  Info,
+  CheckCircle2,
+  AlertTriangle,
+  ShieldAlert,
+  Inbox,
+} from 'lucide-react';
+
+export type ZenAlertTone = 'info' | 'success' | 'warning' | 'danger';
+
+export interface ZenAlertProps {
+  readonly tone?: ZenAlertTone;
+  readonly title: string;
+  readonly children: ReactNode;
+  readonly actionSlot?: ReactNode;
+  readonly className?: string;
+}
+
+const ALERT_STYLES: Record<
+  ZenAlertTone,
+  { readonly border: string; readonly icon: ReactNode }
+> = {
+  info: {
+    border: 'border-[var(--zen-status-info)]/50 bg-[var(--zen-status-info)]/10',
+    icon: <Info className="w-4 h-4 text-[var(--zen-status-info)] shrink-0" />,
+  },
+  success: {
+    border:
+      'border-[var(--zen-status-success)]/50 bg-[var(--zen-status-success)]/10',
+    icon: (
+      <CheckCircle2 className="w-4 h-4 text-[var(--zen-status-success)] shrink-0" />
+    ),
+  },
+  warning: {
+    border:
+      'border-[var(--zen-status-warning)]/50 bg-[var(--zen-status-warning)]/10',
+    icon: (
+      <AlertTriangle className="w-4 h-4 text-[var(--zen-status-warning)] shrink-0" />
+    ),
+  },
+  danger: {
+    border:
+      'border-[var(--zen-status-danger)]/50 bg-[var(--zen-status-danger)]/10',
+    icon: (
+      <ShieldAlert className="w-4 h-4 text-[var(--zen-status-danger)] shrink-0" />
+    ),
+  },
+};
+
+export function ZenAlert({
+  tone = 'info',
+  title,
+  children,
+  actionSlot,
+  className = '',
+}: ZenAlertProps) {
+  const cfg = ALERT_STYLES[tone];
+  return (
+    <div
+      role={tone === 'danger' || tone === 'warning' ? 'alert' : 'status'}
+      data-zen-occlude="true"
+      className={`p-4 rounded-2xl border flex flex-col sm:flex-row sm:items-center justify-between gap-4 ${cfg.border} ${className}`.trim()}
+    >
+      <div className="flex items-start gap-3">
+        <div className="mt-0.5">{cfg.icon}</div>
+        <div>
+          <div className="zen-font-mono text-xs font-bold text-[var(--zen-ink-primary)]">
+            {title}
+          </div>
+          <div className="text-xs sm:text-sm text-[var(--zen-ink-secondary)] mt-0.5">
+            {children}
+          </div>
+        </div>
+      </div>
+      {actionSlot && <div className="shrink-0">{actionSlot}</div>}
+    </div>
+  );
+}
+
+export interface ZenSkeletonProps {
+  readonly lines?: number;
+  readonly className?: string;
+}
+
+export function ZenSkeleton({ lines = 3, className = '' }: ZenSkeletonProps) {
+  return (
+    <div
+      role="status"
+      aria-busy="true"
+      aria-label="Loading content"
+      className={`space-y-2.5 ${className}`.trim()}
+    >
+      {Array.from({ length: lines }).map((_, idx) => (
+        <div
+          key={idx}
+          style={{ width: idx === lines - 1 ? '65%' : '100%' }}
+          className="h-3.5 rounded-lg bg-[var(--zen-surface-subtle-hover)] animate-pulse"
+        />
+      ))}
+    </div>
+  );
+}
+
+export interface ZenEmptyStateProps {
+  readonly title: string;
+  readonly description: string;
+  readonly icon?: ReactNode;
+  readonly actionSlot?: ReactNode;
+  readonly className?: string;
+}
+
+export function ZenEmptyState({
+  title,
+  description,
+  icon,
+  actionSlot,
+  className = '',
+}: ZenEmptyStateProps) {
+  return (
+    <div
+      data-zen-occlude="true"
+      className={`p-8 rounded-3xl border border-dashed border-[var(--zen-border-strong)] bg-[var(--zen-surface-subtle)] text-center flex flex-col items-center justify-center gap-3 ${className}`.trim()}
+    >
+      <div className="p-3 rounded-2xl bg-[var(--zen-accent-subtle)] text-[var(--zen-accent-primary)]">
+        {icon ?? <Inbox className="w-6 h-6" />}
+      </div>
+      <div className="zen-font-display text-lg font-bold text-[var(--zen-ink-primary)]">
+        {title}
+      </div>
+      <p className="text-xs sm:text-sm text-[var(--zen-ink-secondary)] max-w-md">
+        {description}
+      </p>
+      {actionSlot && <div className="mt-1">{actionSlot}</div>}
+    </div>
+  );
+}