sh-ui-cli 0.52.0 → 0.52.2

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

@@ -1,145 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,258 +0,0 @@
-"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);
-}