@gspa/ui 0.1.3 → 0.2.0

package/dist/components/Footer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),i=require("../utils/cn.cjs"),n=require("./Divider.cjs"),l=require("./Icon.cjs"),o=require("./Link.cjs"),u=require("./Logo.cjs"),r=require("./Text.cjs"),a=require("./Typography.cjs"),c={class:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"},x={class:"grid grid-cols-1 md:grid-cols-4 gap-8"},f={class:"col-span-1 md:col-span-2"},m={class:"space-y-2"},N={class:"flex space-x-4"},V={class:"flex flex-col md:flex-row justify-between items-center"},p={class:"flex space-x-6 mt-4 md:mt-0"},v={__name:"Footer",props:{className:{type:String,default:""}},setup(d){return(s,t)=>(e.openBlock(),e.createElementBlock("footer",{class:e.normalizeClass(e.unref(i.cn)(" border-t ",d.className))},[e.createElementVNode("div",c,[e.createElementVNode("div",x,[e.createElementVNode("div",f,[e.renderSlot(s.$slots,"brand",{},()=>[e.createVNode(u.default,{class:"mb-4"}),e.createVNode(r.default,{class:"ui-text max-w-md"},{default:e.withCtx(()=>[...t[0]||(t[0]=[e.createTextVNode(" Building beautiful applications with modern Vue.js components. ",-1)])]),_:1})])]),e.createElementVNode("div",null,[e.renderSlot(s.$slots,"links",{},()=>[e.createVNode(a.default,{variant:"text-sm",class:"mb-4"},{default:e.withCtx(()=>[...t[1]||(t[1]=[e.createTextVNode(" Quick Links ",-1)])]),_:1}),e.createElementVNode("div",m,[e.createVNode(o.default,{href:"#",class:"block ui-text hover:text-(--ui-text)"},{default:e.withCtx(()=>[...t[2]||(t[2]=[e.createTextVNode(" About ",-1)])]),_:1}),e.createVNode(o.default,{href:"#",class:"block ui-text hover:text-(--ui-text)"},{default:e.withCtx(()=>[...t[3]||(t[3]=[e.createTextVNode(" Services ",-1)])]),_:1}),e.createVNode(o.default,{href:"#",class:"block ui-text hover:text-(--ui-text)"},{default:e.withCtx(()=>[...t[4]||(t[4]=[e.createTextVNode(" Contact ",-1)])]),_:1})])])]),e.createElementVNode("div",null,[e.renderSlot(s.$slots,"social",{},()=>[e.createVNode(a.default,{variant:"text-sm",class:"mb-4"},{default:e.withCtx(()=>[...t[5]||(t[5]=[e.createTextVNode(" Follow Us ",-1)])]),_:1}),e.createElementVNode("div",N,[e.createVNode(o.default,{href:"#",class:"ui-text hover:text-(--ui-text)"},{default:e.withCtx(()=>[e.createVNode(l.default,{name:"square-x-twitter",prefix:"fab",class:"h-5 w-5"})]),_:1}),e.createVNode(o.default,{href:"#",class:"ui-text hover:text-(--ui-text)"},{default:e.withCtx(()=>[e.createVNode(l.default,{name:"github",prefix:"fab",class:"h-5 w-5"})]),_:1})])])])]),e.createVNode(n.default,{class:"my-8"}),e.createElementVNode("div",V,[e.renderSlot(s.$slots,"copyright",{},()=>[e.createVNode(r.default,{class:"ui-text"},{default:e.withCtx(()=>[e.createTextVNode(" © "+e.toDisplayString(new Date().getFullYear())+" Your Company. All rights reserved. ",1)]),_:1})]),e.renderSlot(s.$slots,"legal",{},()=>[e.createElementVNode("div",p,[e.createVNode(o.default,{href:"#",class:"ui-text hover:text-(--ui-text)"},{default:e.withCtx(()=>[...t[6]||(t[6]=[e.createTextVNode(" Privacy ",-1)])]),_:1}),e.createVNode(o.default,{href:"#",class:"ui-text hover:text-(--ui-text)"},{default:e.withCtx(()=>[...t[7]||(t[7]=[e.createTextVNode(" Terms ",-1)])]),_:1})])])])])],2))}};exports.default=v;

package/dist/components/Footer.js

@@ -0,0 +1,157 @@
+import { createElementBlock as d, openBlock as x, normalizeClass as c, unref as p, createElementVNode as l, createVNode as s, renderSlot as a, withCtx as e, createTextVNode as o, toDisplayString as _ } from "vue";
+import { cn as v } from "../utils/cn.js";
+import b from "./Divider.js";
+import m from "./Icon.js";
+import i from "./Link.js";
+import g from "./Logo.js";
+import f from "./Text.js";
+import n from "./Typography.js";
+const h = { class: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12" }, w = { class: "grid grid-cols-1 md:grid-cols-4 gap-8" }, $ = { class: "col-span-1 md:col-span-2" }, y = { class: "space-y-2" }, k = { class: "flex space-x-4" }, N = { class: "flex flex-col md:flex-row justify-between items-center" }, C = { class: "flex space-x-6 mt-4 md:mt-0" }, T = {
+  __name: "Footer",
+  props: {
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(u) {
+    return (r, t) => (x(), d("footer", {
+      class: c(p(v)(" border-t ", u.className))
+    }, [
+      l("div", h, [
+        l("div", w, [
+          l("div", $, [
+            a(r.$slots, "brand", {}, () => [
+              s(g, { class: "mb-4" }),
+              s(f, { class: "ui-text max-w-md" }, {
+                default: e(() => [...t[0] || (t[0] = [
+                  o(" Building beautiful applications with modern Vue.js components. ", -1)
+                ])]),
+                _: 1
+              })
+            ])
+          ]),
+          l("div", null, [
+            a(r.$slots, "links", {}, () => [
+              s(n, {
+                variant: "text-sm",
+                class: "mb-4"
+              }, {
+                default: e(() => [...t[1] || (t[1] = [
+                  o(" Quick Links ", -1)
+                ])]),
+                _: 1
+              }),
+              l("div", y, [
+                s(i, {
+                  href: "#",
+                  class: "block ui-text hover:text-(--ui-text)"
+                }, {
+                  default: e(() => [...t[2] || (t[2] = [
+                    o(" About ", -1)
+                  ])]),
+                  _: 1
+                }),
+                s(i, {
+                  href: "#",
+                  class: "block ui-text hover:text-(--ui-text)"
+                }, {
+                  default: e(() => [...t[3] || (t[3] = [
+                    o(" Services ", -1)
+                  ])]),
+                  _: 1
+                }),
+                s(i, {
+                  href: "#",
+                  class: "block ui-text hover:text-(--ui-text)"
+                }, {
+                  default: e(() => [...t[4] || (t[4] = [
+                    o(" Contact ", -1)
+                  ])]),
+                  _: 1
+                })
+              ])
+            ])
+          ]),
+          l("div", null, [
+            a(r.$slots, "social", {}, () => [
+              s(n, {
+                variant: "text-sm",
+                class: "mb-4"
+              }, {
+                default: e(() => [...t[5] || (t[5] = [
+                  o(" Follow Us ", -1)
+                ])]),
+                _: 1
+              }),
+              l("div", k, [
+                s(i, {
+                  href: "#",
+                  class: "ui-text hover:text-(--ui-text)"
+                }, {
+                  default: e(() => [
+                    s(m, {
+                      name: "square-x-twitter",
+                      prefix: "fab",
+                      class: "h-5 w-5"
+                    })
+                  ]),
+                  _: 1
+                }),
+                s(i, {
+                  href: "#",
+                  class: "ui-text hover:text-(--ui-text)"
+                }, {
+                  default: e(() => [
+                    s(m, {
+                      name: "github",
+                      prefix: "fab",
+                      class: "h-5 w-5"
+                    })
+                  ]),
+                  _: 1
+                })
+              ])
+            ])
+          ])
+        ]),
+        s(b, { class: "my-8" }),
+        l("div", N, [
+          a(r.$slots, "copyright", {}, () => [
+            s(f, { class: "ui-text" }, {
+              default: e(() => [
+                o(" © " + _((/* @__PURE__ */ new Date()).getFullYear()) + " Your Company. All rights reserved. ", 1)
+              ]),
+              _: 1
+            })
+          ]),
+          a(r.$slots, "legal", {}, () => [
+            l("div", C, [
+              s(i, {
+                href: "#",
+                class: "ui-text hover:text-(--ui-text)"
+              }, {
+                default: e(() => [...t[6] || (t[6] = [
+                  o(" Privacy ", -1)
+                ])]),
+                _: 1
+              }),
+              s(i, {
+                href: "#",
+                class: "ui-text hover:text-(--ui-text)"
+              }, {
+                default: e(() => [...t[7] || (t[7] = [
+                  o(" Terms ", -1)
+                ])]),
+                _: 1
+              })
+            ])
+          ])
+        ])
+      ])
+    ], 2));
+  }
+};
+export {
+  T as default
+};

package/dist/components/FormField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../FormField.vue_vue_type_script_setup_true_lang-mEO-VA6R.cjs");exports.default=e._sfc_main;

package/dist/components/FormField.js

@@ -0,0 +1,4 @@
+import { _ as f } from "../FormField.vue_vue_type_script_setup_true_lang-DimMUyA-.js";
+export {
+  f as default
+};

package/dist/components/Graph.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("class-variance-authority"),r=require("../utils/cn.cjs"),p={class:"flex items-start justify-between"},u={class:"flex-1 min-w-0"},m={key:0,class:"shrink-0 ml-4"},g="text-lg font-semibold ui-text truncate",f="text-sm ui-text mt-1",v={__name:"Graph",props:{variant:{type:String,default:"default",validator:t=>["default","outlined","elevated","filled"].includes(t)},padding:{type:String,default:"md",validator:t=>["none","sm","md","lg","xl"].includes(t)},title:String,description:String},setup(t){const l=a.cva("rounded-lg overflow-hidden transition-all duration-200",{variants:{variant:{default:" border ",outlined:" border-2 ",elevated:" shadow-lg border ",filled:" border "},padding:{none:"",sm:"p-3",md:"p-4",lg:"p-6",xl:"p-8"}},defaultVariants:{variant:"default",padding:"md"}}),o=a.cva("border-b ui-border-strong last:border-b-0",{variants:{padding:{none:"p-4 pb-0",sm:"px-3 pt-3",md:"px-4 pt-4",lg:"px-6 pt-6",xl:"px-8 pt-8"}}}),s=a.cva("border-b ui-border-strong",{variants:{padding:{none:"p-4 pb-0",sm:"px-3 py-3",md:"px-4 py-4",lg:"px-6 py-6",xl:"px-8 py-8"}}}),d=a.cva("",{variants:{padding:{none:"p-4",sm:"p-3",md:"p-4",lg:"p-6",xl:"p-8"}}}),i=a.cva("border-t ui-border-strong bg-[color:color-mix(in oklab, var(--ui-surface), transparent 50%)]",{variants:{padding:{none:"p-4 pt-0",sm:"px-3 pb-3",md:"px-4 pb-4",lg:"px-6 pb-6",xl:"px-8 pb-8"}}}),c=a.cva("border-t ui-border-strong bg-[color:color-mix(in oklab, var(--ui-surface), transparent 50%)]",{variants:{padding:{none:"p-4 pt-0",sm:"px-3 pb-3",md:"px-4 pb-4",lg:"px-6 pb-6",xl:"px-8 pb-8"}}});return(n,b)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(r.cn)(e.unref(l)({variant:t.variant,padding:t.padding})))},[n.$slots.header||t.title||t.description?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(r.cn)(e.unref(o)({padding:t.padding})))},[e.renderSlot(n.$slots,"header",{},()=>[e.createElementVNode("div",p,[e.createElementVNode("div",u,[t.title?(e.openBlock(),e.createElementBlock("h3",{key:0,class:e.normalizeClass(g)},e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.description?(e.openBlock(),e.createElementBlock("p",{key:1,class:e.normalizeClass(f)},e.toDisplayString(t.description),1)):e.createCommentVNode("",!0)]),n.$slots.actions?(e.openBlock(),e.createElementBlock("div",m,[e.renderSlot(n.$slots,"actions")])):e.createCommentVNode("",!0)])])],2)):e.createCommentVNode("",!0),n.$slots.filters?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(r.cn)(e.unref(s)({padding:t.padding})))},[e.renderSlot(n.$slots,"filters")],2)):e.createCommentVNode("",!0),n.$slots.default?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(e.unref(r.cn)(e.unref(d)({padding:t.padding})))},[e.renderSlot(n.$slots,"default")],2)):e.createCommentVNode("",!0),n.$slots.legend?(e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(e.unref(r.cn)(e.unref(i)({padding:t.padding})))},[e.renderSlot(n.$slots,"legend")],2)):e.createCommentVNode("",!0),n.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:4,class:e.normalizeClass(e.unref(r.cn)(e.unref(c)({padding:t.padding})))},[e.renderSlot(n.$slots,"footer")],2)):e.createCommentVNode("",!0)],2))}};exports.default=v;

