@gspa/ui 0.1.3 → 0.2.0

package/dist/components/Typography.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),f={key:0,class:"ui-danger ml-1","aria-hidden":"true"},b={__name:"Typography",props:{variant:{type:String,default:"body-md",validator:e=>["body-2xs","body-xs","body-sm","body-md","body-lg","body-xl","body-2xl","text-2xs","text-xs","text-sm","text-md","text-lg","text-xl","text-2xl","display-xs","display-sm","display-md","display-lg","display-xl","display-2xl","caption","overline","label"].includes(e)},color:{type:String,default:"default",validator:e=>["default","primary","secondary","accent","success","warning","danger","info","muted","disabled","white","black"].includes(e)},align:{type:String,default:"left",validator:e=>["left","center","right","justify"].includes(e)},weight:{type:String,default:null,validator:e=>["thin","extralight","light","normal","medium","semibold","bold","extrabold","black"].includes(e)},transform:{type:String,default:null,validator:e=>["uppercase","lowercase","capitalize","normal"].includes(e)},leading:{type:String,default:null,validator:e=>["none","tight","snug","normal","relaxed","loose"].includes(e)},tracking:{type:String,default:null,validator:e=>["tighter","tight","normal","wide","wider","widest"].includes(e)},italic:Boolean,underline:Boolean,lineThrough:Boolean,truncate:Boolean,noWrap:Boolean,required:Boolean,gradient:Boolean,maxLines:{type:Number,default:null},shadow:{type:String,default:null,validator:e=>["sm","md","lg","xl","2xl"].includes(e)},spacing:{type:String,default:null,validator:e=>["tight","normal","relaxed","loose"].includes(e)},responsive:Boolean,opacity:{type:Number,default:null,validator:e=>e>=0&&e<=100}},setup(e){const t=e,n=l.computed(()=>({"body-2xs":"p","body-xs":"p","body-sm":"p","body-md":"p","body-lg":"p","body-xl":"p","body-2xl":"p","text-2xs":"h6","text-xs":"h6","text-sm":"h5","text-md":"h4","text-lg":"h3","text-xl":"h2","text-2xl":"h1","display-xs":"h2","display-sm":"h2","display-md":"h1","display-lg":"h1","display-xl":"h1","display-2xl":"h1",caption:"span",overline:"span",label:"label"})[t.variant]||"p"),i=l.computed(()=>({"body-2xs":"text-[10px] leading-normal","body-xs":"text-xs leading-normal","body-sm":"text-sm leading-relaxed","body-md":"text-base leading-relaxed","body-lg":"text-lg leading-relaxed","body-xl":"text-xl leading-relaxed","body-2xl":"text-2xl leading-relaxed","text-2xs":"text-xs font-semibold leading-snug","text-xs":"text-sm font-semibold leading-snug","text-sm":"text-lg font-semibold leading-snug","text-md":"text-xl font-semibold leading-snug","text-lg":"text-2xl font-bold leading-snug","text-xl":"text-3xl font-bold leading-snug","text-2xl":"text-4xl font-bold leading-snug","display-xs":"text-3xl font-bold leading-tight tracking-tight","display-sm":"text-4xl font-bold leading-tight tracking-tight","display-md":"text-5xl font-bold leading-tight tracking-tight","display-lg":"text-6xl font-bold leading-tight tracking-tight","display-xl":"text-7xl font-bold leading-tight tracking-tighter","display-2xl":"text-8xl font-bold leading-tight tracking-tighter",caption:"text-xs leading-normal ui-text",overline:"text-xs font-medium uppercase tracking-wider leading-normal",label:"text-sm font-medium leading-normal"})[t.variant]),o=l.computed(()=>t.gradient?"bg-linear-to-r from-(--ui-primary) to-(--ui-accent) bg-clip-text text-transparent":{default:"ui-text",primary:"ui-primary",secondary:"ui-text",accent:"ui-accent",success:"ui-success",warning:"ui-warning",danger:"ui-danger",info:"ui-primary",muted:"ui-text",disabled:"ui-text",white:"ui-text",black:"ui-text"}[t.color]),s=l.computed(()=>({left:"text-left",center:"text-center",right:"text-right",justify:"text-justify"})[t.align]),r=l.computed(()=>t.weight?{thin:"font-thin",extralight:"font-extralight",light:"font-light",normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extrabold:"font-extrabold",black:"font-black"}[t.weight]:""),d=l.computed(()=>t.transform?{uppercase:"uppercase",lowercase:"lowercase",capitalize:"capitalize",normal:"normal-case"}[t.transform]:""),g=l.computed(()=>t.leading?{none:"leading-none",tight:"leading-tight",snug:"leading-snug",normal:"leading-normal",relaxed:"leading-relaxed",loose:"leading-loose"}[t.leading]:""),u=l.computed(()=>t.tracking?{tighter:"tracking-tighter",tight:"tracking-tight",normal:"tracking-normal",wide:"tracking-wide",wider:"tracking-wider",widest:"tracking-widest"}[t.tracking]:""),c=l.computed(()=>t.shadow?{sm:"drop-shadow-sm",md:"drop-shadow-md",lg:"drop-shadow-lg",xl:"drop-shadow-xl","2xl":"drop-shadow-2xl"}[t.shadow]:""),x=l.computed(()=>t.spacing?{tight:"mb-1",normal:"mb-2",relaxed:"mb-4",loose:"mb-6"}[t.spacing]:""),m=l.computed(()=>t.responsive?"text-sm sm:text-base md:text-lg lg:text-xl":""),p=l.computed(()=>t.maxLines?`line-clamp-${t.maxLines}`:""),h=l.computed(()=>{const a={};return t.opacity!==null&&(a.opacity=t.opacity/100),a}),y=l.computed(()=>[i.value,o.value,s.value,r.value,d.value,g.value,u.value,c.value,x.value,m.value,p.value,{italic:t.italic,underline:t.underline,"line-through":t.lineThrough,truncate:t.truncate&&!t.maxLines,"whitespace-nowrap":t.noWrap,"transition-colors duration-200":!0,"select-none":t.variant==="overline"||t.variant==="label"}]);return(a,v)=>(l.openBlock(),l.createBlock(l.resolveDynamicComponent(n.value),l.mergeProps({class:y.value,style:h.value},a.$attrs),{default:l.withCtx(()=>[l.renderSlot(a.$slots,"default"),e.required?(l.openBlock(),l.createElementBlock("span",f,"*")):l.createCommentVNode("",!0)]),_:3},16,["class","style"]))}};exports.default=b;

