sh-ui-cli 0.48.0 → 0.50.0

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

@@ -0,0 +1,95 @@
+import { style } from "@vanilla-extract/css";
+
+export const breadcrumb = style({
+  fontSize: "var(--text-sm)",
+  color: "var(--foreground-muted)",
+});
+
+export const breadcrumb__list = style({
+  display: "flex",
+  alignItems: "center",
+  flexWrap: "wrap",
+  gap: "0.375rem",
+  margin: 0,
+  padding: 0,
+  listStyle: "none",
+});
+
+export const breadcrumb__item = style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  minWidth: 0,
+});
+
+export const breadcrumb__link = style({
+  color: "var(--foreground-muted)",
+  textDecoration: "none",
+  borderRadius: "calc(var(--radius) - 2px)",
+  padding: "0 0.125rem",
+  transition: "color var(--duration-fast)",
+  selectors: {
+    "&:hover": {
+      color: "var(--foreground)",
+      textDecoration: "underline",
+      textUnderlineOffset: "3px",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+    },
+  },
+});
+
+export const breadcrumb__page = style({
+  color: "var(--foreground)",
+  fontWeight: "var(--weight-medium)",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+export const breadcrumb__separator = style({
+  display: "inline-flex",
+  alignItems: "center",
+  color: "var(--foreground-muted)",
+  opacity: 0.6,
+});
+
+export const breadcrumb__ellipsis = style({
+  display: "inline-flex",
+  alignItems: "center",
+  width: "1.5rem",
+  height: "1.5rem",
+  justifyContent: "center",
+  color: "var(--foreground-muted)",
+});
+
+export const breadcrumbEllipsisSr = style({
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0,
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "breadcrumb": breadcrumb,
+  "breadcrumb__list": breadcrumb__list,
+  "breadcrumb__item": breadcrumb__item,
+  "breadcrumb__link": breadcrumb__link,
+  "breadcrumb__page": breadcrumb__page,
+  "breadcrumb__separator": breadcrumb__separator,
+  "breadcrumb__ellipsis": breadcrumb__ellipsis,
+  "breadcrumb__ellipsis-sr": breadcrumbEllipsisSr,
+};

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
+import { button, sizes, variants } from "./styles.css";
+
+type Variant = "primary" | "secondary" | "ghost" | "danger" | "link";
+type Size = "sm" | "md" | "lg";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * 시각적 위계.
+   * - `primary` — 페이지의 주요 액션. 한 화면에 하나만 권장.
+   * - `secondary` — 보조 액션. 약한 배경 + border.
+   * - `ghost` — 배경 없는 hover 강조 액션. 툴바/메뉴 항목에 적합.
+   * - `danger` — 파괴적 액션(삭제, 취소 등).
+   * - `link` — 텍스트 링크처럼 보이는 인라인 버튼.
+   *
+   * @default "primary"
+   */
+  variant?: Variant;
+  /**
+   * 크기.
+   * - `sm` — 조밀한 영역(테이블 행, 툴바)
+   * - `md` — 일반
+   * - `lg` — CTA·랜딩 영역
+   *
+   * @default "md"
+   */
+  size?: Size;
+}
+
+/**
+ * 사용자 액션을 트리거하는 기본 버튼 (vanilla-extract 변종).
+ * variant로 시각적 위계(primary/secondary/ghost/danger/link)를,
+ * size로 크기를 결정한다. 페이지 이동 목적이면 anchor를 감싼 `link` variant를 사용할 것.
+ */
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "primary", size = "md", className, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(button, sizes[size], variants[variant], className)}
+      {...props}
+    />
+  ),
+);
+Button.displayName = "Button";

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

@@ -0,0 +1,120 @@
+import { style, styleVariants } from "@vanilla-extract/css";
+
+export const button = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "var(--space-2)",
+  border: "1px solid transparent",
+  borderRadius: "var(--radius)",
+  fontWeight: "var(--weight-medium)",
+  lineHeight: 1,
+  cursor: "pointer",
+  transition:
+    "background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform 80ms ease-out, filter 80ms",
+  userSelect: "none",
+  WebkitTapHighlightColor: "transparent",
+
+  selectors: {
+    "&:disabled": {
+      opacity: "var(--opacity-disabled)",
+      pointerEvents: "none",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&:active:not(:disabled)": {
+      transform: "scale(0.97)",
+      filter: "brightness(0.92)",
+      transitionDuration: "40ms",
+    },
+  },
+
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+    },
+  },
+});
+
+export const sizes = styleVariants({
+  sm: {
+    height: "var(--control-sm)",
+    padding: "0 var(--space-3)",
+    fontSize: "var(--text-sm)",
+    "@media": {
+      "(hover: none) and (pointer: coarse)": {
+        height: "2.25rem",
+      },
+    },
+  },
+  md: {
+    height: "var(--control-md)",
+    padding: "0 var(--space-4)",
+    fontSize: "var(--text-sm)",
+    "@media": {
+      "(hover: none) and (pointer: coarse)": {
+        height: "2.75rem",
+      },
+    },
+  },
+  lg: {
+    height: "var(--control-lg)",
+    padding: "0 var(--space-5)",
+    fontSize: "var(--text-base)",
+  },
+});
+
+export const variants = styleVariants({
+  primary: {
+    backgroundColor: "var(--primary)",
+    color: "var(--primary-foreground)",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "var(--primary-hover)",
+      },
+    },
+  },
+  secondary: {
+    backgroundColor: "var(--background-muted)",
+    color: "var(--foreground)",
+    borderColor: "var(--border)",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "var(--background-subtle)",
+      },
+    },
+  },
+  ghost: {
+    backgroundColor: "transparent",
+    color: "var(--foreground)",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "var(--background-muted)",
+      },
+    },
+  },
+  danger: {
+    backgroundColor: "var(--danger)",
+    color: "var(--danger-foreground)",
+  },
+  link: {
+    backgroundColor: "transparent",
+    color: "var(--foreground)",
+    borderColor: "transparent",
+    height: "auto",
+    padding: 0,
+    textUnderlineOffset: "3px",
+    selectors: {
+      "&:hover": {
+        textDecoration: "underline",
+      },
+      "&:active:not(:disabled)": {
+        transform: "none",
+        filter: "none",
+        color: "var(--foreground-muted)",
+      },
+    },
+  },
+});