@photoroom/ui 0.1.1

package/index86.mjs

@@ -0,0 +1,100 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { ActivityIcon as v } from "@photoroom/icons/lib/monochromes";
+import { Item as I } from "./index315.mjs";
+import { clsx as n } from "./index296.mjs";
+import { forwardRef as N, useId as j, useState as w, useCallback as z } from "react";
+import { cn as C } from "./index7.mjs";
+import { LazyImage as F } from "./index91.mjs";
+const o = /* @__PURE__ */ new Set(), D = N(
+  ({
+    label: l,
+    previewUrl: e,
+    showLabel: d = !0,
+    isLoading: r,
+    onLoad: a,
+    error: f,
+    aspectRatio: m = "1/1",
+    className: u,
+    containerClassName: h,
+    ...b
+  }, p) => {
+    const i = j(), [x, g] = w(
+      () => r && !o.has(e)
+    ), k = z(() => {
+      e && (o.add(e), g(!1), a == null || a());
+    }, [a, e]), c = r || x;
+    return /* @__PURE__ */ s("div", { className: C("flex max-w-[160px] shrink-0 flex-col gap-y-1", h), children: [
+      /* @__PURE__ */ s(
+        I,
+        {
+          ...b,
+          "aria-labelledby": i,
+          ref: p,
+          className: n(
+            "relative block appearance-none outline-none",
+            "h-full w-full",
+            "overflow-hidden rounded-400 bg-background-subdued",
+            "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring",
+            "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']",
+            "hover:after:radix-state-unchecked:bg-black-alpha-2",
+            "active:after:radix-state-unchecked:bg-black-alpha-3",
+            "focus-visible:after:radix-state-unchecked:bg-black-alpha-2",
+            "after:border after:radix-state-unchecked:border-misc-border",
+            "after:radix-state-checked:border-content-accent after:radix-state-checked:misc-border-size-selection",
+            "after:radix-state-checked:misc-shadow-selection",
+            "after:transition-colors after:interaction-transition-type-1",
+            u
+          ),
+          children: [
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: "pointer-events-none relative flex h-full w-full select-none items-center justify-center",
+                style: { aspectRatio: m },
+                children: f || /* @__PURE__ */ t(
+                  F,
+                  {
+                    src: e,
+                    alt: "",
+                    className: n(
+                      "bg-surface-default bg-[length:32px_32px] bg-left-top bg-damier-checker",
+                      "transition-opacity interaction-transition-type-1",
+                      {
+                        "opacity-0": c
+                      }
+                    ),
+                    fadeInDuration: 0,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "contain",
+                      objectPosition: "center"
+                    },
+                    onLoad: k,
+                    onContextMenu: (y) => y.preventDefault()
+                  }
+                )
+              }
+            ),
+            c && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ t(v, { className: "text-content-accent icon-size-800" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          id: i,
+          className: n("component-400 truncate text-center text-content-primary", {
+            "sr-only": !d
+          }),
+          children: l
+        }
+      )
+    ] });
+  }
+);
+D.displayName = "ChoiceFeedTile";
+export {
+  D as ChoiceFeedTile
+};
+//# sourceMappingURL=index86.mjs.map

package/index87.mjs

@@ -0,0 +1,13 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Root as t } from "./index315.mjs";
+import { useFocusKeyNav as i } from "./index291.mjs";
+import { ChoiceFeedTile as n } from "./index86.mjs";
+const m = (o) => {
+  const e = i("button[role='radio']", "vertical");
+  return /* @__PURE__ */ r(t, { ...o, onKeyDown: e, children: o.children });
+};
+m.Item = n;
+export {
+  m as ChoiceFeedTileGroup
+};
+//# sourceMappingURL=index87.mjs.map

package/index88.mjs

