centoui 1.0.0-alpha.3 → 1.0.0-alpha.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +73 -12
  2. package/dist/index.d.ts +3 -3
  3. package/package.json +47 -19
package/README.md CHANGED
@@ -1,27 +1,88 @@
1
- # centoui
1
+ <div align="center">
2
+ <h1>centoui</h1>
3
+ <p><strong>Vue components for elegant interfaces</strong></p>
4
+ <p>
5
+ <a href="https://npmx.dev/package/centoui"><img src="https://img.shields.io/npm/v/centoui.svg?style=plastic&label=NPM%20Version&color=blue" alt="NPM Version"></a>
6
+ <a href="https://npmx.dev/package/centoui"><img src="https://img.shields.io/npm/dw/centoui.svg?style=plastic&label=NPM%20Downloads&color=blue" alt="NPM Downloads"></a>
7
+ <a href="https://npmx.dev/package/centoui"><img src="https://img.shields.io/npm/unpacked-size/centoui?style=plastic&label=NPM%20Unpacked%20Size&color=blue" alt="NPM Unpacked Size"></a>
8
+ </p>
9
+ </div>
2
10
 
3
- [![npm version](https://img.shields.io/npm/v/centoui.svg?style=flat-square)](https://www.npmjs.com/package/centoui)
4
- [![npm downloads](https://img.shields.io/npm/dm/centoui.svg?style=flat-square)](https://www.npmjs.com/package/centoui)
5
- [![license](https://img.shields.io/github/license/favorodera/centoui.svg?style=flat-square)](https://github.com/favorodera/centoui/blob/main/LICENSE)
11
+ <br>
6
12
 
7
- **Sharp components. Flawless interfaces.**
13
+ `centoui` is the core package of the CentoUI ecosystem. It contains every component's source code, the theme CSS, the component registry, and the `defineConfig` helper used by `centoui.config.ts`.
8
14
 
9
- `centoui` is the core Vue component library that powers the CentoUI ecosystem. It provides a set of highly customizable, accessible, and design-driven components built with Vue 3, Tailwind CSS v4, and Reka UI.
15
+ When you run `centoui add button`, the CLI fetches the button source files from this package's registry and copies them into your project. You get the full `.vue` file and its variant definitions — no black-box imports.
10
16
 
11
17
  ## Installation
12
18
 
13
19
  ```bash
14
- # Using pnpm
15
20
  pnpm add centoui
21
+ ```
22
+
23
+ ## How It Works
24
+
25
+ CentoUI follows a **copy-paste** model. Components are not consumed as runtime imports from `node_modules`. Instead, they are copied directly into your project by the [CLI](../cli), giving you full ownership and the freedom to customize.
26
+
27
+ Each component consists of:
28
+
29
+ - A **`.vue` file** — the template and script, built on [Reka UI](https://reka-ui.com/) primitives for accessibility and behavior.
30
+ - An **`index.ts` file** — variant definitions using [Tailwind Variants](https://www.tailwind-variants.org/), TypeScript prop types, and the component export.
31
+
32
+ ### Version-Locked Fetching
33
+
34
+ The CLI fetches all component files, the registry index, and the theme CSS from the **exact tagged release of this package** that matches the installed `centoui-cli` version. The source base URL is pinned to `refs/tags/v<VERSION>` — never to `main` or a floating ref.
35
+
36
+ This guarantees that the files copied into your project always correspond to the same release as the CLI you ran, so there is no risk of getting a component from a newer or older version of this package.
37
+
38
+ ### Theming
16
39
 
17
- # Using npm
18
- npm install centoui
40
+ A single `centoui.css` file controls the entire visual identity. It defines semantic color tokens using `oklch` for both light and dark modes — `--primary`, `--secondary`, `--error`, `--surface`, and more. Changing your palette is one file edit.
41
+
42
+ ```css
43
+ :root {
44
+ --primary: oklch(0.09 0 0);
45
+ --primary-foreground: oklch(0.98 0 0);
46
+ /* ... */
47
+ }
48
+
49
+ .dark {
50
+ --primary: oklch(0.98 0 0);
51
+ --primary-foreground: oklch(0.08 0 0);
52
+ }
53
+ ```
54
+
55
+ ## Configuration
56
+
57
+ The `defineConfig` helper is re-exported from this package for use in `centoui.config.ts`:
58
+
59
+ ```ts
60
+ import { defineConfig } from "centoui"
61
+
62
+ export default defineConfig({
63
+ componentsDir: "./src/components/centoui",
64
+ themeFilePath: "./src/assets/css/centoui.css",
65
+ icons: {
66
+ check: "lucide:check",
67
+ close: "lucide:x",
68
+ chevronDown: "lucide:chevron-down",
69
+ },
70
+ })
19
71
  ```
20
72
 
21
- ## Usage
73
+ ## Peer Dependencies
74
+
75
+ CentoUI components rely on these runtime packages (automatically installed when you use the CLI):
22
76
 
23
- While `centoui` can be used as a standalone library, it is best experienced through the [CentoUI CLI](https://github.com/favorodera/centoui/tree/main/packages/cli) which handles component installation and configuration.
77
+ - [`vue`](https://vuejs.org/) — Vue 3
78
+ - [`reka-ui`](https://reka-ui.com/) — Accessible headless primitives
79
+ - [`tailwindcss`](https://tailwindcss.com/) + [`@tailwindcss/vite`](https://tailwindcss.com/) — Styling engine
80
+ - [`tailwind-variants`](https://www.tailwind-variants.org/) — Variant-driven class composition
81
+ - [`tailwind-merge`](https://github.com/dcastil/tailwind-merge) — Class conflict resolution
82
+ - [`@vueuse/core`](https://vueuse.org/) — Composition utilities
83
+ - [`@iconify/vue`](https://iconify.design/) — Icon rendering (optional)
84
+ - [`tw-animate-css`](https://github.com/Wombosvideo/tw-animate-css) — Animation utilities
24
85
 
25
86
  ## License
26
87
 
27
- [MIT](../../LICENSE) &copy; [Favour Emeka](https://github.com/favorodera)
88
+ [MIT](../../LICENSE) &copy; [Favour Emeka](https://github.com/favorodera)
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CentoUIConfig } from "centoui-cli";
1
+ import { CentoUIConfig, CentoUIConfig as CentoUIConfig$1 } from "centoui-cli";
2
2
 
3
3
  //#region src/index.d.ts
4
4
  /**
@@ -6,6 +6,6 @@ import { CentoUIConfig } from "centoui-cli";
6
6
  * @param config - CentoUI config
7
7
  * @returns CentoUI config
8
8
  */
9
- declare function defineConfig(config: CentoUIConfig): CentoUIConfig;
9
+ declare function defineConfig(config: CentoUIConfig$1): CentoUIConfig$1;
10
10
  //#endregion
11
- export { defineConfig };
11
+ export { type CentoUIConfig, defineConfig };
package/package.json CHANGED
@@ -1,9 +1,18 @@
1
1
  {
2
2
  "name": "centoui",
3
3
  "type": "module",
4
- "description": "Precise vue components",
4
+ "description": "Vue components for elegant interfaces",
5
+ "keywords": [
6
+ "vue",
7
+ "ui",
8
+ "components",
9
+ "tailwindcss",
10
+ "tailwind",
11
+ "design-system",
12
+ "accessibility"
13
+ ],
5
14
  "private": false,
6
- "version": "1.0.0-alpha.3",
15
+ "version": "1.0.0-alpha.31",
7
16
  "author": "Favour Emeka <favorodera@gmail.com>",
8
17
  "license": "MIT",
9
18
  "homepage": "https://centoui.vercel.app",
@@ -28,38 +37,57 @@
28
37
  "centoui": "./bin/centoui.js"
29
38
  },
30
39
  "dependencies": {
31
- "centoui-cli": "1.0.0-alpha.3"
32
- },
33
- "peerDependencies": {
34
- "vue": "^3.0.0"
40
+ "centoui-cli": "1.0.0-alpha.31"
35
41
  },
36
42
  "devDependencies": {
37
43
  "@clack/prompts": "^1.2.0",
38
- "@iconify/vue": "^5.0.0",
39
- "@tailwindcss/vite": "^4.2.4",
44
+ "@nuxt/icon": "2.2.2",
40
45
  "@types/fs-extra": "^11.0.4",
41
- "@vitejs/plugin-vue": "^6.0.5",
46
+ "@vitejs/plugin-vue": "^6.0.6",
42
47
  "@vitest/ui": "^4.1.5",
43
48
  "@vue/test-utils": "^2.4.8",
44
- "@vueuse/core": "^14.2.1",
45
49
  "fs-extra": "^11.3.4",
46
50
  "happy-dom": "^20.9.0",
47
51
  "pathe": "^2.0.3",
48
- "reka-ui": "^2.9.6",
49
- "tailwind-merge": "^3.5.0",
50
- "tailwind-variants": "^3.2.2",
51
- "tailwindcss": "^4.2.4",
52
52
  "tsdown": "^0.21.7",
53
53
  "tsx": "^4.21.0",
54
- "tw-animate-css": "^1.4.0",
55
- "vite": "^8.0.3",
54
+ "vite": "^8.0.8",
56
55
  "vitest": "^4.1.2",
57
56
  "vitest-axe": "^0.1.0",
58
- "vue": "^3.5.31",
59
- "vue-tsc": "^3.2.6"
57
+ "vue": "^3.5.34",
58
+ "vue-tsc": "^3.2.6",
59
+ "@iconify/vue": "^5.0.1",
60
+ "@tailwindcss/vite": "^4.3.0",
61
+ "tailwind-variants": "^3.2.2",
62
+ "tailwind-merge": "^3.6.0",
63
+ "tw-animate-css": "^1.4.0",
64
+ "tailwindcss": "^4.3.0",
65
+ "reka-ui": "^2.9.8",
66
+ "@vueuse/core": "^14.3.0"
67
+ },
68
+ "peerDependencies": {
69
+ "vue": "^3.5.0",
70
+ "@iconify/vue": "^5.0.0",
71
+ "@tailwindcss/vite": "^4.3.0",
72
+ "tailwind-variants": "^3.2.2",
73
+ "tailwind-merge": "^3.5.0",
74
+ "tw-animate-css": "^1.4.0",
75
+ "tailwindcss": "^4.3.0",
76
+ "reka-ui": "^2.9.6",
77
+ "@vueuse/core": "^14.2.1",
78
+ "@nuxt/icon": "2.2.2"
79
+ },
80
+ "peerDependenciesMeta": {
81
+ "@iconify/vue": {
82
+ "optional": true
83
+ },
84
+ "@nuxt/icon": {
85
+ "optional": true
86
+ }
60
87
  },
61
88
  "engines": {
62
- "node": ">=22.0.0"
89
+ "node": ">=22.0.0",
90
+ "pnpm": ">=11.0.0"
63
91
  },
64
92
  "scripts": {
65
93
  "build:registry": "tsx scripts/build-registry.ts",