sh-ui-cli 0.46.0 → 0.48.0

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

@@ -0,0 +1,155 @@
+.carousel {
+  position: relative;
+  width: 100%;
+}
+
+.carousel__content {
+  display: flex;
+  gap: var(--space-4);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-inline: contain;
+}
+
+.carousel__content::-webkit-scrollbar {
+  display: none;
+}
+
+.carousel__content[data-orientation="vertical"] {
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+  height: 20rem;
+}
+
+.carousel__item {
+  flex: 0 0 100%;
+  min-width: 0;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
+.carousel__item[data-orientation="vertical"] {
+  flex-basis: auto;
+}
+
+/* 네비게이션 버튼 — 기본은 플로팅 원형. 원하면 className으로 덮어쓰기. */
+.carousel__nav {
+  position: absolute;
+  top: 50%;
+  width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  cursor: pointer;
+  transform: translateY(-50%);
+  z-index: 1;
+  transition:
+    opacity var(--duration-fast) ease,
+    background var(--duration-fast) ease;
+}
+
+.carousel__nav:hover:not(:disabled) {
+  background: var(--background-muted);
+}
+
+.carousel__nav:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.carousel__nav:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.carousel__nav--prev {
+  left: -1rem;
+}
+
+.carousel__nav--next {
+  right: -1rem;
+}
+
+.carousel__nav[data-orientation="vertical"] {
+  top: auto;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.carousel__nav--prev[data-orientation="vertical"] {
+  top: -1rem;
+  left: 50%;
+}
+
+.carousel__nav--next[data-orientation="vertical"] {
+  bottom: -1rem;
+  top: auto;
+  left: 50%;
+}
+
+/* 인디케이터 */
+.carousel__indicators {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-2);
+  margin-top: var(--space-3);
+}
+
+.carousel__indicators[data-orientation="vertical"] {
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  margin-top: 0;
+  flex-direction: column;
+  transform: translateY(-50%);
+}
+
+.carousel__indicator {
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+  background: var(--border);
+  border: none;
+  border-radius: 999px;
+  cursor: pointer;
+  transition:
+    background var(--duration-fast) ease,
+    transform var(--duration-fast) ease;
+}
+
+.carousel__indicator:hover {
+  background: var(--border-strong);
+}
+
+.carousel__indicator[data-active] {
+  background: var(--foreground);
+  transform: scale(1.2);
+}
+
+.carousel__indicator:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel__content {
+    scroll-behavior: auto;
+  }
+  .carousel__nav,
+  .carousel__indicator {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import styles from "./styles.module.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+/* ───────────── Checkbox ───────────── */
+
+export type CheckboxProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>,
+  "className"
+> & {
+  className?: string;
+};
+
+/**
+ * 폼 제출 시 함께 적용되는 다중 선택. `indeterminate`로 부분 선택 상태를
+ * 표현할 수 있고, 여러 개를 묶을 때는 `CheckboxGroup`으로 감싸 그룹 단위 상태를 관리한다.
+ */
+export const Checkbox = React.forwardRef<HTMLElement, CheckboxProps>(
+  ({ className, ...props }, ref) => (
+    <BaseCheckbox.Root
+      ref={ref}
+      className={cn(styles.checkbox, className)}
+      {...props}
+    >
+      <BaseCheckbox.Indicator className={styles.checkbox__indicator}>
+        {props.indeterminate ? <MinusIcon /> : <CheckIcon />}
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
+  ),
+);
+Checkbox.displayName = "Checkbox";
+
+/* ───────────── CheckboxGroup ───────────── */
+
+export type CheckboxGroupProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseCheckboxGroup>,
+  "className"
+> & {
+  className?: string;
+  /**
+   * 그룹 내 체크박스 배치 방향.
+   * - `vertical` — 세로 나열 (기본)
+   * - `horizontal` — 가로 나열. 짧은 라벨 2~3개에만 권장
+   *
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+/**
+ * 여러 Checkbox를 묶는 컨테이너. `value`/`onValueChange`로 선택된 값 배열을 관리하고,
+ * `orientation`으로 가로/세로 배치를 정한다. 그룹 라벨은 외부 `<Label>`로 제공할 것.
+ */
+export const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <BaseCheckboxGroup
+      ref={ref}
+      className={cn(styles["checkbox-group"], className)}
+      data-orientation={orientation}
+      {...props}
+    />
+  ),
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+
+/* ───────────── Icons ───────────── */
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden>
+      <path
+        d="M3.5 8.5l3 3 6-7"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function MinusIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden>
+      <path
+        d="M4 8h8"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

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

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

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

@@ -0,0 +1,230 @@
+"use client";
+
+import { useEffect, useMemo, useRef } from "react";
+import { Compartment, EditorState, type Extension } from "@codemirror/state";
+import { EditorView, placeholder as placeholderExt } from "@codemirror/view";
+import { basicSetup } from "codemirror";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { css as cssLang } from "@codemirror/lang-css";
+import { html } from "@codemirror/lang-html";
+import { markdown } from "@codemirror/lang-markdown";
+import styles from "./styles.module.css";
+
+import { cn } from "@SH_UI_UTILS@";
+export type CodeEditorLanguage =
+  | "text"
+  | "javascript"
+  | "typescript"
+  | "jsx"
+  | "tsx"
+  | "json"
+  | "css"
+  | "html"
+  | "markdown";
+
+export interface CodeEditorProps {
+  /**
+   * Controlled — 현재 코드. 명시 시 value 가 진실원천이 되고 onChange 로 외부에서 갱신해야 한다.
+   * 미지정이면 uncontrolled — 에디터가 자체 내부 문서로 동작.
+   */
+  value?: string;
+  /**
+   * Uncontrolled 초기값. value 미지정 시에만 사용된다.
+   * @default ""
+   */
+  defaultValue?: string;
+  /** 코드가 바뀔 때마다 호출 (controlled · uncontrolled 모두). */
+  onChange?: (value: string) => void;
+  /**
+   * 신택스 하이라이팅 언어.
+   * @default "text"
+   */
+  language?: CodeEditorLanguage;
+  /** 비어 있을 때 표시할 placeholder. */
+  placeholder?: string;
+  /** 읽기 전용. 키 입력은 막지만 선택·복사는 가능. */
+  readOnly?: boolean;
+  /**
+   * 좌측 줄 번호 표시 여부.
+   * @default true
+   */
+  showLineNumbers?: boolean;
+  /** 에디터 최소 높이 (CSS 길이 단위). */
+  minHeight?: string;
+  /** 에디터 최대 높이 (CSS 길이 단위). 초과 시 내부 스크롤. */
+  maxHeight?: string;
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+}
+
+
+function languageExtension(language: CodeEditorLanguage): Extension {
+  switch (language) {
+    case "javascript":
+      return javascript();
+    case "typescript":
+      return javascript({ typescript: true });
+    case "jsx":
+      return javascript({ jsx: true });
+    case "tsx":
+      return javascript({ jsx: true, typescript: true });
+    case "json":
+      return json();
+    case "css":
+      return cssLang();
+    case "html":
+      return html();
+    case "markdown":
+      return markdown();
+    case "text":
+    default:
+      return [];
+  }
+}
+
+/**
+ * CodeMirror 6 기반 인라인 코드 에디터.
+ *
+ * Controlled (value/onChange) · Uncontrolled (defaultValue + 선택 onChange) 모두 지원.
+ * 라우터·외부 상태와 동기화할 게 없는 경우 defaultValue 한 줄로 끝 — useState 불필요.
+ *
+ * 신택스 하이라이팅·자동 들여쓰기·괄호 매칭 등은 CodeMirror `basicSetup` 을 그대로 사용,
+ * 컬러·여백은 sh-ui 토큰(`--background`, `--foreground`, `--border` 등)으로 매핑돼 테마에 자동 추종.
+ */
+export function CodeEditor({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  language = "text",
+  placeholder,
+  readOnly = false,
+  showLineNumbers = true,
+  minHeight,
+  maxHeight,
+  className,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+}: CodeEditorProps) {
+  const isControlled = valueProp !== undefined;
+  const hostRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const initialDocRef = useRef(valueProp ?? defaultValue ?? "");
+
+  const compartments = useMemo(
+    () => ({
+      language: new Compartment(),
+      readOnly: new Compartment(),
+      lineNumbers: new Compartment(),
+      placeholder: new Compartment(),
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    if (!hostRef.current) return;
+
+    const extensions: Extension[] = [
+      basicSetup,
+      EditorView.lineWrapping,
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          onChangeRef.current?.(update.state.doc.toString());
+        }
+      }),
+      compartments.language.of(languageExtension(language)),
+      compartments.readOnly.of(EditorState.readOnly.of(readOnly)),
+      compartments.lineNumbers.of(
+        showLineNumbers
+          ? []
+          : EditorView.theme({ ".cm-gutters": { display: "none" } }),
+      ),
+      compartments.placeholder.of(placeholder ? placeholderExt(placeholder) : []),
+    ];
+
+    const view = new EditorView({
+      state: EditorState.create({ doc: initialDocRef.current, extensions }),
+      parent: hostRef.current,
+    });
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+    // 초기 마운트 1회만 — 후속 동기화는 별도 이펙트가 처리
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // controlled 모드에서만 외부 value 를 에디터 doc 에 동기화. uncontrolled 면 에디터가 자체 source-of-truth.
+  useEffect(() => {
+    if (!isControlled) return;
+    const view = viewRef.current;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (current === valueProp) return;
+    view.dispatch({
+      changes: { from: 0, to: current.length, insert: valueProp ?? "" },
+    });
+  }, [isControlled, valueProp]);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: compartments.language.reconfigure(languageExtension(language)),
+    });
+  }, [language, compartments.language]);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: compartments.readOnly.reconfigure(EditorState.readOnly.of(readOnly)),
+    });
+  }, [readOnly, compartments.readOnly]);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: compartments.lineNumbers.reconfigure(
+        showLineNumbers
+          ? []
+          : EditorView.theme({ ".cm-gutters": { display: "none" } }),
+      ),
+    });
+  }, [showLineNumbers, compartments.lineNumbers]);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: compartments.placeholder.reconfigure(
+        placeholder ? placeholderExt(placeholder) : [],
+      ),
+    });
+  }, [placeholder, compartments.placeholder]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const node = view.contentDOM;
+    if (id) node.id = id;
+    if (ariaLabel) node.setAttribute("aria-label", ariaLabel);
+    else node.removeAttribute("aria-label");
+    if (ariaLabelledBy) node.setAttribute("aria-labelledby", ariaLabelledBy);
+    else node.removeAttribute("aria-labelledby");
+  }, [id, ariaLabel, ariaLabelledBy]);
+
+  return (
+    <div
+      ref={hostRef}
+      className={cn(styles["code-editor"], className)}
+      data-readonly={readOnly || undefined}
+      style={
+        {
+          "--sh-ui-code-editor-min-height": minHeight,
+          "--sh-ui-code-editor-max-height": maxHeight,
+        } as React.CSSProperties
+      }
+    />
+  );
+}

