@photoroom/ui 0.1.1 → 0.1.2

package/index10.mjs

@@ -1,95 +0,0 @@
-import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import { ActivityIcon as u } from "@photoroom/icons/lib/monochromes";
-import { clsx as p } from "./index296.mjs";
-import { forwardRef as V } from "react";
-import { cn as d, isValidComponent as f } from "./index7.mjs";
-import { iconOnlyVariants as h, innerVariants as b, labelTextVariant as y, buttonVariants as B, getButtonLayout as I, TEXT_TO_LEADING_REGISTRY as j } from "./index298.mjs";
-const E = V(
-  ({
-    as: n = "button",
-    type: l,
-    className: i,
-    loading: t = !1,
-    variant: v = "accent",
-    size: s = "medium",
-    density: c = "spacious",
-    stacked: w,
-    children: r,
-    icon: e,
-    ...N
-  }, T) => {
-    const m = I({ icon: e, children: r, stacked: w });
-    return /* @__PURE__ */ o(
-      n,
-      {
-        ref: T,
-        type: n === "button" ? l || "button" : l,
-        className: d(B({ variant: v, density: c, loading: t }), i),
-        "aria-busy": t,
-        ...N,
-        disabled: t || N.disabled,
-        children: [
-          m === "icon" && /* @__PURE__ */ a(
-            "div",
-            {
-              role: "presentation",
-              "aria-hidden": "true",
-              className: h({ size: s, density: c }),
-              children: t ? /* @__PURE__ */ a(u, { className: "icon-size-500" }) : f(e) ? /* @__PURE__ */ a(x, { as: e, size: s }) : e
-            }
-          ),
-          m === "icon-and-label" && /* @__PURE__ */ o("div", { className: b({ size: s, density: c, icon: !0 }), children: [
-            t && /* @__PURE__ */ a(u, { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 icon-size-500" }),
-            f(e) ? /* @__PURE__ */ a(
-              x,
-              {
-                as: e,
-                size: s,
-                className: p("shrink-0", {
-                  "pointer-events-none opacity-0": t
-                })
-              }
-            ) : e,
-            /* @__PURE__ */ a(
-              "span",
-              {
-                className: p(
-                  "max-w-full truncate",
-                  y({ size: s }),
-                  j[s],
-                  { "pointer-events-none opacity-0": t }
-                ),
-                children: r
-              }
-            )
-          ] }),
-          m === "label" && /* @__PURE__ */ o("div", { className: b({ size: s, density: c, icon: !1 }), children: [
-            t && /* @__PURE__ */ a(u, { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 icon-size-500" }),
-            /* @__PURE__ */ a(
-              "span",
-              {
-                className: p("max-w-full truncate", y({ size: s }), {
-                  "pointer-events-none opacity-0": t
-                }),
-                children: r
-              }
-            )
-          ] }),
-          m === "stack" && /* @__PURE__ */ o("div", { className: "flex min-w-[96px] flex-col items-center justify-center px-1 py-[10px]", children: [
-            f(e) ? /* @__PURE__ */ a(x, { as: e, size: s, className: "mb-[2px]" }) : e,
-            !!r && /* @__PURE__ */ a("div", { className: "component-400 max-w-full truncate", children: r })
-          ] })
-        ]
-      }
-    );
-  }
-), x = ({ as: n, size: l = "medium", className: i }) => n ? /* @__PURE__ */ a(n, { className: d({
-  small: "icon-size-400",
-  medium: "icon-size-500",
-  large: "icon-size-600"
-}[l], i), "aria-hidden": "true" }) : null;
-E.displayName = "Button";
-export {
-  E as Button
-};
-//# sourceMappingURL=index10.mjs.map

package/index100.mjs

@@ -1,69 +0,0 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { clsx as m } from "./index296.mjs";
-import { useId as d } from "react";
-import { Checkbox as p } from "./index99.mjs";
-import { Tooltip as x } from "./index200.mjs";
-import { InfoButton as f } from "./index17.mjs";
-const v = ({
-  label: i,
-  className: r,
-  description: n,
-  tooltip: a,
-  isTooltipDisabled: c,
-  ...o
-}) => {
-  const s = d(), t = o.id || s;
-  return /* @__PURE__ */ l(
-    "div",
-    {
-      className: m(
-        "flex items-start gap-3 content-to-edge-py-250",
-        {
-          "pointer-events-none opacity-30": o.disabled,
-          "cursor-pointer": !o.disabled
-        },
-        r
-      ),
-      children: [
-        /* @__PURE__ */ e(
-          p,
-          {
-            ...o,
-            id: t,
-            "aria-labelledby": `${t}-label`,
-            className: "component-500 text-content-primary"
-          }
-        ),
-        /* @__PURE__ */ l("div", { className: "flex grow flex-col", children: [
-          /* @__PURE__ */ l("div", { className: "flex items-center misc-hairline-spacing", children: [
-            /* @__PURE__ */ e(
-              "label",
-              {
-                id: `${t}-label`,
-                htmlFor: t,
-                className: "component-500 block text-content-primary",
-                children: i
-              }
-            ),
-            !!a && /* @__PURE__ */ e(
-              x,
-              {
-                side: "top",
-                withPortal: !1,
-                content: a,
-                className: "z-20 w-64",
-                isTriggerDisabled: c,
-                children: /* @__PURE__ */ e(f, { as: "span" })
-              }
-            )
-          ] }),
-          !!n && /* @__PURE__ */ e("p", { className: "component-400 text-content-secondary", children: n })
-        ] })
-      ]
-    }
-  );
-};
-export {
-  v as CheckboxField
-};
-//# sourceMappingURL=index100.mjs.map

package/index101.mjs

@@ -1,31 +0,0 @@
-import { jsxs as u, jsx as d } from "react/jsx-runtime";
-import { AddIcon as c } from "@photoroom/icons/lib/monochromes";
-import { clsx as o } from "./index296.mjs";
-import { useMemo as i, cloneElement as b } from "react";
-const a = ({ avatar: e, children: s, className: n, ...r }) => {
-  const t = i(() => e ? b(e, {
-    ...e.props,
-    className: o("pointer-events-none", e.props.className),
-    size: 16
-  }) : null, [e]);
-  return /* @__PURE__ */ u(
-    "span",
-    {
-      className: o(
-        "inline-flex cursor-pointer items-center gap-1 rounded-250 px-1.5 py-1 text-500 font-500 transition-all",
-        "bg-background/subdued bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down",
-        n
-      ),
-      ...r,
-      children: [
-        t,
-        s,
-        /* @__PURE__ */ d(c, { className: "h-4 w-4 text-content-tertiary" })
-      ]
-    }
-  );
-};
-export {
-  a as Chip
-};
-//# sourceMappingURL=index101.mjs.map

package/index102.mjs

@@ -1,78 +0,0 @@
-import { jsxs as i, jsx as f } from "react/jsx-runtime";
-import { forwardRef as L, useRef as d, useCallback as l, useImperativeHandle as N, Fragment as x } from "react";
-import { CodeInputField as C } from "./index351.mjs";
-import { CODE_LENGTH as r } from "./index103.mjs";
-const b = L(
-  ({ invalid: g, disabled: h, codeValues: u, onValuesChange: a, ...I }, A) => {
-    const p = d(null), n = d(Array(r).fill(null)), w = l(
-      (e) => {
-        var m;
-        e.preventDefault();
-        const t = e.clipboardData.getData("Text").replace(/[^a-zA-Z0-9]+/g, "").slice(0, r);
-        if (!t.trim())
-          return;
-        const o = t.split("").concat(Array(r - t.length).fill("")), c = o.findIndex((D) => D === ""), s = c !== -1 ? c : r - 1;
-        (m = n.current[s]) == null || m.focus(), a({
-          codeValues: o,
-          isLastInput: s === r - 1
-        });
-      },
-      [a]
-    ), y = l(
-      (e) => (t) => {
-        var s;
-        const o = t.target.value, c = [...u];
-        c[e] = o, a({
-          codeValues: c,
-          isLastInput: e === r - 1
-        }), o && e < r - 1 && n.current[e + 1] && ((s = n.current[e + 1]) == null || s.focus());
-      },
-      [u, a]
-    ), v = l(
-      (e) => () => {
-        var t;
-        e > 0 && ((t = n.current[e - 1]) == null || t.focus());
-      },
-      []
-    ), R = l(
-      (e) => () => {
-        var t;
-        e < r - 1 && ((t = n.current[e + 1]) == null || t.focus());
-      },
-      []
-    );
-    return N(A, () => ({
-      focus: () => {
-        var e;
-        (e = n.current[0]) == null || e.focus();
-      },
-      get element() {
-        return p.current;
-      }
-    })), /* @__PURE__ */ i("div", { ref: p, className: "flex items-center gap-2", ...I, onPaste: w, children: [
-      /* @__PURE__ */ f("div", { className: "component-strong-900 text-content-primary", children: "P -" }),
-      Array.from({ length: r }).map((e, t) => /* @__PURE__ */ i(x, { children: [
-        /* @__PURE__ */ f(
-          C,
-          {
-            ref: (o) => {
-              n.current[t] = o;
-            },
-            invalid: g,
-            disabled: h,
-            value: u[t],
-            onInput: y(t),
-            onLeftArrow: v(t),
-            onRightArrow: R(t)
-          }
-        ),
-        t === 2 && /* @__PURE__ */ f("div", { className: "component-strong-900 text-content-primary", children: "-" })
-      ] }, t))
-    ] });
-  }
-);
-b.displayName = "CodeInput";
-export {
-  b as CodeInput
-};
-//# sourceMappingURL=index102.mjs.map

package/index103.mjs

@@ -1,22 +0,0 @@
-import { useState as d, useMemo as m, useCallback as C } from "react";
-const u = 6, V = (e) => {
-  const [o, n] = d(Array(u).fill("")), c = m(() => o.every((t) => t !== ""), [o]), s = C(
-    ({ codeValues: t, isLastInput: i }) => {
-      n(t.slice(0, u)), i && setTimeout(() => {
-        var l;
-        (l = e == null ? void 0 : e.onAllInputsFilled) == null || l.call(e);
-      }, 0);
-    },
-    [e]
-  );
-  return {
-    codeValues: o,
-    canSubmit: c,
-    onValuesChange: s
-  };
-};
-export {
-  u as CODE_LENGTH,
-  V as useCodeInput
-};
-//# sourceMappingURL=index103.mjs.map

package/index104.mjs

@@ -1,98 +0,0 @@
-import { jsxs as s, jsx as d } from "react/jsx-runtime";
-import { clsx as a } from "./index296.mjs";
-import { forwardRef as g, useState as x } from "react";
-import { cn as v } from "./index7.mjs";
-import { Label as w } from "./index114.mjs";
-import { TextInput as N } from "./index141.mjs";
-import { HelperText as k } from "./index109.mjs";
-const y = g(
-  ({
-    label: b,
-    helper: c,
-    hasError: e = !1,
-    disabled: r = !1,
-    className: l,
-    postfix: f,
-    onFocus: i,
-    onBlur: n,
-    ...u
-  }, p) => {
-    const [o, m] = x(!1);
-    return /* @__PURE__ */ s(
-      w,
-      {
-        label: b,
-        className: a({
-          "opacity-30": r
-        }),
-        children: [
-          /* @__PURE__ */ s(
-            "div",
-            {
-              className: v(
-                "group flex w-full flex-nowrap",
-                "rounded-500 border",
-                "transition duration-200",
-                !r && {
-                  "border-misc-border-box": !e && !o,
-                  "border-content-negative": e,
-                  "misc-border-size-focus-ring": o,
-                  "ring-background-negative-subdued-down": e && o,
-                  "border-content-accent ring-misc-focus-indicator-subdued": o && !e,
-                  "hover:border-misc-border-box-hover": !e && !o
-                },
-                l
-              ),
-              children: [
-                /* @__PURE__ */ d(
-                  N,
-                  {
-                    ref: p,
-                    disabled: r,
-                    wrapperClassName: "w-full grow",
-                    className: "!rounded-r-none !border-0 !ring-0 focus-visible:!ring-0",
-                    onFocus: (t) => {
-                      m(!0), i == null || i(t);
-                    },
-                    onBlur: (t) => {
-                      m(!1), n == null || n(t);
-                    },
-                    invalid: e,
-                    ...u
-                  }
-                ),
-                /* @__PURE__ */ d(
-                  "div",
-                  {
-                    className: a(
-                      "flex items-center",
-                      "min-w-0 shrink-0 truncate",
-                      "border-l",
-                      "bg-background-subdued",
-                      "component-500 text-content-secondary",
-                      "h-10 pl-3 pr-3",
-                      "transition duration-200",
-                      !r && {
-                        "border-misc-border-box": !e && !o,
-                        "border-content-negative": e,
-                        "border-content-accent": o && !e,
-                        "group-hover:border-misc-border-box-hover": !e && !o
-                      }
-                    ),
-                    children: f
-                  }
-                )
-              ]
-            }
-          ),
-          !!c && /* @__PURE__ */ d(k, { invalid: e, children: c })
-        ]
-      }
-    );
-  }
-);
-y.displayName = "DomainField";
-export {
-  y as DomainField
-};
-//# sourceMappingURL=index104.mjs.map

package/index105.mjs

@@ -1,115 +0,0 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { UploadIcon as i } from "@photoroom/icons/lib/monochromes";
-import { clsx as o } from "./index296.mjs";
-import { useCallback as j } from "react";
-import { cn as w } from "./index7.mjs";
-import { useFileUploader as z } from "./index194.mjs";
-import { DropZoneAreaWrapper as C } from "./index190.mjs";
-import { HiddenFileInput as F } from "./index193.mjs";
-import { Button as I } from "./index10.mjs";
-const R = ({
-  onFileChange: s,
-  onClick: n,
-  multiple: d,
-  children: l,
-  title: a,
-  dropTitle: p,
-  density: r = "compact",
-  ctaLabel: u,
-  className: m,
-  testId: b,
-  autoFocus: f
-}) => {
-  const {
-    isDragging: g,
-    inputRef: h,
-    openFilePicker: c,
-    handleChange: v,
-    handleDragEnter: x,
-    handleDragLeave: y,
-    handleDragOver: D,
-    handleDrop: N
-  } = z({
-    onFileChange: s
-  }), k = j(() => {
-    if (typeof n == "function") {
-      n();
-      return;
-    }
-    c();
-  }, [n, c]);
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      className: w("interaction-transition-type-1", "relative", m),
-      "data-testid": b,
-      children: [
-        /* @__PURE__ */ e(
-          C,
-          {
-            showOverlay: g,
-            onDragEnter: x,
-            onDragLeave: y,
-            onDragOver: D,
-            onDrop: N,
-            overlay: /* @__PURE__ */ e("div", { className: "absolute inset-0 flex bg-white", children: /* @__PURE__ */ e(
-              "div",
-              {
-                className: o(
-                  "interaction-transition-type-1",
-                  "rounded-500 border border-content-accent",
-                  "flex flex-1 flex-col items-center justify-center p-6",
-                  "component-500 bg-background-accent-subdued text-content-accent"
-                ),
-                children: p
-              }
-            ) }),
-            children: /* @__PURE__ */ e(
-              "button",
-              {
-                type: "button",
-                onClick: k,
-                autoFocus: f,
-                className: o(
-                  "interaction-transition-type-1",
-                  "group/dropzone",
-                  {
-                    "rounded-area-500 bg-background-subdued": r === "regular",
-                    "rounded-500": r === "compact"
-                  },
-                  "border border-dashed border-neutral-alpha-4",
-                  "w-full select-none appearance-none",
-                  "hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down",
-                  "outline-none focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring",
-                  "disabled:pointer-events-none disabled:opacity-30"
-                ),
-                children: l || (r === "compact" ? /* @__PURE__ */ t("div", { className: "flex items-center justify-center gap-2 p-6", children: [
-                  /* @__PURE__ */ e(i, { className: "h-7 w-7 shrink-0 text-content-tertiary" }),
-                  /* @__PURE__ */ e("span", { className: "component-500 text-left text-content-secondary", children: a })
-                ] }) : /* @__PURE__ */ e("div", { className: "flex h-[240px] items-center justify-center p-4", children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center gap-4 pt-6", children: [
-                  /* @__PURE__ */ e(
-                    I,
-                    {
-                      as: "span",
-                      variant: "accent",
-                      icon: i,
-                      tabIndex: -1,
-                      className: o("group-active/dropzone:bg-accent-600", "pointer-events-none"),
-                      children: u
-                    }
-                  ),
-                  /* @__PURE__ */ e("span", { className: "component-500 text-center text-content-secondary", children: a })
-                ] }) }))
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ e(F, { multiple: d, onChange: v, ref: h })
-      ]
-    }
-  );
-};
-export {
-  R as DropZone
-};
-//# sourceMappingURL=index105.mjs.map

package/index106.mjs

@@ -1,26 +0,0 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { clsx as n } from "./index296.mjs";
-import { forwardRef as c } from "react";
-import { Tooltip as p } from "./index200.mjs";
-import { InfoButton as f } from "./index17.mjs";
-const d = c(
-  ({ children: r, className: s, tooltip: i, as: a = "label", isTooltipDisabled: l, ...o }, t) => /* @__PURE__ */ e("div", { className: "flex flex-col", children: /* @__PURE__ */ m("div", { className: n("flex min-h-[20px] items-center misc-hairline-spacing", s), children: [
-    /* @__PURE__ */ e(a, { ...o, ref: t, className: "component-500 text-content-primary", children: r }),
-    !!i && /* @__PURE__ */ e(
-      p,
-      {
-        side: "top",
-        withPortal: !1,
-        content: i,
-        className: "z-20 w-64",
-        isTriggerDisabled: l,
-        children: /* @__PURE__ */ e(f, { as: "span" })
-      }
-    )
-  ] }) })
-);
-d.displayName = "FieldLabel";
-export {
-  d as FieldLabel
-};
-//# sourceMappingURL=index106.mjs.map

package/index107.mjs

@@ -1,19 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Root as e } from "./index315.mjs";
-import { clsx as s } from "./index296.mjs";
-import { FolderListButton as l } from "./index383.mjs";
-import { FolderListItem as f } from "./index384.mjs";
-const o = ({ children: t, className: r, ...m }) => /* @__PURE__ */ i(
-  e,
-  {
-    ...m,
-    className: s("flex flex-col misc-hairline-spacing", r),
-    children: t
-  }
-);
-o.Button = l;
-o.Item = f;
-export {
-  o as FolderList
-};
-//# sourceMappingURL=index107.mjs.map

package/index108.mjs

@@ -1,39 +0,0 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { clsx as d } from "./index296.mjs";
-import { forwardRef as l } from "react";
-import { SwitchFieldIndicator as m } from "./index348.mjs";
-const a = l(
-  ({ label: o, weight: r, italic: i = !1, selected: t, ...s }, n) => /* @__PURE__ */ c(
-    "div",
-    {
-      ref: n,
-      ...s,
-      className: d(
-        "flex items-center justify-between",
-        "gap-2 rounded-500 px-4 py-2",
-        "cursor-pointer outline-none",
-        "hover:bg-background-subdued-hover active:bg-background-subdued-down",
-        "focus-visble:border-size-ring-3 focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring"
-      ),
-      children: [
-        /* @__PURE__ */ e(
-          "span",
-          {
-            style: {
-              fontWeight: r ?? "normal",
-              fontStyle: i ? "italic" : "normal"
-            },
-            className: "component-600",
-            children: o
-          }
-        ),
-        /* @__PURE__ */ e(m, { checked: t })
-      ]
-    }
-  )
-);
-a.displayName = "FontWeightSelectorItem";
-export {
-  a as FontWeightSelectorItem
-};
-//# sourceMappingURL=index108.mjs.map

package/index109.mjs

@@ -1,18 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { clsx as o } from "./index296.mjs";
-function m({ invalid: t, children: e }) {
-  return /* @__PURE__ */ n(
-    "span",
-    {
-      className: o(
-        "component-400 block",
-        t ? "text-content-negative" : "text-content-tertiary"
-      ),
-      children: e
-    }
-  );
-}
-export {
-  m as HelperText
-};
-//# sourceMappingURL=index109.mjs.map

package/index11.mjs

@@ -1,24 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as u, Children as r } from "react";
-import { cn as a } from "./index7.mjs";
-const e = u(
-  ({ children: o, className: t, ...s }, m) => /* @__PURE__ */ i(
-    "div",
-    {
-      ...s,
-      ref: m,
-      className: a(
-        "grid gap-2",
-        r.count(o) <= 2 && "grid-cols-2",
-        r.count(o) > 2 && "grid-cols-3",
-        t
-      ),
-      children: o
-    }
-  )
-);
-e.displayName = "ButtonCluster";
-export {
-  e as ButtonCluster
-};
-//# sourceMappingURL=index11.mjs.map