@photoroom/ui 0.1.228 → 0.1.229

package/components/editor/Pill/Pill.d.ts

@@ -1,7 +1,19 @@
 export type PillProps = React.ComponentProps<"div">;
 export declare const Pill: {
     ({ className, ...props }: PillProps): import("react/jsx-runtime").JSX.Element;
-    Button: import("react").ForwardRefExoticComponent<Omit<import("./PillButton").PillButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Button: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children"> & {
+        chevron?: boolean;
+    } & {
+        label: string;
+        icon?: React.ReactNode;
+        tooltip?: string;
+    }, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children"> & {
+        chevron?: boolean;
+    } & {
+        icon: React.ReactNode;
+        label?: never;
+        tooltip: string;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
     Divider: {
         ({ className, ...props }: import("./PillDivider").PillDividerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/Pill/Pill.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD,eAAO,MAAM,IAAI;8BAA6B,SAAS;;;;;;;CAYtD,CAAC"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/Pill/Pill.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD,eAAO,MAAM,IAAI;8BAA6B,SAAS;;;;;;;;;;;;;;;;;;;CAYtD,CAAC"}

package/components/editor/Pill/PillButton.d.ts

@@ -1,8 +1,24 @@
 import React from "react";
-export type PillButtonProps = Omit<React.ComponentProps<"button">, "children"> & {
-    icon?: React.ReactNode;
-    label?: string;
+type PillButtonBaseProps = Omit<React.ComponentProps<"button">, "children"> & {
     chevron?: boolean;
 };
-export declare const PillButton: React.ForwardRefExoticComponent<Omit<PillButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type LabelledPillButtonProps = PillButtonBaseProps & {
+    /** Visible text label. When present, `tooltip` is optional. */
+    label: string;
+    icon?: React.ReactNode;
+    /** Optional tooltip. Renders via the DS Tooltip when provided. */
+    tooltip?: string;
+};
+type IconOnlyPillButtonProps = PillButtonBaseProps & {
+    icon: React.ReactNode;
+    label?: never;
+    /**
+     * Required for icon-only buttons: renders via the DS Tooltip and feeds the
+     * accessible name (`aria-label`), unless an explicit `aria-label` is also passed.
+     */
+    tooltip: string;
+};
+export type PillButtonProps = LabelledPillButtonProps | IconOnlyPillButtonProps;
+export declare const PillButton: React.ForwardRefExoticComponent<(Omit<LabelledPillButtonProps, "ref"> | Omit<IconOnlyPillButtonProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+export {};
 //# sourceMappingURL=PillButton.d.ts.map

package/components/editor/Pill/PillButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillButton.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/Pill/PillButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,UAAU,wGA4DtB,CAAC"}
+{"version":3,"file":"PillButton.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/Pill/PillButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,KAAK,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,uBAAuB,GAAG,mBAAmB,GAAG;IACnD,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,uBAAuB,GAAG,mBAAmB,GAAG;IACnD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,uBAAuB,GAAG,uBAAuB,CAAC;AAEhF,eAAO,MAAM,UAAU,yJAuEtB,CAAC"}

package/components/unsorted/Tooltip/Tooltip.d.ts

@@ -10,6 +10,12 @@ export type TooltipProps = Readonly<{
     defaultOpen?: boolean;
     triggerTabIndex?: number;
     sideOffset?: number;
+    /**
+     * Never open the tooltip from focus, only from hover (or tap on mobile). Prevents it
+     * flashing when a focus scope (e.g. a Dialog) autofocuses the trigger on mount. Pair
+     * with an explicit `aria-label` on the trigger so the accessible name is preserved.
+     */
+    disableFocusOpen?: boolean;
 }>;
 /**
  * Creating our own API by abstracting the primitive parts into our own component.
@@ -17,5 +23,5 @@ export type TooltipProps = Readonly<{
  *
  * ⚠️ The component that is passed as a trigger MUST forward the ref
  */
-export declare const Tooltip: ({ children, content, isTriggerDisabled, className, triggerClassName, withPortal, side, defaultOpen, triggerTabIndex, sideOffset, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ children, content, isTriggerDisabled, className, triggerClassName, withPortal, side, defaultOpen, triggerTabIndex, sideOffset, disableFocusOpen, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

package/components/unsorted/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/unsorted/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAM5D,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAAI,6IAYrB,YAAY,4CA8Ed,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/unsorted/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAM5D,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAAI,+JAarB,YAAY,4CAmGd,CAAC"}

package/index.mjs

@@ -5559,32 +5559,44 @@ var Vo = ho, Ho = yo, Uo = xo, Wo = To, Go = Do, Ko = Po, qo = /* @__PURE__ */ F
 	_(i), b(i), y(i), x(i), L(r) || ue(), P(r);
 	var me = g(i) || ue();
 	m(i), h(i) || ue(), v(i), v(i), T(o), O(o), k(o) || ue(), M(r), N(r), ee(r), te(r), ne(r), A(o), j(o), ie(r), ae(r), z(r), S(i), C(i), oe(a), se(a), pe(s), F(r) || B(s), I(r), w(i), le(), ue(), de(), fe(), ce(), B(s), F(r) && B(s), E(o), D(o), re(r), R(r), e.isMobile = me;
-})))(), Yo = ({ children: e, content: t, isTriggerDisabled: n, className: r, triggerClassName: a, withPortal: o = !0, side: s = "bottom", defaultOpen: c = !1, triggerTabIndex: l = 0, sideOffset: u, ...d }) => {
-	let f = g(), [p, m] = C(c), h = o ? Wo : i;
+})))(), Yo = ({ children: e, content: t, isTriggerDisabled: n, className: r, triggerClassName: a, withPortal: o = !0, side: s = "bottom", defaultOpen: c = !1, triggerTabIndex: l = 0, sideOffset: u, disableFocusOpen: d = !1, ...f }) => {
+	let p = g(), [m, h] = C(c), _ = S(!1), v = o ? Wo : i, y = d ? () => {
+		_.current = !0, queueMicrotask(() => {
+			_.current = !1;
+		});
+	} : void 0;
 	return /* @__PURE__ */ E(Vo, { children: /* @__PURE__ */ D(Ho, {
 		delayDuration: 0,
-		open: p,
-		onOpenChange: m,
+		open: m,
+		onOpenChange: (e) => {
+			if (e && _.current) {
+				_.current = !1;
+				return;
+			}
+			h(e);
+		},
 		defaultOpen: c,
 		children: [/* @__PURE__ */ E(Uo, {
 			asChild: !0,
 			children: n ? /* @__PURE__ */ E("span", {
 				className: H("inline-block", a),
-				"aria-describedby": f,
+				"aria-describedby": p,
 				tabIndex: l,
+				onFocusCapture: y,
 				children: e
 			}) : /* @__PURE__ */ E("span", {
 				className: H("inline-block", a),
-				"aria-describedby": f,
-				onClick: () => Jo.isMobile && m(!0),
+				"aria-describedby": p,
+				onFocusCapture: y,
+				onClick: () => Jo.isMobile && h(!0),
 				children: e
 			})
-		}), t && /* @__PURE__ */ E(h, { children: /* @__PURE__ */ D(Go, {
+		}), t && /* @__PURE__ */ E(v, { children: /* @__PURE__ */ D(Go, {
 			side: s,
 			sideOffset: u,
 			className: H("component-400 rounded-250 bg-background-tooltip z-50 px-1.5 pt-[5px] pb-1.5 [word-break:break-word] text-white", "max-w-[100vw]", "[&_strong]:component-400 [&_strong]:bg-white-alpha-3 [&_strong]:rounded-[2px] [&_strong]:px-[2px]", "[&_b]:component-400 [&_b]:bg-white-alpha-3 [&_b]:rounded-[2px] [&_b]:px-[2px]", "[&_a]:underline", s === "bottom" && "animate-tooltip-slide-down", s === "top" && "animate-tooltip-slide-up", s === "left" && "animate-tooltip-slide-left", s === "right" && "animate-tooltip-slide-right", r),
-			id: f,
-			...d,
+			id: p,
+			...f,
 			children: [t, /* @__PURE__ */ E(Ko, {
 				className: "fill-background-tooltip",
 				asChild: !0,
@@ -36528,27 +36540,34 @@ var nY = l(({ label: e, labelTestId: t, subtitle: n, isHidden: r, defaultIsHidde
 nY.displayName = "ObjectItem";
 //#endregion
 //#region src/components/editor/Pill/PillButton.tsx
-var rY = l(({ icon: e, label: t, className: n, chevron: r = !1, ...i }, a) => {
-	let o = e && !t, s = !e && t, c = e && t, l = /* @__PURE__ */ D(T, { children: [!!e && /* @__PURE__ */ E("span", {
+var rY = l(({ icon: e, label: t, className: n, chevron: r = !1, tooltip: i, ...a }, o) => {
+	let s = !!e && !t, c = !e && !!t, l = !!e && !!t, u = /* @__PURE__ */ D(T, { children: [!!e && /* @__PURE__ */ E("span", {
 		role: "presentation",
 		className: "icon-size-500",
 		children: e
 	}), !!t && /* @__PURE__ */ E("span", {
 		className: "component-500",
 		children: t
-	})] });
-	return /* @__PURE__ */ E("button", {
-		...i,
-		ref: a,
-		className: V("group shrink-0 cursor-pointer outline-hidden", "inline-flex items-center justify-center", "rounded-300", "hover:bg-background-subdued-hover", "active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "text-content-primary", "disabled:cursor-not-allowed disabled:opacity-30", "interaction-transition transition-all", o && !r && "size-400", o && r && "size-h-400 content-to-edge-ps-250 content-to-edge-pe-150 gap-1", s && !r && "content-to-edge-px-400 size-h-400", s && r && "content-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", c && !r && "content-to-edge-pe-400 icon-to-edge-ps-400 size-h-400 gap-2", c && r && "icon-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", n),
+	})] }), d = /* @__PURE__ */ E("button", {
+		...a,
+		ref: o,
+		"aria-label": a["aria-label"] ?? (s ? i : void 0),
+		className: V("group shrink-0 cursor-pointer outline-hidden", "inline-flex items-center justify-center", "rounded-300", "hover:bg-background-subdued-hover", "active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "text-content-primary", "disabled:cursor-not-allowed disabled:opacity-30", "interaction-transition transition-all", s && !r && "size-400", s && r && "size-h-400 content-to-edge-ps-250 content-to-edge-pe-150 gap-1", c && !r && "content-to-edge-px-400 size-h-400", c && r && "content-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", l && !r && "content-to-edge-pe-400 icon-to-edge-ps-400 size-h-400 gap-2", l && r && "icon-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", n),
 		children: r ? /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("span", {
 			className: "flex items-center gap-2",
-			children: l
+			children: u
 		}), /* @__PURE__ */ E(L, {
 			"aria-hidden": !0,
 			className: "icon-size-400"
-		})] }) : l
+		})] }) : u
 	});
+	return i ? /* @__PURE__ */ E(Yo, {
+		content: i,
+		side: "top",
+		isTriggerDisabled: a.disabled,
+		disableFocusOpen: !0,
+		children: d
+	}) : d;
 });
 rY.displayName = "PillButton";
 //#endregion

package/package.json

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