@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/data-display/popover.js

@@ -1,51 +1,280 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { chain, mergeRefs } from "@react-aria/utils";
+import { Popover as AriaPopover } from "react-aria-components";
 import { cn } from "../../lib/utils.js";
-function Popover(props) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger(props) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverAnchor(props) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
-}
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, flush, style, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    "data-slot": "popover-content",
-    "data-flush": flush ? "" : void 0,
-    align,
-    sideOffset,
-    style: flush ? { ...style, "--popover-space-inset": "0" } : style,
-    className: cn(
-      "ui-popover-content origin-[var(--radix-popover-content-transform-origin)]",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-      className
-    ),
-    ...props
+import { Slot } from "../../lib/slot.js";
+import { useOverlayCloseFocus } from "../feedback/overlay-close-focus.js";
+function toPlacement(side, align) {
+  if (align === "center") return side;
+  if (side === "top" || side === "bottom") return `${side} ${align}`;
+  return `${side} ${align === "start" ? "top" : "bottom"}`;
+}
+function toContainerPadding(padding) {
+  if (padding == null) return void 0;
+  if (typeof padding === "number") return padding;
+  const sides = Object.values(padding).filter(
+    (value) => typeof value === "number"
+  );
+  return sides.length ? Math.max(...sides) : void 0;
+}
+function firstTabbable(container) {
+  for (const node of container.querySelectorAll("*")) {
+    if (node.tagName === "A") continue;
+    if (node.hidden || node.disabled) continue;
+    if (node.tagName === "INPUT" && node.type === "hidden") continue;
+    if (node.tabIndex >= 0) return node;
+  }
+  return null;
+}
+const PopoverRootContext = React.createContext(null);
+function usePopoverRoot(component) {
+  const context = React.useContext(PopoverRootContext);
+  if (!context) {
+    throw new Error(`\`${component}\` ph\u1EA3i n\u1EB1m trong \`Popover\`.`);
   }
-) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+  return context;
+}
+function Popover({
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = false,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const [anchored, setAnchored] = React.useState(false);
+  const triggerRef = React.useRef(null);
+  const anchorRef = React.useRef(null);
+  const contentId = React.useId();
+  const titleId = React.useId();
+  const descriptionId = React.useId();
+  const triggerId = React.useId();
+  const [hasTitle, registerTitle] = React.useState(false);
+  const [hasDescription, registerDescription] = React.useState(false);
+  const isOpen = open ?? uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (open === void 0) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange]
+  );
+  const value = React.useMemo(
+    () => ({
+      open: isOpen,
+      setOpen,
+      contentId,
+      isNonModal: !modal,
+      triggerRef,
+      anchorRef,
+      anchored,
+      setAnchored,
+      titleId,
+      descriptionId,
+      hasTitle,
+      hasDescription,
+      registerTitle,
+      registerDescription,
+      triggerId
+    }),
+    [
+      isOpen,
+      setOpen,
+      contentId,
+      modal,
+      anchored,
+      titleId,
+      descriptionId,
+      hasTitle,
+      hasDescription,
+      triggerId
+    ]
+  );
+  return /* @__PURE__ */ jsx(PopoverRootContext.Provider, { value, children });
+}
+function PopoverTrigger({ asChild, onClick, ref, ...props }) {
+  const root = usePopoverRoot("PopoverTrigger");
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: "button",
+      "data-slot": "popover-trigger",
+      "aria-haspopup": "dialog",
+      "aria-expanded": root.open,
+      id: props.id ?? root.triggerId,
+      "aria-controls": root.open ? root.contentId : void 0,
+      "data-state": root.open ? "open" : "closed",
+      ...props,
+      ref: mergeRefs(ref, root.triggerRef),
+      onClick: chain(onClick, () => root.setOpen(!root.open))
+    }
+  );
+}
+function PopoverAnchor({ asChild, ref, ...props }) {
+  const root = usePopoverRoot("PopoverAnchor");
+  const Comp = asChild ? Slot : "span";
+  const { setAnchored } = root;
+  React.useEffect(() => {
+    setAnchored(true);
+    return () => setAnchored(false);
+  }, [setAnchored]);
+  return /* @__PURE__ */ jsx(Comp, { "data-slot": "popover-anchor", ...props, ref: mergeRefs(ref, root.anchorRef) });
+}
+function PopoverContent({
+  className,
+  style,
+  children,
+  ref,
+  flush,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  alignOffset,
+  avoidCollisions = true,
+  collisionPadding,
+  sticky: _sticky,
+  hideWhenDetached: _hideWhenDetached,
+  forceMount: _forceMount,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  ...props
+}) {
+  const root = usePopoverRoot("PopoverContent");
+  const contentRef = React.useRef(null);
+  const openAutoFocusRef = React.useRef(onOpenAutoFocus);
+  openAutoFocusRef.current = onOpenAutoFocus;
+  useOverlayCloseFocus(root.open, onCloseAutoFocus, contentRef);
+  React.useEffect(() => {
+    if (!root.open) return;
+    const node = contentRef.current;
+    if (!node) return;
+    const event = new Event("popover.openAutoFocus", { bubbles: false, cancelable: true });
+    openAutoFocusRef.current?.(event);
+    if (!event.defaultPrevented) {
+      const target = firstTabbable(node);
+      target?.focus({ preventScroll: true });
+      if (!node.contains(document.activeElement)) {
+        node.focus({ preventScroll: true });
+      }
+    }
+  }, [root.open]);
+  const { open, setOpen, triggerRef } = root;
+  React.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (contentRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open, setOpen, triggerRef]);
+  return /* @__PURE__ */ jsx(
+    AriaPopover,
+    {
+      isOpen: root.open,
+      onOpenChange: root.setOpen,
+      isNonModal: root.isNonModal,
+      triggerRef: root.anchored ? root.anchorRef : root.triggerRef,
+      placement: toPlacement(side, align),
+      offset: sideOffset,
+      crossOffset: alignOffset,
+      shouldFlip: avoidCollisions,
+      containerPadding: toContainerPadding(collisionPadding),
+      render: (racProps, { isExiting }) => {
+        const {
+          className: _racClassName,
+          "data-rac": _rac,
+          ref: racRef,
+          style: racStyle,
+          ...rest
+        } = racProps;
+        const availableHeight = racStyle?.maxHeight;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...rest,
+            id: root.contentId,
+            role: "dialog",
+            tabIndex: -1,
+            "data-slot": "popover-content",
+            "data-side": side,
+            "data-align": align,
+            "data-state": isExiting ? "closed" : "open",
+            "data-flush": flush ? "" : void 0,
+            ...props,
+            "aria-labelledby": props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : root.hasTitle ? root.titleId : root.triggerId),
+            "aria-describedby": props["aria-describedby"] ?? (root.hasDescription ? root.descriptionId : void 0),
+            ref: mergeRefs(ref, racRef, contentRef),
+            className: cn(
+              "ui-popover-content origin-[var(--radix-popover-content-transform-origin)]",
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+              "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+              "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+              "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+              className
+            ),
+            style: {
+              ...racStyle,
+              "--radix-popover-trigger-width": "var(--trigger-width)",
+              "--radix-popover-content-transform-origin": "var(--trigger-anchor-point)",
+              ...availableHeight == null ? null : {
+                "--radix-popover-content-available-height": typeof availableHeight === "number" ? `${availableHeight}px` : availableHeight
+              },
+              ...style,
+              ...flush ? { "--popover-space-inset": "0" } : null
+            },
+            children
+          }
+        );
+      }
+    }
+  );
+}
 const PopoverHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "popover-header", className: cn("ui-popover-header", className), ...props });
