@fiscozen/checkbox 1.0.1 → 1.1.0

package/dist/src/types.d.ts

@@ -1,4 +1,4 @@
-import { FzTooltipProps } from '@fiscozen/tooltip';
+import { FzTooltipProps, FzTooltipStatus } from '@fiscozen/tooltip';
 
 /**
  * Props for the FzCheckbox component.
@@ -136,7 +136,7 @@ export type FzCheckboxGroupProps = {
      *   }
      * ]
      */
-    options: ParentCheckbox[];
+    options?: ParentCheckbox[];
     /**
      * Applies emphasis styling to all checkboxes in the group.
      * Icons turn blue when checked.
@@ -190,3 +190,72 @@ export type ParentCheckbox = ChildCheckbox & {
  * Inherits all FzCheckboxProps except 'size' which is controlled by the parent group.
  */
 export type ChildCheckbox = Omit<FzCheckboxProps, "size">;
+/**
+ * Shared props for all FzCheckboxCard variants.
+ */
+type FzCheckboxCardBaseProps = Omit<FzCheckboxProps, "standalone" | "indeterminate" | "ariaOwns" | "checkboxId" | "value" | "tooltip"> & {
+    /**
+     * Value associated with the card when used in array v-model.
+     * Falls back to label if not provided.
+     */
+    value?: string | number;
+    /**
+     * Primary title text displayed in the card.
+     */
+    title: string;
+    /**
+     * Optional secondary description text below the title.
+     */
+    subtitle?: string;
+    /**
+     * Alt text for the card image.
+     */
+    imageAlt?: string;
+    /**
+     * Text to display in the tooltip.
+     */
+    tooltip?: string;
+    /**
+     * Status of the tooltip (determines color and icon).
+     */
+    tooltipStatus?: FzTooltipStatus;
+    /**
+     * Controls whether the checkbox icon is shown inside the card.
+     *
+     * @default true
+     */
+    hasCheckbox?: boolean;
+    /**
+     * Group name for the checkbox, used for form submission.
+     */
+    name?: string;
+};
+/**
+ * Horizontal card layout: image left, text right (compact).
+ * Image is optional.
+ *
+ * @default variant is 'horizontal' when omitted
+ */
+type FzCheckboxCardHorizontal = FzCheckboxCardBaseProps & {
+    variant?: "horizontal";
+    imageUrl?: string;
+};
+/**
+ * Vertical card layout: image top, text bottom (full-width image).
+ * Image is required — the vertical layout is designed around the image.
+ */
+type FzCheckboxCardVertical = FzCheckboxCardBaseProps & {
+    variant: "vertical";
+    imageUrl: string;
+};
+/**
+ * Props for the FzCheckboxCard component.
+ *
+ * A card-style checkbox with title, subtitle, optional image and tooltip.
+ * Uses a discriminated union on `variant` to enforce that the vertical layout
+ * always includes an image (since the layout is designed around it).
+ *
+ * Uses array v-model for multi-select.
+ */
+export type FzCheckboxCardProps = FzCheckboxCardHorizontal | FzCheckboxCardVertical;
+export {};

package/dist/style.css

