@leodamours/ds-components 0.2.3 → 0.2.4

package/dist/index.js

@@ -1,5 +1,5 @@
 import { defineComponent as S, ref as j, watch as we, computed as k, openBlock as g, createElementBlock as p, normalizeClass as T, toDisplayString as B, createCommentVNode as D, renderSlot as N, createTextVNode as X, createBlock as I, resolveDynamicComponent as $e, normalizeStyle as he, createElementVNode as F, shallowRef as Ft, getCurrentScope as Ct, onScopeDispose as $t, shallowReadonly as be, unref as R, mergeProps as de, createVNode as _, withCtx as Re, Teleport as Oe, withModifiers as Dt, Fragment as se, renderList as re, nextTick as je, withKeys as st, onBeforeUnmount as rt, Transition as at, onMounted as Et, TransitionGroup as At } from "vue";
-const Bt = ["aria-label"], Tt = ["src", "alt"], ts = /* @__PURE__ */ S({
+const Bt = ["aria-label"], Tt = ["src", "alt"], ns = /* @__PURE__ */ S({
   __name: "DsAvatar",
   props: {
     src: {},
@@ -57,7 +57,7 @@ const Bt = ["aria-label"], Tt = ["src", "alt"], ts = /* @__PURE__ */ S({
       }, B(o.value), 3))
     ], 10, Bt));
   }
