@fiscozen/card 0.1.6 → 1.0.0-beta.1

package/dist/card.js

@@ -1,6 +1,6 @@
-import { defineComponent as $, ref as D, computed as l, onMounted as E, openBlock as r, createElementBlock as c, normalizeClass as a, createElementVNode as y, toDisplayString as O, createCommentVNode as t, renderSlot as b, createBlock as u, unref as d, withDirectives as A, vShow as g } from "vue";
-import { FzIconButton as C, FzButton as w } from "@fiscozen/button";
-const j = { class: "flex flex-row gap-12 items-center" }, V = ["title"], Y = "border-1 border-solid border-grey-100 rounded flex flex-col", x = "h-64 border-solid p-16 flex flex-row justify-between", I = "h-64 border-t-1 border-solid p-16 flex justify-end gap-8 items-center", q = /* @__PURE__ */ $({
+import { defineComponent as O, useSlots as j, ref as M, watch as T, computed as n, onMounted as V, createElementBlock as i, openBlock as r, normalizeClass as a, createCommentVNode as t, withDirectives as A, createElementVNode as f, renderSlot as m, toDisplayString as Y, createBlock as s, unref as c, withModifiers as q, vShow as C } from "vue";
+import { FzIconButton as k, FzButton as h } from "@fiscozen/button";
+const x = { class: "flex flex-row gap-12 items-center" }, H = ["title"], L = { class: "flex flex-row gap-8 items-center" }, P = "border-1 border-solid border-grey-100 rounded flex flex-col", G = "border-solid pt-16 px-16 flex flex-row justify-between", J = "border-solid pt-0 px-16 pb-16 flex justify-end gap-12 items-center", R = /* @__PURE__ */ O({
   __name: "FzCard",
   props: {
     title: {},
@@ -11,114 +11,159 @@ const j = { class: "flex flex-row gap-12 items-center" }, V = ["title"], Y = "bo
     contentClass: {},
     collapsible: { type: Boolean },
     defaultExpanded: { type: Boolean },
-    alwaysAlive: { type: Boolean }
+    alwaysAlive: { type: Boolean },
+    hasInfoIcon: { type: Boolean },
+    environment: { default: "frontoffice" }
   },
-  emits: ["fzprimary:click", "fzsecondary:click", "fztertiary:click"],
-  setup(h, { expose: z, emit: B }) {
-    const e = h, p = B, i = D(e.defaultExpanded ?? !1), s = l(() => i.value || !e.collapsible), m = l(() => e.alwaysAlive || s.value), S = l(() => [
-      s.value ? "border-b-1" : "border-b-0",
-      e.collapsible ? "cursor-pointer" : ""
-    ]), F = l(() => {
-      switch (e.color) {
+  emits: ["fzprimary:click", "fzsecondary:click", "fztertiary:click", "fzcard:click-info"],
+  setup(z, { expose: B, emit: S }) {
+    const o = z, u = S, v = j(), d = M(o.defaultExpanded ?? !1);
+    T(
+      () => o.color === "aliceblue",
+      (e) => {
+        e && console.warn(
+          "[FzCard] The color prop value 'aliceblue' is deprecated and will be removed in a future version. Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now."
+        );
+      },
+      { immediate: !0 }
+    );
+    const y = n(() => o.color === "aliceblue" ? "blue" : o.color), p = n(() => d.value || !o.collapsible), g = n(() => o.alwaysAlive || p.value), $ = n(
+      () => o.title || v.header || v["header-content"]
+    ), F = n(() => [
+      o.collapsible ? "cursor-pointer" : ""
+    ]), N = n(() => {
+      switch (y.value) {
         case "blue":
           return "bg-background-alice-blue";
         case "orange":
           return "bg-background-seashell";
         case "purple":
           return "bg-background-pale-purple";
+        case "grey":
+          return "bg-background-white-smoke";
         default:
           return "bg-core-white";
       }
-    }), f = l(() => {
-      switch (e.color) {
+    }), I = n(() => "text-core-black"), D = n(() => {
+      switch (y.value) {
         case "blue":
-          return "border-blue-200";
+          return "border-background-alice-blue";
         case "orange":
           return "border-orange-200";
         case "purple":
           return "border-purple-200";
+        case "grey":
+          return "border-grey-200";
         default:
           return "border-grey-100";
       }
-    }), N = l(
-      () => e.primaryAction !== void 0 || e.secondaryAction !== void 0 || e.tertiaryAction !== void 0
+    });
+    n(() => {
+      switch (y.value) {
+        case "blue":
+        case "orange":
+        case "purple":
+        case "grey":
+          return "border-0";
+        default:
+          return "border-1";
+      }
+    });
+    const E = n(
+      () => o.primaryAction !== void 0 || o.secondaryAction !== void 0 || o.tertiaryAction !== void 0
     );
-    function v() {
-      e.collapsible && (i.value = !i.value);
+    function w() {
+      o.collapsible && (d.value = !d.value);
     }
-    return E(() => {
-      e.tertiaryAction && !e.secondaryAction && !e.primaryAction ? console.warn(
+    return V(() => {
+      o.tertiaryAction && !o.secondaryAction && !o.primaryAction ? console.warn(
         "[Fiscozen Design System]: You should set primaryAction and secondaryAction if you want to set tertiaryAction"
-      ) : e.secondaryAction && !e.primaryAction && console.warn(
+      ) : o.secondaryAction && !o.primaryAction && console.warn(
         "[Fiscozen Design System]: You should set primaryAction if you want to set secondaryAction"
       );
-    }), z({
+    }), B({
       /**
        * Method to toggle the card open/closed state
        */
-      toggleOpen: v
-    }), (o, n) => (r(), c("section", {
-      class: a([Y, F.value])
+      toggleOpen: w
+    }), (e, l) => (r(), i("section", {
+      class: a([P, N.value, I.value, D.value, { "pb-16": !p.value }])
     }, [
-      y("header", {
-        class: a([S.value, f.value]),
-        onClick: v
+      $.value ? (r(), i("header", {
+        key: 0,
+        class: a([F.value]),
+        onClick: w
       }, [
-        y("div", {
-          class: a(x)
+        f("div", {
+          class: a(G)
         }, [
-          y("div", j, [
-            o.title ? (r(), c("h2", {
+          f("div", x, [
+            e.title ? (r(), i("h2", {
               key: 0,
-              class: "text-core-black font-medium text-2xl m-0 p-0 break-words",
-              title: o.title
-            }, O(o.title), 9, V)) : t("", !0),
-            b(o.$slots, "header")
+              class: "text-core-black font-medium text-xl m-0 p-0 break-words",
+              title: e.title
+            }, Y(e.title), 9, H)) : t("", !0),
+            m(e.$slots, "header")
           ]),
-          o.collapsible ? (r(), u(d(C), {
-            key: 0,
-            iconName: i.value ? "chevron-up" : "chevron-down",
-            variant: "invisible"
-          }, null, 8, ["iconName"])) : t("", !0)
+          f("div", L, [
+            e.hasInfoIcon ? (r(), s(c(k), {
+              key: 0,
+              iconName: "circle-question",
+              variant: "invisible",
+              environment: e.environment,
+              onClick: l[0] || (l[0] = q((b) => u("fzcard:click-info"), ["stop"]))
+            }, null, 8, ["environment"])) : t("", !0),
+            e.collapsible ? (r(), s(c(k), {
+              key: 1,
+              iconName: d.value ? "chevron-up" : "chevron-down",
+              variant: "invisible",
+              environment: e.environment
+            }, null, 8, ["iconName", "environment"])) : t("", !0)
+          ])
         ]),
-        b(o.$slots, "header-content")
-      ], 2),
-      m.value ? A((r(), c("article", {
-        key: 0,
-        class: a(["p-20", o.contentClass])
+        m(e.$slots, "header-content")
+      ], 2)) : t("", !0),
+      g.value ? A((r(), i("article", {
+        key: 1,
+        class: a(["p-20", e.contentClass])
       }, [
-        b(o.$slots, "default")
+        m(e.$slots, "default")
       ], 2)), [
-        [g, s.value]
+        [C, p.value]
       ]) : t("", !0),
-      N.value && m.value ? A((r(), c("footer", {
-        key: 1,
-        class: a([I, f.value])
+      (v.footer || E.value) && g.value ? A((r(), i("footer", {
+        key: 2,
+        class: a([J])
       }, [
-        o.tertiaryAction ? (r(), u(d(C), {
-          key: 0,
-          onClick: n[0] || (n[0] = (k) => p("fztertiary:click")),
-          iconName: o.tertiaryAction.icon,
-          variant: "invisible"
-        }, null, 8, ["iconName"])) : t("", !0),
-        o.secondaryAction ? (r(), u(d(w), {
-          key: 1,
-          onClick: n[1] || (n[1] = (k) => p("fzsecondary:click")),
-          label: o.secondaryAction.label,
-          variant: "secondary"
-        }, null, 8, ["label"])) : t("", !0),
-        o.primaryAction ? (r(), u(d(w), {
-          key: 2,
-          onClick: n[2] || (n[2] = (k) => p("fzprimary:click")),
-          label: o.primaryAction.label,
-          variant: "primary"
-        }, null, 8, ["label"])) : t("", !0)
+        m(e.$slots, "footer", {}, () => [
+          e.tertiaryAction ? (r(), s(c(k), {
+            key: 0,
+            onClick: l[1] || (l[1] = (b) => u("fztertiary:click")),
+            iconName: e.tertiaryAction.icon,
+            variant: "invisible",
+            environment: e.environment
+          }, null, 8, ["iconName", "environment"])) : t("", !0),
+          e.secondaryAction ? (r(), s(c(h), {
+            key: 1,
+            onClick: l[2] || (l[2] = (b) => u("fzsecondary:click")),
+            label: e.secondaryAction.label,
+            variant: "secondary",
+            environment: e.environment
+          }, null, 8, ["label", "environment"])) : t("", !0),
+          e.primaryAction ? (r(), s(c(h), {
+            key: 2,
+            onClick: l[3] || (l[3] = (b) => u("fzprimary:click")),
+            label: e.primaryAction.label,
+            variant: "primary",
+            environment: e.environment
+          }, null, 8, ["label", "environment"])) : t("", !0)
+        ])
       ], 2)), [
-        [g, s.value]
+        [C, p.value]
       ]) : t("", !0)
     ], 2));
   }
 });
 export {
-  q as FzCard
+  R as FzCard
 };

package/dist/card.umd.cjs

@@ -1 +1 @@
-(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@fiscozen/button")):typeof define=="function"&&define.amd?define(["exports","vue","@fiscozen/button"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.FzCard={},r.Vue,r.button))})(this,function(r,e,l){"use strict";const y={class:"flex flex-row gap-12 items-center"},f=["title"],u="border-1 border-solid border-grey-100 rounded flex flex-col",b="h-64 border-solid p-16 flex flex-row justify-between",k="h-64 border-t-1 border-solid p-16 flex justify-end gap-8 items-center",C=e.defineComponent({__name:"FzCard",props:{title:{},color:{},primaryAction:{},secondaryAction:{},tertiaryAction:{},contentClass:{},collapsible:{type:Boolean},defaultExpanded:{type:Boolean},alwaysAlive:{type:Boolean}},emits:["fzprimary:click","fzsecondary:click","fztertiary:click"],setup(A,{expose:B,emit:z}){const o=A,c=z,a=e.ref(o.defaultExpanded??!1),i=e.computed(()=>a.value||!o.collapsible),s=e.computed(()=>o.alwaysAlive||i.value),h=e.computed(()=>[i.value?"border-b-1":"border-b-0",o.collapsible?"cursor-pointer":""]),g=e.computed(()=>{switch(o.color){case"blue":return"bg-background-alice-blue";case"orange":return"bg-background-seashell";case"purple":return"bg-background-pale-purple";default:return"bg-core-white"}}),d=e.computed(()=>{switch(o.color){case"blue":return"border-blue-200";case"orange":return"border-orange-200";case"purple":return"border-purple-200";default:return"border-grey-100"}}),w=e.computed(()=>o.primaryAction!==void 0||o.secondaryAction!==void 0||o.tertiaryAction!==void 0);function p(){o.collapsible&&(a.value=!a.value)}return e.onMounted(()=>{o.tertiaryAction&&!o.secondaryAction&&!o.primaryAction?console.warn("[Fiscozen Design System]: You should set primaryAction and secondaryAction if you want to set tertiaryAction"):o.secondaryAction&&!o.primaryAction&&console.warn("[Fiscozen Design System]: You should set primaryAction if you want to set secondaryAction")}),B({toggleOpen:p}),(t,n)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass([u,g.value])},[e.createElementVNode("header",{class:e.normalizeClass([h.value,d.value]),onClick:p},[e.createElementVNode("div",{class:e.normalizeClass(b)},[e.createElementVNode("div",y,[t.title?(e.openBlock(),e.createElementBlock("h2",{key:0,class:"text-core-black font-medium text-2xl m-0 p-0 break-words",title:t.title},e.toDisplayString(t.title),9,f)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"header")]),t.collapsible?(e.openBlock(),e.createBlock(e.unref(l.FzIconButton),{key:0,iconName:a.value?"chevron-up":"chevron-down",variant:"invisible"},null,8,["iconName"])):e.createCommentVNode("",!0)]),e.renderSlot(t.$slots,"header-content")],2),s.value?e.withDirectives((e.openBlock(),e.createElementBlock("article",{key:0,class:e.normalizeClass(["p-20",t.contentClass])},[e.renderSlot(t.$slots,"default")],2)),[[e.vShow,i.value]]):e.createCommentVNode("",!0),w.value&&s.value?e.withDirectives((e.openBlock(),e.createElementBlock("footer",{key:1,class:e.normalizeClass([k,d.value])},[t.tertiaryAction?(e.openBlock(),e.createBlock(e.unref(l.FzIconButton),{key:0,onClick:n[0]||(n[0]=m=>c("fztertiary:click")),iconName:t.tertiaryAction.icon,variant:"invisible"},null,8,["iconName"])):e.createCommentVNode("",!0),t.secondaryAction?(e.openBlock(),e.createBlock(e.unref(l.FzButton),{key:1,onClick:n[1]||(n[1]=m=>c("fzsecondary:click")),label:t.secondaryAction.label,variant:"secondary"},null,8,["label"])):e.createCommentVNode("",!0),t.primaryAction?(e.openBlock(),e.createBlock(e.unref(l.FzButton),{key:2,onClick:n[2]||(n[2]=m=>c("fzprimary:click")),label:t.primaryAction.label,variant:"primary"},null,8,["label"])):e.createCommentVNode("",!0)],2)),[[e.vShow,i.value]]):e.createCommentVNode("",!0)],2))}});r.FzCard=C,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@fiscozen/button")):typeof define=="function"&&define.amd?define(["exports","vue","@fiscozen/button"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.FzCard={},t.Vue,t.button))})(this,function(t,e,l){"use strict";const u={class:"flex flex-row gap-12 items-center"},y=["title"],b={class:"flex flex-row gap-8 items-center"},k="border-1 border-solid border-grey-100 rounded flex flex-col",C="border-solid pt-16 px-16 flex flex-row justify-between",B="border-solid pt-0 px-16 pb-16 flex justify-end gap-12 items-center",g=e.defineComponent({__name:"FzCard",props:{title:{},color:{},primaryAction:{},secondaryAction:{},tertiaryAction:{},contentClass:{},collapsible:{type:Boolean},defaultExpanded:{type:Boolean},alwaysAlive:{type:Boolean},hasInfoIcon:{type:Boolean},environment:{default:"frontoffice"}},emits:["fzprimary:click","fzsecondary:click","fztertiary:click","fzcard:click-info"],setup(h,{expose:w,emit:z}){const n=h,a=z,s=e.useSlots(),i=e.ref(n.defaultExpanded??!1);e.watch(()=>n.color==="aliceblue",o=>{o&&console.warn("[FzCard] The color prop value 'aliceblue' is deprecated and will be removed in a future version. Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now.")},{immediate:!0});const d=e.computed(()=>n.color==="aliceblue"?"blue":n.color),c=e.computed(()=>i.value||!n.collapsible),p=e.computed(()=>n.alwaysAlive||c.value),A=e.computed(()=>n.title||s.header||s["header-content"]),N=e.computed(()=>[n.collapsible?"cursor-pointer":""]),S=e.computed(()=>{switch(d.value){case"blue":return"bg-background-alice-blue";case"orange":return"bg-background-seashell";case"purple":return"bg-background-pale-purple";case"grey":return"bg-background-white-smoke";default:return"bg-core-white"}}),V=e.computed(()=>"text-core-black"),F=e.computed(()=>{switch(d.value){case"blue":return"border-background-alice-blue";case"orange":return"border-orange-200";case"purple":return"border-purple-200";case"grey":return"border-grey-200";default:return"border-grey-100"}});e.computed(()=>{switch(d.value){case"blue":case"orange":case"purple":case"grey":return"border-0";default:return"border-1"}});const E=e.computed(()=>n.primaryAction!==void 0||n.secondaryAction!==void 0||n.tertiaryAction!==void 0);function f(){n.collapsible&&(i.value=!i.value)}return e.onMounted(()=>{n.tertiaryAction&&!n.secondaryAction&&!n.primaryAction?console.warn("[Fiscozen Design System]: You should set primaryAction and secondaryAction if you want to set tertiaryAction"):n.secondaryAction&&!n.primaryAction&&console.warn("[Fiscozen Design System]: You should set primaryAction if you want to set secondaryAction")}),w({toggleOpen:f}),(o,r)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass([k,S.value,V.value,F.value,{"pb-16":!c.value}])},[A.value?(e.openBlock(),e.createElementBlock("header",{key:0,class:e.normalizeClass([N.value]),onClick:f},[e.createElementVNode("div",{class:e.normalizeClass(C)},[e.createElementVNode("div",u,[o.title?(e.openBlock(),e.createElementBlock("h2",{key:0,class:"text-core-black font-medium text-xl m-0 p-0 break-words",title:o.title},e.toDisplayString(o.title),9,y)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"header")]),e.createElementVNode("div",b,[o.hasInfoIcon?(e.openBlock(),e.createBlock(e.unref(l.FzIconButton),{key:0,iconName:"circle-question",variant:"invisible",environment:o.environment,onClick:r[0]||(r[0]=e.withModifiers(m=>a("fzcard:click-info"),["stop"]))},null,8,["environment"])):e.createCommentVNode("",!0),o.collapsible?(e.openBlock(),e.createBlock(e.unref(l.FzIconButton),{key:1,iconName:i.value?"chevron-up":"chevron-down",variant:"invisible",environment:o.environment},null,8,["iconName","environment"])):e.createCommentVNode("",!0)])]),e.renderSlot(o.$slots,"header-content")],2)):e.createCommentVNode("",!0),p.value?e.withDirectives((e.openBlock(),e.createElementBlock("article",{key:1,class:e.normalizeClass(["p-20",o.contentClass])},[e.renderSlot(o.$slots,"default")],2)),[[e.vShow,c.value]]):e.createCommentVNode("",!0),(s.footer||E.value)&&p.value?e.withDirectives((e.openBlock(),e.createElementBlock("footer",{key:2,class:e.normalizeClass([B])},[e.renderSlot(o.$slots,"footer",{},()=>[o.tertiaryAction?(e.openBlock(),e.createBlock(e.unref(l.FzIconButton),{key:0,onClick:r[1]||(r[1]=m=>a("fztertiary:click")),iconName:o.tertiaryAction.icon,variant:"invisible",environment:o.environment},null,8,["iconName","environment"])):e.createCommentVNode("",!0),o.secondaryAction?(e.openBlock(),e.createBlock(e.unref(l.FzButton),{key:1,onClick:r[2]||(r[2]=m=>a("fzsecondary:click")),label:o.secondaryAction.label,variant:"secondary",environment:o.environment},null,8,["label","environment"])):e.createCommentVNode("",!0),o.primaryAction?(e.openBlock(),e.createBlock(e.unref(l.FzButton),{key:2,onClick:r[3]||(r[3]=m=>a("fzprimary:click")),label:o.primaryAction.label,variant:"primary",environment:o.environment},null,8,["label","environment"])):e.createCommentVNode("",!0)])],2)),[[e.vShow,c.value]]):e.createCommentVNode("",!0)],2))}});t.FzCard=g,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/dist/src/FzCard.vue.d.ts

@@ -1,20 +1,28 @@
 import { FzCardProps, FzCardSlots } from './types';
 
 declare function toggleOpen(): void;
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<FzCardProps>, {
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FzCardProps>, {
+    environment: string;
+}>>, {
     /**
      * Method to toggle the card open/closed state
      */
     toggleOpen: typeof toggleOpen;
-}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "fzprimary:click": () => void;
     "fzsecondary:click": () => void;
     "fztertiary:click": () => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<FzCardProps>>> & {
+    "fzcard:click-info": () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FzCardProps>, {
+    environment: string;
+}>>> & Readonly<{
     "onFzprimary:click"?: (() => any) | undefined;
     "onFzsecondary:click"?: (() => any) | undefined;
     "onFztertiary:click"?: (() => any) | undefined;
-}, {}, {}>, Readonly<FzCardSlots> & FzCardSlots>;
+    "onFzcard:click-info"?: (() => any) | undefined;
+}>, {
+    environment: import('./types').FzCardEnvironment;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, Readonly<FzCardSlots> & FzCardSlots>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -25,6 +33,14 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/src/types.d.ts

@@ -2,7 +2,7 @@ export type FzCardProps = {
     /**
      * The title of the card
      */
-    title: string;
+    title?: string;
     /**
      * The background color of the card
      */
@@ -35,6 +35,16 @@ export type FzCardProps = {
      * Whether the card content is always alive (never destroyed) when collapsed
      */
     alwaysAlive?: boolean;
+    /**
+     * Whether to show an info icon in the header
+     * @default false
+     */
+    hasInfoIcon?: boolean;
+    /**
+     * The environment context for the card buttons
+     * @default 'frontoffice'
+     */
+    environment?: FzCardEnvironment;
 };
 type FzCardButton = {
     label: string;
@@ -42,23 +52,49 @@ type FzCardButton = {
 type FzCardIconButton = {
     icon: string;
 };
-export type FzCardColor = "purple" | "orange" | "blue";
+/**
+ * Card background color variants.
+ *
+ * @remarks
+ * - 'default' renders a white background
+ * - 'blue' renders an alice-blue background
+ * - 'orange' renders a seashell background
+ * - 'purple' renders a pale-purple background
+ * - 'grey' renders a white-smoke background
+ *
+ * @deprecated 'aliceblue' is deprecated and will be removed in a future version. Use 'blue' instead.
+ */
+export type FzCardColor = "default" | "blue" | "orange" | "purple" | "grey" | "aliceblue";
+/**
+ * Card environment context for buttons
+ *
+ * @remarks
+ * Determines the visual style context for all buttons within the card
+ * - 'backoffice' for internal/admin interfaces
+ * - 'frontoffice' for public-facing interfaces
+ */
+export type FzCardEnvironment = "backoffice" | "frontoffice";
 export interface FzCardEvents {
     /**
      * Event emitted when the primary action is clicked
      * @type {() => void}
      */
-    (event: 'fzprimary:click'): void;
+    (event: "fzprimary:click"): void;
     /**
      * Event emitted when the secondary action is clicked
      * @type {() => void}
      */
-    (event: 'fzsecondary:click'): void;
+    (event: "fzsecondary:click"): void;
     /**
      * Event emitted when the tertiary action is clicked
      * @type {() => void}
      */
-    (event: 'fztertiary:click'): void;
+    (event: "fztertiary:click"): void;
+    /**
+     * Event emitted when the info icon is clicked
+     * @type {() => void}
+     */
+    (event: "fzcard:click-info"): void;
 }
 export interface FzCardSlots {
     /**
@@ -72,6 +108,10 @@ export interface FzCardSlots {
     /**
      * Slot for the header content, it will be displayed below the title
      */
-    'header-content'(props: {}): any;
+    "header-content"(props: {}): any;
+    /**
+     * Slot for the footer of the card
+     */
+    footer(props: {}): any;
 }
 export {};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@fiscozen/card",
-  "version": "0.1.6",
+  "version": "1.0.0-beta.1",
   "description": "Design System Card component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/icons": "^0.1.34",
-    "@fiscozen/button": "^0.1.13"
+    "@fiscozen/button": "^1.0.0",
+    "@fiscozen/icons": "^0.1.35"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
@@ -33,9 +33,9 @@
     "@awesome.me/kit-8137893ad3": "^1.0.65",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
+    "@fiscozen/tsconfig": "^0.1.0",
     "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/eslint-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {