@nonsuch/component-library 0.4.0 → 0.5.0

package/README.md

@@ -35,8 +35,8 @@ import '@nonsuch/component-library/tokens.css'
 import 'quasar/src/css/index.sass'
 
 const app = createApp(App)
-app.use(Quasar, createQuasarConfig())  // Token-aligned Quasar brand colours
-app.use(createNonsuch())               // Locale + library setup
+app.use(Quasar, createQuasarConfig()) // Token-aligned Quasar brand colours
+app.use(createNonsuch()) // Locale + library setup
 app.mount('#app')
 ```
 
@@ -74,10 +74,13 @@ app.use(createNonsuch({ locale: nsLocaleFrCA }))
 ```ts
 import { createQuasarConfig } from '@nonsuch/component-library'
 
-app.use(Quasar, createQuasarConfig({
-  brand: { primary: '#1a73e8' },
-  plugins: { Notify: {} },
-}))
+app.use(
+  Quasar,
+  createQuasarConfig({
+    brand: { primary: '#1a73e8' },
+    plugins: { Notify: {} },
+  }),
+)
 ```
 
 ### Dark Mode
@@ -243,24 +246,34 @@ pnpm build:storybook
 
 ## Project Structure
 
-```markdown
+```text
 src/
-  index.ts             # Library entry — exports all public API
-  plugin.ts            # createNonsuch() Vue plugin
-  quasarConfig.ts      # createQuasarConfig() helper
+  index.ts                # Library entry — exports all public API
+  plugin.ts               # createNonsuch() Vue plugin
+  quasarConfig.ts         # createQuasarConfig() helper
   components/
-    NsButton/          # Styled QBtn wrapper
-    NsCard/            # Card with title/subtitle/actions slots
-    NsInput/           # Styled QInput wrapper
-    NsSkeleton/        # Loading skeleton with animation
-    NsThemeProvider/   # Renderless locale provider
+    NsAvatar/             # Avatar with size presets
+    NsBanner/             # Info/success/warning/error banners
+    NsButton/             # Styled QBtn wrapper
+    NsCard/               # Card with title/subtitle/actions slots
+    NsCheckbox/           # Styled QCheckbox wrapper
+    NsChip/               # Tag/filter chip
+    NsDialog/             # Modal dialog with header/body/actions
+    NsForm/               # Form wrapper with validation
+    NsInput/              # Styled QInput wrapper
+    NsList/               # List with separator defaults
+    NsSelect/             # Styled QSelect dropdown
+    NsSkeleton/           # Loading skeleton with animation
+    NsThemeProvider/      # Renderless locale provider
+    NsToggle/             # Styled QToggle switch
+    NsTooltip/            # Tooltip with consistent delays
   composables/
-    useNsLocale.ts     # Locale injection/provision
-    useNsDarkMode.ts   # Dark mode with persistence
-    useNsDefaults.ts   # Default value helper
-  locale/              # en-CA, fr-CA string packs
-  tokens/              # Design token CSS + TS helpers
-  fonts/               # Fixel font files + CSS
+    useNsLocale.ts        # Locale injection/provision
+    useNsDarkMode.ts      # Dark mode with persistence
+    useNsDefaults.ts      # Default value helper
+  locale/                 # en-CA, fr-CA string packs
+  tokens/                 # Design token CSS + TS helpers
+  fonts/                  # Fixel font files + CSS
 ```
 
 Each custom component lives in its own directory with co-located story and test files. The `Ns` prefix distinguishes library components from Quasar's `Q` prefix.

package/dist/nonsuch-components.css

