sh-ui-cli 0.46.0 → 0.48.0

package/data/registry/react/components/dialog/index.module.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import styles from "./styles.module.css";
+
+import { cn } from "@SH_UI_UTILS@";
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+
+/**
+ * 모달 다이얼로그 루트. 열림 상태를 가지며 자식으로 Trigger·Content를 둔다.
+ * 주의를 강제하는 흐름(확인/입력)에 사용하고, 단순 안내는 Popover나 Toast를 권장.
+ */
+export const Dialog = BaseDialog.Root;
+
+/** Dialog를 여는 트리거. 보통 Button을 감싸 사용. */
+export const DialogTrigger = BaseDialog.Trigger;
+
+/** 클릭 시 Dialog를 닫는 요소. footer의 취소 버튼 등에 사용. */
+export const DialogClose = BaseDialog.Close;
+
+/** 우상단에 배치되는 X 닫기 버튼. `aria-label="닫기"`가 자동 부여된다. */
+export function DialogCloseX({ className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <BaseDialog.Close
+      className={cn(styles.dialog__close, className)}
+      aria-label="닫기"
+      {...props}
+    >
+      {children ?? "×"}
+    </BaseDialog.Close>
+  );
+}
+
+/** Dialog 본문 하단의 액션 버튼 영역. 보통 [취소, 확인] 순서로 배치. */
+export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn(styles.dialog__footer, className)} {...props} />;
+}
+
+export interface DialogContentProps
+  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDialog.Popup>> {
+  /**
+   * Portal이 마운트될 DOM 노드. 모달이 다른 stacking context에 갇혀야 할 때 지정한다.
+   * @default document.body
+   */
+  container?: React.ComponentPropsWithoutRef<typeof BaseDialog.Portal>["container"];
+}
+
+/**
+ * Dialog의 실제 콘텐츠. Portal로 body 끝에 마운트되며 backdrop·focus trap·ESC 닫힘 등이 자동 처리된다.
+ * 접근성: 안에 반드시 `DialogTitle`을 두고, 추가 설명은 `DialogDescription`으로 연결할 것.
+ */
+export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
+  function DialogContent({ className, children, container, ...props }, ref) {
+    return (
+      <BaseDialog.Portal container={container}>
+        <BaseDialog.Backdrop className={styles.dialog__backdrop} />
+        <BaseDialog.Popup
+          ref={ref}
+          className={cn(styles.dialog__content, className)}
+          {...props}
+        >
+          {children}
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    );
+  },
+);
+
+/** Dialog의 제목. 접근성을 위해 DialogContent 안에 항상 포함시킬 것. */
+export const DialogTitle = React.forwardRef<
+  HTMLHeadingElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDialog.Title>>
+>(function DialogTitle({ className, ...props }, ref) {
+  return (
+    <BaseDialog.Title
+      ref={ref}
+      className={cn(styles.dialog__title, className)}
+      {...props}
+    />
+  );
+});
+
+/** Dialog의 보조 설명. 제목만으로 맥락이 부족할 때 사용한다. */
+export const DialogDescription = React.forwardRef<
+  HTMLParagraphElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDialog.Description>>
+>(function DialogDescription({ className, ...props }, ref) {
+  return (
+    <BaseDialog.Description
+      ref={ref}
+      className={cn(styles.dialog__description, className)}
+      {...props}
+    />
+  );
+});

package/data/registry/react/components/dialog/styles.module.css