package/dist/components/Graph.js

@@ -0,0 +1,164 @@
+import { createElementBlock as n, openBlock as d, normalizeClass as s, unref as a, createCommentVNode as i, renderSlot as r, createElementVNode as p, toDisplayString as g } from "vue";
+import { cva as l } from "class-variance-authority";
+import { cn as o } from "../utils/cn.js";
+const x = { class: "flex items-start justify-between" }, y = { class: "flex-1 min-w-0" }, h = {
+  key: 0,
+  class: "shrink-0 ml-4"
+}, k = "text-lg font-semibold ui-text truncate", $ = "text-sm ui-text mt-1", B = {
+  __name: "Graph",
+  props: {
+    variant: {
+      type: String,
+      default: "default",
+      validator: (t) => ["default", "outlined", "elevated", "filled"].includes(t)
+    },
+    padding: {
+      type: String,
+      default: "md",
+      validator: (t) => ["none", "sm", "md", "lg", "xl"].includes(t)
+    },
+    title: String,
+    description: String
+  },
+  setup(t) {
+    const u = l(
+      "rounded-lg overflow-hidden transition-all duration-200",
+      {
+        variants: {
+          variant: {
+            default: " border ",
+            outlined: " border-2 ",
+            elevated: " shadow-lg border ",
+            filled: " border "
+          },
+          padding: {
+            none: "",
+            sm: "p-3",
+            md: "p-4",
+            lg: "p-6",
+            xl: "p-8"
+          }
+        },
+        defaultVariants: {
+          variant: "default",
+          padding: "md"
+        }
+      }
+    ), c = l(
+      "border-b ui-border-strong last:border-b-0",
+      {
+        variants: {
+          padding: {
+            none: "p-4 pb-0",
+            sm: "px-3 pt-3",
+            md: "px-4 pt-4",
+            lg: "px-6 pt-6",
+            xl: "px-8 pt-8"
+          }
+        }
+      }
+    ), m = l(
+      "border-b ui-border-strong",
+      {
+        variants: {
+          padding: {
+            none: "p-4 pb-0",
+            sm: "px-3 py-3",
+            md: "px-4 py-4",
+            lg: "px-6 py-6",
+            xl: "px-8 py-8"
+          }
+        }
+      }
+    ), b = l("", {
+      variants: {
+        padding: {
+          none: "p-4",
+          sm: "p-3",
+          md: "p-4",
+          lg: "p-6",
+          xl: "p-8"
+        }
+      }
+    }), f = l(
+      "border-t ui-border-strong bg-[color:color-mix(in oklab, var(--ui-surface), transparent 50%)]",
+      {
+        variants: {
+          padding: {
+            none: "p-4 pt-0",
+            sm: "px-3 pb-3",
+            md: "px-4 pb-4",
+            lg: "px-6 pb-6",
+            xl: "px-8 pb-8"
+          }
+        }
+      }
+    ), v = l(
+      "border-t ui-border-strong bg-[color:color-mix(in oklab, var(--ui-surface), transparent 50%)]",
+      {
+        variants: {
+          padding: {
+            none: "p-4 pt-0",
+            sm: "px-3 pb-3",
+            md: "px-4 pb-4",
+            lg: "px-6 pb-6",
+            xl: "px-8 pb-8"
+          }
+        }
+      }
+    );
+    return (e, V) => (d(), n("div", {
+      class: s(a(o)(a(u)({ variant: t.variant, padding: t.padding })))
+    }, [
+      e.$slots.header || t.title || t.description ? (d(), n("div", {
+        key: 0,
+        class: s(a(o)(a(c)({ padding: t.padding })))
+      }, [
+        r(e.$slots, "header", {}, () => [
+          p("div", x, [
+            p("div", y, [
+              t.title ? (d(), n("h3", {
+                key: 0,
+                class: s(k)
+              }, g(t.title), 1)) : i("", !0),
+              t.description ? (d(), n("p", {
+                key: 1,
+                class: s($)
+              }, g(t.description), 1)) : i("", !0)
+            ]),
+            e.$slots.actions ? (d(), n("div", h, [
+              r(e.$slots, "actions")
+            ])) : i("", !0)
+          ])
+        ])
+      ], 2)) : i("", !0),
+      e.$slots.filters ? (d(), n("div", {
+        key: 1,
+        class: s(a(o)(a(m)({ padding: t.padding })))
+      }, [
+        r(e.$slots, "filters")
+      ], 2)) : i("", !0),
+      e.$slots.default ? (d(), n("div", {
+        key: 2,
+        class: s(a(o)(a(b)({ padding: t.padding })))
+      }, [
+        r(e.$slots, "default")
+      ], 2)) : i("", !0),
+      e.$slots.legend ? (d(), n("div", {
+        key: 3,
+        class: s(a(o)(a(f)({ padding: t.padding })))
+      }, [
+        r(e.$slots, "legend")
+      ], 2)) : i("", !0),
+      e.$slots.footer ? (d(), n("div", {
+        key: 4,
+        class: s(a(o)(a(v)({ padding: t.padding })))
+      }, [
+        r(e.$slots, "footer")
+      ], 2)) : i("", !0)
+    ], 2));
+  }
+};
+export {
+  B as default
+};

