@vue-interface/badge 3.0.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

@@ -0,0 +1,57 @@
+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 l(), n("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    i("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M6 18 18 6M6 6l12 12"
+    })
+  ]);
+}
+const b = /* @__PURE__ */ d({
+  __name: "Badge",
+  props: {
+    closeable: { type: Boolean, default: !1 },
+    closeLeft: { type: Boolean, default: !1 },
+    size: { default: "badge-md" }
+  },
+  emits: ["click", "close"],
+  setup(e, { emit: s }) {
+    const a = s;
+    return (r, o) => (l(), n("div", {
+      class: u(["badge", [
+        e.size,
+        { "close-left": e.closeLeft }
+      ]])
+    }, [
+      i("div", {
+        class: "badge-inner",
+        onClick: o[0] || (o[0] = (t) => a("click", t))
+      }, [
+        c(r.$slots, "default")
+      ]),
+      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", {}, () => [
+          f(m(g))
+        ])
+      ])) : k("", !0)
+    ], 2));
+  }
+});
+export {
+  b as Badge
+};
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +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 '@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

@@ -0,0 +1,2 @@
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.Badge={},t.Vue))})(this,(function(t,e){"use strict";function r(o,s){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})])}const c=e.defineComponent({__name:"Badge",props:{closeable:{type:Boolean,default:!1},closeLeft:{type:Boolean,default:!1},size:{default:"badge-md"}},emits:["click","close"],setup(o,{emit:s}){const i=s;return(d,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["badge",[o.size,{"close-left":o.closeLeft}]])},[e.createElementVNode("div",{class:"badge-inner",onClick:n[0]||(n[0]=l=>i("click",l))},[e.renderSlot(d.$slots,"default")]),o.closeable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"badge-close",onClick:n[1]||(n[1]=l=>i("close",l))},[e.renderSlot(d.$slots,"close-icon",{},()=>[e.createVNode(e.unref(r))])])):e.createCommentVNode("",!0)],2))}});t.Badge=c,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
+//# sourceMappingURL=badge.umd.cjs.map

package/dist/badge.umd.cjs.map

@@ -0,0 +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 '@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/index.d.ts

@@ -0,0 +1,2 @@
+import { default as Badge } from './src/Badge.vue';
+export { Badge, };

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

