sh-ui-cli 0.48.0 → 0.50.0

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

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { byKey, radio, radio__indicator, radioGroup } from "./styles.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+/* ───────────── Radio ───────────── */
+
+export type RadioProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseRadio.Root>,
+  "className"
+> & {
+  className?: string;
+};
+
+/**
+ * 단일 선택지. 단독으로 쓰지 않고 반드시 `RadioGroup` 안에 두 개 이상을 묶어 사용한다.
+ * 단일 선택이지만 즉시 적용되는 설정에는 Switch를, 다중 선택에는 Checkbox를 권장.
+ */
+export const Radio = React.forwardRef<HTMLElement, RadioProps>(
+  ({ className, ...props }, ref) => (
+    <BaseRadio.Root
+      ref={ref}
+      className={cn(radio, className)}
+      {...props}
+    >
+      <BaseRadio.Indicator className={radio__indicator} />
+    </BaseRadio.Root>
+  ),
+);
+Radio.displayName = "Radio";
+
+/* ───────────── RadioGroup ───────────── */
+
+export type RadioGroupProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseRadioGroup>,
+  "className"
+> & {
+  className?: string;
+  /**
+   * 그룹 내 항목 배치 방향.
+   * - `vertical` — 세로 나열 (기본)
+   * - `horizontal` — 가로 나열. 짧은 라벨 2~3개에만 권장
+   *
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+/**
+ * 여러 Radio를 묶는 컨테이너. 같은 `name` 아래 단일 선택을 보장하고,
+ * 키보드 화살표로 항목 간 이동이 가능하다. 그룹 라벨은 외부 `<Label>`로 제공할 것.
+ */
+export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <BaseRadioGroup
+      ref={ref}
+      className={cn(radioGroup, className)}
+      data-orientation={orientation}
+      {...props}
+    />
+  ),
+);
+RadioGroup.displayName = "RadioGroup";

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

@@ -0,0 +1,79 @@
+import { style } from "@vanilla-extract/css";
+
+export const radio = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "1.125rem",
+  height: "1.125rem",
+  border: "1px solid var(--border-strong)",
+  borderRadius: "999px",
+  background: "var(--background)",
+  cursor: "pointer",
+  flexShrink: 0,
+  transition: "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]": {
+      borderColor: "var(--primary)",
+    },
+    "&[data-disabled]": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+    },
+    [`&[data-checked] ${radio__indicator}`]: {
+      transform: "scale(1)",
+    },
+  },
+  "@media": {
+    "(hover: none) and (pointer: coarse)": {
+      width: "1.25rem",
+      height: "1.25rem",
+    },
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+    },
+  },
+});
+
+export const radio__indicator = style({
+  width: "0.5rem",
+  height: "0.5rem",
+  borderRadius: "999px",
+  background: "var(--primary)",
+  transform: "scale(0)",
+  transition: "transform var(--duration-fast) ease-out",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+    },
+  },
+});
+
+export const radioGroup = 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> = {
+  "radio": radio,
+  "radio__indicator": radio__indicator,
+  "radio-group": radioGroup,
+};

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

