sh-ui-cli 0.14.0 → 0.21.0

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

@@ -0,0 +1,82 @@
+.sh-ui-breadcrumb {
+  font-size: var(--text-sm);
+  color: var(--foreground-muted);
+}
+
+.sh-ui-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sh-ui-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.sh-ui-breadcrumb__link {
+  color: var(--foreground-muted);
+  text-decoration: none;
+  border-radius: calc(var(--radius) - 2px);
+  padding: 0 0.125rem;
+  transition: color var(--duration-fast);
+}
+
+.sh-ui-breadcrumb__link:hover {
+  color: var(--foreground);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.sh-ui-breadcrumb__link:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.sh-ui-breadcrumb__page {
+  color: var(--foreground);
+  font-weight: var(--weight-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sh-ui-breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--foreground-muted);
+  opacity: 0.6;
+}
+
+.sh-ui-breadcrumb__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  justify-content: center;
+  color: var(--foreground-muted);
+}
+
+.sh-ui-breadcrumb__ellipsis-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-breadcrumb__link {
+    transition: none;
+  }
+}

package/data/registry/react/components/breakpoints/breakpoints.css

@@ -0,0 +1,17 @@
+/* sh-ui breakpoints — 참조용 토큰 + @media 사용 가이드
+ *
+ * CSS @media 쿼리는 var()를 받지 못한다. 따라서 변수는 "문서/계산용"이고,
+ * 실제 미디어 쿼리에는 동일한 값을 직접 적는다.
+ *
+ *   @media (max-width: 40rem)  { ... }   // sm 이하 (모바일)
+ *   @media (min-width: 48rem)  { ... }   // md 이상 (태블릿+)
+ *   @media (min-width: 64rem)  { ... }   // lg 이상 (데스크탑)
+ *   @media (min-width: 80rem)  { ... }   // xl 이상
+ */
+
+:root {
+  --bp-sm: 40rem;   /* 640px  — 모바일 경계 */
+  --bp-md: 48rem;   /* 768px  — 태블릿 경계 */
+  --bp-lg: 64rem;   /* 1024px — 데스크탑 경계 */
+  --bp-xl: 80rem;   /* 1280px — 와이드 경계 */
+}

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import "./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;
+}
+
+/**
+ * 사용자 액션을 트리거하는 기본 버튼. variant로 시각적 위계(primary/secondary/ghost/danger/link)를,
+ * size로 크기를 결정한다. 페이지 이동 목적이면 anchor를 감싼 `link` variant를 사용할 것.
+ */
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "primary", size = "md", className, ...props }, ref) => {
+    const classes = [
+      "sh-ui-button",
+      `sh-ui-button--${variant}`,
+      `sh-ui-button--${size}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+    return <button ref={ref} className={classes} {...props} />;
+  },
+);
+Button.displayName = "Button";

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

@@ -0,0 +1,93 @@
+.sh-ui-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;
+}
+
+.sh-ui-button:disabled {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.sh-ui-button:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.sh-ui-button:active:not(:disabled) {
+  transform: scale(0.97);
+  filter: brightness(0.92);
+  transition-duration: 40ms;
+}
+
+/* sizes */
+.sh-ui-button--sm { height: var(--control-sm);    padding: 0 var(--space-3); font-size: var(--text-sm); }
+.sh-ui-button--md { height: var(--control-md);  padding: 0 var(--space-4);    font-size: var(--text-sm); }
+.sh-ui-button--lg { height: var(--control-lg);    padding: 0 var(--space-5); font-size: var(--text-base); }
+
+/* 모바일/터치 디바이스: 최소 탭 영역 보장 */
+@media (hover: none) and (pointer: coarse) {
+  .sh-ui-button--sm { height: 2.25rem; }
+  .sh-ui-button--md { height: 2.75rem; }
+}
+
+/* variants */
+.sh-ui-button--primary {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.sh-ui-button--primary:hover { background-color: var(--primary-hover); }
+
+.sh-ui-button--secondary {
+  background-color: var(--background-muted);
+  color: var(--foreground);
+  border-color: var(--border);
+}
+.sh-ui-button--secondary:hover { background-color: var(--background-subtle); }
+
+.sh-ui-button--ghost {
+  background-color: transparent;
+  color: var(--foreground);
+}
+.sh-ui-button--ghost:hover { background-color: var(--background-muted); }
+
+.sh-ui-button--danger {
+  background-color: var(--danger);
+  color: var(--danger-foreground);
+}
+
+/* link — 배경/테두리 없이 밑줄. size는 font-size만 유지, height/padding 제거 */
+.sh-ui-button--link {
+  background-color: transparent;
+  color: var(--foreground);
+  border-color: transparent;
+  height: auto;
+  padding: 0;
+  text-underline-offset: 3px;
+}
+.sh-ui-button--link:hover { text-decoration: underline; }
+.sh-ui-button--link:active:not(:disabled) {
+  transform: none;
+  filter: none;
+  color: var(--foreground-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-button {
+    transition: none;
+  }
+  .sh-ui-button:active:not(:disabled) {
+    transform: none;
+    filter: none;
+  }
+}

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

@@ -0,0 +1,86 @@
+import * as React from "react";
+import "./styles.css";
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+
+function mergeClass(base: string, extra?: string) {
+  return extra ? `${base} ${extra}` : base;
+}
+
+export const Card = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={mergeClass("sh-ui-card", className)} {...props} />
+  ),
+);
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-header"
+      className={mergeClass("sh-ui-card__header", className)}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass("sh-ui-card__title", className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass("sh-ui-card__description", className)}
+      {...props}
+    />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+/**
+ * 헤더 우측에 배치되는 슬롯. CardHeader 내부에서 grid 2번째 컬럼을 차지.
+ * CardHeader가 `:has(.sh-ui-card__action)`으로 감지해 레이아웃을 전환한다.
+ */
+export const CardAction = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass("sh-ui-card__action", className)}
+      {...props}
+    />
+  ),
+);
+CardAction.displayName = "CardAction";
+
+export const CardContent = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass("sh-ui-card__content", className)}
+      {...props}
+    />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass("sh-ui-card__footer", className)}
+      {...props}
+    />
+  ),
+);
+CardFooter.displayName = "CardFooter";

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

@@ -0,0 +1,73 @@
+.sh-ui-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  padding: var(--space-6) 0;
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+/* 헤더: 기본은 타이틀/설명 세로 스택. action 있으면 2열 그리드로 전환. */
+.sh-ui-card__header {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: auto;
+  row-gap: 0.375rem;
+  padding: 0 var(--space-6);
+}
+
+.sh-ui-card__header:has(.sh-ui-card__action) {
+  grid-template-columns: 1fr auto;
+}
+
+.sh-ui-card__title {
+  font-size: var(--text-base);
+  font-weight: var(--weight-semibold);
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+.sh-ui-card__description {
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  color: var(--foreground-muted);
+}
+
+.sh-ui-card__action {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  align-self: start;
+  justify-self: end;
+}
+
+.sh-ui-card__content {
+  padding: 0 var(--space-6);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+}
+
+.sh-ui-card__footer {
+  padding: 0 var(--space-6);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* 모바일: 패딩 축소 */
+@media (max-width: 640px) {
+  .sh-ui-card {
+    gap: var(--space-4);
+    padding: var(--space-4) 0;
+  }
+  .sh-ui-card__header,
+  .sh-ui-card__content,
+  .sh-ui-card__footer {
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+  }
+  .sh-ui-card__footer {
+    flex-wrap: wrap;
+  }
+}