sh-ui-cli 0.43.0 → 0.45.0

package/data/registry/react/components/progress/index.tailwind.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n));
+}
+
+export interface ProgressProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
+  value?: number;
+  max?: number;
+  "aria-label"?: string;
+}
+
+export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  function Progress(
+    { value, max = 100, className, "aria-label": ariaLabel, ...props },
+    ref,
+  ) {
+    const isDeterminate = value !== undefined;
+    const normalized = isDeterminate ? clamp((value / max) * 100, 0, 100) : 0;
+
+    return (
+      <div
+        ref={ref}
+        role="progressbar"
+        aria-label={ariaLabel}
+        aria-valuemin={isDeterminate ? 0 : undefined}
+        aria-valuemax={isDeterminate ? max : undefined}
+        aria-valuenow={isDeterminate ? value : undefined}
+        data-state={isDeterminate ? "determinate" : "indeterminate"}
+        className={cx(
+          "relative w-full h-2 overflow-hidden bg-background-muted rounded-full",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          className={cx(
+            "h-full bg-primary rounded-full transition-[width] duration-[var(--duration-base)] ease-out motion-reduce:transition-none",
+            !isDeterminate &&
+              "w-2/5 animate-[sh-ui-progress-slide_1.2s_ease-in-out_infinite] motion-reduce:animate-none motion-reduce:translate-x-3/4",
+          )}
+          style={isDeterminate ? { width: `${normalized}%` } : undefined}
+        />
+      </div>
+    );
+  },
+);
+Progress.displayName = "Progress";
+
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-progress]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-progress", "");
+  style.textContent = `@keyframes sh-ui-progress-slide { 0% { transform: translateX(-100%) } 100% { transform: translateX(250%) } }`;
+  document.head.appendChild(style);
+}

package/data/registry/react/components/radio/index.tailwind.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export type RadioProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseRadio.Root>,
+  "className"
+> & {
+  className?: string;
+};
+
+export const Radio = React.forwardRef<HTMLElement, RadioProps>(
+  ({ className, ...props }, ref) => (
+    <BaseRadio.Root
+      ref={ref}
+      className={cx(
+        "inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] border border-border-strong rounded-full bg-background cursor-pointer shrink-0 transition-[border-color] duration-[var(--duration-fast)] hover:not-data-[disabled]:border-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[checked]:border-primary data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5",
+        className,
+      )}
+      {...props}
+    >
+      <BaseRadio.Indicator className="w-2 h-2 rounded-full bg-primary scale-0 transition-transform duration-[var(--duration-fast)] ease-out data-[checked]:scale-100 motion-reduce:transition-none" />
+    </BaseRadio.Root>
+  ),
+);
+Radio.displayName = "Radio";
+
+export type RadioGroupProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseRadioGroup>,
+  "className"
+> & {
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+};
+
+export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <BaseRadioGroup
+      ref={ref}
+      className={cx(
+        "flex gap-2.5",
+        orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+        className,
+      )}
+      data-orientation={orientation}
+      {...props}
+    />
+  ),
+);
+RadioGroup.displayName = "RadioGroup";

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

