@acronis-platform/ui-react 0.25.2 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acronis-platform/ui-react",
-  "version": "0.25.2",
+  "version": "0.28.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/acronis/uikit.git",
@@ -46,9 +46,9 @@
     "clsx": "2.1.1",
     "react-resizable-panels": "4.11.2",
     "tailwind-merge": "3.6.0",
-    "@acronis-platform/design-assets": "0.4.0",
     "@acronis-platform/tokens-pd": "1.8.1",
-    "@acronis-platform/icons-react": "0.4.0"
+    "@acronis-platform/icons-react": "0.4.0",
+    "@acronis-platform/design-assets": "0.4.0"
   },
   "devDependencies": {
     "@figma/code-connect": "1.4.8",

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

@@ -1 +0,0 @@
-{"version":3,"file":"button-dropdown.js","sources":["../../../../src/components/ui/button-dropdown/button-dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"ButtonDropdown\" component: a Button-like trigger (label +\n// trailing chevron) that opens a menu. `variant` maps to the Figma `variant`\n// property (Primary / Secondary); the Figma `active` state is the **open** state\n// — the chevron flips down→up and the container takes its `*-active` colors. Each\n// interaction state wires the container fill, label, icon, and — for `secondary`\n// — the border to its own dedicated `--ui-button-menu-*` token from\n// @acronis-platform/tokens-pd. Every state is referenced explicitly (runtime\n// `var()` lookups: a brand override is only honored if the matching state token is\n// referenced). `primary` keeps a single label/icon color across states; only\n// `secondary` diverges them per state. Geometry — 32px height, 8px gap, 12px\n// padding-x, 4px radius, 64px min-width, 16px icon — comes from the\n// `--ui-button-menu-global-*` tokens. The open treatment is driven by the\n// `data-open` attribute (set from the `open` prop) and CSS `:active` for press\n// feedback; disabled uses the explicit disabled tokens (not opacity) and the\n// focus ring uses `--ui-focus-*`.\nconst buttonDropdownVariants = cva(\n  'inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-menu-global-icon-size)] [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-[var(--ui-button-menu-primary-container-color-idle)] text-[var(--ui-button-menu-primary-label-color)] [&_svg]:text-[var(--ui-button-menu-primary-icon-color)] hover:bg-[var(--ui-button-menu-primary-container-color-hover)] active:bg-[var(--ui-button-menu-primary-container-color-active)] data-[open]:bg-[var(--ui-button-menu-primary-container-color-active)] disabled:bg-[var(--ui-button-menu-primary-container-color-disabled)]',\n        secondary:\n          'bg-[var(--ui-button-menu-secondary-container-color-idle)] text-[var(--ui-button-menu-secondary-label-color-idle)] border-[var(--ui-button-menu-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-menu-secondary-icon-color-idle)] hover:bg-[var(--ui-button-menu-secondary-container-color-hover)] hover:text-[var(--ui-button-menu-secondary-label-color-hover)] hover:border-[var(--ui-button-menu-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-hover)] active:bg-[var(--ui-button-menu-secondary-container-color-active)] active:text-[var(--ui-button-menu-secondary-label-color-active)] active:border-[var(--ui-button-menu-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] data-[open]:bg-[var(--ui-button-menu-secondary-container-color-active)] data-[open]:text-[var(--ui-button-menu-secondary-label-color-active)] data-[open]:border-[var(--ui-button-menu-secondary-container-border-color-active)] data-[open]:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] disabled:bg-[var(--ui-button-menu-secondary-container-color-disabled)] disabled:text-[var(--ui-button-menu-secondary-label-color-disabled)] disabled:border-[var(--ui-button-menu-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-disabled)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n    },\n  }\n);\n\nexport interface ButtonDropdownProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    VariantProps<typeof buttonDropdownVariants> {\n  /**\n   * Whether the associated menu is open. Flips the trailing chevron\n   * (down → up), applies the open (`*-active`) treatment, and reflects\n   * `aria-expanded`. Control this in sync with the menu you trigger.\n   */\n  open?: boolean;\n  /** Label content rendered before the chevron. */\n  children?: React.ReactNode;\n  /**\n   * Replace the rendered `<button>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function —\n   * the component's props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\n/**\n * A button that opens a dropdown menu: a label followed by a chevron that\n * points up while `open`. Pair it with the menu/popover it controls and keep\n * the `open` prop in sync.\n */\nconst ButtonDropdown = React.forwardRef<HTMLButtonElement, ButtonDropdownProps>(\n  ({ className, variant, open, render, children, ...props }, ref) => {\n    const Chevron = open ? ChevronUpIcon : ChevronDownIcon;\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'button',\n      props: mergeProps<'button'>(\n        {\n          className: cn(buttonDropdownVariants({ variant, className })),\n          'aria-expanded': open,\n          // `data-open` drives the open (`*-active`) token switch via attribute\n          // selectors; present only while open, and typed loosely because\n          // React's button attribute map doesn't include arbitrary data-* keys\n          // as literals.\n          ...(open ? ({ 'data-open': '' } as Record<string, string>) : {}),\n          children: (\n            <>\n              {children}\n              <Chevron />\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nButtonDropdown.displayName = 'ButtonDropdown';\n\nexport { ButtonDropdown, buttonDropdownVariants };\n"],"names":["buttonDropdownVariants","cva","ButtonDropdown","React","className","variant","open","render","children","props","ref","Chevron","ChevronUpIcon","ChevronDownIcon","useRender","mergeProps","cn","jsxs","Fragment"],"mappings":";;;;;;;AA0BA,MAAMA,IAAyBC;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GA2BMC,IAAiBC,EAAM;AAAA,EAC3B,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AACjE,UAAMC,IAAUL,IAAOM,IAAgBC;AACvC,WAAOC,EAAU;AAAA,MACf,QAAAP;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOK;AAAA,QACL;AAAA,UACE,WAAWC,EAAGhB,EAAuB,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,UAC5D,iBAAiBE;AAAA;AAAA;AAAA;AAAA;AAAA,UAKjB,GAAIA,IAAQ,EAAE,aAAa,GAAA,IAAkC,CAAA;AAAA,UAC7D,UACE,gBAAAW,EAAAC,GAAA,EACG,UAAA;AAAA,YAAAV;AAAA,8BACAG,GAAA,CAAA,CAAQ;AAAA,UAAA,EAAA,CACX;AAAA,QAAA;AAAA,QAGJF;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAP,EAAe,cAAc;"}

package/dist/src/components/ui/button-dropdown/index.d.ts

@@ -1 +0,0 @@
-export { ButtonDropdown, buttonDropdownVariants, type ButtonDropdownProps, } from './button-dropdown';