@acronis-platform/ui-react 0.57.1 → 0.58.0

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  type ChartConfig,\n  type ChartLegendContentProps,\n  type ChartTooltipContentProps,\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  /**\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  /** Title rendered beneath the horizontal (X) axis. */\n  xAxisLabel?: string;\n  /** Title rendered beside the vertical (Y) axis (rotated). */\n  yAxisLabel?: string;\n  /** Unit suffix appended to Y-axis tick values (recharts `unit`; the X axis is categorical). */\n  yUnit?: 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  showGrid?: boolean;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize the tooltip without composing recharts yourself. The synthetic\n   * cone band is filtered out of the payload before your tooltip sees it, so a\n   * `__cone` item never reaches your formatter. Ignored when `showTooltip` is\n   * false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\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      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    // 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 && <CartesianGrid vertical={false} />}\n            <XAxis\n              dataKey={xKey}\n              type=\"category\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              height={xAxisLabel ? 48 : undefined}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              tickLine={false}\n              axisLine={false}\n              unit={yUnit}\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","ref","customTooltip","xAxisTitle","yAxisTitle","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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"}

package/dist/components/ui/dialog/dialog.js

@@ -1,141 +1,313 @@
-import { jsx as t, jsxs as s, Fragment as D } from "react/jsx-runtime";
-import * as i from "react";
-import { Dialog as r } from "@base-ui/react/dialog";
-import { TimesIcon as b } from "@acronis-platform/icons-react/stroke-mono";
-import { cva as w } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { jsx as o, jsxs as c, Fragment as D } from "react/jsx-runtime";
+import * as n from "react";
+import { Dialog as i } from "@base-ui/react/dialog";
+import { TimesIcon as $ } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as E } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { cn as l } from "../../../lib/utils.js";
-import { usePortalContainer as y } from "../../../lib/portal-container.js";
-const v = w(
-  "fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg bg-muted text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95",
+import { usePortalContainer as H } from "../../../lib/portal-container.js";
+import { DialogFooterDefault as _ } from "../dialog-footer-default/dialog-footer-default.js";
+import { Loading as U } from "../loading/loading.js";
+import { InputText as Y } from "../input-text/input-text.js";
+import { Button as y } from "../button/button.js";
+const q = E(
+  "fixed left-1/2 top-1/2 z-50 flex w-full min-w-[var(--ui-dialog-container-width-min)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[var(--ui-dialog-container-border-radius)] bg-[var(--ui-dialog-container-color)] text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95",
   {
     variants: {
       size: {
-        xs: "max-w-[464px]",
-        sm: "max-w-lg",
-        md: "max-w-2xl",
-        lg: "max-w-[832px]",
-        xl: "max-w-[992px]",
-        "2xl": "max-w-[1136px]"
+        sm: "max-w-[var(--ui-dialog-container-size-sm)]",
+        large: "max-w-[832px]"
       }
     },
     defaultVariants: {
       size: "sm"
     }
   }
-), V = r.Root, I = r.Trigger, $ = r.Portal, q = r.Close, d = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
-  r.Backdrop,
+), J = i.Root;
+i.Trigger;
+i.Portal;
+const x = i.Close, C = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
+  i.Backdrop,
   {
-    ref: e,
+    ref: r,
     className: l(
       "fixed inset-0 z-50 bg-[var(--ui-background-backdrop-screen)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0",
-      o
+      e
     ),
     ...a
   }
 ));
-d.displayName = "DialogOverlay";
-const N = i.forwardRef(
+C.displayName = "DialogOverlay";
+const w = n.forwardRef(
   ({
-    className: o,
+    className: e,
     children: a,
-    size: e,
-    portal: c = !0,
-    portalContainer: m,
-    keepMounted: f,
-    ...g
-  }, p) => {
-    const u = y(), x = m ?? u, n = /* @__PURE__ */ s(D, { children: [
-      /* @__PURE__ */ t(d, {}),
-      /* @__PURE__ */ t(
-        r.Popup,
+    size: r,
+    portal: d = !0,
+    portalContainer: s,
+    keepMounted: g,
+    ...p
+  }, u) => {
+    const b = H(), f = s ?? b, m = /* @__PURE__ */ c(D, { children: [
+      /* @__PURE__ */ o(C, {}),
+      /* @__PURE__ */ o(
+        i.Popup,
         {
-          ref: p,
-          className: l(v({ size: e }), o),
-          ...g,
+          ref: u,
+          className: l(q({ size: r }), e),
+          ...p,
           children: a
         }
       )
     ] });
-    return c ? /* @__PURE__ */ t(r.Portal, { container: x, keepMounted: f, children: n }) : n;
+    return d ? /* @__PURE__ */ o(i.Portal, { container: f, keepMounted: g, children: m }) : m;
   }
 );
-N.displayName = "DialogContent";
-const C = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
+w.displayName = "DialogContent";
+const K = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
   "div",
   {
-    ref: e,
+    ref: r,
     className: l(
       "flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4",
-      o
+      e
     ),
     ...a
   }
 ));
-C.displayName = "DialogHeader";
-const R = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
+K.displayName = "DialogHeaderRoot";
+const M = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
   "div",
   {
-    ref: e,
+    ref: r,
     className: l(
       "flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4",
-      o
+      e
     ),
     ...a
   }
 ));
