@acronis-platform/ui-react 0.57.1 → 0.60.0

package/dist/components/ui/confidence-cone/confidence-cone.js

@@ -0,0 +1,223 @@
+import { jsx as e, jsxs as U } from "react/jsx-runtime";
+import * as f from "react";
+import { ComposedChart as V, CartesianGrid as Z, XAxis as K, YAxis as W, ReferenceArea as ee, ReferenceLine as te, Area as b, Line as oe } from "recharts";
+import { cn as ne } from "../../../lib/utils.js";
+import { ChartContainer as re, ChartTooltip as N, ChartTooltipContent as ie, ChartLegend as ae, ChartLegendContent as le } from "../chart/chart.js";
+import { resolveAxisDomain as ce } from "../chart/chart-format.js";
+const m = "__cone";
+function v(o) {
+  return o == null ? void 0 : o.filter((l) => l.dataKey !== m);
+}
+function se(o) {
+  return function(n) {
+    const r = {
+      ...n,
+      payload: v(n.payload)
+    };
+    return typeof o == "function" ? f.createElement(
+      o,
+      r
+    ) : f.cloneElement(o, r);
+  };
+}
+const fe = f.forwardRef(
+  ({
+    className: o,
+    config: l,
+    data: n,
+    xKey: r,
+    actualKey: i,
+    forecastKey: p,
+    lowerKey: A,
+    upperKey: L,
+    xAxisLabel: c,
+    yAxisLabel: d,
+    yUnit: O,
+    strokeWidth: h = 2,
+    showForecastRegion: R = !0,
+    showGrid: _ = !0,
+    showTooltip: $ = !0,
+    showLegend: B = !0,
+    showXAxis: E = !0,
+    showYAxis: j = !0,
+    xTickFormatter: w,
+    yTickFormatter: z,
+    xAxisAngle: a,
+    xAxisInterval: F,
+    yAxisTickCount: M,
+    yAxisDomain: X,
+    gridDashed: Y,
+    gridHorizontal: x,
+    gridVertical: G,
+    tooltipContent: u,
+    ...H
+  }, S) => {
+    var k, g;
+    const y = f.useMemo(
+      () => u ? se(u) : void 0,
+      [u]
+    ), q = c ? { value: c, position: "insideBottom", offset: 0 } : void 0, I = d ? {
+      value: d,
+      angle: -90,
+      position: "insideLeft",
+      style: { textAnchor: "middle" }
+    } : void 0, J = ce(X), P = c || a != null ? 30 + (a != null ? 20 : 0) + (c ? 18 : 0) : void 0, Q = n.map((t) => {
+      const D = t[A], T = t[L];
+      return {
+        ...t,
+        [m]: typeof D == "number" && typeof T == "number" ? [D, T] : void 0
+      };
+    }), s = R ? (k = n.find((t) => typeof t[p] == "number")) == null ? void 0 : k[r] : void 0, C = (g = n[n.length - 1]) == null ? void 0 : g[r];
+    return /* @__PURE__ */ e("div", { ref: S, className: ne(o), ...H, children: /* @__PURE__ */ e(
+      re,
+      {
+        config: l,
+        className: "size-full [&_.recharts-label]:fill-foreground",
+        children: /* @__PURE__ */ U(V, { data: Q, children: [
+          _ && /* @__PURE__ */ e(
+            Z,
+            {
+              horizontal: x ?? !0,
+              vertical: G ?? !1,
+              strokeDasharray: Y ? "3 3" : void 0
+            }
+          ),
+          /* @__PURE__ */ e(
+            K,
+            {
+              dataKey: r,
+              type: "category",
+              hide: !E,
+              tickLine: !1,
+              axisLine: !1,
+              tickMargin: 8,
+              tickFormatter: w,
+              angle: a,
+              interval: F,
+              textAnchor: a != null ? a < 0 ? "end" : "start" : void 0,
+              height: P,
+              label: q
+            }
+          ),
+          /* @__PURE__ */ e(
+            W,
+            {
+              type: "number",
+              hide: !j,
+              tickLine: !1,
+              axisLine: !1,
+              unit: O,
+              tickFormatter: z,
+              tickCount: M,
+              domain: J,
+              width: d ? 72 : void 0,
+              label: I
+            }
+          ),
+          s != null && C != null && /* @__PURE__ */ e(
+            ee,
+            {
+              x1: s,
+              x2: C,
+              fill: "var(--ui-background-surface-secondary)",
+              fillOpacity: 0.5,
+              ifOverflow: "extendDomain"
+            }
+          ),
+          s != null && /* @__PURE__ */ e(
+            te,
+            {
+              x: s,
+              stroke: "var(--ui-border-on-surface-border)",
+              strokeDasharray: "4 4"
+            }
+          ),
+          $ && (y ? (
+            // Strips the synthetic band before the caller's tooltip sees it
+            // — the `__cone` series feeds the Area, not the tooltip.
+            /* @__PURE__ */ e(N, { content: y })
+          ) : /* @__PURE__ */ e(
+            N,
+            {
+              content: (t) => /* @__PURE__ */ e(
+                ie,
+                {
+                  active: t.active,
+                  label: t.label,
+                  payload: v(
+                    t.payload
+                  )
+                }
+              )
+            }
+          )),
+          B && /* @__PURE__ */ e(
+            ae,
+            {
+              content: (t) => /* @__PURE__ */ e(
+                le,
+                {
+                  verticalAlign: t.verticalAlign,
+                  payload: v(
+                    t.payload
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            b,
+            {
+              dataKey: m,
+              type: "monotone",
+              stroke: "none",
+              fill: `var(--color-${i})`,
+              fillOpacity: 0.15,
+              connectNulls: !1,
+              dot: !1,
+              activeDot: !1,
+              isAnimationActive: !1,
+              legendType: "none",
+              tooltipType: "none"
+            }
+          ),
+          /* @__PURE__ */ e(
+            b,
+            {
+              dataKey: i,
+              type: "monotone",
+              stroke: `var(--color-${i})`,
+              strokeWidth: h,
+              fill: `var(--color-${i})`,
+              fillOpacity: 0.15,
+              dot: !1,
+              activeDot: !1,
+              connectNulls: !0,
+              isAnimationActive: !1
+            }
+          ),
+          /* @__PURE__ */ e(
+            oe,
+            {
+              dataKey: p,
+              type: "monotone",
+              stroke: `var(--color-${i})`,
+              strokeWidth: h,
+              strokeDasharray: "5 5",
+              dot: !1,
+              connectNulls: !0,
+              isAnimationActive: !1
+            }
+          )
+        ] })
+      }
+    ) });
+  }
+);
+fe.displayName = "ConfidenceCone";
+export {
+  fe as ConfidenceCone,
+  se as createConeTooltip,
+  v as dropConeBand
+};
+//# sourceMappingURL=confidence-cone.js.map

package/dist/components/ui/confidence-cone/confidence-cone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confidence-cone.js","sources":["../../../../src/components/ui/confidence-cone/confidence-cone.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Area,\n  CartesianGrid,\n  ComposedChart,\n  Line,\n  ReferenceArea,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAxisDomain,\n  type ChartConfig,\n  type ChartLegendContentProps,\n  type ChartTooltipContentProps,\n  type CartesianChartProps,\n} from '../chart';\n\n// A forecast confidence-cone: a solid line over the known/actual period, a\n// dashed line over the forecast period, and a shaded band (the \"cone\") between\n// a lower and upper bound that typically widens with the horizon — visualizing\n// growing uncertainty. Built on the shared Chart primitives; no new tokens\n// (series colors are caller-supplied via `config`). The whole metric renders in\n// one hue — actual and forecast differ by line style, not color — so the cone\n// band and the forecast line both reuse the actual series' color.\n\n// The band is a synthetic `[lower, upper]` range field per row that a recharts\n// <Area> shades; kept out of the tooltip/legend (see the filters below).\nconst BAND_KEY = '__cone';\n\n/**\n * Drop the synthetic cone-band range series from a recharts tooltip/legend\n * payload, keeping the real actual/forecast series (and their order). Applied to\n * both the default tooltip and any caller-supplied `tooltipContent`, so the\n * `__cone` band never surfaces regardless of which path renders.\n */\nexport function dropConeBand<T extends { dataKey?: unknown }>(\n  payload: readonly T[] | undefined\n): T[] | undefined {\n  return payload?.filter((item) => item.dataKey !== BAND_KEY);\n}\n\n/**\n * Wrap a caller-supplied `tooltipContent` so the synthetic cone band is stripped\n * from the payload before it renders, while preserving recharts' own mount\n * semantics — a function is mounted via `createElement` (its own component\n * identity + hook state), an element via `cloneElement`. This mirrors what the\n * pass-through charts get by handing `content` straight to recharts, so a\n * function-form tooltip keeps its state across re-renders here too. The returned\n * component is a stable content type (memoize it on `tooltipContent`).\n */\ntype TooltipContentType = NonNullable<\n  React.ComponentProps<typeof ChartTooltip>['content']\n>;\ntype TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\n\nexport function createConeTooltip(tooltipContent: TooltipContentType) {\n  return function ConeTooltip(props: TooltipRenderProps) {\n    const merged = {\n      ...props,\n      payload: dropConeBand(props.payload),\n    } as TooltipRenderProps;\n    return typeof tooltipContent === 'function'\n      ? React.createElement(\n          tooltipContent as React.FunctionComponent<TooltipRenderProps>,\n          merged\n        )\n      : React.cloneElement(tooltipContent, merged);\n  };\n}\n\nexport interface ConfidenceConeProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    CartesianChartProps {\n  /**\n   * Row-per-point data — the shared x dimension plus the actual / forecast /\n   * bound fields. Rows are naturally sparse (a point has either an actual or a\n   * forecast + bounds), so missing fields are allowed. Avoid a field named\n   * `__cone` — it's reserved for the internal prediction-band series.\n   */\n  data: ReadonlyArray<Record<string, string | number | null | undefined>>;\n  /**\n   * Per-series map of `label` / `color` for the actual + forecast lines\n   * (imported from the shared `Chart` primitives). Colors are caller-supplied —\n   * reference an existing semantic `--ui-*` token; there is no chart palette tier\n   * yet. The cone band and the forecast line both reuse the actual series'\n   * color — actual and forecast differ by line style, not hue.\n   */\n  config: ChartConfig;\n  /** Category / time axis key (the shared dimension across rows). */\n  xKey: string;\n  /** Field for the known/actual values — drawn as a solid line with a filled area. */\n  actualKey: string;\n  /** Field for the projected values — drawn as a dashed line. */\n  forecastKey: string;\n  /** Field for the cone's lower bound. */\n  lowerKey: string;\n  /** Field for the cone's upper bound. */\n  upperKey: string;\n  /** Stroke width of the actual + forecast lines. */\n  strokeWidth?: number;\n  /**\n   * Set off the forecast period from the actuals with a dashed divider at the\n   * hand-off point (the first row with a forecast value) and a subtle shaded\n   * band over the forecast region.\n   */\n  showForecastRegion?: boolean;\n  showLegend?: boolean;\n}\n\nconst ConfidenceCone = React.forwardRef<HTMLDivElement, ConfidenceConeProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      xKey,\n      actualKey,\n      forecastKey,\n      lowerKey,\n      upperKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      strokeWidth = 2,\n      showForecastRegion = true,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed,\n      gridHorizontal,\n      gridVertical,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    // Memoized so recharts sees a stable content type across renders — a fresh\n    // wrapper each render would remount the caller's tooltip and reset its state.\n    const customTooltip = React.useMemo(\n      () => (tooltipContent ? createConeTooltip(tooltipContent) : undefined),\n      [tooltipContent]\n    );\n\n    const xAxisTitle = xAxisLabel\n      ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n      : undefined;\n    const yAxisTitle = yAxisLabel\n      ? {\n          value: yAxisLabel,\n          angle: -90,\n          position: 'insideLeft' as const,\n          style: { textAnchor: 'middle' as const },\n        }\n      : undefined;\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    // Room for the X tick row: recharts' default 30, plus a rotated tick row\n    // (+20) and/or the axis title (+18). Additive — both can be present at once,\n    // which the old label-or-angle ternary under-allocated.\n    const xAxisHeight =\n      xAxisLabel || xAxisAngle != null\n        ? 30 + (xAxisAngle != null ? 20 : 0) + (xAxisLabel ? 18 : 0)\n        : undefined;\n\n    // Augment each row with the `[lower, upper]` band tuple the Area shades.\n    // Rows missing a numeric bound are left un-coned (the band breaks there).\n    const chartData = data.map((row) => {\n      const lower = row[lowerKey];\n      const upper = row[upperKey];\n      return {\n        ...row,\n        [BAND_KEY]:\n          typeof lower === 'number' && typeof upper === 'number'\n            ? [lower, upper]\n            : undefined,\n      };\n    });\n\n    // The forecast begins at the first row carrying a forecast value; set that\n    // region off from the actuals with a shaded band + a divider at the hand-off.\n    const forecastStart = showForecastRegion\n      ? data.find((row) => typeof row[forecastKey] === 'number')?.[xKey]\n      : undefined;\n    const lastX = data[data.length - 1]?.[xKey];\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer\n          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <ComposedChart data={chartData as readonly unknown[]}>\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              dataKey={xKey}\n              type=\"category\"\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={\n                xAxisAngle != null ? (xAxisAngle < 0 ? 'end' : 'start') : undefined\n              }\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              unit={yUnit}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {/* Set the forecast region off from the actuals (behind everything). */}\n            {forecastStart != null && lastX != null && (\n              <ReferenceArea\n                x1={forecastStart}\n                x2={lastX}\n                fill=\"var(--ui-background-surface-secondary)\"\n                fillOpacity={0.5}\n                ifOverflow=\"extendDomain\"\n              />\n            )}\n            {forecastStart != null && (\n              <ReferenceLine\n                x={forecastStart}\n                stroke=\"var(--ui-border-on-surface-border)\"\n                strokeDasharray=\"4 4\"\n              />\n            )}\n            {showTooltip &&\n              (customTooltip ? (\n                // Strips the synthetic band before the caller's tooltip sees it\n                // — the `__cone` series feeds the Area, not the tooltip.\n                <ChartTooltip content={customTooltip} />\n              ) : (\n                <ChartTooltip\n                  content={(tp) => (\n                    <ChartTooltipContent\n                      active={tp.active}\n                      label={tp.label}\n                      // The synthetic band feeds the Area, not the tooltip.\n                      payload={\n                        dropConeBand(\n                          tp.payload\n                        ) as ChartTooltipContentProps['payload']\n                      }\n                    />\n                  )}\n                />\n              ))}\n            {showLegend && (\n              <ChartLegend\n                content={(lp) => (\n                  <ChartLegendContent\n                    verticalAlign={lp.verticalAlign}\n                    payload={\n                      dropConeBand(\n                        lp.payload\n                      ) as ChartLegendContentProps['payload']\n                    }\n                  />\n                )}\n              />\n            )}\n            {/* The cone renders first so the lines draw on top. One color for the\n                whole metric — actual and forecast differ by line style, not hue —\n                so the cone + forecast line reuse the actual series' color. */}\n            <Area\n              dataKey={BAND_KEY}\n              type=\"monotone\"\n              stroke=\"none\"\n              fill={`var(--color-${actualKey})`}\n              fillOpacity={0.15}\n              connectNulls={false}\n              dot={false}\n              activeDot={false}\n              isAnimationActive={false}\n              legendType=\"none\"\n              tooltipType=\"none\"\n            />\n            <Area\n              dataKey={actualKey}\n              type=\"monotone\"\n              stroke={`var(--color-${actualKey})`}\n              strokeWidth={strokeWidth}\n              fill={`var(--color-${actualKey})`}\n              fillOpacity={0.15}\n              dot={false}\n              activeDot={false}\n              connectNulls\n              isAnimationActive={false}\n            />\n            <Line\n              dataKey={forecastKey}\n              type=\"monotone\"\n              stroke={`var(--color-${actualKey})`}\n              strokeWidth={strokeWidth}\n              strokeDasharray=\"5 5\"\n              dot={false}\n              connectNulls\n              isAnimationActive={false}\n            />\n          </ComposedChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nConfidenceCone.displayName = 'ConfidenceCone';\n\nexport { ConfidenceCone };\n"],"names":["BAND_KEY","dropConeBand","payload","item","createConeTooltip","tooltipContent","props","merged","React","ConfidenceCone","className","config","data","xKey","actualKey","forecastKey","lowerKey","upperKey","xAxisLabel","yAxisLabel","yUnit","strokeWidth","showForecastRegion","showGrid","showTooltip","showLegend","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","ref","customTooltip","xAxisTitle","yAxisTitle","yDomain","resolveAxisDomain","xAxisHeight","chartData","row","lower","upper","forecastStart","_a","lastX","_b","jsx","cn","ChartContainer","jsxs","ComposedChart","CartesianGrid","XAxis","YAxis","ReferenceArea","ReferenceLine","ChartTooltip","tp","ChartTooltipContent","ChartLegend","lp","ChartLegendContent","Area","Line"],"mappings":"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"}

package/dist/components/ui/date-range-picker/date-range-picker.js

@@ -1,6 +1,6 @@
 import { jsxs as b, jsx as o } from "react/jsx-runtime";
-import * as s from "react";
-import { formatDate as a, normalizeRange as P, rangesEqual as g, DISPLAY_FORMAT as _, parseDate as G } from "./date-range-picker-utils.js";
+import * as a from "react";
+import { formatDate as s, normalizeRange as P, rangesEqual as g, DISPLAY_FORMAT as _, parseDate as G } from "./date-range-picker-utils.js";
 import { Popover as H, PopoverTrigger as J, PopoverContent as K } from "../popover/popover.js";
 import { InputDatePicker as Q } from "../input-date-picker/input-date-picker.js";
 import { Calendar as U } from "../calendar/calendar.js";
@@ -30,7 +30,7 @@ function k({
     }
   );
 }
-const X = s.forwardRef(
+const X = a.forwardRef(
   ({
     value: p,
     defaultValue: d,
@@ -43,25 +43,25 @@ const X = s.forwardRef(
     required: N,
     className: F
   }, O) => {
-    const T = p !== void 0, [I, M] = s.useState(
+    const T = p !== void 0, [I, w] = a.useState(
       d ?? {}
-    ), e = T ? p : I, [v, R] = s.useState(!1), [c, m] = s.useState(e), [j, S] = s.useState(a(e.from)), [w, y] = s.useState(a(e.to)), u = (t) => {
-      S(a(t.from)), y(a(t.to));
+    ), e = T ? p : I, [v, R] = a.useState(!1), [m, c] = a.useState(e), [M, S] = a.useState(s(e.from)), [j, y] = a.useState(s(e.to)), u = (t) => {
+      S(s(t.from)), y(s(t.to));
     }, z = (t) => {
-      m(e), u(e), R(t);
+      c(e), u(e), R(t);
     }, E = () => {
       const t = d ?? {};
-      m(t), u(t);
+      c(t), u(t);
     }, q = () => {
-      const t = P(c);
-      T || M(t), i == null || i(t), R(!1);
-    }, r = P(c);
+      const t = P(m);
+      T || w(t), i == null || i(t), R(!1);
+    }, r = P(m);
     let D;
     r.from ? D = { from: r.from, to: r.to } : r.to && (D = { from: r.to, to: r.to });
     const B = (t) => {
       const n = { from: t == null ? void 0 : t.from, to: t == null ? void 0 : t.to };
-      m(n), u(n);
-    }, L = g(c, e), Y = g(c, d ?? {});
+      c(n), u(n);
+    }, L = g(m, e), Y = g(m, d ?? {});
     return /* @__PURE__ */ b(H, { open: v, onOpenChange: z, children: [
       /* @__PURE__ */ o(
         J,
@@ -77,15 +77,15 @@ const X = s.forwardRef(
               placeholder: x,
               disabled: A,
               required: N,
-              startDate: a(e.from),
-              endDate: a(e.to),
+              startDate: s(e.from),
+              endDate: s(e.to),
               open: v,
               className: F
             }
           )
         }
       ),
-      /* @__PURE__ */ b(K, { align: "start", className: "w-auto p-0", children: [
+      /* @__PURE__ */ b(K, { align: "start", className: "w-auto max-w-none p-0", children: [
         /* @__PURE__ */ o(
           U,
           {
@@ -93,7 +93,7 @@ const X = s.forwardRef(
             numberOfMonths: 2,
             selected: D,
             onSelect: B,
-            defaultMonth: c.from ?? e.from
+            defaultMonth: m.from ?? e.from
           }
         ),
         /* @__PURE__ */ b("div", { className: "flex items-end gap-2 border-t border-border p-3", children: [
@@ -101,9 +101,9 @@ const X = s.forwardRef(
             k,
             {
               label: "Start date",
-              text: j,
+              text: M,
               onTextChange: S,
-              onParsedChange: (t) => m((n) => ({ ...n, from: t }))
+              onParsedChange: (t) => c((n) => ({ ...n, from: t }))
             }
           ),
           /* @__PURE__ */ o("span", { className: "pb-2 text-muted-foreground", children: "–" }),
@@ -111,9 +111,9 @@ const X = s.forwardRef(
             k,
             {
               label: "End date",
-              text: w,
+              text: j,
               onTextChange: y,
-              onParsedChange: (t) => m((n) => ({ ...n, to: t }))
+              onParsedChange: (t) => c((n) => ({ ...n, to: t }))
             }
           )
         ] }),

package/dist/components/ui/date-range-picker/date-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker.js","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { DateRange as RdpDateRange } from 'react-day-picker';\n\nimport { Button } from '../button';\nimport { Calendar } from '../calendar';\nimport { InputDatePicker } from '../input-date-picker';\nimport { InputText } from '../input-text';\nimport { Popover, PopoverContent, PopoverTrigger } from '../popover';\nimport {\n  DISPLAY_FORMAT,\n  formatDate,\n  normalizeRange,\n  parseDate,\n  rangesEqual,\n  type DateRange,\n} from './date-range-picker-utils';\n\nexport type { DateRange };\n\n// One of the two editable start/end fields. Kept internal (only ever used twice,\n// here) — it wires an `InputText` to the draft: typing echoes verbatim into the\n// field via `onTextChange` (so a partial mid-type value isn't reformatted), and a\n// successfully parsed date is forwarded via `onParsedChange`.\nfunction DateField({\n  label,\n  text,\n  onTextChange,\n  onParsedChange,\n}: {\n  label: string;\n  text: string;\n  onTextChange: (text: string) => void;\n  onParsedChange: (date: Date | undefined) => void;\n}) {\n  return (\n    <InputText\n      aria-label={label}\n      value={text}\n      placeholder={DISPLAY_FORMAT}\n      onChange={(event) => {\n        const next = event.target.value;\n        onTextChange(next);\n\n        if (next.trim() === '') {\n          onParsedChange(undefined);\n          return;\n        }\n\n        const parsed = parseDate(next);\n        if (parsed) {\n          onParsedChange(parsed);\n        }\n      }}\n    />\n  );\n}\n\n// A range date picker: the `InputDatePicker` trigger (pickerType=\"dateRange\")\n// opens a Popover holding a dual-month range `Calendar`, two editable start/end\n// date fields bound to the in-progress draft, and a Reset / Apply footer. Mirrors\n// the draft/commit/revert idiom of `FilterSearchFilters`: the applied range is\n// snapshotted into a draft on open; editing (calendar or text fields) mutates only\n// the draft; dismissing the popover (outside press / Escape) reverts the draft, and\n// only Apply commits it via `onValueChange` and closes.\n//\n// No dedicated token tier — the trigger brings `--ui-input-date-picker-*`, the\n// Calendar / Popover / Buttons bring their own semantic tokens. Reconcile with\n// `/figma-component DateRangePicker <url> --update` once a mockup lands.\n\nexport interface DateRangePickerProps {\n  /** The applied range (controlled). Omit for uncontrolled use with `defaultValue`. */\n  value?: DateRange;\n  /** The initial applied range (uncontrolled) and the target of \"Reset to default\". */\n  defaultValue?: DateRange;\n  /** Called with the committed range when Apply is pressed. */\n  onValueChange?: (range: DateRange) => void;\n  /** Field label for the trigger. */\n  label?: React.ReactNode;\n  /** Helper text below the trigger. */\n  description?: React.ReactNode;\n  /** Error message below the trigger (switches the trigger to its error treatment). */\n  error?: React.ReactNode;\n  /** Hint shown in the trigger when no range is selected. */\n  placeholder?: React.ReactNode;\n  /** Disables the trigger and prevents opening the popover. */\n  disabled?: boolean;\n  /** Marks the trigger required. */\n  required?: boolean;\n  /** Extra classes merged onto the trigger. */\n  className?: string;\n}\n\nconst DateRangePicker = React.forwardRef<\n  HTMLButtonElement,\n  DateRangePickerProps\n>(\n  (\n    {\n      value,\n      defaultValue,\n      onValueChange,\n      label,\n      description,\n      error,\n      placeholder,\n      disabled,\n      required,\n      className,\n    },\n    ref\n  ) => {\n    const isControlled = value !== undefined;\n    const [internalApplied, setInternalApplied] = React.useState<DateRange>(\n      defaultValue ?? {}\n    );\n    const applied = isControlled ? (value as DateRange) : internalApplied;\n\n    const [open, setOpen] = React.useState(false);\n    const [draft, setDraft] = React.useState<DateRange>(applied);\n\n    const [fromText, setFromText] = React.useState(formatDate(applied.from));\n    const [toText, setToText] = React.useState(formatDate(applied.to));\n\n    // Sync the editable fields from a range whenever the draft changes for a\n    // reason OTHER than the user typing (open / calendar click / reset). We do\n    // NOT resync on every draft change: a `[draft]` effect would rewrite the\n    // field mid-type (e.g. a partial year \"2\" parses, then gets echoed back\n    // zero-padded as \"0002\"), scrambling further keystrokes.\n    const syncFieldsFrom = (range: DateRange) => {\n      setFromText(formatDate(range.from));\n      setToText(formatDate(range.to));\n    };\n\n    const handleOpenChange = (nextOpen: boolean) => {\n      // Snapshot the applied range on open; revert the draft on any dismiss\n      // (outside press / Escape) so an un-applied edit never leaks out.\n      setDraft(applied);\n      syncFieldsFrom(applied);\n      setOpen(nextOpen);\n    };\n\n    const handleReset = () => {\n      const next = defaultValue ?? {};\n      setDraft(next);\n      syncFieldsFrom(next);\n    };\n\n    const handleApply = () => {\n      // Commit chronologically ordered so a typed end-before-start range is\n      // normalized rather than committed inverted.\n      const committed = normalizeRange(draft);\n      if (!isControlled) setInternalApplied(committed);\n      onValueChange?.(committed);\n      setOpen(false);\n    };\n\n    // Feed the calendar a normalized range so a typed inverted range still\n    // highlights the correct band (the editable fields keep the raw typed text).\n    // react-day-picker's `DateRange` requires `from`, so a to-only draft (end\n    // typed before start) is fed as a single selected day at `to` — otherwise\n    // `selected` would be `undefined` and the next calendar click would start a\n    // fresh range instead of completing this one, discarding the typed end date.\n    const normalizedDraft = normalizeRange(draft);\n    let selectedRange: RdpDateRange | undefined;\n    if (normalizedDraft.from) {\n      selectedRange = { from: normalizedDraft.from, to: normalizedDraft.to };\n    } else if (normalizedDraft.to) {\n      selectedRange = { from: normalizedDraft.to, to: normalizedDraft.to };\n    }\n\n    const handleSelect = (range: RdpDateRange | undefined) => {\n      const next = { from: range?.from, to: range?.to };\n      setDraft(next);\n      syncFieldsFrom(next);\n    };\n\n    const applyDisabled = rangesEqual(draft, applied);\n    const resetDisabled = rangesEqual(draft, defaultValue ?? {});\n\n    return (\n      <Popover open={open} onOpenChange={handleOpenChange}>\n        <PopoverTrigger\n          render={\n            <InputDatePicker\n              ref={ref}\n              pickerType=\"dateRange\"\n              label={label}\n              description={description}\n              error={error}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              startDate={formatDate(applied.from)}\n              endDate={formatDate(applied.to)}\n              open={open}\n              className={className}\n            />\n          }\n        />\n        <PopoverContent align=\"start\" className=\"w-auto p-0\">\n          <Calendar\n            mode=\"range\"\n            numberOfMonths={2}\n            selected={selectedRange}\n            onSelect={handleSelect}\n            defaultMonth={draft.from ?? applied.from}\n          />\n          <div className=\"flex items-end gap-2 border-t border-border p-3\">\n            <DateField\n              label=\"Start date\"\n              text={fromText}\n              onTextChange={setFromText}\n              onParsedChange={(parsed) =>\n                setDraft((previous) => ({ ...previous, from: parsed }))\n              }\n            />\n            <span className=\"pb-2 text-muted-foreground\">–</span>\n            <DateField\n              label=\"End date\"\n              text={toText}\n              onTextChange={setToText}\n              onParsedChange={(parsed) =>\n                setDraft((previous) => ({ ...previous, to: parsed }))\n              }\n            />\n          </div>\n          <div className=\"flex items-center gap-2 border-t border-border p-3\">\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              disabled={resetDisabled}\n              onClick={handleReset}\n            >\n              Reset to default\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"default\"\n              className=\"ms-auto\"\n              disabled={applyDisabled}\n              onClick={handleApply}\n            >\n              Apply\n            </Button>\n          </div>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\nDateRangePicker.displayName = 'DateRangePicker';\n\nexport { DateRangePicker };\n"],"names":["DateField","label","text","onTextChange","onParsedChange","jsx","InputText","DISPLAY_FORMAT","event","next","parsed","parseDate","DateRangePicker","React","value","defaultValue","onValueChange","description","error","placeholder","disabled","required","className","ref","isControlled","internalApplied","setInternalApplied","applied","open","setOpen","draft","setDraft","fromText","setFromText","formatDate","toText","setToText","syncFieldsFrom","range","handleOpenChange","nextOpen","handleReset","handleApply","committed","normalizeRange","normalizedDraft","selectedRange","handleSelect","applyDisabled","rangesEqual","resetDisabled","jsxs","Popover","PopoverTrigger","InputDatePicker","PopoverContent","Calendar","previous","Button"],"mappings":"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"}
+{"version":3,"file":"date-range-picker.js","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { DateRange as RdpDateRange } from 'react-day-picker';\n\nimport { Button } from '../button';\nimport { Calendar } from '../calendar';\nimport { InputDatePicker } from '../input-date-picker';\nimport { InputText } from '../input-text';\nimport { Popover, PopoverContent, PopoverTrigger } from '../popover';\nimport {\n  DISPLAY_FORMAT,\n  formatDate,\n  normalizeRange,\n  parseDate,\n  rangesEqual,\n  type DateRange,\n} from './date-range-picker-utils';\n\nexport type { DateRange };\n\n// One of the two editable start/end fields. Kept internal (only ever used twice,\n// here) — it wires an `InputText` to the draft: typing echoes verbatim into the\n// field via `onTextChange` (so a partial mid-type value isn't reformatted), and a\n// successfully parsed date is forwarded via `onParsedChange`.\nfunction DateField({\n  label,\n  text,\n  onTextChange,\n  onParsedChange,\n}: {\n  label: string;\n  text: string;\n  onTextChange: (text: string) => void;\n  onParsedChange: (date: Date | undefined) => void;\n}) {\n  return (\n    <InputText\n      aria-label={label}\n      value={text}\n      placeholder={DISPLAY_FORMAT}\n      onChange={(event) => {\n        const next = event.target.value;\n        onTextChange(next);\n\n        if (next.trim() === '') {\n          onParsedChange(undefined);\n          return;\n        }\n\n        const parsed = parseDate(next);\n        if (parsed) {\n          onParsedChange(parsed);\n        }\n      }}\n    />\n  );\n}\n\n// A range date picker: the `InputDatePicker` trigger (pickerType=\"dateRange\")\n// opens a Popover holding a dual-month range `Calendar`, two editable start/end\n// date fields bound to the in-progress draft, and a Reset / Apply footer. Mirrors\n// the draft/commit/revert idiom of `FilterSearchFilters`: the applied range is\n// snapshotted into a draft on open; editing (calendar or text fields) mutates only\n// the draft; dismissing the popover (outside press / Escape) reverts the draft, and\n// only Apply commits it via `onValueChange` and closes.\n//\n// No dedicated token tier — the trigger brings `--ui-input-date-picker-*`, the\n// Calendar / Popover / Buttons bring their own semantic tokens. Reconcile with\n// `/figma-component DateRangePicker <url> --update` once a mockup lands.\n\nexport interface DateRangePickerProps {\n  /** The applied range (controlled). Omit for uncontrolled use with `defaultValue`. */\n  value?: DateRange;\n  /** The initial applied range (uncontrolled) and the target of \"Reset to default\". */\n  defaultValue?: DateRange;\n  /** Called with the committed range when Apply is pressed. */\n  onValueChange?: (range: DateRange) => void;\n  /** Field label for the trigger. */\n  label?: React.ReactNode;\n  /** Helper text below the trigger. */\n  description?: React.ReactNode;\n  /** Error message below the trigger (switches the trigger to its error treatment). */\n  error?: React.ReactNode;\n  /** Hint shown in the trigger when no range is selected. */\n  placeholder?: React.ReactNode;\n  /** Disables the trigger and prevents opening the popover. */\n  disabled?: boolean;\n  /** Marks the trigger required. */\n  required?: boolean;\n  /** Extra classes merged onto the trigger. */\n  className?: string;\n}\n\nconst DateRangePicker = React.forwardRef<\n  HTMLButtonElement,\n  DateRangePickerProps\n>(\n  (\n    {\n      value,\n      defaultValue,\n      onValueChange,\n      label,\n      description,\n      error,\n      placeholder,\n      disabled,\n      required,\n      className,\n    },\n    ref\n  ) => {\n    const isControlled = value !== undefined;\n    const [internalApplied, setInternalApplied] = React.useState<DateRange>(\n      defaultValue ?? {}\n    );\n    const applied = isControlled ? (value as DateRange) : internalApplied;\n\n    const [open, setOpen] = React.useState(false);\n    const [draft, setDraft] = React.useState<DateRange>(applied);\n\n    const [fromText, setFromText] = React.useState(formatDate(applied.from));\n    const [toText, setToText] = React.useState(formatDate(applied.to));\n\n    // Sync the editable fields from a range whenever the draft changes for a\n    // reason OTHER than the user typing (open / calendar click / reset). We do\n    // NOT resync on every draft change: a `[draft]` effect would rewrite the\n    // field mid-type (e.g. a partial year \"2\" parses, then gets echoed back\n    // zero-padded as \"0002\"), scrambling further keystrokes.\n    const syncFieldsFrom = (range: DateRange) => {\n      setFromText(formatDate(range.from));\n      setToText(formatDate(range.to));\n    };\n\n    const handleOpenChange = (nextOpen: boolean) => {\n      // Snapshot the applied range on open; revert the draft on any dismiss\n      // (outside press / Escape) so an un-applied edit never leaks out.\n      setDraft(applied);\n      syncFieldsFrom(applied);\n      setOpen(nextOpen);\n    };\n\n    const handleReset = () => {\n      const next = defaultValue ?? {};\n      setDraft(next);\n      syncFieldsFrom(next);\n    };\n\n    const handleApply = () => {\n      // Commit chronologically ordered so a typed end-before-start range is\n      // normalized rather than committed inverted.\n      const committed = normalizeRange(draft);\n      if (!isControlled) setInternalApplied(committed);\n      onValueChange?.(committed);\n      setOpen(false);\n    };\n\n    // Feed the calendar a normalized range so a typed inverted range still\n    // highlights the correct band (the editable fields keep the raw typed text).\n    // react-day-picker's `DateRange` requires `from`, so a to-only draft (end\n    // typed before start) is fed as a single selected day at `to` — otherwise\n    // `selected` would be `undefined` and the next calendar click would start a\n    // fresh range instead of completing this one, discarding the typed end date.\n    const normalizedDraft = normalizeRange(draft);\n    let selectedRange: RdpDateRange | undefined;\n    if (normalizedDraft.from) {\n      selectedRange = { from: normalizedDraft.from, to: normalizedDraft.to };\n    } else if (normalizedDraft.to) {\n      selectedRange = { from: normalizedDraft.to, to: normalizedDraft.to };\n    }\n\n    const handleSelect = (range: RdpDateRange | undefined) => {\n      const next = { from: range?.from, to: range?.to };\n      setDraft(next);\n      syncFieldsFrom(next);\n    };\n\n    const applyDisabled = rangesEqual(draft, applied);\n    const resetDisabled = rangesEqual(draft, defaultValue ?? {});\n\n    return (\n      <Popover open={open} onOpenChange={handleOpenChange}>\n        <PopoverTrigger\n          render={\n            <InputDatePicker\n              ref={ref}\n              pickerType=\"dateRange\"\n              label={label}\n              description={description}\n              error={error}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              startDate={formatDate(applied.from)}\n              endDate={formatDate(applied.to)}\n              open={open}\n              className={className}\n            />\n          }\n        />\n        <PopoverContent align=\"start\" className=\"w-auto max-w-none p-0\">\n          <Calendar\n            mode=\"range\"\n            numberOfMonths={2}\n            selected={selectedRange}\n            onSelect={handleSelect}\n            defaultMonth={draft.from ?? applied.from}\n          />\n          <div className=\"flex items-end gap-2 border-t border-border p-3\">\n            <DateField\n              label=\"Start date\"\n              text={fromText}\n              onTextChange={setFromText}\n              onParsedChange={(parsed) =>\n                setDraft((previous) => ({ ...previous, from: parsed }))\n              }\n            />\n            <span className=\"pb-2 text-muted-foreground\">–</span>\n            <DateField\n              label=\"End date\"\n              text={toText}\n              onTextChange={setToText}\n              onParsedChange={(parsed) =>\n                setDraft((previous) => ({ ...previous, to: parsed }))\n              }\n            />\n          </div>\n          <div className=\"flex items-center gap-2 border-t border-border p-3\">\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              disabled={resetDisabled}\n              onClick={handleReset}\n            >\n              Reset to default\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"default\"\n              className=\"ms-auto\"\n              disabled={applyDisabled}\n              onClick={handleApply}\n            >\n              Apply\n            </Button>\n          </div>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\nDateRangePicker.displayName = 'DateRangePicker';\n\nexport { DateRangePicker };\n"],"names":["DateField","label","text","onTextChange","onParsedChange","jsx","InputText","DISPLAY_FORMAT","event","next","parsed","parseDate","DateRangePicker","React","value","defaultValue","onValueChange","description","error","placeholder","disabled","required","className","ref","isControlled","internalApplied","setInternalApplied","applied","open","setOpen","draft","setDraft","fromText","setFromText","formatDate","toText","setToText","syncFieldsFrom","range","handleOpenChange","nextOpen","handleReset","handleApply","committed","normalizeRange","normalizedDraft","selectedRange","handleSelect","applyDisabled","rangesEqual","resetDisabled","jsxs","Popover","PopoverTrigger","InputDatePicker","PopoverContent","Calendar","previous","Button"],"mappings":"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"}