@@ -0,0 +1,44 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { clsx as l } from "./index296.mjs";
+const t = ({
+  title: c,
+  images: s,
+  objectFit: r,
+  imageContainerClassName: d,
+  onClick: i
+}) => /* @__PURE__ */ n(
+  "button",
+  {
+    onClick: i,
+    className: "flex w-40 max-w-full flex-col gap-1.5 rounded-500 bg-background-subdued p-2 hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:outline-none focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring active:bg-background-subdued-down",
+    children: [
+      /* @__PURE__ */ o("h6", { className: "component-400 text-content-primary", children: c }),
+      /* @__PURE__ */ o("div", { className: "flex gap-1", children: s.slice(0, 4).map((e) => /* @__PURE__ */ o(
+        "div",
+        {
+          className: l(
+            "aspect-square flex-1 overflow-hidden rounded-200",
+            d
+          ),
+          children: /* @__PURE__ */ o(
+            "img",
+            {
+              src: e.previewUrl,
+              title: e.alt,
+              alt: e.alt,
+              className: l(
+                "h-full w-full rounded-200",
+                r ? "object-cover" : "object-contain"
+              )
+            }
+          )
+        },
+        e.id
+      )) })
+    ]
+  }
+);
+export {
+  t as CollectionTile
+};
+//# sourceMappingURL=index88.mjs.map

package/index89.mjs

@@ -0,0 +1,65 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { ResizeIcon as u } from "@photoroom/icons/lib/monochromes";
+import { clsx as r } from "./index296.mjs";
+import { useId as m } from "react";
+import { cn as b } from "./index7.mjs";
+import { ProBadge as p } from "./index167.mjs";
+const k = ({
+  label: s,
+  showLabel: i,
+  icon: n = u,
+  aspectRatio: c = "1/1",
+  showProBadge: a,
+  className: d,
+  ...l
+}) => {
+  const o = m();
+  return /* @__PURE__ */ t("div", { className: b("w-fit", d), children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        ...l,
+        "aria-labelledby": o,
+        type: "button",
+        className: r(
+          "relative block appearance-none",
+          "aspect-square h-[160px] p-3",
+          "rounded-400 bg-background-subdued",
+          "hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down",
+          "outline-none focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring",
+          "*:pointer-events-none *:select-none"
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: r(
+                "m-auto max-h-full max-w-full",
+                "flex items-center justify-center",
+                "rounded-200 border-misc-border bg-background-inverted misc-border-size-default",
+                "text-content-primary"
+              ),
+              style: { aspectRatio: c },
+              children: /* @__PURE__ */ e(n, { className: "h-6" })
+            }
+          ),
+          a && /* @__PURE__ */ e(p, { size: "small", className: "absolute right-1 top-1" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        id: o,
+        className: r("mt-1", "component-400 truncate text-center text-content-primary", {
+          "sr-only": !i
+        }),
+        children: s
+      }
+    )
+  ] });
+};
+export {
+  k as FeedSizeTile
+};
+//# sourceMappingURL=index89.mjs.map

package/index9.mjs

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+import { clsx as t } from "./index296.mjs";
+import { forwardRef as c } from "react";
+const u = c(
+  ({ as: e = "button", icon: i, className: r, ...s }, n) => /* @__PURE__ */ o(
+    e,
+    {
+      ref: n,
+      ...s,
+      className: t(
+        "inline-flex items-center justify-center",
+        "size-10 shrink-0",
+        "rounded-500 border-misc-border misc-border-size-default",
+        "hover:bg-background-subdued-hover focus-visible:bg-background-subdued active:bg-background-subdued-down",
+        "focus-visible:outline-none focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring",
+        "transition-colors interaction-transition-type-1",
+        r
+      ),
+      children: /* @__PURE__ */ o(i, { className: "size-5 text-content-secondary" })
+    }
+  )
+);
+u.displayName = "BlogSocialButton";
+export {
+  u as BlogSocialButton
+};
+//# sourceMappingURL=index9.mjs.map

package/index90.mjs

