@photoroom/ui 0.1.1

package/index13.mjs

@@ -0,0 +1,74 @@
+import { jsx as r } from "react/jsx-runtime";
+import { CrossIcon as t } from "@photoroom/icons/lib/monochromes";
+import { cva as s } from "./index302.mjs";
+import { forwardRef as u } from "react";
+const c = s(
+  ["inline-flex items-center justify-center rounded-full outline-none transition-all"],
+  {
+    variants: {
+      size: {
+        small: "size-300",
+        medium: "size-400"
+      },
+      variant: {
+        secondary: "bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down",
+        "on-dark": "bg-neutral-2 hover:bg-neutral-3 focus-visible:bg-neutral-3 focus-visible:ring focus-visible:ring-misc-white-focus-indicator active:bg-neutral-4",
+        "secondary-on-dark": "bg-background-white-subdued hover:bg-background-white-subdued-hover focus-visible:bg-background-white-subdued-hover focus-visible:ring focus-visible:ring-misc-white-focus-indicator active:bg-background-white-subdued-down"
+      },
+      disabled: {
+        true: "opacity-30"
+      }
+    },
+    compoundVariants: [
+      { variant: "secondary", disabled: !0, class: "!bg-background-subdued" },
+      { variant: "on-dark", disabled: !0, class: "!bg-neutral-2" },
+      {
+        variant: "secondary-on-dark",
+        disabled: !0,
+        class: "!bg-background-white-subdued"
+      }
+    ],
+    defaultVariants: {
+      size: "medium",
+      variant: "secondary",
+      disabled: !1
+    }
+  }
+), b = s("", {
+  variants: {
+    variant: {
+      secondary: "text-content-primary",
+      "on-dark": "text-content-primary",
+      "secondary-on-dark": "text-content-white-primary"
+    },
+    size: {
+      small: "icon-size-300",
+      medium: "icon-size-400"
+    }
+  },
+  defaultVariants: {
+    variant: "secondary",
+    size: "medium"
+  }
+}), l = u(
+  ({ size: e, variant: i, onClick: n, className: o, ...a }, d) => /* @__PURE__ */ r(
+    "button",
+    {
+      ...a,
+      ref: d,
+      className: c({
+        size: e,
+        variant: i,
+        disabled: a.disabled,
+        class: o
+      }),
+      onClick: n,
+      children: /* @__PURE__ */ r(t, { className: b({ variant: i, size: e }) })
+    }
+  )
+);
+l.displayName = "ClearButton";
+export {
+  l as ClearButton
+};
+//# sourceMappingURL=index13.mjs.map

package/index130.mjs

@@ -0,0 +1,60 @@
+import { jsxs as g, jsx as r } from "react/jsx-runtime";
+import { Root as x, Track as P, SliderThumb as k } from "./index380.mjs";
+import { clsx as m } from "./index296.mjs";
+import { useMemo as v } from "react";
+const u = (s, l) => (a) => 100 * (a - s) / (l - s), d = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"], $ = ({
+  onDoubleClickThumb: s,
+  onArrowKeyDown: l,
+  onArrowKeyUp: a,
+  ...t
+}) => {
+  const i = t.value || t.defaultValue, o = !t.min || t.min < 0 ? 0 : t.min, f = v(() => {
+    const e = (i == null ? void 0 : i[0]) || 0, n = Math.abs(u(t.min || 0, t.max || 100)(e));
+    if (o !== t.min) {
+      const c = Math.abs(u(t.min || 0, t.max || 100)(o)), b = n > c ? n - c : c - n, h = n > c ? c : n;
+      return {
+        width: `${b}%`,
+        left: `${h}%`
+      };
+    }
+    return {
+      width: `${Math.abs(n)}%`,
+      left: 0
+    };
+  }, [t.max, t.min, o, i]);
+  return /* @__PURE__ */ g(
+    x,
+    {
+      ...t,
+      className: m(
+        "relative flex h-5 w-full touch-none select-none items-center",
+        t.className
+      ),
+      onKeyDown: (e) => {
+        d.includes(e.key) && (l == null || l(e), e.stopPropagation());
+      },
+      onKeyUp: (e) => {
+        d.includes(e.key) && (a == null || a(e), e.stopPropagation());
+      },
+      children: [
+        /* @__PURE__ */ r(P, { className: "relative h-1 grow rounded-full bg-neutral-2", children: /* @__PURE__ */ r("div", { className: "absolute h-full rounded-full bg-content-accent", style: f }) }),
+        i == null ? void 0 : i.map((e, n) => /* @__PURE__ */ r(
+          k,
+          {
+            "aria-label": n.toString(),
+            className: m(
+              "block h-5 w-5 rounded-full border border-misc-border bg-white shadow-300 outline-none",
+              "transition-all focus-visible:border-content-accent focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring"
+            ),
+            onDoubleClick: s
+          },
+          n
+        ))
+      ]
+    }
+  );
+};
+export {
+  $ as Slider
+};
+//# sourceMappingURL=index130.mjs.map

