sh-ui-cli 0.48.0 → 0.50.0

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

@@ -0,0 +1,141 @@
+import { style } from "@vanilla-extract/css";
+
+export const label = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.125rem",
+  fontSize: "var(--text-sm)",
+  fontWeight: "var(--weight-medium)",
+  lineHeight: 1.4,
+  color: "var(--foreground)",
+  cursor: "pointer",
+  userSelect: "none",
+  selectors: {
+    [`&:not(:has(${label__title}`]: {
+      display: "block",
+    },
+    [`&[data-required] > ${label__title}::after`]: {
+      content: "\" *\"",
+      color: "var(--danger)",
+      fontWeight: "var(--weight-semibold)",
+    },
+    [`&:has(+ .input:required) > ${label__title}::after`]: {
+      content: "\" *\"",
+      color: "var(--danger)",
+      fontWeight: "var(--weight-semibold)",
+    },
+    [`&:has(+ .input-wrap .input:required) > ${label__title}::after`]: {
+      content: "\" *\"",
+      color: "var(--danger)",
+      fontWeight: "var(--weight-semibold)",
+    },
+    [`&:has(+ .textarea:required) > ${label__title}::after`]: {
+      content: "\" *\"",
+      color: "var(--danger)",
+      fontWeight: "var(--weight-semibold)",
+    },
+    [`&:has(+ .combobox__input:required) > ${label__title}::after`]: {
+      content: "\" *\"",
+      color: "var(--danger)",
+      fontWeight: "var(--weight-semibold)",
+    },
+    [`&[data-required]:not(:has(${label__title}))::after`]: {
+      content: "\" *\"",
+      color: "var(--danger)",
+      fontWeight: "var(--weight-semibold)",
+    },
+    [`&:not(:has(${label__title})):has(+ .input:required)::after`]: {
+      content: "\" *\"",
+      color: "var(--danger)",
+      fontWeight: "var(--weight-semibold)",
+    },
+    [`&:not(:has(${label__title})):has(+ .input-wrap .input:required)::after`]: {
+      content: "\" *\"",
+      color: "var(--danger)",
+      fontWeight: "var(--weight-semibold)",
+    },
+    [`&:not(:has(${label__title})):has(+ .textarea:required)::after`]: {
+      content: "\" *\"",
+      color: "var(--danger)",
+      fontWeight: "var(--weight-semibold)",
+    },
+    [`&:not(:has(${label__title})):has(+ .combobox__input:required)::after`]: {
+      content: "\" *\"",
+      color: "var(--danger)",
+      fontWeight: "var(--weight-semibold)",
+    },
+    "&:has(+ .input:disabled)": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+    },
+    "&:has(+ .input-wrap .input:disabled)": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+    },
+    "&:has(+ .textarea:disabled)": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+    },
+    "&:has(+ .select__trigger:disabled)": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+    },
+    "&:has(+ .combobox__input:disabled)": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+    },
+    "&:has(+ .date-picker__trigger:disabled)": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+    },
+    "&:has(+ .file-upload .file-upload__dropzone--disabled)": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+    },
+  },
+});
+
+export const label__subtitle = style({
+  display: "block",
+  fontWeight: "var(--weight-regular)",
+  fontSize: "0.8125rem",
+  color: "var(--foreground)",
+});
+
+export const label__description = style({
+  display: "block",
+  margin: 0,
+  fontWeight: "var(--weight-regular)",
+  fontSize: "0.8125rem",
+  lineHeight: 1.4,
+  color: "var(--foreground-muted)",
+});
+
+export const label__caption = style({
+  margin: 0,
+  fontWeight: "var(--weight-regular)",
+  fontSize: "var(--text-xs)",
+  lineHeight: 1.3,
+  color: "var(--foreground-subtle, var(--foreground-muted))",
+  opacity: 0.75,
+  selectors: {
+    "&))": {
+      display: "block",
+    },
+  },
+});
+
+export const label__title = style({
+  fontWeight: "var(--weight-semibold)",
+  fontSize: "var(--text-sm)",
+  color: "var(--foreground)",
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "label": label,
+  "label__subtitle": label__subtitle,
+  "label__description": label__description,
+  "label__caption": label__caption,
+  "label__title": label__title,
+};

package/data/registry/react/components/markdown-editor/index.vanilla-extract.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 { 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

@@ -0,0 +1,231 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,53 @@
+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,
+};