@photoroom/ui 0.1.1 → 0.1.2

package/index13.mjs

@@ -1,74 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { CrossIcon as t } from "@photoroom/icons/lib/monochromes";
-import { cva as s } from "./index302.mjs";
-import { forwardRef as u } from "react";
-const c = s(
-  ["inline-flex items-center justify-center rounded-full outline-none transition-all"],
-  {
-    variants: {
-      size: {
-        small: "size-300",
-        medium: "size-400"
-      },
-      variant: {
-        secondary: "bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down",
-        "on-dark": "bg-neutral-2 hover:bg-neutral-3 focus-visible:bg-neutral-3 focus-visible:ring focus-visible:ring-misc-white-focus-indicator active:bg-neutral-4",
-        "secondary-on-dark": "bg-background-white-subdued hover:bg-background-white-subdued-hover focus-visible:bg-background-white-subdued-hover focus-visible:ring focus-visible:ring-misc-white-focus-indicator active:bg-background-white-subdued-down"
-      },
-      disabled: {
-        true: "opacity-30"
-      }
-    },
-    compoundVariants: [
-      { variant: "secondary", disabled: !0, class: "!bg-background-subdued" },
-      { variant: "on-dark", disabled: !0, class: "!bg-neutral-2" },
-      {
-        variant: "secondary-on-dark",
-        disabled: !0,
-        class: "!bg-background-white-subdued"
-      }
-    ],
-    defaultVariants: {
-      size: "medium",
-      variant: "secondary",
-      disabled: !1
-    }
-  }
-), b = s("", {
-  variants: {
-    variant: {
-      secondary: "text-content-primary",
-      "on-dark": "text-content-primary",
-      "secondary-on-dark": "text-content-white-primary"
-    },
-    size: {
-      small: "icon-size-300",
-      medium: "icon-size-400"
-    }
-  },
-  defaultVariants: {
-    variant: "secondary",
-    size: "medium"
-  }
-}), l = u(
-  ({ size: e, variant: i, onClick: n, className: o, ...a }, d) => /* @__PURE__ */ r(
-    "button",
-    {
-      ...a,
-      ref: d,
-      className: c({
-        size: e,
-        variant: i,
-        disabled: a.disabled,
-        class: o
-      }),
-      onClick: n,
-      children: /* @__PURE__ */ r(t, { className: b({ variant: i, size: e }) })
-    }
-  )
-);
-l.displayName = "ClearButton";
-export {
-  l as ClearButton
-};
-//# sourceMappingURL=index13.mjs.map

package/index130.mjs

@@ -1,60 +0,0 @@
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import { Root as x, Track as P, SliderThumb as k } from "./index380.mjs";
-import { clsx as m } from "./index296.mjs";
-import { useMemo as v } from "react";
-const u = (s, l) => (a) => 100 * (a - s) / (l - s), d = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"], $ = ({
-  onDoubleClickThumb: s,
-  onArrowKeyDown: l,
-  onArrowKeyUp: a,
-  ...t
-}) => {
-  const i = t.value || t.defaultValue, o = !t.min || t.min < 0 ? 0 : t.min, f = v(() => {
-    const e = (i == null ? void 0 : i[0]) || 0, n = Math.abs(u(t.min || 0, t.max || 100)(e));
-    if (o !== t.min) {
-      const c = Math.abs(u(t.min || 0, t.max || 100)(o)), b = n > c ? n - c : c - n, h = n > c ? c : n;
-      return {
-        width: `${b}%`,
-        left: `${h}%`
-      };
-    }
-    return {
-      width: `${Math.abs(n)}%`,
-      left: 0
-    };
-  }, [t.max, t.min, o, i]);
-  return /* @__PURE__ */ g(
-    x,
-    {
-      ...t,
-      className: m(
-        "relative flex h-5 w-full touch-none select-none items-center",
-        t.className
-      ),
-      onKeyDown: (e) => {
-        d.includes(e.key) && (l == null || l(e), e.stopPropagation());
-      },
-      onKeyUp: (e) => {
-        d.includes(e.key) && (a == null || a(e), e.stopPropagation());
-      },
-      children: [
-        /* @__PURE__ */ r(P, { className: "relative h-1 grow rounded-full bg-neutral-2", children: /* @__PURE__ */ r("div", { className: "absolute h-full rounded-full bg-content-accent", style: f }) }),
-        i == null ? void 0 : i.map((e, n) => /* @__PURE__ */ r(
-          k,
-          {
-            "aria-label": n.toString(),
-            className: m(
-              "block h-5 w-5 rounded-full border border-misc-border bg-white shadow-300 outline-none",
-              "transition-all focus-visible:border-content-accent focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring"
-            ),
-            onDoubleClick: s
-          },
-          n
-        ))
-      ]
-    }
-  );
-};
-export {
-  $ as Slider
-};
-//# sourceMappingURL=index130.mjs.map

