sh-ui-cli 0.14.0 → 0.21.0

package/data/registry/react/components/combobox/index.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import * as React from "react";
+import { Combobox as BaseCombobox } from "@base-ui-components/react/combobox";
+import "./styles.css";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/**
+ * Select + Input의 결합 — 타이핑으로 목록이 자동 필터링된다.
+ * Base UI Combobox를 래핑해 `items` 배열을 받으면 기본 필터가 `input` 값 기준으로 동작.
+ *
+ *   <Combobox items={fruits}>
+ *     <ComboboxInput placeholder="과일 검색" />
+ *     <ComboboxContent>
+ *       <ComboboxList>
+ *         {(item) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
+ *       </ComboboxList>
+ *       <ComboboxEmpty>일치하는 항목 없음</ComboboxEmpty>
+ *     </ComboboxContent>
+ *   </Combobox>
+ */
+export const Combobox = BaseCombobox.Root;
+
+export const ComboboxIcon = BaseCombobox.Icon;
+export const ComboboxTrigger = BaseCombobox.Trigger;
+export const ComboboxClear = BaseCombobox.Clear;
+export const ComboboxValue = BaseCombobox.Value;
+export const ComboboxGroup = BaseCombobox.Group;
+export const ComboboxChips = BaseCombobox.Chips;
+
+export const ComboboxInput = React.forwardRef<
+  HTMLInputElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Input>>
+>(function ComboboxInput({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Input
+      ref={ref}
+      className={cx("sh-ui-combobox__input", className)}
+      {...props}
+    />
+  );
+});
+
+/** Portal + Positioner + Popup 래퍼. */
+export const ComboboxContent = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Popup>> & {
+    container?: React.ComponentPropsWithoutRef<typeof BaseCombobox.Portal>["container"];
+    sideOffset?: number;
+  }
+>(function ComboboxContent(
+  { className, children, container, sideOffset = 4, ...props },
+  ref,
+) {
+  return (
+    <BaseCombobox.Portal container={container}>
+      <BaseCombobox.Positioner
+        className="sh-ui-combobox__positioner"
+        sideOffset={sideOffset}
+        align="start"
+      >
+        <BaseCombobox.Popup
+          ref={ref}
+          className={cx("sh-ui-combobox__content", className)}
+          {...props}
+        >
+          {children}
+        </BaseCombobox.Popup>
+      </BaseCombobox.Positioner>
+    </BaseCombobox.Portal>
+  );
+});
+
+export const ComboboxList = BaseCombobox.List;
+
+export const ComboboxItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Item>>
+>(function ComboboxItem({ className, children, ...props }, ref) {
+  return (
+    <BaseCombobox.Item
+      ref={ref}
+      className={cx("sh-ui-combobox__item", className)}
+      {...props}
+    >
+      <BaseCombobox.ItemIndicator className="sh-ui-combobox__item-indicator">
+        <CheckIcon />
+      </BaseCombobox.ItemIndicator>
+      <span className="sh-ui-combobox__item-text">{children}</span>
+    </BaseCombobox.Item>
+  );
+});
+
+export const ComboboxEmpty = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Empty>>
+>(function ComboboxEmpty({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Empty
+      ref={ref}
+      className={cx("sh-ui-combobox__empty", className)}
+      {...props}
+    />
+  );
+});
+
+export const ComboboxGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.GroupLabel>>
+>(function ComboboxGroupLabel({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.GroupLabel
+      ref={ref}
+      className={cx("sh-ui-combobox__group-label", className)}
+      {...props}
+    />
+  );
+});
+
+/** 다중 선택 칩. */
+export const ComboboxChip = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Chip>>
+>(function ComboboxChip({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Chip
+      ref={ref}
+      className={cx("sh-ui-combobox__chip", className)}
+      {...props}
+    />
+  );
+});
+
+/** 칩 × 제거 버튼. */
+export const ComboboxChipRemove = React.forwardRef<
+  HTMLButtonElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.ChipRemove>>
+>(function ComboboxChipRemove({ className, children, ...props }, ref) {
+  return (
+    <BaseCombobox.ChipRemove
+      ref={ref}
+      className={cx("sh-ui-combobox__chip-remove", className)}
+      {...props}
+    >
+      {children ?? "×"}
+    </BaseCombobox.ChipRemove>
+  );
+});
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden>
+      <path
+        d="M3 8.5l3 3 7-7"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/data/registry/react/components/combobox/styles.css