-const PopoverTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "popover-title", className: cn("font-medium", className), ...props });
+const PopoverTitle = ({ className, id, ...props }) => {
+  const root = usePopoverRoot("PopoverTitle");
+  React.useEffect(() => {
+    root.registerTitle(true);
+    return () => root.registerTitle(false);
+  }, [root]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "popover-title",
+      id: id ?? root.titleId,
+      className: cn("font-medium", className),
+      ...props
+    }
+  );
+};
 const PopoverDescription = ({
   className,
+  id,
   ...props
-}) => /* @__PURE__ */ jsx(
-  "p",
-  {
-    "data-slot": "popover-description",
-    className: cn("text-muted-foreground", className),
-    ...props
-  }
-);
+}) => {
+  const root = usePopoverRoot("PopoverDescription");
+  React.useEffect(() => {
+    root.registerDescription(true);
+    return () => root.registerDescription(false);
+  }, [root]);
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "popover-description",
+      id: id ?? root.descriptionId,
+      className: cn("text-muted-foreground", className),
+      ...props
+    }
+  );
+};
 export {
   Popover,
   PopoverAnchor,

package/dist/components/data-display/progress.d.ts

@@ -1,8 +1,29 @@
 import * as React from "react";
 export type ProgressTone = "success" | "warning" | "destructive";
-export type ProgressProps = {
+/**
+ * One slice of a BREAKDOWN bar — how much of the total this state holds, in the SAME unit as every
+ * other slice (counts, bytes, yen). Never a percentage: the bar owns the ratio arithmetic, so the
+ * caller never has to round three numbers that must still add up to 100.
+ *
+ * `label` is not decoration. Colour alone cannot carry the meaning of a slice (WCAG 1.4.1), and it
+ * is the only thing a screen reader has to say about it, so it is required.
+ */
+export type ProgressSegment = {
     value: number;
+    tone: ProgressTone;
+    label: string;
+};
+type ProgressBase = Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "children" | "aria-valuenow" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext"> & {
+    /**
+     * Visible caption under the bar; it also becomes the bar's accessible name. Omit it and the bar
+     * falls back to the catalogue name — or to whatever `aria-label`/`aria-labelledby` the caller
+     * passes, which is how a bar gets its name from a heading that is already on screen.
+     */
     label?: string;
+};
+/** A METER: one ratio of one whole. */
+type ProgressMeterProps = ProgressBase & {
+    value: number;
     tone?: ProgressTone;
     /**
      * Allow `value` to exceed 100 and render an OVER-CAPACITY fill: the bar caps at 100% width but
@@ -11,5 +32,32 @@ export type ProgressProps = {
      * real ratio.
      */
     over?: boolean;
+    segments?: never;
+};
+/**
+ * A BREAKDOWN: one whole split into its states.
+ *
+ * ## Why this is not a meter with three calls
+ *
+ * A meter answers "how far along?" and has ONE value, so `role="progressbar"` fits it exactly.
+ * A breakdown answers "what is this total made of?" — 2 overdue · 3 due soon · 12 done. Stacking
+ * three progressbars says the wrong thing three times over (three separate 0–100 measurements),
+ * and no ARIA value pattern models a partition. It is a picture of data, so it names itself once
+ * as `role="img"` and reads out every slice with its own label and amount.
+ *
+ * ## Why it is a taller bar than the meter
+ *
+ * A 0.5rem pill is legible when it carries one fill against one track. Three abutting fills at
+ * that height read as a coloured hairline — the ratios, which are the entire point, stop being
+ * comparable. So the breakdown takes its own block size and corner, both retunable
+ * (`--progress-breakdown-*`).
+ */
+type ProgressBreakdownProps = ProgressBase & {
+    segments: ProgressSegment[];
+    value?: never;
+    tone?: never;
+    over?: never;
 };
-export declare function Progress({ value, label, tone, over }: ProgressProps): React.JSX.Element;
+export type ProgressProps = ProgressMeterProps | ProgressBreakdownProps;
+export declare function Progress(props: ProgressProps): React.JSX.Element;
+export {};

package/dist/components/data-display/progress.js

@@ -1,27 +1,75 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-function Progress({ value, label, tone, over = false }) {
-  const isOver = over && value > 100;
-  const boundedValue = Math.max(0, Math.min(100, value));
-  const effectiveTone = tone ?? (isOver ? "destructive" : "success");
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+function Progress(props) {
+  const { t } = useTranslation();
   const labelId = React.useId();
+  const {
+    label,
+    className,
+    segments,
+    value,
+    tone,
+    over = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...domProps
+  } = props;
+  const named = ariaLabel !== void 0 || ariaLabelledBy !== void 0;
+  const labelledBy = ariaLabelledBy ?? (label !== void 0 ? labelId : void 0);
+  const caption = label !== void 0 ? /* @__PURE__ */ jsx("div", { className: "ui-progress-label", id: labelId, children: label }) : null;
+  if (segments !== void 0) {
+    const amounts = segments.map((segment) => Math.max(0, segment.value));
+    const total = amounts.reduce((sum, amount) => sum + amount, 0);
+    const separator = t("dataDisplay.progress.breakdownSeparator");
+    const spoken = segments.map((segment, index) => `${segment.label} ${amounts[index]}`).join(separator);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("ui-progress", className),
+        "data-breakdown": "",
+        role: "img",
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabelledBy !== void 0 ? void 0 : ariaLabel !== void 0 ? `${ariaLabel}${separator}${spoken}` : label !== void 0 ? `${label}${separator}${spoken}` : spoken,
+        ...domProps,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "ui-progress-track", children: segments.map((segment, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ui-progress-segment",
+              "data-tone": segment.tone,
+              style: { inlineSize: total === 0 ? "0%" : `${amounts[index] / total * 100}%` }
+            },
+            `${segment.label}-${index}`
+          )) }),
+          caption
+        ]
+      }
+    );
+  }
+  const meterValue = value ?? 0;
+  const isOver = over && meterValue > 100;
+  const boundedValue = Math.max(0, Math.min(100, meterValue));
+  const effectiveTone = tone ?? (isOver ? "destructive" : "success");
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "ui-progress",
+      className: cn("ui-progress", className),
       "data-tone": effectiveTone,
       "data-over": isOver ? "" : void 0,
       role: "progressbar",
       "aria-valuenow": boundedValue,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuetext": `${isOver ? Math.round(value) : boundedValue}%`,
