@pequity/squirrel 8.3.4 → 8.4.0

package/dist/cjs/chunks/p-tabs-pills.js

@@ -0,0 +1,44 @@
+"use strict";
+const vue = require("vue");
+const _hoisted_1 = {
+  class: "flex h-6 w-fit flex-row space-x-1 overflow-x-auto rounded bg-p-gray-10 p-1 text-sm font-medium text-p-gray-50",
+  "aria-label": "Tabs Pills",
+  role: "tablist",
+  "aria-orientation": "horizontal"
+};
+const _hoisted_2 = ["disabled", "aria-selected", "data-tab", "aria-controls", "onClick"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PTabsPills"
+  },
+  __name: "p-tabs-pills",
+  props: {
+    modelValue: { type: [String, Number, Boolean], default: "" },
+    items: { default: () => [] },
+    itemText: { default: "text" },
+    itemValue: { default: "value" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (tab) => {
+          return vue.openBlock(), vue.createElementBlock("button", {
+            key: String(tab[_ctx.itemValue]),
+            type: "button",
+            class: vue.normalizeClass(["rounded px-2 pb-px leading-none transition-all duration-300", [
+              tab.disabled ? "text-p-gray-30" : tab[_ctx.itemValue] === _ctx.modelValue ? "bg-night text-surface hover:bg-night hover:text-surface" : "hover:text-p-gray-70"
+            ]]),
+            disabled: !!tab.disabled,
+            role: "tab",
+            "aria-selected": tab[_ctx.itemValue] === _ctx.modelValue,
+            "data-tab": `#${tab[_ctx.itemValue]}`,
+            "aria-controls": String(tab[_ctx.itemValue]),
+            onClick: ($event) => _ctx.$emit("update:modelValue", tab[_ctx.itemValue])
+          }, vue.toDisplayString(tab[_ctx.itemText]), 11, _hoisted_2);
+        }), 128))
+      ]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;

package/dist/cjs/index.js

@@ -52,6 +52,7 @@ const pTableFilterIcon = require("./p-table-filter-icon.js");
 const pTableLoader_vue_vue_type_script_setup_true_lang = require("./chunks/p-table-loader.js");
 const pTableSort = require("./p-table-sort.js");
 const pTabs_vue_vue_type_script_setup_true_lang = require("./chunks/p-tabs.js");
+const pTabsPills_vue_vue_type_script_setup_true_lang = require("./chunks/p-tabs-pills.js");
 const pTextarea_vue_vue_type_script_setup_true_lang = require("./chunks/p-textarea.js");
 const pToggle = require("./p-toggle.js");
 const config = require("./config.js");
@@ -1086,6 +1087,7 @@ exports.PFilterIcon = pTableFilterIcon;
 exports.PTableLoader = pTableLoader_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.SORTING_TYPES = pTableSort.SORTING_TYPES;
 exports.PTabs = pTabs_vue_vue_type_script_setup_true_lang._sfc_main;
+exports.PTabsPills = pTabsPills_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PTextarea = pTextarea_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PToggle = pToggle;
 exports.squirrelTailwindConfig = config.squirrelTailwindConfig;

package/dist/cjs/p-checkbox.js

@@ -32,15 +32,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const style = vue.computed(() => {
       return allAttrs.style;
     });
