@pequity/squirrel 1.2.10 → 1.2.11

package/dist/cjs/index.js

@@ -8,7 +8,7 @@ const pDropdown = require("./p-dropdown.js");
 const pAlert = require("./p-alert.js");
 const pAvatar = require("./p-avatar.js");
 const pCard_vue_vue_type_script_setup_true_lang = require("./chunks/p-card.js");
-const pCheckbox_vue_vue_type_script_setup_true_lang = require("./chunks/p-checkbox.js");
+const pCheckbox = require("./p-checkbox.js");
 const pChips = require("./p-chips.js");
 const pDatePicker = require("./p-date-picker.js");
 const pDrawer = require("./p-drawer.js");
@@ -1044,7 +1044,7 @@ exports.PDropdown = pDropdown;
 exports.PAlert = pAlert;
 exports.PAvatar = pAvatar;
 exports.PCard = pCard_vue_vue_type_script_setup_true_lang._sfc_main;
-exports.PCheckbox = pCheckbox_vue_vue_type_script_setup_true_lang._sfc_main;
+exports.PCheckbox = pCheckbox;
 exports.PChips = pChips;
 exports.PDatePicker = pDatePicker;
 exports.PDrawer = pDrawer;

package/dist/cjs/p-checkbox.js

@@ -1,3 +1,46 @@
 "use strict";
-const pCheckbox_vue_vue_type_script_setup_true_lang = require("./chunks/p-checkbox.js");
-module.exports = pCheckbox_vue_vue_type_script_setup_true_lang._sfc_main;
+const vue = require("vue");
+const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
+const _hoisted_1 = { class: "inline-flex items-center" };
+const _hoisted_2 = ["checked"];
+const _hoisted_3 = {
+  key: 0,
+  class: "ml-2 text-sm"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PCheckbox",
+    inheritAttrs: false
+  },
+  __name: "p-checkbox",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1, [
+        vue.renderSlot(_ctx.$slots, "label-before", {}, void 0, true),
+        vue.createElementVNode("input", vue.mergeProps({
+          type: "checkbox",
+          class: "h-4 w-4 shrink-0 appearance-none rounded border border-p-gray-30 bg-surface duration-100 ease-in-out checked:border-none checked:bg-primary disabled:opacity-50",
+          checked: __props.modelValue
+        }, _ctx.$attrs, {
+          onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.checked))
+        }), null, 16, _hoisted_2),
+        vue.renderSlot(_ctx.$slots, "label", {}, () => [
+          __props.label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true)
+        ], true)
+      ]);
+    };
+  }
+});
+const pCheckbox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-6729bf3b"]]);
+module.exports = pCheckbox;

package/dist/es/index.js

@@ -6,52 +6,52 @@ import PDropdown from "./p-dropdown.js";
 import { default as default2 } from "./p-alert.js";
 import { default as default3 } from "./p-avatar.js";
 import { _ } from "./chunks/p-card.js";
-import { _ as _2 } from "./chunks/p-checkbox.js";
-import { default as default4 } from "./p-chips.js";
-import { default as default5 } from "./p-date-picker.js";
-import { default as default6 } from "./p-drawer.js";
+import { default as default4 } from "./p-checkbox.js";
+import { default as default5 } from "./p-chips.js";
+import { default as default6 } from "./p-date-picker.js";
+import { default as default7 } from "./p-drawer.js";
 import { a as _imports_0$2 } from "./chunks/p-dropdown-select.js";
-import { _ as _3 } from "./chunks/p-dropdown-select.js";
+import { _ as _2 } from "./chunks/p-dropdown-select.js";
 import { formatBytes, getFileExtension } from "./p-file-upload.js";
 import { uniq, kebabCase } from "lodash-es";
 import { useInputClasses } from "./useInputClasses.js";
 import { useToast } from "vue-toastification";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-import { default as default7 } from "./p-table-filter-icon.js";
-import { default as default8 } from "./p-info-icon.js";
-import { default as default9 } from "./p-inline-date-picker.js";
-import { default as default10 } from "./p-input.js";
-import { default as default11 } from "./p-input-number.js";
-import { _ as _4 } from "./chunks/p-input-percent.js";
+import { default as default8 } from "./p-table-filter-icon.js";
+import { default as default9 } from "./p-info-icon.js";
+import { default as default10 } from "./p-inline-date-picker.js";
+import { default as default11 } from "./p-input.js";
+import { default as default12 } from "./p-input-number.js";
+import { _ as _3 } from "./chunks/p-input-percent.js";
 import PInputSearch from "./p-input-search.js";