-      "aria-labelledby": label ? labelId : void 0,
-      "aria-label": label ? void 0 : "Progress",
+      "aria-valuetext": `${isOver ? Math.round(meterValue) : boundedValue}%`,
+      "aria-labelledby": labelledBy,
+      "aria-label": labelledBy !== void 0 ? void 0 : named ? ariaLabel : t("dataDisplay.progress.ariaLabel"),
+      ...domProps,
       children: [
         /* @__PURE__ */ jsx("div", { className: "ui-progress-track", children: /* @__PURE__ */ jsx("div", { className: "ui-progress-bar", style: { width: `${boundedValue}%` } }) }),
-        label ? /* @__PURE__ */ jsx("div", { className: "ui-progress-label", id: labelId, children: label }) : null
+        caption
       ]
     }
   );

package/dist/components/data-display/range-timeline.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+export type RangeTimelineRow = {
+    id: string;
+    label: React.ReactNode;
+    start: number;
+    end: number;
+    startLabel: string;
+    endLabel: string;
+};
+export type RangeTimelineProps = React.HTMLAttributes<HTMLElement> & {
+    label: string;
+    columns: {
+        label: string;
+        units: number;
+    }[];
+    bands?: {
+        label: string;
+        units: number;
+    }[];
+    rows: RangeTimelineRow[];
+    today?: number | null;
+    onRangeChange?: (id: string, edge: "start" | "end", delta: number) => void;
+};
+/** A horizontal range axis. Units and labels are data; the design system owns all geometry. */
+export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    label: string;
+    columns: {
+        label: string;
+        units: number;
+    }[];
+    bands?: {
+        label: string;
+        units: number;
+    }[];
+    rows: RangeTimelineRow[];
+    today?: number | null;
+    onRangeChange?: (id: string, edge: "start" | "end", delta: number) => void;
+} & React.RefAttributes<HTMLElement>>;