package/index131.mjs

@@ -1,98 +0,0 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { clsx as O } from "./index296.mjs";
-import { useId as z } from "react";
-import { Slider as B } from "./index130.mjs";
-import { NumberField as H } from "./index117.mjs";
-import { useControlledState as P } from "./index290.mjs";
-import { Tooltip as q } from "./index200.mjs";
-import { InfoButton as A } from "./index17.mjs";
-import { HelperText as E } from "./index109.mjs";
-const Y = ({
-  value: g,
-  defaultValue: c = 0,
-  onValueChange: y,
-  onNumberFieldValueChange: i,
-  onDoubleClickThumb: r,
-  onPointerDown: N,
-  onPointerUp: I,
-  onArrowKeyDown: S,
-  onArrowKeyUp: j,
-  min: p = 0,
-  max: f = 100,
-  step: x = 1,
-  label: d,
-  description: h,
-  disabled: s,
-  tooltip: v,
-  className: u,
-  isMixed: a,
-  ...t
-}) => {
-  const [w, o] = P({
-    value: g,
-    defaultValue: c,
-    onValueChange: y
-  }), l = z();
-  return /* @__PURE__ */ m("div", { className: O("flex flex-col gap-0.5", s && "opacity-30", u), children: [
-    d && /* @__PURE__ */ m("div", { className: "flex items-center gap-0.5", children: [
-      /* @__PURE__ */ e(
-        "span",
-        {
-          id: l,
-          className: "component-500 flex min-h-[20px] items-center text-content-primary",
-          children: d
-        }
-      ),
-      !!v && /* @__PURE__ */ e(q, { side: "top", withPortal: !1, content: v, className: "z-20 w-64", children: /* @__PURE__ */ e(A, { as: "span" }) })
-    ] }),
-    /* @__PURE__ */ m("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ e(
-        B,
-        {
-          min: p,
-          max: f,
-          step: x,
-          value: [w],
-          onValueChange: ([n]) => o(n),
-          onPointerDown: N,
-          onPointerUp: I,
-          onArrowKeyDown: S,
-          onArrowKeyUp: j,
-          onDoubleClickThumb: () => {
-            o(c), r == null || r();
-          },
-          disabled: s,
-          "aria-labelledby": l,
-          className: "grow"
-        }
-      ),
-      /* @__PURE__ */ e(
-        H,
-        {
-          ...t,
-          min: p,
-          max: f,
-          step: x,
-          value: w,
-          onValueChange: (n) => {
-            o(n), i == null || i(n);
-          },
-          disabled: s,
-          density: "compact",
-          isMixed: a,
-          "aria-labelledby": l,
-          className: O("shrink-0", {
-            "w-16": !a && (!t.unitOptions || t.unitOptions.length <= 1),
-            "w-[72px]": a && (!t.unitOptions || t.unitOptions.length <= 1),
-            "w-[104px]": t.unitOptions && t.unitOptions.length > 1
-          })
-        }
-      )
-    ] }),
-    h && /* @__PURE__ */ e(E, { children: h })
-  ] });
-};
-export {
-  Y as SliderField
-};
-//# sourceMappingURL=index131.mjs.map

package/index132.mjs

