sh-ui-cli 0.15.0 → 0.21.1

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

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { Accordion as BaseAccordion } from "@base-ui-components/react/accordion";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+export const Accordion = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAccordion.Root>>
+>(({ className, ...props }, ref) => (
+  <BaseAccordion.Root
+    ref={ref}
+    className={cx("sh-ui-accordion", className)}
+    {...props}
+  />
+));
+Accordion.displayName = "Accordion";
+
+export const AccordionItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAccordion.Item>>
+>(({ className, ...props }, ref) => (
+  <BaseAccordion.Item
+    ref={ref}
+    className={cx("sh-ui-accordion__item", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+/**
+ * Trigger: 헤더 버튼. 우측에 chevron이 자동으로 붙고 expanded 상태에서 회전한다.
+ * Base UI의 AccordionHeader(h3)로 감싸 의미론적 헤더 구조를 유지한다.
+ */
+export const AccordionTrigger = React.forwardRef<
+  HTMLButtonElement,
+  WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseAccordion.Trigger>
+  >
+>(({ className, children, ...props }, ref) => (
+  <BaseAccordion.Header className="sh-ui-accordion__header">
+    <BaseAccordion.Trigger
+      ref={ref}
+      className={cx("sh-ui-accordion__trigger", className)}
+      {...props}
+    >
+      <span className="sh-ui-accordion__trigger-label">{children}</span>
+      <svg
+        className="sh-ui-accordion__chevron"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M4 6l4 4 4-4"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </BaseAccordion.Trigger>
+  </BaseAccordion.Header>
+));
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export const AccordionContent = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAccordion.Panel>>
+>(({ className, children, ...props }, ref) => (
+  <BaseAccordion.Panel
+    ref={ref}
+    className={cx("sh-ui-accordion__panel", className)}
+    {...props}
+  >
+    <div className="sh-ui-accordion__content">{children}</div>
+  </BaseAccordion.Panel>
+));
+AccordionContent.displayName = "AccordionContent";

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

@@ -0,0 +1,94 @@
+.sh-ui-accordion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.sh-ui-accordion__item {
+  border-bottom: 1px solid var(--border);
+}
+
+.sh-ui-accordion__item:first-child {
+  border-top: 1px solid var(--border);
+}
+
+.sh-ui-accordion__header {
+  margin: 0;
+  font: inherit;
+}
+
+.sh-ui-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  width: 100%;
+  padding: var(--space-4) var(--space-1);
+  background: transparent;
+  border: none;
+  color: var(--foreground);
+  font-size: 0.9375rem;
+  font-weight: var(--weight-medium);
+  line-height: 1.4;
+  text-align: left;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sh-ui-accordion__trigger:hover .sh-ui-accordion__trigger-label {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.sh-ui-accordion__trigger:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+  border-radius: calc(var(--radius) - 2px);
+}
+
+.sh-ui-accordion__trigger[disabled],
+.sh-ui-accordion__trigger[data-disabled] {
+  cursor: not-allowed;
+  color: var(--foreground-muted);
+}
+
+.sh-ui-accordion__trigger-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sh-ui-accordion__chevron {
+  flex-shrink: 0;
+  color: var(--foreground-muted);
+  transition: transform 180ms var(--ease-standard);
+}
+
+.sh-ui-accordion__trigger[data-panel-open] .sh-ui-accordion__chevron {
+  transform: rotate(180deg);
+}
+
+/* 패널: Base UI가 --accordion-panel-height CSS 변수를 제공. grid trick으로 열림/닫힘 전환. */
+.sh-ui-accordion__panel {
+  overflow: hidden;
+  height: var(--accordion-panel-height);
+  transition: height var(--duration-slow) var(--ease-standard);
+}
+
+.sh-ui-accordion__panel[data-starting-style],
+.sh-ui-accordion__panel[data-ending-style] {
+  height: 0;
+}
+
+.sh-ui-accordion__content {
+  padding: 0 var(--space-1) var(--space-4);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+  color: var(--foreground-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-accordion__panel,
+  .sh-ui-accordion__chevron {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,51 @@
+/* sh-ui 공용 애니메이션 — Sidebar drawer, Dialog, Toast 등에서 재사용한다.
+ *
+ * 사용 예:
+ *   .my-sheet[data-state="open"] {
+ *     animation: sh-ui-slide-in-from-left var(--ease-duration) var(--ease-out);
+ *   }
+ */
+
+:root {
+  --ease-duration: 200ms;
+  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* fade */
+@keyframes sh-ui-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes sh-ui-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+/* slide from edges */
+@keyframes sh-ui-slide-in-from-left {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+@keyframes sh-ui-slide-in-from-right {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0); }
+}
+@keyframes sh-ui-slide-in-from-top {
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0); }
+}
+@keyframes sh-ui-slide-in-from-bottom {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+/* zoom (Dialog/Popover에 어울림) */
+@keyframes sh-ui-zoom-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes sh-ui-zoom-out {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.95); }
+}

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

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { Avatar as BaseAvatar } from "@base-ui-components/react/avatar";
+import "./styles.css";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+
+export interface AvatarProps
+  extends WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseAvatar.Root>
+  > {
+  /**
+   * 크기.
+   * - `sm` (24px) — 댓글·리스트 행
+   * - `md` (32px) — 일반 (기본)
+   * - `lg` (40px) — 헤더·프로필 카드
+   * - `xl` (56px) — 프로필 페이지
+   *
+   * @default "md"
+   */
+  size?: AvatarSize;
+}
+
+/**
+ * 사용자/엔티티를 대표하는 원형 이미지. `Avatar` 안에 `AvatarImage`와
+ * `AvatarFallback`을 함께 둬, 이미지 로드 실패 시 자동으로 fallback이 표시되도록 한다.
+ */
+export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
+  function Avatar({ className, size = "md", ...props }, ref) {
+    return (
+      <BaseAvatar.Root
+        ref={ref}
+        className={cx("sh-ui-avatar", `sh-ui-avatar--${size}`, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/** Avatar 내부의 실제 이미지. 로드 실패 시 자동으로 가려지고 fallback이 노출된다. */
+export const AvatarImage = React.forwardRef<
+  HTMLImageElement,
+  WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseAvatar.Image>
+  >
+>(function AvatarImage({ className, ...props }, ref) {
+  return (
+    <BaseAvatar.Image
+      ref={ref}
+      className={cx("sh-ui-avatar__image", className)}
+      {...props}
+    />
+  );
+});
+
+/** 이미지가 로드되지 않을 때 표시되는 대체 콘텐츠. 이니셜이나 아이콘을 권장. */
+export const AvatarFallback = React.forwardRef<
+  HTMLSpanElement,
+  WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseAvatar.Fallback>
+  >
+>(function AvatarFallback({ className, ...props }, ref) {
+  return (
+    <BaseAvatar.Fallback
+      ref={ref}
+      className={cx("sh-ui-avatar__fallback", className)}
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,36 @@
+.sh-ui-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  vertical-align: middle;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--background-muted);
+  color: var(--foreground-muted);
+  font-weight: var(--weight-medium);
+  user-select: none;
+}
+
+.sh-ui-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }
+.sh-ui-avatar--md { width: 2.5rem;  height: 2.5rem;  font-size: 0.8125rem; }
+.sh-ui-avatar--lg { width: 3rem;    height: 3rem;    font-size: var(--text-sm); }
+.sh-ui-avatar--xl { width: 4rem;    height: 4rem;    font-size: var(--text-base); }
+
+.sh-ui-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.sh-ui-avatar__fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export type BadgeVariant =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "outline";
+
+export type BadgeSize = "sm" | "md";
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+}
+
+/**
+ * 상태·카테고리·수량 등을 짧게 표기하는 인라인 라벨. 의미 전달이 색에만
+ * 의존하지 않도록 텍스트나 아이콘과 함께 사용할 것.
+ */
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  function Badge({ className, variant = "primary", size = "md", ...props }, ref) {
+    return (
+      <span
+        ref={ref}
+        className={cx(
+          "sh-ui-badge",
+          `sh-ui-badge--${variant}`,
+          `sh-ui-badge--${size}`,
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);

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

@@ -0,0 +1,57 @@
+.sh-ui-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-weight: var(--weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+}
+
+/* sizes */
+.sh-ui-badge--sm {
+  height: 1.25rem;
+  font-size: 0.6875rem;
+  padding: 0 0.375rem;
+}
+.sh-ui-badge--md {
+  height: 1.5rem;
+  font-size: var(--text-xs);
+}
+
+/* variants */
+.sh-ui-badge--primary {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.sh-ui-badge--secondary {
+  background: var(--background-muted);
+  color: var(--foreground);
+  border-color: var(--border);
+}
+
+.sh-ui-badge--success {
+  background: var(--success, #16a34a);
+  color: #fff;
+}
+
+.sh-ui-badge--warning {
+  background: var(--warning, #d97706);
+  color: #fff;
+}
+
+.sh-ui-badge--danger {
+  background: var(--danger);
+  color: var(--danger-foreground, #fff);
+}
+
+.sh-ui-badge--outline {
+  background: transparent;
+  color: var(--foreground);
+  border-color: var(--border-strong);
+}

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

@@ -0,0 +1,102 @@
+/* sh-ui / base — 모바일 안전 기본값 + 공통 리셋.
+ *
+ * 사용: 글로벌 CSS에서 tokens.css 바로 뒤에 import.
+ *   @import "./styles/tokens.css";
+ *   @import "./styles/base.css";
+ *
+ * 목적:
+ *  1. box-sizing, margin 제거 등 일반적 리셋
+ *  2. 모바일에서 자식 min-content가 뷰포트를 밀어 가로 스크롤이 생기는 사고 방지
+ *  3. 미디어 요소가 부모를 넘치지 않도록 기본 제한
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  /* 참고: `overflow-x: hidden`을 body에 걸면 position:sticky 자식이
+     viewport 대신 body를 스크롤 조상으로 인식해 고장난다.
+     가로 오버플로는 아래 `main/section/article { min-width: 0 }` 규칙이 실제 원인을 차단. */
+}
+
+body {
+  min-height: 100svh;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+/* 미디어: 부모 폭을 절대 넘지 않도록. height: auto로 비율 유지. */
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* flex/grid 자식의 min-width: auto가 부모를 확장시키는 사고 방지.
+   (의도적으로 콘텐츠 크기만큼 커져야 하는 경우 해당 요소에서 min-width: auto로 복원) */
+main,
+section,
+article,
+aside,
+header,
+footer,
+nav {
+  min-width: 0;
+}
+
+/* 텍스트 요소 기본 래핑 — 긴 URL/토큰이 부모를 밀지 않게. */
+p,
+li,
+dd,
+dt {
+  overflow-wrap: anywhere;
+}
+
+/* 공용 컨테이너: 본문 래퍼. 모바일/데스크탑 모두에서 안전한 기본 폭 관리. */
+.sh-ui-container {
+  width: 100%;
+  max-width: 64rem;
+  min-width: 0;
+  margin-inline: auto;
+  padding-inline: 1.5rem;
+}
+
+@media (max-width: 40rem) {
+  .sh-ui-container {
+    padding-inline: 1rem;
+  }
+}
+
+/* 터치 대상 최소 44×44px (WCAG 2.5.5) 가이드.
+   버튼/링크가 과도하게 작아지지 않도록 안전 하한. */
+button,
+[role="button"],
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 모션 감소 선호(운영체제 설정) 존중 — WCAG 2.3.3.
+   애니메이션·전환을 거의 0으로 줄이고 스크롤 동작도 즉시로. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

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

@@ -0,0 +1,154 @@
+import * as React from "react";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/* ───────── Breadcrumb (nav) ─────────
+ * 시맨틱: <nav aria-label="Breadcrumb"><ol>...</ol></nav>.
+ */
+
+/**
+ * 현재 페이지의 위치를 사이트 계층 위에서 보여주는 내비게이션. 항상 `BreadcrumbList`로
+ * 감싸고, 마지막 항목은 링크 대신 `BreadcrumbPage`로 표기해 현재 위치를 알린다.
+ */
+export const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement>
+>(function Breadcrumb({ className, ...props }, ref) {
+  return (
+    <nav
+      ref={ref}
+      aria-label="Breadcrumb"
+      className={cx("sh-ui-breadcrumb", className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── List (ol) ───────── */
+
+/** 항목들을 담는 정렬 리스트(`<ol>`). Breadcrumb 직계 자식으로 사용. */
+export const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.OlHTMLAttributes<HTMLOListElement>
+>(function BreadcrumbList({ className, ...props }, ref) {
+  return (
+    <ol
+      ref={ref}
+      className={cx("sh-ui-breadcrumb__list", className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Item (li) ───────── */
+
+/** 한 단계의 항목(`<li>`). 안에 `BreadcrumbLink` 또는 `BreadcrumbPage`를 둔다. */
+export const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
+>(function BreadcrumbItem({ className, ...props }, ref) {
+  return (
+    <li
+      ref={ref}
+      className={cx("sh-ui-breadcrumb__item", className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Link ───────── */
+
+/** 상위 단계로 이동하는 링크. 라우터 사용 시 `asChild` 패턴 대신 직접 `<a>` 속성으로 전달. */
+export const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
+>(function BreadcrumbLink({ className, ...props }, ref) {
+  return (
+    <a
+      ref={ref}
+      className={cx("sh-ui-breadcrumb__link", className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Page (현재 위치 — 링크 아님) ───────── */
+
+/** 마지막(현재) 항목. 링크가 아니므로 `aria-current="page"`가 자동 부여된다. */
+export const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(function BreadcrumbPage({ className, ...props }, ref) {
+  return (
+    <span
+      ref={ref}
+      role="link"
+      aria-current="page"
+      aria-disabled="true"
+      className={cx("sh-ui-breadcrumb__page", className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Separator ───────── */
+
+/** 항목 사이 구분자. 기본은 `>` 아이콘이며 children으로 교체 가능. 스크린리더에서는 무시된다. */
+export const BreadcrumbSeparator = React.forwardRef<
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
+>(function BreadcrumbSeparator({ className, children, ...props }, ref) {
+  return (
+    <li
+      ref={ref}
+      role="presentation"
+      aria-hidden="true"
+      className={cx("sh-ui-breadcrumb__separator", className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </li>
+  );
+});
+
+/* ───────── Ellipsis — 중간 항목 축약 ───────── */
+
+/** 깊은 경로에서 중간 항목들을 축약하는 점 3개 표시. 클릭 가능한 전체 경로 메뉴와 함께 쓰면 유용. */
+export const BreadcrumbEllipsis = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(function BreadcrumbEllipsis({ className, ...props }, ref) {
+  return (
+    <span
+      ref={ref}
+      role="presentation"
+      aria-hidden="true"
+      className={cx("sh-ui-breadcrumb__ellipsis", className)}
+      {...props}
+    >
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden>
+        <circle cx="3" cy="8" r="1.25" />
+        <circle cx="8" cy="8" r="1.25" />
+        <circle cx="13" cy="8" r="1.25" />
+      </svg>
+      <span className="sh-ui-breadcrumb__ellipsis-sr">더 보기</span>
+    </span>
+  );
+});
+
+function ChevronRightIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M6 4l4 4-4 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}