@@ -0,0 +1,151 @@
+import { jsxs as w, jsx as e } from "react/jsx-runtime";
+import { ActivityIcon as D } from "@photoroom/icons/lib/monochromes";
+import { clsx as u } from "./index296.mjs";
+import { useId as T, useState as q, useCallback as E, useMemo as G } from "react";
+import { cn as m } from "./index7.mjs";
+import { LazyImage as H } from "./index91.mjs";
+import { ProBadge as J } from "./index167.mjs";
+import { Avatar as K } from "./index151.mjs";
+const v = /* @__PURE__ */ new Set(), _ = ({
+  variant: d = "default",
+  label: r,
+  previewUrl: t,
+  icon: h,
+  aspectRatio: N = "1/1",
+  previewFit: z = "contain",
+  constrain: i = "height",
+  showLabel: b,
+  showCheckerboard: k,
+  showProBadge: j = !1,
+  labelClassName: I,
+  customBadge: n,
+  avatar: c,
+  loading: o,
+  onLoad: s,
+  error: a,
+  children: g,
+  backgroundClassName: L,
+  ...p
+}) => {
+  const x = T(), [l, A] = q(
+    () => o && !!t && !v.has(t)
+  ), P = E(() => {
+    t && (v.add(t), A(!1), s == null || s());
+  }, [t, s]), { isLoading: C, showLoading: f, showIcon: F, showPreview: M, showAvatar: S } = G(() => ({
+    isLoading: o || l,
+    showLoading: !a && (o || l),
+    showIcon: !a && !t,
+    showPreview: !a && !!t,
+    showAvatar: !a && !!c
+  }), [c, a, l, o, t]);
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      className: m({
+        "w-max max-w-full": i === "height",
+        "w-full": i === "width",
+        "pt-2": d === "stack"
+      }),
+      children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            ...p,
+            "aria-labelledby": b ? x : void 0,
+            type: "button",
+            className: u(
+              "group relative block appearance-none",
+              "rounded-400 outline-none",
+              "*:select-none",
+              {
+                [u(
+                  "before:absolute before:inset-x-3 before:-top-2 before:content-['']",
+                  "before:h-6 before:w-[calc(100%-24px)]",
+                  "before:rounded-inherit before:bg-misc-stack-layer-2",
+                  "before:duration-800 before:transition-opacity",
+                  "after:absolute after:inset-x-1.5 after:-top-1 after:content-['']",
+                  "after:h-6 after:w-[calc(100%-12px)]",
+                  "after:rounded-inherit after:bg-misc-stack-layer-1",
+                  "after:duration-800 after:transition-opacity",
+                  {
+                    "before:opacity-0 after:opacity-0": f,
+                    "before:opacity-100 after:opacity-100": !f
+                  }
+                )]: d === "stack"
+              },
+              p.className
+            ),
+            disabled: C,
+            children: /* @__PURE__ */ w(
+              "div",
+              {
+                className: m(
+                  "relative z-[1] overflow-hidden",
+                  "flex items-center justify-center",
+                  "rounded-500 bg-surface-high",
+                  "group-focus-visible:ring-accent-alpha-5 group-focus-visible:misc-border-size-focus-ring",
+                  "transition-all interaction-transition-type-1",
+                  "after:absolute after:inset-0 after:rounded-inherit after:border-misc-border after:content-[''] after:misc-border-size-default",
+                  "group-focus-active:after:bg-misc-visual-down group-hover:after:bg-misc-visual-hover group-focus-visible:after:bg-misc-visual-hover",
+                  "after:transition-all after:interaction-transition-type-1",
+                  {
+                    "h-[160px] min-w-[40px] max-w-[360px]": i === "height",
+                    "h-auto w-full": i === "width"
+                  },
+                  L
+                ),
+                style: {
+                  aspectRatio: N
+                },
+                children: [
+                  a,
+                  F && !!h && /* @__PURE__ */ e(h, { className: "h-6" }),
+                  M && /* @__PURE__ */ e(
+                    H,
+                    {
+                      className: u("h-full w-full", "*:block *:h-full *:w-full *:object-center", {
+                        "!bg-left-top bg-damier-checker bg-damier-large": k
+                      }),
+                      src: t,
+                      alt: "",
+                      title: r,
+                      onLoad: P,
+                      style: {
+                        objectFit: z
+                      },
+                      onContextMenu: (y) => y.preventDefault()
+                    }
+                  ),
+                  !a && n && /* @__PURE__ */ e("div", { className: "absolute right-1 top-1 z-[2]", children: n }),
+                  !a && !n && j && /* @__PURE__ */ e(J, { className: "absolute right-1 top-1 z-[2]" }),
+                  S && /* @__PURE__ */ e(K, { ...c, size: 24, className: "absolute bottom-2 right-2 z-[2]" }),
+                  f && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-[2] flex items-center justify-center", children: /* @__PURE__ */ e(D, { className: "text-white icon-size-800" }) }),
+                  !!g && /* @__PURE__ */ e("div", { className: "absolute inset-0 h-full w-full", children: g })
+                ]
+              }
+            )
+          }
+        ),
+        r != null && /* @__PURE__ */ e(
+          "div",
+          {
+            id: x,
+            className: m(
+              "mt-1",
+              "component-400 truncate text-center text-content-primary",
+              I,
+              {
+                "sr-only": !b
+              }
+            ),
+            children: r
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  _ as FeedTile
+};
+//# sourceMappingURL=index90.mjs.map

package/index91.mjs

@@ -0,0 +1,33 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useState as f } from "react";
+import { useInView as u } from "./index369.mjs";
+const w = ({
+  fadeInDuration: o = 300,
+  className: r,
+  style: s,
+  onLoad: e,
+  eagerLoad: t = !1,
+  ...a
+}) => {
+  const [d, n] = f(!1), [m, l] = u({
+    triggerOnce: !0
+  });
+  return /* @__PURE__ */ i("div", { ref: t ? void 0 : m, className: r, children: (t || l) && /* @__PURE__ */ i(
+    "img",
+    {
+      ...a,
+      onLoad: (c) => {
+        n(!0), e == null || e(c);
+      },
+      style: {
+        ...s,
+        opacity: d ? 1 : 0,
+        transition: `opacity ${o}ms linear`
+      }
+    }
+  ) });
+};
+export {
+  w as LazyImage
+};
+//# sourceMappingURL=index91.mjs.map

