advi-ui 0.1.0 → 0.1.1

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 (2) hide show
  1. package/README.md +69 -28
  2. package/package.json +7 -22
package/README.md CHANGED
@@ -10,11 +10,11 @@ A personal React component library built with **Tailwind CSS**, **SCSS**, and **
10
10
  |------|---------|
11
11
  | React 19 + TypeScript | Component authoring |
12
12
  | Vite | Build & dev server |
13
- | Tailwind CSS + SCSS | Styling |
13
+ | Tailwind CSS + SCSS | Styling (BEM `vi-*` namespace) |
14
14
  | class-variance-authority | Variant management |
15
15
  | Radix UI / Base UI | Accessible primitives |
16
16
  | Lucide React | Icons |
17
- | Storybook 10 | Component explorer |
17
+ | Storybook 10 | Component explorer with light/dark toggle |
18
18
  | Vitest + Playwright | Testing |
19
19
 
20
20
  ---
@@ -37,15 +37,27 @@ npm run build:lib
37
37
 
38
38
  ---
39
39
 
40
- ## Usage
41
-
42
- Install the package:
40
+ ## Installation
43
41
 
44
42
  ```bash
45
43
  npm install advi-ui
46
44
  ```
47
45
 
48
- Import components and styles:
46
+ ```bash
47
+ yarn add advi-ui
48
+ ```
49
+
50
+ ```bash
51
+ pnpm add advi-ui
52
+ ```
53
+
54
+ > **Peer dependencies** — make sure your project has `react >= 18` and `react-dom >= 18` installed.
55
+
56
+ ---
57
+
58
+ ## Usage
59
+
60
+ Import components and styles once at the root of your app:
49
61
 
50
62
  ```tsx
51
63
  import { Button } from "advi-ui";
@@ -56,40 +68,59 @@ export default function App() {
56
68
  }
57
69
  ```
58
70
 
71
+ The style import brings in:
72
+ - All component styles (SCSS, BEM `vi-*` namespace)
73
+ - CSS custom properties for light and dark mode
74
+ - Raleway, Unbounded, and Rubik fonts (self-hosted via `@fontsource`)
75
+ - Tailwind base layer
76
+
77
+ ### Dark mode
78
+
79
+ Add the `dark` class to your `<html>` element to activate dark mode:
80
+
81
+ ```ts
82
+ document.documentElement.classList.toggle("dark");
83
+ ```
84
+
59
85
  ---
60
86
 
61
87
  ## Components
62
88
 
63
89
  | Component | Description |
64
90
  |-----------|-------------|
65
- | `Button` | Multiple variants: `default`, `destructive`, `outline`, `secondary`, `ghost`, `link` |
66
- | `Header` | Responsive nav header with mobile drawer |
67
- | `Loading` | Animated spinner with custom text |
68
- | `Toast` | Lightweight toast notifications — success, error, warning, info |
69
- | `Card` | Container with header/content/footer slots |
70
- | `Dialog` | Accessible modal dialog |
71
- | `Input` | Styled text input |
72
- | `Textarea` | Multi-line input |
73
- | `Label` | Form label |
91
+ | `Button` | Variants: `default`, `destructive`, `outline`, `secondary`, `ghost`, `link` · Sizes: `default`, `sm`, `lg`, `icon` |
92
+ | `Header` | Responsive nav header with logo slot |
93
+ | `Loading` | Animated spinner with optional custom text |
94
+ | `Toast` | Notifications — `default`, `success`, `error`, `warning`, `info` |
95
+ | `Card` | Container with `CardImage`, `CardWrapper`, `CardTitle`, `CardDescription`, `CardContent` slots |
96
+ | `Dialog` | Accessible modal dialog (Radix UI) |
97
+ | `Input` | Text input with optional label, description, and validation |
98
+ | `Textarea` | Multi-line input with optional mask, label, description, and validation |
74
99
  | `Link` | Internal and external link wrapper |
75
100
  | `Modal` | Full-featured modal overlay |
76
- | `PageAside` | Sidebar layout primitive |
77
- | `PageNotFound` | 404 page component |
101
+ | `PageAside` | Sidebar layout with nav, user display, and logout slot |
102
+ | `PageNotFound` | Animated 404 page |
78
103
 
79
104
  ---
80
105
 
81
- ## Project Structure
106
+ ## Design Tokens
82
107
 
