@pequity/squirrel 6.0.12 → 6.0.14

package/dist/cjs/chunks/p-btn.types.js

@@ -0,0 +1,3 @@
+"use strict";
+const SIZES = ["sm", "md", "lg"];
+exports.SIZES = SIZES;

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

@@ -1,7 +1,7 @@
 "use strict";
 const vue = require("vue");
+const pBtn_types = require("./p-btn.types.js");
 const useInputClasses = require("../useInputClasses.js");
-const inputClassesShared = require("../inputClassesShared.js");
 const _hoisted_1 = ["data-has-error"];
 const _hoisted_2 = ["value"];
 const _hoisted_3 = ["value"];
@@ -37,7 +37,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       type: String,
       default: "md",
       validator(value) {
-        return Object.keys(inputClassesShared.INPUT_SIZES).includes(value);
+        return pBtn_types.SIZES.includes(value);
       }
     },
     itemText: {

package/dist/cjs/index.js

@@ -13,13 +13,12 @@ const pDrawer = require("./p-drawer.js");
 const pDropdown = require("./p-dropdown.js");
 const pDropdownSelect_vue_vue_type_script_setup_true_lang = require("./chunks/p-dropdown-select.js");
 const vue = require("vue");
-const pFileUpload$1 = require("./p-file-upload.js");
+const pFileUpload = require("./p-file-upload.js");
+const pIcon_vue_vue_type_script_setup_true_lang = require("./chunks/p-icon.js");
 const useInputClasses = require("./useInputClasses.js");
 const lodashEs = require("lodash-es");
 const vueToastification = require("vue-toastification");
-const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
 const pIcon = require("./p-icon.js");
-const pIcon_vue_vue_type_script_setup_true_lang = require("./chunks/p-icon.js");
 const pInfoIcon_vue_vue_type_script_setup_true_lang = require("./chunks/p-info-icon.js");
 const pInlineDatePicker_vue_vue_type_script_setup_true_lang = require("./chunks/p-inline-date-picker.js");
 const pInput = require("./p-input.js");
@@ -46,6 +45,7 @@ const pSkeletonLoader = require("./p-skeleton-loader.js");
 const pTable$1 = require("./p-table.js");
 const usePTableColResize = require("./usePTableColResize.js");
 const pTableHeaderCell = require("./p-table-header-cell.js");
+const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
 const usePTableRowVirtualizer = require("./usePTableRowVirtualizer.js");
 const pTableFilterIcon = require("./p-table-filter-icon.js");
 const pTableLoader_vue_vue_type_script_setup_true_lang = require("./chunks/p-table-loader.js");
@@ -55,18 +55,17 @@ const pTabs_vue_vue_type_script_setup_true_lang = require("./chunks/p-tabs.js");
 const pTextarea = require("./p-textarea.js");
 const pToggle = require("./p-toggle.js");
 const config = require("./config.js");
+const pBtn_types = require("./chunks/p-btn.types.js");
 const currency = require("./currency.js");
 const dom = require("./dom.js");
 const inputClassesMixin = require("./inputClassesMixin.js");
-const inputClassesShared = require("./inputClassesShared.js");
 const listKeyboardNavigation = require("./listKeyboardNavigation.js");
 const number = require("./number.js");
 const object = require("./object.js");
 const pagination = require("./pagination.js");
 const sanitization = require("./sanitization.js");
 const tailwind = require("./tailwind.js");
-const _imports_0$1 = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.8335%206.25016L10.0002%202.0835L14.1668%206.25016'%20stroke='%23767189'%20stroke-width='1.25'%20/%3e%3cpath%20d='M10%202.0835V13.7502'%20stroke='%23767189'%20stroke-width='1.25'%20/%3e%3cpath%20d='M2.91675%2015V18.3333H17.0834V15'%20stroke='%23767189'%20stroke-width='1.25'%20/%3e%3c/svg%3e";
-const _imports_1$1 = "data:image/svg+xml,%3csvg%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M33%2012H14V44H42V21L33%2012Z'%20stroke='%231A123B'%20stroke-width='3'%20/%3e%3cpath%20d='M9%2036H6V4H25L28%207'%20stroke='%231A123B'%20stroke-width='3'%20/%3e%3cpath%20d='M37%2030H19M28%2021V39'%20stroke='%231A123B'%20stroke-width='3'%20/%3e%3c/svg%3e";
+const index = require("./chunks/index.js");
 const _hoisted_1$3 = ["data-has-error"];
 const _hoisted_2$3 = {
   key: 0,
@@ -181,7 +180,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         }
         if (props.fileTypes.length === 0) ;
         else {
-          const extension = pFileUpload$1.getFileExtension(fileName) ? `.${pFileUpload$1.getFileExtension(fileName)}` : "";
+          const extension = pFileUpload.getFileExtension(fileName) ? `.${pFileUpload.getFileExtension(fileName)}` : "";
           const isValidExtension = extension ? props.fileTypes.includes(extension) : false;
           if (!isValidExtension) {
             toast.error(`${extension} files are not allowed.`);
@@ -189,7 +188,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           }
         }
         if ((file.size || 0) > props.maxSizeInBytes) {
-          toast.error(`File size of ${fileName} exceeds ${pFileUpload$1.formatBytes(props.maxSizeInBytes)}.`);
+          toast.error(`File size of ${fileName} exceeds ${pFileUpload.formatBytes(props.maxSizeInBytes)}.`);
           continue;
         }
         res.push(file);
@@ -212,10 +211,10 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         fileInputRef.value.value = "";
       }
     };
