@meistrari/tela-build 1.49.2 → 1.50.0

package/components/tela/animated/animated-number.mdx

@@ -5,7 +5,7 @@ import * as AnimatedNumberStories from './animated-number.stories.ts';
 
 # TelaAnimatedNumber
 
-An animated number component that smoothly animates number changes with counting effects. Supports currency formatting, decimal precision, and locale customization. Useful for displaying metrics, statistics, or financial data with engaging animations.
+An animated number component that smoothly animates number changes with counting effects. Supports currency formatting, decimal precision, locale customization, and arbitrary prefix/suffix text. Useful for displaying metrics, statistics, or financial data with engaging animations.
 
 ## Examples
 
@@ -84,6 +84,27 @@ const increment = () => {
 <!-- Output: 123.4568 -->
 ```
 
+### With Prefix & Suffix
+
+Wrap the animated value with static text — useful for units or symbols that aren't covered by `currency` (e.g. `%`, `M`, `ms`, `+`).
+
+```vue
+<!-- Suffix -->
+<TelaAnimatedNumber :value="48.2" suffix="M" />
+<!-- Output: 48.2M -->
+
+<TelaAnimatedNumber :value="842" suffix="ms" />
+<!-- Output: 842ms -->
+
+<!-- Prefix -->
+<TelaAnimatedNumber :value="92" prefix="~" suffix="%" />
+<!-- Output: ~92% -->
+
+<!-- Signed delta -->
+<TelaAnimatedNumber :value="8.1" prefix="+" suffix="%" />
+<!-- Output: +8.1% -->
+```
+
 ### Counter Example
 
 ```vue
@@ -188,6 +209,8 @@ type AnimatedNumberProps = {
   precision?: number
   currency?: string
   locales?: string[]
+  prefix?: string   // static text rendered before the value, e.g. "+", "~"
+  suffix?: string   // static text rendered after the value, e.g. "%", "M", "ms"
 }
 ```
 
@@ -197,6 +220,7 @@ type AnimatedNumberProps = {
 - **Currency Formatting**: Support for all currency codes
 - **Locale Support**: Format according to different locales
 - **Precision Control**: Set decimal places
+- **Prefix & Suffix**: Wrap the value with static text (units, symbols, signs)
 - **Performance**: Optimized for rapid updates
 - **Direction**: Automatically counts up or down
 

package/components/tela/animated/animated-number.vue

@@ -6,6 +6,8 @@ const props = defineProps<{
     precision?: number
     currency?: string
     locales?: string[]
+    prefix?: string
+    suffix?: string
 }>()
 </script>
 
@@ -18,6 +20,8 @@ const props = defineProps<{
             currency: props.currency?.length === 3 ? props.currency : undefined,
             style: props.currency?.length === 3 ? 'currency' : undefined,
         }"
+        :prefix="props.prefix"
+        :suffix="props.suffix"
         :locales="props.locales"
     />
 </template>

package/components/tela/home/home.mdx

@@ -105,10 +105,10 @@ function onFiles(event: Event) {
 
       <TelaHomeBody>
         <TelaHomeMetrics>
-          <TelaHomeMetricsCard label="Total Cases" value="2,081">
+          <TelaHomeMetricsCard label="Total Cases" :value="2081">
             <div grid grid-cols-2 gap-16px>
-              <TelaHomeMetricsStat label="Pending" value="273" delta="13.1%" />
-              <TelaHomeMetricsStat label="Reviewed" value="1,808" delta="86.9%" />
+              <TelaHomeMetricsStat label="Pending" :value="273" :delta="13.1" deltaSuffix="%" />
+              <TelaHomeMetricsStat label="Reviewed" :value="1808" :delta="86.9" deltaSuffix="%" />
             </div>
           </TelaHomeMetricsCard>
 
@@ -253,7 +253,7 @@ type HomeMetricsProps = {
 ```typescript
 type HomeMetricsCardProps = {
   label?: string                  // metric label (or use the #label slot)
-  value?: string | number         // optional hero value — omit for a title-only card
+  value?: number                  // optional hero value (animated) — omit for a title-only card
   class?: HTMLAttributes['class']  // extra classes merged onto the card's inner body wrapper
 }
 // default slot — body content (breakdown, list, progress, sparkline)
@@ -266,8 +266,12 @@ When `value` is provided the card leads with a big `heading-h2-semibold` number;
 ```typescript
 type HomeMetricsStatProps = {
   label?: string           // stat label (or use the #label slot)
-  value?: string | number  // the value, rendered as h4 (or use the default slot)
-  delta?: string           // optional inline delta, e.g. "13.1%" (or use the #delta slot)
+  value?: number           // the value (h4), animated via TelaAnimatedNumber (or use the #value slot for non-numeric text)
+  valuePrefix?: string     // text before the value, e.g. "$"
+  valueSuffix?: string     // text after the value, e.g. "%", "M", "ms"
+  delta?: number           // optional inline delta, animated
+  deltaPrefix?: string     // text before the delta, e.g. "+"
+  deltaSuffix?: string     // text after the delta, e.g. "%"
 }
 ```
 

package/components/tela/home/metrics/metrics-card.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 
-const props = defineProps<{ label?: string, value?: string | number, class?: HTMLAttributes['class'] }>()
+const props = defineProps<{ label?: string, value?: number, class?: HTMLAttributes['class'] }>()
 
 const hasValue = computed(() => props.value !== undefined)
 </script>
 
 <template>
-    <TelaCard size="xs" class="rounded-0! border-none!">
+    <TelaCard size="xs" class="rounded-0! min-w-0">
         <div flex="~ col" h-full :class="cn(hasValue ? 'gap-[36px]' : 'gap-[20px]', props.class)">
-            <div flex="~ col" gap-4px>
+            <div flex="~ col">
                 <span body-12-regular text-secondary>
                     <slot name="label">
                         {{ label }}
                     </slot>
                 </span>
-                <h2 v-if="hasValue" heading-h2-semibold text-primary>
-                    {{ value }}
+                <h2 v-if="value !== undefined" heading-h2-semibold text-primary>
+                    <TelaAnimatedNumber :value="value" />
                 </h2>
             </div>
             <slot />

package/components/tela/home/metrics/metrics-stat.vue

@@ -1,22 +1,30 @@
 <script setup lang="ts">
-const props = defineProps<{ label?: string, value?: string | number, delta?: string }>()
-
-const hasDelta = computed(() => props.delta !== undefined)
+defineProps<{
+    label?: string
+    value?: number
+    valuePrefix?: string
+    valueSuffix?: string
+    delta?: number
+    deltaPrefix?: string
+    deltaSuffix?: string
+}>()
 </script>
 
 <template>
-    <div flex="~ col" gap-4px>
+    <div flex="~ col" gap-2px>
         <span body-12-regular text-secondary>
             <slot name="label">
                 {{ label }}
             </slot>
         </span>
         <div flex items-baseline gap-4px>
-            <h4 heading-h4-semibold text-primary>
-                {{ value }}
+            <h4 v-if="$slots.value || value !== undefined" heading-h4-semibold text-primary>
+                <slot name="value">
+                    <TelaAnimatedNumber v-if="value !== undefined" :value="value" :prefix="valuePrefix" :suffix="valueSuffix" />
+                </slot>
             </h4>
-            <span v-if="hasDelta" body-12-regular text-secondary>
-                {{ delta }}
+            <span v-if="delta !== undefined" body-12-regular text-secondary>
+                <TelaAnimatedNumber :value="delta" :prefix="deltaPrefix" :suffix="deltaSuffix" />
             </span>
         </div>
     </div>

package/components/tela/home/metrics/metrics.vue

@@ -33,7 +33,8 @@ const gridStyle = computed(() => ({
 <template>
     <div flex justify-between>
         <div
-            grid gap-0.5px bg-border border-0.5px border rounded-12px overflow-hidden
+            grid divide-x-0.5px divide-border border-0.5px border rounded-12px overflow-hidden
+            class="[&>div]:border-0"
             :style="gridStyle"
         >
             <slot />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.49.2",
+  "version": "1.50.0",
   "type": "module",
   "files": [
     "app.config.ts",