@acronis-platform/ui-react 4.0.0 → 5.0.0

package/dist/components/ui/histogram/histogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"histogram.js","sources":["../../../../src/components/ui/histogram/histogram.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\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 histogram bins a set of continuous samples into equal-width ranges and plots\n// the frequency of each as contiguous bars — distinct from BarChart, whose bars\n// are pre-categorized. The binning is the component's job (a pure helper), so the\n// consumer passes raw `values`, not pre-aggregated rows. Built on the shared\n// `Chart` primitives; no new tokens (the single series' color is caller-supplied\n// via `config`, same `--color-<key>` mechanism as the other chart types).\n\nexport interface HistogramBin {\n  /** Lower bound of the bin (inclusive). */\n  x0: number;\n  /** Upper bound of the bin (exclusive, except the last bin which is inclusive). */\n  x1: number;\n  /** Human-readable range label, e.g. `\"0–10\"`. */\n  label: string;\n  /** How many samples fell in the bin. */\n  count: number;\n}\n\nconst roundEdge = (n: number) => Number(n.toFixed(2));\n\n/**\n * Split `values` into `binCount` equal-width bins and count the samples in each.\n * The range is `domain` if given, else the data's [min, max]; values outside the\n * domain are dropped, and the max value lands in the last (inclusive) bin.\n * Returns [] when there's nothing to bin. Exported for unit tests; not part of\n * the package's public API.\n */\nexport function computeHistogramBins(\n  values: ReadonlyArray<number>,\n  binCount: number,\n  domain?: [number, number]\n): HistogramBin[] {\n  const nums = values.filter(\n    (v): v is number => typeof v === 'number' && Number.isFinite(v)\n  );\n  if (nums.length === 0 || binCount < 1) return [];\n\n  const [d0, d1] = domain ?? [Math.min(...nums), Math.max(...nums)];\n  // Normalize an inverted domain ([max, min]) so binning stays robust.\n  const min = Math.min(d0, d1);\n  const hi = Math.max(d0, d1);\n  // A zero-width range (all values equal, or a degenerate domain) can't be\n  // divided — widen it by 1 so the single bin has extent.\n  const max = min === hi ? min + 1 : hi;\n  const width = (max - min) / binCount;\n\n  const bins: HistogramBin[] = Array.from({ length: binCount }, (_, i) => {\n    const x0 = min + i * width;\n    const x1 = i === binCount - 1 ? max : min + (i + 1) * width;\n    return { x0, x1, label: `${roundEdge(x0)}–${roundEdge(x1)}`, count: 0 };\n  });\n\n  for (const v of nums) {\n    if (v < min || v > max) continue;\n    let idx = Math.floor((v - min) / width);\n    if (idx >= binCount) idx = binCount - 1; // the max value\n    bins[idx].count += 1;\n  }\n  return bins;\n}\n\nexport interface HistogramProps\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  /** Raw continuous samples to bin (non-finite values are ignored). */\n  values: ReadonlyArray<number>;\n  /**\n   * Single-series map of `label` / `icon` / `tone`, keyed by `dataKey` (imported\n   * from the shared `Chart` primitives). Series take their colour from the\n   * container's `palette`; each entry maps a key to a `label` and an optional\n   * `tone`.\n   */\n  config: ChartConfig;\n  /** `config` key that colors + labels the frequency bars. */\n  dataKey?: string;\n  /** Number of equal-width bins. */\n  binCount?: number;\n  /** Fix the binning range instead of deriving it from the data's min/max. */\n  domain?: [number, number];\n  /** Corner radius on the top of each bar. */\n  barRadius?: number;\n}\n\nconst Histogram = React.forwardRef<HTMLDivElement, HistogramProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      values,\n      dataKey = 'count',\n      binCount = 10,\n      domain,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      barRadius = 0,\n      showGrid = true,\n      showTooltip = 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    const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    const bins = React.useMemo(\n      () => computeHistogramBins(values, binCount, domain),\n      [values, binCount, domain]\n    );\n    // Bars carry the bin `label` as the category and `count` under `dataKey`, so\n    // the tooltip resolves the frequency from `config[dataKey]`.\n    const data = bins.map((bin) => ({ label: bin.label, [dataKey]: bin.count }));\n\n    return (\n      <div\n        ref={ref}\n        className={cn(className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsBarChart data={data} barCategoryGap={0}>\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              dataKey=\"label\"\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\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              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              allowDecimals={false}\n              unit={yUnit}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            <Bar\n              dataKey={dataKey}\n              fill={`var(--color-${dataKey})`}\n              // A hairline in the surface color separates the contiguous bars so\n              // they don't blend into one mass (same trick as the Treemap cells).\n              stroke=\"var(--ui-background-surface-primary)\"\n              strokeWidth={1}\n              radius={barRadius > 0 ? [barRadius, barRadius, 0, 0] : undefined}\n              {...animation}\n            />\n          </RechartsBarChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nHistogram.displayName = 'Histogram';\n\nexport { Histogram };\n"],"names":["roundEdge","n","computeHistogramBins","values","binCount","domain","nums","v","d0","d1","min","hi","max","width","bins","_","i","x0","x1","idx","Histogram","React","className","config","palette","dataKey","xAxisLabel","yAxisLabel","yUnit","barRadius","showGrid","showTooltip","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","data","bin","jsx","cn","ChartContainer","jsxs","RechartsBarChart","CartesianGrid","XAxis","resolveRotatedTickAnchor","YAxis","ChartTooltip","ChartTooltipContent","Bar"],"mappings":"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"}
+{"version":3,"file":"histogram.js","names":[],"sources":["../../../../src/components/ui/histogram/histogram.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\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 histogram bins a set of continuous samples into equal-width ranges and plots\n// the frequency of each as contiguous bars — distinct from BarChart, whose bars\n// are pre-categorized. The binning is the component's job (a pure helper), so the\n// consumer passes raw `values`, not pre-aggregated rows. Built on the shared\n// `Chart` primitives; no new tokens (the single series' color is caller-supplied\n// via `config`, same `--color-<key>` mechanism as the other chart types).\n\nexport interface HistogramBin {\n  /** Lower bound of the bin (inclusive). */\n  x0: number;\n  /** Upper bound of the bin (exclusive, except the last bin which is inclusive). */\n  x1: number;\n  /** Human-readable range label, e.g. `\"0–10\"`. */\n  label: string;\n  /** How many samples fell in the bin. */\n  count: number;\n}\n\nconst roundEdge = (n: number) => Number(n.toFixed(2));\n\n/**\n * Split `values` into `binCount` equal-width bins and count the samples in each.\n * The range is `domain` if given, else the data's [min, max]; values outside the\n * domain are dropped, and the max value lands in the last (inclusive) bin.\n * Returns [] when there's nothing to bin. Exported for unit tests; not part of\n * the package's public API.\n */\nexport function computeHistogramBins(\n  values: ReadonlyArray<number>,\n  binCount: number,\n  domain?: [number, number]\n): HistogramBin[] {\n  const nums = values.filter(\n    (v): v is number => typeof v === 'number' && Number.isFinite(v)\n  );\n  if (nums.length === 0 || binCount < 1) return [];\n\n  const [d0, d1] = domain ?? [Math.min(...nums), Math.max(...nums)];\n  // Normalize an inverted domain ([max, min]) so binning stays robust.\n  const min = Math.min(d0, d1);\n  const hi = Math.max(d0, d1);\n  // A zero-width range (all values equal, or a degenerate domain) can't be\n  // divided — widen it by 1 so the single bin has extent.\n  const max = min === hi ? min + 1 : hi;\n  const width = (max - min) / binCount;\n\n  const bins: HistogramBin[] = Array.from({ length: binCount }, (_, i) => {\n    const x0 = min + i * width;\n    const x1 = i === binCount - 1 ? max : min + (i + 1) * width;\n    return { x0, x1, label: `${roundEdge(x0)}–${roundEdge(x1)}`, count: 0 };\n  });\n\n  for (const v of nums) {\n    if (v < min || v > max) continue;\n    let idx = Math.floor((v - min) / width);\n    if (idx >= binCount) idx = binCount - 1; // the max value\n    bins[idx].count += 1;\n  }\n  return bins;\n}\n\nexport interface HistogramProps\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  /** Raw continuous samples to bin (non-finite values are ignored). */\n  values: ReadonlyArray<number>;\n  /**\n   * Single-series map of `label` / `icon` / `tone`, keyed by `dataKey` (imported\n   * from the shared `Chart` primitives). Series take their colour from the\n   * container's `palette`; each entry maps a key to a `label` and an optional\n   * `tone`.\n   */\n  config: ChartConfig;\n  /** `config` key that colors + labels the frequency bars. */\n  dataKey?: string;\n  /** Number of equal-width bins. */\n  binCount?: number;\n  /** Fix the binning range instead of deriving it from the data's min/max. */\n  domain?: [number, number];\n  /** Corner radius on the top of each bar. */\n  barRadius?: number;\n}\n\nconst Histogram = React.forwardRef<HTMLDivElement, HistogramProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      values,\n      dataKey = 'count',\n      binCount = 10,\n      domain,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      barRadius = 0,\n      showGrid = true,\n      showTooltip = 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    const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    const bins = React.useMemo(\n      () => computeHistogramBins(values, binCount, domain),\n      [values, binCount, domain]\n    );\n    // Bars carry the bin `label` as the category and `count` under `dataKey`, so\n    // the tooltip resolves the frequency from `config[dataKey]`.\n    const data = bins.map((bin) => ({ label: bin.label, [dataKey]: bin.count }));\n\n    return (\n      <div\n        ref={ref}\n        className={cn(className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsBarChart data={data} barCategoryGap={0}>\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              dataKey=\"label\"\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\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              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              allowDecimals={false}\n              unit={yUnit}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            <Bar\n              dataKey={dataKey}\n              fill={`var(--color-${dataKey})`}\n              // A hairline in the surface color separates the contiguous bars so\n              // they don't blend into one mass (same trick as the Treemap cells).\n              stroke=\"var(--ui-background-surface-primary)\"\n              strokeWidth={1}\n              radius={barRadius > 0 ? [barRadius, barRadius, 0, 0] : undefined}\n              {...animation}\n            />\n          </RechartsBarChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nHistogram.displayName = 'Histogram';\n\nexport { Histogram };\n"],"mappings":"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"}