package/index131.mjs

@@ -0,0 +1,98 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { clsx as O } from "./index296.mjs";
+import { useId as z } from "react";
+import { Slider as B } from "./index130.mjs";
+import { NumberField as H } from "./index117.mjs";
+import { useControlledState as P } from "./index290.mjs";
+import { Tooltip as q } from "./index200.mjs";
+import { InfoButton as A } from "./index17.mjs";
+import { HelperText as E } from "./index109.mjs";
+const Y = ({
+  value: g,
+  defaultValue: c = 0,
+  onValueChange: y,
+  onNumberFieldValueChange: i,
+  onDoubleClickThumb: r,
+  onPointerDown: N,
+  onPointerUp: I,
+  onArrowKeyDown: S,
+  onArrowKeyUp: j,
+  min: p = 0,
+  max: f = 100,
+  step: x = 1,
+  label: d,
+  description: h,
+  disabled: s,
+  tooltip: v,
+  className: u,
+  isMixed: a,
+  ...t
+}) => {
+  const [w, o] = P({
+    value: g,
+    defaultValue: c,
+    onValueChange: y
+  }), l = z();
+  return /* @__PURE__ */ m("div", { className: O("flex flex-col gap-0.5", s && "opacity-30", u), children: [
+    d && /* @__PURE__ */ m("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ e(
+        "span",
+        {
+          id: l,
+          className: "component-500 flex min-h-[20px] items-center text-content-primary",
+          children: d
+        }
+      ),
+      !!v && /* @__PURE__ */ e(q, { side: "top", withPortal: !1, content: v, className: "z-20 w-64", children: /* @__PURE__ */ e(A, { as: "span" }) })
+    ] }),
+    /* @__PURE__ */ m("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ e(
+        B,
+        {
+          min: p,
+          max: f,
+          step: x,
+          value: [w],
+          onValueChange: ([n]) => o(n),
+          onPointerDown: N,
+          onPointerUp: I,
+          onArrowKeyDown: S,
+          onArrowKeyUp: j,
+          onDoubleClickThumb: () => {
+            o(c), r == null || r();
+          },
+          disabled: s,
+          "aria-labelledby": l,
+          className: "grow"
+        }
+      ),
+      /* @__PURE__ */ e(
+        H,
+        {
+          ...t,
+          min: p,
+          max: f,
+          step: x,
+          value: w,
+          onValueChange: (n) => {
+            o(n), i == null || i(n);
+          },
+          disabled: s,
+          density: "compact",
+          isMixed: a,
+          "aria-labelledby": l,
+          className: O("shrink-0", {
+            "w-16": !a && (!t.unitOptions || t.unitOptions.length <= 1),
+            "w-[72px]": a && (!t.unitOptions || t.unitOptions.length <= 1),
+            "w-[104px]": t.unitOptions && t.unitOptions.length > 1
+          })
+        }
+      )
+    ] }),
+    h && /* @__PURE__ */ e(E, { children: h })
+  ] });
+};
+export {
+  Y as SliderField
+};
+//# sourceMappingURL=index131.mjs.map

package/index132.mjs

@@ -0,0 +1,27 @@
+import { jsx as m } from "react/jsx-runtime";
+import { clsx as d } from "./index296.mjs";
+import { forwardRef as f } from "react";
+import { TextArea as u } from "./index137.mjs";
+const x = f(({ value: r, onChange: e, disabled: t = !1, placeholder: o, className: a, maxHeight: n, ...s }, p) => /* @__PURE__ */ m(
+  u,
+  {
+    ref: p,
+    value: r,
+    onChange: (i) => e(i.target.value),
+    disabled: t,
+    placeholder: o,
+    className: d(
+      "!h-[34px] min-h-[34px] resize-none rounded-none border border-transparent px-0 py-1 text-base caret-content-accent hover:border-transparent focus-visible:border-transparent focus-visible:ring-transparent",
+      n && "overflow-y-auto",
+      a
+    ),
+    autosized: !0,
+    minRows: 1,
+    ...s
+  }
+));
+x.displayName = "StandardInputTextPrompt";
+export {
+  x as StandardInputTextPrompt
+};
+//# sourceMappingURL=index132.mjs.map

