sh-ui-cli 0.42.1 → 0.44.0

package/data/registry/react/components/date-picker/index.tailwind.tsx

@@ -0,0 +1,294 @@
+"use client";
+
+import * as React from "react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { Calendar, type DateRange } from "../calendar";
+
+export type { DateRange };
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+const formatDefault = (d: Date) =>
+  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);
+
+const triggerClasses =
+  "inline-flex items-center justify-between w-full h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-none cursor-pointer transition-[border-color,box-shadow] duration-[var(--duration-fast)] hover:not-disabled:border-border-strong focus-visible:outline-none focus-visible:border-foreground focus-visible:shadow-[0_0_0_1px_var(--foreground)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus-visible:shadow-[0_0_0_1px_var(--danger)] [@media(hover:none)_and_(pointer:coarse)]:h-11 [@media(hover:none)_and_(pointer:coarse)]:text-[length:var(--text-base)]";
+
+const popupClasses =
+  "bg-background border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.12)] outline-none p-[var(--space-3)] 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";
+
+function CalendarIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden>
+      <rect x="2" y="3" width="12" height="11" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M2 6.5h12M5.5 2v2M10.5 2v2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+interface DatePickerContextValue {
+  selected: Date | undefined;
+  setSelected: (date: Date | undefined) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  focusedDate: Date;
+  setFocusedDate: (date: Date) => void;
+  formatDate: (date: Date) => string;
+  placeholder: string;
+  min?: Date; max?: Date; disabled?: boolean; readOnly?: boolean;
+  ariaInvalid?: boolean | "true";
+  closeOnSelect: boolean;
+}
+
+const DatePickerContext = React.createContext<DatePickerContextValue | null>(null);
+
+function useDatePickerContext(component: string) {
+  const ctx = React.useContext(DatePickerContext);
+  if (!ctx) throw new Error(`${component}는 <DatePicker> 내부에서 사용해야 합니다.`);
+  return ctx;
+}
+
+export interface DatePickerProps {
+  value?: Date; defaultValue?: Date;
+  onValueChange?: (date: Date | undefined) => void;
+  formatDate?: (date: Date) => string;
+  min?: Date; max?: Date;
+  placeholder?: string; disabled?: boolean; readOnly?: boolean;
+  "aria-invalid"?: boolean | "true";
+  className?: string; closeOnSelect?: boolean;
+  container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>["container"];
+  children?: React.ReactNode;
+}
+
+export function DatePicker({
+  value, defaultValue, onValueChange, formatDate = formatDefault,
+  min, max, placeholder = "날짜 선택", disabled, readOnly,
+  "aria-invalid": ariaInvalid, className, closeOnSelect = true, container, children,
+}: DatePickerProps) {
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = React.useState<Date | undefined>(defaultValue);
+  const selected = isControlled ? value : internal;
+  const [open, setOpen] = React.useState(false);
+  const [focusedDate, setFocusedDate] = React.useState<Date>(() => selected ?? new Date());
+
+  React.useEffect(() => {
+    if (open && selected) setFocusedDate(startOfMonth(selected));
+  }, [open, selected]);
+
+  const setSelected = React.useCallback((date: Date | undefined) => {
+    if (!isControlled) setInternal(date);
+    onValueChange?.(date);
+  }, [isControlled, onValueChange]);
+
+  const ctx = React.useMemo<DatePickerContextValue>(
+    () => ({
+      selected, setSelected, open, setOpen, focusedDate, setFocusedDate,
+      formatDate, placeholder, min, max, disabled, readOnly, ariaInvalid, closeOnSelect,
+    }),
+    [selected, setSelected, open, focusedDate, formatDate, placeholder, min, max, disabled, readOnly, ariaInvalid, closeOnSelect],
+  );
+
+  return (
+    <DatePickerContext.Provider value={ctx}>
+      <BasePopover.Root open={open} onOpenChange={setOpen}>
+        {children ?? (
+          <>
+            <DatePickerTrigger className={className} />
+            <DatePickerContent container={container}><DatePickerCalendar /></DatePickerContent>
+          </>
+        )}
+      </BasePopover.Root>
+    </DatePickerContext.Provider>
+  );
+}
+
+export interface DatePickerTriggerProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  children?: React.ReactNode | ((state: {
+    value: Date | undefined; formatted: string | undefined; placeholder: string;
+  }) => React.ReactNode);
+}
+
+export const DatePickerTrigger = React.forwardRef<HTMLButtonElement, DatePickerTriggerProps>(
+  function DatePickerTrigger({ className, children, onClick, ...props }, ref) {
+    const ctx = useDatePickerContext("DatePickerTrigger");
+    const displayText = ctx.selected ? ctx.formatDate(ctx.selected) : undefined;
+    const renderContent = () => {
+      if (typeof children === "function") return children({ value: ctx.selected, formatted: displayText, placeholder: ctx.placeholder });
+      if (children !== undefined) return children;
+      return (
+        <>
+          <span className={cx("overflow-hidden text-ellipsis whitespace-nowrap", !displayText && "text-foreground-subtle")}>
+            {displayText ?? ctx.placeholder}
+          </span>
+          <span className="shrink-0 inline-flex text-foreground-muted ml-[var(--space-2)]" aria-hidden>
+            <CalendarIcon />
+          </span>
+        </>
+      );
+    };
+    return (
+      <BasePopover.Trigger
+        ref={ref}
+        className={cx(triggerClasses, className)}
+        disabled={ctx.disabled}
+        aria-invalid={ctx.ariaInvalid}
+        aria-haspopup="dialog"
+        onClick={(e) => { if (ctx.readOnly) e.preventDefault(); onClick?.(e); }}
+        {...props}
+      >
+        {renderContent()}
+      </BasePopover.Trigger>
+    );
+  },
+);
+
+export interface DatePickerContentProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof BasePopover.Popup>, "className"> {
+  className?: string;
+  sideOffset?: React.ComponentPropsWithoutRef<typeof BasePopover.Positioner>["sideOffset"];
+  side?: React.ComponentPropsWithoutRef<typeof BasePopover.Positioner>["side"];
+  align?: React.ComponentPropsWithoutRef<typeof BasePopover.Positioner>["align"];
+  container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>["container"];
+}
+
+export const DatePickerContent = React.forwardRef<HTMLDivElement, DatePickerContentProps>(
+  function DatePickerContent(
+    { className, children, sideOffset = 4, side = "bottom", align = "start", container, ...props },
+    ref,
+  ) {
+    const ctx = useDatePickerContext("DatePickerContent");
+    if (ctx.disabled || ctx.readOnly) return null;
+    return (
+      <BasePopover.Portal container={container}>
+        <BasePopover.Positioner className="z-[var(--z-popover)] outline-none" sideOffset={sideOffset} side={side} align={align}>
+          <BasePopover.Popup ref={ref} className={cx(popupClasses, className)} {...props}>
+            {children}
+          </BasePopover.Popup>
+        </BasePopover.Positioner>
+      </BasePopover.Portal>
+    );
+  },
+);
+
+export function DatePickerCalendar() {
+  const ctx = useDatePickerContext("DatePickerCalendar");
+  const handleSelect = (date: Date | undefined) => {
+    ctx.setSelected(date);
+    if (date && ctx.closeOnSelect) ctx.setOpen(false);
+  };
+  return (
+    <Calendar
+      mode="single"
+      value={ctx.selected}
+      onValueChange={handleSelect}
+      month={ctx.focusedDate}
+      onMonthChange={ctx.setFocusedDate}
+      min={ctx.min}
+      max={ctx.max}
+    />
+  );
+}
+
+export interface DatePickerFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+export const DatePickerFooter = React.forwardRef<HTMLDivElement, DatePickerFooterProps>(
+  function DatePickerFooter({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cx(
+          "flex items-center justify-end gap-[var(--space-2)] mt-[var(--space-2)] pt-[var(--space-2)] border-t border-border",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export function useDatePicker() {
+  const ctx = useDatePickerContext("useDatePicker");
+  return {
+    value: ctx.selected, setValue: ctx.setSelected,
+    open: ctx.open, setOpen: ctx.setOpen,
+    focusedDate: ctx.focusedDate, setFocusedDate: ctx.setFocusedDate,
+  };
+}
+
+export interface DateRangePickerProps {
+  value?: DateRange; defaultValue?: DateRange;
+  onValueChange?: (range: DateRange | undefined) => void;
+  formatDate?: (date: Date) => string;
+  min?: Date; max?: Date;
+  placeholder?: string; disabled?: boolean; readOnly?: boolean;
+  "aria-invalid"?: boolean | "true";
+  className?: string;
+  container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>["container"];
+}
+
+export const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePickerProps>(
+  function DateRangePicker(
+    { value, defaultValue, onValueChange, formatDate = formatDefault, min, max,
+      placeholder = "시작일 ~ 종료일", disabled, readOnly, "aria-invalid": ariaInvalid, className, container },
+    ref,
+  ) {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<DateRange | undefined>(defaultValue);
+    const selected = isControlled ? value : internal;
+    const [open, setOpen] = React.useState(false);
+    const [calendarMonth, setCalendarMonth] = React.useState<Date>(() => selected?.from ?? new Date());
+
+    React.useEffect(() => {
+      if (open && selected?.from) setCalendarMonth(startOfMonth(selected.from));
+    }, [open, selected?.from]);
+
+    const handleRangeChange = (range: DateRange | undefined) => {
+      if (!isControlled) setInternal(range);
+      onValueChange?.(range);
+      if (range) setOpen(false);
+    };
+
+    const displayText = selected ? `${formatDate(selected.from)} ~ ${formatDate(selected.to)}` : undefined;
+
+    return (
+      <BasePopover.Root open={open} onOpenChange={setOpen}>
+        <BasePopover.Trigger
+          ref={ref}
+          className={cx(triggerClasses, className)}
+          disabled={disabled}
+          aria-invalid={ariaInvalid}
+          aria-haspopup="dialog"
+          onClick={(e) => { if (readOnly) e.preventDefault(); }}
+        >
+          <span className={cx("overflow-hidden text-ellipsis whitespace-nowrap", !displayText && "text-foreground-subtle")}>
+            {displayText ?? placeholder}
+          </span>
+          <span className="shrink-0 inline-flex text-foreground-muted ml-[var(--space-2)]" aria-hidden>
+            <CalendarIcon />
+          </span>
+        </BasePopover.Trigger>
+
+        {!disabled && !readOnly && (
+          <BasePopover.Portal container={container}>
+            <BasePopover.Positioner className="z-[var(--z-popover)] outline-none" sideOffset={4} side="bottom" align="start">
+              <BasePopover.Popup className={popupClasses}>
+                <Calendar
+                  mode="range"
+                  value={selected}
+                  onValueChange={handleRangeChange}
+                  month={calendarMonth}
+                  onMonthChange={setCalendarMonth}
+                  min={min}
+                  max={max}
+                />
+              </BasePopover.Popup>
+            </BasePopover.Positioner>
+          </BasePopover.Portal>
+        )}
+      </BasePopover.Root>
+    );
+  },
+);

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

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export const Dialog = BaseDialog.Root;
+export const DialogTrigger = BaseDialog.Trigger;
+export const DialogClose = BaseDialog.Close;
+
+export function DialogCloseX({ className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <BaseDialog.Close
+      className={cx(
+        "absolute top-[var(--space-3)] right-[var(--space-3)] inline-flex items-center justify-center w-8 h-8 border-0 rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground-muted text-[length:var(--text-lg)] leading-none cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:bg-background-muted hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none",
+        className,
+      )}
+      aria-label="닫기"
+      {...props}
+    >
+      {children ?? "×"}
+    </BaseDialog.Close>
+  );
+}
+
+export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cx(
+        "flex items-center justify-end gap-[var(--space-2)] pt-[var(--space-4)] border-t border-border mt-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export interface DialogContentProps
+  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDialog.Popup>> {
+  container?: React.ComponentPropsWithoutRef<typeof BaseDialog.Portal>["container"];
+}
+
+export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
+  function DialogContent({ className, children, container, ...props }, ref) {
+    return (
+      <BaseDialog.Portal container={container}>
+        <BaseDialog.Backdrop className="fixed inset-0 z-[var(--z-overlay)] bg-black/25 backdrop-blur-md transition-opacity duration-[var(--duration-slow)] motion-reduce:transition-none data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" />
+        <BaseDialog.Popup
+          ref={ref}
+          className={cx(
+            "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[var(--z-modal)] flex flex-col w-[calc(100%-2rem)] max-w-md max-h-[calc(100dvh-4rem)] p-[var(--space-6)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[var(--shadow-xl)] outline-none overflow-y-auto transition-[opacity,transform] duration-[var(--duration-slow)] motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:translate-y-[calc(-50%+0.5rem)] data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:translate-y-[calc(-50%+0.25rem)] data-[ending-style]:scale-[0.98] motion-reduce:data-[starting-style]:translate-y-[-50%] motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:translate-y-[-50%] 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}
+        >
+          {children}
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    );
+  },
+);
+
+export const DialogTitle = React.forwardRef<
+  HTMLHeadingElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDialog.Title>>
+>(function DialogTitle({ className, ...props }, ref) {
+  return (
+    <BaseDialog.Title
+      ref={ref}
+      className={cx(
+        "m-0 mb-[var(--space-1)] font-semibold text-[length:var(--text-lg)] leading-snug",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const DialogDescription = React.forwardRef<
+  HTMLParagraphElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDialog.Description>>
+>(function DialogDescription({ className, ...props }, ref) {
+  return (
+    <BaseDialog.Description
+      ref={ref}
+      className={cx(
+        "m-0 mb-[var(--space-5)] text-foreground-muted text-[length:var(--text-sm)] leading-normal",
+        className,
+      )}
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,205 @@
+"use client";
+
+import * as React from "react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+const itemBase =
+  "relative 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 motion-reduce:transition-none";
+const itemCheck = "pl-7";
+
+export const DropdownMenu = BaseMenu.Root;
+
+export const DropdownMenuTrigger = React.forwardRef<
+  HTMLButtonElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Trigger>>
+>(function DropdownMenuTrigger({ className, ...props }, ref) {
+  return (
+    <BaseMenu.Trigger
+      ref={ref}
+      className={cx(
+        "font-[inherit] cursor-pointer focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export interface DropdownMenuContentProps
+  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Popup>> {
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  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="outline-none z-[var(--z-dropdown)]"
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+        >
+          <BaseMenu.Popup
+            ref={ref}
+            className={cx(
+              "min-w-40 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-dm-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-dm-out_100ms_ease-in_forwards] outline-none motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none",
+              className,
+            )}
+            {...props}
+          >
+            {children}
+          </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    );
+  },
+);
+
+export const DropdownMenuItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Item>>
+>(function DropdownMenuItem({ className, ...props }, ref) {
+  return <BaseMenu.Item ref={ref} className={cx(itemBase, className)} {...props} />;
+});
+
+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(itemBase, itemCheck, className)} {...props}>
+      <span className="absolute left-2 inline-flex items-center justify-center w-4 h-4 text-foreground" aria-hidden>
+        <BaseMenu.CheckboxItemIndicator>
+          <CheckIcon />
+        </BaseMenu.CheckboxItemIndicator>
+      </span>
+      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+    </BaseMenu.CheckboxItem>
+  );
+});
+
+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(itemBase, itemCheck, className)} {...props}>
+      <span className="absolute left-2 inline-flex items-center justify-center w-4 h-4 text-foreground" aria-hidden>
+        <BaseMenu.RadioItemIndicator>
+          <DotIcon />
+        </BaseMenu.RadioItemIndicator>
+      </span>
+      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+    </BaseMenu.RadioItem>
+  );
+});
+
+export const DropdownMenuGroup = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Group>>
+>(function DropdownMenuGroup({ className, ...props }, ref) {
+  return <BaseMenu.Group ref={ref} className={cx("p-0", 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(
+        "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}
+    />
+  );
+});
+
+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("h-px bg-border my-[var(--space-1)]", className)}
+        {...props}
+      />
+    );
+  },
+);
+
+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(itemBase, "data-[popup-open]:bg-background-muted", className)}
+      {...props}
+    >
+      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+      <span className="inline-flex items-center justify-center ml-auto text-foreground-muted" aria-hidden>
+        <ChevronRightIcon />
+      </span>
+    </BaseMenu.SubmenuTrigger>
+  );
+});
+
+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>
+  );
+}
+
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-dm]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-dm", "");
+  style.textContent = `
+@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); } }
+  `;
+  document.head.appendChild(style);
+}