@photoroom/ui 0.1.1

package/index176.mjs

@@ -0,0 +1,90 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { InfoCircleIcon as f, ExclamationCircleIcon as m, ExclamationTriangleIcon as d, CheckIcon as g, ActivityIcon as u } from "@photoroom/icons/lib/monochromes";
+import { cva as b } from "./index302.mjs";
+import { clsx as h } from "./index296.mjs";
+import { useMemo as p } from "react";
+import { cn as x } from "./index7.mjs";
+import { ClearButton as v } from "./index13.mjs";
+const N = b(
+  "flex shrink-0 items-center justify-center rounded-full size-300",
+  {
+    variants: {
+      type: {
+        success: "bg-content-positive",
+        warning: "bg-yellow",
+        danger: "bg-content-negative",
+        info: "bg-content-secondary"
+      }
+    }
+  }
+), I = ({ type: r }) => {
+  const t = p(() => {
+    switch (r) {
+      case "success":
+        return g;
+      case "warning":
+        return d;
+      case "danger":
+        return m;
+      case "info":
+      case "loading":
+      case void 0:
+      default:
+        return f;
+    }
+  }, [r]);
+  return r === "loading" ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center size-300", children: /* @__PURE__ */ e(u, { className: "text-content-accent icon-size-500" }) }) : /* @__PURE__ */ e(
+    "div",
+    {
+      className: N({
+        type: r
+      }),
+      children: /* @__PURE__ */ e(t, { "aria-hidden": "true", className: "text-content-white-primary-inverted icon-size-400" })
+    }
+  );
+}, E = (r) => /* @__PURE__ */ e("span", { className: "relative aspect-square rounded-200 bg-neutral-2 after:pointer-events-none after:absolute after:inset-0 after:z-[2] after:rounded-[inherit] after:border-misc-border after:content-[''] after:misc-border-size-hairline", children: /* @__PURE__ */ e("img", { ...r }) }), q = ({
+  type: r,
+  preview: t,
+  label: o,
+  action: a,
+  className: c,
+  isStacked: i = !1,
+  closeLabel: s,
+  onClose: l
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: x(
+      "flex min-h-[56px] w-72 items-center gap-6 rounded-500 border border-misc-border bg-surface-high px-4 py-3 shadow-500",
+      c
+    ),
+    children: [
+      /* @__PURE__ */ n("div", { className: "flex h-full min-h-[24px] flex-1 items-center gap-3", children: [
+        r && /* @__PURE__ */ e(I, { type: r }),
+        t && /* @__PURE__ */ e(
+          "figure",
+          {
+            className: h(
+              "&[_img]:!block relative shrink-0 rounded-200 [&_img]:!relative [&_img]:!z-[1] [&_img]:!h-8 [&_img]:!w-8 [&_img]:!rounded-[inherit] [&_img]:!object-cover",
+              {
+                "before:absolute before:bottom-0 before:left-0 before:h-[90%] before:w-1/2 before:origin-bottom-left before:-rotate-[6deg] before:rounded-[inherit] before:bg-neutral-4 before:content-['']": i,
+                "after:absolute after:bottom-0 after:right-0 after:h-[90%] after:w-1/2 after:origin-bottom-right after:rotate-[6deg] after:rounded-[inherit] after:bg-neutral-4 after:content-['']": i
+              }
+            ),
+            children: t
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "component-500 text-content-primary", children: o })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "flex h-full min-h-[24px] items-center gap-4", children: [
+        a,
+        /* @__PURE__ */ e(v, { "aria-label": s, onClick: l, size: "small" })
+      ] })
+    ]
+  }
+);
+export {
+  q as Notification,
+  E as NotificationImage
+};
+//# sourceMappingURL=index176.mjs.map

package/index177.mjs

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Toaster as a } from "./index360.mjs";
+import { cn as m } from "./index7.mjs";
+const p = ({
+  duration: o,
+  position: t,
+  className: r,
+  ...e
+}) => /* @__PURE__ */ i(
+  a,
+  {
+    position: t ?? "bottom-center",
+    className: m("pointer-events-auto", r),
+    duration: o ?? 5e3,
+    ...e
+  }
+);
+export {
+  p as NotificationStack
+};
+//# sourceMappingURL=index177.mjs.map

package/index178.mjs

