sh-ui-cli 0.52.1 → 0.52.2

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

@@ -1,119 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { CodeEditor } from "../code-editor";
-import { byKey, mdEditor, mdEditorRight, mdEditorBottom, mdEditorNoPreview, mdEditorSource, mdEditorPreview, mdEditorPreviewInner } from "./styles.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(
-        mdEditor,
-        preview && byKey[`md-editor--${previewPosition}`],
-        !preview && mdEditorNoPreview,
-        className,
-      )}
-      data-readonly={readOnly || undefined}
-    >
-      <div className={mdEditorSource}>
-        <CodeEditor
-          value={value}
-          onChange={handleChange}
-          language="markdown"
-          placeholder={placeholder}
-          readOnly={readOnly}
-          minHeight={minHeight}
-          maxHeight={maxHeight}
-          aria-label={ariaLabel}
-        />
-      </div>
-      {preview && (
-        <div
-          className={mdEditorPreview}
-          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={mdEditorPreviewInner}>
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>{value}</ReactMarkdown>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/data/registry/react/components/markdown-editor/styles.css.ts

@@ -1,231 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const mdEditor = style({
-  display: "grid",
-  gap: "var(--space-3)",
-});
-
-export const mdEditorRight = style({
-  gridTemplateColumns: "1fr 1fr",
-  "@media": {
-    "(max-width: 768px)": {
-      gridTemplateColumns: "1fr",
-    },
-  },
-});
-
-export const mdEditorBottom = style({
-  gridTemplateColumns: "1fr",
-});
-
-export const mdEditorNoPreview = style({
-  gridTemplateColumns: "1fr",
-});
-
-export const mdEditorSource = style({
-  minWidth: 0,
-});
-
-export const mdEditorPreview = style({
-  minWidth: 0,
-  border: "1px solid var(--border)",
-  borderRadius: "var(--radius)",
-  background: "var(--background)",
-  overflow: "hidden",
-});
-
-export const mdEditorPreviewInner = style({
-  padding: "var(--space-3) var(--space-4)",
-  minHeight: "var(--sh-ui-md-editor-min-height, 7.5rem)",
-  maxHeight: "var(--sh-ui-md-editor-max-height, 25rem)",
-  overflowY: "auto",
-  fontSize: "0.875rem",
-  lineHeight: 1.65,
-  color: "var(--foreground)",
-  selectors: {
-    "& > :first-child": {
-      marginTop: 0,
-    },
-    "& > :last-child": {
-      marginBottom: 0,
-    },
-    "& h1": {
-      marginTop: "var(--space-4)",
-      marginBottom: "var(--space-2)",
-      fontWeight: 600,
-      lineHeight: 1.3,
-      color: "var(--foreground)",
-    },
-    "& h2": {
-      marginTop: "var(--space-4)",
-      marginBottom: "var(--space-2)",
-      fontWeight: 600,
-      lineHeight: 1.3,
-      color: "var(--foreground)",
-    },
-    "& h3": {
-      marginTop: "var(--space-4)",
-      marginBottom: "var(--space-2)",
-      fontWeight: 600,
-      lineHeight: 1.3,
-      color: "var(--foreground)",
-    },
-    "& h4": {
-      marginTop: "var(--space-4)",
-      marginBottom: "var(--space-2)",
-      fontWeight: 600,
-      lineHeight: 1.3,
-      color: "var(--foreground)",
-    },
-    "& h5": {
-      marginTop: "var(--space-4)",
-      marginBottom: "var(--space-2)",
-      fontWeight: 600,
-      lineHeight: 1.3,
-      color: "var(--foreground)",
-    },
-    "& h6": {
-      marginTop: "var(--space-4)",
-      marginBottom: "var(--space-2)",
-      fontWeight: 600,
-      lineHeight: 1.3,
-      color: "var(--foreground)",
-    },
-    "& h1": {
-      fontSize: "1.5rem",
-    },
-    "& h2": {
-      fontSize: "1.25rem",
-    },
-    "& h3": {
-      fontSize: "1.125rem",
-    },
-    "& h4": {
-      fontSize: "1rem",
-    },
-    "& h5": {
-      fontSize: "1rem",
-    },
-    "& h6": {
-      fontSize: "1rem",
-    },
-    "& p": {
-      marginTop: 0,
-      marginBottom: "var(--space-3)",
-    },
-    "& ul": {
-      marginTop: 0,
-      marginBottom: "var(--space-3)",
-    },
-    "& ol": {
-      marginTop: 0,
-      marginBottom: "var(--space-3)",
-    },
-    "& blockquote": {
-      marginTop: 0,
-      marginBottom: "var(--space-3)",
-    },
-    "& pre": {
-      marginTop: 0,
-      marginBottom: "var(--space-3)",
-    },
-    "& table": {
-      marginTop: 0,
-      marginBottom: "var(--space-3)",
-    },
-    "& ul": {
-      paddingLeft: "var(--space-5)",
-    },
-    "& ol": {
-      paddingLeft: "var(--space-5)",
-    },
-    "& li": {
-      marginBottom: "var(--space-1)",
-    },
-    "& li > input[type="checkbox"]": {
-      marginRight: "var(--space-2)",
-    },
-    "& a": {
-      color: "var(--primary)",
-      textDecoration: "underline",
-      textUnderlineOffset: "2px",
-    },
-    "& a:hover": {
-      textDecorationThickness: "2px",
-    },
-    "& blockquote": {
-      padding: "var(--space-2) var(--space-3)",
-      borderLeft: "3px solid var(--border-strong)",
-      background: "var(--background-subtle)",
-      color: "var(--foreground-muted)",
-      borderRadius: "0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0",
-    },
-    "& blockquote > :last-child": {
-      marginBottom: 0,
-    },
-    "& code": {
-      fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-      fontSize: "0.875em",
-      padding: "0.125rem 0.375rem",
-      borderRadius: "calc(var(--radius) - 4px)",
-      background: "var(--background-muted)",
-      color: "var(--foreground)",
-    },
-    "& pre": {
-      padding: "var(--space-3)",
-      border: "1px solid var(--border)",
-      borderRadius: "var(--radius)",
-      background: "var(--background-subtle)",
-      overflowX: "auto",
-      fontSize: "0.8125rem",
-      lineHeight: 1.6,
-    },
-    "& pre > code": {
-      padding: 0,
-      background: "transparent",
-      fontSize: "inherit",
-    },
-    "& hr": {
-      border: 0,
-      borderTop: "1px solid var(--border)",
-      margin: "var(--space-4) 0",
-    },
-    "& table": {
-      width: "100%",
-      borderCollapse: "collapse",
-      fontSize: "0.875rem",
-    },
-    "& th": {
-      padding: "var(--space-2) var(--space-3)",
-      border: "1px solid var(--border)",
-      textAlign: "left",
-    },
-    "& td": {
-      padding: "var(--space-2) var(--space-3)",
-      border: "1px solid var(--border)",
-      textAlign: "left",
-    },
-    "& thead": {
-      background: "var(--background-subtle)",
-    },
-    "& img": {
-      maxWidth: "100%",
-      height: "auto",
-      borderRadius: "calc(var(--radius) - 2px)",
-    },
-    "& del": {
-      color: "var(--foreground-muted)",
-    },
-  },
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "md-editor": mdEditor,
-  "md-editor--right": mdEditorRight,
-  "md-editor--bottom": mdEditorBottom,
-  "md-editor--no-preview": mdEditorNoPreview,
-  "md-editor__source": mdEditorSource,
-  "md-editor__preview": mdEditorPreview,
-  "md-editor__preview-inner": mdEditorPreviewInner,
-};

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

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
-import { byKey, menubar } from "./styles.css";
-
-import { cn } from "@SH_UI_UTILS@";
-type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
-
-
-/**
- * 상단 앱 메뉴바(파일/편집/보기 등). 내부에 DropdownMenu를 나란히 배치하여
- * 좌우 화살표로 메뉴 간 이동이 가능해진다.
- *
- *   <Menubar>
- *     <DropdownMenu>
- *       <DropdownMenuTrigger>파일</DropdownMenuTrigger>
- *       <DropdownMenuContent>...</DropdownMenuContent>
- *     </DropdownMenu>
- *     <DropdownMenu>...</DropdownMenu>
- *   </Menubar>
- */
-export const Menubar = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenubar>>
->(function Menubar({ className, ...props }, ref) {
-  return (
-    <BaseMenubar
-      ref={ref}
-      className={cn(menubar, className)}
-      {...props}
-    />
-  );
-});

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

@@ -1,53 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const menubar = style({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "var(--space-1)",
-  padding: "var(--space-1)",
-  background: "var(--background)",
-  border: "1px solid var(--border)",
-  borderRadius: "var(--radius)",
-  boxShadow: "0 1px 2px rgba(0, 0, 0, 0.04)",
-  selectors: {
-    "& .dm__trigger": {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: "var(--space-1)",
-      padding: "var(--space-1) var(--space-3)",
-      height: "var(--control-md)",
-      border: 0,
-      borderRadius: "calc(var(--radius) - 2px)",
-      background: "transparent",
-      color: "var(--foreground)",
-      fontSize: "var(--text-sm)",
-      lineHeight: 1,
-      cursor: "pointer",
-      transition: "background-color var(--duration-fast), color var(--duration-fast)",
-    },
-    "& .dm__trigger:hover": {
-      background: "var(--background-muted)",
-    },
-    "& .dm__trigger[data-popup-open]": {
-      background: "var(--background-muted)",
-    },
-    "& .dm__trigger:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "-1px",
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      selectors: {
-        "& .dm__trigger": {
-          transition: "none",
-        },
-      },
-    },
-  },
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "menubar": menubar,
-};

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

@@ -1,148 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { byKey, numericInput, numericInputInput, numericInputUnit } from "./styles.css";
-
-
-import { cn } from "@SH_UI_UTILS@";
-export interface NumericInputProps
-  extends Omit<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    "value" | "defaultValue" | "onChange" | "type" | "min" | "max" | "step"
-  > {
-  /** 제어 모드 값. */
-  value?: number;
-  /** 비제어 모드 초기값. */
-  defaultValue?: number;
-  /** 값 변경 콜백. min/max 범위로 자동 clamp 된 값이 전달된다. */
-  onValueChange?: (value: number) => void;
-  /** 허용 최솟값. 입력값이 이보다 작으면 자동 clamp. */
-  min?: number;
-  /** 허용 최댓값. 입력값이 이보다 크면 자동 clamp. */
-  max?: number;
-  /** 화살표 키 step 폭. 디폴트 1. */
-  step?: number;
-  /** 값 우측에 부착할 단위 표시 (px / ms / % / ° 등). */
-  unit?: React.ReactNode;
-}
-
-/**
- * 슬라이더 동반·토큰 편집 등 컴팩트 컨텍스트에 적합한 숫자 입력.
- *
- * 구현 특이점:
- * - `type="text"` + `inputMode="decimal"` — type=number 가 Chrome 에서 select() 와
- *   selectionStart/End 를 지원하지 않아 "0 위에 2 타이핑 → 02" 회귀가 발생함.
- *   text 로 바꾸고 우리가 직접 숫자 검증/클램프.
- * - 내부 buffer state — "-", "1.", "" 같이 입력 중간 transient 상태 허용. 유효한
- *   숫자가 되는 순간 onValueChange 즉시 호출. 포커스 잃을 때 정규화.
- * - focus 시 setTimeout(0) → select() — mouseup 의 커서 재배치 이후에 selection
- *   적용되도록.
- * - ArrowUp/Down 으로 step 조정, Enter 로 blur(commit).
- *
- * 일반 폼 입력에는 `Input` / `NumberInput` 사용 권장.
- */
-export const NumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
-  (
-    {
-      value,
-      defaultValue,
-      onValueChange,
-      min,
-      max,
-      step = 1,
-      unit,
-      className,
-      onFocus,
-      onBlur,
-      onKeyDown,
-      ...props
-    },
-    ref,
-  ) => {
-    const isControlled = value !== undefined;
-    const [internal, setInternal] = React.useState<number>(defaultValue ?? 0);
-    const current = isControlled ? value! : internal;
-
-    const [buffer, setBuffer] = React.useState<string>(() => String(current));
-    const focusedRef = React.useRef(false);
-
-    // 포커스 잡지 않은 동안 외부 value 변경되면 buffer 동기화.
-    React.useEffect(() => {
-      if (!focusedRef.current) setBuffer(String(current));
-    }, [current]);
-
-    const clamp = (n: number) => {
-      let v = n;
-      if (min !== undefined && v < min) v = min;
-      if (max !== undefined && v > max) v = max;
-      return v;
-    };
-
-    const commit = (n: number): number => {
-      const c = clamp(n);
-      if (!isControlled) setInternal(c);
-      onValueChange?.(c);
-      return c;
-    };
-
-    return (
-      <span className={numericInput}>
-        <input
-          ref={ref}
-          type="text"
-          inputMode="decimal"
-          className={cn(numericInputInput, className)}
-          value={buffer}
-          onChange={(e) => {
-            const raw = e.target.value;
-            setBuffer(raw);
-            // 입력 중간 상태("", "-", ".", "-.") 는 commit 안 함 — 사용자 타이핑 흐름 유지.
-            if (raw === "" || raw === "-" || raw === "." || raw === "-.") return;
-            const n = Number(raw);
-            if (Number.isFinite(n)) commit(n);
-          }}
-          onFocus={(e) => {
-            focusedRef.current = true;
-            const t = e.currentTarget;
-            // setTimeout 0 로 미뤄야 mouseup 의 커서 재배치 이후에 select 가 적용됨.
-            setTimeout(() => t.select(), 0);
-            onFocus?.(e);
-          }}
-          onBlur={(e) => {
-            focusedRef.current = false;
-            const n = Number(buffer);
-            if (buffer !== "" && Number.isFinite(n)) {
-              const c = commit(n);
-              setBuffer(String(c));
-            } else {
-              // 비어있거나 NaN — 마지막 유효 값으로 복원
-              setBuffer(String(current));
-            }
-            onBlur?.(e);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "ArrowUp") {
-              e.preventDefault();
-              const next = commit(current + step);
-              setBuffer(String(next));
-            } else if (e.key === "ArrowDown") {
-              e.preventDefault();
-              const next = commit(current - step);
-              setBuffer(String(next));
-            } else if (e.key === "Enter") {
-              e.currentTarget.blur();
-            }
-            onKeyDown?.(e);
-          }}
-          {...props}
-        />
-        {unit !== undefined && unit !== "" && (
-          <span className={numericInputUnit} aria-hidden>
-            {unit}
-          </span>
-        )}
-      </span>
-    );
-  },
-);
-NumericInput.displayName = "NumericInput";

package/data/registry/react/components/numeric-input/styles.css.ts

@@ -1,65 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const numericInput = style({
-  display: "inline-flex",
-  alignItems: "baseline",
-  gap: "2px",
-  minWidth: "3rem",
-  justifyContent: "flex-end",
-});
-
-export const numericInputInput = style({
-  width: "2.5rem",
-  padding: "2px 4px",
-  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-  fontSize: "var(--text-xs)",
-  lineHeight: 1.2,
-  textAlign: "right",
-  border: "1px solid transparent",
-  borderRadius: "calc(var(--radius) - 4px)",
-  background: "transparent",
-  color: "var(--foreground)",
-  appearance: "textfield",
-  MozAppearance: "textfield",
-  transition: "border-color var(--duration-fast) var(--ease-standard),\n    background-color var(--duration-fast) var(--ease-standard)",
-  selectors: {
-    "&::-webkit-inner-spin-button": {
-      WebkitAppearance: "none",
-      margin: 0,
-    },
-    "&::-webkit-outer-spin-button": {
-      WebkitAppearance: "none",
-      margin: 0,
-    },
-    "&:hover:not(:disabled):not(:focus)": {
-      borderColor: "var(--border)",
-    },
-    "&:focus": {
-      outline: "none",
-      borderColor: "var(--foreground)",
-      background: "var(--background)",
-    },
-    "&:focus-visible": {
-      outline: "none",
-      borderColor: "var(--foreground)",
-      background: "var(--background)",
-    },
-    "&:disabled": {
-      cursor: "not-allowed",
-      opacity: "var(--opacity-disabled)",
-    },
-  },
-});
-
-export const numericInputUnit = style({
-  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-  fontSize: "var(--text-xs)",
-  color: "var(--foreground-muted)",
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "numeric-input": numericInput,
-  "numeric-input__input": numericInputInput,
-  "numeric-input__unit": numericInputUnit,
-};