@pequity/squirrel 6.0.12 → 6.0.13

package/dist/squirrel/utils/inputClassesMixin.d.ts

@@ -1,10 +1,10 @@
-import { type InputSize } from './inputClassesShared';
+import { type Size } from '../components/p-btn/p-btn.types';
 import { type PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<InputSize>;
+        type: PropType<Size>;
         default: string;
-        validator(value: InputSize): boolean;
+        validator(value: Size): boolean;
     };
     errorMsg: {
         type: StringConstructor;
@@ -18,18 +18,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {
-    errorMsgClasses: string;
-}, {
+}>, {}, {}, {
+    allClasses(): {
+        input: string;
+        label: string;
+        errorMessage: string;
+    };
     inputClasses(): string;
     labelClasses(): string;
+    errorMsgClasses(): string;
     selectClasses(): string;
     textareaClasses(): string;
 }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<InputSize>;
+        type: PropType<Size>;
         default: string;
-        validator(value: InputSize): boolean;
+        validator(value: Size): boolean;
     };
     errorMsg: {
         type: StringConstructor;

package/dist/squirrel.css

@@ -263,77 +263,77 @@ from {
 to {
     opacity: 0;
 }
-}.icon.clear[data-v-2674242c] {
+}.icon.clear[data-v-78b7a6f8] {
   background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1634_880)'%3e%3cpath%20d='M16%208C16%206.41775%2015.5308%204.87104%2014.6518%203.55544C13.7727%202.23985%2012.5233%201.21447%2011.0615%200.608967C9.59966%200.00346629%207.99113%20-0.15496%206.43928%200.153721C4.88743%200.462403%203.46197%201.22433%202.34315%202.34315C1.22433%203.46197%200.462403%204.88743%200.153721%206.43928C-0.15496%207.99113%200.00346629%209.59966%200.608967%2011.0615C1.21447%2012.5233%202.23985%2013.7727%203.55544%2014.6518C4.87104%2015.5308%206.41775%2016%208%2016C10.1217%2016%2012.1566%2015.1571%2013.6569%2013.6569C15.1571%2012.1566%2016%2010.1217%2016%208ZM11.14%2010.1867C11.2642%2010.3116%2011.3339%2010.4805%2011.3339%2010.6567C11.3339%2010.8328%2011.2642%2011.0018%2011.14%2011.1267C11.078%2011.1892%2011.0043%2011.2388%2010.9231%2011.2726C10.8418%2011.3064%2010.7547%2011.3239%2010.6667%2011.3239C10.5787%2011.3239%2010.4915%2011.3064%2010.4103%2011.2726C10.329%2011.2388%2010.2553%2011.1892%2010.1933%2011.1267L8.12%209.05334C8.08809%209.02429%208.04649%209.0082%208.00334%209.0082C7.96019%209.0082%207.91858%209.02429%207.88667%209.05334L5.81334%2011.1267C5.6858%2011.2359%205.52175%2011.293%205.35397%2011.2865C5.18618%2011.28%205.02702%2011.2104%204.90829%2011.0917C4.78957%2010.973%204.72001%2010.8138%204.71353%2010.646C4.70705%2010.4783%204.76412%2010.3142%204.87334%2010.1867L6.94667%208.11334C6.97572%208.08142%206.99181%208.03982%206.99181%207.99667C6.99181%207.95352%206.97572%207.91192%206.94667%207.88L4.87334%205.80667C4.81085%205.7447%204.76126%205.67096%204.72741%205.58972C4.69356%205.50848%204.67614%205.42135%204.67614%205.33334C4.67614%205.24533%204.69356%205.15819%204.72741%205.07695C4.76126%204.99571%204.81085%204.92198%204.87334%204.86C4.99825%204.73584%205.16721%204.66614%205.34334%204.66614C5.51946%204.66614%205.68843%204.73584%205.81334%204.86L7.88667%206.93334C7.90163%206.94928%207.91971%206.96199%207.93977%206.97068C7.95984%206.97936%207.98147%206.98384%208.00334%206.98384C8.0252%206.98384%208.04684%206.97936%208.0669%206.97068C8.08697%206.96199%208.10504%206.94928%208.12%206.93334L10.1933%204.86C10.2555%204.79784%2010.3293%204.74854%2010.4105%204.7149C10.4917%204.68126%2010.5788%204.66394%2010.6667%204.66394C10.7546%204.66394%2010.8416%204.68126%2010.9228%204.7149C11.0041%204.74854%2011.0778%204.79784%2011.14%204.86C11.2022%204.92216%2011.2515%204.99596%2011.2851%205.07717C11.3188%205.15839%2011.3361%205.24543%2011.3361%205.33334C11.3361%205.42124%2011.3188%205.50829%2011.2851%205.5895C11.2515%205.67072%2011.2022%205.74451%2011.14%205.80667L9.06667%207.88C9.05073%207.89497%209.03802%207.91304%209.02933%207.93311C9.02065%207.95317%209.01616%207.97481%209.01616%207.99667C9.01616%208.01854%209.02065%208.04017%209.02933%208.06024C9.03802%208.0803%209.05073%208.09837%209.06667%208.11334L11.14%2010.1867Z'%20fill='%23A0AEC0'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1634_880'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
   background-position: center center;
   transition: background-image 0.4s;
 }