package/index133.mjs

@@ -0,0 +1,74 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { AddIcon as v, ActivityIcon as w, ClearMediumIcon as I } from "@photoroom/icons/lib/monochromes";
+import { clsx as i } from "./index296.mjs";
+import { forwardRef as y } from "react";
+import { DropZone as j } from "./index105.mjs";
+import { OptionalImagePromptButton as z } from "./index381.mjs";
+const C = ({
+  className: e,
+  children: r,
+  onDismiss: l,
+  dismissLabel: n = "Dismiss",
+  ...o
+}) => /* @__PURE__ */ t("div", { ...o, className: i("relative h-20 w-20", e), children: /* @__PURE__ */ s(
+  "div",
+  {
+    className: i(
+      "h-full w-full overflow-hidden rounded-400",
+      "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border-neutral-alpha-4 after:content-[''] after:misc-border-size-default"
+    ),
+    children: [
+      r,
+      !!l && /* @__PURE__ */ t(
+        "button",
+        {
+          "aria-label": n,
+          onClick: l,
+          className: "absolute -right-2 -top-2 z-[1] flex size-6 items-center justify-center rounded-full bg-background-default",
+          children: /* @__PURE__ */ t(I, { className: "shrink-0 text-content-white-primary-inverted icon-size-400" })
+        }
+      )
+    ]
+  }
+) }), k = ({
+  image: e,
+  onDismiss: r,
+  removeLabel: l
+}) => /* @__PURE__ */ t(C, { className: "h-20", onDismiss: r, dismissLabel: l, children: e.isLoading ? /* @__PURE__ */ t("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ t(w, { className: "text-content-accent icon-size-500" }) }) : /* @__PURE__ */ t("img", { className: "h-full w-full object-contain", src: e.base64, alt: e.name }) }), D = y(
+  ({ images: e, onImageAdd: r, onImageRemove: l, limit: n, dropZoneLabel: o, removeLabel: h, className: u, ...p }, x) => {
+    const d = typeof n > "u" || n > 1, N = typeof n < "u" && e.length >= n, g = (a) => {
+      if (n && e.length + a.length > n) {
+        const b = n - e.length, f = new DataTransfer();
+        for (let c = 0; c < Math.min(a.length, b); c++) {
+          const m = a[c];
+          m && f.items.add(m);
+        }
+        r(f.files);
+      } else
+        r(a);
+    };
+    return /* @__PURE__ */ s("div", { ref: x, className: i("flex flex-col gap-4", u), ...p, children: [
+      !e.length && /* @__PURE__ */ t(j, { multiple: d, onFileChange: g, className: "w-full", children: /* @__PURE__ */ s("div", { className: "component-500 flex h-[78px] items-center justify-center gap-2 text-content-secondary", children: [
+        /* @__PURE__ */ t(v, { className: "shrink-0 icon-size-500" }),
+        /* @__PURE__ */ t("span", { children: o })
+      ] }) }),
+      e.length > 0 && /* @__PURE__ */ s("div", { className: "flex flex-wrap gap-4", children: [
+        e.map((a) => /* @__PURE__ */ t(
+          k,
+          {
+            image: a,
+            onDismiss: () => l(a.name),
+            removeLabel: h
+          },
+          a.name
+        )),
+        d && !N && /* @__PURE__ */ t(z, { limit: n, onImageAdd: r, disabled: !1 })
+      ] })
+    ] });
+  }
+);
+D.displayName = "StandardInputImagePrompt";
+export {
+  D as StandardInputImagePrompt
+};
+//# sourceMappingURL=index133.mjs.map

package/index134.mjs

@@ -0,0 +1,60 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { clsx as p } from "./index296.mjs";
+import { useId as f } from "react";
+import { SwitchFieldIndicator as a } from "./index348.mjs";
+import { Tooltip as x } from "./index200.mjs";
+import { InfoButton as h } from "./index17.mjs";
+const b = ({
+  label: s,
+  description: l,
+  tooltip: r,
+  isTooltipDisabled: c,
+  className: n,
+  inverted: m = !1,
+  ...i
+}) => {
+  const d = f(), o = i.id || d;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: p(
+        "group flex items-start gap-3 content-to-edge-py-250",
+        m ? "flex-row-reverse" : "flex-row",
+        n
+      ),
+      children: [
+        /* @__PURE__ */ e(a, { ...i, id: o, "aria-labelledby": `${o}-label` }),
+        /* @__PURE__ */ t("div", { className: "flex grow flex-col", children: [
+          /* @__PURE__ */ t("div", { className: "flex items-center misc-hairline-spacing", children: [
+            /* @__PURE__ */ e(
+              "label",
+              {
+                id: `${o}-label`,
+                htmlFor: o,
+                className: "component-500 block text-content-primary",
+                children: s
+              }
+            ),
+            !!r && /* @__PURE__ */ e(
+              x,
+              {
+                side: "top",
+                withPortal: !1,
+                content: r,
+                className: "z-20 w-64",
+                isTriggerDisabled: c,
+                children: /* @__PURE__ */ e(h, { as: "span" })
+              }
+            )
+          ] }),
+          !!l && /* @__PURE__ */ e("p", { className: "component-400 text-content-secondary", children: l })
+        ] })
+      ]
+    }
+  );
+};
+b.Indicator = a;
+export {
+  b as SwitchField
+};
+//# sourceMappingURL=index134.mjs.map