package/dist/components/GraphFilters.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),z=require("class-variance-authority"),D=require("../utils/cn.cjs"),m=require("../Button.vue_vue_type_script_setup_true_lang-DZxttvYH.cjs"),y=require("./Select.cjs"),u=require("./Icon.cjs"),$={class:"border-b"},q={key:0,class:"flex items-center gap-3 min-w-64"},A={class:"relative flex-1"},R={class:"relative flex-1"},U={key:1,class:"min-w-40"},L={class:"relative"},M={key:2,class:"min-w-40"},I={class:"relative"},P=["value"],j={key:3,class:"flex items-center gap-2"},G={class:"flex items-center gap-3 ml-auto"},O={class:"flex items-center gap-3 flex-wrap"},H=["onClick"],J={__name:"GraphFilters",props:{showDateFilter:{type:Boolean,default:!0},showChartTypeFilter:{type:Boolean,default:!0},showExport:{type:Boolean,default:!1},showRefresh:{type:Boolean,default:!0},dataSources:{type:Array,default:()=>[]},variant:{type:String,default:"default",validator:o=>["default","minimal","bordered"].includes(o)},padding:{type:String,default:"normal",validator:o=>["compact","normal","comfortable"].includes(o)}},emits:["update:dateFrom","update:dateTo","update:chartType","update:dataSource","export","refresh","clear-filters"],setup(o,{emit:h}){const c=o,i=h,r=e.ref(""),s=e.ref(""),d=e.ref("bar"),n=e.ref(""),g=z.cva("flex flex-wrap items-center gap-4",{variants:{variant:{default:"",minimal:"bg-transparent",bordered:""},padding:{compact:"px-4 py-3",normal:"px-6 py-4",comfortable:"px-8 py-6"}},defaultVariants:{variant:"default",padding:"normal"}}),x=e.computed(()=>r.value||s.value||n.value),p=e.computed(()=>{const l=[];if(r.value||s.value){let t="";r.value&&s.value?t=`${r.value} to ${s.value}`:r.value?t=`From ${r.value}`:s.value&&(t=`Until ${s.value}`),t&&l.push({key:"date",label:"Date Range",value:t,icon:"calendar"})}if(n.value){const t=c.dataSources.find(a=>a.value===n.value);l.push({key:"dataSource",label:"Data Source",value:t?.label||n.value,icon:"database"})}return l}),C=e.computed(()=>D.cn(g({variant:c.variant,padding:c.padding}))),v=e.computed(()=>"w-full pl-10 pr-3 py-2 border ui-border-strong  rounded-lg focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:border-transparent text-sm ui-surface "),f=e.computed(()=>"w-full pr-8 appearance-none border ui-border-strong  rounded-lg focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:border-transparent text-sm py-2 pl-3 ui-surface "),V=e.computed(()=>"ui-text hover:text-(--ui-text) border   hover:brightness-105 px-3 py-2 rounded-lg text-sm font-medium transition-all"),k=e.computed(()=>"ui-text ui-primary-bg hover:bg-(--ui-primary-strong) border border-(--ui-primary)  px-3 py-2 rounded-lg text-sm font-medium transition-all"),b=e.computed(()=>"ui-text hover:text-(--ui-text) border   hover:brightness-105 px-3 py-2 rounded-lg text-sm font-medium transition-all"),N=e.computed(()=>"px-6 py-3 ui-primary-soft border-t border-(--ui-primary-soft)"),B=e.computed(()=>"text-sm font-semibold ui-primary"),w=e.computed(()=>"flex items-center gap-1.5 ui-surface border border-(--ui-primary-soft) ui-primary px-3 py-1.5 rounded-full text-sm font-medium"),E=e.computed(()=>"ui-primary hover:text-(--ui-primary) ml-1 hover:bg-(--ui-primary-soft) rounded-full p-0.5 transition-all"),F=l=>{d.value=l.target.value,i("update:chartType",l.target.value)},S=l=>{n.value=l.target.value,i("update:dataSource",l.target.value)},T=()=>{r.value="",s.value="",n.value="",i("clear-filters")},_=l=>{switch(l){case"date":r.value="",s.value="";break;case"dataSource":n.value="";break}};return e.watch(()=>r.value,l=>{i("update:dateFrom",l)}),e.watch(()=>s.value,l=>{i("update:dateTo",l)}),(l,t)=>(e.openBlock(),e.createElementBlock("div",$,[e.createElementVNode("div",{class:e.normalizeClass(C.value)},[o.showDateFilter?(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("div",A,[e.createVNode(u.default,{icon:"calendar",class:"absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 ui-text"}),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":t[0]||(t[0]=a=>r.value=a),type:"date",class:e.normalizeClass(v.value),placeholder:"From date"},null,2),[[e.vModelText,r.value]])]),t[6]||(t[6]=e.createElementVNode("span",{class:"ui-text text-sm"},"to",-1)),e.createElementVNode("div",R,[e.createVNode(u.default,{icon:"calendar",class:"absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 ui-text"}),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":t[1]||(t[1]=a=>s.value=a),type:"date",class:e.normalizeClass(v.value),placeholder:"To date"},null,2),[[e.vModelText,s.value]])])])):e.createCommentVNode("",!0),o.showChartTypeFilter?(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("div",L,[e.createVNode(y.default,{modelValue:d.value,"onUpdate:modelValue":t[2]||(t[2]=a=>d.value=a),class:e.normalizeClass(f.value),onChange:F},{default:e.withCtx(()=>[...t[7]||(t[7]=[e.createElementVNode("option",{value:"bar"}," Bar Chart ",-1),e.createElementVNode("option",{value:"line"}," Line Chart ",-1),e.createElementVNode("option",{value:"pie"}," Pie Chart ",-1)])]),_:1},8,["modelValue","class"]),e.createVNode(u.default,{icon:"chart-bar",class:"absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 ui-text pointer-events-none"})])])):e.createCommentVNode("",!0),o.dataSources.length>0?(e.openBlock(),e.createElementBlock("div",M,[e.createElementVNode("div",I,[e.createVNode(y.default,{modelValue:n.value,"onUpdate:modelValue":t[3]||(t[3]=a=>n.value=a),class:e.normalizeClass(f.value),onChange:S},{default:e.withCtx(()=>[t[8]||(t[8]=e.createElementVNode("option",{value:""}," All Sources ",-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.dataSources,a=>(e.openBlock(),e.createElementBlock("option",{key:a.value,value:a.value},e.toDisplayString(a.label),9,P))),128))]),_:1},8,["modelValue","class"]),e.createVNode(u.default,{icon:"database",class:"absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 ui-text pointer-events-none"})])])):e.createCommentVNode("",!0),l.$slots.filters?(e.openBlock(),e.createElementBlock("div",j,[e.renderSlot(l.$slots,"filters")])):e.createCommentVNode("",!0),e.createElementVNode("div",G,[x.value?(e.openBlock(),e.createBlock(m._sfc_main,{key:0,class:e.normalizeClass(V.value),onClick:T},{default:e.withCtx(()=>[e.createVNode(u.default,{icon:"rotate-left",class:"w-4 h-4 mr-2"}),t[9]||(t[9]=e.createTextVNode(" Clear Filters ",-1))]),_:1},8,["class"])):e.createCommentVNode("",!0),o.showExport?(e.openBlock(),e.createBlock(m._sfc_main,{key:1,class:e.normalizeClass(k.value),onClick:t[4]||(t[4]=a=>l.$emit("export"))},{default:e.withCtx(()=>[e.createVNode(u.default,{icon:"download",class:"w-4 h-4 mr-2"}),t[10]||(t[10]=e.createTextVNode(" Export ",-1))]),_:1},8,["class"])):e.createCommentVNode("",!0),o.showRefresh?(e.openBlock(),e.createBlock(m._sfc_main,{key:2,class:e.normalizeClass(b.value),onClick:t[5]||(t[5]=a=>l.$emit("refresh"))},{default:e.withCtx(()=>[e.createVNode(u.default,{icon:"sync",class:"w-4 h-4 mr-2"}),t[11]||(t[11]=e.createTextVNode(" Refresh ",-1))]),_:1},8,["class"])):e.createCommentVNode("",!0)])],2),p.value.length>0?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(N.value)},[e.createElementVNode("div",O,[e.createElementVNode("span",{class:e.normalizeClass(B.value)},"Active filters:",2),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,a=>(e.openBlock(),e.createElementBlock("div",{key:a.key,class:e.normalizeClass(w.value)},[e.createVNode(u.default,{icon:a.icon,class:"w-3 h-3"},null,8,["icon"]),e.createElementVNode("span",null,e.toDisplayString(a.label)+": "+e.toDisplayString(a.value),1),e.createElementVNode("button",{class:e.normalizeClass(E.value),onClick:K=>_(a.key)},[e.createVNode(u.default,{icon:"circle-xmark",class:"w-3 h-3"})],10,H)],2))),128))])],2)):e.createCommentVNode("",!0)]))}};exports.default=J;

