@acronis-platform/ui-react 0.55.0 → 0.56.1

package/dist/components/ui/dialog/dialog.js

@@ -1,11 +1,11 @@
 import { jsx as t, jsxs as s, Fragment as D } from "react/jsx-runtime";
 import * as i from "react";
 import { Dialog as r } from "@base-ui/react/dialog";
-import { TimesIcon as y } from "@acronis-platform/icons-react/stroke-mono";
-import { cva as b } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { TimesIcon as b } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as w } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { cn as l } from "../../../lib/utils.js";
-import { usePortalContainer as v } from "../../../lib/portal-container.js";
-const w = b(
+import { usePortalContainer as y } from "../../../lib/portal-container.js";
+const v = w(
   "fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg bg-muted text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95",
   {
     variants: {
@@ -27,7 +27,7 @@ const w = b(
   {
     ref: e,
     className: l(
-      "fixed inset-0 z-50 bg-[var(--ui-background-overlay-primary)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0",
+      "fixed inset-0 z-50 bg-[var(--ui-background-backdrop-screen)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0",
       o
     ),
     ...a
@@ -39,24 +39,24 @@ const N = i.forwardRef(
     className: o,
     children: a,
     size: e,
-    portal: m = !0,
-    portalContainer: c,
+    portal: c = !0,
+    portalContainer: m,
     keepMounted: f,
     ...g
   }, p) => {
-    const u = v(), x = c ?? u, n = /* @__PURE__ */ s(D, { children: [
+    const u = y(), x = m ?? u, n = /* @__PURE__ */ s(D, { children: [
       /* @__PURE__ */ t(d, {}),
       /* @__PURE__ */ t(
         r.Popup,
         {
           ref: p,
-          className: l(w({ size: e }), o),
+          className: l(v({ size: e }), o),
           ...g,
           children: a
         }
       )
     ] });
-    return m ? /* @__PURE__ */ t(r.Portal, { container: x, keepMounted: f, children: n }) : n;
+    return c ? /* @__PURE__ */ t(r.Portal, { container: x, keepMounted: f, children: n }) : n;
   }
 );
 N.displayName = "DialogContent";
@@ -107,7 +107,7 @@ const T = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
   }
 ));
 T.displayName = "DialogDescription";
-const B = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ s(
+const k = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ s(
   r.Close,
   {
     ref: e,
@@ -117,17 +117,17 @@ const B = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ s(
     ),
     ...a,
     children: [
-      /* @__PURE__ */ t(y, { size: 24 }),
+      /* @__PURE__ */ t(b, { size: 24 }),
       /* @__PURE__ */ t("span", { className: "sr-only", children: "Close" })
     ]
   }
 ));
-B.displayName = "DialogCloseButton";
+k.displayName = "DialogCloseButton";
 export {
   V as Dialog,
   h as DialogBody,
   q as DialogClose,
-  B as DialogCloseButton,
+  k as DialogCloseButton,
   N as DialogContent,
   T as DialogDescription,
   R as DialogFooter,
@@ -136,6 +136,6 @@ export {
   $ as DialogPortal,
   z as DialogTitle,
   I as DialogTrigger,
-  w as dialogContentVariants
+  v as dialogContentVariants
 };
 //# sourceMappingURL=dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../../../src/components/ui/dialog/dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `dialog`\n// (packages/ui-legacy/src/components/ui/dialog.tsx). A modal overlay built on\n// the Base UI Dialog primitive (keyboard, focus trap, scroll lock, ARIA come\n// from Base UI). No `--ui-dialog-*` token tier exists yet, so this design-\n// pending v1 themes from the shared semantic tokens via bridged Tailwind names:\n//   • overlay  -> var(--ui-background-overlay-primary)   (legacy `bg-black/80`)\n//   • popup    -> bg-muted        = --ui-background-surface-secondary\n//   • header / footer -> bg-background = --ui-background-surface-primary (white\n//     bars over the muted body), divided by border-border\n//   • title    -> text-foreground / description -> text-muted-foreground\n//   • close    -> text-muted-foreground → hover text-foreground (replaces the\n//     legacy opacity hack), focus ring var(--ui-focus-primary)\n// Enter/exit animations use `tw-animate-css` (imported in styles/index.css),\n// keyed to Base UI's data-[open] / data-[closed] state attributes — overlay\n// fades, popup fades + zooms. The `size` scale (max-width) mirrors the reference\n// design's six widths; until a `--ui-dialog-*` tier defines them, they are plain\n// max-width utilities. Reconcile against the real design with\n// `/figma-component Dialog <url> --update` once a mockup lands.\n\n// Popup width scale. `sm` (512px) is the default and matches the pre-size width.\nconst dialogContentVariants = cva(\n  'fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg bg-muted text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',\n  {\n    variants: {\n      size: {\n        xs: 'max-w-[464px]',\n        sm: 'max-w-lg',\n        md: 'max-w-2xl',\n        lg: 'max-w-[832px]',\n        xl: 'max-w-[992px]',\n        '2xl': 'max-w-[1136px]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  }\n);\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Backdrop>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Backdrop>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Backdrop\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-50 bg-[var(--ui-background-overlay-primary)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',\n      className\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup>,\n    VariantProps<typeof dialogContentVariants> {\n  /**\n   * Popup max-width. `sm` 512 · `xs` 464 · `md` 672 · `lg` 832 · `xl` 992 ·\n   * `2xl` 1136 (px). Defaults to `sm`.\n   */\n  size?: VariantProps<typeof dialogContentVariants>['size'];\n  /**\n   * Render the content inside a portal (default `true`). Base UI requires the\n   * Popup to sit in a Portal for correct stacking; set `false` for inline usage\n   * (e.g. when the caller supplies its own `DialogPortal`, or in tests).\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?: DialogPrimitive.Portal.Props['container'];\n  /** Keep the content mounted while closed (Base UI `Portal` prop). */\n  keepMounted?: DialogPrimitive.Portal.Props['keepMounted'];\n}\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Popup>,\n  DialogContentProps\n>(\n  (\n    {\n      className,\n      children,\n      size,\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 popup = (\n      <>\n        <DialogOverlay />\n        <DialogPrimitive.Popup\n          ref={ref}\n          className={cn(dialogContentVariants({ size }), className)}\n          {...props}\n        >\n          {children}\n        </DialogPrimitive.Popup>\n      </>\n    );\n\n    return portal ? (\n      <DialogPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n        {popup}\n      </DialogPrimitive.Portal>\n    ) : (\n      popup\n    );\n  }\n);\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4',\n      className\n    )}\n    {...props}\n  />\n));\nDialogHeader.displayName = 'DialogHeader';\n\nconst DialogFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4',\n      className\n    )}\n    {...props}\n  />\n));\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex-1 overflow-auto p-6', className)} {...props} />\n));\nDialogBody.displayName = 'DialogBody';\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'flex-1 text-2xl font-normal leading-8 text-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nDialogTitle.displayName = 'DialogTitle';\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = 'DialogDescription';\n\nconst DialogCloseButton = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Close>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Close\n    ref={ref}\n    className={cn(\n      'rounded p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none',\n      className\n    )}\n    {...props}\n  >\n    <TimesIcon size={24} />\n    <span className=\"sr-only\">Close</span>\n  </DialogPrimitive.Close>\n));\nDialogCloseButton.displayName = 'DialogCloseButton';\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogCloseButton,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogBody,\n  DialogDescription,\n  dialogContentVariants,\n};\n"],"names":["dialogContentVariants","cva","Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","React","className","props","ref","jsx","cn","DialogContent","children","size","portal","portalContainer","keepMounted","ctxContainer","usePortalContainer","resolvedContainer","popup","jsxs","Fragment","DialogHeader","DialogFooter","DialogBody","DialogTitle","DialogDescription","DialogCloseButton","TimesIcon"],"mappings":"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"}
+{"version":3,"file":"dialog.js","sources":["../../../../src/components/ui/dialog/dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `dialog`\n// (packages/ui-legacy/src/components/ui/dialog.tsx). A modal overlay built on\n// the Base UI Dialog primitive (keyboard, focus trap, scroll lock, ARIA come\n// from Base UI). No `--ui-dialog-*` token tier exists yet, so this design-\n// pending v1 themes from the shared semantic tokens via bridged Tailwind names:\n//   • overlay  -> var(--ui-background-backdrop-screen)   (legacy `bg-black/80`)\n//   • popup    -> bg-muted        = --ui-background-surface-secondary\n//   • header / footer -> bg-background = --ui-background-surface-primary (white\n//     bars over the muted body), divided by border-border\n//   • title    -> text-foreground / description -> text-muted-foreground\n//   • close    -> text-muted-foreground → hover text-foreground (replaces the\n//     legacy opacity hack), focus ring var(--ui-focus-primary)\n// Enter/exit animations use `tw-animate-css` (imported in styles/index.css),\n// keyed to Base UI's data-[open] / data-[closed] state attributes — overlay\n// fades, popup fades + zooms. The `size` scale (max-width) mirrors the reference\n// design's six widths; until a `--ui-dialog-*` tier defines them, they are plain\n// max-width utilities. Reconcile against the real design with\n// `/figma-component Dialog <url> --update` once a mockup lands.\n\n// Popup width scale. `sm` (512px) is the default and matches the pre-size width.\nconst dialogContentVariants = cva(\n  'fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg bg-muted text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',\n  {\n    variants: {\n      size: {\n        xs: 'max-w-[464px]',\n        sm: 'max-w-lg',\n        md: 'max-w-2xl',\n        lg: 'max-w-[832px]',\n        xl: 'max-w-[992px]',\n        '2xl': 'max-w-[1136px]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  }\n);\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Backdrop>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Backdrop>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Backdrop\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-50 bg-[var(--ui-background-backdrop-screen)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',\n      className\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup>,\n    VariantProps<typeof dialogContentVariants> {\n  /**\n   * Popup max-width. `sm` 512 · `xs` 464 · `md` 672 · `lg` 832 · `xl` 992 ·\n   * `2xl` 1136 (px). Defaults to `sm`.\n   */\n  size?: VariantProps<typeof dialogContentVariants>['size'];\n  /**\n   * Render the content inside a portal (default `true`). Base UI requires the\n   * Popup to sit in a Portal for correct stacking; set `false` for inline usage\n   * (e.g. when the caller supplies its own `DialogPortal`, or in tests).\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?: DialogPrimitive.Portal.Props['container'];\n  /** Keep the content mounted while closed (Base UI `Portal` prop). */\n  keepMounted?: DialogPrimitive.Portal.Props['keepMounted'];\n}\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Popup>,\n  DialogContentProps\n>(\n  (\n    {\n      className,\n      children,\n      size,\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 popup = (\n      <>\n        <DialogOverlay />\n        <DialogPrimitive.Popup\n          ref={ref}\n          className={cn(dialogContentVariants({ size }), className)}\n          {...props}\n        >\n          {children}\n        </DialogPrimitive.Popup>\n      </>\n    );\n\n    return portal ? (\n      <DialogPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n        {popup}\n      </DialogPrimitive.Portal>\n    ) : (\n      popup\n    );\n  }\n);\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4',\n      className\n    )}\n    {...props}\n  />\n));\nDialogHeader.displayName = 'DialogHeader';\n\nconst DialogFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4',\n      className\n    )}\n    {...props}\n  />\n));\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex-1 overflow-auto p-6', className)} {...props} />\n));\nDialogBody.displayName = 'DialogBody';\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'flex-1 text-2xl font-normal leading-8 text-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nDialogTitle.displayName = 'DialogTitle';\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = 'DialogDescription';\n\nconst DialogCloseButton = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Close>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Close\n    ref={ref}\n    className={cn(\n      'rounded p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none',\n      className\n    )}\n    {...props}\n  >\n    <TimesIcon size={24} />\n    <span className=\"sr-only\">Close</span>\n  </DialogPrimitive.Close>\n));\nDialogCloseButton.displayName = 'DialogCloseButton';\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogCloseButton,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogBody,\n  DialogDescription,\n  dialogContentVariants,\n};\n"],"names":["dialogContentVariants","cva","Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","React","className","props","ref","jsx","cn","DialogContent","children","size","portal","portalContainer","keepMounted","ctxContainer","usePortalContainer","resolvedContainer","popup","jsxs","Fragment","DialogHeader","DialogFooter","DialogBody","DialogTitle","DialogDescription","DialogCloseButton","TimesIcon"],"mappings":"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"}

package/dist/components/ui/dropdown-menu/dropdown-menu.js

@@ -1,160 +1,112 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
 import * as d from "react";
-import { Menu as n } from "@base-ui/react/menu";
-import { CheckIcon as N, ChevronRightIcon as x } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as s } from "../../../lib/utils.js";
-import { usePortalContainer as M } from "../../../lib/portal-container.js";
-const L = n.Root, q = n.Trigger, A = n.Group, B = n.Portal, E = n.SubmenuRoot, F = n.RadioGroup, p = "z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-background py-1 text-foreground shadow-md 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", m = "relative flex cursor-default select-none items-center gap-2 px-4 py-2 text-sm leading-6 outline-none transition-colors data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", D = d.forwardRef(
+import { Menu as o } from "@base-ui/react/menu";
+import { ChevronRightIcon as h } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as a } from "../../../lib/utils.js";
+import { usePortalContainer as x } from "../../../lib/portal-container.js";
+const _ = o.Root, k = o.Trigger, M = d.forwardRef(({ className: n, ...t }, e) => /* @__PURE__ */ r(
+  o.Group,
+  {
+    ref: e,
+    className: a(
+      "flex flex-col items-start overflow-clip gap-[var(--ui-button-menu-dropdown-section-list-gap)] px-[var(--ui-button-menu-dropdown-section-container-padding-x)] py-[var(--ui-button-menu-dropdown-section-container-padding-y)] [&:not(:first-child)]:border-t [&:not(:first-child)]:border-[length:var(--ui-button-menu-dropdown-section-container-border-width)] [&:not(:first-child)]:border-[var(--ui-button-menu-dropdown-section-container-border-color)]",
+      n
+    ),
+    ...t
+  }
+));
+M.displayName = "DropdownMenuGroup";
+const G = o.Portal, j = o.SubmenuRoot, p = "z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden flex flex-col gap-[var(--ui-button-menu-dropdown-container-gap)] bg-[var(--ui-button-menu-dropdown-container-color)] border-solid border-[length:var(--ui-button-menu-dropdown-container-border-width)] border-[var(--ui-button-menu-dropdown-container-border-color)] rounded-[var(--ui-button-menu-dropdown-container-border-radius)] px-[var(--ui-button-menu-dropdown-container-padding-x)] py-[var(--ui-button-menu-dropdown-container-padding-y)] shadow-md 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", c = "relative flex w-full shrink-0 cursor-default select-none items-start gap-[var(--ui-button-menu-dropdown-item-container-gap)] min-h-[var(--ui-button-menu-dropdown-item-container-height)] px-[var(--ui-button-menu-dropdown-item-container-padding-x)] py-[var(--ui-button-menu-dropdown-item-container-padding-y)] text-sm font-semibold leading-6 outline-none transition-colors bg-[var(--ui-button-menu-dropdown-item-container-color-idle)] text-[var(--ui-button-menu-dropdown-item-label-color)] [&_svg]:text-[var(--ui-button-menu-dropdown-item-icon-color)] data-[highlighted]:bg-[var(--ui-button-menu-dropdown-item-container-color-hover)] data-[highlighted]:active:bg-[var(--ui-button-menu-dropdown-item-container-color-active)] [&:focus-visible:not(:hover)]:rounded-[3px] [&:focus-visible:not(:hover)]:ring-[3px] [&:focus-visible:not(:hover)]:ring-inset [&:focus-visible:not(:hover)]:ring-[var(--ui-focus-primary)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", N = d.forwardRef(
   ({
-    className: e,
-    side: o,
-    align: a,
-    sideOffset: r = 4,
-    portal: i = !0,
-    portalContainer: u,
-    keepMounted: f,
-    ...g
+    className: n,
+    side: t,
+    align: e,
+    sideOffset: i = 4,
+    portal: u = !0,
+    portalContainer: m,
+    keepMounted: l,
+    ...b
   }, w) => {
-    const b = M(), h = u ?? b, c = /* @__PURE__ */ t(
-      n.Positioner,
+    const v = x(), g = m ?? v, s = /* @__PURE__ */ r(
+      o.Positioner,
       {
-        side: o,
-        align: a,
-        sideOffset: r,
+        side: t,
+        align: e,
+        sideOffset: i,
         className: "z-50",
-        children: /* @__PURE__ */ t(
-          n.Popup,
+        children: /* @__PURE__ */ r(
+          o.Popup,
           {
             ref: w,
-            className: s(p, e),
-            ...g
+            className: a(p, n),
+            ...b
           }
         )
       }
     );
-    return i ? /* @__PURE__ */ t(n.Portal, { container: h, keepMounted: f, children: c }) : c;
+    return u ? /* @__PURE__ */ r(o.Portal, { container: g, keepMounted: l, children: s }) : s;
   }
 );
-D.displayName = "DropdownMenuContent";
-const y = d.forwardRef(({ className: e, sideOffset: o = 4, ...a }, r) => /* @__PURE__ */ t(n.Positioner, { sideOffset: o, className: "z-50", children: /* @__PURE__ */ t(
-  n.Popup,
+N.displayName = "DropdownMenuContent";
+const D = d.forwardRef(({ className: n, sideOffset: t = 4, ...e }, i) => /* @__PURE__ */ r(o.Positioner, { sideOffset: t, className: "z-50", children: /* @__PURE__ */ r(
+  o.Popup,
   {
-    ref: r,
-    className: s(p, e),
-    ...a
+    ref: i,
+    className: a(p, n),
+    ...e
   }
 ) }));
-y.displayName = "DropdownMenuSubContent";
-const R = d.forwardRef(({ className: e, inset: o, ...a }, r) => /* @__PURE__ */ t(
-  n.Item,
-  {
-    ref: r,
-    className: s(m, o && "ps-8", e),
-    ...a
-  }
-));
-R.displayName = "DropdownMenuItem";
-const v = d.forwardRef(({ className: e, inset: o, children: a, ...r }, i) => /* @__PURE__ */ l(
-  n.SubmenuTrigger,
+D.displayName = "DropdownMenuSubContent";
+const y = d.forwardRef(({ className: n, inset: t, ...e }, i) => /* @__PURE__ */ r(
+  o.Item,
   {
     ref: i,
-    className: s(
-      m,
-      "data-[popup-open]:bg-accent",
-      o && "ps-8",
-      e
-    ),
-    ...r,
-    children: [
-      a,
-      /* @__PURE__ */ t(x, { className: "ms-auto rtl:rotate-180" })
-    ]
-  }
-));
-v.displayName = "DropdownMenuSubTrigger";
-const C = d.forwardRef(({ className: e, children: o, ...a }, r) => /* @__PURE__ */ l(
-  n.CheckboxItem,
-  {
-    ref: r,
-    className: s(
-      "relative flex cursor-default select-none items-center py-2 ps-8 pe-4 text-sm leading-6 outline-none transition-colors data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      e
-    ),
-    ...a,
-    children: [
-      /* @__PURE__ */ t("span", { className: "absolute start-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(n.CheckboxItemIndicator, { children: /* @__PURE__ */ t(N, { className: "size-4" }) }) }),
-      o
-    ]
+    className: a(c, t && "ps-8", n),
+    ...e
   }
 ));
-C.displayName = "DropdownMenuCheckboxItem";
-const I = d.forwardRef(({ className: e, children: o, ...a }, r) => /* @__PURE__ */ l(
-  n.RadioItem,
+y.displayName = "DropdownMenuItem";
+const C = d.forwardRef(({ className: n, inset: t, children: e, ...i }, u) => /* @__PURE__ */ f(
+  o.SubmenuTrigger,
   {
-    ref: r,
-    className: s(
-      "relative flex cursor-default select-none items-center py-2 ps-8 pe-4 text-sm leading-6 outline-none transition-colors data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      e
+    ref: u,
+    className: a(
+      c,
+      "data-[popup-open]:bg-[var(--ui-button-menu-dropdown-item-container-color-active)]",
+      t && "ps-8",
+      n
     ),
-    ...a,
+    ...i,
     children: [
-      /* @__PURE__ */ t("span", { className: "absolute start-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(n.RadioItemIndicator, { children: /* @__PURE__ */ t("span", { className: "size-2 rounded-full bg-current" }) }) }),
-      o
+      e,
+      /* @__PURE__ */ r(h, { className: "ms-auto text-[var(--ui-button-menu-dropdown-extras-cascade-icon-color)] rtl:rotate-180" })
     ]
   }
 ));
-I.displayName = "DropdownMenuRadioItem";
-const S = d.forwardRef(({ className: e, inset: o, ...a }, r) => /* @__PURE__ */ t(
-  "div",
-  {
-    ref: r,
-    className: s(
-      "px-4 py-2 text-sm font-semibold leading-6",
-      o && "ps-8",
-      e
-    ),
-    ...a
-  }
-));
-S.displayName = "DropdownMenuLabel";
-const z = d.forwardRef(({ className: e, ...o }, a) => /* @__PURE__ */ t(
-  "div",
-  {
-    ref: a,
-    role: "separator",
-    className: s("my-1 h-px bg-border", e),
-    ...o
-  }
-));
-z.displayName = "DropdownMenuSeparator";
-function k({
-  className: e,
-  ...o
+C.displayName = "DropdownMenuSubTrigger";
+function R({
+  className: n,
+  ...t
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ r(
     "span",
     {
-      className: s("ms-auto text-xs tracking-widest text-muted-foreground", e),
-      ...o
+      className: a("ms-auto shrink-0 text-sm font-normal leading-6 text-[var(--ui-button-menu-dropdown-extras-shortcut-label-color)]", n),
+      ...t
     }
   );
 }
-k.displayName = "DropdownMenuShortcut";
+R.displayName = "DropdownMenuShortcut";
 export {
-  L as DropdownMenu,
-  C as DropdownMenuCheckboxItem,
-  D as DropdownMenuContent,
-  A as DropdownMenuGroup,
-  R as DropdownMenuItem,
-  S as DropdownMenuLabel,
-  B as DropdownMenuPortal,
-  F as DropdownMenuRadioGroup,
-  I as DropdownMenuRadioItem,
-  z as DropdownMenuSeparator,
-  k as DropdownMenuShortcut,
-  E as DropdownMenuSub,
-  y as DropdownMenuSubContent,
-  v as DropdownMenuSubTrigger,
-  q as DropdownMenuTrigger
+  _ as DropdownMenu,
+  N as DropdownMenuContent,
+  M as DropdownMenuGroup,
+  y as DropdownMenuItem,
+  G as DropdownMenuPortal,
+  R as DropdownMenuShortcut,
+  j as DropdownMenuSub,
+  D as DropdownMenuSubContent,
+  C as DropdownMenuSubTrigger,
+  k as DropdownMenuTrigger
 };
 //# sourceMappingURL=dropdown-menu.js.map

package/dist/components/ui/dropdown-menu/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { CheckIcon, ChevronRightIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `dropdown-menu`\n// (packages/ui-legacy/src/components/ui/dropdown-menu.tsx). A menu of actions\n// anchored to a trigger, built on the Base UI Menu primitive (positioning, focus\n// management, typeahead, outside-press / Esc dismissal, ARIA). No `--ui-menu-*`\n// token tier exists yet, so this design-pending v1 themes from the shared\n// semantic tokens:\n//   • popup surface -> bg-background / text-foreground / border-border, shadow-md\n//     (legacy `bg-popover` / `text-popover-foreground` have no ui-react bridge)\n//   • item highlight -> bg-accent on data-[highlighted] (Base UI sets it on both\n//     pointer hover and keyboard nav; replaces legacy hover:bg-primary/10)\n//   • separator -> bg-border · shortcut -> text-muted-foreground (no opacity hack)\n// Enter/exit animations use `tw-animate-css` keyed to data-[open]/[closed]/[side].\n// Reconcile with `/figma-component DropdownMenu <url> --update` once a mockup lands.\n\nconst DropdownMenu = MenuPrimitive.Root;\nconst DropdownMenuTrigger = MenuPrimitive.Trigger;\nconst DropdownMenuGroup = MenuPrimitive.Group;\nconst DropdownMenuPortal = MenuPrimitive.Portal;\nconst DropdownMenuSub = MenuPrimitive.SubmenuRoot;\nconst DropdownMenuRadioGroup = MenuPrimitive.RadioGroup;\n\nconst popupClassName =\n  'z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-background py-1 text-foreground shadow-md 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';\n\nconst itemClassName =\n  'relative flex cursor-default select-none items-center gap-2 px-4 py-2 text-sm leading-6 outline-none transition-colors data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0';\n\nexport interface DropdownMenuContentProps\n  extends React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup> {\n  side?: MenuPrimitive.Positioner.Props['side'];\n  align?: MenuPrimitive.Positioner.Props['align'];\n  sideOffset?: number;\n  /** Render inside a portal (default `true`). */\n  portal?: boolean;\n  /** Portal container — pass a shadow-root mount for isolated-style previews. */\n  portalContainer?: MenuPrimitive.Portal.Props['container'];\n  keepMounted?: MenuPrimitive.Portal.Props['keepMounted'];\n}\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Popup>,\n  DropdownMenuContentProps\n>(\n  (\n    {\n      className,\n      side,\n      align,\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      <MenuPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        className=\"z-50\"\n      >\n        <MenuPrimitive.Popup\n          ref={ref}\n          className={cn(popupClassName, className)}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    );\n    return portal ? (\n      <MenuPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n        {positioner}\n      </MenuPrimitive.Portal>\n    ) : (\n      positioner\n    );\n  }\n);\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup> & {\n    sideOffset?: number;\n  }\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <MenuPrimitive.Positioner sideOffset={sideOffset} className=\"z-50\">\n    <MenuPrimitive.Popup\n      ref={ref}\n      className={cn(popupClassName, className)}\n      {...props}\n    />\n  </MenuPrimitive.Positioner>\n));\nDropdownMenuSubContent.displayName = 'DropdownMenuSubContent';\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Item> & { inset?: boolean }\n>(({ className, inset, ...props }, ref) => (\n  <MenuPrimitive.Item\n    ref={ref}\n    className={cn(itemClassName, inset && 'ps-8', className)}\n    {...props}\n  />\n));\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenuPrimitive.SubmenuTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubmenuTrigger> & {\n    inset?: boolean;\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenuPrimitive.SubmenuTrigger\n    ref={ref}\n    className={cn(\n      itemClassName,\n      'data-[popup-open]:bg-accent',\n      inset && 'ps-8',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ms-auto rtl:rotate-180\" />\n  </MenuPrimitive.SubmenuTrigger>\n));\nDropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>\n>(({ className, children, ...props }, ref) => (\n  <MenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center py-2 ps-8 pe-4 text-sm leading-6 outline-none transition-colors data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute start-2 flex size-3.5 items-center justify-center\">\n      <MenuPrimitive.CheckboxItemIndicator>\n        <CheckIcon className=\"size-4\" />\n      </MenuPrimitive.CheckboxItemIndicator>\n    </span>\n    {children}\n  </MenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center py-2 ps-8 pe-4 text-sm leading-6 outline-none transition-colors data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute start-2 flex size-3.5 items-center justify-center\">\n      <MenuPrimitive.RadioItemIndicator>\n        <span className=\"size-2 rounded-full bg-current\" />\n      </MenuPrimitive.RadioItemIndicator>\n    </span>\n    {children}\n  </MenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';\n\nconst DropdownMenuLabel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { inset?: boolean }\n>(({ className, inset, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'px-4 py-2 text-sm font-semibold leading-6',\n      inset && 'ps-8',\n      className\n    )}\n    {...props}\n  />\n));\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n\nconst DropdownMenuSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"separator\"\n    className={cn('my-1 h-px bg-border', className)}\n    {...props}\n  />\n));\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span\n      className={cn('ms-auto text-xs tracking-widest text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut';\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n};\n"],"names":["DropdownMenu","MenuPrimitive","DropdownMenuTrigger","DropdownMenuGroup","DropdownMenuPortal","DropdownMenuSub","DropdownMenuRadioGroup","popupClassName","itemClassName","DropdownMenuContent","React","className","side","align","sideOffset","portal","portalContainer","keepMounted","props","ref","ctxContainer","usePortalContainer","resolvedContainer","positioner","jsx","cn","DropdownMenuSubContent","DropdownMenuItem","inset","DropdownMenuSubTrigger","children","jsxs","ChevronRightIcon","DropdownMenuCheckboxItem","CheckIcon","DropdownMenuRadioItem","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuShortcut"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { ChevronRightIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// A menu of actions anchored to a trigger, built on the Base UI Menu primitive\n// (positioning, focus management, typeahead, outside-press / Esc dismissal,\n// ARIA). Themed from the `--ui-button-menu-dropdown-*` token tier generated by\n// @acronis-platform/tokens-pd (ButtonMenu/default.css). Enter/exit animations\n// use `tw-animate-css` keyed to data-[open]/[closed]/[side].\n\nconst DropdownMenu = MenuPrimitive.Root;\nconst DropdownMenuTrigger = MenuPrimitive.Trigger;\nconst DropdownMenuGroup = React.forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <MenuPrimitive.Group\n    ref={ref}\n    className={cn(\n      'flex flex-col items-start overflow-clip gap-[var(--ui-button-menu-dropdown-section-list-gap)] px-[var(--ui-button-menu-dropdown-section-container-padding-x)] py-[var(--ui-button-menu-dropdown-section-container-padding-y)] [&:not(:first-child)]:border-t [&:not(:first-child)]:border-[length:var(--ui-button-menu-dropdown-section-container-border-width)] [&:not(:first-child)]:border-[var(--ui-button-menu-dropdown-section-container-border-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nDropdownMenuGroup.displayName = 'DropdownMenuGroup';\nconst DropdownMenuPortal = MenuPrimitive.Portal;\nconst DropdownMenuSub = MenuPrimitive.SubmenuRoot;\n\nconst popupClassName =\n  'z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden flex flex-col gap-[var(--ui-button-menu-dropdown-container-gap)] bg-[var(--ui-button-menu-dropdown-container-color)] border-solid border-[length:var(--ui-button-menu-dropdown-container-border-width)] border-[var(--ui-button-menu-dropdown-container-border-color)] rounded-[var(--ui-button-menu-dropdown-container-border-radius)] px-[var(--ui-button-menu-dropdown-container-padding-x)] py-[var(--ui-button-menu-dropdown-container-padding-y)] shadow-md 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';\n\nconst itemClassName =\n  'relative flex w-full shrink-0 cursor-default select-none items-start gap-[var(--ui-button-menu-dropdown-item-container-gap)] min-h-[var(--ui-button-menu-dropdown-item-container-height)] px-[var(--ui-button-menu-dropdown-item-container-padding-x)] py-[var(--ui-button-menu-dropdown-item-container-padding-y)] text-sm font-semibold leading-6 outline-none transition-colors bg-[var(--ui-button-menu-dropdown-item-container-color-idle)] text-[var(--ui-button-menu-dropdown-item-label-color)] [&_svg]:text-[var(--ui-button-menu-dropdown-item-icon-color)] data-[highlighted]:bg-[var(--ui-button-menu-dropdown-item-container-color-hover)] data-[highlighted]:active:bg-[var(--ui-button-menu-dropdown-item-container-color-active)] [&:focus-visible:not(:hover)]:rounded-[3px] [&:focus-visible:not(:hover)]:ring-[3px] [&:focus-visible:not(:hover)]:ring-inset [&:focus-visible:not(:hover)]:ring-[var(--ui-focus-primary)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0';\n\nexport interface DropdownMenuContentProps\n  extends React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup> {\n  side?: MenuPrimitive.Positioner.Props['side'];\n  align?: MenuPrimitive.Positioner.Props['align'];\n  sideOffset?: number;\n  /** Render inside a portal (default `true`). */\n  portal?: boolean;\n  /** Portal container — pass a shadow-root mount for isolated-style previews. */\n  portalContainer?: MenuPrimitive.Portal.Props['container'];\n  keepMounted?: MenuPrimitive.Portal.Props['keepMounted'];\n}\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Popup>,\n  DropdownMenuContentProps\n>(\n  (\n    {\n      className,\n      side,\n      align,\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      <MenuPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        className=\"z-50\"\n      >\n        <MenuPrimitive.Popup\n          ref={ref}\n          className={cn(popupClassName, className)}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    );\n    return portal ? (\n      <MenuPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n        {positioner}\n      </MenuPrimitive.Portal>\n    ) : (\n      positioner\n    );\n  }\n);\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup> & {\n    sideOffset?: number;\n  }\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <MenuPrimitive.Positioner sideOffset={sideOffset} className=\"z-50\">\n    <MenuPrimitive.Popup\n      ref={ref}\n      className={cn(popupClassName, className)}\n      {...props}\n    />\n  </MenuPrimitive.Positioner>\n));\nDropdownMenuSubContent.displayName = 'DropdownMenuSubContent';\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Item> & { inset?: boolean }\n>(({ className, inset, ...props }, ref) => (\n  <MenuPrimitive.Item\n    ref={ref}\n    className={cn(itemClassName, inset && 'ps-8', className)}\n    {...props}\n  />\n));\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenuPrimitive.SubmenuTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubmenuTrigger> & {\n    inset?: boolean;\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenuPrimitive.SubmenuTrigger\n    ref={ref}\n    className={cn(\n      itemClassName,\n      'data-[popup-open]:bg-[var(--ui-button-menu-dropdown-item-container-color-active)]',\n      inset && 'ps-8',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ms-auto text-[var(--ui-button-menu-dropdown-extras-cascade-icon-color)] rtl:rotate-180\" />\n  </MenuPrimitive.SubmenuTrigger>\n));\nDropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';\n\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span\n      className={cn('ms-auto shrink-0 text-sm font-normal leading-6 text-[var(--ui-button-menu-dropdown-extras-shortcut-label-color)]', className)}\n      {...props}\n    />\n  );\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut';\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuPortal,\n};\n"],"names":["DropdownMenu","MenuPrimitive","DropdownMenuTrigger","DropdownMenuGroup","React","className","props","ref","jsx","cn","DropdownMenuPortal","DropdownMenuSub","popupClassName","itemClassName","DropdownMenuContent","side","align","sideOffset","portal","portalContainer","keepMounted","ctxContainer","usePortalContainer","resolvedContainer","positioner","DropdownMenuSubContent","DropdownMenuItem","inset","DropdownMenuSubTrigger","children","jsxs","ChevronRightIcon","DropdownMenuShortcut"],"mappings":"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"}

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

@@ -1,28 +1,164 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as i from "react";
-import { cn as s } from "../../../lib/utils.js";
-const c = i.forwardRef(
-  ({ className: e, ...r }, a) => /* @__PURE__ */ t(
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import * as a from "react";
+import { ChevronDownIcon as D } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as h } from "../../../lib/utils.js";
+import { deepEqual as A } from "../../../lib/deep-equal.js";
+import { Chip as P } from "../chip/chip.js";
+import { Button as d } from "../button/button.js";
+import { Popover as $, PopoverTrigger as E, PopoverContent as q } from "../popover/popover.js";
+const z = a.forwardRef(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ o(
     "div",
     {
-      ref: a,
-      className: s("flex items-center gap-4 px-4 py-6", e),
-      ...r
+      ref: n,
+      className: h("flex items-center gap-4", t),
+      ...e
     }
   )
 );
-c.displayName = "FilterSearch";
-const m = i.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ t(
+z.displayName = "FilterSearch";
+const B = a.forwardRef(({ className: t, ...e }, n) => /* @__PURE__ */ o(
   "div",
   {
-    ref: a,
-    className: s("flex h-8 min-w-px flex-1 items-center justify-end gap-4", e),
-    ...r
+    ref: n,
+    className: h("flex h-8 min-w-px flex-1 items-center justify-end gap-4", t),
+    ...e
   }
 ));
-m.displayName = "FilterSearchActions";
+B.displayName = "FilterSearchActions";
+const S = a.createContext(null);
+function W() {
+  const t = a.useContext(S);
+  if (t === null)
+    throw new Error(
+      "useFilterSearchFilters must be used within a <FilterSearchFilters> popover."
+    );
+  return t;
+}
+const I = a.forwardRef(({ value: t, onValueChange: e, onApply: n, label: l = "Filters", children: u, className: b }, p) => {
+  const [x, r] = a.useState(!1), [i, m] = a.useState(t), C = (s) => {
+    m(t), r(s);
+  }, v = a.useCallback((s, F) => {
+    m((f) => {
+      if (F === void 0) {
+        if (!(s in f)) return f;
+        const g = { ...f };
+        return delete g[s], g;
+      }
+      return { ...f, [s]: F };
+    });
+  }, []), N = a.useMemo(
+    () => ({ filters: i, setFilter: v }),
+    [i, v]
+  ), y = () => m({}), w = () => {
+    m(t), r(!1);
+  }, R = () => {
+    e(i), n == null || n(i), r(!1);
+  }, j = Object.keys(i).length === 0, O = A(i, t);
+  return /* @__PURE__ */ c($, { open: x, onOpenChange: C, children: [
+    /* @__PURE__ */ c(
+      E,
+      {
+        ref: p,
+        render: /* @__PURE__ */ o(
+          d,
+          {
+            variant: "secondary",
+            className: h(
+              "group data-[popup-open]:border-[var(--ui-button-secondary-container-border-color-active)] data-[popup-open]:bg-[var(--ui-button-secondary-container-color-active)] data-[popup-open]:text-[var(--ui-button-secondary-label-color-active)]",
+              b
+            )
+          }
+        ),
+        children: [
+          l,
+          /* @__PURE__ */ o(
+            D,
+            {
+              size: 16,
+              className: "transition-transform group-data-[popup-open]:rotate-180"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(q, { align: "start", className: "w-96 p-0", children: /* @__PURE__ */ c(
+      "form",
+      {
+        onSubmit: (s) => {
+          s.preventDefault(), R();
+        },
+        children: [
+          /* @__PURE__ */ o("div", { className: "flex max-h-80 flex-col gap-4 overflow-y-auto p-4", children: /* @__PURE__ */ o(S.Provider, { value: N, children: u }) }),
+          /* @__PURE__ */ c("div", { className: "flex items-center gap-2 border-t border-border p-4", children: [
+            /* @__PURE__ */ o(
+              d,
+              {
+                type: "button",
+                variant: "ghost",
+                disabled: j,
+                onClick: y,
+                children: "Reset filters"
+              }
+            ),
+            /* @__PURE__ */ c("div", { className: "ms-auto flex items-center gap-2", children: [
+              /* @__PURE__ */ o(d, { type: "button", variant: "secondary", onClick: w, children: "Cancel" }),
+              /* @__PURE__ */ o(d, { type: "submit", variant: "default", disabled: O, children: "Apply" })
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+});
+I.displayName = "FilterSearchFilters";
+function J(t, e) {
+  const n = Array.isArray(e) ? e.map((l) => String(l)).join(", ") : typeof e == "object" && e !== null ? JSON.stringify(e) : String(e);
+  return `${t}: ${n}`;
+}
+const L = a.forwardRef(({ className: t, filters: e, onValueChange: n, getFilterChipLabel: l, ...u }, b) => {
+  const p = Object.keys(e);
+  if (p.length === 0) return null;
+  const x = (r) => {
+    const i = { ...e };
+    delete i[r], n(i);
+  };
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ref: b,
+      className: h("flex flex-wrap items-center gap-3", t),
+      ...u,
+      children: [
+        p.map((r) => /* @__PURE__ */ o(
+          P,
+          {
+            variant: "removable",
+            onRemove: () => x(r),
+            removeLabel: `Remove ${r} filter`,
+            children: l ? l(r, e[r]) : J(r, e[r])
+          },
+          r
+        )),
+        /* @__PURE__ */ o(
+          d,
+          {
+            type: "button",
+            variant: "ghost",
+            onClick: () => n({}),
+            children: "Reset filters"
+          }
+        )
+      ]
+    }
+  );
+});
+L.displayName = "FilterSearchAppliedFilters";
 export {
-  c as FilterSearch,
-  m as FilterSearchActions
+  z as FilterSearch,
+  B as FilterSearchActions,
+  L as FilterSearchAppliedFilters,
+  I as FilterSearchFilters,
+  W as useFilterSearchFilters
 };
 //# sourceMappingURL=filter-search.js.map