@acronis-platform/ui-react 0.62.0 → 1.0.0

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

@@ -1,112 +1,169 @@
-import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
 import * as d from "react";
-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, ...e }, t) => /* @__PURE__ */ r(
-  o.Group,
+import { Menu as t } from "@base-ui/react/menu";
+import { CheckIcon as N, ChevronRightIcon as M } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as i } from "../../../lib/utils.js";
+import { usePortalContainer as D } from "../../../lib/portal-container.js";
+const B = t.Root, E = t.Trigger, y = d.forwardRef(({ className: o, ...n }, e) => /* @__PURE__ */ r(
+  t.Group,
   {
-    ref: t,
-    className: a(
+    ref: e,
+    className: i(
       "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
+      o
     ),
-    ...e
+    ...n
   }
 ));
-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(
+y.displayName = "DropdownMenuGroup";
+const F = t.Portal, H = t.SubmenuRoot, l = "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", u = "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", b = "flex h-6 w-4 shrink-0 items-center justify-center text-[var(--ui-button-menu-dropdown-item-icon-color)]", p = "ps-[calc(var(--ui-button-menu-dropdown-item-container-padding-x)+1rem+var(--ui-button-menu-dropdown-item-container-gap))]", R = d.forwardRef(
   ({
-    className: n,
-    side: e,
-    align: t,
-    sideOffset: i = 4,
-    portal: u = !0,
-    portalContainer: m,
-    keepMounted: l,
-    ...b
-  }, w) => {
-    const v = x(), f = m ?? v, s = /* @__PURE__ */ r(
-      o.Positioner,
+    className: o,
+    side: n,
+    align: e,
+    sideOffset: a = 4,
+    portal: s = !0,
+    portalContainer: w,
+    keepMounted: v,
+    ...f
+  }, g) => {
+    const h = D(), x = w ?? h, m = /* @__PURE__ */ r(
+      t.Positioner,
       {
-        side: e,
-        align: t,
-        sideOffset: i,
+        side: n,
+        align: e,
+        sideOffset: a,
         className: "z-50",
         children: /* @__PURE__ */ r(
-          o.Popup,
+          t.Popup,
           {
-            ref: w,
-            className: a(p, n),
-            ...b
+            ref: g,
+            className: i(l, o),
+            ...f
           }
         )
       }
     );
-    return u ? /* @__PURE__ */ r(o.Portal, { container: f, keepMounted: l, children: s }) : s;
+    return s ? /* @__PURE__ */ r(t.Portal, { container: x, keepMounted: v, children: m }) : m;
   }
 );
-N.displayName = "DropdownMenuContent";
-const D = d.forwardRef(({ className: n, sideOffset: e = 4, ...t }, i) => /* @__PURE__ */ r(o.Positioner, { sideOffset: e, className: "z-50", children: /* @__PURE__ */ r(
-  o.Popup,
+R.displayName = "DropdownMenuContent";
+const C = d.forwardRef(({ className: o, sideOffset: n = 4, ...e }, a) => /* @__PURE__ */ r(t.Positioner, { sideOffset: n, className: "z-50", children: /* @__PURE__ */ r(
+  t.Popup,
   {
-    ref: i,
-    className: a(p, n),
-    ...t
+    ref: a,
+    className: i(l, o),
+    ...e
   }
 ) }));
-D.displayName = "DropdownMenuSubContent";
-const y = d.forwardRef(({ className: n, inset: e, ...t }, i) => /* @__PURE__ */ r(
-  o.Item,
+C.displayName = "DropdownMenuSubContent";
+const I = d.forwardRef(({ className: o, inset: n, ...e }, a) => /* @__PURE__ */ r(
+  t.Item,
   {
-    ref: i,
-    className: a(c, e && "ps-8", n),
-    ...t
+    ref: a,
+    className: i(u, n && p, o),
+    ...e
   }
 ));
-y.displayName = "DropdownMenuItem";
-const C = d.forwardRef(({ className: n, inset: e, children: t, ...i }, u) => /* @__PURE__ */ g(
-  o.SubmenuTrigger,
+I.displayName = "DropdownMenuItem";
+const S = d.forwardRef(({ className: o, inset: n, children: e, ...a }, s) => /* @__PURE__ */ c(
+  t.SubmenuTrigger,
   {
-    ref: u,
-    className: a(
-      c,
+    ref: s,
+    className: i(
+      u,
       "data-[popup-open]:bg-[var(--ui-button-menu-dropdown-item-container-color-active)]",
-      e && "ps-8",
-      n
+      n && p,
+      o
     ),
-    ...i,
+    ...a,
     children: [
-      t,
-      /* @__PURE__ */ r(h, { className: "ms-auto self-center text-[var(--ui-button-menu-dropdown-extras-cascade-icon-color)] rtl:rotate-180" })
+      e,
+      /* @__PURE__ */ r(M, { className: "ms-auto self-center text-[var(--ui-button-menu-dropdown-extras-cascade-icon-color)] rtl:rotate-180" })
     ]
   }
 ));
-C.displayName = "DropdownMenuSubTrigger";
-function R({
-  className: n,
-  ...e
+S.displayName = "DropdownMenuSubTrigger";
+function k({
+  className: o,
+  ...n
 }) {
   return /* @__PURE__ */ r(
     "span",
     {
-      className: a("ms-auto shrink-0 text-sm font-normal leading-6 text-[var(--ui-button-menu-dropdown-extras-shortcut-label-color)]", n),
-      ...e
+      className: i("ms-auto shrink-0 text-sm font-normal leading-6 text-[var(--ui-button-menu-dropdown-extras-shortcut-label-color)]", o),
+      ...n
     }
   );
 }
-R.displayName = "DropdownMenuShortcut";
+k.displayName = "DropdownMenuShortcut";
+const z = d.forwardRef(({ className: o, children: n, ...e }, a) => /* @__PURE__ */ c(
+  t.CheckboxItem,
+  {
+    ref: a,
+    className: i(u, o),
+    ...e,
+    children: [
+      /* @__PURE__ */ r("span", { className: b, children: /* @__PURE__ */ r(t.CheckboxItemIndicator, { className: "flex", children: /* @__PURE__ */ r(N, { className: "size-4" }) }) }),
+      n
+    ]
+  }
+));
+z.displayName = "DropdownMenuCheckboxItem";
+const J = t.RadioGroup, P = d.forwardRef(({ className: o, children: n, ...e }, a) => /* @__PURE__ */ c(
+  t.RadioItem,
+  {
+    ref: a,
+    className: i(u, o),
+    ...e,
+    children: [
+      /* @__PURE__ */ r("span", { className: b, children: /* @__PURE__ */ r(t.RadioItemIndicator, { className: "block size-2 rounded-full bg-current" }) }),
+      n
+    ]
+  }
+));
+P.displayName = "DropdownMenuRadioItem";
+const G = d.forwardRef(({ className: o, inset: n, ...e }, a) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: a,
+    className: i(
+      "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 text-[var(--ui-button-menu-dropdown-item-label-color)]",
+      n && p,
+      o
+    ),
+    ...e
+  }
+));
+G.displayName = "DropdownMenuLabel";
+const T = d.forwardRef(({ className: o, ...n }, e) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: e,
+    role: "separator",
+    className: i(
+      "my-[var(--ui-button-menu-dropdown-section-list-gap)] h-[var(--ui-button-menu-dropdown-section-container-border-width)] bg-[var(--ui-button-menu-dropdown-section-container-border-color)]",
+      o
+    ),
+    ...n
+  }
+));
+T.displayName = "DropdownMenuSeparator";
 export {
-  _ 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
+  B as DropdownMenu,
+  z as DropdownMenuCheckboxItem,
+  R as DropdownMenuContent,
+  y as DropdownMenuGroup,
+  I as DropdownMenuItem,
+  G as DropdownMenuLabel,
+  F as DropdownMenuPortal,
+  J as DropdownMenuRadioGroup,
+  P as DropdownMenuRadioItem,
+  T as DropdownMenuSeparator,
+  k as DropdownMenuShortcut,
+  H as DropdownMenuSub,
+  C as DropdownMenuSubContent,
+  S as DropdownMenuSubTrigger,
+  E 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 { 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 self-center 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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"}
+{"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// 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\n// A checkbox/radio indicator lives in the same in-flow leading slot a menu-item\n// icon would occupy, so its label lands on the item gap grid (padding-x + 16px\n// glyph + gap) instead of a hardcoded indent. `h-6` matches the item's\n// line-height so the glyph centers on the first line of a wrapping label.\nconst indicatorSlotClassName =\n  'flex h-6 w-4 shrink-0 items-center justify-center text-[var(--ui-button-menu-dropdown-item-icon-color)]';\n\n// Indent for plain items/labels that must line up with the labels of sibling\n// checkbox/radio items.\nconst indicatorInsetClassName =\n  'ps-[calc(var(--ui-button-menu-dropdown-item-container-padding-x)+1rem+var(--ui-button-menu-dropdown-item-container-gap))]';\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 && indicatorInsetClassName, 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 && indicatorInsetClassName,\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ms-auto self-center 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\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(itemClassName, className)}\n    {...props}\n  >\n    <span className={indicatorSlotClassName}>\n      <MenuPrimitive.CheckboxItemIndicator className=\"flex\">\n        <CheckIcon className=\"size-4\" />\n      </MenuPrimitive.CheckboxItemIndicator>\n    </span>\n    {children}\n  </MenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';\n\nconst DropdownMenuRadioGroup = MenuPrimitive.RadioGroup;\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(itemClassName, className)}\n    {...props}\n  >\n    <span className={indicatorSlotClassName}>\n      {/* The dot is the indicator element itself — Base UI renders it as a\n          `<span>`, and an inline wrapper would collapse a sized child to 0. */}\n      <MenuPrimitive.RadioItemIndicator className=\"block size-2 rounded-full bg-current\" />\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-[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 text-[var(--ui-button-menu-dropdown-item-label-color)]',\n      inset && indicatorInsetClassName,\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(\n      'my-[var(--ui-button-menu-dropdown-section-list-gap)] h-[var(--ui-button-menu-dropdown-section-container-border-width)] bg-[var(--ui-button-menu-dropdown-section-container-border-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\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","indicatorSlotClassName","indicatorInsetClassName","DropdownMenuContent","side","align","sideOffset","portal","portalContainer","keepMounted","ctxContainer","usePortalContainer","resolvedContainer","positioner","DropdownMenuSubContent","DropdownMenuItem","inset","DropdownMenuSubTrigger","children","jsxs","ChevronRightIcon","DropdownMenuShortcut","DropdownMenuCheckboxItem","CheckIcon","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuLabel","DropdownMenuSeparator"],"mappings":"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"}

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

@@ -0,0 +1,44 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as s from "react";
+import { mergeProps as m } from "@base-ui/react/merge-props";
+import { useRender as l } from "@base-ui/react/use-render";
+import { cn as o } from "../../../lib/utils.js";
+import { Button as f } from "../button/button.js";
+const n = s.forwardRef(
+  ({ className: e, render: r, ariaLabel: t = "Applied filters", ...i }, p) => l({
+    render: r,
+    ref: p,
+    defaultTagName: "div",
+    props: m(
+      {
+        role: "group",
+        "aria-label": t,
+        className: o("flex items-center gap-[var(--ui-gap-16)]", e)
+      },
+      i
+    )
+  })
+);
+n.displayName = "FilterChips";
+const c = s.forwardRef(
+  ({ className: e, ...r }, t) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: t,
+      className: o(
+        "flex min-w-0 flex-wrap content-center items-center gap-[var(--ui-gap-8)]",
+        e
+      ),
+      ...r
+    }
+  )
+);
+c.displayName = "FilterChipsList";
+const d = s.forwardRef(({ children: e = "Reset filters", type: r = "button", ...t }, i) => /* @__PURE__ */ a(f, { ref: i, type: r, variant: "ghost", ...t, children: e }));
+d.displayName = "FilterChipsReset";
+export {
+  n as FilterChips,
+  c as FilterChipsList,
+  d as FilterChipsReset
+};
+//# sourceMappingURL=filter-chips.js.map

package/dist/components/ui/filter-chips/filter-chips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chips.js","sources":["../../../../src/components/ui/filter-chips/filter-chips.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '../button';\n\n// Composable applied-filter row mirroring the Figma \"FilterChips\" component:\n// a wrapping list of removable `Chip`s closed by a ghost \"Reset filters\" action\n// that clears them all at once.\n//\n// There is no `--ui-filter-chips-*` tier, and none is needed — the design\n// references exactly two primitive gap tokens: `--ui-gap-16` between the root's\n// children and `--ui-gap-8` between the items inside the list. Every other token\n// in the node belongs to `Chip` (`--ui-chip-*`) or `Button`\n// (`--ui-button-ghost-*`), which already own them.\n//\n// Figma models the chip area as a single `ListChips` slot, so the chips are the\n// consumer's children rather than a data prop. The \"Reset filters\" button sits\n// *inside* that slot — the design measures 8px, not 16px, between the last chip\n// and the button — so compose `FilterChipsReset` as the last child of\n// `FilterChipsList`. The root's 16px gap is for anything a consumer places\n// beside the list as a whole.\n//\n// Chips are 24px tall and the ghost button is 32px, so the row is 32px tall with\n// the chips centered in it (`items-center`).\n\nexport interface FilterChipsProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Replace the rendered `<div>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function.\n   */\n  render?: useRender.RenderProp;\n  /** Accessible name for the applied-filter region. */\n  ariaLabel?: string;\n}\n\nconst FilterChips = React.forwardRef<HTMLDivElement, FilterChipsProps>(\n  ({ className, render, ariaLabel = 'Applied filters', ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          role: 'group',\n          'aria-label': ariaLabel,\n          className: cn('flex items-center gap-[var(--ui-gap-16)]', className),\n        },\n        props\n      ),\n    })\n);\nFilterChips.displayName = 'FilterChips';\n\nexport type FilterChipsListProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst FilterChipsList = React.forwardRef<HTMLDivElement, FilterChipsListProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex min-w-0 flex-wrap content-center items-center gap-[var(--ui-gap-8)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nFilterChipsList.displayName = 'FilterChipsList';\n\nexport interface FilterChipsResetProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Replace the rendered `<button>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function.\n   */\n  render?: useRender.RenderProp;\n  /** Label for the reset action. */\n  children?: React.ReactNode;\n}\n\nconst FilterChipsReset = React.forwardRef<\n  HTMLButtonElement,\n  FilterChipsResetProps\n>(({ children = 'Reset filters', type = 'button', ...props }, ref) => (\n  <Button ref={ref} type={type} variant=\"ghost\" {...props}>\n    {children}\n  </Button>\n));\nFilterChipsReset.displayName = 'FilterChipsReset';\n\nexport { FilterChips, FilterChipsList, FilterChipsReset };\n"],"names":["FilterChips","React","className","render","ariaLabel","props","ref","useRender","mergeProps","cn","FilterChipsList","jsx","FilterChipsReset","children","type","Button"],"mappings":";;;;;;AAqCA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,WAAAC,IAAY,mBAAmB,GAAGC,EAAA,GAASC,MAC/DC,EAAU;AAAA,IACR,QAAAJ;AAAA,IACA,KAAAG;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,MAAM;AAAA,QACN,cAAcJ;AAAA,QACd,WAAWK,EAAG,4CAA4CP,CAAS;AAAA,MAAA;AAAA,MAErEG;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAL,EAAY,cAAc;AAI1B,MAAMU,IAAkBT,EAAM;AAAA,EAC5B,CAAC,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,MACxB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAP;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV;AACAK,EAAgB,cAAc;AAa9B,MAAME,IAAmBX,EAAM,WAG7B,CAAC,EAAE,UAAAY,IAAW,iBAAiB,MAAAC,IAAO,UAAU,GAAGT,EAAA,GAASC,MAC5D,gBAAAK,EAACI,KAAO,KAAAT,GAAU,MAAAQ,GAAY,SAAQ,SAAS,GAAGT,GAC/C,UAAAQ,GACH,CACD;AACDD,EAAiB,cAAc;"}