package/dist/components/Typography.js

@@ -0,0 +1,267 @@
+import { computed as a, createBlock as b, openBlock as n, resolveDynamicComponent as v, mergeProps as w, withCtx as k, renderSlot as C, createElementBlock as B, createCommentVNode as S } from "vue";
+const L = {
+  key: 0,
+  class: "ui-danger ml-1",
+  "aria-hidden": "true"
+}, z = {
+  __name: "Typography",
+  props: {
+    // Size variants
+    variant: {
+      type: String,
+      default: "body-md",
+      validator: (e) => [
+        "body-2xs",
+        "body-xs",
+        "body-sm",
+        "body-md",
+        "body-lg",
+        "body-xl",
+        "body-2xl",
+        "text-2xs",
+        "text-xs",
+        "text-sm",
+        "text-md",
+        "text-lg",
+        "text-xl",
+        "text-2xl",
+        "display-xs",
+        "display-sm",
+        "display-md",
+        "display-lg",
+        "display-xl",
+        "display-2xl",
+        "caption",
+        "overline",
+        "label"
+      ].includes(e)
+    },
+    // Color options
+    color: {
+      type: String,
+      default: "default",
+      validator: (e) => [
+        "default",
+        "primary",
+        "secondary",
+        "accent",
+        "success",
+        "warning",
+        "danger",
+        "info",
+        "muted",
+        "disabled",
+        "white",
+        "black"
+      ].includes(e)
+    },
+    // Alignment
+    align: {
+      type: String,
+      default: "left",
+      validator: (e) => ["left", "center", "right", "justify"].includes(e)
+    },
+    // Font weight
+    weight: {
+      type: String,
+      default: null,
+      validator: (e) => ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"].includes(e)
+    },
+    // Text transform
+    transform: {
+      type: String,
+      default: null,
+      validator: (e) => ["uppercase", "lowercase", "capitalize", "normal"].includes(e)
+    },
+    // Line height
+    leading: {
+      type: String,
+      default: null,
+      validator: (e) => ["none", "tight", "snug", "normal", "relaxed", "loose"].includes(e)
+    },
+    // Letter spacing
+    tracking: {
+      type: String,
+      default: null,
+      validator: (e) => ["tighter", "tight", "normal", "wide", "wider", "widest"].includes(e)
+    },
+    // Boolean modifiers
+    italic: Boolean,
+    underline: Boolean,
+    lineThrough: Boolean,
+    truncate: Boolean,
+    noWrap: Boolean,
+    required: Boolean,
+    gradient: Boolean,
+    // Advanced styling
+    maxLines: {
+      type: Number,
+      default: null
+    },
+    shadow: {
+      type: String,
+      default: null,
+      validator: (e) => ["sm", "md", "lg", "xl", "2xl"].includes(e)
+    },
+    // Spacing
+    spacing: {
+      type: String,
+      default: null,
+      validator: (e) => ["tight", "normal", "relaxed", "loose"].includes(e)
+    },
+    // Responsive behavior
+    responsive: Boolean,
+    // Custom opacity
+    opacity: {
+      type: Number,
+      default: null,
+      validator: (e) => e >= 0 && e <= 100
+    }
+  },
+  setup(e) {
+    const t = e, i = a(() => ({
+      "body-2xs": "p",
+      "body-xs": "p",
+      "body-sm": "p",
+      "body-md": "p",
+      "body-lg": "p",
+      "body-xl": "p",
+      "body-2xl": "p",
+      "text-2xs": "h6",
+      "text-xs": "h6",
+      "text-sm": "h5",
+      "text-md": "h4",
+      "text-lg": "h3",
+      "text-xl": "h2",
+      "text-2xl": "h1",
+      "display-xs": "h2",
+      "display-sm": "h2",
+      "display-md": "h1",
+      "display-lg": "h1",
+      "display-xl": "h1",
+      "display-2xl": "h1",
+      caption: "span",
+      overline: "span",
+      label: "label"
+    })[t.variant] || "p"), s = a(() => ({
+      "body-2xs": "text-[10px] leading-normal",
+      "body-xs": "text-xs leading-normal",
+      "body-sm": "text-sm leading-relaxed",
+      "body-md": "text-base leading-relaxed",
+      "body-lg": "text-lg leading-relaxed",
+      "body-xl": "text-xl leading-relaxed",
+      "body-2xl": "text-2xl leading-relaxed",
+      "text-2xs": "text-xs font-semibold leading-snug",
+      "text-xs": "text-sm font-semibold leading-snug",
+      "text-sm": "text-lg font-semibold leading-snug",
+      "text-md": "text-xl font-semibold leading-snug",
+      "text-lg": "text-2xl font-bold leading-snug",
+      "text-xl": "text-3xl font-bold leading-snug",
+      "text-2xl": "text-4xl font-bold leading-snug",
+      "display-xs": "text-3xl font-bold leading-tight tracking-tight",
+      "display-sm": "text-4xl font-bold leading-tight tracking-tight",
+      "display-md": "text-5xl font-bold leading-tight tracking-tight",
+      "display-lg": "text-6xl font-bold leading-tight tracking-tight",
+      "display-xl": "text-7xl font-bold leading-tight tracking-tighter",
+      "display-2xl": "text-8xl font-bold leading-tight tracking-tighter",
+      caption: "text-xs leading-normal ui-text",
+      overline: "text-xs font-medium uppercase tracking-wider leading-normal",
+      label: "text-sm font-medium leading-normal"
+    })[t.variant]), r = a(() => t.gradient ? "bg-linear-to-r from-(--ui-primary) to-(--ui-accent) bg-clip-text text-transparent" : {
+      default: "ui-text",
+      primary: "ui-primary",
+      secondary: "ui-text",
+      accent: "ui-accent",
+      success: "ui-success",
+      warning: "ui-warning",
+      danger: "ui-danger",
+      info: "ui-primary",
+      muted: "ui-text",
+      disabled: "ui-text",
+      white: "ui-text",
+      black: "ui-text"
+    }[t.color]), o = a(() => ({
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    })[t.align]), d = a(() => t.weight ? {
+      thin: "font-thin",
+      extralight: "font-extralight",
+      light: "font-light",
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      extrabold: "font-extrabold",
+      black: "font-black"
+    }[t.weight] : ""), g = a(() => t.transform ? {
+      uppercase: "uppercase",
+      lowercase: "lowercase",
+      capitalize: "capitalize",
+      normal: "normal-case"
+    }[t.transform] : ""), x = a(() => t.leading ? {
+      none: "leading-none",
+      tight: "leading-tight",
+      snug: "leading-snug",
+      normal: "leading-normal",
+      relaxed: "leading-relaxed",
+      loose: "leading-loose"
+    }[t.leading] : ""), u = a(() => t.tracking ? {
+      tighter: "tracking-tighter",
+      tight: "tracking-tight",
+      normal: "tracking-normal",
+      wide: "tracking-wide",
+      wider: "tracking-wider",
+      widest: "tracking-widest"
+    }[t.tracking] : ""), c = a(() => t.shadow ? {
+      sm: "drop-shadow-sm",
+      md: "drop-shadow-md",
+      lg: "drop-shadow-lg",
+      xl: "drop-shadow-xl",
+      "2xl": "drop-shadow-2xl"
+    }[t.shadow] : ""), m = a(() => t.spacing ? {
+      tight: "mb-1",
+      normal: "mb-2",
+      relaxed: "mb-4",
+      loose: "mb-6"
+    }[t.spacing] : ""), p = a(() => t.responsive ? "text-sm sm:text-base md:text-lg lg:text-xl" : ""), h = a(() => t.maxLines ? `line-clamp-${t.maxLines}` : ""), y = a(() => {
+      const l = {};
+      return t.opacity !== null && (l.opacity = t.opacity / 100), l;
+    }), f = a(() => [
+      s.value,
+      r.value,
+      o.value,
+      d.value,
+      g.value,
+      x.value,
+      u.value,
+      c.value,
+      m.value,
+      p.value,
+      h.value,
+      {
+        italic: t.italic,
+        underline: t.underline,
+        "line-through": t.lineThrough,
+        truncate: t.truncate && !t.maxLines,
+        "whitespace-nowrap": t.noWrap,
+        "transition-colors duration-200": !0,
+        "select-none": t.variant === "overline" || t.variant === "label"
+      }
+    ]);
+    return (l, _) => (n(), b(v(i.value), w({
+      class: f.value,
+      style: y.value
+    }, l.$attrs), {
+      default: k(() => [
+        C(l.$slots, "default"),
+        e.required ? (n(), B("span", L, "*")) : S("", !0)
+      ]),
+      _: 3
+    }, 16, ["class", "style"]));
+  }
+};
+export {
+  z as default
+};

