@telefonica/mistica 17.4.0 → 17.6.0

package/dist/card-internal.css-mistica.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     get actionsContainerVariants () {
-        return f;
+        return t;
     },
     get backgroundImageOrVideoContainer () {
-        return u;
+        return h;
     },
     get boxed () {
         return m;
@@ -22,16 +22,28 @@ _export(exports, {
         return a;
     },
     get containerPaddingBottomVariants () {
-        return y;
+        return e;
     },
     get containerPaddingTopVariants () {
-        return d;
+        return r;
     },
     get containerPaddingXVariants () {
-        return r;
+        return d;
     },
     get contentContainer () {
-        return c;
+        return l;
+    },
+    get selectionControl () {
+        return j;
+    },
+    get selectionControlContent () {
+        return O;
+    },
+    get selectionOutline () {
+        return k;
+    },
+    get selectionOutlineColor () {
+        return g;
     },
     get slotContainerSpaceBetween () {
         return C;
@@ -40,16 +52,16 @@ _export(exports, {
         return b;
     },
     get stretchedTouchable () {
-        return l;
+        return c;
     },
     get textContent () {
-        return p;
+        return u;
     },
     get topActionsContainer () {
-        return h;
+        return p;
     },
     get touchable () {
-        return t;
+        return y;
     },
     get touchableCardOverlay () {
         return o;
@@ -58,7 +70,7 @@ _export(exports, {
         return s;
     },
     get touchableContainer () {
-        return e;
+        return f;
     },
     get touchableContent () {
         return i;
@@ -68,21 +80,27 @@ _export(exports, {
     }
 });
 /* empty css                                     */ /* empty css                                         */ var n = {
-    aspectRatio: "var(--v17_4_1499nmd0)"
-}, a = "v17_4_1499nmd2 v17_4_1499nmd1 v17_4_1y2v1nfr8 v17_4_1y2v1nfre v17_4_1y2v1nfrj", r = {
-    display: "v17_4_1499nmd5 v17_4_1499nmd3 v17_4_1y2v1nfka v17_4_1y2v1nflj",
-    default: "v17_4_1499nmd6",
-    snap: "v17_4_1499nmd7 v17_4_1499nmd4 v17_4_1y2v1nfk4 v17_4_1y2v1nfld"
-}, d = {
-    display: "v17_4_1499nmda v17_4_1499nmd8 v17_4_1y2v1nfhs",
-    default: "v17_4_1499nmdb",
-    snap: "v17_4_1499nmdc v17_4_1499nmd9 v17_4_1y2v1nfhm"
-}, y = {
-    display: "v17_4_1499nmdf v17_4_1499nmdd v17_4_1y2v1nfj1",
-    default: "v17_4_1499nmdg",
-    snap: "v17_4_1499nmdh v17_4_1499nmde v17_4_1y2v1nfiv"
-}, f = {
-    display: "v17_4_1499nmdl v17_4_1499nmdi v17_4_1y2v1nfhs",
-    default: "v17_4_1499nmdm v17_4_1499nmdj v17_4_1y2v1nfhm",
-    snap: "v17_4_1499nmdn v17_4_1499nmdk v17_4_1y2v1nfhm"
-}, m = "v17_4_1499nmdo", t = "v17_4_1499nmdq v17_4_1499nmdp v17_4_1y2v1nfh7 v17_4_1y2v1nfig v17_4_1y2v1nfjp v17_4_1y2v1nfky v17_4_1y2v1nfre v17_4_1y2v1nfrk v17_4_1y2v1nftw v17_4_1y2v1nfh6 v17_4_1y2v1nfs1 v17_4_1y2v1nfsi", e = "v17_4_1499nmdr", i = "v17_4_1499nmdt v17_4_1499nmds v17_4_1y2v1nfr8 v17_4_1y2v1nfre v17_4_1y2v1nfs1 v17_4_1y2v1nfsi v17_4_1y2v1nfui v17_4_1y2v1nfr7", o = "v17_4_1499nmdv v17_4_1499nmdu", s = "v17_4_1499nmdw v17_4_1499nmdu", c = "v17_4_1499nmdy v17_4_1499nmdx v17_4_1y2v1nfre v17_4_1y2v1nfrj v17_4_1y2v1nfrq", l = "v17_4_1499nmdz", p = "v17_4_1499nmd11 v17_4_1499nmd10 v17_4_1y2v1nfre v17_4_1y2v1nfrk v17_4_1y2v1nfsi v17_4_1y2v1nfs1", h = "v17_4_1499nmd13 v17_4_1499nmd12 v17_4_1y2v1nfr9 v17_4_1y2v1nfut v17_4_1y2v1nfvn v17_4_1y2v1nfre v17_4_1y2v1nfrj", u = "v17_4_1499nmd15 v17_4_1499nmd14 v17_4_1y2v1nfs1 v17_4_1y2v1nfsi v17_4_1y2v1nfr9 v17_4_1y2v1nfwc", C = "v17_4_1499nmd16 v17_4_1y2v1nfre v17_4_1y2v1nfrk v17_4_1y2v1nfrq v17_4_1y2v1nfrz", b = "v17_4_1499nmd17";
+    aspectRatio: "var(--v17_6_1499nmd0)"
+}, a = "v17_6_1499nmd2 v17_6_1499nmd1 v17_6_1y2v1nfr8 v17_6_1y2v1nfre v17_6_1y2v1nfrj", d = {
+    display: "v17_6_1499nmd5 v17_6_1499nmd3 v17_6_1y2v1nfka v17_6_1y2v1nflj",
+    default: "v17_6_1499nmd6",
+    snap: "v17_6_1499nmd7 v17_6_1499nmd4 v17_6_1y2v1nfk4 v17_6_1y2v1nfld"
+}, r = {
+    display: "v17_6_1499nmda v17_6_1499nmd8 v17_6_1y2v1nfhs",
+    default: "v17_6_1499nmdb",
+    snap: "v17_6_1499nmdc v17_6_1499nmd9 v17_6_1y2v1nfhm"
+}, e = {
+    display: "v17_6_1499nmdf v17_6_1499nmdd v17_6_1y2v1nfj1",
+    default: "v17_6_1499nmdg",
+    snap: "v17_6_1499nmdh v17_6_1499nmde v17_6_1y2v1nfiv"
+}, t = {
+    display: "v17_6_1499nmdl v17_6_1499nmdi v17_6_1y2v1nfhs",
+    default: "v17_6_1499nmdm v17_6_1499nmdj v17_6_1y2v1nfhm",
+    snap: "v17_6_1499nmdn v17_6_1499nmdk v17_6_1y2v1nfhm"
+}, m = "v17_6_1499nmdo", y = "v17_6_1499nmdq v17_6_1499nmdp v17_6_1y2v1nfh7 v17_6_1y2v1nfig v17_6_1y2v1nfjp v17_6_1y2v1nfky v17_6_1y2v1nfre v17_6_1y2v1nfrk v17_6_1y2v1nftw v17_6_1y2v1nfh6 v17_6_1y2v1nfs1 v17_6_1y2v1nfsi", f = "v17_6_1499nmdr", i = "v17_6_1499nmdt v17_6_1499nmds v17_6_1y2v1nfr8 v17_6_1y2v1nfre v17_6_1y2v1nfs1 v17_6_1y2v1nfsi v17_6_1y2v1nfui v17_6_1y2v1nfr7", o = "v17_6_1499nmdv v17_6_1499nmdu", s = "v17_6_1499nmdw v17_6_1499nmdu", l = "v17_6_1499nmdy v17_6_1499nmdx v17_6_1y2v1nfre v17_6_1y2v1nfrj v17_6_1y2v1nfrq", c = "v17_6_1499nmdz", u = "v17_6_1499nmd11 v17_6_1499nmd10 v17_6_1y2v1nfre v17_6_1y2v1nfrk v17_6_1y2v1nfsi v17_6_1y2v1nfs1", p = "v17_6_1499nmd13 v17_6_1499nmd12 v17_6_1y2v1nfr9 v17_6_1y2v1nfut v17_6_1y2v1nfvn v17_6_1y2v1nfre v17_6_1y2v1nfrj", h = "v17_6_1499nmd15 v17_6_1499nmd14 v17_6_1y2v1nfs1 v17_6_1y2v1nfsi v17_6_1y2v1nfr9 v17_6_1y2v1nfwc", C = "v17_6_1499nmd16 v17_6_1y2v1nfre v17_6_1y2v1nfrk v17_6_1y2v1nfrq v17_6_1y2v1nfrz", b = "v17_6_1499nmd17", k = "v17_6_1499nmd18", g = {
+    default: "v17_6_1499nmd19",
+    alternative: "v17_6_1499nmd1a",
+    brand: "v17_6_1499nmd1b",
+    media: "v17_6_1499nmd1c",
+    negative: "v17_6_1499nmd1d"
+}, j = "v17_6_1499nmd1e", O = "v17_6_1499nmd1f";

package/dist/card-internal.css.d.ts

@@ -19,3 +19,7 @@ export declare const topActionsContainer: string;
 export declare const backgroundImageOrVideoContainer: string;
 export declare const slotContainerSpaceBetween: string;
 export declare const stretchedLink: string;
+export declare const selectionOutline: string;
+export declare const selectionOutlineColor: Record<"default" | "brand" | "negative" | "alternative" | "media", string>;
+export declare const selectionControl: string;
+export declare const selectionControlContent: string;

package/dist/card-internal.d.ts

@@ -6,7 +6,37 @@ import type { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
 import type { Variant } from './theme-variant-context';
 import type { VideoElement, VideoSource, AspectRatio as VideoAspectRatio } from './video';
 import type { AspectRatio as ImageAspectRatio } from './image';
-import type { PressHandler } from './touchable';
+import type { PressHandler, TouchableProps as BaseTouchableProps } from './touchable';
+type ControlProps = {
+    name?: string;
+    value?: boolean;
+    defaultValue?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+};
+export type CardSelectionProps = ExclusifyUnion<{
+    checkbox: ControlProps;
+} | {
+    switch: ControlProps;
+} | {
+    radioValue: string;
+}>;
+export declare const useControlState: ({ value, defaultValue, onChange, }?: {
+    value?: boolean;
+    defaultValue?: boolean;
+    onChange?: (isChecked: boolean) => void;
+}) => {
+    isChecked: boolean;
+    toggleChecked: () => void;
+};
+type CardControlProps = {
+    checkbox?: ControlProps;
+    switch?: ControlProps;
+    radioValue?: string;
+    checked: boolean;
+    onChange: () => void;
+};
+export declare const CardWithControl: ({ checkbox, switch: switchProps, radioValue, checked, onChange, ...props }: BaseTouchableProps & CardSelectionProps & Pick<CardControlProps, "checked" | "onChange">) => JSX.Element;
 export type CardAspectRatio = '1:1' | '16:9' | '7:10' | '9:10' | 'auto' | number;
 export type MediaAspectRatio = ImageAspectRatio | VideoAspectRatio | 'auto' | number;
 export type CardType = 'data' | 'media' | 'cover' | 'naked';
@@ -25,6 +55,7 @@ type ContainerProps = {
     type: CardType;
     size: CardSize;
     variant?: Variant;
+    selected?: boolean;
     width?: string | number;
     height?: string | number;
     /** Gradient overlay color for cover cards. If not set it uses the theme color */
@@ -131,7 +162,11 @@ type TouchableProps = {
     onPress: PressHandler | undefined;
 }>;
 type TouchableCard<T> = T & TouchableProps;
-export type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;
+export type CardInteractionProps<T> = ExclusifyUnion<(TouchableCard<T> & {
+    selected?: boolean;
+}) | (T & {
+    selected?: boolean;
+}) | (Omit<T, 'topActions' | 'onClose' | 'selected'> & CardSelectionProps)>;
 export type BackgroundImageOrVideoProps = {
     video?: React.ReactNode;
     src?: string;
@@ -190,5 +225,5 @@ type PrivateTopActionsProps = {
     containerStyles?: React.CSSProperties;
 };
 export declare const TopActions: ({ testid, onClose, closeButtonLabel, actions: actionsProp, variant, containerStyles, }: Omit<TopActionsProps, "topActions"> & PrivateTopActionsProps) => JSX.Element;
-export declare const InternalCard: React.ForwardRefExoticComponent<MaybeTouchableCard<CardProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const InternalCard: React.ForwardRefExoticComponent<CardInteractionProps<CardProps> & React.RefAttributes<HTMLDivElement>>;
 export {};