@acronis-platform/ui-react 4.0.0 → 4.1.0

package/dist/components/ui/scatter-chart/scatter-chart.js

@@ -1,140 +1,95 @@
-import { jsx as t, jsxs as _ } from "react/jsx-runtime";
-import * as q from "react";
-import { ScatterChart as z, CartesianGrid as E, XAxis as I, YAxis as J, ZAxis as O, Scatter as P } from "recharts";
-import { cn as Q } from "../../../lib/utils.js";
-import { resolveAnimation as U, resolveRotatedTickAnchor as V, resolveXAxisTitle as W, resolveXAxisHeight as K, resolveYAxisTitle as tt, resolveAxisDomain as et } from "../chart/chart-format.js";
-import { ChartContainer as rt, ChartTooltip as at, ChartTooltipContent as it, ChartLegend as ot, ChartLegendContent as nt } from "../chart/chart.js";
-const st = q.forwardRef(
-  ({
-    className: l,
-    config: c,
-    palette: m,
-    series: h,
-    xKey: i,
-    yKey: o,
-    zKey: r,
-    zRange: d = [60, 400],
-    shape: f = "circle",
-    xAxisLabel: n,
-    yAxisLabel: s,
-    xUnit: u,
-    yUnit: p,
-    showGrid: C = !0,
-    showTooltip: k = !0,
-    showLegend: v = !0,
-    showXAxis: g = !0,
-    showYAxis: x = !0,
-    xTickFormatter: y,
-    yTickFormatter: A,
-    xAxisAngle: a,
-    xAxisInterval: T,
-    yAxisTickCount: b,
-    yAxisDomain: S,
-    gridDashed: D,
-    gridHorizontal: L,
-    gridVertical: N,
-    tooltipContent: R,
-    animate: X,
-    animationDuration: j,
-    animationBegin: w,
-    animationEasing: F,
-    ...H
-  }, M) => {
-    const Y = U({
-      animate: X,
-      animationDuration: j,
-      animationBegin: w,
-      animationEasing: F
-    }), $ = W(
-      n,
-      "insideBottom",
-      -8
-    ), B = tt(s), G = et(S), Z = K(n, a);
-    return /* @__PURE__ */ t("div", { ref: M, className: Q(l), ...H, children: /* @__PURE__ */ t(
-      rt,
-      {
-        config: c,
-        palette: m,
-        className: "size-full [&_.recharts-label]:fill-foreground",
-        children: /* @__PURE__ */ _(
-          z,
-          {
-            margin: { top: 16, right: 16, bottom: 16, left: 16 },
-            children: [
-              C && /* @__PURE__ */ t(
-                E,
-                {
-                  horizontal: L ?? !0,
-                  vertical: N ?? !0,
-                  strokeDasharray: D ? "3 3" : void 0
-                }
-              ),
-              /* @__PURE__ */ t(
-                I,
-                {
-                  type: "number",
-                  dataKey: i,
-                  name: i,
-                  unit: u,
-                  hide: !g,
-                  tickLine: !1,
-                  axisLine: !1,
-                  tickMargin: 8,
-                  tickFormatter: y,
-                  angle: a,
-                  interval: T,
-                  textAnchor: V(a),
-                  height: Z,
-                  label: $
-                }
-              ),
-              /* @__PURE__ */ t(
-                J,
-                {
-                  type: "number",
-                  dataKey: o,
-                  name: o,
-                  unit: p,
-                  hide: !x,
-                  tickLine: !1,
-                  axisLine: !1,
-                  tickMargin: 8,
-                  tickFormatter: A,
-                  tickCount: b,
-                  domain: G,
-                  width: s ? 72 : void 0,
-                  label: B
-                }
-              ),
-              r && /* @__PURE__ */ t(O, { type: "number", dataKey: r, range: d, name: r }),
-              k && /* @__PURE__ */ t(
-                at,
-                {
-                  cursor: { strokeDasharray: "3 3" },
-                  content: R ?? /* @__PURE__ */ t(it, {})
-                }
-              ),
-              v && /* @__PURE__ */ t(ot, { content: /* @__PURE__ */ t(nt, {}) }),
-              h.map((e) => /* @__PURE__ */ t(
-                P,
-                {
-                  name: e.key,
-                  data: e.data,
-                  fill: `var(--color-${e.key})`,
-                  shape: f,
-                  ...Y
-                },
-                e.key
-              ))
-            ]
-          }
-        )
-      }
-    ) });
-  }
-);
-st.displayName = "ScatterChart";
-export {
-  st as ScatterChart
-};
-//# sourceMappingURL=scatter-chart.js.map
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { ChartContainer as t, ChartLegend as n, ChartLegendContent as r, ChartTooltip as i, ChartTooltipContent as a } from "../chart/chart.js";
+import { resolveAnimation as o, resolveAxisDomain as s, resolveRotatedTickAnchor as c, resolveXAxisHeight as l, resolveXAxisTitle as u, resolveYAxisTitle as d } from "../chart/chart-format.js";
+import * as f from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { CartesianGrid as h, Scatter as g, ScatterChart as _, XAxis as v, YAxis as y, ZAxis as b } from "recharts";
+//#region src/components/ui/scatter-chart/scatter-chart.tsx
+var x = f.forwardRef(({ className: f, config: x, palette: S, series: C, xKey: w, yKey: T, zKey: E, zRange: D = [60, 400], shape: O = "circle", xAxisLabel: k, yAxisLabel: A, xUnit: j, yUnit: M, showGrid: N = !0, showTooltip: P = !0, showLegend: ee = !0, showXAxis: F = !0, showYAxis: I = !0, xTickFormatter: L, yTickFormatter: R, xAxisAngle: z, xAxisInterval: B, yAxisTickCount: V, yAxisDomain: H, gridDashed: U, gridHorizontal: W, gridVertical: G, tooltipContent: K, animate: q, animationDuration: J, animationBegin: Y, animationEasing: X, ...Z }, Q) => {
+	let $ = o({
+		animate: q,
+		animationDuration: J,
+		animationBegin: Y,
+		animationEasing: X
+	}), te = u(k, "insideBottom", -8), ne = d(A), re = s(H), ie = l(k, z);
+	return /* @__PURE__ */ p("div", {
+		ref: Q,
+		className: e(f),
+		...Z,
+		children: /* @__PURE__ */ p(t, {
+			config: x,
+			palette: S,
+			className: "size-full [&_.recharts-label]:fill-foreground",
+			children: /* @__PURE__ */ m(_, {
+				margin: {
+					top: 16,
+					right: 16,
+					bottom: 16,
+					left: 16
+				},
+				children: [
+					N && /* @__PURE__ */ p(h, {
+						horizontal: W ?? !0,
+						vertical: G ?? !0,
+						strokeDasharray: U ? "3 3" : void 0
+					}),
+					/* @__PURE__ */ p(v, {
+						type: "number",
+						dataKey: w,
+						name: w,
+						unit: j,
+						hide: !F,
+						tickLine: !1,
+						axisLine: !1,
+						tickMargin: 8,
+						tickFormatter: L,
+						angle: z,
+						interval: B,
+						textAnchor: c(z),
+						height: ie,
+						label: te
+					}),
+					/* @__PURE__ */ p(y, {
+						type: "number",
+						dataKey: T,
+						name: T,
+						unit: M,
+						hide: !I,
+						tickLine: !1,
+						axisLine: !1,
+						tickMargin: 8,
+						tickFormatter: R,
+						tickCount: V,
+						domain: re,
+						width: A ? 72 : void 0,
+						label: ne
+					}),
+					E && /* @__PURE__ */ p(b, {
+						type: "number",
+						dataKey: E,
+						range: D,
+						name: E
+					}),
+					P && /* @__PURE__ */ p(i, {
+						cursor: { strokeDasharray: "3 3" },
+						content: K ?? /* @__PURE__ */ p(a, {})
+					}),
+					ee && /* @__PURE__ */ p(n, { content: /* @__PURE__ */ p(r, {}) }),
+					C.map((e) => /* @__PURE__ */ p(g, {
+						name: e.key,
+						data: e.data,
+						fill: `var(--color-${e.key})`,
+						shape: O,
+						...$
+					}, e.key))
+				]
+			})
+		})
+	});
+});
+x.displayName = "ScatterChart";
+//#endregion
+export { x as ScatterChart };
+
+//# sourceMappingURL=scatter-chart.js.map