@@ -0,0 +1,127 @@
+/* ── Backdrop ── */
+
+.dialog__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(8px);
+  transition: opacity var(--duration-slow) ease;
+}
+
+.dialog__backdrop[data-starting-style],
+.dialog__backdrop[data-ending-style] {
+  opacity: 0;
+}
+
+/* ── Content (Popup) ── */
+
+.dialog__content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: var(--z-modal);
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 2rem);
+  max-width: 28rem;
+  max-height: calc(100dvh - 4rem);
+  padding: var(--space-6);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-xl);
+  outline: none;
+  overflow-y: auto;
+  transition:
+    opacity var(--duration-slow) ease,
+    transform var(--duration-slow) ease;
+}
+
+.dialog__content[data-starting-style] {
+  opacity: 0;
+  transform: translate(-50%, calc(-50% + 0.5rem)) scale(0.97);
+}
+
+.dialog__content[data-ending-style] {
+  opacity: 0;
+  transform: translate(-50%, calc(-50% + 0.25rem)) scale(0.98);
+}
+
+.dialog__content:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+/* ── Title ── */
+
+.dialog__title {
+  margin: 0 0 var(--space-1);
+  font-weight: var(--weight-semibold);
+  font-size: var(--text-lg);
+  line-height: 1.4;
+}
+
+/* ── Description ── */
+
+.dialog__description {
+  margin: 0 0 var(--space-5);
+  color: var(--foreground-muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+/* ── Footer (액션 버튼 영역) ── */
+
+.dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--border);
+  margin-top: auto;
+}
+
+/* ── Close (× 버튼) ── */
+
+.dialog__close {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: var(--foreground-muted);
+  font-size: var(--text-lg);
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast);
+}
+.dialog__close:hover {
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+.dialog__close:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog__backdrop,
+  .dialog__content,
+  .dialog__close {
+    transition: none;
+  }
+  .dialog__content[data-starting-style],
+  .dialog__content[data-ending-style] {
+    transform: translate(-50%, -50%);
+  }
+}

