sh-ui-cli 0.45.3 → 0.47.0

package/data/registry/react/components/button/index.module.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
+import styles from "./styles.module.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;
+}
+
+/**
+ * 사용자 액션을 트리거하는 기본 버튼 (CSS Modules 변종).
+ * 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(styles.button, styles[variant], styles[size], className)}
+      {...props}
+    />
+  ),
+);
+Button.displayName = "Button";

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

@@ -0,0 +1,92 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  font-weight: var(--weight-medium);
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast),
+    transform 80ms ease-out, filter 80ms;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.button:disabled {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.button:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.button:active:not(:disabled) {
+  transform: scale(0.97);
+  filter: brightness(0.92);
+  transition-duration: 40ms;
+}
+
+/* sizes */
+.sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
+.md { height: var(--control-md); padding: 0 var(--space-4); font-size: var(--text-sm); }
+.lg { height: var(--control-lg); padding: 0 var(--space-5); font-size: var(--text-base); }
+
+/* 모바일/터치 디바이스: 최소 탭 영역 보장 */
+@media (hover: none) and (pointer: coarse) {
+  .sm { height: 2.25rem; }
+  .md { height: 2.75rem; }
+}
+
+/* variants */
+.primary {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.primary:hover { background-color: var(--primary-hover); }
+
+.secondary {
+  background-color: var(--background-muted);
+  color: var(--foreground);
+  border-color: var(--border);
+}
+.secondary:hover { background-color: var(--background-subtle); }
+
+.ghost {
+  background-color: transparent;
+  color: var(--foreground);
+}
+.ghost:hover { background-color: var(--background-muted); }
+
+.danger {
+  background-color: var(--danger);
+  color: var(--danger-foreground);
+}
+
+.link {
+  background-color: transparent;
+  color: var(--foreground);
+  border-color: transparent;
+  height: auto;
+  padding: 0;
+  text-underline-offset: 3px;
+}
+.link:hover { text-decoration: underline; }
+.link:active:not(:disabled) {
+  transform: none;
+  filter: none;
+  color: var(--foreground-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none;
+  }
+  .button:active:not(:disabled) {
+    transform: none;
+    filter: none;
+  }
+}