@photoroom/ui 0.1.1 → 0.1.2

package/index151.mjs

@@ -1,160 +0,0 @@
-import { jsx as e, jsxs as l, Fragment as v } from "react/jsx-runtime";
-import { TeamIcon as b, PersonIcon as h } from "@photoroom/icons/lib/monochromes";
-import { Root as z, Image as g, Fallback as y } from "./index355.mjs";
-import { cva as i } from "./index302.mjs";
-import { useMemo as w } from "react";
-import { cn as I } from "./index7.mjs";
-const R = i(
-  [
-    "shrink-0 select-none",
-    "group relative isolate align-middle",
-    "inline-flex items-center justify-center",
-    "rounded-full bg-current",
-    "focus-ring-misc-focus-ring outline-0 focus:misc-border-size-focus-ring",
-    "transition duration-150 ease-out",
-    "before:pointer-events-none before:absolute before:-inset-0.5 before:rounded-[inherit] before:content-['']",
-    "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border-misc-border after:content-[''] after:misc-border-size-hairline"
-  ],
-  {
-    variants: {
-      size: {
-        12: "size-3",
-        16: "size-4",
-        20: "size-5",
-        24: "size-6",
-        32: "size-8",
-        40: "size-10",
-        80: "size-20"
-      },
-      accountType: {
-        personal: "",
-        team: ""
-      },
-      offline: {
-        true: "",
-        false: ""
-      },
-      activeRing: {
-        true: "",
-        false: ""
-      },
-      color: {
-        1: "text-secondary-moon-grape",
-        2: "text-secondary-electric-litchi",
-        3: "text-secondary-sunny-mango",
-        4: "text-secondary-aqua-kiwi",
-        5: "text-secondary-coral-cherry",
-        neutral: "text-neutral-8"
-      }
-    },
-    compoundVariants: [
-      {
-        offline: !0,
-        accountType: "personal",
-        class: "opacity-50"
-      },
-      // active ring
-      {
-        size: 20,
-        offline: !1,
-        activeRing: !0,
-        class: "before:bg-current"
-      },
-      {
-        size: 24,
-        offline: !1,
-        activeRing: !0,
-        class: "before:bg-current"
-      },
-      {
-        size: 32,
-        offline: !1,
-        activeRing: !0,
-        class: "border-2"
-      }
-    ]
-  }
-), j = i(["text-center font-semibold uppercase"], {
-  variants: {
-    size: {
-      12: "text-[9px]",
-      16: "text-[11px]",
-      20: "text-[11px]",
-      24: "text-[12px]",
-      32: "text-[17px]",
-      40: "text-[20px]",
-      80: "text-[34px]"
-    }
-  }
-}), k = i([""], {
-  variants: {
-    size: {
-      12: "size-[9px]",
-      16: "size-[11px]",
-      20: "size-[11px]",
-      24: "size-[12px]",
-      32: "size-[18px]",
-      40: "size-5",
-      80: "size-8"
-    }
-  }
-}), N = ({
-  className: f,
-  accountType: o = "personal",
-  size: r = 40,
-  selectable: n = !1,
-  imageSrc: a,
-  displayName: t,
-  offline: u = !1,
-  activeRing: d = !1,
-  color: p = "1",
-  customColor: x
-}) => {
-  const m = o === "team" ? b : h, s = w(() => {
-    const c = t == null ? void 0 : t.codePointAt(0);
-    if (c)
-      return String.fromCodePoint(c);
-  }, [t]);
-  return /* @__PURE__ */ e("div", { className: I("relative flex", f), children: /* @__PURE__ */ l(
-    z,
-    {
-      className: R({
-        size: r,
-        accountType: o,
-        activeRing: d,
-        offline: u,
-        color: p
-      }),
-      tabIndex: n ? 0 : void 0,
-      style: {
-        color: x
-      },
-      children: [
-        n && /* @__PURE__ */ l(v, { children: [
-          /* @__PURE__ */ e("div", { className: "absolute inset-0 z-[2] h-full w-full overflow-hidden rounded-[inherit] bg-misc-visual-hover opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100 group-focus:opacity-100" }),
-          /* @__PURE__ */ e("div", { className: "absolute inset-0 z-[2] h-full w-full overflow-hidden rounded-[inherit] bg-misc-visual-down opacity-0 transition-opacity duration-150 ease-out group-active:opacity-100" })
-        ] }),
-        /* @__PURE__ */ e(
-          g,
-          {
-            className: "relative z-[1] h-full w-full rounded-[inherit] object-cover",
-            src: a,
-            alt: t || ""
-          }
-        ),
-        /* @__PURE__ */ e(
-          y,
-          {
-            className: "relative z-[1] flex h-full w-full items-center justify-center rounded-[inherit] text-content-white-primary-inverted",
-            delayMs: a ? 400 : 0,
-            children: s ? /* @__PURE__ */ e("span", { className: j({ size: r }), children: s }) : /* @__PURE__ */ e(m, { className: k({ size: r }) })
-          }
-        )
-      ]
-    }
-  ) });
-};
-export {
-  N as Avatar
-};
-//# sourceMappingURL=index151.mjs.map