+    const isDisabled = vue.computed(() => {
+      return "disabled" in allAttrs && allAttrs.disabled !== false;
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("label", {
-        class: vue.normalizeClass(["inline-flex items-center", [{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]]),
+        class: vue.normalizeClass(["inline-flex items-center", [
+          { hidden: _ctx.$attrs.hidden },
+          _ctx.$attrs.class,
+          { "cursor-not-allowed opacity-50": isDisabled.value, "cursor-pointer": !isDisabled.value }
+        ]]),
         style: vue.normalizeStyle(style.value)
       }, [
         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"
+          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"
         }, attrs.value, {
           checked: __props.modelValue,
           onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.checked))
@@ -52,5 +59,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pCheckbox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-81cd6154"]]);
+const pCheckbox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-b394a2f0"]]);
 module.exports = pCheckbox;

package/dist/cjs/p-tabs-pills.js

@@ -0,0 +1,3 @@
+"use strict";
+const pTabsPills_vue_vue_type_script_setup_true_lang = require("./chunks/p-tabs-pills.js");
+module.exports = pTabsPills_vue_vue_type_script_setup_true_lang._sfc_main;

package/dist/es/chunks/p-tabs-pills.js

@@ -0,0 +1,45 @@
+import { defineComponent, createElementBlock, openBlock, Fragment, renderList, normalizeClass, toDisplayString } from "vue";
+const _hoisted_1 = {
+  class: "flex h-6 w-fit flex-row space-x-1 overflow-x-auto rounded bg-p-gray-10 p-1 text-sm font-medium text-p-gray-50",
+  "aria-label": "Tabs Pills",
+  role: "tablist",
+  "aria-orientation": "horizontal"
+};
+const _hoisted_2 = ["disabled", "aria-selected", "data-tab", "aria-controls", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PTabsPills"
+  },
+  __name: "p-tabs-pills",
+  props: {
+    modelValue: { type: [String, Number, Boolean], default: "" },
+    items: { default: () => [] },
+    itemText: { default: "text" },
+    itemValue: { default: "value" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (tab) => {
+          return openBlock(), createElementBlock("button", {
+            key: String(tab[_ctx.itemValue]),
+            type: "button",
+            class: normalizeClass(["rounded px-2 pb-px leading-none transition-all duration-300", [
+              tab.disabled ? "text-p-gray-30" : tab[_ctx.itemValue] === _ctx.modelValue ? "bg-night text-surface hover:bg-night hover:text-surface" : "hover:text-p-gray-70"
+            ]]),
+            disabled: !!tab.disabled,
+            role: "tab",
+            "aria-selected": tab[_ctx.itemValue] === _ctx.modelValue,
+            "data-tab": `#${tab[_ctx.itemValue]}`,
+            "aria-controls": String(tab[_ctx.itemValue]),
+            onClick: ($event) => _ctx.$emit("update:modelValue", tab[_ctx.itemValue])
+          }, toDisplayString(tab[_ctx.itemText]), 11, _hoisted_2);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/index.js

@@ -52,7 +52,8 @@ import { default as default11 } from "./p-table-filter-icon.js";
 import { _ as _20 } from "./chunks/p-table-loader.js";
 import { SORTING_TYPES } from "./p-table-sort.js";
 import { _ as _21 } from "./chunks/p-tabs.js";
-import { _ as _22 } from "./chunks/p-textarea.js";
+import { _ as _22 } from "./chunks/p-tabs-pills.js";
+import { _ as _23 } from "./chunks/p-textarea.js";
 import { default as default12 } from "./p-toggle.js";
 import { squirrelTailwindConfig } from "./config.js";
 import { S } from "./chunks/p-btn.types.js";
@@ -1079,7 +1080,8 @@ export {
   _sfc_main as PTableSort,
   PTableTd,
   _21 as PTabs,
-  _22 as PTextarea,
+  _22 as PTabsPills,
+  _23 as PTextarea,
   default12 as PToggle,
   P_ICON_ALIASES,
   S as SIZES,

package/dist/es/p-checkbox.js

@@ -31,15 +31,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const style = computed(() => {
       return allAttrs.style;
     });
+    const isDisabled = computed(() => {
+      return "disabled" in allAttrs && allAttrs.disabled !== false;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
-        class: normalizeClass(["inline-flex items-center", [{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]]),
+        class: normalizeClass(["inline-flex items-center", [
+          { hidden: _ctx.$attrs.hidden },
+          _ctx.$attrs.class,
+          { "cursor-not-allowed opacity-50": isDisabled.value, "cursor-pointer": !isDisabled.value }
+        ]]),
         style: normalizeStyle(style.value)
       }, [
         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"
+          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"
         }, attrs.value, {
           checked: __props.modelValue,
           onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.checked))
@@ -51,7 +58,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-81cd6154"]]);
+const pCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b394a2f0"]]);
 export {
   pCheckbox as default
 };

package/dist/es/p-tabs-pills.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "./chunks/p-tabs-pills.js";
+export {
+  _sfc_main as default
+};

package/dist/squirrel/components/index.d.ts

@@ -50,6 +50,7 @@ import { SORTING_TYPES, type SortingType, type SortingTypeWithoutNoSorting } fro
 import PTableSort from './p-table-sort/p-table-sort.vue';
 import PTableTd from './p-table-td/p-table-td.vue';
 import PTabs from './p-tabs/p-tabs.vue';
+import PTabsPills from './p-tabs-pills/p-tabs-pills.vue';
 import PTextarea from './p-textarea/p-textarea.vue';
 import PToggle from './p-toggle/p-toggle.vue';
-export { colsInjectionKey, FileUploadFile, HeaderCellAttrs, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, MIN_WIDTH_COL_RESIZE, P_ICON_ALIASES, PActionBar, PActionBarAction, PAlert, PAvatar, PBtn, PCard, PCheckbox, PChips, PCloseBtn, PDatePicker, PDrawer, PDropdown, PDropdownSelect, PFileUpload, PFilterIcon, PIcon, PIconAlias, PInfoIcon, PInlineDatePicker, PInput, PInputNumber, PInputPercent, PInputSearch, PLink, PLoading, PModal, PPagination, PPaginationInfo, PProgressBar, PRingLoader, PSelect, PSelectBtn, PSelectList, PSelectPill, PSkeletonLoader, PSteps, PTable, PTableHeaderCell, PTableLoader, PTableSort, PTableTd, PTabs, PTextarea, PToggle, Size, SORTING_TYPES, SortingType, SortingTypeWithoutNoSorting, StepItem, TableCol, ThAttrs, usePLoading, usePModal, usePTableColResize, usePTableRowVirtualizer, useSelectList, };
+export { colsInjectionKey, FileUploadFile, HeaderCellAttrs, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, MIN_WIDTH_COL_RESIZE, P_ICON_ALIASES, PActionBar, PActionBarAction, PAlert, PAvatar, PBtn, PCard, PCheckbox, PChips, PCloseBtn, PDatePicker, PDrawer, PDropdown, PDropdownSelect, PFileUpload, PFilterIcon, PIcon, PIconAlias, PInfoIcon, PInlineDatePicker, PInput, PInputNumber, PInputPercent, PInputSearch, PLink, PLoading, PModal, PPagination, PPaginationInfo, PProgressBar, PRingLoader, PSelect, PSelectBtn, PSelectList, PSelectPill, PSkeletonLoader, PSteps, PTable, PTableHeaderCell, PTableLoader, PTableSort, PTableTd, PTabs, PTabsPills, PTextarea, PToggle, Size, SORTING_TYPES, SortingType, SortingTypeWithoutNoSorting, StepItem, TableCol, ThAttrs, usePLoading, usePModal, usePTableColResize, usePTableRowVirtualizer, useSelectList, };

package/dist/squirrel/components/p-tabs-pills/p-tabs-pills.vue.d.ts

@@ -0,0 +1,21 @@
+type Value = string | number | boolean;
+type Option = {
+    [key: string]: Value;
+};
+type Props = {
+    modelValue?: Value;
+    items?: readonly Option[];
+    itemText?: string;
+    itemValue?: string;
+};
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: Value) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((val: Value) => any) | undefined;
+}>, {
+    modelValue: Value;
+    items: readonly Option[];
+    itemText: string;
+    itemValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/squirrel.css

@@ -191,7 +191,7 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-divider {
   --tw-content: "";
   content: var(--tw-content);
 }
-input[type='checkbox'][data-v-81cd6154]:checked {
+input[type='checkbox'][data-v-b394a2f0]: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");
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.3.4",
+  "version": "8.4.0",
   "packageManager": "pnpm@10.6.4",
   "type": "module",
   "scripts": {
@@ -49,56 +49,50 @@
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@pequity/eslint-config": "^2.0.1",
-    "@playwright/test": "^1.52.0",
+    "@pequity/eslint-config": "^2.0.2",
+    "@playwright/test": "^1.53.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/test-runner": "^0.22.0",
-    "@storybook/theming": "^8.6.14",
-    "@storybook/vue3": "^8.6.14",
-    "@storybook/vue3-vite": "^8.6.14",
-    "@tanstack/vue-virtual": "3.13.9",
+    "@storybook/addon-a11y": "^9.0.10",
+    "@storybook/addon-docs": "^9.0.10",
+    "@storybook/addon-links": "^9.0.10",
+    "@storybook/test-runner": "^0.23.0",
+    "@storybook/vue3": "^9.0.10",
+    "@storybook/vue3-vite": "^9.0.10",
+    "@tanstack/vue-virtual": "3.13.10",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.15.21",
+    "@types/node": "^24.0.3",
     "@vitejs/plugin-vue": "^5.2.4",
-    "@vitest/coverage-v8": "^3.1.4",
-    "@vue/compiler-sfc": "3.5.15",
+    "@vitest/coverage-v8": "^3.2.3",
+    "@vue/compiler-sfc": "3.5.16",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.2",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.27.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint": "^9.29.0",
+    "eslint-plugin-storybook": "^9.0.10",
     "floating-vue": "5.2.2",
-    "glob": "^11.0.2",
+    "glob": "^11.0.3",
     "husky": "^9.1.7",
     "iconify-icon": "^3.0.0",
     "jsdom": "^26.1.0",
-    "lint-staged": "^16.0.0",
+    "lint-staged": "^16.1.2",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.6",
     "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.6.12",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.89.0",
+    "sass": "^1.89.2",
     "semantic-release": "^24.2.5",
-    "storybook": "^8.6.14",
+    "storybook": "^9.0.10",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.8.3",
     "vite": "^6.3.5",
-    "vitest": "^3.1.4",
-    "vue": "3.5.15",
+    "vitest": "^3.2.3",
+    "vue": "3.5.16",
     "vue-currency-input": "3.2.1",
     "vue-router": "4.5.1",
     "vue-toastification": "2.0.0-rc.5",

package/squirrel/components/index.ts

@@ -63,6 +63,7 @@ import {
 import PTableSort from '@squirrel/components/p-table-sort/p-table-sort.vue';
 import PTableTd from '@squirrel/components/p-table-td/p-table-td.vue';
 import PTabs from '@squirrel/components/p-tabs/p-tabs.vue';
+import PTabsPills from '@squirrel/components/p-tabs-pills/p-tabs-pills.vue';
 import PTextarea from '@squirrel/components/p-textarea/p-textarea.vue';
 import PToggle from '@squirrel/components/p-toggle/p-toggle.vue';
 
@@ -117,6 +118,7 @@ export {
   PTableSort,
   PTableTd,
   PTabs,
+  PTabsPills,
   PTextarea,
   PToggle,
   Size,

package/squirrel/components/p-action-bar/p-action-bar.stories.js

@@ -2,8 +2,8 @@ import PaginateLeftIcon from '@squirrel/assets/pagination-left-icon.svg?inline';
 import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
 import PActionBar from '@squirrel/components/p-action-bar/p-action-bar.vue';
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
-import { action } from '@storybook/addon-actions';
-import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 
 const actionBarActions = [
   {

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

@@ -1,5 +1,5 @@
 import PAlert from '@squirrel/components/p-alert/p-alert.vue';
-import { expect, within } from '@storybook/test';
+import { expect, within } from 'storybook/test';
 
 export default {
   title: 'Components/PAlert',

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

@@ -1,6 +1,6 @@
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
-import { action } from '@storybook/addon-actions';
-import { expect, within } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { expect, within } from 'storybook/test';
 
 // You can also import an `md` file and use it as a story's description
 // import PBtnReadme from './PBtn.readme.md';

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

@@ -14,7 +14,6 @@ const checkboxClasses = [
   'ease-in-out',
   'checked:border-none',
   'checked:bg-primary',
-  'disabled:opacity-50',
 ];
 
 describe('PCheckbox.vue', () => {
@@ -39,4 +38,20 @@ describe('PCheckbox.vue', () => {
     expect(input.classes()).toEqual(checkboxClasses);
     expect(input.attributes().disabled).toBeDefined();
   });
+
+  it('applies correct styling to label based on disabled state', async () => {
+    const enabledWrapper = createWrapperFor(PCheckbox, { props: { checked: true } });
+    const disabledWrapper = createWrapperFor(PCheckbox, { props: { checked: true, disabled: true } });
+
+    const enabledLabel = await enabledWrapper.find('label');
+    const disabledLabel = await disabledWrapper.find('label');
+
+    expect(enabledLabel.classes()).toContain('cursor-pointer');
+    expect(enabledLabel.classes()).not.toContain('cursor-not-allowed');
+    expect(enabledLabel.classes()).not.toContain('opacity-50');
+
+    expect(disabledLabel.classes()).toContain('cursor-not-allowed');
+    expect(disabledLabel.classes()).toContain('opacity-50');
+    expect(disabledLabel.classes()).not.toContain('cursor-pointer');
+  });
 });

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

@@ -1,5 +1,5 @@
 import PCheckbox from '@squirrel/components/p-checkbox/p-checkbox.vue';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 export default {
   title: 'Components/PCheckbox',

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

@@ -1,9 +1,17 @@
 <template>
-  <label class="inline-flex items-center" :class="[{ hidden: $attrs.hidden }, $attrs.class]" :style="style">
+  <label
+    class="inline-flex items-center"
+    :class="[
+      { hidden: $attrs.hidden },
+      $attrs.class,
+      { 'cursor-not-allowed opacity-50': isDisabled, 'cursor-pointer': !isDisabled },
+    ]"
+    :style="style"
+  >
     <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"
+      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"
       v-bind="attrs"
       :checked="modelValue"
       @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
@@ -48,6 +56,10 @@ const attrs = computed(() => {
 const style = computed(() => {
   return allAttrs.style as StyleValue;
 });
+
+const isDisabled = computed(() => {
+  return 'disabled' in allAttrs && allAttrs.disabled !== false;
+});
 </script>
 
 <style lang="css" scoped>

package/squirrel/components/p-close-btn/p-close-btn.stories.js

@@ -1,6 +1,6 @@
 import PCloseBtn from '@squirrel/components/p-close-btn/p-close-btn.vue';
-import { action } from '@storybook/addon-actions';
-import { expect, within } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { expect, within } from 'storybook/test';
 
 export default {
   title: 'Components/PCloseBtn',

package/squirrel/components/p-file-upload/p-file-upload.spec.js

@@ -1,6 +1,6 @@
 import PFileUpload from '@squirrel/components/p-file-upload/p-file-upload.vue';
-import { expect } from '@storybook/test';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { expect } from 'storybook/test';
 import { vi } from 'vitest';
 
 // Mocking the toastification library

package/squirrel/components/p-input-number/p-input-number.spec.js

@@ -1,6 +1,6 @@
 import PInputNumber from '@squirrel/components/p-input-number/p-input-number.vue';
-import { expect } from '@storybook/test';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { expect } from 'storybook/test';
 
 const baseClasses = () => [
   'text-night',

package/squirrel/components/p-ring-loader/p-ring-loader.spec.js

@@ -1,6 +1,6 @@
 import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
-import { expect } from '@storybook/test';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { expect } from 'storybook/test';
 
 describe('PRingLoader.vue', () => {
   it('renders correctly with custom props', async () => {

package/squirrel/components/p-select-btn/p-select-btn.stories.js

@@ -1,6 +1,6 @@
 import { fieldArgTypes } from '@root/stories/common/field';
 import PSelectBtn from '@squirrel/components/p-select-btn/p-select-btn.vue';
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { ref } from 'vue';
 
 const selectItems = [

package/squirrel/components/p-select-pill/p-select-pill.stories.js

@@ -1,7 +1,7 @@
 import { fieldArgTypes } from '@root/stories/common/field';
 import { getCSSTransitionDuration, sleep } from '@root/stories/common/helpers';
 import PSelectPill from '@squirrel/components/p-select-pill/p-select-pill.vue';
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { ref } from 'vue';
 
 const ACTIVE_CLASS = 'text-p-purple-60';

package/squirrel/components/p-table-header-cell/p-table-header-cell.stories.js

@@ -1,5 +1,5 @@
 import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 export default {
   title: 'Components/PTableHeaderCell',

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

@@ -1,6 +1,6 @@
 import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
 import PTabs from '@squirrel/components/p-tabs/p-tabs.vue';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 export default {
   title: 'Components/PTabs',

package/squirrel/components/p-tabs-pills/p-tabs-pills.spec.js

@@ -0,0 +1,117 @@
+import PTabsPills from '@squirrel/components/p-tabs-pills/p-tabs-pills.vue';
+import { createWrapperFor } from '@tests/vitest.helpers';
+
+const ACTIVE_CLASSES = ['bg-night', 'text-surface', 'hover:bg-night', 'hover:text-surface'];
+
+const createTabItems = () => [
+  { value: 'tab1', text: 'Home' },
+  { value: 'tab2', text: 'Profile' },
+  { value: 'tab3', text: 'Messages' },
+  { value: 'tab4', text: 'About' },
+  { value: 'tab5', text: 'Settings' },
+];
+
+const createWrapper = (props = {}) => {
+  return createWrapperFor(PTabsPills, {
+    props: {
+      items: createTabItems(),
+      ...props,
+    },
+  });
+};
+
+describe('PTabsPills.vue', () => {
+  it('renders correctly', async () => {
+    const wrapper = createWrapper();
+    const buttons = await wrapper.findAll('button');
+
+    buttons.forEach((button) => {
+      ACTIVE_CLASSES.forEach((className) => {
+        expect(button.classes()).not.toContain(className);
+      });
+    });
+    expect(buttons.length).toBe(5);
+    expect(buttons[1].text()).toBe(createTabItems()[1].text);
+  });
+
+  it(`updates the value bound with v-model`, async () => {
+    const wrapper = createWrapperFor({
+      data() {
+        return {
+          selected: 'tab1',
+          items: createTabItems(),
+        };
+      },
+      template: '<PTabsPills :items="items" v-model="selected" />',
+      components: { PTabsPills },
+    });
+
+    await wrapper.setData({ selected: 'tab4' });
+
+    const selected = wrapper.findAll('button')[3];
+
+    ACTIVE_CLASSES.forEach((className) => {
+      expect(selected.classes()).toContain(className);
+    });
+    expect(selected.attributes('aria-selected')).toBe('true');
+  });
+
+  it(`updates the value bound with v-model when an option is clicked`, async () => {
+    const wrapper = createWrapperFor({
+      data() {
+        return {
+          selected: 'tab1',
+          items: createTabItems(),
+        };
+      },
+      template: '<PTabsPills :items="items" v-model="selected" />',
+      components: { PTabsPills },
+    });
+
+    await wrapper.findAll('button')[3].trigger('click');
+
+    const selected = wrapper.findAll('button')[3];
+
+    ACTIVE_CLASSES.forEach((className) => {
+      expect(selected.classes()).toContain(className);
+    });
+    expect(selected.attributes('aria-selected')).toBe('true');
+  });
+
+  it('works with custom itemValue and itemText', async () => {
+    const tabItems = createTabItems();
+
+    const wrapper = createWrapper({
+      items: tabItems.map((item) => ({ customValue: item.value, customText: item.text })),
+      itemValue: 'customValue',
+      itemText: 'customText',
+    });
+
+    const buttons = await wrapper.findAll('button');
+
+    expect(buttons.length).toBe(5);
+
+    buttons.forEach((button, i) => {
+      expect(button.text()).toBe(tabItems[i].text);
+    });
+  });
+
+  it(`disables an option based on the disabled attribute`, async () => {
+    const wrapper = createWrapper({
+      items: createTabItems().map((item, i) => ({ ...item, disabled: i === 2 })),
+      modelValue: 'tab1',
+    });
+
+    const buttons = await wrapper.findAll('button');
+
+    buttons.forEach((button, i) => {
+      if (i === 2) {
+        expect(button.element.disabled).toBe(true);
+        expect(button.classes()).toContain('text-p-gray-30');
+      } else {
+        expect(button.element.disabled).toBe(false);
+        expect(button.classes()).not.toContain('text-p-gray-30');
+      }
+    });
+  });
+});

package/squirrel/components/p-tabs-pills/p-tabs-pills.stories.js

@@ -0,0 +1,139 @@
+import PTabsPills from '@squirrel/components/p-tabs-pills/p-tabs-pills.vue';
+import { expect, userEvent, within } from 'storybook/test';
+import { ref } from 'vue';
+
+const ACTIVE_CLASSES = ['bg-night', 'text-surface', 'hover:bg-night', 'hover:text-surface'];
+
+const DISABLED_CLASSES = ['text-p-gray-30'];
+
+export default {
+  title: 'Components/PTabsPills',
+  component: PTabsPills,
+  tags: ['autodocs'],
+  render: (args) => ({
+    components: { PTabsPills },
+    setup() {
+      const selected = ref('tab1');
+
+      return { args, selected };
+    },
+    template: `
+      <PTabsPills v-model="selected" v-bind="args" />
+      <div class="mt-2">Selected: {{ selected }}</div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        component: `PTabsPills can be used as a tab or button group that allows the user to select an option from a list of options.`,
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    items: [
+      { value: 'tab1', text: 'Home' },
+      { value: 'tab2', text: 'Profile' },
+      { value: 'tab3', text: 'Messages' },
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByText(/Profile/i));
+
+    const button = canvas.getByText(/Profile/i).closest('button');
+    ACTIVE_CLASSES.forEach((className) => {
+      expect(button.classList).toContain(className);
+    });
+  },
+};
+
+export const CustomValueAndText = {
+  args: {
+    items: [
+      { myValue: 'tab1', myText: 'Home' },
+      { myValue: 'tab2', myText: 'Profile' },
+      { myValue: 'tab3', myText: 'Messages' },
+    ],
+    itemValue: 'myValue',
+    itemText: 'myText',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'You can customize the property names used for value and text using `itemValue` and `itemText` props.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByText(/Profile/i));
+
+    const button = canvas.getByText(/Profile/i).closest('button');
+    ACTIVE_CLASSES.forEach((className) => {
+      expect(button.classList).toContain(className);
+    });
+  },
+};
+
+export const DisabledItems = {
+  args: {
+    items: [
+      { myValue: 'tab1', myText: 'Home', disabled: false },
+      { myValue: 'tab2', myText: 'Profile', disabled: true },
+      { myValue: 'tab3', myText: 'About', disabled: true },
+      { myValue: 'tab4', myText: 'Messages', disabled: false },
+    ],
+    itemValue: 'myValue',
+    itemText: 'myText',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'You can disable specific tabs by adding a `disabled` property to the items.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Check that disabled buttons have disabled classes
+    const disabledButtons = [
+      canvas.getByText(/Profile/i).closest('button'),
+      canvas.getByText(/About/i).closest('button'),
+    ];
+    disabledButtons.forEach((button) => {
+      DISABLED_CLASSES.forEach((className) => {
+        expect(button.classList).toContain(className);
+      });
+      ACTIVE_CLASSES.forEach((className) => {
+        expect(button.classList).not.toContain(className);
+      });
+    });
+
+    // Try to click a disabled button
+    await userEvent.click(canvas.getByText(/Profile/i));
+
+    // Check that disabled button still has disabled classes and not active classes
+    const disabledButton = canvas.getByText(/Profile/i).closest('button');
+    DISABLED_CLASSES.forEach((className) => {
+      expect(disabledButton.classList).toContain(className);
+    });
+    ACTIVE_CLASSES.forEach((className) => {
+      expect(disabledButton.classList).not.toContain(className);
+    });
+
+    // Check that Home button still has active classes
+    const homeButton = canvas.getByText(/Home/i).closest('button');
+    ACTIVE_CLASSES.forEach((className) => {
+      expect(homeButton.classList).toContain(className);
+    });
+    DISABLED_CLASSES.forEach((className) => {
+      expect(homeButton.classList).not.toContain(className);
+    });
+  },
+};

package/squirrel/components/p-tabs-pills/p-tabs-pills.vue

@@ -0,0 +1,60 @@
+<template>
+  <nav
+    class="flex h-6 w-fit flex-row space-x-1 overflow-x-auto rounded bg-p-gray-10 p-1 text-sm font-medium text-p-gray-50"
+    aria-label="Tabs Pills"
+    role="tablist"
+    aria-orientation="horizontal"
+  >
+    <button
+      v-for="tab in items"
+      :key="String(tab[itemValue])"
+      type="button"
+      class="rounded px-2 pb-px leading-none transition-all duration-300"
+      :class="[
+        tab.disabled
+          ? 'text-p-gray-30'
+          : tab[itemValue] === modelValue
+            ? 'bg-night text-surface hover:bg-night hover:text-surface'
+            : 'hover:text-p-gray-70',
+      ]"
+      :disabled="!!tab.disabled"
+      role="tab"
+      :aria-selected="tab[itemValue] === modelValue"
+      :data-tab="`#${tab[itemValue]}`"
+      :aria-controls="String(tab[itemValue])"
+      @click="$emit('update:modelValue', tab[itemValue])"
+    >
+      {{ tab[itemText] }}
+    </button>
+  </nav>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'PTabsPills',
+});
+
+type Value = string | number | boolean;
+
+type Option = {
+  [key: string]: Value;
+};
+
+type Props = {
+  modelValue?: Value;
+  items?: readonly Option[];
+  itemText?: string;
+  itemValue?: string;
+};
+
+withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  items: () => [],
+  itemValue: 'value',
+  itemText: 'text',
+});
+
+defineEmits<{
+  'update:modelValue': [val: Value];
+}>();
+</script>

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

@@ -1,6 +1,6 @@
 import PToggle from '@squirrel/components/p-toggle/p-toggle.vue';
-import { expect } from '@storybook/test';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { expect } from 'storybook/test';
 
 describe('PToggle.vue', () => {
   it('renders correctly', async () => {

package/squirrel/composables/useInputClasses.spec.js

@@ -1,5 +1,5 @@
 import { useInputClasses } from '@squirrel/composables/useInputClasses';
-import { expect } from '@storybook/test';
+import { expect } from 'storybook/test';
 import { reactive, ref } from 'vue';
 
 const baseInputClassesMd = () => [