@neuralytics/alpine-ds 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @neuralytics/alpine-ds
+
+## 0.2.2
+
+### Patch Changes
+
+- f03ebe4: Include CHANGELOG.md in the published npm package.
+
+## 0.2.1
+
+### Patch Changes
+
+- fa5d634: Set up automated npm publishing and CI (verification on PRs, versioning and release via Changesets).

package/README.md

@@ -0,0 +1,81 @@
+# @neuralytics/alpine-ds
+
+⚠️ **Work in progress** — this design system is under active development. Expect breaking changes between minor versions until `1.0.0`.
+
+## Documentation
+
+Component playground (Histoire): -
+
+Changelog: [CHANGELOG.md](./CHANGELOG.md)
+
+## Components already available
+
+- `AlpineButton`
+- `AlpineIcon`
+
+## Integration
+
+1. Install the package: `pnpm add @neuralytics/alpine-ds`
+2. Install the dependencies: `pnpm add -D tailwindcss @tailwindcss/vite`
+3. Register the Tailwind Vite plugin in your `vite.config.ts` (required for Tailwind to actually process anything — without it your styles silently stay empty):
+
+```ts
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  plugins: [
+    // ... your other plugins ...
+    tailwindcss(),
+  ],
+})
+```
+
+4. Import the Tailwind configuration in your main style file. The path in `@config` is relative to this CSS file — adjust it if your `tailwind.config.ts` isn't next to it (e.g. `../tailwind.config.ts` if your CSS lives in `src/` and the config is at your project root):
+
+```css
+@import "tailwindcss";
+@config "./tailwind.config.ts";
+```
+
+5. Configure Tailwind (`tailwind.config.ts`) using the design system's preset, which already handles detection of the package's classes and the icon plugin:
+
+```ts
+import type { Config } from "tailwindcss"
+import alpineDsPreset from "@neuralytics/alpine-ds/tailwind-preset"
+
+export default {
+  presets: [alpineDsPreset],
+  content: [
+    // ... your source files ...
+  ],
+} as Config
+```
+
+6. Set the accent color in your project's `main.ts`:
+
+```js
+import { setAccentColorTheme } from "@neuralytics/alpine-ds"
+
+setAccentColorTheme("#fe4e29")
+```
+
+Note that this function can be called at any time. Calling it in your `main.ts` gives you a default value.
+
+7. (Optional) Set the text color of the primary `AlpineButton` if `white` doesn't fit your accent color:
+
+```js
+import { setButtonTextColor } from "@neuralytics/alpine-ds"
+
+setButtonTextColor("#000000")
+```
+
+This only affects the primary button's text (not disabled or loading states) and defaults to `white` if never called.
+
+8. Import a component in a `.vue` file
+
+```js
+import { AlpineButton } from "@neuralytics/alpine-ds"
+```
+
+For monorepo-level docs, see the [repository README](https://github.com/neuralytics/alpine-design-system#readme).

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@neuralytics/alpine-ds",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.2",
+  "publishConfig": {
+    "access": "public"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -15,8 +18,12 @@
   "main": "./dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
+    "CHANGELOG.md",
     "dist"
   ],
+  "engines": {
+    "node": ">=24"
+  },
   "scripts": {
     "build": "vite build",
     "test": "vitest run",