admin-ui-starter-kit 0.1.2 → 0.1.4

package/dist/showcase/assets/metrics-analytics-cards-BR83UVqi.js

@@ -0,0 +1,77 @@
+import{n as e,r as t,t as n}from"./chunk-QTnfLwEv.js";import{n as r,t as i}from"./react-dom-Bz4cALsF.js";import{Cr as a,Er as o,Sr as s,Tr as c,hr as l,mr as u,t as d}from"./example-C6-_Sy6B.js";import{a as f}from"./index-B8DVXCmf.js";import{t as p}from"./props-table-CM_1cocj.js";import{$ as m,A as h,B as g,C as _,D as v,E as y,G as b,H as x,I as S,K as C,M as w,O as T,Q as E,R as D,S as ee,T as O,U as k,V as A,W as j,_ as M,a as N,b as te,c as ne,d as re,f as P,g as F,h as ie,i as ae,j as oe,k as I,l as se,m as ce,n as L,o as le,p as ue,q as R,r as de,s as fe,t as pe,u as me,v as z,w as he,x as ge,y as _e,z as ve}from"./AreaChart-CzBEYPbz.js";import{t as ye}from"./metric-trend-chip-kLBN8u5z.js";var be=n((e=>{function t(e,t){let n=new Map;for(let r=0;r<e.length;r++){let i=e[r],a=t(i,r,e);n.has(a)||n.set(a,i)}return Array.from(n.values())}e.uniqBy=t})),xe=n((e=>{function t(e,t){return function(...n){return e.apply(this,n.slice(0,t))}}e.ary=t})),Se=n((e=>{function t(e){return e}e.identity=t})),Ce=n((e=>{var t=t();function n(e){return function(n){return t.get(n,e)}}e.property=n})),we=n((e=>{function t(e){return e==null||typeof e!=`object`&&typeof e!=`function`}e.isPrimitive=t})),Te=n((e=>{function t(e){return ArrayBuffer.isView(e)&&!(e instanceof DataView)}e.isTypedArray=t})),Ee=n((e=>{function t(e){return Object.getOwnPropertySymbols(e).filter(t=>Object.prototype.propertyIsEnumerable.call(e,t))}e.getSymbols=t})),De=n((e=>{function t(e){return e==null?e===void 0?`[object Undefined]`:`[object Null]`:Object.prototype.toString.call(e)}e.getTag=t})),Oe=n((e=>{e.argumentsTag=`[object Arguments]`,e.arrayBufferTag=`[object ArrayBuffer]`,e.arrayTag=`[object Array]`,e.bigInt64ArrayTag=`[object BigInt64Array]`,e.bigUint64ArrayTag=`[object BigUint64Array]`,e.booleanTag=`[object Boolean]`,e.dataViewTag=`[object DataView]`,e.dateTag=`[object Date]`,e.errorTag=`[object Error]`,e.float32ArrayTag=`[object Float32Array]`,e.float64ArrayTag=`[object Float64Array]`,e.functionTag=`[object Function]`,e.int16ArrayTag=`[object Int16Array]`,e.int32ArrayTag=`[object Int32Array]`,e.int8ArrayTag=`[object Int8Array]`,e.mapTag=`[object Map]`,e.numberTag=`[object Number]`,e.objectTag=`[object Object]`,e.regexpTag=`[object RegExp]`,e.setTag=`[object Set]`,e.stringTag=`[object String]`,e.symbolTag=`[object Symbol]`,e.uint16ArrayTag=`[object Uint16Array]`,e.uint32ArrayTag=`[object Uint32Array]`,e.uint8ArrayTag=`[object Uint8Array]`,e.uint8ClampedArrayTag=`[object Uint8ClampedArray]`})),ke=n((e=>{e.globalThis_=typeof globalThis==`object`&&globalThis||typeof window==`object`&&window||typeof self==`object`&&self||typeof global==`object`&&global||(function(){return this})()||Function(`return this`)()})),Ae=n((e=>{var t=ke();function n(e){return t.globalThis_.Buffer!==void 0&&t.globalThis_.Buffer.isBuffer(e)}e.isBuffer=n})),je=n((e=>{var t=we(),n=Te(),r=Ee(),i=De(),a=Oe(),o=Ae();function s(e,t){return c(e,void 0,e,new Map,t)}function c(e,r,i,a=new Map,s=void 0){let d=s?.(e,r,i,a);if(d!==void 0)return d;if(t.isPrimitive(e))return e;if(a.has(e))return a.get(e);if(Array.isArray(e)){let t=Array(e.length);a.set(e,t);for(let n=0;n<e.length;n++)t[n]=c(e[n],n,i,a,s);return Object.hasOwn(e,`index`)&&(t.index=e.index),Object.hasOwn(e,`input`)&&(t.input=e.input),t}if(e instanceof Date)return new Date(e.getTime());if(e instanceof RegExp){let t=new RegExp(e.source,e.flags);return t.lastIndex=e.lastIndex,t}if(e instanceof Map){let t=new Map;a.set(e,t);for(let[n,r]of e)t.set(n,c(r,n,i,a,s));return t}if(e instanceof Set){let t=new Set;a.set(e,t);for(let n of e)t.add(c(n,void 0,i,a,s));return t}if(o.isBuffer(e))return e.subarray();if(n.isTypedArray(e)){let t=new(Object.getPrototypeOf(e)).constructor(e.length);a.set(e,t);for(let n=0;n<e.length;n++)t[n]=c(e[n],n,i,a,s);return t}if(e instanceof ArrayBuffer||typeof SharedArrayBuffer<`u`&&e instanceof SharedArrayBuffer)return e.slice(0);if(e instanceof DataView){let t=new DataView(e.buffer.slice(0),e.byteOffset,e.byteLength);return a.set(e,t),l(t,e,i,a,s),t}if(typeof File<`u`&&e instanceof File){let t=new File([e],e.name,{type:e.type});return a.set(e,t),l(t,e,i,a,s),t}if(typeof Blob<`u`&&e instanceof Blob){let t=new Blob([e],{type:e.type});return a.set(e,t),l(t,e,i,a,s),t}if(e instanceof Error){let t=structuredClone(e);return a.set(e,t),t.message=e.message,t.name=e.name,t.stack=e.stack,t.cause=e.cause,t.constructor=e.constructor,l(t,e,i,a,s),t}if(e instanceof Boolean){let t=new Boolean(e.valueOf());return a.set(e,t),l(t,e,i,a,s),t}if(e instanceof Number){let t=new Number(e.valueOf());return a.set(e,t),l(t,e,i,a,s),t}if(e instanceof String){let t=new String(e.valueOf());return a.set(e,t),l(t,e,i,a,s),t}if(typeof e==`object`&&u(e)){let t=Object.create(Object.getPrototypeOf(e));return a.set(e,t),l(t,e,i,a,s),t}return e}function l(e,t,n=e,i,a){let o=[...Object.keys(t),...r.getSymbols(t)];for(let r=0;r<o.length;r++){let s=o[r],l=Object.getOwnPropertyDescriptor(e,s);(l==null||l.writable)&&(e[s]=c(t[s],s,n,i,a))}}function u(e){switch(i.getTag(e)){case a.argumentsTag:case a.arrayTag:case a.arrayBufferTag:case a.dataViewTag:case a.booleanTag:case a.dateTag:case a.float32ArrayTag:case a.float64ArrayTag:case a.int8ArrayTag:case a.int16ArrayTag:case a.int32ArrayTag:case a.mapTag:case a.numberTag:case a.objectTag:case a.regexpTag:case a.setTag:case a.stringTag:case a.symbolTag:case a.uint8ArrayTag:case a.uint8ClampedArrayTag:case a.uint16ArrayTag:case a.uint32ArrayTag:return!0;default:return!1}}e.cloneDeepWith=s,e.cloneDeepWithImpl=c,e.copyProperties=l})),Me=n((e=>{var t=je();function n(e){return t.cloneDeepWithImpl(e,void 0,e,new Map,void 0)}e.cloneDeep=n})),Ne=n((e=>{var t=we(),n=n();S();var r=r();function i(e,t,n){return typeof n==`function`?a(e,t,function e(t,r,i,o,s,c){let l=n(t,r,i,o,s,c);return l===void 0?a(t,r,e,c):!!l},new Map):i(e,t,()=>void 0)}function a(e,t,i,s){if(t===e)return!0;switch(typeof t){case`object`:return o(e,t,i,s);case`function`:return Object.keys(t).length>0?a(e,{...t},i,s):n.isEqualsSameValueZero(e,t);default:return r.isObject(e)?typeof t==`string`?t===``:!0:n.isEqualsSameValueZero(e,t)}}function o(e,n,r,i){if(n==null)return!0;if(Array.isArray(n))return c(e,n,r,i);if(n instanceof Map)return s(e,n,r,i);if(n instanceof Set)return l(e,n,r,i);let a=Object.keys(n);if(e==null||t.isPrimitive(e))return a.length===0;if(a.length===0)return!0;if(i?.has(n))return i.get(n)===e;i?.set(n,e);try{for(let o=0;o<a.length;o++){let s=a[o];if(!t.isPrimitive(e)&&!(s in e)||n[s]===void 0&&e[s]!==void 0||n[s]===null&&e[s]!==null||!r(e[s],n[s],s,e,n,i))return!1}return!0}finally{i?.delete(n)}}function s(e,t,n,r){if(t.size===0)return!0;if(!(e instanceof Map))return!1;for(let[i,a]of t.entries())if(n(e.get(i),a,i,e,t,r)===!1)return!1;return!0}function c(e,t,n,r){if(t.length===0)return!0;if(!Array.isArray(e))return!1;let i=new Set;for(let a=0;a<t.length;a++){let o=t[a],s=!1;for(let c=0;c<e.length;c++){if(i.has(c))continue;let l=e[c],u=!1;if(n(l,o,a,e,t,r)&&(u=!0),u){i.add(c),s=!0;break}}if(!s)return!1}return!0}function l(e,t,n,r){return t.size===0?!0:e instanceof Set?c([...e],[...t],n,r):!1}e.isMatchWith=i})),Pe=n((e=>{var t=Ne();function n(e,n){return t.isMatchWith(e,n,()=>void 0)}e.isMatch=n})),Fe=n((e=>{var t=Me(),n=Pe();function r(e){return e=t.cloneDeep(e),t=>n.isMatch(t,e)}e.matches=r})),Ie=n((e=>{var t=De(),n=Oe(),r=je();function i(e,i){return r.cloneDeepWith(e,(a,o,s,c)=>{let l=i?.(a,o,s,c);if(l!==void 0)return l;if(typeof e==`object`){if(t.getTag(e)===`[object Object]`&&typeof e.constructor!=`function`){let t={};return c.set(e,t),r.copyProperties(t,e,s,c),t}switch(Object.prototype.toString.call(e)){case n.numberTag:case n.stringTag:case n.booleanTag:{let t=new e.constructor(e?.valueOf());return r.copyProperties(t,e),t}case n.argumentsTag:{let t={};return r.copyProperties(t,e),t.length=e.length,t[Symbol.iterator]=e[Symbol.iterator],t}default:return}}})}e.cloneDeepWith=i})),Le=n((e=>{var t=Ie();function n(e){return t.cloneDeepWith(e)}e.cloneDeep=n})),Re=n((e=>{var t=De();function n(e){return typeof e==`object`&&!!e&&t.getTag(e)===`[object Arguments]`}e.isArguments=n})),ze=n((e=>{var t=t(),n=n(),r=r(),i=Re();function a(e,a){let o;if(o=Array.isArray(a)?a:typeof a==`string`&&t.isDeepKey(a)&&e?.[a]==null?n.toPath(a):[a],o.length===0)return!1;let s=e;for(let e=0;e<o.length;e++){let t=o[e];if((s==null||!Object.hasOwn(s,t))&&!((Array.isArray(s)||i.isArguments(s))&&r.isIndex(t)&&t<s.length))return!1;s=s[t]}return!0}e.has=a})),Be=n((e=>{var t=t(),n=n(),r=Pe(),i=Le(),a=ze();function o(e,o){switch(typeof e){case`object`:Object.is(e?.valueOf(),-0)&&(e=`-0`);break;case`number`:e=t.toKey(e);break}return o=i.cloneDeep(o),function(t){let i=n.get(t,e);return i===void 0?a.has(t,e):o===void 0?i===void 0:r.isMatch(i,o)}}e.matchesProperty=o})),Ve=n((e=>{var t=Se(),n=Ce(),r=Fe(),i=Be();function a(e){if(e==null)return t.identity;switch(typeof e){case`function`:return e;case`object`:return Array.isArray(e)&&e.length===2?i.matchesProperty(e[0],e[1]):r.matches(e);case`string`:case`symbol`:case`number`:return n.property(e)}}e.iteratee=a})),He=n((e=>{function t(e){return typeof e==`object`&&!!e}e.isObjectLike=t})),Ue=n((e=>{var t=t(),n=He();function r(e){return n.isObjectLike(e)&&t.isArrayLike(e)}e.isArrayLikeObject=r})),We=n((e=>{var t=be(),n=xe(),r=Se(),i=Ve(),a=Ue();function o(e,o=r.identity){return a.isArrayLikeObject(e)?t.uniqBy(Array.from(e),n.ary(i.iteratee(o),1)):[]}e.uniqBy=o})),Ge=t(n(((e,t)=>{t.exports=We().uniqBy}))());function Ke(e,t,n){return t===!0?(0,Ge.default)(e,n):typeof t==`function`?(0,Ge.default)(e,t):e}var B=t(r()),V=1;function qe(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:[],[t,n]=(0,B.useState)({height:0,left:0,top:0,width:0});return[t,(0,B.useCallback)(e=>{if(e!=null){var r=e.getBoundingClientRect(),i={height:r.height,left:r.left,top:r.top,width:r.width};(Math.abs(i.height-t.height)>V||Math.abs(i.left-t.left)>V||Math.abs(i.top-t.top)>V||Math.abs(i.width-t.width)>V)&&n({height:i.height,left:i.left,top:i.top,width:i.width})}},[t.width,t.height,t.top,t.left,...e])]}var Je=t(h());function Ye(){return Ye=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Ye.apply(null,arguments)}function Xe(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function H(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?Xe(Object(n),!0).forEach(function(t){Ze(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Xe(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function Ze(e,t,n){return(t=Qe(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Qe(e){var t=$e(e,`string`);return typeof t==`symbol`?t:t+``}function $e(e,t){if(typeof e!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(typeof r!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function et(e){return Array.isArray(e)&&k(e[0])&&k(e[1])?e.join(` ~ `):e}var U={separator:` : `,contentStyle:{margin:0,padding:10,backgroundColor:`#fff`,border:`1px solid #ccc`,whiteSpace:`nowrap`},itemStyle:{display:`block`,paddingTop:4,paddingBottom:4,color:`#000`},labelStyle:{},accessibilityLayer:!1};function tt(e,t){return t==null?e:(0,Je.default)(e,t)}var nt=e=>{var{separator:t=U.separator,contentStyle:n,itemStyle:r,labelStyle:i=U.labelStyle,payload:a,formatter:s,itemSorter:c,wrapperClassName:l,labelClassName:u,label:d,labelFormatter:f,accessibilityLayer:p=U.accessibilityLayer}=e,m=()=>{if(a&&a.length){var e={padding:0,margin:0},n=tt(a,c).map((e,n)=>{if(!e||e.type===`none`)return null;var i=e.formatter||s||et,{value:o,name:c}=e,l=o,u=c;if(i){var d=i(o,c,e,n,a);if(Array.isArray(d))[l,u]=d;else if(d!=null)l=d;else return null}var f=H(H({},U.itemStyle),{},{color:e.color||U.itemStyle.color},r);return B.createElement(`li`,{className:`recharts-tooltip-item`,key:`tooltip-item-${n}`,style:f},k(u)?B.createElement(`span`,{className:`recharts-tooltip-item-name`},u):null,k(u)?B.createElement(`span`,{className:`recharts-tooltip-item-separator`},t):null,B.createElement(`span`,{className:`recharts-tooltip-item-value`},l),B.createElement(`span`,{className:`recharts-tooltip-item-unit`},e.unit||``))});return B.createElement(`ul`,{className:`recharts-tooltip-item-list`,style:e},n)}return null},h=H(H({},U.contentStyle),n),g=H({margin:0},i),_=!x(d),v=_?d:``,y=o(`recharts-default-tooltip`,l),b=o(`recharts-tooltip-label`,u);_&&f&&a!=null&&(v=f(d,a));var S=p?{role:`status`,"aria-live":`assertive`}:{};return B.createElement(`div`,Ye({className:y,style:h},S),B.createElement(`p`,{className:b,style:g},B.isValidElement(v)?v:`${v}`),m())},W=`recharts-tooltip-wrapper`,rt={visibility:`hidden`};function it(e){var{coordinate:t,translateX:n,translateY:r}=e;return o(W,{[`${W}-right`]:j(n)&&t&&j(t.x)&&n>=t.x,[`${W}-left`]:j(n)&&t&&j(t.x)&&n<t.x,[`${W}-bottom`]:j(r)&&t&&j(t.y)&&r>=t.y,[`${W}-top`]:j(r)&&t&&j(t.y)&&r<t.y})}function at(e){var{allowEscapeViewBox:t,coordinate:n,key:r,offset:i,position:a,reverseDirection:o,tooltipDimension:s,viewBox:c,viewBoxDimension:l}=e;if(a&&j(a[r]))return a[r];var u=n[r]-s-(i>0?i:0),d=n[r]+i;if(t[r])return o[r]?u:d;var f=c[r];return f==null?0:o[r]?Math.max(u<f?d:u,f):l==null?0:d+s>f+l?Math.max(u,f):Math.max(d,f)}function ot(e){var{translateX:t,translateY:n,useTranslate3d:r}=e;return{transform:r?`translate3d(${t}px, ${n}px, 0)`:`translate(${t}px, ${n}px)`}}function st(e){var{allowEscapeViewBox:t,coordinate:n,offsetTop:r,offsetLeft:i,position:a,reverseDirection:o,tooltipBox:s,useTranslate3d:c,viewBox:l}=e,u,d,f;return s.height>0&&s.width>0&&n?(d=at({allowEscapeViewBox:t,coordinate:n,key:`x`,offset:i,position:a,reverseDirection:o,tooltipDimension:s.width,viewBox:l,viewBoxDimension:l.width}),f=at({allowEscapeViewBox:t,coordinate:n,key:`y`,offset:r,position:a,reverseDirection:o,tooltipDimension:s.height,viewBox:l,viewBoxDimension:l.height}),u=ot({translateX:d,translateY:f,useTranslate3d:c})):u=rt,{cssProperties:u,cssClasses:it({translateX:d,translateY:f,coordinate:n})}}function ct(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function G(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?ct(Object(n),!0).forEach(function(t){lt(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ct(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function lt(e,t,n){return(t=ut(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function ut(e){var t=dt(e,`string`);return typeof t==`symbol`?t:t+``}function dt(e,t){if(typeof e!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(typeof r!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function ft(e){if(!(e.prefersReducedMotion&&e.isAnimationActive===`auto`)&&e.isAnimationActive&&e.active)return`transform ${e.animationDuration}ms ${e.animationEasing}`}function pt(e){var t=he(),[n,r]=B.useState(()=>({dismissed:!1,dismissedAtCoordinate:{x:0,y:0}}));B.useEffect(()=>{var t=t=>{t.key===`Escape`&&r({dismissed:!0,dismissedAtCoordinate:{x:e.coordinate?.x??0,y:e.coordinate?.y??0}})};return document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`keydown`,t)}},[e.coordinate?.x,e.coordinate?.y]),n.dismissed&&((e.coordinate?.x??0)!==n.dismissedAtCoordinate.x||(e.coordinate?.y??0)!==n.dismissedAtCoordinate.y)&&r(G(G({},n),{},{dismissed:!1}));var{cssClasses:i,cssProperties:a}=st({allowEscapeViewBox:e.allowEscapeViewBox,coordinate:e.coordinate,offsetLeft:typeof e.offset==`number`?e.offset:e.offset.x,offsetTop:typeof e.offset==`number`?e.offset:e.offset.y,position:e.position,reverseDirection:e.reverseDirection,tooltipBox:{height:e.lastBoundingBox.height,width:e.lastBoundingBox.width},useTranslate3d:e.useTranslate3d,viewBox:e.viewBox}),o=G(G({},e.hasPortalFromProps?{}:G(G({transition:ft({prefersReducedMotion:t,isAnimationActive:e.isAnimationActive,active:e.active,animationDuration:e.animationDuration,animationEasing:e.animationEasing})},a),{},{pointerEvents:`none`,position:`absolute`,top:0,left:0})),{},{visibility:!n.dismissed&&e.active&&e.hasPayload?`visible`:`hidden`},e.wrapperStyle);return B.createElement(`div`,{xmlns:`http://www.w3.org/1999/xhtml`,tabIndex:-1,className:i,style:o,ref:e.innerRef},e.children)}var mt=B.memo(pt),ht=[`x`,`y`,`top`,`left`,`width`,`height`,`className`];function gt(){return gt=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},gt.apply(null,arguments)}function _t(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function vt(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?_t(Object(n),!0).forEach(function(t){yt(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):_t(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function yt(e,t,n){return(t=bt(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function bt(e){var t=xt(e,`string`);return typeof t==`symbol`?t:t+``}function xt(e,t){if(typeof e!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(typeof r!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function St(e,t){if(e==null)return{};var n,r,i=Ct(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)===-1&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function Ct(e,t){if(e==null)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.indexOf(r)!==-1)continue;n[r]=e[r]}return n}var wt=(e,t,n,r,i,a)=>`M${e},${i}v${r}M${a},${t}h${n}`,Tt=e=>{var{x:t=0,y:n=0,top:r=0,left:i=0,width:a=0,height:s=0,className:c}=e,l=St(e,ht),u=vt({x:t,y:n,top:r,left:i,width:a,height:s},l);return!j(t)||!j(n)||!j(a)||!j(s)||!j(r)||!j(i)?null:B.createElement(`path`,gt({},E(u),{className:o(`recharts-cross`,c),d:wt(t,n,a,s,r,i)}))};function Et(e,t,n,r){var i=r/2;return{stroke:`none`,fill:`#ccc`,x:e===`horizontal`?t.x-i:n.left+.5,y:e===`horizontal`?n.top+.5:t.y-i,width:e===`horizontal`?r:n.width-1,height:e===`horizontal`?n.height-1:r}}var Dt=[`radius`],Ot=[`radius`],kt,At,jt,Mt,Nt,Pt,Ft,It,Lt,Rt;function zt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function Bt(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?zt(Object(n),!0).forEach(function(t){Vt(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):zt(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function Vt(e,t,n){return(t=Ht(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Ht(e){var t=Ut(e,`string`);return typeof t==`symbol`?t:t+``}function Ut(e,t){if(typeof e!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(typeof r!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function K(){return K=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},K.apply(null,arguments)}function Wt(e,t){if(e==null)return{};var n,r,i=Gt(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)===-1&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function Gt(e,t){if(e==null)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.indexOf(r)!==-1)continue;n[r]=e[r]}return n}function q(e,t){return t||=e.slice(0),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}var Kt=(e,t,n,r,i)=>{var a=C(n),o=C(r),s=Math.min(Math.abs(a)/2,Math.abs(o)/2),c=o>=0?1:-1,l=a>=0?1:-1,u=+(o>=0&&a>=0||o<0&&a<0),d;if(s>0&&Array.isArray(i)){for(var f=[0,0,0,0],p=0,m=4;p<m;p++){var h=i[p]??0;f[p]=h>s?s:h}d=R(kt||=q([`M`,`,`,``]),e,t+c*f[0]),f[0]>0&&(d+=R(At||=q([`A `,`,`,`,0,0,`,`,`,`,`,``]),f[0],f[0],u,e+l*f[0],t)),d+=R(jt||=q([`L `,`,`,``]),e+n-l*f[1],t),f[1]>0&&(d+=R(Mt||=q([`A `,`,`,`,0,0,`,`,
+        `,`,`,``]),f[1],f[1],u,e+n,t+c*f[1])),d+=R(Nt||=q([`L `,`,`,``]),e+n,t+r-c*f[2]),f[2]>0&&(d+=R(Pt||=q([`A `,`,`,`,0,0,`,`,
+        `,`,`,``]),f[2],f[2],u,e+n-l*f[2],t+r)),d+=R(Ft||=q([`L `,`,`,``]),e+l*f[3],t+r),f[3]>0&&(d+=R(It||=q([`A `,`,`,`,0,0,`,`,
+        `,`,`,``]),f[3],f[3],u,e,t+r-c*f[3])),d+=`Z`}else if(s>0&&i===+i&&i>0){var g=Math.min(s,i);d=R(Lt||=q(`M .,.
+            A .,.,0,0,.,.,.
+            L .,.
+            A .,.,0,0,.,.,.
+            L .,.
+            A .,.,0,0,.,.,.
+            L .,.
+            A .,.,0,0,.,.,. Z`.split(`.`)),e,t+c*g,g,g,u,e+l*g,t,e+n-l*g,t,g,g,u,e+n,t+c*g,e+n,t+r-c*g,g,g,u,e+n-l*g,t+r,e+l*g,t+r,g,g,u,e,t+r-c*g)}else d=R(Rt||=q([`M `,`,`,` h `,` v `,` h `,` Z`]),e,t,n,r,-n);return d},qt={x:0,y:0,width:0,height:0,radius:0,isAnimationActive:!1,isUpdateAnimationActive:!1,animationBegin:0,animationDuration:1500,animationEasing:`ease`},Jt=e=>{var t=D(e,qt),n=(0,B.useRef)(null),[r,i]=(0,B.useState)(-1);(0,B.useEffect)(()=>{if(n.current&&n.current.getTotalLength)try{var e=n.current.getTotalLength();e&&i(e)}catch{}},[]);var{x:a,y:s,width:c,height:l,radius:u,className:d}=t,{animationEasing:f,animationDuration:p,animationBegin:m,isAnimationActive:h,isUpdateAnimationActive:g}=t,_=(0,B.useRef)(c),v=(0,B.useRef)(l),y=(0,B.useRef)(a),b=(0,B.useRef)(s),x=_e((0,B.useMemo)(()=>({x:a,y:s,width:c,height:l,radius:u}),[a,s,c,l,u]),`rectangle-`);if(a!==+a||s!==+s||c!==+c||l!==+l||c===0||l===0)return null;var S=o(`recharts-rectangle`,d);if(!g){var w=E(t),{radius:T}=w,ee=Wt(w,Dt);return B.createElement(`path`,K({},ee,{x:C(a),y:C(s),width:C(c),height:C(l),radius:typeof u==`number`?u:void 0,className:S,d:Kt(a,s,c,l,u)}))}var O=_.current,k=v.current,j=y.current,M=b.current,N=`0px ${r===-1?1:r}px`,ne=`${r}px ${r}px`,re=ge([`strokeDasharray`],p,typeof f==`string`?f:qt.animationEasing);return B.createElement(te,{animationId:x,key:x,canBegin:r>0,duration:p,easing:f,isActive:g,begin:m},e=>{var r=A(O,c,e),i=A(k,l,e),o=A(j,a,e),d=A(M,s,e);n.current&&(_.current=r,v.current=i,y.current=o,b.current=d);var f=h?e>0?{transition:re,strokeDasharray:ne}:{strokeDasharray:N}:{strokeDasharray:ne},p=E(t),{radius:m}=p,g=Wt(p,Ot);return B.createElement(`path`,K({},g,{radius:typeof u==`number`?u:void 0,className:S,d:Kt(o,d,r,i,u),ref:n,style:Bt(Bt({},f),t.style)}))})};function Yt(e){var{cx:t,cy:n,radius:r,startAngle:i,endAngle:a}=e;return{points:[z(t,n,r,i),z(t,n,r,a)],cx:t,cy:n,radius:r,startAngle:i,endAngle:a}}var Xt,Zt,Qt,$t,en,tn,nn;function rn(){return rn=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},rn.apply(null,arguments)}function J(e,t){return t||=e.slice(0),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}var an=(e,t)=>b(t-e)*Math.min(Math.abs(t-e),359.999),Y=e=>{var{cx:t,cy:n,radius:r,angle:i,sign:a,isExternal:o,cornerRadius:s,cornerIsExternal:c}=e,l=s*(o?1:-1)+r,u=Math.asin(s/l)/M,d=c?i:i+a*u,f=z(t,n,l,d),p=z(t,n,r,d),m=c?i-a*u:i;return{center:f,circleTangency:p,lineTangency:z(t,n,l*Math.cos(u*M),m),theta:u}},on=e=>{var{cx:t,cy:n,innerRadius:r,outerRadius:i,startAngle:a,endAngle:o}=e,s=an(a,o),c=a+s,l=z(t,n,i,a),u=z(t,n,i,c),d=R(Xt||=J([`M `,`,`,`
+    A `,`,`,`,0,
+    `,`,`,`,
+    `,`,`,`
+  `]),l.x,l.y,i,i,+(Math.abs(s)>180),+(a>c),u.x,u.y);if(r>0){var f=z(t,n,r,a),p=z(t,n,r,c);d+=R(Zt||=J([`L `,`,`,`
+            A `,`,`,`,0,
+            `,`,`,`,
+            `,`,`,` Z`]),p.x,p.y,r,r,+(Math.abs(s)>180),+(a<=c),f.x,f.y)}else d+=R(Qt||=J([`L `,`,`,` Z`]),t,n);return d},sn=e=>{var{cx:t,cy:n,innerRadius:r,outerRadius:i,cornerRadius:a,forceCornerRadius:o,cornerIsExternal:s,startAngle:c,endAngle:l}=e,u=b(l-c),{circleTangency:d,lineTangency:f,theta:p}=Y({cx:t,cy:n,radius:i,angle:c,sign:u,cornerRadius:a,cornerIsExternal:s}),{circleTangency:m,lineTangency:h,theta:g}=Y({cx:t,cy:n,radius:i,angle:l,sign:-u,cornerRadius:a,cornerIsExternal:s}),_=s?Math.abs(c-l):Math.abs(c-l)-p-g;if(_<0)return o?R($t||=J([`M `,`,`,`
+        a`,`,`,`,0,0,1,`,`,0
+        a`,`,`,`,0,0,1,`,`,0
+      `]),f.x,f.y,a,a,a*2,a,a,-a*2):on({cx:t,cy:n,innerRadius:r,outerRadius:i,startAngle:c,endAngle:l});var v=R(en||=J([`M `,`,`,`
+    A`,`,`,`,0,0,`,`,`,`,`,`
+    A`,`,`,`,0,`,`,`,`,`,`,`,`
+    A`,`,`,`,0,0,`,`,`,`,`,`
+  `]),f.x,f.y,a,a,+(u<0),d.x,d.y,i,i,+(_>180),+(u<0),m.x,m.y,a,a,+(u<0),h.x,h.y);if(r>0){var{circleTangency:y,lineTangency:x,theta:S}=Y({cx:t,cy:n,radius:r,angle:c,sign:u,isExternal:!0,cornerRadius:a,cornerIsExternal:s}),{circleTangency:C,lineTangency:w,theta:T}=Y({cx:t,cy:n,radius:r,angle:l,sign:-u,isExternal:!0,cornerRadius:a,cornerIsExternal:s}),E=s?Math.abs(c-l):Math.abs(c-l)-S-T;if(E<0&&a===0)return`${v}L${t},${n}Z`;v+=R(tn||=J([`L`,`,`,`
+      A`,`,`,`,0,0,`,`,`,`,`,`
+      A`,`,`,`,0,`,`,`,`,`,`,`,`
+      A`,`,`,`,0,0,`,`,`,`,`,`Z`]),w.x,w.y,a,a,+(u<0),C.x,C.y,r,r,+(E>180),+(u>0),y.x,y.y,a,a,+(u<0),x.x,x.y)}else v+=R(nn||=J([`L`,`,`,`Z`]),t,n);return v},cn={cx:0,cy:0,innerRadius:0,outerRadius:0,startAngle:0,endAngle:0,cornerRadius:0,forceCornerRadius:!1,cornerIsExternal:!1},ln=e=>{var t=D(e,cn),{cx:n,cy:r,innerRadius:i,outerRadius:a,cornerRadius:s,forceCornerRadius:c,cornerIsExternal:l,startAngle:u,endAngle:d,className:f}=t;if(a<i||u===d)return null;var p=o(`recharts-sector`,f),m=a-i,h=g(s,m,0,!0),_=h>0&&Math.abs(u-d)<360?sn({cx:n,cy:r,innerRadius:i,outerRadius:a,cornerRadius:Math.min(h,m/2),forceCornerRadius:c,cornerIsExternal:l,startAngle:u,endAngle:d}):on({cx:n,cy:r,innerRadius:i,outerRadius:a,startAngle:u,endAngle:d});return B.createElement(`path`,rn({},E(t),{className:p,d:_}))};function un(e,t,n){if(e===`horizontal`)return[{x:t.x,y:n.top},{x:t.x,y:n.top+n.height}];if(e===`vertical`)return[{x:n.left,y:t.y},{x:n.left+n.width,y:t.y}];if(ve(t)){if(e===`centric`){var{cx:r,cy:i,innerRadius:a,outerRadius:o,angle:s}=t,c=z(r,i,a,s),l=z(r,i,o,s);return[{x:c.x,y:c.y},{x:l.x,y:l.y}]}return Yt(t)}}function dn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function fn(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?dn(Object(n),!0).forEach(function(t){pn(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):dn(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function pn(e,t,n){return(t=mn(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function mn(e){var t=hn(e,`string`);return typeof t==`symbol`?t:t+``}function hn(e,t){if(typeof e!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(typeof r!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}var gn=()=>w(ie),_n=()=>{var e=gn(),t=w(P),n=w(re);return I(!e||!n?void 0:fn(fn({},e),{},{scale:n}),t)};function vn(){return vn=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},vn.apply(null,arguments)}function yn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function X(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?yn(Object(n),!0).forEach(function(t){bn(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):yn(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function bn(e,t,n){return(t=xn(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function xn(e){var t=Sn(e,`string`);return typeof t==`symbol`?t:t+``}function Sn(e,t){if(typeof e!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(typeof r!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function Cn(e){var{cursor:t,cursorComp:n,cursorProps:r}=e;return(0,B.isValidElement)(t)?(0,B.cloneElement)(t,r):(0,B.createElement)(n,r)}function wn(e){var{coordinate:t,payload:n,index:r,offset:i,tooltipAxisBandSize:a,layout:s,cursor:c,tooltipEventType:l,chartName:u}=e,d=t,f=n,p=r;if(!c||!d||u!==`ScatterChart`&&l!==`axis`)return null;var h,g,_;if(u===`ScatterChart`)h=d,g=Tt,_=F.cursorLine;else if(u===`BarChart`)h=Et(s,d,i,a),g=Jt,_=F.cursorRectangle;else if(s===`radial`&&ve(d)){var{cx:v,cy:y,radius:b,startAngle:x,endAngle:S}=Yt(d);h={cx:v,cy:y,startAngle:x,endAngle:S,innerRadius:b,outerRadius:b},g=ln,_=F.cursorLine}else h={points:un(s,d,i)},g=ee,_=F.cursorLine;var C=typeof c==`object`&&`className`in c?c.className:void 0,w=X(X(X(X({stroke:`#ccc`,pointerEvents:`none`},i),h),m(c)),{},{payload:f,payloadIndex:p,className:o(`recharts-tooltip-cursor`,C)});return B.createElement(N,{zIndex:e.zIndex??_},B.createElement(Cn,{cursor:c,cursorComp:g,cursorProps:w}))}function Tn(e){var t=_n(),n=y(),r=O(),i=me();return t==null||n==null||r==null||i==null?null:B.createElement(wn,vn({},e,{offset:n,layout:r,tooltipAxisBandSize:t,chartName:i}))}var En=t(i());function Dn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function On(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?Dn(Object(n),!0).forEach(function(t){kn(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Dn(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function kn(e,t,n){return(t=An(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function An(e){var t=jn(e,`string`);return typeof t==`symbol`?t:t+``}function jn(e,t){if(typeof e!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(typeof r!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function Mn(e){return e.dataKey}function Nn(e,t){return B.isValidElement(e)?B.cloneElement(e,t):typeof e==`function`?B.createElement(e,t):B.createElement(nt,t)}var Pn=[],Fn={allowEscapeViewBox:{x:!1,y:!1},animationDuration:400,animationEasing:`ease`,axisId:0,contentStyle:{},cursor:!0,filterNull:!0,includeHidden:!1,isAnimationActive:`auto`,itemSorter:`name`,itemStyle:{},labelStyle:{},offset:10,reverseDirection:{x:!1,y:!1},separator:` : `,trigger:`hover`,useTranslate3d:!1,wrapperStyle:{}};function In(e){var t=D(e,Fn),{active:n,allowEscapeViewBox:r,animationDuration:i,animationEasing:a,content:o,filterNull:s,isAnimationActive:c,offset:l,payloadUniqBy:u,position:d,reverseDirection:f,useTranslate3d:p,wrapperStyle:m,cursor:h,shared:g,trigger:y,defaultIndex:b,portal:x,axisId:S}=t,C=oe(),T=typeof b==`number`?String(b):b;(0,B.useEffect)(()=>{C(ue({shared:g,trigger:y,axisId:S,active:n,defaultIndex:T}))},[C,g,y,S,n,T]);var E=v(),ee=_(),O=ce(g),{activeIndex:k,isActive:A}=w(e=>ne(e,O,y,T))??{},j=w(e=>se(e,O,y,T)),M=w(e=>fe(e,O,y,T)),N=w(e=>le(e,O,y,T)),te=j,re=ae(),P=n??A??!1,[F,ie]=qe([te,P]),I=O===`axis`?M:void 0;de(O,y,N,I,k,P);var L=x??re;if(L==null||E==null||O==null)return null;var R=te??Pn;P||(R=Pn),s&&R.length&&(R=Ke(R.filter(e=>e.value!=null&&(e.hide!==!0||t.includeHidden)),u,Mn));var pe=R.length>0,me=On(On({},t),{},{payload:R,label:I,active:P,activeIndex:k,coordinate:N,accessibilityLayer:ee}),z=B.createElement(mt,{allowEscapeViewBox:r,animationDuration:i,animationEasing:a,isAnimationActive:c,active:P,coordinate:N,hasPayload:pe,offset:l,position:d,reverseDirection:f,useTranslate3d:p,viewBox:E,wrapperStyle:m,lastBoundingBox:F,innerRef:ie,hasPortalFromProps:!!x},Nn(o,me));return B.createElement(B.Fragment,null,(0,En.createPortal)(z,L),P&&B.createElement(Tn,{cursor:h,tooltipEventType:O,coordinate:N,payload:R,index:k}))}var Z=f(),Ln={green:`bg-gradient-to-br from-emerald-600 via-teal-700 to-emerald-800`,purple:`bg-gradient-to-br from-violet-600 via-indigo-700 to-purple-800`,warm:`bg-gradient-to-br from-orange-500 via-rose-600 to-pink-700`,ocean:`bg-gradient-to-br from-sky-600 via-cyan-700 to-blue-800`};function Rn({active:e,payload:t,label:n}){return!e||!t?.length?null:(0,Z.jsxs)(`div`,{className:c(`metric-gradient--component`,`rounded-lg bg-foreground/95 px-3 py-2 shadow-lg backdrop-blur-sm`),children:[!!n&&(0,Z.jsx)(a,{size:`xxs`,className:`text-background/60 mb-1`,children:n}),t.map((e,t)=>(0,Z.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,Z.jsx)(`div`,{className:`size-2 rounded-full`,style:{backgroundColor:e.color??`#fff`},"aria-hidden":`true`}),(0,Z.jsx)(a,{size:`xs`,weight:`semibold`,className:`text-background tabular-nums`,children:typeof e.value==`number`?e.value.toLocaleString():e.value})]},`tt-${t}`))]})}function Q({title:e,value:t,change:n,data:r,theme:i=`green`,subtitle:o,className:l}){let u=`metric-grad-${(0,B.useId)().replaceAll(`:`,``)}`;return(0,Z.jsxs)(`div`,{className:c(`relative overflow-hidden rounded-lg p-5 text-white shadow-sm ring-1 ring-white/10`,Ln[i],l),children:[(0,Z.jsxs)(`div`,{className:`relative flex items-start justify-between gap-3`,children:[(0,Z.jsxs)(`div`,{className:`min-w-0`,children:[(0,Z.jsx)(a,{size:`xs`,weight:`medium`,className:`uppercase tracking-wider text-white/70`,children:e}),!!t&&(0,Z.jsx)(s,{tag:`h3`,className:`mt-1 text-3xl font-bold tabular-nums tracking-tight border-none pb-0 text-white leading-none`,children:t}),!!o&&(0,Z.jsx)(a,{size:`xs`,className:`mt-1 text-white/70`,children:o})]}),!!n&&(0,Z.jsx)(ye,{change:n,trend:n.direction===`up`?`positive`:n.direction===`down`?`negative`:`neutral`,size:`sm`,variant:`badge`,className:`shrink-0 !bg-white/20 !text-white`})]}),(0,Z.jsx)(`div`,{className:`relative -mx-1 mt-3 h-24`,children:(0,Z.jsx)(T,{width:`100%`,height:`100%`,initialDimension:{width:1,height:1},children:(0,Z.jsxs)(pe,{data:r,margin:{top:4,right:0,bottom:0,left:0},children:[(0,Z.jsx)(`defs`,{children:(0,Z.jsxs)(`linearGradient`,{id:u,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,Z.jsx)(`stop`,{offset:`0%`,stopColor:`white`,stopOpacity:.3}),(0,Z.jsx)(`stop`,{offset:`100%`,stopColor:`white`,stopOpacity:0})]})}),(0,Z.jsx)(In,{content:(0,Z.jsx)(Rn,{}),cursor:{stroke:`rgba(255,255,255,0.4)`,strokeWidth:1}}),(0,Z.jsx)(L,{type:`monotone`,dataKey:`value`,stroke:`rgba(255,255,255,0.7)`,strokeWidth:2,fill:`url(#${u})`,dot:!1,activeDot:{r:4,strokeWidth:2,fill:`#fff`,stroke:`rgba(255,255,255,0.7)`},isAnimationActive:!0,animationDuration:800})]})})})]})}Q.displayName=`MetricGradient`;var zn=e({FourThemes:()=>Bn}),$=[{label:`Jan`,value:4200},{label:`Feb`,value:3800},{label:`Mar`,value:5100},{label:`Apr`,value:4600},{label:`May`,value:5800},{label:`Jun`,value:6200},{label:`Jul`,value:5900},{label:`Aug`,value:7100},{label:`Sep`,value:6800},{label:`Oct`,value:7500},{label:`Nov`,value:8200},{label:`Dec`,value:9100}];function Bn(){return(0,Z.jsx)(Z.Fragment,{children:(0,Z.jsxs)(`div`,{className:`grid gap-4 md:grid-cols-2 xl:grid-cols-4`,children:[(0,Z.jsx)(Q,{title:`Growth`,value:`32.4K`,change:{value:`15.2%`,direction:`up`},data:$,theme:`green`,subtitle:`vs last quarter`}),(0,Z.jsx)(Q,{title:`Engagement`,value:`8,940`,change:{value:`4.7%`,direction:`up`},data:$,theme:`purple`,subtitle:`active users`}),(0,Z.jsx)(Q,{title:`Conversions`,value:`4.8%`,change:{value:`0.3%`,direction:`down`},data:$,theme:`warm`,subtitle:`checkout rate`}),(0,Z.jsx)(Q,{title:`Sessions`,value:`124K`,change:{value:`8.1%`,direction:`up`},data:$,theme:`ocean`,subtitle:`last 30 days`})]})})}var Vn=`import { MetricGradient, type MetricDataPoint } from '@/components/composed/analytics';
+
+const data: MetricDataPoint[] = [
+	{ label: 'Jan', value: 4200 }, { label: 'Feb', value: 3800 }, { label: 'Mar', value: 5100 },
+	{ label: 'Apr', value: 4600 }, { label: 'May', value: 5800 }, { label: 'Jun', value: 6200 },
+	{ label: 'Jul', value: 5900 }, { label: 'Aug', value: 7100 }, { label: 'Sep', value: 6800 },
+	{ label: 'Oct', value: 7500 }, { label: 'Nov', value: 8200 }, { label: 'Dec', value: 9100 },
+];
+
+export function FourThemes() {
+	return (
+		<>
+			<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+								<MetricGradient
+									title="Growth"
+									value="32.4K"
+									change={{ value: '15.2%', direction: 'up' }}
+									data={data}
+									theme="green"
+									subtitle="vs last quarter"
+								/>
+								<MetricGradient
+									title="Engagement"
+									value="8,940"
+									change={{ value: '4.7%', direction: 'up' }}
+									data={data}
+									theme="purple"
+									subtitle="active users"
+								/>
+								<MetricGradient
+									title="Conversions"
+									value="4.8%"
+									change={{ value: '0.3%', direction: 'down' }}
+									data={data}
+									theme="warm"
+									subtitle="checkout rate"
+								/>
+								<MetricGradient
+									title="Sessions"
+									value="124K"
+									change={{ value: '8.1%', direction: 'up' }}
+									data={data}
+									theme="ocean"
+									subtitle="last 30 days"
+								/>
+							</div>
+		</>
+	);
+}
+`;function Hn(e){let t={h4:`h4`,...e.components};return zn||Wn(`Examples`,!1),Bn||Wn(`Examples.FourThemes`,!0),(0,Z.jsxs)(l,{title:`Features · Metrics · Analytics cards`,description:"`MetricGradient` — vivid gradient hero card with embedded area chart. Pick a `theme` to drive the colour palette.",layer:`features`,status:`ready`,children:[(0,Z.jsx)(u,{title:`Examples`,id:`examples`,children:(0,Z.jsx)(d,{name:`FourThemes`,source:Vn,children:(0,Z.jsx)(Bn,{})})}),(0,Z.jsxs)(u,{title:`API`,id:`api`,children:[(0,Z.jsx)(t.h4,{children:`MetricGradient`}),(0,Z.jsx)(p,{component:`MetricGradient`})]})]})}function Un(e={}){let{wrapper:t}=e.components||{};return t?(0,Z.jsx)(t,{...e,children:(0,Z.jsx)(Hn,{...e})}):Hn(e)}function Wn(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Un as default};

package/dist/showcase/assets/metrics-comparison-C0SUjdMg.js

@@ -0,0 +1,76 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Cr as t,Sr as n,Tr as r,hr as i,mr as a,t as o}from"./example-C6-_Sy6B.js";import{t as s}from"./arrow-down-BpVaq9-H.js";import{t as c}from"./arrow-right-BclouSfP.js";import{t as l}from"./arrow-up-BpWEnkdX.js";import{D as u,a as d,r as f}from"./index-B8DVXCmf.js";import{t as p}from"./props-table-CM_1cocj.js";import{t as m}from"./smart-card-7szg_qSt.js";import{t as h}from"./format-metric-value-B94EDo8X.js";var g=f(`equal`,[[`line`,{x1:`5`,x2:`19`,y1:`9`,y2:`9`,key:`1nwqeh`}],[`line`,{x1:`5`,x2:`19`,y1:`15`,y2:`15`,key:`g8yjpy`}]]),_=d(),v={title:`Comparison`,currentLabel:`This period`,previousLabel:`Previous period`,suffix:`vs previous`};function y(e){if(e==null)return null;if(typeof e==`number`)return e;let t=Number(e);return Number.isFinite(t)?t:null}function b({current:e,previous:i,title:a,currentPeriod:o,previousPeriod:d,className:f,strings:p}){let b=u(v,{...a?{title:a}:{},...p}),x=y(e.value),S=y(i.value),C=x!==null&&S!==null,w=C?x-S:0,T=C&&S!==0?Math.round(w/S*100):0,E=w>0,D=w===0,O=D?g:E?l:s,k=D?{box:`bg-muted/40`,chip:`bg-card text-muted-foreground border border-border/60`}:E?{box:`bg-success/10`,chip:`bg-success/15 text-success`}:{box:`bg-destructive/10`,chip:`bg-destructive/15 text-destructive`};return(0,_.jsxs)(m,{title:b.title,className:r(`metric-comparison--component`,f),children:[!!(o||d)&&(0,_.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[!!o&&(0,_.jsx)(t,{tag:`span`,size:`xxs`,weight:`medium`,className:`rounded-full bg-muted px-2 py-0.5 uppercase tracking-wider text-muted-foreground`,children:o}),!!d&&(0,_.jsx)(t,{tag:`span`,size:`xxs`,weight:`medium`,className:`rounded-full bg-muted/40 px-2 py-0.5 uppercase tracking-wider text-muted-foreground/70`,children:d})]}),(0,_.jsxs)(`div`,{className:`mt-3 grid items-stretch gap-2 grid-cols-1 sm:grid-cols-[1fr_auto_1fr]`,children:[(0,_.jsxs)(`div`,{className:`rounded-lg border border-border/60 bg-card px-3 py-2.5`,children:[(0,_.jsx)(t,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:b.currentLabel}),(0,_.jsx)(n,{tag:`h5`,className:`text-xl tabular-nums tracking-tight border-none pb-0`,children:h(e)})]}),(0,_.jsxs)(`div`,{className:`flex items-center justify-center text-muted-foreground/60`,children:[(0,_.jsx)(c,{className:`hidden size-4 sm:block`,"aria-hidden":`true`}),(0,_.jsx)(s,{className:`size-4 sm:hidden`,"aria-hidden":`true`})]}),(0,_.jsxs)(`div`,{className:`rounded-lg bg-muted/40 px-3 py-2.5`,children:[(0,_.jsx)(t,{size:`xxs`,weight:`medium`,className:`uppercase tracking-wider text-muted-foreground/70`,children:b.previousLabel}),(0,_.jsx)(n,{tag:`h5`,className:`text-xl tabular-nums tracking-tight border-none pb-0 text-muted-foreground`,children:h(i)})]})]}),!!C&&(0,_.jsxs)(`div`,{className:r(`mt-3 flex flex-wrap items-center gap-2 rounded-lg px-3 py-2`,k.box),children:[(0,_.jsxs)(`div`,{className:r(`inline-flex items-center gap-1 rounded-full px-2 py-0.5`,k.chip),children:[(0,_.jsx)(O,{className:`size-3`,strokeWidth:2.5,"aria-hidden":`true`}),(0,_.jsxs)(t,{tag:`span`,size:`xs`,weight:`semibold`,className:`tabular-nums`,children:[E?`+`:D?``:`−`,(t=>{let n=Math.abs(t);return h({...e,value:n})})(w)]})]}),(0,_.jsxs)(t,{size:`xs`,type:`secondary`,className:`tabular-nums`,children:[E?`+`:D?``:`−`,Math.abs(T),`% `,b.suffix]})]})]})}b.displayName=`MetricComparison`;var x=e({Default:()=>E,FlatNoChange:()=>k,PercentageValues:()=>O,WithCurrencyOverrideEUR:()=>D}),S={current:{id:`cur`,label:`Current`,value:48250,valueType:`currency`,currency:`USD`},previous:{id:`prev`,label:`Previous`,value:41800,valueType:`currency`,currency:`USD`}},C={current:{id:`cur`,label:`Current`,value:148500,valueType:`currency`,currency:`EUR`},previous:{id:`prev`,label:`Previous`,value:132100,valueType:`currency`,currency:`EUR`}},w={current:{id:`cur`,label:`Current`,value:.082,valueType:`percentage`},previous:{id:`prev`,label:`Previous`,value:.094,valueType:`percentage`}},T={current:{id:`cur`,label:`Current`,value:1240,valueType:`number`},previous:{id:`prev`,label:`Previous`,value:1240,valueType:`number`}};function E(){return(0,_.jsx)(_.Fragment,{children:(0,_.jsx)(b,{title:`Monthly Revenue`,current:S.current,previous:S.previous,currentPeriod:`Mar 2026`,previousPeriod:`Feb 2026`})})}function D(){return(0,_.jsx)(_.Fragment,{children:(0,_.jsx)(b,{title:`Quarterly Revenue`,current:C.current,previous:C.previous,currentPeriod:`Q1 2026`,previousPeriod:`Q4 2025`})})}function O(){return(0,_.jsx)(_.Fragment,{children:(0,_.jsx)(b,{title:`Conversion rate`,current:w.current,previous:w.previous,currentPeriod:`This week`,previousPeriod:`Last week`})})}function k(){return(0,_.jsx)(_.Fragment,{children:(0,_.jsx)(b,{title:`Active sessions`,current:T.current,previous:T.previous})})}var A=`import { MetricComparison, type MetricData } from '@/components/composed/analytics';
+
+const monthly: { current: MetricData; previous: MetricData } = {
+	current: { id: 'cur', label: 'Current', value: 48250, valueType: 'currency', currency: 'USD' },
+	previous: { id: 'prev', label: 'Previous', value: 41800, valueType: 'currency', currency: 'USD' },
+};
+
+const quarterly: { current: MetricData; previous: MetricData } = {
+	current: { id: 'cur', label: 'Current', value: 148500, valueType: 'currency', currency: 'EUR' },
+	previous: { id: 'prev', label: 'Previous', value: 132100, valueType: 'currency', currency: 'EUR' },
+};
+
+const conversion: { current: MetricData; previous: MetricData } = {
+	current: { id: 'cur', label: 'Current', value: 0.082, valueType: 'percentage' },
+	previous: { id: 'prev', label: 'Previous', value: 0.094, valueType: 'percentage' },
+};
+
+const flat: { current: MetricData; previous: MetricData } = {
+	current: { id: 'cur', label: 'Current', value: 1240, valueType: 'number' },
+	previous: { id: 'prev', label: 'Previous', value: 1240, valueType: 'number' },
+};
+
+export function Default() {
+	return (
+		<>
+			<MetricComparison
+								title="Monthly Revenue"
+								current={monthly.current}
+								previous={monthly.previous}
+								currentPeriod="Mar 2026"
+								previousPeriod="Feb 2026"
+							/>
+		</>
+	);
+}
+
+export function WithCurrencyOverrideEUR() {
+	return (
+		<>
+			<MetricComparison
+								title="Quarterly Revenue"
+								current={quarterly.current}
+								previous={quarterly.previous}
+								currentPeriod="Q1 2026"
+								previousPeriod="Q4 2025"
+							/>
+		</>
+	);
+}
+
+export function PercentageValues() {
+	return (
+		<>
+			<MetricComparison
+								title="Conversion rate"
+								current={conversion.current}
+								previous={conversion.previous}
+								currentPeriod="This week"
+								previousPeriod="Last week"
+							/>
+		</>
+	);
+}
+
+export function FlatNoChange() {
+	return (
+		<>
+			<MetricComparison
+								title="Active sessions"
+								current={flat.current}
+								previous={flat.previous}
+							/>
+		</>
+	);
+}
+`;function j(e){let t={h4:`h4`,...e.components};return x||N(`Examples`,!1),E||N(`Examples.Default`,!0),k||N(`Examples.FlatNoChange`,!0),O||N(`Examples.PercentageValues`,!0),D||N(`Examples.WithCurrencyOverrideEUR`,!0),(0,_.jsxs)(i,{title:`Features · Metrics · Comparison`,description:"`MetricComparison` — side-by-side current vs previous with a tone-tinted delta box. Reuses the unified `MetricData` shape so currency/percent formatting carries through.",layer:`features`,status:`ready`,children:[(0,_.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,_.jsx)(o,{name:`Default`,source:A,children:(0,_.jsx)(E,{})}),(0,_.jsx)(o,{name:`WithCurrencyOverrideEUR`,source:A,children:(0,_.jsx)(D,{})}),(0,_.jsx)(o,{name:`PercentageValues`,source:A,children:(0,_.jsx)(O,{})}),(0,_.jsx)(o,{name:`FlatNoChange`,source:A,children:(0,_.jsx)(k,{})})]}),(0,_.jsxs)(a,{title:`API`,id:`api`,children:[(0,_.jsx)(t.h4,{children:`MetricComparison`}),(0,_.jsx)(p,{component:`MetricComparison`})]})]})}function M(e={}){let{wrapper:t}=e.components||{};return t?(0,_.jsx)(t,{...e,children:(0,_.jsx)(j,{...e})}):j(e)}function N(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{M as default};

package/dist/showcase/assets/metrics-heatmap-Orq1hLk-.js

@@ -0,0 +1,27 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Cr as t,Tr as n,hr as r,mr as i,t as a}from"./example-C6-_Sy6B.js";import{D as o,a as s}from"./index-B8DVXCmf.js";import{t as c}from"./props-table-CM_1cocj.js";import{t as l}from"./smart-card-7szg_qSt.js";import{t as u}from"./analytics.strings-B9262Jmq.js";var d=s(),f={0:`bg-muted`,1:`bg-success/20`,2:`bg-success/40`,3:`bg-success/65`,4:`bg-success`};function p(e,t){if(e.length===0)return{weeks:[],monthLabels:[]};let n=[...e].sort((e,t)=>e.date.localeCompare(t.date)),r=new Date(n[0].date+`T00:00:00`),i=new Date(n[n.length-1].date+`T00:00:00`),a=r.getDay(),o=a===0?-6:1-a,s=new Date(r);s.setDate(s.getDate()+o);let c=new Map;for(let e of n)c.set(e.date,e.level);let l=[],u=[],d=-1,f=[],p=new Date(s);for(;p<=i;){let e=p.toISOString().slice(0,10),n=(p.getDay()+6)%7;n===0&&f.length>0&&(l.push(f),f=[]);let r=p.getMonth();if(r!==d){let e=n===0?l.length:l.length+1;u.find(t=>t.weekIndex===e)||u.push({label:t[r],weekIndex:e}),d=r}let i=c.get(e)??0;f.push({date:e,level:i}),p.setDate(p.getDate()+1)}if(f.length>0){for(;f.length<7;)f.push(null);l.push(f)}return{weeks:l,monthLabels:u}}function m({title:e,description:r,data:i,className:a,strings:s}){let c=o(u,s),{weeks:m,monthLabels:h}=p(i,c.heatmapMonthNames);return(0,d.jsxs)(l,{title:e,description:r,className:n(`activity-heatmap--component`,a),children:[(0,d.jsxs)(`div`,{className:`overflow-x-auto`,children:[(0,d.jsx)(`div`,{className:`relative mb-1`,style:{paddingLeft:`28px`,height:`12px`},children:(0,d.jsx)(`div`,{className:`relative flex`,style:{width:`${m.length*15}px`},children:h.filter((e,t,n)=>t===0||e.weekIndex-n[t-1].weekIndex>=3).map(e=>(0,d.jsx)(t,{size:`xxs`,type:`secondary`,className:`absolute leading-none whitespace-nowrap`,style:{left:`${e.weekIndex*15}px`,top:0},children:e.label},`${e.label}-${e.weekIndex}`))})}),(0,d.jsxs)(`div`,{className:`flex gap-0`,children:[(0,d.jsx)(`div`,{className:`mr-1 flex flex-col gap-[3px]`,children:c.heatmapDayLabels.map((e,n)=>(0,d.jsx)(`div`,{className:`flex h-3 w-6 items-center justify-end`,children:!!e&&(0,d.jsx)(t,{size:`xxs`,type:`secondary`,className:`leading-none`,children:e})},`day-${n}`))}),(0,d.jsx)(`div`,{className:`flex gap-[3px]`,children:m.map((e,t)=>(0,d.jsx)(`div`,{className:`flex flex-col gap-[3px]`,children:e.map((e,r)=>{let i=e?`${e.date}: Level ${e.level}`:void 0;return(0,d.jsx)(`div`,{className:n(`size-3 rounded-sm`,e?f[e.level]:`bg-transparent`),title:i},`d-${t}-${r}`)})},`w-${t}`))})]})]}),(0,d.jsxs)(`div`,{className:`mt-4 flex items-center justify-end gap-1.5`,children:[(0,d.jsx)(t,{size:`xxs`,type:`secondary`,children:c.heatmapLegendLess}),[0,1,2,3,4].map(e=>(0,d.jsx)(`div`,{className:n(`size-3 rounded-sm`,f[e])},`legend-${e}`)),(0,d.jsx)(t,{size:`xxs`,type:`secondary`,children:c.heatmapLegendMore})]})]})}m.displayName=`ActivityHeatmap`;var h=e({OrderActivity:()=>v});function g(){let e=[],t=new Date;for(let n=89;n>=0;n--){let r=new Date(t);r.setDate(r.getDate()-n);let i=Math.random(),a=i<.15?0:i<.35?1:i<.6?2:i<.8?3:4;e.push({date:r.toISOString().slice(0,10),level:a})}return e}var _=g();function v(){return(0,d.jsx)(d.Fragment,{children:(0,d.jsx)(`div`,{className:`max-w-2xl`,children:(0,d.jsx)(m,{title:`Order Activity`,description:`Last 90 days`,data:_})})})}var y=`import { ActivityHeatmap, type ActivityHeatmapDay } from '@/components/composed/analytics';
+
+function generate(): ActivityHeatmapDay[] {
+	const days: ActivityHeatmapDay[] = [];
+	const now = new Date();
+	for (let i = 89; i >= 0; i--) {
+		const d = new Date(now);
+		d.setDate(d.getDate() - i);
+		const r = Math.random();
+		const level: 0 | 1 | 2 | 3 | 4 = r < 0.15 ? 0 : r < 0.35 ? 1 : r < 0.6 ? 2 : r < 0.8 ? 3 : 4;
+		days.push({ date: d.toISOString().slice(0, 10), level });
+	}
+	return days;
+}
+
+const data = generate();
+
+export function OrderActivity() {
+	return (
+		<>
+			<div className="max-w-2xl">
+								<ActivityHeatmap title="Order Activity" description="Last 90 days" data={data} />
+							</div>
+		</>
+	);
+}
+`;function b(e){let t={h4:`h4`,...e.components};return h||S(`Examples`,!1),v||S(`Examples.OrderActivity`,!0),(0,d.jsxs)(r,{title:`Features · Metrics · Activity heatmap`,description:"`ActivityHeatmap` — GitHub-style daily-activity calendar with success-tinted intensity cells.",layer:`features`,status:`ready`,children:[(0,d.jsx)(i,{title:`Examples`,id:`examples`,children:(0,d.jsx)(a,{name:`OrderActivity`,source:y,children:(0,d.jsx)(v,{})})}),(0,d.jsxs)(i,{title:`API`,id:`api`,children:[(0,d.jsx)(t.h4,{children:`ActivityHeatmap`}),(0,d.jsx)(c,{component:`ActivityHeatmap`})]})]})}function x(e={}){let{wrapper:t}=e.components||{};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(b,{...e})}):b(e)}function S(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{x as default};

package/dist/showcase/assets/metrics-inline-badge-C924q2Xx.js

@@ -0,0 +1,17 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Cr as t,Tr as n,hr as r,mr as i,t as a}from"./example-C6-_Sy6B.js";import{a as o}from"./index-B8DVXCmf.js";import{t as s}from"./props-table-CM_1cocj.js";var c=o(),l={sm:`gap-1 rounded-full px-2 py-0.5`,md:`gap-1.5 rounded-full px-2.5 py-1`,base:`gap-1.5 rounded-full px-2.5 py-1`,lg:`gap-1.5 rounded-full px-3 py-1`},u={sm:`xxs`,md:`xxs`,base:`xxs`,lg:`xs`},d={sm:`xxs`,md:`xs`,base:`xs`,lg:`xs`},f={sm:`xxs`,md:`xxs`,base:`xxs`,lg:`xxs`};function p({metrics:e,className:r}){return(0,c.jsx)(`div`,{className:n(`inline-metric--component`,`flex flex-wrap gap-1.5`,r),children:e.map(e=>{let r=e.size??`base`;return(0,c.jsxs)(`span`,{className:n(`inline-flex items-center bg-card ring-1 ring-border/60`,l[r]??l.base),children:[(0,c.jsx)(t,{tag:`span`,size:u[r]??`xxs`,type:`secondary`,children:e.label}),(0,c.jsx)(t,{tag:`span`,size:d[r]??`xs`,weight:`semibold`,className:`tabular-nums`,children:e.value}),(0,c.jsxs)(t,{tag:`span`,size:f[r]??`xxs`,weight:`medium`,className:n(`tabular-nums inline-flex items-center gap-0.5 rounded-full px-1`,e.up?`bg-success/15 text-success`:`bg-destructive/15 text-destructive`),children:[e.up?`↑`:`↓`,e.change]})]},e.label)})})}p.displayName=`InlineMetricBadge`;var m=e({MixedSizesDirections:()=>h});function h(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(p,{metrics:[{label:`Revenue`,value:`52.3K`,change:`+12%`,up:!0,size:`md`},{label:`Orders`,value:`1,284`,change:`+8%`,up:!0,size:`md`},{label:`Returns`,value:`23`,change:`-5%`,up:!1,size:`sm`},{label:`AOV`,value:`351 USD`,change:`+3%`,up:!0,size:`lg`}]})})}var g=`import { InlineMetricBadge } from '@/components/composed/data-display/inline-metric';
+
+export function MixedSizesDirections() {
+	return (
+		<>
+			<InlineMetricBadge
+								metrics={[
+									{ label: 'Revenue', value: '52.3K', change: '+12%', up: true, size: 'md' },
+									{ label: 'Orders', value: '1,284', change: '+8%', up: true, size: 'md' },
+									{ label: 'Returns', value: '23', change: '-5%', up: false, size: 'sm' },
+									{ label: 'AOV', value: '351 USD', change: '+3%', up: true, size: 'lg' },
+								]}
+							/>
+		</>
+	);
+}
+`;function _(e){let t={h4:`h4`,...e.components};return m||y(`Examples`,!1),h||y(`Examples.MixedSizesDirections`,!0),(0,c.jsxs)(r,{title:`Features · Metrics · Inline badge`,description:"`InlineMetricBadge` — compact `label · value · change%` pill rows. Use as in-flow copy where a full Metric tile is too heavy.",layer:`features`,status:`ready`,children:[(0,c.jsx)(i,{title:`Examples`,id:`examples`,children:(0,c.jsx)(a,{name:`MixedSizesDirections`,source:g,children:(0,c.jsx)(h,{})})}),(0,c.jsxs)(i,{title:`API`,id:`api`,children:[(0,c.jsx)(t.h4,{children:`InlineMetricBadge`}),(0,c.jsx)(s,{component:`InlineMetricBadge`})]})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(_,{...e})}):_(e)}function y(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{v as default};

package/dist/showcase/assets/metrics-kpi-row-Cwi05ruK.js

@@ -0,0 +1,31 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Cr as t,Tr as n,hr as r,mr as i,t as a}from"./example-C6-_Sy6B.js";import{a as o}from"./index-B8DVXCmf.js";import{t as s}from"./props-table-CM_1cocj.js";var c=o(),l=`ring-1 ring-border/50 shadow-sm`;function u({kpis:e,className:r}){return(0,c.jsx)(`div`,{className:n(`mini-kpi--component`,`inline-flex items-center divide-x divide-border/50 rounded-xl bg-card px-2 py-2`,l,r),children:e.map(e=>(0,c.jsxs)(`div`,{className:`flex flex-col items-center px-4`,children:[(0,c.jsx)(t,{weight:`bold`,className:`tabular-nums`,children:e.value}),(0,c.jsx)(t,{size:`xs`,type:`secondary`,className:`text-xxs`,children:e.label})]},e.label))})}u.displayName=`MiniKpiRow`;var d=e({Example3KPIs:()=>p,Example4KPIs:()=>f});function f(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(u,{kpis:[{value:`2,847`,label:`Orders`},{value:`142K`,label:`Revenue`},{value:`94.2%`,label:`Fulfillment`},{value:`4.8`,label:`Rating`}]})})}function p(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(u,{kpis:[{value:`128`,label:`Active`},{value:`24`,label:`Pending`},{value:`7`,label:`Overdue`}]})})}var m=`import { MiniKpiRow } from '@/components/composed/data-display/mini-kpi';
+
+export function Example4KPIs() {
+	return (
+		<>
+			<MiniKpiRow
+								kpis={[
+									{ value: '2,847', label: 'Orders' },
+									{ value: '142K', label: 'Revenue' },
+									{ value: '94.2%', label: 'Fulfillment' },
+									{ value: '4.8', label: 'Rating' },
+								]}
+							/>
+		</>
+	);
+}
+
+export function Example3KPIs() {
+	return (
+		<>
+			<MiniKpiRow
+								kpis={[
+									{ value: '128', label: 'Active' },
+									{ value: '24', label: 'Pending' },
+									{ value: '7', label: 'Overdue' },
+								]}
+							/>
+		</>
+	);
+}
+`;function h(e){let t={h4:`h4`,...e.components};return d||_(`Examples`,!1),p||_(`Examples.Example3KPIs`,!0),f||_(`Examples.Example4KPIs`,!0),(0,c.jsxs)(r,{title:`Features · Metrics · KPI row`,description:"`MiniKpiRow` — compact horizontal divider-separated KPI strip for header / footer accents.",layer:`features`,status:`ready`,children:[(0,c.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,c.jsx)(a,{name:`Example4KPIs`,source:m,children:(0,c.jsx)(f,{})}),(0,c.jsx)(a,{name:`Example3KPIs`,source:m,children:(0,c.jsx)(p,{})})]}),(0,c.jsxs)(i,{title:`API`,id:`api`,children:[(0,c.jsx)(t.h4,{children:`MiniKpiRow`}),(0,c.jsx)(s,{component:`MiniKpiRow`})]})]})}function g(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(h,{...e})}):h(e)}function _(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{g as default};

package/dist/showcase/assets/metrics-micro-grid-D97nkrge.js

@@ -0,0 +1,42 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Cr as r,Tr as i,hr as a,mr as o,t as s}from"./example-C6-_Sy6B.js";import{a as c}from"./index-B8DVXCmf.js";import{t as l}from"./props-table-CM_1cocj.js";import{t as u}from"./smart-card-7szg_qSt.js";import{O as d,n as f,t as p}from"./AreaChart-CzBEYPbz.js";var m=t(n(),1),h=c(),g=[`bars`,`line`,`dots`,`progress`,`area`,`pie`],_={bars:`var(--primary)`,line:`var(--info)`,dots:`var(--warning)`,progress:`var(--success)`,area:`var(--primary)`,pie:`var(--success)`},v=[`var(--success)`,`var(--info)`,`var(--warning)`];function y({data:e,color:t}){let n=Math.max(...e,1);return(0,h.jsx)(`div`,{className:i(`metric-micro-grid--component`,`flex h-5 items-end gap-[2px]`),children:e.slice(0,6).map((e,r)=>(0,h.jsx)(`div`,{className:`flex-1 rounded-t-sm`,style:{height:`${e/n*100}%`,backgroundColor:t,opacity:.8}},`bar-${r}`))})}function b({data:e,color:t}){let n=Math.max(...e,1),r=Math.min(...e),i=n-r||1,a=e.slice(0,6);return(0,h.jsx)(`svg`,{viewBox:`0 0 60 16`,className:`h-5 w-full`,preserveAspectRatio:`none`,children:(0,h.jsx)(`polyline`,{fill:`none`,stroke:t,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`,points:a.map((e,t)=>`${t/Math.max(a.length-1,1)*60},${16-(e-r)/i*14}`).join(` `)})})}function x({data:e,color:t}){let n=Math.max(...e,1);return(0,h.jsx)(`div`,{className:`flex h-5 items-end justify-around`,children:e.slice(0,5).map((e,r)=>(0,h.jsx)(`div`,{className:`h-1.5 w-1.5 rounded-full`,style:{marginBottom:`${e/n*12}px`,backgroundColor:t}},`dot-${r}`))})}function S({data:e,color:t}){let n=e[0]??0,r=e[1]??100;return(0,h.jsx)(`div`,{className:`h-1.5 w-full overflow-hidden rounded-full bg-muted`,children:(0,h.jsx)(`div`,{className:`h-full rounded-full transition-all`,style:{width:`${Math.min(n/r*100,100)}%`,backgroundColor:t}})})}function C({data:e,color:t}){let n=`micro-area-${(0,m.useId)().replaceAll(`:`,``)}`;return(0,h.jsx)(`div`,{className:`h-5 w-full`,children:(0,h.jsx)(d,{width:`100%`,height:`100%`,initialDimension:{width:1,height:1},children:(0,h.jsxs)(p,{data:e.map((e,t)=>({i:t,v:e})),margin:{top:0,right:0,bottom:0,left:0},children:[(0,h.jsx)(`defs`,{children:(0,h.jsxs)(`linearGradient`,{id:n,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,h.jsx)(`stop`,{offset:`0%`,stopColor:t,stopOpacity:.3}),(0,h.jsx)(`stop`,{offset:`100%`,stopColor:t,stopOpacity:0})]})}),(0,h.jsx)(f,{type:`monotone`,dataKey:`v`,stroke:t,strokeWidth:1.25,fill:`url(#${n})`})]})})})}function w({data:e}){let t=e.reduce((e,t)=>e+t,0)||1,n=0;return(0,h.jsx)(`svg`,{viewBox:`0 0 24 24`,className:`h-6 w-6`,children:e.slice(0,3).map((e,r)=>{let i=e/t*360,a=n;n+=i;let o=(a-90)*Math.PI/180,s=(a+i-90)*Math.PI/180,c=+(i>180);return(0,h.jsx)(`path`,{d:`M12,12 L${12+10*Math.cos(o)},${12+10*Math.sin(o)} A10,10 0 ${c},1 ${12+10*Math.cos(s)},${12+10*Math.sin(s)} Z`,fill:v[r%v.length]},`slice-${r}`)})})}function T({kind:e,data:t}){let n=_[e];return e===`bars`?(0,h.jsx)(y,{data:t,color:n}):e===`line`?(0,h.jsx)(b,{data:t,color:n}):e===`dots`?(0,h.jsx)(x,{data:t,color:n}):e===`progress`?(0,h.jsx)(S,{data:t,color:n}):e===`area`?(0,h.jsx)(C,{data:t,color:n}):(0,h.jsx)(w,{data:t})}function E({title:e=`Overview`,cells:t,className:n}){return(0,h.jsx)(u,{title:e,className:n,padding:`sm`,children:(0,h.jsx)(`div`,{className:`grid grid-cols-3 grid-rows-2 -m-2`,children:t.slice(0,6).map((e,t)=>(0,h.jsxs)(`div`,{className:i(`flex flex-col gap-1.5 px-3 py-2.5`,t%3!=2&&`border-r border-border/50`,t<3&&`border-b border-border/50`),children:[(0,h.jsx)(r,{size:`xxs`,type:`secondary`,className:`truncate uppercase tracking-wider`,children:e.label}),(0,h.jsx)(r,{tag:`span`,weight:`bold`,className:`tabular-nums truncate`,children:e.value}),(0,h.jsx)(`div`,{className:`mt-auto`,children:(0,h.jsx)(T,{kind:e.chart??g[t],data:e.data})})]},e.id??e.label))})})}E.displayName=`MetricMicroGrid`;var D=e({DefaultAutoAssignedCharts:()=>O,PinnedChartKinds:()=>k});function O(){return(0,h.jsx)(h.Fragment,{children:(0,h.jsx)(`div`,{className:`max-w-lg`,children:(0,h.jsx)(E,{title:`Overview`,cells:[{label:`Revenue`,value:`87.4K`,data:[42,55,60,65,75]},{label:`Orders`,value:`1,284`,data:[80,85,90,100,110,105]},{label:`Avg Value`,value:`68.1`,data:[58,62,64,68]},{label:`Vouchers`,value:`73%`,data:[73,100]},{label:`Growth`,value:`+12%`,data:[42,48,55,52,60,58,65,70,75]},{label:`Channels`,value:`3`,data:[520,186,94]}]})})})}function k(){return(0,h.jsx)(h.Fragment,{children:(0,h.jsx)(`div`,{className:`max-w-lg`,children:(0,h.jsx)(E,{title:`Force per-cell chart`,cells:[{label:`Sessions`,value:`1.2M`,data:[200,210,240,260,290,320],chart:`area`},{label:`Users`,value:`24K`,data:[80,85,90,100,110,105],chart:`line`},{label:`Bounce`,value:`32%`,data:[32,100],chart:`progress`},{label:`Pages`,value:`4.2`,data:[3.8,4,4.1,4.2,4.3],chart:`bars`},{label:`Devices`,value:`3`,data:[520,186,94],chart:`pie`},{label:`Sources`,value:`8`,data:[4,6,5,7,8],chart:`dots`}]})})})}var A=`import { MetricMicroGrid } from '@/components/composed/analytics';
+
+export function DefaultAutoAssignedCharts() {
+	return (
+		<>
+			<div className="max-w-lg">
+								<MetricMicroGrid
+									title="Overview"
+									cells={[
+										{ label: 'Revenue', value: '87.4K', data: [42, 55, 60, 65, 75] },
+										{ label: 'Orders', value: '1,284', data: [80, 85, 90, 100, 110, 105] },
+										{ label: 'Avg Value', value: '68.1', data: [58, 62, 64, 68] },
+										{ label: 'Vouchers', value: '73%', data: [73, 100] },
+										{ label: 'Growth', value: '+12%', data: [42, 48, 55, 52, 60, 58, 65, 70, 75] },
+										{ label: 'Channels', value: '3', data: [520, 186, 94] },
+									]}
+								/>
+							</div>
+		</>
+	);
+}
+
+export function PinnedChartKinds() {
+	return (
+		<>
+			<div className="max-w-lg">
+								<MetricMicroGrid
+									title="Force per-cell chart"
+									cells={[
+										{ label: 'Sessions', value: '1.2M', data: [200, 210, 240, 260, 290, 320], chart: 'area' },
+										{ label: 'Users', value: '24K', data: [80, 85, 90, 100, 110, 105], chart: 'line' },
+										{ label: 'Bounce', value: '32%', data: [32, 100], chart: 'progress' },
+										{ label: 'Pages', value: '4.2', data: [3.8, 4.0, 4.1, 4.2, 4.3], chart: 'bars' },
+										{ label: 'Devices', value: '3', data: [520, 186, 94], chart: 'pie' },
+										{ label: 'Sources', value: '8', data: [4, 6, 5, 7, 8], chart: 'dots' },
+									]}
+								/>
+							</div>
+		</>
+	);
+}
+`;function j(e){let t={h4:`h4`,...e.components};return D||N(`Examples`,!1),O||N(`Examples.DefaultAutoAssignedCharts`,!0),k||N(`Examples.PinnedChartKinds`,!0),(0,h.jsxs)(a,{title:`Features · Metrics · Micro chart grid`,description:"`MetricMicroGrid` — six-cell dense overview pairing each KPI with a different lightweight visualization (bars / line / dots / progress / area / pie).",layer:`features`,status:`ready`,children:[(0,h.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,h.jsx)(s,{name:`DefaultAutoAssignedCharts`,source:A,children:(0,h.jsx)(O,{})}),(0,h.jsx)(s,{name:`PinnedChartKinds`,source:A,children:(0,h.jsx)(k,{})})]}),(0,h.jsxs)(o,{title:`API`,id:`api`,children:[(0,h.jsx)(t.h4,{children:`MetricMicroGrid`}),(0,h.jsx)(l,{component:`MetricMicroGrid`})]})]})}function M(e={}){let{wrapper:t}=e.components||{};return t?(0,h.jsx)(t,{...e,children:(0,h.jsx)(j,{...e})}):j(e)}function N(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{M as default};

package/dist/showcase/assets/metrics-overview-BOc8y3QX.js

@@ -0,0 +1,192 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Cr as t,hr as n,mr as r,t as i}from"./example-C6-_Sy6B.js";import{t as a}from"./dollar-sign-BipUTVXC.js";import{t as o}from"./shopping-bag-EDVpxI9n.js";import{t as s}from"./trending-up-BCzmjYzm.js";import{t as c}from"./users-DzgXeZbf.js";import{a as l}from"./index-B8DVXCmf.js";import{t as u}from"./props-table-CM_1cocj.js";import{t as d}from"./metric-trend-chip-kLBN8u5z.js";import{n as f,r as p,t as m}from"./metric-BWGrmyD6.js";import{n as h,t as g}from"./metric-grid-CewIJQvo.js";var _=e({ErrorState:()=>P,LiveLoadingState:()=>N,LoadingSkeletons:()=>M,MetricBarDefault:()=>w,MetricBarGradientFrame:()=>T,MetricGridCardVariant:()=>E,MetricGridCompactList:()=>D,MetricMinimalInlineCopy:()=>k,MetricSizesSmMdLg:()=>O,MetricSparklineExample:()=>j,MetricTrendChipExample:()=>A}),v=l(),y={id:`revenue`,label:`Revenue`,value:24820,valueType:`currency`,currency:`USD`,change:{value:`12.4%`,direction:`up`},sparkline:[120,140,132,158,167,180,198,220,240,248],icon:a,subtitle:`This month`},b={id:`orders`,label:`Orders`,value:312,valueType:`number`,change:{value:`4.1%`,direction:`up`},sparkline:[22,28,25,30,35,33,38,41,39,44],icon:o},x={id:`customers`,label:`Active customers`,value:1820,valueType:`number`,change:{value:`2.3%`,direction:`down`},sparkline:[200,198,205,195,188,182,178,180,184,182],icon:c},S={id:`conversion`,label:`Conversion`,value:.082,valueType:`percentage`,change:{value:`0.6%`,direction:`up`},sparkline:[.07,.071,.073,.075,.078,.079,.081,.082],icon:s},C=[y,b,x,S];function w(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(h,{period:{label:`This month`,value:`this_month`},metrics:C})})}function T(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(h,{period:{label:`This month`,value:`this_month`},metrics:C,variant:`gradient`,footerText:`Updated 2 minutes ago`})})}function E(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(g,{metrics:C,variant:`card`,columns:4})})}function D(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(g,{metrics:C,variant:`compact`,columns:2})})}function O(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(`div`,{className:`space-y-3`,children:[(0,v.jsx)(m,{data:b,variant:`bordered`,size:`sm`}),(0,v.jsx)(m,{data:b,variant:`bordered`,size:`md`}),(0,v.jsx)(m,{data:b,variant:`bordered`,size:`lg`})]})})}function k(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(`div`,{className:`flex flex-wrap gap-x-6 gap-y-2 rounded-lg border border-border bg-card p-4`,children:[(0,v.jsx)(m,{data:y,variant:`minimal`}),(0,v.jsx)(m,{data:b,variant:`minimal`}),(0,v.jsx)(m,{data:x,variant:`minimal`}),(0,v.jsx)(m,{data:S,variant:`minimal`})]})})}function A(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3`,children:[(0,v.jsx)(d,{change:{value:`12.4%`,direction:`up`},variant:`default`}),(0,v.jsx)(d,{change:{value:`12.4%`,direction:`up`},variant:`badge`}),(0,v.jsx)(d,{change:{value:`3.2%`,direction:`down`},variant:`badge`}),(0,v.jsx)(d,{change:{value:`0%`,direction:`neutral`},variant:`badge`}),(0,v.jsx)(d,{change:{value:`5.1%`,direction:`up`},variant:`compact`}),(0,v.jsx)(d,{change:{value:`5.1%`,direction:`up`},variant:`inline`})]})})}function j(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(`div`,{className:`grid grid-cols-1 gap-3 sm:grid-cols-3`,children:[(0,v.jsxs)(`div`,{className:`rounded-lg border border-border bg-card p-3`,children:[(0,v.jsx)(t,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:`Positive`}),(0,v.jsx)(`div`,{className:`mt-1 h-12 w-full`,children:(0,v.jsx)(p,{data:[120,140,132,158,167,180,198,220,240,248],trend:`positive`})})]}),(0,v.jsxs)(`div`,{className:`rounded-lg border border-border bg-card p-3`,children:[(0,v.jsx)(t,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:`Negative`}),(0,v.jsx)(`div`,{className:`mt-1 h-12 w-full`,children:(0,v.jsx)(p,{data:[200,198,205,195,188,182,178,180,184,182],trend:`negative`})})]}),(0,v.jsxs)(`div`,{className:`rounded-lg border border-border bg-card p-3`,children:[(0,v.jsx)(t,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:`Neutral`}),(0,v.jsx)(`div`,{className:`mt-1 h-12 w-full`,children:(0,v.jsx)(p,{data:[15,20,18,24,22,28,31,35,38,42,45,48],trend:`neutral`})})]})]})})}function M(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(`div`,{className:`grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4`,children:[(0,v.jsx)(f,{variant:`card`}),(0,v.jsx)(f,{variant:`bordered`}),(0,v.jsx)(f,{variant:`accent`}),(0,v.jsx)(f,{variant:`compact`})]})})}function N(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(g,{metrics:C,variant:`card`,columns:4,loading:!0})})}function P(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(m,{data:y,variant:`card`,error:!0,errorLabel:`Couldn't load this metric`})})}var F=`import { DollarSign, ShoppingBag, TrendingUp, Users } from 'lucide-react';
+import {
+	Metric,
+	MetricBar,
+	MetricGrid,
+	MetricSkeleton,
+	MetricSparkline,
+	MetricTrendChip,
+	type MetricData,
+} from '@/components/composed/analytics';
+import { Text } from '@/components/typography';
+
+const revenue: MetricData = {
+	id: 'revenue',
+	label: 'Revenue',
+	value: 24820,
+	valueType: 'currency',
+	currency: 'USD',
+	change: { value: '12.4%', direction: 'up' },
+	sparkline: [120, 140, 132, 158, 167, 180, 198, 220, 240, 248],
+	icon: DollarSign,
+	subtitle: 'This month',
+};
+
+const orders: MetricData = {
+	id: 'orders',
+	label: 'Orders',
+	value: 312,
+	valueType: 'number',
+	change: { value: '4.1%', direction: 'up' },
+	sparkline: [22, 28, 25, 30, 35, 33, 38, 41, 39, 44],
+	icon: ShoppingBag,
+};
+
+const customers: MetricData = {
+	id: 'customers',
+	label: 'Active customers',
+	value: 1820,
+	valueType: 'number',
+	change: { value: '2.3%', direction: 'down' },
+	sparkline: [200, 198, 205, 195, 188, 182, 178, 180, 184, 182],
+	icon: Users,
+};
+
+const conversion: MetricData = {
+	id: 'conversion',
+	label: 'Conversion',
+	value: 0.082,
+	valueType: 'percentage',
+	change: { value: '0.6%', direction: 'up' },
+	sparkline: [0.07, 0.071, 0.073, 0.075, 0.078, 0.079, 0.081, 0.082],
+	icon: TrendingUp,
+};
+
+const ALL = [revenue, orders, customers, conversion];
+
+export function MetricBarDefault() {
+	return (
+		<>
+			<MetricBar
+								period={{ label: 'This month', value: 'this_month' }}
+								metrics={ALL}
+							/>
+		</>
+	);
+}
+
+export function MetricBarGradientFrame() {
+	return (
+		<>
+			<MetricBar
+								period={{ label: 'This month', value: 'this_month' }}
+								metrics={ALL}
+								variant="gradient"
+								footerText="Updated 2 minutes ago"
+							/>
+		</>
+	);
+}
+
+export function MetricGridCardVariant() {
+	return (
+		<>
+			<MetricGrid metrics={ALL} variant="card" columns={4} />
+		</>
+	);
+}
+
+export function MetricGridCompactList() {
+	return (
+		<>
+			<MetricGrid metrics={ALL} variant="compact" columns={2} />
+		</>
+	);
+}
+
+export function MetricSizesSmMdLg() {
+	return (
+		<>
+			<div className="space-y-3">
+								<Metric data={orders} variant="bordered" size="sm" />
+								<Metric data={orders} variant="bordered" size="md" />
+								<Metric data={orders} variant="bordered" size="lg" />
+							</div>
+		</>
+	);
+}
+
+export function MetricMinimalInlineCopy() {
+	return (
+		<>
+			<div className="flex flex-wrap gap-x-6 gap-y-2 rounded-lg border border-border bg-card p-4">
+								<Metric data={revenue} variant="minimal" />
+								<Metric data={orders} variant="minimal" />
+								<Metric data={customers} variant="minimal" />
+								<Metric data={conversion} variant="minimal" />
+							</div>
+		</>
+	);
+}
+
+export function MetricTrendChipExample() {
+	return (
+		<>
+			<div className="flex flex-wrap items-center gap-3">
+								<MetricTrendChip change={{ value: '12.4%', direction: 'up' }} variant="default" />
+								<MetricTrendChip change={{ value: '12.4%', direction: 'up' }} variant="badge" />
+								<MetricTrendChip change={{ value: '3.2%', direction: 'down' }} variant="badge" />
+								<MetricTrendChip change={{ value: '0%', direction: 'neutral' }} variant="badge" />
+								<MetricTrendChip change={{ value: '5.1%', direction: 'up' }} variant="compact" />
+								<MetricTrendChip change={{ value: '5.1%', direction: 'up' }} variant="inline" />
+							</div>
+		</>
+	);
+}
+
+export function MetricSparklineExample() {
+	return (
+		<>
+			<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+								<div className="rounded-lg border border-border bg-card p-3">
+									<Text size="xxs" type="secondary" weight="medium" className="uppercase tracking-wider">Positive</Text>
+									<div className="mt-1 h-12 w-full">
+										<MetricSparkline data={[120, 140, 132, 158, 167, 180, 198, 220, 240, 248]} trend="positive" />
+									</div>
+								</div>
+								<div className="rounded-lg border border-border bg-card p-3">
+									<Text size="xxs" type="secondary" weight="medium" className="uppercase tracking-wider">Negative</Text>
+									<div className="mt-1 h-12 w-full">
+										<MetricSparkline data={[200, 198, 205, 195, 188, 182, 178, 180, 184, 182]} trend="negative" />
+									</div>
+								</div>
+								<div className="rounded-lg border border-border bg-card p-3">
+									<Text size="xxs" type="secondary" weight="medium" className="uppercase tracking-wider">Neutral</Text>
+									<div className="mt-1 h-12 w-full">
+										<MetricSparkline data={[15, 20, 18, 24, 22, 28, 31, 35, 38, 42, 45, 48]} trend="neutral" />
+									</div>
+								</div>
+							</div>
+		</>
+	);
+}
+
+export function LoadingSkeletons() {
+	return (
+		<>
+			<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+								<MetricSkeleton variant="card" />
+								<MetricSkeleton variant="bordered" />
+								<MetricSkeleton variant="accent" />
+								<MetricSkeleton variant="compact" />
+							</div>
+		</>
+	);
+}
+
+export function LiveLoadingState() {
+	return (
+		<>
+			<MetricGrid metrics={ALL} variant="card" columns={4} loading />
+		</>
+	);
+}
+
+export function ErrorState() {
+	return (
+		<>
+			<Metric data={revenue} variant="card" error errorLabel="Couldn't load this metric" />
+		</>
+	);
+}
+`;function I(e){let t={h4:`h4`,...e.components};return _||R(`Examples`,!1),P||R(`Examples.ErrorState`,!0),N||R(`Examples.LiveLoadingState`,!0),M||R(`Examples.LoadingSkeletons`,!0),w||R(`Examples.MetricBarDefault`,!0),T||R(`Examples.MetricBarGradientFrame`,!0),E||R(`Examples.MetricGridCardVariant`,!0),D||R(`Examples.MetricGridCompactList`,!0),k||R(`Examples.MetricMinimalInlineCopy`,!0),O||R(`Examples.MetricSizesSmMdLg`,!0),j||R(`Examples.MetricSparklineExample`,!0),A||R(`Examples.MetricTrendChipExample`,!0),(0,v.jsxs)(n,{title:`Features · Metrics · Overview`,description:`The unified metrics module: a single Metric component with seven layout variants, plus MetricBar, MetricGrid, and supporting atoms (TrendChip, Sparkline, Skeleton). One MetricData shape powers every surface — see the dedicated pages for each layout.`,layer:`features`,status:`ready`,children:[(0,v.jsxs)(r,{title:`Examples`,id:`examples`,children:[(0,v.jsx)(i,{name:`MetricBarDefault`,source:F,children:(0,v.jsx)(w,{})}),(0,v.jsx)(i,{name:`MetricBarGradientFrame`,source:F,children:(0,v.jsx)(T,{})}),(0,v.jsx)(i,{name:`MetricGridCardVariant`,source:F,children:(0,v.jsx)(E,{})}),(0,v.jsx)(i,{name:`MetricGridCompactList`,source:F,children:(0,v.jsx)(D,{})}),(0,v.jsx)(i,{name:`MetricSizesSmMdLg`,source:F,children:(0,v.jsx)(O,{})}),(0,v.jsx)(i,{name:`MetricMinimalInlineCopy`,source:F,children:(0,v.jsx)(k,{})}),(0,v.jsx)(i,{name:`MetricTrendChipExample`,source:F,children:(0,v.jsx)(A,{})}),(0,v.jsx)(i,{name:`MetricSparklineExample`,source:F,children:(0,v.jsx)(j,{})}),(0,v.jsx)(i,{name:`LoadingSkeletons`,source:F,children:(0,v.jsx)(M,{})}),(0,v.jsx)(i,{name:`LiveLoadingState`,source:F,children:(0,v.jsx)(N,{})}),(0,v.jsx)(i,{name:`ErrorState`,source:F,children:(0,v.jsx)(P,{})})]}),(0,v.jsxs)(r,{title:`API`,id:`api`,children:[(0,v.jsx)(t.h4,{children:`Metric`}),(0,v.jsx)(u,{component:`Metric`}),(0,v.jsx)(t.h4,{children:`MetricBar`}),(0,v.jsx)(u,{component:`MetricBar`}),(0,v.jsx)(t.h4,{children:`MetricGrid`}),(0,v.jsx)(u,{component:`MetricGrid`}),(0,v.jsx)(t.h4,{children:`MetricSkeleton`}),(0,v.jsx)(u,{component:`MetricSkeleton`}),(0,v.jsx)(t.h4,{children:`MetricSparkline`}),(0,v.jsx)(u,{component:`MetricSparkline`}),(0,v.jsx)(t.h4,{children:`MetricTrendChip`}),(0,v.jsx)(u,{component:`MetricTrendChip`})]})]})}function L(e={}){let{wrapper:t}=e.components||{};return t?(0,v.jsx)(t,{...e,children:(0,v.jsx)(I,{...e})}):I(e)}function R(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{L as default};