@@ -1 +1 @@
-.fz-icon-button-wrapper[data-v-b4be112d]>button{gap:0!important;min-width:0!important}.fz-icon-button-wrapper--backoffice[data-v-b4be112d]>button{padding-left:5px;padding-right:5px}.fz-icon-button-wrapper--frontoffice[data-v-b4be112d]>button{padding-left:11px;padding-right:11px}.fz-container[data-v-8c40daeb]{display:flex}.fz-container--vertical[data-v-8c40daeb]{flex-direction:column}.fz-container--horizontal[data-v-8c40daeb]{flex-direction:row;flex-wrap:nowrap}.fz-container.align-items-start[data-v-8c40daeb]{align-items:flex-start}.fz-container.align-items-center[data-v-8c40daeb]{align-items:center}.fz-container.align-items-end[data-v-8c40daeb]{align-items:flex-end}.fz-container.align-items-stretch[data-v-8c40daeb]{align-items:stretch}.fz-container.align-items-baseline[data-v-8c40daeb]{align-items:baseline}.fz-container--horizontal.layout-expand-first[data-v-8c40daeb]>*:first-child{flex-grow:1}.fz-container--horizontal.layout-expand-all[data-v-8c40daeb]>*{flex-grow:1}.fz-container--horizontal.layout-space-between[data-v-8c40daeb]{justify-content:space-between}.fz-container--horizontal.layout-expand-last[data-v-8c40daeb]>*:last-child{flex-grow:1}.fz-container--vertical.gap-main-content-sm[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--main-content-sm, 32px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-main-content-base[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--main-content-base, 48px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-main-content-lg[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--main-content-lg, 64px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-none[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-none, 0px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-xs[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-xs, 8px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-sm[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-sm, 16px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-base[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-base, 24px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-lg[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-lg, 32px)) + var(--paragraph-gap, 8px))}.fz-container--horizontal[data-v-8c40daeb]>p+p{margin-top:0}.fz-button-group[data-v-79dd8b6f]>*:nth-child(1):nth-last-child(2),.fz-button-group[data-v-79dd8b6f]>*:nth-child(1):nth-last-child(2)~*{flex-basis:50%;flex-grow:0;flex-shrink:1}.fz-button-group[data-v-79dd8b6f]>*:nth-child(1):nth-last-child(3),.fz-button-group[data-v-79dd8b6f]>*:nth-child(1):nth-last-child(3)~*{flex-basis:33.333%;flex-grow:0;flex-shrink:1}.fz-button-group[data-v-79dd8b6f]>.fz-icon-button-wrapper{flex-basis:initial!important;flex-grow:0!important;flex-shrink:0!important}.fz__tooltip__text[data-v-94597a6c]{overflow-wrap:anywhere}.bg-semantic-info-50[data-v-f72b7e4a]{background-color:#f3f7ff}.bg-semantic-error-50[data-v-f72b7e4a]{background-color:#fef3f3}.bg-semantic-warning-50[data-v-f72b7e4a]{background-color:#fff8f3}.bg-semantic-success-50[data-v-f72b7e4a]{background-color:#f2f8f6}.fz-hidden-input[data-v-2b198cc9]{opacity:0;margin:0;height:0;border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.group[data-error]:hover:not([data-disabled]) .peer~label>div[data-v-2b198cc9]{color:var(--semantic-error-300)!important}.group[data-error]:hover:not([data-disabled]) .peer~label[data-v-2b198cc9]{color:var(--semantic-error-300)!important}.group[data-emphasis]:hover:not([data-disabled]):not([data-error]) .peer~label>div[data-v-2b198cc9]{color:var(--blue-600)!important}.group:hover:not([data-emphasis]):not([data-error]):not([data-disabled]) .peer:checked~label>div[data-v-2b198cc9]{color:var(--core-black)!important}.group:hover:not([data-emphasis]):not([data-error]):not([data-disabled]) .peer:indeterminate~label>div[data-v-2b198cc9]{color:var(--core-black)!important}.group:hover:not([data-emphasis]):not([data-error]):not([data-disabled]) .peer:not(:checked):not(:indeterminate)~label>div[data-v-2b198cc9]{color:var(--blue-600)!important}
+.fz-icon-button-wrapper[data-v-b4be112d]>button{gap:0!important;min-width:0!important}.fz-icon-button-wrapper--backoffice[data-v-b4be112d]>button{padding-left:5px;padding-right:5px}.fz-icon-button-wrapper--frontoffice[data-v-b4be112d]>button{padding-left:11px;padding-right:11px}.fz-container[data-v-8c40daeb]{display:flex}.fz-container--vertical[data-v-8c40daeb]{flex-direction:column}.fz-container--horizontal[data-v-8c40daeb]{flex-direction:row;flex-wrap:nowrap}.fz-container.align-items-start[data-v-8c40daeb]{align-items:flex-start}.fz-container.align-items-center[data-v-8c40daeb]{align-items:center}.fz-container.align-items-end[data-v-8c40daeb]{align-items:flex-end}.fz-container.align-items-stretch[data-v-8c40daeb]{align-items:stretch}.fz-container.align-items-baseline[data-v-8c40daeb]{align-items:baseline}.fz-container--horizontal.layout-expand-first[data-v-8c40daeb]>*:first-child{flex-grow:1}.fz-container--horizontal.layout-expand-all[data-v-8c40daeb]>*{flex-grow:1}.fz-container--horizontal.layout-space-between[data-v-8c40daeb]{justify-content:space-between}.fz-container--horizontal.layout-expand-last[data-v-8c40daeb]>*:last-child{flex-grow:1}.fz-container--vertical.gap-main-content-sm[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--main-content-sm, 32px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-main-content-base[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--main-content-base, 48px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-main-content-lg[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--main-content-lg, 64px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-none[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-none, 0px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-xs[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-xs, 8px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-sm[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-sm, 16px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-base[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-base, 24px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-lg[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-lg, 32px)) + var(--paragraph-gap, 8px))}.fz-container--horizontal[data-v-8c40daeb]>p+p{margin-top:0}.fz-button-group[data-v-79dd8b6f]>*:nth-child(1):nth-last-child(2),.fz-button-group[data-v-79dd8b6f]>*:nth-child(1):nth-last-child(2)~*{flex-basis:50%;flex-grow:0;flex-shrink:1}.fz-button-group[data-v-79dd8b6f]>*:nth-child(1):nth-last-child(3),.fz-button-group[data-v-79dd8b6f]>*:nth-child(1):nth-last-child(3)~*{flex-basis:33.333%;flex-grow:0;flex-shrink:1}.fz-button-group[data-v-79dd8b6f]>.fz-icon-button-wrapper{flex-basis:initial!important;flex-grow:0!important;flex-shrink:0!important}.fz__tooltip__text[data-v-94597a6c]{overflow-wrap:anywhere}.bg-semantic-info-50[data-v-f72b7e4a]{background-color:#f3f7ff}.bg-semantic-error-50[data-v-f72b7e4a]{background-color:#fef3f3}.bg-semantic-warning-50[data-v-f72b7e4a]{background-color:#fff8f3}.bg-semantic-success-50[data-v-f72b7e4a]{background-color:#f2f8f6}.fz-hidden-input[data-v-2b198cc9]{opacity:0;margin:0;height:0;border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.group[data-error]:hover:not([data-disabled]) .peer~label>div[data-v-2b198cc9]{color:var(--semantic-error-300)!important}.group[data-error]:hover:not([data-disabled]) .peer~label[data-v-2b198cc9]{color:var(--semantic-error-300)!important}.group[data-emphasis]:hover:not([data-disabled]):not([data-error]) .peer~label>div[data-v-2b198cc9]{color:var(--blue-600)!important}.group:hover:not([data-emphasis]):not([data-error]):not([data-disabled]) .peer:checked~label>div[data-v-2b198cc9]{color:var(--core-black)!important}.group:hover:not([data-emphasis]):not([data-error]):not([data-disabled]) .peer:indeterminate~label>div[data-v-2b198cc9]{color:var(--core-black)!important}.group:hover:not([data-emphasis]):not([data-error]):not([data-disabled]) .peer:not(:checked):not(:indeterminate)~label>div[data-v-2b198cc9]{color:var(--blue-600)!important}.fz-hidden-input[data-v-d850ec45]{opacity:0;margin:0;height:0;border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/checkbox",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Design System Checkbox and Checkbox Group component",
   "main": "src/index.ts",
   "type": "module",
@@ -9,8 +9,8 @@
   "dependencies": {
     "@fiscozen/alert": "1.0.1",
     "@fiscozen/badge": "1.0.1",
-    "@fiscozen/composables": "1.0.1",
-    "@fiscozen/tooltip": "1.0.3"
+    "@fiscozen/tooltip": "1.0.3",
+    "@fiscozen/composables": "1.0.1"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",

package/src/FzCheckboxCard.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import { FzCheckboxCardProps } from "./types";
+import { generateCheckboxId } from "./utils";
+import { CHECKED_SET_KEY } from "./common";
+import { FzIcon, type IconVariant } from "@fiscozen/icons";
+import { FzTooltip } from "@fiscozen/tooltip";
+
+const props = withDefaults(defineProps<FzCheckboxCardProps>(), {
+  variant: "horizontal",
+  hasCheckbox: true,
+});
+
+const computedValue = computed<string | number>(
+  () => props.value ?? props.label,
+);
+
+const id: string = generateCheckboxId();
+
+const model = defineModel<(string | number | boolean)[]>({
+  required: true,
+  default: [],
+});
+
+const injected = inject(CHECKED_SET_KEY, null);
+
+const isChecked = computed<boolean>(() => {
+  if (model.value == null) return false;
+  if (injected && injected.source.value === model.value) {
+    return injected.set.value.has(computedValue.value);
+  }
+  return model.value.includes(computedValue.value);
+});
+
+function handleChange() {
+  if (props.disabled) return;
+  const current = model.value ?? [];
+  if (isChecked.value) {
+    model.value = current.filter((v) => v !== computedValue.value);
+  } else {
+    model.value = [...current, computedValue.value];
+  }
+}
+
+const CHECKBOX_ICONS = Object.freeze({
+  CHECKED: "square-check",
+  UNCHECKED: "square",
+} as const);
+
+const CHECKBOX_ICON_VARIANTS = Object.freeze({
+  SOLID: "fas",
+  REGULAR: "far",
+} as const);
+
+const computedIconName = computed<string>(() =>
+  isChecked.value ? CHECKBOX_ICONS.CHECKED : CHECKBOX_ICONS.UNCHECKED,
+);
+
+const computedIconVariant = computed<IconVariant>(() =>
+  isChecked.value ? CHECKBOX_ICON_VARIANTS.SOLID : CHECKBOX_ICON_VARIANTS.REGULAR,
+);
+
+const computedIconColor = computed<string>(() => {
+  if (props.disabled) return "text-grey-300";
+  if (props.error) return "text-semantic-error-200";
+  if (props.emphasis) return "text-blue-500";
+  return isChecked.value ? "text-blue-500" : "text-grey-400";
+});
+
+const showImage = computed(() => props.variant === "vertical" || !!props.imageUrl);
+
+const staticInputClass: string = "w-0 h-0 peer fz-hidden-input";
+
+const labelClass = computed(() => ({
+  "flex-col": props.variant === "vertical",
+  "flex-row": props.variant === "horizontal",
+  "pb-20": props.variant === "vertical" && (!isChecked.value || props.disabled),
+  "pb-12": props.variant === "horizontal" && (!isChecked.value || props.disabled),
+  "pb-[19px]": props.variant === "vertical" && isChecked.value && !props.disabled,
+  "pb-[11px]": props.variant === "horizontal" && isChecked.value && !props.disabled,
+  "pt-[11px]": isChecked.value && !props.disabled,
+  "gap-20": props.variant === "vertical",
+  "gap-12": props.variant === "horizontal",
+  "border-2 px-[11px] border-blue-500":
+    isChecked.value && !props.disabled,
+  "border-1 border-grey-300":
+    !isChecked.value || props.disabled,
+  "hover:bg-[#f9faff] peer-focus:outline peer-focus:bg-[#f9faff] peer-focus:outline-blue-200 peer-focus:outline-2 peer-checked:bg-[#f9faff]":
+    !props.disabled,
+}));
+</script>
+
+<template>
+  <div>
+    <input
+      type="checkbox"
+      :id="id"
+      :class="[staticInputClass]"
+      :value="computedValue"
+      :disabled="disabled"
+      :checked="isChecked"
+      :name="name"
+      :required="required"
+      tabindex="0"
+      :aria-checked="isChecked"
+      :aria-required="required ? 'true' : 'false'"
+      :aria-invalid="error ? 'true' : 'false'"
+      @change="handleChange"
+    />
+    <label
+      :class="[
+        'relative flex block rounded-lg border-solid pt-12 px-12 cursor-pointer w-full',
+        labelClass,
+      ]"
+      :for="id"
+    >
+      <FzIcon
+        v-if="hasCheckbox"
+        :name="computedIconName"
+        size="md"
+        :class="[
+          'shrink-0',
+          computedIconColor,
+          {
+            'absolute top-[23px] left-[23px]': variant === 'vertical',
+            'self-start': variant === 'horizontal',
+          },
+        ]"
+        :variant="computedIconVariant"
+        aria-hidden="true"
+      />
+
+      <picture
+        v-if="showImage"
+        :class="[
+          'rounded overflow-hidden',
+          {
+            'shrink-0 size-[58px]': variant === 'horizontal',
+            'w-full aspect-[16/9]': variant === 'vertical',
+            'opacity-30': props.disabled,
+          },
+        ]"
+        :title="imageAlt || ''"
+      >
+        <img
+          :src="imageUrl"
+          :alt="imageAlt || ''"
+          class="object-cover h-full w-full"
+        />
+      </picture>
+
+      <div
+        class="flex flex-row w-full justify-between min-w-0"
+      >
+        <div class="justify-center flex flex-col w-full grow-0 min-w-0 gap-4">
+          <p
+            :class="[
+              'font-medium break-words !m-0 !leading-[20px]',
+              { 'text-grey-300': props.disabled },
+            ]"
+          >
+            {{ title }}
+          </p>
+          <p
+            v-if="subtitle"
+            :class="[
+              'font-normal text-sm mt-4 break-words !m-0 !leading-[16px]',
+              {
+                'text-grey-300': props.disabled,
+                'text-grey-500': !props.disabled,
+              },
+            ]"
+          >
+            {{ subtitle }}
+          </p>
+        </div>
+        <FzTooltip
+          v-if="tooltip"
+          :class="{
+            'self-center': props.variant === 'horizontal',
+            'self-start': props.variant === 'vertical',
+            'ml-8': props.variant === 'vertical',
+            'ml-12': props.variant === 'horizontal',
+          }"
+          :disabled="props.disabled"
+          :text="tooltip"
+          :status="tooltipStatus || 'neutral'"
+        >
+          <FzIcon
+            name="circle-info"
+            variant="far"
+            size="md"
+            class="text-semantic-info"
+          />
+        </FzTooltip>
+      </div>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.fz-hidden-input {
+  opacity: 0;
+  margin: 0;
+  height: 0;
+  border: 0 none;
+  appearance: none;
+}
+</style>

package/src/FzCheckboxGroup.vue

@@ -35,9 +35,10 @@
  *   ]"
  * />
  */
-import { computed, useSlots, watch } from "vue";
+import { computed, provide, useSlots, watch } from "vue";
 import { FzCheckboxGroupProps } from "./types";
 import { generateGroupId } from "./utils";
+import { CHECKED_SET_KEY } from "./common";
 import FzCheckboxGroupOption from "./components/FzCheckboxGroupOption.vue";
 import ErrorAlert from "./components/ErrorAlert.vue";
 
@@ -80,6 +81,9 @@ const model = defineModel<(string | number | boolean)[]>({
   default: [],
 });
 
+const checkedSet = computed(() => new Set(model.value));
+provide(CHECKED_SET_KEY, { source: model, set: checkedSet });
+
 /** Base layout for the label element */
 const staticLabeldClass: string = "flex flex-col";
 
@@ -109,6 +113,22 @@ const computedSlotContainerClass = computed<string[]>(() => [
   props.horizontal ? "flex-row" : "flex-col",
 ]);
 
+/** Whether the group has options to render (options-based mode vs slot-based mode) */
+const hasOptions = computed<boolean>(
+  () => Array.isArray(props.options) && props.options.length > 0,
+);
+
+/**
+ * Props passed down to child components via scoped slot.
+ * Used in slot-based mode (e.g., when rendering FzCheckboxCard components).
+ */
+const controlledProps = computed(() => ({
+  disabled: props.disabled,
+  error: props.error,
+  emphasis: props.emphasis,
+  required: props.required,
+}));
+
 /**
  * Computes the aria-describedby attribute value for the checkbox group.
  * Combines help text and error message IDs when present.
@@ -181,15 +201,18 @@ const computedAriaDescribedby = computed<string | undefined>(() => {
         Supports both simple checkboxes and parent-child hierarchies
         Key uses value if available, falls back to label for uniqueness
       -->
-      <FzCheckboxGroupOption
-        v-for="option in options"
-        :key="option.value ? option.value.toString() : option.label"
-        v-model="model"
-        :disabled="disabled"
-        v-bind="option"
-        :emphasis="emphasis"
-        :error="error"
-      />
+      <template v-if="hasOptions">
+        <FzCheckboxGroupOption
+          v-for="option in options"
+          :key="option.value ? option.value.toString() : option.label"
+          v-model="model"
+          :disabled="disabled"
+          v-bind="option"
+          :emphasis="emphasis"
+          :error="error"
+        />
+      </template>
+      <slot v-else :checkboxGroupProps="controlledProps" />
     </div>
     <!-- Error message display with accessible ARIA live region -->
     <ErrorAlert v-if="error && $slots.error" :id="id + '-error'">