package/index135.mjs

@@ -0,0 +1,36 @@
+import { jsx as t } from "react/jsx-runtime";
+import { SwitchGroupItem as s } from "./index367.mjs";
+import { Label as a } from "./index114.mjs";
+import { Tooltip as n } from "./index200.mjs";
+import { InfoButton as p } from "./index17.mjs";
+const l = ({
+  label: o,
+  tooltip: r,
+  children: e,
+  isTooltipDisabled: i,
+  ...m
+}) => /* @__PURE__ */ t(
+  a,
+  {
+    ...m,
+    as: "fieldset",
+    label: o,
+    trailingElement: !!r && /* @__PURE__ */ t(
+      n,
+      {
+        side: "top",
+        withPortal: !1,
+        content: r,
+        isTriggerDisabled: i,
+        className: "z-20 w-64",
+        children: /* @__PURE__ */ t(p, { as: "span" })
+      }
+    ),
+    children: e
+  }
+);
+l.Item = s;
+export {
+  l as SwitchGroup
+};
+//# sourceMappingURL=index135.mjs.map

package/index136.mjs

@@ -0,0 +1,76 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { CrossIcon as p } from "@photoroom/icons/lib/monochromes/CrossIcon";
+import { cva as m } from "./index302.mjs";
+import { clsx as b } from "./index296.mjs";
+import { forwardRef as f, Children as h } from "react";
+import { cn as g } from "./index7.mjs";
+import { Label as w } from "./index114.mjs";
+import { HelperText as v } from "./index109.mjs";
+const x = m(
+  [
+    "group w-full appearance-none rounded-500 border border-misc-border bg-surface-high text-500 font-medium text-content-primary placeholder-content-tertiary",
+    "outline-none transition duration-200 focus-within:misc-border-size-focus-ring disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {
+      invalid: {
+        true: [
+          "border border-content-negative caret-black",
+          "focus-within:border-content-negative focus-within:ring-background-negative-subdued-down"
+        ],
+        false: [
+          "border caret-content-accent",
+          "group-hover:placeholder-shown:border-neutral-4",
+          "peer-focus-within:hover:border-content-accent",
+          "focus-within:border-content-accent focus-within:ring-misc-focus-indicator-subdued"
+        ]
+      }
+    },
+    defaultVariants: {
+      invalid: !1
+    }
+  }
+), y = ({ label: t, helper: o, invalid: n, className: d, onClear: a, children: i, ...r }, s) => {
+  const l = h.count(i) > 0, u = (!!r.value || l) && a;
+  return /* @__PURE__ */ c("div", { className: "relative space-y-2", children: [
+    t && /* @__PURE__ */ e(w, { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: t }),
+    /* @__PURE__ */ e("div", { className: x({ invalid: n }), children: /* @__PURE__ */ c("div", { className: "flex w-full flex-wrap items-center gap-1 p-2", children: [
+      i,
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          ref: s,
+          ...r,
+          className: g([
+            "peer w-full appearance-none rounded-500 border-transparent bg-surface-high p-0 px-0.5 caret-content-accent",
+            "outline-none transition duration-200 focus-visible:border-transparent focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
+            "component-500 leading-none text-content-primary placeholder-content-tertiary",
+            d
+          ])
+        }
+      ),
+      u && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-3 top-2.5 h-fit w-fit", children: /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear all tags",
+          className: b(
+            "rounded-full bg-neutral-6 p-0.5",
+            "disabled:cursor-not-allowed disabled:opacity-50"
+          ),
+          onClick: a,
+          disabled: r.disabled,
+          children: /* @__PURE__ */ e(p, { className: "h-3 w-3 text-content-white-primary", "aria-hidden": "true" })
+        }
+      ) })
+    ] }) }),
+    o && /* @__PURE__ */ e(v, { invalid: n, children: o })
+  ] });
+}, N = f(y);
+N.displayName = "TagField";
+export {
+  N as TagField,
+  y as TagFieldComponent
+};
+//# sourceMappingURL=index136.mjs.map