-R.displayName = "DialogFooter";
-const h = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t("div", { ref: e, className: l("flex-1 overflow-auto p-6", o), ...a }));
-h.displayName = "DialogBody";
-const z = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
-  r.Title,
+M.displayName = "DialogFooterRoot";
+const Q = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o("div", { ref: r, className: l("flex-1 overflow-auto p-6", e), ...a }));
+Q.displayName = "DialogBodyRoot";
+const v = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
+  i.Title,
   {
-    ref: e,
+    ref: r,
     className: l(
       "flex-1 text-2xl font-normal leading-8 text-foreground",
-      o
+      e
     ),
     ...a
   }
 ));
-z.displayName = "DialogTitle";
-const T = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
-  r.Description,
+v.displayName = "DialogTitle";
+const W = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
+  i.Description,
   {
-    ref: e,
-    className: l("text-sm text-muted-foreground", o),
+    ref: r,
+    className: l("text-sm text-muted-foreground", e),
     ...a
   }
 ));
-T.displayName = "DialogDescription";
-const k = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ s(
-  r.Close,
+W.displayName = "DialogDescription";
+const N = n.forwardRef(({ className: e, closeLabel: a = "Close", ...r }, d) => /* @__PURE__ */ c(
+  i.Close,
   {
-    ref: e,
+    ref: d,
     className: l(
-      "rounded p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none",
-      o
+      "cursor-pointer rounded p-1 text-[var(--ui-button-icon-global-icon-color-idle)] transition-colors hover:bg-[var(--ui-button-icon-global-container-color-hover)] hover:text-[var(--ui-button-icon-global-icon-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] active:text-[var(--ui-button-icon-global-icon-color-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none disabled:cursor-default disabled:text-[var(--ui-button-icon-global-icon-color-disabled)]",
+      e
     ),
-    ...a,
+    ...r,
     children: [
-      /* @__PURE__ */ t(b, { size: 24 }),
-      /* @__PURE__ */ t("span", { className: "sr-only", children: "Close" })
+      /* @__PURE__ */ o($, { size: 24 }),
+      /* @__PURE__ */ o("span", { className: "sr-only", children: a })
     ]
   }
 ));
-k.displayName = "DialogCloseButton";
+N.displayName = "DialogCloseButton";
+function X({ title: e, closeLabel: a }) {
+  return /* @__PURE__ */ c("div", { className: "flex h-[var(--ui-dialog-header-height)] items-center gap-[var(--ui-dialog-header-gap)] border-b-[length:var(--ui-dialog-header-border-width)] border-[var(--ui-dialog-header-border-color)] bg-[var(--ui-dialog-header-color)] px-[var(--ui-dialog-header-padding-x)]", children: [
+    /* @__PURE__ */ o(v, { children: e }),
+    /* @__PURE__ */ o(N, { closeLabel: a })
+  ] });
+}
+function Z({ children: e, inert: a }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      inert: a,
+      className: "flex min-h-[var(--ui-dialog-body-height-min)] flex-col justify-center gap-[var(--ui-dialog-body-gap)] px-4 py-[var(--ui-dialog-body-padding-y)]",
+      children: typeof e == "string" ? /* @__PURE__ */ o("p", { className: "text-sm leading-6 text-foreground", children: e }) : e
+    }
+  );
+}
+function ee({
+  secondaryLabel: e,
+  primaryLabel: a,
+  primaryVariant: r,
+  primaryCloses: d,
+  onPrimaryAction: s
+}) {
+  return /* @__PURE__ */ c(D, { children: [
+    e && /* @__PURE__ */ o(x, { render: /* @__PURE__ */ o(y, { variant: "secondary", children: e }) }),
+    d ? /* @__PURE__ */ o(
+      x,
+      {
+        onClick: s,
+        render: /* @__PURE__ */ o(y, { variant: r, children: a })
+      }
+    ) : /* @__PURE__ */ o(y, { variant: r, onClick: s, children: a })
+  ] });
+}
+const ae = {
+  default: {
+    title: "Dialog title",
+    body: "Drop any content into this slot.",
+    secondaryLabel: "Cancel",
+    primaryLabel: "Label",
+    primaryVariant: "default"
+  },
+  rename: {
+    title: (e = "object name") => `Rename ${e}`,
+    // `objectName` prefills the field with the real current name; the field's
+    // accessible name (`objectNameLabel`) is separate — it's the label, not the value.
+    body: (e = "Current name", a = "Object name") => /* @__PURE__ */ o(Y, { "aria-label": a, defaultValue: e }),
+    secondaryLabel: "Cancel",
+    primaryLabel: "Rename",
+    primaryVariant: "default"
+  },
+  "save changes": {
+    title: "Save changes",
+    body: "You have unsaved changes. Do you want to save them before leaving?",
+    secondaryLabel: "Go back",
+    primaryLabel: "Save",
+    primaryVariant: "default"
+  },
+  "reset password": {
+    title: "Reset password",
+    body: "Further instructions will be sent to your email address.",
+    secondaryLabel: "Cancel",
+    primaryLabel: "Reset",
+    primaryVariant: "default"
+  },
+  "discard changes": {
+    title: "Discard changes",
+    body: (e = "Object name") => /* @__PURE__ */ c("p", { className: "text-sm leading-6 text-foreground", children: [
+      "Are you sure you want to discard the unsaved changes to",
+      " ",
+      /* @__PURE__ */ o("strong", { className: "font-semibold", children: e }),
+      "?"
+    ] }),
+    secondaryLabel: "Go back",
+    primaryLabel: "Confirm",
+    primaryVariant: "destructive"
+  },
+  accept: {
+    title: (e = "object name") => `Accept ${e}`,
+    body: "Click Accept to confirm that you have read, understood, and agree to the terms and conditions below.",
+    secondaryLabel: "Cancel",
+    primaryLabel: "Accept",
+    primaryVariant: "default"
+  },
+  "read-only": {
+    title: "License agreement",
+    body: "This is a read-only dialog used to view legal documents such as the License Agreement, EULA updates, Terms of Service, and other legal documents.",
+    primaryLabel: "Done",
+    primaryVariant: "default",
+    primaryCloses: !0
+  },
+  // No Figma preset — a legacy, free-form escape hatch (see the `footer` prop
+  // and the `Large` story). This fallback title/body/footer only renders if
+  // the caller supplies neither `footer` nor `title`/`children` — every real
+  // `wide` call site overrides them.
+  wide: {
+    title: "Dialog title",
+    body: "Drop any content into this slot.",
+    secondaryLabel: "Cancel",
+    primaryLabel: "Confirm",
+    primaryVariant: "default"
+  }
+}, oe = n.forwardRef(
+  ({
+    variant: e = "default",
+    hasLoading: a = !1,
+    loadingLabel: r,
+    hasHeader: d = !0,
+    hasFooter: s = !0,
+    children: g,
+    title: p,
+    objectName: u,
+    objectNameLabel: b,
+    secondaryLabel: f,
+    primaryLabel: m,
+    onPrimaryAction: L,
+    footer: R,
+    closeLabel: T,
+    size: V,
+    portal: z,
+    portalContainer: k,
+    keepMounted: A,
+    className: B,
+    ...j
+  }, S) => {
+    const t = ae[e], F = typeof t.title == "function" ? t.title(u) : t.title, O = typeof t.body == "function" ? t.body(u, b) : t.body, I = g ?? O, h = p ?? F, G = f ?? t.secondaryLabel, P = m ?? t.primaryLabel;
+    return /* @__PURE__ */ o(J, { ...j, children: /* @__PURE__ */ c(
+      w,
+      {
+        ref: S,
+        size: V ?? (e === "wide" ? "large" : "sm"),
+        portal: z,
+        portalContainer: k,
+        keepMounted: A,
+        className: B,
+        "aria-busy": a || void 0,
+        children: [
+          d ? /* @__PURE__ */ o(X, { title: h, closeLabel: T }) : (
+            // Header hidden, but the dialog still needs an accessible name.
+            /* @__PURE__ */ o(v, { className: "sr-only", children: h })
+          ),
+          /* @__PURE__ */ o(Z, { inert: a, children: I }),
+          s && /* @__PURE__ */ o(_, { inert: a, children: R ?? /* @__PURE__ */ o(
+            ee,
+            {
+              secondaryLabel: G,
+              primaryLabel: P,
+              primaryVariant: t.primaryVariant,
+              primaryCloses: t.primaryCloses,
+              onPrimaryAction: L
+            }
+          ) }),
+          a && /* @__PURE__ */ o(
+            U,
+            {
+              variant: "onSurfaceSecondary",
+              hasLabel: !1,
+              label: r,
+              className: l(
+                "absolute inset-x-0 bottom-0 rounded-none",
+                d ? "top-[var(--ui-dialog-header-height)]" : "top-0"
+              )
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+oe.displayName = "Dialog";
 export {
-  V as Dialog,
-  h as DialogBody,
-  q as DialogClose,
-  k as DialogCloseButton,
-  N as DialogContent,
-  T as DialogDescription,
-  R as DialogFooter,
-  C as DialogHeader,
-  d as DialogOverlay,
-  $ as DialogPortal,
-  z as DialogTitle,
-  I as DialogTrigger,
-  v as dialogContentVariants
+  oe as Dialog,
+  Q as DialogBodyRoot,
+  x as DialogClose,
+  N as DialogCloseButton,
+  w as DialogContent,
+  W as DialogDescription,
+  M as DialogFooterRoot,
+  K as DialogHeaderRoot,
+  C as DialogOverlay,
+  J as DialogRoot,
+  v as DialogTitle,
+  q as dialogContentVariants
 };
 //# sourceMappingURL=dialog.js.map