package/dist/components/data-display/range-timeline.js

@@ -0,0 +1,161 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { GripVertical } from "lucide-react";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { cn } from "../../lib/utils.js";
+const RangeTimeline = React.forwardRef(
+  function RangeTimeline2({ label, columns, bands, rows, today, onRangeChange, className, ...props }, ref) {
+    const { t } = useTranslation();
+    const units = Math.max(
+      1,
+      columns.reduce((sum, column) => sum + column.units, 0)
+    );
+    const track = React.useRef(null);
+    const drag = React.useRef(null);
+    const [preview, setPreview] = React.useState(null);
+    const deltaAt = (x) => drag.current ? Math.round((x - drag.current.x) * units * drag.current.direction / drag.current.width) : 0;
+    const cancel = () => {
+      drag.current = null;
+      setPreview(null);
+    };
+    const complete = (event) => {
+      const current = drag.current;
+      if (!current) return;
+      const row = rows.find((row2) => row2.id === current.id);
+      const delta = deltaAt(event.clientX);
+      cancel();
+      if (!row) return;
+      const bounded = current.edge === "start" ? Math.min(delta, row.end - row.start) : Math.max(delta, row.start - row.end);
+      if (bounded) onRangeChange?.(row.id, current.edge, bounded);
+    };
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ...props,
+        ref,
+        className: cn("ui-range-timeline", className),
+        "aria-label": label,
+        tabIndex: 0,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "ui-range-timeline-canvas",
+            style: { "--range-timeline-columns": Math.max(1, columns.length) },
+            children: [
+              bands && bands.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
+                /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", children: bands.map((band, index) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "ui-range-timeline-column",
+                    style: { flex: band.units },
+                    children: /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", children: band.label })
+                  },
+                  index
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
+                /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: /* @__PURE__ */ jsx(Text, { weight: "bold", children: label }) }),
+                /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", ref: track, children: columns.map((column, index) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "ui-range-timeline-column",
+                    style: { flex: column.units },
+                    children: /* @__PURE__ */ jsx(Text, { size: "xs", children: column.label })
+                  },
+                  index
+                )) })
+              ] }),
+              rows.map((row) => {
+                const delta = preview?.id === row.id ? preview.delta : 0;
+                const start = Math.min(row.end, row.start + (preview?.edge === "start" ? delta : 0));
+                const end = Math.max(row.start, row.end + (preview?.edge === "end" ? delta : 0));
+                const left = Math.max(0, start), right = Math.min(units, end + 1);
+                return /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-row", children: [
+                  /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: row.label }),
+                  /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
+                    today != null && today >= 0 && today < units && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "ui-range-timeline-today",
+                        style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
+                      }
+                    ),
+                    right <= left && /* @__PURE__ */ jsx(Text, { tone: "muted", children: t("rangeTimeline.outsideRange") }),
+                    right > left && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "ui-range-timeline-bar",
+                        style: {
+                          insetInlineStart: `${left / units * 100}%`,
+                          inlineSize: `${(right - left) / units * 100}%`
+                        },
+                        children: onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
+                          (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
+                        ).map((edge) => /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "icon-xs",
+                            className: "ui-range-timeline-handle",
+                            "data-edge": edge,
+                            "aria-label": edge === "start" ? row.startLabel : row.endLabel,
+                            onPointerDown: (event) => {
+                              const width = track.current?.getBoundingClientRect().width ?? 0;
+                              if (!width || event.button !== 0) return;
+                              event.currentTarget.setPointerCapture(event.pointerId);
+                              drag.current = {
+                                id: row.id,
+                                edge,
+                                x: event.clientX,
+                                width,
+                                direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+                              };
+                            },
+                            onPointerMove: (event) => {
+                              if (drag.current)
+                                setPreview({
+                                  id: drag.current.id,
+                                  edge: drag.current.edge,
+                                  delta: deltaAt(event.clientX)
+                                });
+                            },
+                            onPointerUp: complete,
+                            onPointerCancel: cancel,
+                            onLostPointerCapture: cancel,
+                            onKeyDown: (event) => {
+                              if (event.key === "Escape") {
+                                cancel();
+                                return;
+                              }
+                              const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+                              if (!step) return;
+                              event.preventDefault();
+                              const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+                              const delta2 = step * direction;
+                              if (edge === "start" ? row.start + delta2 <= row.end : row.end + delta2 >= row.start)
+                                onRangeChange(row.id, edge, delta2);
+                            },
+                            children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+                          },
+                          edge
+                        ))
+                      }
+                    )
+                  ] })
+                ] }, row.id);
+              })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  RangeTimeline
+};