@acronis-platform/ui-react 0.47.0 → 0.51.0

package/dist/components/ui/number-field/number-field.js

@@ -0,0 +1,61 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as a from "react";
+import { NumberField as t } from "@base-ui/react/number-field";
+import { MinusIcon as n, PlusIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as l } from "../../../lib/utils.js";
+const g = t.Root, b = a.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ i(
+  t.Group,
+  {
+    ref: o,
+    className: l(
+      "flex h-[var(--ui-input-text-global-box-height)] w-full min-w-0 items-stretch overflow-hidden 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)] transition-colors",
+      "not-has-disabled:hover:border-[var(--ui-input-text-normal-box-border-color-hover)]",
+      "has-[input:focus-visible]:border-[var(--ui-input-text-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-text-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-text-global-box-color-disabled)]",
+      "has-[input[aria-invalid=true]]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]",
+      e
+    ),
+    ...r
+  }
+));
+b.displayName = "NumberFieldGroup";
+const c = a.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ i(
+  t.Input,
+  {
+    ref: o,
+    className: l(
+      "min-w-0 flex-1 bg-transparent px-[var(--ui-input-text-global-box-padding-x)] text-center text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-text-global-value-color-disabled)]",
+      e
+    ),
+    ...r
+  }
+));
+c.displayName = "NumberFieldInput";
+const s = "flex w-9 shrink-0 cursor-pointer items-center justify-center text-[var(--ui-text-on-surface-secondary)] transition-colors not-disabled:hover:bg-[var(--ui-background-surface-hover)] not-disabled:hover:text-[var(--ui-text-on-surface-primary)] disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)]", m = a.forwardRef(({ className: e, children: r, ...o }, d) => /* @__PURE__ */ i(
+  t.Decrement,
+  {
+    ref: d,
+    className: l(s, e),
+    ...o,
+    children: r ?? /* @__PURE__ */ i(n, { size: 16 })
+  }
+));
+m.displayName = "NumberFieldDecrement";
+const p = a.forwardRef(({ className: e, children: r, ...o }, d) => /* @__PURE__ */ i(
+  t.Increment,
+  {
+    ref: d,
+    className: l(s, e),
+    ...o,
+    children: r ?? /* @__PURE__ */ i(u, { size: 16 })
+  }
+));
+p.displayName = "NumberFieldIncrement";
+export {
+  g as NumberField,
+  m as NumberFieldDecrement,
+  b as NumberFieldGroup,
+  p as NumberFieldIncrement,
+  c as NumberFieldInput
+};
+//# sourceMappingURL=number-field.js.map

package/dist/components/ui/number-field/number-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.js","sources":["../../../../src/components/ui/number-field/number-field.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';\n\n// Ported from `@acronis-platform`'s `number-field`, on Base UI's NumberField\n// (Root / Group / Decrement / Input / Increment). No `--ui-number-field-*` tier —\n// the box reuses the `--ui-input-text-*` tier (already imported) so it matches\n// InputBox / InputText; the steppers use the muted/primary surface + text tokens.\n\nconst NumberField = NumberFieldPrimitive.Root;\n\n// The bordered box wrapping the steppers + input. Mirrors the InputBox field box\n// (height / radius / border / bg / hover / focus-within ring / disabled / invalid).\nconst NumberFieldGroup = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <NumberFieldPrimitive.Group\n    ref={ref}\n    className={cn(\n      'flex h-[var(--ui-input-text-global-box-height)] w-full min-w-0 items-stretch overflow-hidden 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)] transition-colors',\n      'not-has-disabled:hover:border-[var(--ui-input-text-normal-box-border-color-hover)]',\n      'has-[input:focus-visible]:border-[var(--ui-input-text-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-text-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-text-global-box-color-disabled)]',\n      'has-[input[aria-invalid=true]]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]',\n      className\n    )}\n    {...props}\n  />\n));\nNumberFieldGroup.displayName = 'NumberFieldGroup';\n\nconst NumberFieldInput = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <NumberFieldPrimitive.Input\n    ref={ref}\n    className={cn(\n      'min-w-0 flex-1 bg-transparent px-[var(--ui-input-text-global-box-padding-x)] text-center text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-text-global-value-color-disabled)]',\n      className\n    )}\n    {...props}\n  />\n));\nNumberFieldInput.displayName = 'NumberFieldInput';\n\nconst stepperClassName =\n  'flex w-9 shrink-0 cursor-pointer items-center justify-center text-[var(--ui-text-on-surface-secondary)] transition-colors not-disabled:hover:bg-[var(--ui-background-surface-hover)] not-disabled:hover:text-[var(--ui-text-on-surface-primary)] disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)]';\n\nconst NumberFieldDecrement = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Decrement>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Decrement>\n>(({ className, children, ...props }, ref) => (\n  <NumberFieldPrimitive.Decrement\n    ref={ref}\n    className={cn(stepperClassName, className)}\n    {...props}\n  >\n    {children ?? <MinusIcon size={16} />}\n  </NumberFieldPrimitive.Decrement>\n));\nNumberFieldDecrement.displayName = 'NumberFieldDecrement';\n\nconst NumberFieldIncrement = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Increment>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Increment>\n>(({ className, children, ...props }, ref) => (\n  <NumberFieldPrimitive.Increment\n    ref={ref}\n    className={cn(stepperClassName, className)}\n    {...props}\n  >\n    {children ?? <PlusIcon size={16} />}\n  </NumberFieldPrimitive.Increment>\n));\nNumberFieldIncrement.displayName = 'NumberFieldIncrement';\n\nexport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n};\n"],"names":["NumberField","NumberFieldPrimitive","NumberFieldGroup","React","className","props","ref","jsx","cn","NumberFieldInput","stepperClassName","NumberFieldDecrement","children","MinusIcon","NumberFieldIncrement","PlusIcon"],"mappings":";;;;;AAaA,MAAMA,IAAcC,EAAqB,MAInCC,IAAmBC,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAiB,cAAc;AAE/B,MAAMO,IAAmBN,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAiB,cAAc;AAE/B,MAAMC,IACJ,mUAEIC,IAAuBR,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,UAAAQ,GAAU,GAAGP,KAASC,MACpC,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAGE,GAAkBN,CAAS;AAAA,IACxC,GAAGC;AAAA,IAEH,UAAAO,KAAY,gBAAAL,EAACM,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,EAAA;AACpC,CACD;AACDF,EAAqB,cAAc;AAEnC,MAAMG,IAAuBX,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,UAAAQ,GAAU,GAAGP,KAASC,MACpC,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAGE,GAAkBN,CAAS;AAAA,IACxC,GAAGC;AAAA,IAEH,UAAAO,KAAY,gBAAAL,EAACQ,GAAA,EAAS,MAAM,GAAA,CAAI;AAAA,EAAA;AACnC,CACD;AACDD,EAAqB,cAAc;"}