@@ -1,27 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-import { clsx as d } from "./index296.mjs";
-import { forwardRef as f } from "react";
-import { TextArea as u } from "./index137.mjs";
-const x = f(({ value: r, onChange: e, disabled: t = !1, placeholder: o, className: a, maxHeight: n, ...s }, p) => /* @__PURE__ */ m(
-  u,
-  {
-    ref: p,
-    value: r,
-    onChange: (i) => e(i.target.value),
-    disabled: t,
-    placeholder: o,
-    className: d(
-      "!h-[34px] min-h-[34px] resize-none rounded-none border border-transparent px-0 py-1 text-base caret-content-accent hover:border-transparent focus-visible:border-transparent focus-visible:ring-transparent",
-      n && "overflow-y-auto",
-      a
-    ),
-    autosized: !0,
-    minRows: 1,
-    ...s
-  }
-));
-x.displayName = "StandardInputTextPrompt";
-export {
-  x as StandardInputTextPrompt
-};
-//# sourceMappingURL=index132.mjs.map

package/index133.mjs

@@ -1,74 +0,0 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { AddIcon as v, ActivityIcon as w, ClearMediumIcon as I } from "@photoroom/icons/lib/monochromes";
-import { clsx as i } from "./index296.mjs";
-import { forwardRef as y } from "react";
-import { DropZone as j } from "./index105.mjs";
-import { OptionalImagePromptButton as z } from "./index381.mjs";
-const C = ({
-  className: e,
-  children: r,
-  onDismiss: l,
-  dismissLabel: n = "Dismiss",
-  ...o
-}) => /* @__PURE__ */ t("div", { ...o, className: i("relative h-20 w-20", e), children: /* @__PURE__ */ s(
-  "div",
-  {
-    className: i(
-      "h-full w-full overflow-hidden rounded-400",
-      "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border-neutral-alpha-4 after:content-[''] after:misc-border-size-default"
-    ),
-    children: [
-      r,
-      !!l && /* @__PURE__ */ t(
-        "button",
-        {
-          "aria-label": n,
-          onClick: l,
-          className: "absolute -right-2 -top-2 z-[1] flex size-6 items-center justify-center rounded-full bg-background-default",
-          children: /* @__PURE__ */ t(I, { className: "shrink-0 text-content-white-primary-inverted icon-size-400" })
-        }
-      )
-    ]
-  }
-) }), k = ({
-  image: e,
-  onDismiss: r,
-  removeLabel: l
-}) => /* @__PURE__ */ t(C, { className: "h-20", onDismiss: r, dismissLabel: l, children: e.isLoading ? /* @__PURE__ */ t("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ t(w, { className: "text-content-accent icon-size-500" }) }) : /* @__PURE__ */ t("img", { className: "h-full w-full object-contain", src: e.base64, alt: e.name }) }), D = y(
-  ({ images: e, onImageAdd: r, onImageRemove: l, limit: n, dropZoneLabel: o, removeLabel: h, className: u, ...p }, x) => {
-    const d = typeof n > "u" || n > 1, N = typeof n < "u" && e.length >= n, g = (a) => {
-      if (n && e.length + a.length > n) {
-        const b = n - e.length, f = new DataTransfer();
-        for (let c = 0; c < Math.min(a.length, b); c++) {
-          const m = a[c];
-          m && f.items.add(m);
-        }
-        r(f.files);
-      } else
-        r(a);
-    };
-    return /* @__PURE__ */ s("div", { ref: x, className: i("flex flex-col gap-4", u), ...p, children: [
-      !e.length && /* @__PURE__ */ t(j, { multiple: d, onFileChange: g, className: "w-full", children: /* @__PURE__ */ s("div", { className: "component-500 flex h-[78px] items-center justify-center gap-2 text-content-secondary", children: [
-        /* @__PURE__ */ t(v, { className: "shrink-0 icon-size-500" }),
-        /* @__PURE__ */ t("span", { children: o })
-      ] }) }),
-      e.length > 0 && /* @__PURE__ */ s("div", { className: "flex flex-wrap gap-4", children: [
-        e.map((a) => /* @__PURE__ */ t(
-          k,
-          {
-            image: a,
-            onDismiss: () => l(a.name),
-            removeLabel: h
-          },
-          a.name
-        )),
-        d && !N && /* @__PURE__ */ t(z, { limit: n, onImageAdd: r, disabled: !1 })
-      ] })
-    ] });
-  }
-);
-D.displayName = "StandardInputImagePrompt";
-export {
-  D as StandardInputImagePrompt
-};
-//# sourceMappingURL=index133.mjs.map

package/index134.mjs

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

package/index135.mjs

@@ -1,36 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { SwitchGroupItem as s } from "./index367.mjs";
-import { Label as a } from "./index114.mjs";
-import { Tooltip as n } from "./index200.mjs";
-import { InfoButton as p } from "./index17.mjs";
-const l = ({
-  label: o,
-  tooltip: r,
-  children: e,
-  isTooltipDisabled: i,
-  ...m
-}) => /* @__PURE__ */ t(
-  a,
-  {
-    ...m,
-    as: "fieldset",
-    label: o,
-    trailingElement: !!r && /* @__PURE__ */ t(
-      n,
-      {
-        side: "top",
-        withPortal: !1,
-        content: r,
-        isTriggerDisabled: i,
-        className: "z-20 w-64",
-        children: /* @__PURE__ */ t(p, { as: "span" })
-      }
-    ),
-    children: e
-  }
-);
-l.Item = s;
-export {
-  l as SwitchGroup
-};
-//# sourceMappingURL=index135.mjs.map

package/index136.mjs

@@ -1,76 +0,0 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { CrossIcon as p } from "@photoroom/icons/lib/monochromes/CrossIcon";
-import { cva as m } from "./index302.mjs";
-import { clsx as b } from "./index296.mjs";
-import { forwardRef as f, Children as h } from "react";
-import { cn as g } from "./index7.mjs";
-import { Label as w } from "./index114.mjs";
-import { HelperText as v } from "./index109.mjs";
-const x = m(
-  [
-    "group w-full appearance-none rounded-500 border border-misc-border bg-surface-high text-500 font-medium text-content-primary placeholder-content-tertiary",
-    "outline-none transition duration-200 focus-within:misc-border-size-focus-ring disabled:cursor-not-allowed disabled:opacity-50"
-  ],
-  {
-    variants: {
-      invalid: {
-        true: [
-          "border border-content-negative caret-black",
-          "focus-within:border-content-negative focus-within:ring-background-negative-subdued-down"
-        ],
-        false: [
-          "border caret-content-accent",
-          "group-hover:placeholder-shown:border-neutral-4",
-          "peer-focus-within:hover:border-content-accent",
-          "focus-within:border-content-accent focus-within:ring-misc-focus-indicator-subdued"
-        ]
-      }
-    },
-    defaultVariants: {
-      invalid: !1
-    }
-  }
-), y = ({ label: t, helper: o, invalid: n, className: d, onClear: a, children: i, ...r }, s) => {
-  const l = h.count(i) > 0, u = (!!r.value || l) && a;
-  return /* @__PURE__ */ c("div", { className: "relative space-y-2", children: [
-    t && /* @__PURE__ */ e(w, { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: t }),
-    /* @__PURE__ */ e("div", { className: x({ invalid: n }), children: /* @__PURE__ */ c("div", { className: "flex w-full flex-wrap items-center gap-1 p-2", children: [
-      i,
-      /* @__PURE__ */ e(
-        "input",
-        {
-          type: "text",
-          ref: s,
-          ...r,
-          className: g([
-            "peer w-full appearance-none rounded-500 border-transparent bg-surface-high p-0 px-0.5 caret-content-accent",
-            "outline-none transition duration-200 focus-visible:border-transparent focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
-            "component-500 leading-none text-content-primary placeholder-content-tertiary",
-            d
-          ])
-        }
-      ),
-      u && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-3 top-2.5 h-fit w-fit", children: /* @__PURE__ */ e(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Clear all tags",
-          className: b(
-            "rounded-full bg-neutral-6 p-0.5",
-            "disabled:cursor-not-allowed disabled:opacity-50"
-          ),
-          onClick: a,
-          disabled: r.disabled,
-          children: /* @__PURE__ */ e(p, { className: "h-3 w-3 text-content-white-primary", "aria-hidden": "true" })
-        }
-      ) })
-    ] }) }),
-    o && /* @__PURE__ */ e(v, { invalid: n, children: o })
-  ] });
-}, N = f(y);
-N.displayName = "TagField";
-export {
-  N as TagField,
-  y as TagFieldComponent
-};
-//# sourceMappingURL=index136.mjs.map