package/data/registry/react/components/code-editor/styles.module.css

@@ -0,0 +1,76 @@
+.code-editor {
+  position: relative;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  overflow: hidden;
+  transition: border-color var(--duration-fast);
+}
+.code-editor:focus-within {
+  border-color: var(--foreground);
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+.code-editor[data-readonly] {
+  background: var(--background-subtle);
+}
+
+.code-editor .cm-editor {
+  background: transparent;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+.code-editor .cm-editor.cm-focused {
+  outline: none;
+}
+.code-editor .cm-scroller {
+  font-family: inherit;
+  min-height: var(--sh-ui-code-editor-min-height, 7.5rem);
+  max-height: var(--sh-ui-code-editor-max-height, 25rem);
+}
+.code-editor .cm-content {
+  caret-color: var(--foreground);
+  color: var(--foreground);
+  padding: var(--space-3) 0;
+}
+.code-editor .cm-line {
+  padding: 0 var(--space-3);
+}
+.code-editor .cm-gutters {
+  background: var(--background-subtle);
+  color: var(--foreground-muted);
+  border-right: 1px solid var(--border);
+}
+.code-editor .cm-activeLineGutter,
+.code-editor .cm-activeLine {
+  background: var(--background-muted);
+}
+.code-editor .cm-cursor,
+.code-editor .cm-dropCursor {
+  border-left-color: var(--foreground);
+}
+.code-editor .cm-selectionBackground,
+.code-editor .cm-editor .cm-selectionBackground,
+.code-editor .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
+.code-editor ::selection {
+  background: var(--background-muted) !important;
+}
+.code-editor .cm-placeholder {
+  color: var(--foreground-muted);
+}
+.code-editor .cm-tooltip {
+  background: var(--background);
+  border: 1px solid var(--border);
+  color: var(--foreground);
+  border-radius: calc(var(--radius) - 2px);
+}
+.code-editor .cm-tooltip-autocomplete > ul > li[aria-selected] {
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+.code-editor .cm-matchingBracket,
+.code-editor .cm-nonmatchingBracket {
+  background: var(--background-muted);
+  color: var(--foreground);
+}