-    const removeFile = (index) => {
-      if (index in files.value) {
-        const removedFile = files.value[index];
-        files.value = files.value.filter((item, idx) => idx !== index);
+    const removeFile = (index2) => {
+      if (index2 in files.value) {
+        const removedFile = files.value[index2];
+        files.value = files.value.filter((item, idx) => idx !== index2);
         emit("file-removed", removedFile);
       }
     };
@@ -258,19 +257,21 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         }, [
           !maxFilesReached.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
             !isDraggingOver.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [
-              _cache[4] || (_cache[4] = vue.createElementVNode("img", {
-                src: _imports_0$1,
-                class: "h-8 w-8"
-              }, null, -1)),
+              vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
+                icon: "upload",
+                width: "32",
+                class: "text-p-gray-50"
+              }),
               vue.createElementVNode("div", _hoisted_4$3, [
                 _cache[3] || (_cache[3] = vue.createTextVNode(" Drag or ")),
                 vue.createElementVNode("span", _hoisted_5$3, "select " + vue.toDisplayString(fileWord.value), 1)
               ])
             ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$3, [
-              _cache[5] || (_cache[5] = vue.createElementVNode("img", {
-                src: _imports_1$1,
-                class: "h-8 w-8"
-              }, null, -1)),
+              vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
+                icon: "tdesign:drag-drop",
+                width: "32",
+                class: "text-primary"
+              }),
               vue.createElementVNode("div", _hoisted_7, "Drop " + vue.toDisplayString(fileWord.value), 1)
             ])),
             vue.createElementVNode("input", {
@@ -287,13 +288,13 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
             }, null, 40, _hoisted_8)
           ])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", _hoisted_9, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(files.value, (file, index) => {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(files.value, (file, index2) => {
               return vue.openBlock(), vue.createElementBlock("div", {
-                key: index,
+                key: index2,
                 class: vue.normalizeClass([
                   "flex cursor-default items-center justify-between",
-                  { "border-b border-dashed border-p-gray-30 pb-4": index !== files.value.length - 1 },
-                  { "mt-4": index !== 0 }
+                  { "border-b border-dashed border-p-gray-30 pb-4": index2 !== files.value.length - 1 },
+                  { "mt-4": index2 !== 0 }
                 ]),
                 onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
                 }, ["stop"]))
@@ -303,9 +304,15 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
                   title: file.name
                 }, vue.toDisplayString(file.name), 9, _hoisted_10),
                 vue.createElementVNode("button", {
-                  class: "bg-file-upload-x-icon h-4 w-4 shrink-0 cursor-pointer",
-                  onClick: vue.withModifiers(($event) => removeFile(index), ["stop"])
-                }, null, 8, _hoisted_11)
+                  class: "h-5 shrink-0 cursor-pointer overflow-hidden",
+                  onClick: vue.withModifiers(($event) => removeFile(index2), ["stop"])
+                }, [
+                  vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
+                    icon: "weui:close2-outlined",
+                    width: "20",
+                    class: "text-p-gray-60 hover:text-on-error"
+                  })
+                ], 8, _hoisted_11)
               ], 2);
             }), 128))
           ])