-import { default as default12 } from "./p-loading.js";
-import { default as default13 } from "./p-modal.js";
-import { _ as _5 } from "./chunks/p-pagination.js";
-import { _ as _6 } from "./chunks/p-pagination-info.js";
-import { default as default14 } from "./p-progress-bar.js";
-import { _ as _7 } from "./chunks/p-ring-loader.js";
-import { _ as _8 } from "./chunks/p-select.js";
-import { _ as _9 } from "./chunks/p-select-btn.js";
+import { default as default13 } from "./p-loading.js";
+import { default as default14 } from "./p-modal.js";
+import { _ as _4 } from "./chunks/p-pagination.js";
+import { _ as _5 } from "./chunks/p-pagination-info.js";
+import { default as default15 } from "./p-progress-bar.js";
+import { _ as _6 } from "./chunks/p-ring-loader.js";
+import { _ as _7 } from "./chunks/p-select.js";
+import { _ as _8 } from "./chunks/p-select-btn.js";
 import { SIZES } from "./p-select-list.js";
 import { splitStringForHighlight } from "./text.js";
 import { toString } from "./string.js";
 import { useSelectList } from "./useSelectList.js";
-import { default as default15 } from "./p-select-pill.js";
-import { default as default16 } from "./p-skeleton-loader.js";
+import { default as default16 } from "./p-select-pill.js";
+import { default as default17 } from "./p-skeleton-loader.js";
 import PTableHeaderCell from "./p-table-header-cell.js";
 import { colsInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, isColsResizableInjectionKey } from "./p-table.js";
 import { MIN_WIDTH_COL_RESIZE } from "./p-table.js";
 import { usePTableColResize } from "./usePTableColResize.js";
-import { _ as _10 } from "./chunks/p-table-loader.js";
+import { _ as _9 } from "./chunks/p-table-loader.js";
 import { SORTING_TYPES } from "./p-table-sort.js";
-import { default as default17 } from "./p-table-td.js";
-import { _ as _11 } from "./chunks/p-tabs.js";
-import { default as default18 } from "./p-textarea.js";
-import { default as default19 } from "./p-toggle.js";
+import { default as default18 } from "./p-table-td.js";
+import { _ as _10 } from "./chunks/p-tabs.js";
+import { default as default19 } from "./p-textarea.js";
+import { default as default20 } from "./p-toggle.js";
 import { usePLoading } from "./usePLoading.js";
 import { usePModal } from "./usePModal.js";
 import { usePTableRowVirtualizer } from "./usePTableRowVirtualizer.js";
-import { default as default20 } from "./inputClassesMixin.js";
+import { default as default21 } from "./inputClassesMixin.js";
 import { CURRENCY_INPUT_DEFAULTS } from "./currency.js";
 import { getColor, getColorDeep, getScreen } from "./tailwind.js";
 import { ERROR_MSG, INPUT_BASE, INPUT_ERROR, INPUT_NORMAL, INPUT_SIZES, LABEL_BASE, LABEL_REQUIRED, LABEL_SIZES, SELECT_ARROW, SELECT_BASE, SELECT_SIZES, SPACING_LEFT, SPACING_PREFIX, SPACING_RIGHT, SPACING_SUFFIX, TEXTAREA_BASE } from "./inputClassesShared.js";
