@agentero/design-system 0.32.1 → 0.33.0

package/src/input-password/input-password.js

@@ -0,0 +1,57 @@
+"use client";
+import { Button as e } from "../button/button.js";
+import { Input as t } from "../input/input.js";
+import { InputGroup as n } from "../input-group/index.js";
+import { IconVisibility as r, IconVisibilityOff as i } from "./icons.js";
+import { tv as a } from "tailwind-variants";
+import { useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/input-password/input-password.tsx
+var l = a({
+	slots: {
+		toggle: "group-has-[input:disabled]/input-group:hidden",
+		button: "[&_svg]:mx-0"
+	},
+	variants: { size: {
+		sm: {
+			toggle: "-me-2.25",
+			button: "rounded-sm [&_svg]:size-4"
+		},
+		md: {
+			toggle: "-me-2.25",
+			button: "rounded-sm [&_svg]:size-5"
+		},
+		lg: {
+			toggle: "-me-1.25",
+			button: "[&_svg]:size-6"
+		}
+	} },
+	defaultVariants: { size: "md" }
+}), u = ({ className: a, size: u, ...d }) => {
+	let [f, p] = o("password"), m = f === "password", h = l({ size: u });
+	return /* @__PURE__ */ c(n.Root, {
+		"data-slot": "input-password",
+		className: a,
+		children: [/* @__PURE__ */ s(t, {
+			...d,
+			size: u,
+			type: f
+		}), /* @__PURE__ */ s(n.Addon, {
+			className: h.toggle(),
+			children: /* @__PURE__ */ s(e, {
+				type: "button",
+				variant: "ghost",
+				iconOnly: !0,
+				size: u === "sm" ? "xs" : "sm",
+				className: h.button(),
+				"aria-label": m ? "Show password" : "Hide password",
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: () => p(m ? "text" : "password"),
+				children: s(m ? r : i, {})
+			})
+		})]
+	});
+};
+u.displayName = "InputPassword";
+//#endregion
+export { u as InputPassword, l as inputPasswordRecipe };

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