-.icon.clear-sm[data-v-2674242c] {
+.icon.clear-sm[data-v-78b7a6f8] {
   background-size: 0.875rem 0.875rem;
   width: 0.875rem;
   height: 0.875rem;
   bottom: 0.5rem;
   right: 0.375rem;
 }
-.icon.clear-md[data-v-2674242c] {
+.icon.clear-md[data-v-78b7a6f8] {
   background-size: 1rem 1rem;
   height: 1rem;
   width: 1rem;
   bottom: 0.75rem;
   right: 0.5rem;
 }
-.icon.clear-lg[data-v-2674242c] {
+.icon.clear-lg[data-v-78b7a6f8] {
   background-size: 1rem 1rem;
   height: 1rem;
   width: 1rem;
   bottom: 1rem;
   right: 0.5rem;
 }
-.icon.clear[data-v-2674242c]:hover {
+.icon.clear[data-v-78b7a6f8]:hover {
   background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1634_896)'%3e%3cpath%20d='M16%208C16%206.41775%2015.5308%204.87104%2014.6518%203.55544C13.7727%202.23985%2012.5233%201.21447%2011.0615%200.608967C9.59966%200.00346629%207.99113%20-0.15496%206.43928%200.153721C4.88743%200.462403%203.46197%201.22433%202.34315%202.34315C1.22433%203.46197%200.462403%204.88743%200.153721%206.43928C-0.15496%207.99113%200.00346629%209.59966%200.608967%2011.0615C1.21447%2012.5233%202.23985%2013.7727%203.55544%2014.6518C4.87104%2015.5308%206.41775%2016%208%2016C10.1217%2016%2012.1566%2015.1571%2013.6569%2013.6569C15.1571%2012.1566%2016%2010.1217%2016%208ZM11.14%2010.1867C11.2642%2010.3116%2011.3339%2010.4805%2011.3339%2010.6567C11.3339%2010.8328%2011.2642%2011.0018%2011.14%2011.1267C11.078%2011.1892%2011.0043%2011.2388%2010.9231%2011.2726C10.8418%2011.3064%2010.7547%2011.3239%2010.6667%2011.3239C10.5787%2011.3239%2010.4915%2011.3064%2010.4103%2011.2726C10.329%2011.2388%2010.2553%2011.1892%2010.1933%2011.1267L8.12%209.05334C8.08809%209.02429%208.04649%209.0082%208.00334%209.0082C7.96019%209.0082%207.91858%209.02429%207.88667%209.05334L5.81334%2011.1267C5.6858%2011.2359%205.52175%2011.293%205.35397%2011.2865C5.18618%2011.28%205.02702%2011.2104%204.90829%2011.0917C4.78957%2010.973%204.72001%2010.8138%204.71353%2010.646C4.70705%2010.4783%204.76412%2010.3142%204.87334%2010.1867L6.94667%208.11334C6.97572%208.08142%206.99181%208.03982%206.99181%207.99667C6.99181%207.95352%206.97572%207.91192%206.94667%207.88L4.87334%205.80667C4.81085%205.7447%204.76126%205.67096%204.72741%205.58972C4.69356%205.50848%204.67614%205.42135%204.67614%205.33334C4.67614%205.24533%204.69356%205.15819%204.72741%205.07695C4.76126%204.99571%204.81085%204.92198%204.87334%204.86C4.99825%204.73584%205.16721%204.66614%205.34334%204.66614C5.51946%204.66614%205.68843%204.73584%205.81334%204.86L7.88667%206.93334C7.90163%206.94928%207.91971%206.96199%207.93977%206.97068C7.95984%206.97936%207.98147%206.98384%208.00334%206.98384C8.0252%206.98384%208.04684%206.97936%208.0669%206.97068C8.08697%206.96199%208.10504%206.94928%208.12%206.93334L10.1933%204.86C10.2555%204.79784%2010.3293%204.74854%2010.4105%204.7149C10.4917%204.68126%2010.5788%204.66394%2010.6667%204.66394C10.7546%204.66394%2010.8416%204.68126%2010.9228%204.7149C11.0041%204.74854%2011.0778%204.79784%2011.14%204.86C11.2022%204.92216%2011.2515%204.99596%2011.2851%205.07717C11.3188%205.15839%2011.3361%205.24543%2011.3361%205.33334C11.3361%205.42124%2011.3188%205.50829%2011.2851%205.5895C11.2515%205.67072%2011.2022%205.74451%2011.14%205.80667L9.06667%207.88C9.05073%207.89497%209.03802%207.91304%209.02933%207.93311C9.02065%207.95317%209.01616%207.97481%209.01616%207.99667C9.01616%208.01854%209.02065%208.04017%209.02933%208.06024C9.03802%208.0803%209.05073%208.09837%209.06667%208.11334L11.14%2010.1867Z'%20fill='%23424E6E'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1634_896'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
-.icon.search[data-v-2674242c] {
+.icon.search[data-v-78b7a6f8] {
   background-image: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_9127_330342)'%3e%3cpath%20d='M11.705%2010.295L9.38501%208.00004C10.0193%207.0497%2010.3178%205.91467%2010.2331%204.77526C10.1484%203.63584%209.68546%202.5574%208.91771%201.71124C8.14996%200.86508%207.12147%200.299735%205.99563%200.105014C4.8698%20-0.0897079%203.71117%200.0973621%202.70383%200.636506C1.69648%201.17565%200.898177%202.03595%200.435738%203.08073C-0.0267015%204.12552%20-0.126757%205.29487%200.151467%206.40303C0.429691%207.51119%201.07024%208.4946%201.97135%209.19704C2.87246%209.89948%203.98246%2010.2807%205.12501%2010.28C6.13901%2010.2811%207.13002%209.97801%207.97001%209.41004L10.295%2011.735C10.4824%2011.9213%2010.7358%2012.0258%2011%2012.0258C11.2642%2012.0258%2011.5176%2011.9213%2011.705%2011.735C11.8018%2011.6418%2011.8788%2011.5299%2011.9314%2011.4062C11.9839%2011.2825%2012.011%2011.1495%2012.011%2011.015C12.011%2010.8806%2011.9839%2010.7476%2011.9314%2010.6239C11.8788%2010.5002%2011.8018%2010.3883%2011.705%2010.295ZM5.12501%201.50004C5.84176%201.50004%206.54241%201.71251%207.13843%202.11061C7.73445%202.50871%208.19908%203.07456%208.47359%203.73666C8.74811%204.39875%208.82019%205.12736%208.68072%205.8304C8.54125%206.53345%208.1965%207.17937%207.69004%207.68653C7.18357%208.19369%206.53813%208.53934%205.83527%208.67977C5.13242%208.82021%204.40371%208.74913%203.74125%208.47553C3.07878%208.20193%202.51228%207.73808%202.11336%207.14261C1.71444%206.54714%201.501%205.84678%201.50001%205.13004C1.50001%204.16817%201.88177%203.24562%202.56145%202.565C3.24112%201.88439%204.16314%201.50136%205.12501%201.50004Z'%20fill='%23718096'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_9127_330342'%3e%3crect%20width='12'%20height='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
-.icon.search-sm[data-v-2674242c] {
+.icon.search-sm[data-v-78b7a6f8] {
   background-size: 0.75rem 0.75rem;
   left: 0.5rem;
   bottom: 0.625rem;
   width: 0.75rem;
   height: 0.75rem;
 }
-.icon.search-md[data-v-2674242c] {
+.icon.search-md[data-v-78b7a6f8] {
   background-size: 1rem 1rem;
   width: 1rem;
   height: 1rem;
   left: 0.75rem;
   bottom: 0.75rem;
 }
-.icon.search-lg[data-v-2674242c] {
+.icon.search-lg[data-v-78b7a6f8] {
   background-size: 1rem 1rem;
   width: 1rem;
   height: 1rem;
   left: 1.125rem;
   bottom: 1rem;
 }
-.icon.enter[data-v-2674242c] {
+.icon.enter[data-v-78b7a6f8] {
   background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1627_786)'%3e%3crect%20width='24'%20height='24'%20rx='5'%20fill='%23ECF1FF'/%3e%3cpath%20d='M19.17%201.03744e-05H4.83C4.19619%20-0.00130459%203.56834%200.122398%202.98239%200.364037C2.39645%200.605676%201.86392%200.960506%201.41528%201.40822C0.966641%201.85592%200.610708%202.38772%200.367855%202.97316C0.125002%203.55861%20-1.36406e-06%204.1862%200%204.82001L0%2019.17C0%2020.451%200.508874%2021.6795%201.41467%2022.5853C2.32048%2023.4911%203.549%2024%204.83%2024H19.17C20.4502%2023.9974%2021.6772%2023.4876%2022.5824%2022.5824C23.4876%2021.6772%2023.9974%2020.4502%2024%2019.17V4.82001C23.9974%203.54075%2023.4873%202.31479%2022.5818%201.41115C21.6763%200.507508%2020.4493%207.63258e-06%2019.17%201.03744e-05ZM22%2019.17C22%2019.9206%2021.7018%2020.6404%2021.1711%2021.1711C20.6404%2021.7018%2019.9206%2022%2019.17%2022H4.83C4.07944%2022%203.35962%2021.7018%202.82889%2021.1711C2.29816%2020.6404%202%2019.9206%202%2019.17V4.82001C2.00265%204.07118%202.30197%203.35393%202.83242%202.82536C3.36286%202.29679%204.08117%202.00001%204.83%202.00001H19.17C19.9188%202.00001%2020.6371%202.29679%2021.1676%202.82536C21.698%203.35393%2021.9974%204.07118%2022%204.82001V19.17Z'%20fill='%234750EB'/%3e%3cpath%20d='M17.5%207.5C17.2348%207.5%2016.9804%207.60536%2016.7929%207.79289C16.6054%207.98043%2016.5%208.23478%2016.5%208.5V11.25C16.5%2011.3163%2016.4737%2011.3799%2016.4268%2011.4268C16.3799%2011.4737%2016.3163%2011.5%2016.25%2011.5H10.75C10.6837%2011.5%2010.6201%2011.4737%2010.5732%2011.4268C10.5263%2011.3799%2010.5%2011.3163%2010.5%2011.25V9.5C10.5012%209.30138%2010.4431%209.10691%2010.3333%208.94139C10.2235%208.77587%2010.0669%208.6468%209.88348%208.57063C9.70004%208.49446%209.49807%208.47465%209.30332%208.51372C9.10857%208.55279%208.92987%208.64897%208.79%208.79L5.79%2011.79C5.60375%2011.9774%205.49921%2012.2308%205.49921%2012.495C5.49921%2012.7592%205.60375%2013.0126%205.79%2013.2L8.79%2016.2C8.88261%2016.2945%208.99306%2016.3697%209.11493%2016.4212C9.23681%2016.4727%209.36769%2016.4995%209.5%2016.5C9.76522%2016.5%2010.0196%2016.3946%2010.2071%2016.2071C10.3946%2016.0196%2010.5%2015.7652%2010.5%2015.5V13.75C10.5%2013.6837%2010.5263%2013.6201%2010.5732%2013.5732C10.6201%2013.5263%2010.6837%2013.5%2010.75%2013.5H16.5C17.0304%2013.5%2017.5391%2013.2893%2017.9142%2012.9142C18.2893%2012.5391%2018.5%2012.0304%2018.5%2011.5V8.5C18.5%208.23478%2018.3946%207.98043%2018.2071%207.79289C18.0196%207.60536%2017.7652%207.5%2017.5%207.5Z'%20fill='%234750EB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1627_786'%3e%3crect%20width='24'%20height='24'%20rx='5'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
-.icon.enter-sm[data-v-2674242c] {
+.icon.enter-sm[data-v-78b7a6f8] {
   background-size: 1rem 1rem;
   width: 1rem;
   height: 1rem;
   right: 1.5rem;
   bottom: 0.5rem;
 }
-.icon.enter-md[data-v-2674242c] {
+.icon.enter-md[data-v-78b7a6f8] {
   background-size: 1.5rem 1.5rem;
   width: 1.5rem;
   height: 1.5rem;
   right: 2.0625rem;
   bottom: 0.5rem;
 }
-.icon.enter-lg[data-v-2674242c] {
+.icon.enter-lg[data-v-78b7a6f8] {
   background-size: 1.5rem 1.5rem;
   width: 1.5rem;
   height: 1.5rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "6.0.12",
+  "version": "6.0.13",
   "packageManager": "pnpm@9.15.5",
   "type": "module",
   "scripts": {
@@ -61,7 +61,7 @@
     "@storybook/blocks": "^8.5.6",
     "@storybook/manager-api": "^8.5.6",
     "@storybook/test": "^8.5.6",
-    "@storybook/test-runner": "^0.21.0",
+    "@storybook/test-runner": "^0.21.1",
     "@storybook/theming": "^8.5.6",
     "@storybook/vue3": "^8.5.6",
     "@storybook/vue3-vite": "^8.5.6",
@@ -70,14 +70,14 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.13.4",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/coverage-v8": "^3.0.5",
+    "@vitest/coverage-v8": "^3.0.6",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.1",
     "autoprefixer": "^10.4.20",
     "dayjs": "1.11.13",
     "eslint": "^9.20.1",
-    "eslint-plugin-storybook": "^0.11.2",
+    "eslint-plugin-storybook": "^0.11.3",
     "floating-vue": "5.2.2",
     "glob": "^11.0.1",
     "husky": "^9.1.7",
@@ -87,22 +87,25 @@
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
     "postcss": "^8.5.2",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
     "sass": "^1.85.0",
-    "semantic-release": "^24.2.2",
+    "semantic-release": "^24.2.3",
     "storybook": "^8.5.6",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.7.3",
     "vite": "^6.1.0",
-    "vitest": "^3.0.5",
+    "vitest": "^3.0.6",
     "vue": "3.5.13",
     "vue-currency-input": "3.2.1",
     "vue-router": "4.5.0",
     "vue-toastification": "2.0.0-rc.5",
     "vue-tsc": "2.2.0"
+  },
+  "dependencies": {
+    "tailwind-variants": "^0.3.1"
   }
 }

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

@@ -163,7 +163,7 @@ describe('PBtn.vue', () => {
   it.each([
     ['sm', ['py-1', 'px-2', 'rounded', 'font-medium', 'text-sm']],
     ['md', ['py-2', 'px-6', 'rounded', 'font-medium', 'text-base']],
-    ['lg', ['py-3', 'px-6', 'rounded', 'font-medium', 'text-lg']],
+    ['lg', ['py-2.5', 'px-6', 'rounded', 'font-medium', 'text-lg']],
   ])('renders a button of size %s', async (size, classes) => {
     const wrapper = createWrapperFor(PBtn, { props: { size } });
 

package/squirrel/components/p-btn/p-btn.types.ts

@@ -1 +1,3 @@
-export type Size = 'sm' | 'md' | 'lg';
+export const SIZES = ['sm', 'md', 'lg'] as const;
+
+export type Size = (typeof SIZES)[number];

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

@@ -4,7 +4,7 @@
     v-bind="$attrs"
     :href="sanitizeUrl(to)"
     target="_blank"
-    :class="classes"
+    :class="classes.button"
     :disabled="!!$attrs.disabled ? true : null"
     :aria-disabled="!!$attrs.disabled"
   >
@@ -16,93 +16,80 @@
     :type="to ? null : nativeType"
     :to="to ? to : null"
     :aria-selected="selected"
-    :class="classes"
+    :class="classes.button"
     v-bind="$attrs"
     :disabled="!!$attrs.disabled || loading ? true : null"
     :aria-disabled="$attrs.disabled"
   >
     <div :class="{ invisible: loading }"><slot></slot></div>
-    <PRingLoader
-      v-if="loading"
-      :color="loaderColor"
-      :size="loaderSize"
-      class="absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center"
-    />
+    <PRingLoader v-if="loading" :size="loaderSize" :class="classes.loader" />
   </Component>
 </template>
 
 <script lang="ts">
-import { type Size } from '@squirrel/components/p-btn/p-btn.types';
+import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
 import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
 import { isExternalLink } from '@squirrel/utils/link';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
+import { tv, type VariantProps } from 'tailwind-variants';
 import { defineComponent, type PropType } from 'vue';
 import { type RouteLocationRaw, RouterLink } from 'vue-router';
 
-const BUTTON_TYPES = {
-  PRIMARY: 'primary',
-  SECONDARY: 'secondary',
-  PRIMARY_OUTLINE: 'primary-outline',
-  SECONDARY_OUTLINE: 'secondary-outline',
-  SECONDARY_OUTLINE_BLUE: 'secondary-outline-blue',
-  ERROR: 'error',
-  SUCCESS: 'success',
-  PRIMARY_LINK: 'primary-link',
-  SECONDARY_GHOST: 'secondary-ghost',
-  SECONDARY_GHOST_DARK: 'secondary-ghost-dark',
+const btnClasses = {
+  slots: {
+    button:
+      'relative inline-block rounded font-medium outline-none disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50',
+    loader: 'absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center font-medium',
+  },
+  variants: {
+    type: {
+      primary: {
+        button: 'bg-primary text-surface hover:bg-accent active:bg-p-blue-80',
+        loader: 'text-surface',
+      },
+      secondary: {
+        button: 'bg-p-gray-20 hover:bg-p-gray-30 active:bg-p-gray-40',
+        loader: 'text-p-purple-60',
+      },
+      'primary-outline': {
+        button: 'bg-p-blue-10 text-p-purple-60 ring-1 ring-inset ring-p-purple-60 hover:bg-p-gray-20',
+        loader: 'text-p-purple-60',
+      },
+      'secondary-outline': {
+        button:
+          'bg-surface text-p-purple-60 ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-10',
+        loader: 'text-p-purple-60',
+      },
+      'secondary-outline-blue': {
+        button:
+          'bg-surface text-p-purple-60 ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-15 aria-selected:text-p-blue-60',
+        loader: 'text-p-purple-60',
+      },
+      error: { button: 'bg-p-red-40 text-white hover:bg-p-red-50', loader: 'text-white' },
+      success: { button: 'bg-p-green-40 text-white hover:bg-p-green-50', loader: 'text-white' },
+      'primary-link': { button: 'bg-transparent text-primary underline hover:text-accent', loader: 'text-p-blue-60' },
+      'secondary-ghost': { button: 'text-on-surface hover:bg-p-gray-20', loader: 'text-p-purple-60' },
+      'secondary-ghost-dark': { button: 'text-white hover:bg-p-purple-50', loader: 'text-p-blue-15' },
+    },
+    size: {
+      sm: { button: 'px-2 py-1 text-sm' },
+      md: { button: 'px-6 py-2 text-base' },
+      lg: { button: 'px-6 py-2.5 text-lg' },
+    },
+  },
+  defaultVariants: {
+    type: 'primary',
+    size: 'md',
+  },
 } as const;
 
+const btn = tv(btnClasses);
+const BUTTON_TYPES = Object.keys(btnClasses.variants.type);
 const BUTTON_NATIVE_TYPES = ['button', 'submit', 'reset'] as const;
+const LOADER_SIZES = { sm: 24, md: 30, lg: 40 } as const satisfies { [key in Size]: number };
 
 type ButtonNativeType = (typeof BUTTON_NATIVE_TYPES)[number];
-type ButtonTypeKeys = keyof typeof BUTTON_TYPES;
-type ButtonType = (typeof BUTTON_TYPES)[ButtonTypeKeys];
-
-const DEFAULT_CLASSES = `relative inline-block outline-none disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-default aria-disabled:pointer-events-none`;
-
-type ButtonClass = {
-  [key in ButtonType]: string;
-};
-
-const BUTTON_CLASSES: ButtonClass = {
-  [BUTTON_TYPES.PRIMARY]: 'text-surface bg-primary hover:bg-accent active:bg-p-blue-80',
-  [BUTTON_TYPES.SECONDARY]: 'bg-p-gray-20 hover:bg-p-gray-30 active:bg-p-gray-40',
-  [BUTTON_TYPES.PRIMARY_OUTLINE]: 'text-p-purple-60 bg-p-blue-10 ring-1 ring-inset ring-p-purple-60 hover:bg-p-gray-20',
-  [BUTTON_TYPES.SECONDARY_OUTLINE]:
-    'text-p-purple-60 bg-surface ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-10',
-  [BUTTON_TYPES.SECONDARY_OUTLINE_BLUE]:
-    'text-p-purple-60 bg-surface ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-15 aria-selected:text-p-blue-60',
-  [BUTTON_TYPES.ERROR]: 'text-white bg-p-red-40 hover:bg-p-red-50',
-  [BUTTON_TYPES.SUCCESS]: 'text-white bg-p-green-40 hover:bg-p-green-50',
-  [BUTTON_TYPES.PRIMARY_LINK]: 'text-primary bg-transparent hover:text-accent underline',
-  [BUTTON_TYPES.SECONDARY_GHOST]: 'text-on-surface hover:bg-p-gray-20',
-  [BUTTON_TYPES.SECONDARY_GHOST_DARK]: 'text-white hover:bg-p-purple-50',
-};
-
-const BUTTON_SIZES = {
-  sm: 'py-1 px-2 rounded font-medium text-sm',
-  md: 'py-2 px-6 rounded font-medium text-base',
-  lg: 'py-3 px-6 rounded font-medium text-lg',
-} as const satisfies { [key in Size]: string };
-
-const LOADER_SIZES = {
-  sm: 24,
-  md: 30,
-  lg: 40,
-} as const satisfies { [key in Size]: number };
-
-const LOADER_COLORS = {
-  [BUTTON_TYPES.PRIMARY]: 'var(--color-p-blue-15)',
-  [BUTTON_TYPES.SECONDARY]: 'var(--color-p-purple-60)',
-  [BUTTON_TYPES.PRIMARY_OUTLINE]: 'var(--color-p-blue-60)',
-  [BUTTON_TYPES.SECONDARY_OUTLINE]: 'var(--color-p-purple-60)',
-  [BUTTON_TYPES.SECONDARY_OUTLINE_BLUE]: 'var(--color-p-purple-60)',
-  [BUTTON_TYPES.ERROR]: 'var(--color-p-blue-15)',
-  [BUTTON_TYPES.SUCCESS]: 'var(--color-p-blue-15)',
-  [BUTTON_TYPES.PRIMARY_LINK]: 'var(--color-p-blue-60)',
-  [BUTTON_TYPES.SECONDARY_GHOST]: 'var(--color-p-purple-60)',
-  [BUTTON_TYPES.SECONDARY_GHOST_DARK]: 'var(--color-p-blue-15)',
-} as const;
+type ButtonType = NonNullable<VariantProps<typeof btn>['type']>;
 
 export default defineComponent({
   name: 'PBtn',
@@ -119,7 +106,7 @@ export default defineComponent({
       type: String as PropType<ButtonType>,
       default: 'primary',
       validator(value: ButtonType) {
-        return Object.values(BUTTON_TYPES).includes(value);
+        return BUTTON_TYPES.includes(value);
       },
     },
     /**
@@ -139,7 +126,7 @@ export default defineComponent({
       type: String as PropType<Size>,
       default: 'md',
       validator(value: Size) {
-        return Object.keys(BUTTON_SIZES).includes(value);
+        return SIZES.includes(value);
       },
     },
     /**
@@ -167,14 +154,13 @@ export default defineComponent({
   },
   computed: {
     classes() {
-      return `${DEFAULT_CLASSES} ${BUTTON_SIZES[this.size]} ${BUTTON_CLASSES[this.type]}`;
+      const { button, loader } = btn({ type: this.type, size: this.size });
+
+      return { button: button(), loader: loader() };
     },
     loaderSize() {
       return Number(`${LOADER_SIZES[this.size]}`);
     },
-    loaderColor() {
-      return LOADER_COLORS[this.type];
-    },
   },
   methods: {
     isExternalLink,

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

@@ -40,14 +40,9 @@ describe('PFileUpload.vue', () => {
       },
     });
 
-    expect(wrapper.find('label').classes()).toEqual([
-      'block',
-      'mb-1',
-      'font-medium',
-      'text-sm',
-      "after:content-['_*']",
-      'after:text-on-error',
-    ]);
+    const labelClasses = ['block', 'mb-1', 'font-medium', 'text-sm', 'after:content-["_*"]', 'after:text-on-error'];
+
+    expect(wrapper.find('label').classes()).toEqual(expect.arrayContaining(labelClasses));
   });
 
   it('sets the disabled state correctly', () => {

package/squirrel/components/p-inline-date-picker/p-inline-date-picker.spec.js

@@ -60,16 +60,9 @@ describe('PInlineDatePicker.vue', () => {
   it('adds the required class when the required prop is set', () => {
     const wrapper = createWrapper({ label: 'test datepicker', required: true });
 
-    expect(wrapper.find('label').classes()).toEqual([
-      'block',
-      'mb-1',
-      'font-medium',
-      'text-sm',
-      "after:content-['_*']",
-      'after:text-on-error',
-    ]);
-
-    expect(wrapper.props().required).toBe(true);
+    const labelClasses = ['block', 'mb-1', 'font-medium', 'text-sm', 'after:content-["_*"]', 'after:text-on-error'];
+
+    expect(wrapper.find('label').classes()).toEqual(expect.arrayContaining(labelClasses));
   });
 
   it('passes listeners to the datepicker', () => {

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

@@ -62,14 +62,9 @@ describe('PInput.vue', () => {
       },
     });
 
-    expect(wrapper.find('label').classes()).toEqual([
-      'block',
-      'mb-1',
-      'font-medium',
-      'text-sm',
-      "after:content-['_*']",
-      'after:text-on-error',
-    ]);
+    const res = ['block', 'mb-1', 'font-medium', 'text-sm', 'after:content-["_*"]', 'after:text-on-error'];
+
+    expect(wrapper.find('label').classes()).toEqual(expect.arrayContaining(res));
   });
 
   it('sets the disabled state correctly', () => {

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

@@ -33,7 +33,7 @@ describe('PInputNumber.vue', () => {
 
     expect(input.exists()).toBe(true);
 
-    expect(input.classes()).toEqual(baseClasses());
+    expect(input.classes()).toEqual(expect.arrayContaining(baseClasses()));
     expect(wrapper.find('label').exists()).toBe(false);
     expect(wrapper.find('input-prefix').exists()).toBe(false);
     expect(wrapper.find('div.text-xs.text-on-error.mt-1').isVisible()).toBe(false);
@@ -67,14 +67,9 @@ describe('PInputNumber.vue', () => {
       },
     });
 
-    expect(wrapper.find('label').classes()).toEqual([
-      'block',
-      'mb-1',
-      'font-medium',
-      'text-sm',
-      "after:content-['_*']",
-      'after:text-on-error',
-    ]);
+    const labelClasses = ['block', 'mb-1', 'font-medium', 'text-sm', 'after:content-["_*"]', 'after:text-on-error'];
+
+    expect(wrapper.find('label').classes()).toEqual(expect.arrayContaining(labelClasses));
   });
 
   it('sets the disabled state correctly', () => {
@@ -116,15 +111,15 @@ describe('PInputNumber.vue', () => {
       },
     });
 
+    const res = baseClasses().map((c) => {
+      if (c === 'ring-p-gray-30') return 'ring-on-error';
+      if (c === 'hover:ring-primary') return 'hover:ring-on-error';
+      if (c === 'focus:ring-primary') return 'focus:ring-on-error';
+      return c;
+    });
+
     expect(wrapper.attributes()['data-has-error']).toBeDefined();
-    expect(wrapper.find('input').classes().join(' ')).toEqual(
-      baseClasses()
-        .join(' ')
-        .replace(
-          'ring-p-gray-30 hover:ring-primary focus:ring-primary',
-          'ring-on-error hover:ring-on-error focus:ring-on-error'
-        )
-    );
+    expect(wrapper.find('input').classes()).toEqual(expect.arrayContaining(res));
     expect(wrapper.find('div.text-xs.text-on-error.mt-1').isVisible()).toBe(true);
   });
 
@@ -138,8 +133,10 @@ describe('PInputNumber.vue', () => {
       },
     });
 
+    const res = baseClasses().map((c) => (c === 'pl-4' ? 'pl-8' : c));
+
     expect(wrapper.find('i.icon')).toBeTruthy();
-    expect(wrapper.find('input').classes()).toEqual(baseClasses().map((c) => (c === 'pl-4' ? 'pl-8' : c)));
+    expect(wrapper.find('input').classes()).toEqual(expect.arrayContaining(res));
   });
 
   it('emits a number on input', async () => {

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

@@ -35,15 +35,10 @@ describe('PInputPercent.vue', () => {
       },
     });
 
+    const labelClasses = ['block', 'mb-1', 'font-medium', 'text-sm', 'after:content-["_*"]', 'after:text-on-error'];
+
     expect(wrapper.find('label').text()).toBe('test input');
-    expect(wrapper.find('label').classes()).toEqual([
-      'block',
-      'mb-1',
-      'font-medium',
-      'text-sm',
-      "after:content-['_*']",
-      'after:text-on-error',
-    ]);
+    expect(wrapper.find('label').classes()).toEqual(expect.arrayContaining(labelClasses));
     expect(wrapper.find('div.text-xs.text-on-error.mt-1').text()).toBe('error message');
   });
 

package/squirrel/components/p-input-percent/p-input-percent.vue

@@ -9,12 +9,12 @@
 </template>
 
 <script setup lang="ts">
+import { type Size } from '@squirrel/components/p-btn/p-btn.types';
 import PInputNumber from '@squirrel/components/p-input-number/p-input-number.vue';
-import { type InputSize } from '@squirrel/utils/inputClassesShared';
 import { isNumber } from 'lodash-es';
 import { computed, type PropType } from 'vue';
 
-const prefixClasses: Record<InputSize, string> = {
+const prefixClasses: Record<Size, string> = {
   sm: 'text-sm h-8 left-2',
   md: 'text-base h-10 left-3',
   lg: 'text-lg h-12 left-5',
@@ -30,7 +30,7 @@ const props = defineProps({
     default: null,
   },
   size: {
-    type: String as PropType<InputSize>,
+    type: String as PropType<Size>,
     default: 'md',
   },
 });

package/squirrel/components/p-input-search/p-input-search.vue

@@ -33,8 +33,8 @@
 </template>
 
 <script lang="ts">
+import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
 import PInput from '@squirrel/components/p-input/p-input.vue';
-import { INPUT_SIZES, type InputSize } from '@squirrel/utils/inputClassesShared';
 import { defineComponent, type PropType } from 'vue';
 
 type PInputInstance = InstanceType<typeof PInput>;
@@ -51,10 +51,10 @@ export default defineComponent({
       default: '',
     },
     size: {
-      type: String as PropType<InputSize>,
+      type: String as PropType<Size>,
       default: 'md',
-      validator(value: InputSize) {
-        return Object.keys(INPUT_SIZES).includes(value);
+      validator(value: Size) {
+        return SIZES.includes(value);
       },
     },
     showEnterIcon: {