package/dist/components/charts/BarChart.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),F={key:0,class:"absolute top-3 left-3 z-10 ui-surface border ui-border-strong rounded-md px-2 py-1.5"},Y={class:"flex items-center gap-2"},G={class:"text-xs font-semibold ui-text"},T=["width","height","viewBox"],O={key:0},R=["x1","y1","x2","y2","stroke"],X=["id"],H=["stop-color"],I=["stop-color"],W=["x","y","width","height","fill","onMouseenter","onClick"],j=["to"],q=["from","to"],P=["x","y"],U={key:1},_=["x","y"],J={key:2},K=["x","y"],Q={key:3},Z=["x","y"],ee={key:4},te=["x"],le=["x1","y1","x2","y2"],oe=["x1","y1","x2","y2"],ae={class:"ui--surface ui-text px-4 py-3 rounded-lg shadow-2xl border ui-border-strong min-w-40"},ne={class:"flex items-center gap-2 mb-1"},re={class:"font-semibold text-sm"},se={class:"ml-5"},ie={class:"text-2xl font-bold"},ce={__name:"BarChart",props:{data:{type:Array,required:!0},labels:{type:Array,default:()=>[]},colors:{type:Array,default:()=>["#3b82f6","#ef4444","#10b981","#f59e0b","#8b5cf6"]},width:{type:[Number,String],default:"auto"},height:{type:[Number,String],default:"auto"},padding:{type:Object,default:()=>({top:20,right:20,bottom:60,left:60})},showGrid:{type:Boolean,default:!0},showXAxis:{type:Boolean,default:!0},showYAxis:{type:Boolean,default:!0},gridColor:{type:String,default:"#e5e7eb"},barClasses:{type:String,default:"transition-all duration-200 hover:opacity-90 cursor-pointer"},axisLabelClasses:{type:String,default:"fill-(--ui-text) text-xs font-medium"},maxValue:{type:Number,default:null},xAxisLabel:{type:String,default:""},yAxisLabel:{type:String,default:""},showValues:{type:Boolean,default:!0},valueSuffix:{type:String,default:""},showLegend:{type:Boolean,default:!0},seriesLabel:{type:String,default:""}},emits:["bar-click","bar-hover"],setup(o,{emit:w}){const a=o,k=w,g=e.ref(null),d=e.ref({width:0,height:0});let m=null;const u=e.computed(()=>{const t=Number(a.width);return Number.isFinite(t)&&t>0?t:d.value.width>0?d.value.width:400}),s=e.computed(()=>{const t=Number(a.height);return Number.isFinite(t)&&t>0?t:d.value.height>0?d.value.height:300}),i=e.ref({visible:!1,x:0,y:0,label:"",value:0,color:""}),y=e.computed(()=>a.maxValue||Math.max(...a.data)),c=e.computed(()=>s.value-a.padding.top-a.padding.bottom),b=e.computed(()=>u.value-a.padding.left-a.padding.right),h=e.computed(()=>b.value/a.data.length*.7),B=e.computed(()=>b.value/a.data.length*.3),E=e.computed(()=>{const t=[];for(let l=0;l<=5;l++){const n=a.padding.top+c.value/5*l;t.push(n)}return t}),x=t=>a.padding.left+t*(h.value+B.value)+B.value/2,v=t=>{const r=c.value/y.value;return a.padding.top+c.value-t*r},N=t=>{const r=c.value/y.value;return t*r},f=t=>a.colors[t%a.colors.length],S=t=>(Number(t)||0)<=0?a.padding.top+c.value-6:Math.max(v(t)+18,a.padding.top+16),C=t=>(Number(t)||0)<=0?"fill-(--ui-text) text-[10px] sm:text-xs font-semibold":"fill-white text-[10px] sm:text-xs font-semibold",L=t=>{const r=(s.value-a.padding.bottom-t)/c.value*y.value;return p(Math.round(r))},A=e.computed(()=>a.valueSuffix?a.valueSuffix:String(a.yAxisLabel||"").includes("%")||a.maxValue===100?"%":""),p=t=>`${t}${A.value}`,$=e.computed(()=>a.seriesLabel||a.yAxisLabel||"Series"),z=(t,r,l)=>{const n=a.labels[l]||`Item ${l+1}`;i.value={visible:!0,x:t.clientX,y:t.clientY,label:n,value:r,color:f(l)},k("bar-hover",{value:r,index:l,label:n})},M=()=>{i.value.visible=!1},D=(t,r)=>{const l=a.labels[r]||`Item ${r+1}`;k("bar-click",{value:t,index:r,label:l})};return e.onMounted(()=>{m=new ResizeObserver(t=>{const r=t[0];if(!r)return;const{width:l,height:n}=r.contentRect;d.value={width:Math.round(l),height:Math.round(n)}}),g.value&&m.observe(g.value)}),e.onBeforeUnmount(()=>{m&&m.disconnect()}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:g,class:"ui-surface w-full h-full relative"},[o.showLegend?(e.openBlock(),e.createElementBlock("div",F,[e.createElementVNode("div",Y,[e.createElementVNode("span",{class:"w-2.5 h-2.5 rounded-sm",style:e.normalizeStyle({backgroundColor:f(0)})},null,4),e.createElementVNode("span",G,e.toDisplayString($.value),1)])])):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{width:u.value,height:s.value,viewBox:`0 0 ${u.value} ${s.value}`,class:"overflow-visible"},[o.showGrid?(e.openBlock(),e.createElementBlock("g",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(E.value,l=>(e.openBlock(),e.createElementBlock("line",{key:`grid-${l}`,x1:o.padding.left,y1:l,x2:u.value-o.padding.right,y2:l,stroke:o.gridColor,"stroke-width":"1","stroke-dasharray":"4,4",opacity:"0.3"},null,8,R))),128))])):e.createCommentVNode("",!0),e.createElementVNode("defs",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.data,(l,n)=>(e.openBlock(),e.createElementBlock("linearGradient",{id:`barGradient-${n}`,key:`gradient-${n}`,x1:"0%",y1:"0%",x2:"0%",y2:"100%"},[e.createElementVNode("stop",{offset:"0%","stop-color":f(n),"stop-opacity":"1"},null,8,H),e.createElementVNode("stop",{offset:"100%","stop-color":f(n),"stop-opacity":"0.7"},null,8,I)],8,X))),128))]),e.createElementVNode("g",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.data,(l,n)=>(e.openBlock(),e.createElementBlock("g",{key:`bar-group-${n}`},[e.createElementVNode("rect",{x:x(n),y:v(l),width:h.value,height:N(l),fill:`url(#barGradient-${n})`,class:e.normalizeClass(o.barClasses),rx:"4",onMouseenter:V=>z(V,l,n),onMouseleave:M,onClick:V=>D(l,n)},[e.createElementVNode("animate",{attributeName:"height",from:0,to:N(l),dur:"0.8s",fill:"freeze"},null,8,j),e.createElementVNode("animate",{attributeName:"y",from:o.padding.top+c.value,to:v(l),dur:"0.8s",fill:"freeze"},null,8,q)],42,W),o.showValues?(e.openBlock(),e.createElementBlock("text",{key:0,x:x(n)+h.value/2,y:S(l),class:e.normalizeClass(C(l)),"text-anchor":"middle"},e.toDisplayString(p(l)),11,P)):e.createCommentVNode("",!0)]))),128))]),o.showXAxis?(e.openBlock(),e.createElementBlock("g",U,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.labels,(l,n)=>(e.openBlock(),e.createElementBlock("text",{key:`xlabel-${n}`,x:x(n)+h.value/2,y:s.value-o.padding.bottom+20,class:e.normalizeClass(o.axisLabelClasses),"text-anchor":"middle"},e.toDisplayString(l),11,_))),128))])):e.createCommentVNode("",!0),o.xAxisLabel?(e.openBlock(),e.createElementBlock("g",J,[e.createElementVNode("text",{x:o.padding.left+b.value/2,y:s.value-10,class:"fill-(--ui-text) text-sm font-semibold","text-anchor":"middle"},e.toDisplayString(o.xAxisLabel),9,K)])):e.createCommentVNode("",!0),o.showYAxis?(e.openBlock(),e.createElementBlock("g",Q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(E.value,l=>(e.openBlock(),e.createElementBlock("text",{key:`ylabel-${l}`,x:o.padding.left-10,y:l+4,class:e.normalizeClass(o.axisLabelClasses),"text-anchor":"end"},e.toDisplayString(L(l)),11,Z))),128))])):e.createCommentVNode("",!0),o.yAxisLabel?(e.openBlock(),e.createElementBlock("g",ee,[e.createElementVNode("text",{x:-(o.padding.top+c.value/2),y:15,class:"fill-(--ui-text) text-sm font-semibold","text-anchor":"middle",transform:"rotate(-90)"},e.toDisplayString(o.yAxisLabel),9,te)])):e.createCommentVNode("",!0),e.createElementVNode("line",{x1:o.padding.left,y1:o.padding.top,x2:o.padding.left,y2:s.value-o.padding.bottom,stroke:"#cbd5e1","stroke-width":"2"},null,8,le),e.createElementVNode("line",{x1:o.padding.left,y1:s.value-o.padding.bottom,x2:u.value-o.padding.right,y2:s.value-o.padding.bottom,stroke:"#cbd5e1","stroke-width":"2"},null,8,oe)],8,T)),i.value.visible?(e.openBlock(),e.createElementBlock("div",{key:1,style:e.normalizeStyle({position:"fixed",left:`${i.value.x}px`,top:`${i.value.y}px`,transform:"translate(-50%, -120%)",pointerEvents:"none",zIndex:9999}),class:"ui-surface-strong animate-in fade-in duration-200"},[e.createElementVNode("div",ae,[e.createElementVNode("div",ne,[e.createElementVNode("div",{style:e.normalizeStyle({backgroundColor:i.value.color}),class:"w-3 h-3 rounded shadow-sm"},null,4),e.createElementVNode("p",re,e.toDisplayString(i.value.label),1)]),e.createElementVNode("div",se,[e.createElementVNode("span",ie,e.toDisplayString(p(i.value.value)),1)]),r[0]||(r[0]=e.createElementVNode("div",{class:"absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 ui-surface border-r border-b ui-border-strong"},null,-1))])],4)):e.createCommentVNode("",!0)],512))}};exports.default=ce;

