@photoroom/ui 0.1.285 → 0.1.286

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/components/input/ImageWidget/ImageWidget.d.ts +2 -1
  2. package/components/input/ImageWidget/ImageWidget.d.ts.map +1 -1
  3. package/index.mjs +42 -35
  4. package/package.json +1 -1
package/components/input/ImageWidget/ImageWidget.d.ts CHANGED
@@ -22,11 +22,12 @@ export type ImageWidgetProps = {
22
22
  }>;
23
23
  onButtonClick?: () => void;
24
24
  buttonLabel?: string;
25
+ leadingBottom?: React.ReactNode;
25
26
  className?: string;
26
27
  imgClassName?: string;
27
28
  } & React.RefAttributes<HTMLDivElement>;
28
29
  export declare const ImageWidget: {
29
- ({ src, alt, width: widthProp, height: heightProp, flexibleWidth, fill, isLoading, selected, disabled, buttonIcon, onButtonClick, buttonLabel, className, imgClassName, ref, }: ImageWidgetProps): import("react").JSX.Element;
30
+ ({ src, alt, width: widthProp, height: heightProp, flexibleWidth, fill, isLoading, selected, disabled, buttonIcon, onButtonClick, buttonLabel, leadingBottom, className, imgClassName, ref, }: ImageWidgetProps): import("react").JSX.Element;
30
31
  displayName: string;
31
32
  };
32
33
  //# sourceMappingURL=ImageWidget.d.ts.map
