@photoroom/ui 0.1.1 → 0.1.2

package/index119.mjs

@@ -1,99 +0,0 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { ArrowRightIcon as x } from "@photoroom/icons/lib/monochromes";
-import { forwardRef as w, useCallback as y } from "react";
-import { cn as a } from "./index7.mjs";
-import { TextAreaAutosize as v } from "./index346.mjs";
-import { InputButton as k } from "./index18.mjs";
-import { RoundButton as N } from "./index30.mjs";
-const I = w(
-  ({
-    value: l,
-    onChange: i,
-    placeholder: s,
-    options: d = [],
-    leadingSlot: m,
-    onSubmit: o,
-    submitDisabled: c,
-    fieldDisabled: n,
-    className: u,
-    ...p
-  }, f) => {
-    const b = y(
-      (e) => {
-        i(e.target.value);
-      },
-      [i]
-    ), h = (e) => {
-      e.key === "Enter" && !e.shiftKey && o && !c && !n && (e.preventDefault(), o());
-    };
-    return /* @__PURE__ */ r(
-      "div",
-      {
-        role: "textbox",
-        className: a(
-          "flex min-h-[113px] flex-col",
-          "rounded-500 bg-surface-high",
-          "border transition-colors interaction-transition-type-1",
-          "border-misc-border-box [&:not(:focus-within):hover]:border-misc-border-box-hover",
-          "focus-within:border-content-accent focus-within:ring focus-within:ring-misc-focus-indicator-subdued",
-          u
-        ),
-        children: [
-          /* @__PURE__ */ t("div", { className: a("px-3 pt-3", n && "opacity-50"), children: /* @__PURE__ */ t(
-            v,
-            {
-              ref: f,
-              value: l,
-              onChange: b,
-              onKeyDown: h,
-              placeholder: s,
-              disabled: n,
-              minRows: 1,
-              maxRows: 6,
-              className: a(
-                "min-h-[54px] w-full p-0",
-                "border-none outline-none",
-                "component-500 text-content-primary",
-                "placeholder:text-content-tertiary",
-                "disabled:cursor-not-allowed",
-                "focus:ring-0"
-              ),
-              ...p
-            }
-          ) }),
-          /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-2 p-2", children: [
-            /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-2", children: [
-              m,
-              d.map((e, g) => /* @__PURE__ */ t(
-                k,
-                {
-                  label: e.label,
-                  leadingImage: e.leadingImage || "",
-                  onClick: e.onClick,
-                  density: "compact"
-                },
-                `${e.label}-${g}`
-              ))
-            ] }),
-            /* @__PURE__ */ t(
-              N,
-              {
-                icon: x,
-                size: "small",
-                onClick: o,
-                disabled: c,
-                "aria-label": "Submit",
-                className: "[&>button]:bg-background-default [&>button]:text-content-white-primary [&>button]:hover:bg-neutral-8 [&>button]:active:bg-background-default [&_svg]:-rotate-90"
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-);
-I.displayName = "PanelStandardInput";
-export {
-  I as PanelStandardInput
-};
-//# sourceMappingURL=index119.mjs.map

package/index12.mjs

@@ -1,30 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { cn as s, isValidComponent as u } from "./index7.mjs";
-const a = ({ as: e }) => e ? /* @__PURE__ */ r(e, { className: "icon-size-500", "aria-hidden": "true" }) : null, d = i(
-  ({ icon: e, className: n, ...o }, t) => /* @__PURE__ */ r(
-    "button",
-    {
-      type: "button",
-      ...o,
-      ref: t,
-      className: s(
-        "relative appearance-none",
-        "inline-flex items-center justify-center",
-        "box-border h-10 w-10 shrink-0",
-        "rounded-full bg-background-subdued outline-none",
-        "focus-visible:misc-border-size-focus-ring",
-        "hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down",
-        "truncate text-center text-content-primary",
-        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30",
-        n
-      ),
-      children: u(e) ? /* @__PURE__ */ r(a, { as: e }) : e
-    }
-  )
-);
-d.displayName = "CircularButton";
-export {
-  d as CircularButton
-};
-//# sourceMappingURL=index12.mjs.map

package/index120.mjs

@@ -1,50 +0,0 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { clsx as s } from "./index296.mjs";
-import { cn as d } from "./index7.mjs";
-const x = ({
-  title: o,
-  overline: a,
-  isSkeleton: r,
-  visual: n,
-  className: i,
-  children: c
-}) => /* @__PURE__ */ e(
-  "div",
-  {
-    "aria-busy": r,
-    className: d(
-      "h-[480px] rounded-area-500 bg-background-subdued p-3",
-      {
-        "animate-pulse": r
-      },
-      i
-    ),
-    children: /* @__PURE__ */ t(
-      "div",
-      {
-        className: s(
-          "flex h-full flex-col items-center justify-center gap-4 px-6 py-5",
-          "border-len relative rounded-500 border border-dashed border-neutral-4",
-          "transition-opacity interaction-transition-type-1",
-          {
-            "pointer-events-none opacity-0": r
-          }
-        ),
-        children: [
-          !!n && /* @__PURE__ */ e("figure", { role: "presentation", className: "relative h-auto w-56", children: n }),
-          /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-8", children: [
-            /* @__PURE__ */ t("div", { className: "text-center", children: [
-              /* @__PURE__ */ e("div", { className: "semi-bold component-semi-strong-700 text-content-primary", children: a }),
-              /* @__PURE__ */ e("div", { className: "component-500 mt-1 text-content-secondary", children: o })
-            ] }),
-            c
-          ] })
-        ]
-      }
-    )
-  }
-);
-export {
-  x as PhotoDropZone
-};
-//# sourceMappingURL=index120.mjs.map