@@ -0,0 +1,151 @@
+/* ───── Input (트리거 겸용) ───── */
+.sh-ui-combobox__input {
+  display: inline-flex;
+  width: 100%;
+  min-width: 10rem;
+  height: var(--control-md);
+  padding: 0 var(--space-3);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: var(--text-sm);
+  line-height: 1;
+  outline: none;
+  transition: border-color var(--duration-fast);
+}
+.sh-ui-combobox__input::placeholder {
+  color: var(--foreground-subtle);
+}
+.sh-ui-combobox__input:hover:not(:disabled) {
+  border-color: var(--border-strong);
+}
+.sh-ui-combobox__input:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+.sh-ui-combobox__input:disabled {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+/* ───── Popup ───── */
+.sh-ui-combobox__positioner {
+  z-index: var(--z-dropdown);
+  outline: none;
+  width: var(--anchor-width);
+}
+
+.sh-ui-combobox__content {
+  max-height: min(20rem, var(--available-height));
+  overflow-y: auto;
+  padding: var(--space-1);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  outline: none;
+  transform-origin: var(--transform-origin);
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+.sh-ui-combobox__content[data-starting-style],
+.sh-ui-combobox__content[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+/* ───── Item ───── */
+.sh-ui-combobox__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0.375rem 0.75rem;
+  font-size: var(--text-sm);
+  line-height: 1.4;
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+.sh-ui-combobox__item[data-highlighted],
+.sh-ui-combobox__item:hover {
+  background: var(--background-muted);
+}
+.sh-ui-combobox__item[data-selected] {
+  color: var(--foreground);
+  font-weight: var(--weight-medium);
+}
+.sh-ui-combobox__item[data-disabled] {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.sh-ui-combobox__item-indicator {
+  order: 1;
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--foreground);
+}
+
+.sh-ui-combobox__item-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ───── Empty ───── */
+.sh-ui-combobox__empty {
+  padding: var(--space-3) var(--space-2);
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--foreground-muted);
+}
+
+/* ───── Group label ───── */
+.sh-ui-combobox__group-label {
+  padding: 0.375rem var(--space-2) var(--space-1);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  color: var(--foreground-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* ───── Chips (multi) ───── */
+.sh-ui-combobox__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 0.125rem 0.375rem 0.125rem var(--space-2);
+  margin-right: var(--space-1);
+  font-size: var(--text-xs);
+  line-height: 1.25rem;
+  background: var(--background-muted);
+  border-radius: calc(var(--radius) - 2px);
+  white-space: nowrap;
+}
+
+.sh-ui-combobox__chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--foreground-muted);
+  font-size: var(--text-sm);
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast);
+}
+.sh-ui-combobox__chip-remove:hover {
+  background: var(--background);
+  color: var(--foreground);
+}

package/data/registry/react/components/context-menu/index.tsx