package/dist/components/ui/skeleton/skeleton.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as m } from "../../../lib/utils.js";
+const s = t.forwardRef(
+  ({ className: e, ...a }, o) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: o,
+      "data-slot": "skeleton",
+      className: m(
+        "animate-pulse rounded-md bg-[var(--ui-background-surface-active)]",
+        e
+      ),
+      ...a
+    }
+  )
+);
+s.displayName = "Skeleton";
+export {
+  s as Skeleton
+};
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sources":["../../../../src/components/ui/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `skeleton`\n// (packages/ui-legacy/src/components/ui/skeleton.tsx). A pulsing placeholder box\n// for loading states — no Base UI primitive, just a styled `<div>`. The legacy\n// `bg-muted` (--ui-background-surface-secondary) is near-white and nearly\n// invisible on a white surface, so the fill uses the more visible\n// `--ui-background-surface-active` gray (still subtle in dark). Shape and size\n// come from the caller's className.\nexport type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"skeleton\"\n      className={cn(\n        'animate-pulse rounded-md bg-[var(--ui-background-surface-active)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nSkeleton.displayName = 'Skeleton';\n\nexport { Skeleton };\n"],"names":["Skeleton","React","className","props","ref","jsx","cn"],"mappings":";;;AAaA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACV,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAH,EAAS,cAAc;"}

package/dist/components/ui/slider/slider.js

