sh-ui-cli 0.43.0 → 0.45.0

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

@@ -0,0 +1,309 @@
+"use client";
+
+import * as React from "react";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+type Orientation = "horizontal" | "vertical";
+
+interface CarouselContextValue {
+  orientation: Orientation; loop: boolean;
+  index: number; count: number;
+  goTo: (i: number) => void; goPrev: () => void; goNext: () => void;
+  registerItem: () => () => void;
+  setContentEl: (el: HTMLDivElement | null) => void;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+}
+
+const CarouselContext = React.createContext<CarouselContextValue | null>(null);
+
+function useCarousel() {
+  const ctx = React.useContext(CarouselContext);
+  if (!ctx) throw new Error("Carousel parts must be used within <Carousel>");
+  return ctx;
+}
+
+export function useCarouselState() {
+  const { orientation, loop, index, count, goTo, goPrev, goNext } = useCarousel();
+  return { orientation, loop, index, count, goTo, goPrev, goNext };
+}
+
+export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: Orientation;
+  loop?: boolean;
+  autoPlay?: boolean | number;
+  defaultIndex?: number;
+  index?: number;
+  onIndexChange?: (index: number) => void;
+}
+
+export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
+  ({ className, orientation = "horizontal", loop = false, autoPlay, defaultIndex = 0, index: controlledIndex, onIndexChange, children, onKeyDown: userOnKeyDown, ...props }, ref) => {
+    const isControlled = controlledIndex !== undefined;
+    const [uncontrolled, setUncontrolled] = React.useState(defaultIndex);
+    const index = isControlled ? controlledIndex : uncontrolled;
+    const [count, setCount] = React.useState(0);
+    const contentRef = React.useRef<HTMLDivElement | null>(null);
+    const scrollTargetRef = React.useRef<number | null>(null);
+
+    const setContentEl = React.useCallback((el: HTMLDivElement | null) => { contentRef.current = el; }, []);
+    const registerItem = React.useCallback(() => {
+      setCount((c) => c + 1);
+      return () => setCount((c) => Math.max(0, c - 1));
+    }, []);
+
+    const setIndex = React.useCallback((next: number) => {
+      if (!isControlled) setUncontrolled(next);
+      onIndexChange?.(next);
+    }, [isControlled, onIndexChange]);
+
+    const clamp = React.useCallback((i: number) => {
+      if (count <= 0) return 0;
+      if (loop) return ((i % count) + count) % count;
+      return Math.max(0, Math.min(count - 1, i));
+    }, [count, loop]);
+
+    const goTo = React.useCallback((i: number) => setIndex(clamp(i)), [clamp, setIndex]);
+    const goPrev = React.useCallback(() => setIndex(clamp(index - 1)), [clamp, index, setIndex]);
+    const goNext = React.useCallback(() => setIndex(clamp(index + 1)), [clamp, index, setIndex]);
+
+    React.useEffect(() => {
+      const el = contentRef.current;
+      if (!el) return;
+      const child = el.children[index] as HTMLElement | undefined;
+      if (!child) return;
+      scrollTargetRef.current = index;
+      if (orientation === "horizontal") el.scrollTo({ left: child.offsetLeft, behavior: "smooth" });
+      else el.scrollTo({ top: child.offsetTop, behavior: "smooth" });
+    }, [index, orientation, count]);
+
+    React.useEffect(() => {
+      const el = contentRef.current;
+      if (!el) return;
+      let raf = 0;
+      const onScroll = () => {
+        cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(() => {
+          const children = Array.from(el.children) as HTMLElement[];
+          if (children.length === 0) return;
+          const axis = orientation === "horizontal" ? "offsetLeft" : "offsetTop";
+          const scroll = orientation === "horizontal" ? el.scrollLeft : el.scrollTop;
+          let nearest = 0; let minDelta = Infinity;
+          children.forEach((c, i) => {
+            const d = Math.abs(c[axis] - scroll);
+            if (d < minDelta) { minDelta = d; nearest = i; }
+          });
+          if (nearest !== index) {
+            if (scrollTargetRef.current !== null && nearest !== scrollTargetRef.current) return;
+            scrollTargetRef.current = null;
+            setIndex(nearest);
+          } else scrollTargetRef.current = null;
+        });
+      };
+      el.addEventListener("scroll", onScroll, { passive: true });
+      return () => { cancelAnimationFrame(raf); el.removeEventListener("scroll", onScroll); };
+    }, [orientation, index, setIndex]);
+
+    React.useEffect(() => {
+      if (!autoPlay || count <= 1) return;
+      const delay = autoPlay === true ? 4000 : autoPlay;
+      const el = contentRef.current;
+      let paused = false;
+      const pause = () => (paused = true);
+      const resume = () => (paused = false);
+      el?.addEventListener("mouseenter", pause);
+      el?.addEventListener("mouseleave", resume);
+      el?.addEventListener("focusin", pause);
+      el?.addEventListener("focusout", resume);
+      const id = window.setInterval(() => { if (paused) return; setIndex(clamp(index + 1)); }, delay);
+      return () => {
+        window.clearInterval(id);
+        el?.removeEventListener("mouseenter", pause);
+        el?.removeEventListener("mouseleave", resume);
+        el?.removeEventListener("focusin", pause);
+        el?.removeEventListener("focusout", resume);
+      };
+    }, [autoPlay, count, index, clamp, setIndex]);
+
+    const onKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+      userOnKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+      const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+      if (event.key === prevKey) { event.preventDefault(); goPrev(); }
+      else if (event.key === nextKey) { event.preventDefault(); goNext(); }
+    }, [orientation, goPrev, goNext, userOnKeyDown]);
+
+    const value = React.useMemo<CarouselContextValue>(() => ({
+      orientation, loop, index, count, goTo, goPrev, goNext, registerItem, setContentEl, contentRef,
+    }), [orientation, loop, index, count, goTo, goPrev, goNext, registerItem, setContentEl]);
+
+    return (
+      <CarouselContext.Provider value={value}>
+        <div
+          ref={ref}
+          className={cx("relative w-full", className)}
+          data-orientation={orientation}
+          role="region"
+          aria-roledescription="carousel"
+          onKeyDown={onKeyDown}
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = "Carousel";
+
+export const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation, setContentEl } = useCarousel();
+    const mergedRef = React.useCallback((el: HTMLDivElement | null) => {
+      setContentEl(el);
+      if (typeof ref === "function") ref(el);
+      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+    }, [ref, setContentEl]);
+
+    return (
+      <div
+        ref={mergedRef}
+        className={cx(
+          "flex gap-[var(--space-4)] overflow-x-auto overflow-y-hidden snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch] overscroll-x-contain [&::-webkit-scrollbar]:hidden motion-reduce:scroll-auto",
+          orientation === "vertical" && "flex-col overflow-x-hidden overflow-y-auto snap-y snap-mandatory h-80",
+          className,
+        )}
+        data-orientation={orientation}
+        {...props}
+      />
+    );
+  },
+);
+CarouselContent.displayName = "CarouselContent";
+
+export const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation, registerItem } = useCarousel();
+    React.useEffect(() => registerItem(), [registerItem]);
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cx(
+          "flex-[0_0_100%] min-w-0 snap-start snap-always",
+          orientation === "vertical" && "basis-auto",
+          className,
+        )}
+        data-orientation={orientation}
+        {...props}
+      />
+    );
+  },
+);
+CarouselItem.displayName = "CarouselItem";
+
+const navClasses =
+  "absolute top-1/2 w-8 h-8 inline-flex items-center justify-center bg-background text-foreground border border-border rounded-full cursor-pointer -translate-y-1/2 z-[1] transition-[opacity,background-color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-40 disabled:cursor-not-allowed motion-reduce:transition-none data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:[top:auto]";
+
+export const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, onClick, disabled, children, ...props }, ref) => {
+    const { goPrev, orientation, index, count, loop } = useCarousel();
+    const atStart = !loop && index <= 0;
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label="이전"
+        className={cx(
+          navClasses,
+          orientation === "horizontal" ? "-left-4" : "-top-4 left-1/2",
+          className,
+        )}
+        data-orientation={orientation}
+        disabled={disabled || atStart || count === 0}
+        onClick={(e) => { onClick?.(e); if (!e.defaultPrevented) goPrev(); }}
+        {...props}
+      >
+        {children ?? (
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path d={orientation === "horizontal" ? "M10 4l-4 4 4 4" : "M4 10l4-4 4 4"} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </button>
+    );
+  },
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+export const CarouselNext = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, onClick, disabled, children, ...props }, ref) => {
+    const { goNext, orientation, index, count, loop } = useCarousel();
+    const atEnd = !loop && index >= count - 1;
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label="다음"
+        className={cx(
+          navClasses,
+          orientation === "horizontal" ? "-right-4" : "-bottom-4 left-1/2 [top:auto]",
+          className,
+        )}
+        data-orientation={orientation}
+        disabled={disabled || atEnd || count === 0}
+        onClick={(e) => { onClick?.(e); if (!e.defaultPrevented) goNext(); }}
+        {...props}
+      >
+        {children ?? (
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path d={orientation === "horizontal" ? "M6 4l4 4-4 4" : "M4 6l4 4 4-4"} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </button>
+    );
+  },
+);
+CarouselNext.displayName = "CarouselNext";
+
+export interface CarouselIndicatorsProps extends React.HTMLAttributes<HTMLDivElement> {
+  labelFor?: (index: number) => string;
+}
+
+export const CarouselIndicators = React.forwardRef<HTMLDivElement, CarouselIndicatorsProps>(
+  ({ className, labelFor, ...props }, ref) => {
+    const { count, index, goTo, orientation } = useCarousel();
+    if (count <= 0) return null;
+    return (
+      <div
+        ref={ref}
+        role="tablist"
+        aria-label="슬라이드 선택"
+        className={cx(
+          "flex justify-center items-center gap-[var(--space-2)] mt-[var(--space-3)]",
+          orientation === "vertical" && "absolute top-1/2 right-2 mt-0 flex-col -translate-y-1/2",
+          className,
+        )}
+        data-orientation={orientation}
+        {...props}
+      >
+        {Array.from({ length: count }).map((_, i) => (
+          <button
+            key={i}
+            type="button"
+            role="tab"
+            aria-selected={i === index}
+            aria-label={labelFor ? labelFor(i) : `${i + 1}번 슬라이드`}
+            className="w-2 h-2 p-0 bg-border border-none rounded-full cursor-pointer transition-[background-color,transform] duration-[var(--duration-fast)] hover:bg-border-strong data-[active]:bg-foreground data-[active]:scale-[1.2] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none"
+            data-active={i === index || undefined}
+            onClick={() => goTo(i)}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+CarouselIndicators.displayName = "CarouselIndicators";

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

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export type CheckboxProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>,
+  "className"
+> & {
+  className?: string;
+};
+
+export const Checkbox = React.forwardRef<HTMLElement, CheckboxProps>(
+  ({ className, ...props }, ref) => (
+    <BaseCheckbox.Root
+      ref={ref}
+      className={cx(
+        "inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] border border-border-strong rounded-[calc(var(--radius)-2px)] bg-background text-primary-foreground cursor-pointer shrink-0 transition-[background-color,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]:bg-primary data-[checked]:border-primary data-[indeterminate]:bg-primary data-[indeterminate]: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}
+    >
+      <BaseCheckbox.Indicator className="inline-flex items-center justify-center">
+        {props.indeterminate ? <MinusIcon /> : <CheckIcon />}
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
+  ),
+);
+Checkbox.displayName = "Checkbox";
+
+export type CheckboxGroupProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseCheckboxGroup>,
+  "className"
+> & {
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+};
+
+export const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <BaseCheckboxGroup
+      ref={ref}
+      className={cx(
+        "flex gap-2.5",
+        orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+        className,
+      )}
+      data-orientation={orientation}
+      {...props}
+    />
+  ),
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+
+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/code-editor/index.tailwind.tsx

@@ -0,0 +1,168 @@
+"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";
+
+export type CodeEditorLanguage =
+  | "text" | "javascript" | "typescript" | "jsx" | "tsx"
+  | "json" | "css" | "html" | "markdown";
+
+export interface CodeEditorProps {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  language?: CodeEditorLanguage;
+  placeholder?: string;
+  readOnly?: boolean;
+  showLineNumbers?: boolean;
+  minHeight?: string;
+  maxHeight?: string;
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+}
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+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 기반 인라인 코드 에디터 (Tailwind 변종).
+ * CodeMirror 자체의 .cm-* descendant 클래스는 Tailwind utility 로 표현 어려워
+ * <style> 태그로 한 번 inject — 컴포넌트의 outer wrapper 만 Tailwind utility.
+ */
+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; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  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={cx(
+        "sh-ui-code-editor relative border border-border rounded-[var(--radius)] bg-background text-[0.8125rem] leading-relaxed 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-code-editor-min-height": minHeight, "--sh-ui-code-editor-max-height": maxHeight } as React.CSSProperties}
+    />
+  );
+}
+
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-code-editor]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-code-editor", "");
+  style.textContent = `
+.sh-ui-code-editor .cm-editor { background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.sh-ui-code-editor .cm-editor.cm-focused { outline: none; }
+.sh-ui-code-editor .cm-scroller { font-family: inherit; min-height: var(--sh-ui-code-editor-min-height, 7.5rem); max-height: var(--sh-ui-code-editor-max-height, 25rem); }
+.sh-ui-code-editor .cm-content { caret-color: var(--foreground); color: var(--foreground); padding: var(--space-3) 0; }
+.sh-ui-code-editor .cm-line { padding: 0 var(--space-3); }
+.sh-ui-code-editor .cm-gutters { background: var(--background-subtle); color: var(--foreground-muted); border-right: 1px solid var(--border); }
+.sh-ui-code-editor .cm-activeLineGutter, .sh-ui-code-editor .cm-activeLine { background: var(--background-muted); }
+.sh-ui-code-editor .cm-cursor, .sh-ui-code-editor .cm-dropCursor { border-left-color: var(--foreground); }
+.sh-ui-code-editor .cm-selectionBackground, .sh-ui-code-editor .cm-editor .cm-selectionBackground, .sh-ui-code-editor .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .sh-ui-code-editor ::selection { background: var(--background-muted) !important; }
+.sh-ui-code-editor .cm-placeholder { color: var(--foreground-muted); }
+.sh-ui-code-editor .cm-tooltip { background: var(--background); border: 1px solid var(--border); color: var(--foreground); border-radius: calc(var(--radius) - 2px); }
+.sh-ui-code-editor .cm-tooltip-autocomplete > ul > li[aria-selected] { background: var(--background-muted); color: var(--foreground); }
+.sh-ui-code-editor .cm-matchingBracket, .sh-ui-code-editor .cm-nonmatchingBracket { background: var(--background-muted); color: var(--foreground); }
+  `;
+  document.head.appendChild(style);
+}

package/data/registry/react/components/code-panel/index.tailwind.tsx

@@ -0,0 +1,107 @@
+import { codeToHtml } from "shiki";
+import { CodePanelCopyButton } from "./copy";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export interface CodePanelProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  code?: string;
+  language?: string;
+  filename?: string;
+  showLineNumbers?: boolean;
+  hideCopy?: boolean;
+  children?: React.ReactNode;
+}
+
+const rootClasses =
+  "group relative border border-border rounded-[var(--radius)] bg-background-subtle overflow-hidden text-[0.8125rem] leading-relaxed my-[var(--space-4)] max-sm:text-[length:var(--text-xs)]";
+
+export async function CodePanel({
+  code, language = "text", filename, showLineNumbers = true, hideCopy, className, children, ...rest
+}: CodePanelProps) {
+  const classes = cx(rootClasses, className);
+
+  if (children !== undefined) {
+    return <div className={classes} {...rest}>{children}</div>;
+  }
+  if (code === undefined) throw new Error("CodePanel: `code` prop 또는 children 중 하나가 필요합니다.");
+
+  const trimmed = code.replace(/\n$/, "");
+
+  return (
+    <div className={classes} {...rest}>
+      {filename ? (
+        <CodePanelHeader>
+          <CodePanelFilename>{filename}</CodePanelFilename>
+          {!hideCopy && <CodePanelCopy code={trimmed} />}
+        </CodePanelHeader>
+      ) : (
+        !hideCopy && (
+          <div className="absolute top-[var(--space-2)] right-[var(--space-2)] z-[1] opacity-0 transition-opacity duration-[var(--duration-fast)] group-hover:opacity-100 group-focus-within:opacity-100">
+            <CodePanelCopy code={trimmed} />
+          </div>
+        )
+      )}
+      <CodePanelBody code={trimmed} language={language} showLineNumbers={showLineNumbers} />
+    </div>
+  );
+}
+
+export function CodePanelHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cx(
+        "flex items-center justify-between gap-[var(--space-2)] py-[var(--space-2)] pl-[var(--space-4)] pr-[var(--space-3)] border-b border-border bg-background-muted text-[length:var(--text-xs)] text-foreground-muted",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CodePanelFilename({ className, children, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span className={cx("font-mono text-foreground", className)} {...props}>{children}</span>
+  );
+}
+
+export interface CodePanelCopyProps { code: string; }
+export function CodePanelCopy({ code }: CodePanelCopyProps) {
+  return <CodePanelCopyButton code={code} />;
+}
+
+export interface CodePanelBodyProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML"> {
+  code: string;
+  language?: string;
+  showLineNumbers?: boolean;
+}
+
+export async function CodePanelBody({
+  code, language = "text", showLineNumbers = true, className, ...rest
+}: CodePanelBodyProps) {
+  const trimmed = code.replace(/\n$/, "");
+  const html = await codeToHtml(trimmed, {
+    lang: language,
+    themes: { light: "github-light", dark: "github-dark" },
+    defaultColor: false,
+  });
+
+  return (
+    <div
+      className={cx(
+        "overflow-x-auto [&_pre]:m-0 [&_pre]:py-[var(--space-3)] [&_pre]:px-[var(--space-4)] [&_pre]:!bg-transparent [&_pre]:font-mono [&_pre]:text-[length:inherit] [&_pre]:leading-[inherit] [&_pre]:border-none [&_pre]:rounded-none [&_code]:bg-transparent [&_code]:p-0 [&_code]:text-[length:inherit] [&_code]:block [&_.shiki]:!text-[var(--shiki-light)] [&_.shiki_span]:!text-[var(--shiki-light)] [&_.shiki]:!bg-transparent [&_.shiki_span]:!bg-transparent [.dark_&_.shiki]:!text-[var(--shiki-dark)] [.dark_&_.shiki_span]:!text-[var(--shiki-dark)] data-[line-numbers]:[&_pre_code]:[counter-reset:step] data-[line-numbers]:[&_pre_code_.line]:before:[content:counter(step)] data-[line-numbers]:[&_pre_code_.line]:before:[counter-increment:step] data-[line-numbers]:[&_pre_code_.line]:before:inline-block data-[line-numbers]:[&_pre_code_.line]:before:w-7 data-[line-numbers]:[&_pre_code_.line]:before:mr-[var(--space-4)] data-[line-numbers]:[&_pre_code_.line]:before:text-right data-[line-numbers]:[&_pre_code_.line]:before:text-foreground-muted data-[line-numbers]:[&_pre_code_.line]:before:opacity-70 data-[line-numbers]:[&_pre_code_.line]:before:select-none",
+        className,
+      )}
+      data-line-numbers={showLineNumbers || undefined}
+      dangerouslySetInnerHTML={{ __html: html }}
+      {...rest}
+    />
+  );
+}
+
+export { CodePanelCopyButton };