package/components/input/ImageWidget/ImageWidget.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ImageWidget.d.ts","sourceRoot":"","sources":["../../../../src/components/input/ImageWidget/ImageWidget.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;AAKxC,eAAO,MAAM,WAAW;oLAgBrB,gBAAgB;;CA+ElB,CAAC"}
1
+ {"version":3,"file":"ImageWidget.d.ts","sourceRoot":"","sources":["../../../../src/components/input/ImageWidget/ImageWidget.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;AAKxC,eAAO,MAAM,WAAW;mMAiBrB,gBAAgB;;CAiFlB,CAAC"}
package/index.mjs CHANGED
@@ -47917,56 +47917,63 @@ var C3 = ({ icon: e, className: n, ref: r, ...i }) => /* @__PURE__ */ t("button"
47917
47917
  C3.displayName = "ImageWidgetButton";
47918
47918
  //#endregion
47919
47919
  //#region src/components/input/ImageWidget/ImageWidget.tsx
47920
- var w3 = .5, T3 = 2, efe = 80, tfe = 80, E3 = ({ src: e, alt: r, width: i = tfe, height: a = efe, flexibleWidth: o = !1, fill: s = !1, isLoading: c = !1, selected: l = !1, disabled: u = !1, buttonIcon: d, onButtonClick: f, buttonLabel: p, className: m, imgClassName: h, ref: g }) => {
47921
- let [_, v] = Me(null), y = B((e) => {
47920
+ var w3 = .5, T3 = 2, efe = 80, tfe = 80, E3 = ({ src: e, alt: r, width: i = tfe, height: a = efe, flexibleWidth: o = !1, fill: s = !1, isLoading: c = !1, selected: l = !1, disabled: u = !1, buttonIcon: d, onButtonClick: f, buttonLabel: p, leadingBottom: m, className: h, imgClassName: g, ref: _ }) => {
47921
+ let [v, y] = Me(null), b = B((e) => {
47922
47922
  let t = e.currentTarget;
47923
- t.naturalWidth && t.naturalHeight && v(t.naturalWidth / t.naturalHeight);
47924
- }, []), { width: b, height: x, isClamped: S } = Ae(() => o && _ !== null ? {
47925
- width: Math.round(a * Math.min(T3, Math.max(w3, _))),
47923
+ t.naturalWidth && t.naturalHeight && y(t.naturalWidth / t.naturalHeight);
47924
+ }, []), { width: x, height: S, isClamped: C } = Ae(() => o && v !== null ? {
47925
+ width: Math.round(a * Math.min(T3, Math.max(w3, v))),
47926
47926
  height: a,
47927
- isClamped: _ < w3 || _ > T3
47927
+ isClamped: v < w3 || v > T3
47928
47928
  } : {
47929
47929
  width: i,
47930
47930
  height: a,
47931
47931
  isClamped: !1
47932
47932
  }, [
47933
47933
  o,
47934
- _,
47934
+ v,
47935
47935
  a,
47936
47936
  i
47937
- ]), C = !c && d && f;
47937
+ ]), w = !c && d && f, T = !c && !!m;
47938
47938
  return /* @__PURE__ */ n("div", {
47939
- ref: g,
47940
- className: U("group", s ? "absolute inset-0" : "relative shrink-0", m),
47939
+ ref: _,
47940
+ className: U("group", s ? "absolute inset-0" : "relative shrink-0", h),
47941
47941
  style: s ? void 0 : {
47942
- width: b,
47943
- height: x
47942
+ width: x,
47943
+ height: S
47944
47944
  },
47945
- children: [/* @__PURE__ */ n("div", {
47946
- className: H("rounded-400 bg-surface-default relative h-full w-full overflow-hidden", "after:rounded-400 after:pointer-events-none after:absolute after:inset-0 after:content-['']", l ? "after:shadow-[inset_0_0_0_2px_var(--color-content-accent)]" : "after:shadow-[inset_0_0_0_1px_var(--color-misc-border)]"),
47947
- children: [c ? /* @__PURE__ */ t("div", {
47948
- className: "flex h-full w-full items-center justify-center",
47949
- children: /* @__PURE__ */ t(tG, { className: "size-6" })
47950
- }) : /* @__PURE__ */ t("img", {
47951
- src: e,
47952
- alt: r,
47953
- className: U("h-full w-full", S ? "object-contain" : "object-cover", h),
47954
- onLoad: o ? y : void 0
47955
- }), !u && /* @__PURE__ */ t("div", { className: "rounded-400 interaction-transition group-hover:bg-misc-visual-hover group-active:bg-misc-visual-down absolute inset-0 transition-colors" })]
47956
- }), C && /* @__PURE__ */ t("div", {
47957
- className: "absolute inset-e-1 top-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-within:opacity-100",
47958
- children: /* @__PURE__ */ t(vs, {
47959
- content: p,
47960
- side: "top",
47961
- children: /* @__PURE__ */ t(C3, {
47962
- icon: d,
47963
- onClick: (e) => {
47964
- e.stopPropagation(), f();
47965
- },
47966
- "aria-label": p
47945
+ children: [
47946
+ /* @__PURE__ */ n("div", {
47947
+ className: H("rounded-400 bg-surface-default relative h-full w-full overflow-hidden", "after:rounded-400 after:pointer-events-none after:absolute after:inset-0 after:content-['']", l ? "after:shadow-[inset_0_0_0_2px_var(--color-content-accent)]" : "after:shadow-[inset_0_0_0_1px_var(--color-misc-border)]"),
47948
+ children: [c ? /* @__PURE__ */ t("div", {
47949
+ className: "flex h-full w-full items-center justify-center",
47950
+ children: /* @__PURE__ */ t(tG, { className: "size-6" })
47951
+ }) : /* @__PURE__ */ t("img", {
47952
+ src: e,
47953
+ alt: r,
47954
+ className: U("h-full w-full", C ? "object-contain" : "object-cover", g),
47955
+ onLoad: o ? b : void 0
47956
+ }), !u && /* @__PURE__ */ t("div", { className: "rounded-400 interaction-transition group-hover:bg-misc-visual-hover group-active:bg-misc-visual-down absolute inset-0 transition-colors" })]
47957
+ }),
47958
+ w && /* @__PURE__ */ t("div", {
47959
+ className: "absolute inset-e-1 top-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-within:opacity-100",
47960
+ children: /* @__PURE__ */ t(vs, {
47961
+ content: p,
47962
+ side: "top",
47963
+ children: /* @__PURE__ */ t(C3, {
47964
+ icon: d,
47965
+ onClick: (e) => {
47966
+ e.stopPropagation(), f();
47967
+ },
47968
+ "aria-label": p
47969
+ })
47967
47970
  })
47971
+ }),
47972
+ T && /* @__PURE__ */ t("div", {
47973
+ className: "absolute inset-s-1.5 bottom-1.5",
47974
+ children: m
47968
47975
  })
47969
- })]
47976
+ ]
47970
47977
  });
47971
47978
  };
47972
47979
  E3.displayName = "ImageWidget";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@photoroom/ui",
3
- "version": "0.1.285",
3
+ "version": "0.1.286",
4
4
  "private": false,
5
5
  "description": "Photoroom design system components",
6
6
  "sideEffects": [