@photoroom/ui 0.1.759 → 0.1.760

package/components/editor/ColorPicker/ColorPicker.d.ts

@@ -8,9 +8,11 @@ export type ColorPickerProps = Readonly<{
     /** Extra classes for the popover content -- e.g. raising z-index above a floating parent. */
     popoverClassName?: string;
     onChange: (newColor: string) => void;
+    /** Fires when a drag or arrow-key change on the color area or hue slider ends. */
+    onChangeEnd?: () => void;
     onConfirm?: (newColor?: string) => void;
     onOpenChange?: (open: boolean) => void;
     selected?: boolean;
 } & Pick<PopoverProps, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding">>;
-export declare const ColorPicker: ({ label, buttonLabel, className, popoverClassName, color, side, align, sideOffset, alignOffset, collisionPadding, onChange, onConfirm, onOpenChange, selected, }: ColorPickerProps) => import("react").JSX.Element;
+export declare const ColorPicker: ({ label, buttonLabel, className, popoverClassName, color, side, align, sideOffset, alignOffset, collisionPadding, onChange, onChangeEnd, onConfirm, onOpenChange, selected, }: ColorPickerProps) => import("react").JSX.Element;
 //# sourceMappingURL=ColorPicker.d.ts.map

package/components/editor/ColorPicker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAKlE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACrC;IACE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6FAA6F;IAC7F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,aAAa,GAAG,kBAAkB,CAAC,CAC7F,CAAC;AAEF,eAAO,MAAM,WAAW,qKAerB,gBAAgB,gCA2BlB,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAKlE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACrC;IACE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6FAA6F;IAC7F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,aAAa,GAAG,kBAAkB,CAAC,CAC7F,CAAC;AAEF,eAAO,MAAM,WAAW,kLAgBrB,gBAAgB,gCA4BlB,CAAC"}

package/components/editor/ColorPicker/InlineColorPicker/InlineColorPicker.d.ts

@@ -1,6 +1,8 @@
 export type InlineColorPickerProps = Readonly<{
     color: string;
     onChange: (newColor: string) => void;
+    /** Fires when a drag or arrow-key change on the color area or hue slider ends. */
+    onChangeEnd?: () => void;
     onConfirm?: (newColor?: string) => void;
     initialMode?: "hex" | "rgb" | "hsl";
     inputLabel?: string;
@@ -8,5 +10,5 @@ export type InlineColorPickerProps = Readonly<{
     buttonLabel?: string;
     className?: string;
 }>;
-export declare const InlineColorPicker: ({ color, onChange, onConfirm, initialMode, inputLabel, selectLabel, buttonLabel, className, }: InlineColorPickerProps) => import("react").JSX.Element;
+export declare const InlineColorPicker: ({ color, onChange, onChangeEnd, onConfirm, initialMode, inputLabel, selectLabel, buttonLabel, className, }: InlineColorPickerProps) => import("react").JSX.Element;
 //# sourceMappingURL=InlineColorPicker.d.ts.map

package/components/editor/ColorPicker/InlineColorPicker/InlineColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineColorPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/editor/ColorPicker/InlineColorPicker/InlineColorPicker.tsx"],"names":[],"mappings":"AAuBA,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,iBAAiB,kGAS3B,sBAAsB,gCAmExB,CAAC"}
+{"version":3,"file":"InlineColorPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/editor/ColorPicker/InlineColorPicker/InlineColorPicker.tsx"],"names":[],"mappings":"AAuBA,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,iBAAiB,+GAU3B,sBAAsB,gCAuExB,CAAC"}

package/index.mjs

@@ -39137,58 +39137,59 @@ var Qme = ({ color: e, onChange: t, label: n }) => {
 		label: "HSL",
 		value: "hsl"
 	}
