npm - @acronis-platform/ui-react - Versions diffs - 0.53.0 → 0.55.0 - Mend

@acronis-platform/ui-react 0.53.0 → 0.55.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/dist/components/ui/avatar/avatar.js CHANGED Viewed

@@ -52,7 +52,7 @@ const m = o.forwardRef(
     {
       ref: e,
       className: l(
-        "flex items-center [&>*:not(:first-child)]:ml-[var(--ui-avatar-global-avatar-group-gap)]",
+        "flex items-center [&>*:not(:first-child)]:ms-[var(--ui-avatar-global-avatar-group-gap)]",
         a
       ),
       ...r

package/dist/components/ui/avatar/avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.js","sources":["../../../../src/components/ui/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Avatar primitive (Root / Image / Fallback), themed by the\n// dedicated next-gen `--ui-avatar-` token tier from @acronis-platform/tokens-pd.\n// A 32px circle (`--ui-avatar-global-avatar-size` / `-border-radius`) with a 2px\n// border (`-border-border-width` / `-border-color`) — the border is what visually\n// separates avatars when they overlap in an `AvatarGroup`. When no image is set\n// (or it fails to load) the `AvatarFallback` shows initials.\n//\n// `color` selects one of the five Figma color schemes; it tints the fallback\n// background (`--ui-avatar-color-<scheme>`) and the initials\n// (`--ui-avatar-label-color-<scheme>`). Initials use the 12px/16px/600 caption\n// style baked into the design (`text-xs font-semibold leading-4`).\nconst avatarVariants = cva(\n 'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden ' +\n 'size-[var(--ui-avatar-global-avatar-size)] rounded-[var(--ui-avatar-global-avatar-border-radius)] ' +\n 'border-[length:var(--ui-avatar-global-avatar-border-border-width)] border-solid border-[var(--ui-avatar-global-avatar-border-color)] ' +\n 'text-xs font-semibold leading-4',\n {\n variants: {\n color: {\n teal: 'bg-[var(--ui-avatar-color-teal)] text-[var(--ui-avatar-label-color-teal)]',\n violet:\n 'bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]',\n red: 'bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]',\n yellow:\n 'bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]',\n orange:\n 'bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]',\n },\n },\n defaultVariants: {\n color: 'teal',\n },\n }\n);\n\nexport interface AvatarProps\n extends\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n VariantProps<typeof avatarVariants> {}\n\n/\n A user/entity avatar: a colored circle showing an image or initials. Compose\n * `AvatarImage` and/or `AvatarFallback` inside; stack several in `AvatarGroup`.\n /\nconst Avatar = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>(({ className, color, ...props }, ref) => (\n <AvatarPrimitive.Root\n ref={ref}\n className={cn(avatarVariants({ color }), className)}\n {...props}\n />\n));\nAvatar.displayName = 'Avatar';\n\nexport type AvatarImageProps = React.ComponentPropsWithoutRef<\n typeof AvatarPrimitive.Image\n>;\n\n/* The avatar image; hidden by Base UI until it loads, revealing the fallback. /\nconst AvatarImage = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Image>,\n AvatarImageProps\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Image\n ref={ref}\n className={cn('size-full object-cover', className)}\n {...props}\n />\n));\nAvatarImage.displayName = 'AvatarImage';\n\nexport type AvatarFallbackProps = React.ComponentPropsWithoutRef<\n typeof AvatarPrimitive.Fallback\n>;\n\n/* Shown when there's no image (or it fails) — typically the user's initials. /\nconst AvatarFallback = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Fallback>,\n AvatarFallbackProps\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Fallback\n ref={ref}\n className={cn('flex size-full items-center justify-center', className)}\n {...props}\n />\n));\nAvatarFallback.displayName = 'AvatarFallback';\n\nexport type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\n/\n Overlapping stack of avatars. Each avatar after the first is pulled left by\n * `--ui-avatar-global-avatar-group-gap` (a negative offset), so their 2px\n * borders form the layered look; later avatars render above earlier ones.\n /\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center [&>:not(:first-child)]:ml-[var(--ui-avatar-global-avatar-group-gap)]',\n className\n )}\n {...props}\n />\n )\n);\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants };\n"],"names":["avatarVariants","cva","Avatar","React","className","color","props","ref","jsx","AvatarPrimitive","cn","AvatarImage","AvatarFallback","AvatarGroup"],"mappings":";;;;;AAiBA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EAIA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QACE;AAAA,QACF,KAAK;AAAA,QACL,QACE;AAAA,QACF,QACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GAWMC,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,KAASC,MACjC,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAGV,EAAe,EAAE,OAAAK,EAAA,CAAO,GAAGD,CAAS;AAAA,IACjD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAO,cAAc;AAOrB,MAAMS,IAAcR,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,0BAA0BN,CAAS;AAAA,IAChD,GAAGE;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAc;AAO1B,MAAMC,IAAiBT,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,8CAA8CN,CAAS;AAAA,IACpE,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAc;AAS7B,MAAMC,IAAcV,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAO,EAAY,cAAc;"}
1	+ {"version":3,"file":"avatar.js","sources":["../../../../src/components/ui/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Avatar primitive (Root / Image / Fallback), themed by the\n// dedicated next-gen `--ui-avatar-` token tier from @acronis-platform/tokens-pd.\n// A 32px circle (`--ui-avatar-global-avatar-size` / `-border-radius`) with a 2px\n// border (`-border-border-width` / `-border-color`) — the border is what visually\n// separates avatars when they overlap in an `AvatarGroup`. When no image is set\n// (or it fails to load) the `AvatarFallback` shows initials.\n//\n// `color` selects one of the five Figma color schemes; it tints the fallback\n// background (`--ui-avatar-color-<scheme>`) and the initials\n// (`--ui-avatar-label-color-<scheme>`). Initials use the 12px/16px/600 caption\n// style baked into the design (`text-xs font-semibold leading-4`).\nconst avatarVariants = cva(\n 'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden ' +\n 'size-[var(--ui-avatar-global-avatar-size)] rounded-[var(--ui-avatar-global-avatar-border-radius)] ' +\n 'border-[length:var(--ui-avatar-global-avatar-border-border-width)] border-solid border-[var(--ui-avatar-global-avatar-border-color)] ' +\n 'text-xs font-semibold leading-4',\n {\n variants: {\n color: {\n teal: 'bg-[var(--ui-avatar-color-teal)] text-[var(--ui-avatar-label-color-teal)]',\n violet:\n 'bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]',\n red: 'bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]',\n yellow:\n 'bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]',\n orange:\n 'bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]',\n },\n },\n defaultVariants: {\n color: 'teal',\n },\n }\n);\n\nexport interface AvatarProps\n extends\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n VariantProps<typeof avatarVariants> {}\n\n/\n A user/entity avatar: a colored circle showing an image or initials. Compose\n * `AvatarImage` and/or `AvatarFallback` inside; stack several in `AvatarGroup`.\n /\nconst Avatar = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>(({ className, color, ...props }, ref) => (\n <AvatarPrimitive.Root\n ref={ref}\n className={cn(avatarVariants({ color }), className)}\n {...props}\n />\n));\nAvatar.displayName = 'Avatar';\n\nexport type AvatarImageProps = React.ComponentPropsWithoutRef<\n typeof AvatarPrimitive.Image\n>;\n\n/* The avatar image; hidden by Base UI until it loads, revealing the fallback. /\nconst AvatarImage = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Image>,\n AvatarImageProps\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Image\n ref={ref}\n className={cn('size-full object-cover', className)}\n {...props}\n />\n));\nAvatarImage.displayName = 'AvatarImage';\n\nexport type AvatarFallbackProps = React.ComponentPropsWithoutRef<\n typeof AvatarPrimitive.Fallback\n>;\n\n/* Shown when there's no image (or it fails) — typically the user's initials. /\nconst AvatarFallback = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Fallback>,\n AvatarFallbackProps\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Fallback\n ref={ref}\n className={cn('flex size-full items-center justify-center', className)}\n {...props}\n />\n));\nAvatarFallback.displayName = 'AvatarFallback';\n\nexport type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\n/\n Overlapping stack of avatars. Each avatar after the first is pulled left by\n * `--ui-avatar-global-avatar-group-gap` (a negative offset), so their 2px\n * borders form the layered look; later avatars render above earlier ones.\n /\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center [&>:not(:first-child)]:ms-[var(--ui-avatar-global-avatar-group-gap)]',\n className\n )}\n {...props}\n />\n )\n);\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants };\n"],"names":["avatarVariants","cva","Avatar","React","className","color","props","ref","jsx","AvatarPrimitive","cn","AvatarImage","AvatarFallback","AvatarGroup"],"mappings":";;;;;AAiBA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EAIA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QACE;AAAA,QACF,KAAK;AAAA,QACL,QACE;AAAA,QACF,QACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GAWMC,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,KAASC,MACjC,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAGV,EAAe,EAAE,OAAAK,EAAA,CAAO,GAAGD,CAAS;AAAA,IACjD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAO,cAAc;AAOrB,MAAMS,IAAcR,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,0BAA0BN,CAAS;AAAA,IAChD,GAAGE;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAc;AAO1B,MAAMC,IAAiBT,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,8CAA8CN,CAAS;AAAA,IACpE,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAc;AAS7B,MAAMC,IAAcV,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAO,EAAY,cAAc;"}

package/dist/components/ui/breadcrumb/breadcrumb.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { jsxs as c, jsx as i } from "react/jsx-runtime";
 import * as l from "react";
 import { mergeProps as o } from "@base-ui/react/merge-props";
-import { useRender as n } from "@base-ui/react/use-render";
+import { useRender as t } from "@base-ui/react/use-render";
 import { EllipsisIcon as m, ChevronRightIcon as d } from "@acronis-platform/icons-react/stroke-mono";
 import { cn as s } from "../../../lib/utils.js";
 const u = l.forwardRef(
-  ({ render: e, ...r }, a) => n({
+  ({ render: e, ...r }, a) => t({
     render: e,
     ref: a,
     defaultTagName: "nav",
@@ -38,9 +38,9 @@ const p = l.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
 ));
 p.displayName = "BreadcrumbItem";
 const f = l.forwardRef(
-  ({ className: e, render: r, ...a }, t) => n({
+  ({ className: e, render: r, ...a }, n) => t({
     render: r,
-    ref: t,
+    ref: n,
     defaultTagName: "a",
     props: o(
       {
@@ -80,7 +80,7 @@ const g = ({
       r
     ),
     ...a,
-    children: e ?? /* @__PURE__ */ i(d, { size: 16 })
+    children: e ?? /* @__PURE__ */ i(d, { size: 16, className: "rtl:rotate-180" })
   }
 );
 g.displayName = "BreadcrumbSeparator";

package/dist/components/ui/breadcrumb/breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.js","sources":["../../../../src/components/ui/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { ChevronRightIcon, EllipsisIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable breadcrumb primitives mirroring the Figma \"Breadcrumb\" component.\n// Colors are wired to the next-gen `--ui-breadcrumb-` tokens from\n// @acronis-platform/tokens-pd: links use `--ui-breadcrumb-link-label-color-<state>`\n// (idle gray, darkening on hover/active), the current page uses\n// `--ui-breadcrumb-page-label-color`, and the chevron separator uses\n// `--ui-breadcrumb-separator-icon-color` sized by `--ui-breadcrumb-separator-icon-size`\n// (16px). The inter-item gap is `--ui-breadcrumb-list-gap` (4px). Type is\n// 14px / 24px line-height to match the design's `body/default`.\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n /\n Replace the rendered `<nav>` with another element or component\n * (Base UI composition). Accepts a React element or a render function.\n /\n render?: useRender.RenderProp;\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n ({ render, ...props }, ref) => {\n return useRender({\n render,\n ref,\n defaultTagName: 'nav',\n props: mergeProps<'nav'>({ 'aria-label': 'breadcrumb' }, props),\n });\n }\n);\nBreadcrumb.displayName = 'Breadcrumb';\n\nconst BreadcrumbList = React.forwardRef<\n HTMLOListElement,\n React.ComponentPropsWithoutRef<'ol'>\n>(({ className, ...props }, ref) => (\n <ol\n ref={ref}\n className={cn(\n 'flex flex-wrap items-center gap-[var(--ui-breadcrumb-list-gap)] break-words text-sm font-normal leading-6',\n className\n )}\n {...props}\n />\n));\nBreadcrumbList.displayName = 'BreadcrumbList';\n\nconst BreadcrumbItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentPropsWithoutRef<'li'>\n>(({ className, ...props }, ref) => (\n <li\n ref={ref}\n className={cn(\n 'inline-flex items-center gap-[var(--ui-breadcrumb-list-gap)]',\n className\n )}\n {...props}\n />\n));\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport interface BreadcrumbLinkProps\n extends React.ComponentPropsWithoutRef<'a'> {\n /\n Replace the rendered `<a>` with another element or component (e.g. a\n * router `Link`) via Base UI composition.\n */\n render?: useRender.RenderProp;\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n ({ className, render, ...props }, ref) => {\n return useRender({\n render,\n ref,\n defaultTagName: 'a',\n props: mergeProps<'a'>(\n {\n className: cn(\n 'rounded-sm text-[var(--ui-breadcrumb-link-label-color-idle)] no-underline transition-colors hover:text-[var(--ui-breadcrumb-link-label-color-hover)] hover:underline active:text-[var(--ui-breadcrumb-link-label-color-active)] focus-visible:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 ring-offset-background',\n className\n ),\n },\n props\n ),\n });\n }\n);\nBreadcrumbLink.displayName = 'BreadcrumbLink';\n\nconst BreadcrumbPage = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<'span'>\n>(({ className, ...props }, ref) => (\n <span\n ref={ref}\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn('text-[var(--ui-breadcrumb-page-label-color)]', className)}\n {...props}\n />\n));\nBreadcrumbPage.displayName = 'BreadcrumbPage';\n\nconst BreadcrumbSeparator = ({\n children,\n className,\n ...props\n}: React.ComponentPropsWithoutRef<'li'>) => (\n <li\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\n 'inline-flex items-center text-[var(--ui-breadcrumb-separator-icon-color)] [&>svg]:size-[var(--ui-breadcrumb-separator-icon-size)]',\n className\n )}\n {...props}\n >\n {children ?? <ChevronRightIcon size={16} />}\n </li>\n);\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator';\n\nconst BreadcrumbEllipsis = ({\n className,\n ...props\n}: React.ComponentPropsWithoutRef<'span'>) => (\n <span\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\n 'inline-flex size-4 items-center justify-center text-[var(--ui-breadcrumb-link-label-color-idle)]',\n className\n )}\n {...props}\n >\n <EllipsisIcon size={16} />\n <span className=\"sr-only\">More</span>\n </span>\n);\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n};\n"],"names":["Breadcrumb","React","render","props","ref","useRender","mergeProps","BreadcrumbList","className","jsx","cn","BreadcrumbItem","BreadcrumbLink","BreadcrumbPage","BreadcrumbSeparator","children","ChevronRightIcon","BreadcrumbEllipsis","jsxs","EllipsisIcon"],"mappings":";;;;;;AAwBA,MAAMA,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MACdC,EAAU;AAAA,IACf,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE,EAAkB,EAAE,cAAc,aAAA,GAAgBH,CAAK;AAAA,EAAA,CAC/D;AAEL;AACAH,EAAW,cAAc;AAEzB,MAAMO,IAAiBN,EAAM,WAG3B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASC,MAC1B,gBAAAK;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,WAAWM;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDI,EAAe,cAAc;AAE7B,MAAMI,IAAiBV,EAAM,WAG3B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASC,MAC1B,gBAAAK;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,WAAWM;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDQ,EAAe,cAAc;AAW7B,MAAMC,IAAiBX,EAAM;AAAA,EAC3B,CAAC,EAAE,WAAAO,GAAW,QAAAN,GAAQ,GAAGC,EAAA,GAASC,MACzBC,EAAU;AAAA,IACf,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWI;AAAA,UACT;AAAA,UACAF;AAAA,QAAA;AAAA,MACF;AAAA,MAEFL;AAAA,IAAA;AAAA,EACF,CACD;AAEL;AACAS,EAAe,cAAc;AAE7B,MAAMC,IAAiBZ,EAAM,WAG3B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASC,MAC1B,gBAAAK;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,MAAK;AAAA,IACL,iBAAc;AAAA,IACd,gBAAa;AAAA,IACb,WAAWM,EAAG,gDAAgDF,CAAS;AAAA,IACtE,GAAGL;AAAA,EAAA;AACN,CACD;AACDU,EAAe,cAAc;AAE7B,MAAMC,IAAsB,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,WAAAP;AAAA,EACA,GAAGL;AACL,MACE,gBAAAM;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,IAEH,~~UAAAY~~,~~KAAY~~,~~gBAAAN,~~EAACO,GAAA,EAAiB,MAAM,~~GAAA~~,~~CAAI~~;AAAA,EAAA;~~AAC3C~~;AAEFF,EAAoB,cAAc;AAElC,MAAMG,IAAqB,CAAC;AAAA,EAC1B,WAAAT;AAAA,EACA,GAAGL;AACL,MACE,gBAAAe;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,WAAWR;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAM,EAACU,GAAA,EAAa,MAAM,GAAA,CAAI;AAAA,MACxB,gBAAAV,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,OAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAChC;AAEFQ,EAAmB,cAAc;"}
1	+ {"version":3,"file":"breadcrumb.js","sources":["../../../../src/components/ui/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { ChevronRightIcon, EllipsisIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable breadcrumb primitives mirroring the Figma \"Breadcrumb\" component.\n// Colors are wired to the next-gen `--ui-breadcrumb-` tokens from\n// @acronis-platform/tokens-pd: links use `--ui-breadcrumb-link-label-color-<state>`\n// (idle gray, darkening on hover/active), the current page uses\n// `--ui-breadcrumb-page-label-color`, and the chevron separator uses\n// `--ui-breadcrumb-separator-icon-color` sized by `--ui-breadcrumb-separator-icon-size`\n// (16px). The inter-item gap is `--ui-breadcrumb-list-gap` (4px). Type is\n// 14px / 24px line-height to match the design's `body/default`.\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n /\n Replace the rendered `<nav>` with another element or component\n * (Base UI composition). Accepts a React element or a render function.\n /\n render?: useRender.RenderProp;\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n ({ render, ...props }, ref) => {\n return useRender({\n render,\n ref,\n defaultTagName: 'nav',\n props: mergeProps<'nav'>({ 'aria-label': 'breadcrumb' }, props),\n });\n }\n);\nBreadcrumb.displayName = 'Breadcrumb';\n\nconst BreadcrumbList = React.forwardRef<\n HTMLOListElement,\n React.ComponentPropsWithoutRef<'ol'>\n>(({ className, ...props }, ref) => (\n <ol\n ref={ref}\n className={cn(\n 'flex flex-wrap items-center gap-[var(--ui-breadcrumb-list-gap)] break-words text-sm font-normal leading-6',\n className\n )}\n {...props}\n />\n));\nBreadcrumbList.displayName = 'BreadcrumbList';\n\nconst BreadcrumbItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentPropsWithoutRef<'li'>\n>(({ className, ...props }, ref) => (\n <li\n ref={ref}\n className={cn(\n 'inline-flex items-center gap-[var(--ui-breadcrumb-list-gap)]',\n className\n )}\n {...props}\n />\n));\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport interface BreadcrumbLinkProps\n extends React.ComponentPropsWithoutRef<'a'> {\n /\n Replace the rendered `<a>` with another element or component (e.g. a\n * router `Link`) via Base UI composition.\n */\n render?: useRender.RenderProp;\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n ({ className, render, ...props }, ref) => {\n return useRender({\n render,\n ref,\n defaultTagName: 'a',\n props: mergeProps<'a'>(\n {\n className: cn(\n 'rounded-sm text-[var(--ui-breadcrumb-link-label-color-idle)] no-underline transition-colors hover:text-[var(--ui-breadcrumb-link-label-color-hover)] hover:underline active:text-[var(--ui-breadcrumb-link-label-color-active)] focus-visible:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 ring-offset-background',\n className\n ),\n },\n props\n ),\n });\n }\n);\nBreadcrumbLink.displayName = 'BreadcrumbLink';\n\nconst BreadcrumbPage = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<'span'>\n>(({ className, ...props }, ref) => (\n <span\n ref={ref}\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn('text-[var(--ui-breadcrumb-page-label-color)]', className)}\n {...props}\n />\n));\nBreadcrumbPage.displayName = 'BreadcrumbPage';\n\nconst BreadcrumbSeparator = ({\n children,\n className,\n ...props\n}: React.ComponentPropsWithoutRef<'li'>) => (\n <li\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\n 'inline-flex items-center text-[var(--ui-breadcrumb-separator-icon-color)] [&>svg]:size-[var(--ui-breadcrumb-separator-icon-size)]',\n className\n )}\n {...props}\n >\n {children ?? <ChevronRightIcon size={16} className=\"rtl:rotate-180\" />}\n </li>\n);\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator';\n\nconst BreadcrumbEllipsis = ({\n className,\n ...props\n}: React.ComponentPropsWithoutRef<'span'>) => (\n <span\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\n 'inline-flex size-4 items-center justify-center text-[var(--ui-breadcrumb-link-label-color-idle)]',\n className\n )}\n {...props}\n >\n <EllipsisIcon size={16} />\n <span className=\"sr-only\">More</span>\n </span>\n);\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n};\n"],"names":["Breadcrumb","React","render","props","ref","useRender","mergeProps","BreadcrumbList","className","jsx","cn","BreadcrumbItem","BreadcrumbLink","BreadcrumbPage","BreadcrumbSeparator","children","ChevronRightIcon","BreadcrumbEllipsis","jsxs","EllipsisIcon"],"mappings":";;;;;;AAwBA,MAAMA,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MACdC,EAAU;AAAA,IACf,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE,EAAkB,EAAE,cAAc,aAAA,GAAgBH,CAAK;AAAA,EAAA,CAC/D;AAEL;AACAH,EAAW,cAAc;AAEzB,MAAMO,IAAiBN,EAAM,WAG3B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASC,MAC1B,gBAAAK;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,WAAWM;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDI,EAAe,cAAc;AAE7B,MAAMI,IAAiBV,EAAM,WAG3B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASC,MAC1B,gBAAAK;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,WAAWM;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDQ,EAAe,cAAc;AAW7B,MAAMC,IAAiBX,EAAM;AAAA,EAC3B,CAAC,EAAE,WAAAO,GAAW,QAAAN,GAAQ,GAAGC,EAAA,GAASC,MACzBC,EAAU;AAAA,IACf,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWI;AAAA,UACT;AAAA,UACAF;AAAA,QAAA;AAAA,MACF;AAAA,MAEFL;AAAA,IAAA;AAAA,EACF,CACD;AAEL;AACAS,EAAe,cAAc;AAE7B,MAAMC,IAAiBZ,EAAM,WAG3B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASC,MAC1B,gBAAAK;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,MAAK;AAAA,IACL,iBAAc;AAAA,IACd,gBAAa;AAAA,IACb,WAAWM,EAAG,gDAAgDF,CAAS;AAAA,IACtE,GAAGL;AAAA,EAAA;AACN,CACD;AACDU,EAAe,cAAc;AAE7B,MAAMC,IAAsB,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,WAAAP;AAAA,EACA,GAAGL;AACL,MACE,gBAAAM;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,IAEH,eAAY,gBAAAM,EAACO,GAAA,EAAiB,MAAM,IAAI,WAAU,iBAAA,CAAiB;AAAA,EAAA;AACtE;AAEFF,EAAoB,cAAc;AAElC,MAAMG,IAAqB,CAAC;AAAA,EAC1B,WAAAT;AAAA,EACA,GAAGL;AACL,MACE,gBAAAe;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,WAAWR;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAM,EAACU,GAAA,EAAa,MAAM,GAAA,CAAI;AAAA,MACxB,gBAAAV,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,OAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAChC;AAEFQ,EAAmB,cAAc;"}

package/dist/components/ui/chip/chip.js CHANGED Viewed

@@ -53,7 +53,7 @@ const g = m(
               type: "button",
               "aria-label": l,
               onClick: n,
-              className: "-mr-1 flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-none",
+              className: "-me-1 flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-none",
               children: /* @__PURE__ */ o(b, {})
             }
           )

package/dist/components/ui/chip/chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.js","sources":["../../../../src/components/ui/chip/chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact, interactive label. `variant` mirrors the Figma \"Chip\" `type`:\n// `removable` carries a trailing × (remove) button; `selectable` toggles a\n// selected state. The container fill/border/label/icon all wire to the dedicated\n// `--ui-chips-` tier from @acronis-platform/tokens-pd; geometry (height, gap,\n// padding, min-width, radius, border width, icon size) is tokenized too.\n// The Figma `state` enum (idle / hover / active / focused) maps to interaction\n// states, not props: `hover:` → the hover tokens, `:focus`/`focus-visible` → the\n// 3px `--ui-focus-primary` ring, and the `active` look is the pressed state for\n// `removable` (`active:`) and the selected state for `selectable`\n// (`data-[selected]`, driven by the `selected` prop).\nconst chipVariants = cva(\n \"inline-flex h-[var(--ui-chips-container-height)] min-w-[var(--ui-chips-container-width-min)] items-center justify-center gap-[var(--ui-chips-container-gap)] rounded-[var(--ui-chips-border-radius)] border-[length:var(--ui-chips-border-width)] border-solid border-[var(--ui-chips-border-color-idle)] bg-[var(--ui-chips-container-color-idle)] px-[var(--ui-chips-container-padding-x)] text-sm leading-6 text-[var(--ui-chips-label-color)] hover:border-[var(--ui-chips-border-color-hover)] hover:bg-[var(--ui-chips-container-color-hover)] [&_svg]:size-[var(--ui-chips-icon-size)] [&_svg]:shrink-0 [&_svg]:text-[var(--ui-chips-icon-color)]\",\n {\n variants: {\n variant: {\n removable:\n 'focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chips-border-color-active)] active:bg-[var(--ui-chips-container-color-active)]',\n selectable:\n 'cursor-pointer focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chips-border-color-active)] data-[selected=true]:bg-[var(--ui-chips-container-color-active)]',\n },\n },\n defaultVariants: {\n variant: 'removable',\n },\n }\n);\n\nexport interface ChipProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof chipVariants> {\n /* Optional leading icon, rendered at 16px before the label. /\n icon?: React.ReactNode;\n /\n `selectable` only — applies the selected (active) styling and exposes the\n * chip as a pressed toggle (`role=\"button\"` + `aria-pressed`).\n /\n selected?: boolean;\n /* `removable` only — called when the trailing remove (×) button is pressed. /\n onRemove?: () => void;\n /* Accessible label for the remove button (`removable`). */\n removeLabel?: string;\n}\n\nconst Chip = React.forwardRef<HTMLDivElement, ChipProps>(\n (\n {\n className,\n variant = 'removable',\n icon,\n selected,\n onRemove,\n removeLabel = 'Remove',\n children,\n onKeyDown,\n ...props\n },\n ref\n ) => {\n const selectable = variant === 'selectable';\n return (\n <div\n ref={ref}\n className={cn(chipVariants({ variant }), className)}\n onKeyDown={(event) => {\n // The selectable chip is a div with button semantics; mirror native\n // button activation so Enter/Space fire its click handler.\n if (selectable && (event.key === 'Enter' \|\| event.key === ' ')) {\n event.preventDefault();\n event.currentTarget.click();\n }\n onKeyDown?.(event);\n }}\n {...(selectable\n ? {\n role: 'button',\n tabIndex: 0,\n 'aria-pressed': Boolean(selected),\n 'data-selected': selected ? 'true' : undefined,\n }\n : {})}\n {...props}\n >\n {icon}\n <span className=\"min-w-0 truncate\">{children}</span>\n {variant === 'removable' && (\n <button\n type=\"button\"\n aria-label={removeLabel}\n onClick={onRemove}\n className=\"-mr-1 flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-none\"\n >\n <TimesIcon />\n </button>\n )}\n </div>\n );\n }\n);\nChip.displayName = 'Chip';\n\nexport { Chip, chipVariants };\n"],"names":["chipVariants","cva","Chip","React","className","variant","icon","selected","onRemove","removeLabel","children","onKeyDown","props","ref","selectable","jsxs","cn","event","jsx","TimesIcon"],"mappings":";;;;;AAgBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,WACE;AAAA,QACF,YACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAmBMC,IAAOC,EAAM;AAAA,EACjB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAaT,MAAY;AAC/B,WACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAWG,EAAGhB,EAAa,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,QAClD,WAAW,CAACa,MAAU;AAGpB,UAAIH,MAAeG,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACxDA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBN,KAAA,QAAAA,EAAYM;AAAA,QACd;AAAA,QACC,GAAIH,IACD;AAAA,UACE,MAAM;AAAA,UACN,UAAU;AAAA,UACV,gBAAgB,EAAQP;AAAA,UACxB,iBAAiBA,IAAW,SAAS;AAAA,QAAA,IAEvC,CAAA;AAAA,QACH,GAAGK;AAAA,QAEH,UAAA;AAAA,UAAAN;AAAA,UACD,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAR,EAAA,CAAS;AAAA,UAC5CL,MAAY,eACX,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAYT;AAAA,cACZ,SAASD;AAAA,cACT,WAAU;AAAA,cAEV,4BAACW,GAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAjB,EAAK,cAAc;"}
1	+ {"version":3,"file":"chip.js","sources":["../../../../src/components/ui/chip/chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact, interactive label. `variant` mirrors the Figma \"Chip\" `type`:\n// `removable` carries a trailing × (remove) button; `selectable` toggles a\n// selected state. The container fill/border/label/icon all wire to the dedicated\n// `--ui-chips-` tier from @acronis-platform/tokens-pd; geometry (height, gap,\n// padding, min-width, radius, border width, icon size) is tokenized too.\n// The Figma `state` enum (idle / hover / active / focused) maps to interaction\n// states, not props: `hover:` → the hover tokens, `:focus`/`focus-visible` → the\n// 3px `--ui-focus-primary` ring, and the `active` look is the pressed state for\n// `removable` (`active:`) and the selected state for `selectable`\n// (`data-[selected]`, driven by the `selected` prop).\nconst chipVariants = cva(\n \"inline-flex h-[var(--ui-chips-container-height)] min-w-[var(--ui-chips-container-width-min)] items-center justify-center gap-[var(--ui-chips-container-gap)] rounded-[var(--ui-chips-border-radius)] border-[length:var(--ui-chips-border-width)] border-solid border-[var(--ui-chips-border-color-idle)] bg-[var(--ui-chips-container-color-idle)] px-[var(--ui-chips-container-padding-x)] text-sm leading-6 text-[var(--ui-chips-label-color)] hover:border-[var(--ui-chips-border-color-hover)] hover:bg-[var(--ui-chips-container-color-hover)] [&_svg]:size-[var(--ui-chips-icon-size)] [&_svg]:shrink-0 [&_svg]:text-[var(--ui-chips-icon-color)]\",\n {\n variants: {\n variant: {\n removable:\n 'focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chips-border-color-active)] active:bg-[var(--ui-chips-container-color-active)]',\n selectable:\n 'cursor-pointer focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chips-border-color-active)] data-[selected=true]:bg-[var(--ui-chips-container-color-active)]',\n },\n },\n defaultVariants: {\n variant: 'removable',\n },\n }\n);\n\nexport interface ChipProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof chipVariants> {\n /* Optional leading icon, rendered at 16px before the label. /\n icon?: React.ReactNode;\n /\n `selectable` only — applies the selected (active) styling and exposes the\n * chip as a pressed toggle (`role=\"button\"` + `aria-pressed`).\n /\n selected?: boolean;\n /* `removable` only — called when the trailing remove (×) button is pressed. /\n onRemove?: () => void;\n /* Accessible label for the remove button (`removable`). */\n removeLabel?: string;\n}\n\nconst Chip = React.forwardRef<HTMLDivElement, ChipProps>(\n (\n {\n className,\n variant = 'removable',\n icon,\n selected,\n onRemove,\n removeLabel = 'Remove',\n children,\n onKeyDown,\n ...props\n },\n ref\n ) => {\n const selectable = variant === 'selectable';\n return (\n <div\n ref={ref}\n className={cn(chipVariants({ variant }), className)}\n onKeyDown={(event) => {\n // The selectable chip is a div with button semantics; mirror native\n // button activation so Enter/Space fire its click handler.\n if (selectable && (event.key === 'Enter' \|\| event.key === ' ')) {\n event.preventDefault();\n event.currentTarget.click();\n }\n onKeyDown?.(event);\n }}\n {...(selectable\n ? {\n role: 'button',\n tabIndex: 0,\n 'aria-pressed': Boolean(selected),\n 'data-selected': selected ? 'true' : undefined,\n }\n : {})}\n {...props}\n >\n {icon}\n <span className=\"min-w-0 truncate\">{children}</span>\n {variant === 'removable' && (\n <button\n type=\"button\"\n aria-label={removeLabel}\n onClick={onRemove}\n className=\"-me-1 flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-none\"\n >\n <TimesIcon />\n </button>\n )}\n </div>\n );\n }\n);\nChip.displayName = 'Chip';\n\nexport { Chip, chipVariants };\n"],"names":["chipVariants","cva","Chip","React","className","variant","icon","selected","onRemove","removeLabel","children","onKeyDown","props","ref","selectable","jsxs","cn","event","jsx","TimesIcon"],"mappings":";;;;;AAgBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,WACE;AAAA,QACF,YACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAmBMC,IAAOC,EAAM;AAAA,EACjB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAaT,MAAY;AAC/B,WACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAWG,EAAGhB,EAAa,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,QAClD,WAAW,CAACa,MAAU;AAGpB,UAAIH,MAAeG,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACxDA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBN,KAAA,QAAAA,EAAYM;AAAA,QACd;AAAA,QACC,GAAIH,IACD;AAAA,UACE,MAAM;AAAA,UACN,UAAU;AAAA,UACV,gBAAgB,EAAQP;AAAA,UACxB,iBAAiBA,IAAW,SAAS;AAAA,QAAA,IAEvC,CAAA;AAAA,QACH,GAAGK;AAAA,QAEH,UAAA;AAAA,UAAAN;AAAA,UACD,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAR,EAAA,CAAS;AAAA,UAC5CL,MAAY,eACX,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAYT;AAAA,cACZ,SAASD;AAAA,cACT,WAAU;AAAA,cAEV,4BAACW,GAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAjB,EAAK,cAAc;"}

package/dist/components/ui/combobox/combobox.js CHANGED Viewed

@@ -1,13 +1,14 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import * as n from "react";
 import { Combobox as o } from "@base-ui/react/combobox";
-import { TimesIcon as b, ChevronDownIcon as m, CheckIcon as x } from "@acronis-platform/icons-react/stroke-mono";
+import { TimesIcon as x, ChevronDownIcon as v, CheckIcon as g } from "@acronis-platform/icons-react/stroke-mono";
 import { cn as a } from "../../../lib/utils.js";
-function v(r) {
+import { usePortalContainer as h } from "../../../lib/portal-container.js";
+function f(r) {
   return /* @__PURE__ */ e(o.Root, { ...r });
 }
-v.displayName = "Combobox";
-const g = n.forwardRef(({ className: r, containerClassName: i, clearable: t, ...l }, d) => (
+f.displayName = "Combobox";
+const w = n.forwardRef(({ className: r, containerClassName: i, clearable: t, ...l }, d) => (
   // InputGroup (not a plain div) is the popup's anchor, so the dropdown aligns to
   // the box's left edge rather than to the bare input inside the box padding.
   /* @__PURE__ */ s(
@@ -38,7 +39,7 @@ const g = n.forwardRef(({ className: r, containerClassName: i, clearable: t, ...
           {
             "aria-label": "Clear",
             className: "flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:hidden",
-            children: /* @__PURE__ */ e(b, { size: 16 })
+            children: /* @__PURE__ */ e(x, { size: 16 })
           }
         ),
         /* @__PURE__ */ e(
@@ -47,7 +48,7 @@ const g = n.forwardRef(({ className: r, containerClassName: i, clearable: t, ...
             "aria-label": "Toggle",
             className: "flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none group-has-disabled:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]",
             children: /* @__PURE__ */ e(
-              m,
+              v,
               {
                 size: 16,
                 className: "transition-transform group-has-[input[aria-expanded=true]]:rotate-180"
@@ -59,32 +60,35 @@ const g = n.forwardRef(({ className: r, containerClassName: i, clearable: t, ...
     }
   )
 ));
-g.displayName = "ComboboxInput";
-const h = n.forwardRef(
-  ({ className: r, children: i, sideOffset: t = 4, align: l = "start", side: d = "bottom", portalContainer: c, ...u }, p) => /* @__PURE__ */ e(o.Portal, { container: c, children: /* @__PURE__ */ e(
-    o.Positioner,
-    {
-      sideOffset: t,
-      align: l,
-      side: d,
-      className: "z-50 outline-none",
-      children: /* @__PURE__ */ e(
-        o.Popup,
-        {
-          ref: p,
-          className: a(
-            "max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none",
-            r
-          ),
-          ...u,
-          children: i
-        }
-      )
-    }
-  ) })
+w.displayName = "ComboboxInput";
+const C = n.forwardRef(
+  ({ className: r, children: i, sideOffset: t = 4, align: l = "start", side: d = "bottom", portalContainer: c, ...u }, p) => {
+    const b = h(), m = c ?? b;
+    return /* @__PURE__ */ e(o.Portal, { container: m, children: /* @__PURE__ */ e(
+      o.Positioner,
+      {
+        sideOffset: t,
+        align: l,
+        side: d,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ e(
+          o.Popup,
+          {
+            ref: p,
+            className: a(
+              "max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none",
+              r
+            ),
+            ...u,
+            children: i
+          }
+        )
+      }
+    ) });
+  }
 );
-h.displayName = "ComboboxContent";
-const f = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
+C.displayName = "ComboboxContent";
+const y = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
   o.List,
   {
     ref: t,
@@ -92,8 +96,8 @@ const f = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
     ...i
   }
 ));
-f.displayName = "ComboboxList";
-const w = n.forwardRef(({ className: r, children: i, ...t }, l) => /* @__PURE__ */ s(
+y.displayName = "ComboboxList";
+const N = n.forwardRef(({ className: r, children: i, ...t }, l) => /* @__PURE__ */ s(
   o.Item,
   {
     ref: l,
@@ -107,12 +111,12 @@ const w = n.forwardRef(({ className: r, children: i, ...t }, l) => /* @__PURE__
     ...t,
     children: [
       /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: i }),
-      /* @__PURE__ */ e(o.ItemIndicator, { className: "flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]", children: /* @__PURE__ */ e(x, { size: 16 }) })
+      /* @__PURE__ */ e(o.ItemIndicator, { className: "flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]", children: /* @__PURE__ */ e(g, { size: 16 }) })
     ]
   }
 ));
-w.displayName = "ComboboxItem";
-const y = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
+N.displayName = "ComboboxItem";
+const I = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
   o.Empty,
   {
     ref: t,
@@ -123,8 +127,8 @@ const y = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
     ...i
   }
 ));
-y.displayName = "ComboboxEmpty";
-const L = o.Group, C = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
+I.displayName = "ComboboxEmpty";
+const E = o.Group, R = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
   o.GroupLabel,
   {
     ref: t,
@@ -135,15 +139,15 @@ const L = o.Group, C = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__
     ...i
   }
 ));
-C.displayName = "ComboboxGroupLabel";
+R.displayName = "ComboboxGroupLabel";
 export {
-  v as Combobox,
-  h as ComboboxContent,
-  y as ComboboxEmpty,
-  L as ComboboxGroup,
-  C as ComboboxGroupLabel,
-  g as ComboboxInput,
-  w as ComboboxItem,
-  f as ComboboxList
+  f as Combobox,
+  C as ComboboxContent,
+  I as ComboboxEmpty,
+  E as ComboboxGroup,
+  R as ComboboxGroupLabel,
+  w as ComboboxInput,
+  N as ComboboxItem,
+  y as ComboboxList
 };
 //# sourceMappingURL=combobox.js.map

package/dist/components/ui/combobox/combobox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox.js","sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';\nimport {\n CheckIcon,\n ChevronDownIcon,\n TimesIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// A searchable single/multi-select built on Base UI's Combobox primitive. The\n// legacy `combobox` was only a hardcoded Popover + cmdk demo; this is a real,\n// reusable component. There is no `--ui-combobox-` tier, so it reuses the\n// `--ui-input-select-` tokens (already imported) — the field box, dropdown\n// container, and items match InputSelect, the non-searchable sibling. The Root\n// auto-extracts `{ value, label }` items and filters them by the input value.\n\nfunction Combobox<Value, Multiple extends boolean \| undefined = false>(\n props: ComboboxPrimitive.Root.Props<Value, Multiple>\n) {\n return <ComboboxPrimitive.Root {...props} />;\n}\nCombobox.displayName = 'Combobox';\n\nexport interface ComboboxInputProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Input>,\n 'className'\n > {\n className?: string;\n /** Wrapper (box) className. /\n containerClassName?: string;\n /* Show a clear (✕) button while the field has a value. /\n clearable?: boolean;\n}\n\n// The field box: a typeable input + a clear button (optional) + a chevron trigger.\nconst ComboboxInput = React.forwardRef<\n HTMLInputElement,\n ComboboxInputProps\n>(({ className, containerClassName, clearable, ...props }, ref) => (\n // InputGroup (not a plain div) is the popup's anchor, so the dropdown aligns to\n // the box's left edge rather than to the bare input inside the box padding.\n <ComboboxPrimitive.InputGroup\n className={cn(\n 'group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 transition-colors',\n 'not-has-disabled:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-has-disabled:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n 'has-[input:focus-visible]:border-[var(--ui-input-select-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n 'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-select-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-select-global-box-color-disabled)]',\n 'has-[input[aria-invalid=true]]:border-[var(--ui-input-select-error-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]',\n containerClassName\n )}\n >\n <ComboboxPrimitive.Input\n ref={ref}\n className={cn(\n 'min-w-0 flex-1 bg-transparent text-[var(--ui-input-select-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-select-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-select-global-value-color-disabled)]',\n className\n )}\n {...props}\n />\n {clearable && (\n <ComboboxPrimitive.Clear\n aria-label=\"Clear\"\n className=\"flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:hidden\"\n >\n <TimesIcon size={16} />\n </ComboboxPrimitive.Clear>\n )}\n <ComboboxPrimitive.Trigger\n aria-label=\"Toggle\"\n className=\"flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none group-has-disabled:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\"\n >\n <ChevronDownIcon\n size={16}\n className=\"transition-transform group-has-[input[aria-expanded=true]]:rotate-180\"\n />\n </ComboboxPrimitive.Trigger>\n </ComboboxPrimitive.InputGroup>\n));\nComboboxInput.displayName = 'ComboboxInput';\n\nexport interface ComboboxContentProps\n extends React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Popup> {\n sideOffset?: number;\n align?: ComboboxPrimitive.Positioner.Props['align'];\n side?: ComboboxPrimitive.Positioner.Props['side'];\n /* Container to portal into (e.g. a shadow root, so the popup inherits styles). */\n portalContainer?: ComboboxPrimitive.Portal.Props['container'];\n}\n\nconst ComboboxContent = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.Popup>,\n ComboboxContentProps\n>(\n (\n { className, children, sideOffset = 4, align = 'start', side = 'bottom', portalContainer, ...props },\n ref\n ) => (\n <ComboboxPrimitive.Portal container={portalContainer}>\n <ComboboxPrimitive.Positioner\n sideOffset={sideOffset}\n align={align}\n side={side}\n className=\"z-50 outline-none\"\n >\n <ComboboxPrimitive.Popup\n ref={ref}\n className={cn(\n 'max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none',\n className\n )}\n {...props}\n >\n {children}\n </ComboboxPrimitive.Popup>\n </ComboboxPrimitive.Positioner>\n </ComboboxPrimitive.Portal>\n )\n);\nComboboxContent.displayName = 'ComboboxContent';\n\nconst ComboboxList = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.List>\n>(({ className, ...props }, ref) => (\n <ComboboxPrimitive.List\n ref={ref}\n className={cn('flex flex-col', className)}\n {...props}\n />\n));\nComboboxList.displayName = 'ComboboxList';\n\nconst ComboboxItem = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <ComboboxPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n 'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n 'data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]',\n 'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]',\n className\n )}\n {...props}\n >\n <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n <ComboboxPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]\">\n <CheckIcon size={16} />\n </ComboboxPrimitive.ItemIndicator>\n </ComboboxPrimitive.Item>\n));\nComboboxItem.displayName = 'ComboboxItem';\n\nconst ComboboxEmpty = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n <ComboboxPrimitive.Empty\n ref={ref}\n className={cn(\n 'px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-normal-description-color-idle)] empty:m-0 empty:p-0',\n className\n )}\n {...props}\n />\n));\nComboboxEmpty.displayName = 'ComboboxEmpty';\n\nconst ComboboxGroup = ComboboxPrimitive.Group;\n\nconst ComboboxGroupLabel = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.GroupLabel>,\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n <ComboboxPrimitive.GroupLabel\n ref={ref}\n className={cn(\n 'px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]',\n className\n )}\n {...props}\n />\n));\nComboboxGroupLabel.displayName = 'ComboboxGroupLabel';\n\nexport {\n Combobox,\n ComboboxInput,\n ComboboxContent,\n ComboboxList,\n ComboboxItem,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxGroupLabel,\n};\n"],"names":["Combobox","props","jsx","ComboboxPrimitive","ComboboxInput","React","className","containerClassName","clearable","ref","jsxs","cn","TimesIcon","ChevronDownIcon","ComboboxContent","children","sideOffset","align","side","portalContainer","ComboboxList","ComboboxItem","CheckIcon","ComboboxEmpty","ComboboxGroup","ComboboxGroupLabel"],"mappings":";;;;;AAmBA,SAASA,EACPC,GACA;AACA,SAAO,gBAAAC,EAACC,EAAkB,MAAlB,EAAwB,GAAGF,EAAA,CAAO;AAC5C;AACAD,EAAS,cAAc;AAevB,MAAMI,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,oBAAAC,GAAoB,WAAAC,GAAW,GAAGP,EAAA,GAASQ;AAAA;AAAA;AAAA,EAGzD,gBAAAC;AAAA,IAACP,EAAkB;AAAA,IAAlB;AAAA,MACC,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAL;AAAA,UAACC,EAAkB;AAAA,UAAlB;AAAA,YACC,KAAAM;AAAA,YACA,WAAWE;AAAA,cACT;AAAA,cACAL;AAAA,YAAA;AAAA,YAED,GAAGL;AAAA,UAAA;AAAA,QAAA;AAAA,QAELO,KACC,gBAAAN;AAAA,UAACC,EAAkB;AAAA,UAAlB;AAAA,YACC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,UAAA,gBAAAD,EAACU,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGzB,gBAAAV;AAAA,UAACC,EAAkB;AAAA,UAAlB;AAAA,YACC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,UAAA,gBAAAD;AAAA,cAACW;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAAA,CAEH;AACDT,EAAc,cAAc;AAW5B,MAAMU,IAAkBT,EAAM;AAAA,EAI5B,CACE,EAAE,WAAAC,GAAW,UAAAS,GAAU,YAAAC,IAAa,GAAG,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,iBAAAC,GAAiB,GAAGlB,EAAA,GAC7FQ,MAEA,gBAAAP,EAACC,EAAkB,QAAlB,EAAyB,WAAWgB,GACnC,UAAA,gBAAAjB;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,YAAAa;AAAA,MACA,OAAAC;AAAA,MACA,MAAAC;AAAA,MACA,WAAU;AAAA,MAEV,UAAA,gBAAAhB;AAAA,QAACC,EAAkB;AAAA,QAAlB;AAAA,UACC,KAAAM;AAAA,UACA,WAAWE;AAAA,YACT;AAAA,YACAL;AAAA,UAAA;AAAA,UAED,GAAGL;AAAA,UAEH,UAAAc;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA,EACF,CACF;AAEJ;AACAD,EAAgB,cAAc;AAE9B,MAAMM,IAAef,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGL,EAAA,GAASQ,MAC1B,gBAAAP;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE,EAAG,iBAAiBL,CAAS;AAAA,IACvC,GAAGL;AAAA,EAAA;AACN,CACD;AACDmB,EAAa,cAAc;AAE3B,MAAMC,IAAehB,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,UAAAS,GAAU,GAAGd,KAASQ,MACpC,gBAAAC;AAAA,EAACP,EAAkB;AAAA,EAAlB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,2BAA2B,UAAAa,EAAA,CAAS;AAAA,MACpD,gBAAAb,EAACC,EAAkB,eAAlB,EAAgC,WAAU,2FACzC,UAAA,gBAAAD,EAACoB,GAAA,EAAU,MAAM,GAAA,CAAI,EAAA,CACvB;AAAA,IAAA;AAAA,EAAA;AACF,CACD;AACDD,EAAa,cAAc;AAE3B,MAAME,IAAgBlB,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGL,EAAA,GAASQ,MAC1B,gBAAAP;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDsB,EAAc,cAAc;AAE5B,MAAMC,IAAgBrB,EAAkB,OAElCsB,IAAqBpB,EAAM,WAG/B,CAAC,EAAE,WAAAC,GAAW,GAAGL,EAAA,GAASQ,MAC1B,gBAAAP;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDwB,EAAmB,cAAc;"}
1	+ {"version":3,"file":"combobox.js","sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';\nimport {\n CheckIcon,\n ChevronDownIcon,\n TimesIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// A searchable single/multi-select built on Base UI's Combobox primitive. The\n// legacy `combobox` was only a hardcoded Popover + cmdk demo; this is a real,\n// reusable component. There is no `--ui-combobox-` tier, so it reuses the\n// `--ui-input-select-` tokens (already imported) — the field box, dropdown\n// container, and items match InputSelect, the non-searchable sibling. The Root\n// auto-extracts `{ value, label }` items and filters them by the input value.\n\nfunction Combobox<Value, Multiple extends boolean \| undefined = false>(\n props: ComboboxPrimitive.Root.Props<Value, Multiple>\n) {\n return <ComboboxPrimitive.Root {...props} />;\n}\nCombobox.displayName = 'Combobox';\n\nexport interface ComboboxInputProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Input>,\n 'className'\n > {\n className?: string;\n /** Wrapper (box) className. /\n containerClassName?: string;\n /* Show a clear (✕) button while the field has a value. /\n clearable?: boolean;\n}\n\n// The field box: a typeable input + a clear button (optional) + a chevron trigger.\nconst ComboboxInput = React.forwardRef<\n HTMLInputElement,\n ComboboxInputProps\n>(({ className, containerClassName, clearable, ...props }, ref) => (\n // InputGroup (not a plain div) is the popup's anchor, so the dropdown aligns to\n // the box's left edge rather than to the bare input inside the box padding.\n <ComboboxPrimitive.InputGroup\n className={cn(\n 'group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 transition-colors',\n 'not-has-disabled:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-has-disabled:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n 'has-[input:focus-visible]:border-[var(--ui-input-select-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n 'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-select-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-select-global-box-color-disabled)]',\n 'has-[input[aria-invalid=true]]:border-[var(--ui-input-select-error-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]',\n containerClassName\n )}\n >\n <ComboboxPrimitive.Input\n ref={ref}\n className={cn(\n 'min-w-0 flex-1 bg-transparent text-[var(--ui-input-select-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-select-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-select-global-value-color-disabled)]',\n className\n )}\n {...props}\n />\n {clearable && (\n <ComboboxPrimitive.Clear\n aria-label=\"Clear\"\n className=\"flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:hidden\"\n >\n <TimesIcon size={16} />\n </ComboboxPrimitive.Clear>\n )}\n <ComboboxPrimitive.Trigger\n aria-label=\"Toggle\"\n className=\"flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none group-has-disabled:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\"\n >\n <ChevronDownIcon\n size={16}\n className=\"transition-transform group-has-[input[aria-expanded=true]]:rotate-180\"\n />\n </ComboboxPrimitive.Trigger>\n </ComboboxPrimitive.InputGroup>\n));\nComboboxInput.displayName = 'ComboboxInput';\n\nexport interface ComboboxContentProps\n extends React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Popup> {\n sideOffset?: number;\n align?: ComboboxPrimitive.Positioner.Props['align'];\n side?: ComboboxPrimitive.Positioner.Props['side'];\n /* Container to portal into (e.g. a shadow root, so the popup inherits styles). */\n portalContainer?: ComboboxPrimitive.Portal.Props['container'];\n}\n\nconst ComboboxContent = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.Popup>,\n ComboboxContentProps\n>(\n (\n { className, children, sideOffset = 4, align = 'start', side = 'bottom', portalContainer, ...props },\n ref\n ) => {\n const ctxContainer = usePortalContainer();\n const resolvedContainer = portalContainer ?? ctxContainer;\n\n return (\n <ComboboxPrimitive.Portal container={resolvedContainer}>\n <ComboboxPrimitive.Positioner\n sideOffset={sideOffset}\n align={align}\n side={side}\n className=\"z-50 outline-none\"\n >\n <ComboboxPrimitive.Popup\n ref={ref}\n className={cn(\n 'max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none',\n className\n )}\n {...props}\n >\n {children}\n </ComboboxPrimitive.Popup>\n </ComboboxPrimitive.Positioner>\n </ComboboxPrimitive.Portal>\n );\n }\n);\nComboboxContent.displayName = 'ComboboxContent';\n\nconst ComboboxList = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.List>\n>(({ className, ...props }, ref) => (\n <ComboboxPrimitive.List\n ref={ref}\n className={cn('flex flex-col', className)}\n {...props}\n />\n));\nComboboxList.displayName = 'ComboboxList';\n\nconst ComboboxItem = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <ComboboxPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n 'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n 'data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]',\n 'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]',\n className\n )}\n {...props}\n >\n <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n <ComboboxPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]\">\n <CheckIcon size={16} />\n </ComboboxPrimitive.ItemIndicator>\n </ComboboxPrimitive.Item>\n));\nComboboxItem.displayName = 'ComboboxItem';\n\nconst ComboboxEmpty = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n <ComboboxPrimitive.Empty\n ref={ref}\n className={cn(\n 'px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-normal-description-color-idle)] empty:m-0 empty:p-0',\n className\n )}\n {...props}\n />\n));\nComboboxEmpty.displayName = 'ComboboxEmpty';\n\nconst ComboboxGroup = ComboboxPrimitive.Group;\n\nconst ComboboxGroupLabel = React.forwardRef<\n React.ElementRef<typeof ComboboxPrimitive.GroupLabel>,\n React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n <ComboboxPrimitive.GroupLabel\n ref={ref}\n className={cn(\n 'px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]',\n className\n )}\n {...props}\n />\n));\nComboboxGroupLabel.displayName = 'ComboboxGroupLabel';\n\nexport {\n Combobox,\n ComboboxInput,\n ComboboxContent,\n ComboboxList,\n ComboboxItem,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxGroupLabel,\n};\n"],"names":["Combobox","props","jsx","ComboboxPrimitive","ComboboxInput","React","className","containerClassName","clearable","ref","jsxs","cn","TimesIcon","ChevronDownIcon","ComboboxContent","children","sideOffset","align","side","portalContainer","ctxContainer","usePortalContainer","resolvedContainer","ComboboxList","ComboboxItem","CheckIcon","ComboboxEmpty","ComboboxGroup","ComboboxGroupLabel"],"mappings":"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"}

package/dist/components/ui/data-table/data-table-column-header.js CHANGED Viewed

@@ -1,14 +1,14 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import { ArrowUpIcon as c, ArrowDownIcon as l, ArrowsDownUpIcon as v } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as a } from "../../../lib/utils.js";
+import { cn as s } from "../../../lib/utils.js";
 function m({
   column: r,
   title: o,
   className: t,
-  ...s
+  ...a
 }) {
   if (!r.getCanSort())
-    return /* @__PURE__ */ e("div", { className: a(t), children: o });
+    return /* @__PURE__ */ e("div", { className: s(t), children: o });
   const i = r.getIsSorted();
   return /* @__PURE__ */ n(
     "button",
@@ -16,13 +16,13 @@ function m({
       type: "button",
       onClick: () => r.toggleSorting(),
       "aria-label": `Sort by ${o}`,
-      className: a(
-        // -ml-2 px-2 keeps the label flush at the cell padding while giving the
+      className: s(
+        // -ms-2 px-2 keeps the label flush at the cell padding while giving the
         // toggle a comfortable click/hover target.
-        "-ml-2 inline-flex h-8 select-none items-center gap-2 rounded px-2 text-sm font-semibold transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0",
+        "-ms-2 inline-flex h-8 select-none items-center gap-2 rounded px-2 text-sm font-semibold transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0",
         t
       ),
-      ...s,
+      ...a,
       children: [
         /* @__PURE__ */ e("span", { children: o }),
         i === "asc" ? /* @__PURE__ */ e(c, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : i === "desc" ? /* @__PURE__ */ e(l, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : /* @__PURE__ */ e(v, { className: "text-[var(--ui-table-header-sort-icon-color-inactive)]" })

package/dist/components/ui/data-table/data-table-column-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/ui/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Column } from '@tanstack/react-table';\nimport {\n ArrowDownIcon,\n ArrowsDownUpIcon,\n ArrowUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableColumnHeaderProps<TData, TValue>\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n column: Column<TData, TValue>;\n title: string;\n}\n\n// Single-click sortable column header — matches the Table primitive's sortable\n// `TableHead`: one click toggles the sort (ascending → descending → unsorted) via\n// TanStack's `column.toggleSorting()`. The trailing icon shows the state with the\n// same `--ui-table-header-sort-icon-*` tokens — an up arrow (ascending) or down\n// arrow (descending) in the active blue, or the muted up/down arrows when\n// unsorted. (Column hiding lives in the toolbar's `DataTableViewOptions`, not a\n// per-header menu, so sorting is a single click.)\nexport function DataTableColumnHeader<TData, TValue>({\n column,\n title,\n className,\n ...props\n}: DataTableColumnHeaderProps<TData, TValue>) {\n if (!column.getCanSort()) {\n return <div className={cn(className)}>{title}</div>;\n }\n\n const sorted = column.getIsSorted();\n\n return (\n <button\n type=\"button\"\n onClick={() => column.toggleSorting()}\n aria-label={`Sort by ${title}`}\n className={cn(\n // -ml-2 px-2 keeps the label flush at the cell padding while giving the\n // toggle a comfortable click/hover target.\n '-ml-2 inline-flex h-8 select-none items-center gap-2 rounded px-2 text-sm font-semibold transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0',\n className\n )}\n {...props}\n >\n <span>{title}</span>\n {sorted === 'asc' ? (\n <ArrowUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n ) : sorted === 'desc' ? (\n <ArrowDownIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n ) : (\n <ArrowsDownUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-inactive)]\" />\n )}\n </button>\n );\n}\n"],"names":["DataTableColumnHeader","column","title","className","props","cn","sorted","jsxs","jsx","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon"],"mappings":";;;AAuBO,SAASA,EAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAA8C;AAC5C,MAAI,CAACH,EAAO;AACV,6BAAQ,OAAA,EAAI,WAAWI,EAAGF,CAAS,GAAI,UAAAD,GAAM;AAG/C,QAAMI,IAASL,EAAO,YAAA;AAEtB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAMN,EAAO,cAAA;AAAA,MACtB,cAAY,WAAWC,CAAK;AAAA,MAC5B,WAAWG;AAAA;AAAA;AAAA,QAGT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,UAAM,UAAAN,EAAA,CAAM;AAAA,QACZI,MAAW,QACV,gBAAAE,EAACC,GAAA,EAAY,WAAU,wDAAuD,IAC5EH,MAAW,SACb,gBAAAE,EAACE,KAAc,WAAU,uDAAA,CAAuD,IAEhF,gBAAAF,EAACG,GAAA,EAAiB,WAAU,yDAAA,CAAyD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI7F;"}
1	+ {"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/ui/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Column } from '@tanstack/react-table';\nimport {\n ArrowDownIcon,\n ArrowsDownUpIcon,\n ArrowUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableColumnHeaderProps<TData, TValue>\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n column: Column<TData, TValue>;\n title: string;\n}\n\n// Single-click sortable column header — matches the Table primitive's sortable\n// `TableHead`: one click toggles the sort (ascending → descending → unsorted) via\n// TanStack's `column.toggleSorting()`. The trailing icon shows the state with the\n// same `--ui-table-header-sort-icon-*` tokens — an up arrow (ascending) or down\n// arrow (descending) in the active blue, or the muted up/down arrows when\n// unsorted. (Column hiding lives in the toolbar's `DataTableViewOptions`, not a\n// per-header menu, so sorting is a single click.)\nexport function DataTableColumnHeader<TData, TValue>({\n column,\n title,\n className,\n ...props\n}: DataTableColumnHeaderProps<TData, TValue>) {\n if (!column.getCanSort()) {\n return <div className={cn(className)}>{title}</div>;\n }\n\n const sorted = column.getIsSorted();\n\n return (\n <button\n type=\"button\"\n onClick={() => column.toggleSorting()}\n aria-label={`Sort by ${title}`}\n className={cn(\n // -ms-2 px-2 keeps the label flush at the cell padding while giving the\n // toggle a comfortable click/hover target.\n '-ms-2 inline-flex h-8 select-none items-center gap-2 rounded px-2 text-sm font-semibold transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0',\n className\n )}\n {...props}\n >\n <span>{title}</span>\n {sorted === 'asc' ? (\n <ArrowUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n ) : sorted === 'desc' ? (\n <ArrowDownIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n ) : (\n <ArrowsDownUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-inactive)]\" />\n )}\n </button>\n );\n}\n"],"names":["DataTableColumnHeader","column","title","className","props","cn","sorted","jsxs","jsx","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon"],"mappings":";;;AAuBO,SAASA,EAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAA8C;AAC5C,MAAI,CAACH,EAAO;AACV,6BAAQ,OAAA,EAAI,WAAWI,EAAGF,CAAS,GAAI,UAAAD,GAAM;AAG/C,QAAMI,IAASL,EAAO,YAAA;AAEtB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAMN,EAAO,cAAA;AAAA,MACtB,cAAY,WAAWC,CAAK;AAAA,MAC5B,WAAWG;AAAA;AAAA;AAAA,QAGT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,UAAM,UAAAN,EAAA,CAAM;AAAA,QACZI,MAAW,QACV,gBAAAE,EAACC,GAAA,EAAY,WAAU,wDAAuD,IAC5EH,MAAW,SACb,gBAAAE,EAACE,KAAc,WAAU,uDAAA,CAAuD,IAEhF,gBAAAF,EAACG,GAAA,EAAiB,WAAU,yDAAA,CAAyD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI7F;"}

package/dist/components/ui/data-table/data-table-view-options.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsxs as o, jsx as n } from "react/jsx-runtime";
 import { CogIcon as t } from "@acronis-platform/icons-react/stroke-mono";
-import { DropdownMenu as a, DropdownMenuTrigger as d, DropdownMenuContent as l, DropdownMenuLabel as p, DropdownMenuSeparator as s, DropdownMenuCheckboxItem as c } from "../dropdown-menu/dropdown-menu.js";
+import { DropdownMenu as a, DropdownMenuTrigger as d, DropdownMenuContent as l, DropdownMenuLabel as s, DropdownMenuSeparator as p, DropdownMenuCheckboxItem as c } from "../dropdown-menu/dropdown-menu.js";
 import { Button as g } from "../button/button.js";
 function w({
   table: r
@@ -9,7 +9,7 @@ function w({
     /* @__PURE__ */ o(
       d,
       {
-        render: /* @__PURE__ */ n(g, { variant: "secondary", className: "ml-auto hidden h-8 gap-2 lg:flex" }),
+        render: /* @__PURE__ */ n(g, { variant: "secondary", className: "ms-auto hidden h-8 gap-2 lg:flex" }),
         children: [
           /* @__PURE__ */ n(t, {}),
           "View"
@@ -17,8 +17,8 @@ function w({
       }
     ),
     /* @__PURE__ */ o(l, { align: "end", className: "w-[150px]", children: [
-      /* @__PURE__ */ n(p, { children: "Toggle columns" }),
-      /* @__PURE__ */ n(s, {}),
+      /* @__PURE__ */ n(s, { children: "Toggle columns" }),
+      /* @__PURE__ */ n(p, {}),
       r.getAllColumns().filter(
         (e) => typeof e.accessorFn < "u" && e.getCanHide()
       ).map((e) => /* @__PURE__ */ n(

package/dist/components/ui/data-table/data-table-view-options.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-view-options.js","sources":["../../../../src/components/ui/data-table/data-table-view-options.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport { CogIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '../dropdown-menu';\n\ninterface DataTableViewOptionsProps<TData> {\n table: Table<TData>;\n}\n\nexport function DataTableViewOptions<TData>({\n table,\n}: DataTableViewOptionsProps<TData>) {\n return (\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button variant=\"secondary\" className=\"ml-auto hidden h-8 gap-2 lg:flex\" />\n }\n >\n <CogIcon />\n View\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== 'undefined' && column.getCanHide()\n )\n .map((column) => (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) => column.toggleVisibility(!!value)}\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n"],"names":["DataTableViewOptions","table","DropdownMenu","jsxs","DropdownMenuTrigger","jsx","Button","CogIcon","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","column","DropdownMenuCheckboxItem","value"],"mappings":";;;;AAiBO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AACF,GAAqC;AACnC,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QACE,gBAAAC,EAACC,GAAA,EAAO,SAAQ,aAAY,WAAU,oCAAmC;AAAA,QAG3E,UAAA;AAAA,UAAA,gBAAAD,EAACE,GAAA,EAAQ;AAAA,UAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,gBAAAJ,EAACK,GAAA,EAAoB,OAAM,OAAM,WAAU,aACzC,UAAA;AAAA,MAAA,gBAAAH,EAACI,KAAkB,UAAA,iBAAA,CAAc;AAAA,wBAChCC,GAAA,EAAsB;AAAA,MACtBT,EACE,gBACA;AAAA,QACC,CAACU,MACC,OAAOA,EAAO,aAAe,OAAeA,EAAO,WAAA;AAAA,MAAW,EAEjE,IAAI,CAACA,MACJ,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,SAASD,EAAO,aAAA;AAAA,UAChB,iBAAiB,CAACE,MAAUF,EAAO,iBAAiB,CAAC,CAACE,CAAK;AAAA,UAE1D,UAAAF,EAAO;AAAA,QAAA;AAAA,QALHA,EAAO;AAAA,MAAA,CAOf;AAAA,IAAA,EAAA,CACL;AAAA,EAAA,GACF;AAEJ;"}
1	+ {"version":3,"file":"data-table-view-options.js","sources":["../../../../src/components/ui/data-table/data-table-view-options.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport { CogIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '../dropdown-menu';\n\ninterface DataTableViewOptionsProps<TData> {\n table: Table<TData>;\n}\n\nexport function DataTableViewOptions<TData>({\n table,\n}: DataTableViewOptionsProps<TData>) {\n return (\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button variant=\"secondary\" className=\"ms-auto hidden h-8 gap-2 lg:flex\" />\n }\n >\n <CogIcon />\n View\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== 'undefined' && column.getCanHide()\n )\n .map((column) => (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) => column.toggleVisibility(!!value)}\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n"],"names":["DataTableViewOptions","table","DropdownMenu","jsxs","DropdownMenuTrigger","jsx","Button","CogIcon","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","column","DropdownMenuCheckboxItem","value"],"mappings":";;;;AAiBO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AACF,GAAqC;AACnC,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QACE,gBAAAC,EAACC,GAAA,EAAO,SAAQ,aAAY,WAAU,oCAAmC;AAAA,QAG3E,UAAA;AAAA,UAAA,gBAAAD,EAACE,GAAA,EAAQ;AAAA,UAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,gBAAAJ,EAACK,GAAA,EAAoB,OAAM,OAAM,WAAU,aACzC,UAAA;AAAA,MAAA,gBAAAH,EAACI,KAAkB,UAAA,iBAAA,CAAc;AAAA,wBAChCC,GAAA,EAAsB;AAAA,MACtBT,EACE,gBACA;AAAA,QACC,CAACU,MACC,OAAOA,EAAO,aAAe,OAAeA,EAAO,WAAA;AAAA,MAAW,EAEjE,IAAI,CAACA,MACJ,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,SAASD,EAAO,aAAA;AAAA,UAChB,iBAAiB,CAACE,MAAUF,EAAO,iBAAiB,CAAC,CAACE,CAAK;AAAA,UAE1D,UAAAF,EAAO;AAAA,QAAA;AAAA,QALHA,EAAO;AAAA,MAAA,CAOf;AAAA,IAAA,EAAA,CACL;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/ui/data-table/data-table.js CHANGED Viewed

@@ -36,7 +36,7 @@ function Z({
     {
       className: p(
         "rounded-md border border-[var(--ui-table-global-cell-border-color)]",
-        R ? "[&_th:not(:last-child)]:border-r [&_td:not(:last-child)]:border-r [&_th]:border-[var(--ui-table-global-cell-border-color)] [&_td]:border-[var(--ui-table-global-cell-border-color)]" : void 0
+        R ? "[&_th:not(:last-child)]:border-e [&_td:not(:last-child)]:border-e [&_th]:border-[var(--ui-table-global-cell-border-color)] [&_td]:border-[var(--ui-table-global-cell-border-color)]" : void 0
       ),
       children: /* @__PURE__ */ u(j, { children: [
         /* @__PURE__ */ e(A, { children: s.getHeaderGroups().map((l) => /* @__PURE__ */ e(a, { children: l.headers.map((o) => /* @__PURE__ */ e(B, { children: o.isPlaceholder ? null : h(

package/dist/components/ui/data-table/data-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table.js","sources":["../../../../src/components/ui/data-table/data-table.tsx"],"sourcesContent":["import { Fragment, type ReactNode, useState } from 'react';\nimport {\n type ColumnDef,\n type ColumnFiltersState,\n type ExpandedState,\n type Row,\n type SortingState,\n type VisibilityState,\n flexRender,\n getCoreRowModel,\n getExpandedRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\nimport { cn } from '@/lib/utils';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '../table';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `data-table`\n// (packages/ui-legacy/src/components/ui/data-table/). A TanStack-react-table v8\n// data grid composed over the ui-react Table primitives — sorting, filtering,\n// column visibility, row selection, pagination, and optional row expansion. The\n// presentational flags (`striped`, `bordered`, `skeleton`, `highlightCurrentRow`)\n// are borrowed from the Vue `AvTable`; behavioral features come from TanStack.\n// Pair with DataTableToolbar / DataTablePagination / DataTableColumnHeader, which\n// take the `table` instance returned to column cells via TanStack context.\n// The grid cells/rows/headers are themed by the Table primitives' `--ui-table-`\n// tier; DataTable's own chrome reuses that tier too — the wrapper border matches\n// the cell borders (`--ui-table-global-cell-border-color`), the empty-state uses\n// the muted table-value color, the current row the active-row color, and stripes\n// the secondary surface.\n\nexport interface DataTableProps<TData, TValue> {\n columns: ColumnDef<TData, TValue>[];\n data: TData[];\n /* Enables row expansion for rows that return true. Pair with `renderExpandedRow`. /\n getRowCanExpand?: (row: Row<TData>) => boolean;\n /\n Renders expanded content for an expanded row. Used together with\n * `getRowCanExpand`.\n /\n renderExpandedRow?: (row: Row<TData>) => ReactNode;\n /* Alternating row backgrounds. /\n striped?: boolean;\n /* Vertical borders between columns (rows already have horizontal borders). /\n bordered?: boolean;\n /* Highlight the row the user last clicked (the \"current\" row). /\n highlightCurrentRow?: boolean;\n /* Render placeholder skeleton rows instead of data (loading state). /\n skeleton?: boolean;\n /* Number of skeleton rows to render when `skeleton` is set. */\n skeletonRows?: number;\n}\n\nexport function DataTable<TData, TValue>({\n columns,\n data,\n getRowCanExpand,\n renderExpandedRow,\n striped = false,\n bordered = false,\n highlightCurrentRow = false,\n skeleton = false,\n skeletonRows = 5,\n}: DataTableProps<TData, TValue>) {\n const [sorting, setSorting] = useState<SortingState>([]);\n const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n const [rowSelection, setRowSelection] = useState({});\n const [expanded, setExpanded] = useState<ExpandedState>({});\n const [currentRowId, setCurrentRowId] = useState<string>();\n\n const table = useReactTable({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getRowCanExpand,\n onExpandedChange: setExpanded,\n onSortingChange: setSorting,\n getSortedRowModel: getSortedRowModel(),\n onColumnFiltersChange: setColumnFilters,\n getFilteredRowModel: getFilteredRowModel(),\n onColumnVisibilityChange: setColumnVisibility,\n onRowSelectionChange: setRowSelection,\n state: { sorting, columnFilters, columnVisibility, rowSelection, expanded },\n });\n\n const rows = table.getRowModel().rows;\n // Vertical borders are opt-in; a trailing border on the last cell would\n // double up with the wrapper, so suppress it.\n const borderedClass = bordered\n ? '[&_th:not(:last-child)]:border-r [&_td:not(:last-child)]:border-r [&_th]:border-[var(--ui-table-global-cell-border-color)] [&_td]:border-[var(--ui-table-global-cell-border-color)]'\n : undefined;\n\n return (\n <div\n className={cn(\n 'rounded-md border border-[var(--ui-table-global-cell-border-color)]',\n borderedClass\n )}\n >\n <Table>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => (\n <TableHead key={header.id}>\n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {skeleton ? (\n Array.from({ length: skeletonRows }).map((_, rowIndex) => (\n <TableRow key={`skeleton-${rowIndex}`} className=\"hover:bg-transparent\">\n {table.getVisibleLeafColumns().map((column) => (\n <TableCell key={column.id}>\n <div className=\"h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]\" />\n </TableCell>\n ))}\n </TableRow>\n ))\n ) : rows?.length ? (\n rows.map((row, rowIndex) => {\n const isSelected = row.getIsSelected();\n const isCurrent = highlightCurrentRow && currentRowId === row.id;\n return (\n <Fragment key={row.id}>\n <TableRow\n selected={isSelected}\n onClick={\n highlightCurrentRow\n ? () => setCurrentRowId(row.id)\n : undefined\n }\n className={cn(\n highlightCurrentRow && 'cursor-pointer',\n striped &&\n rowIndex % 2 === 1 &&\n !isSelected &&\n !isCurrent &&\n 'bg-[var(--ui-background-surface-secondary)]',\n isCurrent &&\n !isSelected &&\n 'bg-[var(--ui-table-global-row-color-active)]'\n )}\n >\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id}>\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n </TableCell>\n ))}\n </TableRow>\n {renderExpandedRow && row.getIsExpanded() && (\n <TableRow className=\"hover:bg-transparent\">\n <TableCell\n className=\"h-auto py-3\"\n colSpan={row.getVisibleCells().length}\n >\n {renderExpandedRow(row)}\n </TableCell>\n </TableRow>\n )}\n </Fragment>\n );\n })\n ) : (\n <TableRow>\n <TableCell\n colSpan={columns.length}\n className=\"h-24 text-center text-[var(--ui-table-data-value-color-disabled)]\"\n >\n No results.\n </TableCell>\n </TableRow>\n )}\n </TableBody>\n </Table>\n </div>\n );\n}\n"],"names":["DataTable","columns","data","getRowCanExpand","renderExpandedRow","striped","bordered","highlightCurrentRow","skeleton","skeletonRows","sorting","setSorting","useState","columnFilters","setColumnFilters","columnVisibility","setColumnVisibility","rowSelection","setRowSelection","expanded","setExpanded","currentRowId","setCurrentRowId","table","useReactTable","getCoreRowModel","getExpandedRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","rows","jsx","cn","Table","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","_","rowIndex","column","TableCell","row","isSelected","isCurrent","Fragment","cell"],"mappings":"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"}
1	+ {"version":3,"file":"data-table.js","sources":["../../../../src/components/ui/data-table/data-table.tsx"],"sourcesContent":["import { Fragment, type ReactNode, useState } from 'react';\nimport {\n type ColumnDef,\n type ColumnFiltersState,\n type ExpandedState,\n type Row,\n type SortingState,\n type VisibilityState,\n flexRender,\n getCoreRowModel,\n getExpandedRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\nimport { cn } from '@/lib/utils';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '../table';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `data-table`\n// (packages/ui-legacy/src/components/ui/data-table/). A TanStack-react-table v8\n// data grid composed over the ui-react Table primitives — sorting, filtering,\n// column visibility, row selection, pagination, and optional row expansion. The\n// presentational flags (`striped`, `bordered`, `skeleton`, `highlightCurrentRow`)\n// are borrowed from the Vue `AvTable`; behavioral features come from TanStack.\n// Pair with DataTableToolbar / DataTablePagination / DataTableColumnHeader, which\n// take the `table` instance returned to column cells via TanStack context.\n// The grid cells/rows/headers are themed by the Table primitives' `--ui-table-`\n// tier; DataTable's own chrome reuses that tier too — the wrapper border matches\n// the cell borders (`--ui-table-global-cell-border-color`), the empty-state uses\n// the muted table-value color, the current row the active-row color, and stripes\n// the secondary surface.\n\nexport interface DataTableProps<TData, TValue> {\n columns: ColumnDef<TData, TValue>[];\n data: TData[];\n /* Enables row expansion for rows that return true. Pair with `renderExpandedRow`. /\n getRowCanExpand?: (row: Row<TData>) => boolean;\n /\n Renders expanded content for an expanded row. Used together with\n * `getRowCanExpand`.\n /\n renderExpandedRow?: (row: Row<TData>) => ReactNode;\n /* Alternating row backgrounds. /\n striped?: boolean;\n /* Vertical borders between columns (rows already have horizontal borders). /\n bordered?: boolean;\n /* Highlight the row the user last clicked (the \"current\" row). /\n highlightCurrentRow?: boolean;\n /* Render placeholder skeleton rows instead of data (loading state). /\n skeleton?: boolean;\n /* Number of skeleton rows to render when `skeleton` is set. */\n skeletonRows?: number;\n}\n\nexport function DataTable<TData, TValue>({\n columns,\n data,\n getRowCanExpand,\n renderExpandedRow,\n striped = false,\n bordered = false,\n highlightCurrentRow = false,\n skeleton = false,\n skeletonRows = 5,\n}: DataTableProps<TData, TValue>) {\n const [sorting, setSorting] = useState<SortingState>([]);\n const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n const [rowSelection, setRowSelection] = useState({});\n const [expanded, setExpanded] = useState<ExpandedState>({});\n const [currentRowId, setCurrentRowId] = useState<string>();\n\n const table = useReactTable({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getRowCanExpand,\n onExpandedChange: setExpanded,\n onSortingChange: setSorting,\n getSortedRowModel: getSortedRowModel(),\n onColumnFiltersChange: setColumnFilters,\n getFilteredRowModel: getFilteredRowModel(),\n onColumnVisibilityChange: setColumnVisibility,\n onRowSelectionChange: setRowSelection,\n state: { sorting, columnFilters, columnVisibility, rowSelection, expanded },\n });\n\n const rows = table.getRowModel().rows;\n // Vertical borders are opt-in; a trailing border on the last cell would\n // double up with the wrapper, so suppress it.\n const borderedClass = bordered\n ? '[&_th:not(:last-child)]:border-e [&_td:not(:last-child)]:border-e [&_th]:border-[var(--ui-table-global-cell-border-color)] [&_td]:border-[var(--ui-table-global-cell-border-color)]'\n : undefined;\n\n return (\n <div\n className={cn(\n 'rounded-md border border-[var(--ui-table-global-cell-border-color)]',\n borderedClass\n )}\n >\n <Table>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => (\n <TableHead key={header.id}>\n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {skeleton ? (\n Array.from({ length: skeletonRows }).map((_, rowIndex) => (\n <TableRow key={`skeleton-${rowIndex}`} className=\"hover:bg-transparent\">\n {table.getVisibleLeafColumns().map((column) => (\n <TableCell key={column.id}>\n <div className=\"h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]\" />\n </TableCell>\n ))}\n </TableRow>\n ))\n ) : rows?.length ? (\n rows.map((row, rowIndex) => {\n const isSelected = row.getIsSelected();\n const isCurrent = highlightCurrentRow && currentRowId === row.id;\n return (\n <Fragment key={row.id}>\n <TableRow\n selected={isSelected}\n onClick={\n highlightCurrentRow\n ? () => setCurrentRowId(row.id)\n : undefined\n }\n className={cn(\n highlightCurrentRow && 'cursor-pointer',\n striped &&\n rowIndex % 2 === 1 &&\n !isSelected &&\n !isCurrent &&\n 'bg-[var(--ui-background-surface-secondary)]',\n isCurrent &&\n !isSelected &&\n 'bg-[var(--ui-table-global-row-color-active)]'\n )}\n >\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id}>\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n </TableCell>\n ))}\n </TableRow>\n {renderExpandedRow && row.getIsExpanded() && (\n <TableRow className=\"hover:bg-transparent\">\n <TableCell\n className=\"h-auto py-3\"\n colSpan={row.getVisibleCells().length}\n >\n {renderExpandedRow(row)}\n </TableCell>\n </TableRow>\n )}\n </Fragment>\n );\n })\n ) : (\n <TableRow>\n <TableCell\n colSpan={columns.length}\n className=\"h-24 text-center text-[var(--ui-table-data-value-color-disabled)]\"\n >\n No results.\n </TableCell>\n </TableRow>\n )}\n </TableBody>\n </Table>\n </div>\n );\n}\n"],"names":["DataTable","columns","data","getRowCanExpand","renderExpandedRow","striped","bordered","highlightCurrentRow","skeleton","skeletonRows","sorting","setSorting","useState","columnFilters","setColumnFilters","columnVisibility","setColumnVisibility","rowSelection","setRowSelection","expanded","setExpanded","currentRowId","setCurrentRowId","table","useReactTable","getCoreRowModel","getExpandedRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","rows","jsx","cn","Table","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","_","rowIndex","column","TableCell","row","isSelected","isCurrent","Fragment","cell"],"mappings":"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"}