@@ -0,0 +1,253 @@
+import * as React from "react";
+import { ContextMenu as BaseContextMenu } from "@base-ui-components/react/context-menu";
+import "./styles.css";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/* ───────── Root ───────── */
+
+/**
+ * 우클릭(또는 long-press)으로 열리는 컨텍스트 메뉴 루트. 자식으로 Trigger와 Content를 둔다.
+ * 사용 가능 액션이 명시적으로 보이는 게 유리한 경우엔 일반 버튼 + DropdownMenu를 권장.
+ */
+export const ContextMenu = BaseContextMenu.Root;
+
+/* ───────── Trigger ─────────
+ * 우클릭(또는 long-press)을 감지하는 wrapper. 기본은 투명, 사용자는
+ * 자신의 영역(Card, 이미지 등)에 적용하여 감싼다.
+ */
+
+/** 우클릭/long-press를 감지할 영역. Card나 이미지 등 임의 영역을 자식으로 감싼다. */
+export const ContextMenuTrigger = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Trigger>>
+>(function ContextMenuTrigger({ className, ...props }, ref) {
+  return (
+    <BaseContextMenu.Trigger
+      ref={ref}
+      className={cx("sh-ui-cm__trigger", className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Content ───────── */
+
+export interface ContextMenuContentProps
+  extends WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseContextMenu.Popup>
+  > {
+  /**
+   * Portal이 마운트될 DOM 노드.
+   * @default document.body
+   */
+  container?: React.ComponentPropsWithoutRef<
+    typeof BaseContextMenu.Portal
+  >["container"];
+}
+
+/** 메뉴의 실제 콘텐츠. portal로 마운트되며 클릭 위치 기준으로 자동 배치된다. */
+export const ContextMenuContent = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuContentProps
+>(function ContextMenuContent({ className, children, container, ...props }, ref) {
+  return (
+    <BaseContextMenu.Portal container={container}>
+      <BaseContextMenu.Positioner className="sh-ui-cm__positioner">
+        <BaseContextMenu.Popup
+          ref={ref}
+          className={cx("sh-ui-cm__content", className)}
+          {...props}
+        >
+          {children}
+        </BaseContextMenu.Popup>
+      </BaseContextMenu.Positioner>
+    </BaseContextMenu.Portal>
+  );
+});
+
+/* ───────── Item ───────── */
+
+/** 일반 메뉴 항목. 클릭 시 메뉴가 닫히고 onClick이 발생한다. */
+export const ContextMenuItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Item>>
+>(function ContextMenuItem({ className, ...props }, ref) {
+  return (
+    <BaseContextMenu.Item
+      ref={ref}
+      className={cx("sh-ui-cm__item", className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── CheckboxItem / RadioItem ───────── */
+
+/** 체크 표시를 토글하는 메뉴 항목. 메뉴는 닫지 않고 상태만 바꾸는 옵션 ON/OFF 용도. */
+export const ContextMenuCheckboxItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseContextMenu.CheckboxItem>
+  >
+>(function ContextMenuCheckboxItem({ className, children, ...props }, ref) {
+  return (
+    <BaseContextMenu.CheckboxItem
+      ref={ref}
+      className={cx("sh-ui-cm__item", "sh-ui-cm__item--check", className)}
+      {...props}
+    >
+      <span className="sh-ui-cm__item-indicator" aria-hidden>
+        <BaseContextMenu.CheckboxItemIndicator>
+          <CheckIcon />
+        </BaseContextMenu.CheckboxItemIndicator>
+      </span>
+      <span className="sh-ui-cm__item-text">{children}</span>
+    </BaseContextMenu.CheckboxItem>
+  );
+});
+
+/** RadioItem들을 단일 선택 그룹으로 묶는 컨테이너. `value`로 선택값을 제어. */
+export const ContextMenuRadioGroup = BaseContextMenu.RadioGroup;
+
+/** ContextMenuRadioGroup 내부의 단일 선택 항목. */
+export const ContextMenuRadioItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseContextMenu.RadioItem>
+  >
+>(function ContextMenuRadioItem({ className, children, ...props }, ref) {
+  return (
+    <BaseContextMenu.RadioItem
+      ref={ref}
+      className={cx("sh-ui-cm__item", "sh-ui-cm__item--check", className)}
+      {...props}
+    >
+      <span className="sh-ui-cm__item-indicator" aria-hidden>
+        <BaseContextMenu.RadioItemIndicator>
+          <DotIcon />
+        </BaseContextMenu.RadioItemIndicator>
+      </span>
+      <span className="sh-ui-cm__item-text">{children}</span>
+    </BaseContextMenu.RadioItem>
+  );
+});
+
+/* ───────── Group / Label / Separator ───────── */
+
+/** 의미적으로 묶이는 항목 그룹. ContextMenuLabel과 함께 사용해 카테고리 헤더를 붙인다. */
+export const ContextMenuGroup = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Group>>
+>(function ContextMenuGroup({ className, ...props }, ref) {
+  return (
+    <BaseContextMenu.Group
+      ref={ref}
+      className={cx("sh-ui-cm__group", className)}
+      {...props}
+    />
+  );
+});
+
+/** 그룹의 카테고리 헤더 라벨. 클릭 불가, 시각·접근성 컨텍스트 제공용. */
+export const ContextMenuLabel = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseContextMenu.GroupLabel>
+  >
+>(function ContextMenuLabel({ className, ...props }, ref) {
+  return (
+    <BaseContextMenu.GroupLabel
+      ref={ref}
+      className={cx("sh-ui-cm__label", className)}
+      {...props}
+    />
+  );
+});
+
+/** 항목 사이의 시각적 구분선. */
+export const ContextMenuSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(function ContextMenuSeparator({ className, ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      role="separator"
+      aria-orientation="horizontal"
+      className={cx("sh-ui-cm__separator", className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Submenu ───────── */
+
+/** 서브메뉴 루트. 호버/포커스 시 우측으로 자식 메뉴를 펼친다. */
+export const ContextMenuSub = BaseContextMenu.SubmenuRoot;
+
+/** 서브메뉴를 여는 항목. 우측 화살표 아이콘이 자동 부착된다. */
+export const ContextMenuSubTrigger = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuTrigger>
+  >
+>(function ContextMenuSubTrigger({ className, children, ...props }, ref) {
+  return (
+    <BaseContextMenu.SubmenuTrigger
+      ref={ref}
+      className={cx("sh-ui-cm__item", "sh-ui-cm__sub-trigger", className)}
+      {...props}
+    >
+      <span className="sh-ui-cm__item-text">{children}</span>
+      <span className="sh-ui-cm__sub-arrow" aria-hidden>
+        <ChevronRightIcon />
+      </span>
+    </BaseContextMenu.SubmenuTrigger>
+  );
+});
+
+/** 서브메뉴의 콘텐츠. ContextMenuContent의 별칭이다. */
+export const ContextMenuSubContent = ContextMenuContent;
+
+/* ───────── 기본 아이콘 ───────── */
+
+function CheckIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M3.5 8.5l3 3 6-7"
+        stroke="currentColor"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function DotIcon() {
+  return (
+    <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden>
+      <circle cx="4" cy="4" r="3" />
+    </svg>
+  );
+}
+
+function ChevronRightIcon() {
+  return (
+    <svg width="12" height="12" 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/context-menu/styles.css

@@ -0,0 +1,140 @@
+/* ContextMenu는 DropdownMenu와 동일한 시각 언어를 유지한다.
+   트리거만 우클릭 감지용 투명 wrapper. */
+
+.sh-ui-cm__trigger {
+  /* 기본은 투명 — 사용자가 자신의 요소를 그대로 사용 */
+  display: contents;
+}
+
+/* ───────── Positioner / Content ───────── */
+
+.sh-ui-cm__positioner {
+  outline: none;
+  z-index: var(--z-dropdown);
+}
+
+.sh-ui-cm__content {
+  min-width: 10rem;
+  max-height: min(24rem, var(--available-height, 24rem));
+  overflow-y: auto;
+  padding: var(--space-1);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.08),
+    0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  font-size: var(--text-sm);
+  transform-origin: var(--transform-origin);
+  animation: sh-ui-cm-in 140ms ease-out;
+  outline: none;
+}
+
+.sh-ui-cm__content[data-ending-style] {
+  animation: sh-ui-cm-out 100ms ease-in forwards;
+}
+
+@keyframes sh-ui-cm-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes sh-ui-cm-out {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.96); }
+}
+
+/* ───────── Item ───────── */
+
+.sh-ui-cm__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0.5rem 0.75rem;
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  transition: background-color 80ms;
+}
+
+.sh-ui-cm__item[data-highlighted],
+.sh-ui-cm__item:hover {
+  background: var(--background-muted);
+}
+
+.sh-ui-cm__item[data-disabled] {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.sh-ui-cm__item-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sh-ui-cm__item--check {
+  padding-left: 1.75rem;
+}
+
+.sh-ui-cm__item-indicator {
+  position: absolute;
+  left: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  color: var(--foreground);
+}
+
+/* ───────── Group / Label / Separator ───────── */
+
+.sh-ui-cm__group {
+  padding: 0;
+}
+
+.sh-ui-cm__label {
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  color: var(--foreground-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.sh-ui-cm__separator {
+  height: 1px;
+  background: var(--border);
+  margin: var(--space-1) 0;
+}
+
+/* ───────── Submenu trigger ───────── */
+
+.sh-ui-cm__sub-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  color: var(--foreground-muted);
+}
+
+.sh-ui-cm__sub-trigger[data-popup-open] {
+  background: var(--background-muted);
+}
+
+/* ───────── Reduced motion ───────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-cm__content,
+  .sh-ui-cm__content[data-ending-style] {
+    animation: none;
+  }
+  .sh-ui-cm__item {
+    transition: none;
+  }
+}