package/index152.mjs

@@ -1,19 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { cva as t } from "./index302.mjs";
-import { Bone as a } from "./index186.mjs";
-const n = t([""], {
-  variants: {
-    size: {
-      12: "h-3 w-3",
-      16: "h-4 w-4",
-      24: "h-6 w-6",
-      32: "h-8 w-8",
-      40: "h-10 w-10",
-      80: "h-20 w-20"
-    }
-  }
-}), m = ({ size: r = 40 }) => /* @__PURE__ */ o(a, { rounding: "full", className: n({ size: r }) });
-export {
-  m as AvatarSkeleton
-};
-//# sourceMappingURL=index152.mjs.map

package/index153.mjs

@@ -1,56 +0,0 @@
-import { jsxs as l, jsx as d } from "react/jsx-runtime";
-import { clsx as p } from "./index296.mjs";
-import { useMemo as b } from "react";
-import { Avatar as f } from "./index151.mjs";
-import { AvatarAdd as h } from "./index377.mjs";
-import { AvatarCount as v } from "./index378.mjs";
-const j = ({
-  avatars: e,
-  limit: s = 6,
-  size: o = 32,
-  className: c,
-  isButton: n = !1,
-  onClick: u
-}) => {
-  const [i, a] = b(() => {
-    const r = Math.round(Math.abs(s));
-    if (e.length <= r)
-      return [
-        e,
-        {
-          type: n ? "more" : "none",
-          label: ""
-        }
-      ];
-    const t = Math.max(0, e.length - r + 1), m = t > 99 ? "99+" : `+${t}`;
-    return [
-      e.slice(0, r - 1),
-      {
-        type: "count",
-        label: m
-      }
-    ];
-  }, [e, n, s]);
-  return /* @__PURE__ */ l(
-    "div",
-    {
-      className: p(
-        "flex w-fit flex-row-reverse items-center justify-end -space-x-1 space-x-reverse",
-        {
-          "cursor-pointer rounded-full bg-background-subdued p-2 hover:bg-background-subdued-hover active:bg-background-subdued-down": n
-        },
-        c
-      ),
-      onClick: u,
-      children: [
-        a.type === "count" && /* @__PURE__ */ d(v, { count: a.label, size: o }),
-        a.type === "more" && /* @__PURE__ */ d(h, { size: o }),
-        i.map((r, t) => /* @__PURE__ */ d(f, { ...r, size: o }, t.toString()))
-      ]
-    }
-  );
-};
-export {
-  j as AvatarStack
-};
-//# sourceMappingURL=index153.mjs.map

package/index154.mjs

@@ -1,30 +0,0 @@
-import { jsx as n, jsxs as s } from "react/jsx-runtime";
-import { ChevronRightShortIcon as a } from "@photoroom/icons/lib/monochromes";
-import { Children as m, Fragment as l } from "react";
-import { cn as d } from "./index7.mjs";
-function x({ className: r, children: t, ...e }) {
-  const i = m.toArray(t);
-  return /* @__PURE__ */ n(
-    "nav",
-    {
-      ...e,
-      className: d(
-        "flex items-center gap-1",
-        "component-400 text-content-secondary",
-        "[&_a]:rounded-200 [&_a]:text-content-primary [&_a]:outline-none",
-        "[&_a:hover]:text-content-secondary",
-        "[&_a:focus-visible]:ring [&_a:focus-visible]:ring-misc-focus-indicator",
-        "[&>*]:min-w-0 [&>*]:shrink-0 [&>:last-child]:shrink [&>:last-child]:truncate",
-        r
-      ),
-      children: i.map((o, c) => /* @__PURE__ */ s(l, { children: [
-        /* @__PURE__ */ n(a, { className: "icon-size-200 first:hidden" }),
-        o
-      ] }, c.toString()))
-    }
-  );
-}
-export {
-  x as Breadcrumbs
-};
-//# sourceMappingURL=index154.mjs.map

