@photoroom/ui 0.1.1 → 0.1.2

package/index160.mjs

@@ -1,106 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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