package/dist/components/ui/scatter-chart/scatter-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"scatter-chart.js","sources":["../../../../src/components/ui/scatter-chart/scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  CartesianGrid,\n  Scatter,\n  ScatterChart as RechartsScatterChart,\n  XAxis,\n  YAxis,\n  ZAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveAxisDomain,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  type ChartConfig,\n  type ChartPalette,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. Unlike the\n// other chart types, a scatter has no visual \"mode\" to model as a CVA variant —\n// its shape is fixed (x/y points, optionally sized by z) and its expressiveness\n// comes from the data mapping. So there is no `cva` axis here (matches the\n// skill's \"usually none\"); marker `shape` and bubble sizing are plain props.\n// Each series carries its own point array (points aren't columns of a shared\n// row the way bar/line/area series are), so the API takes a `series` list rather\n// than `dataKeys` over one `data` array.\nexport type ScatterMarkerShape =\n  | 'circle'\n  | 'cross'\n  | 'diamond'\n  | 'square'\n  | 'star'\n  | 'triangle'\n  | 'wye';\n\nexport interface ScatterSeries {\n  /** Series key — must match a `config` entry; drives its `--color-<key>` fill and legend label. */\n  key: string;\n  /** This series' points — each row holds at least `xKey` and `yKey` (and `zKey` when used). */\n  data: ReadonlyArray<Record<string, number>>;\n}\n\nexport interface ScatterChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    CartesianChartProps,\n    ChartAnimationProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */\n  series: ScatterSeries[];\n  /**\n   * Per-series map of `label` / `icon` / `tone`, keyed by `series[].key`\n   * (imported from the shared `Chart` primitives). Turned into `--color-<key>`\n   * custom properties. Series take their colour from the container's `palette`;\n   * each entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Numeric field for the horizontal axis. */\n  xKey: string;\n  /** Numeric field for the vertical axis. */\n  yKey: string;\n  /** Unit suffix appended to X-axis tick values (recharts `unit`). */\n  xUnit?: string;\n  /** Optional numeric field mapped to point size (a bubble chart), via recharts `ZAxis`. */\n  zKey?: string;\n  /** Point-size range `[min, max]` the `zKey` maps into. Ignored when `zKey` is unset (points use recharts' default size). */\n  zRange?: [number, number];\n  /** Marker shape for every point. */\n  shape?: ScatterMarkerShape;\n  showLegend?: boolean;\n}\n\nconst ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      series,\n      xKey,\n      yKey,\n      zKey,\n      zRange = [60, 400],\n      shape = 'circle',\n      xAxisLabel,\n      yAxisLabel,\n      xUnit,\n      yUnit,\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      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = resolveXAxisTitle(\n      xAxisLabel,\n      'insideBottom',\n      -8\n    );\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsScatterChart\n            margin={{ top: 16, right: 16, bottom: 16, left: 16 }}\n          >\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? true}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              type=\"number\"\n              dataKey={xKey}\n              name={xKey}\n              unit={xUnit}\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              dataKey={yKey}\n              name={yKey}\n              unit={yUnit}\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {zKey && (\n              <ZAxis type=\"number\" dataKey={zKey} range={zRange} name={zKey} />\n            )}\n            {showTooltip && (\n              <ChartTooltip\n                cursor={{ strokeDasharray: '3 3' }}\n                content={tooltipContent ?? <ChartTooltipContent />}\n              />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {series.map((s) => (\n              <Scatter\n                key={s.key}\n                name={s.key}\n                data={s.data as Record<string, number>[]}\n                fill={`var(--color-${s.key})`}\n                shape={shape}\n                {...animation}\n              />\n            ))}\n          </RechartsScatterChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nScatterChart.displayName = 'ScatterChart';\n\nexport { ScatterChart };\n"],"names":["ScatterChart","React","className","config","palette","series","xKey","yKey","zKey","zRange","shape","xAxisLabel","yAxisLabel","xUnit","yUnit","showGrid","showTooltip","showLegend","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","tooltipContent","animate","animationDuration","animationBegin","animationEasing","props","ref","animation","resolveAnimation","xAxisTitle","resolveXAxisTitle","yAxisTitle","resolveYAxisTitle","yDomain","resolveAxisDomain","xAxisHeight","resolveXAxisHeight","jsx","cn","ChartContainer","jsxs","RechartsScatterChart","CartesianGrid","XAxis","resolveRotatedTickAnchor","YAxis","ZAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","s","Scatter"],"mappings":"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"}
+{"version":3,"file":"scatter-chart.js","names":[],"sources":["../../../../src/components/ui/scatter-chart/scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  CartesianGrid,\n  Scatter,\n  ScatterChart as RechartsScatterChart,\n  XAxis,\n  YAxis,\n  ZAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveAxisDomain,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  type ChartConfig,\n  type ChartPalette,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. Unlike the\n// other chart types, a scatter has no visual \"mode\" to model as a CVA variant —\n// its shape is fixed (x/y points, optionally sized by z) and its expressiveness\n// comes from the data mapping. So there is no `cva` axis here (matches the\n// skill's \"usually none\"); marker `shape` and bubble sizing are plain props.\n// Each series carries its own point array (points aren't columns of a shared\n// row the way bar/line/area series are), so the API takes a `series` list rather\n// than `dataKeys` over one `data` array.\nexport type ScatterMarkerShape =\n  | 'circle'\n  | 'cross'\n  | 'diamond'\n  | 'square'\n  | 'star'\n  | 'triangle'\n  | 'wye';\n\nexport interface ScatterSeries {\n  /** Series key — must match a `config` entry; drives its `--color-<key>` fill and legend label. */\n  key: string;\n  /** This series' points — each row holds at least `xKey` and `yKey` (and `zKey` when used). */\n  data: ReadonlyArray<Record<string, number>>;\n}\n\nexport interface ScatterChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    CartesianChartProps,\n    ChartAnimationProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */\n  series: ScatterSeries[];\n  /**\n   * Per-series map of `label` / `icon` / `tone`, keyed by `series[].key`\n   * (imported from the shared `Chart` primitives). Turned into `--color-<key>`\n   * custom properties. Series take their colour from the container's `palette`;\n   * each entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Numeric field for the horizontal axis. */\n  xKey: string;\n  /** Numeric field for the vertical axis. */\n  yKey: string;\n  /** Unit suffix appended to X-axis tick values (recharts `unit`). */\n  xUnit?: string;\n  /** Optional numeric field mapped to point size (a bubble chart), via recharts `ZAxis`. */\n  zKey?: string;\n  /** Point-size range `[min, max]` the `zKey` maps into. Ignored when `zKey` is unset (points use recharts' default size). */\n  zRange?: [number, number];\n  /** Marker shape for every point. */\n  shape?: ScatterMarkerShape;\n  showLegend?: boolean;\n}\n\nconst ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      series,\n      xKey,\n      yKey,\n      zKey,\n      zRange = [60, 400],\n      shape = 'circle',\n      xAxisLabel,\n      yAxisLabel,\n      xUnit,\n      yUnit,\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      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = resolveXAxisTitle(\n      xAxisLabel,\n      'insideBottom',\n      -8\n    );\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsScatterChart\n            margin={{ top: 16, right: 16, bottom: 16, left: 16 }}\n          >\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? true}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              type=\"number\"\n              dataKey={xKey}\n              name={xKey}\n              unit={xUnit}\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              dataKey={yKey}\n              name={yKey}\n              unit={yUnit}\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {zKey && (\n              <ZAxis type=\"number\" dataKey={zKey} range={zRange} name={zKey} />\n            )}\n            {showTooltip && (\n              <ChartTooltip\n                cursor={{ strokeDasharray: '3 3' }}\n                content={tooltipContent ?? <ChartTooltipContent />}\n              />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {series.map((s) => (\n              <Scatter\n                key={s.key}\n                name={s.key}\n                data={s.data as Record<string, number>[]}\n                fill={`var(--color-${s.key})`}\n                shape={shape}\n                {...animation}\n              />\n            ))}\n          </RechartsScatterChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nScatterChart.displayName = 'ScatterChart';\n\nexport { ScatterChart };\n"],"mappings":";;;;;;;;AAwFA,IAAM,IAAe,EAAM,YAEvB,EACE,cACA,WACA,YACA,WACA,SACA,SACA,SACA,YAAS,CAAC,IAAI,GAAG,GACjB,WAAQ,UACR,eACA,eACA,UACA,UACA,cAAW,IACX,iBAAc,IACd,iBAAa,IACb,eAAY,IACZ,eAAY,IACZ,mBACA,mBACA,eACA,kBACA,mBACA,gBACA,eACA,mBACA,iBACA,mBACA,YACA,sBACA,mBACA,oBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAY,EAAiB;EACjC;EACA;EACA;EACA;CACF,CAAC,GAIK,KAAa,EACjB,GACA,gBACA,EACF,GACM,KAAa,EAAkB,CAAU,GAEzC,KAAU,EAAkB,CAAW,GAEvC,KAAc,EAAmB,GAAY,CAAU;CAE7D,OACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,CAAS;EAAG,GAAI;EAC3C,UAAA,kBAAC,GAAD;GACU;GACC;GACT,WAAU;GAEV,UAAA,kBAAC,GAAD;IACE,QAAQ;KAAE,KAAK;KAAI,OAAO;KAAI,QAAQ;KAAI,MAAM;IAAG;IADrD,UAAA;KAGG,KACC,kBAAC,GAAD;MACE,YAAY,KAAkB;MAC9B,UAAU,KAAgB;MAC1B,iBAAiB,IAAa,QAAQ,KAAA;KACvC,CAAA;KAEH,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,MAAM;MACN,MAAM;MACN,MAAM,CAAC;MACP,UAAU;MACV,UAAU;MACV,YAAY;MACZ,eAAe;MACf,OAAO;MACP,UAAU;MACV,YAAY,EAAyB,CAAU;MAC/C,QAAQ;MACR,OAAO;KACR,CAAA;KACD,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,MAAM;MACN,MAAM;MACN,MAAM,CAAC;MACP,UAAU;MACV,UAAU;MACV,YAAY;MACZ,eAAe;MACf,WAAW;MACX,QAAQ;MACR,OAAO,IAAa,KAAK,KAAA;MACzB,OAAO;KACR,CAAA;KACA,KACC,kBAAC,GAAD;MAAO,MAAK;MAAS,SAAS;MAAM,OAAO;MAAQ,MAAM;KAAO,CAAA;KAEjE,KACC,kBAAC,GAAD;MACE,QAAQ,EAAE,iBAAiB,MAAM;MACjC,SAAS,KAAkB,kBAAC,GAAD,CAAsB,CAAA;KAClD,CAAA;KAEF,MAAc,kBAAC,GAAD,EAAa,SAAS,kBAAC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAC7D,EAAO,KAAK,MACX,kBAAC,GAAD;MAEE,MAAM,EAAE;MACR,MAAM,EAAE;MACR,MAAM,eAAe,EAAE,IAAI;MACpB;MACP,GAAI;KACL,GANM,EAAE,GAMR,CACF;IACmB;;EACR,CAAA;CACb,CAAA;AAET,CACF;AACA,EAAa,cAAc"}