@@ -0,0 +1,211 @@
+"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 {
+  BoldIcon, ItalicIcon, StrikethroughIcon,
+  Heading1Icon, Heading2Icon, Heading3Icon,
+  ListIcon, ListOrderedIcon, QuoteIcon,
+  CodeIcon, Code2Icon, LinkIcon, MinusIcon,
+  Undo2Icon, Redo2Icon,
+} from "lucide-react";
+
+export interface RichTextEditorProps {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (html: string) => void;
+  placeholder?: string;
+  readOnly?: boolean;
+  hideToolbar?: boolean;
+  minHeight?: string;
+  maxHeight?: string;
+  className?: string;
+  "aria-label"?: string;
+}
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+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: "sh-ui-rte__is-empty",
+      }),
+      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: "sh-ui-rte__content", "aria-label": ariaLabel },
+    },
+  });
+
+  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={cx(
+        "sh-ui-rte flex flex-col border border-border rounded-[var(--radius)] bg-background overflow-hidden transition-[border-color] duration-[var(--duration-fast)] focus-within:border-foreground focus-within:outline-[length:var(--border-width-strong)] focus-within:outline-foreground focus-within:outline-offset-2 data-[readonly]:bg-background-subtle motion-reduce:transition-none",
+        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="sh-ui-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) {
+      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="flex flex-wrap items-center gap-0.5 py-[var(--space-1)] px-[var(--space-2)] bg-background-muted border-b border-border"
+      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;
+  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={cx(
+        "inline-flex items-center justify-center w-7 h-7 p-0 bg-transparent text-foreground-muted border border-transparent rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[color,background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:text-foreground hover:not-disabled:bg-background hover:not-disabled:border-border focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-1 disabled:opacity-50 disabled:cursor-not-allowed motion-reduce:transition-none",
+        isActive && "text-foreground bg-background border-border-strong",
+      )}
+      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="inline-block w-px h-5 mx-[var(--space-1)] bg-border" />;
+}
+
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-rte]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-rte", "");
+  style.textContent = `
+.sh-ui-rte__viewport { display: flex; min-height: var(--sh-ui-rte-min-height, 9rem); max-height: var(--sh-ui-rte-max-height, 28rem); overflow-y: auto; }
+.sh-ui-rte__viewport > .ProseMirror { flex: 1; }
+.sh-ui-rte__content { outline: none; padding: var(--space-3) var(--space-4); font-size: 0.9375rem; line-height: 1.65; color: var(--foreground); }
+.sh-ui-rte__content > :first-child { margin-top: 0; }
+.sh-ui-rte__content > :last-child { margin-bottom: 0; }
+.sh-ui-rte__content p { margin: 0 0 var(--space-3); }
+.sh-ui-rte__content h1, .sh-ui-rte__content h2, .sh-ui-rte__content h3, .sh-ui-rte__content h4, .sh-ui-rte__content h5, .sh-ui-rte__content h6 { margin: var(--space-4) 0 var(--space-2); font-weight: 600; line-height: 1.3; }
+.sh-ui-rte__content h1 { font-size: 1.5rem; }
+.sh-ui-rte__content h2 { font-size: 1.25rem; }
+.sh-ui-rte__content h3 { font-size: 1.125rem; }
+.sh-ui-rte__content ul, .sh-ui-rte__content ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
+.sh-ui-rte__content li { margin-bottom: var(--space-1); }
+.sh-ui-rte__content li > p { margin: 0; }
+.sh-ui-rte__content blockquote { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--border-strong); background: var(--background-subtle); color: var(--foreground-muted); border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0; }
+.sh-ui-rte__content blockquote > :last-child { margin-bottom: 0; }
+.sh-ui-rte__content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; padding: 0.125rem 0.375rem; border-radius: calc(var(--radius) - 4px); background: var(--background-muted); color: var(--foreground); }
+.sh-ui-rte__content pre { margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--background-subtle); overflow-x: auto; font-size: 0.8125rem; line-height: 1.6; }
+.sh-ui-rte__content pre code { padding: 0; background: transparent; font-size: inherit; }
+.sh-ui-rte__content hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
+.sh-ui-rte__content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
+.sh-ui-rte__content a:hover { text-decoration-thickness: 2px; }
+.sh-ui-rte__content p.is-editor-empty:first-child::before, .sh-ui-rte__content .is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--foreground-muted); float: left; pointer-events: none; height: 0; }
+.sh-ui-rte__content del, .sh-ui-rte__content s { color: var(--foreground-muted); }
+.sh-ui-rte__content ::selection { background: var(--background-muted); }
+  `;
+  document.head.appendChild(style);
+}

