sh-ui-cli 0.14.0 → 0.21.0

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

@@ -0,0 +1,75 @@
+/* ───────────── Checkbox ───────────── */
+
+.sh-ui-checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 1px solid var(--border-strong);
+  border-radius: calc(var(--radius) - 2px);
+  background: var(--background);
+  color: var(--primary-foreground);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--duration-fast), border-color var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sh-ui-checkbox:hover:not([data-disabled]) {
+  border-color: var(--foreground);
+}
+
+.sh-ui-checkbox:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.sh-ui-checkbox[data-checked],
+.sh-ui-checkbox[data-indeterminate] {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.sh-ui-checkbox[data-disabled] {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* 모바일/터치: 최소 탭 영역 */
+@media (hover: none) and (pointer: coarse) {
+  .sh-ui-checkbox {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
+/* ───────────── Indicator ───────────── */
+
+.sh-ui-checkbox__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ───────────── CheckboxGroup ───────────── */
+
+.sh-ui-checkbox-group {
+  display: flex;
+  gap: 0.625rem;
+}
+
+.sh-ui-checkbox-group[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+.sh-ui-checkbox-group[data-orientation="horizontal"] {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-checkbox {
+    transition: none;
+  }
+}

package/data/registry/react/components/code-panel/copy.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+
+export function CodePanelCopyButton({ code }: { code: string }) {
+  const [copied, setCopied] = useState(false);
+
+  async function onClick() {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // clipboard API 사용 불가 환경은 무시
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      className="sh-ui-code__copy"
+      onClick={onClick}
+      aria-label="코드 복사"
+    >
+      {copied ? <CheckIcon /> : <CopyIcon />}
+      <span className="sh-ui-code__copy-label">{copied ? "복사됨" : "복사"}</span>
+    </button>
+  );
+}
+
+function CopyIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden>
+      <rect
+        x="5" y="5" width="8" height="8" rx="1.5"
+        stroke="currentColor" strokeWidth="1.5"
+      />
+      <path
+        d="M10.5 5V3.5A1.5 1.5 0 0 0 9 2H4.5A1.5 1.5 0 0 0 3 3.5V8a1.5 1.5 0 0 0 1.5 1.5H5"
+        stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden>
+      <path
+        d="M3.5 8.5l3 3 6-7"
+        stroke="currentColor" strokeWidth="1.75"
+        strokeLinecap="round" strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/data/registry/react/components/code-panel/index.tsx

@@ -0,0 +1,193 @@
+import { codeToHtml } from "shiki";
+import { CodePanelCopyButton } from "./copy";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export interface CodePanelProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /** 하이라이팅할 코드 문자열. children을 제공하지 않을 때 필수. */
+  code?: string;
+  /**
+   * shiki가 지원하는 언어 ID (예: `"tsx"`, `"typescript"`, `"bash"`, `"json"`).
+   * 미지원 언어면 plain text로 폴백.
+   *
+   * @default "text"
+   */
+  language?: string;
+  /**
+   * 상단 헤더에 표시할 파일명. 지정하면 헤더가 그려지고 그 안에 복사 버튼이 들어가며,
+   * 미지정 시 우상단에 floating 복사 버튼만 표시된다.
+   */
+  filename?: string;
+  /**
+   * 좌측 줄 번호 표시 여부.
+   * @default true
+   */
+  showLineNumbers?: boolean;
+  /**
+   * 복사 버튼 숨기기. 코드 발췌가 클립보드 복사용이 아닐 때 사용.
+   * @default false
+   */
+  hideCopy?: boolean;
+  /**
+   * compound 모드. 직접 `CodePanelHeader`/`CodePanelFilename`/`CodePanelCopy`/`CodePanelBody`를
+   * 조합해 헤더 액션 추가나 복사 버튼 위치 변경 등을 한다. 지정 시 `code`/`language` 등은 무시.
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * 코드 블록 + 복사 버튼 패널. shiki로 SSR에서 하이라이팅.
+ *
+ * 기본 사용(자식 생략) — `code` prop만 넘기면 기본 레이아웃을 렌더한다.
+ * 커스텀 구성 — `CodePanelHeader`, `CodePanelFilename`, `CodePanelCopy`,
+ * `CodePanelBody`를 직접 조합하여 헤더 액션 추가·복사 버튼 위치 변경 등이 가능하다.
+ */
+export async function CodePanel({
+  code,
+  language = "text",
+  filename,
+  showLineNumbers = true,
+  hideCopy,
+  className,
+  children,
+  ...rest
+}: CodePanelProps) {
+  const classes = cx("sh-ui-code", className);
+
+  if (children !== undefined) {
+    return (
+      <div className={classes} {...rest}>
+        {children}
+      </div>
+    );
+  }
+
+  if (code === undefined) {
+    throw new Error("CodePanel: `code` prop 또는 children 중 하나가 필요합니다.");
+  }
+
+  const trimmed = code.replace(/\n$/, "");
+
+  return (
+    <div className={classes} {...rest}>
+      {filename ? (
+        <CodePanelHeader>
+          <CodePanelFilename>{filename}</CodePanelFilename>
+          {!hideCopy && <CodePanelCopy code={trimmed} />}
+        </CodePanelHeader>
+      ) : (
+        !hideCopy && (
+          <div className="sh-ui-code__copy-floating">
+            <CodePanelCopy code={trimmed} />
+          </div>
+        )
+      )}
+      <CodePanelBody
+        code={trimmed}
+        language={language}
+        showLineNumbers={showLineNumbers}
+      />
+    </div>
+  );
+}
+
+/* ───────── CodePanelHeader ───────── */
+
+/** 파일명·복사 버튼 등을 담는 코드 블록 상단 바. CodePanel 자식으로 사용. */
+export function CodePanelHeader({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cx("sh-ui-code__header", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+/* ───────── CodePanelFilename ───────── */
+
+/** CodePanelHeader 안에 표시되는 파일명 라벨. */
+export function CodePanelFilename({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span className={cx("sh-ui-code__filename", className)} {...props}>
+      {children}
+    </span>
+  );
+}
+
+/* ───────── CodePanelCopy ─────────
+ * 클립보드 복사 버튼. 내부적으로 client 컴포넌트를 사용한다.
+ */
+
+export interface CodePanelCopyProps {
+  /** 클립보드에 복사할 코드 문자열. 부모(주로 CodePanel)가 명시적으로 전달한다. */
+  code: string;
+}
+
+/** 클립보드 복사 버튼. 부모가 복사할 코드 문자열을 명시적으로 전달한다. */
+export function CodePanelCopy({ code }: CodePanelCopyProps) {
+  return <CodePanelCopyButton code={code} />;
+}
+
+/* ───────── CodePanelBody ─────────
+ * shiki로 코드를 하이라이팅하여 렌더하는 async 컴포넌트.
+ */
+
+export interface CodePanelBodyProps
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    "children" | "dangerouslySetInnerHTML"
+  > {
+  /** 하이라이팅할 코드 문자열. */
+  code: string;
+  /**
+   * shiki 언어 ID.
+   * @default "text"
+   */
+  language?: string;
+  /**
+   * 좌측 줄 번호 표시 여부.
+   * @default true
+   */
+  showLineNumbers?: boolean;
+}
+
+/**
+ * shiki로 코드를 SSR 하이라이팅하여 렌더하는 async 컴포넌트.
+ * 라이트/다크 테마는 `github-light`/`github-dark`를 사용하며, 부모 테마 클래스에 따라 자동 전환된다.
+ */
+export async function CodePanelBody({
+  code,
+  language = "text",
+  showLineNumbers = true,
+  className,
+  ...rest
+}: CodePanelBodyProps) {
+  const trimmed = code.replace(/\n$/, "");
+  const html = await codeToHtml(trimmed, {
+    lang: language,
+    themes: { light: "github-light", dark: "github-dark" },
+    defaultColor: false,
+  });
+
+  return (
+    <div
+      className={cx("sh-ui-code__body", className)}
+      data-line-numbers={showLineNumbers || undefined}
+      dangerouslySetInnerHTML={{ __html: html }}
+      {...rest}
+    />
+  );
+}
+
+export { CodePanelCopyButton };

package/data/registry/react/components/code-panel/styles.css

@@ -0,0 +1,124 @@
+.sh-ui-code {
+  position: relative;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background-subtle);
+  overflow: hidden;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  margin: var(--space-4) 0;
+}
+@media (max-width: 640px) {
+  .sh-ui-code { font-size: var(--text-xs); }
+}
+
+/* 헤더 (filename 있을 때) */
+.sh-ui-code__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
+  border-bottom: 1px solid var(--border);
+  background: var(--background-muted);
+  font-size: var(--text-xs);
+  color: var(--foreground-muted);
+}
+.sh-ui-code__filename {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--foreground);
+}
+
+/* 헤더 없을 때 우상단에 떠있는 복사 버튼 */
+.sh-ui-code__copy-floating {
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  z-index: 1;
+  opacity: 0;
+  transition: opacity var(--duration-fast);
+}
+.sh-ui-code:hover .sh-ui-code__copy-floating,
+.sh-ui-code:focus-within .sh-ui-code__copy-floating {
+  opacity: 1;
+}
+
+/* 복사 버튼 */
+.sh-ui-code__copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: var(--space-1) var(--space-2);
+  background: var(--background);
+  color: var(--foreground-muted);
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  font-size: var(--text-xs);
+  line-height: 1;
+  cursor: pointer;
+  transition: color var(--duration-fast), border-color var(--duration-fast), background-color var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+.sh-ui-code__copy:hover {
+  color: var(--foreground);
+  border-color: var(--border-strong);
+}
+.sh-ui-code__copy:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+.sh-ui-code__copy-label {
+  font-size: var(--text-xs);
+}
+
+/* 코드 본문 — shiki 출력(<pre class="shiki">...) */
+.sh-ui-code__body {
+  overflow-x: auto;
+}
+.sh-ui-code__body pre {
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  background: transparent !important;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: inherit;
+  line-height: inherit;
+  border: none;
+  border-radius: 0;
+}
+.sh-ui-code__body code {
+  background: transparent;
+  padding: 0;
+  font-size: inherit;
+  display: block;
+}
+
+/* shiki dual theme — 기본은 light, .dark 스코프에선 dark.
+   span에는 color만 주고 background-color는 절대 강제하지 않는다.
+   (강제하면 --shiki-*-bg 변수가 상속돼 라인마다 띠가 생긴다.) */
+.sh-ui-code__body .shiki,
+.sh-ui-code__body .shiki span {
+  color: var(--shiki-light) !important;
+  background-color: transparent !important;
+}
+.dark .sh-ui-code__body .shiki,
+.dark .sh-ui-code__body .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: transparent !important;
+}
+
+/* 라인 번호 */
+.sh-ui-code__body[data-line-numbers] pre code {
+  counter-reset: step;
+  counter-increment: step 0;
+}
+.sh-ui-code__body[data-line-numbers] pre code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  display: inline-block;
+  width: 1.75rem;
+  margin-right: var(--space-4);
+  text-align: right;
+  color: var(--foreground-muted);
+  opacity: 0.7;
+  user-select: none;
+}