package/dist/components/ui/scroll-area/scroll-area.js

@@ -1,77 +1,43 @@
-import { jsxs as u, jsx as a } from "react/jsx-runtime";
-import * as n from "react";
-import { ScrollArea as r } from "@base-ui/react/scroll-area";
-import { cn as s } from "../../../lib/utils.js";
-const i = n.forwardRef(
-  ({ className: c, orientation: l = "vertical", ...o }, t) => /* @__PURE__ */ a(
-    r.Scrollbar,
-    {
-      ref: t,
-      orientation: l,
-      "data-slot": "scroll-area-scrollbar",
-      className: s(
-        // Above anything the scrolled content stacks. A scrollbar that content
-        // can paint over is not a scrollbar — sticky table headers stack to z-50,
-        // so the bar must sit above them inside the isolated root.
-        "z-[60]",
-        "flex touch-none select-none opacity-0 transition-opacity duration-150",
-        // Revealed on hover/scroll; hidden at rest.
-        "data-[hovering]:opacity-100 data-[scrolling]:opacity-100",
-        l === "vertical" && "h-full w-2.5 p-px",
-        l === "horizontal" && "h-2.5 w-full flex-col p-px",
-        c
-      ),
-      ...o,
-      children: /* @__PURE__ */ a(
-        r.Thumb,
-        {
-          "data-slot": "scroll-area-thumb",
-          className: "relative flex-1 rounded-full bg-[var(--ui-border-on-surface-border)] transition-colors hover:bg-[var(--ui-border-on-surface-border-active)]"
-        }
-      )
-    }
-  )
-);
-i.displayName = "ScrollBar";
-const m = n.forwardRef(
-  ({
-    className: c,
-    children: l,
-    orientation: o = "vertical",
-    viewportRef: t,
-    viewportProps: e,
-    ...d
-  }, f) => /* @__PURE__ */ u(
-    r.Root,
-    {
-      ref: f,
-      "data-slot": "scroll-area",
-      className: s("relative isolate overflow-hidden", c),
-      ...d,
-      children: [
-        /* @__PURE__ */ a(
-          r.Viewport,
-          {
-            ref: t,
-            "data-slot": "scroll-area-viewport",
-            ...e,
-            className: s(
-              "size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)]",
-              e == null ? void 0 : e.className
-            ),
-            children: /* @__PURE__ */ a(r.Content, { "data-slot": "scroll-area-content", children: l })
-          }
-        ),
-        o !== "horizontal" && /* @__PURE__ */ a(i, { orientation: "vertical" }),
-        o !== "vertical" && /* @__PURE__ */ a(i, { orientation: "horizontal" }),
-        o === "both" && /* @__PURE__ */ a(r.Corner, { "data-slot": "scroll-area-corner" })
-      ]
-    }
-  )
-);
-m.displayName = "ScrollArea";
-export {
-  m as ScrollArea,
-  i as ScrollBar
-};
-//# sourceMappingURL=scroll-area.js.map
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { ScrollArea as i } from "@base-ui/react/scroll-area";
+//#region src/components/ui/scroll-area/scroll-area.tsx
+var a = t.forwardRef(({ className: t, orientation: r = "vertical", ...a }, o) => /* @__PURE__ */ n(i.Scrollbar, {
+	ref: o,
+	orientation: r,
+	"data-slot": "scroll-area-scrollbar",
+	className: e("z-[60]", "flex touch-none select-none opacity-0 transition-opacity duration-150", "data-[hovering]:opacity-100 data-[scrolling]:opacity-100", r === "vertical" && "h-full w-2.5 p-px", r === "horizontal" && "h-2.5 w-full flex-col p-px", t),
+	...a,
+	children: /* @__PURE__ */ n(i.Thumb, {
+		"data-slot": "scroll-area-thumb",
+		className: "relative flex-1 rounded-full bg-[var(--ui-border-on-surface-border)] transition-colors hover:bg-[var(--ui-border-on-surface-border-active)]"
+	})
+}));
+a.displayName = "ScrollBar";
+var o = t.forwardRef(({ className: t, children: o, orientation: s = "vertical", viewportRef: c, viewportProps: l, ...u }, d) => /* @__PURE__ */ r(i.Root, {
+	ref: d,
+	"data-slot": "scroll-area",
+	className: e("relative isolate overflow-hidden", t),
+	...u,
+	children: [
+		/* @__PURE__ */ n(i.Viewport, {
+			ref: c,
+			"data-slot": "scroll-area-viewport",
+			...l,
+			className: e("size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)]", l?.className),
+			children: /* @__PURE__ */ n(i.Content, {
+				"data-slot": "scroll-area-content",
+				children: o
+			})
+		}),
+		s !== "horizontal" && /* @__PURE__ */ n(a, { orientation: "vertical" }),
+		s !== "vertical" && /* @__PURE__ */ n(a, { orientation: "horizontal" }),
+		s === "both" && /* @__PURE__ */ n(i.Corner, { "data-slot": "scroll-area-corner" })
+	]
+}));
+o.displayName = "ScrollArea";
+//#endregion
+export { o as ScrollArea, a as ScrollBar };
+
+//# sourceMappingURL=scroll-area.js.map