@@ -1053,40 +1053,40 @@ export {
   default3 as PAvatar,
   PBtn,
   _ as PCard,
-  _2 as PCheckbox,
-  default4 as PChips,
+  default4 as PCheckbox,
+  default5 as PChips,
   PCloseBtn,
-  default5 as PDatePicker,
-  default6 as PDrawer,
+  default6 as PDatePicker,
+  default7 as PDrawer,
   PDropdown,
-  _3 as PDropdownSelect,
+  _2 as PDropdownSelect,
   pFileUpload as PFileUpload,
-  default7 as PFilterIcon,
-  default8 as PInfoIcon,
-  default9 as PInlineDatePicker,
-  default10 as PInput,
-  default11 as PInputNumber,
-  _4 as PInputPercent,
+  default8 as PFilterIcon,
+  default9 as PInfoIcon,
+  default10 as PInlineDatePicker,
+  default11 as PInput,
+  default12 as PInputNumber,
+  _3 as PInputPercent,
   PInputSearch,
-  default12 as PLoading,
-  default13 as PModal,
-  _5 as PPagination,
-  _6 as PPaginationInfo,
-  default14 as PProgressBar,
-  _7 as PRingLoader,
-  _8 as PSelect,
-  _9 as PSelectBtn,
+  default13 as PLoading,
+  default14 as PModal,
+  _4 as PPagination,
+  _5 as PPaginationInfo,
+  default15 as PProgressBar,
+  _6 as PRingLoader,
+  _7 as PSelect,
+  _8 as PSelectBtn,
   _sfc_main$2 as PSelectList,
-  default15 as PSelectPill,
-  default16 as PSkeletonLoader,
+  default16 as PSelectPill,
+  default17 as PSkeletonLoader,
   pTable as PTable,
   PTableHeaderCell,
-  _10 as PTableLoader,
+  _9 as PTableLoader,
   pTableSort as PTableSort,
-  default17 as PTableTd,
-  _11 as PTabs,
-  default18 as PTextarea,
-  default19 as PToggle,
+  default18 as PTableTd,
+  _10 as PTabs,
+  default19 as PTextarea,
+  default20 as PToggle,
   SELECT_ARROW,
   SELECT_BASE,
   SELECT_SIZES,
@@ -1103,7 +1103,7 @@ export {
   getColorDeep,
   getNextActiveElement,
   getScreen,
-  default20 as inputClassesMixin,
+  default21 as inputClassesMixin,
   isColsResizableInjectionKey,
   isElement,
   isFirstColFixedInjectionKey,

package/dist/es/p-checkbox.js

@@ -1,4 +1,47 @@
-import { _ as _sfc_main } from "./chunks/p-checkbox.js";
+import { defineComponent, openBlock, createElementBlock, renderSlot, createElementVNode, mergeProps, toDisplayString, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "inline-flex items-center" };
+const _hoisted_2 = ["checked"];
+const _hoisted_3 = {
+  key: 0,
+  class: "ml-2 text-sm"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PCheckbox",
+    inheritAttrs: false
+  },
+  __name: "p-checkbox",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", _hoisted_1, [
+        renderSlot(_ctx.$slots, "label-before", {}, void 0, true),
+        createElementVNode("input", mergeProps({
+          type: "checkbox",
+          class: "h-4 w-4 shrink-0 appearance-none rounded border border-p-gray-30 bg-surface duration-100 ease-in-out checked:border-none checked:bg-primary disabled:opacity-50",
+          checked: __props.modelValue
+        }, _ctx.$attrs, {
+          onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.checked))
+        }), null, 16, _hoisted_2),
+        renderSlot(_ctx.$slots, "label", {}, () => [
+          __props.label ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.label), 1)) : createCommentVNode("", true)
+        ], true)
+      ]);
+    };
+  }
+});
+const pCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6729bf3b"]]);
 export {
-  _sfc_main as default
+  pCheckbox as default
 };

package/dist/squirrel/components/p-btn/p-btn.vue.d.ts

@@ -1,5 +1,4 @@
 import { type PropType } from 'vue';