package/index121.mjs

@@ -1,17 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Root as e } from "./index315.mjs";
-import { cn as s } from "./index7.mjs";
-import { PresetGroupItem as p } from "./index368.mjs";
-const i = ({ children: r, className: o, ...t }) => /* @__PURE__ */ m(
-  e,
-  {
-    ...t,
-    className: s("grid grid-cols-3 items-start gap-x-3 gap-y-4", o),
-    children: r
-  }
-);
-i.Item = p;
-export {
-  i as PresetGroup
-};
-//# sourceMappingURL=index121.mjs.map

package/index122.mjs

@@ -1,60 +0,0 @@
-import { jsx as o, jsxs as a } from "react/jsx-runtime";
-import { UploadIcon as i } from "@photoroom/icons/lib/monochromes";
-import { useMemo as u, cloneElement as f } from "react";
-import { cn as c } from "./index7.mjs";
-const v = ({
-  title: r,
-  className: s,
-  children: e,
-  onClick: n
-}) => {
-  const d = u(() => e ? f(e, {
-    ...e.props,
-    as: "div",
-    // render the Button as a non-interactive div element to avoid a11y violations
-    role: "presentation",
-    variant: "accent",
-    size: "medium",
-    density: "regular",
-    className: c("pointer-events-none w-full", e.props.className)
-  }) : null, [e]), l = (t) => {
-    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), n == null || n());
-  };
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      className: c(
-        "flex h-full w-full cursor-pointer",
-        "rounded-400 border border-content-accent bg-background-accent-subdued p-3",
-        "transition-all duration-150 ease-out",
-        "hover:border-content-accent hover:bg-background-accent-subdued-hover",
-        "active:border-content-accent active:bg-background-accent-subdued-down",
-        "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-misc-focus-indicator",
-        s
-      ),
-      onClick: n,
-      onKeyDown: l,
-      role: "button",
-      "aria-label": r,
-      tabIndex: 0,
-      children: /* @__PURE__ */ a("div", { className: "flex w-full flex-col gap-6", children: [
-        /* @__PURE__ */ o(
-          "div",
-          {
-            className: "flex flex-1 items-center justify-center rounded-200 border border-dashed border-accent-alpha-5",
-            "aria-hidden": "true",
-            children: /* @__PURE__ */ o(i, { className: "h-[48px] w-[48px] text-content-accent", "aria-hidden": "true" })
-          }
-        ),
-        /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ o("span", { className: "component-400 overflow-hidden text-ellipsis font-semibold text-content-accent", children: r }),
-          d
-        ] })
-      ] })
-    }
-  );
-};
-export {
-  v as QuickActionPhotoCard
-};
-//# sourceMappingURL=index122.mjs.map

package/index123.mjs

