@gspa/ui 0.1.1 → 0.1.4

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("vue"),r=require("class-variance-authority"),l=require("../utils/cn.cjs"),z=require("./DatePicker.cjs"),b=["for"],B={key:0,class:"ui-danger ml-1","aria-label":"required"},S={class:"relative"},C=["aria-label"],w=["id"],N=["id"],E={__name:"FormField",props:{label:String,description:String,error:String,success:String,helpText:String,required:{type:Boolean,default:!1},type:{type:String,default:"text"},modelValue:[String,Date],size:{type:String,default:"md",validator:t=>["sm","md","lg"].includes(t)},id:String},emits:["update:modelValue"],setup(t,{emit:v}){const o=t,f=v,y=`field-${Math.random().toString(36).slice(2,9)}`,a=e.computed(()=>`${o.id||y}-${Math.random().toString(36).slice(2,5)}`),i=e.computed(()=>!!o.error),n=e.ref(!1),d=()=>{n.value=!n.value},g=e.computed(()=>{const s=[];return o.error?s.push(`${a.value}-error`):o.helpText&&s.push(`${a.value}-help`),s.length>0?s.join(" "):void 0}),h=r.cva("ui-text",{variants:{size:{sm:"space-y-1",md:"space-y-2",lg:"space-y-3"}},defaultVariants:{size:"md"}}),V=r.cva("block ui-text",{variants:{size:{sm:"text-xs font-medium",md:"text-sm font-medium",lg:"text-base font-medium"}},defaultVariants:{size:"md"}}),k=r.cva("ui-text",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),u=r.cva("flex items-start gap-2",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-sm"},intent:{error:"ui-danger",success:"ui-success"}},defaultVariants:{size:"md",intent:"error"}}),x=r.cva("ui-text",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-sm"}},defaultVariants:{size:"md"}});return(s,m)=>{const c=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(l.cn)(e.unref(h)({size:t.size}),s.$attrs.class))},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:a.value,class:e.normalizeClass(e.unref(l.cn)(e.unref(V)({size:t.size})))},[e.createTextVNode(e.toDisplayString(t.label)+" ",1),t.required?(e.openBlock(),e.createElementBlock("span",B,"*")):e.createCommentVNode("",!0)],10,b)):e.createCommentVNode("",!0),t.description?(e.openBlock(),e.createElementBlock("p",{key:1,class:e.normalizeClass(e.unref(l.cn)(e.unref(k)({size:t.size})))},e.toDisplayString(t.description),3)):e.createCommentVNode("",!0),e.createElementVNode("div",S,[t.type==="date"?(e.openBlock(),e.createBlock(z.default,{key:0,id:a.value,"model-value":t.modelValue,disabled:!1,required:t.required,class:e.normalizeClass(i.value?"border-(--ui-danger)":""),"onUpdate:modelValue":m[0]||(m[0]=p=>f("update:modelValue",p))},null,8,["id","model-value","required","class"])):e.renderSlot(s.$slots,"default",{key:1,fieldId:a.value,hasError:i.value,ariaDescribedBy:g.value,showPassword:n.value,togglePasswordVisibility:d}),t.type==="password"?(e.openBlock(),e.createElementBlock("button",{key:2,type:"button",class:"absolute inset-y-0 right-0 pr-3 flex items-center ui-text hover:text-(--ui-text) transition-colors","aria-label":n.value?"Hide password":"Show password",onClick:d},[e.createVNode(c,{icon:n.value?"eye-slash":"eye",class:"w-4 h-4"},null,8,["icon"])],8,C)):e.createCommentVNode("",!0)]),e.createVNode(e.Transition,{"enter-active-class":"transition-all duration-200","enter-from-class":"opacity-0 -translate-y-1","enter-to-class":"opacity-100 translate-y-0","leave-active-class":"transition-all duration-150","leave-from-class":"opacity-100 translate-y-0","leave-to-class":"opacity-0 -translate-y-1"},{default:e.withCtx(()=>[i.value?(e.openBlock(),e.createElementBlock("div",{key:0,id:`${a.value}-error`,class:e.normalizeClass(e.unref(l.cn)(e.unref(u)({size:t.size,intent:"error"}))),role:"alert","aria-live":"polite"},[e.createVNode(c,{icon:"exclamation-triangle",class:"w-4 h-4 shrink-0 mt-0.5"}),e.createElementVNode("span",null,e.toDisplayString(t.error),1)],10,w)):e.createCommentVNode("",!0)]),_:1}),t.helpText&&!i.value?(e.openBlock(),e.createElementBlock("p",{key:2,id:`${a.value}-help`,class:e.normalizeClass(e.unref(l.cn)(e.unref(x)({size:t.size})))},e.toDisplayString(t.helpText),11,N)):e.createCommentVNode("",!0),e.createVNode(e.Transition,{"enter-active-class":"transition-all duration-200","enter-from-class":"opacity-0 -translate-y-1","enter-to-class":"opacity-100 translate-y-0","leave-active-class":"transition-all duration-150","leave-from-class":"opacity-100 translate-y-0","leave-to-class":"opacity-0 -translate-y-1"},{default:e.withCtx(()=>[t.success&&!i.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(l.cn)(e.unref(u)({size:t.size,intent:"success"})))},[e.createVNode(c,{icon:"check",class:"w-4 h-4 shrink-0 mt-0.5"}),e.createElementVNode("span",null,e.toDisplayString(t.success),1)],2)):e.createCommentVNode("",!0)]),_:1})],2)}}};exports.default=E;