package/index137.mjs

@@ -1,31 +0,0 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import { cn as f } from "./index7.mjs";
-import { TextAreaAutosize as u } from "./index346.mjs";
-import { Label as p } from "./index114.mjs";
-import { HelperText as x } from "./index109.mjs";
-const g = b(
-  ({ label: s, helper: r, className: c, invalid: e, trailingElement: a, autosized: d, style: t, ...i }, m) => {
-    const n = f(
-      "w-full rounded-500 bg-surface-high",
-      "outline-none transition duration-200",
-      "component-500 text-content-primary",
-      "placeholder:text-content-tertiary",
-      "disabled:cursor-not-allowed disabled:opacity-30",
-      {
-        "border-content-negative focus-visible:border-content-negative focus-visible:ring-0": e,
-        "border-misc-border-box focus-visible:border-content-accent focus-visible:ring focus-visible:ring-misc-focus-indicator-subdued": !e
-      },
-      c
-    );
-    return /* @__PURE__ */ l(p, { label: s, trailingElement: a, children: [
-      d ? /* @__PURE__ */ o(u, { ...i, className: n, style: t }) : /* @__PURE__ */ o("textarea", { ...i, ref: m, className: n, style: t }),
-      r && /* @__PURE__ */ o(x, { invalid: e, children: r })
-    ] });
-  }
-);
-g.displayName = "TextArea";
-export {
-  g as TextArea
-};
-//# sourceMappingURL=index137.mjs.map

