sh-ui-cli 0.49.0 → 0.50.0

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

@@ -0,0 +1,145 @@
+import { style } from "@vanilla-extract/css";
+
+export const tabs = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--space-3)",
+  width: "100%",
+  selectors: {
+    "&[data-orientation="vertical"]": {
+      flexDirection: "row",
+    },
+    [`&[data-orientation="vertical"] > ${tabs__list}`]: {
+      flexDirection: "column",
+      alignItems: "stretch",
+    },
+    [`&[data-variant="underline"] > ${tabs__list}`]: {
+      width: "100%",
+      gap: 0,
+      boxShadow: "inset 0 -1px 0 var(--border)",
+    },
+    [`&[data-variant="underline"] ${tabs__trigger}`]: {
+      padding: "0.625rem var(--space-4)",
+    },
+    [`&[data-variant="underline"] ${tabs__indicator}`]: {
+      top: "var(--active-tab-top)",
+      left: "var(--active-tab-left)",
+      width: "var(--active-tab-width)",
+      height: "var(--active-tab-height)",
+      boxShadow: "inset 0 -2px 0 var(--foreground)",
+    },
+    [`&[data-variant="underline"][data-orientation="vertical"] > ${tabs__list}`]: {
+      width: "auto",
+      boxShadow: "inset -1px 0 0 var(--border)",
+    },
+    [`&[data-variant="underline"][data-orientation="vertical"] ${tabs__indicator}`]: {
+      boxShadow: "inset -2px 0 0 var(--foreground)",
+    },
+    [`&[data-variant="pill"] > ${tabs__list}`]: {
+      padding: "var(--space-1)",
+      background: "var(--background-muted, var(--background))",
+      border: "1px solid var(--border)",
+      borderRadius: "var(--radius)",
+    },
+    [`&[data-variant="pill"] ${tabs__trigger}`]: {
+      padding: "0.375rem var(--space-3)",
+      borderRadius: "calc(var(--radius) - 2px)",
+    },
+    [`&[data-variant="pill"] ${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)",
+      borderRadius: "calc(var(--radius) - 2px)",
+      boxShadow: "0 1px 2px rgba(0, 0, 0, 0.06)",
+    },
+    [`&[data-variant="plain"] ${tabs__trigger}`]: {
+      padding: "0.375rem var(--space-2)",
+      borderRadius: "calc(var(--radius) - 2px)",
+    },
+    [`&[data-variant="plain"] ${tabs__trigger}[data-selected]`]: {
+      background: "var(--background-muted, transparent)",
+    },
+    [`&[data-variant="plain"] ${tabs__indicator}`]: {
+      display: "none",
+    },
+  },
+});
+
+export const tabs__list = style({
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "var(--space-1)",
+  width: "fit-content",
+});
+
+export const tabs__trigger = style({
+  position: "relative",
+  zIndex: 1,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "0.375rem",
+  padding: "var(--space-2) var(--space-3)",
+  background: "transparent",
+  color: "var(--foreground-muted, var(--foreground))",
+  border: 0,
+  fontSize: "var(--text-sm)",
+  fontWeight: "var(--weight-medium)",
+  lineHeight: 1,
+  cursor: "pointer",
+  transition: "color var(--duration-fast), background-color var(--duration-fast)",
+  userSelect: "none",
+  WebkitTapHighlightColor: "transparent",
+  whiteSpace: "nowrap",
+  selectors: {
+    "&:hover:not(:disabled):not([data-selected])": {
+      color: "var(--foreground)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&[data-selected]": {
+      color: "var(--foreground)",
+    },
+    "&:disabled": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+    },
+  },
+});
+
+export const tabs__indicator = style({
+  position: "absolute",
+  transition: "top 180ms, left 180ms, width 180ms, height 180ms",
+  zIndex: 0,
+  pointerEvents: "none",
+  selectors: {
+    "&[data-activation-direction="none"]": {
+      transition: "none",
+    },
+  },
+});
+
+export const tabs__content = style({
+  outline: "none",
+  selectors: {
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+      borderRadius: "var(--radius)",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "tabs": tabs,
+  "tabs__list": tabs__list,
+  "tabs__trigger": tabs__trigger,
+  "tabs__indicator": tabs__indicator,
+  "tabs__content": tabs__content,
+};

package/data/registry/react/components/textarea/index.vanilla-extract.tsx

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

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

@@ -0,0 +1,55 @@
+import { style } from "@vanilla-extract/css";
+
+export const textarea = style({
+  display: "block",
+  width: "100%",
+  minHeight: "5rem",
+  padding: "var(--space-2) var(--space-3)",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  fontFamily: "inherit",
+  fontSize: "var(--text-sm)",
+  lineHeight: 1.5,
+  resize: "vertical",
+  transition: "border-color var(--duration-fast), box-shadow var(--duration-fast)",
+  WebkitTapHighlightColor: "transparent",
+  selectors: {
+    "&::placeholder": {
+      color: "var(--foreground-subtle)",
+    },
+    "&:hover:not(:disabled):not(:focus)": {
+      borderColor: "var(--border-strong)",
+    },
+    "&:focus": {
+      outline: "none",
+      borderColor: "var(--foreground)",
+      boxShadow: "0 0 0 1px var(--foreground)",
+    },
+    "&:disabled": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+      background: "var(--background-subtle)",
+    },
+    "&:read-only": {
+      background: "var(--background-subtle)",
+    },
+    "&[aria-invalid="true"]": {
+      borderColor: "var(--danger)",
+    },
+    "&[aria-invalid="true"]:focus": {
+      boxShadow: "0 0 0 1px var(--danger)",
+    },
+  },
+  "@media": {
+    "(hover: none) and (pointer: coarse)": {
+      fontSize: "var(--text-base)",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "textarea": textarea,
+};

package/data/registry/react/components/toast/index.vanilla-extract.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@SH_UI_UTILS@";
+import { byKey, toastViewport, toast, toast__icon, toastSuccess, toastDanger, toastWarning, toast__body, toast__title, toast__description, toast__action, toast__close } from "./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={cn(toast, byKey[`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={toast__icon}>{icon}</span>}
+      <div className={toast__body}>
+        {item.title && <p className={toast__title}>{item.title}</p>}
+        {item.description && <p className={toast__description}>{item.description}</p>}
+      </div>
+      {item.action && <div className={toast__action}>{item.action}</div>}
+      <button
+        type="button"
+        className={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={toastViewport}
+      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);
+}