@photoroom/ui 0.1.1

package/index160.mjs

@@ -0,0 +1,106 @@
+import { jsxs as v, jsx as s } from "react/jsx-runtime";
+import { ArrowLeftIcon as b, ArrowRightIcon as g } from "@photoroom/icons/lib/monochromes";
+import { clsx as r } from "./index296.mjs";
+import { useRef as N, useState as l, useCallback as w, useEffect as j } from "react";
+import { TabsItem as B } from "./index359.mjs";
+import { CircularButton as m } from "./index12.mjs";
+const I = ({ children: f, className: p, overflow: t = "wrap", bgGradientColor: c = "surface-high", ...u }) => {
+  const o = N(null), [n, h] = l(!1), [i, d] = l(!0), a = w(() => {
+    if (t === "scroll" && o.current) {
+      const { scrollLeft: e, scrollWidth: x, offsetWidth: y } = o.current;
+      h(e > 0), d(Math.ceil(e + y) < x);
+    }
+  }, [t]);
+  return j(() => {
+    a();
+  }, [a]), /* @__PURE__ */ v(
+    "div",
+    {
+      ...u,
+      className: r(
+        {
+          contents: t === "wrap",
+          "relative -m-1": t === "scroll"
+        },
+        p
+      ),
+      children: [
+        t === "scroll" && /* @__PURE__ */ s(
+          "div",
+          {
+            className: r(
+              "absolute inset-y-0 left-0 z-[2]",
+              "flex w-20 items-center justify-start",
+              `bg-gradient-to-r from-${c} from-50% to-transparent`,
+              "transition-opacity duration-200",
+              "pointer-events-none",
+              {
+                "opacity-0": !n
+              }
+            ),
+            children: /* @__PURE__ */ s(
+              m,
+              {
+                icon: b,
+                onClick: () => {
+                  var e;
+                  return (e = o.current) == null ? void 0 : e.scrollBy({ left: -100, behavior: "smooth" });
+                },
+                className: r({
+                  "pointer-events-none": !n,
+                  "pointer-events-auto": n
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            ref: o,
+            className: r("flex w-full gap-1", {
+              "flex-wrap justify-center": t === "wrap",
+              "scrollbar-none flex-nowrap overflow-auto p-1": t === "scroll"
+            }),
+            onScroll: a,
+            children: f
+          }
+        ),
+        t === "scroll" && /* @__PURE__ */ s(
+          "div",
+          {
+            className: r(
+              "absolute inset-y-0 right-0 z-[2]",
+              "flex w-20 items-center justify-end",
+              `bg-gradient-to-l from-${c} from-50% to-transparent`,
+              "transition-opacity duration-200",
+              "pointer-events-none",
+              {
+                "opacity-0": !i
+              }
+            ),
+            children: /* @__PURE__ */ s(
+              m,
+              {
+                icon: g,
+                onClick: () => {
+                  var e;
+                  return (e = o.current) == null ? void 0 : e.scrollBy({ left: 100, behavior: "smooth" });
+                },
+                className: r({
+                  "pointer-events-none": !i,
+                  "pointer-events-auto": i
+                })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+I.Item = B;
+export {
+  I as Tabs
+};
+//# sourceMappingURL=index160.mjs.map

package/index161.mjs

@@ -0,0 +1,15 @@
+import { jsx as o } from "react/jsx-runtime";
+import { clsx as t } from "./index296.mjs";
+import { Tag as a } from "./index366.mjs";
+const p = ({ children: r, centered: e = !0 }) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: t("align-center flex flex-row flex-wrap gap-4 p-0", e && "justify-center"),
+    children: r
+  }
+);
+p.Tag = a;
+export {
+  p as TagGroup
+};
+//# sourceMappingURL=index161.mjs.map

package/index162.mjs

@@ -0,0 +1,51 @@
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { clsx as r } from "./index296.mjs";
+import { forwardRef as a } from "react";
+import { Tooltip as m } from "./index200.mjs";
+import { ProBadge as b } from "./index167.mjs";
+const f = a((e, t) => e.size === "small" ? /* @__PURE__ */ o(m, { content: e.label, withPortal: !1, children: /* @__PURE__ */ o(n, { ref: t, ...e }) }) : /* @__PURE__ */ o(n, { ref: t, ...e }));
+f.displayName = "ToolMenuButton";
+const n = a(
+  ({ size: e = "default", label: t, showProBadge: l, icon: s, className: i, ...u }, c) => /* @__PURE__ */ d(
+    "button",
+    {
+      ref: c,
+      type: "button",
+      className: r(
+        "relative shrink-0",
+        "flex flex-col items-center justify-center gap-0.5",
+        "px-2 size-h-700",
+        "rounded-500 outline-none",
+        "whitespace-nowrap",
+        "hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down",
+        "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring",
+        "transition-colors",
+        {
+          "aspect-square": e === "small",
+          "min-w-[80px]": e === "default"
+        },
+        i
+      ),
+      ...u,
+      children: [
+        /* @__PURE__ */ o(s, { className: "h-5 w-5 text-content-primary", "aria-hidden": "true" }),
+        /* @__PURE__ */ o(
+          "span",
+          {
+            className: r("component-400", {
+              hidden: e === "small",
+              block: e === "default"
+            }),
+            children: t
+          }
+        ),
+        l && /* @__PURE__ */ o(b, { size: "small", className: "absolute right-2 top-2" })
+      ]
+    }
+  )
+);
+n.displayName = "ToolMenuButtonInternal";
+export {
+  f as ToolMenuButton
+};
+//# sourceMappingURL=index162.mjs.map

package/index163.mjs

@@ -0,0 +1,35 @@
+import { jsx as e } from "react/jsx-runtime";
+import { CheckGroup as m } from "./index289.mjs";
+import { useFocusKeyNav as h } from "./index291.mjs";
+import { ChoiceGroup as s } from "./index370.mjs";
+import { ChoiceMultipleTile as u } from "./index371.mjs";
+import { ListChoiceMultipleExpandTile as C } from "./index372.mjs";
+import { ListChoiceMultipleTile as a } from "./index373.mjs";
+const o = ({
+  title: t,
+  subtitle: r,
+  layout: i = "list",
+  className: l,
+  children: c,
+  ...n
+}) => {
+  const p = h("button[role='checkbox']", i === "grid" ? "horizontal" : "vertical");
+  return /* @__PURE__ */ e(m, { ...n, children: /* @__PURE__ */ e(
+    s,
+    {
+      layout: i,
+      title: t,
+      subtitle: r,
+      className: l,
+      onKeyDown: p,
+      children: c
+    }
+  ) });
+};
+o.ChoiceTile = u;
+o.ListChoiceTile = a;
+o.ListChoiceExpandTile = C;
+export {
+  o as ChoiceMultipleGroup
+};
+//# sourceMappingURL=index163.mjs.map

package/index164.mjs

@@ -0,0 +1,31 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useFocusKeyNav as r } from "./index291.mjs";
+import { ChoiceGroup as l } from "./index370.mjs";
+import { ChoiceTile as c } from "./index374.mjs";
+import { ListChoiceTile as s } from "./index375.mjs";
+const e = (o) => {
+  const t = o.layout === "grid" ? "horizontal" : "vertical", n = r("input", t);
+  return /* @__PURE__ */ i(l, { ...o, tabIndex: -1, onKeyDown: n });
+}, a = (o) => /* @__PURE__ */ i(c, { role: "button", ...o, children: /* @__PURE__ */ i(
+  "input",
+  {
+    type: "button",
+    className: "sr-only",
+    onClick: (t) => t.stopPropagation()
+  }
+) }), p = (o) => /* @__PURE__ */ i(s, { role: "button", ...o, children: /* @__PURE__ */ i(
+  "input",
+  {
+    type: "button",
+    className: "sr-only",
+    onClick: (t) => t.stopPropagation()
+  }
+) });
+e.ChoiceTile = a;
+e.ListChoiceTile = p;
+export {
+  e as ChoiceSingleGroup,
+  a as ChoiceSingleTile,
+  p as ListChoiceSingleTile
+};
+//# sourceMappingURL=index164.mjs.map

package/index165.mjs

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ActivityIcon as r } from "@photoroom/icons/lib/monochromes";
+import { cn as c } from "./index7.mjs";
+const d = ({ variant: t = "default", className: i }) => /* @__PURE__ */ e(
+  "div",
+  {
+    "aria-busy": "true",
+    "data-testid": "activity-indicator",
+    className: c(
+      "flex size-10 shrink-0 items-center justify-center rounded-full p-0.5",
+      {
+        "text-content-accent": t === "default",
+        "bg-background-subdued text-white": t === "on-dark"
+      },
+      i
+    ),
+    children: /* @__PURE__ */ e(r, { className: "size-full" })
+  }
+);
+export {
+  d as ActivityIndicator
+};
+//# sourceMappingURL=index165.mjs.map

package/index166.mjs

@@ -0,0 +1,75 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { cva as m } from "./index302.mjs";
+import { clsx as s } from "./index296.mjs";
+import { forwardRef as l } from "react";
+import { isValidComponent as g } from "./index7.mjs";
+const u = m("inline-flex items-center justify-center", {
+  variants: {
+    size: {
+      small: "component-semi-strong-300 gap-[3px] rounded-200 py-[1.5px] size-h-200",
+      medium: "component-semi-strong-400 gap-[3px] rounded-250 py-0.5 size-h-250",
+      large: "component-semi-strong-500 gap-1 rounded-300 py-[3px] size-h-300"
+    },
+    variant: {
+      default: "bg-black-alpha-7 text-white",
+      accent: "bg-accent-400 text-white",
+      pro: "border-misc-border bg-white text-accent-500 shadow-400 misc-border-size-hairline",
+      "pro-alt": "bg-gradient-to-r text-white bg-background-pro",
+      subtle: "border-content-tertiary text-content-tertiary misc-border-size-hairline",
+      "on-dark-secondary": "bg-background-white-subdued text-content-white-primary",
+      subdued: "bg-background-subdued bg-opacity-60 text-content-primary",
+      "moon-grape": "bg-secondary-moon-grape text-content-white-primary",
+      "on-dark": "bg-background-white text-content-black-primary"
+    },
+    icon: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      size: "small",
+      icon: !0,
+      class: "p-1 content-to-edge-pr-200"
+    },
+    { size: "small", icon: !1, class: "content-to-edge-px-200" },
+    {
+      size: "medium",
+      icon: !0,
+      class: "p-[5px] content-to-edge-pr-250"
+    },
+    { size: "medium", icon: !1, class: "content-to-edge-px-250" },
+    {
+      size: "large",
+      icon: !0,
+      class: "p-[5px] content-to-edge-pr-300"
+    },
+    { size: "large", icon: !1, class: "content-to-edge-px-300" }
+  ]
+}), b = l(
+  ({ size: t = "medium", variant: n = "default", icon: e, className: o, children: a, ...i }, c) => {
+    const d = n === "pro" ? /* @__PURE__ */ r("span", { className: "bg-gradient-to-br from-content-accent to-pastel-pink bg-clip-text text-transparent", children: a }) : a;
+    return /* @__PURE__ */ p(
+      "span",
+      {
+        ...i,
+        ref: c,
+        className: s(u({ size: t, variant: n, icon: !!e }), o),
+        children: [
+          g(e) ? /* @__PURE__ */ r(x, { as: e, size: t }) : e,
+          d
+        ]
+      }
+    );
+  }
+);
+b.displayName = "Badge";
+const x = ({ as: t, size: n = "medium", className: e }) => !t || !n ? null : /* @__PURE__ */ r(t, { className: s({
+  small: "icon-size-200",
+  medium: "icon-size-300",
+  large: "icon-size-400"
+}[n], e), "aria-hidden": "true" });
+export {
+  b as Badge
+};
+//# sourceMappingURL=index166.mjs.map

package/index167.mjs

@@ -0,0 +1,12 @@
+import { jsx as t } from "react/jsx-runtime";
+import { PRO_PLAN_NAME as a } from "./index361.mjs";
+import "./index362.mjs";
+import "./index363.mjs";
+import { Badge as e } from "./index166.mjs";
+function f({ children: r, ...o }) {
+  return /* @__PURE__ */ t(e, { "data-testid": "pro-badge", ...o, variant: "pro", children: r || a });
+}
+export {
+  f as ProBadge
+};
+//# sourceMappingURL=index167.mjs.map

package/index168.mjs

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { SparklesIcon as o } from "@photoroom/icons/lib/monochromes";
+import { clsx as s } from "./index296.mjs";
+import { forwardRef as a } from "react";
+const d = a(
+  ({ className: r, ...i }, t) => /* @__PURE__ */ e(
+    "span",
+    {
+      "data-testid": "studio-badge",
+      ...i,
+      ref: t,
+      className: s(
+        "inline-flex items-center justify-center",
+        "rounded-250 size-250",
+        "border-misc-border bg-white text-content-black-primary shadow-400 misc-border-size-hairline",
+        r
+      ),
+      children: /* @__PURE__ */ e(o, { className: "h-4 w-4" })
+    }
+  )
+);
+d.displayName = "StudioBadge";
+export {
+  d as StudioBadge
+};
+//# sourceMappingURL=index168.mjs.map

package/index169.mjs

@@ -0,0 +1,21 @@
+import { jsx as r } from "react/jsx-runtime";
+import { clsx as o } from "./index296.mjs";
+const s = ({ variant: e = "default", className: t, children: n }) => /* @__PURE__ */ r(
+  "span",
+  {
+    className: o(
+      "inline-flex h-7 items-center justify-center px-2",
+      "component-semi-strong-500 rounded-200",
+      {
+        "bg-background-accent-subdued text-content-accent": e === "default",
+        "bg-white-alpha-8 text-content-primary": e === "on-dark"
+      },
+      t
+    ),
+    children: n
+  }
+);
+export {
+  s as CardBadge
+};
+//# sourceMappingURL=index169.mjs.map

package/index17.mjs

@@ -0,0 +1,27 @@
+import { jsx as t } from "react/jsx-runtime";
+import { InfoCircleIcon as c } from "@photoroom/icons/lib/monochromes";
+import { clsx as r } from "./index296.mjs";
+import { forwardRef as i } from "react";
+const s = i(({ as: e = "button", ...o }, n) => /* @__PURE__ */ t(
+  e,
+  {
+    ref: n,
+    type: "button",
+    className: r(
+      "flex items-center justify-center",
+      "h-5 w-5 rounded-250 outline-none",
+      "text-content-accent",
+      "hover:text-content-accent-hover",
+      "focus-visible:text-content-accent-hover focus-visible:ring focus-visible:ring-misc-focus-indicator",
+      "active:text-content-accent-down",
+      "disabled:cursor-not-allowed disabled:opacity-30"
+    ),
+    ...o,
+    children: /* @__PURE__ */ t(c, { className: "h-4 w-4" })
+  }
+));
+s.displayName = "InfoButton";
+export {
+  s as InfoButton
+};
+//# sourceMappingURL=index17.mjs.map

package/index170.mjs

@@ -0,0 +1,22 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+const i = ({
+  title: l,
+  subtitle: n,
+  icon: s,
+  primaryAction: a,
+  secondaryAction: e
+}) => /* @__PURE__ */ c("div", { className: "flex flex-col items-center text-center", children: [
+  s && /* @__PURE__ */ t(s, { className: "h-10 w-10 text-content-tertiary" }),
+  /* @__PURE__ */ c("div", { className: "mt-4 flex max-w-[480px] flex-col items-center gap-2 lg:px-6", children: [
+    !!l && /* @__PURE__ */ t("h1", { className: "heading-light-500 text-content-primary", children: l }),
+    !!n && /* @__PURE__ */ t("p", { className: "body-500 text-content-secondary", children: n })
+  ] }),
+  (a || e) && /* @__PURE__ */ c("div", { className: "mt-6 flex flex-col items-center gap-4", children: [
+    a,
+    e && /* @__PURE__ */ t("span", { className: "component-500 text-content-accent", onClick: e.onClick, children: e.label })
+  ] })
+] });
+export {
+  i as EmptySpace
+};
+//# sourceMappingURL=index170.mjs.map

package/index171.mjs

@@ -0,0 +1,26 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { clsx as a } from "./index296.mjs";
+import { Progress as d } from "./index179.mjs";
+import { InfoButton as l } from "./index17.mjs";
+const g = ({
+  title: o,
+  description: s,
+  current: n,
+  max: i,
+  className: c,
+  onClick: t
+}) => {
+  const m = n / i * 100;
+  return /* @__PURE__ */ r("div", { className: a("flex flex-col gap-3 rounded-500 bg-background-subdued p-4", c), children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ e("p", { className: "items-center text-sm font-500 text-content-primary", children: o }),
+      !!t && /* @__PURE__ */ e(l, { "data-testid": "export-limit-info", onClick: t })
+    ] }),
+    /* @__PURE__ */ e(d, { value: m }),
+    /* @__PURE__ */ e("p", { className: "text-xs font-500 text-content-secondary", children: s })
+  ] });
+};
+export {
+  g as ExportLimitCard
+};
+//# sourceMappingURL=index171.mjs.map

package/index172.mjs

@@ -0,0 +1,9 @@
+import { useMemo as s } from "react";
+const m = (t, o) => {
+  const e = s(() => Math.max(0, o - t), [o, t]), p = s(() => Math.min(t, o), [t, o]);
+  return { exportsLeft: e, clampCurrent: p };
+};
+export {
+  m as useExportLimitCard
+};
+//# sourceMappingURL=index172.mjs.map

package/index173.mjs

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ActivityIndicator as r } from "./index165.mjs";
+const c = (t) => /* @__PURE__ */ e("div", { ...t, className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(r, {}) });
+export {
+  c as FullScreenLoader
+};
+//# sourceMappingURL=index173.mjs.map

package/index174.mjs

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+const o = ({ value: e, max: a }) => {
+  const l = Math.max(0, Math.min(1, e / (a || e)));
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      role: "meter",
+      "aria-valuenow": e,
+      "aria-valuemax": a,
+      className: "relative h-1.5 w-full overflow-hidden rounded-full bg-background-subdued",
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: "absolute h-full bg-background-accent",
+          style: { width: `${l * 100}%` }
+        }
+      )
+    }
+  );
+};
+export {
+  o as Gauge
+};
+//# sourceMappingURL=index174.mjs.map