@@ -0,0 +1,67 @@
+var N = (t) => {
+  throw TypeError(t);
+};
+var u = (t, s, i) => s.has(t) || N("Cannot " + i);
+var n = (t, s, i) => (u(t, s, "read from private field"), i ? i.call(t) : s.get(t)), m = (t, s, i) => s.has(t) ? N("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, i), d = (t, s, i, o) => (u(t, s, "write to private field"), o ? o.call(t, i) : s.set(t, i), i);
+import { jsx as l } from "react/jsx-runtime";
+import { toast as p } from "./index360.mjs";
+import { cn as x } from "./index7.mjs";
+import { Notification as C } from "./index176.mjs";
+import { Button as P } from "./index10.mjs";
+var e, c, r;
+class I {
+  constructor(s) {
+    m(this, e);
+    m(this, c);
+    m(this, r);
+    this.addNotification = (i) => {
+      const o = n(this, c).call(this, {
+        ...i,
+        className: x("self -center w-[400px]", i.className)
+      });
+      return { id: o, update: (f) => n(this, c).call(this, f, { id: o }), dismiss: () => this.dismissNotification(o) };
+    }, this.addCustomNotification = p.custom, this.dismissNotification = p.dismiss, d(this, c, (i, o) => {
+      const { onClose: a, ...h } = n(this, r).call(this, i);
+      return this.addCustomNotification((f) => /* @__PURE__ */ l(
+        C,
+        {
+          ...h,
+          onClose: () => {
+            a == null || a(), this.dismissNotification(f);
+          }
+        }
+      ), o);
+    }), d(this, r, (i) => ({
+      ...n(this, e).defaultNotificationProps,
+      ...i,
+      className: x(n(this, e).defaultNotificationProps.className, i.className)
+    })), this.confirm = (i) => new Promise((o) => {
+      const a = n(this, c).call(this, {
+        label: i.label,
+        className: "w-[480px]",
+        action: /* @__PURE__ */ l(
+          P,
+          {
+            variant: "secondary-accent",
+            onClick: () => {
+              o(!0), this.dismissNotification(a);
+            },
+            children: i.confirmLabel
+          }
+        ),
+        onClose: () => {
+          o(!1), this.dismissNotification(a);
+        }
+      }, {
+        position: i.position,
+        duration: i.duration ?? 1 / 0
+        // Don't auto-dismiss confirm notifications
+      });
+    }), d(this, e, s);
+  }
+}
+e = new WeakMap(), c = new WeakMap(), r = new WeakMap();
+export {
+  I as NotificationsStore
+};
+//# sourceMappingURL=index178.mjs.map

package/index179.mjs

@@ -0,0 +1,30 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Root as e, Indicator as a } from "./index365.mjs";
+import { cn as s } from "./index7.mjs";
+function i({ className: n, ...r }) {
+  const o = Math.min(100, Math.max(0, r.value ?? 0));
+  return /* @__PURE__ */ t(
+    e,
+    {
+      ...r,
+      className: s(
+        "overflow-hidden",
+        "h-1.5 w-full min-w-0",
+        "rounded-full bg-background-subdued",
+        "text-content-accent",
+        n
+      ),
+      children: /* @__PURE__ */ t(
+        a,
+        {
+          className: "h-full bg-current transition-transform",
+          style: { transform: `translateX(-${100 - o}%)` }
+        }
+      )
+    }
+  );
+}
+export {
+  i as Progress
+};
+//# sourceMappingURL=index179.mjs.map

package/index18.mjs