package/dist/components/charts/BarChart.js

@@ -0,0 +1,323 @@
+import { ref as N, computed as u, onMounted as j, onBeforeUnmount as q, createElementBlock as n, openBlock as r, createCommentVNode as f, createElementVNode as s, normalizeStyle as V, toDisplayString as x, Fragment as y, renderList as v, normalizeClass as k } from "vue";
+const U = {
+  key: 0,
+  class: "absolute top-3 left-3 z-10 ui-surface border ui-border-strong rounded-md px-2 py-1.5"
+}, J = { class: "flex items-center gap-2" }, K = { class: "text-xs font-semibold ui-text" }, P = ["width", "height", "viewBox"], Q = { key: 0 }, Z = ["x1", "y1", "x2", "y2", "stroke"], _ = ["id"], ee = ["stop-color"], te = ["stop-color"], le = ["x", "y", "width", "height", "fill", "onMouseenter", "onClick"], ae = ["to"], oe = ["from", "to"], se = ["x", "y"], ne = { key: 1 }, re = ["x", "y"], ie = { key: 2 }, ue = ["x", "y"], de = { key: 3 }, ce = ["x", "y"], he = { key: 4 }, fe = ["x"], xe = ["x1", "y1", "x2", "y2"], be = ["x1", "y1", "x2", "y2"], ge = { class: "ui--surface ui-text px-4 py-3 rounded-lg shadow-2xl border ui-border-strong min-w-40" }, ye = { class: "flex items-center gap-2 mb-1" }, ve = { class: "font-semibold text-sm" }, me = { class: "ml-5" }, pe = { class: "text-2xl font-bold" }, ke = {
+  __name: "BarChart",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    labels: {
+      type: Array,
+      default: () => []
+    },
+    colors: {
+      type: Array,
+      default: () => ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6"]
+    },
+    width: {
+      type: [Number, String],
+      default: "auto"
+    },
+    height: {
+      type: [Number, String],
+      default: "auto"
+    },
+    padding: {
+      type: Object,
+      default: () => ({ top: 20, right: 20, bottom: 60, left: 60 })
+    },
+    showGrid: {
+      type: Boolean,
+      default: !0
+    },
+    showXAxis: {
+      type: Boolean,
+      default: !0
+    },
+    showYAxis: {
+      type: Boolean,
+      default: !0
+    },
+    gridColor: {
+      type: String,
+      default: "#e5e7eb"
+    },
+    barClasses: {
+      type: String,
+      default: "transition-all duration-200 hover:opacity-90 cursor-pointer"
+    },
+    axisLabelClasses: {
+      type: String,
+      default: "fill-(--ui-text) text-xs font-medium"
+    },
+    maxValue: {
+      type: Number,
+      default: null
+    },
+    xAxisLabel: {
+      type: String,
+      default: ""
+    },
+    yAxisLabel: {
+      type: String,
+      default: ""
+    },
+    showValues: {
+      type: Boolean,
+      default: !0
+    },
+    valueSuffix: {
+      type: String,
+      default: ""
+    },
+    showLegend: {
+      type: Boolean,
+      default: !0
+    },
+    seriesLabel: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["bar-click", "bar-hover"],
+  setup(l, { emit: R }) {
+    const a = l, M = R, L = N(null), b = N({ width: 0, height: 0 });
+    let m = null;
+    const g = u(() => {
+      const e = Number(a.width);
+      return Number.isFinite(e) && e > 0 ? e : b.value.width > 0 ? b.value.width : 400;
+    }), d = u(() => {
+      const e = Number(a.height);
+      return Number.isFinite(e) && e > 0 ? e : b.value.height > 0 ? b.value.height : 300;
+    }), c = N({
+      visible: !1,
+      x: 0,
+      y: 0,
+      label: "",
+      value: 0,
+      color: ""
+    }), S = u(() => a.maxValue || Math.max(...a.data)), h = u(() => d.value - a.padding.top - a.padding.bottom), B = u(() => g.value - a.padding.left - a.padding.right), p = u(() => B.value / a.data.length * 0.7), z = u(() => B.value / a.data.length * 0.3), Y = u(() => {
+      const e = [];
+      for (let t = 0; t <= 5; t++) {
+        const o = a.padding.top + h.value / 5 * t;
+        e.push(o);
+      }
+      return e;
+    }), C = (e) => a.padding.left + e * (p.value + z.value) + z.value / 2, A = (e) => {
+      const i = h.value / S.value;
+      return a.padding.top + h.value - e * i;
+    }, G = (e) => {
+      const i = h.value / S.value;
+      return e * i;
+    }, w = (e) => a.colors[e % a.colors.length], T = (e) => (Number(e) || 0) <= 0 ? a.padding.top + h.value - 6 : Math.max(A(e) + 18, a.padding.top + 16), X = (e) => (Number(e) || 0) <= 0 ? "fill-(--ui-text) text-[10px] sm:text-xs font-semibold" : "fill-white text-[10px] sm:text-xs font-semibold", F = (e) => {
+      const i = (d.value - a.padding.bottom - e) / h.value * S.value;
+      return $(Math.round(i));
+    }, H = u(() => a.valueSuffix ? a.valueSuffix : String(a.yAxisLabel || "").includes("%") || a.maxValue === 100 ? "%" : ""), $ = (e) => `${e}${H.value}`, I = u(() => a.seriesLabel || a.yAxisLabel || "Series"), O = (e, i, t) => {
+      const o = a.labels[t] || `Item ${t + 1}`;
+      c.value = {
+        visible: !0,
+        x: e.clientX,
+        y: e.clientY,
+        label: o,
+        value: i,
+        color: w(t)
+      }, M("bar-hover", { value: i, index: t, label: o });
+    }, W = () => {
+      c.value.visible = !1;
+    }, D = (e, i) => {
+      const t = a.labels[i] || `Item ${i + 1}`;
+      M("bar-click", { value: e, index: i, label: t });
+    };
+    return j(() => {
+      m = new ResizeObserver((e) => {
+        const i = e[0];
+        if (!i) return;
+        const { width: t, height: o } = i.contentRect;
+        b.value = {
+          width: Math.round(t),
+          height: Math.round(o)
+        };
+      }), L.value && m.observe(L.value);
+    }), q(() => {
+      m && m.disconnect();
+    }), (e, i) => (r(), n("div", {
+      ref_key: "containerRef",
+      ref: L,
+      class: "ui-surface w-full h-full relative"
+    }, [
+      l.showLegend ? (r(), n("div", U, [
+        s("div", J, [
+          s("span", {
+            class: "w-2.5 h-2.5 rounded-sm",
+            style: V({ backgroundColor: w(0) })
+          }, null, 4),
+          s("span", K, x(I.value), 1)
+        ])
+      ])) : f("", !0),
+      (r(), n("svg", {
+        width: g.value,
+        height: d.value,
+        viewBox: `0 0 ${g.value} ${d.value}`,
+        class: "overflow-visible"
+      }, [
+        l.showGrid ? (r(), n("g", Q, [
+          (r(!0), n(y, null, v(Y.value, (t) => (r(), n("line", {
+            key: `grid-${t}`,
+            x1: l.padding.left,
+            y1: t,
+            x2: g.value - l.padding.right,
+            y2: t,
+            stroke: l.gridColor,
+            "stroke-width": "1",
+            "stroke-dasharray": "4,4",
+            opacity: "0.3"
+          }, null, 8, Z))), 128))
+        ])) : f("", !0),
+        s("defs", null, [
+          (r(!0), n(y, null, v(l.data, (t, o) => (r(), n("linearGradient", {
+            id: `barGradient-${o}`,
+            key: `gradient-${o}`,
+            x1: "0%",
+            y1: "0%",
+            x2: "0%",
+            y2: "100%"
+          }, [
+            s("stop", {
+              offset: "0%",
+              "stop-color": w(o),
+              "stop-opacity": "1"
+            }, null, 8, ee),
+            s("stop", {
+              offset: "100%",
+              "stop-color": w(o),
+              "stop-opacity": "0.7"
+            }, null, 8, te)
+          ], 8, _))), 128))
+        ]),
+        s("g", null, [
+          (r(!0), n(y, null, v(l.data, (t, o) => (r(), n("g", {
+            key: `bar-group-${o}`
+          }, [
+            s("rect", {
+              x: C(o),
+              y: A(t),
+              width: p.value,
+              height: G(t),
+              fill: `url(#barGradient-${o})`,
+              class: k(l.barClasses),
+              rx: "4",
+              onMouseenter: (E) => O(E, t, o),
+              onMouseleave: W,
+              onClick: (E) => D(t, o)
+            }, [
+              s("animate", {
+                attributeName: "height",
+                from: 0,
+                to: G(t),
+                dur: "0.8s",
+                fill: "freeze"
+              }, null, 8, ae),
+              s("animate", {
+                attributeName: "y",
+                from: l.padding.top + h.value,
+                to: A(t),
+                dur: "0.8s",
+                fill: "freeze"
+              }, null, 8, oe)
+            ], 42, le),
+            l.showValues ? (r(), n("text", {
+              key: 0,
+              x: C(o) + p.value / 2,
+              y: T(t),
+              class: k(X(t)),
+              "text-anchor": "middle"
+            }, x($(t)), 11, se)) : f("", !0)
+          ]))), 128))
+        ]),
+        l.showXAxis ? (r(), n("g", ne, [
+          (r(!0), n(y, null, v(l.labels, (t, o) => (r(), n("text", {
+            key: `xlabel-${o}`,
+            x: C(o) + p.value / 2,
+            y: d.value - l.padding.bottom + 20,
+            class: k(l.axisLabelClasses),
+            "text-anchor": "middle"
+          }, x(t), 11, re))), 128))
+        ])) : f("", !0),
+        l.xAxisLabel ? (r(), n("g", ie, [
+          s("text", {
+            x: l.padding.left + B.value / 2,
+            y: d.value - 10,
+            class: "fill-(--ui-text) text-sm font-semibold",
+            "text-anchor": "middle"
+          }, x(l.xAxisLabel), 9, ue)
+        ])) : f("", !0),
+        l.showYAxis ? (r(), n("g", de, [
+          (r(!0), n(y, null, v(Y.value, (t) => (r(), n("text", {
+            key: `ylabel-${t}`,
+            x: l.padding.left - 10,
+            y: t + 4,
+            class: k(l.axisLabelClasses),
+            "text-anchor": "end"
+          }, x(F(t)), 11, ce))), 128))
+        ])) : f("", !0),
+        l.yAxisLabel ? (r(), n("g", he, [
+          s("text", {
+            x: -(l.padding.top + h.value / 2),
+            y: 15,
+            class: "fill-(--ui-text) text-sm font-semibold",
+            "text-anchor": "middle",
+            transform: "rotate(-90)"
+          }, x(l.yAxisLabel), 9, fe)
+        ])) : f("", !0),
+        s("line", {
+          x1: l.padding.left,
+          y1: l.padding.top,
+          x2: l.padding.left,
+          y2: d.value - l.padding.bottom,
+          stroke: "#cbd5e1",
+          "stroke-width": "2"
+        }, null, 8, xe),
+        s("line", {
+          x1: l.padding.left,
+          y1: d.value - l.padding.bottom,
+          x2: g.value - l.padding.right,
+          y2: d.value - l.padding.bottom,
+          stroke: "#cbd5e1",
+          "stroke-width": "2"
+        }, null, 8, be)
+      ], 8, P)),
+      c.value.visible ? (r(), n("div", {
+        key: 1,
+        style: V({
+          position: "fixed",
+          left: `${c.value.x}px`,
+          top: `${c.value.y}px`,
+          transform: "translate(-50%, -120%)",
+          pointerEvents: "none",
+          zIndex: 9999
+        }),
+        class: "ui-surface-strong animate-in fade-in duration-200"
+      }, [
+        s("div", ge, [
+          s("div", ye, [
+            s("div", {
+              style: V({ backgroundColor: c.value.color }),
+              class: "w-3 h-3 rounded shadow-sm"
+            }, null, 4),
+            s("p", ve, x(c.value.label), 1)
+          ]),
+          s("div", me, [
+            s("span", pe, x($(c.value.value)), 1)
+          ]),
+          i[0] || (i[0] = s("div", { class: "absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 ui-surface border-r border-b ui-border-strong" }, null, -1))
+        ])
+      ], 4)) : f("", !0)
+    ], 512));
+  }
+};
+export {
+  ke as default
+};