package/dist/components/ui/scroll-area/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","sources":["../../../../src/components/ui/scroll-area/scroll-area.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\n\nimport { cn } from '@/lib/utils';\n\n// A scrollable region with a custom **overlay** scrollbar built on Base UI's\n// Scroll Area. Unlike a native `overflow: auto` element, the scrollbar floats\n// over the content and reserves **zero** layout space, so full-bleed content\n// (e.g. edge-to-edge selected rows in a sidebar) is never cropped by a gutter —\n// on every OS and browser, not just where the platform provides overlay bars.\n// The bar is revealed on hover/scroll and hidden at rest.\n\nexport type ScrollBarProps = React.ComponentPropsWithoutRef<\n  typeof ScrollAreaPrimitive.Scrollbar\n>;\n\nconst ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(\n  ({ className, orientation = 'vertical', ...props }, ref) => (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      orientation={orientation}\n      data-slot=\"scroll-area-scrollbar\"\n      className={cn(\n        // Above anything the scrolled content stacks. A scrollbar that content\n        // can paint over is not a scrollbar — sticky table headers stack to z-50,\n        // so the bar must sit above them inside the isolated root.\n        'z-[60]',\n        'flex touch-none select-none opacity-0 transition-opacity duration-150',\n        // Revealed on hover/scroll; hidden at rest.\n        'data-[hovering]:opacity-100 data-[scrolling]:opacity-100',\n        orientation === 'vertical' && 'h-full w-2.5 p-px',\n        orientation === 'horizontal' && 'h-2.5 w-full flex-col p-px',\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-[var(--ui-border-on-surface-border)] transition-colors hover:bg-[var(--ui-border-on-surface-border-active)]\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n);\nScrollBar.displayName = 'ScrollBar';\n\nexport interface ScrollAreaProps\n  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {\n  /** Which scrollbar(s) to render. @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal' | 'both';\n  /**\n   * Ref to the **viewport** — the element that actually scrolls.\n   *\n   * `ref` reaches the root, which is `overflow: hidden` and never scrolls, so\n   * it reports `scrollTop: 0` and `scrollHeight === clientHeight` forever.\n   * Anything that measures, observes, or programmatically scrolls the region\n   * needs this one instead: a virtualizer's scroll element, an infinite-scroll\n   * observer, a scroll-to-item call.\n   */\n  viewportRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Extra props for the viewport — a scroll handler, a tab index, or\n   * `data-*` attributes that must sit on the element that scrolls rather than\n   * on the wrapper around it.\n   *\n   * The `data-*` index signature is deliberate: JSX grants intrinsic elements\n   * an arbitrary-`data-*` escape hatch, but a props object typed as\n   * `HTMLAttributes` does not get it — so without this, the main thing this\n   * prop exists for (marking the scrolling element for an observer) would not\n   * type-check.\n   */\n  viewportProps?: React.HTMLAttributes<HTMLDivElement> & {\n    readonly [attribute: `data-${string}`]: unknown;\n  };\n}\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      className,\n      children,\n      orientation = 'vertical',\n      viewportRef,\n      viewportProps,\n      ...props\n    },\n    ref,\n  ) => (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      data-slot=\"scroll-area\"\n      // `isolate` contains the scroll area's stacking order. Without it the\n      // root is `position: relative` with no z-index — not a stacking context\n      // — so a z-index set on scrolled content competes against everything in\n      // the document, and the scrollbar's own z-index would too. Isolating\n      // keeps both local. It is `isolation`, deliberately, not\n      // `contain`/`transform`: those would create a containing block and break\n      // `position: sticky` inside the viewport.\n      className={cn('relative isolate overflow-hidden', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        ref={viewportRef}\n        data-slot=\"scroll-area-viewport\"\n        {...viewportProps}\n        className={cn(\n          'size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)]',\n          viewportProps?.className,\n        )}\n      >\n        <ScrollAreaPrimitive.Content data-slot=\"scroll-area-content\">\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      {orientation !== 'horizontal' && <ScrollBar orientation=\"vertical\" />}\n      {orientation !== 'vertical' && <ScrollBar orientation=\"horizontal\" />}\n      {orientation === 'both' && (\n        <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n      )}\n    </ScrollAreaPrimitive.Root>\n  ),\n);\nScrollArea.displayName = 'ScrollArea';\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollBar","React","className","orientation","props","ref","jsx","ScrollAreaPrimitive","cn","ScrollArea","children","viewportRef","viewportProps","jsxs"],"mappings":";;;;AAgBA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,aAAAC,IAAc,YAAY,GAAGC,EAAA,GAASC,MAClD,gBAAAC;AAAA,IAACC,EAAoB;AAAA,IAApB;AAAA,MACC,KAAAF;AAAA,MACA,aAAAF;AAAA,MACA,aAAU;AAAA,MACV,WAAWK;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACAL,MAAgB,cAAc;AAAA,QAC9BA,MAAgB,gBAAgB;AAAA,QAChCD;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAoB;AAAA,QAApB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN;AACAP,EAAU,cAAc;AAgCxB,MAAMS,IAAaR,EAAM;AAAA,EACvB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,UAAAQ;AAAA,IACA,aAAAP,IAAc;AAAA,IACd,aAAAQ;AAAA,IACA,eAAAC;AAAA,IACA,GAAGR;AAAA,EAAA,GAELC,MAEA,gBAAAQ;AAAA,IAACN,EAAoB;AAAA,IAApB;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MAQV,WAAWG,EAAG,oCAAoCN,CAAS;AAAA,MAC1D,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACC,EAAoB;AAAA,UAApB;AAAA,YACC,KAAKI;AAAA,YACL,aAAU;AAAA,YACT,GAAGC;AAAA,YACJ,WAAWJ;AAAA,cACT;AAAA,cACAI,KAAA,gBAAAA,EAAe;AAAA,YAAA;AAAA,YAGjB,4BAACL,EAAoB,SAApB,EAA4B,aAAU,uBACpC,UAAAG,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDP,MAAgB,gBAAgB,gBAAAG,EAACN,GAAA,EAAU,aAAY,YAAW;AAAA,QAClEG,MAAgB,cAAc,gBAAAG,EAACN,GAAA,EAAU,aAAY,cAAa;AAAA,QAClEG,MAAgB,UACf,gBAAAG,EAACC,EAAoB,QAApB,EAA2B,aAAU,qBAAA,CAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAInE;AACAE,EAAW,cAAc;"}
+{"version":3,"file":"scroll-area.js","names":[],"sources":["../../../../src/components/ui/scroll-area/scroll-area.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\n\nimport { cn } from '@/lib/utils';\n\n// A scrollable region with a custom **overlay** scrollbar built on Base UI's\n// Scroll Area. Unlike a native `overflow: auto` element, the scrollbar floats\n// over the content and reserves **zero** layout space, so full-bleed content\n// (e.g. edge-to-edge selected rows in a sidebar) is never cropped by a gutter —\n// on every OS and browser, not just where the platform provides overlay bars.\n// The bar is revealed on hover/scroll and hidden at rest.\n\nexport type ScrollBarProps = React.ComponentPropsWithoutRef<\n  typeof ScrollAreaPrimitive.Scrollbar\n>;\n\nconst ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(\n  ({ className, orientation = 'vertical', ...props }, ref) => (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      orientation={orientation}\n      data-slot=\"scroll-area-scrollbar\"\n      className={cn(\n        // Above anything the scrolled content stacks. A scrollbar that content\n        // can paint over is not a scrollbar — sticky table headers stack to z-50,\n        // so the bar must sit above them inside the isolated root.\n        'z-[60]',\n        'flex touch-none select-none opacity-0 transition-opacity duration-150',\n        // Revealed on hover/scroll; hidden at rest.\n        'data-[hovering]:opacity-100 data-[scrolling]:opacity-100',\n        orientation === 'vertical' && 'h-full w-2.5 p-px',\n        orientation === 'horizontal' && 'h-2.5 w-full flex-col p-px',\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-[var(--ui-border-on-surface-border)] transition-colors hover:bg-[var(--ui-border-on-surface-border-active)]\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n);\nScrollBar.displayName = 'ScrollBar';\n\nexport interface ScrollAreaProps\n  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {\n  /** Which scrollbar(s) to render. @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal' | 'both';\n  /**\n   * Ref to the **viewport** — the element that actually scrolls.\n   *\n   * `ref` reaches the root, which is `overflow: hidden` and never scrolls, so\n   * it reports `scrollTop: 0` and `scrollHeight === clientHeight` forever.\n   * Anything that measures, observes, or programmatically scrolls the region\n   * needs this one instead: a virtualizer's scroll element, an infinite-scroll\n   * observer, a scroll-to-item call.\n   */\n  viewportRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Extra props for the viewport — a scroll handler, a tab index, or\n   * `data-*` attributes that must sit on the element that scrolls rather than\n   * on the wrapper around it.\n   *\n   * The `data-*` index signature is deliberate: JSX grants intrinsic elements\n   * an arbitrary-`data-*` escape hatch, but a props object typed as\n   * `HTMLAttributes` does not get it — so without this, the main thing this\n   * prop exists for (marking the scrolling element for an observer) would not\n   * type-check.\n   */\n  viewportProps?: React.HTMLAttributes<HTMLDivElement> & {\n    readonly [attribute: `data-${string}`]: unknown;\n  };\n}\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      className,\n      children,\n      orientation = 'vertical',\n      viewportRef,\n      viewportProps,\n      ...props\n    },\n    ref,\n  ) => (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      data-slot=\"scroll-area\"\n      // `isolate` contains the scroll area's stacking order. Without it the\n      // root is `position: relative` with no z-index — not a stacking context\n      // — so a z-index set on scrolled content competes against everything in\n      // the document, and the scrollbar's own z-index would too. Isolating\n      // keeps both local. It is `isolation`, deliberately, not\n      // `contain`/`transform`: those would create a containing block and break\n      // `position: sticky` inside the viewport.\n      className={cn('relative isolate overflow-hidden', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        ref={viewportRef}\n        data-slot=\"scroll-area-viewport\"\n        {...viewportProps}\n        className={cn(\n          'size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)]',\n          viewportProps?.className,\n        )}\n      >\n        <ScrollAreaPrimitive.Content data-slot=\"scroll-area-content\">\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      {orientation !== 'horizontal' && <ScrollBar orientation=\"vertical\" />}\n      {orientation !== 'vertical' && <ScrollBar orientation=\"horizontal\" />}\n      {orientation === 'both' && (\n        <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n      )}\n    </ScrollAreaPrimitive.Root>\n  ),\n);\nScrollArea.displayName = 'ScrollArea';\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":";;;;;AAgBA,IAAM,IAAY,EAAM,YACrB,EAAE,cAAW,iBAAc,YAAY,GAAG,KAAS,MAClD,kBAAC,EAAoB,WAArB;CACO;CACQ;CACb,aAAU;CACV,WAAW,EAIT,UACA,yEAEA,4DACA,MAAgB,cAAc,qBAC9B,MAAgB,gBAAgB,8BAChC,CACF;CACA,GAAI;CAEJ,UAAA,kBAAC,EAAoB,OAArB;EACE,aAAU;EACV,WAAU;CACX,CAAA;AAC4B,CAAA,CAEnC;AACA,EAAU,cAAc;AAgCxB,IAAM,IAAa,EAAM,YAErB,EACE,cACA,aACA,iBAAc,YACd,gBACA,kBACA,GAAG,KAEL,MAEA,kBAAC,EAAoB,MAArB;CACO;CACL,aAAU;CAQV,WAAW,EAAG,oCAAoC,CAAS;CAC3D,GAAI;CAXN,UAAA;EAaE,kBAAC,EAAoB,UAArB;GACE,KAAK;GACL,aAAU;GACV,GAAI;GACJ,WAAW,EACT,4GACA,GAAe,SACjB;GAEA,UAAA,kBAAC,EAAoB,SAArB;IAA6B,aAAU;IACpC;GAC0B,CAAA;EACD,CAAA;EAC7B,MAAgB,gBAAgB,kBAAC,GAAD,EAAW,aAAY,WAAY,CAAA;EACnE,MAAgB,cAAc,kBAAC,GAAD,EAAW,aAAY,aAAc,CAAA;EACnE,MAAgB,UACf,kBAAC,EAAoB,QAArB,EAA4B,aAAU,qBAAsB,CAAA;CAEtC;AAE9B,CAAA,CAAA;AACA,EAAW,cAAc"}

package/dist/components/ui/search/search.js

@@ -1,93 +1,59 @@
-import { jsxs as w, jsx as o } from "react/jsx-runtime";
+import { cn as e } from "../../../lib/utils.js";
 import * as t from "react";
-import { MagnifierIcon as S, TimesIcon as k } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as N } from "../../../lib/utils.js";
-const j = t.forwardRef(
-  ({
-    className: p,
-    type: v = "search",
-    disabled: n,
-    onClear: s,
-    onChange: c,
-    value: r,
-    defaultValue: u,
-    ...g
-  }, i) => {
-    const d = t.useRef(null), [f, l] = t.useState(
-      () => String(r ?? u ?? "").length > 0
-    );
-    t.useEffect(() => {
-      r !== void 0 && l(String(r).length > 0);
-    }, [r]);
-    const x = t.useCallback(
-      (e) => {
-        d.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
-      },
-      [i]
-    ), m = (e) => {
-      l(e.target.value.length > 0), c == null || c(e);
-    }, y = () => {
-      var b, h;
-      const e = d.current;
-      if (!e) return;
-      let a;
-      try {
-        a = (h = Object.getOwnPropertyDescriptor(
-          (b = globalThis.HTMLInputElement) == null ? void 0 : b.prototype,
-          "value"
-        )) == null ? void 0 : h.set;
-      } catch {
-        a = void 0;
-      }
-      a ? a.call(e, "") : e.value = "", e.dispatchEvent(new Event("input", { bubbles: !0 })), l(!1), e.focus(), s == null || s();
-    };
-    return /* @__PURE__ */ w(
-      "div",
-      {
-        "data-disabled": n || void 0,
-        className: N(
-          "group inline-flex h-[var(--ui-input-search-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-search-box-gap)] rounded-[var(--ui-input-search-box-border-radius)] border bg-[var(--ui-input-search-box-color-idle)] border-[var(--ui-input-search-border-color-idle)] px-[var(--ui-input-search-box-padding-x)] text-sm leading-6 text-[var(--ui-input-search-value-color-idle)] transition-colors not-data-[disabled]:hover:bg-[var(--ui-input-search-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-search-border-color-hover)] focus-within:border-[var(--ui-input-search-border-color-hover)] focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-search-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-search-box-color-disabled)] data-[disabled]:text-[var(--ui-input-search-value-color-disabled)]",
-          p
-        ),
-        children: [
-          /* @__PURE__ */ o(
-            S,
-            {
-              size: 16,
-              className: "shrink-0 text-[var(--ui-input-search-icon-search-color-idle)] group-data-[disabled]:text-[var(--ui-input-search-icon-search-color-disabled)]"
-            }
-          ),
-          /* @__PURE__ */ o(
-            "input",
-            {
-              ref: x,
-              type: v,
-              disabled: n,
-              value: r,
-              defaultValue: u,
-              onChange: m,
-              "aria-label": "Search",
-              className: "h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-inherit outline-none placeholder:text-[var(--ui-input-search-placeholder-color-idle)] disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none",
-              ...g
-            }
-          ),
-          f && !n && /* @__PURE__ */ o(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Clear search",
-              onClick: y,
-              className: "inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm p-0.5 text-[var(--ui-button-icon-global-icon-color-idle)] outline-none hover:bg-[var(--ui-button-icon-global-container-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&>svg]:size-4",
-              children: /* @__PURE__ */ o(k, { size: 16 })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-j.displayName = "SearchBox";
-export {
-  j as SearchBox
-};
-//# sourceMappingURL=search.js.map
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { MagnifierIcon as i, TimesIcon as a } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/search/search.tsx
+var o = t.forwardRef(({ className: o, type: s = "search", disabled: c, onClear: l, onChange: u, value: d, defaultValue: f, ...p }, m) => {
+	let h = t.useRef(null), [g, _] = t.useState(() => String(d ?? f ?? "").length > 0);
+	t.useEffect(() => {
+		d !== void 0 && _(String(d).length > 0);
+	}, [d]);
+	let v = t.useCallback((e) => {
+		h.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
+	}, [m]), y = (e) => {
+		_(e.target.value.length > 0), u?.(e);
+	}, b = () => {
+		let e = h.current;
+		if (!e) return;
+		let t;
+		try {
+			t = Object.getOwnPropertyDescriptor(globalThis.HTMLInputElement?.prototype, "value")?.set;
+		} catch {
+			t = void 0;
+		}
+		t ? t.call(e, "") : e.value = "", e.dispatchEvent(new Event("input", { bubbles: !0 })), _(!1), e.focus(), l?.();
+	};
+	return /* @__PURE__ */ r("div", {
+		"data-disabled": c || void 0,
+		className: e("group inline-flex h-[var(--ui-input-search-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-search-box-gap)] rounded-[var(--ui-input-search-box-border-radius)] border bg-[var(--ui-input-search-box-color-idle)] border-[var(--ui-input-search-border-color-idle)] px-[var(--ui-input-search-box-padding-x)] text-sm leading-6 text-[var(--ui-input-search-value-color-idle)] transition-colors not-data-[disabled]:hover:bg-[var(--ui-input-search-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-search-border-color-hover)] focus-within:border-[var(--ui-input-search-border-color-hover)] focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-search-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-search-box-color-disabled)] data-[disabled]:text-[var(--ui-input-search-value-color-disabled)]", o),
+		children: [
+			/* @__PURE__ */ n(i, {
+				size: 16,
+				className: "shrink-0 text-[var(--ui-input-search-icon-search-color-idle)] group-data-[disabled]:text-[var(--ui-input-search-icon-search-color-disabled)]"
+			}),
+			/* @__PURE__ */ n("input", {
+				ref: v,
+				type: s,
+				disabled: c,
+				value: d,
+				defaultValue: f,
+				onChange: y,
+				"aria-label": "Search",
+				className: "h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-inherit outline-none placeholder:text-[var(--ui-input-search-placeholder-color-idle)] disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none",
+				...p
+			}),
+			g && !c && /* @__PURE__ */ n("button", {
+				type: "button",
+				"aria-label": "Clear search",
+				onClick: b,
+				className: "inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm p-0.5 text-[var(--ui-button-icon-global-icon-color-idle)] outline-none hover:bg-[var(--ui-button-icon-global-container-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&>svg]:size-4",
+				children: /* @__PURE__ */ n(a, { size: 16 })
+			})
+		]
+	});
+});
+o.displayName = "SearchBox";
+//#endregion
+export { o as SearchBox };
+
+//# sourceMappingURL=search.js.map