@acronis-platform/ui-react 0.62.0 → 1.0.0

package/dist/components/ui/input-text-area/input-text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-text-area.js","sources":["../../../../src/components/ui/input-text-area/input-text-area.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputTextArea\" component: a full multiline text field built\n// around a `<textarea>` (themed by the dedicated `--ui-input-text-area-*` tier). It\n// adds the field furniture: an optional `label` (with an optional required `*`) and\n// an optional `description` or `error` message below. Passing `error` switches the\n// field to its error treatment — the box gets the red error border (via the\n// textarea's `aria-invalid` styling) and the red error message replaces the\n// description. The box fill / border are wired per state: idle / hover / focus\n// (`border-color-focus` + a 3px `--ui-focus-primary` ring) / disabled; the error\n// state (driven by `aria-invalid`) swaps the border to\n// `error-msg-box-border-color-{idle,hover}` and the focus ring to `--ui-focus-error`.\n// Box geometry (96px min-height, 4px radius, 12px padding-x, 8px padding-y) comes\n// from `--ui-input-text-area-box-*`; it grows with vertical resize. `ref` and\n// `className` target the underlying `<textarea>`, so the bare usage\n// (`<InputTextArea placeholder=… />`, no label) renders just the box.\nexport interface InputTextAreaProps\n  extends Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> {\n  /** Field label, rendered above the textarea. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the textarea. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /**\n   * Error message below the textarea. Its presence switches the field to the error\n   * treatment (red box border + red message).\n   */\n  error?: React.ReactNode;\n}\n\nconst InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      description,\n      error,\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    return (\n      <div className=\"flex w-full min-w-[var(--ui-input-text-area-container-width-min)] flex-col gap-[var(--ui-input-text-area-container-gap)]\">\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-text-area-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-text-area-label-color-disabled)]'\n                : 'text-[var(--ui-input-text-area-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-text-area-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <textarea\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          className={cn(\n            'min-h-[var(--ui-input-text-area-box-height-min)] w-full min-w-0 resize-y rounded-[var(--ui-input-text-area-box-border-radius)] border bg-[var(--ui-input-text-area-box-color-idle)] border-[var(--ui-input-text-area-border-color-idle)] px-[var(--ui-input-text-area-box-padding-x)] py-[var(--ui-input-text-area-box-padding-y)] text-sm leading-6 text-[var(--ui-input-text-area-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-area-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px]',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-area-border-color-hover)] enabled:hover:text-[var(--ui-input-text-area-value-color-hover)] enabled:hover:placeholder:text-[var(--ui-input-text-area-placeholder-color-hover)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-text-area-error-msg-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-area-border-color-disabled)] disabled:bg-[var(--ui-input-text-area-box-color-disabled)] disabled:text-[var(--ui-input-text-area-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-area-placeholder-color-disabled)]',\n            className\n          )}\n          {...props}\n        />\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-text-area-error-msg-error-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-text-area-description-color-disabled)]'\n                  : 'text-[var(--ui-input-text-area-description-color-idle)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputTextArea.displayName = 'InputTextArea';\n\nexport { InputTextArea };\n"],"names":["InputTextArea","React","className","id","label","required","description","error","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","jsxs","cn","jsx"],"mappings":";;;AAiCA,MAAMA,IAAgBC,EAAM;AAAA,EAC1B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAgBC;AAAA,IAChB,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUX,EAAM,MAAA,GAChBY,IAAUV,KAAMS,GAChBE,IAAY,GAAGD,CAAO,YAEtBE,IAAWR,KAAS,QAAQA,MAAU,IACtCS,IAAUD,KAAYN,GACtBQ,IAAUF,IAAWR,IAAQD,GAC7BY,IAAaD,KAAW,QAAQA,MAAY;AAElD,WACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,4HACZ,UAAA;AAAA,MAAAf,KAAS,QAAQA,MAAU,MAC1B,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASN;AAAA,UACT,WAAWO;AAAA,YACT;AAAA,YACAZ,IACI,0DACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAJ;AAAA,YACAC,KACC,gBAAAgB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAKN,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAV;AAAA,UACA,IAAIE;AAAA,UACJ,UAAAL;AAAA,UACA,gBAAcQ,KAAW;AAAA,UACzB,iBAAeX,KAAY;AAAA,UAC3B,oBAAkBa,IAAaJ,IAAY;AAAA,UAC3C,WAAWM;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAlB;AAAA,UAAA;AAAA,UAED,GAAGQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAGLQ,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIP;AAAA,UACJ,WAAWM;AAAA,YACT;AAAA,YACAL,IACI,2DACAP,IACE,gEACA;AAAA,UAAA;AAAA,UAGP,UAAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AACAjB,EAAc,cAAc;"}
+{"version":3,"file":"input-text-area.js","sources":["../../../../src/components/ui/input-text-area/input-text-area.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputTextArea\" component: a full multiline text field built\n// around a `<textarea>` (themed by the dedicated `--ui-input-text-area-*` tier). It\n// adds the field furniture: an optional `label` (with an optional required `*`) and\n// an optional `description` or `error` message below. Passing `error` switches the\n// field to its error treatment — the box gets the red error border (via the\n// textarea's `aria-invalid` styling) and the red error message replaces the\n// description. The box fill / border are wired per state: idle / hover / focus\n// (`border-color-focus` + a 3px `--ui-focus-primary` ring) / disabled; the error\n// state (driven by `aria-invalid`) swaps the border to\n// `error-msg-box-border-color-{idle,hover}` and the focus ring to `--ui-focus-error`.\n// Box geometry (96px min-height, 4px radius, 12px padding-x, 8px padding-y) comes\n// from `--ui-input-text-area-box-*`; it grows with vertical resize. `ref` targets\n// the underlying `<textarea>`; `className` targets the field wrapper (label + box\n// + message), as does `style`, so a consumer can size the whole field from a flex/grid\n// ancestor whichever one they reach for.\n// The bare usage (`<InputTextArea placeholder=… />`, no label) renders just the box.\nexport interface InputTextAreaProps\n  extends Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> {\n  /** Field label, rendered above the textarea. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the textarea. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /**\n   * Error message below the textarea. Its presence switches the field to the error\n   * treatment (red box border + red message).\n   */\n  error?: React.ReactNode;\n}\n\nconst InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(\n  (\n    {\n      className,\n      style,\n      id,\n      label,\n      required,\n      description,\n      error,\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    return (\n      <div\n        className={cn(\n          'flex min-w-[var(--ui-input-text-area-container-width-min)] flex-col gap-[var(--ui-input-text-area-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-text-area-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-text-area-label-color-disabled)]'\n                : 'text-[var(--ui-input-text-area-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-text-area-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <textarea\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          className={cn(\n            'min-h-[var(--ui-input-text-area-box-height-min)] w-full min-w-0 resize-y rounded-[var(--ui-input-text-area-box-border-radius)] border bg-[var(--ui-input-text-area-box-color-idle)] border-[var(--ui-input-text-area-border-color-idle)] px-[var(--ui-input-text-area-box-padding-x)] py-[var(--ui-input-text-area-box-padding-y)] text-sm leading-6 text-[var(--ui-input-text-area-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-area-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px]',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-area-border-color-hover)] enabled:hover:text-[var(--ui-input-text-area-value-color-hover)] enabled:hover:placeholder:text-[var(--ui-input-text-area-placeholder-color-hover)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-text-area-error-msg-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-area-border-color-disabled)] disabled:bg-[var(--ui-input-text-area-box-color-disabled)] disabled:text-[var(--ui-input-text-area-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-area-placeholder-color-disabled)]'\n          )}\n          {...props}\n        />\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-text-area-error-msg-error-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-text-area-description-color-disabled)]'\n                  : 'text-[var(--ui-input-text-area-description-color-idle)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputTextArea.displayName = 'InputTextArea';\n\nexport { InputTextArea };\n"],"names":["InputTextArea","React","className","style","id","label","required","description","error","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","jsxs","cn","jsx"],"mappings":";;;AAmCA,MAAMA,IAAgBC,EAAM;AAAA,EAC1B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAgBC;AAAA,IAChB,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUZ,EAAM,MAAA,GAChBa,IAAUV,KAAMS,GAChBE,IAAY,GAAGD,CAAO,YAEtBE,IAAWR,KAAS,QAAQA,MAAU,IACtCS,IAAUD,KAAYN,GACtBQ,IAAUF,IAAWR,IAAQD,GAC7BY,IAAaD,KAAW,QAAQA,MAAY;AAElD,WACE,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAnB;AAAA,QAAA;AAAA,QAEF,OAAAC;AAAA,QAEC,UAAA;AAAA,UAAAE,KAAS,QAAQA,MAAU,MAC1B,gBAAAe;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAASN;AAAA,cACT,WAAWO;AAAA,gBACT;AAAA,gBACAZ,IACI,0DACA;AAAA,cAAA;AAAA,cAGL,UAAA;AAAA,gBAAAJ;AAAA,gBACAC,KACC,gBAAAgB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,eAAY;AAAA,oBACZ,WAAU;AAAA,oBACX,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAED;AAAA,YAAA;AAAA,UAAA;AAAA,UAKN,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAAV;AAAA,cACA,IAAIE;AAAA,cACJ,UAAAL;AAAA,cACA,gBAAcQ,KAAW;AAAA,cACzB,iBAAeX,KAAY;AAAA,cAC3B,oBAAkBa,IAAaJ,IAAY;AAAA,cAC3C,WAAWM;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAED,GAAGV;AAAA,YAAA;AAAA,UAAA;AAAA,UAGLQ,KACC,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAIP;AAAA,cACJ,WAAWM;AAAA,gBACT;AAAA,gBACAL,IACI,2DACAP,IACE,gEACA;AAAA,cAAA;AAAA,cAGP,UAAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAlB,EAAc,cAAc;"}