package/dist/components/GraphFilters.js

@@ -0,0 +1,305 @@
+import { ref as h, computed as r, watch as $, createElementBlock as c, openBlock as s, createElementVNode as l, createCommentVNode as m, normalizeClass as o, createVNode as d, withDirectives as T, vModelText as B, withCtx as y, Fragment as D, renderList as E, toDisplayString as b, renderSlot as O, createBlock as C, createTextVNode as w } from "vue";
+import { cva as Q } from "class-variance-authority";
+import { cn as W } from "../utils/cn.js";
+import { _ as k } from "../Button.vue_vue_type_script_setup_true_lang-B3TkBTvG.js";
+import R from "./Select.js";
+import v from "./Icon.js";
+const X = { class: "border-b" }, Y = {
+  key: 0,
+  class: "flex items-center gap-3 min-w-64"
+}, Z = { class: "relative flex-1" }, ee = { class: "relative flex-1" }, te = {
+  key: 1,
+  class: "min-w-40"
+}, ae = { class: "relative" }, le = {
+  key: 2,
+  class: "min-w-40"
+}, se = { class: "relative" }, re = ["value"], oe = {
+  key: 3,
+  class: "flex items-center gap-2"
+}, ne = { class: "flex items-center gap-3 ml-auto" }, ie = { class: "flex items-center gap-3 flex-wrap" }, ue = ["onClick"], he = {
+  __name: "GraphFilters",
+  props: {
+    showDateFilter: {
+      type: Boolean,
+      default: !0
+    },
+    showChartTypeFilter: {
+      type: Boolean,
+      default: !0
+    },
+    showExport: {
+      type: Boolean,
+      default: !1
+    },
+    showRefresh: {
+      type: Boolean,
+      default: !0
+    },
+    dataSources: {
+      type: Array,
+      default: () => []
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (n) => ["default", "minimal", "bordered"].includes(n)
+    },
+    padding: {
+      type: String,
+      default: "normal",
+      validator: (n) => ["compact", "normal", "comfortable"].includes(n)
+    }
+  },
+  emits: [
+    "update:dateFrom",
+    "update:dateTo",
+    "update:chartType",
+    "update:dataSource",
+    "export",
+    "refresh",
+    "clear-filters"
+  ],
+  setup(n, { emit: U }) {
+    const g = n, f = U, i = h(""), u = h(""), x = h("bar"), p = h(""), A = Q("flex flex-wrap items-center gap-4", {
+      variants: {
+        variant: {
+          default: "",
+          minimal: "bg-transparent",
+          bordered: ""
+        },
+        padding: {
+          compact: "px-4 py-3",
+          normal: "px-6 py-4",
+          comfortable: "px-8 py-6"
+        }
+      },
+      defaultVariants: {
+        variant: "default",
+        padding: "normal"
+      }
+    }), N = r(() => i.value || u.value || p.value), F = r(() => {
+      const a = [];
+      if (i.value || u.value) {
+        let e = "";
+        i.value && u.value ? e = `${i.value} to ${u.value}` : i.value ? e = `From ${i.value}` : u.value && (e = `Until ${u.value}`), e && a.push({
+          key: "date",
+          label: "Date Range",
+          value: e,
+          icon: "calendar"
+        });
+      }
+      if (p.value) {
+        const e = g.dataSources.find((t) => t.value === p.value);
+        a.push({
+          key: "dataSource",
+          label: "Data Source",
+          value: e?.label || p.value,
+          icon: "database"
+        });
+      }
+      return a;
+    }), _ = r(
+      () => W(A({
+        variant: g.variant,
+        padding: g.padding
+      }))
+    ), S = r(
+      () => "w-full pl-10 pr-3 py-2 border ui-border-strong  rounded-lg focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:border-transparent text-sm ui-surface "
+    ), V = r(
+      () => "w-full pr-8 appearance-none border ui-border-strong  rounded-lg focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:border-transparent text-sm py-2 pl-3 ui-surface "
+    ), L = r(
+      () => "ui-text hover:text-(--ui-text) border   hover:brightness-105 px-3 py-2 rounded-lg text-sm font-medium transition-all"
+    ), z = r(
+      () => "ui-text ui-primary-bg hover:bg-(--ui-primary-strong) border border-(--ui-primary)  px-3 py-2 rounded-lg text-sm font-medium transition-all"
+    ), G = r(
+      () => "ui-text hover:text-(--ui-text) border   hover:brightness-105 px-3 py-2 rounded-lg text-sm font-medium transition-all"
+    ), I = r(
+      () => "px-6 py-3 ui-primary-soft border-t border-(--ui-primary-soft)"
+    ), M = r(
+      () => "text-sm font-semibold ui-primary"
+    ), P = r(
+      () => "flex items-center gap-1.5 ui-surface border border-(--ui-primary-soft) ui-primary px-3 py-1.5 rounded-full text-sm font-medium"
+    ), j = r(
+      () => "ui-primary hover:text-(--ui-primary) ml-1 hover:bg-(--ui-primary-soft) rounded-full p-0.5 transition-all"
+    ), q = (a) => {
+      x.value = a.target.value, f("update:chartType", a.target.value);
+    }, H = (a) => {
+      p.value = a.target.value, f("update:dataSource", a.target.value);
+    }, J = () => {
+      i.value = "", u.value = "", p.value = "", f("clear-filters");
+    }, K = (a) => {
+      switch (a) {
+        case "date":
+          i.value = "", u.value = "";
+          break;
+        case "dataSource":
+          p.value = "";
+          break;
+      }
+    };
+    return $(() => i.value, (a) => {
+      f("update:dateFrom", a);
+    }), $(() => u.value, (a) => {
+      f("update:dateTo", a);
+    }), (a, e) => (s(), c("div", X, [
+      l("div", {
+        class: o(_.value)
+      }, [
+        n.showDateFilter ? (s(), c("div", Y, [
+          l("div", Z, [
+            d(v, {
+              icon: "calendar",
+              class: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 ui-text"
+            }),
+            T(l("input", {
+              "onUpdate:modelValue": e[0] || (e[0] = (t) => i.value = t),
+              type: "date",
+              class: o(S.value),
+              placeholder: "From date"
+            }, null, 2), [
+              [B, i.value]
+            ])
+          ]),
+          e[6] || (e[6] = l("span", { class: "ui-text text-sm" }, "to", -1)),
+          l("div", ee, [
+            d(v, {
+              icon: "calendar",
+              class: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 ui-text"
+            }),
+            T(l("input", {
+              "onUpdate:modelValue": e[1] || (e[1] = (t) => u.value = t),
+              type: "date",
+              class: o(S.value),
+              placeholder: "To date"
+            }, null, 2), [
+              [B, u.value]
+            ])
+          ])
+        ])) : m("", !0),
+        n.showChartTypeFilter ? (s(), c("div", te, [
+          l("div", ae, [
+            d(R, {
+              modelValue: x.value,
+              "onUpdate:modelValue": e[2] || (e[2] = (t) => x.value = t),
+              class: o(V.value),
+              onChange: q
+            }, {
+              default: y(() => [...e[7] || (e[7] = [
+                l("option", { value: "bar" }, " Bar Chart ", -1),
+                l("option", { value: "line" }, " Line Chart ", -1),
+                l("option", { value: "pie" }, " Pie Chart ", -1)
+              ])]),
+              _: 1
+            }, 8, ["modelValue", "class"]),
+            d(v, {
+              icon: "chart-bar",
+              class: "absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 ui-text pointer-events-none"
+            })
+          ])
+        ])) : m("", !0),
+        n.dataSources.length > 0 ? (s(), c("div", le, [
+          l("div", se, [
+            d(R, {
+              modelValue: p.value,
+              "onUpdate:modelValue": e[3] || (e[3] = (t) => p.value = t),
+              class: o(V.value),
+              onChange: H
+            }, {
+              default: y(() => [
+                e[8] || (e[8] = l("option", { value: "" }, " All Sources ", -1)),
+                (s(!0), c(D, null, E(n.dataSources, (t) => (s(), c("option", {
+                  key: t.value,
+                  value: t.value
+                }, b(t.label), 9, re))), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue", "class"]),
+            d(v, {
+              icon: "database",
+              class: "absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 ui-text pointer-events-none"
+            })
+          ])
+        ])) : m("", !0),
+        a.$slots.filters ? (s(), c("div", oe, [
+          O(a.$slots, "filters")
+        ])) : m("", !0),
+        l("div", ne, [
+          N.value ? (s(), C(k, {
+            key: 0,
+            class: o(L.value),
+            onClick: J
+          }, {
+            default: y(() => [
+              d(v, {
+                icon: "rotate-left",
+                class: "w-4 h-4 mr-2"
+              }),
+              e[9] || (e[9] = w(" Clear Filters ", -1))
+            ]),
+            _: 1
+          }, 8, ["class"])) : m("", !0),
+          n.showExport ? (s(), C(k, {
+            key: 1,
+            class: o(z.value),
+            onClick: e[4] || (e[4] = (t) => a.$emit("export"))
+          }, {
+            default: y(() => [
+              d(v, {
+                icon: "download",
+                class: "w-4 h-4 mr-2"
+              }),
+              e[10] || (e[10] = w(" Export ", -1))
+            ]),
+            _: 1
+          }, 8, ["class"])) : m("", !0),
+          n.showRefresh ? (s(), C(k, {
+            key: 2,
+            class: o(G.value),
+            onClick: e[5] || (e[5] = (t) => a.$emit("refresh"))
+          }, {
+            default: y(() => [
+              d(v, {
+                icon: "sync",
+                class: "w-4 h-4 mr-2"
+              }),
+              e[11] || (e[11] = w(" Refresh ", -1))
+            ]),
+            _: 1
+          }, 8, ["class"])) : m("", !0)
+        ])
+      ], 2),
+      F.value.length > 0 ? (s(), c("div", {
+        key: 0,
+        class: o(I.value)
+      }, [
+        l("div", ie, [
+          l("span", {
+            class: o(M.value)
+          }, "Active filters:", 2),
+          (s(!0), c(D, null, E(F.value, (t) => (s(), c("div", {
+            key: t.key,
+            class: o(P.value)
+          }, [
+            d(v, {
+              icon: t.icon,
+              class: "w-3 h-3"
+            }, null, 8, ["icon"]),
+            l("span", null, b(t.label) + ": " + b(t.value), 1),
+            l("button", {
+              class: o(j.value),
+              onClick: (de) => K(t.key)
+            }, [
+              d(v, {
+                icon: "circle-xmark",
+                class: "w-3 h-3"
+              })
+            ], 10, ue)
+          ], 2))), 128))
+        ])
+      ], 2)) : m("", !0)
+    ]));
+  }
+};
+export {
+  he as default
+};