@@ -315,12 +322,11 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         }, vue.toDisplayString(__props.errorMsg), 3), [
           [vue.vShow, __props.errorMsg]
         ]),
-        vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(__props.multiple ? `Max ${__props.maxNumberOfFiles}` : "One") + " " + vue.toDisplayString(acceptFileTypes.value) + " " + vue.toDisplayString(__props.multiple ? "files" : "file") + " with size less than " + vue.toDisplayString(vue.unref(pFileUpload$1.formatBytes)(__props.maxSizeInBytes)) + " " + vue.toDisplayString(__props.multiple ? "each" : ""), 1)
+        vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(__props.multiple ? `Max ${__props.maxNumberOfFiles}` : "One") + " " + vue.toDisplayString(acceptFileTypes.value) + " " + vue.toDisplayString(__props.multiple ? "files" : "file") + " with size less than " + vue.toDisplayString(vue.unref(pFileUpload.formatBytes)(__props.maxSizeInBytes)) + " " + vue.toDisplayString(__props.multiple ? "each" : ""), 1)
       ], 10, _hoisted_1$3);
     };
   }
 });
-const pFileUpload = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$3, [["__scopeId", "data-v-216025be"]]);
 const _hoisted_1$2 = ["data-has-error"];
 const _hoisted_2$2 = { class: "text-p-purple-60" };
 const _hoisted_3$2 = { class: "flex flex-row" };
@@ -624,10 +630,10 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
                           class: "truncate text-p-purple-60",
                           title: vue.unref(string.toString)(vue.unref(getText)(row.index))
                         }, [
-                          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(text.splitStringForHighlight)(vue.unref(string.toString)(vue.unref(getText)(row.index)), vue.unref(search)), (str, index) => {
+                          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(text.splitStringForHighlight)(vue.unref(string.toString)(vue.unref(getText)(row.index)), vue.unref(search)), (str, index2) => {
                             return vue.openBlock(), vue.createElementBlock("span", {
-                              key: `${vue.unref(getValue)(row.index)}_${index}`,
-                              class: vue.normalizeClass({ "bg-p-blue-20": index === 1 })
+                              key: `${vue.unref(getValue)(row.index)}_${index2}`,
+                              class: vue.normalizeClass({ "bg-p-blue-20": index2 === 1 })
                             }, vue.toDisplayString(str), 3);
                           }), 128))
                         ], 8, _hoisted_5$2)
@@ -715,9 +721,9 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       ths
     });
     const tbodyElement = vue.ref(null);
