sh-ui-cli 0.46.0 → 0.47.0

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

@@ -0,0 +1,350 @@
+/* ───── Root ───── */
+.header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  height: var(--control-md);
+  padding: 0 var(--space-3);
+  background: var(--background);
+  border-bottom: 1px solid var(--border);
+  transition: transform var(--duration-base) var(--ease-standard),
+    background-color var(--duration-base) var(--ease-standard);
+  /* hover/active 배경 — transparent/blur variant 가 currentColor 기반으로 재정의 */
+  --sh-ui-header-hover-bg: var(--background-muted);
+  /* blur variant 튜닝용 — instance 별 style 로 override 가능 */
+  --sh-ui-header-blur-opacity: 85%;
+  --sh-ui-header-blur-radius: 16px;
+}
+
+/* prefers-reduced-motion — stickyHide 슬라이드 애니메이션을 즉시 toggle 로 대체.
+   variant 전환의 background 트랜지션도 비활성화. */
+@media (prefers-reduced-motion: reduce) {
+  .header {
+    transition: none;
+  }
+}
+
+/* variant */
+.header--solid {
+  background: var(--background);
+}
+.header--transparent {
+  background: transparent;
+  border-bottom-color: transparent;
+  /* 컬러풀 배경 위에서도 자연스러운 hover — 텍스트 색의 14% 오버레이 */
+  --sh-ui-header-hover-bg: color-mix(in srgb, currentColor 14%, transparent);
+}
+.header--blur {
+  background: color-mix(in srgb, var(--background) var(--sh-ui-header-blur-opacity), transparent);
+  backdrop-filter: saturate(180%) blur(var(--sh-ui-header-blur-radius));
+  -webkit-backdrop-filter: saturate(180%) blur(var(--sh-ui-header-blur-radius));
+  --sh-ui-header-hover-bg: color-mix(in srgb, currentColor 14%, transparent);
+}
+/* backdrop-filter 미지원 브라우저 폴백 — 더 불투명한 배경으로 가독성 확보 */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .header--blur {
+    background: var(--background);
+  }
+}
+
+/* sticky-hide — sticky 컨텍스트는 사용자가 직접 (예: position:sticky; top:0) 적용. */
+.header[data-sticky-hide][data-hidden] {
+  transform: translateY(-100%);
+}
+
+/* ───── Brand ───── */
+.header__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+.header__logo {
+  display: inline-flex;
+  align-items: center;
+  color: var(--foreground);
+}
+.header__title {
+  font-size: var(--text-base);
+  font-weight: var(--weight-bold);
+  color: var(--foreground);
+  letter-spacing: -0.3px;
+}
+
+/* ───── Trigger (햄버거) ───── */
+.header__trigger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: var(--foreground);
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  transition: background-color var(--duration-fast);
+}
+.header__trigger:hover {
+  background: var(--sh-ui-header-hover-bg);
+}
+.header__trigger:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+/* ───── Inline Nav ───── */
+.header__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.header__nav::-webkit-scrollbar {
+  display: none;
+}
+
+/* ───── Item ───── */
+.header__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  color: var(--foreground-muted);
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color var(--duration-fast), background-color var(--duration-fast);
+}
+.header__item:hover {
+  color: var(--foreground);
+  background: var(--sh-ui-header-hover-bg);
+}
+.header__item[data-active] {
+  color: var(--foreground);
+  font-weight: var(--weight-semibold);
+}
+.header__item:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+/* ───── Actions ───── */
+.header__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* ───── 반응형 가시성 유틸 (HeaderDesktopOnly / HeaderMobileOnly) ─────
+ * display: contents 로 wrapper 가 레이아웃에 잡히지 않게 함 — 부모(HeaderActions 등)의 flex 흐름 유지.
+ */
+.header__desktop-only {
+  display: contents;
+}
+.header__mobile-only {
+  display: none;
+}
+
+/* ───── NavGroup ─────
+ * inline 모드에서는 자식만 펼친 것처럼 평면 렌더(라벨 숨김).
+ * drawer 모드에서는 라벨 + 들여쓴 항목.
+ */
+.header__group--inline {
+  display: contents;
+}
+.header__group--drawer {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--space-3);
+}
+.header__group--drawer:first-child {
+  margin-top: 0;
+}
+.header__group-label {
+  display: flex;
+  align-items: center;
+  height: 2rem;
+  padding: 0 var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  color: var(--foreground-muted);
+}
+.header__group-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+/* ───── Menu (서브메뉴) — inline 모드 = dropdown ───── */
+.header__menu {
+  position: relative;
+}
+.header__menu--inline {
+  display: inline-block;
+}
+.header__menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  color: var(--foreground-muted);
+  background: transparent;
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color var(--duration-fast), background-color var(--duration-fast);
+}
+.header__menu-trigger:hover,
+.header__menu-trigger[data-open] {
+  color: var(--foreground);
+  background: var(--sh-ui-header-hover-bg);
+}
+.header__menu-trigger:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+.header__chevron {
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.header__menu-trigger[data-open] .header__chevron {
+  transform: rotate(180deg);
+}
+
+/* inline 모드 dropdown 은 portal 로 document.body 에 렌더된다 — 부모 overflow 영향 받지 않음. */
+.header__menu-content--portal {
+  z-index: var(--z-dropdown, 50);
+  padding: var(--space-1);
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.18);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  color: var(--foreground);
+}
+.header__menu-content--portal .header__item {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+}
+
+/* ───── Drawer (backdrop + panel) — 기본 숨김 ───── */
+.header__backdrop,
+.header__drawer {
+  display: none;
+}
+
+/* ───── Mobile (< breakpoint.md) ───── */
+@media (max-width: 767px) {
+  .header__trigger {
+    display: inline-flex;
+    order: -1;
+  }
+  .header__nav {
+    display: none;
+  }
+  .header {
+    gap: var(--space-2);
+  }
+  /* 가시성 유틸 토글 */
+  .header__desktop-only {
+    display: none;
+  }
+  .header__mobile-only {
+    display: contents;
+  }
+
+  /* backdrop */
+  .header__backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(8px);
+    z-index: var(--z-overlay);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--duration-base) var(--ease-standard);
+  }
+  .header__backdrop[data-open] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* drawer panel */
+  .header__drawer {
+    display: flex;
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: min(17.5rem, 85vw);
+    background: var(--background-subtle);
+    border-right: 1px solid var(--border);
+    z-index: var(--z-modal);
+    transform: translateX(-100%);
+    transition: transform var(--duration-base) var(--ease-standard);
+    flex-direction: column;
+    overflow-y: auto;
+  }
+  .header__drawer[data-open] {
+    transform: translateX(0);
+  }
+
+  .header__drawer-head {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: var(--space-2) var(--space-2);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .header__drawer-nav {
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-2);
+    gap: 1px;
+  }
+
+  .header__drawer .header__item {
+    padding: var(--space-3) var(--space-3);
+    font-size: var(--text-sm);
+    border-radius: calc(var(--radius) - 2px);
+  }
+
+  /* Menu in drawer = collapsible */
+  .header__menu--drawer {
+    display: flex;
+    flex-direction: column;
+  }
+  .header__menu--drawer > .header__menu-trigger {
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--space-3) var(--space-3);
+  }
+  .header__menu--drawer > .header__menu-content {
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-1) 0 var(--space-1) var(--space-4);
+    gap: 1px;
+  }
+  .header__menu--drawer > .header__menu-content[hidden] {
+    display: none;
+  }
+}

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+import styles from "./styles.module.css";
+
+import { cn } from "@SH_UI_UTILS@";
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  /**
+   * 필수 필드 표시. `true`면 `::after`로 `*` 표시가 붙는다.
+   * Input에 `required` 속성이 있으면 CSS `:has()`로 자동 감지되므로 보통 명시 불필요.
+   *
+   * @default false
+   */
+  isRequired?: boolean;
+}
+
+
+/**
+ * 폼 컨트롤과 1:1로 연결되는 레이블. `htmlFor`로 컨트롤의 `id`와 매칭하거나
+ * Label 안에 컨트롤을 감싸 묵시적으로 연결한다. 클릭 시 자동으로 컨트롤에 포커스가 간다.
+ */
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, children, isRequired, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(styles.label, className)}
+      data-required={isRequired || undefined}
+      {...props}
+    >
+      {children}
+    </label>
+  ),
+);
+Label.displayName = "Label";
+
+/** Label 안의 주 라벨 텍스트. 구조적 그룹핑이 필요할 때 Label과 함께 사용. */
+export function LabelTitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn(styles.label__title, className)} {...props} />;
+}
+
+/** 라벨 옆에 약하게 표시되는 보조 텍스트(예: "선택 사항"). */
+export function LabelSubtitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn(styles.label__subtitle, className)} {...props} />;
+}
+
+/** 라벨 아래에 붙는 안내 문구. 컨트롤과 `aria-describedby`로 연결할 것. */
+export function LabelDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn(styles.label__description, className)} {...props} />;
+}
+
+/** 라벨 아래의 보조 캡션(예: 입력 형식 예시, 글자 수 제한). */
+export function LabelCaption({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn(styles.label__caption, className)} {...props} />;
+}

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

