myoperator-mcp 0.2.372 → 0.2.374

package/dist/index.js

@@ -2562,6 +2562,777 @@ const DateDivider = React.forwardRef(
 DateDivider.displayName = "DateDivider";
 
 export { DateDivider };
+`,
+  "date-range-picker": `import * as React from "react";
+import { createPortal } from "react-dom";
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  size as floatingSize,
+  useFloating,
+  type Placement,
+  type Strategy,
+} from "@floating-ui/react-dom";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+const DEFAULT_PLACEHOLDER = "Date Range";
+const POPOVER_MARGIN = 8;
+const POPOVER_GAP = 4;
+const MAX_POPOVER_HEIGHT = 420;
+const POPOVER_SCROLL_HEIGHT_VAR = "--date-range-picker-scroll-height";
+const CALENDAR_PLACEMENT: Placement = "bottom-start";
+// Above the calendar popover's own z-index (10050) so the month/year
+// dropdowns render on top of it rather than behind.
+const CALENDAR_DROPDOWN_Z_INDEX = "z-[10060]";
+const YEAR_OPTIONS_SPAN = 10;
+
+const weekDays = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
+const MONTH_SHORT_NAMES = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+const MONTH_LONG_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+const dateRangePickerTriggerVariants = cva(
+  "flex h-10 w-full items-center gap-2 rounded-lg border border-solid border-semantic-border-input bg-semantic-bg-primary px-4 py-2.5 text-left text-sm text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      state: {
+        default: "",
+        error:
+          "border-semantic-error-primary hover:border-semantic-error-primary",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  }
+);
+
+export interface DateRangeValue {
+  start?: Date;
+  end?: Date;
+}
+
+export interface DateRangePreset {
+  label: string;
+  getRange: () => DateRangeValue;
+}
+
+export interface DateRangePickerProps
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange">,
+    Pick<VariantProps<typeof dateRangePickerTriggerVariants>, "state"> {
+  value?: DateRangeValue;
+  defaultValue?: DateRangeValue;
+  onValueChange?: (value: DateRangeValue) => void;
+  /** Trigger placeholder text when no range is selected. Defaults to "Date Range". */
+  placeholder?: string;
+  /**
+   * Presets shown in the left column. Defaults to
+   * Today/Yesterday/Last 7 days/Last 30 days/This month/Last month.
+   * Pass an empty array to hide the presets column entirely.
+   */
+  presets?: DateRangePreset[];
+  minDate?: Date;
+  maxDate?: Date;
+  disablePastDates?: boolean;
+  disabled?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  portalContainer?: HTMLElement | null;
+  /** Custom display formatter for the trigger's filled-state text. Defaults to "D MMM YYYY - D MMM YYYY". */
+  formatRange?: (value: DateRangeValue) => string;
+  /** Additional className merged onto the trigger button (overrides base trigger styling) */
+  triggerClassName?: string;
+  /** Additional className merged onto the trigger's label span \u2014 e.g. \`"hidden sm:inline"\` to collapse to an icon-only button below a breakpoint */
+  triggerLabelClassName?: string;
+}
+
+function normalizeValue(value?: DateRangeValue): DateRangeValue {
+  return { start: value?.start, end: value?.end };
+}
+
+function isSameDay(a?: Date, b?: Date) {
+  if (!a || !b) return false;
+
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+function startOfDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+function isBeforeDay(date: Date, minDate: Date) {
+  return startOfDay(date).getTime() < startOfDay(minDate).getTime();
+}
+
+function isAfterDay(date: Date, maxDate: Date) {
+  return startOfDay(date).getTime() > startOfDay(maxDate).getTime();
+}
+
+function startOfMonth(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+
+function addMonths(date: Date, months: number) {
+  return new Date(date.getFullYear(), date.getMonth() + months, 1);
+}
+
+function addDays(date: Date, days: number) {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+}
+
+function getCalendarDays(month: Date) {
+  const firstDay = startOfMonth(month);
+  const gridStart = new Date(firstDay);
+  gridStart.setDate(firstDay.getDate() - firstDay.getDay());
+
+  return Array.from({ length: 42 }, (_, index) => {
+    const day = new Date(gridStart);
+    day.setDate(gridStart.getDate() + index);
+    return day;
+  });
+}
+
+function isPointerInsideElement(
+  event: MouseEvent,
+  element: HTMLElement | null
+) {
+  if (!element) return false;
+
+  const target = event.target;
+  if (target instanceof Node && element.contains(target)) return true;
+
+  if (typeof event.composedPath === "function") {
+    return event
+      .composedPath()
+      .some((node) => node instanceof Node && element.contains(node));
+  }
+
+  return false;
+}
+
+function formatDateShort(date: Date) {
+  return \`\${date.getDate()} \${MONTH_SHORT_NAMES[date.getMonth()]} \${date.getFullYear()}\`;
+}
+
+function defaultFormatRange(value: DateRangeValue) {
+  if (value.start && value.end) {
+    return \`\${formatDateShort(value.start)} - \${formatDateShort(value.end)}\`;
+  }
+  if (value.start) return formatDateShort(value.start);
+  if (value.end) return formatDateShort(value.end);
+
+  return "";
+}
+
+/**
+ * Default presets shown in the DateRangePicker's left column. Exported so
+ * consumers can reference, filter, or extend the list.
+ */
+export const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[] = [
+  {
+    label: "Today",
+    getRange: () => {
+      const today = startOfDay(new Date());
+      return { start: today, end: today };
+    },
+  },
+  {
+    label: "Yesterday",
+    getRange: () => {
+      const yesterday = startOfDay(addDays(new Date(), -1));
+      return { start: yesterday, end: yesterday };
+    },
+  },
+  {
+    label: "Last 7 days",
+    getRange: () => {
+      const today = startOfDay(new Date());
+      return { start: addDays(today, -6), end: today };
+    },
+  },
+  {
+    label: "Last 30 days",
+    getRange: () => {
+      const today = startOfDay(new Date());
+      return { start: addDays(today, -29), end: today };
+    },
+  },
+  {
+    label: "This month",
+    getRange: () => {
+      const today = startOfDay(new Date());
+      return { start: startOfMonth(today), end: today };
+    },
+  },
+  {
+    label: "Last month",
+    getRange: () => {
+      const start = addMonths(startOfMonth(new Date()), -1);
+      const end = new Date(start.getFullYear(), start.getMonth() + 1, 0);
+      return { start, end };
+    },
+  },
+];
+
+function FigmaCalendarIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden="true"
+    >
+      <path
+        d="M6 1.5V4.5M12 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z"
+        stroke="currentColor"
+        strokeWidth="0.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
+  (
+    {
+      className,
+      state,
+      value,
+      defaultValue,
+      onValueChange,
+      placeholder = DEFAULT_PLACEHOLDER,
+      presets = DEFAULT_DATE_RANGE_PRESETS,
+      minDate,
+      maxDate,
+      disablePastDates = false,
+      disabled = false,
+      open: controlledOpen,
+      defaultOpen = false,
+      onOpenChange,
+      portalContainer,
+      formatRange,
+      triggerClassName,
+      triggerLabelClassName,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const generatedId = React.useId();
+    const triggerId = id ?? generatedId;
+    const isValueControlled = value !== undefined;
+    const isOpenControlled = controlledOpen !== undefined;
+    const [internalValue, setInternalValue] = React.useState(() =>
+      normalizeValue(defaultValue)
+    );
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const currentValue = normalizeValue(
+      isValueControlled ? value : internalValue
+    );
+    const open = isOpenControlled ? controlledOpen : internalOpen;
+
+    // Draft state \u2014 the calendar operates on a working copy of the range so
+    // that Cancel can discard in-progress selections and Apply commits them.
+    const [draftValue, setDraftValue] = React.useState<DateRangeValue>(
+      () => currentValue
+    );
+    // Tracks whether the next day click should complete the range (true) or
+    // start a new one (false). Drives the "click 1 = start, click 2 = end,
+    // click 3 = restart" cycle.
+    const [pendingEnd, setPendingEnd] = React.useState(false);
+    const [visibleMonth, setVisibleMonth] = React.useState(() =>
+      startOfMonth(currentValue.start ?? currentValue.end ?? new Date())
+    );
+
+    const rootRef = React.useRef<HTMLDivElement | null>(null);
+    const triggerRef = React.useRef<HTMLButtonElement | null>(null);
+    const popoverRef = React.useRef<HTMLDivElement | null>(null);
+    const usesContainerPortal = portalContainer !== undefined;
+    const floatingStrategy: Strategy = usesContainerPortal
+      ? "absolute"
+      : "fixed";
+    const floatingMiddleware = React.useMemo(
+      () => [
+        offset(POPOVER_GAP),
+        flip({ padding: POPOVER_MARGIN }),
+        shift({ padding: POPOVER_MARGIN }),
+        floatingSize({
+          padding: POPOVER_MARGIN,
+          apply({ availableHeight, elements }) {
+            const maxHeight = Math.max(
+              1,
+              Math.min(MAX_POPOVER_HEIGHT, availableHeight)
+            );
+            elements.floating.style.setProperty(
+              POPOVER_SCROLL_HEIGHT_VAR,
+              \`\${maxHeight}px\`
+            );
+          },
+        }),
+      ],
+      []
+    );
+    const { refs, floatingStyles, isPositioned } =
+      useFloating<HTMLButtonElement>({
+        open,
+        placement: CALENDAR_PLACEMENT,
+        strategy: floatingStrategy,
+        transform: false,
+        middleware: floatingMiddleware,
+        whileElementsMounted: (reference, floating, update) =>
+          autoUpdate(reference, floating, update, { animationFrame: true }),
+      });
+    const calendarDays = React.useMemo(
+      () => getCalendarDays(visibleMonth),
+      [visibleMonth]
+    );
+    const displayValue = (formatRange ?? defaultFormatRange)(currentValue);
+    const effectiveMinDate = React.useMemo(() => {
+      if (!disablePastDates) return minDate;
+
+      const today = startOfDay(new Date());
+      if (!minDate) return today;
+
+      return isBeforeDay(minDate, today) ? today : minDate;
+    }, [disablePastDates, minDate]);
+    const portalMount =
+      typeof document !== "undefined"
+        ? usesContainerPortal
+          ? portalContainer
+          : document.body
+        : null;
+
+    const setOpen = React.useCallback(
+      (nextOpen: boolean) => {
+        if (!isOpenControlled) {
+          setInternalOpen(nextOpen);
+        }
+
+        onOpenChange?.(nextOpen);
+      },
+      [isOpenControlled, onOpenChange]
+    );
+
+    const setTriggerRef = React.useCallback(
+      (node: HTMLButtonElement | null) => {
+        triggerRef.current = node;
+        refs.setReference(node);
+      },
+      [refs]
+    );
+
+    const setPopoverRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        popoverRef.current = node;
+        refs.setFloating(node);
+      },
+      [refs]
+    );
+
+    // Reset the draft to the last committed value (and jump the calendar to
+    // that month) each time the popover opens, so a Cancel from a previous
+    // session never leaks into the next one.
+    const currentValueRef = React.useRef(currentValue);
+    React.useEffect(() => {
+      currentValueRef.current = currentValue;
+    });
+
+    React.useEffect(() => {
+      if (!open) return;
+
+      const latestValue = currentValueRef.current;
+      setDraftValue(latestValue);
+      setPendingEnd(false);
+      setVisibleMonth(
+        startOfMonth(latestValue.start ?? latestValue.end ?? new Date())
+      );
+    }, [open]);
+
+    React.useEffect(() => {
+      if (!open) return;
+
+      const handlePointerDown = (event: MouseEvent) => {
+        if (
+          !isPointerInsideElement(event, rootRef.current) &&
+          !isPointerInsideElement(event, popoverRef.current)
+        ) {
+          setOpen(false);
+        }
+      };
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === "Escape") {
+          setOpen(false);
+        }
+      };
+
+      document.addEventListener("mousedown", handlePointerDown);
+      document.addEventListener("keydown", handleKeyDown);
+
+      return () => {
+        document.removeEventListener("mousedown", handlePointerDown);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [open, setOpen]);
+
+    const commitValue = React.useCallback(
+      (nextValue: DateRangeValue) => {
+        if (!isValueControlled) {
+          setInternalValue(nextValue);
+        }
+
+        onValueChange?.(nextValue);
+      },
+      [isValueControlled, onValueChange]
+    );
+
+    const handlePresetClick = (preset: DateRangePreset) => {
+      const range = preset.getRange();
+      commitValue(range);
+      setOpen(false);
+    };
+
+    const handleDayClick = (day: Date) => {
+      if (!pendingEnd) {
+        setDraftValue({ start: day, end: day });
+        setPendingEnd(true);
+        return;
+      }
+
+      // Second click completes the range \u2014 commit and close immediately,
+      // the same way a preset does, since there's no Apply step anymore.
+      const start = draftValue.start ?? day;
+      const nextValue = isBeforeDay(day, start)
+        ? { start: day, end: start }
+        : { start, end: day };
+
+      setDraftValue(nextValue);
+      setPendingEnd(false);
+      commitValue(nextValue);
+      setOpen(false);
+    };
+
+    const popover =
+      open &&
+      !disabled &&
+      portalMount &&
+      createPortal(
+        <div
+          ref={setPopoverRef}
+          role="dialog"
+          aria-modal="false"
+          aria-labelledby={\`\${triggerId}-calendar-heading\`}
+          className={cn(
+            "flex flex-col rounded-lg border border-solid border-semantic-border-layout bg-semantic-bg-primary shadow-lg overflow-y-auto overflow-x-hidden overscroll-contain pointer-events-auto",
+            "[scrollbar-gutter:stable] [scrollbar-width:thin] [scrollbar-color:var(--semantic-border-secondary)_transparent]",
+            "[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-semantic-border-secondary"
+          )}
+          style={{
+            ...floatingStyles,
+            maxWidth: \`calc(100vw - \${POPOVER_MARGIN * 2}px)\`,
+            maxHeight: \`var(\${POPOVER_SCROLL_HEIGHT_VAR}, min(\${MAX_POPOVER_HEIGHT}px, calc(100dvh - \${
+              POPOVER_MARGIN * 2
+            }px)))\`,
+            zIndex: 10050,
+            visibility: isPositioned ? undefined : "hidden",
+          }}
+          onPointerDown={(event) => event.stopPropagation()}
+          onMouseDown={(event) => event.stopPropagation()}
+          onWheel={(event) => event.stopPropagation()}
+          onTouchMove={(event) => event.stopPropagation()}
+        >
+          <div className="flex flex-row">
+            {presets.length > 0 && (
+              <div className="flex w-36 shrink-0 flex-col gap-0.5 border-r border-solid border-semantic-border-layout p-3">
+                {presets.map((preset) => (
+                  <button
+                    key={preset.label}
+                    type="button"
+                    className="w-full rounded px-2 py-1.5 text-left text-sm text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
+                    onClick={() => handlePresetClick(preset)}
+                  >
+                    {preset.label}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            <div className="min-w-[272px] flex-1 p-3 touch-pan-y">
+              <div className="mb-3 flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  aria-label="Previous month"
+                  className="p-1 rounded hover:bg-semantic-bg-hover text-semantic-text-secondary transition-colors"
+                  onClick={() =>
+                    setVisibleMonth((month) => addMonths(month, -1))
+                  }
+                >
+                  <ChevronLeft className="size-4" aria-hidden="true" />
+                </button>
+
+                <div
+                  id={\`\${triggerId}-calendar-heading\`}
+                  className="flex items-center gap-2"
+                >
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        type="button"
+                        className="rounded border border-solid border-semantic-border-layout px-3 py-1.5 text-sm font-semibold text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
+                      >
+                        {MONTH_LONG_NAMES[visibleMonth.getMonth()]}
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      align="start"
+                      className={cn(CALENDAR_DROPDOWN_Z_INDEX, "max-h-[240px] overflow-y-auto")}
+                    >
+                      {MONTH_LONG_NAMES.map((label, monthIndex) => (
+                        <DropdownMenuItem
+                          key={label}
+                          onSelect={() =>
+                            setVisibleMonth(
+                              startOfMonth(
+                                new Date(visibleMonth.getFullYear(), monthIndex, 1)
+                              )
+                            )
+                          }
+                        >
+                          {label}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        type="button"
+                        className="flex items-center gap-1 rounded border border-solid border-semantic-border-layout px-3 py-1.5 text-sm font-semibold text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
+                      >
+                        {visibleMonth.getFullYear()}
+                        <ChevronDown
+                          className="size-3.5 text-semantic-text-muted"
+                          aria-hidden="true"
+                        />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      align="start"
+                      className={cn(CALENDAR_DROPDOWN_Z_INDEX, "max-h-[240px] overflow-y-auto")}
+                    >
+                      {Array.from(
+                        { length: YEAR_OPTIONS_SPAN * 2 + 1 },
+                        (_, index) => visibleMonth.getFullYear() - YEAR_OPTIONS_SPAN + index
+                      ).map((year) => (
+                        <DropdownMenuItem
+                          key={year}
+                          onSelect={() =>
+                            setVisibleMonth(
+                              startOfMonth(new Date(year, visibleMonth.getMonth(), 1))
+                            )
+                          }
+                        >
+                          {year}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+
+                <button
+                  type="button"
+                  aria-label="Next month"
+                  className="p-1 rounded hover:bg-semantic-bg-hover text-semantic-text-secondary transition-colors"
+                  onClick={() =>
+                    setVisibleMonth((month) => addMonths(month, 1))
+                  }
+                >
+                  <ChevronRight className="size-4" aria-hidden="true" />
+                </button>
+              </div>
+
+              <div className="grid grid-cols-7">
+                {weekDays.map((day) => (
+                  <div
+                    key={day}
+                    className="flex h-8 items-center justify-center text-xs font-medium text-semantic-text-muted"
+                  >
+                    {day}
+                  </div>
+                ))}
+                {calendarDays.map((day) => {
+                  const isCurrentMonth =
+                    day.getMonth() === visibleMonth.getMonth();
+                  const isToday = isSameDay(day, new Date());
+                  const { start, end } = draftValue;
+                  const hasRange = !!start && !!end && !isSameDay(start, end);
+                  const isRangeStart = isSameDay(day, start);
+                  const isRangeEnd = isSameDay(day, end);
+                  const isBetween =
+                    hasRange &&
+                    !!start &&
+                    !!end &&
+                    isAfterDay(day, start) &&
+                    isBeforeDay(day, end);
+                  const isInBand =
+                    hasRange && (isRangeStart || isRangeEnd || isBetween);
+                  const isSelectedEdge = isRangeStart || isRangeEnd;
+                  const isDisabled =
+                    (effectiveMinDate &&
+                      isBeforeDay(day, effectiveMinDate)) ||
+                    (maxDate && isAfterDay(day, maxDate));
+                  const dayLabel = day.toLocaleDateString("en-US", {
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric",
+                  });
+
+                  return (
+                    <div
+                      key={day.toISOString()}
+                      className={cn(
+                        "relative flex h-8 items-center justify-center",
+                        isInBand && "bg-semantic-info-surface",
+                        isRangeStart && hasRange && "rounded-l-full",
+                        isRangeEnd && hasRange && "rounded-r-full"
+                      )}
+                    >
+                      <button
+                        type="button"
+                        aria-label={dayLabel}
+                        aria-pressed={isSelectedEdge}
+                        aria-current={isToday ? "date" : undefined}
+                        disabled={!!isDisabled}
+                        className={cn(
+                          "relative flex size-8 items-center justify-center rounded-full text-xs transition-colors",
+                          isSelectedEdge
+                            ? "bg-semantic-primary text-semantic-text-inverted font-semibold"
+                            : isCurrentMonth
+                              ? "text-semantic-text-primary hover:bg-semantic-bg-hover"
+                              : "text-semantic-text-muted hover:bg-semantic-bg-hover",
+                          isDisabled &&
+                            "opacity-40 cursor-not-allowed pointer-events-none"
+                        )}
+                        onClick={() => {
+                          if (isDisabled) return;
+
+                          handleDayClick(day);
+                        }}
+                      >
+                        {day.getDate()}
+                        {isToday && !isSelectedEdge && (
+                          <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1 rounded-full bg-semantic-primary" />
+                        )}
+                      </button>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>,
+        portalMount
+      );
+
+    return (
+      <div
+        ref={(node) => {
+          rootRef.current = node;
+
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            (ref as React.MutableRefObject<HTMLDivElement | null>).current =
+              node;
+          }
+        }}
+        className={cn("relative inline-block w-full max-w-full", className)}
+        {...props}
+      >
+        <button
+          ref={setTriggerRef}
+          id={triggerId}
+          type="button"
+          disabled={disabled}
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          className={cn(
+            dateRangePickerTriggerVariants({ state }),
+            open &&
+              state !== "error" &&
+              "border-semantic-border-input-focus/50 shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+            !displayValue && "text-semantic-text-placeholder",
+            triggerClassName
+          )}
+          onClick={() => setOpen(!open)}
+        >
+          <FigmaCalendarIcon className="size-[18px] shrink-0 text-semantic-text-secondary" />
+          <span
+            className={cn(
+              "min-w-0 flex-1 truncate",
+              !displayValue && "font-normal",
+              triggerLabelClassName
+            )}
+          >
+            {displayValue || placeholder}
+          </span>
+        </button>
+
+        {popover}
+      </div>
+    );
+  }
+);
+DateRangePicker.displayName = "DateRangePicker";
+
+export { DateRangePicker, dateRangePickerTriggerVariants };
 `,
   "date-time-picker": `import * as React from "react";
 import { createPortal } from "react-dom";
@@ -5029,7 +5800,7 @@ const DialogContent = React.forwardRef(({ className, children, size, hideCloseBu
         {children}
         {/* Accessibility: Add hidden description if none provided */}
         {!hasDescription && (
-          <DialogPrimitive.Description className="sr-only">
+          <DialogPrimitive.Description className="sr-only m-0">
             Dialog content
           </DialogPrimitive.Description>
         )}
@@ -5088,7 +5859,7 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>, ref: React.Ref<React.ElementRef<typeof DialogPrimitive.Description>>) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("m-0 text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
@@ -5816,11 +6587,11 @@ const Input = React.forwardRef(
             input.value.slice(selectionEnd);
 
           if (nextValue.includes("  ")) {
+            // Blocking the insertion is enough \u2014 nothing moved, so the caret is
+            // already where it belongs. Re-setting it (especially from a later
+            // animation frame, with a selection offset captured before this
+            // keystroke) drags the caret backwards and reorders what follows.
             e.preventDefault();
-            input.setSelectionRange(selectionStart, selectionStart);
-            window.requestAnimationFrame(() => {
-              input.setSelectionRange(selectionStart, selectionStart);
-            });
           }
         }}
         onChange={(e) => {
@@ -5841,9 +6612,19 @@ const Input = React.forwardRef(
             );
 
             input.value = collapsedValue;
+            // Restore the caret synchronously: assigning \`value\` above parks it
+            // at 0, and the next keystroke can land before any animation frame
+            // runs, which reorders what the user typed. The deferred pass is
+            // kept for browsers that reset the caret again after React
+            // re-renders, but it must no-op once the value has moved on \u2014 a
+            // frame that fires mid-typing would otherwise drag the caret back
+            // to a position captured several keystrokes ago.
+            input.setSelectionRange(nextCursor, nextCursor);
             window.requestAnimationFrame(() => {
+              if (input.value !== collapsedValue) return;
               input.setSelectionRange(nextCursor, nextCursor);
             });
+
           }
           onChange?.(e);
         }}
@@ -5987,6 +6768,18 @@ export function flattenMultiSelectOptions(
   return (input as MultiSelectOption[]).map(normalizeMultiSelectOption);
 }
 
+/** Menu never renders narrower than this, even off a tiny trigger. */
+const MENU_MIN_WIDTH = 180;
+/** Floor for the flip/shrink height so the list is never collapsed to nothing. */
+const MENU_MIN_HEIGHT = 120;
+
+/**
+ * Distance from the bottom of the option list, in px, at which \`onScrollEnd\`
+ * fires. Roughly one option row, so the next page starts loading just before
+ * the user actually hits the end.
+ */
+const SCROLL_END_THRESHOLD_PX = 48;
+
 /**
  * MultiSelect trigger variants matching TextField styling
  */
@@ -6020,6 +6813,27 @@ export interface MultiSelectProps extends VariantProps<
   disabled?: boolean;
   /** Loading state with spinner */
   loading?: boolean;
+  /**
+   * Called once when the option list is scrolled to within
+   * \`SCROLL_END_THRESHOLD_PX\` of its bottom. Use it to fetch the next page of
+   * server-side options. Fires at most once per scroll gesture \u2014 it re-arms
+   * only after the user scrolls back away from the bottom, so a single
+   * trackpad flick (which keeps emitting scroll events while it decelerates)
+   * cannot fan out into several requests.
+   */
+  onScrollEnd?: () => void;
+  /**
+   * Whether the server has more pages. When false, \`onScrollEnd\` is never
+   * called.
+   * @default false
+   */
+  hasMore?: boolean;
+  /**
+   * Whether a page fetch is in flight. Renders a loading row at the bottom of
+   * the list and suppresses further \`onScrollEnd\` calls.
+   * @default false
+   */
+  loadingMore?: boolean;
   /** Placeholder text when no value selected */
   placeholder?: string;
   /** Currently selected values (controlled) */
@@ -6039,6 +6853,18 @@ export interface MultiSelectProps extends VariantProps<
   searchable?: boolean;
   /** Search placeholder text */
   searchPlaceholder?: string;
+  /**
+   * When set, the trigger shows a single compact summary (e.g. "3 lines
+   * selected") instead of one chip per selection; hovering it reveals the full
+   * list of selected labels in a tooltip. Receives the selected count.
+   */
+  summaryLabel?: (count: number) => string;
+  /**
+   * When set, pins a select-all row at the top of the list with this label
+   * (e.g. "All lines"). Toggles every non-disabled option; respects
+   * \`maxSelections\`. Omit to hide the row entirely.
+   */
+  selectAllLabel?: string;
   /** Maximum selections allowed */
   maxSelections?: number;
   /**
@@ -6068,6 +6894,19 @@ export interface MultiSelectProps extends VariantProps<
   showClearAll?: boolean;
   /** Vertical rule before the chevron (Figma-style trigger) */
   showSeparatorBeforeChevron?: boolean;
+  /**
+   * Element the dropdown is portaled into. Defaults to \`document.body\` so the
+   * menu escapes \`overflow\` and \`transform\` ancestors (a Radix DialogContent is
+   * both, and a transformed ancestor would clip a \`position: fixed\` menu).
+   */
+  menuContainer?: HTMLElement | null;
+  /**
+   * Truncate long labels in the dropdown list to a single line with an ellipsis
+   * instead of wrapping them. Selected chips in the trigger always truncate \u2014
+   * this only controls the option rows.
+   * @default false for \`simple\`, true for \`detailed\` (single-line row design)
+   */
+  truncateOptionText?: boolean;
 }
 
 /**
@@ -6096,6 +6935,9 @@ const MultiSelect = React.forwardRef(
       error,
       disabled,
       loading,
+      onScrollEnd,
+      hasMore = false,
+      loadingMore = false,
       placeholder = "Select options",
       value,
       defaultValue = [],
@@ -6103,6 +6945,8 @@ const MultiSelect = React.forwardRef(
       options,
       searchable,
       searchPlaceholder = "Search...",
+      selectAllLabel,
+      summaryLabel,
       maxSelections,
       showSelectionFooter = true,
       wrapperClassName,
@@ -6114,6 +6958,8 @@ const MultiSelect = React.forwardRef(
       optionVariant = "simple",
       separateSelectedWithDivider = false,
       showClearAll = true,
+      menuContainer,
+      truncateOptionText,
       showSeparatorBeforeChevron = false,
       closeOnEscape = false,
     }: MultiSelectProps,
@@ -6127,9 +6973,25 @@ const MultiSelect = React.forwardRef(
     // Search query
     const [searchQuery, setSearchQuery] = React.useState("");
 
+    // \`detailed\` rows are a single-line design, so they truncate unless the
+    // caller opts out; \`simple\` rows wrap the full label unless asked not to.
+    const truncateOptions =
+      truncateOptionText ?? optionVariant === "detailed";
+
     // Container ref for click outside detection
     const containerRef = React.useRef<HTMLDivElement | null>(null);
 
+    /** Where the dropdown gets portaled; body unless the caller overrides. */
+    const [portalTarget, setPortalTarget] = React.useState<HTMLElement | null>(
+      null
+    );
+
+    React.useEffect(() => {
+      if (!isOpen || typeof document === "undefined") return;
+      setPortalTarget(menuContainer ?? document.body);
+    }, [isOpen, menuContainer]);
+
+
     const { refs, floatingStyles, isPositioned } = useFloating({
       open: isOpen,
       placement: "bottom-start",
@@ -6140,8 +7002,19 @@ const MultiSelect = React.forwardRef(
         shift({ padding: 8 }),
         size({
           padding: 8,
-          apply({ rects, elements }) {
-            elements.floating.style.width = \`\${rects.reference.width}px\`;
+          apply({ rects, elements, availableHeight, availableWidth }) {
+            // Match the trigger, but never render an unreadably narrow menu on a
+            // small trigger, and never spill past the viewport on a small screen.
+            const width = Math.min(
+              Math.max(rects.reference.width, MENU_MIN_WIDTH),
+              availableWidth
+            );
+            elements.floating.style.width = \`\${width}px\`;
+            // Let the option list shrink instead of overflowing a short viewport.
+            elements.floating.style.setProperty(
+              "--multi-select-available-height",
+              \`\${Math.max(availableHeight, MENU_MIN_HEIGHT)}px\`
+            );
           },
         }),
       ],
@@ -6163,6 +7036,112 @@ const MultiSelect = React.forwardRef(
       [refs]
     );
 
+    /**
+     * Radix Dialog / Drawer wrap their content in \`react-remove-scroll\`, which
+     * listens for \`wheel\` / \`touchmove\` on \`document\` (bubble phase) and calls
+     * \`preventDefault()\` for anything outside the locked subtree \u2014 our
+     * body-portaled menu counts as outside, so its list would not scroll.
+     * Stopping propagation at the menu keeps that document listener from ever
+     * seeing the event, leaving the browser's native scrolling intact.
+     * Clicks are handled separately: the dialog sets \`pointer-events: none\` on
+     * \`<body>\`, which the menu overrides with \`pointer-events: auto\`.
+     */
+    React.useEffect(() => {
+      const node = refs.floating.current;
+      if (!isOpen || !node) return;
+
+      const stop = (event: Event) => event.stopPropagation();
+      node.addEventListener("wheel", stop, { passive: false });
+      node.addEventListener("touchmove", stop, { passive: false });
+
+      /**
+       * The dialog also traps focus. Radix \`FocusScope\` registers TWO bubble
+       * listeners on \`document\` and either one is enough to make the search
+       * input untypable:
+       *   - \`focusin\`  \u2014 target outside the dialog, so focus is pulled back.
+       *   - \`focusout\` \u2014 fired on the element focus is LEAVING (inside the
+       *     dialog) with \`relatedTarget\` = our input; since that is outside, it
+       *     restores the previously focused element.
+       * The \`focusout\` one never travels through the menu, so a listener on the
+       * menu node cannot see it. Intercepting in the CAPTURE phase on
+       * \`document\` does: capture at \`document\` runs before the bubble listeners
+       * on the same node, so stopping propagation there means FocusScope never
+       * runs \u2014 but only for focus events that involve the menu. Every other
+       * focus event in the app is untouched.
+       */
+      const stopMenuFocusEvent = (event: Event) => {
+        const { target, relatedTarget } = event as FocusEvent;
+        const touchesMenu =
+          (target instanceof Node && node.contains(target)) ||
+          (relatedTarget instanceof Node && node.contains(relatedTarget));
+        if (touchesMenu) event.stopPropagation();
+      };
+      document.addEventListener("focusin", stopMenuFocusEvent, true);
+      document.addEventListener("focusout", stopMenuFocusEvent, true);
+
+      return () => {
+        node.removeEventListener("wheel", stop);
+        node.removeEventListener("touchmove", stop);
+        document.removeEventListener("focusin", stopMenuFocusEvent, true);
+        document.removeEventListener("focusout", stopMenuFocusEvent, true);
+      };
+    }, [isOpen, portalTarget, refs.floating]);
+
+    /** The scrollable option list; also read by the no-scrollbar fallback. */
+    const listRef = React.useRef<HTMLDivElement | null>(null);
+    /**
+     * True once \`onScrollEnd\` has fired for the current visit to the bottom.
+     * Cleared only when the user scrolls back out of the threshold zone, so
+     * trackpad inertia \u2014 which keeps firing \`scroll\` for hundreds of ms after
+     * the finger lifts \u2014 cannot re-trigger the callback.
+     */
+    const isLatchedRef = React.useRef(false);
+
+    /**
+     * Deliberately a plain function, not a \`useCallback\` \u2014 it must read the
+     * current \`hasMore\` / \`loadingMore\` on every scroll event, and a memoised
+     * handler would need a props ref (writing refs during render is banned).
+     */
+    const maybeLoadMore = () => {
+      const node = listRef.current;
+      if (!node) return;
+
+      const isNearBottom =
+        node.scrollHeight - node.scrollTop - node.clientHeight <
+        SCROLL_END_THRESHOLD_PX;
+
+      if (!isNearBottom) {
+        // Only an explicit scroll away from the boundary re-arms the latch.
+        isLatchedRef.current = false;
+        return;
+      }
+      if (isLatchedRef.current || !hasMore || loadingMore || !onScrollEnd)
+        return;
+
+      isLatchedRef.current = true;
+      onScrollEnd();
+    };
+
+    // A closed menu or a new search starts from a clean latch.
+    React.useEffect(() => {
+      isLatchedRef.current = false;
+    }, [isOpen, searchQuery]);
+
+    /**
+     * A page can arrive without making the list taller than its max-height
+     * (few results, or a short viewport). No further \`scroll\` event would ever
+     * fire, so pagination would stall silently \u2014 re-check whenever the rendered
+     * options or the fetch state change.
+     */
+    React.useEffect(() => {
+      if (!isOpen || !hasMore || loadingMore) return;
+      const node = listRef.current;
+      if (!node || node.scrollHeight > node.clientHeight) return;
+      if (isLatchedRef.current) return;
+      isLatchedRef.current = true;
+      onScrollEnd?.();
+    }, [isOpen, portalTarget, hasMore, loadingMore, options, onScrollEnd]);
+
     const flatOptions = React.useMemo(
       () => flattenMultiSelectOptions(options),
       [options]
@@ -6172,6 +7151,28 @@ const MultiSelect = React.forwardRef(
     const isControlled = value !== undefined;
     const selectedValues = isControlled ? value : internalValue;
 
+    // Select-all: values eligible for select-all exclude disabled options
+    const selectableValues = React.useMemo(
+      () => flatOptions.filter((o) => !o.disabled).map((o) => o.value),
+      [flatOptions]
+    );
+    const allSelected =
+      selectableValues.length > 0 &&
+      selectableValues.every((v) => selectedValues.includes(v));
+    const someSelected = selectedValues.length > 0 && !allSelected;
+
+    const toggleSelectAll = () => {
+      const newValues = allSelected
+        ? []
+        : maxSelections
+          ? selectableValues.slice(0, maxSelections)
+          : selectableValues;
+      if (!isControlled) {
+        setInternalValue(newValues);
+      }
+      onValueChange?.(newValues);
+    };
+
     // Derive state from props
     const derivedState = error ? "error" : (state ?? "default");
 
@@ -6344,14 +7345,14 @@ const MultiSelect = React.forwardRef(
     return (
       <div
         ref={containerRef}
-        className={cn("flex flex-col gap-1", wrapperClassName)}
+        className={cn("flex min-w-0 flex-col gap-1", wrapperClassName)}
       >
         {/* Label */}
         {label && (
           <label
             htmlFor={selectId}
             className={cn(
-              "text-sm font-semibold text-semantic-text-secondary",
+              "break-words text-sm font-semibold text-semantic-text-secondary",
               labelClassName
             )}
           >
@@ -6387,18 +7388,40 @@ const MultiSelect = React.forwardRef(
               triggerClassName
             )}
           >
-          <div className="flex-1 flex flex-wrap gap-1">
+          <div className="min-w-0 flex-1 flex flex-wrap gap-1">
             {selectedValues.length === 0 ? (
               <span className="text-base text-semantic-text-placeholder">
                 {placeholder}
               </span>
+            ) : summaryLabel ? (
+              <TooltipProvider delayDuration={200}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="min-w-0 truncate text-sm text-semantic-text-primary">
+                      {summaryLabel(selectedValues.length)}
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <div className="flex flex-col gap-0.5">
+                      {selectedLabels.map((label, index) => (
+                        <span key={selectedValues[index]}>{label}</span>
+                      ))}
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             ) : (
               selectedLabels.map((label, index) => (
                 <span
                   key={selectedValues[index]}
-                  className="inline-flex items-center gap-1 bg-semantic-bg-ui text-semantic-text-primary text-sm px-2 py-0.5 rounded"
+                  className="inline-flex min-w-0 max-w-full items-center gap-1 bg-semantic-bg-ui text-semantic-text-primary text-sm px-2 py-0.5 rounded"
                 >
-                  {label}
+                  <span
+                    className="min-w-0 truncate"
+                    title={typeof label === "string" ? label : undefined}
+                  >
+                    {label}
+                  </span>
                   <span
                     role="button"
                     tabIndex={0}
@@ -6412,7 +7435,7 @@ const MultiSelect = React.forwardRef(
                         );
                       }
                     }}
-                    className="cursor-pointer hover:text-semantic-error-primary focus:outline-none"
+                    className="shrink-0 cursor-pointer hover:text-semantic-error-primary focus:outline-none"
                     aria-label={\`Remove \${label}\`}
                   >
                     <X className="size-3" />
@@ -6471,14 +7494,14 @@ const MultiSelect = React.forwardRef(
                     className="size-3.5 shrink-0 text-semantic-error-primary"
                     aria-hidden
                   />
-                  <span className="text-sm text-semantic-error-primary">
+                  <span className="min-w-0 break-words text-sm text-semantic-error-primary">
                     {error}
                   </span>
                 </div>
               ) : helperText ? (
                 <span
                   id={helperId}
-                  className="text-sm text-semantic-text-muted"
+                  className="min-w-0 break-words text-sm text-semantic-text-muted"
                 >
                   {helperText}
                 </span>
@@ -6487,7 +7510,7 @@ const MultiSelect = React.forwardRef(
           )}
 
           {isOpen &&
-            typeof document !== "undefined" &&
+            portalTarget &&
             createPortal(
               <TooltipProvider delayDuration={200}>
                 <div
@@ -6499,6 +7522,9 @@ const MultiSelect = React.forwardRef(
                   style={{
                     ...floatingStyles,
                     zIndex: 10050,
+                    // Radix Dialog sets \`pointer-events: none\` on <body> while
+                    // open; without this the menu swallows nothing and clicks die.
+                    pointerEvents: "auto",
                     visibility: isPositioned ? undefined : "hidden",
                   }}
                   onMouseDown={(e) => e.stopPropagation()}
@@ -6517,9 +7543,43 @@ const MultiSelect = React.forwardRef(
                 </div>
               )}
 
+              {/* Select all */}
+              {selectAllLabel && (
+                <div
+                  role="option"
+                  aria-selected={allSelected}
+                  tabIndex={0}
+                  onClick={toggleSelectAll}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      toggleSelectAll();
+                    }
+                  }}
+                  className="flex w-full cursor-pointer select-none items-center gap-2 border-b border-solid border-semantic-border-layout px-3 py-2 text-sm text-semantic-text-primary outline-none hover:bg-semantic-bg-ui"
+                >
+                  <Checkbox
+                    checked={allSelected ? true : someSelected ? "indeterminate" : false}
+                    size="sm"
+                    className="pointer-events-none shrink-0"
+                    aria-hidden
+                    tabIndex={-1}
+                  />
+                  <span className="min-w-0 flex-1 truncate text-left">{selectAllLabel}</span>
+                </div>
+              )}
+
               {/* Options */}
-              <div className="max-h-60 overflow-auto p-1">
-                {filteredOptions.length === 0 ? (
+              <div
+                ref={listRef}
+                onScroll={maybeLoadMore}
+                className="overflow-auto overscroll-contain p-1"
+                style={{
+                  maxHeight:
+                    "min(15rem, var(--multi-select-available-height, 15rem))",
+                }}
+              >
+                {filteredOptions.length === 0 && !loadingMore ? (
                   <div className="py-6 text-center text-sm text-semantic-text-muted">
                     No results found
                   </div>
@@ -6583,7 +7643,19 @@ const MultiSelect = React.forwardRef(
                             <Check className="size-4 text-semantic-primary" />
                           )}
                         </span>
-                        <span className="min-w-0 flex-1 whitespace-normal break-words text-left">
+                        <span
+                          title={
+                            truncateOptions && typeof option.label === "string"
+                              ? option.label
+                              : undefined
+                          }
+                          className={cn(
+                            "min-w-0 flex-1 text-left",
+                            truncateOptions
+                              ? "truncate"
+                              : "whitespace-normal break-words"
+                          )}
+                        >
                           {option.label}
                         </span>
                       </button>
@@ -6615,7 +7687,19 @@ const MultiSelect = React.forwardRef(
                           aria-hidden
                           tabIndex={-1}
                         />
-                        <span className="min-w-0 flex-1 truncate text-left">
+                        <span
+                          title={
+                            typeof option.label === "string"
+                              ? option.label
+                              : undefined
+                          }
+                          className={cn(
+                            "min-w-0 flex-1 text-left",
+                            truncateOptions
+                              ? "truncate"
+                              : "whitespace-normal break-words"
+                          )}
+                        >
                           {option.label}
                         </span>
                         {secondaryLine ? (
@@ -6657,6 +7741,17 @@ const MultiSelect = React.forwardRef(
                     return withDisabledTooltip(simpleRow);
                   })
                 )}
+
+                {loadingMore ? (
+                  <div
+                    role="status"
+                    aria-live="polite"
+                    className="flex items-center justify-center gap-2 py-3 text-sm text-semantic-text-muted"
+                  >
+                    <Loader2 className="size-4 animate-spin" />
+                    <span>Loading more...</span>
+                  </div>
+                ) : null}
               </div>
 
               {/* Footer with count */}
@@ -6667,7 +7762,7 @@ const MultiSelect = React.forwardRef(
               ) : null}
                 </div>
               </TooltipProvider>,
-              document.body
+              portalTarget
             )}
         </div>
 
@@ -10680,7 +11775,15 @@ const TextField = React.forwardRef(
         );
 
         input.value = collapsedValue;
+        // Restore the caret synchronously: assigning \`value\` above parks it at
+        // 0, and the next keystroke can land before any animation frame runs,
+        // which reorders what the user typed. The deferred pass is kept for
+        // browsers that reset the caret again after React re-renders, but it
+        // must no-op once the value has moved on \u2014 a frame that fires mid-typing
+        // would otherwise drag the caret back to a stale position.
+        input.setSelectionRange(nextCursor, nextCursor);
         window.requestAnimationFrame(() => {
+          if (input.value !== collapsedValue) return;
           input.setSelectionRange(nextCursor, nextCursor);
         });
       }
@@ -10764,11 +11867,11 @@ const TextField = React.forwardRef(
             input.value.slice(selectionEnd);
 
           if (nextValue.includes("  ")) {
+            // Blocking the insertion is enough \u2014 nothing moved, so the caret is
+            // already where it belongs. Re-setting it from a later animation
+            // frame, with an offset captured before this keystroke, drags the
+            // caret backwards and reorders what follows.
             e.preventDefault();
-            input.setSelectionRange(selectionStart, selectionStart);
-            window.requestAnimationFrame(() => {
-              input.setSelectionRange(selectionStart, selectionStart);
-            });
           }
         }}
         onChange={handleChange}
@@ -12632,6 +13735,25 @@ var componentMetadata = {
       }
     ]
   },
+  "date-range-picker": {
+    "name": "DateRangePicker",
+    "description": "A date range picker component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic DateRangePicker",
+        "code": "<DateRangePicker>Content</DateRangePicker>",
+        "description": "Simple date range picker usage"
+      }
+    ]
+  },
   "date-time-picker": {
     "name": "DateTimePicker",
     "description": "A date time picker component.",