@@ -1,38 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Root as a } from "./index315.mjs";
-import { clsx as l } from "./index296.mjs";
-import { RadioGroupItem as f } from "./index356.mjs";
-import { Label as p } from "./index114.mjs";
-import { Tooltip as n } from "./index200.mjs";
-import { InfoButton as c } from "./index17.mjs";
-const d = ({
-  label: t,
-  tooltip: r,
-  isTooltipDisabled: e,
-  children: i,
-  className: m,
-  ...s
-}) => /* @__PURE__ */ o(
-  p,
-  {
-    as: "fieldset",
-    label: t,
-    trailingElement: !!r && /* @__PURE__ */ o(
-      n,
-      {
-        side: "top",
-        withPortal: !1,
-        content: r,
-        isTriggerDisabled: e,
-        className: "z-20 w-64",
-        children: /* @__PURE__ */ o(c, { as: "span" })
-      }
-    ),
-    children: /* @__PURE__ */ o(a, { ...s, className: l("flex flex-col", m), children: i })
-  }
-);
-d.Item = f;
-export {
-  d as RadioGroup
-};
-//# sourceMappingURL=index123.mjs.map

package/index124.mjs

@@ -1,35 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { clsx as c } from "./index296.mjs";
-import { cn as t } from "./index7.mjs";
-const u = ({ reaction: e, selected: r = !1, onClick: i }) => /* @__PURE__ */ o(
-  "button",
-  {
-    onClick: () => i(e),
-    tabIndex: 0,
-    type: "button",
-    className: c(
-      {
-        "bg-background-subdued-hover": r
-      },
-      "flex h-10 w-10 cursor-pointer flex-col items-center justify-center rounded-400 transition duration-200 hover:bg-background-subdued-hover",
-      "focus-visible:border-0 focus-visible:bg-background-subdued-hover focus-visible:outline-none focus-visible:ring-[4px] focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down"
-    ),
-    children: /* @__PURE__ */ o("span", { role: "img", className: "text-800 leading-6", children: e })
-  }
-), l = ({
-  onSelectReaction: e,
-  reactions: r,
-  className: i,
-  ...s
-}) => /* @__PURE__ */ o(
-  "div",
-  {
-    className: t("flex w-fit rounded-[12px] bg-surface-higher p-1 shadow-700", i),
-    ...s,
-    children: r.map((n) => /* @__PURE__ */ o(u, { reaction: n, onClick: e }, n))
-  }
-);
-export {
-  l as ReactionBar
-};
-//# sourceMappingURL=index124.mjs.map

package/index125.mjs