package/index175.mjs

@@ -0,0 +1,94 @@
+import { jsxs as a, Fragment as F, jsx as o } from "react/jsx-runtime";
+import { Fragment as k } from "react";
+import { cn as x } from "./index7.mjs";
+const e = 88, r = e / 2, i = e / 10, l = (e - i) / 2, c = 2 * Math.PI * l, h = 25, C = c * h / 360, D = ({ segments: s, className: u }) => {
+  const p = (360 - s.length * h) / s.length, d = c * p / 360, $ = 90 + p / 2;
+  return /* @__PURE__ */ a(F, { children: [
+    s.map((t) => /* @__PURE__ */ o(
+      "meter",
+      {
+        value: t.value,
+        max: t.max,
+        "aria-label": t.label,
+        className: "sr-only"
+      },
+      t.label
+    )),
+    /* @__PURE__ */ a(
+      "svg",
+      {
+        "aria-hidden": "true",
+        viewBox: `0 0 ${e} ${e}`,
+        className: x("size-[88px] shrink-0", u),
+        children: [
+          /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ a("linearGradient", { id: "limitGaugeGradient", x1: "0%", x2: "0%", y1: "50%", y2: "100%", children: [
+            /* @__PURE__ */ o("stop", { offset: "0%", stopColor: "#000000", stopOpacity: "0.15" }),
+            /* @__PURE__ */ o("stop", { offset: "49%", stopColor: "#000000", stopOpacity: "0" }),
+            /* @__PURE__ */ o("stop", { offset: "51%", stopColor: "#FFFFFF", stopOpacity: "0" }),
+            /* @__PURE__ */ o("stop", { offset: "100%", stopColor: "#FFFFFF", stopOpacity: "0.25" })
+          ] }) }),
+          /* @__PURE__ */ a("g", { transform: `rotate(${-$} ${r} ${r})`, children: [
+            /* @__PURE__ */ o(
+              "circle",
+              {
+                cx: r,
+                cy: r,
+                r: l,
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: i,
+                strokeDasharray: `${d}, ${C}`,
+                strokeLinecap: "round",
+                className: "text-neutral-alpha-2"
+              }
+            ),
+            s.map((t, m) => {
+              if (t.hideProgress)
+                return null;
+              const y = Math.min(Math.max(t.value / (t.max || 1), 0), 1), n = d * y, f = (p + h) * m;
+              return /* @__PURE__ */ a(k, { children: [
+                /* @__PURE__ */ o(
+                  "circle",
+                  {
+                    cx: r,
+                    cy: r,
+                    r: l,
+                    fill: "none",
+                    strokeWidth: i,
+                    stroke: "currentColor",
+                    strokeLinecap: "round",
+                    strokeDasharray: `${n}, ${c - n}`,
+                    transform: `rotate(${f} ${r} ${r})`,
+                    style: {
+                      color: t.color || "var(--color-neutral-4)",
+                      transition: "stroke-dasharray 0.15s ease"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  "circle",
+                  {
+                    cx: r,
+                    cy: r,
+                    r: l,
+                    fill: "none",
+                    strokeWidth: i,
+                    stroke: "url(#limitGaugeGradient)",
+                    strokeLinecap: "round",
+                    strokeDasharray: `${n}, ${c - n}`,
+                    transform: `rotate(${f} ${r} ${r})`,
+                    style: { transition: "stroke-dasharray 0.15s ease" }
+                  }
+                )
+              ] }, m.toString());
+            })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  D as LimitGauge
+};
+//# sourceMappingURL=index175.mjs.map