package/dist/components/FormField.js

@@ -0,0 +1,190 @@
+import { computed as x, ref as E, resolveComponent as N, createElementBlock as s, openBlock as a, normalizeClass as r, unref as t, createCommentVNode as n, createElementVNode as h, createVNode as u, createTextVNode as P, toDisplayString as m, createBlock as I, renderSlot as F, Transition as b, withCtx as p } from "vue";
+import { cva as v } from "class-variance-authority";
+import { cn as o } from "../utils/cn.js";
+import M from "./DatePicker.js";
+const j = ["for"], H = {
+  key: 0,
+  class: "ui-danger ml-1",
+  "aria-label": "required"
+}, U = { class: "relative" }, A = ["aria-label"], G = ["id"], J = ["id"], R = {
+  __name: "FormField",
+  props: {
+    label: String,
+    description: String,
+    error: String,
+    success: String,
+    helpText: String,
+    required: { type: Boolean, default: !1 },
+    type: { type: String, default: "text" },
+    // Added type prop
+    modelValue: [String, Date],
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sm", "md", "lg"].includes(e)
+    },
+    id: String
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: k }) {
+    const f = e, w = k, S = `field-${Math.random().toString(36).slice(2, 9)}`, i = x(() => `${f.id || S}-${Math.random().toString(36).slice(2, 5)}`), c = x(() => !!f.error), d = E(!1), g = () => {
+      d.value = !d.value;
+    }, $ = x(() => {
+      const l = [];
+      return f.error ? l.push(`${i.value}-error`) : f.helpText && l.push(`${i.value}-help`), l.length > 0 ? l.join(" ") : void 0;
+    }), q = v("ui-text", {
+      variants: {
+        size: {
+          sm: "space-y-1",
+          md: "space-y-2",
+          lg: "space-y-3"
+        }
+      },
+      defaultVariants: { size: "md" }
+    }), B = v("block ui-text", {
+      variants: {
+        size: {
+          sm: "text-xs font-medium",
+          md: "text-sm font-medium",
+          lg: "text-base font-medium"
+        }
+      },
+      defaultVariants: { size: "md" }
+    }), T = v("ui-text", {
+      variants: {
+        size: {
+          sm: "text-xs",
+          md: "text-sm",
+          lg: "text-base"
+        }
+      },
+      defaultVariants: { size: "md" }
+    }), z = v("flex items-start gap-2", {
+      variants: {
+        size: {
+          sm: "text-xs",
+          md: "text-sm",
+          lg: "text-sm"
+        },
+        intent: {
+          error: "ui-danger",
+          success: "ui-success"
+        }
+      },
+      defaultVariants: { size: "md", intent: "error" }
+    }), C = v("ui-text", {
+      variants: {
+        size: {
+          sm: "text-xs",
+          md: "text-sm",
+          lg: "text-sm"
+        }
+      },
+      defaultVariants: { size: "md" }
+    });
+    return (l, V) => {
+      const y = N("font-awesome-icon");
+      return a(), s("div", {
+        class: r(t(o)(t(q)({ size: e.size }), l.$attrs.class))
+      }, [
+        e.label ? (a(), s("label", {
+          key: 0,
+          for: i.value,
+          class: r(t(o)(t(B)({ size: e.size })))
+        }, [
+          P(m(e.label) + " ", 1),
+          e.required ? (a(), s("span", H, "*")) : n("", !0)
+        ], 10, j)) : n("", !0),
+        e.description ? (a(), s("p", {
+          key: 1,
+          class: r(t(o)(t(T)({ size: e.size })))
+        }, m(e.description), 3)) : n("", !0),
+        h("div", U, [
+          e.type === "date" ? (a(), I(M, {
+            key: 0,
+            id: i.value,
+            "model-value": e.modelValue,
+            disabled: !1,
+            required: e.required,
+            class: r(c.value ? "border-(--ui-danger)" : ""),
+            "onUpdate:modelValue": V[0] || (V[0] = (D) => w("update:modelValue", D))
+          }, null, 8, ["id", "model-value", "required", "class"])) : F(l.$slots, "default", {
+            key: 1,
+            fieldId: i.value,
+            hasError: c.value,
+            ariaDescribedBy: $.value,
+            showPassword: d.value,
+            togglePasswordVisibility: g
+          }),
+          e.type === "password" ? (a(), s("button", {
+            key: 2,
+            type: "button",
+            class: "absolute inset-y-0 right-0 pr-3 flex items-center ui-text hover:text-(--ui-text) transition-colors",
+            "aria-label": d.value ? "Hide password" : "Show password",
+            onClick: g
+          }, [
+            u(y, {
+              icon: d.value ? "eye-slash" : "eye",
+              class: "w-4 h-4"
+            }, null, 8, ["icon"])
+          ], 8, A)) : n("", !0)
+        ]),
+        u(b, {
+          "enter-active-class": "transition-all duration-200",
+          "enter-from-class": "opacity-0 -translate-y-1",
+          "enter-to-class": "opacity-100 translate-y-0",
+          "leave-active-class": "transition-all duration-150",
+          "leave-from-class": "opacity-100 translate-y-0",
+          "leave-to-class": "opacity-0 -translate-y-1"
+        }, {
+          default: p(() => [
+            c.value ? (a(), s("div", {
+              key: 0,
+              id: `${i.value}-error`,
+              class: r(t(o)(t(z)({ size: e.size, intent: "error" }))),
+              role: "alert",
+              "aria-live": "polite"
+            }, [
+              u(y, {
+                icon: "exclamation-triangle",
+                class: "w-4 h-4 shrink-0 mt-0.5"
+              }),
+              h("span", null, m(e.error), 1)
+            ], 10, G)) : n("", !0)
+          ]),
+          _: 1
+        }),
+        e.helpText && !c.value ? (a(), s("p", {
+          key: 2,
+          id: `${i.value}-help`,
+          class: r(t(o)(t(C)({ size: e.size })))
+        }, m(e.helpText), 11, J)) : n("", !0),
+        u(b, {
+          "enter-active-class": "transition-all duration-200",
+          "enter-from-class": "opacity-0 -translate-y-1",
+          "enter-to-class": "opacity-100 translate-y-0",
+          "leave-active-class": "transition-all duration-150",
+          "leave-from-class": "opacity-100 translate-y-0",
+          "leave-to-class": "opacity-0 -translate-y-1"
+        }, {
+          default: p(() => [
+            e.success && !c.value ? (a(), s("div", {
+              key: 0,
+              class: r(t(o)(t(z)({ size: e.size, intent: "success" })))
+            }, [
+              u(y, {
+                icon: "check",
+                class: "w-4 h-4 shrink-0 mt-0.5"
+              }),
+              h("span", null, m(e.success), 1)
+            ], 2)) : n("", !0)
+          ]),
+          _: 1
+        })
+      ], 2);
+    };
+  }
+};
+export {
+  R 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"),D=require("class-variance-authority"),$=require("../utils/cn.cjs"),m=require("./Button.cjs"),y=require("./Select.cjs"),u=require("./Icon.cjs"),q={class:"border-b"},A={key:0,class:"flex items-center gap-3 min-w-64"},R={class:"relative flex-1"},U={class:"relative flex-1"},L={key:1,class:"min-w-40"},M={class:"relative"},_={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 d=o,i=h,r=e.ref(""),s=e.ref(""),c=e.ref("bar"),n=e.ref(""),x=D.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"}}),C=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=d.dataSources.find(a=>a.value===n.value);l.push({key:"dataSource",label:"Data Source",value:t?.label||n.value,icon:"database"})}return l}),g=e.computed(()=>$.cn(x({variant:d.variant,padding:d.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=>{c.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")},z=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",q,[e.createElementVNode("div",{class:e.normalizeClass(g.value)},[o.showDateFilter?(e.openBlock(),e.createElementBlock("div",A,[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[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",U,[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",L,[e.createElementVNode("div",M,[e.createVNode(y.default,{modelValue:c.value,"onUpdate:modelValue":t[2]||(t[2]=a=>c.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",_,[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,[C.value?(e.openBlock(),e.createBlock(m.default,{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.default,{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.default,{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=>z(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;