@@ -0,0 +1,106 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { cva as a } from "./index302.mjs";
+import { clsx as u } from "./index296.mjs";
+import { forwardRef as d } from "react";
+import { isValidComponent as f } from "./index7.mjs";
+import { LazyImage as p } from "./index91.mjs";
+const m = a(
+  [
+    "inline-flex w-fit max-w-full items-center",
+    "appearance-none rounded-full",
+    "bg-background-subdued text-center outline-none",
+    "transition-colors interaction-transition-type-1",
+    "hover:bg-background-subdued-hover",
+    "focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring",
+    "active:bg-background-subdued-down",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30"
+  ],
+  {
+    variants: {
+      density: {
+        compact: "h-8 gap-1.5 p-1 pr-2.5",
+        regular: "h-10 gap-2 p-1 pr-3"
+      },
+      hasLeading: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        density: "compact",
+        hasLeading: !1,
+        class: "pl-2.5"
+      },
+      {
+        density: "regular",
+        hasLeading: !1,
+        class: "pl-3"
+      }
+    ],
+    defaultVariants: {
+      density: "regular",
+      hasLeading: !1
+    }
+  }
+), b = a(
+  [
+    "relative shrink-0 rounded-full bg-background-inverted",
+    "select-none overflow-hidden",
+    "flex items-center justify-center",
+    "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border-misc-border after:content-[''] after:misc-border-size-hairline"
+  ],
+  {
+    variants: {
+      density: {
+        compact: "size-6",
+        regular: "size-8"
+      }
+    },
+    defaultVariants: {
+      density: "regular"
+    }
+  }
+), g = a("text-content-primary", {
+  variants: {
+    density: {
+      compact: "icon-size-400",
+      regular: "icon-size-500"
+    }
+  },
+  defaultVariants: {
+    density: "regular"
+  }
+}), h = ({
+  density: n,
+  leadingIcon: e,
+  leadingImage: r
+}) => !e && !r ? null : /* @__PURE__ */ s("div", { className: b({ density: n }), role: "presentation", children: [
+  r && /* @__PURE__ */ t(p, { src: r, className: "size-full object-cover [&_img]:size-full" }),
+  e && /* @__PURE__ */ t("div", { className: g({ density: n }), children: f(e) ? /* @__PURE__ */ t(e, { className: "size-full fill-current", "aria-hidden": "true" }) : e })
+] }), v = d(
+  ({ label: n, density: e = "regular", leadingIcon: r, leadingImage: i, className: o, ...l }, c) => /* @__PURE__ */ s(
+    "button",
+    {
+      ...l,
+      ref: c,
+      className: u(m({ density: e, hasLeading: !!(r || i) }), o),
+      children: [
+        /* @__PURE__ */ t(
+          h,
+          {
+            density: e,
+            leadingIcon: r,
+            leadingImage: i
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "component-400 min-w-0 truncate text-content-primary", children: n })
+      ]
+    }
+  )
+);
+v.displayName = "InputButton";
+export {
+  v as InputButton
+};
+//# sourceMappingURL=index18.mjs.map

package/index180.mjs

@@ -0,0 +1,65 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { CheckIcon as d } from "@photoroom/icons/lib/monochromes";
+import { cva as a } from "./index302.mjs";
+import { cn as p } from "./index7.mjs";
+import { ActivityIndicator as l } from "./index165.mjs";
+const m = a(
+  ["flex items-center gap-3 rounded-500 border px-4 py-3", "transition-colors duration-200"],
+  {
+    variants: {
+      status: {
+        pending: "border-misc-border bg-surface-high",
+        loading: "border-misc-border bg-surface-high",
+        completed: "border-accent-500 bg-background-accent-subdued"
+      }
+    },
+    defaultVariants: {
+      status: "pending"
+    }
+  }
+), g = a(
+  ["flex shrink-0 items-center justify-center rounded-full", "size-6 text-400"],
+  {
+    variants: {
+      status: {
+        pending: "bg-background-subdued text-content-secondary",
+        loading: "text-content-accent",
+        completed: "bg-background-accent text-content-white-primary"
+      }
+    },
+    defaultVariants: {
+      status: "pending"
+    }
+  }
+);
+function b({
+  label: o,
+  status: e = "pending",
+  stepNumber: c,
+  value: t,
+  className: i,
+  ...s
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: p(m({ status: e }), i),
+      "aria-busy": e === "loading",
+      ...s,
+      children: [
+        /* @__PURE__ */ r("div", { role: "presentation", className: g({ status: e }), children: [
+          e === "pending" && /* @__PURE__ */ n("span", { className: "body-strong-300 text-content-primary", children: c }),
+          e === "loading" && /* @__PURE__ */ n(l, { variant: "default", className: "icon-size-600" }),
+          e === "completed" && /* @__PURE__ */ n(d, { className: "icon-size-400" })
+        ] }),
+        /* @__PURE__ */ n("span", { className: "body-500 flex-1 text-content-primary", children: o }),
+        !!t && /* @__PURE__ */ n("span", { className: "body-500 text-content-accent", children: t })
+      ]
+    }
+  );
+}
+b.displayName = "ProgressStep";
+export {
+  b as ProgressStep
+};
+//# sourceMappingURL=index180.mjs.map

package/index181.mjs

@@ -0,0 +1,36 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ActivityIcon as i, CheckSmallIcon as d } from "@photoroom/icons/lib/monochromes";
+import { clsx as l } from "./index296.mjs";
+import { forwardRef as m } from "react";
+const u = m(
+  ({ className: a, variant: r = "square", selected: c, loading: e, invisible: s, ...n }, o) => /* @__PURE__ */ t(
+    "div",
+    {
+      role: "presentation",
+      "data-state": c || e ? "checked" : "unchecked",
+      "aria-busy": e,
+      ...n,
+      ref: o,
+      className: l(
+        "inline-flex shrink-0 items-center justify-center",
+        "size-300",
+        "border-neutral-4 misc-border-size-selection data-[state=checked]:border-transparent",
+        "data-[state=checked]:bg-content-accent",
+        "text-transparent data-[state=checked]:text-white",
+        "transition-colors",
+        {
+          "rounded-full": r === "round",
+          "rounded-200": r === "square",
+          "data-[state=unchecked]:opacity-0": s
+        },
+        a
+      ),
+      children: e ? /* @__PURE__ */ t(i, { className: "text-white icon-size-500" }) : /* @__PURE__ */ t(d, { className: "select-none icon-size-500" })
+    }
+  )
+);
+u.displayName = "SelectionBadge";
+export {
+  u as SelectionBadge
+};
+//# sourceMappingURL=index181.mjs.map

