prometeo-design-system 7.1.3 → 7.1.4

package/dist/Chip.es.js

@@ -1,37 +1,37 @@
 import { j as o } from "./jsx-runtime-GkKLlHH4.js";
-import { memo as x, forwardRef as U, useMemo as N, useCallback as v } from "react";
-import { c as m } from "./index-BOQuZ0gG.js";
-import { c as h } from "./cn-B6yFEsav.js";
-import { i as R } from "./iconUtils-rTOfKDxE.js";
-import { Close as B } from "./Icons/Close.es.js";
-import { A as F } from "./AvatarBase-sKVPLn_O.js";
-const K = {
+import { memo as C, forwardRef as B, useMemo as N, useCallback as p } from "react";
+import { c as h } from "./index-BOQuZ0gG.js";
+import { c as v } from "./cn-B6yFEsav.js";
+import { i as V } from "./iconUtils-rTOfKDxE.js";
+import { Close as F } from "./Icons/Close.es.js";
+import { A as K } from "./AvatarBase-sKVPLn_O.js";
+const q = {
   small: "h-5 px-2 text-xs prometeo-fonts-body-small",
   medium: "h-8 px-3 text-sm prometeo-fonts-body-medium",
   large: "h-9 px-3 text-sm prometeo-fonts-body-medium"
-}, q = {
+}, Q = {
   default: "text-neutral-default-default border-neutral-default-default bg-inherit rounded-lg font-semibold",
   error: "",
   success: ""
-}, Q = "border-neutral-strong-default text-neutral-default-disabled", Z = "text-neutral-default-disabled", $ = ["leading", "avatar"], J = ["default", "error", "success"];
-function W(e) {
-  return $.includes(e);
-}
-function V(e) {
+}, Z = "border-neutral-strong-default text-neutral-default-disabled", $ = "text-neutral-default-disabled", J = ["leading", "avatar"], W = ["default", "error", "success"];
+function X(e) {
   return J.includes(e);
 }
-function X(e) {
-  const a = e.layout ?? (W(e.variant) ? e.variant : void 0), s = e.semanticVariant ?? (V(e.variant) ? e.variant : void 0), i = a ?? (e.avatar ? "avatar" : "leading"), f = !!e.onRemove || !!e.size || !!s || !!e.semanticVariant || V(e.variant);
+function H(e) {
+  return W.includes(e);
+}
+function ee(e) {
+  const a = e.layout ?? (X(e.variant) ? e.variant : void 0), s = e.semanticVariant ?? (H(e.variant) ? e.variant : void 0), i = a ?? (e.avatar ? "avatar" : "leading"), m = !!e.onRemove || !!e.size || !!s || !!e.semanticVariant || H(e.variant);
   return {
     layout: i,
     legacySemanticVariant: s,
-    legacySizeClass: e.size ? K[e.size] : void 0,
-    legacySemanticContainerClass: s ? q[s] : void 0,
+    legacySizeClass: e.size ? q[e.size] : void 0,
+    legacySemanticContainerClass: s ? Q[s] : void 0,
     useLegacyRemoveHandler: !!e.onRemove,
-    isLegacyMode: f
+    isLegacyMode: m
   };
 }
-const ee = m(
+const ae = h(
   "group/chip flex items-center gap-1 p-2 w-max h-8 radius-medium border transition-all duration-300 ease-in-out",
   {
     variants: {
@@ -118,7 +118,7 @@ const ee = m(
       }
     ]
   }
-), ae = m(
+), re = h(
   "pyrion-fonts-label-medium transition-all duration-300 ease-in-out select-none",
   {
     variants: {
@@ -211,7 +211,7 @@ const ee = m(
       }
     ]
   }
-), re = m("transition-all duration-300 ease-in-out", {
+), te = h("transition-all duration-300 ease-in-out", {
   variants: {
     isSelected: {
       true: "",
@@ -295,7 +295,7 @@ const ee = m(
       className: "icon-disabled-ondisabled group-hover/chip:icon-disabled-ondisabled group-active/chip:icon-disabled-ondisabled"
     }
   ]
-}), te = m(
+}), se = h(
   "transition-all duration-300 ease-in-out border-neutral-default-default border",
   {
     variants: {
@@ -349,145 +349,146 @@ const ee = m(
       }
     ]
   }
-), se = {
+), de = {
   size: "xsmall",
   name: "A B"
 };
-function de(e, a, s) {
+function oe(e, a, s) {
   return {
     isSelected: !!e,
     disabled: !!a,
     forcedStatus: s
   };
 }
-function oe(e) {
+function ne(e) {
   return N(
     () => ({
-      container: ee(e),
-      label: ae(e),
-      icon: re(e),
-      avatar: te(e)
+      container: ae(e),
+      label: re(e),
+      icon: te(e),
+      avatar: se(e)
     }),
     [e.isSelected, e.disabled, e.forcedStatus]
   );
 }
-const H = x(function({
+const D = C(function({
   icon: a,
   className: s,
   size: i = 16
 }) {
   return /* @__PURE__ */ o.jsx(a, { size: i, className: s });
-}), ne = x(function({
+}), ie = C(function({
   avatar: a,
   className: s
 }) {
-  return /* @__PURE__ */ o.jsx(F, { ...a, className: s });
+  return /* @__PURE__ */ o.jsx(K, { ...a, className: s });
 });
-function ie(e, a) {
-  return e.label === a.label && e.isSelected === a.isSelected && e.disabled === a.disabled && e.forcedStatus === a.forcedStatus && e.layout === a.layout && e.variant === a.variant && e.semanticVariant === a.semanticVariant && e.className === a.className && e.onRemove === a.onRemove && e.id === a.id && e.size === a.size && e.tabIndex === a.tabIndex && e.leadingIcon === a.leadingIcon && e.trailingIcon === a.trailingIcon && e.onClick === a.onClick && e.onTrailingIconClick === a.onTrailingIconClick && e.avatar?.imageUrl === a.avatar?.imageUrl && e.avatar?.name === a.avatar?.name;
+function le(e, a) {
+  return e.label === a.label && e.isSelected === a.isSelected && e.disabled === a.disabled && e.forcedStatus === a.forcedStatus && e.layout === a.layout && e.variant === a.variant && e.semanticVariant === a.semanticVariant && e.className === a.className && e.onRemove === a.onRemove && e.id === a.id && e.size === a.size && e.tabIndex === a.tabIndex && e.leadingIcon === a.leadingIcon && e.leadingSlot === a.leadingSlot && e.trailingIcon === a.trailingIcon && e.onClick === a.onClick && e.onTrailingIconClick === a.onTrailingIconClick && e.avatar?.imageUrl === a.avatar?.imageUrl && e.avatar?.name === a.avatar?.name;
 }
-const le = x(
-  U(function({
+const ce = C(
+  B(function({
     isSelected: a = !1,
     label: s,
     leadingIcon: i,
-    trailingIcon: f,
-    forcedStatus: D,
-    onTrailingIconClick: p,
+    leadingSlot: m,
+    trailingIcon: x,
+    forcedStatus: P,
+    onTrailingIconClick: f,
     onClick: l,
     disabled: r = !1,
     avatar: c,
-    variant: C,
-    layout: L,
-    semanticVariant: A,
+    variant: L,
+    layout: A,
+    semanticVariant: I,
     onRemove: u,
     id: g,
-    size: I,
+    size: _,
     tabIndex: y,
-    className: P
-  }, j) {
+    className: j
+  }, T) {
     const t = N(
-      () => X({
-        layout: L,
-        variant: C,
-        semanticVariant: A,
+      () => ee({
+        layout: A,
+        variant: L,
+        semanticVariant: I,
         avatar: c,
         onRemove: u,
-        size: I
+        size: _
       }),
-      [L, C, A, c, u, I]
-    ), T = de(a, r, D), b = oe(T), _ = R(i) ? i : null, S = R(f) ? f : t.useLegacyRemoveHandler ? B : null, z = N(
-      () => ({ ...se, ...c }),
+      [A, L, I, c, u, _]
+    ), z = oe(a, r, P), b = ne(z), E = V(i) ? i : null, S = V(x) ? x : t.useLegacyRemoveHandler ? F : null, M = N(
+      () => ({ ...de, ...c }),
       [c?.imageUrl, c?.name]
-    ), n = !r && !!l, E = t.layout === "avatar", M = y !== void 0 ? y : n ? 0 : void 0, w = v(
+    ), n = !r && !!l, R = t.layout === "avatar", w = y !== void 0 ? y : n ? 0 : void 0, Y = p(
       (d) => {
-        r || (d.preventDefault(), d.stopPropagation(), p?.(d));
+        r || (d.preventDefault(), d.stopPropagation(), f?.(d));
       },
-      [r, p]
-    ), Y = v(
+      [r, f]
+    ), k = p(
       (d) => {
         r || (d.stopPropagation(), d.preventDefault(), g != null && u?.(g));
       },
       [r, g, u]
-    ), k = v(
+    ), G = p(
       (d) => {
         r || l?.(d);
       },
       [r, l]
-    ), G = v(
+    ), O = p(
       (d) => {
         !n || r || d.key !== "Enter" && d.key !== " " || (d.preventDefault(), l?.(d));
       },
       [r, n, l]
-    ), O = !!S && (!!p || t.useLegacyRemoveHandler);
+    ), U = !!S && (!!f || t.useLegacyRemoveHandler);
     return /* @__PURE__ */ o.jsxs(
       "div",
       {
-        ref: j,
-        className: h(
+        ref: T,
+        className: v(
           b.container,
           !t.legacySizeClass && "h-8",
           t.legacySizeClass,
           t.legacySemanticContainerClass,
           t.isLegacyMode && "inline-flex font-semibold",
           n && "cursor-pointer",
-          r && t.isLegacyMode && Q,
+          r && t.isLegacyMode && Z,
           r && "pointer-events-none",
-          P
+          j
         ),
-        onClick: n ? k : void 0,
-        onKeyDown: n ? G : void 0,
+        onClick: n ? G : void 0,
+        onKeyDown: n ? O : void 0,
         "aria-disabled": r || void 0,
         role: n ? "button" : void 0,
-        tabIndex: M,
+        tabIndex: w,
         children: [
           /* @__PURE__ */ o.jsxs("div", { className: "flex items-center gap-1 min-w-0", children: [
-            _ && !E && /* @__PURE__ */ o.jsx(H, { icon: _, className: b.icon }),
-            E && /* @__PURE__ */ o.jsx(ne, { avatar: z, className: b.avatar }),
-            /* @__PURE__ */ o.jsx("span", { className: h(b.label, "truncate"), children: s })
+            !R && (m ?? (E && /* @__PURE__ */ o.jsx(D, { icon: E, className: b.icon }))),
+            R && /* @__PURE__ */ o.jsx(ie, { avatar: M, className: b.avatar }),
+            /* @__PURE__ */ o.jsx("span", { className: v(b.label, "truncate"), children: s })
           ] }),
-          O && S && /* @__PURE__ */ o.jsx(
+          U && S && /* @__PURE__ */ o.jsx(
             "button",
             {
               type: "button",
               disabled: r,
               tabIndex: y,
-              onMouseDown: t.useLegacyRemoveHandler ? Y : void 0,
-              onClick: t.useLegacyRemoveHandler ? void 0 : w,
-              className: h(
+              onMouseDown: t.useLegacyRemoveHandler ? k : void 0,
+              onClick: t.useLegacyRemoveHandler ? void 0 : Y,
+              className: v(
                 "shrink-0",
-                (p || u) && !r && "cursor-pointer",
+                (f || u) && !r && "cursor-pointer",
                 t.useLegacyRemoveHandler && "p-0.5 z-10 transition-all duration-200 hover:scale-105",
                 t.useLegacyRemoveHandler && r && "cursor-default hover:scale-100"
               ),
               "aria-label": `Quitar ${s}`,
               children: /* @__PURE__ */ o.jsx(
-                H,
+                D,
                 {
                   icon: S,
-                  className: h(
+                  className: v(
                     b.icon,
-                    r && t.isLegacyMode && Z
+                    r && t.isLegacyMode && $
                   ),
                   size: t.useLegacyRemoveHandler ? 18 : 16
                 }
@@ -498,9 +499,9 @@ const le = x(
       }
     );
   }),
-  ie
+  le
 );
-le.displayName = "Chip";
+ce.displayName = "Chip";
 export {
-  le as default
+  ce as default
 };

package/dist/components/Chips/chipTypes.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { IconComponent } from '../../Icons';
 import { ComponentVariant, SizeVariant } from '../Shared/types';
 import { AvatarBaseProps } from '../Avatar/AvatarBase';
@@ -6,7 +7,7 @@ export type ChipAvatarProps = Pick<AvatarBaseProps, "imageUrl" | "name">;
 export type ChipForcedStatus = "default" | "hovered" | "pressed" | "disabled";
 /** Layout del chip o variante semántica legacy. */
 export type ChipVariantProp = ChipLayout | ComponentVariant;
-export interface ChipProps {
+interface ChipBaseProps {
     label: string;
     layout?: ChipLayout;
     /**
@@ -19,7 +20,6 @@ export interface ChipProps {
      */
     semanticVariant?: ComponentVariant;
     isSelected?: boolean;
-    leadingIcon?: IconComponent;
     trailingIcon?: IconComponent;
     onTrailingIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -41,6 +41,15 @@ export interface ChipProps {
     /** @deprecated Evitá overridear estilos del sistema. */
     className?: string;
 }
+type ChipPropsWithLeadingIcon = ChipBaseProps & {
+    leadingIcon?: IconComponent;
+    leadingSlot?: never;
+};
+type ChipPropsWithLeadingSlot = ChipBaseProps & {
+    leadingSlot?: React.ReactNode;
+    leadingIcon?: never;
+};
+export type ChipProps = ChipPropsWithLeadingIcon | ChipPropsWithLeadingSlot;
 export type ResolvedChipConfig = {
     layout: ChipLayout;
     legacySemanticVariant?: ComponentVariant;
@@ -53,3 +62,4 @@ export declare function isChipLayout(value?: string): value is ChipLayout;
 export declare function isLegacySemanticVariant(value?: string): value is ComponentVariant;
 export type ChipConfigInput = Pick<ChipProps, "layout" | "variant" | "semanticVariant" | "avatar" | "onRemove" | "size">;
 export declare function resolveChipConfig(props: ChipConfigInput): ResolvedChipConfig;
+export {};