package/data/registry/react/components/dropdown-menu/index.module.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import * as React from "react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import styles from "./styles.module.css";
+
+import { cn } from "@SH_UI_UTILS@";
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+
+/* ───────── Root ───────── */
+
+export const DropdownMenu = BaseMenu.Root;
+
+/* ───────── Trigger ───────── */
+
+export const DropdownMenuTrigger = React.forwardRef<
+  HTMLButtonElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Trigger>>
+>(function DropdownMenuTrigger({ className, ...props }, ref) {
+  return (
+    <BaseMenu.Trigger
+      ref={ref}
+      className={cn(styles.dm__trigger, className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Content ─────────
+ * Portal + Positioner + Popup을 한 컴포넌트로 묶는다. Popover와 동일한 관용.
+ */
+
+export interface DropdownMenuContentProps
+  extends WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseMenu.Popup>
+  > {
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  /** Trigger-Popup 간격(px). 기본 6. */
+  sideOffset?: number;
+  container?: React.ComponentPropsWithoutRef<
+    typeof BaseMenu.Portal
+  >["container"];
+}
+
+export const DropdownMenuContent = React.forwardRef<
+  HTMLDivElement,
+  DropdownMenuContentProps
+>(function DropdownMenuContent(
+  { className, children, side, align, sideOffset = 6, container, ...props },
+  ref,
+) {
+  return (
+    <BaseMenu.Portal container={container}>
+      <BaseMenu.Positioner
+        className={styles.dm__positioner}
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+      >
+        <BaseMenu.Popup
+          ref={ref}
+          className={cn(styles.dm__content, className)}
+          {...props}
+        >
+          {children}
+        </BaseMenu.Popup>
+      </BaseMenu.Positioner>
+    </BaseMenu.Portal>
+  );
+});
+
+/* ───────── Item ───────── */
+
+export const DropdownMenuItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Item>>
+>(function DropdownMenuItem({ className, ...props }, ref) {
+  return (
+    <BaseMenu.Item
+      ref={ref}
+      className={cn(styles.dm__item, className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── CheckboxItem ───────── */
+
+export interface DropdownMenuCheckboxItemProps
+  extends WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseMenu.CheckboxItem>
+  > {}
+
+export const DropdownMenuCheckboxItem = React.forwardRef<
+  HTMLDivElement,
+  DropdownMenuCheckboxItemProps
+>(function DropdownMenuCheckboxItem({ className, children, ...props }, ref) {
+  return (
+    <BaseMenu.CheckboxItem
+      ref={ref}
+      className={cn(styles.dm__item, styles["dm__item--check"], className)}
+      {...props}
+    >
+      <span className={styles["dm__item-indicator"]} aria-hidden>
+        <BaseMenu.CheckboxItemIndicator>
+          <CheckIcon />
+        </BaseMenu.CheckboxItemIndicator>
+      </span>
+      <span className={styles["dm__item-text"]}>{children}</span>
+    </BaseMenu.CheckboxItem>
+  );
+});
+
+/* ───────── RadioGroup / RadioItem ───────── */
+
+export const DropdownMenuRadioGroup = BaseMenu.RadioGroup;
+
+export interface DropdownMenuRadioItemProps
+  extends WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseMenu.RadioItem>
+  > {}
+
+export const DropdownMenuRadioItem = React.forwardRef<
+  HTMLDivElement,
+  DropdownMenuRadioItemProps
+>(function DropdownMenuRadioItem({ className, children, ...props }, ref) {
+  return (
+    <BaseMenu.RadioItem
+      ref={ref}
+      className={cn(styles.dm__item, styles["dm__item--check"], className)}
+      {...props}
+    >
+      <span className={styles["dm__item-indicator"]} aria-hidden>
+        <BaseMenu.RadioItemIndicator>
+          <DotIcon />
+        </BaseMenu.RadioItemIndicator>
+      </span>
+      <span className={styles["dm__item-text"]}>{children}</span>
+    </BaseMenu.RadioItem>
+  );
+});
+
+/* ───────── Group / Label ───────── */
+
+export const DropdownMenuGroup = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Group>>
+>(function DropdownMenuGroup({ className, ...props }, ref) {
+  return (
+    <BaseMenu.Group
+      ref={ref}
+      className={cn(styles.dm__group, className)}
+      {...props}
+    />
+  );
+});
+
+export const DropdownMenuLabel = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>>
+>(function DropdownMenuLabel({ className, ...props }, ref) {
+  return (
+    <BaseMenu.GroupLabel
+      ref={ref}
+      className={cn(styles.dm__label, className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Separator ─────────
+ * Base UI Menu에 전용 Separator가 없어 role="separator" div로 대체.
+ */
+
+export const DropdownMenuSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(function DropdownMenuSeparator({ className, ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      role="separator"
+      aria-orientation="horizontal"
+      className={cn(styles.dm__separator, className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Submenu ───────── */
+
+export const DropdownMenuSub = BaseMenu.SubmenuRoot;
+
+export const DropdownMenuSubTrigger = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseMenu.SubmenuTrigger>
+  >
+>(function DropdownMenuSubTrigger({ className, children, ...props }, ref) {
+  return (
+    <BaseMenu.SubmenuTrigger
+      ref={ref}
+      className={cn(styles.dm__item, styles["dm__sub-trigger"], className)}
+      {...props}
+    >
+      <span className={styles["dm__item-text"]}>{children}</span>
+      <span className={styles["dm__sub-arrow"]} aria-hidden>
+        <ChevronRightIcon />
+      </span>
+    </BaseMenu.SubmenuTrigger>
+  );
+});
+
+/** Submenu 내용물 — 최상위 Content와 동일한 포털 구조. */
+export const DropdownMenuSubContent = DropdownMenuContent;
+
+/* ───────── 기본 아이콘 ───────── */
+
+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/dropdown-menu/styles.module.css

@@ -0,0 +1,150 @@
+/* ───────── Trigger ─────────
+ * 기본 스타일을 최소화하여 사용자가 Button/아이콘 버튼 등 어떤 트리거든
+ * 덮어쓸 수 있게 한다. 포커스 링만 담당.
+ */
+.dm__trigger {
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.dm__trigger:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+/* ───────── Positioner / Content ───────── */
+
+.dm__positioner {
+  outline: none;
+  z-index: var(--z-dropdown);
+}
+
+.dm__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-dm-in 140ms ease-out;
+  outline: none;
+}
+
+.dm__content[data-ending-style] {
+  animation: sh-ui-dm-out 100ms ease-in forwards;
+}
+
+@keyframes sh-ui-dm-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes sh-ui-dm-out {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.96); }
+}
+
+/* ───────── Item ───────── */
+
+.dm__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;
+}
+
+.dm__item[data-highlighted],
+.dm__item:hover {
+  background: var(--background-muted);
+}
+
+.dm__item[data-disabled] {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.dm__item-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* checkbox/radio item — 왼쪽 인디케이터 공간 확보 */
+.dm__item--check {
+  padding-left: 1.75rem;
+}
+
+.dm__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 ───────── */
+
+.dm__group {
+  padding: 0;
+}
+
+.dm__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;
+}
+
+/* ───────── Separator ───────── */
+
+.dm__separator {
+  height: 1px;
+  background: var(--border);
+  margin: var(--space-1) 0;
+}
+
+/* ───────── Submenu trigger ───────── */
+
+.dm__sub-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  color: var(--foreground-muted);
+}
+
+.dm__sub-trigger[data-popup-open] {
+  background: var(--background-muted);
+}
+
+/* ───────── Reduced motion ───────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .dm__content,
+  .dm__content[data-ending-style] {
+    animation: none;
+  }
+  .dm__item {
+    transition: none;
+  }
+}