package/index182.mjs

@@ -0,0 +1,39 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { cva as f } from "./index302.mjs";
+import { cn as S } from "./index7.mjs";
+import { SellScoreGauge as l } from "./index394.mjs";
+import { SellScoreLabel as t } from "./index395.mjs";
+const g = f("flex w-full items-center", {
+  variants: {
+    size: {
+      24: "gap-2",
+      16: "gap-1"
+    }
+  }
+}), m = ({
+  score: e,
+  size: r,
+  max: a,
+  label: c,
+  className: s,
+  gaugeClassName: i,
+  labelClassName: n
+}) => /* @__PURE__ */ p("div", { className: S(g({ size: r }), s), children: [
+  /* @__PURE__ */ o(l, { score: e, max: a, size: r, className: i }),
+  /* @__PURE__ */ o(
+    t,
+    {
+      score: e,
+      max: a,
+      size: r,
+      label: c,
+      className: n
+    }
+  )
+] });
+m.Label = t;
+m.Gauge = l;
+export {
+  m as SellScore
+};
+//# sourceMappingURL=index182.mjs.map

package/index183.mjs

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as t } from "./index7.mjs";
+const d = ({ label: e, className: n }) => /* @__PURE__ */ r(
+  "kbd",
+  {
+    className: t(
+      "inline-block shrink-0 px-[7px]",
+      "rounded-300 bg-background-subdued",
+      "component-400 font-brand uppercase leading-6 text-content-secondary",
+      "whitespace-nowrap text-center",
+      n
+    ),
+    children: e
+  }
+);
+export {
+  d as Shortcut
+};
+//# sourceMappingURL=index183.mjs.map

package/index184.mjs

@@ -0,0 +1,17 @@
+import { jsx as o } from "react/jsx-runtime";
+import { clsx as a } from "./index296.mjs";
+import { StatusBadgeInternal as e } from "./index385.mjs";
+const n = ({ variant: t }) => /* @__PURE__ */ o(
+  e,
+  {
+    className: a(
+      t === "default" && "bg-content-positive text-black",
+      t === "negative" && "bg-content-negative text-black"
+    )
+  }
+);
+n.Custom = e;
+export {
+  n as StatusBadge
+};
+//# sourceMappingURL=index184.mjs.map

package/index185.mjs