package/dist/components/ui/link/link.js

@@ -1,39 +1,54 @@
-import { jsxs as c, Fragment as s, jsx as v } from "react/jsx-runtime";
-import * as d from "react";
-import { mergeProps as x } from "@base-ui/react/merge-props";
-import { useRender as m } from "@base-ui/react/use-render";
-import { SquareArrowUpRightIcon as u } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as g } from "../../../lib/utils.js";
-const p = d.forwardRef(
-  ({ className: i, external: o, disabled: e, href: r, children: t, render: a, ...n }, l) => m({
-    render: a,
-    ref: l,
-    defaultTagName: "a",
-    props: x(
-      {
-        className: g(
-          "inline-flex items-center gap-[var(--ui-link-global-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0",
-          "text-[var(--ui-link-normal-text-color-idle)] [text-decoration:var(--ui-link-global-text-decoration-idle)] [&_svg]:text-[var(--ui-link-normal-external-icon-color-idle)]",
-          "hover:text-[var(--ui-link-normal-text-color-hover)] hover:[text-decoration:var(--ui-link-global-text-decoration-hover)] hover:[&_svg]:text-[var(--ui-link-normal-external-icon-color-hover)]",
-          "active:text-[var(--ui-link-normal-text-color-active)] active:[text-decoration:var(--ui-link-global-text-decoration-active)] active:[&_svg]:text-[var(--ui-link-normal-external-icon-color-active)]",
-          "focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
-          "aria-disabled:pointer-events-none aria-disabled:text-[var(--ui-link-normal-text-color-disabled)] aria-disabled:[text-decoration:var(--ui-link-global-text-decoration-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-normal-external-icon-color-disabled)]",
-          i
-        ),
-        href: e ? void 0 : r,
-        "aria-disabled": e || void 0,
-        tabIndex: e ? -1 : void 0,
-        children: /* @__PURE__ */ c(s, { children: [
-          t,
-          o && /* @__PURE__ */ v(u, { size: 16 })
-        ] })
-      },
-      n
-    )
-  })
+import { jsxs as d, Fragment as x, jsx as m } from "react/jsx-runtime";
+import * as u from "react";
+import { mergeProps as g } from "@base-ui/react/merge-props";
+import { useRender as k } from "@base-ui/react/use-render";
+import { cva as b } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { SquareArrowUpRightIcon as p } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as f } from "../../../lib/utils.js";
+const h = b(
+  "inline-flex items-center gap-[var(--ui-link-global-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0 [text-decoration:var(--ui-link-global-text-decoration-idle)] hover:[text-decoration:var(--ui-link-global-text-decoration-hover)] active:[text-decoration:var(--ui-link-global-text-decoration-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] aria-disabled:pointer-events-none aria-disabled:[text-decoration:var(--ui-link-global-text-decoration-disabled)]",
+  {
+    variants: {
+      variant: {
+        normal: "text-[var(--ui-link-normal-text-color-idle)] [&_svg]:text-[var(--ui-link-normal-external-icon-color-idle)] hover:text-[var(--ui-link-normal-text-color-hover)] hover:[&_svg]:text-[var(--ui-link-normal-external-icon-color-hover)] active:text-[var(--ui-link-normal-text-color-active)] active:[&_svg]:text-[var(--ui-link-normal-external-icon-color-active)] aria-disabled:text-[var(--ui-link-normal-text-color-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-normal-external-icon-color-disabled)]",
+        // Text color only — no icon classes (the surface has no external icon) and no
+        // `aria-disabled:` color: Figma marks the disabled state unsupported on a
+        // backdrop ("disable state not supported onBackdrop") and the tier ships no
+        // `--ui-link-inverse-*-disabled` token to reference. `disabled` still renders
+        // the link inert; only its color stays at the idle value.
+        inverse: "text-[var(--ui-link-inverse-text-color-idle)] hover:text-[var(--ui-link-inverse-text-color-hover)] active:text-[var(--ui-link-inverse-text-color-active)]"
+      }
+    },
+    defaultVariants: {
+      variant: "normal"
+    }
+  }
+), _ = u.forwardRef(
+  ({ className: o, variant: i, external: t, disabled: a, href: n, children: l, render: s, ...v }, c) => {
+    const r = i === "inverse", e = a && !r;
+    return k({
+      render: s,
+      ref: c,
+      defaultTagName: "a",
+      props: g(
+        {
+          className: f(h({ variant: i }), o),
+          href: e ? void 0 : n,
+          "aria-disabled": e || void 0,
+          tabIndex: e ? -1 : void 0,
+          children: /* @__PURE__ */ d(x, { children: [
+            l,
+            t && !r && /* @__PURE__ */ m(p, { size: 16 })
+          ] })
+        },
+        v
+      )
+    });
+  }
 );
