sh-ui-cli 0.42.1 → 0.44.0

package/data/registry/react/components/page-toc/index.tailwind.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import * as React from "react";
+
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export interface PageTOCProps {
+  containerSelector?: string;
+  routeKey?: string;
+  headerOffsetRem?: number;
+  label?: React.ReactNode;
+  levels?: HeadingLevel[];
+  excludeSelector?: string;
+  className?: string;
+}
+
+const slugify = (text: string): string =>
+  text
+    .trim()
+    .toLowerCase()
+    .replace(/[^\w\s가-힣-]/g, "")
+    .replace(/\s+/g, "-");
+
+interface TocItem {
+  id: string;
+  text: string;
+  level: HeadingLevel;
+}
+
+const cx = (...args: (string | undefined | false | null)[]) =>
+  args.filter(Boolean).join(" ");
+
+const linkBase =
+  "block px-2 py-1 rounded-[calc(var(--radius)-4px)] text-foreground-muted no-underline leading-snug transition-[color,background-color] duration-[var(--duration-fast)] hover:text-foreground hover:bg-background-subtle focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[active=true]:text-foreground data-[active=true]:font-semibold data-[active=true]:bg-background-subtle motion-reduce:transition-none";
+
+export function PageTOC({
+  containerSelector = "main",
+  routeKey,
+  headerOffsetRem = 5,
+  label = "On this page",
+  levels = ["h2", "h3"],
+  excludeSelector,
+  className,
+}: PageTOCProps) {
+  const [items, setItems] = React.useState<TocItem[]>([]);
+  const [activeId, setActiveId] = React.useState<string | null>(null);
+
+  const levelsKey = levels.join(",");
+  const levelsRef = React.useRef(levels);
+  levelsRef.current = levels;
+
+  React.useEffect(() => {
+    const container = document.querySelector(containerSelector);
+    if (!container) {
+      setItems([]);
+      return;
+    }
+
+    const headingSelector = levelsRef.current.join(", ");
+    let headings = Array.from(
+      container.querySelectorAll<HTMLHeadingElement>(headingSelector),
+    );
+    if (excludeSelector) {
+      headings = headings.filter((h) => !h.closest(excludeSelector));
+    }
+
+    const usedIds = new Set<string>();
+    const collected: TocItem[] = headings.map((h) => {
+      const text = h.textContent?.trim() ?? "";
+      let id = h.id || slugify(text);
+      let suffix = 2;
+      const base = id;
+      while (!id || usedIds.has(id)) {
+        id = `${base}-${suffix++}`;
+      }
+      usedIds.add(id);
+      if (!h.id) h.id = id;
+      h.style.scrollMarginTop = `${headerOffsetRem}rem`;
+      const level = h.tagName.toLowerCase() as HeadingLevel;
+      return { id, text, level };
+    });
+
+    setItems(collected);
+    if (collected.length === 0) return;
+
+    const remInPx = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    const topOffsetPx = Math.round(headerOffsetRem * remInPx);
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((e) => e.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        if (visible.length > 0) setActiveId(visible[0].target.id);
+      },
+      { rootMargin: `-${topOffsetPx}px 0px -70% 0px`, threshold: 0 },
+    );
+
+    headings.forEach((h) => observer.observe(h));
+    return () => observer.disconnect();
+  }, [containerSelector, headerOffsetRem, levelsKey, excludeSelector, routeKey]);
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>, id: string) => {
+    event.preventDefault();
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: "smooth", block: "start" });
+    history.replaceState(null, "", `#${id}`);
+    setActiveId(id);
+  };
+
+  if (items.length === 0) return null;
+
+  const linkClassesForLevel = (level: HeadingLevel) => {
+    const num = parseInt(level.replace("h", ""), 10);
+    if (num === 3 || num === 4) return "pl-5 text-[0.8125em] text-[var(--foreground-subtle,var(--foreground-muted))]";
+    if (num >= 5) return "pl-8 text-[0.75em] text-[var(--foreground-subtle,var(--foreground-muted))]";
+    return "";
+  };
+
+  return (
+    <nav
+      className={cx(
+        "fixed top-20 right-6 w-56 max-h-[calc(100vh-7rem)] overflow-y-auto pl-4 pr-2 py-3 border-l border-border text-[0.8125rem] z-[5] max-[80rem]:hidden",
+        className,
+      )}
+      aria-label={typeof label === "string" ? label : "목차"}
+    >
+      <div className="font-semibold text-[length:var(--text-xs)] text-foreground-muted uppercase tracking-[0.04em] mb-2">
+        {label}
+      </div>
+      <ul className="list-none m-0 p-0 flex flex-col gap-0.5">
+        {items.map((item) => (
+          <li key={item.id} data-level={item.level.replace("h", "")}>
+            <a
+              href={`#${item.id}`}
+              onClick={(e) => handleClick(e, item.id)}
+              className={cx(linkBase, linkClassesForLevel(item.level))}
+              data-active={activeId === item.id ? "true" : undefined}
+              aria-current={activeId === item.id ? "true" : undefined}
+            >
+              {item.text}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

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

@@ -0,0 +1,148 @@
+import * as React from "react";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export const Pagination = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  function Pagination({ className, ...props }, ref) {
+    return (
+      <nav
+        ref={ref}
+        aria-label="Pagination"
+        className={cx("flex justify-center text-[length:var(--text-sm)] text-foreground", className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const PaginationContent = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(
+  function PaginationContent({ className, ...props }, ref) {
+    return (
+      <ul
+        ref={ref}
+        className={cx("flex flex-wrap items-center gap-1 m-0 p-0 list-none", className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const PaginationItem = React.forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
+  function PaginationItem({ className, ...props }, ref) {
+    return <li ref={ref} className={cx("inline-flex items-center", className)} {...props} />;
+  },
+);
+
+const linkBase =
+  "inline-flex items-center justify-center gap-1.5 min-w-9 h-9 px-3 rounded-[calc(var(--radius)-2px)] border border-transparent bg-transparent text-foreground no-underline transition-[background-color,border-color,color] duration-[var(--duration-fast)] cursor-pointer select-none hover:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[active]:bg-foreground data-[active]:text-background data-[active]:font-medium data-[active]:hover:opacity-90 aria-disabled:pointer-events-none aria-disabled:opacity-45 data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[size=sm]:min-w-8 data-[size=sm]:h-8 data-[size=sm]:px-2 motion-reduce:transition-none";
+
+export interface PaginationLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  isActive?: boolean;
+  size?: "sm" | "md";
+}
+
+export const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+  function PaginationLink({ className, isActive, size = "md", ...props }, ref) {
+    return (
+      <a
+        ref={ref}
+        aria-current={isActive ? "page" : undefined}
+        data-active={isActive ? "" : undefined}
+        data-size={size}
+        className={cx(linkBase, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const PaginationPrevious = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+  function PaginationPrevious({ className, children, ...props }, ref) {
+    return (
+      <PaginationLink ref={ref} aria-label="이전 페이지" className={cx("px-2.5", className)} {...props}>
+        <ChevronLeftIcon />
+        {children ?? <span>이전</span>}
+      </PaginationLink>
+    );
+  },
+);
+
+export const PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+  function PaginationNext({ className, children, ...props }, ref) {
+    return (
+      <PaginationLink ref={ref} aria-label="다음 페이지" className={cx("px-2.5", className)} {...props}>
+        {children ?? <span>다음</span>}
+        <ChevronRightIcon />
+      </PaginationLink>
+    );
+  },
+);
+
+export const PaginationEllipsis = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  function PaginationEllipsis({ className, ...props }, ref) {
+    return (
+      <span
+        ref={ref}
+        role="presentation"
+        aria-hidden="true"
+        className={cx("inline-flex items-center justify-center w-9 h-9 text-foreground-muted", className)}
+        {...props}
+      >
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden>
+          <circle cx="3" cy="8" r="1.25" />
+          <circle cx="8" cy="8" r="1.25" />
+          <circle cx="13" cy="8" r="1.25" />
+        </svg>
+        <span className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0 [clip:rect(0,0,0,0)]">
+          더 많은 페이지
+        </span>
+      </span>
+    );
+  },
+);
+
+export type PaginationToken = number | "dots";
+
+export function getPaginationRange({
+  page, totalPages, siblings = 1,
+}: { page: number; totalPages: number; siblings?: number }): PaginationToken[] {
+  if (totalPages <= 0) return [];
+  const totalSlots = siblings * 2 + 5;
+  if (totalPages <= totalSlots) return range(1, totalPages);
+  const leftSibling = Math.max(page - siblings, 1);
+  const rightSibling = Math.min(page + siblings, totalPages);
+  const showLeftDots = leftSibling > 2;
+  const showRightDots = rightSibling < totalPages - 1;
+  if (!showLeftDots && showRightDots) {
+    const leftCount = 3 + 2 * siblings;
+    return [...range(1, leftCount), "dots", totalPages];
+  }
+  if (showLeftDots && !showRightDots) {
+    const rightCount = 3 + 2 * siblings;
+    return [1, "dots", ...range(totalPages - rightCount + 1, totalPages)];
+  }
+  return [1, "dots", ...range(leftSibling, rightSibling), "dots", totalPages];
+}
+
+function range(start: number, end: number): number[] {
+  const length = end - start + 1;
+  return Array.from({ length }, (_, i) => start + i);
+}
+
+function ChevronLeftIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d="M10 4l-4 4 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function ChevronRightIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export const Popover = BasePopover.Root;
+export const PopoverTrigger = BasePopover.Trigger;
+export const PopoverClose = BasePopover.Close;
+
+export interface PopoverContentProps
+  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BasePopover.Popup>> {
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>["container"];
+  showArrow?: boolean;
+}
+
+export const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
+  function PopoverContent(
+    { className, children, side, align, sideOffset = 8, container, showArrow, ...props },
+    ref,
+  ) {
+    return (
+      <BasePopover.Portal container={container}>
+        <BasePopover.Positioner
+          className="z-[var(--z-popover)] outline-none"
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+        >
+          <BasePopover.Popup
+            ref={ref}
+            className={cx(
+              "min-w-48 p-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.12)] outline-none text-[length:var(--text-sm)] leading-snug origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2",
+              className,
+            )}
+            {...props}
+          >
+            {showArrow && <BasePopover.Arrow className="text-background [&_svg]:block" />}
+            {children}
+          </BasePopover.Popup>
+        </BasePopover.Positioner>
+      </BasePopover.Portal>
+    );
+  },
+);
+
+export const PopoverTitle = React.forwardRef<
+  HTMLHeadingElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BasePopover.Title>>
+>(function PopoverTitle({ className, ...props }, ref) {
+  return (
+    <BasePopover.Title
+      ref={ref}
+      className={cx("m-0 mb-[var(--space-1)] font-semibold text-[0.9375rem]", className)}
+      {...props}
+    />
+  );
+});
+
+export const PopoverDescription = React.forwardRef<
+  HTMLParagraphElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BasePopover.Description>>
+>(function PopoverDescription({ className, ...props }, ref) {
+  return (
+    <BasePopover.Description
+      ref={ref}
+      className={cx("m-0 text-foreground-muted text-[0.8125rem]", className)}
+      {...props}
+    />
+  );
+});

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/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);
+}