@nonsuch/component-library 0.5.0 → 0.6.0

package/dist/plugin.d.ts

@@ -0,0 +1,42 @@
+import type { Plugin } from 'vue';
+import type { NsLocaleMessages } from './locale/NsLocaleMessages';
+/**
+ * Options accepted by the `createNonsuch()` plugin.
+ *
+ * Every option has a sensible default — calling `app.use(createNonsuch())`
+ * with no arguments is valid and gives you English (Canada) strings.
+ */
+export interface NsPluginOptions {
+    /**
+     * Locale messages provided to all Ns components.
+     * @default nsLocaleEnCA
+     */
+    locale?: NsLocaleMessages;
+}
+/**
+ * Create the Nonsuch component-library Vue plugin.
+ *
+ * This is the recommended one-line setup for consuming apps:
+ *
+ * ```ts
+ * import { createApp } from 'vue'
+ * import { Quasar } from 'quasar'
+ * import { createNonsuch } from '@nonsuch/component-library'
+ * import '@nonsuch/component-library/tokens.css'
+ *
+ * const app = createApp(App)
+ * app.use(Quasar, { plugins: {} })
+ * app.use(createNonsuch())
+ * ```
+ *
+ * With options:
+ *
+ * ```ts
+ * import { createNonsuch, nsLocaleFrCA } from '@nonsuch/component-library'
+ *
+ * app.use(createNonsuch({
+ *   locale: nsLocaleFrCA,
+ * }))
+ * ```
+ */
+export declare function createNonsuch(options?: NsPluginOptions): Plugin;

package/dist/quasarConfig.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Create a Quasar framework config with Nonsuch brand colours.
+ *
+ * Bridges the CSS token system with Quasar's runtime brand colours
+ * so that Quasar's built-in colour classes (`.bg-primary`, etc.)
+ * match the Nonsuch palette.
+ *
+ * @example
+ * ```ts
+ * import { Quasar } from 'quasar'
+ * import { createQuasarConfig } from '@nonsuch/component-library'
+ *
+ * app.use(Quasar, createQuasarConfig())
+ * ```
+ *
+ * With overrides:
+ *
+ * ```ts
+ * app.use(Quasar, createQuasarConfig({
+ *   brand: { primary: '#custom' },
+ *   plugins: { Notify: {} },
+ * }))
+ * ```
+ */
+export interface QuasarBrandColors {
+    primary?: string;
+    secondary?: string;
+    accent?: string;
+    dark?: string;
+    'dark-page'?: string;
+    positive?: string;
+    negative?: string;
+    info?: string;
+    warning?: string;
+}
+export interface QuasarConfigOverrides {
+    brand?: QuasarBrandColors;
+    plugins?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+export declare function createQuasarConfig(overrides?: QuasarConfigOverrides): Record<string, unknown>;

package/dist/tokens/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Nonsuch Design Tokens
+ *
+ * Re-exports the token stylesheet and provides TypeScript
+ * helpers for type-safe token access in JavaScript.
+ */
+/** All available Nonsuch token names. */
+export type NsToken = '--ns-color-primary' | '--ns-color-primary-hover' | '--ns-color-secondary' | '--ns-color-secondary-hover' | '--ns-color-accent' | '--ns-color-accent-hover' | '--ns-color-success' | '--ns-color-warning' | '--ns-color-error' | '--ns-color-info' | '--ns-color-background' | '--ns-color-surface' | '--ns-color-surface-variant' | '--ns-color-on-primary' | '--ns-color-on-secondary' | '--ns-color-on-accent' | '--ns-color-on-background' | '--ns-color-on-surface' | '--ns-color-neutral-50' | '--ns-color-neutral-100' | '--ns-color-neutral-200' | '--ns-color-neutral-300' | '--ns-color-neutral-400' | '--ns-color-neutral-500' | '--ns-color-neutral-600' | '--ns-color-neutral-700' | '--ns-color-neutral-800' | '--ns-color-neutral-900' | '--ns-font-family-text' | '--ns-font-family-display' | '--ns-font-size-xs' | '--ns-font-size-sm' | '--ns-font-size-md' | '--ns-font-size-lg' | '--ns-font-size-xl' | '--ns-font-size-2xl' | '--ns-font-size-3xl' | '--ns-font-weight-regular' | '--ns-font-weight-medium' | '--ns-font-weight-semibold' | '--ns-font-weight-bold' | '--ns-line-height-tight' | '--ns-line-height-normal' | '--ns-line-height-relaxed' | '--ns-letter-spacing-tight' | '--ns-letter-spacing-normal' | '--ns-letter-spacing-wide' | '--ns-space-1' | '--ns-space-2' | '--ns-space-3' | '--ns-space-4' | '--ns-space-5' | '--ns-space-6' | '--ns-space-8' | '--ns-space-10' | '--ns-space-12' | '--ns-space-16' | '--ns-radius-none' | '--ns-radius-sm' | '--ns-radius-md' | '--ns-radius-lg' | '--ns-radius-xl' | '--ns-radius-full' | '--ns-shadow-sm' | '--ns-shadow-md' | '--ns-shadow-lg' | '--ns-shadow-xl' | '--ns-duration-fast' | '--ns-duration-normal' | '--ns-duration-slow' | '--ns-easing-default' | '--ns-easing-in' | '--ns-easing-out' | '--ns-easing-in-out';
+/**
+ * Read a design token value from the computed styles of an element.
+ *
+ * @example
+ * ```ts
+ * import { getToken } from '@nonsuch/component-library'
+ *
+ * const primary = getToken('--ns-color-primary')
+ * // → '#3b82f6'
+ * ```
+ */
+export declare function getToken(name: NsToken, el?: Element): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonsuch/component-library",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A Vue 3 component library built on Quasar with opinionated defaults and custom components.",
   "type": "module",
   "sideEffects": false,
@@ -30,7 +30,7 @@
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "build": "vite build && rm -f tsconfig.build.tsbuildinfo && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
     "build:storybook": "storybook build",
     "typecheck": "vue-tsc -p tsconfig.app.json --noEmit",
     "lint": "eslint .",
@@ -60,9 +60,10 @@
     ]
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^10.0.1",
     "@quasar/extras": "^1.17.0",
     "@quasar/vite-plugin": "^1.10.0",
+    "@storybook/addon-a11y": "^10.2.10",
     "@storybook/vue3-vite": "^10.2.7",
     "@vitejs/plugin-vue": "^6.0.4",
     "@vitest/coverage-v8": "^4.0.18",
@@ -70,6 +71,7 @@
     "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-vue": "^10.7.0",
+    "eslint-plugin-vuejs-accessibility": "^2.5.0",
     "happy-dom": "^20.5.3",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",