-    const updateThsRefs = (el, index) => {
+    const updateThsRefs = (el, index2) => {
       if (el instanceof Element) {
-        ths.value[index] = el;
+        ths.value[index2] = el;
       }
     };
     const emitScroll = (e) => {
@@ -965,9 +971,9 @@ exports.PDatePicker = pDatePicker_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PDrawer = pDrawer;
 exports.PDropdown = pDropdown;
 exports.PDropdownSelect = pDropdownSelect_vue_vue_type_script_setup_true_lang._sfc_main;
+exports.PIcon = pIcon_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.useInputClasses = useInputClasses.useInputClasses;
 exports.P_ICON_ALIASES = pIcon.P_ICON_ALIASES;
-exports.PIcon = pIcon_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PInfoIcon = pInfoIcon_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PInlineDatePicker = pInlineDatePicker_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PInput = pInput;
@@ -1006,27 +1012,12 @@ exports.PTabs = pTabs_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PTextarea = pTextarea;
 exports.PToggle = pToggle;
 exports.squirrelTailwindConfig = config.squirrelTailwindConfig;
+exports.SIZES = pBtn_types.SIZES;
 exports.CURRENCY_INPUT_DEFAULTS = currency.CURRENCY_INPUT_DEFAULTS;
 exports.getNextActiveElement = dom.getNextActiveElement;
 exports.isElement = dom.isElement;
 exports.isVisible = dom.isVisible;
 exports.inputClassesMixin = inputClassesMixin;
-exports.ERROR_MSG = inputClassesShared.ERROR_MSG;
-exports.INPUT_BASE = inputClassesShared.INPUT_BASE;
-exports.INPUT_ERROR = inputClassesShared.INPUT_ERROR;
-exports.INPUT_NORMAL = inputClassesShared.INPUT_NORMAL;
-exports.INPUT_SIZES = inputClassesShared.INPUT_SIZES;
-exports.LABEL_BASE = inputClassesShared.LABEL_BASE;
-exports.LABEL_REQUIRED = inputClassesShared.LABEL_REQUIRED;
-exports.LABEL_SIZES = inputClassesShared.LABEL_SIZES;
-exports.SELECT_ARROW = inputClassesShared.SELECT_ARROW;
-exports.SELECT_BASE = inputClassesShared.SELECT_BASE;
-exports.SELECT_SIZES = inputClassesShared.SELECT_SIZES;
-exports.SPACING_LEFT = inputClassesShared.SPACING_LEFT;
-exports.SPACING_PREFIX = inputClassesShared.SPACING_PREFIX;
-exports.SPACING_RIGHT = inputClassesShared.SPACING_RIGHT;
-exports.SPACING_SUFFIX = inputClassesShared.SPACING_SUFFIX;
-exports.TEXTAREA_BASE = inputClassesShared.TEXTAREA_BASE;
 exports.setupListKeyboardNavigation = listKeyboardNavigation.setupListKeyboardNavigation;
 exports.toNumberOrNull = number.toNumberOrNull;
 exports.isObject = object.isObject;
@@ -1035,7 +1026,13 @@ exports.sanitizeUrl = sanitization.sanitizeUrl;
 exports.getColor = tailwind.getColor;
 exports.getColorDeep = tailwind.getColorDeep;
 exports.getScreen = tailwind.getScreen;
-exports.PFileUpload = pFileUpload;
+exports.cn = index.M;
+exports.cnBase = index.N;
+exports.createTV = index.fe;
+exports.defaultConfig = index.ie;
+exports.tv = index.ce;
+exports.voidEmpty = index.x;
+exports.PFileUpload = _sfc_main$3;
 exports.PSelectList = _sfc_main$2;
 exports.PTable = pTable;
 exports.PTableSort = pTableSort;

package/dist/cjs/inputClasses.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./chunks/index.js");
+const inputClasses = index.ce({
+  slots: {
+    input: "w-full rounded border-0 bg-surface text-night ring-1 ring-inset ring-p-gray-30 placeholder:text-p-gray-40 hover:ring-primary focus:outline-none focus:ring-2 focus:ring-primary disabled:cursor-default disabled:bg-p-blue-10 disabled:ring-p-gray-30 disabled:hover:ring-p-gray-30",
+    label: "mb-1 block font-medium",
+    errorMessage: "mt-1 text-xs text-on-error"
+  },
+  variants: {
+    size: {
+      sm: {
+        input: "h-8 pl-3 pr-3 text-sm",
+        label: "text-xs"
+      },
+      md: {
+        input: "h-10 pl-4 pr-4 text-base",
+        label: "text-sm"
+      },
+      lg: {
+        input: "h-12 pl-5 pr-5 text-lg",
+        label: "text-base"
+      }
+    },
+    prefix: {
+      true: "pl-8"
+    },
+    suffix: {
+      true: "pr-6"
+    },
+    required: {
+      true: {
+        label: `after:text-on-error after:content-["_*"]`
+      }
+    },
+    error: {
+      true: {
+        input: "ring-on-error hover:ring-on-error focus:ring-on-error"
+      }
+    },
+    rounded: {
+      true: {
+        input: "rounded-full"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      size: "sm",
+      prefix: true,
+      class: {
+        input: "pl-6"
+      }
+    },
+    {
+      size: "md",
+      prefix: true,
+      class: {
+        input: "pl-8"
+      }
+    },
+    {
+      size: "lg",
+      prefix: true,
+      class: {
+        input: "pl-12"
+      }
+    },
+    {
+      size: "sm",
+      suffix: true,
+      class: {
+        input: "pr-6"
+      }
+    },
+    {
+      size: "md",
+      suffix: true,
+      class: {
+        input: "pr-8"
+      }
+    },
+    {
+      size: "lg",
+      suffix: true,
+      class: {
+        input: "pr-12"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md"
+  }
+});
+const textareaClasses = index.ce({
+  extend: inputClasses,
+  slots: {
+    input: "resize-y overflow-auto px-3 py-3"
+  },
+  variants: {
+    size: {
+      md: {
+        input: "h-auto"
+      }
+    }
+  }
+});
+const selectClasses = index.ce({
+  extend: inputClasses,
+  slots: {
+    input: "squirrel-bg-chevron-down appearance-none truncate bg-no-repeat"
+  },
+  variants: {
+    size: {
+      sm: {
+        input: "bg-[position:right_0.675rem_center] pr-8"
+      },
+      md: {
+        input: "bg-[position:right_1rem_center] pr-10"
+      },
+      lg: {
+        input: "bg-[position:right_1.25rem_center] pr-12"
+      }
+    }
+  }
+});
+exports.inputClasses = inputClasses;
+exports.selectClasses = selectClasses;
+exports.textareaClasses = textareaClasses;

package/dist/cjs/inputClassesMixin.js

@@ -1,5 +1,6 @@
 "use strict";
-const inputClassesShared = require("./inputClassesShared.js");
+const pBtn_types = require("./chunks/p-btn.types.js");
+const inputClasses = require("./inputClasses.js");
 const vue = require("vue");
 const inputClassesMixin = vue.defineComponent({
   props: {
@@ -7,7 +8,7 @@ const inputClassesMixin = vue.defineComponent({
       type: String,
       default: "md",
       validator(value) {
-        return Object.keys(inputClassesShared.INPUT_SIZES).includes(value);
+        return pBtn_types.SIZES.includes(value);
       }
     },
     errorMsg: {
@@ -23,31 +24,34 @@ const inputClassesMixin = vue.defineComponent({
       default: false
     }
   },
-  data() {
-    return {
-      errorMsgClasses: inputClassesShared.ERROR_MSG
-    };
-  },
   computed: {
+    allClasses() {
+      const { input, label, errorMessage } = inputClasses.inputClasses({
+        size: this.size,
+        prefix: !!this.$slots.prefix,
+        suffix: !!this.$slots.suffix,
+        required: this.required,
+        error: !!this.errorMsg,
+        rounded: this.rounded
+      });
+      return { input: input(), label: label(), errorMessage: errorMessage() };
+    },
     inputClasses() {
-      const base = `${inputClassesShared.INPUT_BASE} ${inputClassesShared.INPUT_SIZES[this.size]}`;
-      const spacingLeft = this.$slots.prefix ? inputClassesShared.SPACING_PREFIX[this.size] : inputClassesShared.SPACING_LEFT[this.size];
-      const spacingRight = this.$slots.suffix ? inputClassesShared.SPACING_SUFFIX[this.size] : inputClassesShared.SPACING_RIGHT[this.size];
-      const res = `${base} ${spacingLeft} ${spacingRight} ${this.errorMsg ? inputClassesShared.INPUT_ERROR : inputClassesShared.INPUT_NORMAL}${this.rounded ? " rounded-full" : ""}`;
-      return res;
+      return this.allClasses.input;
     },
     labelClasses() {
-      const base = `${inputClassesShared.LABEL_BASE} ${inputClassesShared.LABEL_SIZES[this.size]}`;
-      const res = this.required ? `${base} ${inputClassesShared.LABEL_REQUIRED}` : base;
-      return res;
+      return this.allClasses.label;
+    },
+    errorMsgClasses() {
+      return this.allClasses.errorMessage;
     },
     selectClasses() {
-      const res = `${this.inputClasses.replace(` ${inputClassesShared.SPACING_RIGHT[this.size]}`, "")} ${inputClassesShared.SELECT_BASE} ${inputClassesShared.SELECT_ARROW} ${inputClassesShared.SELECT_SIZES[this.size]}`;
-      return res;
+      const { input } = inputClasses.selectClasses({ size: this.size, required: this.required, error: !!this.errorMsg });
+      return input();
     },
     textareaClasses() {
-      const res = `${this.inputClasses} ${inputClassesShared.TEXTAREA_BASE}`;
-      return res;
+      const { input } = inputClasses.textareaClasses({ required: this.required, error: !!this.errorMsg });
+      return input();
     }
   }
 });

package/dist/cjs/p-btn.js

@@ -1,58 +1,60 @@
 "use strict";
+const pBtn_types = require("./chunks/p-btn.types.js");
 const pRingLoader_vue_vue_type_script_setup_true_lang = require("./chunks/p-ring-loader.js");
 const link = require("./link.js");
 const sanitization = require("./sanitization.js");
+const index = require("./chunks/index.js");
 const vue = require("vue");
 const vueRouter = require("vue-router");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-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"
+  }
 };
+const btn = index.ce(btnClasses);
+const BUTTON_TYPES = Object.keys(btnClasses.variants.type);
 const BUTTON_NATIVE_TYPES = ["button", "submit", "reset"];
-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`;
-const BUTTON_CLASSES = {
-  [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"
-};
-const LOADER_SIZES = {
-  sm: 24,
-  md: 30,
-  lg: 40
-};
-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)"
-};
+const LOADER_SIZES = { sm: 24, md: 30, lg: 40 };
 const _sfc_main = vue.defineComponent({
   name: "PBtn",
   components: {
@@ -68,7 +70,7 @@ const _sfc_main = vue.defineComponent({
       type: String,
       default: "primary",
       validator(value) {
-        return Object.values(BUTTON_TYPES).includes(value);
+        return BUTTON_TYPES.includes(value);
       }
     },
     /**
@@ -88,7 +90,7 @@ const _sfc_main = vue.defineComponent({
       type: String,
       default: "md",
       validator(value) {
-        return Object.keys(BUTTON_SIZES).includes(value);
+        return pBtn_types.SIZES.includes(value);
       }
     },
     /**
@@ -116,13 +118,11 @@ const _sfc_main = vue.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: {
@@ -136,7 +136,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return typeof _ctx.to === "string" && _ctx.isExternalLink(_ctx.to) ? (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({ key: 0 }, _ctx.$attrs, {
     href: _ctx.sanitizeUrl(_ctx.to),
     target: "_blank",
-    class: _ctx.classes,
+    class: _ctx.classes.button,
     disabled: !!_ctx.$attrs.disabled ? true : null,
     "aria-disabled": !!_ctx.$attrs.disabled
   }), [
@@ -146,7 +146,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     type: _ctx.to ? null : _ctx.nativeType,
     to: _ctx.to ? _ctx.to : null,
     "aria-selected": _ctx.selected,
-    class: _ctx.classes
+    class: _ctx.classes.button
   }, _ctx.$attrs, {
     disabled: !!_ctx.$attrs.disabled || _ctx.loading ? true : null,
     "aria-disabled": _ctx.$attrs.disabled
@@ -159,10 +159,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ], 2),
       _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_PRingLoader, {
         key: 0,
-        color: _ctx.loaderColor,
         size: _ctx.loaderSize,
-        class: "absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center"
-      }, null, 8, ["color", "size"])) : vue.createCommentVNode("", true)
+        class: vue.normalizeClass(_ctx.classes.loader)
+      }, null, 8, ["size", "class"])) : vue.createCommentVNode("", true)
     ]),
     _: 3
   }, 16, ["type", "to", "aria-selected", "class", "disabled", "aria-disabled"]));

package/dist/cjs/p-input-search.js

@@ -1,6 +1,6 @@
 "use strict";
+const pBtn_types = require("./chunks/p-btn.types.js");
 const pInput = require("./p-input.js");
-const inputClassesShared = require("./inputClassesShared.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
 const _sfc_main = vue.defineComponent({
@@ -18,7 +18,7 @@ const _sfc_main = vue.defineComponent({
       type: String,
       default: "md",
       validator(value) {
-        return Object.keys(inputClassesShared.INPUT_SIZES).includes(value);
+        return pBtn_types.SIZES.includes(value);
       }
     },
     showEnterIcon: {
@@ -108,5 +108,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 16, ["modelValue", "size", "onKeydown"]);
 }
-const PInputSearch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2674242c"]]);
+const PInputSearch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-78b7a6f8"]]);
 module.exports = PInputSearch;