@@ -0,0 +1,38 @@
+import { ComponentSize } from '@vue-interface/sizeable';
+export type BadgeSizePrefix = 'badge';
+type __VLS_Props = {
+    closeable?: boolean;
+    closeLeft?: boolean;
+    size?: ComponentSize<BadgeSizePrefix>;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default: [];
+        'close-icon': [];
+    }> & {
+        default: [];
+        'close-icon': [];
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (e: PointerEvent) => any;
+    close: (e: PointerEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((e: PointerEvent) => any) | undefined;
+    onClose?: ((e: PointerEvent) => any) | undefined;
+}>, {
+    closeable: boolean;
+    closeLeft: boolean;
+    size: ComponentSize<BadgeSizePrefix>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/vite.config.d.ts

@@ -0,0 +1,3 @@
+import { ConfigEnv } from 'vite';
+declare const _default: ({ command }: ConfigEnv) => import('vite').UserConfig;
+export default _default;

package/index.css

@@ -1,6 +1,6 @@
 @import 'tailwindcss';
 
-@import './src/sizes.css';
-@import './src/colors.css';
+@import './src/css/sizes.css';
+@import './src/css/colors.css';
 
-@import './src/badge.css';
+@import './src/css/badge.css';

package/index.ts

@@ -0,0 +1,5 @@
+import Badge from './src/Badge.vue';
+
+export {
+    Badge,
+};

package/package.json

@@ -1,10 +1,20 @@
 {
   "name": "@vue-interface/badge",
-  "version": "3.0.0",
-  "description": "A TailwindCSS badge utility.",
+  "version": "3.1.1",
+  "description": "A Vue badge utility.",
   "type": "module",
-  "main": "./index.css",
-  "module": "./index.css",
+  "main": "./dist/badge.umd.cjs",
+  "module": "./dist/badge.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./index.ts",
+      "types": "./dist/index.d.ts",
+      "style": "./index.css",
+      "import": "./dist/badge.js",
+      "require": "./dist/badge.umd.cjs"
+    }
+  },
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "repository": {
     "type": "git",
@@ -13,6 +23,7 @@
   "keywords": [
     "Badge",
     "Component",
+    "Vue",
     "Tailwind",
     "Bootstrap"
   ],
@@ -25,12 +36,20 @@
   "readme": "README.md",
   "files": [
     "src",
+    "dist",
+    "index.ts",
     "index.css",
     "README.md",
     "LICENSE"
   ],
+  "peerDependencies": {
+    "@heroicons/vue": "2.2.0",
+    "vue": "^3.3.4",
+    "@vue-interface/sizeable": "2.0.0"
+  },
   "scripts": {
     "dev": "vite",
+    "build": "vue-tsc && vite build",
     "preview": "vite preview"
   }
 }

package/src/Badge.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { XMarkIcon } from '@heroicons/vue/24/outline';
+import type { ComponentSize } from '@vue-interface/sizeable';
+
+export type BadgeSizePrefix = 'badge';
+
+withDefaults(defineProps<{
+    closeable?: boolean;
+    closeLeft?: boolean;
+    size?: ComponentSize<BadgeSizePrefix>;
+}>(), {
+    closeable: false,
+    closeLeft: false,
+    size: 'badge-md'
+});
+
+defineSlots<{
+    default: [];
+    'close-icon': [];
+}>();
+
+const emit = defineEmits<{
+    click: [e: PointerEvent];
+    close: [e: PointerEvent];
+}>();
+</script>
+
+<template>
+    <div 
+        class="badge" 
+        :class="[
+            size, 
+            { 'close-left': closeLeft }
+            ]">
+        <div
+            class="badge-inner"
+            @click="emit('click', $event)">
+            <slot />
+        </div>
+        <button
+            v-if="closeable"
+            type="button"
+            class="badge-close" 
+            @click="emit('close', $event)">
+            <slot name="close-icon">
+                <XMarkIcon />
+            </slot>
+        </button>
+    </div>
+</template>

package/src/css/badge.css