package/dist/components/ui/input/input.js

@@ -1,22 +1,15 @@
-import { jsx as l } from "react/jsx-runtime";
+import { cn as e } from "../../../lib/utils.js";
 import * as t from "react";
-import { cn as a } from "../../../lib/utils.js";
-const d = t.forwardRef(
-  ({ className: r, type: o = "text", ...i }, e) => /* @__PURE__ */ l(
-    "input",
-    {
-      ref: e,
-      type: o,
-      className: a(
-        "h-[var(--ui-input-text-global-box-height)] w-full min-w-0 rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] px-[var(--ui-input-text-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-global-box-color-hover)] not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-normal-box-border-color-hover)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-text-global-box-color-disabled)] disabled:text-[var(--ui-input-text-global-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-global-placeholder-color-disabled)]",
-        r
-      ),
-      ...i
-    }
-  )
-);
-d.displayName = "InputBox";
-export {
-  d as InputBox
-};
-//# sourceMappingURL=input.js.map
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/ui/input/input.tsx
+var r = t.forwardRef(({ className: t, type: r = "text", ...i }, a) => /* @__PURE__ */ n("input", {
+	ref: a,
+	type: r,
+	className: e("h-[var(--ui-input-text-global-box-height)] w-full min-w-0 rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] px-[var(--ui-input-text-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-global-box-color-hover)] not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-normal-box-border-color-hover)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-text-global-box-color-disabled)] disabled:text-[var(--ui-input-text-global-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-global-placeholder-color-disabled)]", t),
+	...i
+}));
+r.displayName = "InputBox";
+//#endregion
+export { r as InputBox };
+
+//# sourceMappingURL=input.js.map

