@agentero/design-system 0.32.1 → 0.32.2

package/mcp/manifests/components.html

@@ -594,7 +594,7 @@
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-component-meta</code>. Generation took <strong>4.0s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>4.9s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -1562,7 +1562,7 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <div class="row">
                   <span class="ex-name">Imports</span>
                 </div>
-                <pre><code>import { Avatar } from "@agentero/design-system";</code></pre>
+                <pre><code>import { Avatar, Button } from "@agentero/design-system";</code></pre>
               </div>
           
           

package/mcp/manifests/components.json

@@ -1225,7 +1225,7 @@
           "summary": "All avatar shapes with a profile image"
         }
       ],
-      "import": "import { Avatar } from \"@agentero/design-system\";"
+      "import": "import { Avatar, Button } from \"@agentero/design-system\";"
     },
     "components-button": {
       "id": "components-button",
@@ -9590,6 +9590,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3999
+    "durationMs": 4877
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.32.1",
+	"version": "0.32.2",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",

package/src/accordion/accordion.js

@@ -35,7 +35,7 @@ var d = ({ className: r, children: s, asChild: c, ...l }) => /* @__PURE__ */ a(u
 d.displayName = "Accordion.Trigger";
 var f = ({ className: t, children: r, ...i }) => /* @__PURE__ */ a(n.Content, {
 	"data-slot": "accordion-content",
-	className: e("overflow-hidden px-4 text-sm", "motion-safe:data-[state=open]:animate-[accordionDown_200ms_ease-out]", "motion-safe:data-[state=closed]:animate-[accordionUp_200ms_ease-out]", t),
+	className: e("overflow-hidden px-4 text-sm", "motion-safe:data-[state=open]:animate-accordion-down", "motion-safe:data-[state=closed]:animate-accordion-up", t),
 	...i,
 	children: /* @__PURE__ */ a("div", {
 		className: "pb-4",

package/src/avatar/avatar.js

@@ -1,11 +1,11 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { tv as t } from "tailwind-variants";
-import { createContext as n, use as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-avatar";
+import { createContext as n, use as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-avatar";
 //#region src/avatar/avatar.tsx
-var s = t({
+var c = t({
 	slots: {
 		root: [
 			"flex items-center justify-center align-middle",
@@ -17,7 +17,7 @@ var s = t({
 			"border-[var(--avatar-border-color,var(--color-border-default-base-primary))]",
 			"h-fit w-fit"
 		],
-		image: ["flex object-cover box-border h-full vertical-align-middle w-full"],
+		image: ["flex object-cover box-border h-full vertical-align-middle w-full", "data-loaded-late:transition-opacity data-loaded-late:duration-200 data-loaded-late:starting:opacity-0"],
 		fallback: ["uppercase", "[&_svg]:size-[1.5em] [&_svg]:fill-neutral-500"]
 	},
 	variants: {
@@ -126,58 +126,63 @@ var s = t({
 		variant: "circle",
 		type: "photo"
 	}
-}), c = n(null), l = () => {
-	let e = r(c);
+}), l = n(null), u = () => {
+	let e = r(l);
 	if (!e) throw Error("useAvatar must be used within an AvatarProvider");
 	return e;
-}, u = ({ size: t, variant: n, type: r, ...a }) => {
-	let l = s({
+}, d = ({ size: t, variant: n, type: r, ...i }) => {
+	let o = c({
 		size: t,
 		variant: n,
 		type: r
 	});
-	return /* @__PURE__ */ i(c, {
+	return /* @__PURE__ */ a(l, {
 		value: {
 			size: t,
 			variant: n,
 			type: r,
-			slotsStyles: l
+			slotsStyles: o
 		},
-		children: /* @__PURE__ */ i(o.Root, {
-			...a,
-			className: e(l.root(), a.className)
+		children: /* @__PURE__ */ a(s.Root, {
+			...i,
+			className: e(o.root(), i.className)
 		})
 	});
-}, d = (t) => {
-	let { slotsStyles: n } = l();
-	return /* @__PURE__ */ i(o.Image, {
-		...t,
-		className: e(n.image(), t.className)
+}, f = ({ onLoadingStatusChange: t, ...n }) => {
+	let { slotsStyles: r } = u(), [o, c] = i(!1);
+	return /* @__PURE__ */ a(s.Image, {
+		...n,
+		"data-loaded-late": o || void 0,
+		onLoadingStatusChange: (e) => {
+			e === "loading" && c(!0), t?.(e);
+		},
+		className: e(r.image(), n.className)
 	});
-}, f = (t) => {
-	let { slotsStyles: n } = l();
-	return /* @__PURE__ */ i(o.Fallback, {
+}, p = (t) => {
+	let { slotsStyles: n } = u();
+	return /* @__PURE__ */ a(s.Fallback, {
 		...t,
 		className: e(n.fallback(), t.className)
 	});
-}, p = ({ alt: e, src: t, fallback: n, colorize: r, size: o, variant: s, type: c, ref: l, ...p }) => {
-	let m = r ? g(r) : void 0;
-	return /* @__PURE__ */ a(u, {
-		...p,
-		ref: l,
-		size: o,
-		variant: s,
-		type: c,
+}, m = ({ alt: e, src: t, fallback: n, colorize: r, size: s, variant: c, type: l, ref: u, ...m }) => {
+	let h = r ? _(r) : void 0, [g, v] = i(!1);
+	return /* @__PURE__ */ o(d, {
+		...m,
+		ref: u,
+		size: s,
+		variant: c,
+		type: l,
 		style: {
-			...m,
-			...p.style
+			...h,
+			...m.style
 		},
-		children: [/* @__PURE__ */ i(d, {
+		children: [/* @__PURE__ */ a(f, {
 			alt: e,
-			src: t
-		}), /* @__PURE__ */ i(f, { children: n })]
+			src: t,
+			onLoadingStatusChange: (e) => v(e === "error")
+		}), (!t || g) && /* @__PURE__ */ a(p, { children: n })]
 	});
-}, m = [
+}, h = [
 	{
 		dark: "#434343",
 		light: "#e3e3e3"
@@ -214,15 +219,15 @@ var s = t({
 		dark: "#0f8a2a",
 		light: "#d1fada"
 	}
-], h = (e) => {
+], g = (e) => {
 	let t = e.split("").reduce((e, t, n) => {
 		let r = 1;
 		for (let e = 0; e < n; e++) r *= 26;
 		return e + (t.charCodeAt(0) - 97 + 1) * r;
 	}, 0);
-	return m[(t < 0 ? -t : t) % m.length];
-}, g = (e) => {
-	let { dark: t, light: n } = h(e);
+	return h[(t < 0 ? -t : t) % h.length];
+}, _ = (e) => {
+	let { dark: t, light: n } = g(e);
 	return {
 		color: t,
 		backgroundColor: n,
@@ -230,4 +235,4 @@ var s = t({
 	};
 };
 //#endregion
-export { p as Avatar, s as avatarRecipe, l as useAvatar };
+export { m as Avatar, c as avatarRecipe, u as useAvatar };

package/src/button/button.js

@@ -245,7 +245,7 @@ var c = t({
 }), l = () => /* @__PURE__ */ i("span", {
 	"aria-label": "loading",
 	role: "status",
-	className: e("absolute inset-0 grid place-items-center", "rounded-[inherit] bg-inherit", "before:content-[\"\"] before:block before:size-[1em]", "before:border-2 before:border-solid before:rounded-full", "before:border-current before:border-t-transparent", "before:animate-spin before:[animation-duration:0.5s]")
+	className: e("absolute inset-0 grid place-items-center", "rounded-[inherit] bg-inherit", "transition-opacity duration-150 starting:opacity-0", "before:content-[\"\"] before:block before:size-[1em]", "before:border-2 before:border-solid before:rounded-full", "before:border-current before:border-t-transparent", "before:animate-spin before:[animation-duration:0.5s]")
 }), u = ({ children: t, asChild: u, variant: d, size: f, status: p, loading: m, rounded: h, align: g, fitContent: _, disabled: v, iconOnly: y, ref: b, className: x, ...S }) => {
 	let C = u ? !!y : n.toArray(t).every((e) => r(e)), w = v || m;
 	process.env.NODE_ENV !== "production" && (m && d === "link" && console.warn("Button with variant link and loading is not supported"), C && d === "link" && console.warn("Button with no text and variant link is not supported. Use it with variant tertiary instead"), u && y && r(t) && n.toArray(t.props.children).some((e) => !r(e)) && console.warn("Button with asChild and iconOnly should only contain icon children; text found inside the wrapper element"));

package/src/checkbox/checkbox.js

@@ -8,7 +8,7 @@ var s = r({ slots: {
 	root: [
 		"group/checkbox box-border inline-flex size-4 shrink-0 appearance-none items-center justify-center rounded-sm",
 		"border border-solid border-border-input-default bg-bg-input-normal",
-		"cursor-pointer transition-colors duration-200 ease-in-out",
+		"cursor-pointer transition-colors duration-150",
 		"data-[state=checked]:border-bg-checkbox-selected data-[state=checked]:bg-bg-checkbox-selected",
 		"data-[state=indeterminate]:border-bg-checkbox-selected data-[state=indeterminate]:bg-bg-checkbox-selected",
 		"outline-solid outline-2 outline-offset-2 outline-transparent",

package/src/combobox/combobox.js

@@ -39,7 +39,7 @@ var v = u({ slots: {
 	indicator: [
 		"mr-2 flex size-4 shrink-0 items-center justify-center rounded-sm",
 		"border border-border-input-default bg-bg-input-normal",
-		"text-text-default-base-inverse-primary transition-colors duration-200 ease-in-out",
+		"text-text-default-base-inverse-primary transition-colors duration-150",
 		"data-selected:border-bg-checkbox-selected data-selected:bg-bg-checkbox-selected",
 		"[&>svg]:hidden data-selected:[&>svg]:block",
 		"group-data-disabled/item:border-border-checkbox-disabled",

package/src/data-table/data-table.js

@@ -42,7 +42,7 @@ var y = ({ children: e }) => /* @__PURE__ */ d("div", {
 });
 y.displayName = "DataTable.ToolBar";
 var b = a({
-	base: "size-4 transition-transform duration-200",
+	base: "size-4 transition-transform duration-200 motion-reduce:transition-none",
 	variants: { direction: {
 		asc: "",
 		desc: "rotate-180",

package/src/dropdown-menu/dropdown-menu.js

@@ -20,16 +20,13 @@ var c = a.Portal, l = n({
 		"z-(--z-index-top-layer) flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
 		"border border-border-default-base-primary",
 		"will-change-[transform,opacity]",
-		"data-[state=open]:animate-[dropdownSlideIn_200ms_ease-out]",
-		"data-[state=closed]:animate-[dropdownSlideOut_150ms_ease-in]",
-		"data-[side=bottom]:origin-top",
-		"data-[side=left]:origin-right",
-		"data-[side=right]:origin-left",
-		"data-[side=top]:origin-bottom",
-		"data-[side=bottom]:animate-[dropdownSlideInFromTop_200ms_ease-out]",
-		"data-[side=left]:animate-[dropdownSlideInFromRight_200ms_ease-out]",
-		"data-[side=right]:animate-[dropdownSlideInFromLeft_200ms_ease-out]",
-		"data-[side=top]:animate-[dropdownSlideInFromBottom_200ms_ease-out]"
+		"origin-(--radix-dropdown-menu-content-transform-origin)",
+		"data-[state=open]:data-[side=bottom]:animate-dropdown-slide-in-from-top",
+		"data-[state=open]:data-[side=left]:animate-dropdown-slide-in-from-right",
+		"data-[state=open]:data-[side=right]:animate-dropdown-slide-in-from-left",
+		"data-[state=open]:data-[side=top]:animate-dropdown-slide-in-from-bottom",
+		"data-[state=closed]:animate-dropdown-slide-out",
+		"motion-reduce:animate-none!"
 	],
 	variants: { hasTriggerWidth: { true: "w-[var(--radix-dropdown-menu-trigger-width)]" } }
 }), u = ({ className: e, hasTriggerWidth: t = !1, sideOffset: n = 8, ...i }) => /* @__PURE__ */ r(a.Content, {
@@ -44,7 +41,7 @@ var c = a.Portal, l = n({
 u.displayName = "DropdownMenu.Content";
 var d = ({ className: t, ...n }) => /* @__PURE__ */ r(a.Item, {
 	"data-slot": "dropdown-menu-item",
-	className: e("flex items-center gap-2 bg-bg-default-base-primary px-3 py-1.75 text-sm text-text-default-base-primary", "cursor-pointer rounded-md no-underline transition-colors outline-none", "min-w-40", "data-highlighted:bg-bg-default-base-primary-hover", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed", "data-disabled:text-text-default-disable-primary", "data-disabled:active:bg-bg-default-base-primary", "[&>svg]:h-6", "[&_path]:fill-icon-default-base-tertiary", t),
+	className: e("flex items-center gap-2 bg-bg-default-base-primary px-3 py-1.75 text-sm text-text-default-base-primary", "cursor-pointer rounded-md no-underline outline-none", "min-w-40", "data-highlighted:bg-bg-default-base-primary-hover", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed", "data-disabled:text-text-default-disable-primary", "data-disabled:active:bg-bg-default-base-primary", "[&>svg]:h-6", "[&_path]:fill-icon-default-base-tertiary", t),
 	...n
 });
 d.displayName = "DropdownMenu.Item";
@@ -67,7 +64,7 @@ var m = (e) => /* @__PURE__ */ r(a.Sub, {
 m.displayName = "DropdownMenu.Sub";
 var h = ({ className: n, children: o, ...s }) => /* @__PURE__ */ i(a.SubTrigger, {
 	"data-slot": "dropdown-menu-sub-trigger",
-	className: e("flex items-center gap-2 bg-bg-default-base-primary px-3 py-1.75 text-sm text-text-default-base-primary", "cursor-pointer rounded-md no-underline transition-colors outline-none", "min-w-40", "data-highlighted:bg-bg-default-base-primary-hover", "data-[state=open]:bg-bg-default-base-primary-hover", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed", "data-disabled:text-text-default-disable-primary", "[&>svg]:h-6", "[&_path]:fill-icon-default-base-tertiary", n),
+	className: e("flex items-center gap-2 bg-bg-default-base-primary px-3 py-1.75 text-sm text-text-default-base-primary", "cursor-pointer rounded-md no-underline outline-none", "min-w-40", "data-highlighted:bg-bg-default-base-primary-hover", "data-[state=open]:bg-bg-default-base-primary-hover", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed", "data-disabled:text-text-default-disable-primary", "[&>svg]:h-6", "[&_path]:fill-icon-default-base-tertiary", n),
 	...s,
 	children: [o, /* @__PURE__ */ r(t, { className: "ml-auto h-4 w-4 [&>path]:fill-icon-default-base-tertiary" })]
 });
@@ -76,16 +73,13 @@ var g = n({ base: [
 	"z-(--z-index-top-layer) flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
 	"border border-border-default-base-primary",
 	"will-change-[transform,opacity]",
-	"data-[state=open]:animate-[dropdownSlideIn_200ms_ease-out]",
-	"data-[state=closed]:animate-[dropdownSlideOut_150ms_ease-in]",
-	"data-[side=bottom]:origin-top",
-	"data-[side=left]:origin-right",
-	"data-[side=right]:origin-left",
-	"data-[side=top]:origin-bottom",
-	"data-[side=bottom]:animate-[dropdownSlideInFromTop_200ms_ease-out]",
-	"data-[side=left]:animate-[dropdownSlideInFromRight_200ms_ease-out]",
-	"data-[side=right]:animate-[dropdownSlideInFromLeft_200ms_ease-out]",
-	"data-[side=top]:animate-[dropdownSlideInFromBottom_200ms_ease-out]"
+	"origin-(--radix-dropdown-menu-content-transform-origin)",
+	"data-[state=open]:data-[side=bottom]:animate-dropdown-slide-in-from-top",
+	"data-[state=open]:data-[side=left]:animate-dropdown-slide-in-from-right",
+	"data-[state=open]:data-[side=right]:animate-dropdown-slide-in-from-left",
+	"data-[state=open]:data-[side=top]:animate-dropdown-slide-in-from-bottom",
+	"data-[state=closed]:animate-dropdown-slide-out",
+	"motion-reduce:animate-none!"
 ] }), _ = ({ className: e, sideOffset: t = 2, alignOffset: n = -5, ...i }) => /* @__PURE__ */ r(a.SubContent, {
 	"data-slot": "dropdown-menu-sub-content",
 	sideOffset: t,

package/src/hover-card/hover-card.js

@@ -20,10 +20,10 @@ var s = i.Portal, c = t({ base: [
 	"will-change-[transform,opacity]",
 	"data-[side=bottom]:origin-top data-[side=left]:origin-right",
 	"data-[side=right]:origin-left data-[side=top]:origin-bottom",
-	"transition-[opacity,transform] duration-200 ease-out",
+	"transition-[opacity,transform] duration-200 ease-out-quint",
 	"starting:opacity-0 starting:[transform:scale(0.9)]",
 	"data-[state=closed]:opacity-0 data-[state=closed]:[transform:scale(0.9)]",
-	"data-[state=closed]:duration-150 data-[state=closed]:ease-in",
+	"data-[state=closed]:duration-150",
 	"data-[state=closed]:animate-presence-hold",
 	"motion-reduce:transition-none motion-reduce:animate-none!"
 ] }), l = ({ className: e, sideOffset: t = 8, collisionPadding: r = 8, ...a }) => /* @__PURE__ */ n(i.Content, {

package/src/progress/progress.js

@@ -7,7 +7,7 @@ import * as i from "@radix-ui/react-progress";
 var a = e({ slots: {
 	root: "flex flex-col gap-2",
 	track: "relative h-2 w-full overflow-hidden rounded-sm bg-neutrals-200 text-neutrals-900",
-	indicator: "size-full bg-current transition-transform duration-600 ease-in-out motion-reduce:transition-none",
+	indicator: "size-full bg-current transition-transform duration-300 ease-in-out motion-reduce:transition-none",
 	labelRow: "flex items-center justify-between gap-2",
 	label: "text-sm text-text-default-base-primary",
 	value: "text-base text-text-default-base-primary"

package/src/switch/switch.js

@@ -15,7 +15,7 @@ var o = t({
 			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring-button-primary",
 			"disabled:cursor-not-allowed disabled:bg-slate-100"
 		],
-		thumb: "block translate-x-0 rounded-full bg-bg-default-base-primary shadow-sm transition-transform",
+		thumb: "block translate-x-0 rounded-full bg-bg-default-base-primary shadow-sm transition-transform motion-reduce:transition-none",
 		label: ["cursor-pointer text-sm text-text-default-base-primary select-none", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"]
 	},
 	variants: {

package/src/table/table.js

@@ -140,7 +140,7 @@ var x = r({
 	});
 };
 S.displayName = "Table.Cell";
-var C = r({ base: "relative z-[1] [&>svg]:shrink-0 [&>svg]:transition-transform [&>svg]:duration-200 data-[state=open]:[&>svg]:rotate-180" }), w = ({ toggleExpanded: r, isExpanded: i, className: a, ...s }) => /* @__PURE__ */ o(t, {
+var C = r({ base: "relative z-[1] [&>svg]:shrink-0 [&>svg]:transition-transform [&>svg]:duration-200 data-[state=open]:[&>svg]:rotate-180 motion-reduce:[&>svg]:transition-none" }), w = ({ toggleExpanded: r, isExpanded: i, className: a, ...s }) => /* @__PURE__ */ o(t, {
 	variant: "ghost",
 	onClick: r,
 	className: e(C(), a),

package/src/tabs/tabs.js

@@ -24,8 +24,8 @@ var o = t({
 				list: "w-full gap-6 border-b border-border-default-base-primary bg-bg-default-base-primary px-4",
 				trigger: [
 					"grid h-10 content-center text-text-default-base-tertiary",
-					"before:absolute before:inset-x-0 before:bottom-0 before:h-0.5 before:origin-bottom before:scale-y-0 before:bg-text-button-secondary-enable before:transition-transform before:duration-200 before:will-change-transform before:content-['']",
-					"data-[state=active]:before:scale-y-100"
+					"before:absolute before:inset-x-0 before:bottom-0 before:h-0.5 before:bg-text-button-secondary-enable before:opacity-0 before:transition-opacity before:duration-150 before:content-['']",
+					"data-[state=active]:before:opacity-100"
 				]
 			},
 			enclosed: {

package/src/tooltip/tooltip.js

@@ -8,10 +8,10 @@ var i = e({ base: [
 	"rounded-sm border border-border-default-base-primary bg-bg-default-base-primary shadow-sm",
 	"text-xs text-pretty text-text-default-base-secondary select-none",
 	"will-change-[transform,opacity]",
-	"data-[side=bottom]:animate-tooltip-slide-in-from-top",
-	"data-[side=top]:animate-tooltip-slide-in-from-bottom",
-	"data-[side=left]:animate-tooltip-slide-in-from-right",
-	"data-[side=right]:animate-tooltip-slide-in-from-left",
+	"data-[state=delayed-open]:data-[side=bottom]:animate-tooltip-slide-in-from-top",
+	"data-[state=delayed-open]:data-[side=top]:animate-tooltip-slide-in-from-bottom",
+	"data-[state=delayed-open]:data-[side=left]:animate-tooltip-slide-in-from-right",
+	"data-[state=delayed-open]:data-[side=right]:animate-tooltip-slide-in-from-left",
 	"motion-reduce:animate-none!"
 ] }), a = ({ children: e, content: a, side: o = "top", align: s, sideOffset: c = 4, asChild: l = !1, hideWhenDetached: u, delayDuration: d = 0, open: f, defaultOpen: p, onOpenChange: m, className: h }) => /* @__PURE__ */ t(r.Provider, {
 	delayDuration: d,

package/theme/base.css

@@ -782,6 +782,10 @@
 
 	--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
 	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+	/* Strong ease-out for surfaces entering and leaving. The built-in ease-out is
+    * too flat to read at 150–200ms, and ease-in holds back the first frames of
+    * an exit, which is the part people watch. */
+	--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
 	--ease-in: cubic-bezier(0.4, 0, 1, 1);
 	--ease-out: cubic-bezier(0, 0, 0.2, 1);
 	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
@@ -790,29 +794,31 @@
     * ANIMATIONS
     * ======================================== */
 
-	--animate-cmd-overlay-in: cmd-overlay-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
-	--animate-cmd-overlay-out: cmd-overlay-out 150ms ease-in forwards;
-	--animate-cmd-content-in: cmd-content-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
-	--animate-cmd-content-out: cmd-content-out 150ms ease-in forwards;
+	--animate-cmd-overlay-in: cmd-overlay-in 200ms var(--ease-out-quint);
+	--animate-cmd-overlay-out: cmd-overlay-out 150ms var(--ease-out-quint) forwards;
+	--animate-cmd-content-in: cmd-content-in 200ms var(--ease-out-quint);
+	--animate-cmd-content-out: cmd-content-out 150ms var(--ease-out-quint) forwards;
 	--animate-fade-in: fadeIn 0.3s forwards;
-	--animate-dropdown-slide-in: dropdownSlideIn 200ms ease-out;
-	--animate-dropdown-slide-out: dropdownSlideOut 150ms ease-in;
+	--animate-dropdown-slide-in: dropdownSlideIn 200ms var(--ease-out-quint);
+	--animate-dropdown-slide-out: dropdownSlideOut 150ms var(--ease-out-quint);
 	/* Radix Presence unmounts as soon as a node's CSS animation ends, so a node
     * whose exit is driven by a transition needs a placeholder animation to hold
     * it mounted. Keep the duration in sync with any exit transition using it. */
 	--animate-presence-hold: presenceHold 150ms linear;
-	--animate-dropdown-slide-in-from-top: dropdownSlideInFromTop 200ms ease-out;
-	--animate-dropdown-slide-in-from-bottom: dropdownSlideInFromBottom 200ms ease-out;
-	--animate-dropdown-slide-in-from-left: dropdownSlideInFromLeft 200ms ease-out;
-	--animate-dropdown-slide-in-from-right: dropdownSlideInFromRight 200ms ease-out;
-	--animate-modal-overlay-in: modalOverlayIn 200ms ease-out;
-	--animate-modal-overlay-out: modalOverlayOut 150ms ease-in forwards;
-	--animate-modal-content-in: modalContentIn 200ms ease-out;
-	--animate-modal-content-out: modalContentOut 150ms ease-in forwards;
-	--animate-tooltip-slide-in-from-top: tooltipSlideInFromTop 200ms ease-out;
-	--animate-tooltip-slide-in-from-bottom: tooltipSlideInFromBottom 200ms ease-out;
-	--animate-tooltip-slide-in-from-left: tooltipSlideInFromLeft 200ms ease-out;
-	--animate-tooltip-slide-in-from-right: tooltipSlideInFromRight 200ms ease-out;
+	--animate-dropdown-slide-in-from-top: dropdownSlideInFromTop 200ms var(--ease-out-quint);
+	--animate-dropdown-slide-in-from-bottom: dropdownSlideInFromBottom 200ms var(--ease-out-quint);
+	--animate-dropdown-slide-in-from-left: dropdownSlideInFromLeft 200ms var(--ease-out-quint);
+	--animate-dropdown-slide-in-from-right: dropdownSlideInFromRight 200ms var(--ease-out-quint);
+	--animate-modal-overlay-in: modalOverlayIn 200ms var(--ease-out-quint);
+	--animate-modal-overlay-out: modalOverlayOut 150ms var(--ease-out-quint) forwards;
+	--animate-modal-content-in: modalContentIn 200ms var(--ease-out-quint);
+	--animate-modal-content-out: modalContentOut 150ms var(--ease-out-quint) forwards;
+	--animate-tooltip-slide-in-from-top: tooltipSlideInFromTop 150ms var(--ease-out-quint);
+	--animate-tooltip-slide-in-from-bottom: tooltipSlideInFromBottom 150ms var(--ease-out-quint);
+	--animate-tooltip-slide-in-from-left: tooltipSlideInFromLeft 150ms var(--ease-out-quint);
+	--animate-tooltip-slide-in-from-right: tooltipSlideInFromRight 150ms var(--ease-out-quint);
+	--animate-accordion-down: accordionDown 200ms var(--ease-out-quint);
+	--animate-accordion-up: accordionUp 200ms var(--ease-out-quint);
 
 	/* ========================================
     * Z-INDEX