@photoroom/ui 0.1.1 → 0.1.2

package/index176.mjs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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