-], hX = ({ color: e, onChange: t, onConfirm: n, initialMode: r = "hex", inputLabel: i, selectLabel: a, buttonLabel: o, className: s }) => {
-	let [c, l] = Pe(r), u = B((e) => {
+], hX = ({ color: e, onChange: t, onChangeEnd: n, onConfirm: r, initialMode: i = "hex", inputLabel: a, selectLabel: o, buttonLabel: s, className: c }) => {
+	let [l, u] = Pe(i), d = B((e) => {
 		t(WY(e).toHex());
-	}, [t]), d = Ne(() => WY(e).toHex(), [e]);
+	}, [t]), f = Ne(() => WY(e).toHex(), [e]);
 	return /* @__PURE__ */ L("div", {
-		className: U("misc-color-picker", "flex flex-col gap-3", s),
+		className: U("misc-color-picker", "flex flex-col gap-3", c),
 		children: [
 			/* @__PURE__ */ I(zme, {
-				color: d,
-				onChange: (e) => t(e)
+				color: f,
+				onChange: (e) => t(e),
+				onChangeEnd: n
 			}),
 			/* @__PURE__ */ L("div", {
 				className: "flex items-center gap-2",
 				children: [
 					/* @__PURE__ */ I(cX, {
-						"aria-label": a,
-						value: c,
-						onChange: (e) => l(e.target.value),
+						"aria-label": o,
+						value: l,
+						onChange: (e) => u(e.target.value),
 						children: ehe.map((e) => /* @__PURE__ */ I("option", {
 							value: e.value,
 							children: e.label
 						}, e.value))
 					}),
-					c === "hex" && /* @__PURE__ */ I(Wme, {
-						label: i,
-						color: d,
-						onChange: (e) => u(e)
+					l === "hex" && /* @__PURE__ */ I(Wme, {
+						label: a,
+						color: f,
+						onChange: (e) => d(e)
 					}),
-					c === "rgb" && /* @__PURE__ */ I($me, {
-						label: i,
-						color: d,
-						onChange: (e) => u(e)
+					l === "rgb" && /* @__PURE__ */ I($me, {
+						label: a,
+						color: f,
+						onChange: (e) => d(e)
 					}),
-					c === "hsl" && /* @__PURE__ */ I(Qme, {
-						label: i,
-						color: d,
-						onChange: (e) => u(e)
+					l === "hsl" && /* @__PURE__ */ I(Qme, {
+						label: a,
+						color: f,
+						onChange: (e) => d(e)
 					})
 				]
 			}),
-			n && /* @__PURE__ */ I(rd, {
+			r && /* @__PURE__ */ I(rd, {
 				variant: "secondary-accent",
 				className: "w-full",
 				density: "regular",
-				onClick: () => n(),
-				children: o
+				onClick: () => r(),
+				children: s
 			})
 		]
 	});
-}, the = ({ label: e, buttonLabel: t, className: n, popoverClassName: r, color: i = "#FFFFFF", side: a = "bottom", align: o = "start", sideOffset: s, alignOffset: c, collisionPadding: l, onChange: u, onConfirm: d, onOpenChange: f, selected: p }) => /* @__PURE__ */ I(cW, {
+}, the = ({ label: e, buttonLabel: t, className: n, popoverClassName: r, color: i = "#FFFFFF", side: a = "bottom", align: o = "start", sideOffset: s, alignOffset: c, collisionPadding: l, onChange: u, onChangeEnd: d, onConfirm: f, onOpenChange: p, selected: m }) => /* @__PURE__ */ I(cW, {
 	withBorder: !1,
-	onOpenChange: f,
+	onOpenChange: p,
 	side: a,
 	align: o,
 	sideOffset: s,
@@ -39199,7 +39200,7 @@ var Qme = ({ color: e, onChange: t, label: n }) => {
 		"aria-label": e,
 		color: i,
 		className: n,
-		selected: p
+		selected: m
 	}),
 	children: /* @__PURE__ */ I("div", {
 		className: "p-4",
@@ -39208,7 +39209,8 @@ var Qme = ({ color: e, onChange: t, label: n }) => {
 			buttonLabel: t,
 			color: i,
 			onChange: u,
-			onConfirm: d,
+			onChangeEnd: d,
+			onConfirm: f,
 			className: "w-[328px]"
 		})
 	})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.759",
+  "version": "0.1.760",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [