urkit-ui 0.1.5 → 0.2.0

package/README.md

@@ -25,6 +25,8 @@ Currently available components in v0.1.5:
 | **UrButton** | Full-featured button with variants, sizes, loading states, and icons | ✅ Stable |
 | **UrInput** | Comprehensive input component with validation, password toggle, icons, and select | ✅ Stable |
 | **UrIcon** | Flexible icon system with namespace support | ✅ Stable |
+| **UrAlert** | Alert component for messages and notifications with multiple variants and statuses | ✅ Stable |
+| **UrBadge** | Badge component for labels and status indicators with colors and variants | ✅ Stable |
 
 ### Coming Soon
 
@@ -129,13 +131,58 @@ Comprehensive input component with validation, icons, and advanced features.
 - Select dropdown
 - Disabled and error states
 
+### Alert
+
+Alert component for displaying important messages and notifications.
+
+```vue
+<UrAlert
+  status="success"
+  title="Success!"
+  description="Your changes have been saved."
+  :dismissable="true"
+  @dismiss="handleDismiss"
+/>
+```
+
+**Variants**: `filled`, `light`, `lighter`, `stroke`
+**Sizes**: `xsmall`, `small`, `large`
+**Statuses**: `error`, `warning`, `success`, `information`, `feature`
+
+**Features**:
+- Multiple variants and sizes
+- 5 status types with unique icons
+- Optional description and action buttons
+- Dismissable with close button
+- Slots for custom content
+
+### Badge
+
+Badge component for labels and status indicators.
+
+```vue
+<UrBadge
+  variant="filled"
+  size="medium"
+  color="blue"
+>
+  New
+</UrBadge>
+```
+
+**Variants**: `filled`, `light`, `lighter`, `stroke`
+**Sizes**: `small`, `medium`, `large`
+**Colors**: `gray`, `blue`, `orange`, `red`, `green`, `yellow`, `purple`, `sky`, `pink`, `teal`
+
 ## 🎨 Icon System
 
-Urkit includes a flexible icon system with namespaces.
+Urkit includes a flexible icon system with namespace support and automatic caching.
+
+**📘 [Complete Icon Documentation](./ICONS.md)** - Usage, custom icons, and advanced configuration
 
-### Included Icons (for testing)
+### Included Icons
 
-The module includes 10 essential icons to get you started:
+The module includes essential icons to get you started:
 
 | Icon | Name | Usage |
 |------|------|-------|
@@ -254,6 +301,7 @@ export default defineNuxtConfig({
 ## 📖 Documentation
 
 - **[Complete Usage Guide](./USAGE.md)** - Detailed component documentation and examples
+- **[Icon System Guide](./ICONS.md)** - Icon usage, custom icons, and namespaces
 - **[Color Customization](./COLORS.md)** - Brand color customization guide
 - **[Architecture](./ARCHITECTURE.md)** - Technical architecture and asset management
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "0.1.5",
+  "version": "0.2.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/css/global.css

@@ -1 +1 @@
-@font-face{font-display:swap;font-family:InterFull;font-weight:100 900;src:url(/fonts/Inter-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-display:swap;font-family:Instrument;font-style:normal;font-weight:400;src:url(/fonts/Instrument_Serif/InstrumentSerif-Regular.ttf) format("truetype")}@font-face{font-display:swap;font-family:Instrument Italic;font-style:italic;font-weight:400;src:url(/fonts/Instrument_Serif/InstrumentSerif-Italic.ttf) format("truetype")}body{background-color:var(--white);color:var(--white);font-family:InterFull,sans-serif;font-feature-settings:"salt" on,"ss01" on,"ss03" on,"ss07" on,"ss08" on,"tnum" on,"cv01" 1,"cv02" 1,"cv03" 1,"cv04" 1,"cv05" 1,"cv06" 1,"cv08" 1,"cv09" 1,"cv10" 1,"cv12" 1,"cv11" 1,"cv13" 1,"calt" 1,"liga" 1;font-optical-sizing:auto;font-style:normal}body.no-scroll{overflow:hidden!important}*{border-style:solid;border-width:0;box-sizing:border-box}#__nuxt{min-height:inherit}.heading{display:inline-block;font-size:24px;font-weight:600;margin-bottom:32px}.trading-heading{color:var(--white);font-size:14px;font-weight:700}.b-r{border:1px solid red}.b-l{border:1px solid lime}.b-y{border:1px solid #ff0}.b-g{border:1px solid green}.b-b{border:1px solid blue}.section-divider{background:var(--neutral-3);border:none;height:1px;margin:56px 0}.page-enter-active,.page-leave-active{transition:all .4s cubic-bezier(.4,0,.2,1)}.page-enter-from,.page-leave-to{filter:blur(10px);opacity:0}.page-enter-to,.page-leave-from{filter:blur(0);opacity:1}::selection{background-color:var(--neutral-3);text-shadow:none}::-moz-selection{background-color:var(--neutral-3);text-shadow:none}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:transparent;border-radius:6px;-webkit-transition:background-color .3s ease;transition:background-color .3s ease}::-webkit-scrollbar-corner{background:transparent}body:hover::-webkit-scrollbar-thumb{background-color:var(--neutral-4)}body:hover::-webkit-scrollbar-thumb:hover{background-color:var(--neutral-6)}html{scrollbar-color:transparent transparent;scrollbar-width:thin}html:hover{scrollbar-color:var(--neutral-4) transparent}
+@font-face{font-display:swap;font-family:InterFull;font-weight:100 900;src:url(/fonts/Inter-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-display:swap;font-family:Instrument;font-style:normal;font-weight:400;src:url(/fonts/Instrument_Serif/InstrumentSerif-Regular.ttf) format("truetype")}@font-face{font-display:swap;font-family:Instrument Italic;font-style:italic;font-weight:400;src:url(/fonts/Instrument_Serif/InstrumentSerif-Italic.ttf) format("truetype")}body{background-color:var(--white);color:var(--white);font-family:InterFull,sans-serif;font-feature-settings:"salt" on,"ss01" on,"ss03" on,"ss07" on,"ss08" on,"tnum" on,"cv01" 1,"cv02" 1,"cv03" 1,"cv04" 1,"cv05" 1,"cv06" 1,"cv08" 1,"cv09" 1,"cv10" 1,"cv12" 1,"cv11" 1,"cv13" 1,"calt" 1,"liga" 1;font-optical-sizing:auto;font-style:normal}body.no-scroll{overflow:hidden!important}*{border-style:solid;border-width:0;box-sizing:border-box}#__nuxt{min-height:inherit}.heading{display:inline-block;font-size:24px;font-weight:600;margin-bottom:32px}.trading-heading{color:var(--white);font-size:14px;font-weight:700}.b-r{border:1px solid red}.b-l{border:1px solid lime}.b-y{border:1px solid #ff0}.b-g{border:1px solid green}.b-b{border:1px solid blue}.section-divider{background:var(--neutral-3);border:none;height:1px;margin:56px 0}.page-enter-active,.page-leave-active{transition:all .4s cubic-bezier(.4,0,.2,1)}.page-enter-from,.page-leave-to{filter:blur(10px);opacity:0}.page-enter-to,.page-leave-from{filter:blur(0);opacity:1}::selection{background-color:var(--neutral-3);text-shadow:none}::-moz-selection{background-color:var(--neutral-3);text-shadow:none}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:transparent;border-radius:6px;-webkit-transition:background-color .3s ease;transition:background-color .3s ease}::-webkit-scrollbar-corner{background:transparent}body:hover::-webkit-scrollbar-thumb{background-color:var(--neutral-4)}body:hover::-webkit-scrollbar-thumb:hover{background-color:var(--neutral-6)}html{scrollbar-color:transparent transparent;scrollbar-width:thin}html:hover{scrollbar-color:var(--neutral-4) transparent}:root{--alert-error-bg:#fb3748;--alert-error-light:#fecaca;--alert-error-lighter:#fef2f2;--alert-warning-bg:#fa731a;--alert-warning-light:#fff2e4;--alert-warning-lighter:#fff7ed;--alert-success-bg:#21c16b;--alert-success-light:#bbf7d0;--alert-success-lighter:#f0fdf4;--alert-info-bg:#335cff;--alert-info-light:#dbeafe;--alert-info-lighter:#eff6ff;--alert-feature-bg:#7d52f4;--alert-feature-light:#e9d5ff;--alert-feature-lighter:#faf5ff}

package/dist/runtime/components/Alert.d.vue.ts

@@ -0,0 +1,56 @@
+/**
+ * Alert component for displaying important messages and notifications
+ * @component UrAlert
+ */
+interface Props {
+    /** Alert visual style */
+    variant?: 'filled' | 'light' | 'lighter' | 'stroke';
+    /** Alert size */
+    size?: 'xsmall' | 'small' | 'large';
+    /** Alert status type */
+    status?: 'error' | 'warning' | 'success' | 'information' | 'feature';
+    /** Additional CSS classes for wrapper */
+    wrapperClassName?: string;
+    /** Alert title text */
+    title?: string;
+    /** Alert description text */
+    description?: string;
+    /** Show "Learn More" action button */
+    showLearnMore?: boolean;
+    /** Show "Upgrade" action button */
+    showUpgrade?: boolean;
+    /** Enable dismiss button */
+    dismissable?: boolean;
+}
+declare var __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_5) => any;
+} & {
+    description?: (props: typeof __VLS_7) => any;
+} & {
+    actions?: (props: typeof __VLS_9) => any;
+} & {
+    'footer-actions'?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+}>, {
+    variant: "filled" | "light" | "lighter" | "stroke";
+    size: "xsmall" | "small" | "large";
+    status: "error" | "warning" | "success" | "information" | "feature";
+    wrapperClassName: string;
+    title: string;
+    description: string;
+    showLearnMore: boolean;
+    showUpgrade: boolean;
+    dismissable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Alert.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    :class="[
+  'alert',
+  `alert--${variant}`,
+  `alert--${size}`,
+  `alert--${status}`,
+  wrapperClassName,
+  { 'alert--has-description': description || $slots.description }
+]"
+  >
+    <div class="alert__main">
+      <div class="alert__content">
+        <div class="alert__icon">
+          <UrIcon :name="iconName" :size="iconSize" />
+        </div>
+        <div class="alert__text">
+          <div class="alert__title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </div>
+          <div v-if="description || $slots.description" class="alert__description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </div>
+        </div>
+      </div>
+      <div class="alert__actions">
+        <div
+          v-if="(showLearnMore || showUpgrade || $slots.actions) && !(description || $slots.description)"
+          class="alert__ctas"
+        >
+          <slot name="actions">
+            <button v-if="showLearnMore" class="alert__learn-more">Learn More</button>
+            <span v-if="showLearnMore && showUpgrade" class="alert__separator">·</span>
+            <button v-if="showUpgrade" class="alert__upgrade">Upgrade</button>
+          </slot>
+        </div>
+        <button v-if="dismissable" class="alert__close" @click="$emit('dismiss')">
+          <UrIcon name="icons:close" :size="16" />
+        </button>
+      </div>
+    </div>
+    <div
+      v-if="(showLearnMore || showUpgrade || $slots.actions) && (description || $slots.description)"
+      class="alert__footer"
+    >
+      <div class="alert__links">
+        <slot name="footer-actions">
+          <button v-if="showLearnMore" class="alert__learn-more">Learn More</button>
+          <span v-if="showLearnMore && showUpgrade" class="alert__separator">·</span>
+          <button v-if="showUpgrade" class="alert__upgrade">Upgrade</button>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  variant: { type: String, required: false, default: "filled" },
+  size: { type: String, required: false, default: "small" },
+  status: { type: String, required: false, default: "information" },
+  wrapperClassName: { type: String, required: false, default: "" },
+  title: { type: String, required: false, default: "Insert your alert title here!" },
+  description: { type: String, required: false, default: "" },
+  showLearnMore: { type: Boolean, required: false, default: false },
+  showUpgrade: { type: Boolean, required: false, default: true },
+  dismissable: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["dismiss"]);
+const iconName = computed(() => {
+  switch (props.status) {
+    case "error":
+      return "icons:alert-error";
+    case "warning":
+      return "icons:alert-warning";
+    case "success":
+      return "icons:alert-success";
+    case "information":
+      return "icons:alert-info";
+    case "feature":
+      return "icons:alert-feature";
+    default:
+      return "icons:alert-info";
+  }
+});
+const iconSize = computed(() => {
+  switch (props.size) {
+    case "xsmall":
+      return 16;
+    case "small":
+      return 20;
+    case "large":
+      return 24;
+    default:
+      return 16;
+  }
+});
+</script>
+
+<style scoped>
+.alert{border-radius:12px;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:500;letter-spacing:-.015px;min-width:400px;transition:all .2s ease}.alert:not(.alert--has-description){align-items:center;flex-direction:row;justify-content:space-between}.alert:not(.alert--has-description) .alert__main{align-items:center;flex:1}.alert:not(.alert--has-description) .alert__actions{align-items:center;margin-top:0}.alert__main{gap:12px;justify-content:space-between}.alert__content,.alert__main{align-items:flex-start;display:flex}.alert__content{flex:1;gap:8px}.alert__icon{align-items:center;display:flex;flex-shrink:0;justify-content:center;margin-top:2px}.alert__icon :deep(svg){fill:currentColor}.alert__text{display:flex;flex:1;flex-direction:column;gap:4px}.alert__description{font-weight:350;line-height:1.5}.alert__title{font-weight:500}.alert__actions{align-items:flex-start;display:flex;gap:12px;margin-top:2px}.alert__ctas{align-items:center;display:flex;gap:8px}.alert__footer{margin-top:12px}.alert__links{align-items:center;display:flex;gap:8px}.alert__separator{color:inherit;font-weight:400;opacity:.6}.alert__upgrade{background:none;border:none;color:inherit;cursor:pointer;font-size:inherit;font-weight:500;text-decoration:underline;transition:opacity .2s ease}.alert__upgrade:hover{opacity:.8}.alert__learn-more{background:none;border:none;color:inherit;cursor:pointer;font-size:inherit;font-weight:400;opacity:.8;transition:opacity .2s ease}.alert__learn-more:hover{opacity:1}.alert__close{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;justify-content:center;padding:4px;transition:all .2s ease}.alert__close:hover{background:rgba(0,0,0,.1)}.alert--xsmall{border-radius:8px;font-size:12px;font-weight:400;padding:8px}.alert--xsmall .alert__content,.alert--xsmall .alert__main{align-items:center}.alert--xsmall .alert__actions,.alert--xsmall .alert__icon{margin-top:0}.alert--small{border-radius:10px;font-size:14px;padding:8px}.alert--small .alert__content,.alert--small .alert__main{align-items:center}.alert--small .alert__actions,.alert--small .alert__icon{margin-top:0}.alert--large{border-radius:12px;font-size:16px;padding:16px}.alert--large .alert__description{font-size:15px;margin-top:2px}.alert--xsmall .alert__footer{padding-left:24px}.alert--small .alert__footer{padding-left:28px}.alert--large .alert__footer{padding-left:32px}.alert--filled.alert--error{background-color:var(--alert-error-bg);color:#fff}.alert--filled.alert--warning{background-color:var(--alert-warning-bg);color:#fff}.alert--filled.alert--success{background-color:var(--alert-success-bg);color:#fff}.alert--filled.alert--information{background-color:var(--alert-info-bg);color:#fff}.alert--filled.alert--feature{background-color:var(--alert-feature-bg);color:#fff}.alert--light.alert--error{background-color:var(--alert-error-light);color:var(--neutral-10)}.alert--light.alert--warning{background-color:var(--alert-warning-light);color:var(--neutral-10)}.alert--light.alert--success{background-color:var(--alert-success-light);color:var(--neutral-10)}.alert--light.alert--information{background-color:var(--alert-info-light);color:var(--neutral-10)}.alert--light.alert--feature{background-color:var(--alert-feature-light);color:var(--neutral-10)}.alert--lighter.alert--error{background-color:var(--alert-error-lighter);color:var(--neutral-10)}.alert--lighter.alert--warning{background-color:var(--alert-warning-lighter);color:var(--neutral-10)}.alert--lighter.alert--success{background-color:var(--alert-success-lighter);color:var(--neutral-10)}.alert--lighter.alert--information{background-color:var(--alert-info-lighter);color:var(--neutral-10)}.alert--lighter.alert--feature{background-color:var(--alert-feature-lighter);color:var(--neutral-10)}.alert--stroke{box-shadow:0 4px 8px rgba(41,41,41,.06),0 2px 4px rgba(41,41,41,.04),0 1px 2px rgba(41,41,41,.04),0 0 0 1px rgba(41,41,41,.04),inset 0 -.5px .5px rgba(41,41,41,.08)}.alert--stroke.alert--error,.alert--stroke.alert--feature,.alert--stroke.alert--information,.alert--stroke.alert--success,.alert--stroke.alert--warning{background-color:transparent;color:var(--neutral-10)}.alert--filled.alert--error .alert__icon,.alert--filled.alert--feature .alert__icon,.alert--filled.alert--information .alert__icon,.alert--filled.alert--success .alert__icon,.alert--filled.alert--warning .alert__icon{color:#fff}.alert--light.alert--error .alert__icon{color:var(--alert-error-bg)}.alert--light.alert--warning .alert__icon{color:var(--alert-warning-bg)}.alert--light.alert--success .alert__icon{color:var(--alert-success-bg)}.alert--light.alert--information .alert__icon{color:var(--alert-info-bg)}.alert--light.alert--feature .alert__icon{color:var(--alert-feature-bg)}.alert--lighter.alert--error .alert__icon{color:var(--alert-error-bg)}.alert--lighter.alert--warning .alert__icon{color:var(--alert-warning-bg)}.alert--lighter.alert--success .alert__icon{color:var(--alert-success-bg)}.alert--lighter.alert--information .alert__icon{color:var(--alert-info-bg)}.alert--lighter.alert--feature .alert__icon{color:var(--alert-feature-bg)}.alert--stroke.alert--error .alert__icon{color:var(--alert-error-bg)}.alert--stroke.alert--warning .alert__icon{color:var(--alert-warning-bg)}.alert--stroke.alert--success .alert__icon{color:var(--alert-success-bg)}.alert--stroke.alert--information .alert__icon{color:var(--alert-info-bg)}.alert--stroke.alert--feature .alert__icon{color:var(--alert-feature-bg)}.alert--filled .alert__close:hover{background:hsla(0,0%,100%,.2);border-radius:9999px;transition:all .2s ease}.alert--light .alert__close:hover,.alert--lighter .alert__close:hover,.alert--stroke .alert__close:hover{background:rgba(0,0,0,.1);border-radius:9999px;transition:all .2s ease}
+</style>

package/dist/runtime/components/Alert.vue.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Alert component for displaying important messages and notifications
+ * @component UrAlert
+ */
+interface Props {
+    /** Alert visual style */
+    variant?: 'filled' | 'light' | 'lighter' | 'stroke';
+    /** Alert size */
+    size?: 'xsmall' | 'small' | 'large';
+    /** Alert status type */
+    status?: 'error' | 'warning' | 'success' | 'information' | 'feature';
+    /** Additional CSS classes for wrapper */
+    wrapperClassName?: string;
+    /** Alert title text */
+    title?: string;
+    /** Alert description text */
+    description?: string;
+    /** Show "Learn More" action button */
+    showLearnMore?: boolean;
+    /** Show "Upgrade" action button */
+    showUpgrade?: boolean;
+    /** Enable dismiss button */
+    dismissable?: boolean;
+}
+declare var __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_5) => any;
+} & {
+    description?: (props: typeof __VLS_7) => any;
+} & {
+    actions?: (props: typeof __VLS_9) => any;
+} & {
+    'footer-actions'?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+}>, {
+    variant: "filled" | "light" | "lighter" | "stroke";
+    size: "xsmall" | "small" | "large";
+    status: "error" | "warning" | "success" | "information" | "feature";
+    wrapperClassName: string;
+    title: string;
+    description: string;
+    showLearnMore: boolean;
+    showUpgrade: boolean;
+    dismissable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Badge.d.vue.ts

@@ -0,0 +1,28 @@
+/**
+ * Badge component for labels and status indicators
+ * @component UrBadge
+ */
+interface BadgeProps {
+    /** Badge visual style */
+    variant?: 'filled' | 'light' | 'lighter' | 'stroke';
+    /** Badge size */
+    size?: 'small' | 'medium' | 'large';
+    /** Badge color scheme */
+    color?: 'gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal';
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+    variant: "filled" | "light" | "lighter" | "stroke";
+    size: "small" | "medium" | "large";
+    color: "gray" | "blue" | "orange" | "red" | "green" | "yellow" | "purple" | "sky" | "pink" | "teal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Badge.vue

@@ -0,0 +1,24 @@
+<template>
+  <span :class="badgeClasses" class="badge">
+    <slot />
+  </span>
+</template>
+
+<script setup>
+const props = defineProps({
+  variant: { type: String, required: false, default: "filled" },
+  size: { type: String, required: false, default: "small" },
+  color: { type: String, required: false, default: "gray" }
+});
+const badgeClasses = computed(() => {
+  const baseClasses = "badge";
+  const variantClass = `badge--${props.variant}`;
+  const sizeClass = `badge--${props.size}`;
+  const colorClass = `badge--${props.color}`;
+  return [baseClasses, variantClass, sizeClass, colorClass];
+});
+</script>
+
+<style scoped>
+.badge{align-items:center;border:1px solid transparent;border-radius:999px;display:inline-flex;font-weight:600;letter-spacing:.025em;letter-spacing:-.015px;text-align:center;text-transform:uppercase;transition:all .2s ease;white-space:nowrap}.badge--small{font-size:10px;padding:2px 6px}.badge--medium{font-size:11px;padding:4px 10px}.badge--large{font-size:12px;padding:6px 14px}.badge--filled.badge--gray{background:#7b7b7b;color:#fff}.badge--light.badge--gray{background:#f3f4f6;color:var(--neutral-7)}.badge--lighter.badge--gray{background:#f9fafb;color:#6b7280}.badge--stroke.badge--gray{background:transparent;border-color:#d1d5db;color:#6b7280}.badge--filled.badge--blue{background:#335cff;color:#fff}.badge--light.badge--blue{background:#dbeafe;color:#1d4ed8}.badge--lighter.badge--blue{background:#eff6ff;color:#1e40af}.badge--stroke.badge--blue{background:transparent;border-color:#93c5fd;color:#3b82f6}.badge--filled.badge--orange{background:#fa731a;color:#fff}.badge--light.badge--orange{background:#fff2e4;color:#ea580c}.badge--lighter.badge--orange{background:#fff7ed;color:#c2410c}.badge--stroke.badge--orange{background:transparent;border-color:#fdba74;color:#f97316}.badge--filled.badge--red{background:#fb3748;color:#fff}.badge--light.badge--red{background:#fecaca;color:#dc2626}.badge--lighter.badge--red{background:#fef2f2;color:#b91c1c}.badge--stroke.badge--red{background:transparent;border-color:#fca5a5;color:#ef4444}.badge--filled.badge--green{background:#21c16b;color:#fff}.badge--light.badge--green{background:#bbf7d0;color:#16a34a}.badge--lighter.badge--green{background:#f0fdf4;color:#15803d}.badge--stroke.badge--green{background:transparent;border-color:#86efac;color:#22c55e}.badge--filled.badge--yellow{background:#f6b51e;color:#fff}.badge--light.badge--yellow{background:#fef3c7;color:#d97706}.badge--lighter.badge--yellow{background:#fffbeb;color:#b45309}.badge--stroke.badge--yellow{background:transparent;border-color:#fde047;color:#eab308}.badge--filled.badge--purple{background:#7d52f4;color:#fff}.badge--light.badge--purple{background:#e9d5ff;color:#9333ea}.badge--lighter.badge--purple{background:#faf5ff;color:#7c3aed}.badge--stroke.badge--purple{background:transparent;border-color:#c084fc;color:#a855f7}.badge--filled.badge--sky{background:#47c2ff;color:#fff}.badge--light.badge--sky{background:#bae6fd;color:#0284c7}.badge--lighter.badge--sky{background:#f0f9ff;color:#0369a1}.badge--stroke.badge--sky{background:transparent;border-color:#7dd3fc;color:#0ea5e9}.badge--filled.badge--pink{background:#fb4ba3;color:#fff}.badge--light.badge--pink{background:#fbcfe8;color:#db2777}.badge--lighter.badge--pink{background:#fdf2f8;color:#be185d}.badge--stroke.badge--pink{background:transparent;border-color:#f9a8d4;color:#ec4899}.badge--filled.badge--teal{background:#24d3ba;color:#fff}.badge--light.badge--teal{background:#99f6e4;color:#0d9488}.badge--lighter.badge--teal{background:#f0fdfa;color:#0f766e}.badge--stroke.badge--teal{background:transparent;border-color:#5eead4;color:#14b8a6}.badge:hover{opacity:.9;transform:translateY(-1px)}
+</style>

package/dist/runtime/components/Badge.vue.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Badge component for labels and status indicators
+ * @component UrBadge
+ */
+interface BadgeProps {
+    /** Badge visual style */
+    variant?: 'filled' | 'light' | 'lighter' | 'stroke';
+    /** Badge size */
+    size?: 'small' | 'medium' | 'large';
+    /** Badge color scheme */
+    color?: 'gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal';
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+    variant: "filled" | "light" | "lighter" | "stroke";
+    size: "small" | "medium" | "large";
+    color: "gray" | "blue" | "orange" | "red" | "green" | "yellow" | "purple" | "sky" | "pink" | "teal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Button.d.vue.ts

@@ -67,9 +67,9 @@ declare const __VLS_component: import("vue").DefineComponent<ButtonProps, {}, {}
 }, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
+    variant: ButtonVariant;
     size: ButtonSize;
     type: "button" | "submit" | "reset";
-    variant: ButtonVariant;
     iconPosition: IconPosition;
     iconCollection: IconCollection;
     rounded: boolean;

package/dist/runtime/components/Button.vue.d.ts

@@ -67,9 +67,9 @@ declare const __VLS_component: import("vue").DefineComponent<ButtonProps, {}, {}
 }, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
+    variant: ButtonVariant;
     size: ButtonSize;
     type: "button" | "submit" | "reset";
-    variant: ButtonVariant;
     iconPosition: IconPosition;
     iconCollection: IconCollection;
     rounded: boolean;

package/dist/runtime/components/Input.d.vue.ts

@@ -1,23 +1,23 @@
 /**
  * Input size types
  */
-type InputSize = 'sm' | 'md' | 'lg';
+type InputSize = "sm" | "md" | "lg";
 /**
  * Icon position types
  */
-type IconPosition = 'left' | 'right';
+type IconPosition = "left" | "right";
 /**
  * Affix position types
  */
-type AffixPosition = 'left' | 'right';
+type AffixPosition = "left" | "right";
 /**
  * Button variant types
  */
-type ButtonVariant = 'primary' | 'error' | 'success' | 'neutral';
+type ButtonVariant = "primary" | "error" | "success" | "neutral";
 /**
  * Button size types
  */
-type ButtonSize = 'sm' | 'md' | 'lg' | 'xlg';
+type ButtonSize = "sm" | "md" | "lg" | "xlg";
 /**
  * Select option interface
  */
@@ -88,7 +88,7 @@ interface InputProps {
     /** Select placeholder */
     selectPlaceholder?: string;
     /** Radius type with standard values */
-    radiusType?: 'none' | 'soft' | 'medium' | 'pill';
+    radiusType?: "none" | "soft" | "medium" | "pill";
 }
 declare const _default: import("vue").DefineComponent<InputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => any;