package/index137.mjs

@@ -0,0 +1,31 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { cn as f } from "./index7.mjs";
+import { TextAreaAutosize as u } from "./index346.mjs";
+import { Label as p } from "./index114.mjs";
+import { HelperText as x } from "./index109.mjs";
+const g = b(
+  ({ label: s, helper: r, className: c, invalid: e, trailingElement: a, autosized: d, style: t, ...i }, m) => {
+    const n = f(
+      "w-full rounded-500 bg-surface-high",
+      "outline-none transition duration-200",
+      "component-500 text-content-primary",
+      "placeholder:text-content-tertiary",
+      "disabled:cursor-not-allowed disabled:opacity-30",
+      {
+        "border-content-negative focus-visible:border-content-negative focus-visible:ring-0": e,
+        "border-misc-border-box focus-visible:border-content-accent focus-visible:ring focus-visible:ring-misc-focus-indicator-subdued": !e
+      },
+      c
+    );
+    return /* @__PURE__ */ l(p, { label: s, trailingElement: a, children: [
+      d ? /* @__PURE__ */ o(u, { ...i, className: n, style: t }) : /* @__PURE__ */ o("textarea", { ...i, ref: m, className: n, style: t }),
+      r && /* @__PURE__ */ o(x, { invalid: e, children: r })
+    ] });
+  }
+);
+g.displayName = "TextArea";
+export {
+  g as TextArea
+};
+//# sourceMappingURL=index137.mjs.map

package/index138.mjs

@@ -0,0 +1,29 @@
+import { jsx as t } from "react/jsx-runtime";
+import { clsx as n } from "./index296.mjs";
+import { forwardRef as i } from "react";
+import { TextAreaAutosize as p } from "./index346.mjs";
+const a = i(
+  ({ className: o, ...r }, e) => /* @__PURE__ */ t(
+    p,
+    {
+      ref: e,
+      className: n(
+        "component-500 rounded-500 bg-black-alpha-8",
+        "max-w-full",
+        "text-content-white-primary placeholder-content-white-secondary",
+        "px-[10px] py-[9px]",
+        "backdrop-blur-2xl",
+        "!border-none !ring-0",
+        // !important is needed to override react-textarea-autosize styles
+        o
+      ),
+      minRows: 1,
+      ...r
+    }
+  )
+);
+a.displayName = "TextEditionBox";
+export {
+  a as TextEditionBox
+};
+//# sourceMappingURL=index138.mjs.map

package/index139.mjs

@@ -0,0 +1,19 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { Label as n } from "./index114.mjs";
+import { TextInput as x } from "./index141.mjs";
+import { HelperText as p } from "./index109.mjs";
+const a = l(
+  ({ label: o, helper: r, className: i, ...t }, m) => {
+    const { invalid: d } = t;
+    return /* @__PURE__ */ f(n, { label: o, className: i, children: [
+      /* @__PURE__ */ e(x, { ref: m, ...t }),
+      r && /* @__PURE__ */ e(p, { invalid: d, children: r })
+    ] });
+  }
+);
+a.displayName = "TextField";
+export {
+  a as TextField
+};
+//# sourceMappingURL=index139.mjs.map

package/index14.mjs

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { CrossIcon as n } from "@photoroom/icons/lib/monochromes";
+import { clsx as o } from "./index296.mjs";
+const a = ({ className: t, ...r }) => /* @__PURE__ */ e(
+  "button",
+  {
+    tabIndex: -1,
+    ...r,
+    className: o(
+      "outline-none focus-visible:ring-0",
+      "h-6 w-6",
+      "flex items-center justify-center",
+      "rounded-full bg-neutral-6",
+      "border-4 border-transparent bg-clip-padding",
+      // expand click zone by 4px
+      "text-content-white-primary",
+      "disabled:pointer-events-none disabled:opacity-30",
+      t
+    ),
+    children: /* @__PURE__ */ e(n, { className: "h-3 w-3" })
+  }
+);
+export {
+  a as FieldClearButton
+};
+//# sourceMappingURL=index14.mjs.map