@fiscozen/checkbox 3.0.1 → 3.0.3

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

@@ -1,240 +1,2 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    title: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import('vue').PropType<string | number>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md">;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    name: {
-        type: import('vue').PropType<string>;
-    };
-    variant: {
-        type: import('vue').PropType<"horizontal">;
-        default: string;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    tooltip: {
-        type: import('vue').PropType<string>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    subtitle: {
-        type: import('vue').PropType<string>;
-    };
-    imageAlt: {
-        type: import('vue').PropType<string>;
-    };
-    tooltipStatus: {
-        type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipStatus>;
-    };
-    hasCheckbox: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    imageUrl: {
-        type: import('vue').PropType<string>;
-    };
-} | {
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    title: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import('vue').PropType<string | number>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md">;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    name: {
-        type: import('vue').PropType<string>;
-    };
-    variant: {
-        type: import('vue').PropType<"vertical">;
-        required: true;
-        default: string;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    tooltip: {
-        type: import('vue').PropType<string>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    subtitle: {
-        type: import('vue').PropType<string>;
-    };
-    imageAlt: {
-        type: import('vue').PropType<string>;
-    };
-    tooltipStatus: {
-        type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipStatus>;
-    };
-    hasCheckbox: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    imageUrl: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    title: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import('vue').PropType<string | number>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md">;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    name: {
-        type: import('vue').PropType<string>;
-    };
-    variant: {
-        type: import('vue').PropType<"horizontal">;
-        default: string;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    tooltip: {
-        type: import('vue').PropType<string>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    subtitle: {
-        type: import('vue').PropType<string>;
-    };
-    imageAlt: {
-        type: import('vue').PropType<string>;
-    };
-    tooltipStatus: {
-        type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipStatus>;
-    };
-    hasCheckbox: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    imageUrl: {
-        type: import('vue').PropType<string>;
-    };
-} | {
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    title: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import('vue').PropType<string | number>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md">;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    name: {
-        type: import('vue').PropType<string>;
-    };
-    variant: {
-        type: import('vue').PropType<"vertical">;
-        required: true;
-        default: string;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    tooltip: {
-        type: import('vue').PropType<string>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    subtitle: {
-        type: import('vue').PropType<string>;
-    };
-    imageAlt: {
-        type: import('vue').PropType<string>;
-    };
-    tooltipStatus: {
-        type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipStatus>;
-    };
-    hasCheckbox: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    imageUrl: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-}>> & Readonly<{}>, {
-    variant: "horizontal";
-    hasCheckbox: boolean;
-} | {
-    variant: "vertical";
-    hasCheckbox: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
 export default _default;

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

@@ -1,75 +1,32 @@
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md">;
-    };
-    options: {
-        type: import('vue').PropType<import('./types').ParentCheckbox[]>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    horizontal: {
-        type: import('vue').PropType<boolean>;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md">;
-    };
-    options: {
-        type: import('vue').PropType<import('./types').ParentCheckbox[]>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    horizontal: {
-        type: import('vue').PropType<boolean>;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
-    help?(_: {}): any;
-    default?(_: {
-        checkboxGroupProps: {
-            disabled: boolean;
-            error: boolean;
-            emphasis: boolean;
-            required: boolean;
-        };
-    }): any;
-    error?(_: {}): any;
-}>;
+import { FzCheckboxGroupProps } from './types';
+type __VLS_Props = FzCheckboxGroupProps;
+type __VLS_PublicProps = {
+    modelValue: (string | number | boolean)[];
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        help?(_: {}): any;
+        default?(_: {
+            checkboxGroupProps: {
+                disabled: boolean;
+                error: boolean;
+                emphasis: boolean;
+                required: boolean;
+            };
+        }): any;
+        error?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: (string | number | boolean)[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: (string | number | boolean)[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/src/common.d.ts

@@ -1,5 +1,4 @@
 import { ComputedRef, InjectionKey, Ref } from 'vue';
-
 /**
  * Maps checkbox size variants to corresponding Tailwind CSS text size classes.
  *
@@ -30,5 +29,11 @@ export interface CheckedSetProvision {
  * Provided by FzCheckboxGroup so child cards/checkboxes can do O(1) membership
  * checks instead of O(N) Array.includes scans — but only when the group's
  * model and the child's model reference the same array.
+ *
+ * Uses a namespaced primitive string rather than `Symbol(...)` so the key
+ * stays value-equal across module instances. This matters in Vite dev mode
+ * when consuming apps exclude `@fiscozen/*` packages from optimizeDeps and
+ * the same `.ts` file may be loaded as multiple module instances. The cast
+ * preserves the typed `InjectionKey<T>` API at provide/inject call sites.
  */
 export declare const CHECKED_SET_KEY: InjectionKey<CheckedSetProvision>;

package/dist/src/components/ErrorAlert.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+type __VLS_Props = {
     /**
      * Unique ID for the error alert element.
      * Used for aria-describedby relationships.
@@ -6,27 +6,19 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
      * @example "checkbox-123-error"
      */
     id: string;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    /**
-     * Unique ID for the error alert element.
-     * Used for aria-describedby relationships.
-     *
-     * @example "checkbox-123-error"
-     */
-    id: string;
-}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
     };
+    refs: {};
+    rootEl: any;
 };
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/src/components/FzCheckboxGroupOption.vue.d.ts

@@ -1,86 +1,11 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import('vue').PropType<string | number | boolean>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    tooltip: {
-        type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipProps>;
-    };
-    indeterminate: {
-        type: import('vue').PropType<boolean>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    standalone: {
-        type: import('vue').PropType<boolean>;
-    };
-    ariaOwns: {
-        type: import('vue').PropType<string>;
-    };
-    checkboxId: {
-        type: import('vue').PropType<string>;
-    };
-    children: {
-        type: import('vue').PropType<import('../types').ChildCheckbox[]>;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import('vue').PropType<string | number | boolean>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    tooltip: {
-        type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipProps>;
-    };
-    indeterminate: {
-        type: import('vue').PropType<boolean>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    standalone: {
-        type: import('vue').PropType<boolean>;
-    };
-    ariaOwns: {
-        type: import('vue').PropType<string>;
-    };
-    checkboxId: {
-        type: import('vue').PropType<string>;
-    };
-    children: {
-        type: import('vue').PropType<import('../types').ChildCheckbox[]>;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+import { ParentCheckbox } from '../types';
+type __VLS_Props = ParentCheckbox;
+type __VLS_PublicProps = {
+    modelValue: (string | number | boolean)[];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: (string | number | boolean)[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: (string | number | boolean)[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/src/types.d.ts

@@ -1,5 +1,4 @@
 import { FzTooltipProps, FzTooltipStatus } from '@fiscozen/tooltip';
-
 /**
  * Props for the FzCheckbox component.
  *

package/package.json

@@ -1,38 +1,38 @@
 {
   "name": "@fiscozen/checkbox",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Design System Checkbox and Checkbox Group component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/composables": "1.0.3",
-    "@fiscozen/alert": "3.0.0",
+    "@fiscozen/alert": "3.0.1",
     "@fiscozen/badge": "3.0.0",
-    "@fiscozen/tooltip": "3.0.1"
+    "@fiscozen/composables": "1.0.3",
+    "@fiscozen/tooltip": "3.0.2"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/icons": "^1.0.0"
+    "@fiscozen/icons": "^1.0.4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^18.19.3",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vitest/coverage-v8": "^1.2.1",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitest/coverage-v8": "^4.1.1",
     "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.5.0",
     "eslint": "^8.49.0",
     "jsdom": "^23.0.1",
     "prettier": "^3.0.3",
-    "typescript": "~5.3.0",
-    "vite": "^5.0.10",
-    "vite-plugin-dts": "^3.8.3",
-    "vitest": "^1.2.0",
-    "vue-tsc": "^1.8.25",
+    "typescript": "~5.7.0",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^4.1.1",
+    "vue-tsc": "^2.2.12",
     "@fiscozen/eslint-config": "^0.1.0",
     "@fiscozen/prettier-config": "^0.1.0",
     "@fiscozen/tsconfig": "^0.1.0"

package/src/FzCheckboxCard.vue

@@ -69,7 +69,7 @@ const computedIconColor = computed<string>(() => {
 
 const showImage = computed(() => props.variant === "vertical" || !!props.imageUrl);
 
-const staticInputClass: string = "w-0 h-0 peer fz-hidden-input";
+const staticInputClass: string = "peer h-0 w-0 absolute fz-hidden-input";
 
 const labelClass = computed(() => ({
   "flex-col": props.variant === "vertical",

package/src/FzCheckboxGroup.vue

@@ -91,7 +91,7 @@ const staticLabeldClass: string = "flex flex-col";
 const staticContainerClass: string = "flex flex-col gap-10";
 
 /** Base layout for the checkboxes container */
-const staticSlotContainerClass: string = "flex items-start";
+const staticSlotContainerClass: string = "flex self-stretch";
 
 /** Dynamic label classes based on spacing and disabled state */
 const computedLabelClass = computed<string[]>(() => [

package/src/__tests__/FzCheckboxCard.spec.ts

@@ -19,13 +19,11 @@ const createWrapper = (
 
 describe("FzCheckboxCard", () => {
   beforeEach(() => {
-    const mockIntersectionObserver = vi.fn();
-    mockIntersectionObserver.mockReturnValue({
-      observe: () => null,
-      unobserve: () => null,
-      disconnect: () => null,
+    window.IntersectionObserver = vi.fn().mockImplementation(function (this: any) {
+      this.observe = vi.fn();
+      this.unobserve = vi.fn();
+      this.disconnect = vi.fn();
     });
-    window.IntersectionObserver = mockIntersectionObserver;
 
     window.matchMedia = vi.fn().mockImplementation((query: string) => ({
       matches: false,

package/src/__tests__/FzCheckboxGroup.spec.ts

@@ -524,7 +524,7 @@ describe("FzCheckboxGroup", () => {
       await wrapper.vm.$nextTick();
       const container = wrapper.find("[role='group']");
       expect(container.classes()).toContain("flex");
-      expect(container.classes()).toContain("items-start");
+      expect(container.classes()).toContain("self-stretch");
     });
 
     it("should apply horizontal layout classes when horizontal is true", async () => {