-}), ns = /* @__PURE__ */ S({
+}), os = /* @__PURE__ */ S({
   __name: "DsBadge",
   props: {
     label: {},
@@ -241,7 +241,7 @@ const Bt = ["aria-label"], Tt = ["src", "alt"], ts = /* @__PURE__ */ S({
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   class: "w-full h-full"
-}, os = /* @__PURE__ */ S({
+}, ss = /* @__PURE__ */ S({
   __name: "DsCheckbox",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -1588,7 +1588,7 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
   key: 0,
   class: "px-3 py-2 text-sm text-fg-disabled",
   role: "status"
-}, ss = /* @__PURE__ */ S({
+}, rs = /* @__PURE__ */ S({
   __name: "DsDropdownSelect",
   props: {
     modelValue: {},
@@ -1781,7 +1781,7 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
   key: 1,
   class: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none",
   "aria-hidden": "true"
-}, rs = /* @__PURE__ */ S({
+}, as = /* @__PURE__ */ S({
   __name: "DsInput",
   props: {
     modelValue: {},
@@ -2005,7 +2005,7 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
 }), Qn = ["aria-labelledby"], Zn = { class: "flex items-center justify-between px-6 py-4 border-b border-solid border-border" }, _n = ["id"], eo = { class: "px-6 py-4 overflow-y-auto flex-1" }, to = {
   key: 0,
   class: "px-6 py-4 border-t border-solid border-border"
-}, as = /* @__PURE__ */ S({
+}, ls = /* @__PURE__ */ S({
   __name: "DsModal",
   props: {
     modelValue: { type: Boolean },
@@ -2114,7 +2114,7 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
       })
     ]));
   }
-}), no = ["id", "name", "checked", "disabled", "value"], ls = /* @__PURE__ */ S({
+}), no = ["id", "name", "checked", "disabled", "value"], is = /* @__PURE__ */ S({
   __name: "DsRadio",
   props: {
     modelValue: { type: [String, Number, Boolean] },
@@ -2203,7 +2203,7 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
 }, ao = { class: "relative" }, lo = ["id", "value", "disabled", "required", "aria-describedby", "aria-invalid"], io = ["selected"], co = ["value", "disabled"], uo = {
   class: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3",
   "aria-hidden": "true"
-}, is = /* @__PURE__ */ S({
+}, cs = /* @__PURE__ */ S({
   __name: "DsSelect",
   props: {
     modelValue: {},
@@ -2310,10 +2310,10 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
   key: 0,
   class: "inline-flex",
   "aria-hidden": "true"
-}, po = { key: 0 }, vo = ["colspan"], yo = { key: 1 }, xo = ["colspan"], wo = {
+}, po = { class: "border-solid border-border" }, vo = { key: 0 }, yo = ["colspan"], xo = { key: 1 }, wo = ["colspan"], ko = {
   key: 0,
   class: "flex items-center justify-between px-4 py-3 border-t border-solid border-border bg-bg-secondary text-sm"
-}, ko = { class: "text-fg-secondary" }, Fo = { class: "flex gap-2" }, Co = ["disabled"], $o = ["disabled"], cs = /* @__PURE__ */ S({
+}, Fo = { class: "text-fg-secondary" }, Co = { class: "flex gap-2" }, $o = ["disabled"], Do = ["disabled"], ds = /* @__PURE__ */ S({
   __name: "DsTable",
   props: {
     columns: {},
@@ -2386,8 +2386,8 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
             ], 14, go))), 128))
           ])
         ], 2),
-        F("tbody", null, [
-          e.loading ? (g(), p("tr", po, [
+        F("tbody", po, [
+          e.loading ? (g(), p("tr", vo, [
             F("td", {
               colspan: e.columns.length,
               class: "text-center py-12"
@@ -2395,8 +2395,8 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
               N(f.$slots, "loading", {}, () => [
                 _(Jn, { centered: "" })
               ])
-            ], 8, vo)
-          ])) : e.rows.length === 0 ? (g(), p("tr", yo, [
+            ], 8, yo)
+          ])) : e.rows.length === 0 ? (g(), p("tr", xo, [
             F("td", {
               colspan: e.columns.length,
               class: "text-center py-12 text-fg-secondary"
@@ -2404,7 +2404,7 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
               N(f.$slots, "empty", {}, () => [
                 X(B(e.emptyText), 1)
               ])
-            ], 8, xo)
+            ], 8, wo)
           ])) : D("", !0),
           (g(!0), p(se, null, re(e.rows, (m, h) => (g(), p("tr", {
             key: h,
@@ -2428,26 +2428,26 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
           ], 2))), 128))
         ])
       ]),
-      e.pagination ? (g(), p("div", wo, [
-        F("span", ko, B(r.value) + "–" + B(a.value) + " of " + B(e.pagination.total), 1),
-        F("div", Fo, [
+      e.pagination ? (g(), p("div", ko, [
+        F("span", Fo, B(r.value) + "–" + B(a.value) + " of " + B(e.pagination.total), 1),
+        F("div", Co, [
           F("button", {
             type: "button",
             disabled: e.pagination.page <= 1,
             class: "px-3 py-1 rounded-md border border-solid border-border bg-bg text-fg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-surface-hover-light transition-colors",
             onClick: u[0] || (u[0] = (m) => f.$emit("update:page", e.pagination.page - 1))
-          }, " Previous ", 8, Co),
+          }, " Previous ", 8, $o),
           F("button", {
             type: "button",
             disabled: e.pagination.page >= s.value,
             class: "px-3 py-1 rounded-md border border-solid border-border bg-bg text-fg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-surface-hover-light transition-colors",
             onClick: u[1] || (u[1] = (m) => f.$emit("update:page", e.pagination.page + 1))
-          }, " Next ", 8, $o)
+          }, " Next ", 8, Do)
         ])
       ])) : D("", !0)
     ]));
   }
-}), Do = ["aria-label"], Eo = ["id", "aria-selected", "aria-controls", "tabindex", "disabled", "onClick", "onKeydown"], Ao = ["id", "aria-labelledby", "hidden"], ds = /* @__PURE__ */ S({
+}), Eo = ["aria-label"], Ao = ["id", "aria-selected", "aria-controls", "tabindex", "disabled", "onClick", "onKeydown"], Bo = ["id", "aria-labelledby", "hidden"], us = /* @__PURE__ */ S({
   __name: "DsTabs",
   props: {
     modelValue: {},
@@ -2521,8 +2521,8 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
           class: T(d(l)),
           onClick: (u) => a(l),
           onKeydown: (u) => i(u, f)
-        }, B(l.label), 43, Eo))), 128))
-      ], 10, Do),
+        }, B(l.label), 43, Ao))), 128))
+      ], 10, Eo),
       (g(!0), p(se, null, re(e.tabs, (l) => (g(), p("div", {
         key: l.key,
         id: `${R(s)}-panel-${l.key}`,
@@ -2532,20 +2532,20 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
         tabindex: 0
       }, [
         e.modelValue === l.key ? N(b.$slots, l.key, { key: 0 }) : D("", !0)
-      ], 8, Ao))), 128))
+      ], 8, Bo))), 128))
     ]));
   }