@@ -1,145 +0,0 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { ReactionAddIcon as x } from "@photoroom/icons/lib/monochromes";
-import { cva as b } from "./index302.mjs";
-import { cn as m } from "./index7.mjs";
-import { Tooltip as g } from "./index200.mjs";
-import { Avatar as v } from "./index151.mjs";
-const u = b(
-  [
-    "flex w-fit cursor-pointer items-center justify-center rounded-full border px-2 py-1",
-    "focus-visible:outline-none focus-visible:ring-[4px] focus-visible:ring-misc-focus-indicator"
-  ],
-  {
-    variants: {
-      selected: {
-        true: "border-content-accent bg-background-accent-subdued hover:bg-background-accent-subdued-hover focus-visible:bg-background-accent-subdued-hover active:bg-background-accent-subdued-down",
-        false: "border-transparent bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down"
-      }
-    },
-    defaultVariants: {
-      selected: !1
-    }
-  }
-), h = b(["component-semi-strong-500 px-1 leading-6"], {
-  variants: {
-    selected: {
-      true: "text-content-accent",
-      false: "text-content-primary"
-    }
-  },
-  defaultVariants: {
-    selected: !1
-  }
-}), I = ({
-  reactions: t,
-  selected: p = !1,
-  disabled: n = !1,
-  className: l,
-  onClick: o,
-  ...d
-}) => {
-  if (t.length === 0)
-    return /* @__PURE__ */ e(
-      "button",
-      {
-        onClick: o,
-        tabIndex: 0,
-        className: m(u({ selected: !1 }), l),
-        disabled: n,
-        ...d,
-        children: /* @__PURE__ */ e(x, { className: "text-content-primary icon-size-600" })
-      }
-    );
-  if (t.length === 1) {
-    const { reaction: s, users: r } = t[0], i = /* @__PURE__ */ a(
-      "button",
-      {
-        type: "button",
-        tabIndex: 0,
-        className: m(u({ selected: p }), l),
-        onClick: o,
-        disabled: n,
-        ...d,
-        children: [
-          /* @__PURE__ */ e("span", { className: "flex h-6 w-6 items-center justify-around", children: /* @__PURE__ */ e("span", { role: "img", className: "text-[19px] leading-6", children: s }) }),
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: h({
-                selected: p
-              }),
-              children: r.length
-            }
-          )
-        ]
-      }
-    );
-    return n ? i : /* @__PURE__ */ e(
-      g,
-      {
-        side: "top",
-        className: "scrollbar-none z-50 max-h-[440px] overflow-y-auto p-0",
-        sideOffset: 8,
-        content: /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-3 p-3 pb-4", children: [
-          /* @__PURE__ */ e("div", { className: "flex h-6 w-6 items-center justify-around", children: /* @__PURE__ */ e("span", { role: "img", className: "text-800 leading-6", children: s }) }),
-          /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: r.map((c) => /* @__PURE__ */ a("div", { className: "component-500 flex w-fit items-center gap-1", children: [
-            /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(
-              v,
-              {
-                size: 16,
-                imageSrc: c.imageSrc,
-                displayName: c.displayName,
-                customColor: c.customColor
-              }
-            ) }),
-            /* @__PURE__ */ e("div", { className: "min-w-0 grow overflow-hidden truncate text-content-white-primary", children: c.displayName })
-          ] }, c.id)) })
-        ] }),
-        children: i
-      }
-    );
-  }
-  const f = /* @__PURE__ */ e(
-    "button",
-    {
-      onClick: o,
-      tabIndex: 0,
-      className: m(u({ selected: !1 }), l),
-      disabled: n,
-      ...d,
-      children: /* @__PURE__ */ a(
-        "span",
-        {
-          className: h({
-            selected: !1
-          }),
-          children: [
-            /* @__PURE__ */ e("span", { className: "mr-[1px]", children: "+" }),
-            t.length
-          ]
-        }
-      )
-    }
-  );
-  return n ? f : /* @__PURE__ */ e(
-    g,
-    {
-      side: "top",
-      className: "scrollbar-none z-50 max-h-[440px] overflow-y-auto p-0",
-      sideOffset: 8,
-      isTriggerDisabled: n,
-      content: /* @__PURE__ */ e("div", { className: "flex items-center p-3 pb-4", children: t.map(({ reaction: s, users: r }, i) => /* @__PURE__ */ a("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ e("span", { className: "mr-0.5 text-[19px] leading-6", children: s }),
-          /* @__PURE__ */ e("span", { className: "component-semi-strong-500 text-content-white-primary", children: r.length })
-        ] }),
-        i !== t.length - 1 && /* @__PURE__ */ e("span", { className: "mx-1.5 h-5 w-[1px] rounded-full bg-white-alpha-3" })
-      ] }, s)) }),
-      children: f
-    }
-  );
-};
-export {
-  I as ReactionButton
-};
-//# sourceMappingURL=index125.mjs.map

package/index126.mjs

@@ -1,11 +0,0 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { SamplePickerItem as o } from "./index349.mjs";
-const m = ({ title: e, children: n }) => /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-3", children: [
-  !!e && /* @__PURE__ */ t("div", { className: "component-400 text-center text-content-secondary [&_b]:component-semi-strong-400 [&_strong]:component-semi-strong-400 [&_b]:text-content-primary [&_strong]:text-content-primary", children: e }),
-  /* @__PURE__ */ t("div", { className: "flex gap-2", children: n })
-] });
-m.Item = o;
-export {
-  m as SamplePicker
-};
-//# sourceMappingURL=index126.mjs.map

package/index127.mjs