83
- ```
84
- src/
85
- ├── components/
86
- │ ├── ui/ # Core UI primitives
87
- │ └── PageNotFound.tsx
88
- ├── stories/
89
- │ ├── ui/ # Storybook stories for UI components
90
- │ └── components/ # Storybook stories for page-level components
91
- └── styles/ # SCSS source files
92
- ```
108
+ All colors and typography are defined as CSS custom properties in `src/styles/global.scss` and override-able via the `.dark` class. SCSS variables live in `src/styles/_variables.scss`.
109
+
110
+ ### Fonts
111
+
112
+ | Tailwind class | Font |
113
+ |----------------|------|
114
+ | `font-raleway` | Raleway (default body font) |
115
+ | `font-unbounded` | Unbounded |
116
+ | `font-rubik` | Rubik |
117
+ | `font-sans` | Geist Variable |
118
+
119
+ ---
120
+
121
+ ## All Components
122
+
123
+ `Button` · `Card` · `CardWrapper` · `CardImage` · `CardTitle` · `CardDescription` · `CardContent` · `Dialog` · `Header` · `Input` · `Link` · `Loading` · `Modal` · `PageAside` · `PageNotFound` · `Textarea` · `Toast`
93
124
 
94
125
  ---
95
126
 
@@ -110,3 +141,13 @@ src/
110
141
  ## License
111
142
 
112
143
  MIT
144
+
145
+ ---
146
+
147
+ <div align="center">
148
+
149
+ **Built with ❤️ by Atharva Devasthali**
150
+
151
+ *Web Developer | Python Engineer | UI/UX Enthusiast*
152
+
153
+ </div>
package/package.json CHANGED
@@ -1,22 +1,7 @@
1
1
  {
2
2
  "name": "advi-ui",
3
- "version": "0.1.0",
4
- "description": "Personal React component library built with Tailwind CSS, SCSS, and Storybook",
5
- "license": "MIT",
6
- "author": "Atharva Devasthali",
7
- "keywords": [
8
- "react",
9
- "component-library",
10
- "tailwind",
11
- "ui",
12
- "typescript",
13
- "storybook"
14
- ],
15
- "homepage": "https://github.com/atharvad/advi-ui#readme",
16
- "repository": {
17
- "type": "git",
18
- "url": "https://github.com/atharvad/advi-ui.git"
19
- },
3
+ "version": "0.1.1",
4
+ "description": "Personal React component library built on shadcn/ui + Tailwind CSS",
20
5
  "type": "module",
21
6
  "main": "./dist/advi-ui.cjs.js",
22
7
  "module": "./dist/advi-ui.es.js",
@@ -24,8 +9,7 @@
24
9
  "exports": {
25
10
  ".": {
26
11
  "import": "./dist/advi-ui.es.js",
27
- "require": "./dist/advi-ui.cjs.js",
28
- "types": "./dist/index.d.ts"
12
+ "require": "./dist/advi-ui.cjs.js"
29
13
  },
30
14
  "./styles": "./dist/advi-ui.css"
31
15
  },
@@ -39,7 +23,6 @@
39
23
  "dev": "vite",
40
24
  "build": "tsc -b && vite build",
41
25
  "build:lib": "tsc -b && vite build --mode production",
42
- "prepublishOnly": "npm run build:lib",
43
26
  "lint": "eslint .",
44
27
  "preview": "vite preview",
45
28
  "storybook": "storybook dev -p 6006",
@@ -53,8 +36,10 @@
53
36
  "dependencies": {
54
37
  "@base-ui/react": "^1.4.0",
55
38
  "@fontsource-variable/geist": "^5.2.8",
39
+ "@fontsource/raleway": "^5.2.8",
40
+ "@fontsource/rubik": "^5.2.8",
41
+ "@fontsource/unbounded": "^5.2.8",
56
42
  "@radix-ui/react-dialog": "^1.1.15",
57
- "@radix-ui/react-label": "^2.1.8",
58
43
  "@radix-ui/react-slot": "^1.2.4",
59
44
  "class-variance-authority": "^0.7.1",
60
45
  "clsx": "^2.1.1",
@@ -63,11 +48,11 @@
63
48
  "tailwind-merge": "^3.5.0"
64
49
  },
65
50
  "devDependencies": {
66
- "@chromatic-com/storybook": "^5.1.2",
67
51
  "@eslint/js": "^9.39.4",
68
52
  "@storybook/addon-a11y": "^10.3.5",
69
53
  "@storybook/addon-docs": "^10.3.5",
70
54
  "@storybook/addon-onboarding": "^10.3.5",
55
+ "@storybook/addon-themes": "^10.3.5",
71
56
  "@storybook/addon-vitest": "^10.3.5",
72
57
  "@storybook/react-vite": "^10.3.5",
73
58
  "@types/node": "^24.12.2",