package/index155.mjs

@@ -1,35 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { Root as l } from "./index343.mjs";
-import { clsx as i } from "./index296.mjs";
-import { SegmentedControlItem as d } from "./index403.mjs";
-import { SegmentedControlItemIconOnly as a } from "./index404.mjs";
-import { SegmentedControlItemIconWithLabel as I } from "./index405.mjs";
-import { SegmentedControlItemLabelWithSub as c } from "./index406.mjs";
-const o = ({
-  className: t,
-  testId: e,
-  disabled: m,
-  ...r
-}) => /* @__PURE__ */ n(
-  l,
-  {
-    className: i(
-      "flex rounded-450 bg-background-subdued",
-      {
-        "cursor-not-allowed opacity-30": m
-      },
-      t
-    ),
-    type: "single",
-    "data-testid": e,
-    ...r
-  }
-);
-o.Item = d;
-o.ItemIconOnly = a;
-o.ItemIconWithLabel = I;
-o.ItemLabelWithSub = c;
-export {
-  o as SegmentedControl
-};
-//# sourceMappingURL=index155.mjs.map

package/index156.mjs

@@ -1,46 +0,0 @@
-import { jsx as s, jsxs as m } from "react/jsx-runtime";
-import { Root as u, Item as b } from "./index343.mjs";
-import { cn as l } from "./index7.mjs";
-import { SegmentedPickerItem as f } from "./index376.mjs";
-const x = ({
-  value: a,
-  values: r,
-  onChange: i,
-  className: d,
-  testId: o,
-  disabled: t = !1
-}) => /* @__PURE__ */ s("div", { className: l("rounded-500 bg-background-subdued p-1", d), "data-testid": o, children: /* @__PURE__ */ s(
-  u,
-  {
-    className: "flex justify-between gap-2",
-    type: "single",
-    value: a,
-    onValueChange: (e) => {
-      e && !t && (i == null || i(e));
-    },
-    children: r.map((e) => {
-      const c = e.value === a, n = t || e.disabled;
-      return /* @__PURE__ */ m(
-        b,
-        {
-          value: e.value,
-          disabled: n,
-          className: l(
-            "relative flex shrink-0 grow rounded-400 outline-none transition-all focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring disabled:cursor-not-allowed disabled:opacity-30",
-            e.className
-          ),
-          "data-testid": `segmented-picker-item-${e.value}`,
-          children: [
-            /* @__PURE__ */ s(f, { value: e.value, icon: e.icon, className: "z-[1]", children: e.label }),
-            c && /* @__PURE__ */ s("div", { className: "absolute inset-0 z-0 rounded-400 bg-surface-default shadow-500" })
-          ]
-        },
-        e.value
-      );
-    })
-  }
-) });
-export {
-  x as SegmentedPicker
-};
-//# sourceMappingURL=index156.mjs.map

package/index157.mjs