@@ -1,95 +0,0 @@
-import { jsxs as $, jsx as m } from "react/jsx-runtime";
-import { forwardRef as A, useState as F, useCallback as h } from "react";
-import { SearchableSelectItem as p } from "./index341.mjs";
-import { SearchableSelectPrimitive as i } from "./index342.mjs";
-import { useFuse as T } from "./index292.mjs";
-import { useControlledState as q } from "./index290.mjs";
-const c = A(
-  ({
-    isSearchable: f = !0,
-    value: v,
-    defaultValue: b = "",
-    onValueChange: S,
-    searchPlaceholder: g,
-    searchNoResultLabel: n,
-    options: r = [],
-    rawOption: C = !1,
-    renderOption: x = (a) => a.label,
-    renderValue: y = (a) => a,
-    fuseOptions: O,
-    clearLabel: I,
-    listMinHeight: N,
-    side: j,
-    ...k
-  }, E) => {
-    const [a, P] = F(!1), [l, Q] = q({
-      value: v,
-      defaultValue: b,
-      onValueChange: S
-    }), { records: o, setQuery: t } = T(r, {
-      keys: ["label", "value"],
-      threshold: 0.2,
-      ...O,
-      // not overridable because it'll break RadixSelect
-      // (it needs some values to show like a native select, and at least the selected value)
-      matchAllOnEmptyQuery: !0,
-      useExtendedSearch: !0
-    }), V = h(
-      (e) => {
-        const u = r.find((s) => s.value === l);
-        if (e && u) {
-          const s = u.label ?? l;
-          t(`="${s}"|${e}`);
-        } else
-          t(e);
-      },
-      [t, l, r]
-    ), d = h(() => t(""), [t]);
-    return /* @__PURE__ */ $(
-      i,
-      {
-        ...k,
-        open: a,
-        isSearchable: f,
-        ref: E,
-        side: j,
-        value: l,
-        onValueChange: Q,
-        onOpenChange: (e) => {
-          P(e), d();
-        },
-        search: {
-          placeholder: g,
-          onChange: (e) => V(e.target.value),
-          onClear: d,
-          clearLabel: I
-        },
-        renderValue: y,
-        listMinHeight: N,
-        children: [
-          a && o.map(({ item: e }) => /* @__PURE__ */ m(
-            p,
-            {
-              value: e.value,
-              className: e.className,
-              selected: e.value === l,
-              badge: e.badge,
-              rawChildren: C,
-              disabled: e.disabled,
-              children: x(e)
-            },
-            e.value
-          )),
-          o.length === 0 && n && /* @__PURE__ */ m("div", { className: "component-500 flex h-10 items-center pe-3 ps-8 text-content-secondary", children: n })
-        ]
-      }
-    );
-  }
-);
-c.displayName = "SearchableSelect";
-c.Primitive = i;
-c.Item = p;
-export {
-  c as SearchableSelect
-};
-//# sourceMappingURL=index127.mjs.map

package/index128.mjs

@@ -1,26 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { SearchIcon as a } from "@photoroom/icons/lib/monochromes";
-import { clsx as t } from "./index296.mjs";
-import { TextInput as o } from "./index141.mjs";
-const c = (r) => /* @__PURE__ */ e(
-  o,
-  {
-    ...r,
-    type: "search",
-    leadingIcon: a,
-    borderLess: !0,
-    className: t(
-      r.invalid ? "bg-surface-high" : [
-        "bg-black-alpha-1",
-        "hover:border-transparent hover:bg-neutral-2",
-        "focus-visible:bg-surface-high"
-      ],
-      r.className
-    )
-  }
-);
-c.displayName = "SearchInput";
-export {
-  c as SearchInput
-};
-//# sourceMappingURL=index128.mjs.map

package/index129.mjs

@@ -1,41 +0,0 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { cva as d } from "./index302.mjs";
-import { forwardRef as b } from "react";
-import { Label as u } from "./index114.mjs";
-import { HelperText as f } from "./index109.mjs";
-const m = d(
-  "h-10 w-full appearance-none rounded-500 text-500 font-medium text-content-primary placeholder-content-tertiary outline-none transition transition-colors duration-200 focus-visible:misc-border-size-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
-  {
-    variants: {
-      highlighted: {
-        true: "animate-spotlight-fade-white bg-background-spotlight",
-        false: "bg-surface-high"
-      },
-      invalid: {
-        true: "border border-content-negative caret-content-primary hover:border-content-negative focus-visible:border-content-negative focus-visible:ring-background-negative-subdued-down",
-        false: "border border-black-alpha-3 caret-content-accent hover:border-neutral-4 focus-visible:border-content-accent focus-visible:ring-misc-focus-indicator-subdued"
-      }
-    }
-  }
-), g = b(
-  ({ label: o, helper: e, className: i, children: n, isHighlighted: a = !1, invalid: t = !1, ...c }, s) => /* @__PURE__ */ l(u, { label: o, className: i, children: [
-    /* @__PURE__ */ r(
-      "select",
-      {
-        ref: s,
-        ...c,
-        className: m({
-          invalid: t,
-          highlighted: a
-        }),
-        children: n
-      }
-    ),
-    e && /* @__PURE__ */ r(f, { invalid: t, children: e })
-  ] })
-);
-g.displayName = "SelectField";
-export {
-  g as SelectField
-};
-//# sourceMappingURL=index129.mjs.map