@meddleware/ui 0.1.0

package/LICENSE

@@ -0,0 +1,14 @@
+BSD Zero Clause License
+
+Copyright (c) 2024 Meddleware
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,98 @@
+# @meddleware/ui
+
+Shared Vue 3 component library for the `@meddleware` UIs. Delivers a layout shell (header, sidebar, footer), colour-mode control, and UI primitives — all styled with [`@meddleware/design-tokens`](https://www.npmjs.com/package/@meddleware/design-tokens) (Oxblood / Indigo palette).
+
+## Installation
+
+```sh
+npm install @meddleware/ui @meddleware/design-tokens
+# or
+yarn add @meddleware/ui @meddleware/design-tokens
+```
+
+`vue ^3.5.0` is a peer dependency — install it separately if not already present.
+
+## Setup
+
+Import both CSS files once at your application entry point:
+
+```ts
+// src/main.ts (or equivalent)
+import '@meddleware/design-tokens/tokens.css' // required — registers CSS custom properties
+import '@meddleware/ui/base.css'              // optional — element-level defaults
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+```
+
+## Exports
+
+### Layout shell
+
+| Component | Description |
+| --- | --- |
+| `AppHeader` | Top navigation bar. Accepts `variant`, optional `colors` override, and named slots for dynamic content. |
+| `AppSidebar` | Side navigation panel. Same API as `AppHeader`. |
+| `AppFooter` | Page footer. Same API as `AppHeader`. |
+
+All three accept a `variant` prop:
+
+| Variant | Behaviour |
+| --- | --- |
+| `'dark'` | Uses `--mw-panel-dark-*` tokens — renders correctly on any page theme. |
+| `'light'` | Uses `--mw-panel-light-*` tokens — renders correctly on any page theme. |
+| `'transparent'` | Inherits the page background and text colour. |
+
+### Primitives
+
+| Component | Description |
+| --- | --- |
+| `UiButton` | Styled button. |
+| `UiCard` | Card container with surface background and border. |
+| `UiSelect` | Styled select input. |
+| `UiNotice` | Notice / alert banner. |
+
+### Colour mode
+
+| Export | Type | Description |
+| --- | --- | --- |
+| `ColorModeControl` | Vue SFC | Presentational light / dark / system toggle. **Owns no state** — bind with `v-model`. |
+| `useColorMode(default?)` | Composable | Module-singleton colour-mode state manager. Sets `data-theme` on `<html>`, persists to `localStorage`, follows system preference when mode is `'system'`. |
+| `ColorMode` | Type | `'light' \| 'dark' \| 'system'` |
+| `PanelVariant` | Type | `'light' \| 'dark' \| 'transparent'` |
+| `PanelColors` | Type | Per-instance colour override shape for layout shell components. |
+
+## Theming
+
+Global light / dark switching is handled by `useColorMode`, which sets `data-theme="dark"` on `<html>`. The semantic CSS tokens (`--bg`, `--surface`, `--text`, etc.) from `@meddleware/design-tokens` swap values automatically.
+
+Layout shell components use the theme-independent `--mw-panel-{dark,light}-*` tokens for their `variant` prop, so a `variant="dark"` header renders correctly on a light page — and vice-versa — without any extra configuration.
+
+### Example: wiring colour mode
+
+```vue
+<script setup lang="ts">
+import { AppHeader, ColorModeControl, useColorMode } from '@meddleware/ui'
+
+const { mode } = useColorMode()
+</script>
+
+<template>
+  <AppHeader variant="dark">
+    <template #actions>
+      <ColorModeControl v-model="mode" />
+    </template>
+  </AppHeader>
+</template>
+```
+
+## Publishing
+
+Published to npmjs on `v*` git tags via `.github/workflows/publish.yml` using npm trusted publishing (OIDC) — no long-lived secrets required. The workflow installs dependencies, builds `dist/`, and publishes.
+
+To release: bump `version` in `package.json`, add a CHANGELOG entry, run `npm run build` to verify, commit, tag (`git tag v0.x.y`), push the tag.
+
+## License
+
+[0BSD](./LICENSE) — BSD Zero Clause License.

package/dist/ui.css

@@ -0,0 +1,2 @@
+.mw-header[data-v-ad7cd1c5]{height:var(--mw-header-height,56px);background:var(--_bg);color:var(--_text);border-bottom:1px solid var(--_border);font-family:var(--mw-font-sans);align-items:center;gap:1rem;padding:0 1rem;display:flex}.mw-header--sticky[data-v-ad7cd1c5]{z-index:50;position:sticky;top:0}.mw-header__brand[data-v-ad7cd1c5]{letter-spacing:.01em;white-space:nowrap;align-items:center;gap:.5rem;font-weight:650;display:flex}.mw-header__center[data-v-ad7cd1c5]{flex:auto;min-width:0}.mw-header__actions[data-v-ad7cd1c5]{align-items:center;gap:.5rem;margin-left:auto;display:flex}.mw-sidebar[data-v-ccf6628a]{width:var(--mw-sidebar-width,240px);background:var(--_bg);color:var(--_text);border-right:1px solid var(--_border);font-family:var(--mw-font-sans);flex-direction:column;display:flex}.mw-sidebar__head[data-v-ccf6628a]{border-bottom:1px solid var(--_border);padding:1rem}.mw-sidebar__nav[data-v-ccf6628a]{flex-direction:column;flex:auto;gap:.25rem;padding:.75rem;display:flex;overflow-y:auto}.mw-sidebar__foot[data-v-ccf6628a]{border-top:1px solid var(--_border);color:var(--_muted);padding:.75rem 1rem;font-size:.85rem}.mw-footer[data-v-060bc806]{background:var(--_bg);color:var(--_muted);border-top:1px solid var(--_border);font-family:var(--mw-font-sans);flex-wrap:wrap;align-items:center;gap:1rem;padding:.75rem 1rem;font-size:.85rem;display:flex}.mw-footer--transparent[data-v-060bc806]{border-top:1px solid var(--border)}.mw-footer__center[data-v-060bc806]{flex:auto;min-width:0}.mw-footer__end[data-v-060bc806]{margin-left:auto}.mw-mode[data-v-c982c97c]{border:1px solid var(--_border,var(--border));border-radius:var(--mw-radius,10px);background:color-mix(in srgb, var(--_text,var(--text)) 6%, transparent);gap:2px;padding:2px;display:inline-flex}.mw-mode__btn[data-v-c982c97c]{border-radius:calc(var(--mw-radius,10px) - 3px);color:var(--_text,var(--text));font:inherit;cursor:pointer;opacity:.7;background:0 0;border:0;align-items:center;gap:.35rem;padding:.25rem .5rem;font-size:.8rem;display:inline-flex}.mw-mode__btn[data-v-c982c97c]:hover{opacity:1}.mw-mode__btn.is-active[data-v-c982c97c]{opacity:1;background:color-mix(in srgb, var(--_text,var(--text)) 14%, transparent)}.mw-mode__btn[data-v-c982c97c]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}@media (width<=640px){.mw-mode__label[data-v-c982c97c]{display:none}}.mw-btn[data-v-2a324058]{border-radius:var(--mw-radius,10px);font:inherit;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.4rem;padding:.5rem .9rem;font-weight:550;transition:filter .12s,background .12s;display:inline-flex}.mw-btn[data-v-2a324058]:disabled{opacity:.55;cursor:not-allowed}.mw-btn[data-v-2a324058]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mw-btn--primary[data-v-2a324058]{background:var(--accent);color:var(--accent-contrast)}.mw-btn--primary[data-v-2a324058]:not(:disabled):hover{filter:brightness(1.08)}.mw-btn--secondary[data-v-2a324058]{background:var(--secondary);color:var(--secondary-contrast)}.mw-btn--secondary[data-v-2a324058]:not(:disabled):hover{filter:brightness(1.08)}.mw-btn--ghost[data-v-2a324058]{color:var(--text);border-color:var(--border);background:0 0}.mw-btn--ghost[data-v-2a324058]:not(:disabled):hover{background:var(--lift)}.mw-btn--danger[data-v-2a324058]{background:var(--danger);color:#fff}.mw-btn--danger[data-v-2a324058]:not(:disabled):hover{filter:brightness(1.08)}.mw-card[data-v-d1a4446e]{background:var(--surface);border:1px solid var(--border);border-radius:var(--mw-radius,10px);color:var(--text);overflow:hidden}.mw-card__header[data-v-d1a4446e]{border-bottom:1px solid var(--border);padding:.85rem 1rem}.mw-card__title[data-v-d1a4446e]{margin:0;font-size:1rem;font-weight:600}.mw-card__body[data-v-d1a4446e]{padding:1rem}.mw-card__footer[data-v-d1a4446e]{border-top:1px solid var(--border);background:var(--lift);padding:.75rem 1rem}.mw-select[data-v-b9468387]{position:relative}.mw-select select[data-v-b9468387]{appearance:none;background:var(--surface);width:100%;color:var(--text);border:1px solid var(--border);border-radius:var(--mw-radius,10px);font:inherit;padding:.5rem 2.5rem .5rem .7rem}.mw-select select[data-v-b9468387]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.mw-select__chevron[data-v-b9468387]{pointer-events:none;stroke:var(--muted);stroke-width:1.5px;fill:none;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.mw-notice[data-v-7ba4f2bb]{border:1px solid var(--border);border-radius:var(--mw-radius,10px);background:var(--lift);color:var(--text);border-left-width:3px;margin:0;padding:.6rem .8rem;font-size:.9rem}.mw-notice--error[data-v-7ba4f2bb]{border-left-color:var(--danger);color:var(--danger);background:color-mix(in srgb, var(--danger) 8%, transparent)}.mw-notice--ok[data-v-7ba4f2bb]{border-left-color:var(--ok);color:var(--ok);background:color-mix(in srgb, var(--ok) 8%, transparent)}
+/*$vite$:1*/

package/dist/ui.js

@@ -0,0 +1,242 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeProps as o, normalizeClass as s, normalizeStyle as c, openBlock as l, ref as u, renderList as d, renderSlot as f, toDisplayString as p, useModel as m, vModelSelect as h, watch as g, withDirectives as _ } from "vue";
+//#region src/internal/panel.ts
+function v(e, t) {
+	let n;
+	return n = e === "transparent" ? {
+		"--_bg": "transparent",
+		"--_surface": "transparent",
+		"--_text": "var(--text)",
+		"--_muted": "var(--muted)",
+		"--_border": "transparent"
+	} : e === "light" ? {
+		"--_bg": "var(--mw-panel-light-bg)",
+		"--_surface": "var(--mw-panel-light-surface)",
+		"--_text": "var(--mw-panel-light-text)",
+		"--_muted": "var(--mw-panel-light-muted)",
+		"--_border": "var(--mw-panel-light-border)"
+	} : {
+		"--_bg": "var(--mw-panel-dark-bg)",
+		"--_surface": "var(--mw-panel-dark-surface)",
+		"--_text": "var(--mw-panel-dark-text)",
+		"--_muted": "var(--mw-panel-dark-muted)",
+		"--_border": "var(--mw-panel-dark-border)"
+	}, t && (t.bg && (n["--_bg"] = t.bg), t.surface && (n["--_surface"] = t.surface), t.text && (n["--_text"] = t.text), t.muted && (n["--_muted"] = t.muted), t.border && (n["--_border"] = t.border)), n;
+}
+//#endregion
+//#region src/components/AppHeader.vue?vue&type=script&setup=true&lang.ts
+var ee = { class: "mw-header__brand" }, y = { class: "mw-header__center" }, b = { class: "mw-header__actions" }, x = /*@__PURE__*/ a({
+	__name: "AppHeader",
+	props: {
+		variant: { default: "dark" },
+		colors: {},
+		sticky: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		let n = e, a = t(() => v(n.variant, n.colors));
+		return (t, n) => (l(), r("header", {
+			class: s(["mw-header", [`mw-header--${e.variant}`, { "mw-header--sticky": e.sticky }]]),
+			style: c(a.value)
+		}, [
+			i("div", ee, [f(t.$slots, "brand", {}, void 0, !0)]),
+			i("div", y, [f(t.$slots, "default", {}, void 0, !0)]),
+			i("div", b, [f(t.$slots, "actions", {}, void 0, !0)])
+		], 6));
+	}
+}), S = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, C = /*#__PURE__*/ S(x, [["__scopeId", "data-v-ad7cd1c5"]]), w = {
+	key: 0,
+	class: "mw-sidebar__head"
+}, T = {
+	class: "mw-sidebar__nav",
+	"aria-label": "Primary"
+}, E = {
+	key: 1,
+	class: "mw-sidebar__foot"
+}, D = /*#__PURE__*/ S(/* @__PURE__ */ a({
+	__name: "AppSidebar",
+	props: {
+		variant: { default: "dark" },
+		colors: {},
+		width: {}
+	},
+	setup(e) {
+		let a = e, o = t(() => {
+			let e = v(a.variant, a.colors);
+			return a.width && (e["--mw-sidebar-width"] = a.width), e;
+		});
+		return (t, a) => (l(), r("aside", {
+			class: s(["mw-sidebar", `mw-sidebar--${e.variant}`]),
+			style: c(o.value)
+		}, [
+			t.$slots.head ? (l(), r("div", w, [f(t.$slots, "head", {}, void 0, !0)])) : n("", !0),
+			i("nav", T, [f(t.$slots, "default", {}, void 0, !0)]),
+			t.$slots.foot ? (l(), r("div", E, [f(t.$slots, "foot", {}, void 0, !0)])) : n("", !0)
+		], 6));
+	}
+}), [["__scopeId", "data-v-ccf6628a"]]), O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = { class: "mw-footer__end" }, j = /*#__PURE__*/ S(/* @__PURE__ */ a({
+	__name: "AppFooter",
+	props: {
+		variant: { default: "transparent" },
+		colors: {}
+	},
+	setup(e) {
+		let n = e, a = t(() => v(n.variant, n.colors));
+		return (t, n) => (l(), r("footer", {
+			class: s(["mw-footer", `mw-footer--${e.variant}`]),
+			style: c(a.value)
+		}, [
+			i("div", O, [f(t.$slots, "start", {}, void 0, !0)]),
+			i("div", k, [f(t.$slots, "default", {}, void 0, !0)]),
+			i("div", A, [f(t.$slots, "end", {}, void 0, !0)])
+		], 6));
+	}
+}), [["__scopeId", "data-v-060bc806"]]), M = {
+	class: "mw-mode",
+	role: "group",
+	"aria-label": "Colour mode"
+}, N = [
+	"aria-pressed",
+	"title",
+	"onClick"
+], P = { "aria-hidden": "true" }, te = { class: "mw-mode__label" }, F = /*#__PURE__*/ S(/* @__PURE__ */ a({
+	__name: "ColorModeControl",
+	props: {
+		modelValue: {},
+		modes: { default: () => [
+			"light",
+			"dark",
+			"system"
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(t) {
+		let n = {
+			light: "Light",
+			dark: "Dark",
+			system: "System"
+		}, a = {
+			light: "☀",
+			dark: "☾",
+			system: "◐"
+		};
+		return (o, c) => (l(), r("div", M, [(l(!0), r(e, null, d(t.modes, (e) => (l(), r("button", {
+			key: e,
+			type: "button",
+			class: s(["mw-mode__btn", { "is-active": t.modelValue === e }]),
+			"aria-pressed": t.modelValue === e,
+			title: n[e],
+			onClick: (t) => o.$emit("update:modelValue", e)
+		}, [i("span", P, p(a[e]), 1), i("span", te, p(n[e]), 1)], 10, N))), 128))]));
+	}
+}), [["__scopeId", "data-v-c982c97c"]]), I = ["type", "disabled"], L = /*#__PURE__*/ S(/* @__PURE__ */ a({
+	__name: "UiButton",
+	props: {
+		variant: { default: "primary" },
+		type: { default: "button" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		return (t, n) => (l(), r("button", {
+			type: e.type,
+			disabled: e.disabled,
+			class: s(["mw-btn", `mw-btn--${e.variant}`])
+		}, [f(t.$slots, "default", {}, void 0, !0)], 10, I));
+	}
+}), [["__scopeId", "data-v-2a324058"]]), R = { class: "mw-card" }, z = {
+	key: 0,
+	class: "mw-card__header"
+}, B = { class: "mw-card__title" }, V = { class: "mw-card__body" }, H = {
+	key: 1,
+	class: "mw-card__footer"
+}, U = /*#__PURE__*/ S(/* @__PURE__ */ a({
+	__name: "UiCard",
+	props: { title: {} },
+	setup(e) {
+		return (t, a) => (l(), r("section", R, [
+			e.title || t.$slots.header ? (l(), r("header", z, [f(t.$slots, "header", {}, () => [i("h3", B, p(e.title), 1)], !0)])) : n("", !0),
+			i("div", V, [f(t.$slots, "default", {}, void 0, !0)]),
+			t.$slots.footer ? (l(), r("footer", H, [f(t.$slots, "footer", {}, void 0, !0)])) : n("", !0)
+		]));
+	}
+}), [["__scopeId", "data-v-d1a4446e"]]), W = { class: "mw-select" }, G = /*#__PURE__*/ S(/* @__PURE__ */ a({
+	inheritAttrs: !1,
+	__name: "UiSelect",
+	props: {
+		modelValue: {},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = m(e, "modelValue");
+		return (e, n) => (l(), r("div", W, [_(i("select", o(e.$attrs, { "onUpdate:modelValue": n[0] ||= (e) => t.value = e }), [f(e.$slots, "default", {}, void 0, !0)], 16), [[h, t.value]]), n[1] ||= i("svg", {
+			class: "mw-select__chevron",
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "12",
+			height: "8",
+			viewBox: "0 0 12 8",
+			"aria-hidden": "true"
+		}, [i("path", { d: "M1 1l5 5 5-5" })], -1)]));
+	}
+}), [["__scopeId", "data-v-b9468387"]]), K = ["role"], q = /*#__PURE__*/ S(/* @__PURE__ */ a({
+	__name: "UiNotice",
+	props: { type: {} },
+	setup(e) {
+		let n = e, i = t(() => {
+			if (n.type === "error") return "alert";
+			if (n.type === "ok") return "status";
+		});
+		return (t, n) => (l(), r("p", {
+			class: s(["mw-notice", e.type && e.type !== "info" ? `mw-notice--${e.type}` : ""]),
+			role: i.value
+		}, [f(t.$slots, "default", {}, void 0, !0)], 10, K));
+	}
+}), [["__scopeId", "data-v-7ba4f2bb"]]), J = "mw-color-mode", Y = u("system"), X = !1;
+function Z() {
+	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function Q(e) {
+	return e === "dark" || e === "system" && Z();
+}
+function $(e) {
+	typeof document > "u" || document.documentElement.setAttribute("data-theme", Q(e) ? "dark" : "light");
+}
+function ne(e = "system") {
+	if (!X) {
+		X = !0;
+		let t = null;
+		try {
+			t = typeof localStorage < "u" ? localStorage.getItem(J) : null;
+		} catch {}
+		Y.value = t ?? e, $(Y.value), typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+			Y.value === "system" && $("system");
+		}), g(Y, (e) => {
+			$(e);
+			try {
+				typeof localStorage < "u" && localStorage.setItem(J, e);
+			} catch {}
+		});
+	}
+	function t(e) {
+		Y.value = e;
+	}
+	function n() {
+		t(Y.value === "light" ? "dark" : Y.value === "dark" ? "system" : "light");
+	}
+	return {
+		mode: Y,
+		set: t,
+		cycle: n,
+		isDark: () => Q(Y.value)
+	};
+}
+//#endregion
+export { j as AppFooter, C as AppHeader, D as AppSidebar, F as ColorModeControl, L as UiButton, U as UiCard, q as UiNotice, G as UiSelect, ne as useColorMode };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@meddleware/ui",
+  "version": "0.1.0",
+  "description": "Shared Vue 3 component library for @meddleware UIs — layout shell (header/sidebar/footer), colour-mode control, and primitives. Built on @meddleware/design-tokens.",
+  "license": "0BSD",
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.vue"
+  ],
+  "main": "./dist/ui.js",
+  "module": "./dist/ui.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/ui.js"
+    },
+    "./base.css": "./dist/base.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vue-tsc -p tsconfig.build.json && vite build",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@meddleware/design-tokens": "^0.1.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.8",
+    "typescript": "^6.0.0",
+    "vite": "^8.2.2",
+    "vue": "^3.5.42",
+    "vue-tsc": "~3.3.11"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}