sh-ui-cli 0.14.0 → 0.21.0

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

@@ -0,0 +1,257 @@
+"use client";
+
+import * as React from "react";
+import { Menu as BaseMenu } from "@base-ui-components/react/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 ───────── */
+
+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={cx("sh-ui-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="sh-ui-dm__positioner"
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+      >
+        <BaseMenu.Popup
+          ref={ref}
+          className={cx("sh-ui-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={cx("sh-ui-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={cx("sh-ui-dm__item", "sh-ui-dm__item--check", className)}
+      {...props}
+    >
+      <span className="sh-ui-dm__item-indicator" aria-hidden>
+        <BaseMenu.CheckboxItemIndicator>
+          <CheckIcon />
+        </BaseMenu.CheckboxItemIndicator>
+      </span>
+      <span className="sh-ui-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={cx("sh-ui-dm__item", "sh-ui-dm__item--check", className)}
+      {...props}
+    >
+      <span className="sh-ui-dm__item-indicator" aria-hidden>
+        <BaseMenu.RadioItemIndicator>
+          <DotIcon />
+        </BaseMenu.RadioItemIndicator>
+      </span>
+      <span className="sh-ui-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={cx("sh-ui-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={cx("sh-ui-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={cx("sh-ui-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={cx("sh-ui-dm__item", "sh-ui-dm__sub-trigger", className)}
+      {...props}
+    >
+      <span className="sh-ui-dm__item-text">{children}</span>
+      <span className="sh-ui-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.css

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