-p.displayName = "Link";
+_.displayName = "Link";
 export {
-  p as Link
+  _ as Link,
+  h as linkVariants
 };
 //# sourceMappingURL=link.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["../../../../src/components/ui/link/link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { SquareArrowUpRightIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"Link\" component: an inline text link (semibold, 14/24) with an\n// optional trailing external-link icon (`external`). Themed by the `--ui-link-*`\n// tier — each state wires its own text color (`--ui-link-normal-text-color-*`), text\n// decoration (`--ui-link-global-text-decoration-*`; underline on hover only) and\n// external-icon color (`--ui-link-normal-external-icon-color-*`, kept separate from\n// the text per the tier). The tier also exposes an `inverse` set\n// (`--ui-link-inverse-*`) for links on dark/brand surfaces; it is not wired here yet.\n// Focus paints a 3px `--ui-focus-primary` ring. Polymorphic via Base UI `useRender`\n// — pass `render` to render a router `Link` instead of the default `<a>`. `disabled`\n// makes it inert: disabled color, removed from the tab order, no navigation.\n//\n// The Figma container has a fixed 32px height for grid alignment\n// (`--ui-link-global-container-height`); it is intentionally NOT applied here so the\n// link flows inline within prose.\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Append a trailing external-link icon (e.g. for links that leave the app). */\n  external?: boolean;\n  /** Render the link inert: disabled color, removed from the tab order, no navigation. */\n  disabled?: boolean;\n  /**\n   * Replace the rendered `<a>` with another element or component (Base UI\n   * composition) — e.g. a router `Link`. Props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ className, external, disabled, href, children, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'a',\n      props: mergeProps<'a'>(\n        {\n          className: cn(\n            'inline-flex items-center gap-[var(--ui-link-global-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0',\n            'text-[var(--ui-link-normal-text-color-idle)] [text-decoration:var(--ui-link-global-text-decoration-idle)] [&_svg]:text-[var(--ui-link-normal-external-icon-color-idle)]',\n            'hover:text-[var(--ui-link-normal-text-color-hover)] hover:[text-decoration:var(--ui-link-global-text-decoration-hover)] hover:[&_svg]:text-[var(--ui-link-normal-external-icon-color-hover)]',\n            'active:text-[var(--ui-link-normal-text-color-active)] active:[text-decoration:var(--ui-link-global-text-decoration-active)] active:[&_svg]:text-[var(--ui-link-normal-external-icon-color-active)]',\n            'focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-disabled:pointer-events-none aria-disabled:text-[var(--ui-link-normal-text-color-disabled)] aria-disabled:[text-decoration:var(--ui-link-global-text-decoration-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-normal-external-icon-color-disabled)]',\n            className\n          ),\n          href: disabled ? undefined : href,\n          'aria-disabled': disabled || undefined,\n          tabIndex: disabled ? -1 : undefined,\n          children: (\n            <>\n              {children}\n              {external && <SquareArrowUpRightIcon size={16} />}\n            </>\n          ),\n        },\n        props\n      ),\n    })\n);\nLink.displayName = 'Link';\n\nexport { Link };\n"],"names":["Link","React","className","external","disabled","href","children","render","props","ref","useRender","mergeProps","cn","jsxs","Fragment","jsx","SquareArrowUpRightIcon"],"mappings":";;;;;;AAiCA,MAAMA,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,QAAAC,GAAQ,GAAGC,KAASC,MACpEC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAV;AAAA,QAAA;AAAA,QAEF,MAAME,IAAW,SAAYC;AAAA,QAC7B,iBAAiBD,KAAY;AAAA,QAC7B,UAAUA,IAAW,KAAK;AAAA,QAC1B,UACE,gBAAAS,EAAAC,GAAA,EACG,UAAA;AAAA,UAAAR;AAAA,UACAH,KAAY,gBAAAY,EAACC,GAAA,EAAuB,MAAM,GAAA,CAAI;AAAA,QAAA,EAAA,CACjD;AAAA,MAAA;AAAA,MAGJR;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAR,EAAK,cAAc;"}
