@soli92/solids 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.1.0](https://github.com/Soli92/solids/compare/v1.0.0...v1.1.0) (2026-03-24)
+
+
+### Features
+
+* tailwind preset, shadcn registry [@solids](https://github.com/solids), Storybook button showcase ([2df67ce](https://github.com/Soli92/solids/commit/2df67ce8e1b810348775a717a0a106eac614378f))
+
 # 1.0.0 (2026-03-24)
 
 

package/README.md

@@ -32,6 +32,8 @@ npm install @soli92/solids
 
 ### Con Tailwind + shadcn/ui (Next.js, Vite…)
 
+**Consigliato:** usa il **preset Tailwind** del pacchetto così tema, colori shadcn, font e shadow restano allineati ai token in un solo punto.
+
 ```css
 /* globals.css */
 @import "@soli92/solids/css/index.css";
@@ -44,33 +46,19 @@ npm install @soli92/solids
 ```js
 // tailwind.config.js
 module.exports = {
-  darkMode: ["class", '[data-theme="dark"]'],
-  theme: {
-    extend: {
-      colors: {
-        background:  "var(--background)",
-        foreground:  "var(--foreground)",
-        primary:     { DEFAULT: "var(--primary)",   foreground: "var(--primary-foreground)" },
-        secondary:   { DEFAULT: "var(--secondary)", foreground: "var(--secondary-foreground)" },
-        muted:       { DEFAULT: "var(--muted)",     foreground: "var(--muted-foreground)" },
-        accent:      { DEFAULT: "var(--accent)",    foreground: "var(--accent-foreground)" },
-        destructive: { DEFAULT: "var(--destructive)",foreground: "var(--destructive-foreground)" },
-        card:        { DEFAULT: "var(--card)",      foreground: "var(--card-foreground)" },
-        popover:     { DEFAULT: "var(--popover)",   foreground: "var(--popover-foreground)" },
-        border: "var(--border)",
-        input:  "var(--input)",
-        ring:   "var(--ring)",
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-    },
-  },
+  presets: [require("@soli92/solids/tailwind-preset")],
+  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
 };
 ```
 
+Serve anche `tailwindcss-animate` (dipendenza tipica di shadcn):
+
+```bash
+npm install tailwindcss-animate
+```
+
+Poi inizializza shadcn e aggiungi i componenti con la CLI (`npx shadcn@latest init` → `add button`, …). I componenti useranno le variabili `--background`, `--primary`, ecc., già mappate da SoliDS. Un esempio di `components.json` è in [templates/components.json.example](./templates/components.json.example).
+
 ➡️ Guida completa: [docs/shadcn-integration.md](./docs/shadcn-integration.md)
 
 ### Senza framework
@@ -93,6 +81,8 @@ import "@soli92/solids/css/base.css";                 // solo base
 import "@soli92/solids/css/utilities.css";            // solo utilities
 ```
 
+Preset Tailwind (shadcn): `require("@soli92/solids/tailwind-preset")` nel `tailwind.config`.
+
 ---
 
 ## Token Reference
@@ -195,13 +185,33 @@ npm install
 # Build (genera dist/)
 npm run build
 
-# Storybook
+# Storybook (build token + Tailwind preview, poi dev server)
 npm run storybook
 
 # Release (semantic-release — solo da CI)
 npm run release
+
+# Registry shadcn (sync src → registry/solids + JSON in registry/r)
+npm run registry:build
 ```
 
+Per Storybook, il CSS Tailwind viene precompilato in `.storybook/preview-tw.built.css` (file ignorato da git) dallo script `build:storybook-css`.
+
+---
+
+## Framework UI (progetti personali + shadcn)
+
+SoliDS resta **agnostico**: i componenti UI vivono nelle tue app (modello shadcn: codice in repo, non solo in `node_modules`). Il flusso consigliato:
+
+1. **Token e CSS** — `@soli92/solids` (`index.css` + opzionale solo layer).
+2. **Tailwind** — `presets: [require("@soli92/solids/tailwind-preset")]` + `tailwindcss-animate`.
+3. **shadcn/ui** — `npx shadcn@latest init` e `add` per ogni blocco (Radix + CVA + le tue classi).
+4. **Tema** — `data-theme` / `next-themes` come in [docs/shadcn-integration.md](./docs/shadcn-integration.md).
+
+In questo repository, **Storybook** include un esempio **Button** in stile shadcn in `src/components/ui/button.tsx` (solo sorgente di riferimento: **non** è incluso nell’artifact npm `dist/`; nei progetti veri aggiungi i componenti con la CLI shadcn).
+
+Il **registry shadcn** per il modello 1 è in `registry/` (sorgenti) e `registry/r/` (JSON generati). Guida operativa: [docs/registry-model-1.md](./docs/registry-model-1.md).
+
 ---
 
 ## Struttura
@@ -214,14 +224,23 @@ src/
 │   └── themes/
 │       ├── light.json      # Override tema light
 │       └── dark.json       # Override tema dark
+├── tailwind/
+│   └── preset.cjs          # Preset Tailwind (shadcn + token SD)
+├── components/ui/          # Esempio shadcn in Storybook
 ├── css/
 │   ├── shadcn.css          # Compatibility layer shadcn/ui
 │   ├── base.css            # Reset + global styles
 │   └── utilities.css       # Classi utility sd-*
 scripts/
-└── build.mjs               # Build script → genera dist/
+├── build.mjs               # Build script → genera dist/
+└── sync-registry.mjs       # Copia src → registry/solids (per shadcn build)
+registry/
+│   └── solids/             # Sorgenti registry (sync da src/)
+registry.json               # Indice item shadcn (root repo)
+registry/r/                 # JSON pubblicati (`npm run registry:build`)
 docs/
-└── shadcn-integration.md   # Guida integrazione completa
+├── shadcn-integration.md   # Guida integrazione completa
+└── registry-model-1.md     # Modello shadcn in repo + @solids
 ```
 
 ---

package/dist/tailwind/preset.cjs

@@ -0,0 +1,89 @@
+/**
+ * SoliDS — Tailwind preset (shadcn/ui + token bridge).
+ * Install: tailwindcss, tailwindcss-animate, @soli92/solids.
+ * In tailwind.config: presets: [require("@soli92/solids/tailwind-preset")].
+ * In globals.css: import SoliDS index.css, then Tailwind layers.
+ */
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
+/** @type {import("tailwindcss").Config} */
+module.exports = {
+  darkMode: ["class", '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        card: {
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)",
+        },
+        popover: {
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)",
+        },
+        primary: {
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)",
+        },
+        secondary: {
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)",
+        },
+        muted: {
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)",
+        },
+        accent: {
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)",
+        },
+        destructive: {
+          DEFAULT: "var(--destructive)",
+          foreground: "var(--destructive-foreground)",
+        },
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+        chart: {
+          1: "var(--chart-1)",
+          2: "var(--chart-2)",
+          3: "var(--chart-3)",
+          4: "var(--chart-4)",
+          5: "var(--chart-5)",
+        },
+        sidebar: {
+          DEFAULT: "var(--sidebar)",
+          foreground: "var(--sidebar-foreground)",
+          primary: "var(--sidebar-primary)",
+          "primary-foreground": "var(--sidebar-primary-foreground)",
+          accent: "var(--sidebar-accent)",
+          "accent-foreground": "var(--sidebar-accent-foreground)",
+          border: "var(--sidebar-border)",
+          ring: "var(--sidebar-ring)",
+        },
+        "sd-primary": "var(--sd-color-primary-default)",
+        "sd-success": "var(--sd-color-intent-success)",
+        "sd-warning": "var(--sd-color-intent-warning)",
+        "sd-danger": "var(--sd-color-intent-danger)",
+        "sd-info": "var(--sd-color-intent-info)",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["var(--sd-font-body)", ...fontFamily.sans],
+        mono: ["var(--sd-font-mono)", ...fontFamily.mono],
+      },
+      boxShadow: {
+        sm: "var(--sd-shadow-sm)",
+        md: "var(--sd-shadow-md)",
+        lg: "var(--sd-shadow-lg)",
+        xl: "var(--sd-shadow-xl)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soli92/solids",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "SoliDS – agnostic design system foundations (tokens + CSS) with shadcn/ui compatibility.",
   "license": "MIT",
   "repository": {
@@ -38,7 +38,8 @@
     "./css/themes.css": "./dist/css/themes.css",
     "./css/shadcn.css": "./dist/css/shadcn.css",
     "./css/base.css": "./dist/css/base.css",
-    "./css/utilities.css": "./dist/css/utilities.css"
+    "./css/utilities.css": "./dist/css/utilities.css",
+    "./tailwind-preset": "./dist/tailwind/preset.cjs"
   },
   "publishConfig": {
     "access": "public"
@@ -48,10 +49,14 @@
     "clean": "node -e \"import('node:fs').then(({rmSync})=>rmSync('dist',{recursive:true,force:true}))\"",
     "prepublishOnly": "npm run build",
     "release": "semantic-release",
-    "storybook": "storybook dev -p 6006 --docs",
-    "build-storybook": "storybook build"
+    "build:storybook-css": "tailwindcss -c ./tailwind.config.cjs -i ./.storybook/preview-tw.input.css -o ./.storybook/preview-tw.built.css",
+    "storybook": "npm run build && npm run build:storybook-css && storybook dev -p 6006",
+    "build-storybook": "npm run build && npm run build:storybook-css && storybook build",
+    "registry:sync": "node ./scripts/sync-registry.mjs",
+    "registry:build": "node ./scripts/sync-registry.mjs && shadcn build --output ./registry/r"
   },
   "devDependencies": {
+    "@radix-ui/react-slot": "^1.1.2",
     "@semantic-release/changelog": "^6.0.0",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/git": "^10.0.0",
@@ -62,7 +67,18 @@
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/blocks": "^8.6.14",
     "@storybook/react-vite": "^8.6.14",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "postcss": "^8.4.49",
     "semantic-release": "^25.0.0",
-    "storybook": "^8.6.14"
+    "shadcn": "^4.1.0",
+    "storybook": "^8.6.14",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.7.2"
   }
 }