@vue-interface/badge 3.1.0 → 3.1.1

package/README.md

@@ -24,40 +24,33 @@ bun i @vue-interface/badge
 
 To create a badge component, use the `badge` class. Use the `badge-close` class to add a close button to the badge.
 
-```html
-<div class="badge">
-    Basic usage
-</div>
-<div class="badge">
-    <span>With Inner</span>
-    <span>Elements</span>
-</div>
-<div class="badge">
-    <span>Right Close</span>
-    <button class="badge-close"></button>
-</div>
-<div class="badge">
-    <button class="badge-close"></button>
-    <span>Left Close</span>
-</div>
+```vue
+<Badge>Basic Usage</Badge>
+<Badge closeable @click="() => {console.log('click')}" @close="() => {console.log('close')}">
+    Right Close Button
+</Badge>
+<Badge closeable close-left>Left Close Button</Badge>
+<Badge closeable class="badge-pill">Pill Badge</Badge>
+<Badge closeable>
+    <template #close-icon>
+        <trash-icon></trash-icon>
+    </template>
+    Custom Icon
+</Badge>
 ```
 Use the `badge-outline` class to create an outlined badge.
 
-```html
-<div class="badge badge-outline">
-    No Children
-</div>
-<div class="badge badge-outline">
-    <span>With Children</span>
-</div>
-<div class="badge badge-outline">
-    <span>Right Close Button</span>
-    <button class="badge-close"></button>
-</div>
-<div class="badge badge-outline">
-    <button class="badge-close"></button>
-    <span>Left Close Button</span>
-</div>
+```vue
+<Badge class="badge-outline">Basic Usage</Badge>
+<Badge class="badge-outline" closeable>Right Close Button</Badge>
+<Badge class="badge-outline" closeable close-left>Left Close Button</Badge>
+<Badge closeable class="badge-pill badge-outline">Pill Badge</Badge>
+<Badge closeable class="badge-outline">
+    <template #close-icon>
+        <trash-icon></trash-icon>
+    </template>
+    Custom Icon
+</Badge>
 ```
 
 For more comprehensive documentation and examples, please visit the [online documentation](https://vue-interface.github.io/packages/badge/).

package/dist/badge.js

@@ -1,6 +1,6 @@
-import { createElementBlock as l, openBlock as n, createElementVNode as i, defineComponent as d, normalizeClass as u, createCommentVNode as f, renderSlot as c, createVNode as m, unref as k } from "vue";
+import { openBlock as l, createElementBlock as n, createElementVNode as i, defineComponent as d, normalizeClass as u, renderSlot as c, createVNode as f, unref as m, createCommentVNode as k } from "vue";
 function g(e, s) {
-  return n(), l("svg", {
+  return l(), n("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -26,7 +26,7 @@ const b = /* @__PURE__ */ d({
   emits: ["click", "close"],
   setup(e, { emit: s }) {
     const a = s;
-    return (r, o) => (n(), l("div", {
+    return (r, o) => (l(), n("div", {
       class: u(["badge", [
         e.size,
         { "close-left": e.closeLeft }
@@ -38,16 +38,16 @@ const b = /* @__PURE__ */ d({
       }, [
         c(r.$slots, "default")
       ]),
-      e.closeable ? (n(), l("button", {
+      e.closeable ? (l(), n("button", {
         key: 0,
         type: "button",
         class: "badge-close",
         onClick: o[1] || (o[1] = (t) => a("close", t))
       }, [
         c(r.$slots, "close-icon", {}, () => [
-          m(k(g))
+          f(m(g))
         ])
-      ])) : f("", !0)
+      ])) : k("", !0)
     ], 2));
   }
 });

package/dist/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../node_modules/.pnpm/@heroicons+vue@2.2.0_vue@3.5.26_typescript@5.9.3_/node_modules/@heroicons/vue/24/outline/esm/XMarkIcon.js","../src/Badge.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    fill: \"none\",\n    viewBox: \"0 0 24 24\",\n    \"stroke-width\": \"1.5\",\n    stroke: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n      d: \"M6 18 18 6M6 6l12 12\"\n    })\n  ]))\n}","<script setup lang=\"ts\">\nimport { XMarkIcon } from '@heroicons/vue/24/outline';\nimport type { ComponentSize } from './sizes';\n\nexport type BadgeSizePrefix = 'badge';\n\nwithDefaults(defineProps<{\n    closeable?: boolean;\n    closeLeft?: boolean;\n    size?: ComponentSize<BadgeSizePrefix>;\n}>(), {\n    closeable: false,\n    closeLeft: false,\n    size: 'badge-md'\n});\n\ndefineSlots<{\n    default: [];\n    'close-icon': [];\n}>();\n\nconst emit = defineEmits<{\n    click: [e: PointerEvent];\n    close: [e: PointerEvent];\n}>();\n</script>\n\n<template>\n    <div \n        class=\"badge\" \n        :class=\"[\n            size, \n            { 'close-left': closeLeft }\n            ]\">\n        <div\n            class=\"badge-inner\"\n            @click=\"emit('click', $event)\">\n            <slot />\n        </div>\n        <button\n            v-if=\"closeable\"\n            type=\"button\"\n            class=\"badge-close\" \n            @click=\"emit('close', $event)\">\n            <slot name=\"close-icon\">\n                <XMarkIcon />\n            </slot>\n        </button>\n    </div>\n</template>"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","emit","__emit","__props","$event","_renderSlot","_createVNode","_unref","XMarkIcon"],"mappings":";AAEe,SAASA,EAAOC,GAAMC,GAAQ;AAC3C,SAAQC,EAAU,GAAIC,EAAoB,OAAO;AAAA,IAC/C,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,aAAa;AAAA,EACjB,GAAK;AAAA,IACDC,EAAoB,QAAQ;AAAA,MAC1B,kBAAkB;AAAA,MAClB,mBAAmB;AAAA,MACnB,GAAG;AAAA,IACT,CAAK;AAAA,EACL,CAAG;AACH;;;;;;;;;;ACGA,UAAMC,IAAOC;2BAOTH,EAoBM,OAAA;AAAA,MAnBF,UAAM,SAAO;AAAA,QACSI,EAAA;AAAA,wBAAmCA,EAAA,UAAA;AAAA,MAAS;;MAIlEH,EAIM,OAAA;AAAA,QAHF,OAAM;AAAA,QACL,SAAKH,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAO,MAAEH,EAAI,SAAUG,CAAM;AAAA,MAAA;QAC5BC,EAAQT,EAAA,QAAA,SAAA;AAAA,MAAA;MAGFO,EAAA,kBADVJ,EAQS,UAAA;AAAA;QANL,MAAK;AAAA,QACL,OAAM;AAAA,QACL,SAAKF,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAO,MAAEH,EAAI,SAAUG,CAAM;AAAA,MAAA;QAC5BC,EAEOT,4BAFP,MAEO;AAAA,UADHU,EAAaC,EAAAC,CAAA,CAAA;AAAA,QAAA;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"badge.js","sources":["../../../node_modules/.pnpm/@heroicons+vue@2.2.0_vue@3.5.26_typescript@5.9.3_/node_modules/@heroicons/vue/24/outline/esm/XMarkIcon.js","../src/Badge.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    fill: \"none\",\n    viewBox: \"0 0 24 24\",\n    \"stroke-width\": \"1.5\",\n    stroke: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n      d: \"M6 18 18 6M6 6l12 12\"\n    })\n  ]))\n}","<script setup lang=\"ts\">\nimport { XMarkIcon } from '@heroicons/vue/24/outline';\nimport type { ComponentSize } from '@vue-interface/sizeable';\n\nexport type BadgeSizePrefix = 'badge';\n\nwithDefaults(defineProps<{\n    closeable?: boolean;\n    closeLeft?: boolean;\n    size?: ComponentSize<BadgeSizePrefix>;\n}>(), {\n    closeable: false,\n    closeLeft: false,\n    size: 'badge-md'\n});\n\ndefineSlots<{\n    default: [];\n    'close-icon': [];\n}>();\n\nconst emit = defineEmits<{\n    click: [e: PointerEvent];\n    close: [e: PointerEvent];\n}>();\n</script>\n\n<template>\n    <div \n        class=\"badge\" \n        :class=\"[\n            size, \n            { 'close-left': closeLeft }\n            ]\">\n        <div\n            class=\"badge-inner\"\n            @click=\"emit('click', $event)\">\n            <slot />\n        </div>\n        <button\n            v-if=\"closeable\"\n            type=\"button\"\n            class=\"badge-close\" \n            @click=\"emit('close', $event)\">\n            <slot name=\"close-icon\">\n                <XMarkIcon />\n            </slot>\n        </button>\n    </div>\n</template>"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","emit","__emit","__props","$event","_renderSlot","_createVNode","_unref","XMarkIcon"],"mappings":";AAEe,SAASA,EAAOC,GAAMC,GAAQ;AAC3C,SAAQC,EAAU,GAAIC,EAAoB,OAAO;AAAA,IAC/C,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,aAAa;AAAA,EACjB,GAAK;AAAA,IACDC,EAAoB,QAAQ;AAAA,MAC1B,kBAAkB;AAAA,MAClB,mBAAmB;AAAA,MACnB,GAAG;AAAA,IACT,CAAK;AAAA,EACL,CAAG;AACH;;;;;;;;;;ACGA,UAAMC,IAAOC;2BAOTH,EAoBM,OAAA;AAAA,MAnBF,UAAM,SAAO;AAAA,QACSI,EAAA;AAAA,wBAAmCA,EAAA,UAAA;AAAA,MAAS;;MAIlEH,EAIM,OAAA;AAAA,QAHF,OAAM;AAAA,QACL,SAAKH,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAO,MAAEH,EAAI,SAAUG,CAAM;AAAA,MAAA;QAC5BC,EAAQT,EAAA,QAAA,SAAA;AAAA,MAAA;MAGFO,EAAA,kBADVJ,EAQS,UAAA;AAAA;QANL,MAAK;AAAA,QACL,OAAM;AAAA,QACL,SAAKF,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAO,MAAEH,EAAI,SAAUG,CAAM;AAAA,MAAA;QAC5BC,EAEOT,4BAFP,MAEO;AAAA,UADHU,EAAaC,EAAAC,CAAA,CAAA;AAAA,QAAA;;;;;","x_google_ignoreList":[0]}

package/dist/badge.umd.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.umd.cjs","sources":["../../../node_modules/.pnpm/@heroicons+vue@2.2.0_vue@3.5.26_typescript@5.9.3_/node_modules/@heroicons/vue/24/outline/esm/XMarkIcon.js","../src/Badge.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    fill: \"none\",\n    viewBox: \"0 0 24 24\",\n    \"stroke-width\": \"1.5\",\n    stroke: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n      d: \"M6 18 18 6M6 6l12 12\"\n    })\n  ]))\n}","<script setup lang=\"ts\">\nimport { XMarkIcon } from '@heroicons/vue/24/outline';\nimport type { ComponentSize } from './sizes';\n\nexport type BadgeSizePrefix = 'badge';\n\nwithDefaults(defineProps<{\n    closeable?: boolean;\n    closeLeft?: boolean;\n    size?: ComponentSize<BadgeSizePrefix>;\n}>(), {\n    closeable: false,\n    closeLeft: false,\n    size: 'badge-md'\n});\n\ndefineSlots<{\n    default: [];\n    'close-icon': [];\n}>();\n\nconst emit = defineEmits<{\n    click: [e: PointerEvent];\n    close: [e: PointerEvent];\n}>();\n</script>\n\n<template>\n    <div \n        class=\"badge\" \n        :class=\"[\n            size, \n            { 'close-left': closeLeft }\n            ]\">\n        <div\n            class=\"badge-inner\"\n            @click=\"emit('click', $event)\">\n            <slot />\n        </div>\n        <button\n            v-if=\"closeable\"\n            type=\"button\"\n            class=\"badge-close\" \n            @click=\"emit('close', $event)\">\n            <slot name=\"close-icon\">\n                <XMarkIcon />\n            </slot>\n        </button>\n    </div>\n</template>"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","emit","__emit","__props","$event","_renderSlot","_createVNode","_unref","XMarkIcon"],"mappings":"2PAEe,SAASA,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAAA,UAAU,EAAIC,EAAAA,mBAAoB,MAAO,CAC/C,MAAO,6BACP,KAAM,OACN,QAAS,YACT,eAAgB,MAChB,OAAQ,eACR,cAAe,OACf,YAAa,MACjB,EAAK,CACDC,EAAAA,mBAAoB,OAAQ,CAC1B,iBAAkB,QAClB,kBAAmB,QACnB,EAAG,sBACT,CAAK,CACL,CAAG,CACH,+LCGA,MAAMC,EAAOC,8BAOTH,EAAAA,mBAoBM,MAAA,CAnBF,wBAAM,QAAO,CACSI,EAAA,mBAAmCA,EAAA,SAAA,CAAS,MAIlEH,EAAAA,mBAIM,MAAA,CAHF,MAAM,cACL,QAAKH,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAO,GAAEH,EAAI,QAAUG,CAAM,EAAA,GAC5BC,aAAQT,EAAA,OAAA,SAAA,CAAA,GAGFO,EAAA,yBADVJ,EAAAA,mBAQS,SAAA,OANL,KAAK,SACL,MAAM,cACL,QAAKF,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAO,GAAEH,EAAI,QAAUG,CAAM,EAAA,GAC5BC,EAAAA,WAEOT,yBAFP,IAEO,CADHU,EAAAA,YAAaC,EAAAA,MAAAC,CAAA,CAAA,CAAA","x_google_ignoreList":[0]}
+{"version":3,"file":"badge.umd.cjs","sources":["../../../node_modules/.pnpm/@heroicons+vue@2.2.0_vue@3.5.26_typescript@5.9.3_/node_modules/@heroicons/vue/24/outline/esm/XMarkIcon.js","../src/Badge.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    fill: \"none\",\n    viewBox: \"0 0 24 24\",\n    \"stroke-width\": \"1.5\",\n    stroke: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n      d: \"M6 18 18 6M6 6l12 12\"\n    })\n  ]))\n}","<script setup lang=\"ts\">\nimport { XMarkIcon } from '@heroicons/vue/24/outline';\nimport type { ComponentSize } from '@vue-interface/sizeable';\n\nexport type BadgeSizePrefix = 'badge';\n\nwithDefaults(defineProps<{\n    closeable?: boolean;\n    closeLeft?: boolean;\n    size?: ComponentSize<BadgeSizePrefix>;\n}>(), {\n    closeable: false,\n    closeLeft: false,\n    size: 'badge-md'\n});\n\ndefineSlots<{\n    default: [];\n    'close-icon': [];\n}>();\n\nconst emit = defineEmits<{\n    click: [e: PointerEvent];\n    close: [e: PointerEvent];\n}>();\n</script>\n\n<template>\n    <div \n        class=\"badge\" \n        :class=\"[\n            size, \n            { 'close-left': closeLeft }\n            ]\">\n        <div\n            class=\"badge-inner\"\n            @click=\"emit('click', $event)\">\n            <slot />\n        </div>\n        <button\n            v-if=\"closeable\"\n            type=\"button\"\n            class=\"badge-close\" \n            @click=\"emit('close', $event)\">\n            <slot name=\"close-icon\">\n                <XMarkIcon />\n            </slot>\n        </button>\n    </div>\n</template>"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","emit","__emit","__props","$event","_renderSlot","_createVNode","_unref","XMarkIcon"],"mappings":"2PAEe,SAASA,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAAA,UAAU,EAAIC,EAAAA,mBAAoB,MAAO,CAC/C,MAAO,6BACP,KAAM,OACN,QAAS,YACT,eAAgB,MAChB,OAAQ,eACR,cAAe,OACf,YAAa,MACjB,EAAK,CACDC,EAAAA,mBAAoB,OAAQ,CAC1B,iBAAkB,QAClB,kBAAmB,QACnB,EAAG,sBACT,CAAK,CACL,CAAG,CACH,+LCGA,MAAMC,EAAOC,8BAOTH,EAAAA,mBAoBM,MAAA,CAnBF,wBAAM,QAAO,CACSI,EAAA,mBAAmCA,EAAA,SAAA,CAAS,MAIlEH,EAAAA,mBAIM,MAAA,CAHF,MAAM,cACL,QAAKH,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAO,GAAEH,EAAI,QAAUG,CAAM,EAAA,GAC5BC,aAAQT,EAAA,OAAA,SAAA,CAAA,GAGFO,EAAA,yBADVJ,EAAAA,mBAQS,SAAA,OANL,KAAK,SACL,MAAM,cACL,QAAKF,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAO,GAAEH,EAAI,QAAUG,CAAM,EAAA,GAC5BC,EAAAA,WAEOT,yBAFP,IAEO,CADHU,EAAAA,YAAaC,EAAAA,MAAAC,CAAA,CAAA,CAAA","x_google_ignoreList":[0]}

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

@@ -1,4 +1,4 @@
-import { ComponentSize } from './sizes';
+import { ComponentSize } from '@vue-interface/sizeable';
 export type BadgeSizePrefix = 'badge';
 type __VLS_Props = {
     closeable?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/badge",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "A Vue badge utility.",
   "type": "module",
   "main": "./dist/badge.umd.cjs",
@@ -43,7 +43,9 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "vue": "^3.3.4"
+    "@heroicons/vue": "2.2.0",
+    "vue": "^3.3.4",
+    "@vue-interface/sizeable": "2.0.0"
   },
   "scripts": {
     "dev": "vite",

package/src/Badge.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { XMarkIcon } from '@heroicons/vue/24/outline';
-import type { ComponentSize } from './sizes';
+import type { ComponentSize } from '@vue-interface/sizeable';
 
 export type BadgeSizePrefix = 'badge';
 

package/src/css/badge.css

@@ -4,6 +4,7 @@
     --badge-justify-content: space-between;
     --badge-overflow: hidden;
     --badge-text-decoration: none;
+    --badge-text-trasnform: capitalize;
     --badge-gap: calc(1em * var(--badge-padding-x) / 2);
     --badge-border-radius: --spacing(1);
     --badge-font-size: --spacing(4);
@@ -40,6 +41,7 @@
     background-color: var(--badge-background-color);
     border-radius: var(--badge-border-radius);
     text-decoration: var(--badge-text-decoration);
+    text-transform: var(--badge-text-transform);
     overflow: var(--badge-overflow);
     gap: var(--badge-gap);
 
@@ -110,6 +112,10 @@
     }
 }
 
+@utility badge-pill {
+    border-radius: 100px; 
+}
+
 @utility badge-* {
     --badge-font-size: --value(--badge-font-size-*, [length]);
     --badge-font-size: --spacing(--value(number));

package/dist/src/sizes.d.ts

@@ -1,9 +0,0 @@
-export type PredeterminedSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
-export type Unit = 'px' | 'rem' | 'em' | 'vw' | 'vh' | '%' | 'ch' | 'ex' | 'cm' | 'mm' | 'in' | 'pt' | 'pc';
-export type NumericWithUnit = `${number}${Unit}`;
-export type CalcExpressionChar = number | '.' | '+' | '-' | '*' | '/' | '(' | ')' | '_';
-export type NonEmptyCalcContentString = `${CalcExpressionChar}${string}` | CalcExpressionChar;
-export type ValidCalc = `calc(${NonEmptyCalcContentString})`;
-export type ValidBracketContent = NumericWithUnit | ValidCalc;
-export type ComponentSizeValue<Prefix extends string, Value extends PredeterminedSize = PredeterminedSize> = `${Prefix}-${Value}` | `${Prefix}-${number}` | `${Prefix}-[${ValidBracketContent}]`;
-export type ComponentSize<Prefix extends string, Value extends PredeterminedSize = PredeterminedSize> = ComponentSizeValue<Prefix, Value> | Partial<Record<ComponentSizeValue<Prefix, Value>, boolean>>;

package/src/sizes.ts

@@ -1,18 +0,0 @@
-export type PredeterminedSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
-
-export type Unit = 'px' | 'rem' | 'em' | 'vw' | 'vh' | '%' | 'ch' | 'ex' | 'cm' | 'mm' | 'in' | 'pt' | 'pc';
-export type NumericWithUnit = `${number}${Unit}`;
-export type CalcExpressionChar = number | '.' | '+' | '-' | '*' | '/' | '(' | ')' | '_'
-export type NonEmptyCalcContentString = `${CalcExpressionChar}${string}` | CalcExpressionChar;
-export type ValidCalc = `calc(${NonEmptyCalcContentString})`;
-export type ValidBracketContent = NumericWithUnit | ValidCalc;
-
-export type ComponentSizeValue<
-    Prefix extends string,
-    Value extends PredeterminedSize = PredeterminedSize
-> = `${Prefix}-${Value}` | `${Prefix}-${number}` | `${Prefix}-[${ValidBracketContent}]`;
-
-export type ComponentSize<
-    Prefix extends string,
-    Value extends PredeterminedSize = PredeterminedSize
-> = ComponentSizeValue<Prefix, Value> | Partial<Record<ComponentSizeValue<Prefix, Value>, boolean>>;