package/index92.mjs

@@ -0,0 +1,52 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { RenameIcon as c } from "@photoroom/icons/lib/monochromes";
+import { clsx as d } from "./index296.mjs";
+import { forwardRef as i } from "react";
+const l = i(
+  ({ className: o, image: e, children: n, ...s }, a) => /* @__PURE__ */ t(
+    "button",
+    {
+      ...s,
+      ref: a,
+      className: d(
+        "resize-none appearance-none",
+        "flex w-full items-center justify-between gap-2",
+        {
+          "p-1.5 pr-4": e,
+          "px-4 py-3": !e
+        },
+        "rounded-400 border border-misc-border outline-none",
+        "hover:bg-background-subdued-hover active:bg-background-subdued-down",
+        "focus-visible:bg-background-subdued-hover focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "component-500 text-left placeholder-neutral-6 [word-break:break-word]",
+        "transition duration-200",
+        o
+      ),
+      children: [
+        !!e && /* @__PURE__ */ r(
+          "img",
+          {
+            src: e,
+            alt: "",
+            draggable: "false",
+            className: "h-8 w-8 shrink-0 select-none rounded-300 object-cover"
+          }
+        ),
+        /* @__PURE__ */ r("span", { className: "grow", children: n }),
+        /* @__PURE__ */ r(
+          c,
+          {
+            className: "pointer-events-none h-5 w-5 shrink-0 text-content-accent",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  )
+);
+l.displayName = "Prompt";
+export {
+  l as Prompt
+};
+//# sourceMappingURL=index92.mjs.map

package/index93.mjs

@@ -0,0 +1,28 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { SparklesIcon as a } from "@photoroom/icons/lib/monochromes";
+import { clsx as c } from "./index296.mjs";
+import { forwardRef as i } from "react";
+const d = i(
+  ({ children: t, className: o, ...n }, r) => /* @__PURE__ */ s(
+    "button",
+    {
+      ref: r,
+      ...n,
+      className: c(
+        "flex w-full items-center rounded-400 bg-background-accent-subdued p-3 hover:bg-background-accent-subdued-hover active:bg-background-accent-subdued-down",
+        "outline-none transition-all focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring",
+        "disabled:opacity-30",
+        o
+      ),
+      children: [
+        /* @__PURE__ */ e(a, { className: "h-4 w-4 flex-shrink-0 text-content-accent", "aria-hidden": !0 }),
+        /* @__PURE__ */ e("span", { className: "component-500 text-left text-to-leading-500", children: t })
+      ]
+    }
+  )
+);
+d.displayName = "PromptSuggestion";
+export {
+  d as PromptSuggestion
+};
+//# sourceMappingURL=index93.mjs.map

package/index94.mjs

@@ -0,0 +1,59 @@
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import { PictureIcon as l } from "@photoroom/icons/lib/monochromes";
+import { clsx as t } from "./index296.mjs";
+const f = ({
+  type: c = "prompt",
+  image: n,
+  icon: o = l,
+  label: s,
+  ...r
+}) => {
+  const a = c === "action" ? [
+    "hover:bg-background-accent-subdued-hover",
+    "active:bg-background-accent-subdued-down",
+    "focus-visible:bg-background-accent-subdued-hover"
+  ] : [
+    "hover:bg-background-subdued-hover",
+    "active:bg-background-subdued-down",
+    "focus-visible:bg-background-subdued-hover"
+  ], u = c === "action" ? "bg-background-accent-subdued text-content-accent" : "bg-background-subdued text-content-secondary", d = c === "action" ? "text-content-accent" : "text-content-primary", i = !n && o;
+  return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ b(
+    "button",
+    {
+      type: "button",
+      ...r,
+      className: t(
+        "flex w-full items-center gap-3 rounded-500 p-1",
+        ...a,
+        "outline-none transition-all focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring",
+        "disabled:opacity-30"
+      ),
+      children: [
+        n && /* @__PURE__ */ e(
+          "img",
+          {
+            className: "h-8 w-8 shrink-0 rounded-300 object-cover",
+            src: n,
+            alt: "",
+            draggable: !1
+          }
+        ),
+        i && /* @__PURE__ */ e(
+          "span",
+          {
+            className: t(
+              "flex h-8 w-8 shrink-0 items-center justify-center rounded-300",
+              u
+            ),
+            children: /* @__PURE__ */ e(o, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: t(d, "component-500 flex-1 truncate text-left"), children: s })
+      ]
+    }
+  ) });
+};
+export {
+  f as Suggestion
+};
+//# sourceMappingURL=index94.mjs.map

package/index95.mjs

@@ -0,0 +1,23 @@
+import { jsx as c } from "react/jsx-runtime";
+import { clsx as t } from "./index296.mjs";
+const r = ({ label: e, ...o }) => /* @__PURE__ */ c(
+  "button",
+  {
+    type: "button",
+    className: t(
+      "flex items-center justify-center",
+      "rounded-400 p-2 outline-none",
+      "component-500 bg-background-accent-subdued text-content-accent",
+      "hover:bg-background-accent-subdued-hover",
+      "focus-visible:bg-background-accent-subdued-hover focus-visible:ring focus-visible:ring-misc-focus-indicator",
+      "active:bg-background-accent-subdued-down",
+      "disabled:cursor-not-allowed disabled:opacity-30"
+    ),
+    ...o,
+    children: e
+  }
+);
+export {
+  r as TextSuggestion
+};
+//# sourceMappingURL=index95.mjs.map

package/index96.mjs

@@ -0,0 +1,53 @@
+import { jsxs as r, jsx as a, Fragment as d } from "react/jsx-runtime";
+import { InfoCircleIcon as n, ExclamationTriangleIcon as u } from "@photoroom/icons/lib/monochromes";
+import { cva as i } from "./index302.mjs";
+import { clsx as m } from "./index296.mjs";
+import { StandaloneLink as f } from "./index33.mjs";
+const p = i(
+  ["component-500 flex flex-row items-center gap-3 rounded-500 p-4", "text-content-primary"],
+  {
+    variants: {
+      type: {
+        default: "bg-background-subdued",
+        warning: "bg-background-spotlight",
+        critical: "bg-background-negative-subdued"
+      }
+    },
+    defaultVariants: { type: "default" }
+  }
+), g = i(["h-4 w-4 shrink-0"], {
+  variants: {
+    type: {
+      default: "text-content-subdued-primary",
+      warning: "text-content-subdued-primary",
+      critical: "text-content-negative"
+    }
+  },
+  defaultVariants: { type: "default" }
+}), w = ({ type: t = "default", className: c, label: o, link: e, ...s }) => {
+  const l = (() => {
+    switch (t) {
+      case "warning":
+        return n;
+      case "critical":
+        return u;
+      case "default":
+      default:
+        return n;
+    }
+  })();
+  return /* @__PURE__ */ r("div", { className: m(p({ type: t }), c), ...s, children: [
+    /* @__PURE__ */ a(l, { className: g({ type: t }) }),
+    /* @__PURE__ */ a("div", { className: "flex flex-1 items-center", children: /* @__PURE__ */ r("p", { className: "text-content-primary", children: [
+      o,
+      e && /* @__PURE__ */ r(d, { children: [
+        " ",
+        /* @__PURE__ */ a(f, { variant: "primary", href: e.href, children: e.label })
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  w as InfoBar
+};
+//# sourceMappingURL=index96.mjs.map