package/index138.mjs

@@ -1,29 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { clsx as n } from "./index296.mjs";
-import { forwardRef as i } from "react";
-import { TextAreaAutosize as p } from "./index346.mjs";
-const a = i(
-  ({ className: o, ...r }, e) => /* @__PURE__ */ t(
-    p,
-    {
-      ref: e,
-      className: n(
-        "component-500 rounded-500 bg-black-alpha-8",
-        "max-w-full",
-        "text-content-white-primary placeholder-content-white-secondary",
-        "px-[10px] py-[9px]",
-        "backdrop-blur-2xl",
-        "!border-none !ring-0",
-        // !important is needed to override react-textarea-autosize styles
-        o
-      ),
-      minRows: 1,
-      ...r
-    }
-  )
-);
-a.displayName = "TextEditionBox";
-export {
-  a as TextEditionBox
-};
-//# sourceMappingURL=index138.mjs.map

package/index139.mjs

@@ -1,19 +0,0 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { Label as n } from "./index114.mjs";
-import { TextInput as x } from "./index141.mjs";
-import { HelperText as p } from "./index109.mjs";
-const a = l(
-  ({ label: o, helper: r, className: i, ...t }, m) => {
-    const { invalid: d } = t;
-    return /* @__PURE__ */ f(n, { label: o, className: i, children: [
-      /* @__PURE__ */ e(x, { ref: m, ...t }),
-      r && /* @__PURE__ */ e(p, { invalid: d, children: r })
-    ] });
-  }
-);
-a.displayName = "TextField";
-export {
-  a as TextField
-};
-//# sourceMappingURL=index139.mjs.map

package/index14.mjs

@@ -1,26 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { CrossIcon as n } from "@photoroom/icons/lib/monochromes";
-import { clsx as o } from "./index296.mjs";
-const a = ({ className: t, ...r }) => /* @__PURE__ */ e(
-  "button",
-  {
-    tabIndex: -1,
-    ...r,
-    className: o(
-      "outline-none focus-visible:ring-0",
-      "h-6 w-6",
-      "flex items-center justify-center",
-      "rounded-full bg-neutral-6",
-      "border-4 border-transparent bg-clip-padding",
-      // expand click zone by 4px
-      "text-content-white-primary",
-      "disabled:pointer-events-none disabled:opacity-30",
-      t
-    ),
-    children: /* @__PURE__ */ e(n, { className: "h-3 w-3" })
-  }
-);
-export {
-  a as FieldClearButton
-};
-//# sourceMappingURL=index14.mjs.map