sh-ui-cli 0.43.0 → 0.44.0

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

@@ -0,0 +1,160 @@
+"use client";
+
+import * as React from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+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(
+        "inline-flex w-full min-w-40 h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] text-[length:var(--text-sm)] leading-none outline-none transition-[border-color] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+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="z-[var(--z-dropdown)] outline-none w-[var(--anchor-width)]"
+        sideOffset={sideOffset}
+        align="start"
+      >
+        <BaseCombobox.Popup
+          ref={ref}
+          className={cx(
+            "max-h-[min(20rem,var(--available-height))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.08)] outline-none origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.97]",
+            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(
+        "flex items-center gap-[var(--space-2)] py-1.5 px-3 text-[length:var(--text-sm)] leading-snug rounded-[calc(var(--radius)-2px)] cursor-pointer select-none outline-none data-[highlighted]:bg-background-muted hover:bg-background-muted data-[selected]:text-foreground data-[selected]:font-medium data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    >
+      <BaseCombobox.ItemIndicator className="order-1 ml-auto inline-flex items-center justify-center text-foreground">
+        <CheckIcon />
+      </BaseCombobox.ItemIndicator>
+      <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{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(
+        "py-[var(--space-3)] px-[var(--space-2)] text-center text-[0.8125rem] text-foreground-muted",
+        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(
+        "py-1.5 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 ComboboxChip = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Chip>>
+>(function ComboboxChip({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Chip
+      ref={ref}
+      className={cx(
+        "inline-flex items-center gap-[var(--space-1)] py-0.5 pr-1.5 pl-[var(--space-2)] mr-[var(--space-1)] text-[length:var(--text-xs)] leading-5 bg-background-muted rounded-[calc(var(--radius)-2px)] whitespace-nowrap",
+        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(
+        "inline-flex items-center justify-center w-4 h-4 p-0 border-0 rounded-full bg-transparent text-foreground-muted text-[length:var(--text-sm)] leading-none cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:bg-background hover:text-foreground motion-reduce:transition-none",
+        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/context-menu/index.tailwind.tsx

@@ -0,0 +1,170 @@
+import * as React from "react";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-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";
+const contentClasses =
+  "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-cm-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-cm-out_100ms_ease-in_forwards] outline-none motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none";
+
+export const ContextMenu = BaseContextMenu.Root;
+
+export const ContextMenuTrigger = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Trigger>>
+>(function ContextMenuTrigger({ className, ...props }, ref) {
+  return <BaseContextMenu.Trigger ref={ref} className={cx("contents", className)} {...props} />;
+});
+
+export interface ContextMenuContentProps
+  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Popup>> {
+  container?: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Portal>["container"];
+}
+
+export const ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(
+  function ContextMenuContent({ className, children, container, ...props }, ref) {
+    return (
+      <BaseContextMenu.Portal container={container}>
+        <BaseContextMenu.Positioner className="outline-none z-[var(--z-dropdown)]">
+          <BaseContextMenu.Popup ref={ref} className={cx(contentClasses, className)} {...props}>
+            {children}
+          </BaseContextMenu.Popup>
+        </BaseContextMenu.Positioner>
+      </BaseContextMenu.Portal>
+    );
+  },
+);
+
+export const ContextMenuItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Item>>
+>(function ContextMenuItem({ className, ...props }, ref) {
+  return <BaseContextMenu.Item ref={ref} className={cx(itemBase, className)} {...props} />;
+});
+
+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(itemBase, itemCheck, className)} {...props}>
+      <span className="absolute left-2 inline-flex items-center justify-center w-4 h-4 text-foreground" aria-hidden>
+        <BaseContextMenu.CheckboxItemIndicator>
+          <CheckIcon />
+        </BaseContextMenu.CheckboxItemIndicator>
+      </span>
+      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+    </BaseContextMenu.CheckboxItem>
+  );
+});
+
+export const ContextMenuRadioGroup = BaseContextMenu.RadioGroup;
+
+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(itemBase, itemCheck, className)} {...props}>
+      <span className="absolute left-2 inline-flex items-center justify-center w-4 h-4 text-foreground" aria-hidden>
+        <BaseContextMenu.RadioItemIndicator>
+          <DotIcon />
+        </BaseContextMenu.RadioItemIndicator>
+      </span>
+      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+    </BaseContextMenu.RadioItem>
+  );
+});
+
+export const ContextMenuGroup = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Group>>
+>(function ContextMenuGroup({ className, ...props }, ref) {
+  return <BaseContextMenu.Group ref={ref} className={cx("p-0", 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(
+        "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 ContextMenuSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function ContextMenuSeparator({ 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 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(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>
+    </BaseContextMenu.SubmenuTrigger>
+  );
+});
+
+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>
+  );
+}
+
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-cm]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-cm", "");
+  style.textContent = `
+@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); } }
+  `;
+  document.head.appendChild(style);
+}

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>
+    );
+  },
+);