prometeo-design-system 9.1.2 → 9.2.0

package/dist/AttachInput.es.js

@@ -2,7 +2,7 @@ import { j as t } from "./jsx-runtime-CqQglQKg.js";
 import { c as o } from "./cn-B6yFEsav.js";
 import { memo as P, forwardRef as E, useCallback as G } from "react";
 import { useDropzone as H } from "react-dropzone";
-import _ from "./CardBackground.es.js";
+import { C as _ } from "./CardBackground-Dey2CbfR.js";
 import { PlainTooltip as q } from "./PlainTooltip.es.js";
 import K from "./HelperComponent.es.js";
 import { c as i } from "./index-BOQuZ0gG.js";
@@ -87,13 +87,13 @@ const W = i(
     acceptedFormats: d,
     status: u,
     supportingText: f,
-    showSupportingText: z,
+    showSupportingText: C,
     disabled: a = !1,
     accept: m,
     maxFiles: h = 1,
     maxSize: v,
     cardBackground: b,
-    ...C
+    ...z
   }, M) => {
     const D = G(
       (j, y) => {
@@ -112,7 +112,7 @@ const W = i(
       maxFiles: h,
       disabled: a,
       maxSize: v,
-      ...C
+      ...z
     }), p = g.length > 0, l = p ? "error" : u ?? "default", x = ee(k, A), R = L(l, x, a), S = J[R], I = p ? F([...g], h) : typeof f == "function" ? f() : f, T = d ?? N(m ?? {}), B = N(m ?? {});
     return /* @__PURE__ */ t.jsxs("div", { className: o("w-full flex flex-col gap-1 h-[136px]", n), children: [
       c && /* @__PURE__ */ t.jsx(
@@ -208,7 +208,7 @@ const W = i(
           ]
         }
       ),
-      z && /* @__PURE__ */ t.jsx(K, { variant: l, disabled: a, className: o(l === "default" && !a && "[&>p]:text-neutral-tertiary-default! [&>svg]:icon-neutral-tertiary-default!"), children: I })
+      C && /* @__PURE__ */ t.jsx(K, { variant: l, disabled: a, className: o(l === "default" && !a && "[&>p]:text-neutral-tertiary-default! [&>svg]:icon-neutral-tertiary-default!"), children: I })
     ] });
   }
 );

package/dist/Card.es.js

@@ -1,19 +1,19 @@
-import { j as e } from "./jsx-runtime-CqQglQKg.js";
-import { useContext as z, createContext as w, memo as s, forwardRef as F, useMemo as H } from "react";
+import { j as n } from "./jsx-runtime-CqQglQKg.js";
+import { useContext as z, createContext as b, memo as d, forwardRef as F, useMemo as H } from "react";
 import { c as i } from "./cn-B6yFEsav.js";
-import { c as d } from "./index-BOQuZ0gG.js";
-import V from "./CardBackground.es.js";
-const C = w(null);
+import { c } from "./index-BOQuZ0gG.js";
+import { C as V, i as E } from "./CardBackground-Dey2CbfR.js";
+const f = b(null);
 function m() {
-  const a = z(C);
-  if (!a)
+  const r = z(f);
+  if (!r)
     throw new Error(
       "Card compound components (Card.Header, Card.Content, Card.Footer) must be used inside <Card>"
     );
-  return a;
+  return r;
 }