@@ -0,0 +1,90 @@
+.label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  line-height: 1.4;
+  color: var(--foreground);
+  cursor: pointer;
+  user-select: none;
+}
+
+.label:not(:has(.label__title, .label__subtitle, .label__description, .label__caption)) {
+  display: block;
+}
+
+/* ───── 텍스트 계층 ───── */
+
+/* Title — 주 라벨 텍스트 (기본). Label에 서브컴포넌트 없이 텍스트만 넣으면 이 스타일. */
+.label__title {
+  font-weight: var(--weight-semibold);
+  font-size: var(--text-sm);
+  color: var(--foreground);
+}
+
+/* Subtitle — 부제. 타이틀 옆이나 아래에 보조 강조. */
+.label__subtitle {
+  font-weight: var(--weight-regular);
+  font-size: 0.8125rem;
+  color: var(--foreground);
+}
+
+/* Description — 설명. 입력 필드 가이드. */
+.label__description {
+  margin: 0;
+  font-weight: var(--weight-regular);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--foreground-muted);
+}
+
+/* Caption — 흐린 설명. 가장 덜 중요한 보조 텍스트. */
+.label__caption {
+  margin: 0;
+  font-weight: var(--weight-regular);
+  font-size: var(--text-xs);
+  line-height: 1.3;
+  color: var(--foreground-subtle, var(--foreground-muted));
+  opacity: 0.75;
+}
+
+/* ───── 필수 표시 (* 마크) ─────
+ * 1) isRequired prop (data-required) — 명시적 수동 지정
+ * 2) 인접 폼 컴포넌트에 required 속성 — CSS :has()로 자동 감지
+ * ::after는 Label의 첫 번째 인라인 자식(타이틀) 뒤에 표시. */
+
+/* LabelTitle sub-component가 있는 경우 */
+.label[data-required] > .label__title::after,
+.label:has(+ .input:required) > .label__title::after,
+.label:has(+ .input-wrap .input:required) > .label__title::after,
+.label:has(+ .textarea:required) > .label__title::after,
+.label:has(+ .combobox__input:required) > .label__title::after {
+  content: " *";
+  color: var(--danger);
+  font-weight: var(--weight-semibold);
+}
+
+/* Title 없이 Label에 직접 텍스트를 넣은 경우 */
+.label[data-required]:not(:has(.label__title))::after,
+.label:not(:has(.label__title)):has(+ .input:required)::after,
+.label:not(:has(.label__title)):has(+ .input-wrap .input:required)::after,
+.label:not(:has(.label__title)):has(+ .textarea:required)::after,
+.label:not(:has(.label__title)):has(+ .combobox__input:required)::after {
+  content: " *";
+  color: var(--danger);
+  font-weight: var(--weight-semibold);
+}
+
+/* ───── disabled 자동 감지 ─────
+ * 인접 폼 컴포넌트가 disabled이면 Label도 흐리게. */
+.label:has(+ .input:disabled),
+.label:has(+ .input-wrap .input:disabled),
+.label:has(+ .textarea:disabled),
+.label:has(+ .select__trigger:disabled),
+.label:has(+ .combobox__input:disabled),
+.label:has(+ .date-picker__trigger:disabled),
+.label:has(+ .file-upload .file-upload__dropzone--disabled) {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}