@@ -0,0 +1,86 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { CheckCircleIcon as v } from "@photoroom/icons/lib/monochromes";
+import { Root as w, Indicator as x } from "./index365.mjs";
+import { clsx as t } from "./index296.mjs";
+import { useId as y } from "react";
+import { cn as N } from "./index7.mjs";
+const c = t(
+  "absolute inset-0 z-[1]",
+  "flex h-full items-center gap-1.5 p-1 ps-5",
+  "transition-all duration-200 ease-[cubic-bezier(0.2,0.82,0.61,1)]"
+), d = "min-w-0 grow overflow-hidden text-ellipsis whitespace-nowrap text-left", m = t(
+  "shrink-0 appearance-none outline-none",
+  "flex h-full items-center px-4",
+  "rounded-full hover:bg-black-alpha-2",
+  "focus-visible:bg-black-alpha-2 active:bg-black-alpha-3",
+  "text-content-white-primary-inverted",
+  "transition-colors duration-200"
+);
+function M({
+  className: p,
+  inProgressLabel: h,
+  completedLabel: u,
+  actionLabel: b,
+  cancelLabel: f,
+  onAction: l,
+  onCancel: s,
+  ...r
+}) {
+  const i = Math.min(100, Math.max(0, r.value ?? 0)), e = i === 100, o = y();
+  return /* @__PURE__ */ n(
+    w,
+    {
+      ...r,
+      "aria-labelledby": o,
+      className: N(
+        "relative overflow-hidden",
+        "h-12 w-full min-w-0",
+        "rounded-full bg-neutral-8 shadow-400",
+        "component-500 text-content-white-primary-inverted",
+        p
+      ),
+      children: [
+        /* @__PURE__ */ a(
+          x,
+          {
+            className: "pointer-events-none h-full bg-background-default transition-transform",
+            style: { transform: `translateX(-${100 - i}%)` }
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            "aria-hidden": e,
+            className: t(c, {
+              "pointer-events-none -translate-y-4 opacity-0": e,
+              "opacity-1 translate-y-0": !e
+            }),
+            children: [
+              /* @__PURE__ */ a("span", { className: d, id: o, children: h }),
+              !!s && /* @__PURE__ */ a("button", { disabled: e, onClick: s, className: m, children: f })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            "aria-hidden": !e,
+            className: t(c, {
+              "pointer-events-none translate-y-4 opacity-0": !e,
+              "opacity-1 translate-y-0": e
+            }),
+            children: [
+              /* @__PURE__ */ a(v, { className: "-ml-1 h-5 w-5 shrink-0" }),
+              /* @__PURE__ */ a("span", { className: d, children: u }),
+              !!l && /* @__PURE__ */ a("button", { disabled: !e, onClick: l, className: m, children: b })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  M as ToastProgress
+};
+//# sourceMappingURL=index185.mjs.map

package/index186.mjs

@@ -0,0 +1,32 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cva as o } from "./index302.mjs";
+import { clsx as a } from "./index296.mjs";
+import { twMerge as d } from "./index297.mjs";
+const u = o(["shrink-0 animate-bone-pulse"], {
+  variants: {
+    rounding: {
+      none: "rounded-none",
+      200: "rounded-200",
+      300: "rounded-300",
+      400: "rounded-400",
+      500: "rounded-500",
+      "area-600": "rounded-area-600",
+      full: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    rounding: "200"
+  }
+}), l = ({ rounding: n, ...r }) => /* @__PURE__ */ e(
+  "div",
+  {
+    ...r,
+    "aria-busy": !0,
+    className: d(a(r.className, u({ rounding: n })))
+  }
+);
+export {
+  l as Bone,
+  u as boneVariants
+};
+//# sourceMappingURL=index186.mjs.map

package/index187.mjs

@@ -0,0 +1,29 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cva as i } from "./index302.mjs";
+const o = i("", {
+  variants: {
+    type: {
+      default: "w-full border-t-[1px] border-misc-divider",
+      titleMiddle: "relative text-center before:absolute before:left-0 before:top-1/2 before:h-[1px] before:w-full before:bg-misc-divider before:content-['']",
+      titleBelow: "w-full border-t-[1px] border-misc-divider"
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+}), l = i(["text-content-tertiary"], {
+  variants: {
+    type: {
+      default: "",
+      titleMiddle: "component-500 relative inline-block px-4 text-content-tertiary",
+      titleBelow: "component-400 pt-1"
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+}), n = ({ children: t, type: e }) => /* @__PURE__ */ r("div", { className: o({ type: e }), role: "presentation", children: (e === "titleMiddle" || e === "titleBelow") && t && /* @__PURE__ */ r("div", { className: l({ type: e }), children: t }) });
+export {
+  n as Divider
+};
+//# sourceMappingURL=index187.mjs.map

package/index188.mjs

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Children as n } from "react";
+import { cn as l } from "./index7.mjs";
+import { PanelHeaderLeading as p } from "./index398.mjs";
+import { PanelHeaderTrailing as m } from "./index399.mjs";
+const r = ({ children: e, className: t, isSticky: o = !0 }) => {
+  const a = n.count(e) === 1;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: l(
+        "flex w-full flex-col gap-3 px-4 pt-4",
+        o && "sticky inset-x-0 top-0 z-20 bg-surface-high",
+        a ? "pb-3" : "pb-2",
+        t
+      ),
+      children: e
+    }
+  );
+};
+r.Leading = p;
+r.Trailing = m;
+export {
+  r as PanelHeader
+};
+//# sourceMappingURL=index188.mjs.map

package/index189.mjs

@@ -0,0 +1,10 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { CheckIcon as t } from "@photoroom/icons/lib/monochromes";
+const o = ({ features: c }) => /* @__PURE__ */ e("ul", { className: "space-y-4 text-500", children: c.map((s) => /* @__PURE__ */ r("li", { className: "flex space-x-4", children: [
+  /* @__PURE__ */ e(t, { className: "h-6 w-6 shrink-0 text-content-accent", "aria-hidden": "true" }),
+  /* @__PURE__ */ e("span", { className: "component-500 grow", children: s })
+] }, s)) });
+export {
+  o as FeaturesList
+};
+//# sourceMappingURL=index189.mjs.map