@acronis-platform/ui-react 0.28.0 → 0.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acronis-platform/ui-react",
-  "version": "0.28.0",
+  "version": "0.31.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/acronis/uikit.git",
@@ -46,9 +46,9 @@
     "clsx": "2.1.1",
     "react-resizable-panels": "4.11.2",
     "tailwind-merge": "3.6.0",
+    "@acronis-platform/design-assets": "0.4.0",
     "@acronis-platform/tokens-pd": "1.8.1",
-    "@acronis-platform/icons-react": "0.4.0",
-    "@acronis-platform/design-assets": "0.4.0"
+    "@acronis-platform/icons-react": "0.4.0"
   },
   "devDependencies": {
     "@figma/code-connect": "1.4.8",
@@ -112,7 +112,11 @@
     "storybook:test:visual": "test-storybook",
     "storybook:test:visual:update": "test-storybook --updateSnapshot",
     "storybook:test:visual:docker": "pnpm storybook:build && docker compose -f ./docker-compose.storybook.yml up --build --abort-on-container-exit --exit-code-from test-runner",
+    "storybook:test:visual:docker:dark": "STORYBOOK_COLOR_MODE=dark pnpm storybook:test:visual:docker",
+    "storybook:test:visual:docker:all": "pnpm storybook:test:visual:docker && pnpm storybook:test:visual:docker:dark",
     "storybook:test:visual:docker:update": "pnpm storybook:build && docker compose -f ./docker-compose.storybook.yml -f ./docker-compose.storybook.update.yml up --build --abort-on-container-exit --exit-code-from test-runner",
+    "storybook:test:visual:docker:update:dark": "STORYBOOK_COLOR_MODE=dark pnpm storybook:test:visual:docker:update",
+    "storybook:test:visual:docker:update:all": "pnpm storybook:test:visual:docker:update && pnpm storybook:test:visual:docker:update:dark",
     "figma:connect": "figma connect parse",
     "figma:connect:publish": "figma connect publish",
     "figma:connect:unpublish": "figma connect unpublish"

package/dist/components/ui/select/select.js

@@ -1,105 +0,0 @@
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import * as d from "react";
-import { Select as e } from "@base-ui/react/select";
-import { ChevronDownIcon as u, CheckIcon as p } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as l } from "../../../lib/utils.js";
-const y = e.Root, I = e.Group, f = d.forwardRef(({ className: t, ...a }, o) => /* @__PURE__ */ r(
-  e.Value,
-  {
-    ref: o,
-    className: l(
-      "min-w-0 flex-1 truncate text-left text-[var(--ui-form-text-value)] data-[placeholder]:text-[var(--ui-form-text-placeholder)]",
-      // Disabled wins over the value/placeholder color regardless of variant order.
-      "group-data-[disabled]:!text-[var(--ui-form-text-disabled)]",
-      t
-    ),
-    ...a
-  }
-));
-f.displayName = "SelectValue";
-const b = d.forwardRef(({ className: t, children: a, ...o }, i) => /* @__PURE__ */ n(
-  e.Trigger,
-  {
-    ref: i,
-    className: l(
-      "group flex h-8 w-full min-w-0 items-center gap-2 rounded border bg-[var(--ui-form-background-idle)] border-[var(--ui-form-border-idle)] px-3 text-sm leading-6 text-[var(--ui-form-text-value)] outline-none transition-colors",
-      "not-data-[disabled]:hover:border-[var(--ui-form-border-hover)]",
-      "focus-visible:border-[var(--ui-form-border-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
-      "data-[popup-open]:border-[var(--ui-form-border-active)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]",
-      "data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-form-border-disabled)] data-[disabled]:bg-[var(--ui-form-background-disabled)] data-[disabled]:text-[var(--ui-form-text-disabled)]",
-      t
-    ),
-    ...o,
-    children: [
-      a,
-      /* @__PURE__ */ r(e.Icon, { className: "flex shrink-0 items-center text-[var(--ui-form-icon-idle)] group-data-[disabled]:text-[var(--ui-form-icon-disabled)]", children: /* @__PURE__ */ r(
-        u,
-        {
-          size: 16,
-          className: "transition-transform group-data-[popup-open]:rotate-180"
-        }
-      ) })
-    ]
-  }
-));
-b.displayName = "SelectTrigger";
-const x = d.forwardRef(({ className: t, children: a, sideOffset: o = 4, align: i = "start", side: s = "bottom", ...c }, m) => /* @__PURE__ */ r(e.Portal, { children: /* @__PURE__ */ r(
-  e.Positioner,
-  {
-    sideOffset: o,
-    align: i,
-    side: s,
-    alignItemWithTrigger: !1,
-    className: "z-50 outline-none",
-    children: /* @__PURE__ */ r(
-      e.Popup,
-      {
-        ref: m,
-        className: l(
-          "max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded border border-border bg-background py-1 text-sm text-foreground shadow-md outline-none",
-          t
-        ),
-        ...c,
-        children: a
-      }
-    )
-  }
-) }));
-x.displayName = "SelectContent";
-const g = d.forwardRef(({ className: t, children: a, ...o }, i) => /* @__PURE__ */ n(
-  e.Item,
-  {
-    ref: i,
-    className: l(
-      "relative flex cursor-default items-center gap-2 py-1.5 pr-8 pl-3 leading-6 outline-none select-none",
-      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:text-[var(--ui-form-text-disabled)]",
-      t
-    ),
-    ...o,
-    children: [
-      /* @__PURE__ */ r(e.ItemText, { className: "min-w-0 flex-1 truncate", children: a }),
-      /* @__PURE__ */ r(e.ItemIndicator, { className: "absolute right-2 flex items-center text-[var(--ui-form-icon-idle)]", children: /* @__PURE__ */ r(p, { size: 16 }) })
-    ]
-  }
-));
-g.displayName = "SelectItem";
-const v = d.forwardRef(({ className: t, ...a }, o) => /* @__PURE__ */ r(
-  e.GroupLabel,
-  {
-    ref: o,
-    className: l("px-3 py-1.5 text-xs text-muted-foreground", t),
-    ...a
-  }
-));
-v.displayName = "SelectGroupLabel";
-export {
-  y as Select,
-  x as SelectContent,
-  I as SelectGroup,
-  v as SelectGroupLabel,
-  g as SelectItem,
-  b as SelectTrigger,
-  f as SelectValue
-};
-//# sourceMappingURL=select.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"select.js","sources":["../../../../src/components/ui/select/select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport { CheckIcon, ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// STRANDED THEME: this component still binds to the legacy `--ui-form-*` token\n// tier, which is NOT shipped by @acronis-platform/tokens-pd. The Figma sync\n// (#308) added next-gen tiers for Radio (`--ui-radio-*`), Search\n// (`--ui-input-search-*`) and Input (`--ui-input-text-*`) but NOT for Select, so\n// there is nothing to rewire to yet — Select renders with unresolved colors until\n// a `--ui-select-*` tier ships. Re-theme it once those tokens land (tracked\n// alongside the token-drift guard, issue #297).\n//\n// A select: a Base UI `Select` themed with the shared `--ui-form-*` token tier\n// (the same tier Input/Search use). The trigger is the Figma \"Select\" box —\n// 32px tall, bordered, rounded — and wires each state to its own token:\n// idle / hover (`--ui-form-border-hover`) / open+focus (`--ui-form-border-active`\n// + a 3px `--ui-focus-primary` ring) / disabled. The chevron uses\n// `--ui-form-icon-idle` and rotates when the popup is open. The popup and items\n// aren't in the Figma spec, so they use the shared semantic surface vocabulary\n// (`bg-background`, `bg-accent`, `border-border`). Label, description, and error\n// message are composed by the consumer (a Field component is future work).\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectValue = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Value>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Value\n    ref={ref}\n    className={cn(\n      'min-w-0 flex-1 truncate text-left text-[var(--ui-form-text-value)] data-[placeholder]:text-[var(--ui-form-text-placeholder)]',\n      // Disabled wins over the value/placeholder color regardless of variant order.\n      'group-data-[disabled]:!text-[var(--ui-form-text-disabled)]',\n      className\n    )}\n    {...props}\n  />\n));\nSelectValue.displayName = 'SelectValue';\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'group flex h-8 w-full min-w-0 items-center gap-2 rounded border bg-[var(--ui-form-background-idle)] border-[var(--ui-form-border-idle)] px-3 text-sm leading-6 text-[var(--ui-form-text-value)] outline-none transition-colors',\n      'not-data-[disabled]:hover:border-[var(--ui-form-border-hover)]',\n      'focus-visible:border-[var(--ui-form-border-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n      'data-[popup-open]:border-[var(--ui-form-border-active)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]',\n      'data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-form-border-disabled)] data-[disabled]:bg-[var(--ui-form-background-disabled)] data-[disabled]:text-[var(--ui-form-text-disabled)]',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon className=\"flex shrink-0 items-center text-[var(--ui-form-icon-idle)] group-data-[disabled]:text-[var(--ui-form-icon-disabled)]\">\n      <ChevronDownIcon\n        size={16}\n        className=\"transition-transform group-data-[popup-open]:rotate-180\"\n      />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = 'SelectTrigger';\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Popup> & {\n    sideOffset?: number;\n    align?: SelectPrimitive.Positioner.Props['align'];\n    side?: SelectPrimitive.Positioner.Props['side'];\n  }\n>(({ className, children, sideOffset = 4, align = 'start', side = 'bottom', ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Positioner\n      sideOffset={sideOffset}\n      align={align}\n      side={side}\n      alignItemWithTrigger={false}\n      className=\"z-50 outline-none\"\n    >\n      <SelectPrimitive.Popup\n        ref={ref}\n        className={cn(\n          'max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded border border-border bg-background py-1 text-sm text-foreground shadow-md outline-none',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </SelectPrimitive.Popup>\n    </SelectPrimitive.Positioner>\n  </SelectPrimitive.Portal>\n));\nSelectContent.displayName = 'SelectContent';\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default items-center gap-2 py-1.5 pr-8 pl-3 leading-6 outline-none select-none',\n      'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',\n      'data-[disabled]:pointer-events-none data-[disabled]:text-[var(--ui-form-text-disabled)]',\n      className\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText className=\"min-w-0 flex-1 truncate\">\n      {children}\n    </SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"absolute right-2 flex items-center text-[var(--ui-form-icon-idle)]\">\n      <CheckIcon size={16} />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = 'SelectItem';\n\nconst SelectGroupLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.GroupLabel\n    ref={ref}\n    className={cn('px-3 py-1.5 text-xs text-muted-foreground', className)}\n    {...props}\n  />\n));\nSelectGroupLabel.displayName = 'SelectGroupLabel';\n\nexport {\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectContent,\n  SelectItem,\n  SelectGroup,\n  SelectGroupLabel,\n};\n"],"names":["Select","SelectPrimitive","SelectGroup","SelectValue","React","className","props","ref","jsx","cn","SelectTrigger","children","jsxs","ChevronDownIcon","SelectContent","sideOffset","align","side","SelectItem","CheckIcon","SelectGroupLabel"],"mappings":";;;;;AAwBA,MAAMA,IAASC,EAAgB,MAEzBC,IAAcD,EAAgB,OAE9BE,IAAcC,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACP,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA;AAAA,MAEA;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAY,cAAc;AAE1B,MAAMO,IAAgBN,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,GAAGL,KAASC,MACpC,gBAAAK;AAAA,EAACX,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAA;AAAA,MAAAK;AAAA,MACD,gBAAAH,EAACP,EAAgB,MAAhB,EAAqB,WAAU,wHAC9B,UAAA,gBAAAO;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,QAAA;AAAA,MAAA,EACZ,CACF;AAAA,IAAA;AAAA,EAAA;AACF,CACD;AACDH,EAAc,cAAc;AAE5B,MAAMI,IAAgBV,EAAM,WAO1B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,YAAAI,IAAa,GAAG,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,GAAGX,EAAA,GAASC,MACtF,gBAAAC,EAACP,EAAgB,QAAhB,EACC,UAAA,gBAAAO;AAAA,EAACP,EAAgB;AAAA,EAAhB;AAAA,IACC,YAAAc;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,sBAAsB;AAAA,IACtB,WAAU;AAAA,IAEV,UAAA,gBAAAT;AAAA,MAACP,EAAgB;AAAA,MAAhB;AAAA,QACC,KAAAM;AAAA,QACA,WAAWE;AAAA,UACT;AAAA,UACAJ;AAAA,QAAA;AAAA,QAED,GAAGC;AAAA,QAEH,UAAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF,GACF,CACD;AACDG,EAAc,cAAc;AAE5B,MAAMI,IAAad,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,GAAGL,KAASC,MACpC,gBAAAK;AAAA,EAACX,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE,EAACP,EAAgB,UAAhB,EAAyB,WAAU,2BACjC,UAAAU,GACH;AAAA,MACA,gBAAAH,EAACP,EAAgB,eAAhB,EAA8B,WAAU,sEACvC,UAAA,gBAAAO,EAACW,GAAA,EAAU,MAAM,GAAA,CAAI,EAAA,CACvB;AAAA,IAAA;AAAA,EAAA;AACF,CACD;AACDD,EAAW,cAAc;AAEzB,MAAME,IAAmBhB,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACP,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE,EAAG,6CAA6CJ,CAAS;AAAA,IACnE,GAAGC;AAAA,EAAA;AACN,CACD;AACDc,EAAiB,cAAc;"}