@photoroom/ui 0.1.466 → 0.1.468

package/components/action/ValidationBanner/ValidationBanner.d.ts

@@ -28,10 +28,17 @@ export type ValidationBannerProps = Readonly<{
     inputValue?: string;
     onInputChange?: (value: string) => void;
     inputPlaceholder?: string;
+    /** Focus the input as soon as it mounts — e.g. when revealed by a toggle. */
+    inputAutoFocus?: boolean;
+    /**
+     * Render the input value in a muted tone, to signal it is a prefilled
+     * suggestion (e.g. an AI-generated prompt) the user can overwrite.
+     */
+    inputMuted?: boolean;
     "data-testid"?: string;
 }> & React.RefAttributes<HTMLButtonElement>;
 export declare const ValidationBanner: {
-    ({ title, description, loading, disabled, onClick, onClose, preview, previewLabel, icon, variant, secondaryTitle, onSecondaryClick, secondaryVariant, secondaryDisabled, secondaryPlacement, inputValue, onInputChange, inputPlaceholder, "data-testid": dataTestId, ref, }: ValidationBannerProps): React.JSX.Element;
+    ({ title, description, loading, disabled, onClick, onClose, preview, previewLabel, icon, variant, secondaryTitle, onSecondaryClick, secondaryVariant, secondaryDisabled, secondaryPlacement, inputValue, onInputChange, inputPlaceholder, inputAutoFocus, inputMuted, "data-testid": dataTestId, ref, }: ValidationBannerProps): React.JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=ValidationBanner.d.ts.map

package/components/action/ValidationBanner/ValidationBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/action/ValidationBanner/ValidationBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAC3C,gBAAgB,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC,GACA,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAEzC,eAAO,MAAM,gBAAgB;iRAqB1B,qBAAqB;;CAgFvB,CAAC"}
+{"version":3,"file":"ValidationBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/action/ValidationBanner/ValidationBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAC3C,gBAAgB,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6EAA6E;IAC7E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC,GACA,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAEzC,eAAO,MAAM,gBAAgB;6SAuB1B,qBAAqB;;CAkFvB,CAAC"}

package/index.mjs

@@ -21397,20 +21397,20 @@ var Jw = ({ label: e, helper: r, className: i, invalid: a, trailingElement: o, a
 Jw.displayName = "TextArea";
 //#endregion
 //#region src/components/action/ValidationBanner/ValidationBanner.tsx
-var Yw = ({ title: e, description: r, loading: i, disabled: a, onClick: o, onClose: s, preview: c, previewLabel: l, icon: u, variant: d = "primary", secondaryTitle: f, onSecondaryClick: p, secondaryVariant: m = "secondary", secondaryDisabled: h, secondaryPlacement: g = "below", inputValue: v, onInputChange: y, inputPlaceholder: b, "data-testid": x, ref: S }) => {
-	let C = v !== void 0, w = /* @__PURE__ */ t(zr, {
+var Yw = ({ title: e, description: r, loading: i, disabled: a, onClick: o, onClose: s, preview: c, previewLabel: l, icon: u, variant: d = "primary", secondaryTitle: f, onSecondaryClick: p, secondaryVariant: m = "secondary", secondaryDisabled: h, secondaryPlacement: g = "below", inputValue: v, onInputChange: y, inputPlaceholder: b, inputAutoFocus: x, inputMuted: S, "data-testid": C, ref: w }) => {
+	let T = v !== void 0, E = /* @__PURE__ */ t(zr, {
 		variant: d,
 		density: "regular",
 		size: "medium",
 		className: "w-full",
-		ref: S,
+		ref: w,
 		onClick: o,
 		disabled: a,
 		loading: i,
 		icon: u,
-		"data-testid": x,
+		"data-testid": C,
 		children: e
-	}), T = f ? /* @__PURE__ */ t(zr, {
+	}), D = f ? /* @__PURE__ */ t(zr, {
 		variant: m,
 		density: "regular",
 		size: "medium",
@@ -21436,13 +21436,15 @@ var Yw = ({ title: e, description: r, loading: i, disabled: a, onClick: o, onClo
 					children: l
 				}), c]
 			}),
-			C && /* @__PURE__ */ t("div", {
+			T && /* @__PURE__ */ t("div", {
 				className: "w-full",
 				children: /* @__PURE__ */ t(Jw, {
 					value: v,
 					onChange: (e) => y?.(e.target.value),
 					placeholder: b,
 					"aria-label": b,
+					autoFocus: x,
+					className: U(S && "text-content-secondary"),
 					autosized: !0,
 					minRows: 5,
 					maxRows: void 0
@@ -21451,9 +21453,9 @@ var Yw = ({ title: e, description: r, loading: i, disabled: a, onClick: o, onClo
 			/* @__PURE__ */ n("div", {
 				className: "flex w-full flex-col gap-2",
 				children: [
-					g === "above" && T,
-					w,
-					g === "below" && T
+					g === "above" && D,
+					E,
+					g === "below" && D
 				]
 			}),
 			r && /* @__PURE__ */ t("div", {
@@ -34830,7 +34832,7 @@ var RJ = {
 	return e instanceof lY ? e : new lY(e);
 };
 //#endregion
-//#region ../../node_modules/.pnpm/react-colorful@5.7.0_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/react-colorful/dist/index.mjs
+//#region ../../node_modules/.pnpm/react-colorful@5.8.0_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/react-colorful/dist/index.mjs
 function dY() {
 	return (dY = Object.assign || function(e) {
 		for (var t = 1; t < arguments.length; t++) {
@@ -35120,14 +35122,17 @@ function IY(e, t, n, r) {
 }
 var LY, RY = typeof window < "u" ? Oe : Ce, zY = function() {
 	return LY || (typeof __webpack_nonce__ < "u" ? __webpack_nonce__ : void 0);
-}, BY = /* @__PURE__ */ new Map(), VY = function(e) {
+}, BY = /* @__PURE__ */ new WeakMap(), VY = function(e) {
 	RY(function() {
-		var t = e.current ? e.current.ownerDocument : document;
-		if (t !== void 0 && !BY.has(t)) {
-			var n = t.createElement("style");
-			n.innerHTML = ".react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:\"\";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill-opacity=\".05\"><path d=\"M8 0h8v8H8zM0 8h8v8H0z\"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}", BY.set(t, n);
-			var r = zY();
-			r && n.setAttribute("nonce", r), t.head.appendChild(n);
+		var t = e.current;
+		if (typeof document < "u" && t) {
+			var n = t.getRootNode ? t.getRootNode() : t.ownerDocument, r = n && ("head" in n || "host" in n) ? n : t.ownerDocument;
+			if (!BY.has(r)) {
+				var i = "head" in r ? r.head : r, a = (i.ownerDocument || document).createElement("style");
+				a.innerHTML = ".react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:\"\";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill-opacity=\".05\"><path d=\"M8 0h8v8H8zM0 8h8v8H0z\"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}";
+				var o = zY();
+				o && a.setAttribute("nonce", o), BY.set(r, a), i.appendChild(a);
+			}
 		}
 	}, []);
 }, HY = function(e) {
@@ -54588,7 +54593,7 @@ var Wxe = ({ rank: e, category: r }) => /* @__PURE__ */ n("div", {
 		className: "absolute inset-0",
 		children: [o, /* @__PURE__ */ t("div", { className: "bg-black-alpha-7 absolute inset-0" })]
 	}), /* @__PURE__ */ n("div", {
-		className: "relative mx-auto flex w-full max-w-300 flex-col gap-8 lg:flex-row lg:items-center lg:gap-6",
+		className: "relative z-10 mx-auto flex w-full max-w-300 flex-col gap-8 lg:flex-row lg:items-center lg:gap-6",
 		children: [/* @__PURE__ */ t("div", {
 			className: "flex flex-col gap-8 lg:flex-1 lg:justify-center",
 			children: /* @__PURE__ */ n("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.466",
+  "version": "0.1.468",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [
@@ -64,7 +64,7 @@
     "fuse.js": "7.5.0",
     "lodash-es": "4.18.1",
     "motion": "12.42.0",
-    "react-colorful": "5.7.0",
+    "react-colorful": "5.8.0",
     "react-device-detect": "2.2.3",
     "react-intersection-observer": "10.1.0",
     "react-moveable": "0.56.0",