@@ -0,0 +1,148 @@
+@theme {
+    --badge-display: inline-flex;
+    --badge-align-items: stretch;
+    --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);
+    --badge-color: var(--badge-text-default);
+    --badge-background-color: var(--badge-primary);
+    --badge-padding-y: .25;
+    --badge-padding-x: .350;
+    --badge-padding-top: calc(1em * var(--badge-padding-y));
+    --badge-padding-bottom: calc(1em * var(--badge-padding-y));
+    --badge-padding-left: calc(1em * var(--badge-padding-x));
+    --badge-padding-right: calc(1em * var(--badge-padding-x));
+    
+    --badge-close-cursor: pointer;
+    --badge-close-align-items: center;
+    --badge-close-justify-content: center;
+    --badge-close-dark-hover-color: var(--badge-color);
+    --badge-close-icon-size: 0.75em;
+
+    --badge-inner-display: inline-flex;
+    --badge-inner-align-items: center;
+    --badge-inner-justify-content: start;
+
+    /* badge-outline variables */
+    --badge-outline-background-color: transparent;
+    --badge-outline-color:  var(--badge-primary, var(--color-blue-600));
+}
+
+@utility badge {
+    display: var(--badge-display);
+    align-items: var(--badge-align-items);
+    justify-content: var(--badge-justify-content);
+    font-size: var(--badge-font-size);
+    color: var(--badge-color);
+    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);
+
+    &.close-left {
+        .badge-close {
+            order: -1;
+            padding-left: calc(var(--badge-padding-left) / 2.5);
+            padding-right: calc(var(--badge-padding-right) / 2.5);
+        }
+
+        .badge-inner {
+            padding-left: 0;
+            padding-right: var(--badge-padding-right);
+        }
+    }
+
+    .badge-close {
+        display: var(--badge-inner-display);
+        line-height: var(--badge-font-size);
+        cursor: var(--badge-close-cursor);
+        justify-content: var(--badge-close-justify-content);
+        align-items: var(--badge-close-align-items);
+        padding-left: calc(var(--badge-padding-left) / 3.5);
+        padding-right: calc(var(--badge-padding-right) / 3.5);
+        padding-top: var(--badge-padding-top);
+        padding-bottom: var(--badge-padding-bottom);
+
+        & svg,
+        & > :first-child {
+            width: var(--badge-close-icon-size);
+            height: var(--badge-close-icon-size);
+        }
+
+        &:hover {
+            background-color: color-mix(in oklch, var(--badge-background-color) 90%, black);
+        }
+    }
+}
+
+@utility badge-inner {
+    display: var(--badge-inner-display);
+    align-items: var(--badge-inner-align-items);
+    justify-content: var(--badge-inner-justify-content);
+    line-height: var(--badge-font-size);
+    padding-top: var(--badge-padding-top);
+    padding-bottom: var(--badge-padding-bottom);
+    padding-left: var(--badge-padding-left);
+    padding-right: var(--badge-padding-right);
+    flex-grow: 1;
+
+    &:not(:last-child) {
+        padding-right: 0;
+    }
+}
+
+@utility badge-outline {
+    background-color: var(--badge-outline-background-color);
+    color: var(--badge-outline-color);
+    border: 1px solid var(--badge-outline-color);
+
+    .badge-close:hover {
+        background-color: color-mix(in oklch, var(--badge-background-color, oklch(54.6% 0.245 262.881)) 10%, white);
+        
+        @variant dark {
+            background-color: var(--badge-background-color);
+            color: var(--badge-close-dark-hover-color);
+        }
+    }
+}
+
+@utility badge-pill {
+    border-radius: 100px; 
+}
+
+@utility badge-* {
+    --badge-font-size: --value(--badge-font-size-*, [length]);
+    --badge-font-size: --spacing(--value(number));
+    --badge-close-icon-size: calc(--value(--badge-font-size-*) * 0.75);
+    --badge-close-icon-size: calc(--spacing(--value(number)) * 0.75);
+        
+    border-radius: calc(var(--badge-font-size) * .25);
+    
+    background-color: --value(--badge-*, --color-*, [color]);
+    color: --value(--badge-*-text, --text-for-*);
+
+    .badge-close:hover {
+        background-color: color-mix(in oklch, --value(--badge-*, --color-*, [color]) 90%, black);
+    }
+}
+
+@utility badge-outline-* {
+    background-color: var(--badge-outline-background-color);
+    color: --value(--badge-*, --color-*, [color]);
+    border: 1px solid --value(--badge-*, --color-*, [color]);
+
+    .badge-close:hover {
+        background-color: color-mix(in oklch, --value(--badge-*, --color-*, [color]) 10%, white);
+
+        @variant dark {
+            background-color: --value(--badge-*, --color-*, [color]);
+            color: --value(--badge-*-text, --text-for-*);
+        }
+    }
+}

package/src/badge.css