-}), Bo = { class: "w-full" }, To = ["for"], Ro = {
+}), To = { class: "w-full" }, Ro = ["for"], Oo = {
   key: 0,
   class: "text-error ml-1",
   "aria-hidden": "true"
-}, Oo = { class: "relative" }, Vo = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "maxlength", "aria-describedby", "aria-invalid"], Lo = {
+}, Vo = { class: "relative" }, Lo = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "maxlength", "aria-describedby", "aria-invalid"], So = {
   key: 1,
   class: "flex justify-between mt-1"
-}, So = {
+}, zo = {
   key: 2,
   class: "text-caption ml-auto"
-}, us = /* @__PURE__ */ S({
+}, fs = /* @__PURE__ */ S({
   __name: "DsTextarea",
   props: {
     modelValue: {},
@@ -2603,16 +2603,16 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
       var h;
       (h = r.value) == null || h.blur();
     }
-    return n({ focus: u, blur: m, textareaRef: r }), (h, y) => (g(), p("div", Bo, [
+    return n({ focus: u, blur: m, textareaRef: r }), (h, y) => (g(), p("div", To, [
       e.label ? (g(), p("label", {
         key: 0,
         for: R(a),
         class: "block text-label mb-1"
       }, [
         X(B(e.label) + " ", 1),
-        e.required ? (g(), p("span", Ro, "*")) : D("", !0)
-      ], 8, To)) : D("", !0),
-      F("div", Oo, [
+        e.required ? (g(), p("span", Oo, "*")) : D("", !0)
+      ], 8, Ro)) : D("", !0),
+      F("div", Vo, [
         F("textarea", {
           ref_key: "textareaRef",
           ref: r,
@@ -2630,9 +2630,9 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
           onInput: f,
           onBlur: y[0] || (y[0] = (w) => h.$emit("blur", w)),
           onFocus: y[1] || (y[1] = (w) => h.$emit("focus", w))
-        }, null, 42, Vo)
+        }, null, 42, Lo)
       ]),
-      e.helpText || e.error || e.maxLength ? (g(), p("div", Lo, [
+      e.helpText || e.error || e.maxLength ? (g(), p("div", So, [
         e.helpText && !e.error ? (g(), p("div", {
           key: 0,
           id: d,
@@ -2645,27 +2645,27 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
           role: "alert",
           "aria-live": "polite"
         }, B(e.error), 1)) : D("", !0),
-        e.maxLength ? (g(), p("div", So, B(c.value) + " / " + B(e.maxLength), 1)) : D("", !0)
+        e.maxLength ? (g(), p("div", zo, B(c.value) + " / " + B(e.maxLength), 1)) : D("", !0)
       ])) : D("", !0)
     ]));
   }
-}), zo = { class: "flex flex-col items-center justify-center h-screen gap-4px" }, Mo = { class: "text-heading-xl text-fg m-0 p-0" }, jo = { class: "text-body-lg text-fg-secondary m-0 p-0" }, fs = /* @__PURE__ */ S({
+}), Mo = { class: "flex flex-col items-center justify-center h-screen gap-4px" }, jo = { class: "text-heading-xl text-fg m-0 p-0" }, Po = { class: "text-body-lg text-fg-secondary m-0 p-0" }, bs = /* @__PURE__ */ S({
   __name: "DsUnderConstruction",
   props: {
     title: { default: "Under Construction" },
     description: { default: "This page is under construction. Please check back later." }
   },
   setup(e) {
-    return (n, t) => (g(), p("div", zo, [
+    return (n, t) => (g(), p("div", Mo, [
       _(R(wt), { class: "w-10 h-10 text-fg-secondary" }),
-      F("h2", Mo, B(e.title), 1),
-      F("p", jo, B(e.description), 1)
+      F("h2", jo, B(e.title), 1),
+      F("p", Po, B(e.description), 1)
     ]));
   }
-}), Po = ["role", "aria-live"], Io = { class: "flex items-start gap-3 flex-1 min-w-0" }, No = { class: "flex-1 min-w-0" }, Wo = {
+}), Io = ["role", "aria-live"], No = { class: "flex items-start gap-3 flex-1 min-w-0" }, Wo = { class: "flex-1 min-w-0" }, Ho = {
   key: 0,
   class: "text-label m-0"
-}, Ho = /* @__PURE__ */ S({
+}, qo = /* @__PURE__ */ S({
   __name: "DsToast",
   props: {
     toast: {}
@@ -2713,7 +2713,7 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
       onMouseenter: i,
       onMouseleave: b
     }, [
-      F("div", Io, [
+      F("div", No, [
         F("span", {
           class: T(u.value),
           "aria-hidden": "true"
@@ -2732,8 +2732,8 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
             class: "w-5 h-5"
           }))
         ], 2),
-        F("div", No, [
-          e.toast.title ? (g(), p("p", Wo, B(e.toast.title), 1)) : D("", !0),
+        F("div", Wo, [
+          e.toast.title ? (g(), p("p", Ho, B(e.toast.title), 1)) : D("", !0),
           F("p", {
             class: T(["text-body-sm m-0", e.toast.title ? "mt-0.5" : ""])
           }, B(e.toast.message), 3)
@@ -2748,13 +2748,13 @@ const jn = { class: "relative" }, Pn = ["id", "aria-label"], In = ["id", "aria-s
       }, [
         _(R(Be), { class: "w-4 h-4" })
       ])) : D("", !0)
-    ], 42, Po));
+    ], 42, Io));
   }
 });
-let qo = 0;
+let Ko = 0;
 const Te = j([]);
 function xe(e, n, t) {
-  const o = ++qo, s = {
+  const o = ++Ko, s = {
     id: o,
     variant: e,
     message: n,
@@ -2764,14 +2764,14 @@ function xe(e, n, t) {
   };
   return Te.value.push(s), o;
 }
-function Ko(e) {
+function Uo(e) {
   const n = Te.value.findIndex((t) => t.id === e);
   n !== -1 && Te.value.splice(n, 1);
 }
-function Uo() {
+function Xo() {
   return {
     toasts: Te,
-    removeToast: Ko,
+    removeToast: Uo,
     success: (e, n) => xe("success", e, n),
     error: (e, n) => xe("error", e, n),
     warning: (e, n) => xe("warning", e, n),
@@ -2779,15 +2779,15 @@ function Uo() {
     brand: (e, n) => xe("brand", e, n)
   };
 }
-const Xo = {
+const Yo = {
   class: "fixed top-4 right-4 z-50 flex flex-col gap-3",
   "aria-label": "Notifications"
-}, bs = /* @__PURE__ */ S({
+}, ms = /* @__PURE__ */ S({
   __name: "DsToastContainer",
   setup(e) {
-    const { toasts: n, removeToast: t } = Uo();
+    const { toasts: n, removeToast: t } = Xo();
     return (o, s) => (g(), I(Oe, { to: "body" }, [
-      F("div", Xo, [
+      F("div", Yo, [
         _(At, {
           "enter-active-class": "transition-all duration-300 ease-out",
           "enter-from-class": "opacity-0 translate-x-8",
@@ -2797,7 +2797,7 @@ const Xo = {
           "leave-to-class": "opacity-0 translate-x-8"
         }, {
           default: Re(() => [
-            (g(!0), p(se, null, re(R(n), (r) => (g(), I(Ho, {
+            (g(!0), p(se, null, re(R(n), (r) => (g(), I(qo, {
               key: r.id,
               toast: r,
               onDismiss: R(t)
@@ -2808,7 +2808,7 @@ const Xo = {
       ])
     ]));
   }
-}), Yo = ["aria-describedby"], Go = ["id"], ms = /* @__PURE__ */ S({
+}), Go = ["aria-describedby"], Jo = ["id"], gs = /* @__PURE__ */ S({
   __name: "DsTooltip",
   props: {
     content: {},
@@ -2848,7 +2848,7 @@ const Xo = {
         "aria-describedby": o.value ? R(t) : void 0
       }, [
         N(u.$slots, "default")
-      ], 8, Yo),
+      ], 8, Go),
       (g(), I(Oe, { to: "body" }, [
         _(at, {
           "enter-active-class": "transition-opacity duration-150",
@@ -2875,14 +2875,14 @@ const Xo = {
                 style: he(c.value),
                 class: "absolute w-2 h-2 bg-bg-inverse rotate-45"
               }, null, 4)
-            ], 12, Go)) : D("", !0)
+            ], 12, Jo)) : D("", !0)
           ]),
           _: 1
         })
       ]))
     ], 32));
   }
-}), Jo = {
+}), Qo = {
   // Core UI
   bg: "#FFFFFF",
   "bg-secondary": "#F8FAFC",
@@ -2990,7 +2990,7 @@ const Xo = {
   "transcript-highlight": "#FEF3C7",
   "transcript-speaker": "#EDE9FE",
   "transcript-timestamp": "#F3F4F6"
-}, Qo = {
+}, Zo = {
   "space-1": "4px",
   "space-2": "8px",
   "space-3": "12px",
@@ -2999,21 +2999,21 @@ const Xo = {
   "space-6": "32px",
   "space-7": "48px",
   "space-8": "64px"
-}, Zo = {
+}, _o = {
   "radius-sm": "4px",
   "radius-md": "6px",
   "radius-lg": "8px",
   "radius-xl": "12px",
   "radius-full": "9999px"
-}, _o = {
+}, es = {
   "shadow-sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
   "shadow-md": "0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1)",
   "shadow-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
-}, gs = { ...Jo, ...Qo, ...Zo, ..._o };
-function hs(e) {
+}, hs = { ...Qo, ...Zo, ..._o, ...es };
+function ps(e) {
   return `--ds-${e}`;
 }
-function ps(e, n = ":root") {
+function vs(e, n = ":root") {
   const t = Object.entries(e).map(([o, s]) => `  --ds-${o}: ${s};`).join(`
 `);
   return `${n} {
@@ -3021,30 +3021,30 @@ ${t}
 }`;
 }
 export {
-  ts as DsAvatar,
-  ns as DsBadge,
+  ns as DsAvatar,
+  os as DsBadge,
   Vt as DsButton,
-  os as DsCheckbox,
-  ss as DsDropdownSelect,
-  rs as DsInput,
+  ss as DsCheckbox,
+  rs as DsDropdownSelect,
+  as as DsInput,
   Jn as DsLoadingSpinner,
-  as as DsModal,
-  ls as DsRadio,
-  is as DsSelect,
-  cs as DsTable,
-  ds as DsTabs,
-  us as DsTextarea,
-  Ho as DsToast,
-  bs as DsToastContainer,
-  ms as DsTooltip,
-  fs as DsUnderConstruction,
-  gs as allTokens,
-  Jo as colorTokens,
-  ps as generateThemeCss,
-  Zo as radiusTokens,
-  _o as shadowTokens,
-  Qo as spacingTokens,
-  hs as tokenToCssVar,
+  ls as DsModal,
+  is as DsRadio,
+  cs as DsSelect,
+  ds as DsTable,
+  us as DsTabs,
+  fs as DsTextarea,
+  qo as DsToast,
+  ms as DsToastContainer,
+  gs as DsTooltip,
+  bs as DsUnderConstruction,
+  hs as allTokens,
+  Qo as colorTokens,
+  vs as generateThemeCss,
+  _o as radiusTokens,
+  es as shadowTokens,
+  Zo as spacingTokens,
+  ps as tokenToCssVar,
   fe as useId,
-  Uo as useToast
+  Xo as useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leodamours/ds-components",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",