@@ -1 +1 @@
-.ns-button[data-v-7f6c2760]{font-family:var(--ns-font-family-text);font-weight:var(--ns-font-weight-medium);letter-spacing:var(--ns-letter-spacing-wide)}.ns-skeleton[data-v-62627927]{border-radius:var(--ns-radius-md)}.ns-input[data-v-7ebf3284],.ns-input[data-v-7ebf3284] .q-field__label{font-family:var(--ns-font-family-text)}.ns-input[data-v-7ebf3284] .q-field__control{border-radius:var(--ns-radius-md)}.ns-card[data-v-41ecea50]{border-radius:var(--ns-radius-lg);box-shadow:var(--ns-shadow-sm);font-family:var(--ns-font-family-text);transition:box-shadow var(--ns-duration-normal) var(--ns-easing-default)}.ns-card[data-v-41ecea50]:hover{box-shadow:var(--ns-shadow-md)}.ns-card--flat[data-v-41ecea50],.ns-card--flat[data-v-41ecea50]:hover{box-shadow:none}.ns-card__header[data-v-41ecea50]{font-family:var(--ns-font-family-display)}
+.ns-button[data-v-7f6c2760]{font-family:var(--ns-font-family-text);font-weight:var(--ns-font-weight-medium);letter-spacing:var(--ns-letter-spacing-wide)}.ns-skeleton[data-v-62627927]{border-radius:var(--ns-radius-md)}.ns-input[data-v-7ebf3284],.ns-input[data-v-7ebf3284] .q-field__label{font-family:var(--ns-font-family-text)}.ns-input[data-v-7ebf3284] .q-field__control{border-radius:var(--ns-radius-md)}.ns-card[data-v-41ecea50]{border-radius:var(--ns-radius-lg);box-shadow:var(--ns-shadow-sm);font-family:var(--ns-font-family-text);transition:box-shadow var(--ns-duration-normal) var(--ns-easing-default)}.ns-card[data-v-41ecea50]:hover{box-shadow:var(--ns-shadow-md)}.ns-card--flat[data-v-41ecea50],.ns-card--flat[data-v-41ecea50]:hover{box-shadow:none}.ns-card__header[data-v-41ecea50]{font-family:var(--ns-font-family-display)}.ns-select[data-v-081cebe3],.ns-select[data-v-081cebe3] .q-field__label{font-family:var(--ns-font-family-text)}.ns-select[data-v-081cebe3] .q-field__control{border-radius:var(--ns-radius-md)}.ns-checkbox[data-v-2e481f8b],.ns-toggle[data-v-beb96bf2],.ns-form[data-v-0fd74bb1]{font-family:var(--ns-font-family-text)}.ns-dialog__card[data-v-9bff0f12]{border-radius:var(--ns-radius-lg);font-family:var(--ns-font-family-text);min-width:320px}.ns-dialog__header[data-v-9bff0f12]{font-family:var(--ns-font-family-display)}.ns-banner[data-v-35ed7ae7]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-md)}.ns-banner--info[data-v-35ed7ae7]{background-color:var(--ns-color-info-bg, #e3f2fd);color:var(--ns-color-info-text, #0d47a1)}.ns-banner--success[data-v-35ed7ae7]{background-color:var(--ns-color-success-bg, #e8f5e9);color:var(--ns-color-success-text, #1b5e20)}.ns-banner--warning[data-v-35ed7ae7]{background-color:var(--ns-color-warning-bg, #fff3e0);color:var(--ns-color-warning-text, #e65100)}.ns-banner--error[data-v-35ed7ae7]{background-color:var(--ns-color-error-bg, #ffebee);color:var(--ns-color-error-text, #b71c1c)}.ns-avatar[data-v-e4df869f]{font-family:var(--ns-font-family-text);font-weight:var(--ns-font-weight-medium)}.ns-chip[data-v-1a2191f1]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-full, 9999px)}.ns-list[data-v-b778ff3f]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-md)}.ns-tooltip[data-v-9cb6af8f]{font-family:var(--ns-font-family-text);font-size:var(--ns-font-size-sm, .875rem);border-radius:var(--ns-radius-sm);padding:var(--ns-space-1, 4px) var(--ns-space-2, 8px)}

package/dist/nonsuch-components.js

@@ -1,12 +1,22 @@
-import Q from "quasar/src/components/btn/QBtn.js";
-import { defineComponent as c, openBlock as s, createBlock as d, mergeProps as p, withCtx as u, renderSlot as i, createVNode as B, unref as T, provide as V, inject as q, createSlots as z, renderList as R, normalizeProps as D, guardReactiveProps as M, createElementVNode as O, toDisplayString as w, createElementBlock as F, createCommentVNode as v, computed as _, ref as C, onMounted as x, onUnmounted as j, readonly as I } from "vue";
-import K from "quasar/src/components/spinner/QSpinnerDots.js";
-import U from "quasar/src/components/skeleton/QSkeleton.js";
-import Z from "quasar/src/components/input/QInput.js";
-import $ from "quasar/src/components/card/QCardSection.js";
-import G from "quasar/src/components/card/QCardActions.js";
-import H from "quasar/src/components/card/QCard.js";
-const Y = /* @__PURE__ */ c({
+import M from "quasar/src/components/btn/QBtn.js";
+import { defineComponent as u, openBlock as n, createBlock as d, mergeProps as i, withCtx as l, renderSlot as r, createVNode as g, unref as F, provide as U, inject as j, createSlots as k, renderList as Q, normalizeProps as E, guardReactiveProps as z, createElementVNode as L, toDisplayString as $, createElementBlock as K, createCommentVNode as p, computed as T, ref as I, onMounted as Z, onUnmounted as G, readonly as w } from "vue";
+import H from "quasar/src/components/spinner/QSpinnerDots.js";
+import Y from "quasar/src/components/skeleton/QSkeleton.js";
+import J from "quasar/src/components/input/QInput.js";
+import b from "quasar/src/components/card/QCardSection.js";
+import A from "quasar/src/components/card/QCardActions.js";
+import q from "quasar/src/components/card/QCard.js";
+import W from "quasar/src/components/select/QSelect.js";
+import X from "quasar/src/components/checkbox/QCheckbox.js";
+import x from "quasar/src/components/toggle/QToggle.js";
+import _ from "quasar/src/components/form/QForm.js";
+import ee from "quasar/src/components/dialog/QDialog.js";
+import te from "quasar/src/components/banner/QBanner.js";
+import oe from "quasar/src/components/avatar/QAvatar.js";
+import ae from "quasar/src/components/chip/QChip.js";
+import le from "quasar/src/components/item/QList.js";
+import se from "quasar/src/components/tooltip/QTooltip.js";
+const ne = /* @__PURE__ */ u({
   __name: "NsButton",
   props: {
     color: { default: "primary" },
@@ -17,7 +27,7 @@ const Y = /* @__PURE__ */ c({
     loading: { type: Boolean, default: !1 }
   },
   setup(e) {
-    return (t, o) => (s(), d(Q, p(t.$attrs, {
+    return (t, o) => (n(), d(M, i(t.$attrs, {
       color: e.color,
       size: e.size,
       unelevated: e.unelevated,
@@ -26,23 +36,23 @@ const Y = /* @__PURE__ */ c({
       loading: e.loading,
       class: "ns-button"
     }), {
-      loading: u(() => [
-        i(t.$slots, "loading", {}, () => [
-          B(T(K), { color: "white" })
+      loading: l(() => [
+        r(t.$slots, "loading", {}, () => [
+          g(F(H), { color: "white" })
         ], !0)
       ]),
-      default: u(() => [
-        i(t.$slots, "default", {}, void 0, !0)
+      default: l(() => [
+        r(t.$slots, "default", {}, void 0, !0)
       ]),
       _: 3
     }, 16, ["color", "size", "unelevated", "no-caps", "rounded", "loading"]));
   }
-}), g = (e, t) => {
+}), f = (e, t) => {
   const o = e.__vccOpts || e;
-  for (const [n, r] of t)
-    o[n] = r;
+  for (const [a, s] of t)
+    o[a] = s;
   return o;
-}, me = /* @__PURE__ */ g(Y, [["__scopeId", "data-v-7f6c2760"]]), J = /* @__PURE__ */ c({
+}, Ke = /* @__PURE__ */ f(ne, [["__scopeId", "data-v-7f6c2760"]]), re = /* @__PURE__ */ u({
   __name: "NsSkeleton",
   props: {
     type: { default: "rect" },
@@ -53,7 +63,7 @@ const Y = /* @__PURE__ */ c({
     height: { default: void 0 }
   },
   setup(e) {
-    return (t, o) => (s(), d(U, p(t.$attrs, {
+    return (t, o) => (n(), d(Y, i(t.$attrs, {
       type: e.type,
       animation: e.animation,
       square: e.square,
@@ -63,7 +73,7 @@ const Y = /* @__PURE__ */ c({
       class: "ns-skeleton"
     }), null, 16, ["type", "animation", "square", "bordered", "width", "height"]));
   }
-}), pe = /* @__PURE__ */ g(J, [["__scopeId", "data-v-62627927"]]), y = {
+}), Ze = /* @__PURE__ */ f(re, [["__scopeId", "data-v-62627927"]]), B = {
   common: {
     loading: "Loading…",
     retry: "Retry",
@@ -99,22 +109,22 @@ const Y = /* @__PURE__ */ c({
     tooShort: "Too short",
     tooLong: "Too long"
   }
-}, S = /* @__PURE__ */ Symbol("ns-locale");
-function W(e) {
-  V(S, e);
+}, N = /* @__PURE__ */ Symbol("ns-locale");
+function de(e) {
+  U(N, e);
 }
-function X() {
-  return q(S, y);
+function ue() {
+  return j(N, B);
 }
-const ge = /* @__PURE__ */ c({
+const Ge = /* @__PURE__ */ u({
   __name: "NsThemeProvider",
   props: {
-    locale: { default: () => y }
+    locale: { default: () => B }
   },
   setup(e) {
-    return W(e.locale), (o, n) => i(o.$slots, "default");
+    return de(e.locale), (o, a) => r(o.$slots, "default");
   }
-}), ee = /* @__PURE__ */ c({
+}), ie = /* @__PURE__ */ u({
   __name: "NsInput",
   props: {
     label: { default: void 0 },
@@ -125,27 +135,27 @@ const ge = /* @__PURE__ */ c({
   },
   emits: ["update:modelValue"],
   setup(e) {
-    return (t, o) => (s(), d(Z, p(t.$attrs, {
+    return (t, o) => (n(), d(J, i(t.$attrs, {
       "model-value": e.modelValue,
       label: e.label,
       outlined: e.outlined,
       dense: e.dense,
       rules: e.rules,
       class: "ns-input",
-      "onUpdate:modelValue": o[0] || (o[0] = (n) => t.$emit("update:modelValue", n))
-    }), z({ _: 2 }, [
-      R(t.$slots, (n, r) => ({
-        name: r,
-        fn: u((l) => [
-          i(t.$slots, r, D(M(l ?? {})), void 0, !0)
+      "onUpdate:modelValue": o[0] || (o[0] = (a) => t.$emit("update:modelValue", a))
+    }), k({ _: 2 }, [
+      Q(t.$slots, (a, s) => ({
+        name: s,
+        fn: l((c) => [
+          r(t.$slots, s, E(z(c ?? {})), void 0, !0)
         ])
       }))
     ]), 1040, ["model-value", "label", "outlined", "dense", "rules"]));
   }
-}), ve = /* @__PURE__ */ g(ee, [["__scopeId", "data-v-7ebf3284"]]), te = { class: "text-h6" }, oe = {
+}), He = /* @__PURE__ */ f(ie, [["__scopeId", "data-v-7ebf3284"]]), fe = { class: "text-h6" }, ce = {
   key: 0,
   class: "text-subtitle2 text-grey"
-}, ne = /* @__PURE__ */ c({
+}, me = /* @__PURE__ */ u({
   __name: "NsCard",
   props: {
     title: { default: void 0 },
@@ -153,51 +163,336 @@ const ge = /* @__PURE__ */ c({
     flat: { type: Boolean, default: !1 }
   },
   setup(e) {
-    return (t, o) => (s(), d(H, p(t.$attrs, {
+    return (t, o) => (n(), d(q, i(t.$attrs, {
       class: ["ns-card", { "ns-card--flat": e.flat }]
     }), {
-      default: u(() => [
-        e.title || t.$slots.header ? (s(), d($, {
+      default: l(() => [
+        e.title || t.$slots.header ? (n(), d(b, {
           key: 0,
           class: "ns-card__header"
         }, {
-          default: u(() => [
-            i(t.$slots, "header", {}, () => [
-              O("div", te, w(e.title), 1),
-              e.subtitle ? (s(), F("div", oe, w(e.subtitle), 1)) : v("", !0)
+          default: l(() => [
+            r(t.$slots, "header", {}, () => [
+              L("div", fe, $(e.title), 1),
+              e.subtitle ? (n(), K("div", ce, $(e.subtitle), 1)) : p("", !0)
             ], !0)
           ]),
           _: 3
-        })) : v("", !0),
-        B($, null, {
-          default: u(() => [
-            i(t.$slots, "default", {}, void 0, !0)
+        })) : p("", !0),
+        g(b, null, {
+          default: l(() => [
+            r(t.$slots, "default", {}, void 0, !0)
           ]),
           _: 3
         }),
-        t.$slots.actions ? (s(), d(G, {
+        t.$slots.actions ? (n(), d(A, {
           key: 1,
           align: "right"
         }, {
-          default: u(() => [
-            i(t.$slots, "actions", {}, void 0, !0)
+          default: l(() => [
+            r(t.$slots, "actions", {}, void 0, !0)
           ]),
           _: 3
-        })) : v("", !0)
+        })) : p("", !0)
       ]),
       _: 3
     }, 16, ["class"]));
   }
-}), he = /* @__PURE__ */ g(ne, [["__scopeId", "data-v-41ecea50"]]);
-function ye(e = {}) {
-  const { locale: t = y } = e;
+}), Ye = /* @__PURE__ */ f(me, [["__scopeId", "data-v-41ecea50"]]), pe = /* @__PURE__ */ u({
+  __name: "NsSelect",
+  props: {
+    label: { default: void 0 },
+    modelValue: { default: void 0 },
+    options: { default: () => [] },
+    outlined: { type: Boolean, default: !0 },
+    dense: { type: Boolean, default: !1 },
+    multiple: { type: Boolean, default: !1 },
+    emitValue: { type: Boolean, default: !1 },
+    mapOptions: { type: Boolean, default: !1 },
+    rules: { default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    return (t, o) => (n(), d(W, i(t.$attrs, {
+      "model-value": e.modelValue,
+      label: e.label,
+      options: e.options,
+      outlined: e.outlined,
+      dense: e.dense,
+      rules: e.rules,
+      multiple: e.multiple,
+      "emit-value": e.emitValue,
+      "map-options": e.mapOptions,
+      class: "ns-select",
+      "onUpdate:modelValue": o[0] || (o[0] = (a) => t.$emit("update:modelValue", a))
+    }), k({ _: 2 }, [
+      Q(t.$slots, (a, s) => ({
+        name: s,
+        fn: l((c) => [
+          r(t.$slots, s, E(z(c ?? {})), void 0, !0)
+        ])
+      }))
+    ]), 1040, ["model-value", "label", "options", "outlined", "dense", "rules", "multiple", "emit-value", "map-options"]));
+  }
+}), Je = /* @__PURE__ */ f(pe, [["__scopeId", "data-v-081cebe3"]]), ve = /* @__PURE__ */ u({
+  __name: "NsCheckbox",
+  props: {
+    label: { default: void 0 },
+    modelValue: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    dense: { type: Boolean, default: !1 },
+    disable: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    return (t, o) => (n(), d(X, i(t.$attrs, {
+      "model-value": e.modelValue,
+      label: e.label,
+      color: e.color,
+      dense: e.dense,
+      disable: e.disable,
+      class: "ns-checkbox",
+      "onUpdate:modelValue": o[0] || (o[0] = (a) => t.$emit("update:modelValue", a))
+    }), null, 16, ["model-value", "label", "color", "dense", "disable"]));
+  }
+}), We = /* @__PURE__ */ f(ve, [["__scopeId", "data-v-2e481f8b"]]), ye = /* @__PURE__ */ u({
+  __name: "NsToggle",
+  props: {
+    label: { default: void 0 },
+    modelValue: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    dense: { type: Boolean, default: !1 },
+    disable: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    return (t, o) => (n(), d(x, i(t.$attrs, {
+      "model-value": e.modelValue,
+      label: e.label,
+      color: e.color,
+      dense: e.dense,
+      disable: e.disable,
+      class: "ns-toggle",
+      "onUpdate:modelValue": o[0] || (o[0] = (a) => t.$emit("update:modelValue", a))
+    }), null, 16, ["model-value", "label", "color", "dense", "disable"]));
+  }
+}), Xe = /* @__PURE__ */ f(ye, [["__scopeId", "data-v-beb96bf2"]]), ge = /* @__PURE__ */ u({
+  __name: "NsForm",
+  props: {
+    greedy: { type: Boolean, default: !0 }
+  },
+  emits: ["submit", "validationError"],
+  setup(e) {
+    return (t, o) => (n(), d(_, i(t.$attrs, {
+      class: "ns-form",
+      greedy: e.greedy,
+      onSubmit: o[0] || (o[0] = (a) => t.$emit("submit", a)),
+      onValidationError: o[1] || (o[1] = (a) => t.$emit("validationError", a))
+    }), {
+      default: l(() => [
+        r(t.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 16, ["greedy"]));
+  }
+}), xe = /* @__PURE__ */ f(ge, [["__scopeId", "data-v-0fd74bb1"]]), be = { class: "text-h6" }, he = /* @__PURE__ */ u({
+  __name: "NsDialog",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    title: { default: void 0 },
+    persistent: { type: Boolean, default: !1 },
+    noBackdropDismiss: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    return (t, o) => (n(), d(ee, i(t.$attrs, {
+      "model-value": e.modelValue,
+      persistent: e.persistent,
+      "no-backdrop-dismiss": e.noBackdropDismiss,
+      class: "ns-dialog",
+      "onUpdate:modelValue": o[0] || (o[0] = (a) => t.$emit("update:modelValue", a))
+    }), {
+      default: l(() => [
+        g(q, { class: "ns-dialog__card" }, {
+          default: l(() => [
+            e.title || t.$slots.header ? (n(), d(b, {
+              key: 0,
+              class: "ns-dialog__header"
+            }, {
+              default: l(() => [
+                r(t.$slots, "header", {}, () => [
+                  L("div", be, $(e.title), 1)
+                ], !0)
+              ]),
+              _: 3
+            })) : p("", !0),
+            g(b, { class: "ns-dialog__body" }, {
+              default: l(() => [
+                r(t.$slots, "default", {}, void 0, !0)
+              ]),
+              _: 3
+            }),
+            t.$slots.actions ? (n(), d(A, {
+              key: 1,
+              align: "right",
+              class: "ns-dialog__actions"
+            }, {
+              default: l(() => [
+                r(t.$slots, "actions", {}, void 0, !0)
+              ]),
+              _: 3
+            })) : p("", !0)
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 16, ["model-value", "persistent", "no-backdrop-dismiss"]));
+  }
+}), _e = /* @__PURE__ */ f(he, [["__scopeId", "data-v-9bff0f12"]]), $e = /* @__PURE__ */ u({
+  __name: "NsBanner",
+  props: {
+    type: { default: "info" },
+    dense: { type: Boolean, default: !1 },
+    rounded: { type: Boolean, default: !0 }
+  },
+  setup(e) {
+    return (t, o) => (n(), d(te, i(t.$attrs, {
+      class: ["ns-banner", `ns-banner--${e.type}`],
+      dense: e.dense,
+      rounded: e.rounded
+    }), k({
+      default: l(() => [
+        r(t.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 2
+    }, [
+      t.$slots.avatar ? {
+        name: "avatar",
+        fn: l(() => [
+          r(t.$slots, "avatar", {}, void 0, !0)
+        ]),
+        key: "0"
+      } : void 0,
+      t.$slots.action ? {
+        name: "action",
+        fn: l(() => [
+          r(t.$slots, "action", {}, void 0, !0)
+        ]),
+        key: "1"
+      } : void 0
+    ]), 1040, ["class", "dense", "rounded"]));
+  }
+}), et = /* @__PURE__ */ f($e, [["__scopeId", "data-v-35ed7ae7"]]), ke = /* @__PURE__ */ u({
+  __name: "NsAvatar",
+  props: {
+    size: { default: "md" },
+    color: { default: "primary" },
+    textColor: { default: "white" },
+    rounded: { type: Boolean, default: !1 },
+    square: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = {
+      sm: "32px",
+      md: "48px",
+      lg: "64px",
+      xl: "96px"
+    }, o = e, a = T(() => t[o.size] ?? o.size);
+    return (s, c) => (n(), d(oe, i(s.$attrs, {
+      size: a.value,
+      color: e.color,
+      "text-color": e.textColor,
+      rounded: e.rounded,
+      square: e.square,
+      class: "ns-avatar"
+    }), {
+      default: l(() => [
+        r(s.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 16, ["size", "color", "text-color", "rounded", "square"]));
+  }
+}), tt = /* @__PURE__ */ f(ke, [["__scopeId", "data-v-e4df869f"]]), Be = /* @__PURE__ */ u({
+  __name: "NsChip",
+  props: {
+    color: { default: "primary" },
+    textColor: { default: "white" },
+    outline: { type: Boolean, default: !1 },
+    dense: { type: Boolean, default: !1 },
+    removable: { type: Boolean, default: !1 },
+    clickable: { type: Boolean, default: !1 }
+  },
+  emits: ["remove"],
+  setup(e) {
+    return (t, o) => (n(), d(ae, i(t.$attrs, {
+      color: e.color,
+      "text-color": e.textColor,
+      outline: e.outline,
+      dense: e.dense,
+      removable: e.removable,
+      clickable: e.clickable,
+      class: "ns-chip",
+      onRemove: o[0] || (o[0] = (a) => t.$emit("remove"))
+    }), {
+      default: l(() => [
+        r(t.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 16, ["color", "text-color", "outline", "dense", "removable", "clickable"]));
+  }
+}), ot = /* @__PURE__ */ f(Be, [["__scopeId", "data-v-1a2191f1"]]), Ne = /* @__PURE__ */ u({
+  __name: "NsList",
+  props: {
+    bordered: { type: Boolean, default: !1 },
+    separator: { type: Boolean, default: !0 },
+    dense: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (t, o) => (n(), d(le, i(t.$attrs, {
+      bordered: e.bordered,
+      separator: e.separator,
+      dense: e.dense,
+      class: "ns-list"
+    }), {
+      default: l(() => [
+        r(t.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 16, ["bordered", "separator", "dense"]));
+  }
+}), at = /* @__PURE__ */ f(Ne, [["__scopeId", "data-v-b778ff3f"]]), Se = /* @__PURE__ */ u({
+  __name: "NsTooltip",
+  props: {
+    delay: { default: 300 },
+    offset: { default: () => [8, 0] },
+    anchor: { default: "bottom middle" },
+    self: { default: "top middle" }
+  },
+  setup(e) {
+    return (t, o) => (n(), d(se, i(t.$attrs, {
+      delay: e.delay,
+      offset: e.offset,
+      anchor: e.anchor,
+      self: e.self,
+      class: "ns-tooltip"
+    }), {
+      default: l(() => [
+        r(t.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 16, ["delay", "offset", "anchor", "self"]));
+  }
+}), lt = /* @__PURE__ */ f(Se, [["__scopeId", "data-v-9cb6af8f"]]);
+function st(e = {}) {
+  const { locale: t = B } = e;
   return {
     install(o) {
-      o.provide(S, t);
+      o.provide(N, t);
     }
   };
 }
-const re = {
+const Ve = {
   primary: "#3b82f6",
   // PLACEHOLDER — matches --ns-color-primary
   secondary: "#8b5cf6",
@@ -217,20 +512,20 @@ const re = {
   warning: "#f59e0b"
   // PLACEHOLDER — matches --ns-color-warning
 };
-function Se(e = {}) {
-  const { brand: t = {}, plugins: o = {}, ...n } = e;
+function nt(e = {}) {
+  const { brand: t = {}, plugins: o = {}, ...a } = e;
   return {
     config: {
       brand: {
-        ...re,
+        ...Ve,
         ...t
       }
     },
     plugins: o,
-    ...n
+    ...a
   };
 }
-const ke = {
+const rt = {
   common: {
     loading: "Chargement…",
     retry: "Réessayer",
@@ -267,88 +562,98 @@ const ke = {
     tooLong: "Trop long"
   }
 };
-function be(e, t) {
-  const o = X();
-  return _(() => {
-    const n = e();
-    if (n != null) return n;
-    const r = t.split(".");
-    let l = o;
-    for (const f of r)
-      l = l[f];
-    return l;
+function dt(e, t) {
+  const o = ue();
+  return T(() => {
+    const a = e();
+    if (a != null) return a;
+    const s = t.split(".");
+    let c = o;
+    for (const v of s)
+      c = c[v];
+    return c;
   });
 }
 const h = "ns-dark-mode";
-function Ne() {
-  const e = C(!1), t = C("system");
-  let o = null, n = null;
-  function r(a) {
-    if (e.value = a, typeof document < "u") {
-      const m = document.documentElement;
-      m.classList.toggle("dark", a), m.setAttribute("data-theme", a ? "dark" : "light");
+function ut() {
+  const e = I(!1), t = I("system");
+  let o = null, a = null;
+  function s(m) {
+    if (e.value = m, typeof document < "u") {
+      const y = document.documentElement;
+      y.classList.toggle("dark", m), y.setAttribute("data-theme", m ? "dark" : "light");
     }
   }
-  function l() {
+  function c() {
     return typeof window > "u" ? !1 : window.matchMedia("(prefers-color-scheme: dark)").matches;
   }
-  function f() {
+  function v() {
     if (typeof localStorage > "u") return null;
-    const a = localStorage.getItem(h);
-    return a === "true" ? !0 : a === "false" ? !1 : null;
+    const m = localStorage.getItem(h);
+    return m === "true" ? !0 : m === "false" ? !1 : null;
   }
-  function k(a) {
-    typeof localStorage < "u" && localStorage.setItem(h, String(a));
+  function S(m) {
+    typeof localStorage < "u" && localStorage.setItem(h, String(m));
   }
-  function E() {
+  function D() {
     typeof localStorage < "u" && localStorage.removeItem(h);
   }
-  function b() {
-    t.value = "user", k(!0), r(!0);
+  function V() {
+    t.value = "user", S(!0), s(!0);
   }
-  function N() {
-    t.value = "user", k(!1), r(!1);
+  function C() {
+    t.value = "user", S(!1), s(!1);
   }
-  function L() {
-    e.value ? N() : b();
+  function P() {
+    e.value ? C() : V();
   }
-  function A() {
-    E(), t.value = "system", r(l());
+  function R() {
+    D(), t.value = "system", s(c());
   }
-  function P() {
-    const a = f();
-    a !== null ? (t.value = "storage", r(a)) : (t.value = "system", r(l())), typeof window < "u" && (o = window.matchMedia("(prefers-color-scheme: dark)"), n = (m) => {
-      f() === null && (t.value = "system", r(m.matches));
-    }, o.addEventListener("change", n));
+  function O() {
+    const m = v();
+    m !== null ? (t.value = "storage", s(m)) : (t.value = "system", s(c())), typeof window < "u" && (o = window.matchMedia("(prefers-color-scheme: dark)"), a = (y) => {
+      v() === null && (t.value = "system", s(y.matches));
+    }, o.addEventListener("change", a));
   }
-  return x(P), j(() => {
-    o && n && o.removeEventListener("change", n);
+  return Z(O), G(() => {
+    o && a && o.removeEventListener("change", a);
   }), {
-    isDark: I(e),
-    source: I(t),
-    enable: b,
-    disable: N,
-    toggle: L,
-    useSystem: A
+    isDark: w(e),
+    source: w(t),
+    enable: V,
+    disable: C,
+    toggle: P,
+    useSystem: R
   };
 }
-function we(e, t = document.documentElement) {
+function it(e, t = document.documentElement) {
   return getComputedStyle(t).getPropertyValue(e).trim();
 }
 export {
-  me as NsButton,
-  he as NsCard,
-  ve as NsInput,
-  S as NsLocaleKey,
-  pe as NsSkeleton,
-  ge as NsThemeProvider,
-  ye as createNonsuch,
-  Se as createQuasarConfig,
-  we as getToken,
-  y as nsLocaleEnCA,
-  ke as nsLocaleFrCA,
-  W as provideNsLocale,
-  Ne as useNsDarkMode,
-  be as useNsDefault,
-  X as useNsLocale
+  tt as NsAvatar,
+  et as NsBanner,
+  Ke as NsButton,
+  Ye as NsCard,
+  We as NsCheckbox,
+  ot as NsChip,
+  _e as NsDialog,
+  xe as NsForm,
+  He as NsInput,
+  at as NsList,
+  N as NsLocaleKey,
+  Je as NsSelect,
+  Ze as NsSkeleton,
+  Ge as NsThemeProvider,
+  Xe as NsToggle,
+  lt as NsTooltip,
+  st as createNonsuch,
+  nt as createQuasarConfig,
+  it as getToken,
+  B as nsLocaleEnCA,
+  rt as nsLocaleFrCA,
+  de as provideNsLocale,
+  ut as useNsDarkMode,
+  dt as useNsDefault,
+  ue as useNsLocale
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonsuch/component-library",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A Vue 3 component library built on Quasar with opinionated defaults and custom components.",
   "type": "module",
   "sideEffects": false,
@@ -41,7 +41,8 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "preview": "vite preview",
-    "prepublishOnly": "pnpm lint && pnpm typecheck && pnpm test && pnpm build"
+    "prepublishOnly": "pnpm lint && pnpm typecheck && pnpm test && pnpm build",
+    "prepare": "husky"
   },
   "peerDependencies": {
     "@quasar/vite-plugin": "^1.8.0",
@@ -64,11 +65,14 @@
     "@quasar/vite-plugin": "^1.10.0",
     "@storybook/vue3-vite": "^10.2.7",
     "@vitejs/plugin-vue": "^6.0.4",
+    "@vitest/coverage-v8": "^4.0.18",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.39.2",
+    "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-vue": "^10.7.0",
     "happy-dom": "^20.5.3",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
     "postcss-rtlcss": "^5.7.1",
     "prettier": "^3.8.1",
     "quasar": "^2.18.6",
@@ -81,5 +85,9 @@
     "vue": "^3.5.27",
     "vue-tsc": "^3.2.4"
   },
-  "packageManager": "pnpm@10.29.2"
+  "packageManager": "pnpm@10.29.2",
+  "lint-staged": {
+    "*.{ts,vue}": "eslint --fix",
+    "*.{ts,vue,json,md,css,scss,sass,html,yaml,yml}": "prettier --write"
+  }
 }