@photoroom/ui 0.1.1 → 0.1.2

package/index110.mjs

@@ -1,74 +0,0 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { cn as a } from "./index7.mjs";
-import { Label as d } from "./index114.mjs";
-import { Tooltip as p } from "./index200.mjs";
-import { InfoButton as f } from "./index17.mjs";
-import { StandaloneLink as h } from "./index33.mjs";
-const u = ({
-  image: o,
-  alt: n,
-  label: i,
-  title: r,
-  tooltip: l,
-  actions: c,
-  disabled: s,
-  className: m
-}) => /* @__PURE__ */ e(
-  d,
-  {
-    as: "fieldset",
-    label: i,
-    trailingElement: !!l && /* @__PURE__ */ e(p, { side: "top", withPortal: !1, content: l, className: "z-20 w-64", children: /* @__PURE__ */ e(f, { as: "span" }) }),
-    children: /* @__PURE__ */ t(
-      "div",
-      {
-        className: a(
-          "flex w-fit gap-4 rounded-500 border border-misc-border px-3 py-2",
-          {
-            "opacity-30": s
-          },
-          m
-        ),
-        children: [
-          /* @__PURE__ */ e(
-            "img",
-            {
-              src: o,
-              alt: n,
-              className: "h-16 w-16 shrink-0 rounded-400 border border-misc-border object-cover"
-            }
-          ),
-          /* @__PURE__ */ t("div", { className: "flex flex-col justify-center gap-1", children: [
-            /* @__PURE__ */ e("span", { className: "component-500 line-clamp-1", children: r }),
-            /* @__PURE__ */ e("div", { className: "flex gap-3", children: c })
-          ] })
-        ]
-      }
-    )
-  }
-), x = ({
-  className: o,
-  label: n,
-  onClick: i,
-  disabled: r
-}) => /* @__PURE__ */ e(
-  h,
-  {
-    as: "button",
-    disabled: r,
-    className: a(
-      "line-clamp-1 cursor-pointer text-left",
-      {
-        "cursor-not-allowed": r
-      },
-      o
-    ),
-    onClick: r ? void 0 : i,
-    children: n
-  }
-);
-u.Link = x;
-export {
-  u as ImageField
-};
-//# sourceMappingURL=index110.mjs.map

package/index111.mjs