+{"version":3,"file":"link.js","sources":["../../../../src/components/ui/link/link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { SquareArrowUpRightIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"Link\" component set: an inline text link (semibold, 14/24) with\n// an optional trailing external-link icon (`external`). Themed by the `--ui-link-*`\n// tier, whose per-surface sets map to the Figma `background` variant — `normal` for\n// ordinary surfaces, `inverse` for links over a backdrop/scrim. Each state wires its\n// own text color (`--ui-link-<surface>-text-color-*`); on `normal` the external icon\n// gets its own color too (`--ui-link-normal-external-icon-color-*`, kept separate from\n// the text per the tier). Text decoration is shared across surfaces\n// (`--ui-link-global-text-decoration-*`; underline on hover only). Focus paints a 3px\n// `--ui-focus-primary` ring on both surfaces. Polymorphic via Base UI `useRender` —\n// pass `render` to render a router `Link` instead of the default `<a>`.\n//\n// Two things the `inverse` surface deliberately does NOT have, both per the Figma set,\n// and both therefore inert props there rather than half-applied ones:\n//   - No external icon: the `SquareArrowUpRight` layer exists only in the five\n//     `background=normal` variants, so `external` renders nothing — same as toggling\n//     Figma's `External` on an inverse instance. tokens-pd does emit\n//     `--ui-link-inverse-external-icon-color-*`, but the design never uses it, so it is\n//     left unreferenced rather than used to invent an icon.\n//   - No disabled state: the Figma set has only four enabled inverse variants and marks\n//     the fifth unsupported (\"disable state not supported onBackdrop\"), so `disabled` is\n//     discarded rather than applied without its color. Consumers that need an inert link\n//     on a backdrop should omit it instead.\n//\n// The Figma container has a fixed 32px height for grid alignment\n// (`--ui-link-global-container-height`); it is intentionally NOT applied here so the\n// link flows inline within prose.\nconst linkVariants = cva(\n  'inline-flex items-center gap-[var(--ui-link-global-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0 [text-decoration:var(--ui-link-global-text-decoration-idle)] hover:[text-decoration:var(--ui-link-global-text-decoration-hover)] active:[text-decoration:var(--ui-link-global-text-decoration-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] aria-disabled:pointer-events-none aria-disabled:[text-decoration:var(--ui-link-global-text-decoration-disabled)]',\n  {\n    variants: {\n      variant: {\n        normal:\n          'text-[var(--ui-link-normal-text-color-idle)] [&_svg]:text-[var(--ui-link-normal-external-icon-color-idle)] hover:text-[var(--ui-link-normal-text-color-hover)] hover:[&_svg]:text-[var(--ui-link-normal-external-icon-color-hover)] active:text-[var(--ui-link-normal-text-color-active)] active:[&_svg]:text-[var(--ui-link-normal-external-icon-color-active)] aria-disabled:text-[var(--ui-link-normal-text-color-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-normal-external-icon-color-disabled)]',\n        // Text color only — no icon classes (the surface has no external icon) and no\n        // `aria-disabled:` color: Figma marks the disabled state unsupported on a\n        // backdrop (\"disable state not supported onBackdrop\") and the tier ships no\n        // `--ui-link-inverse-*-disabled` token to reference. `disabled` still renders\n        // the link inert; only its color stays at the idle value.\n        inverse:\n          'text-[var(--ui-link-inverse-text-color-idle)] hover:text-[var(--ui-link-inverse-text-color-hover)] active:text-[var(--ui-link-inverse-text-color-active)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'normal',\n    },\n  }\n);\n\nexport interface LinkProps\n  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,\n    VariantProps<typeof linkVariants> {\n  /**\n   * Which surface the link sits on (Figma's `background`): `normal` for ordinary\n   * surfaces, `inverse` for a backdrop/scrim or other dark brand surface.\n   */\n  variant?: 'normal' | 'inverse';\n  /**\n   * Append a trailing external-link icon (e.g. for links that leave the app).\n   * Has no effect on `variant=\"inverse\"` — the design defines no external icon for\n   * links on a backdrop.\n   */\n  external?: boolean;\n  /**\n   * Render the link inert: disabled color, removed from the tab order, no navigation.\n   * Ignored entirely on `variant=\"inverse\"` — the design defines no disabled state on\n   * a backdrop, so the link renders exactly as an enabled one (still navigable and\n   * focusable). Omit the link, or use `variant=\"normal\"`, when you need it inert.\n   */\n  disabled?: boolean;\n  /**\n   * Replace the rendered `<a>` with another element or component (Base UI\n   * composition) — e.g. a router `Link`. Props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ className, variant, external, disabled, href, children, render, ...props }, ref) => {\n    // The `inverse` surface exists only in the four enabled Figma variants, so neither\n    // of the two props the design leaves out of it has any effect there: `disabled` is\n    // discarded outright (the link stays navigable, focusable and hoverable, with no\n    // `aria-disabled`) and `external` renders no icon.\n    const isInverse = variant === 'inverse';\n    const isDisabled = disabled && !isInverse;\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'a',\n      props: mergeProps<'a'>(\n        {\n          className: cn(linkVariants({ variant }), className),\n          href: isDisabled ? undefined : href,\n          'aria-disabled': isDisabled || undefined,\n          tabIndex: isDisabled ? -1 : undefined,\n          children: (\n            <>\n              {children}\n              {external && !isInverse && <SquareArrowUpRightIcon size={16} />}\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nLink.displayName = 'Link';\n\nexport { Link, linkVariants };\n"],"names":["linkVariants","cva","Link","React","className","variant","external","disabled","href","children","render","props","ref","isInverse","isDisabled","useRender","mergeProps","cn","jsxs","Fragment","jsx","SquareArrowUpRightIcon"],"mappings":";;;;;;;AAkCA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMF,SACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GA8BMC,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAAQ;AAKrF,UAAMC,IAAYR,MAAY,WACxBS,IAAaP,KAAY,CAACM;AAEhC,WAAOE,EAAU;AAAA,MACf,QAAAL;AAAA,MACA,KAAAE;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOI;AAAA,QACL;AAAA,UACE,WAAWC,EAAGjB,EAAa,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,UAClD,MAAMU,IAAa,SAAYN;AAAA,UAC/B,iBAAiBM,KAAc;AAAA,UAC/B,UAAUA,IAAa,KAAK;AAAA,UAC5B,UACE,gBAAAI,EAAAC,GAAA,EACG,UAAA;AAAA,YAAAV;AAAA,YACAH,KAAY,CAACO,KAAa,gBAAAO,EAACC,GAAA,EAAuB,MAAM,GAAA,CAAI;AAAA,UAAA,EAAA,CAC/D;AAAA,QAAA;AAAA,QAGJV;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAT,EAAK,cAAc;"}

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