@@ -1,69 +0,0 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { DisclosureTriangleIcon as x } from "@photoroom/icons/lib/monochromes/DisclosureTriangleIcon";
-import { clsx as r } from "./index296.mjs";
-import { forwardRef as h, useState as g, useEffect as y } from "react";
-import { AnimatePresence as v } from "./index306.mjs";
-import { motion as N } from "./index307.mjs";
-import { Badge as b } from "./index166.mjs";
-const w = h(
-  ({
-    children: i,
-    label: c,
-    badgeLabel: o,
-    hasPaddingTop: m = !1,
-    noAccordion: e = !1,
-    disabled: p = !1,
-    isOpened: a = !1,
-    ...f
-  }, u) => {
-    const [s, n] = g(a);
-    return y(() => {
-      n(a);
-    }, [a]), /* @__PURE__ */ l("div", { className: r("w-full", m ? "pt-[27px]" : ""), ...f, ref: u, children: [
-      /* @__PURE__ */ l(
-        "button",
-        {
-          type: "button",
-          className: r(
-            "flex w-full flex-row items-center gap-2 px-3 py-[11px]",
-            "focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring disabled:opacity-30",
-            "rounded-500 outline-none transition duration-200",
-            e ? "cursor-default" : "cursor-pointer"
-          ),
-          onClick: () => !!i && n((d) => !d),
-          disabled: p,
-          children: [
-            !e && /* @__PURE__ */ t(
-              x,
-              {
-                className: r(
-                  "h-[10px] w-[10px] shrink-0",
-                  "fill-content-tertiary transition duration-200",
-                  s ? "rotate-90" : "rotate-0"
-                )
-              }
-            ),
-            /* @__PURE__ */ t("span", { className: "component-500 truncate text-content-tertiary", children: c }),
-            !!o && /* @__PURE__ */ t(b, { size: "small", variant: "subtle", children: o })
-          ]
-        }
-      ),
-      /* @__PURE__ */ t(v, { children: s && !e && /* @__PURE__ */ t(
-        N.div,
-        {
-          initial: { opacity: 0, height: 0 },
-          animate: { opacity: 1, height: "auto" },
-          exit: { opacity: 0, height: 0 },
-          transition: { duration: 0.2 },
-          children: i
-        }
-      ) }),
-      e && i
-    ] });
-  }
-);
-w.displayName = "SideNavigationHeader";
-export {
-  w as SideNavigationHeader
-};
-//# sourceMappingURL=index157.mjs.map

package/index158.mjs

@@ -1,80 +0,0 @@
-import { jsx as n, jsxs as b } from "react/jsx-runtime";
-import { clsx as d } from "./index296.mjs";
-import { forwardRef as x } from "react";
-import { cn as f } from "./index7.mjs";
-const h = x(
-  ({
-    isSelected: e = !1,
-    label: i,
-    variant: o = "default",
-    disabled: r,
-    icon: a,
-    activeIcon: t = a,
-    as: l,
-    className: c,
-    ...s
-  }, u) => {
-    const p = {
-      variant: o,
-      label: i,
-      activeIcon: t,
-      icon: a
-    };
-    return l === void 0 ? /* @__PURE__ */ n(
-      "button",
-      {
-        ref: u,
-        className: f("group flex w-full outline-none", r && "opacity-30", c),
-        ...s,
-        children: /* @__PURE__ */ n(g, { ...p, isActive: e })
-      }
-    ) : /* @__PURE__ */ n(
-      l,
-      {
-        ref: u,
-        className: f("group flex w-full outline-none", r && "opacity-30", c),
-        ...s,
-        children: ({ isActive: m }) => /* @__PURE__ */ n(g, { ...p, isActive: m || e })
-      }
-    );
-  }
-);
-h.displayName = "SideNavigationItem";
-const g = ({ variant: e = "default", label: i, isActive: o = !1, activeIcon: r, icon: a }) => {
-  const t = o ? r : a;
-  return /* @__PURE__ */ b(
-    "span",
-    {
-      className: d(
-        "flex w-full flex-row items-center gap-3 py-[10px] pr-3",
-        "group-focus-visible:ring-accent-alpha-5 group-focus-visible:misc-border-size-focus-ring group-disabled:opacity-30",
-        "cursor-pointer rounded-500 outline-none transition duration-200",
-        {
-          "text-content-primary": !o && e === "default",
-          "text-content-positive": !o && e === "positive",
-          "bg-transparent hover:bg-background-subdued-hover active:bg-background-subdued-down group-focus-visible:bg-background-subdued-hover": !o,
-          "bg-background-accent-subdued text-content-accent": o,
-          "pl-[10px]": t,
-          "pl-3": !t
-        }
-      ),
-      children: [
-        !!t && /* @__PURE__ */ n(
-          t,
-          {
-            className: d("h-5 w-5 shrink-0 transition duration-200", {
-              "fill-content-secondary": !o && e === "default",
-              "fill-content-positive": !o && e === "positive",
-              "fill-content-accent": o
-            })
-          }
-        ),
-        /* @__PURE__ */ n("span", { className: "component-500 text-left", children: i })
-      ]
-    }
-  );
-};
-export {
-  h as SideNavigationItem
-};
-//# sourceMappingURL=index158.mjs.map

