@nxgt/material-vue 0.1.0 → 0.3.0

package/README.md

@@ -4,23 +4,63 @@ Vue component library: primitives, form fields, layout shell, `DataTable`,
 drag-and-drop, i18n, and `Icon`. Tailwind CSS v4 + shadcn-vue (Reka UI).
 
 This package is the Vue mirror of [`@nxgt/material`](https://github.com/softistx/nxgt-material).
-The full consumer README lands with the first public release.
+
+## Styles
+
+Import the stylesheet **explicitly**, in your Tailwind v4 entry, right after
+`@import "tailwindcss"`:
+
+```css
+/* app/assets/css/main.css */
+@import "tailwindcss";
+@import "@nxgt/material-vue/styles.css";
+```
+
+Nothing injects it for you, on purpose:
+
+- Tailwind v4 builds **one** `@theme` from a single CSS graph. `@theme` /
+  `@utility` only apply when `styles.css` is imported in the same file as
+  `@import "tailwindcss"`; a second stylesheet (for example another Nuxt
+  `css[]` entry) starts a second pipeline, and the tokens never reach the app.
+- Tailwind CSS IntelliSense reads the theme from that entry file. An explicit
+  import lets it autocomplete the library tokens (`bg-primary`,
+  `text-error-foreground`, `rounded-lg`, …) in your templates.
+
+Tailwind v4 does not scan `node_modules`. `styles.css` already declares
+`@source "../dist"`, so the utilities used inside the components are generated
+by your build: no extra `@source` needed.
+
+### Stylesheets
+
+| Import | What is in it |
+| --- | --- |
+| `@import "@nxgt/material-vue/styles.css"` | source Tailwind v4 tokens, `@theme`, `@utility`: **this** is what a Tailwind app imports |
+| `@import "@nxgt/material-vue"` | `style` condition of the root export → `dist/material-vue.css`: compiled, self-contained CSS (tokens + every utility the components use), for apps without Tailwind |
+
+Do not import both in the same app.
 
 ## Nuxt
 
 ```ts
 export default defineNuxtConfig({
 	modules: ['@nxgt/material-vue/nuxt'],
+	css: ['~/assets/css/main.css'], // imports styles.css, see above
+	vite: { plugins: [tailwindcss()] },
 	nxgtMaterial: {
 		// prefix: 'Nxgt',
-		// css: true,
 	},
 });
 ```
 
-The module injects `styles.css`, auto-imports components and composables, and
-installs Pinia when the host app has none.
+The module:
+
+- Auto-imports components and composables
+- Installs Pinia when the host app has none
+- Pre-bundles CommonJS dependencies (`jsbarcode`) for Vite
+
+It does **not** add the stylesheet: import it yourself as shown in
+[Styles](#styles).
 
 ## Status
 
-Work in progress. Do not consume yet.
+Published on npm. Pin a version in the consumer (`^0.2.0`).

package/dist/{camera-BXYeDCKt.js → camera-6VfHeky8.js}

@@ -1,6 +1,6 @@
-import { fl as e, ll as t, ul as n } from "./components-DbRdoZ6P.js";
+import { Dl as e, Tl as t, wl as n } from "./components-BLkhdNzM.js";
 import { t as r } from "./utils-Cy-ByIEo.js";
-import { r as i, t as a } from "./icon-button-Do3YaRdv.js";
+import { r as i, t as a } from "./icon-button-Ghucx7Ah.js";
 import { n as o } from "./i18n-DXZMN9FA.js";
 import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, openBlock as h, ref as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 import { Pause as S, Play as C } from "lucide-vue-next";
@@ -16,7 +16,7 @@ var w = { class: "grid gap-2" }, T = { class: "flex justify-end" }, E = ["src",
 		Array
 	] } },
 	setup(e) {
-		let n = e, { t: p } = o(), { videoRef: g, state: _, actions: v } = t();
+		let t = e, { t: p } = o(), { videoRef: g, state: _, actions: v } = n();
 		function D(e) {
 			g.value = e instanceof HTMLVideoElement ? e : null;
 		}
@@ -24,9 +24,9 @@ var w = { class: "grid gap-2" }, T = { class: "flex justify-end" }, E = ["src",
 			_.isStreaming ? v.stopStream() : v.startStream();
 		}
 		let k = p("material.camera.capture", "Take Capture"), A = p("material.camera.captured", "Captured");
-		return (e, t) => (h(), l("div", {
+		return (e, n) => (h(), l("div", {
 			"data-slot": "camera",
-			class: m(b(r)("flex relative w-full h-full gap-2", n.class))
+			class: m(b(r)("flex relative w-full h-full gap-2", t.class))
 		}, [u("div", w, [u("video", {
 			ref: D,
 			class: "w-full max-w-lg right-1 ring-primary",
@@ -56,9 +56,9 @@ var w = { class: "grid gap-2" }, T = { class: "flex justify-end" }, E = ["src",
 	}
 }), O = /* @__PURE__ */ p({
 	__name: "camera-provider",
-	setup(t) {
+	setup(n) {
 		let r = g(null), i = g(null), a = v(null), o = e();
-		return n({
+		return t({
 			videoRef: r,
 			canvasRef: i,
 			streamRef: a,