package/data/registry/react/components/markdown-editor/index.module.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { CodeEditor } from "../code-editor";
+import styles from "./styles.module.css";
+
+import { cn } from "@SH_UI_UTILS@";
+export interface MarkdownEditorProps {
+  /**
+   * Controlled — 현재 마크다운. 명시 시 외부 상태가 진실원천.
+   * 미지정이면 uncontrolled — 컴포넌트가 자체 내부 상태로 동작.
+   */
+  value?: string;
+  /**
+   * Uncontrolled 초기값. value 미지정 시에만 사용된다.
+   * @default ""
+   */
+  defaultValue?: string;
+  /** 마크다운이 바뀔 때마다 호출 (controlled · uncontrolled 모두). */
+  onChange?: (value: string) => void;
+  /** 비어 있을 때 표시할 placeholder. */
+  placeholder?: string;
+  /** 읽기 전용. 키 입력 차단, 미리보기는 그대로 렌더. */
+  readOnly?: boolean;
+  /**
+   * 미리보기 패널 표시 여부.
+   * @default true
+   */
+  preview?: boolean;
+  /**
+   * 미리보기 위치. 좁은 화면(<768px)에서는 항상 아래로 쌓임.
+   * @default "right"
+   */
+  previewPosition?: "right" | "bottom";
+  /** 에디터·미리보기 영역의 최소 높이 (CSS 길이 단위). */
+  minHeight?: string;
+  /** 에디터·미리보기 영역의 최대 높이. 초과 시 내부 스크롤. */
+  maxHeight?: string;
+  className?: string;
+  /** 에디터 영역에 부여할 aria-label. */
+  "aria-label"?: string;
+}
+
+
+/**
+ * 마크다운 에디터 — CodeEditor(소스) + react-markdown(라이브 프리뷰)의 합성.
+ *
+ * Controlled (value/onChange) · Uncontrolled (defaultValue) 모두 지원. 미리보기 패널이
+ * 현재 마크다운을 필요로 하므로 uncontrolled 모드에서도 내부 상태로 트래킹.
+ *
+ * 미리보기는 GFM(테이블·체크박스·strikethrough)을 지원하고, raw HTML은 기본적으로
+ * 차단(react-markdown 기본 동작)되어 사용자 입력으로부터의 XSS가 자동 방어된다.
+ */
+export function MarkdownEditor({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  placeholder,
+  readOnly,
+  preview = true,
+  previewPosition = "right",
+  minHeight,
+  maxHeight,
+  className,
+  "aria-label": ariaLabel = "Markdown editor",
+}: MarkdownEditorProps) {
+  const isControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = useState(valueProp ?? defaultValue ?? "");
+  const value = isControlled ? valueProp : internalValue;
+
+  const handleChange = (next: string) => {
+    if (!isControlled) setInternalValue(next);
+    onChange?.(next);
+  };
+
+  return (
+    <div
+      className={cn(
+        styles["md-editor"],
+        preview && styles[`md-editor--${previewPosition}`],
+        !preview && styles["md-editor--no-preview"],
+        className,
+      )}
+      data-readonly={readOnly || undefined}
+    >
+      <div className={styles["md-editor__source"]}>
+        <CodeEditor
+          value={value}
+          onChange={handleChange}
+          language="markdown"
+          placeholder={placeholder}
+          readOnly={readOnly}
+          minHeight={minHeight}
+          maxHeight={maxHeight}
+          aria-label={ariaLabel}
+        />
+      </div>
+      {preview && (
+        <div
+          className={styles["md-editor__preview"]}
+          role="region"
+          aria-label="Preview"
+          style={
+            {
+              "--sh-ui-md-editor-min-height": minHeight,
+              "--sh-ui-md-editor-max-height": maxHeight,
+            } as React.CSSProperties
+          }
+        >
+          <div className={styles["md-editor__preview-inner"]}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{value}</ReactMarkdown>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}