-const k = d(
-  "relative overflow-hidden dropshadow-100 radius-medium border border-neutral-default-default p-3 shrink-0 *:z-10",
+const R = c(
+  "relative overflow-hidden dropshadow-100 radius-medium border border-neutral-default-default p-3 shrink-0",
   {
     variants: {
       orientation: {
@@ -25,50 +25,73 @@ const k = d(
       orientation: "vertical"
     }
   }
-), b = d("shrink-0 z-10", {
+), P = c("shrink-0 z-10", {
   variants: {
     orientation: {
       vertical: "",
       horizontal: ""
     }
   }
-}), y = d("shrink-0 z-10", {
+}), S = c("shrink-0 z-10", {
   variants: {
     orientation: {
       vertical: "",
       horizontal: ""
     }
   }
-}), E = d("flex-1 min-h-0 min-w-0 z-10"), g = F(function({
-  variant: r = "1-slot",
-  direction: t,
-  orientation: o,
-  cardBackground: n,
+}), g = c("flex-1 min-h-0 min-w-0 z-10"), O = "card";
+function C(r, o) {
+  return {
+    color: "neutral",
+    variant: "default",
+    ...r,
+    ...o
+  };
+}
+function _(r) {
+  const o = r?.interactionSource, e = o != null && o !== "self", t = !r?.disabled && r?.forced === void 0 && (e || r?.interactionConfig != null && o !== "self");
+  return r?.disabled || r?.forced !== void 0 ? { grouped: !1, props: C(r, {}) } : t ? {
+    grouped: !0,
+    props: C(r, {
+      interactionSource: e ? o : O
+    })
+  } : {
+    grouped: !1,
+    props: C(r, { forced: "default" })
+  };
+}
+const A = F(function({
+  variant: o = "1-slot",
+  direction: e,
+  orientation: t,
+  cardBackground: a,
   children: h,
-  className: v,
-  ...N
-}, p) {
-  const l = o ?? t ?? "vertical", j = H(
-    () => ({ orientation: l, variant: r }),
-    [l, r]
-  );
-  return /* @__PURE__ */ e.jsx(C.Provider, { value: j, children: /* @__PURE__ */ e.jsxs(
+  className: N,
+  ...j
+}, w) {
+  const u = t ?? e ?? "vertical", y = H(
+    () => ({ orientation: u, variant: o }),
+    [u, o]
+  ), s = _(a);
+  return /* @__PURE__ */ n.jsx(f.Provider, { value: y, children: /* @__PURE__ */ n.jsxs(
     "div",
     {
-      ref: p,
+      ref: w,
       className: i(
-        k({ orientation: l }),
-        v
+        R({ orientation: u }),
+        N
       ),
-      ...N,
+      ...j,
+      ...s.grouped ? E() : {},
       children: [
-        /* @__PURE__ */ e.jsx(
+        /* @__PURE__ */ n.jsx(
           V,
           {
-            ...n,
+            ...s.props,
             className: i(
               "inset-0 absolute z-0",
-              n?.className
+              s.grouped && "pointer-events-none",
+              s.props.className
             )
           }
         ),
@@ -76,55 +99,55 @@ const k = d(
       ]
     }
   ) });
-}), u = s(function({
-  children: r,
-  className: t,
-  ...o
+}), p = d(function({
+  children: o,
+  className: e,
+  ...t
 }) {
-  const { orientation: n } = m();
-  return /* @__PURE__ */ e.jsx(
+  const { orientation: a } = m();
+  return /* @__PURE__ */ n.jsx(
     "div",
     {
-      className: i(b({ orientation: n }), t),
-      ...o,
-      children: r
+      className: i(P({ orientation: a }), e),
+      ...t,
+      children: o
     }
   );
-}), f = s(function({
-  children: r,
-  className: t,
-  ...o
+}), v = d(function({
+  children: o,
+  className: e,
+  ...t
 }) {
-  return /* @__PURE__ */ e.jsx("div", { className: i(E(), t), ...o, children: r });
-}), x = s(function({
-  children: r,
-  className: t,
-  ...o
+  return /* @__PURE__ */ n.jsx("div", { className: i(g(), e), ...t, children: o });
+}), x = d(function({
+  children: o,
+  className: e,
+  ...t
 }) {
-  const { orientation: n } = m();
-  return /* @__PURE__ */ e.jsx(
+  const { orientation: a } = m();
+  return /* @__PURE__ */ n.jsx(
     "div",
     {
-      className: i(y({ orientation: n }), t),
-      ...o,
-      children: r
+      className: i(S({ orientation: a }), e),
+      ...t,
+      children: o
     }
   );
 });
-function B(a, r) {
-  return a.variant === r.variant && a.direction === r.direction && a.orientation === r.orientation && a.className === r.className && a.children === r.children && a.cardBackground === r.cardBackground;
+function I(r, o) {
+  return r.variant === o.variant && r.direction === o.direction && r.orientation === o.orientation && r.className === o.className && r.children === o.children && r.cardBackground === o.cardBackground;
 }
-const c = s(g, B);
-c.Header = u;
-c.Content = f;
-c.Footer = x;
-c.displayName = "Card";
-u.displayName = "Card.Header";
-f.displayName = "Card.Content";
+const l = d(A, I);
+l.Header = p;
+l.Content = v;
+l.Footer = x;
+l.displayName = "Card";
+p.displayName = "Card.Header";
+v.displayName = "Card.Content";
 x.displayName = "Card.Footer";
 export {
-  c as Card,
-  f as CardContent,
+  l as Card,
+  v as CardContent,
   x as CardFooter,
-  u as CardHeader
+  p as CardHeader
 };

package/dist/CardBackground-Dey2CbfR.js

@@ -0,0 +1,308 @@
+import { j as y } from "./jsx-runtime-CqQglQKg.js";
+import { memo as O } from "react";
+import { c as w } from "./index-BOQuZ0gG.js";
+import { c as h } from "./cn-B6yFEsav.js";
+function v(r) {
+  return !("color" in r.default);
+}
+function A(r) {
+  if ("selected" in r) return !0;
+  const e = r.default;
+  return e == null ? !1 : !("color" in e);
+}
+function u(r, e) {
+  return e ? { ...r, ...e } : r;
+}
+function f(r, e) {
+  return e ? {
+    default: u(r.default, e.default),
+    hover: u(r.hover, e.hover),
+    pressed: u(r.pressed, e.pressed)
+  } : r;
+}
+function E(r, e) {
+  if (!e) return r;
+  const t = v(r), a = t ? r.default : r, o = t ? r.selected : void 0;
+  if (!A(e)) {
+    const d = f(a, e);
+    return o ? { default: d, selected: o } : d;
+  }
+  const l = f(a, e.default);
+  return !e.selected && !o ? { default: l } : {
+    default: l,
+    selected: f(o ?? l, e.selected)
+  };
+}
+const _ = "data-interaction-group", U = "data-interaction-exclude";
+function $() {
+  return { [_]: "" };
+}
+function x(r) {
+  return r != null && r !== "self";
+}
+function P(r, e) {
+  if (r === "transparent")
+    return { color: "transparent", variant: "default" };
+  const t = r ?? "neutral";
+  return {
+    color: t,
+    variant: t === "brand" ? "primary" : e ?? "default"
+  };
+}
+function j(r, e) {
+  return {
+    default: { color: r, variant: e },
+    hover: { color: r, variant: e, forced: "hover" },
+    pressed: { color: r, variant: e, forced: "pressed" }
+  };
+}
+function m(r, e, t) {
+  const { color: a, variant: o } = P(e, t), l = j(a, o);
+  return E(l, r);
+}
+function B(r, e) {
+  return e || r !== void 0;
+}
+const I = "transition-colors duration-300 ease will-change-colors", c = w(I, {
+  variants: {
+    color: {
+      neutral: "",
+      brand: "",
+      transparent: ""
+    },
+    variant: {
+      default: "",
+      primary: "",
+      secondary: "",
+      tertiary: ""
+    },
+    disabled: {
+      true: "bg-disabled-default",
+      false: ""
+    },
+    forced: {
+      undefined: "",
+      default: "",
+      hover: "",
+      pressed: ""
+    }
+  },
+  defaultVariants: {
+    color: "neutral",
+    variant: "default"
+  },
+  compoundVariants: [
+    {
+      color: "neutral",
+      variant: "default",
+      class: "bg-neutral-default-default hover:bg-neutral-default-hover active:bg-neutral-default-pressed",
+      disabled: [!1],
+      forced: void 0
+    },
+    {
+      color: "neutral",
+      variant: "primary",
+      class: "bg-neutral-primary-default hover:bg-neutral-primary-hover active:bg-neutral-primary-pressed",
+      disabled: [!1]
+    },
+    {
+      color: "neutral",
+      variant: "secondary",
+      class: "bg-neutral-secondary-default hover:bg-neutral-secondary-hover active:bg-neutral-secondary-pressed",
+      disabled: [!1]
+    },
+    {
+      color: "neutral",
+      variant: "tertiary",
+      class: "bg-neutral-tertiary-default hover:bg-neutral-tertiary-hover active:bg-neutral-tertiary-pressed",
+      disabled: [!1]
+    },
+    {
+      color: "brand",
+      variant: "primary",
+      class: "bg-brand-overlay-default hover:bg-brand-overlay-hover active:bg-brand-overlay-pressed",
+      disabled: [!1]
+    },
+    {
+      color: "transparent",
+      variant: "default",
+      class: "bg-transparent hover:bg-transparent active:bg-transparent",
+      disabled: [!1]
+    },
+    // Forced variants
+    {
+      color: "neutral",
+      variant: "default",
+      forced: "default",
+      class: "bg-neutral-default-default hover:bg-neutral-default-default active:bg-neutral-default-default"
+    },
+    {
+      color: "neutral",
+      variant: "default",
+      forced: "hover",
+      class: "bg-neutral-default-hover hover:bg-neutral-default-hover active:bg-neutral-default-hover"
+    },
+    {
+      color: "neutral",
+      variant: "default",
+      forced: "pressed",
+      class: "bg-neutral-default-pressed hover:bg-neutral-default-pressed active:bg-neutral-default-pressed"
+    },
+    {
+      color: "neutral",
+      variant: "primary",
+      forced: "default",
+      class: "bg-neutral-primary-default hover:bg-neutral-primary-default active:bg-neutral-primary-default"
+    },
+    {
+      color: "neutral",
+      variant: "primary",
+      forced: "hover",
+      class: "bg-neutral-primary-hover hover:bg-neutral-primary-hover active:bg-neutral-primary-hover"
+    },
+    {
+      color: "neutral",
+      variant: "primary",
+      forced: "pressed",
+      class: "bg-neutral-primary-pressed hover:bg-neutral-primary-pressed active:bg-neutral-primary-pressed"
+    },
+    {
+      color: "neutral",
+      variant: "secondary",
+      forced: "default",
+      class: "bg-neutral-secondary-default hover:bg-neutral-secondary-default active:bg-neutral-secondary-default"
+    },
+    {
+      color: "neutral",
+      variant: "secondary",
+      forced: "hover",
+      class: "bg-neutral-secondary-hover hover:bg-neutral-secondary-hover active:bg-neutral-secondary-hover"
+    },
+    {
+      color: "neutral",
+      variant: "secondary",
+      forced: "pressed",
+      class: "bg-neutral-secondary-pressed hover:bg-neutral-secondary-pressed active:bg-neutral-secondary-pressed"
+    },
+    {
+      color: "neutral",
+      variant: "tertiary",
+      forced: "default",
+      class: "bg-neutral-tertiary-default hover:bg-neutral-tertiary-default active:bg-neutral-tertiary-default"
+    },
+    {
+      color: "neutral",
+      variant: "tertiary",
+      forced: "hover",
+      class: "bg-neutral-tertiary-hover hover:bg-neutral-tertiary-hover active:bg-neutral-tertiary-hover"
+    },
+    {
+      color: "neutral",
+      variant: "tertiary",
+      forced: "pressed",
+      class: "bg-neutral-tertiary-pressed hover:bg-neutral-tertiary-pressed active:bg-neutral-tertiary-pressed"
+    },
+    {
+      color: "brand",
+      variant: "primary",
+      forced: "default",
+      class: "bg-brand-overlay-default hover:bg-brand-overlay-default active:bg-brand-overlay-default"
+    },
+    {
+      color: "brand",
+      variant: "primary",
+      forced: "hover",
+      class: "bg-brand-overlay-hover hover:bg-brand-overlay-hover active:bg-brand-overlay-hover"
+    },
+    {
+      color: "brand",
+      variant: "primary",
+      forced: "pressed",
+      class: "bg-brand-overlay-pressed hover:bg-brand-overlay-pressed active:bg-brand-overlay-pressed"
+    },
+    {
+      color: "transparent",
+      variant: "default",
+      forced: ["default", "hover", "pressed"],
+      class: "bg-transparent hover:bg-transparent active:bg-transparent"
+    }
+  ]
+});
+function i(r) {
+  if (r.color === "transparent")
+    return "transparent";
+  if (r.forced) {
+    const a = c({
+      color: r.color,
+      variant: r.color === "brand" ? "primary" : r.variant,
+      forced: r.forced,
+      disabled: !1
+    }), o = c({
+      color: r.color,
+      variant: r.color === "brand" ? "primary" : r.variant,
+      forced: void 0,
+      disabled: !1
+    }), l = new Set(
+      o.split(" ").filter((n) => n.startsWith("bg-") && !n.includes(":"))
+    );
+    return `var(--${a.split(" ").filter((n) => n.startsWith("bg-") && !n.includes(":") && !l.has(n))[0] ?? a.split(" ").filter((n) => n.startsWith("bg-") && !n.includes(":")).pop() ?? "bg-neutral-default-default"})`;
+  }
+  return `var(--${c({
+    color: r.color,
+    variant: r.color === "brand" ? "primary" : r.variant,
+    forced: void 0,
+    disabled: !1
+  }).split(" ").find((a) => a.startsWith("bg-") && !a.includes(":")) ?? "bg-neutral-default-default"})`;
+}
+function C(r) {
+  const e = v(r) ? r.default : r, t = v(r) ? r.selected : void 0, a = {
+    "--cell-bg": i(e.default),
+    "--cell-bg-hover": i(e.hover),
+    "--cell-bg-pressed": i(e.pressed)
+  };
+  return t && (a["--cell-bg-selected"] = i(t.default), a["--cell-bg-sel-hover"] = i(t.hover), a["--cell-bg-sel-pressed"] = i(t.pressed)), a;
+}
+const D = (r) => {
+  const e = {
+    color: "neutral",
+    variant: "default",
+    forced: void 0,
+    disabled: !1
+  }, {
+    color: t,
+    variant: a,
+    forced: o,
+    className: l,
+    disabled: d,
+    children: s,
+    interactionConfig: n,
+    interactionSource: b,
+    ...g
+  } = { ...e, ...r };
+  if (B(o, d)) {
+    const T = c({ color: t, variant: a, forced: o, disabled: d }), N = m(n, t, a), V = C(N);
+    return /* @__PURE__ */ y.jsx("div", { className: h(T, l), "data-disabled": d, style: V, ...g, children: s && typeof s == "function" ? s() : s });
+  }
+  const R = m(n, t, a), S = C(R), p = x(b);
+  return /* @__PURE__ */ y.jsx(
+    "div",
+    {
+      "data-cell-interactive": "",
+      "data-interaction-grouped": p ? "" : void 0,
+      "data-interaction-source": p ? b : void 0,
+      className: h(I, l),
+      "data-disabled": d,
+      style: S,
+      ...g,
+      children: s && typeof s == "function" ? s() : s
+    }
+  );
+}, F = O(D);
+F.displayName = "CardBackground";
+export {
+  F as C,
+  U as I,
+  _ as a,
+  $ as i,
+  E as m
+};