@@ -1,192 +0,0 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { PictureMultipleIcon as H, ActivityIcon as M, RefreshIcon as T } from "@photoroom/icons/lib/monochromes";
-import { cva as g } from "./index302.mjs";
-import { clsx as b } from "./index296.mjs";
-import { useCallback as d } from "react";
-import { cn as W } from "./index7.mjs";
-import { DesignPreview as Z } from "./index50.mjs";
-import { useFileUploader as q } from "./index194.mjs";
-import { DropZoneAreaWrapper as E } from "./index190.mjs";
-import { Button as m } from "./index10.mjs";
-import { HiddenFileInput as G } from "./index193.mjs";
-const J = g(
-  [
-    "group relative w-full overflow-hidden rounded-500",
-    "border border-solid misc-border-size-default",
-    "bg-surface-default",
-    "outline-none transition-all",
-    "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring",
-    "focus-visible:border-content-accent focus-visible:bg-background-accent-subdued",
-    "aspect-[4/3]"
-  ],
-  {
-    variants: {
-      dragging: {
-        true: "border-content-accent bg-background-accent-subdued",
-        false: "border-misc-border"
-      },
-      interactive: {
-        true: "cursor-pointer",
-        false: "cursor-default"
-      },
-      disabled: {
-        true: "opacity-30",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      dragging: !1,
-      interactive: !0,
-      disabled: !1
-    }
-  }
-), Q = g(
-  [
-    "pointer-events-none absolute inset-[-1px] transition-[opacity,background-color]",
-    "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100"
-  ],
-  {
-    variants: {
-      error: {
-        true: "bg-black-alpha-3 group-hover:bg-black-alpha-3 group-focus-visible:bg-black-alpha-3 group-active:bg-black-alpha-4",
-        false: "bg-misc-visual-hover group-hover:bg-misc-visual-hover group-focus-visible:bg-misc-visual-hover group-active:bg-misc-visual-down"
-      }
-    },
-    defaultVariants: {
-      error: !1
-    }
-  }
-), R = ({ dropFileLabel: r }) => /* @__PURE__ */ e("div", { className: "absolute inset-0 flex overflow-hidden rounded-500 bg-surface-default", children: /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col items-center justify-center rounded-500 border border-content-accent bg-background-accent-subdued p-6", children: /* @__PURE__ */ e("p", { className: "component-500 whitespace-pre-wrap text-center text-content-accent", children: r }) }) }), S = ({
-  imageUrl: r,
-  isLoading: a = !1,
-  hasError: c = !1,
-  onClick: i,
-  onRetry: o,
-  onFileChange: h,
-  chooseImageLabel: y,
-  replaceImageLabel: x,
-  dropFileLabel: f,
-  className: k,
-  "data-testid": w,
-  disabled: t = !1
-}) => {
-  const {
-    isDragging: s,
-    inputRef: N,
-    handleChange: D,
-    handleDragEnter: I,
-    handleDragLeave: C,
-    handleDragOver: P,
-    handleDrop: z,
-    openFilePicker: v
-  } = q({
-    disabled: t,
-    onFileChange: h
-  }), l = d(() => {
-    t || a || (i ? i() : v());
-  }, [t, a, i, v]), O = d(
-    (n) => {
-      t || a || (n.key === "Enter" || n.key === " ") && (n.preventDefault(), l());
-    },
-    [t, a, l]
-  ), V = d(
-    (n) => {
-      n.stopPropagation(), o == null || o();
-    },
-    [o]
-  ), j = !t && !a, u = r, B = !a && !c, F = c && o, A = s, K = r ? x : y;
-  return /* @__PURE__ */ p("div", { className: "relative", children: [
-    /* @__PURE__ */ e(
-      E,
-      {
-        showOverlay: s,
-        onDragEnter: I,
-        onDragLeave: C,
-        onDragOver: P,
-        onDrop: z,
-        overlay: /* @__PURE__ */ e(R, { dropFileLabel: f }),
-        children: /* @__PURE__ */ p(
-          "div",
-          {
-            role: "button",
-            tabIndex: t || a ? void 0 : 0,
-            "aria-busy": a,
-            "aria-disabled": t || a,
-            className: W(
-              J({
-                dragging: s,
-                interactive: j,
-                disabled: t
-              }),
-              k
-            ),
-            onClick: l,
-            onKeyDown: O,
-            "data-testid": w,
-            children: [
-              u && /* @__PURE__ */ e(
-                "div",
-                {
-                  className: b(
-                    "pointer-events-none absolute inset-[-1px] overflow-hidden rounded-500",
-                    {
-                      "blur-[12px]": c
-                    }
-                  ),
-                  children: /* @__PURE__ */ e(
-                    Z,
-                    {
-                      as: "div",
-                      src: r ?? "",
-                      previewFit: "cover",
-                      autoRatio: !0,
-                      showCheckerboard: !0,
-                      className: "h-full w-full [&>div]:aspect-[4/3]"
-                    }
-                  )
-                }
-              ),
-              !u && /* @__PURE__ */ p("div", { className: "pointer-events-none absolute inset-0 rounded-500", "aria-hidden": "true", children: [
-                /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-500 bg-surface-default" }),
-                /* @__PURE__ */ e("div", { className: "opacity-6 absolute inset-0 rounded-500 bg-left-top bg-damier-checker bg-damier-large" })
-              ] }),
-              /* @__PURE__ */ e("div", { className: Q({ error: c }) }),
-              B && /* @__PURE__ */ e(
-                m,
-                {
-                  variant: "primary",
-                  icon: H,
-                  loading: a,
-                  className: b(
-                    "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
-                    u && "opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100"
-                  ),
-                  disabled: t,
-                  children: K
-                }
-              ),
-              A && /* @__PURE__ */ e("p", { className: "component-500 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-pre-wrap text-center text-content-accent", children: f }),
-              a && /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ e(M, { className: "text-white icon-size-800" }) }),
-              F && /* @__PURE__ */ e(
-                m,
-                {
-                  variant: "primary",
-                  icon: T,
-                  onClick: V,
-                  className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black-alpha-4 size-600 hover:bg-black-alpha-6 active:bg-black-alpha-6",
-                  "aria-label": "Retry"
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e(G, { ref: N, onChange: D })
-  ] });
-};
-S.displayName = "ImagePicker";
-export {
-  S as ImagePicker
-};
-//# sourceMappingURL=index111.mjs.map

package/index112.mjs

@@ -1,62 +0,0 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { Root as n } from "./index315.mjs";
-import { clsx as f } from "./index296.mjs";
-import { cn as c } from "./index7.mjs";
-import { InlineRadioGroupItem as d } from "./index358.mjs";
-import { Label as x } from "./index114.mjs";
-import { HelperText as g } from "./index109.mjs";
-import { Tooltip as b } from "./index200.mjs";
-import { InfoButton as I } from "./index17.mjs";
-const h = ({
-  variant: e,
-  label: m,
-  description: r,
-  tooltip: l,
-  isTooltipDisabled: t,
-  children: i,
-  className: a,
-  ...p
-}) => /* @__PURE__ */ s(
-  x,
-  {
-    as: "fieldset",
-    label: m,
-    trailingElement: !!l && /* @__PURE__ */ o(
-      b,
-      {
-        side: "top",
-        withPortal: !1,
-        content: l,
-        isTriggerDisabled: t,
-        className: "z-20 w-64",
-        children: /* @__PURE__ */ o(I, { as: "span" })
-      }
-    ),
-    className: f({
-      "!gap-3": e === "iconAndLabel"
-    }),
-    children: [
-      /* @__PURE__ */ o(
-        n,
-        {
-          ...p,
-          className: c(
-            "flex flex-row flex-wrap gap-x-4",
-            {
-              "gap-y-2": e === "label",
-              "gap-y-3": e === "iconAndLabel"
-            },
-            a
-          ),
-          children: i
-        }
-      ),
-      !!r && /* @__PURE__ */ o(g, { children: r })
-    ]
-  }
-);
-h.Item = d;
-export {
-  h as InlineRadioGroup
-};
-//# sourceMappingURL=index112.mjs.map

package/index113.mjs

@@ -1,29 +0,0 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { DoubleChevronVerticalIcon as s } from "@photoroom/icons/lib/monochromes";
-import { forwardRef as i } from "react";
-import { cn as l } from "./index7.mjs";
-const m = i(
-  ({ className: e, children: n, disabled: o, ...c }, t) => /* @__PURE__ */ a(
-    "button",
-    {
-      ref: t,
-      "aria-disabled": o,
-      className: l(
-        "flex h-8 items-center gap-1 rounded-400 pl-2 pr-1.5",
-        o && "cursor-not-allowed opacity-30",
-        !o && "cursor-pointer hover:bg-background-subdued-hover active:bg-background-subdued-down",
-        e
-      ),
-      ...c,
-      children: [
-        /* @__PURE__ */ r("span", { className: "component-400", children: n }),
-        /* @__PURE__ */ r(s, { className: "shrink-0 icon-size-200" })
-      ]
-    }
-  )
-);
-m.displayName = "InlineSelector";
-export {
-  m as InlineSelector
-};
-//# sourceMappingURL=index113.mjs.map

package/index114.mjs

@@ -1,20 +0,0 @@
-import { jsxs as s, jsx as n } from "react/jsx-runtime";
-import { clsx as m } from "./index296.mjs";
-const p = ({
-  as: r = "label",
-  label: e,
-  className: a,
-  children: c,
-  trailingElement: l,
-  ...t
-}) => /* @__PURE__ */ s(r, { ...t, className: m("flex flex-col gap-2", a), children: [
-  !!e && /* @__PURE__ */ s("div", { className: "flex items-center gap-0.5", children: [
-    /* @__PURE__ */ n("span", { className: "component-500 text-content-primary", children: e }),
-    l
-  ] }),
-  c
-] });
-export {
-  p as Label
-};
-//# sourceMappingURL=index114.mjs.map

package/index115.mjs

@@ -1,61 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { MenuCheckboxItem as C } from "./index379.mjs";
-import { SelectTrigger as M } from "./index116.mjs";
-import { useControlledState as k } from "./index290.mjs";
-import { DropdownMenu as w } from "./index39.mjs";
-import { MenuCheckboxGroup as x } from "./index331.mjs";
-const S = v(
-  ({
-    options: i,
-    value: n,
-    defaultValue: d = [],
-    onValueChange: m,
-    placeholder: s,
-    icon: a,
-    renderValue: o,
-    className: p,
-    disabled: u
-  }, f) => {
-    const [l, g] = k({
-      value: n,
-      defaultValue: d,
-      onValueChange: m
-    }), t = i.filter((e) => l.includes(e.value)), h = (e) => {
-      g(
-        l.includes(e) ? l.filter((b) => b !== e) : [...l, e]
-      );
-    }, c = t.length > 0 ? (o == null ? void 0 : o(t)) ?? t.map((e) => e.label).join(", ") : s;
-    return /* @__PURE__ */ r(
-      w,
-      {
-        triggerElement: /* @__PURE__ */ r(
-          M,
-          {
-            ref: f,
-            disabled: u,
-            icon: a,
-            label: typeof c == "string" ? c : void 0,
-            className: p
-          }
-        ),
-        children: /* @__PURE__ */ r(x, { children: i.map((e) => /* @__PURE__ */ r(
-          C,
-          {
-            checked: l.includes(e.value),
-            onCheckedChange: () => h(e.value),
-            description: e.description,
-            disabled: e.disabled,
-            children: e.label
-          },
-          e.value
-        )) })
-      }
-    );
-  }
-);
-S.displayName = "DropdownSelectionMenu";
-export {
-  S as DropdownSelectionMenu
-};
-//# sourceMappingURL=index115.mjs.map

package/index116.mjs

@@ -1,38 +0,0 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { ChevronDownShortIcon as a } from "@photoroom/icons/lib/monochromes";
-import { forwardRef as l } from "react";
-import { cn as m } from "./index7.mjs";
-const u = l(
-  ({ label: r, icon: o, additionalContent: t, className: n, disabled: i, ...c }, s) => /* @__PURE__ */ d(
-    "button",
-    {
-      ref: s,
-      type: "button",
-      disabled: i,
-      className: m(
-        "cursor-pointer outline-none",
-        "flex h-10 w-full items-center gap-2 px-3",
-        "rounded-500 border border-misc-border bg-surface-high",
-        "hover:border-neutral-4 focus-visible:border-content-accent",
-        "invalid:border-content-negative invalid:hover:border-content-negative invalid:focus-visible:border-content-negative",
-        "component-500 font-medium text-content-primary placeholder-neutral-6",
-        "focus-visible:ring-misc-focus-indicator-subdued",
-        "focus-visible:misc-border-size-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
-        "transition duration-200",
-        n
-      ),
-      ...c,
-      children: [
-        o,
-        /* @__PURE__ */ e("div", { className: "component-500 grow overflow-hidden truncate text-left text-content-primary", children: r }),
-        t,
-        /* @__PURE__ */ e(a, { className: "h-4 w-4 shrink-0 text-content-secondary" })
-      ]
-    }
-  )
-);
-u.displayName = "SelectTrigger";
-export {
-  u as SelectTrigger
-};
-//# sourceMappingURL=index116.mjs.map

package/index117.mjs

@@ -1,138 +0,0 @@
-import { jsx as f, jsxs as C } from "react/jsx-runtime";
-import { clsx as k } from "./index296.mjs";
-import { forwardRef as H, useRef as D, useMemo as M, useCallback as s, useImperativeHandle as _, useEffect as q } from "react";
-import { formatNumber as G, getNumberOfDecimals as J, roundAndClamp as L, parseNumeric as Q } from "./index357.mjs";
-import { useControlledState as W } from "./index290.mjs";
-import { Label as X } from "./index114.mjs";
-import { TextInput as Y } from "./index141.mjs";
-const Z = H(
-  ({
-    label: T,
-    density: m = "default",
-    value: n,
-    defaultValue: w = 0,
-    onValueChange: l,
-    unit: z,
-    defaultUnit: A,
-    onUnitChange: F,
-    unitOptions: d = [],
-    min: p,
-    max: v,
-    step: t,
-    shiftStepFactor: y = 10,
-    className: I,
-    leadingIcon: S,
-    isMixed: N,
-    mixedLabel: x,
-    ...g
-  }, V) => {
-    const c = D(n ?? w), i = M(() => d.length > 1, [d]), [h, E] = W({
-      value: z,
-      defaultValue: A ?? d[0],
-      onValueChange: F
-    }), u = s(
-      (e, r) => r ? x ?? "--" : typeof e > "u" ? "" : G(e, {
-        decimals: J(t ?? 0),
-        unit: i ? void 0 : h
-      }),
-      [i, t, h, x]
-    ), b = s(
-      (e, r = 0) => {
-        const o = Q(e);
-        return typeof o > "u" ? void 0 : L(o + r, { min: p, max: v, step: t });
-      },
-      [v, p, t]
-    ), a = D(null);
-    _(V, () => a.current, []), q(() => {
-      a.current && typeof n < "u" && (a.current.value = u(n, N), c.current = n);
-    }, [u, a, n, N]);
-    const K = s((e) => {
-      const r = e.currentTarget, o = parseFloat(e.target.value);
-      r.value = isNaN(o) ? c.current.toString() : o.toString(), r.type = "number", r.select();
-    }, []), R = s(
-      (e) => {
-        const r = e.currentTarget, o = b(r.value) ?? c.current;
-        c.current = o, r.type = "text", r.value = u(o), l == null || l(o);
-      },
-      [u, l, b]
-    ), U = s(
-      (e) => {
-        const r = e.currentTarget;
-        switch (e.key) {
-          // ESC restores previous value
-          case "Escape":
-            e.stopPropagation(), r.value = "", r.blur();
-            break;
-          // ENTER applies current value
-          case "Enter":
-            e.stopPropagation(), r.blur();
-            break;
-          case "ArrowUp":
-          case "ArrowDown": {
-            e.preventDefault();
-            const o = e.code === "ArrowDown" ? -1 : 1, j = e.shiftKey ? y : 1, B = (t ?? 1) * j * o, P = b(r.value, B) ?? c.current;
-            r.value = P.toString();
-            break;
-          }
-        }
-      },
-      [t, y, b]
-    );
-    return /* @__PURE__ */ f(X, { label: T, className: I, children: /* @__PURE__ */ C("div", { className: "flex w-full", children: [
-      /* @__PURE__ */ f(
-        Y,
-        {
-          ref: a,
-          ...g,
-          min: p,
-          max: v,
-          step: t,
-          density: m,
-          type: "text",
-          defaultValue: u(w),
-          onFocus: K,
-          onBlur: R,
-          onKeyDown: U,
-          inputMode: "numeric",
-          pattern: "[\\d\\-\\.]*",
-          wrapperClassName: "w-full grow",
-          leadingIcon: S,
-          className: k({
-            "relative !rounded-r-none hover:z-[1] focus-visible:z-[1]": i
-          })
-        }
-      ),
-      i && /* @__PURE__ */ f(
-        "select",
-        {
-          value: h,
-          onChange: (e) => E(e.currentTarget.value),
-          disabled: g.disabled,
-          className: k(
-            "relative w-max shrink-0 appearance-none hover:z-[1] focus-visible:z-[1]",
-            "-ml-px py-0 outline-none",
-            "rounded-r-500 border border-misc-border-box bg-background-subdued",
-            "hover:bg-background-subdued-hover focus:bg-background-subdued-down focus-visible:bg-background-subdued-hover",
-            "hover:border-misc-border-box-hover focus:border-misc-border-box-down focus-visible:border-content-accent",
-            "focus-visible:ring-misc-focus-indicator",
-            "bg-[length:1rem_1rem] caret-content-secondary",
-            "component-500 text-content-secondary",
-            "placeholder-neutral-6",
-            "transition duration-200 focus-visible:ring-0",
-            {
-              "h-10 pl-3 pr-7": m === "default",
-              "h-8 pl-2.5 pr-[26px]": m === "compact",
-              "cursor-not-allowed opacity-50": g.disabled
-            }
-          ),
-          children: d.map((e) => /* @__PURE__ */ f("option", { value: e, children: e }, e))
-        }
-      )
-    ] }) });
-  }
-);
-Z.displayName = "NumberField";
-export {
-  Z as NumberField
-};
-//# sourceMappingURL=index117.mjs.map

package/index118.mjs

@@ -1,12 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Root as i } from "./index315.mjs";
-import { forwardRef as f } from "react";
-import { OptionGroupItem as a } from "./index400.mjs";
-import { Label as l } from "./index114.mjs";
-const r = f(({ className: t, label: m, ...p }, e) => /* @__PURE__ */ o(l, { label: m, className: t, children: /* @__PURE__ */ o(i, { ...p, className: "flex flex-col gap-2", ref: e }) }));
-r.displayName = "OptionGroup";
-r.Item = a;
-export {
-  r as OptionGroup
-};
-//# sourceMappingURL=index118.mjs.map