sh-ui-cli 0.15.0 → 0.21.0

package/data/registry/react/components/tabs/styles.css

@@ -0,0 +1,148 @@
+.sh-ui-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: 100%;
+}
+
+.sh-ui-tabs[data-orientation="vertical"] {
+  flex-direction: row;
+}
+
+.sh-ui-tabs__list {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  width: fit-content;
+}
+
+.sh-ui-tabs[data-orientation="vertical"] > .sh-ui-tabs__list {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.sh-ui-tabs__trigger {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: var(--space-2) var(--space-3);
+  background: transparent;
+  color: var(--foreground-muted, var(--foreground));
+  border: 0;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  line-height: 1;
+  cursor: pointer;
+  transition: color var(--duration-fast), background-color var(--duration-fast);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  white-space: nowrap;
+}
+
+.sh-ui-tabs__trigger:hover:not(:disabled):not([data-selected]) {
+  color: var(--foreground);
+}
+
+.sh-ui-tabs__trigger:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.sh-ui-tabs__trigger[data-selected] {
+  color: var(--foreground);
+}
+
+.sh-ui-tabs__trigger:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+.sh-ui-tabs__indicator {
+  position: absolute;
+  transition: top 180ms, left 180ms, width 180ms, height 180ms;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.sh-ui-tabs__indicator[data-activation-direction="none"] {
+  transition: none;
+}
+
+.sh-ui-tabs__content {
+  outline: none;
+}
+
+.sh-ui-tabs__content:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+  border-radius: var(--radius);
+}
+
+/* ─────────────── variant: underline (기본) ─────────────── */
+.sh-ui-tabs[data-variant="underline"] > .sh-ui-tabs__list {
+  width: 100%;
+  gap: 0;
+  box-shadow: inset 0 -1px 0 var(--border);
+}
+
+.sh-ui-tabs[data-variant="underline"] .sh-ui-tabs__trigger {
+  padding: 0.625rem var(--space-4);
+}
+
+.sh-ui-tabs[data-variant="underline"] .sh-ui-tabs__indicator {
+  top: var(--active-tab-top);
+  left: var(--active-tab-left);
+  width: var(--active-tab-width);
+  height: var(--active-tab-height);
+  box-shadow: inset 0 -2px 0 var(--foreground);
+}
+
+.sh-ui-tabs[data-variant="underline"][data-orientation="vertical"] > .sh-ui-tabs__list {
+  width: auto;
+  box-shadow: inset -1px 0 0 var(--border);
+}
+
+.sh-ui-tabs[data-variant="underline"][data-orientation="vertical"] .sh-ui-tabs__indicator {
+  box-shadow: inset -2px 0 0 var(--foreground);
+}
+
+/* ─────────────── variant: pill (세그먼트) ─────────────── */
+.sh-ui-tabs[data-variant="pill"] > .sh-ui-tabs__list {
+  padding: var(--space-1);
+  background: var(--background-muted, var(--background));
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.sh-ui-tabs[data-variant="pill"] .sh-ui-tabs__trigger {
+  padding: 0.375rem var(--space-3);
+  border-radius: calc(var(--radius) - 2px);
+}
+
+.sh-ui-tabs[data-variant="pill"] .sh-ui-tabs__indicator {
+  top: var(--active-tab-top);
+  left: var(--active-tab-left);
+  width: var(--active-tab-width);
+  height: var(--active-tab-height);
+  background: var(--background);
+  border-radius: calc(var(--radius) - 2px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+/* ─────────────── variant: plain (컨테이너 없음) ─────────────── */
+.sh-ui-tabs[data-variant="plain"] .sh-ui-tabs__trigger {
+  padding: 0.375rem var(--space-2);
+  border-radius: calc(var(--radius) - 2px);
+}
+
+.sh-ui-tabs[data-variant="plain"] .sh-ui-tabs__trigger[data-selected] {
+  background: var(--background-muted, transparent);
+}
+
+.sh-ui-tabs[data-variant="plain"] .sh-ui-tabs__indicator {
+  display: none;
+}

package/data/registry/react/components/textarea/index.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import "./styles.css";
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/**
+ * 여러 줄 텍스트 입력. 네이티브 `<textarea>` 위에 sh-ui 토큰 스타일만 입혔다.
+ * 라벨/오류 메시지는 외부에서 조립한다 — 단독 사용 시 `<Label>`과 `aria-describedby` 연결 권장.
+ */
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        ref={ref}
+        className={cx("sh-ui-textarea", className)}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";

package/data/registry/react/components/textarea/styles.css

@@ -0,0 +1,54 @@
+.sh-ui-textarea {
+  display: block;
+  width: 100%;
+  min-height: 5rem;
+  padding: var(--space-2) var(--space-3);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  resize: vertical;
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .sh-ui-textarea {
+    font-size: var(--text-base);
+  }
+}
+
+.sh-ui-textarea::placeholder {
+  color: var(--foreground-subtle);
+}
+
+.sh-ui-textarea:hover:not(:disabled):not(:focus) {
+  border-color: var(--border-strong);
+}
+
+.sh-ui-textarea:focus {
+  outline: none;
+  border-color: var(--foreground);
+  box-shadow: 0 0 0 1px var(--foreground);
+}
+
+.sh-ui-textarea:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  background: var(--background-subtle);
+}
+
+.sh-ui-textarea:read-only {
+  background: var(--background-subtle);
+}
+
+/* 에러 상태 — aria-invalid="true" 기반 */
+.sh-ui-textarea[aria-invalid="true"] {
+  border-color: var(--danger);
+}
+.sh-ui-textarea[aria-invalid="true"]:focus {
+  box-shadow: 0 0 0 1px var(--danger);
+}

package/data/registry/react/components/theme/index.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import * as React from "react";
+
+type Theme = "light" | "dark";
+
+const THEME_COOKIE_NAME = "sh-ui-theme";
+const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+
+/* ───────────── Context ───────────── */
+
+type ThemeContextValue = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+};
+
+const ThemeContext = React.createContext<ThemeContextValue | null>(null);
+
+/** 현재 테마와 setter를 반환한다. ThemeProvider 안에서만 호출 가능. */
+export function useTheme() {
+  const ctx = React.useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within a ThemeProvider.");
+  return ctx;
+}
+
+/* ───────────── Provider ───────────── */
+
+export interface ThemeProviderProps {
+  /**
+   * SSR 시 쿠키에서 읽은 초기 테마. 클라이언트 첫 렌더와 SSR 마크업이 일치하도록
+   * 서버에서 쿠키를 읽어 주입해야 hydration mismatch가 없다.
+   *
+   * @default "light"
+   * @example
+   * // Next.js App Router
+   * const t = (await cookies()).get("sh-ui-theme")?.value;
+   * <ThemeProvider defaultTheme={t === "dark" ? "dark" : "light"}>
+   */
+  defaultTheme?: Theme;
+  /**
+   * 외부에서 테마를 제어할 때 사용. 지정하면 내부 state 대신 이 값이 우선한다.
+   * 보통 `defaultTheme` 비제어 모드로 충분.
+   */
+  theme?: Theme;
+  /** 테마 변경 콜백. 제어 모드에서는 이 콜백 안에서 외부 상태를 업데이트해야 한다. */
+  onThemeChange?: (theme: Theme) => void;
+  children: React.ReactNode;
+}
+
+/**
+ * 다크/라이트 테마 컨텍스트와 `<html class="dark">` 토글, 쿠키 영속화를 담당하는 Provider.
+ * SSR 하이드레이션 시프트를 피하려면 서버에서 쿠키를 읽어 `defaultTheme`로 주입할 것.
+ */
+export function ThemeProvider({
+  defaultTheme = "light",
+  theme: themeProp,
+  onThemeChange,
+  children,
+}: ThemeProviderProps) {
+  const [_theme, _setTheme] = React.useState<Theme>(defaultTheme);
+  const theme = themeProp ?? _theme;
+
+  const setTheme = React.useCallback(
+    (next: Theme) => {
+      if (onThemeChange) onThemeChange(next);
+      else _setTheme(next);
+
+      if (typeof document !== "undefined") {
+        document.documentElement.classList.toggle("dark", next === "dark");
+        document.cookie = `${THEME_COOKIE_NAME}=${next}; path=/; max-age=${THEME_COOKIE_MAX_AGE}`;
+      }
+    },
+    [onThemeChange],
+  );
+
+  const toggleTheme = React.useCallback(() => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  }, [theme, setTheme]);
+
+  const value = React.useMemo<ThemeContextValue>(
+    () => ({ theme, setTheme, toggleTheme }),
+    [theme, setTheme, toggleTheme],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}

package/data/registry/react/components/toast/index.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import "./styles.css";
+
+/* ───────── Types ───────── */
+
+type ToastVariant = "default" | "success" | "danger" | "warning";
+
+interface ToastItem {
+  id: string;
+  /** 짧은 제목. 한 줄 굵게 표시. */
+  title?: React.ReactNode;
+  /** 본문 설명. 줄바꿈 가능. */
+  description?: React.ReactNode;
+  variant: ToastVariant;
+  duration: number;
+  /** 우측에 표시될 액션 노드(예: "다시 시도" 버튼). */
+  action?: React.ReactNode;
+}
+
+type ToastInput = Omit<ToastItem, "id" | "variant" | "duration"> & {
+  /**
+   * 토스트 종류.
+   * - `default` — 정보성 알림
+   * - `success` — 성공
+   * - `warning` — 주의
+   * - `danger` — 오류 (스크린리더에 즉시 읽힘)
+   *
+   * @default "default"
+   */
+  variant?: ToastVariant;
+  /**
+   * 자동 닫힘 시간(ms). `0` 이하면 자동 닫힘 비활성.
+   * @default 4000
+   */
+  duration?: number;
+};
+
+/* ───────── Store (외부 상태) ───────── */
+
+type Listener = () => void;
+
+let toasts: ToastItem[] = [];
+const listeners = new Set<Listener>();
+
+const notify = () => listeners.forEach((l) => l());
+
+let counter = 0;
+const genId = () => `sh-toast-${++counter}`;
+
+function addToast(input: ToastInput): string {
+  const id = genId();
+  toasts = [
+    ...toasts,
+    {
+      id,
+      variant: input.variant ?? "default",
+      duration: input.duration ?? 4000,
+      title: input.title,
+      description: input.description,
+      action: input.action,
+    },
+  ];
+  notify();
+  return id;
+}
+
+function removeToast(id: string) {
+  toasts = toasts.filter((t) => t.id !== id);
+  notify();
+}
+
+function useToastStore() {
+  return React.useSyncExternalStore(
+    (cb) => {
+      listeners.add(cb);
+      return () => listeners.delete(cb);
+    },
+    () => toasts,
+    () => toasts,
+  );
+}
+
+/* ───────── Public API ───────── */
+
+/**
+ * 토스트 알림을 발생시키는 명령형 API. 문자열만 전달하면 description으로 사용된다.
+ * variant별 헬퍼(`toast.success` 등)와 `toast.dismiss(id)`도 함께 노출된다.
+ * 사용 전에 앱 어딘가에 `<Toaster />`가 마운트되어 있어야 화면에 보인다.
+ *
+ * @param input - 문자열(빠른 알림) 또는 `{ title, description, variant, duration, action }`.
+ * @returns 생성된 토스트 id. `toast.dismiss(id)`로 수동 닫을 때 사용.
+ * @example
+ * toast.success("저장 완료");
+ * toast({ title: "오류", description: e.message, variant: "danger" });
+ */
+export function toast(input: ToastInput | string): string {
+  if (typeof input === "string") return addToast({ description: input });
+  return addToast(input);
+}
+
+toast.success = (input: ToastInput | string) =>
+  toast(typeof input === "string" ? { description: input, variant: "success" } : { ...input, variant: "success" });
+
+toast.danger = (input: ToastInput | string) =>
+  toast(typeof input === "string" ? { description: input, variant: "danger" } : { ...input, variant: "danger" });
+
+toast.warning = (input: ToastInput | string) =>
+  toast(typeof input === "string" ? { description: input, variant: "warning" } : { ...input, variant: "warning" });
+
+toast.dismiss = removeToast;
+
+/* ───────── Icons ───────── */
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden>
+      <circle cx="8" cy="8" r="7.25" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M5 8.5 7 10.5 11 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function AlertIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden>
+      <circle cx="8" cy="8" r="7.25" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M8 5v3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      <circle cx="8" cy="11" r="0.75" fill="currentColor" />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden>
+      <circle cx="8" cy="8" r="7.25" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M6 6l4 4M10 6l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+const VARIANT_ICON: Record<ToastVariant, React.ReactNode> = {
+  default: null,
+  success: <CheckIcon />,
+  danger: <XIcon />,
+  warning: <AlertIcon />,
+};
+
+/* ───────── Single Toast ───────── */
+
+function ToastCard({ item, onDismiss }: { item: ToastItem; onDismiss: () => void }) {
+  const [exiting, setExiting] = React.useState(false);
+
+  React.useEffect(() => {
+    if (item.duration <= 0) return;
+    const timer = setTimeout(() => setExiting(true), item.duration);
+    return () => clearTimeout(timer);
+  }, [item.duration]);
+
+  const handleAnimationEnd = () => {
+    if (exiting) onDismiss();
+  };
+
+  const icon = VARIANT_ICON[item.variant];
+
+  return (
+    <div
+      className={`sh-ui-toast sh-ui-toast--${item.variant}`}
+      role={item.variant === "danger" ? "alert" : "status"}
+      aria-live={item.variant === "danger" ? "assertive" : "polite"}
+      data-exiting={exiting || undefined}
+      onAnimationEnd={handleAnimationEnd}
+    >
+      {icon && <span className="sh-ui-toast__icon">{icon}</span>}
+      <div className="sh-ui-toast__body">
+        {item.title && <p className="sh-ui-toast__title">{item.title}</p>}
+        {item.description && <p className="sh-ui-toast__description">{item.description}</p>}
+      </div>
+      {item.action && <div className="sh-ui-toast__action">{item.action}</div>}
+      <button
+        type="button"
+        className="sh-ui-toast__close"
+        onClick={() => setExiting(true)}
+        aria-label="닫기"
+      >
+        ×
+      </button>
+    </div>
+  );
+}
+
+/* ───────── Toaster (Provider) ───────── */
+
+export type ToastPosition =
+  | "top-left"
+  | "top-right"
+  | "top-center"
+  | "bottom-left"
+  | "bottom-right"
+  | "bottom-center";
+
+export interface ToasterProps {
+  /**
+   * 토스트 표시 위치.
+   * `top-*` 위치는 새 토스트가 위에 쌓이고, `bottom-*` 위치는 아래에 쌓인다.
+   *
+   * @default "bottom-right"
+   */
+  position?: ToastPosition;
+  /**
+   * Portal이 마운트될 DOM 노드.
+   * @default document.body
+   */
+  container?: Element | null;
+}
+
+/**
+ * `toast()`로 발생한 알림을 그리는 viewport. 앱 루트에 한 번만 마운트한다.
+ * `danger` variant는 `role="alert"`+`aria-live="assertive"`로 즉시 읽히고, 그 외는 `polite`로 큐잉된다.
+ */
+export function Toaster({ position = "bottom-right", container }: ToasterProps) {
+  const items = useToastStore();
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => setMounted(true), []);
+
+  if (!mounted || items.length === 0) return null;
+
+  const isBottom = position.startsWith("bottom");
+
+  const el = (
+    <div
+      className="sh-ui-toast-viewport"
+      data-position={position}
+      aria-label="알림"
+    >
+      {isBottom ? items.map((item) => (
+        <ToastCard
+          key={item.id}
+          item={item}
+          onDismiss={() => removeToast(item.id)}
+        />
+      )) : [...items].reverse().map((item) => (
+        <ToastCard
+          key={item.id}
+          item={item}
+          onDismiss={() => removeToast(item.id)}
+        />
+      ))}
+    </div>
+  );
+
+  return createPortal(el, container ?? document.body);
+}