@dcodegroup-au/dsg-vue 0.1.40 → 1.0.1-next.1

package/README.md

@@ -32,19 +32,36 @@
 
 <br/>
 
-### NPM Package
+### NPM Package (Stable — Tailwind CSS v3)
 
-For standard Vue 3 project installations, you can install the `dsg-vue` package using any of the following commands below.
+For standard Vue 3 project installations using **Tailwind CSS v3**, install the stable `latest` version:
 
 ```sh
 pnpm i -D @dcodegroup-au/dsg-vue
 ```
+
+<br/>
+
+### NPM Package (Next — Tailwind CSS v4)
+
+To install the upcoming **Tailwind CSS v4** pre-release version, use the `next` tag:
+
+```sh
+pnpm i -D @dcodegroup-au/dsg-vue@next
+```
+
+> **Note:** The `next` version (`1.x.x`) targets Tailwind CSS v4 and includes breaking changes. See `TAILWIND_V4_MIGRATION.md` for details.
+
 <br/>
 
 ### GitHub Repository
 
 ```sh
+# Stable (Tailwind CSS v3)
 pnpm i -D https://github.com/DCODE-GROUP/dsg-vue#main
+
+# Next (Tailwind CSS v4)
+pnpm i -D https://github.com/DCODE-GROUP/dsg-vue#next
 ```
 <br/>
 
@@ -137,7 +154,7 @@ export default defineConfig(({ command, mode }) => {
 
 ## Usage: Tailwind Configuration
 
-To configure the Tailwind CSS portion of the package, you will need to create a `tailwind.config.ts` file in the root of your project. Then you will need to extend the `dsg-vue` Tailwind configurations/plugins to match your project Figma/design guidelines.
+To configure the Tailwind CSS portion of the package, you will need to create a `_tailwind.config.ts` file in the root of your project. Then you will need to extend the `dsg-vue` Tailwind configurations/plugins to match your project Figma/design guidelines.
 
 <br />
 
@@ -187,7 +204,7 @@ To use the Vue components within the package, you will need to import them direc
       type="email"
       placeholder="jane.doe@example.org"
       name="email"
-      classes="form-input username"
+      class="form-input username"
       icon="mail-01"
       tool-tip="This is your username or email address."
       :has-tooltip="true"
@@ -201,7 +218,6 @@ To use the Vue components within the package, you will need to import them direc
       :preventDefault="true"
       theme="brand"
       aria-label="This is an aria-label"
-      classes=""
       @button-clicked="loginClicked"
     />
   </div>
@@ -261,7 +277,7 @@ Within the `dsgTailwind` export, you will find a list of Tailwind CSS plugins th
 - `DsgShadowsPlugin`
 - `DsgFocusRingsPlugin`
 
-To exclude or only use specific plugins, you can import them directly from the `dsg-vue` package and add them to the `plugins` array in the `tailwind.config.ts` file instead of using the `dsgTailwind` export as shown above.
+To exclude or only use specific plugins, you can import them directly from the `dsg-vue` package and add them to the `plugins` array in the `_tailwind.config.ts` file instead of using the `dsgTailwind` export as shown above.
 
 <br />
 
@@ -276,7 +292,7 @@ Within the package, there are also two extensible components that house the them
 - `DsgColours`
 - `DsgFontFamily`
 
-To extend these components, you can import them directly from the `dsg-vue` package and add them to the `theme` object in the `tailwind.config.ts` file as shown above.
+To extend these components, you can import them directly from the `dsg-vue` package and add them to the `theme` object in the `_tailwind.config.ts` file as shown above.
 
 
 <br />
@@ -289,4 +305,47 @@ The `dsg-vue` package is built to match the UntitledUI Figma design system. Each
 
 For more information on the base Design System Template check out Figma folder for the designated project or at the following link:
 
-- <a href="https://www.figma.com/design/T06aUcOseXpSG6HzgjrlLP/%E2%9D%96-PREVIEW-%E2%9D%96-Untitled-UI-%E2%80%93-PRO-VARIABLES-(v6.0)">UntitledUI - Pro Version Demo</a>
+- <a href="https://www.figma.com/design/T06aUcOseXpSG6HzgjrlLP/%E2%9D%96-PREVIEW-%E2%9D%96-Untitled-UI-%E2%80%93-PRO-VARIABLES-(v6.0)">UntitledUI - Pro Version Demo</a>
+
+<br />
+<hr />
+<br />
+
+## Versioning & NPM Tags
+
+The library uses two npm distribution tags corresponding to two active branches:
+
+| NPM Tag | Branch | Version Range | Tailwind CSS | Status |
+|---------|--------|--------------|-------------|--------|
+| `latest` | `main` | `0.x.x` | v3 | Stable / Current |
+| `next` | `next` | `1.x.x` | v4 | Pre-release |
+
+### Branching Strategy
+
+- **`main`** — Stable releases (`0.x.x`). Published to npm as `latest` tag. Uses Tailwind CSS v3.
+- **`next`** — Pre-release builds (`1.x.x`). Published to npm as `next` tag. Targets Tailwind CSS v4.
+- **`develop`** — Active development branch. PRs merge into `develop`, then into `main` or `next`.
+
+### Install Commands
+
+```sh
+# Install stable (Tailwind v3)
+pnpm i -D @dcodegroup-au/dsg-vue
+
+# Install next (Tailwind v4)
+pnpm i -D @dcodegroup-au/dsg-vue@next
+```
+
+### Publishing
+
+Publishing is automated via GitHub Actions:
+
+- Push to `main` → publishes with `--tag latest`
+- Push to `next` → publishes with `--tag next`
+
+When Tailwind CSS v4 is fully released and the `next` branch is merged to `main`, the version will become `1.x.x` with the `latest` tag, and the `0.x.x` line will be tagged as `legacy`:
+
+```sh
+# Future: install legacy Tailwind v3 version
+pnpm i -D @dcodegroup-au/dsg-vue@legacy
+```

package/dist/DsgLabel.vue_vue_type_style_index_0_lang-CzkVjbOp.js

@@ -0,0 +1,26 @@
+import { defineComponent as t, openBlock as a, createElementBlock as o, normalizeClass as r, renderSlot as s, createTextVNode as n, toDisplayString as d } from "vue";
+function b(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+const c = ["for"], i = /* @__PURE__ */ t({
+  __name: "DsgLabel",
+  props: {
+    label: { default: "" },
+    labelFor: { default: "" },
+    size: { default: "md" }
+  },
+  setup(e) {
+    return (l, f) => (a(), o("label", {
+      for: e.labelFor,
+      class: r(`dsg-label dsg-label--${e.size}`)
+    }, [
+      s(l.$slots, "dsg-label-text", {}, () => [
+        n(d(e.label), 1)
+      ])
+    ], 10, c));
+  }
+});
+export {
+  i as _,
+  b as g
+};

package/dist/DsgLabel.vue_vue_type_style_index_0_lang-WrIgmJyQ.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("vue");function a(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}const o=["for"],r=t.defineComponent({__name:"DsgLabel",props:{label:{default:""},labelFor:{default:""},size:{default:"md"}},setup(e){return(l,s)=>(t.openBlock(),t.createElementBlock("label",{for:e.labelFor,class:t.normalizeClass(`dsg-label dsg-label--${e.size}`)},[t.renderSlot(l.$slots,"dsg-label-text",{},()=>[t.createTextVNode(t.toDisplayString(e.label),1)])],10,o))}});exports._sfc_main=r;exports.getDefaultExportFromCjs=a;