@photoroom/ui 0.1.1 → 0.1.3

package/index86.mjs

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

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

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

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

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

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

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

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

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

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

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

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