sh-ui-cli 0.52.0 → 0.52.2

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

@@ -1,169 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const carousel = style({
-  position: "relative",
-  width: "100%",
-});
-
-export const carousel__content = style({
-  display: "flex",
-  gap: "var(--space-4)",
-  overflowX: "auto",
-  overflowY: "hidden",
-  scrollSnapType: "x mandatory",
-  scrollBehavior: "smooth",
-  scrollbarWidth: "none",
-  MsOverflowStyle: "none",
-  WebkitOverflowScrolling: "touch",
-  overscrollBehaviorInline: "contain",
-  selectors: {
-    "&::-webkit-scrollbar": {
-      display: "none",
-    },
-    "&[data-orientation="vertical"]": {
-      flexDirection: "column",
-      overflowX: "hidden",
-      overflowY: "auto",
-      scrollSnapType: "y mandatory",
-      height: "20rem",
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      scrollBehavior: "auto",
-    },
-  },
-});
-
-export const carousel__item = style({
-  flex: "0 0 100%",
-  minWidth: 0,
-  scrollSnapAlign: "start",
-  scrollSnapStop: "always",
-  selectors: {
-    "&[data-orientation="vertical"]": {
-      flexBasis: "auto",
-    },
-  },
-});
-
-export const carousel__nav = style({
-  position: "absolute",
-  top: "50%",
-  width: "2rem",
-  height: "2rem",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  background: "var(--background)",
-  color: "var(--foreground)",
-  border: "1px solid var(--border)",
-  borderRadius: "999px",
-  cursor: "pointer",
-  transform: "translateY(-50%)",
-  zIndex: 1,
-  transition: "opacity var(--duration-fast) ease,\n    background var(--duration-fast) ease",
-  selectors: {
-    "&:hover:not(:disabled)": {
-      background: "var(--background-muted)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-    "&:disabled": {
-      opacity: 0.4,
-      cursor: "not-allowed",
-    },
-    "&[data-orientation="vertical"]": {
-      top: "auto",
-      left: "50%",
-      transform: "translateX(-50%)",
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-  },
-});
-
-export const carouselNavPrev = style({
-  left: "-1rem",
-  selectors: {
-    "&[data-orientation="vertical"]": {
-      top: "-1rem",
-      left: "50%",
-    },
-  },
-});
-
-export const carouselNavNext = style({
-  right: "-1rem",
-  selectors: {
-    "&[data-orientation="vertical"]": {
-      bottom: "-1rem",
-      top: "auto",
-      left: "50%",
-    },
-  },
-});
-
-export const carousel__indicators = style({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  marginTop: "var(--space-3)",
-  selectors: {
-    "&[data-orientation="vertical"]": {
-      position: "absolute",
-      top: "50%",
-      right: "0.5rem",
-      marginTop: 0,
-      flexDirection: "column",
-      transform: "translateY(-50%)",
-    },
-  },
-});
-
-export const carousel__indicator = style({
-  width: "0.5rem",
-  height: "0.5rem",
-  padding: 0,
-  background: "var(--border)",
-  border: "none",
-  borderRadius: "999px",
-  cursor: "pointer",
-  transition: "background var(--duration-fast) ease,\n    transform var(--duration-fast) ease",
-  selectors: {
-    "&:hover": {
-      background: "var(--border-strong)",
-    },
-    "&[data-active]": {
-      background: "var(--foreground)",
-      transform: "scale(1.2)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-  },
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "carousel": carousel,
-  "carousel__content": carousel__content,
-  "carousel__item": carousel__item,
-  "carousel__nav": carousel__nav,
-  "carousel__nav--prev": carouselNavPrev,
-  "carousel__nav--next": carouselNavNext,
-  "carousel__indicators": carousel__indicators,
-  "carousel__indicator": carousel__indicator,
-};

package/data/registry/react/components/checkbox/index.vanilla-extract.tsx

@@ -1,96 +0,0 @@
-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 { byKey, checkbox, checkbox__indicator, checkboxGroup } from "./styles.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(checkbox, className)}
-      {...props}
-    >
-      <BaseCheckbox.Indicator className={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(checkboxGroup, 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.css.ts

@@ -1,74 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const checkbox = style({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "1.125rem",
-  height: "1.125rem",
-  border: "1px solid var(--border-strong)",
-  borderRadius: "calc(var(--radius) - 2px)",
-  background: "var(--background)",
-  color: "var(--primary-foreground)",
-  cursor: "pointer",
-  flexShrink: 0,
-  transition: "background-color var(--duration-fast), border-color var(--duration-fast)",
-  WebkitTapHighlightColor: "transparent",
-  selectors: {
-    "&:hover:not([data-disabled])": {
-      borderColor: "var(--foreground)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-    "&[data-checked]": {
-      background: "var(--primary)",
-      borderColor: "var(--primary)",
-    },
-    "&[data-indeterminate]": {
-      background: "var(--primary)",
-      borderColor: "var(--primary)",
-    },
-    "&[data-disabled]": {
-      opacity: "var(--opacity-disabled)",
-      cursor: "not-allowed",
-    },
-  },
-  "@media": {
-    "(hover: none) and (pointer: coarse)": {
-      width: "1.25rem",
-      height: "1.25rem",
-    },
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-  },
-});
-
-export const checkbox__indicator = style({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-});
-
-export const checkboxGroup = style({
-  display: "flex",
-  gap: "0.625rem",
-  selectors: {
-    "&[data-orientation="vertical"]": {
-      flexDirection: "column",
-    },
-    "&[data-orientation="horizontal"]": {
-      flexDirection: "row",
-      flexWrap: "wrap",
-    },
-  },
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "checkbox": checkbox,
-  "checkbox__indicator": checkbox__indicator,
-  "checkbox-group": checkboxGroup,
-};

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

@@ -1,230 +0,0 @@
-"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 { byKey, codeEditor } from "./styles.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(codeEditor, 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.css.ts

@@ -1,97 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const codeEditor = style({
-  position: "relative",
-  border: "1px solid var(--border)",
-  borderRadius: "var(--radius)",
-  background: "var(--background)",
-  fontSize: "0.8125rem",
-  lineHeight: 1.6,
-  overflow: "hidden",
-  transition: "border-color var(--duration-fast)",
-  selectors: {
-    "&:focus-within": {
-      borderColor: "var(--foreground)",
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-    "&[data-readonly]": {
-      background: "var(--background-subtle)",
-    },
-    "& .cm-editor": {
-      background: "transparent",
-      fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-    },
-    "& .cm-editor.cm-focused": {
-      outline: "none",
-    },
-    "& .cm-scroller": {
-      fontFamily: "inherit",
-      minHeight: "var(--sh-ui-code-editor-min-height, 7.5rem)",
-      maxHeight: "var(--sh-ui-code-editor-max-height, 25rem)",
-    },
-    "& .cm-content": {
-      caretColor: "var(--foreground)",
-      color: "var(--foreground)",
-      padding: "var(--space-3) 0",
-    },
-    "& .cm-line": {
-      padding: "0 var(--space-3)",
-    },
-    "& .cm-gutters": {
-      background: "var(--background-subtle)",
-      color: "var(--foreground-muted)",
-      borderRight: "1px solid var(--border)",
-    },
-    "& .cm-activeLineGutter": {
-      background: "var(--background-muted)",
-    },
-    "& .cm-activeLine": {
-      background: "var(--background-muted)",
-    },
-    "& .cm-cursor": {
-      borderLeftColor: "var(--foreground)",
-    },
-    "& .cm-dropCursor": {
-      borderLeftColor: "var(--foreground)",
-    },
-    "& .cm-selectionBackground": {
-      background: "var(--background-muted) !important",
-    },
-    "& .cm-editor .cm-selectionBackground": {
-      background: "var(--background-muted) !important",
-    },
-    "& .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-      background: "var(--background-muted) !important",
-    },
-    "& ::selection": {
-      background: "var(--background-muted) !important",
-    },
-    "& .cm-placeholder": {
-      color: "var(--foreground-muted)",
-    },
-    "& .cm-tooltip": {
-      background: "var(--background)",
-      border: "1px solid var(--border)",
-      color: "var(--foreground)",
-      borderRadius: "calc(var(--radius) - 2px)",
-    },
-    "& .cm-tooltip-autocomplete > ul > li[aria-selected]": {
-      background: "var(--background-muted)",
-      color: "var(--foreground)",
-    },
-    "& .cm-matchingBracket": {
-      background: "var(--background-muted)",
-      color: "var(--foreground)",
-    },
-    "& .cm-nonmatchingBracket": {
-      background: "var(--background-muted)",
-      color: "var(--foreground)",
-    },
-  },
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "code-editor": codeEditor,
-};