@@ -8,7 +8,7 @@ const g = t.Root, b = a.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ *
   {
     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",
+      "flex h-[var(--ui-input-text-global-box-height)] 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)]",

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

@@ -1 +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;"}
+{"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)] 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/popover/popover.js

@@ -1,79 +1,98 @@
 import { jsx as a } from "react/jsx-runtime";
 import * as i from "react";
-import { Popover as o } from "@base-ui/react/popover";
-import { cn as d } from "../../../lib/utils.js";
-import { usePortalContainer as b } from "../../../lib/portal-container.js";
-const C = o.Root, R = o.Trigger, z = o.Portal, g = i.forwardRef(
+import { Popover as t } from "@base-ui/react/popover";
+import { cn as n } from "../../../lib/utils.js";
+import { usePortalContainer as y } from "../../../lib/portal-container.js";
+const T = t.Root, k = t.Trigger, D = t.Portal;
+function p(o) {
+  return o == null ? null : "current" in o ? o.current : o;
+}
+function N(o) {
+  const [e, r] = i.useState(
+    () => p(o)
+  );
+  return i.useLayoutEffect(() => {
+    r(p(o));
+  }, [o]), e;
+}
+const C = i.forwardRef(
   ({
-    className: r,
+    className: o,
     side: e = "bottom",
-    align: t = "center",
-    sideOffset: p = 4,
-    portal: l = !0,
-    portalContainer: s,
+    align: r = "center",
+    sideOffset: u = 4,
+    portal: d = !0,
+    portalContainer: f,
     keepMounted: v,
-    ...c
-  }, f) => {
-    const m = b(), u = s ?? m, n = /* @__PURE__ */ a(
-      o.Positioner,
+    collisionBoundary: c,
+    positionMethod: m,
+    ...b
+  }, g) => {
+    const P = y(), l = f ?? P, h = N(l), x = d && h != null, w = m ?? (x ? "fixed" : void 0), s = /* @__PURE__ */ a(
+      t.Positioner,
       {
         side: e,
-        align: t,
-        sideOffset: p,
+        align: r,
+        sideOffset: u,
+        collisionBoundary: c,
+        positionMethod: w,
         className: "z-50",
         children: /* @__PURE__ */ a(
-          o.Popup,
+          t.Popup,
           {
-            ref: f,
-            className: d(
+            ref: g,
+            className: n(
               "min-w-[var(--ui-popover-container-min-width)] max-w-[var(--ui-popover-container-max-width)] rounded-[var(--ui-popover-container-border-radius)] border-[length:var(--ui-popover-container-border-width)] border-solid border-[var(--ui-popover-container-border-color)] bg-[var(--ui-popover-container-color)] text-foreground outline-none",
               "duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95",
               "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-              r
+              o
             ),
-            ...c
+            ...b
           }
         )
       }
     );
-    return l ? /* @__PURE__ */ a(o.Portal, { container: u, keepMounted: v, children: n }) : n;
+    return d ? /* @__PURE__ */ a(
+      t.Portal,
+      {
+        container: l,
+        keepMounted: v,
+        children: s
+      }
+    ) : s;
   }
 );
-g.displayName = "PopoverContent";
-const P = i.forwardRef(
-  ({ className: r, ...e }, t) => /* @__PURE__ */ a(
-    "div",
-    {
-      ref: t,
-      className: d(
-        "flex w-full flex-col gap-[var(--ui-popover-body-gap)] px-4 py-[var(--ui-popover-body-padding-y)]",
-        r
-      ),
-      ...e
-    }
-  )
-);
-P.displayName = "PopoverBody";
-const h = i.forwardRef(
-  ({ className: r, ...e }, t) => /* @__PURE__ */ a(
-    "div",
-    {
-      ref: t,
-      className: d(
-        "flex h-[var(--ui-footer-global-height)] w-full shrink-0 items-center justify-end gap-[var(--ui-footer-global-gap)] border-t-[length:var(--ui-footer-default-border-width)] border-solid border-[var(--ui-footer-default-border-color)] bg-[var(--ui-footer-default-color)] px-[var(--ui-footer-global-padding-x)]",
-        r
-      ),
-      ...e
-    }
-  )
-);
-h.displayName = "PopoverFooter";
+C.displayName = "PopoverContent";
+const R = i.forwardRef(({ className: o, ...e }, r) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: r,
+    className: n(
+      "flex w-full flex-col gap-[var(--ui-popover-body-gap)] px-4 py-[var(--ui-popover-body-padding-y)]",
+      o
+    ),
+    ...e
+  }
+));
+R.displayName = "PopoverBody";
+const z = i.forwardRef(({ className: o, ...e }, r) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: r,
+    className: n(
+      "flex h-[var(--ui-footer-global-height)] w-full shrink-0 items-center justify-end gap-[var(--ui-footer-global-gap)] border-t-[length:var(--ui-footer-default-border-width)] border-solid border-[var(--ui-footer-default-border-color)] bg-[var(--ui-footer-default-color)] px-[var(--ui-footer-global-padding-x)]",
+      o
+    ),
+    ...e
+  }
+));
+z.displayName = "PopoverFooter";
 export {
-  C as Popover,
-  P as PopoverBody,
-  g as PopoverContent,
-  h as PopoverFooter,
-  z as PopoverPortal,
-  R as PopoverTrigger
+  T as Popover,
+  R as PopoverBody,
+  C as PopoverContent,
+  z as PopoverFooter,
+  D as PopoverPortal,
+  k as PopoverTrigger
 };
 //# sourceMappingURL=popover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../../src/components/ui/popover/popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `popover`\n// (packages/ui-legacy/src/components/ui/popover.tsx). A floating panel anchored\n// to a trigger, built on the Base UI Popover primitive (positioning, focus\n// management, outside-press / Esc dismissal, ARIA come from Base UI). Themed by\n// the `--ui-popover-*` tier (container chrome: color, border, radius, min/max\n// width) per Figma node 6364:17907. The optional `PopoverBody`/`PopoverFooter`\n// parts mirror that node's `Body` slot and `FooterDefault` recipe — `PopoverBody`\n// from `--ui-popover-body-*`, `PopoverFooter` from the shared `--ui-footer-*`\n// tier (also used by other components' default action-row footer). Text color\n// stays on the bridged semantic token (--ui-text-on-surface-primary), which the\n// design references directly rather than a Popover-specific token.\n// Enter/exit animations use `tw-animate-css` keyed to Base UI's data-[open] /\n// data-[closed] / data-[side] attributes.\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverPortal = PopoverPrimitive.Portal;\n\nexport interface PopoverContentProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Popup> {\n  /** Which side of the trigger to render on. */\n  side?: PopoverPrimitive.Positioner.Props['side'];\n  /** Alignment along the chosen side. */\n  align?: PopoverPrimitive.Positioner.Props['align'];\n  /** Distance in px from the trigger. */\n  sideOffset?: number;\n  /**\n   * Render inside a portal (default `true`). Set `false` for inline usage\n   * (e.g. when supplying your own `PopoverPortal`).\n   */\n  portal?: boolean;\n  /**\n   * Portal container. Pass a shadow-root mount for isolated-style previews\n   * (the docs demos do this via `useShadowMount`).\n   */\n  portalContainer?: PopoverPrimitive.Portal.Props['container'];\n  /** Keep the content mounted while closed (Base UI `Portal` prop). */\n  keepMounted?: PopoverPrimitive.Portal.Props['keepMounted'];\n}\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Popup>,\n  PopoverContentProps\n>(\n  (\n    {\n      className,\n      side = 'bottom',\n      align = 'center',\n      sideOffset = 4,\n      portal = true,\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    const positioner = (\n      <PopoverPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        className=\"z-50\"\n      >\n        <PopoverPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'min-w-[var(--ui-popover-container-min-width)] max-w-[var(--ui-popover-container-max-width)] rounded-[var(--ui-popover-container-border-radius)] border-[length:var(--ui-popover-container-border-width)] border-solid border-[var(--ui-popover-container-border-color)] bg-[var(--ui-popover-container-color)] text-foreground outline-none',\n            'duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95',\n            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    );\n\n    return portal ? (\n      <PopoverPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n        {positioner}\n      </PopoverPrimitive.Portal>\n    ) : (\n      positioner\n    );\n  }\n);\nPopoverContent.displayName = 'PopoverContent';\n\n/**\n * Vertical-rhythm wrapper for a `PopoverContent`'s main content — the `Body`\n * slot in the Figma node. Themed from `--ui-popover-body-*` (gap, padding-y);\n * horizontal inset is a plain utility since the design has no dedicated\n * component token for it.\n */\nconst PopoverBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex w-full flex-col gap-[var(--ui-popover-body-gap)] px-4 py-[var(--ui-popover-body-padding-y)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nPopoverBody.displayName = 'PopoverBody';\n\n/**\n * Default action-row footer — the `FooterDefault` (`variant=default`) recipe\n * from the Figma node. Themed from the shared `--ui-footer-*` tier.\n */\nconst PopoverFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex h-[var(--ui-footer-global-height)] w-full shrink-0 items-center justify-end gap-[var(--ui-footer-global-gap)] border-t-[length:var(--ui-footer-default-border-width)] border-solid border-[var(--ui-footer-default-border-color)] bg-[var(--ui-footer-default-color)] px-[var(--ui-footer-global-padding-x)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nPopoverFooter.displayName = 'PopoverFooter';\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverPortal,\n  PopoverContent,\n  PopoverBody,\n  PopoverFooter,\n};\n"],"names":["Popover","PopoverPrimitive","PopoverTrigger","PopoverPortal","PopoverContent","React","className","side","align","sideOffset","portal","portalContainer","keepMounted","props","ref","ctxContainer","usePortalContainer","resolvedContainer","positioner","jsx","cn","PopoverBody","PopoverFooter"],"mappings":";;;;;AAoBA,MAAMA,IAAUC,EAAiB,MAE3BC,IAAiBD,EAAiB,SAElCE,IAAgBF,EAAiB,QAwBjCG,IAAiBC,EAAM;AAAA,EAI3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAS;AAAA,IACT,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAeC,EAAA,GACfC,IAAoBN,KAAmBI,GAEvCG,IACJ,gBAAAC;AAAA,MAAClB,EAAiB;AAAA,MAAjB;AAAA,QACC,MAAAM;AAAA,QACA,OAAAC;AAAA,QACA,YAAAC;AAAA,QACA,WAAU;AAAA,QAEV,UAAA,gBAAAU;AAAA,UAAClB,EAAiB;AAAA,UAAjB;AAAA,YACC,KAAAa;AAAA,YACA,WAAWM;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAd;AAAA,YAAA;AAAA,YAED,GAAGO;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAIJ,WAAOH,sBACJT,EAAiB,QAAjB,EAAwB,WAAWgB,GAAmB,aAAAL,GACpD,UAAAM,EAAA,CACH,IAEAA;AAAA,EAEJ;AACF;AACAd,EAAe,cAAc;AAQ7B,MAAMiB,IAAchB,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGO,EAAA,GAASC,MACxB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM;AAAA,QACT;AAAA,QACAd;AAAA,MAAA;AAAA,MAED,GAAGO;AAAA,IAAA;AAAA,EAAA;AAGV;AACAQ,EAAY,cAAc;AAM1B,MAAMC,IAAgBjB,EAAM;AAAA,EAC1B,CAAC,EAAE,WAAAC,GAAW,GAAGO,EAAA,GAASC,MACxB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM;AAAA,QACT;AAAA,QACAd;AAAA,MAAA;AAAA,MAED,GAAGO;AAAA,IAAA;AAAA,EAAA;AAGV;AACAS,EAAc,cAAc;"}