package/dist/components/ui/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../../src/components/ui/input/input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The bare single-line input box behind the public `InputText` field (which is\n// also exported as `Input`). Exported in its own right for pairing with `Field`\n// (`<FieldControl render={<InputBox />} />`) — use `InputText` when a bundled\n// label/description/error is wanted instead. Themed by the dedicated next-gen `--ui-input-text-*`\n// token tier from @acronis-platform/tokens-pd. The box fill (`global-box-color-*`)\n// and the normal border (`normal-box-border-color-*`) are wired per state: idle /\n// hover / focus / disabled. The `normal-box-border-color-*` tier has no `-active`,\n// so focus reuses `-hover` for the border, paired with a 3px `--ui-focus-primary`\n// ring. Value and placeholder text use `global-value-color-*` /\n// `global-placeholder-color-*`. The error state is driven by `aria-invalid` —\n// `error-msg-box-border-color-*` border and, on focus, a `--ui-focus-error` ring —\n// scoped with `not-aria-[invalid]` so it wins over the hover/focus border. Box\n// geometry (32px height, 4px radius, 12px padding-x) comes from\n// `--ui-input-text-global-box-*`. Label, description, and error message are\n// composed by the consumer (a Field component is future work).\n// No `input.figma.tsx` on purpose: the designed component is `InputText`, which\n// owns the Figma node, the ui-spec entry and the Code Connect mapping. InputBox\n// is its inner box, not a separately designed component — see\n// context/figma-code-connect.md §Status markers.\nexport type InputBoxProps = React.ComponentPropsWithoutRef<'input'>;\n\nconst InputBox = React.forwardRef<HTMLInputElement, InputBoxProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input\n      ref={ref}\n      type={type}\n      className={cn(\n        'h-[var(--ui-input-text-global-box-height)] w-full min-w-0 rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] px-[var(--ui-input-text-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-global-box-color-hover)] not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-normal-box-border-color-hover)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-text-global-box-color-disabled)] disabled:text-[var(--ui-input-text-global-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-global-placeholder-color-disabled)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nInputBox.displayName = 'InputBox';\n\nexport { InputBox };\n"],"names":["InputBox","React","className","type","props","ref","jsx","cn"],"mappings":";;;AAyBA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GAASC,MACvC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAF;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAS,cAAc;"}
+{"version":3,"file":"input.js","names":[],"sources":["../../../../src/components/ui/input/input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The bare single-line input box behind the public `InputText` field (which is\n// also exported as `Input`). Exported in its own right for pairing with `Field`\n// (`<FieldControl render={<InputBox />} />`) — use `InputText` when a bundled\n// label/description/error is wanted instead. Themed by the dedicated next-gen `--ui-input-text-*`\n// token tier from @acronis-platform/tokens-pd. The box fill (`global-box-color-*`)\n// and the normal border (`normal-box-border-color-*`) are wired per state: idle /\n// hover / focus / disabled. The `normal-box-border-color-*` tier has no `-active`,\n// so focus reuses `-hover` for the border, paired with a 3px `--ui-focus-primary`\n// ring. Value and placeholder text use `global-value-color-*` /\n// `global-placeholder-color-*`. The error state is driven by `aria-invalid` —\n// `error-msg-box-border-color-*` border and, on focus, a `--ui-focus-error` ring —\n// scoped with `not-aria-[invalid]` so it wins over the hover/focus border. Box\n// geometry (32px height, 4px radius, 12px padding-x) comes from\n// `--ui-input-text-global-box-*`. Label, description, and error message are\n// composed by the consumer (a Field component is future work).\n// No `input.figma.tsx` on purpose: the designed component is `InputText`, which\n// owns the Figma node, the ui-spec entry and the Code Connect mapping. InputBox\n// is its inner box, not a separately designed component — see\n// context/figma-code-connect.md §Status markers.\nexport type InputBoxProps = React.ComponentPropsWithoutRef<'input'>;\n\nconst InputBox = React.forwardRef<HTMLInputElement, InputBoxProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input\n      ref={ref}\n      type={type}\n      className={cn(\n        'h-[var(--ui-input-text-global-box-height)] w-full min-w-0 rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] px-[var(--ui-input-text-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-global-box-color-hover)] not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-normal-box-border-color-hover)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-text-global-box-color-disabled)] disabled:text-[var(--ui-input-text-global-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-global-placeholder-color-disabled)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nInputBox.displayName = 'InputBox';\n\nexport { InputBox };\n"],"mappings":";;;;AAyBA,IAAM,IAAW,EAAM,YACpB,EAAE,cAAW,UAAO,QAAQ,GAAG,KAAS,MACvC,kBAAC,SAAD;CACO;CACC;CACN,WAAW,EACT,8wCACA,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAS,cAAc"}

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

@@ -1,114 +1,70 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import * as h from "react";
-import { CalendarIcon as E } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as i } from "../../../lib/utils.js";
-const F = h.forwardRef(
-  ({
-    className: k,
-    style: m,
-    id: f,
-    label: a,
-    required: v,
-    description: N,
-    error: o,
-    pickerType: w = "date",
-    placeholder: I,
-    value: t,
-    startDate: l,
-    endDate: n,
-    separator: y = "–",
-    open: s,
-    disabled: d,
-    "aria-invalid": R,
-    ...j
-  }, z) => {
-    const P = h.useId(), u = f ?? P, g = `${u}-message`, p = o != null && o !== "", q = p || R, c = p ? o : N, b = c != null && c !== "", x = w === "dateRange", C = x ? l != null && l !== "" || n != null && n !== "" : t != null && t !== "";
-    return /* @__PURE__ */ e(
-      "div",
-      {
-        className: i(
-          "group/field flex min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]",
-          k
-        ),
-        style: m,
-        children: [
-          a != null && a !== "" && /* @__PURE__ */ e(
-            "label",
-            {
-              htmlFor: u,
-              className: i(
-                "flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4",
-                d ? "text-[var(--ui-input-date-picker-global-label-color-disabled)]" : "text-[var(--ui-input-date-picker-global-label-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-global-label-color-hover)]"
-              ),
-              children: [
-                a,
-                v && /* @__PURE__ */ r(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    className: "text-[var(--ui-input-date-picker-global-required-color)]",
-                    children: "*"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ e(
-            "button",
-            {
-              ref: z,
-              id: u,
-              type: "button",
-              disabled: d,
-              "aria-invalid": q || void 0,
-              "aria-required": v || void 0,
-              "aria-haspopup": "dialog",
-              "aria-expanded": s || void 0,
-              "aria-describedby": b ? g : void 0,
-              "data-open": s || void 0,
-              className: i(
-                "group/trigger flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors",
-                "enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)]",
-                "not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)]",
-                "not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]",
-                "aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] enabled:aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]",
-                "disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]"
-              ),
-              ...j,
-              children: [
-                C ? x ? /* @__PURE__ */ e("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate", children: [
-                  /* @__PURE__ */ r("span", { children: l }),
-                  /* @__PURE__ */ r("span", { className: "text-[var(--ui-input-date-picker-global-separator-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-separator-color-disabled)]", children: y }),
-                  /* @__PURE__ */ r("span", { children: n })
-                ] }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate", children: t }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]", children: I }),
-                /* @__PURE__ */ r("span", { className: "flex size-[var(--ui-input-date-picker-global-icon-box-size)] shrink-0 items-center justify-center", children: /* @__PURE__ */ r(
-                  E,
-                  {
-                    size: 16,
-                    className: "text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]/trigger:text-[var(--ui-input-date-picker-error-icon-color-idle)] group-aria-[invalid=true]/trigger:group-hover/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)] group-aria-[invalid=true]/trigger:group-data-[open]/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)]"
-                  }
-                ) })
-              ]
-            }
-          ),
-          b && /* @__PURE__ */ r(
-            "p",
-            {
-              id: g,
-              className: i(
-                "text-xs leading-4",
-                p ? "text-[var(--ui-input-date-picker-error-error-msg-color)]" : d ? "text-[var(--ui-input-date-picker-normal-description-color-disabled)]" : "text-[var(--ui-input-date-picker-normal-description-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-normal-description-color-hover)]"
-              ),
-              children: c
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-F.displayName = "InputDatePicker";
-export {
-  F as InputDatePicker
-};
-//# sourceMappingURL=input-date-picker.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 { CalendarIcon as i } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/input-date-picker/input-date-picker.tsx
+var a = t.forwardRef(({ className: a, style: o, id: s, label: c, required: l, description: u, error: d, pickerType: f = "date", placeholder: p, value: m, startDate: h, endDate: g, separator: _ = "–", open: v, disabled: y, "aria-invalid": b, ...x }, S) => {
+	let C = t.useId(), w = s ?? C, T = `${w}-message`, E = d != null && d !== "", D = E || b, O = E ? d : u, k = O != null && O !== "", A = f === "dateRange", j = A ? h != null && h !== "" || g != null && g !== "" : m != null && m !== "";
+	return /* @__PURE__ */ r("div", {
+		className: e("group/field flex min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]", a),
+		style: o,
+		children: [
+			c != null && c !== "" && /* @__PURE__ */ r("label", {
+				htmlFor: w,
+				className: e("flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4", y ? "text-[var(--ui-input-date-picker-global-label-color-disabled)]" : "text-[var(--ui-input-date-picker-global-label-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-global-label-color-hover)]"),
+				children: [c, l && /* @__PURE__ */ n("span", {
+					"aria-hidden": "true",
+					className: "text-[var(--ui-input-date-picker-global-required-color)]",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ r("button", {
+				ref: S,
+				id: w,
+				type: "button",
+				disabled: y,
+				"aria-invalid": D || void 0,
+				"aria-required": l || void 0,
+				"aria-haspopup": "dialog",
+				"aria-expanded": v || void 0,
+				"aria-describedby": k ? T : void 0,
+				"data-open": v || void 0,
+				className: e("group/trigger flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors", "enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)]", "not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)]", "not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]", "aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] enabled:aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]", "disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]"),
+				...x,
+				children: [j ? A ? /* @__PURE__ */ r("span", {
+					className: "flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate",
+					children: [
+						/* @__PURE__ */ n("span", { children: h }),
+						/* @__PURE__ */ n("span", {
+							className: "text-[var(--ui-input-date-picker-global-separator-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-separator-color-disabled)]",
+							children: _
+						}),
+						/* @__PURE__ */ n("span", { children: g })
+					]
+				}) : /* @__PURE__ */ n("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: m
+				}) : /* @__PURE__ */ n("span", {
+					className: "min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]",
+					children: p
+				}), /* @__PURE__ */ n("span", {
+					className: "flex size-[var(--ui-input-date-picker-global-icon-box-size)] shrink-0 items-center justify-center",
+					children: /* @__PURE__ */ n(i, {
+						size: 16,
+						className: "text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]/trigger:text-[var(--ui-input-date-picker-error-icon-color-idle)] group-aria-[invalid=true]/trigger:group-hover/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)] group-aria-[invalid=true]/trigger:group-data-[open]/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)]"
+					})
+				})]
+			}),
+			k && /* @__PURE__ */ n("p", {
+				id: T,
+				className: e("text-xs leading-4", E ? "text-[var(--ui-input-date-picker-error-error-msg-color)]" : y ? "text-[var(--ui-input-date-picker-normal-description-color-disabled)]" : "text-[var(--ui-input-date-picker-normal-description-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-normal-description-color-hover)]"),
+				children: O
+			})
+		]
+	});
+});
+a.displayName = "InputDatePicker";
+//#endregion
+export { a as InputDatePicker };
+
+//# sourceMappingURL=input-date-picker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-date-picker.js","sources":["../../../../src/components/ui/input-date-picker/input-date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CalendarIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputDatePicker\" component: the date-field **trigger** — a\n// button box that displays a formatted date `value` (or a `startDate – endDate`\n// range when `pickerType=\"dateRange\"`) and a trailing calendar icon, with the field\n// furniture (optional `label` + required `*`, optional `description` / `error`).\n// Themed by the `--ui-input-date-picker-*` tier. The box border is wired per state:\n// idle / hover / open (`open` → `-active`) / focus (`-active` + a 3px\n// `--ui-focus-primary` ring) / disabled; `error` (or `aria-invalid`) swaps the\n// border to `error-box-border-color-*` and the ring to `--ui-focus-error`. The\n// label / value / placeholder / separator / description / icon text colors switch\n// to their `-hover` token on trigger hover **or** `open` — the Figma design groups\n// hover and the open (active) state under one visual treatment for these parts.\n//\n// `ref` targets the trigger `<button>`; `className` and `style` both target the field\n// wrapper (label + box + message), so sizing the field works the same way whichever\n// one a consumer reaches for.\n//\n// This is the trigger only — the calendar popup is NOT in the Figma design or the\n// token tier yet, so the consumer renders the date `value`/range as formatted\n// strings and wires their own calendar to `open` / `onClick`.\nexport interface InputDatePickerProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {\n  /** Field label, rendered above the box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the box. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /** Error message below the box. Its presence switches the field to the error treatment. */\n  error?: React.ReactNode;\n  /** Single date or a start–end range. */\n  pickerType?: 'date' | 'dateRange';\n  /** Hint shown when no value is selected. */\n  placeholder?: React.ReactNode;\n  /** Formatted selected date (`pickerType=\"date\"`). */\n  value?: React.ReactNode;\n  /** Formatted range start (`pickerType=\"dateRange\"`). */\n  startDate?: React.ReactNode;\n  /** Formatted range end (`pickerType=\"dateRange\"`). */\n  endDate?: React.ReactNode;\n  /** Separator between range dates. */\n  separator?: React.ReactNode;\n  /** Whether the (consumer-owned) calendar popup is open — paints the active border. */\n  open?: boolean;\n}\n\nconst InputDatePicker = React.forwardRef<HTMLButtonElement, InputDatePickerProps>(\n  (\n    {\n      className,\n      style,\n      id,\n      label,\n      required,\n      description,\n      error,\n      pickerType = 'date',\n      placeholder,\n      value,\n      startDate,\n      endDate,\n      separator = '–',\n      open,\n      disabled,\n      'aria-invalid': ariaInvalid,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const invalid = hasError || ariaInvalid;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    const isRange = pickerType === 'dateRange';\n    const hasValue = isRange\n      ? (startDate != null && startDate !== '') ||\n        (endDate != null && endDate !== '')\n      : value != null && value !== '';\n\n    return (\n      <div\n        className={cn(\n          'group/field flex min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]',\n          className\n        )}\n        style={style}\n      >\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-date-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-date-picker-global-label-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-global-label-color-hover)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-date-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <button\n          ref={ref}\n          id={inputId}\n          type=\"button\"\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          data-open={open || undefined}\n          className={cn(\n            'group/trigger flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)]',\n            'not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] enabled:aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]'\n          )}\n          {...props}\n        >\n          {hasValue ? (\n            isRange ? (\n              <span className=\"flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate\">\n                <span>{startDate}</span>\n                <span className=\"text-[var(--ui-input-date-picker-global-separator-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-separator-color-disabled)]\">\n                  {separator}\n                </span>\n                <span>{endDate}</span>\n              </span>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{value}</span>\n            )\n          ) : (\n            <span className=\"min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]\">\n              {placeholder}\n            </span>\n          )}\n          <span className=\"flex size-[var(--ui-input-date-picker-global-icon-box-size)] shrink-0 items-center justify-center\">\n            <CalendarIcon\n              size={16}\n              className=\"text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]/trigger:text-[var(--ui-input-date-picker-error-icon-color-idle)] group-aria-[invalid=true]/trigger:group-hover/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)] group-aria-[invalid=true]/trigger:group-data-[open]/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)]\"\n            />\n          </span>\n        </button>\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-date-picker-error-error-msg-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-date-picker-normal-description-color-disabled)]'\n                  : 'text-[var(--ui-input-date-picker-normal-description-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-normal-description-color-hover)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputDatePicker.displayName = 'InputDatePicker';\n\nexport { InputDatePicker };\n"],"names":["InputDatePicker","React","className","style","id","label","required","description","error","pickerType","placeholder","value","startDate","endDate","separator","open","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","isRange","hasValue","jsxs","cn","jsx","CalendarIcon"],"mappings":"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"}
+{"version":3,"file":"input-date-picker.js","names":[],"sources":["../../../../src/components/ui/input-date-picker/input-date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CalendarIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputDatePicker\" component: the date-field **trigger** — a\n// button box that displays a formatted date `value` (or a `startDate – endDate`\n// range when `pickerType=\"dateRange\"`) and a trailing calendar icon, with the field\n// furniture (optional `label` + required `*`, optional `description` / `error`).\n// Themed by the `--ui-input-date-picker-*` tier. The box border is wired per state:\n// idle / hover / open (`open` → `-active`) / focus (`-active` + a 3px\n// `--ui-focus-primary` ring) / disabled; `error` (or `aria-invalid`) swaps the\n// border to `error-box-border-color-*` and the ring to `--ui-focus-error`. The\n// label / value / placeholder / separator / description / icon text colors switch\n// to their `-hover` token on trigger hover **or** `open` — the Figma design groups\n// hover and the open (active) state under one visual treatment for these parts.\n//\n// `ref` targets the trigger `<button>`; `className` and `style` both target the field\n// wrapper (label + box + message), so sizing the field works the same way whichever\n// one a consumer reaches for.\n//\n// This is the trigger only — the calendar popup is NOT in the Figma design or the\n// token tier yet, so the consumer renders the date `value`/range as formatted\n// strings and wires their own calendar to `open` / `onClick`.\nexport interface InputDatePickerProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {\n  /** Field label, rendered above the box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the box. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /** Error message below the box. Its presence switches the field to the error treatment. */\n  error?: React.ReactNode;\n  /** Single date or a start–end range. */\n  pickerType?: 'date' | 'dateRange';\n  /** Hint shown when no value is selected. */\n  placeholder?: React.ReactNode;\n  /** Formatted selected date (`pickerType=\"date\"`). */\n  value?: React.ReactNode;\n  /** Formatted range start (`pickerType=\"dateRange\"`). */\n  startDate?: React.ReactNode;\n  /** Formatted range end (`pickerType=\"dateRange\"`). */\n  endDate?: React.ReactNode;\n  /** Separator between range dates. */\n  separator?: React.ReactNode;\n  /** Whether the (consumer-owned) calendar popup is open — paints the active border. */\n  open?: boolean;\n}\n\nconst InputDatePicker = React.forwardRef<HTMLButtonElement, InputDatePickerProps>(\n  (\n    {\n      className,\n      style,\n      id,\n      label,\n      required,\n      description,\n      error,\n      pickerType = 'date',\n      placeholder,\n      value,\n      startDate,\n      endDate,\n      separator = '–',\n      open,\n      disabled,\n      'aria-invalid': ariaInvalid,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const invalid = hasError || ariaInvalid;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    const isRange = pickerType === 'dateRange';\n    const hasValue = isRange\n      ? (startDate != null && startDate !== '') ||\n        (endDate != null && endDate !== '')\n      : value != null && value !== '';\n\n    return (\n      <div\n        className={cn(\n          'group/field flex min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]',\n          className\n        )}\n        style={style}\n      >\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-date-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-date-picker-global-label-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-global-label-color-hover)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-date-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <button\n          ref={ref}\n          id={inputId}\n          type=\"button\"\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          data-open={open || undefined}\n          className={cn(\n            'group/trigger flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)]',\n            'not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] enabled:aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]'\n          )}\n          {...props}\n        >\n          {hasValue ? (\n            isRange ? (\n              <span className=\"flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate\">\n                <span>{startDate}</span>\n                <span className=\"text-[var(--ui-input-date-picker-global-separator-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-separator-color-disabled)]\">\n                  {separator}\n                </span>\n                <span>{endDate}</span>\n              </span>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{value}</span>\n            )\n          ) : (\n            <span className=\"min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]\">\n              {placeholder}\n            </span>\n          )}\n          <span className=\"flex size-[var(--ui-input-date-picker-global-icon-box-size)] shrink-0 items-center justify-center\">\n            <CalendarIcon\n              size={16}\n              className=\"text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]/trigger:text-[var(--ui-input-date-picker-error-icon-color-idle)] group-aria-[invalid=true]/trigger:group-hover/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)] group-aria-[invalid=true]/trigger:group-data-[open]/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)]\"\n            />\n          </span>\n        </button>\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-date-picker-error-error-msg-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-date-picker-normal-description-color-disabled)]'\n                  : 'text-[var(--ui-input-date-picker-normal-description-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-normal-description-color-hover)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputDatePicker.displayName = 'InputDatePicker';\n\nexport { InputDatePicker };\n"],"mappings":";;;;;AAkDA,IAAM,IAAkB,EAAM,YAE1B,EACE,cACA,UACA,OACA,UACA,aACA,gBACA,UACA,gBAAa,QACb,gBACA,UACA,cACA,YACA,eAAY,KACZ,SACA,aACA,gBAAgB,GAChB,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAM,MAAM,GACtB,IAAU,KAAM,GAChB,IAAY,GAAG,EAAQ,WAEvB,IAAW,KAAS,QAAQ,MAAU,IACtC,IAAU,KAAY,GACtB,IAAU,IAAW,IAAQ,GAC7B,IAAa,KAAW,QAAQ,MAAY,IAE5C,IAAU,MAAe,aACzB,IAAW,IACZ,KAAa,QAAQ,MAAc,MACnC,KAAW,QAAQ,MAAY,KAChC,KAAS,QAAQ,MAAU;CAE/B,OACE,kBAAC,OAAD;EACE,WAAW,EACT,mJACA,CACF;EACO;EALT,UAAA;GAOG,KAAS,QAAQ,MAAU,MAC1B,kBAAC,SAAD;IACE,SAAS;IACT,WAAW,EACT,uFACA,IACI,mEACA,yKACN;IAPF,UAAA,CASG,GACA,KACC,kBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACX,UAAA;IAEK,CAAA,CAEH;;GAGT,kBAAC,UAAD;IACO;IACL,IAAI;IACJ,MAAK;IACK;IACV,gBAAc,KAAW,KAAA;IACzB,iBAAe,KAAY,KAAA;IAC3B,iBAAc;IACd,iBAAe,KAAQ,KAAA;IACvB,oBAAkB,IAAa,IAAY,KAAA;IAC3C,aAAW,KAAQ,KAAA;IACnB,WAAW,EACT,ghBACA,4SACA,2MACA,mOACA,0qBACA,wPACF;IACA,GAAI;IAnBN,UAAA,CAqBG,IACC,IACE,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MACE,kBAAC,QAAD,EAAA,UAAO,EAAgB,CAAA;MACvB,kBAAC,QAAD;OAAM,WAAU;OACb,UAAA;MACG,CAAA;MACN,kBAAC,QAAD,EAAA,UAAO,EAAc,CAAA;KACjB;IAEN,CAAA,IAAA,kBAAC,QAAD;KAAM,WAAU;KAA2B,UAAA;IAAY,CAAA,IAGzD,kBAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA,GAER,kBAAC,QAAD;KAAM,WAAU;KACd,UAAA,kBAAC,GAAD;MACE,MAAM;MACN,WAAU;KACX,CAAA;IACG,CAAA,CACA;;GAEP,KACC,kBAAC,KAAD;IACE,IAAI;IACJ,WAAW,EACT,qBACA,IACI,6DACA,IACE,yEACA,qLACR;IAEC,UAAA;GACA,CAAA;EAEF;;AAET,CACF;AACA,EAAgB,cAAc"}

package/dist/components/ui/input-num-picker/input-num-picker.js

@@ -0,0 +1,48 @@
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { ButtonIconInput as t } from "../button-icon-input/button-icon-input.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { MinusIcon as a, PlusIcon as o } from "@acronis-platform/icons-react/stroke-mono";
+import { NumberField as s } from "@base-ui/react/number-field";
+//#region src/components/ui/input-num-picker/input-num-picker.tsx
+var c = n.forwardRef(({ className: c, id: l, label: u, required: d, disabled: f, decrementLabel: p = "Decrease", incrementLabel: m = "Increase", ...h }, g) => {
+	let _ = n.useId(), v = l ?? _;
+	return /* @__PURE__ */ i(s.Root, {
+		id: v,
+		disabled: f,
+		required: d,
+		className: e("flex min-w-[var(--ui-input-num-picker-global-container-width-min)] flex-col items-center gap-[var(--ui-input-num-picker-global-container-gap)]", c),
+		...h,
+		children: [u != null && u !== "" && /* @__PURE__ */ i("label", {
+			htmlFor: v,
+			className: e("flex w-full gap-[var(--ui-input-num-picker-global-container-label-gap)] text-sm leading-4", f ? "text-[var(--ui-input-num-picker-global-label-color-disabled)]" : "text-[var(--ui-input-num-picker-global-label-color-idle)]"),
+			children: [u, d && /* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				className: "text-[var(--ui-input-num-picker-global-required-color)]",
+				children: "*"
+			})]
+		}), /* @__PURE__ */ i(s.Group, {
+			className: e("flex h-[var(--ui-input-num-picker-global-box-height)] w-full items-center gap-[var(--ui-input-num-picker-global-box-gap)] rounded-[var(--ui-input-num-picker-global-box-border-radius)] border-[length:var(--ui-input-num-picker-global-box-border-width)] border-solid border-[var(--ui-input-num-picker-normal-box-border-color-idle)] bg-[var(--ui-input-num-picker-global-box-color-idle)] px-[var(--ui-input-num-picker-global-box-padding-x)] py-[var(--ui-input-num-picker-global-box-padding-y)] transition-colors", "not-has-disabled:hover:border-[var(--ui-input-num-picker-normal-box-border-color-hover)] not-has-disabled:hover:bg-[var(--ui-input-num-picker-global-box-color-hover)]", "has-[input:focus-visible]:border-[var(--ui-input-num-picker-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]", "has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-num-picker-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-num-picker-global-box-color-disabled)]"),
+			children: [
+				/* @__PURE__ */ r(s.Decrement, { render: /* @__PURE__ */ r(t, {
+					"aria-label": p,
+					children: /* @__PURE__ */ r(a, { size: 16 })
+				}) }),
+				/* @__PURE__ */ r(s.Input, {
+					ref: g,
+					className: e("min-w-0 flex-1 bg-transparent text-center text-sm leading-6 outline-none", f ? "text-[var(--ui-input-num-picker-global-value-color-disabled)]" : "text-[var(--ui-input-num-picker-global-value-color-idle)]")
+				}),
+				/* @__PURE__ */ r(s.Increment, { render: /* @__PURE__ */ r(t, {
+					"aria-label": m,
+					children: /* @__PURE__ */ r(o, { size: 16 })
+				}) })
+			]
+		})]
+	});
+});
+c.displayName = "InputNumPicker";
+//#endregion
+export { c as InputNumPicker };
+
+//# sourceMappingURL=input-num-picker.js.map

package/dist/components/ui/input-num-picker/input-num-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-num-picker.js","names":[],"sources":["../../../../src/components/ui/input-num-picker/input-num-picker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';\nimport { MinusIcon, PlusIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIconInput } from '../button-icon-input';\n\n// Mirrors the Figma \"InputNumPicker\" component: a numeric stepper field built on\n// Base UI's NumberField (Root/Group/Input/Decrement/Increment), themed by its own\n// `--ui-input-num-picker-*` tier. Adds the field furniture InputText/InputSelect\n// already ship: an optional `label` (with an optional `required` `*`). The stepper\n// buttons reuse `ButtonIconInput` (already themed for exactly this \"small icon\n// inside a field box\" role) via its `render` prop, rather than duplicating its\n// idle/hover/active/disabled token wiring here.\nexport interface InputNumPickerProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Root>,\n    'children'\n  > {\n  /** Field label, rendered above the stepper box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Accessible label for the decrement button. */\n  decrementLabel?: string;\n  /** Accessible label for the increment button. */\n  incrementLabel?: string;\n}\n\nconst InputNumPicker = React.forwardRef<HTMLInputElement, InputNumPickerProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      disabled,\n      decrementLabel = 'Decrease',\n      incrementLabel = 'Increase',\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n\n    return (\n      <NumberFieldPrimitive.Root\n        id={inputId}\n        disabled={disabled}\n        required={required}\n        className={cn(\n          'flex min-w-[var(--ui-input-num-picker-global-container-width-min)] flex-col items-center gap-[var(--ui-input-num-picker-global-container-gap)]',\n          className\n        )}\n        {...props}\n      >\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex w-full gap-[var(--ui-input-num-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-num-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-num-picker-global-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-num-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <NumberFieldPrimitive.Group\n          className={cn(\n            'flex h-[var(--ui-input-num-picker-global-box-height)] w-full items-center gap-[var(--ui-input-num-picker-global-box-gap)] rounded-[var(--ui-input-num-picker-global-box-border-radius)] border-[length:var(--ui-input-num-picker-global-box-border-width)] border-solid border-[var(--ui-input-num-picker-normal-box-border-color-idle)] bg-[var(--ui-input-num-picker-global-box-color-idle)] px-[var(--ui-input-num-picker-global-box-padding-x)] py-[var(--ui-input-num-picker-global-box-padding-y)] transition-colors',\n            'not-has-disabled:hover:border-[var(--ui-input-num-picker-normal-box-border-color-hover)] not-has-disabled:hover:bg-[var(--ui-input-num-picker-global-box-color-hover)]',\n            'has-[input:focus-visible]:border-[var(--ui-input-num-picker-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n            'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-num-picker-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-num-picker-global-box-color-disabled)]'\n          )}\n        >\n          <NumberFieldPrimitive.Decrement\n            render={\n              <ButtonIconInput aria-label={decrementLabel}>\n                <MinusIcon size={16} />\n              </ButtonIconInput>\n            }\n          />\n\n          <NumberFieldPrimitive.Input\n            ref={ref}\n            className={cn(\n              'min-w-0 flex-1 bg-transparent text-center text-sm leading-6 outline-none',\n              disabled\n                ? 'text-[var(--ui-input-num-picker-global-value-color-disabled)]'\n                : 'text-[var(--ui-input-num-picker-global-value-color-idle)]'\n            )}\n          />\n\n          <NumberFieldPrimitive.Increment\n            render={\n              <ButtonIconInput aria-label={incrementLabel}>\n                <PlusIcon size={16} />\n              </ButtonIconInput>\n            }\n          />\n        </NumberFieldPrimitive.Group>\n      </NumberFieldPrimitive.Root>\n    );\n  }\n);\nInputNumPicker.displayName = 'InputNumPicker';\n\nexport { InputNumPicker };\n"],"mappings":";;;;;;;;AA+BA,IAAM,IAAiB,EAAM,YAEzB,EACE,cACA,OACA,UACA,aACA,aACA,oBAAiB,YACjB,oBAAiB,YACjB,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAM,MAAM,GACtB,IAAU,KAAM;CAEtB,OACE,kBAAC,EAAqB,MAAtB;EACE,IAAI;EACM;EACA;EACV,WAAW,EACT,kJACA,CACF;EACA,GAAI;EARN,UAAA,CAUG,KAAS,QAAQ,MAAU,MAC1B,kBAAC,SAAD;GACE,SAAS;GACT,WAAW,EACT,6FACA,IACI,kEACA,2DACN;GAPF,UAAA,CASG,GACA,KACC,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACX,UAAA;GAEK,CAAA,CAEH;EAGT,CAAA,GAAA,kBAAC,EAAqB,OAAtB;GACE,WAAW,EACT,8fACA,0KACA,6LACA,0LACF;GANF,UAAA;IAQE,kBAAC,EAAqB,WAAtB,EACE,QACE,kBAAC,GAAD;KAAiB,cAAY;KAC3B,UAAA,kBAAC,GAAD,EAAW,MAAM,GAAK,CAAA;IACP,CAAA,EAEpB,CAAA;IAED,kBAAC,EAAqB,OAAtB;KACO;KACL,WAAW,EACT,4EACA,IACI,kEACA,2DACN;IACD,CAAA;IAED,kBAAC,EAAqB,WAAtB,EACE,QACE,kBAAC,GAAD;KAAiB,cAAY;KAC3B,UAAA,kBAAC,GAAD,EAAU,MAAM,GAAK,CAAA;IACN,CAAA,EAEpB,CAAA;GACyB;EACH,CAAA,CAAA;;AAE/B,CACF;AACA,EAAe,cAAc"}