@agentero/design-system 0.32.0 → 0.32.2

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