package/index159.mjs

@@ -1,22 +0,0 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { cva as t } from "./index302.mjs";
-import { Bone as a } from "./index186.mjs";
-const o = t(["h-5"], {
-  variants: {
-    size: {
-      small: "w-[75px]",
-      medium: "w-[100px]",
-      large: "w-[115px]"
-    }
-  }
-}), p = ({
-  showIcon: i,
-  size: m = "medium"
-}) => /* @__PURE__ */ s("div", { className: "flex w-full items-center gap-3 px-3 py-2.5", children: [
-  i && /* @__PURE__ */ e(a, { className: "h-5 w-5" }),
-  /* @__PURE__ */ e(a, { className: o({ size: m }) })
-] });
-export {
-  p as SideNavigationItemSkeleton
-};
-//# sourceMappingURL=index159.mjs.map

package/index16.mjs

@@ -1,87 +0,0 @@
-import { jsxs as l, jsx as c } from "react/jsx-runtime";
-import { ActivityIcon as m, ArrowRightIcon as g } from "@photoroom/icons/lib/monochromes";
-import { clsx as n } from "./index296.mjs";
-import { forwardRef as p } from "react";
-import { cn as f } from "./index7.mjs";
-const h = p(
-  ({
-    as: i = "button",
-    type: a = "button",
-    // `type="submit"` should be explicitly set.
-    className: s,
-    variant: e = "accent",
-    size: o = "medium",
-    loading: r = !1,
-    children: u,
-    badge: b,
-    ...t
-  }, d) => /* @__PURE__ */ l(
-    i,
-    {
-      ref: d,
-      type: i === "button" ? a : void 0,
-      "aria-busy": r,
-      ...t,
-      disabled: r || t.disabled,
-      className: f(
-        "relative shrink-0 appearance-none overflow-hidden",
-        "flex items-center justify-center gap-[7px]",
-        "rounded-500",
-        "focus-visible:outline-none focus-visible:misc-border-size-focus-ring",
-        "transition-colors interaction-transition-type-1",
-        {
-          "pl-[19px] pr-[15px] size-h-600": o === "medium",
-          "pl-[22px] pr-[18px] size-h-700": o === "large",
-          "bg-background-accent hover:bg-background-accent-hover focus-visible:bg-background-accent-hover active:bg-background-accent-down": e === "accent",
-          "bg-background-default hover:bg-background-hover focus-visible:bg-background-hover active:bg-background-down": e === "primary",
-          "bg-background-white hover:bg-background-white-hover focus-visible:bg-background-white-hover active:bg-background-white-down": e === "on-dark",
-          "text-content-white-primary": e === "accent",
-          "text-content-white-primary-inverted": e === "primary",
-          "text-content-black-primary": e === "on-dark",
-          "focus-visible:ring-misc-focus-indicator": ["accent", "primary"].includes(e),
-          "focus-visible:ring-misc-white-focus-indicator": e === "on-dark",
-          "cursor-pointer": !t.disabled,
-          "cursor-not-allowed opacity-30": t.disabled && !r
-        },
-        s
-      ),
-      children: [
-        r && /* @__PURE__ */ c(
-          m,
-          {
-            className: n(
-              "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
-              "icon-size-500",
-              "[&~*]:!pointer-events-none [&~*]:!opacity-0"
-            )
-          }
-        ),
-        /* @__PURE__ */ c(
-          "span",
-          {
-            className: n("max-w-full truncate", {
-              "component-500": o === "medium",
-              "component-600": o === "large"
-            }),
-            children: u
-          }
-        ),
-        b,
-        /* @__PURE__ */ c(
-          g,
-          {
-            className: n("shrink-0 text-current", {
-              "icon-size-400": o === "medium",
-              "icon-size-500": o === "large"
-            })
-          }
-        )
-      ]
-    }
-  )
-);
-h.displayName = "HeroButton";
-export {
-  h as HeroButton
-};
-//# sourceMappingURL=index16.mjs.map