-import { type RouteLocationRaw } from 'vue-router';
 import { type Size } from './p-btn.types';
 declare const BUTTON_TYPES: {
     readonly PRIMARY: "primary";
@@ -61,7 +60,7 @@ declare const _default: import("vue").DefineComponent<{
      * See https://router.vuejs.org/api/#RouteLocationRaw
      */
     to: {
-        type: PropType<RouteLocationRaw>;
+        type: PropType<string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric>;
         default: string;
     };
 }, unknown, {
@@ -117,7 +116,7 @@ declare const _default: import("vue").DefineComponent<{
      * See https://router.vuejs.org/api/#RouteLocationRaw
      */
     to: {
-        type: PropType<RouteLocationRaw>;
+        type: PropType<string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric>;
         default: string;
     };
 }>>, {
@@ -126,6 +125,6 @@ declare const _default: import("vue").DefineComponent<{
     nativeType: "button" | "submit" | "reset";
     loading: boolean;
     selected: boolean;
-    to: RouteLocationRaw;
+    to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
 }, {}>;
 export default _default;

package/dist/squirrel/components/p-checkbox/p-checkbox.vue.d.ts

@@ -1,8 +1,12 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -10,9 +14,22 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    label: string;
     modelValue: boolean;
-}, {}>;
+}, {}>, {
+    "label-before"?(_: {}): any;
+    label?(_: {}): any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/squirrel/components/p-table/usePTableRowVirtualizer.d.ts

@@ -17,7 +17,7 @@ export declare const usePTableRowVirtualizer: (options: Options) => {
     measureElement: () => Ref<undefined>;
 } | {
     virtualizer: Ref<import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>>;
-    virtualRows: ComputedRef<import("@tanstack/vue-virtual").VirtualItem[]>;
+    virtualRows: ComputedRef<import("@tanstack/vue-virtual").VirtualItem<Element>[]>;
     paddingTop: ComputedRef<number>;
     paddingBottom: ComputedRef<number>;
     measureElement: (cmp: ComponentPublicInstance | Ref<HTMLElement>) => undefined;

package/dist/style.css

@@ -256,6 +256,10 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-divider {
   --tw-content: "";
   content: var(--tw-content);
 }
+input[type='checkbox'][data-v-6729bf3b]:checked {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
+}
+
 .bg-cross[data-v-cb511035] {
   background-image: url("data:image/svg+xml,%3csvg%20width='6'%20height='6'%20viewBox='0%200%206%206'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_2511_8629)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M3%203.51667L5.42083%205.9375L5.9375%205.42083L3.51667%203L5.9375%200.57917L5.42083%200.0625L3%202.48333L0.57917%200.0625L0.0625%200.57917L2.48333%203L0.0625%205.42083L0.57917%205.9375L3%203.51667Z'%20fill='%231A123B'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2511_8629'%3e%3crect%20width='6'%20height='6'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "packageManager": "pnpm@8.9.2",
   "type": "module",
   "scripts": {
@@ -58,26 +58,26 @@
     "@popperjs/core": "2.11.8",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.1.9",
-    "@storybook/addon-actions": "^8.1.9",
-    "@storybook/addon-essentials": "^8.1.9",
-    "@storybook/addon-interactions": "^8.1.9",
-    "@storybook/addon-links": "^8.1.9",
-    "@storybook/blocks": "^8.1.9",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.1.9",
-    "@storybook/test-runner": "^0.18.2",
+    "@storybook/manager-api": "^8.1.10",
+    "@storybook/test-runner": "^0.19.0",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.1.9",
-    "@storybook/vue3": "^8.1.9",
-    "@storybook/vue3-vite": "^8.1.9",
-    "@tanstack/vue-virtual": "3.5.1",
+    "@storybook/theming": "^8.1.10",
+    "@storybook/vue3": "^8.1.10",
+    "@storybook/vue3-vite": "^8.1.10",
+    "@tanstack/vue-virtual": "3.7.0",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.8",
     "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/compiler-sfc": "3.4.27",
+    "@vue/compiler-sfc": "3.4.30",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
     "autoprefixer": "^10.4.19",
@@ -86,7 +86,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "floating-vue": "5.2.2",
-    "glob": "^10.4.1",
+    "glob": "^10.4.2",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -95,22 +95,22 @@
     "make-coverage-badge": "^1.2.0",
     "postcss": "^8.4.38",
     "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.4",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "resolve-tspaths": "^0.8.19",
     "rimraf": "^5.0.7",
-    "sass": "^1.77.5",
+    "sass": "^1.77.6",
     "semantic-release": "^24.0.0",
-    "storybook": "^8.1.9",
+    "storybook": "^8.1.10",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.4",
-    "ts-jest": "^29.1.4",
+    "ts-jest": "^29.1.5",
     "typescript": "5.4.5",
     "v-calendar": "3.1.2",
-    "vite": "^5.3.0",
-    "vue": "3.4.27",
+    "vite": "^5.3.1",
+    "vue": "3.4.30",
     "vue-currency-input": "3.1.0",
-    "vue-router": "4.3.3",
+    "vue-router": "4.4.0",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.0.21"
+    "vue-tsc": "2.0.22"
   }
 }

package/squirrel/components/p-checkbox/p-checkbox.spec.js

@@ -1,6 +1,22 @@
 import PCheckbox from '@squirrel/components/p-checkbox/p-checkbox.vue';
 import { createWrapperFor } from '@tests/jest.helpers';
 
+const checkboxClasses = [
+  'h-4',
+  'w-4',
+  'shrink-0',
+  'appearance-none',
+  'rounded',
+  'border',
+  'border-p-gray-30',
+  'bg-surface',
+  'duration-100',
+  'ease-in-out',
+  'checked:border-none',
+  'checked:bg-primary',
+  'disabled:opacity-50',
+];
+
 describe('PCheckbox.vue', () => {
   it('renders correctly', async () => {
     const wrapper = createWrapperFor(PCheckbox);
@@ -9,7 +25,7 @@ describe('PCheckbox.vue', () => {
 
     expect(input.exists()).toBe(true);
     expect(input.attributes().type).toBe('checkbox');
-    expect(input.classes()).toEqual(['cursor-pointer', 'accent-p-blue-50']);
+    expect(input.classes()).toEqual(checkboxClasses);
     expect(input.attributes().disabled).toBeUndefined();
   });
 
@@ -20,7 +36,7 @@ describe('PCheckbox.vue', () => {
 
     expect(input.exists()).toBe(true);
     expect(input.attributes().type).toBe('checkbox');
-    expect(input.classes()).toEqual(['cursor-pointer', 'accent-p-blue-50']);
+    expect(input.classes()).toEqual(checkboxClasses);
     expect(input.attributes().disabled).toBeDefined();
   });
 });

package/squirrel/components/p-checkbox/p-checkbox.stories.js

@@ -8,7 +8,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: 'Checkbox Component',
+        component: 'Checkboxes allow the user to select multiple options from a set.',
       },
     },
   },
@@ -25,7 +25,39 @@ export const Default = {
     template: `<PCheckbox v-bind="args" @click="onClick" />`,
   }),
   args: {
-    checked: false,
+    modelValue: false,
     disabled: false,
   },
 };
+
+export const WithLabel = {
+  args: {
+    ...Default.args,
+    label: 'Checkbox label',
+  },
+};
+
+export const WithLabelBefore = {
+  render: (args) => {
+    const { default: defaultSlot, labelBefore, ...argsWithoutSlots } = args;
+
+    return {
+      components: { PCheckbox },
+      setup() {
+        return { argsWithoutSlots };
+      },
+      template: `
+        <PCheckbox v-bind="argsWithoutSlots">
+          <template #label-before>
+            <div class="text-sm mr-2">${args.labelBefore}</div>
+          </template>
+        </PCheckbox>
+      `,
+    };
+  },
+  args: {
+    modelValue: false,
+    disabled: false,
+    labelBefore: 'Test label',
+  },
+};

package/squirrel/components/p-checkbox/p-checkbox.vue

@@ -1,13 +1,27 @@
 <template>
-  <input
-    type="checkbox"
-    class="cursor-pointer accent-p-blue-50"
-    :checked="modelValue"
-    @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
-  />
+  <label class="inline-flex items-center">
+    <slot name="label-before"></slot>
+    <input
+      type="checkbox"
+      class="h-4 w-4 shrink-0 appearance-none rounded border border-p-gray-30 bg-surface duration-100 ease-in-out checked:border-none checked:bg-primary disabled:opacity-50"
+      :checked="modelValue"
+      v-bind="$attrs"
+      @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+    />
+    <slot name="label">
+      <div v-if="label" class="ml-2 text-sm">
+        {{ label }}
+      </div>
+    </slot>
+  </label>
 </template>
 
 <script setup lang="ts">
+defineOptions({
+  name: 'PCheckbox',
+  inheritAttrs: false,
+});
+
 defineEmits(['update:modelValue']);
 
 defineProps({
@@ -15,5 +29,15 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  label: {
+    type: String,
+    default: '',
+  },
 });
 </script>
+
+<style lang="css" scoped>
+input[type='checkbox']:checked {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
+}
+</style>

package/dist/cjs/chunks/p-checkbox.js

@@ -1,24 +0,0 @@
-"use strict";
-const vue = require("vue");
-const _hoisted_1 = ["checked"];
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  __name: "p-checkbox",
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("input", {
-        type: "checkbox",
-        class: "cursor-pointer accent-p-blue-50",
-        checked: __props.modelValue,
-        onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.checked))
-      }, null, 40, _hoisted_1);
-    };
-  }
-});
-exports._sfc_main = _sfc_main;

package/dist/es/chunks/p-checkbox.js

@@ -1,25 +0,0 @@
-import { defineComponent, openBlock, createElementBlock } from "vue";
-const _hoisted_1 = ["checked"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "p-checkbox",
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("input", {
-        type: "checkbox",
-        class: "cursor-pointer accent-p-blue-50",
-        checked: __props.modelValue,
-        onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.checked))
-      }, null, 40, _hoisted_1);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};