@@ -0,0 +1,348 @@
+"use client";
+
+import { useCallback, useEffect } from "react";
+import { useEditor, EditorContent, type Editor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import Link from "@tiptap/extension-link";
+import { cn } from "@SH_UI_UTILS@";
+import {
+  BoldIcon,
+  ItalicIcon,
+  StrikethroughIcon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  ListIcon,
+  ListOrderedIcon,
+  QuoteIcon,
+  CodeIcon,
+  Code2Icon,
+  LinkIcon,
+  MinusIcon,
+  Undo2Icon,
+  Redo2Icon,
+} from "lucide-react";
+import { byKey, rte, rte__toolbar, rte__btn, rte__sep, rte__viewport, rte__content, rteIsEmpty } from "./styles.css";
+
+export interface RichTextEditorProps {
+  /**
+   * Controlled — 현재 HTML. 명시 시 외부 상태가 진실원천이 되고 onChange 로 갱신한다.
+   * 미지정이면 uncontrolled — Tiptap editor 가 자체 doc 으로 동작.
+   */
+  value?: string;
+  /**
+   * Uncontrolled 초기 HTML. value 미지정 시에만 사용.
+   * @default ""
+   */
+  defaultValue?: string;
+  /** 본문이 바뀔 때마다 호출 (controlled · uncontrolled 모두). HTML 문자열을 그대로 넘긴다. */
+  onChange?: (html: string) => void;
+  /** 비어 있을 때 표시할 placeholder. */
+  placeholder?: string;
+  /** 읽기 전용. 키 입력·툴바 차단. */
+  readOnly?: boolean;
+  /** 상단 툴바 숨기기. 본문 영역만 렌더. */
+  hideToolbar?: boolean;
+  /** 본문 영역의 최소 높이. */
+  minHeight?: string;
+  /** 본문 영역의 최대 높이. 초과 시 내부 스크롤. */
+  maxHeight?: string;
+  className?: string;
+  "aria-label"?: string;
+}
+
+
+/**
+ * Tiptap 기반 리치 텍스트 에디터.
+ *
+ * Controlled (value/onChange) · Uncontrolled (defaultValue) 모두 지원. 라우터·외부 상태와
+ * 동기화할 게 없는 단일 입력 폼이라면 defaultValue 한 줄로 끝 — useState 불필요.
+ *
+ * 기본 toolbar 는 StarterKit 의 표준 마크업(헤딩·리스트·인용·코드·링크 등) 을 다룬다.
+ */
+export function RichTextEditor({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  placeholder,
+  readOnly = false,
+  hideToolbar = false,
+  minHeight,
+  maxHeight,
+  className,
+  "aria-label": ariaLabel = "Rich text editor",
+}: RichTextEditorProps) {
+  const isControlled = valueProp !== undefined;
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Placeholder.configure({
+        placeholder: placeholder ?? "",
+        emptyEditorClass: rteIsEmpty,
+      }),
+      Link.configure({
+        openOnClick: false,
+        autolink: true,
+        HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" },
+      }),
+    ],
+    content: valueProp ?? defaultValue ?? "",
+    editable: !readOnly,
+    immediatelyRender: false,
+    onUpdate: ({ editor }) => {
+      onChange?.(editor.getHTML());
+    },
+    editorProps: {
+      attributes: {
+        class: rte__content,
+        "aria-label": ariaLabel,
+      },
+    },
+  });
+
+  // controlled 모드에서만 외부 value 를 에디터 doc 에 동기화
+  useEffect(() => {
+    if (!isControlled) return;
+    if (!editor) return;
+    if (editor.getHTML() === valueProp) return;
+    editor.commands.setContent(valueProp ?? "", { emitUpdate: false });
+  }, [isControlled, valueProp, editor]);
+
+  useEffect(() => {
+    editor?.setEditable(!readOnly);
+  }, [readOnly, editor]);
+
+  return (
+    <div
+      className={cn(rte, className)}
+      data-readonly={readOnly || undefined}
+      style={
+        {
+          "--sh-ui-rte-min-height": minHeight,
+          "--sh-ui-rte-max-height": maxHeight,
+        } as React.CSSProperties
+      }
+    >
+      {!hideToolbar && <Toolbar editor={editor} disabled={readOnly} />}
+      <EditorContent editor={editor} className={rte__viewport} />
+    </div>
+  );
+}
+
+interface ToolbarProps {
+  editor: Editor | null;
+  disabled: boolean;
+}
+
+function Toolbar({ editor, disabled }: ToolbarProps) {
+  const promptLink = useCallback(() => {
+    if (!editor) return;
+    const previous = editor.getAttributes("link").href as string | undefined;
+    const url = window.prompt("URL", previous ?? "https://");
+    if (url === null) return;
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+    const { empty } = editor.state.selection;
+    const inLink = editor.isActive("link");
+    if (empty && !inLink) {
+      // 선택 없이 호출되면 URL 자체를 anchor 텍스트로 삽입 — 빈 링크 마크가 남는 걸 방지
+      editor
+        .chain()
+        .focus()
+        .insertContent({
+          type: "text",
+          text: url,
+          marks: [{ type: "link", attrs: { href: url } }],
+        })
+        .run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+  }, [editor]);
+
+  return (
+    <div className={rte__toolbar} role="toolbar" aria-label="Formatting" aria-disabled={disabled || undefined}>
+      <ToolbarButton
+        editor={editor}
+        label="Bold"
+        icon={<BoldIcon size={16} />}
+        isActive={editor?.isActive("bold")}
+        canRun={() => !!editor?.can().toggleBold()}
+        run={() => editor?.chain().focus().toggleBold().run()}
+        disabled={disabled}
+      />
+      <ToolbarButton
+        editor={editor}
+        label="Italic"
+        icon={<ItalicIcon size={16} />}
+        isActive={editor?.isActive("italic")}
+        canRun={() => !!editor?.can().toggleItalic()}
+        run={() => editor?.chain().focus().toggleItalic().run()}
+        disabled={disabled}
+      />
+      <ToolbarButton
+        editor={editor}
+        label="Strikethrough"
+        icon={<StrikethroughIcon size={16} />}
+        isActive={editor?.isActive("strike")}
+        canRun={() => !!editor?.can().toggleStrike()}
+        run={() => editor?.chain().focus().toggleStrike().run()}
+        disabled={disabled}
+      />
+      <ToolbarButton
+        editor={editor}
+        label="Inline code"
+        icon={<CodeIcon size={16} />}
+        isActive={editor?.isActive("code")}
+        canRun={() => !!editor?.can().toggleCode()}
+        run={() => editor?.chain().focus().toggleCode().run()}
+        disabled={disabled}
+      />
+
+      <ToolbarSeparator />
+
+      <ToolbarButton
+        editor={editor}
+        label="Heading 1"
+        icon={<Heading1Icon size={16} />}
+        isActive={editor?.isActive("heading", { level: 1 })}
+        run={() => editor?.chain().focus().toggleHeading({ level: 1 }).run()}
+        disabled={disabled}
+      />
+      <ToolbarButton
+        editor={editor}
+        label="Heading 2"
+        icon={<Heading2Icon size={16} />}
+        isActive={editor?.isActive("heading", { level: 2 })}
+        run={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()}
+        disabled={disabled}
+      />
+      <ToolbarButton
+        editor={editor}
+        label="Heading 3"
+        icon={<Heading3Icon size={16} />}
+        isActive={editor?.isActive("heading", { level: 3 })}
+        run={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()}
+        disabled={disabled}
+      />
+
+      <ToolbarSeparator />
+
+      <ToolbarButton
+        editor={editor}
+        label="Bulleted list"
+        icon={<ListIcon size={16} />}
+        isActive={editor?.isActive("bulletList")}
+        run={() => editor?.chain().focus().toggleBulletList().run()}
+        disabled={disabled}
+      />
+      <ToolbarButton
+        editor={editor}
+        label="Ordered list"
+        icon={<ListOrderedIcon size={16} />}
+        isActive={editor?.isActive("orderedList")}
+        run={() => editor?.chain().focus().toggleOrderedList().run()}
+        disabled={disabled}
+      />
+      <ToolbarButton
+        editor={editor}
+        label="Blockquote"
+        icon={<QuoteIcon size={16} />}
+        isActive={editor?.isActive("blockquote")}
+        run={() => editor?.chain().focus().toggleBlockquote().run()}
+        disabled={disabled}
+      />
+      <ToolbarButton
+        editor={editor}
+        label="Code block"
+        icon={<Code2Icon size={16} />}
+        isActive={editor?.isActive("codeBlock")}
+        run={() => editor?.chain().focus().toggleCodeBlock().run()}
+        disabled={disabled}
+      />
+
+      <ToolbarSeparator />
+
+      <ToolbarButton
+        editor={editor}
+        label="Link"
+        icon={<LinkIcon size={16} />}
+        isActive={editor?.isActive("link")}
+        run={promptLink}
+        disabled={disabled}
+      />
+      <ToolbarButton
+        editor={editor}
+        label="Horizontal rule"
+        icon={<MinusIcon size={16} />}
+        run={() => editor?.chain().focus().setHorizontalRule().run()}
+        disabled={disabled}
+      />
+
+      <ToolbarSeparator />
+
+      <ToolbarButton
+        editor={editor}
+        label="Undo"
+        icon={<Undo2Icon size={16} />}
+        canRun={() => !!editor?.can().undo()}
+        run={() => editor?.chain().focus().undo().run()}
+        disabled={disabled}
+      />
+      <ToolbarButton
+        editor={editor}
+        label="Redo"
+        icon={<Redo2Icon size={16} />}
+        canRun={() => !!editor?.can().redo()}
+        run={() => editor?.chain().focus().redo().run()}
+        disabled={disabled}
+      />
+    </div>
+  );
+}
+
+interface ToolbarButtonProps {
+  editor: Editor | null;
+  label: string;
+  icon: React.ReactNode;
+  isActive?: boolean;
+  /** false 를 반환하면 비활성. */
+  canRun?: () => boolean;
+  run: () => void;
+  disabled: boolean;
+}
+
+function ToolbarButton({
+  editor,
+  label,
+  icon,
+  isActive,
+  canRun,
+  run,
+  disabled,
+}: ToolbarButtonProps) {
+  const isDisabled = disabled || !editor || (canRun ? !canRun() : false);
+  return (
+    <button
+      type="button"
+      className={cn(rte__btn, isActive && "is-active")}
+      aria-label={label}
+      aria-pressed={isActive || undefined}
+      title={label}
+      disabled={isDisabled}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
+      onClick={run}
+    >
+      {icon}
+    </button>
+  );
+}
+
+function ToolbarSeparator() {
+  return <span aria-hidden className={rte__sep} />;
+}