package/data/registry/react/components/select/index.tailwind.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import * as React from "react";
+import { Select as BaseSelect } from "@base-ui/react/select";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export const Select = BaseSelect.Root;
+
+export function SelectValue({ placeholder, className, ...props }: { placeholder?: string; className?: string } & Omit<
+  React.ComponentPropsWithoutRef<typeof BaseSelect.Value>, "children"
+>) {
+  return (
+    <BaseSelect.Value className={cx("flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap", className)} {...props}>
+      {(value) =>
+        value !== null && value !== undefined && value !== "" ? (
+          (value as React.ReactNode)
+        ) : (
+          <span className="text-foreground-subtle">{placeholder}</span>
+        )
+      }
+    </BaseSelect.Value>
+  );
+}
+
+export const SelectTrigger = React.forwardRef<
+  HTMLButtonElement,
+  Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Trigger>, "className"> & { className?: string }
+>(({ className, children, ...props }, ref) => (
+  <BaseSelect.Trigger
+    ref={ref}
+    className={cx(
+      "inline-flex items-center justify-between gap-[var(--space-2)] min-w-40 h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] text-[length:var(--text-sm)] leading-none cursor-pointer transition-[border-color,background-color] duration-[var(--duration-fast)] select-none hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[popup-open]:border-border-strong disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <BaseSelect.Icon
+      className="inline-flex items-center justify-center text-foreground-muted shrink-0 transition-transform duration-[var(--duration-fast)] [[data-popup-open]_&]:rotate-180"
+      aria-hidden
+    >
+      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+        <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </BaseSelect.Icon>
+  </BaseSelect.Trigger>
+));
+SelectTrigger.displayName = "SelectTrigger";
+
+export const SelectContent = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Popup>, "className"> & {
+    className?: string;
+    container?: React.ComponentPropsWithoutRef<typeof BaseSelect.Portal>["container"];
+  }
+>(({ className, children, container, ...props }, ref) => (
+  <BaseSelect.Portal container={container}>
+    <BaseSelect.Positioner className="outline-none z-[var(--z-dropdown)]" sideOffset={4} align="start">
+      <BaseSelect.Popup
+        ref={ref}
+        className={cx(
+          "min-w-[var(--anchor-width,10rem)] max-h-[min(24rem,var(--available-height,24rem))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_4px_6px_-1px_rgba(0,0,0,0.08),0_2px_4px_-2px_rgba(0,0,0,0.05)] text-[length:var(--text-sm)] origin-[var(--transform-origin)] animate-[sh-ui-select-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-select-out_100ms_ease-in_forwards] motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </BaseSelect.Popup>
+    </BaseSelect.Positioner>
+  </BaseSelect.Portal>
+));
+SelectContent.displayName = "SelectContent";
+
+export const SelectGroup = BaseSelect.Group;
+
+export const SelectLabel = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>, "className"> & { className?: string }
+>(({ className, ...props }, ref) => (
+  <BaseSelect.GroupLabel
+    ref={ref}
+    className={cx(
+      "py-[var(--space-2)] px-[var(--space-2)] pb-[var(--space-1)] text-[length:var(--text-xs)] font-semibold text-foreground-muted uppercase tracking-[0.04em]",
+      className,
+    )}
+    {...props}
+  />
+));
+SelectLabel.displayName = "SelectLabel";
+
+export const SelectItem = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Item>, "className"> & { className?: string }
+>(({ className, children, ...props }, ref) => (
+  <BaseSelect.Item
+    ref={ref}
+    className={cx(
+      "flex items-center gap-[var(--space-2)] py-2 px-3 rounded-[calc(var(--radius)-2px)] cursor-pointer outline-none select-none transition-colors duration-[80ms] data-[highlighted]:bg-background-muted hover:bg-background-muted data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:pointer-events-none",
+      className,
+    )}
+    {...props}
+  >
+    <BaseSelect.ItemIndicator
+      className="order-1 ml-auto inline-flex items-center justify-center text-foreground"
+      aria-hidden
+    >
+      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+        <path d="M3.5 8.5l3 3 6-7" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </BaseSelect.ItemIndicator>
+    <BaseSelect.ItemText className="flex-1">{children}</BaseSelect.ItemText>
+  </BaseSelect.Item>
+));
+SelectItem.displayName = "SelectItem";
+
+export const SelectSeparator = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Separator>, "className"> & { className?: string }
+>(({ className, ...props }, ref) => (
+  <BaseSelect.Separator
+    ref={ref}
+    className={cx("h-px bg-border my-[var(--space-1)]", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = "SelectSeparator";
+
+/* MultiSelect — 동일 로직, 위 컴포넌트 재사용 */
+
+type BaseRootProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Root>;
+
+type MultiSelectCtx = { values: string[]; remove: (value: string) => void; clear: () => void; };
+const MultiSelectContext = React.createContext<MultiSelectCtx | null>(null);
+export const useMultiSelect = () => {
+  const ctx = React.useContext(MultiSelectContext);
+  if (!ctx) throw new Error("useMultiSelect는 MultiSelect 하위에서만 사용할 수 있습니다.");
+  return ctx;
+};
+
+export const MultiSelect = React.forwardRef<
+  HTMLDivElement,
+  Omit<BaseRootProps, "multiple" | "value" | "defaultValue" | "onValueChange"> & {
+    value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void;
+  }
+>(({ value: valueProp, defaultValue, onValueChange, children, ...props }, _ref) => {
+  const isControlled = valueProp !== undefined;
+  const [internal, setInternal] = React.useState<string[]>(defaultValue ?? []);
+  const values = isControlled ? valueProp! : internal;
+
+  const commit = React.useCallback((next: string[]) => {
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
+  }, [isControlled, onValueChange]);
+
+  const ctx = React.useMemo<MultiSelectCtx>(() => ({
+    values,
+    remove: (v) => commit(values.filter((x) => x !== v)),
+    clear: () => commit([]),
+  }), [values, commit]);
+
+  return (
+    <MultiSelectContext.Provider value={ctx}>
+      <BaseSelect.Root multiple value={values} onValueChange={commit} {...props}>{children}</BaseSelect.Root>
+    </MultiSelectContext.Provider>
+  );
+});
+MultiSelect.displayName = "MultiSelect";
+
+export function MultiSelectValue({
+  placeholder, render, separator = ", ", className, ...props
+}: {
+  placeholder?: string;
+  render?: (values: string[], handlers: { remove: (value: string) => void; clear: () => void }) => React.ReactNode;
+  separator?: string; className?: string;
+} & Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Value>, "children" | "render">) {
+  const { remove, clear } = useMultiSelect();
+  return (
+    <BaseSelect.Value className={cx("flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap", className)} {...props}>
+      {(value) => {
+        const arr = Array.isArray(value) ? (value as string[]) : [];
+        if (arr.length === 0) return <span className="text-foreground-subtle">{placeholder}</span>;
+        return render ? render(arr, { remove, clear }) : arr.join(separator);
+      }}
+    </BaseSelect.Value>
+  );
+}
+
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-select]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-select", "");
+  style.textContent = `
+@keyframes sh-ui-select-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
+@keyframes sh-ui-select-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } }
+  `;
+  document.head.appendChild(style);
+}

package/data/registry/react/components/separator/index.tailwind.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export type SeparatorOrientation = "horizontal" | "vertical";
+
+export interface SeparatorProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
+  orientation?: SeparatorOrientation;
+  /**
+   * 의미 없는 시각적 구분선인지 여부. 기본 true(aria-hidden).
+   * 스크린리더에도 섹션 구분을 알려야 하면 false.
+   */
+  decorative?: boolean;
+}
+
+/**
+ * 시각적 구분선 (Tailwind utility 변종). 가로(height=1px) / 세로(width=1px).
+ */
+export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  function Separator(
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) {
+    const sizing =
+      orientation === "horizontal" ? "w-full h-px" : "w-px h-full self-stretch";
+    return (
+      <div
+        ref={ref}
+        role={decorative ? undefined : "separator"}
+        aria-orientation={decorative ? undefined : orientation}
+        aria-hidden={decorative || undefined}
+        data-orientation={orientation}
+        className={cx("bg-border shrink-0", sizing, className)}
+        {...props}
+      />
+    );
+  },
+);
+Separator.displayName = "Separator";