sh-ui-cli 0.48.0 → 0.50.0

package/data/registry/react/components/dialog/index.vanilla-extract.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { byKey, dialog__backdrop, dialog__content, dialog__title, dialog__description, dialog__footer, dialog__close } from "./styles.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(dialog__close, className)}
+      aria-label="닫기"
+      {...props}
+    >
+      {children ?? "×"}
+    </BaseDialog.Close>
+  );
+}
+
+/** Dialog 본문 하단의 액션 버튼 영역. 보통 [취소, 확인] 순서로 배치. */
+export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn(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={dialog__backdrop} />
+        <BaseDialog.Popup
+          ref={ref}
+          className={cn(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(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(dialog__description, className)}
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,140 @@
+import { style } from "@vanilla-extract/css";
+
+export const dialog__backdrop = style({
+  position: "fixed",
+  inset: 0,
+  zIndex: "var(--z-overlay)",
+  background: "rgba(0, 0, 0, 0.25)",
+  backdropFilter: "blur(8px)",
+  transition: "opacity var(--duration-slow) ease",
+  selectors: {
+    "&[data-starting-style]": {
+      opacity: 0,
+    },
+    "&[data-ending-style]": {
+      opacity: 0,
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+    },
+  },
+});
+
+export const dialog__content = style({
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  zIndex: "var(--z-modal)",
+  display: "flex",
+  flexDirection: "column",
+  width: "calc(100% - 2rem)",
+  maxWidth: "28rem",
+  maxHeight: "calc(100dvh - 4rem)",
+  padding: "var(--space-6)",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  boxShadow: "var(--shadow-xl)",
+  outline: "none",
+  overflowY: "auto",
+  transition: "opacity var(--duration-slow) ease,\n    transform var(--duration-slow) ease",
+  selectors: {
+    "&[data-starting-style]": {
+      opacity: 0,
+      transform: "translate(-50%, calc(-50% + 0.5rem)) scale(0.97)",
+    },
+    "&[data-ending-style]": {
+      opacity: 0,
+      transform: "translate(-50%, calc(-50% + 0.25rem)) scale(0.98)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+      selectors: {
+        "&[data-starting-style]": {
+          transform: "translate(-50%, -50%)",
+        },
+        "&[data-ending-style]": {
+          transform: "translate(-50%, -50%)",
+        },
+      },
+    },
+  },
+});
+
+export const dialog__title = style({
+  margin: "0 0 var(--space-1)",
+  fontWeight: "var(--weight-semibold)",
+  fontSize: "var(--text-lg)",
+  lineHeight: 1.4,
+});
+
+export const dialog__description = style({
+  margin: "0 0 var(--space-5)",
+  color: "var(--foreground-muted)",
+  fontSize: "var(--text-sm)",
+  lineHeight: 1.5,
+});
+
+export const dialog__footer = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  gap: "var(--space-2)",
+  paddingTop: "var(--space-4)",
+  borderTop: "1px solid var(--border)",
+  marginTop: "auto",
+});
+
+export const dialog__close = style({
+  position: "absolute",
+  top: "var(--space-3)",
+  right: "var(--space-3)",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "2rem",
+  height: "2rem",
+  border: 0,
+  borderRadius: "calc(var(--radius) - 2px)",
+  background: "transparent",
+  color: "var(--foreground-muted)",
+  fontSize: "var(--text-lg)",
+  lineHeight: 1,
+  cursor: "pointer",
+  transition: "background-color var(--duration-fast), color var(--duration-fast)",
+  selectors: {
+    "&:hover": {
+      background: "var(--background-muted)",
+      color: "var(--foreground)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "dialog__backdrop": dialog__backdrop,
+  "dialog__content": dialog__content,
+  "dialog__title": dialog__title,
+  "dialog__description": dialog__description,
+  "dialog__footer": dialog__footer,
+  "dialog__close": dialog__close,
+};

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

@@ -0,0 +1,255 @@
+"use client";
+
+import * as React from "react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { byKey, dm__trigger, dm__positioner, dm__content, dm__item, dmItemText, dmItemCheck, dmItemIndicator, dm__group, dm__label, dm__separator, dmSubArrow, dmSubTrigger } from "./styles.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(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={dm__positioner}
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+      >
+        <BaseMenu.Popup
+          ref={ref}
+          className={cn(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(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(dm__item, dmItemCheck, className)}
+      {...props}
+    >
+      <span className={dmItemIndicator} aria-hidden>
+        <BaseMenu.CheckboxItemIndicator>
+          <CheckIcon />
+        </BaseMenu.CheckboxItemIndicator>
+      </span>
+      <span className={dmItemText}>{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(dm__item, dmItemCheck, className)}
+      {...props}
+    >
+      <span className={dmItemIndicator} aria-hidden>
+        <BaseMenu.RadioItemIndicator>
+          <DotIcon />
+        </BaseMenu.RadioItemIndicator>
+      </span>
+      <span className={dmItemText}>{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(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(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(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(dm__item, dmSubTrigger, className)}
+      {...props}
+    >
+      <span className={dmItemText}>{children}</span>
+      <span className={dmSubArrow} 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.css.ts

@@ -0,0 +1,175 @@
+import { style, keyframes } from "@vanilla-extract/css";
+
+export const shUiDmIn = keyframes({
+  "from": {
+    opacity: 0,
+    transform: "scale(0.96)",
+  },
+  "to": {
+    opacity: 1,
+    transform: "scale(1)",
+  },
+});
+
+export const shUiDmOut = keyframes({
+  "from": {
+    opacity: 1,
+    transform: "scale(1)",
+  },
+  "to": {
+    opacity: 0,
+    transform: "scale(0.96)",
+  },
+});
+
+export const dm__trigger = style({
+  font: "inherit",
+  cursor: "pointer",
+  WebkitTapHighlightColor: "transparent",
+  selectors: {
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+  },
+});
+
+export const dm__positioner = style({
+  outline: "none",
+  zIndex: "var(--z-dropdown)",
+});
+
+export const dm__content = style({
+  minWidth: "10rem",
+  maxHeight: "min(24rem, var(--available-height, 24rem))",
+  overflowY: "auto",
+  padding: "var(--space-1)",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.08),\n    0 2px 4px -2px rgba(0, 0, 0, 0.05)",
+  fontSize: "var(--text-sm)",
+  transformOrigin: "var(--transform-origin)",
+  animation: "sh-ui-dm-in 140ms ease-out",
+  outline: "none",
+  selectors: {
+    "&[data-ending-style]": {
+      animation: "sh-ui-dm-out 100ms ease-in forwards",
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      animation: "none",
+      selectors: {
+        "&[data-ending-style]": {
+          animation: "none",
+        },
+      },
+    },
+  },
+});
+
+export const dm__item = style({
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--space-2)",
+  padding: "0.5rem 0.75rem",
+  borderRadius: "calc(var(--radius) - 2px)",
+  cursor: "pointer",
+  outline: "none",
+  userSelect: "none",
+  transition: "background-color 80ms",
+  selectors: {
+    "&[data-highlighted]": {
+      background: "var(--background-muted)",
+    },
+    "&:hover": {
+      background: "var(--background-muted)",
+    },
+    "&[data-disabled]": {
+      opacity: "var(--opacity-disabled)",
+      pointerEvents: "none",
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+    },
+  },
+});
+
+export const dmItemText = style({
+  flex: 1,
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+export const dmItemCheck = style({
+  paddingLeft: "1.75rem",
+});
+
+export const dmItemIndicator = style({
+  position: "absolute",
+  left: "0.5rem",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "1rem",
+  height: "1rem",
+  color: "var(--foreground)",
+});
+
+export const dm__group = style({
+  padding: 0,
+});
+
+export const dm__label = style({
+  padding: "var(--space-2) var(--space-2) var(--space-1)",
+  fontSize: "var(--text-xs)",
+  fontWeight: "var(--weight-semibold)",
+  color: "var(--foreground-muted)",
+  textTransform: "uppercase",
+  letterSpacing: "0.04em",
+});
+
+export const dm__separator = style({
+  height: "1px",
+  background: "var(--border)",
+  margin: "var(--space-1) 0",
+});
+
+export const dmSubArrow = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginLeft: "auto",
+  color: "var(--foreground-muted)",
+});
+
+export const dmSubTrigger = style({
+  selectors: {
+    "&[data-popup-open]": {
+      background: "var(--background-muted)",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "dm__trigger": dm__trigger,
+  "dm__positioner": dm__positioner,
+  "dm__content": dm__content,
+  "dm__item": dm__item,
+  "dm__item-text": dmItemText,
+  "dm__item--check": dmItemCheck,
+  "dm__item-indicator": dmItemIndicator,
+  "dm__group": dm__group,
+  "dm__label": dm__label,
+  "dm__separator": dm__separator,
+  "dm__sub-arrow": dmSubArrow,
+  "dm__sub-trigger": dmSubTrigger,
+};