@@ -1,139 +0,0 @@
-@theme {
-    /* badge variables */
-    --badge-display: inline-flex;
-    --badge-align-items: stretch;
-    --badge-justify-content: space-between;
-    --badge-padding-y: .25;
-    --badge-padding-x: .350;
-
-    --badge-children-display: inline-flex;
-    --badge-children-align-items: center;
-
-    --badge-close-display: inline-flex;
-    --badge-close-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M6%2018L18%206M6%206l12%2012'/%3E%3C/svg%3E");
-
-    /* badge-outline variables */
-    --badge-outline-background-color: transparent;
-    --badge-outline-color:  var(--badge-primary, var(--color-blue-600));
-}
-
-@utility badge {
-    --badge-border-radius: --spacing(1);
-    --badge-font-size: --spacing(4);
-    --badge-padding-top: calc(var(--badge-font-size) * var(--badge-padding-y));
-    --badge-padding-bottom: calc(var(--badge-font-size) * var(--badge-padding-y));
-    --badge-padding-left: calc(var(--badge-font-size) * var(--badge-padding-x));
-    --badge-padding-right: calc(var(--badge-font-size) * var(--badge-padding-x));
-    --badge-gap: calc(var(--badge-font-size) * var(--badge-padding-x) / 2);
-    --badge-color: var(--badge-text-default);
-    --badge-background-color: var(--badge-primary);
-    --badge-hover-color: black;
-    --badge-hover-mix-percentage: 90%;
-    --badge-close-hover-color: var(--badge-color);
-    --badge-close-icon-size: calc(var(--badge-font-size) * 0.75);
-
-    display: var(--badge-display);
-    align-items: var(--badge-align-items);
-    justify-content: var(--badge-justify-content);
-    gap: var(--badge-gap);
-    font-size: var(--badge-font-size);
-    line-height: var(--badge-font-size);
-    color: var(--badge-color);
-    background-color: var(--badge-background-color);
-    border-radius: var(--badge-border-radius);
-    text-decoration: none;
-
-    &:not(:has(:nth-child(1))) {
-        padding-top: var(--badge-padding-top);
-        padding-bottom: var(--badge-padding-bottom);
-        padding-left: var(--badge-padding-left);
-        padding-right: var(--badge-padding-right);
-    }
-
-    &:has(:nth-child(1)) {
-        > * {
-            display: var(--badge-children-display);
-            align-items: var(--badge-children-align-items);
-            padding-top: var(--badge-padding-top);
-            padding-bottom: var(--badge-padding-bottom);
-        }
-
-        > :first-child {
-            padding-left: var(--badge-padding-left);
-            border-top-left-radius: var(--badge-border-radius);
-            border-bottom-left-radius: var(--badge-border-radius);
-        }
-
-        > :last-child {
-            padding-right: var(--badge-padding-right);
-            border-top-right-radius: var(--badge-border-radius);
-            border-bottom-right-radius: var(--badge-border-radius);
-        }
-        
-        .badge-close {
-            padding-left: calc(var(--badge-padding-left) / 3);
-            padding-right: calc(var(--badge-padding-left) / 3);
-            
-
-            &::before {
-                content: "";
-                display: block;
-                width: var(--badge-close-icon-size);
-                height: var(--badge-close-icon-size);
-                background-color: currentColor;
-                -webkit-mask: var(--badge-close-icon) center / contain no-repeat;
-                mask: var(--badge-close-icon) center / contain no-repeat;
-            }
-
-            &:hover {
-                background-color: color-mix(in oklab, var(--badge-background-color) var(--badge-hover-mix-percentage), var(--badge-hover-color));
-                color: var(--badge-close-hover-color);
-            }
-        }
-    }
-
-}
-
-@utility badge-* {
-    --badge-font-size: --value(--badge-font-size-*, [length]);
-    --badge-font-size: --spacing(--value(integer));
-    --badge-border-radius: calc(var(--badge-font-size) * .25);
-    --badge-background-color: --value(--badge-*, --color-*, [color]);
-    --badge-color: --value(--badge-*-text, --text-for-*);
-    --badge-hover-color: --value(--badge-*-hover-color, --hover-color-for-*);
-}
-
-@utility badge-outline {
-    --badge-background-color: var(--badge-outline-background-color);
-    --badge-color: var(--badge-outline-color);
-    --badge-border-color: var(--badge-outline-color);
-    --badge-border-style: solid;
-    --badge-border-width: 1px;
-    --badge-hover-color: var(--badge-outline-color);
-    --badge-hover-mix-percentage: 90%;
-    --badge-close-hover-color: var(--badge-outline-color);
-
-    @variant dark {
-        --badge-hover-mix-percentage: 0%;
-        --badge-close-hover-color: var(--color-white, #fff);
-    }
-
-    border: var(--badge-border-width) var(--badge-border-style) var(--badge-border-color);
-}
-
-@utility badge-outline-* {
-    --badge-background-color: var(--badge-outline-background-color);
-    --badge-color: --value(--badge-*, --color-*, [color]);
-    --badge-border-color: --value(--badge-*, --color-*, [color]);
-    --badge-border-style: solid;
-    --badge-border-width: 1px;
-    --badge-hover-color: --value(--badge-*, --color-*, [color]);
-    --badge-hover-mix-percentage: 85%;
-
-    @variant dark {
-        --badge-hover-mix-percentage: 0%;
-    --badge-close-hover-color: --value(--badge-*-text, --text-for-*);
-    }
-
-    border: var(--badge-border-width) var(--badge-border-style) var(--badge-border-color);
-}