+{"version":3,"file":"popover.js","sources":["../../../../src/components/ui/popover/popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `popover`\n// (packages/ui-legacy/src/components/ui/popover.tsx). A floating panel anchored\n// to a trigger, built on the Base UI Popover primitive (positioning, focus\n// management, outside-press / Esc dismissal, ARIA come from Base UI). Themed by\n// the `--ui-popover-*` tier (container chrome: color, border, radius, min/max\n// width) per Figma node 6364:17907. The optional `PopoverBody`/`PopoverFooter`\n// parts mirror that node's `Body` slot and `FooterDefault` recipe — `PopoverBody`\n// from `--ui-popover-body-*`, `PopoverFooter` from the shared `--ui-footer-*`\n// tier (also used by other components' default action-row footer). Text color\n// stays on the bridged semantic token (--ui-text-on-surface-primary), which the\n// design references directly rather than a Popover-specific token.\n// Enter/exit animations use `tw-animate-css` keyed to Base UI's data-[open] /\n// data-[closed] / data-[side] attributes.\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverPortal = PopoverPrimitive.Portal;\n\n// Mirrors Base UI's own container resolution (FloatingPortal): a `container`\n// prop may be the node itself or a ref object wrapping it. A ref object is\n// always truthy, so a raw `Boolean(container)` would treat `ref.current ===\n// null` as a resolved container when Base UI actually falls back to\n// `document.body`.\nfunction resolvePortalContainerNode(\n  container: PopoverPrimitive.Portal.Props['container']\n): HTMLElement | ShadowRoot | null {\n  if (container == null) return null;\n  return 'current' in container ? container.current : container;\n}\n\n// Base UI resolves the same `container` prop inside a layout effect (see\n// FloatingPortal's useFloatingPortalNode), because a ref pointing at a node\n// rendered in the same commit isn't populated until after commit — React\n// attaches every ref in a commit before running any layout effect in it.\n// Resolving inline during render (as a plain expression) would race that:\n// on the ref's first commit `current` is still null, and since nothing\n// re-renders on a ref mutation, a wrong 'absolute' default could stick\n// indefinitely. Mirroring Base UI's own two-phase timing here — a state\n// value corrected by a layout effect — picks up a same-commit ref\n// correctly, same as Base UI does for its own portaling.\nfunction useResolvedPortalContainerNode(\n  container: PopoverPrimitive.Portal.Props['container']\n): HTMLElement | ShadowRoot | null {\n  const [node, setNode] = React.useState(() =>\n    resolvePortalContainerNode(container)\n  );\n\n  React.useLayoutEffect(() => {\n    setNode(resolvePortalContainerNode(container));\n  }, [container]);\n\n  return node;\n}\n\nexport interface PopoverContentProps extends React.ComponentPropsWithoutRef<\n  typeof PopoverPrimitive.Popup\n> {\n  /** Which side of the trigger to render on. */\n  side?: PopoverPrimitive.Positioner.Props['side'];\n  /** Alignment along the chosen side. */\n  align?: PopoverPrimitive.Positioner.Props['align'];\n  /** Distance in px from the trigger. */\n  sideOffset?: number;\n  /**\n   * Render inside a portal (default `true`). Set `false` for inline usage\n   * (e.g. when supplying your own `PopoverPortal`).\n   */\n  portal?: boolean;\n  /**\n   * Portal container. Pass a shadow-root mount for isolated-style previews\n   * (the docs demos do this via `useShadowMount`), or a constrained\n   * MFE/Shadow DOM mount point (see `PortalContainerProvider`).\n   */\n  portalContainer?: PopoverPrimitive.Portal.Props['container'];\n  /** Keep the content mounted while closed (Base UI `Portal` prop). */\n  keepMounted?: PopoverPrimitive.Portal.Props['keepMounted'];\n  /**\n   * Element/rect the popup is confined to when avoiding collisions. Defaults\n   * to Base UI's own `'clipping-ancestors'` behavior — left alone here,\n   * since pairing it with the `positionMethod` default below already avoids\n   * clipping inside a constrained `portalContainer` (see that prop's doc).\n   * Override explicitly if a different boundary is needed.\n   */\n  collisionBoundary?: PopoverPrimitive.Positioner.Props['collisionBoundary'];\n  /**\n   * Which CSS `position` the popup uses. Defaults to `'fixed'` whenever the\n   * popup is portaled (`portal` is not `false`) into a resolved\n   * `portalContainer` — an `'absolute'`-positioned popup\n   * (Base UI's own default) is still clipped by a `portalContainer` ancestor\n   * that constrains overflow (e.g. a Shadow DOM host with `overflow: hidden`)\n   * no matter how the collision boundary is computed, since it shares that\n   * ancestor's containing block. `'fixed'` escapes a plain overflow-clipping\n   * ancestor — for a `fixed`-positioned popup, the collision-detection\n   * library (floating-ui) drops overflow ancestors that don't establish\n   * their own containing block, so it clips against the real viewport\n   * instead, which is also unaffected by page scroll (unlike measuring\n   * `document.documentElement`'s own bounding rect, which shrinks by the\n   * scroll offset). Note this is not an absolute guarantee: an ancestor with\n   * `transform`, `filter`, `will-change`, `backdrop-filter`, `perspective`,\n   * or `contain: paint`/`layout` *does* establish a containing block, so it\n   * still clips (and repositions relative to) a `fixed` descendant. Override\n   * explicitly if a different strategy is needed.\n   */\n  positionMethod?: PopoverPrimitive.Positioner.Props['positionMethod'];\n}\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Popup>,\n  PopoverContentProps\n>(\n  (\n    {\n      className,\n      side = 'bottom',\n      align = 'center',\n      sideOffset = 4,\n      portal = true,\n      portalContainer,\n      keepMounted,\n      collisionBoundary,\n      positionMethod,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n    const resolvedContainerNode =\n      useResolvedPortalContainerNode(resolvedContainer);\n    // Gated on this component's own `portal` prop, not on whether the popup\n    // actually ends up inside a constrained containing block: `portal={false}`\n    // opts out of the viewport-escape defaults so inline content keeps its\n    // intended scroll-with-content behavior. A consumer who wraps this in\n    // their own ancestor Portal targeting the same constrained container can\n    // still get clipped — pass `positionMethod` explicitly in that case.\n    const appliesContainerDefaults = portal && resolvedContainerNode != null;\n    // 'absolute' (Base UI's default) shares its portal container's\n    // containing block, so a container that constrains overflow (e.g.\n    // `overflow: hidden` on a Shadow DOM host) clips the popup at its own\n    // edge no matter how the collision boundary is computed. 'fixed' escapes\n    // a plain overflow-clipping ancestor instead: floating-ui's clipping-\n    // ancestor detection drops overflow ancestors that don't establish their\n    // own containing block for a `fixed`-positioned element, so the platform\n    // default collision boundary ('clipping-ancestors') already resolves to\n    // the real (scroll-independent) viewport without needing an explicit\n    // `collisionBoundary` override here.\n    const resolvedPositionMethod =\n      positionMethod ?? (appliesContainerDefaults ? 'fixed' : undefined);\n\n    const positioner = (\n      <PopoverPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        collisionBoundary={collisionBoundary}\n        positionMethod={resolvedPositionMethod}\n        className=\"z-50\"\n      >\n        <PopoverPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'min-w-[var(--ui-popover-container-min-width)] max-w-[var(--ui-popover-container-max-width)] rounded-[var(--ui-popover-container-border-radius)] border-[length:var(--ui-popover-container-border-width)] border-solid border-[var(--ui-popover-container-border-color)] bg-[var(--ui-popover-container-color)] text-foreground outline-none',\n            'duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95',\n            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    );\n\n    return portal ? (\n      <PopoverPrimitive.Portal\n        container={resolvedContainer}\n        keepMounted={keepMounted}\n      >\n        {positioner}\n      </PopoverPrimitive.Portal>\n    ) : (\n      positioner\n    );\n  }\n);\nPopoverContent.displayName = 'PopoverContent';\n\n/**\n * Vertical-rhythm wrapper for a `PopoverContent`'s main content — the `Body`\n * slot in the Figma node. Themed from `--ui-popover-body-*` (gap, padding-y);\n * horizontal inset is a plain utility since the design has no dedicated\n * component token for it.\n */\nconst PopoverBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex w-full flex-col gap-[var(--ui-popover-body-gap)] px-4 py-[var(--ui-popover-body-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nPopoverBody.displayName = 'PopoverBody';\n\n/**\n * Default action-row footer — the `FooterDefault` (`variant=default`) recipe\n * from the Figma node. Themed from the shared `--ui-footer-*` tier.\n */\nconst PopoverFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-[var(--ui-footer-global-height)] w-full shrink-0 items-center justify-end gap-[var(--ui-footer-global-gap)] border-t-[length:var(--ui-footer-default-border-width)] border-solid border-[var(--ui-footer-default-border-color)] bg-[var(--ui-footer-default-color)] px-[var(--ui-footer-global-padding-x)]',\n      className\n    )}\n    {...props}\n  />\n));\nPopoverFooter.displayName = 'PopoverFooter';\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverPortal,\n  PopoverContent,\n  PopoverBody,\n  PopoverFooter,\n};\n"],"names":["Popover","PopoverPrimitive","PopoverTrigger","PopoverPortal","resolvePortalContainerNode","container","useResolvedPortalContainerNode","node","setNode","React","PopoverContent","className","side","align","sideOffset","portal","portalContainer","keepMounted","collisionBoundary","positionMethod","props","ref","ctxContainer","usePortalContainer","resolvedContainer","resolvedContainerNode","appliesContainerDefaults","resolvedPositionMethod","positioner","jsx","cn","PopoverBody","PopoverFooter"],"mappings":";;;;;AAoBA,MAAMA,IAAUC,EAAiB,MAE3BC,IAAiBD,EAAiB,SAElCE,IAAgBF,EAAiB;AAOvC,SAASG,EACPC,GACiC;AACjC,SAAIA,KAAa,OAAa,OACvB,aAAaA,IAAYA,EAAU,UAAUA;AACtD;AAYA,SAASC,EACPD,GACiC;AACjC,QAAM,CAACE,GAAMC,CAAO,IAAIC,EAAM;AAAA,IAAS,MACrCL,EAA2BC,CAAS;AAAA,EAAA;AAGtC,SAAAI,EAAM,gBAAgB,MAAM;AAC1B,IAAAD,EAAQJ,EAA2BC,CAAS,CAAC;AAAA,EAC/C,GAAG,CAACA,CAAS,CAAC,GAEPE;AACT;AAsDA,MAAMG,IAAiBD,EAAM;AAAA,EAI3B,CACE;AAAA,IACE,WAAAE;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAS;AAAA,IACT,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAeC,EAAA,GACfC,IAAoBR,KAAmBM,GACvCG,IACJnB,EAA+BkB,CAAiB,GAO5CE,IAA2BX,KAAUU,KAAyB,MAW9DE,IACJR,MAAmBO,IAA2B,UAAU,SAEpDE,IACJ,gBAAAC;AAAA,MAAC5B,EAAiB;AAAA,MAAjB;AAAA,QACC,MAAAW;AAAA,QACA,OAAAC;AAAA,QACA,YAAAC;AAAA,QACA,mBAAAI;AAAA,QACA,gBAAgBS;AAAA,QAChB,WAAU;AAAA,QAEV,UAAA,gBAAAE;AAAA,UAAC5B,EAAiB;AAAA,UAAjB;AAAA,YACC,KAAAoB;AAAA,YACA,WAAWS;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAnB;AAAA,YAAA;AAAA,YAED,GAAGS;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAIJ,WAAOL,IACL,gBAAAc;AAAA,MAAC5B,EAAiB;AAAA,MAAjB;AAAA,QACC,WAAWuB;AAAA,QACX,aAAAP;AAAA,QAEC,UAAAW;AAAA,MAAA;AAAA,IAAA,IAGHA;AAAA,EAEJ;AACF;AACAlB,EAAe,cAAc;AAQ7B,MAAMqB,IAActB,EAAM,WAGxB,CAAC,EAAE,WAAAE,GAAW,GAAGS,EAAA,GAASC,MAC1B,gBAAAQ;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAR;AAAA,IACA,WAAWS;AAAA,MACT;AAAA,MACAnB;AAAA,IAAA;AAAA,IAED,GAAGS;AAAA,EAAA;AACN,CACD;AACDW,EAAY,cAAc;AAM1B,MAAMC,IAAgBvB,EAAM,WAG1B,CAAC,EAAE,WAAAE,GAAW,GAAGS,EAAA,GAASC,MAC1B,gBAAAQ;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAR;AAAA,IACA,WAAWS;AAAA,MACT;AAAA,MACAnB;AAAA,IAAA;AAAA,IAED,GAAGS;AAAA,EAAA;AACN,CACD;AACDY,EAAc,cAAc;"}

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

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

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

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