package/dist/components/charts/LineChart.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),W=["width","height","viewBox"],O={key:0},H=["x1","y1","x2","y2","stroke"],j=["d","stroke","stroke-width"],q={key:1},G=["cx","cy","r","fill","stroke","onMouseenter"],U={key:2},Z=["x","y"],I=["d","fill","fill-opacity"],J={key:4},K=["x","y","text-anchor","transform"],Q={key:5},_=["x","y"],ee={key:6},te=["x","y","width","height","fill","stroke"],le=["x","y"],ae={__name:"LineChart",props:{data:{type:Array,required:!0},labels:{type:Array,default:()=>[]},width:{type:[Number,String],default:"auto"},height:{type:[Number,String],default:"auto"},padding:{type:Object,default:()=>({top:20,right:20,bottom:60,left:60})},showGrid:{type:Boolean,default:!0},showXAxis:{type:Boolean,default:!0},showYAxis:{type:Boolean,default:!0},showPoints:{type:Boolean,default:!0},showValues:{type:Boolean,default:!0},valueSuffix:{type:String,default:""},fillArea:{type:Boolean,default:!1},gridColor:{type:String,default:"#e5e7eb"},lineColor:{type:String,default:"#3b82f6"},strokeWidth:{type:Number,default:2},pointRadius:{type:Number,default:4},pointColor:{type:String,default:"#ffffff"},fillColor:{type:String,default:"#3b82f6"},fillOpacity:{type:Number,default:.1},lineClasses:{type:String,default:"transition-all duration-200"},pointClasses:{type:String,default:"transition-all duration-200 hover:r-6 cursor-pointer"},axisLabelClasses:{type:String,default:"fill-(--ui-text) text-xs font-medium"},autoSkipXAxisLabels:{type:Boolean,default:!0},minLabelSpacing:{type:Number,default:72},maxLabelLength:{type:Number,default:16},rotateLabelsWhenDense:{type:Boolean,default:!0},labelRotationDegrees:{type:Number,default:-35},tooltipBackground:{type:String,default:"#1f2937"},tooltipBorder:{type:String,default:"#374151"},tooltipTextClasses:{type:String,default:"fill-white text-xs font-semibold"},maxValue:{type:Number,default:null}},emits:["point-click","point-hover"],setup(n,{emit:C}){const l=n,N=C,f=e.ref(null),d=e.ref({width:0,height:0});let m=null;const i=e.ref({visible:!1,x:0,y:0,width:0,height:0,content:""}),h=e.computed(()=>{const t=Number(l.width);return Number.isFinite(t)&&t>0?t:d.value.width>0?d.value.width:400}),s=e.computed(()=>{const t=Number(l.height);return Number.isFinite(t)&&t>0?t:d.value.height>0?d.value.height:300}),p=e.computed(()=>{if(l.maxValue&&l.maxValue>0)return l.maxValue;const t=l.data.map(o=>Number(o)||0),a=Math.max(0,...t);return a>0?a:1}),u=e.computed(()=>l.data.map((t,a)=>({x:v(a),y:X(t),value:t}))),M=e.computed(()=>u.value.length===0?"":u.value.map((a,o)=>`${o===0?"M":"L"} ${a.x} ${a.y}`).join(" ")),$=e.computed(()=>{if(u.value.length===0)return"";const t=u.value.map((r,c)=>`${c===0?"M":"L"} ${r.x} ${r.y}`).join(" "),a=s.value-l.padding.bottom,o=`L ${u.value[u.value.length-1].x} ${a} L ${u.value[0].x} ${a} Z`;return t+" "+o}),y=e.computed(()=>{const t=[],a=s.value-l.padding.top-l.padding.bottom,o=5;for(let r=0;r<=o;r++){const c=l.padding.top+a/o*r;t.push(c)}return t}),b=e.computed(()=>h.value-l.padding.left-l.padding.right),k=e.computed(()=>{if(!l.autoSkipXAxisLabels||!l.labels.length)return 1;const t=Math.max(1,Math.floor(b.value/Math.max(1,l.minLabelSpacing)));return Math.max(1,Math.ceil(l.labels.length/t))}),g=e.computed(()=>l.rotateLabelsWhenDense?k.value>1:!1),B=e.computed(()=>s.value-l.padding.bottom+(g.value?28:20)),E=e.computed(()=>g.value?"end":"middle"),L=e.computed(()=>{const t=l.padding.left,a=h.value-l.padding.right-i.value.width,o=i.value.x-i.value.width/2;return Math.min(Math.max(o,t),Math.max(t,a))}),w=e.computed(()=>{const t=i.value.y-i.value.height-10,a=l.padding.top+4;return Math.max(t,a)}),V=e.computed(()=>L.value+i.value.width/2),A=e.computed(()=>w.value+i.value.height/2+.5),v=t=>{const a=b.value/(l.data.length-1||1);return l.padding.left+t*a},X=t=>{const a=s.value-l.padding.top-l.padding.bottom,o=a/p.value;return l.padding.top+a-t*o},D=t=>{const a=s.value-l.padding.top-l.padding.bottom,o=(s.value-l.padding.bottom-t)/a*p.value;return x(Math.round(o))},x=t=>`${t}${l.valueSuffix}`,R=(t,a)=>{const o=l.labels[a]||`Point ${a+1}`,r=Number(t.value),c=Number.isFinite(r)?r.toLocaleString():String(t.value??0),S=`${o}: ${x(c)}`,T=Math.min(280,Math.max(120,S.length*7.2+20));i.value={visible:!0,x:Number(t.x)||0,y:Number(t.y)||0,width:T,height:28,content:S},N("point-hover",{value:t.value,index:a,label:o})},Y=()=>{i.value.visible=!1},P=t=>!l.autoSkipXAxisLabels||l.labels.length<=2?!0:t%k.value===0||t===l.labels.length-1,z=t=>{const a=String(t??"");return a?!l.maxLabelLength||l.maxLabelLength<=0||a.length<=l.maxLabelLength?a:`${a.slice(0,Math.max(1,l.maxLabelLength-1))}…`:""},F=t=>{if(!g.value)return;const a=v(t),o=B.value;return`rotate(${l.labelRotationDegrees} ${a} ${o})`};return e.onMounted(()=>{m=new ResizeObserver(t=>{const a=t[0];if(!a)return;const{width:o,height:r}=a.contentRect;d.value={width:Math.round(o),height:Math.round(r)}}),f.value&&m.observe(f.value)}),e.onBeforeUnmount(()=>{m&&m.disconnect()}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:f,class:"ui-surface w-full h-full"},[(e.openBlock(),e.createElementBlock("svg",{width:h.value,height:s.value,viewBox:`0 0 ${h.value} ${s.value}`,class:"block mx-auto overflow-visible"},[n.showGrid?(e.openBlock(),e.createElementBlock("g",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,o=>(e.openBlock(),e.createElementBlock("line",{key:`grid-${o}`,x1:n.padding.left,y1:o,x2:h.value-n.padding.right,y2:o,stroke:n.gridColor,"stroke-width":"1","stroke-dasharray":"2,2"},null,8,H))),128))])):e.createCommentVNode("",!0),e.createElementVNode("path",{d:M.value,stroke:n.lineColor,"stroke-width":n.strokeWidth,fill:"none",class:e.normalizeClass(n.lineClasses)},null,10,j),n.showPoints?(e.openBlock(),e.createElementBlock("g",q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,(o,r)=>(e.openBlock(),e.createElementBlock("circle",{key:`point-${r}`,cx:o.x,cy:o.y,r:n.pointRadius,fill:n.pointColor,stroke:n.lineColor,"stroke-width":2,class:e.normalizeClass(n.pointClasses),onMouseenter:c=>R(o,r),onMouseleave:Y},null,42,G))),128))])):e.createCommentVNode("",!0),n.showValues?(e.openBlock(),e.createElementBlock("g",U,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,(o,r)=>(e.openBlock(),e.createElementBlock("text",{key:`value-${r}`,x:o.x,y:o.y-10,class:"fill-(--ui-text) text-[10px] font-semibold","text-anchor":"middle"},e.toDisplayString(x(o.value)),9,Z))),128))])):e.createCommentVNode("",!0),n.fillArea?(e.openBlock(),e.createElementBlock("path",{key:3,d:$.value,fill:n.fillColor,"fill-opacity":n.fillOpacity},null,8,I)):e.createCommentVNode("",!0),n.showXAxis?(e.openBlock(),e.createElementBlock("g",J,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.labels,(o,r)=>e.withDirectives((e.openBlock(),e.createElementBlock("text",{key:`xlabel-${r}`,x:v(r),y:B.value,class:e.normalizeClass(n.axisLabelClasses),"text-anchor":E.value,transform:F(r)},e.toDisplayString(z(o)),11,K)),[[e.vShow,P(r)]])),128))])):e.createCommentVNode("",!0),n.showYAxis?(e.openBlock(),e.createElementBlock("g",Q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,o=>(e.openBlock(),e.createElementBlock("text",{key:`ylabel-${o}`,x:n.padding.left-10,y:o+4,class:e.normalizeClass(n.axisLabelClasses),"text-anchor":"end"},e.toDisplayString(D(o)),11,_))),128))])):e.createCommentVNode("",!0),i.value.visible?(e.openBlock(),e.createElementBlock("g",ee,[e.createElementVNode("rect",{x:L.value,y:w.value,width:i.value.width,height:i.value.height,fill:n.tooltipBackground,stroke:n.tooltipBorder,"stroke-width":"1",rx:"4"},null,8,te),e.createElementVNode("text",{x:V.value,y:A.value,class:e.normalizeClass(n.tooltipTextClasses),"text-anchor":"middle","dominant-baseline":"middle"},e.toDisplayString(i.value.content),11,le)])):e.createCommentVNode("",!0)],8,W))],512))}};exports.default=ae;