@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.21

package/dist/ui/src/components/ui/navigation-menu/navigation-menu.js

@@ -0,0 +1,87 @@
+import { cn } from "../../../lib/utils.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
+import { POPUP_LAYER_CLASS } from "../../../lib/popup-list.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { IconChevronDown } from "@tabler/icons-react";
+import { NavigationMenu } from "@base-ui/react/navigation-menu";
+//#region ../ui/src/components/ui/navigation-menu/navigation-menu.tsx
+var NavigationMenu$1 = ({ align = "start", className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(NavigationMenu.Root, {
+		"data-slot": "navigation-menu",
+		className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(NavigationMenuPositioner, { align })]
+	});
+};
+var NavigationMenuList = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.List, {
+		"data-slot": "navigation-menu-list",
+		className: cn("group flex flex-1 list-none items-center justify-center gap-0", className),
+		...props
+	});
+};
+var NavigationMenuItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Item, {
+		"data-slot": "navigation-menu-item",
+		className: cn("relative", className),
+		...props
+	});
+};
+var navigationMenuTriggerStyle = cva("group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none motion-reduce:transition-none hover:bg-muted focus:bg-muted focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted");
+var NavigationMenuTrigger = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(NavigationMenu.Trigger, {
+		"data-slot": "navigation-menu-trigger",
+		className: cn(navigationMenuTriggerStyle(), "group", className),
+		...props,
+		children: [
+			children,
+			" ",
+			/* @__PURE__ */ jsx(IconChevronDown, {
+				className: "relative top-px ml-1 size-3 transition duration-300 motion-reduce:transition-none group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180",
+				"aria-hidden": "true"
+			})
+		]
+	});
+};
+var NavigationMenuContent = ({ className, ...props }) => {
+	useExposedFocusGuards();
+	return /* @__PURE__ */ jsx(NavigationMenu.Content, {
+		"data-slot": "navigation-menu-content",
+		className: cn("motion-reduce:animate-none motion-reduce:transition-none", "data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95", className),
+		...props
+	});
+};
+var NavigationMenuPositioner = ({ className, side = "bottom", sideOffset = 8, align = "start", alignOffset = 0, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Portal, { children: /* @__PURE__ */ jsx(NavigationMenu.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		className: cn(POPUP_LAYER_CLASS, "isolate h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", className),
+		...props,
+		children: /* @__PURE__ */ jsx(NavigationMenu.Popup, {
+			className: "data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none motion-reduce:transition-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0",
+			children: /* @__PURE__ */ jsx(NavigationMenu.Viewport, { className: "relative size-full overflow-hidden" })
+		})
+	}) });
+};
+var NavigationMenuLink = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Link, {
+		"data-slot": "navigation-menu-link",
+		className: cn("flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none motion-reduce:transition-none hover:bg-muted focus:bg-muted focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+};
+var NavigationMenuIndicator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Icon, {
+		"data-slot": "navigation-menu-indicator",
+		className: cn("motion-reduce:animate-none", "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+	});
+};
+//#endregion
+export { NavigationMenu$1 as NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, navigationMenuTriggerStyle };
+
+//# sourceMappingURL=navigation-menu.js.map

package/dist/ui/src/components/ui/navigation-menu/navigation-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/navigation-menu/navigation-menu.tsx"],"sourcesContent":["import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { POPUP_LAYER_CLASS } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport { cva } from 'class-variance-authority';\n\nexport const NavigationMenu = ({\n  align = 'start',\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) => {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className)}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner align={align} />\n    </NavigationMenuPrimitive.Root>\n  );\n};\n\nexport const NavigationMenuList = ({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) => {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn('group flex flex-1 list-none items-center justify-center gap-0', className)}\n      {...props}\n    />\n  );\n};\n\nexport const NavigationMenuItem = ({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) => {\n  return <NavigationMenuPrimitive.Item data-slot=\"navigation-menu-item\" className={cn('relative', className)} {...props} />;\n};\n\nexport const navigationMenuTriggerStyle = cva(\n  'group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none motion-reduce:transition-none hover:bg-muted focus:bg-muted focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted',\n);\n\nexport const NavigationMenuTrigger = ({ className, children, ...props }: NavigationMenuPrimitive.Trigger.Props) => {\n  return (\n    <NavigationMenuPrimitive.Trigger data-slot=\"navigation-menu-trigger\" className={cn(navigationMenuTriggerStyle(), 'group', className)} {...props}>\n      {children}{' '}\n      <IconChevronDown\n        className=\"relative top-px ml-1 size-3 transition duration-300 motion-reduce:transition-none group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n};\n\nexport const NavigationMenuContent = ({ className, ...props }: NavigationMenuPrimitive.Content.Props) => {\n  useExposedFocusGuards();\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        'motion-reduce:animate-none motion-reduce:transition-none',\n        'data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const NavigationMenuPositioner = ({\n  className,\n  side = 'bottom',\n  sideOffset = 8,\n  align = 'start',\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) => {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          POPUP_LAYER_CLASS,\n          'isolate h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0',\n          className,\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none motion-reduce:transition-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n};\n\nexport const NavigationMenuLink = ({ className, ...props }: NavigationMenuPrimitive.Link.Props) => {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none motion-reduce:transition-none hover:bg-muted focus:bg-muted focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const NavigationMenuIndicator = ({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) => {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        'motion-reduce:animate-none',\n        'top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Icon>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,IAAa,oBAAkB,EAC7B,QAAQ,SACR,WACA,UACA,GAAG,YAC+F;CAClG,OACE,qBAAC,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,oFAAoF,SAAS;EAC3G,GAAI;EAHN,UAAA,CAKG,UACD,oBAAC,0BAAD,EAAiC,MAAQ,CAAA,CACb;;AAElC;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAA8E;CAC/H,OACE,oBAAC,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAA8E;CAC/H,OAAO,oBAAC,eAAwB,MAAzB;EAA8B,aAAU;EAAuB,WAAW,GAAG,YAAY,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1H;AAEA,IAAa,6BAA6B,IACxC,kaACF;AAEA,IAAa,yBAAyB,EAAE,WAAW,UAAU,GAAG,YAAmD;CACjH,OACE,qBAAC,eAAwB,SAAzB;EAAiC,aAAU;EAA0B,WAAW,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAAG,GAAI;EAA1I,UAAA;GACG;GAAU;GACX,oBAAC,iBAAD;IACE,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;AAEA,IAAa,yBAAyB,EAAE,WAAW,GAAG,YAAmD;CACvG,sBAAsB;CACtB,OACE,oBAAC,eAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GACT,4DACA,ynDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,4BAA4B,EACvC,WACA,OAAO,UACP,aAAa,GACb,QAAQ,SACR,cAAc,GACd,GAAG,YAC2C;CAC9C,OACE,oBAAC,eAAwB,QAAzB,EAAA,UACE,oBAAC,eAAwB,YAAzB;EACQ;EACM;EACL;EACM;EACb,WAAW,GACT,mBACA,+UACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,eAAwB,OAAzB;GAA+B,WAAU;GACvC,UAAA,oBAAC,eAAwB,UAAzB,EAAkC,WAAU,qCAAsC,CAAA;EACrD,CAAA;CACG,CAAA,EACN,CAAA;AAEpC;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAAgD;CACjG,OACE,oBAAC,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GACT,uUACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,2BAA2B,EAAE,WAAW,GAAG,YAA8E;CACpI,OACE,oBAAC,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GACT,8BACA,8LACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,OAAD,EAAK,WAAU,yEAA0E,CAAA;CAC7D,CAAA;AAElC"}

package/dist/ui/src/components/ui/pagination/pagination.d.ts

@@ -1,3 +1,4 @@
+import type * as React from 'react';
 export type TPaginationRangeItem = number | 'ellipsis';
 /**
  * Compute the ordered list of page numbers and ellipsis markers to render.
@@ -7,11 +8,11 @@ export type TPaginationRangeItem = number | 'ellipsis';
 export declare const getPaginationRange: (page: number, count: number, siblingCount?: number) => TPaginationRangeItem[];
 /** Clamp a page number to the valid [1, count] range (count <= 0 yields 1). */
 export declare const clampPage: (page: number, count: number) => number;
-export interface IPaginationProps {
+export interface IPaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'className' | 'children'> {
     page: number;
     count: number;
     onPageChange: (page: number) => void;
     siblingCount?: number;
     className?: string;
 }
-export declare const Pagination: ({ page, count, onPageChange, siblingCount, className }: IPaginationProps) => import('react').JSX.Element;
+export declare const Pagination: ({ page, count, onPageChange, siblingCount, className, ...props }: IPaginationProps) => React.JSX.Element;

package/dist/ui/src/components/ui/pagination/pagination.js

@@ -0,0 +1,104 @@
+import { cn } from "../../../lib/utils.js";
+import { buttonVariants } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconChevronLeft, IconChevronRight, IconDots } from "@tabler/icons-react";
+//#region ../ui/src/components/ui/pagination/pagination.tsx
+/**
+* Compute the ordered list of page numbers and ellipsis markers to render.
+* First and last pages are always included. `siblingCount` controls how many
+* page numbers appear on each side of the current page.
+*/
+var getPaginationRange = (page, count, siblingCount = 1) => {
+	if (count <= 0) return [];
+	const currentPage = Math.min(Math.max(page, 1), count);
+	if (count <= 2 * siblingCount + 5) return Array.from({ length: count }, (_, i) => i + 1);
+	const leftSiblingStart = Math.max(currentPage - siblingCount, 2);
+	const rightSiblingEnd = Math.min(currentPage + siblingCount, count - 1);
+	const showLeftEllipsis = leftSiblingStart > 2;
+	const showRightEllipsis = rightSiblingEnd < count - 1;
+	const range = [1];
+	if (showLeftEllipsis) range.push("ellipsis");
+	else for (let i = 2; i < leftSiblingStart; i++) range.push(i);
+	for (let i = leftSiblingStart; i <= rightSiblingEnd; i++) range.push(i);
+	if (showRightEllipsis) range.push("ellipsis");
+	else for (let i = rightSiblingEnd + 1; i < count; i++) range.push(i);
+	range.push(count);
+	return range;
+};
+/** Clamp a page number to the valid [1, count] range (count <= 0 yields 1). */
+var clampPage = (page, count) => Math.min(Math.max(page, 1), Math.max(count, 1));
+var Pagination = ({ page, count, onPageChange, siblingCount = 1, className, ...props }) => {
+	const currentPage = clampPage(page, count);
+	const range = getPaginationRange(currentPage, count, siblingCount);
+	let ellipsisCount = 0;
+	const handlePrev = () => {
+		if (currentPage > 1) onPageChange(currentPage - 1);
+	};
+	const handleNext = () => {
+		if (currentPage < count) onPageChange(currentPage + 1);
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "pagination",
+		...props,
+		className: cn("mx-auto flex w-full justify-center", className),
+		children: /* @__PURE__ */ jsxs("ul", {
+			className: "flex flex-row items-center gap-1",
+			children: [
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Go to previous page",
+					disabled: currentPage <= 1,
+					onClick: handlePrev,
+					className: cn(buttonVariants({
+						variant: "ghost",
+						size: "icon"
+					}), "size-8"),
+					children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 16 })
+				}) }),
+				range.map((item) => {
+					if (item === "ellipsis") {
+						ellipsisCount += 1;
+						const ellipsisKey = `ellipsis-${ellipsisCount}`;
+						return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: cn(buttonVariants({
+								variant: "ghost",
+								size: "icon"
+							}), "size-8 cursor-default pointer-events-none"),
+							children: /* @__PURE__ */ jsx(IconDots, { size: 16 })
+						}) }, ellipsisKey);
+					}
+					const isActive = item === currentPage;
+					return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Go to page ${item}`,
+						"aria-current": isActive ? "page" : void 0,
+						onClick: () => {
+							if (!isActive) onPageChange(item);
+						},
+						className: cn(buttonVariants({
+							variant: isActive ? "outline" : "ghost",
+							size: "icon"
+						}), "size-8", isActive && "pointer-events-none font-semibold"),
+						children: item
+					}) }, item);
+				}),
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Go to next page",
+					disabled: currentPage >= count,
+					onClick: handleNext,
+					className: cn(buttonVariants({
+						variant: "ghost",
+						size: "icon"
+					}), "size-8"),
+					children: /* @__PURE__ */ jsx(IconChevronRight, { size: 16 })
+				}) })
+			]
+		})
+	});
+};
+//#endregion
+export { Pagination, clampPage, getPaginationRange };
+
+//# sourceMappingURL=pagination.js.map

package/dist/ui/src/components/ui/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../../../../../ui/src/components/ui/pagination/pagination.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { IconChevronLeft, IconChevronRight, IconDots } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { buttonVariants } from '../button/button';\n\nexport type TPaginationRangeItem = number | 'ellipsis';\n\n/**\n * Compute the ordered list of page numbers and ellipsis markers to render.\n * First and last pages are always included. `siblingCount` controls how many\n * page numbers appear on each side of the current page.\n */\nexport const getPaginationRange = (page: number, count: number, siblingCount = 1): TPaginationRangeItem[] => {\n  if (count <= 0) {\n    return [];\n  }\n\n  // Clamp the current page to [1, count].\n  const currentPage = Math.min(Math.max(page, 1), count);\n\n  // When count is small enough to show every page, return all pages without ellipsis.\n  // Threshold: first + (siblingCount pages each side of page) + last + 2 gap pages = 2*siblingCount + 5.\n  // E.g. siblingCount=1 -> threshold 7; siblingCount=2 -> threshold 9.\n  if (count <= 2 * siblingCount + 5) {\n    return Array.from({ length: count }, (_, i) => i + 1);\n  }\n\n  const leftSiblingStart = Math.max(currentPage - siblingCount, 2);\n  const rightSiblingEnd = Math.min(currentPage + siblingCount, count - 1);\n\n  const showLeftEllipsis = leftSiblingStart > 2;\n  const showRightEllipsis = rightSiblingEnd < count - 1;\n\n  const range: TPaginationRangeItem[] = [1];\n\n  if (showLeftEllipsis) {\n    range.push('ellipsis');\n  } else {\n    // Fill pages between 1 and leftSiblingStart (exclusive) if the gap is small.\n    for (let i = 2; i < leftSiblingStart; i++) {\n      range.push(i);\n    }\n  }\n\n  for (let i = leftSiblingStart; i <= rightSiblingEnd; i++) {\n    range.push(i);\n  }\n\n  if (showRightEllipsis) {\n    range.push('ellipsis');\n  } else {\n    // Fill pages between rightSiblingEnd (exclusive) and last.\n    for (let i = rightSiblingEnd + 1; i < count; i++) {\n      range.push(i);\n    }\n  }\n\n  range.push(count);\n\n  return range;\n};\n\n/** Clamp a page number to the valid [1, count] range (count <= 0 yields 1). */\nexport const clampPage = (page: number, count: number): number => Math.min(Math.max(page, 1), Math.max(count, 1));\n\nexport interface IPaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'className' | 'children'> {\n  page: number;\n  count: number;\n  onPageChange: (page: number) => void;\n  siblingCount?: number;\n  className?: string;\n}\n\nexport const Pagination = ({ page, count, onPageChange, siblingCount = 1, className, ...props }: IPaginationProps) => {\n  // Clamp once and use the clamped value everywhere (active marker, prev/next\n  // steps, disabled checks). getPaginationRange clamps internally too; the\n  // component must agree with it, or an out-of-range `page` leaves no page marked\n  // current and steps prev/next from the wrong base.\n  const currentPage = clampPage(page, count);\n  const range = getPaginationRange(currentPage, count, siblingCount);\n  // Track how many ellipsis items we've seen to give each a stable unique key.\n  let ellipsisCount = 0;\n\n  const handlePrev = () => {\n    if (currentPage > 1) {\n      onPageChange(currentPage - 1);\n    }\n  };\n\n  const handleNext = () => {\n    if (currentPage < count) {\n      onPageChange(currentPage + 1);\n    }\n  };\n\n  return (\n    <nav aria-label=\"pagination\" {...props} className={cn('mx-auto flex w-full justify-center', className)}>\n      <ul className=\"flex flex-row items-center gap-1\">\n        <li>\n          <button\n            type=\"button\"\n            aria-label=\"Go to previous page\"\n            disabled={currentPage <= 1}\n            onClick={handlePrev}\n            className={cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'size-8')}\n          >\n            <IconChevronLeft size={16} />\n          </button>\n        </li>\n\n        {range.map((item) => {\n          if (item === 'ellipsis') {\n            ellipsisCount += 1;\n            const ellipsisKey = `ellipsis-${ellipsisCount}`;\n            return (\n              <li key={ellipsisKey}>\n                <span\n                  aria-hidden=\"true\"\n                  className={cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'size-8 cursor-default pointer-events-none')}\n                >\n                  <IconDots size={16} />\n                </span>\n              </li>\n            );\n          }\n\n          const isActive = item === currentPage;\n          return (\n            <li key={item}>\n              <button\n                type=\"button\"\n                aria-label={`Go to page ${item}`}\n                aria-current={isActive ? 'page' : undefined}\n                onClick={() => {\n                  if (!isActive) {\n                    onPageChange(item);\n                  }\n                }}\n                className={cn(\n                  buttonVariants({ variant: isActive ? 'outline' : 'ghost', size: 'icon' }),\n                  'size-8',\n                  isActive && 'pointer-events-none font-semibold',\n                )}\n              >\n                {item}\n              </button>\n            </li>\n          );\n        })}\n\n        <li>\n          <button\n            type=\"button\"\n            aria-label=\"Go to next page\"\n            disabled={currentPage >= count}\n            onClick={handleNext}\n            className={cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'size-8')}\n          >\n            <IconChevronRight size={16} />\n          </button>\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/ui/popover/popover.d.ts

@@ -2,7 +2,7 @@ import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import type * as React from 'react';
 export declare const Popover: ({ ...props }: PopoverPrimitive.Root.Props) => React.JSX.Element;
 export declare const PopoverTrigger: ({ ...props }: PopoverPrimitive.Trigger.Props) => React.JSX.Element;
-export declare const PopoverContent: ({ className, align, alignOffset, side, sideOffset, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => React.JSX.Element;
+export declare const PopoverContent: ({ className, align, alignOffset, side, sideOffset, anchor, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "anchor" | "side" | "sideOffset">) => React.JSX.Element;
 export declare const PopoverHeader: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
 export declare const PopoverTitle: ({ className, ...props }: PopoverPrimitive.Title.Props) => React.JSX.Element;
 export declare const PopoverDescription: ({ className, ...props }: PopoverPrimitive.Description.Props) => React.JSX.Element;

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

@@ -0,0 +1,59 @@
+import { cn } from "../../../lib/utils.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
+import { POPUP_LAYER_CLASS } from "../../../lib/popup-list.js";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region ../ui/src/components/ui/popover/popover.tsx
+var Popover$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+};
+var PopoverTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+};
+var PopoverContent = ({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, anchor, ...props }) => {
+	useExposedFocusGuards();
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		alignOffset,
+		anchor,
+		side,
+		sideOffset,
+		className: cn(POPUP_LAYER_CLASS, "isolate"),
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			"data-slot": "popover-content",
+			className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 motion-reduce:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+};
+var PopoverHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: cn("flex flex-col gap-0.5 text-sm", className),
+		...props
+	});
+};
+var PopoverTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		"data-slot": "popover-title",
+		className: cn("font-medium", className),
+		...props
+	});
+};
+var PopoverDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		"data-slot": "popover-description",
+		className: cn("text-muted-foreground", className),
+		...props
+	});
+};
+//#endregion
+export { Popover$1 as Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };
+
+//# sourceMappingURL=popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":[],"sources":["../../../../../../../ui/src/components/ui/popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { POPUP_LAYER_CLASS } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport const Popover = ({ ...props }: PopoverPrimitive.Root.Props) => {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n};\n\nexport const PopoverTrigger = ({ ...props }: PopoverPrimitive.Trigger.Props) => {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n};\n\nexport const PopoverContent = ({\n  className,\n  align = 'center',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  anchor,\n  ...props\n}: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'anchor' | 'side' | 'sideOffset'>) => {\n  useExposedFocusGuards();\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        side={side}\n        sideOffset={sideOffset}\n        className={cn(POPUP_LAYER_CLASS, 'isolate')}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 motion-reduce:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n};\n\nexport const PopoverHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"popover-header\" className={cn('flex flex-col gap-0.5 text-sm', className)} {...props} />;\n};\n\nexport const PopoverTitle = ({ className, ...props }: PopoverPrimitive.Title.Props) => {\n  return <PopoverPrimitive.Title data-slot=\"popover-title\" className={cn('font-medium', className)} {...props} />;\n};\n\nexport const PopoverDescription = ({ className, ...props }: PopoverPrimitive.Description.Props) => {\n  return <PopoverPrimitive.Description data-slot=\"popover-description\" className={cn('text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":";;;;;;AAMA,IAAa,aAAW,EAAE,GAAG,YAAyC;CACpE,OAAO,oBAAC,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,IAAa,kBAAkB,EAAE,GAAG,YAA4C;CAC9E,OAAO,oBAAC,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,IAAa,kBAAkB,EAC7B,WACA,QAAQ,UACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,QACA,GAAG,YACqI;CACxI,sBAAsB;CACtB,OACE,oBAAC,QAAiB,QAAlB,EAAA,UACE,oBAAC,QAAiB,YAAlB;EACS;EACM;EACL;EACF;EACM;EACZ,WAAW,GAAG,mBAAmB,SAAS;EAE1C,UAAA,oBAAC,QAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,klBACA,SACF;GACA,GAAI;EACL,CAAA;CAC0B,CAAA,EACN,CAAA;AAE7B;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAyC;CACrF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAiB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA0C;CACrF,OAAO,oBAAC,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,WAAW,GAAG,eAAe,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAAgD;CACjG,OAAO,oBAAC,QAAiB,aAAlB;EAA8B,aAAU;EAAsB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtI"}

package/dist/ui/src/components/ui/progress/progress.behavior.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Progress tones: a closed set of theme tokens, never a free class string.
+ *
+ * PATH TAKEN: classes and attributes do not depend on layout, so happy-dom is enough. The
+ * tokens' contrast is measured from the real tokens.css below, and the rendered colours in
+ * the browser by e2e/progress-tone.spec.ts.
+ */
+export {};

package/dist/ui/src/components/ui/progress/progress.d.ts

@@ -1,5 +1,47 @@
 import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+import { VariantProps } from 'class-variance-authority';
+/**
+ * The tones: a closed set of semantic colours rather than a class string, so a bar cannot carry a
+ * colour the theme does not define and dark mode and a re-theme keep working. Each is the theme token
+ * the fill uses; the track is a 20% tint of the same token.
+ */
+declare const TONE_TOKEN: {
+    readonly default: "var(--primary)";
+    readonly info: "var(--info)";
+    readonly success: "var(--success)";
+    readonly warning: "var(--warning)";
+    readonly destructive: "var(--destructive)";
+};
+export type TProgressTone = keyof typeof TONE_TOKEN;
+/**
+ * Colours an app can set without a class string. --progress-color replaces the fill (any colour, such as an
+ * app's own status tokens); --progress-track replaces the track, which does not follow the fill: an app
+ * that wants a neutral track sets it to var(--muted). Both are read where the bar is, so they follow the
+ * theme and can be set on :root or on any ancestor.
+ */
+export declare const progressFill: (tone: TProgressTone) => string;
+export declare const progressTrack: (tone: TProgressTone) => string;
+/**
+ * How the fill eases its width. The defaults are the 300ms ease-in-out it always had; an app retunes them
+ * with --progress-duration and --progress-ease, or turns the easing off with `animated={false}` when the
+ * number it shows is itself animated and the bar is driven from the same clock.
+ */
+export declare const PROGRESS_DURATION = "var(--progress-duration, 300ms)";
+export declare const PROGRESS_EASE = "var(--progress-ease, cubic-bezier(0.4, 0, 0.2, 1))";
+declare const progressTrackVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface IProgressProps extends Omit<ProgressPrimitive.Root.Props, 'value'> {
     value?: number | null;
+    /** The bar's colour: a share of a total reads as `warning` when nearly used up, `success` when done. */
+    tone?: TProgressTone;
+    /** 4px (`sm`) or 8px (default) tall. */
+    size?: VariantProps<typeof progressTrackVariants>['size'];
+    /**
+     * Whether the fill eases when `value` changes. Turn it off when the value already moves smoothly
+     * (driven from an animated number's clock), or the bar eases a second time behind it.
+     */
+    animated?: boolean;
 }
-export declare const Progress: ({ value, className, ...props }: IProgressProps) => import('react').JSX.Element;
+export declare const Progress: ({ value, tone, size, animated, className, ...props }: IProgressProps) => import('react').JSX.Element;
+export {};

package/dist/ui/src/components/ui/progress/progress.js

@@ -0,0 +1,70 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Progress } from "@base-ui/react/progress";
+//#region ../ui/src/components/ui/progress/progress.tsx
+/**
+* The tones: a closed set of semantic colours rather than a class string, so a bar cannot carry a
+* colour the theme does not define and dark mode and a re-theme keep working. Each is the theme token
+* the fill uses; the track is a 20% tint of the same token.
+*/
+var TONE_TOKEN = {
+	default: "var(--primary)",
+	info: "var(--info)",
+	success: "var(--success)",
+	warning: "var(--warning)",
+	destructive: "var(--destructive)"
+};
+/**
+* Colours an app can set without a class string. --progress-color replaces the fill (any colour, such as an
+* app's own status tokens); --progress-track replaces the track, which does not follow the fill: an app
+* that wants a neutral track sets it to var(--muted). Both are read where the bar is, so they follow the
+* theme and can be set on :root or on any ancestor.
+*/
+var progressFill = (tone) => `var(--progress-color, ${TONE_TOKEN[tone]})`;
+var progressTrack = (tone) => `var(--progress-track, color-mix(in oklab, ${TONE_TOKEN[tone]} 20%, transparent))`;
+/**
+* How the fill eases its width. The defaults are the 300ms ease-in-out it always had; an app retunes them
+* with --progress-duration and --progress-ease, or turns the easing off with `animated={false}` when the
+* number it shows is itself animated and the bar is driven from the same clock.
+*/
+var PROGRESS_DURATION = "var(--progress-duration, 300ms)";
+var PROGRESS_EASE = "var(--progress-ease, cubic-bezier(0.4, 0, 0.2, 1))";
+var progressTrackVariants = cva("relative w-full overflow-hidden rounded-full", {
+	variants: { size: {
+		sm: "h-1",
+		default: "h-2"
+	} },
+	defaultVariants: { size: "default" }
+});
+var Progress$1 = ({ value = null, tone = "default", size, animated = true, className, ...props }) => {
+	const fillStyle = {
+		backgroundColor: progressFill(tone),
+		...value != null ? { width: `${value}%` } : null,
+		...animated ? {
+			transitionDuration: PROGRESS_DURATION,
+			transitionTimingFunction: PROGRESS_EASE
+		} : null
+	};
+	return /* @__PURE__ */ jsx(Progress.Root, {
+		"data-slot": "progress",
+		value: value ?? null,
+		className: cn("w-full", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Progress.Track, {
+			"data-slot": "progress-track",
+			className: progressTrackVariants({ size }),
+			style: { backgroundColor: progressTrack(tone) },
+			children: /* @__PURE__ */ jsx(Progress.Indicator, {
+				"data-slot": "progress-indicator",
+				"data-tone": tone,
+				className: cn("h-full rounded-full motion-reduce:transition-none motion-reduce:animate-none data-indeterminate:w-1/3 data-indeterminate:animate-[progress-indeterminate_1.5s_ease-in-out_infinite]", animated ? "transition-[width] duration-300 ease-in-out" : "transition-none"),
+				style: fillStyle
+			})
+		})
+	});
+};
+//#endregion
+export { PROGRESS_DURATION, PROGRESS_EASE, Progress$1 as Progress, progressFill, progressTrack };
+
+//# sourceMappingURL=progress.js.map

package/dist/ui/src/components/ui/progress/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","names":[],"sources":["../../../../../../../ui/src/components/ui/progress/progress.tsx"],"sourcesContent":["import { Progress as ProgressPrimitive } from '@base-ui/react/progress';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { CSSProperties } from 'react';\n\n/**\n * The tones: a closed set of semantic colours rather than a class string, so a bar cannot carry a\n * colour the theme does not define and dark mode and a re-theme keep working. Each is the theme token\n * the fill uses; the track is a 20% tint of the same token.\n */\nconst TONE_TOKEN = {\n  default: 'var(--primary)',\n  info: 'var(--info)',\n  success: 'var(--success)',\n  warning: 'var(--warning)',\n  destructive: 'var(--destructive)',\n} as const;\n\nexport type TProgressTone = keyof typeof TONE_TOKEN;\n\n/**\n * Colours an app can set without a class string. --progress-color replaces the fill (any colour, such as an\n * app's own status tokens); --progress-track replaces the track, which does not follow the fill: an app\n * that wants a neutral track sets it to var(--muted). Both are read where the bar is, so they follow the\n * theme and can be set on :root or on any ancestor.\n */\nexport const progressFill = (tone: TProgressTone): string => `var(--progress-color, ${TONE_TOKEN[tone]})`;\n\nexport const progressTrack = (tone: TProgressTone): string => `var(--progress-track, color-mix(in oklab, ${TONE_TOKEN[tone]} 20%, transparent))`;\n\n/**\n * How the fill eases its width. The defaults are the 300ms ease-in-out it always had; an app retunes them\n * with --progress-duration and --progress-ease, or turns the easing off with `animated={false}` when the\n * number it shows is itself animated and the bar is driven from the same clock.\n */\nexport const PROGRESS_DURATION = 'var(--progress-duration, 300ms)';\nexport const PROGRESS_EASE = 'var(--progress-ease, cubic-bezier(0.4, 0, 0.2, 1))';\n\nconst progressTrackVariants = cva('relative w-full overflow-hidden rounded-full', {\n  variants: {\n    size: {\n      sm: 'h-1',\n      default: 'h-2',\n    },\n  },\n  defaultVariants: { size: 'default' },\n});\n\nexport interface IProgressProps extends Omit<ProgressPrimitive.Root.Props, 'value'> {\n  value?: number | null;\n  /** The bar's colour: a share of a total reads as `warning` when nearly used up, `success` when done. */\n  tone?: TProgressTone;\n  /** 4px (`sm`) or 8px (default) tall. */\n  size?: VariantProps<typeof progressTrackVariants>['size'];\n  /**\n   * Whether the fill eases when `value` changes. Turn it off when the value already moves smoothly\n   * (driven from an animated number's clock), or the bar eases a second time behind it.\n   */\n  animated?: boolean;\n}\n\nexport const Progress = ({ value = null, tone = 'default', size, animated = true, className, ...props }: IProgressProps) => {\n  const fillStyle: CSSProperties = {\n    backgroundColor: progressFill(tone),\n    ...(value != null ? { width: `${value}%` } : null),\n    ...(animated ? { transitionDuration: PROGRESS_DURATION, transitionTimingFunction: PROGRESS_EASE } : null),\n  };\n  return (\n    <ProgressPrimitive.Root data-slot=\"progress\" value={value ?? null} className={cn('w-full', className)} {...props}>\n      <ProgressPrimitive.Track\n        data-slot=\"progress-track\"\n        className={progressTrackVariants({ size })}\n        style={{ backgroundColor: progressTrack(tone) }}\n      >\n        <ProgressPrimitive.Indicator\n          data-slot=\"progress-indicator\"\n          data-tone={tone}\n          className={cn(\n            'h-full rounded-full motion-reduce:transition-none motion-reduce:animate-none data-indeterminate:w-1/3 data-indeterminate:animate-[progress-indeterminate_1.5s_ease-in-out_infinite]',\n            animated ? 'transition-[width] duration-300 ease-in-out' : 'transition-none',\n          )}\n          style={fillStyle}\n        />\n      </ProgressPrimitive.Track>\n    </ProgressPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;AAUA,IAAM,aAAa;CACjB,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,aAAa;AACf;;;;;;;AAUA,IAAa,gBAAgB,SAAgC,yBAAyB,WAAW,MAAM;AAEvG,IAAa,iBAAiB,SAAgC,6CAA6C,WAAW,MAAM;;;;;;AAO5H,IAAa,oBAAoB;AACjC,IAAa,gBAAgB;AAE7B,IAAM,wBAAwB,IAAI,gDAAgD;CAChF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AAeD,IAAa,cAAY,EAAE,QAAQ,MAAM,OAAO,WAAW,MAAM,WAAW,MAAM,WAAW,GAAG,YAA4B;CAC1H,MAAM,YAA2B;EAC/B,iBAAiB,aAAa,IAAI;EAClC,GAAI,SAAS,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI;EAC7C,GAAI,WAAW;GAAE,oBAAoB;GAAmB,0BAA0B;EAAc,IAAI;CACtG;CACA,OACE,oBAAC,SAAkB,MAAnB;EAAwB,aAAU;EAAW,OAAO,SAAS;EAAM,WAAW,GAAG,UAAU,SAAS;EAAG,GAAI;EACzG,UAAA,oBAAC,SAAkB,OAAnB;GACE,aAAU;GACV,WAAW,sBAAsB,EAAE,KAAK,CAAC;GACzC,OAAO,EAAE,iBAAiB,cAAc,IAAI,EAAE;GAE9C,UAAA,oBAAC,SAAkB,WAAnB;IACE,aAAU;IACV,aAAW;IACX,WAAW,GACT,uLACA,WAAW,gDAAgD,iBAC7D;IACA,OAAO;GACR,CAAA;EACsB,CAAA;CACH,CAAA;AAE5B"}