@@ -0,0 +1,42 @@
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import * as g from "react";
+import { Slider as r } from "@base-ui/react/slider";
+import { cn as s } from "../../../lib/utils.js";
+const m = g.forwardRef(
+  ({ className: d, defaultValue: a, value: e, ...l }, t) => {
+    const n = e != null ? Array.isArray(e) ? e : [e] : void 0, i = a != null ? Array.isArray(a) ? a : [a] : [0], u = (n ?? i).length;
+    return /* @__PURE__ */ o(
+      r.Root,
+      {
+        ref: t,
+        value: n,
+        defaultValue: i,
+        className: s(
+          "group relative flex w-full touch-none select-none items-center",
+          d
+        ),
+        ...l,
+        children: /* @__PURE__ */ b(r.Control, { className: "relative flex w-full items-center py-2", children: [
+          /* @__PURE__ */ o(r.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-[var(--ui-border-on-surface-border)]", children: /* @__PURE__ */ o(r.Indicator, { className: "rounded-full bg-[var(--ui-background-brand-secondary)] group-data-[disabled]:bg-[var(--ui-background-status-strong-neutral)]" }) }),
+          Array.from({ length: u }, (f, c) => /* @__PURE__ */ o(
+            r.Thumb,
+            {
+              className: s(
+                "block size-4 rounded-full border border-[var(--ui-background-brand-secondary)] bg-background shadow-sm transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
+                "data-dragging:ring-2 data-dragging:ring-[var(--ui-focus-primary)]",
+                "data-disabled:pointer-events-none data-disabled:border-[var(--ui-background-status-strong-neutral)] data-disabled:opacity-50"
+              )
+            },
+            c
+          ))
+        ] })
+      }
+    );
+  }
+);
+m.displayName = "Slider";
+export {
+  m as Slider
+};
+//# sourceMappingURL=slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sources":["../../../../src/components/ui/slider/slider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Slider as SliderPrimitive } from '@base-ui/react/slider';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform`'s `slider`, on Base UI's Slider (Root / Control /\n// Track / Indicator / Thumb). Supports a single value or a range (array value) —\n// the thumb count follows the value/defaultValue length. No `--ui-slider-*` tier,\n// so it uses semantic tokens: the rail is the divider gray\n// (`--ui-border-on-surface-border`); the filled indicator and the thumb border use\n// the action blue (`--ui-background-brand-secondary`) — note legacy's `bg-primary`\n// is the dark navy in ui-react, so the action color is `secondary`.\nexport type SliderProps = React.ComponentPropsWithoutRef<\n  typeof SliderPrimitive.Root\n>;\n\nconst Slider = React.forwardRef<HTMLDivElement, SliderProps>(\n  ({ className, defaultValue, value, ...props }, ref) => {\n    const normalizedValue =\n      value != null ? (Array.isArray(value) ? value : [value]) : undefined;\n    const normalizedDefaultValue =\n      defaultValue != null\n        ? Array.isArray(defaultValue)\n          ? defaultValue\n          : [defaultValue]\n        : [0];\n    const thumbCount = (normalizedValue ?? normalizedDefaultValue).length;\n\n    return (\n      <SliderPrimitive.Root\n        ref={ref}\n        value={normalizedValue}\n        defaultValue={normalizedDefaultValue}\n        className={cn(\n          'group relative flex w-full touch-none select-none items-center',\n          className\n        )}\n        {...props}\n      >\n        <SliderPrimitive.Control className=\"relative flex w-full items-center py-2\">\n          <SliderPrimitive.Track className=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-[var(--ui-border-on-surface-border)]\">\n            <SliderPrimitive.Indicator className=\"rounded-full bg-[var(--ui-background-brand-secondary)] group-data-[disabled]:bg-[var(--ui-background-status-strong-neutral)]\" />\n          </SliderPrimitive.Track>\n          {Array.from({ length: thumbCount }, (_, i) => (\n            <SliderPrimitive.Thumb\n              key={i}\n              className={cn(\n                'block size-4 rounded-full border border-[var(--ui-background-brand-secondary)] bg-background shadow-sm transition-colors',\n                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]',\n                'data-dragging:ring-2 data-dragging:ring-[var(--ui-focus-primary)]',\n                'data-disabled:pointer-events-none data-disabled:border-[var(--ui-background-status-strong-neutral)] data-disabled:opacity-50'\n              )}\n            />\n          ))}\n        </SliderPrimitive.Control>\n      </SliderPrimitive.Root>\n    );\n  }\n);\nSlider.displayName = 'Slider';\n\nexport { Slider };\n"],"names":["Slider","React","className","defaultValue","value","props","ref","normalizedValue","normalizedDefaultValue","thumbCount","jsx","SliderPrimitive","cn","jsxs","_","i"],"mappings":";;;;AAkBA,MAAMA,IAASC,EAAM;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,cAAAC,GAAc,OAAAC,GAAO,GAAGC,EAAA,GAASC,MAAQ;AACrD,UAAMC,IACJH,KAAS,OAAQ,MAAM,QAAQA,CAAK,IAAIA,IAAQ,CAACA,CAAK,IAAK,QACvDI,IACJL,KAAgB,OACZ,MAAM,QAAQA,CAAY,IACxBA,IACA,CAACA,CAAY,IACf,CAAC,CAAC,GACFM,KAAcF,KAAmBC,GAAwB;AAE/D,WACE,gBAAAE;AAAA,MAACC,EAAgB;AAAA,MAAhB;AAAA,QACC,KAAAL;AAAA,QACA,OAAOC;AAAA,QACP,cAAcC;AAAA,QACd,WAAWI;AAAA,UACT;AAAA,UACAV;AAAA,QAAA;AAAA,QAED,GAAGG;AAAA,QAEJ,UAAA,gBAAAQ,EAACF,EAAgB,SAAhB,EAAwB,WAAU,0CACjC,UAAA;AAAA,UAAA,gBAAAD,EAACC,EAAgB,OAAhB,EAAsB,WAAU,mGAC/B,UAAA,gBAAAD,EAACC,EAAgB,WAAhB,EAA0B,WAAU,+HAAA,CAA+H,EAAA,CACtK;AAAA,UACC,MAAM,KAAK,EAAE,QAAQF,KAAc,CAACK,GAAGC,MACtC,gBAAAL;AAAA,YAACC,EAAgB;AAAA,YAAhB;AAAA,cAEC,WAAWC;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YACF;AAAA,YANKG;AAAA,UAAA,CAQR;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACAf,EAAO,cAAc;"}