solid-tom-ui 1.0.3 → 1.0.6
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.
- package/README.md +16 -7
- package/dist/README.md +246 -0
- package/dist/package.json +39 -0
- package/package.json +38 -31
package/README.md
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
|
-
# solid-ui
|
|
1
|
+
# solid-tom-ui
|
|
2
2
|
|
|
3
|
-
> A
|
|
3
|
+
> A blazing-fast, beautifully crafted UI component library for [SolidJS](https://solidjs.com), inspired by Ant Design.
|
|
4
4
|
|
|
5
|
-
Built on **Tailwind CSS 4** and **DaisyUI 5**,
|
|
5
|
+
**Entire library ships at just ~1.5 MB.** Built on **Tailwind CSS 4** and **DaisyUI 5**, solid-tom-ui harnesses SolidJS fine-grained reactivity to deliver buttery-smooth UIs with near-zero overhead — no virtual DOM, no unnecessary re-renders, just raw speed.
|
|
6
|
+
|
|
7
|
+
Customizing the look and feel is a first-class experience: swap the entire color scheme by overriding a handful of CSS variables, or dial in individual components through the unified `color` prop and per-slot `class` overrides — no CSS-in-JS, no build plugins, just plain CSS and Tailwind utilities you already know.
|
|
8
|
+
|
|
9
|
+
## Why solid-tom-ui?
|
|
10
|
+
|
|
11
|
+
- **Featherlight** — the full library (45+ components, styles included) weighs only ~1.5 MB, keeping your app fast on any network
|
|
12
|
+
- **Instant theming** — change primary colors, border radii, and shadows site-wide by editing a single CSS block; no rebuild required
|
|
13
|
+
- **Pixel-perfect by default** — every component is designed to look great out of the box, while remaining fully customizable via `class` props or CSS variables
|
|
14
|
+
- **SolidJS-native** — reactivity is handled at the signal level, so components update surgically without wasting a single render cycle
|
|
6
15
|
|
|
7
16
|
## Features
|
|
8
17
|
|
|
@@ -17,10 +26,10 @@ Built on **Tailwind CSS 4** and **DaisyUI 5**, leveraging SolidJS fine-grained r
|
|
|
17
26
|
|
|
18
27
|
```bash
|
|
19
28
|
npm install solid-tom-ui
|
|
20
|
-
|
|
21
|
-
pnpm
|
|
22
|
-
|
|
23
|
-
bun
|
|
29
|
+
or
|
|
30
|
+
pnpm install solid-tom-ui
|
|
31
|
+
or
|
|
32
|
+
bun install solid-tom-ui
|
|
24
33
|
```
|
|
25
34
|
|
|
26
35
|
### Peer dependencies
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
# solid-tom-ui
|
|
2
|
+
|
|
3
|
+
> A blazing-fast, beautifully crafted UI component library for [SolidJS](https://solidjs.com), inspired by Ant Design.
|
|
4
|
+
|
|
5
|
+
**Entire library ships at just ~1.5 MB.** Built on **Tailwind CSS 4** and **DaisyUI 5**, solid-tom-ui harnesses SolidJS fine-grained reactivity to deliver buttery-smooth UIs with near-zero overhead — no virtual DOM, no unnecessary re-renders, just raw speed.
|
|
6
|
+
|
|
7
|
+
Customizing the look and feel is a first-class experience: swap the entire color scheme by overriding a handful of CSS variables, or dial in individual components through the unified `color` prop and per-slot `class` overrides — no CSS-in-JS, no build plugins, just plain CSS and Tailwind utilities you already know.
|
|
8
|
+
|
|
9
|
+
## Why solid-tom-ui?
|
|
10
|
+
|
|
11
|
+
- **Featherlight** — the full library (45+ components, styles included) weighs only ~1.5 MB, keeping your app fast on any network
|
|
12
|
+
- **Instant theming** — change primary colors, border radii, and shadows site-wide by editing a single CSS block; no rebuild required
|
|
13
|
+
- **Pixel-perfect by default** — every component is designed to look great out of the box, while remaining fully customizable via `class` props or CSS variables
|
|
14
|
+
- **SolidJS-native** — reactivity is handled at the signal level, so components update surgically without wasting a single render cycle
|
|
15
|
+
|
|
16
|
+
## Features
|
|
17
|
+
|
|
18
|
+
- **45+ components** — from simple buttons to complex data tables with virtual scrolling
|
|
19
|
+
- **Tree-shakeable** — each component is its own module; unused components are not bundled
|
|
20
|
+
- **Typed** — full TypeScript support with exported prop interfaces
|
|
21
|
+
- **Themeable** — DaisyUI color tokens + unified `color` prop across all components
|
|
22
|
+
- **Accessible** — semantic HTML, ARIA attributes, keyboard navigation
|
|
23
|
+
- **Zero CSS setup** — pre-compiled CSS bundle includes Tailwind + DaisyUI, no extra config needed
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install solid-tom-ui
|
|
29
|
+
or
|
|
30
|
+
pnpm install solid-tom-ui
|
|
31
|
+
or
|
|
32
|
+
bun install solid-tom-ui
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Peer dependencies
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install solid-js
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Optional (only needed for specific components):
|
|
42
|
+
|
|
43
|
+
| Package | Component |
|
|
44
|
+
|---------|-----------|
|
|
45
|
+
| `imask` | `Input` with mask |
|
|
46
|
+
| `qrcode` | `QrCode` |
|
|
47
|
+
| `@tanstack/solid-table` | `Table` |
|
|
48
|
+
|
|
49
|
+
## Setup
|
|
50
|
+
|
|
51
|
+
### 1. Import the pre-compiled CSS bundle
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
/* app.css */
|
|
55
|
+
@import 'solid-tom-ui/styles';
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Make sure this CSS file is imported in your app entry point:
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
// src/index.tsx
|
|
62
|
+
import './app.css';
|
|
63
|
+
import { render } from 'solid-js/web';
|
|
64
|
+
import App from './App';
|
|
65
|
+
|
|
66
|
+
render(() => <App />, document.getElementById('root')!);
|
|
67
|
+
```
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
### 2. Use components
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
import { Button, Modal, toast } from 'solid-tom-ui';
|
|
74
|
+
|
|
75
|
+
function App() {
|
|
76
|
+
return (
|
|
77
|
+
<Button color="primary" onClick={() => toast.success('Hello!')}>
|
|
78
|
+
Click me
|
|
79
|
+
</Button>
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## Advanced Setup (Custom Theme)
|
|
87
|
+
|
|
88
|
+
Overwrite css variable
|
|
89
|
+
|
|
90
|
+
```css
|
|
91
|
+
:root {
|
|
92
|
+
--color-base-100: white;
|
|
93
|
+
--color-base-content: black;
|
|
94
|
+
|
|
95
|
+
--color-primary: red;
|
|
96
|
+
--color-primary-content: white;
|
|
97
|
+
|
|
98
|
+
--color-secondary: red;
|
|
99
|
+
--color-secondary-content: white;
|
|
100
|
+
|
|
101
|
+
--color-accent: red;
|
|
102
|
+
--color-accent-content: white;
|
|
103
|
+
|
|
104
|
+
--color-neutral: red;
|
|
105
|
+
--color-neutral-content: white;
|
|
106
|
+
|
|
107
|
+
--color-info: red;
|
|
108
|
+
--color-info-content: white;
|
|
109
|
+
|
|
110
|
+
--color-success: red;
|
|
111
|
+
--color-success-content: white;
|
|
112
|
+
|
|
113
|
+
--color-warning: red;
|
|
114
|
+
--color-warning-content: white;
|
|
115
|
+
|
|
116
|
+
--color-error: red;
|
|
117
|
+
--color-error-content: white;
|
|
118
|
+
--radius-selector: 8px;
|
|
119
|
+
--radius-field: 4px;
|
|
120
|
+
--radius-box: 6px;
|
|
121
|
+
--size-selector: 4px;
|
|
122
|
+
--size-field: 4px;
|
|
123
|
+
--border: 1px;
|
|
124
|
+
--depth: 0;
|
|
125
|
+
--noise: 0;
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
## Components
|
|
132
|
+
|
|
133
|
+
### Layout & Navigation
|
|
134
|
+
| Component | Description |
|
|
135
|
+
|-----------|-------------|
|
|
136
|
+
| `Breadcrumb` | Navigation breadcrumb trail |
|
|
137
|
+
| `Divider` | Horizontal or vertical divider |
|
|
138
|
+
| `Drawer` | Slide-in side panel |
|
|
139
|
+
| `Dropdown` | Dropdown menu |
|
|
140
|
+
| `Menu` | Vertical/horizontal navigation menu |
|
|
141
|
+
| `Pagination` | Page navigation |
|
|
142
|
+
| `Splitter` | Resizable split pane |
|
|
143
|
+
| `Steps` | Step-by-step progress indicator |
|
|
144
|
+
| `Tab` | Tabbed navigation |
|
|
145
|
+
|
|
146
|
+
### Data Display
|
|
147
|
+
| Component | Description |
|
|
148
|
+
|-----------|-------------|
|
|
149
|
+
| `Avatar` | User avatar with fallback |
|
|
150
|
+
| `Badge` | Status badge / tag |
|
|
151
|
+
| `Carousel` | Image/content carousel |
|
|
152
|
+
| `ChatBubble` | Chat message bubble |
|
|
153
|
+
| `Diff` | Side-by-side diff viewer |
|
|
154
|
+
| `Indicator` | Numeric badge overlay |
|
|
155
|
+
| `Skeleton` | Loading skeleton placeholder |
|
|
156
|
+
| `Table` | Feature-rich table (virtual scroll, sort, filter, pinned columns) |
|
|
157
|
+
| `Timeline` | Vertical timeline |
|
|
158
|
+
| `Tooltip` | Hover tooltip |
|
|
159
|
+
| `Tour` | Interactive product tour |
|
|
160
|
+
|
|
161
|
+
### Input & Forms
|
|
162
|
+
| Component | Description |
|
|
163
|
+
|-----------|-------------|
|
|
164
|
+
| `Checkbox` | Checkbox input |
|
|
165
|
+
| `Input` | Text, password, number, textarea, color, date, range, OTP, masked inputs |
|
|
166
|
+
| `Rating` | Star rating |
|
|
167
|
+
| `Select` | Dropdown select |
|
|
168
|
+
| `SelectZone` | Drag-to-select zone |
|
|
169
|
+
| `Slider` | Range slider |
|
|
170
|
+
| `Switch` | Toggle switch |
|
|
171
|
+
| `Upload` | File upload with drag & drop |
|
|
172
|
+
|
|
173
|
+
### Feedback
|
|
174
|
+
| Component | Description |
|
|
175
|
+
|-----------|-------------|
|
|
176
|
+
| `Loading` | Spinner / loading indicator |
|
|
177
|
+
| `Modal` | Dialog modal |
|
|
178
|
+
| `ProgressBar` | Progress bar |
|
|
179
|
+
| `Toast` | Toast notifications (`toast.success()`, `toast.error()`, …) |
|
|
180
|
+
|
|
181
|
+
### Visual & Effects
|
|
182
|
+
| Component | Description |
|
|
183
|
+
|-----------|-------------|
|
|
184
|
+
| `Collapse` | Collapsible content panel |
|
|
185
|
+
| `ContextMenu` | Right-click context menu |
|
|
186
|
+
| `FloatButton` | Floating action button |
|
|
187
|
+
| `Hover3dImage` | 3D parallax image on hover |
|
|
188
|
+
| `ImagePreview` | Lightbox image preview |
|
|
189
|
+
| `Mansory` | Masonry grid layout |
|
|
190
|
+
| `QrCode` | QR code generator |
|
|
191
|
+
| `Swap` | Flip between two states |
|
|
192
|
+
| `TextRotate` | Animated rotating text |
|
|
193
|
+
|
|
194
|
+
### Utilities
|
|
195
|
+
| Component | Description |
|
|
196
|
+
|-----------|-------------|
|
|
197
|
+
| `CodePreview` | Code preview |
|
|
198
|
+
|
|
199
|
+
---
|
|
200
|
+
|
|
201
|
+
## API
|
|
202
|
+
|
|
203
|
+
### Color prop
|
|
204
|
+
|
|
205
|
+
Most components accept a `color` prop:
|
|
206
|
+
|
|
207
|
+
```tsx
|
|
208
|
+
type BaseColorProps =
|
|
209
|
+
| 'primary' | 'secondary' | 'accent' | 'neutral'
|
|
210
|
+
| 'info' | 'success' | 'warning' | 'error';
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
```tsx
|
|
214
|
+
<Badge color="success">Active</Badge>
|
|
215
|
+
<Button color="warning">Caution</Button>
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
### Class override (slot system)
|
|
219
|
+
|
|
220
|
+
Every component exposes a `class` prop to override individual slots:
|
|
221
|
+
|
|
222
|
+
```tsx
|
|
223
|
+
// Single-element components
|
|
224
|
+
<Badge class="font-bold text-lg" />
|
|
225
|
+
|
|
226
|
+
// Multi-slot components
|
|
227
|
+
<Modal
|
|
228
|
+
class={{
|
|
229
|
+
root: 'max-w-2xl',
|
|
230
|
+
header: 'bg-base-200',
|
|
231
|
+
body: 'p-8',
|
|
232
|
+
}}
|
|
233
|
+
/>
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
## TypeScript
|
|
237
|
+
|
|
238
|
+
All prop types are exported:
|
|
239
|
+
|
|
240
|
+
```tsx
|
|
241
|
+
import type { ButtonProps, ModalProps, BaseColorProps, SolidComponent } from 'solid-tom-ui';
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
## License
|
|
245
|
+
|
|
246
|
+
MIT © [Truong Tom](https://github.com/truongtom1993)
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "solid-tom-ui",
|
|
3
|
+
"version": "1.0.6",
|
|
4
|
+
"description": "SolidJS UI component library (Ant Design–inspired, Tailwind CSS + DaisyUI)",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"solidjs",
|
|
9
|
+
"ui",
|
|
10
|
+
"components",
|
|
11
|
+
"tailwindcss",
|
|
12
|
+
"daisyui",
|
|
13
|
+
"ant-design"
|
|
14
|
+
],
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"import": "./lib.js",
|
|
18
|
+
"types": "./lib.d.ts"
|
|
19
|
+
},
|
|
20
|
+
"./styles": "./solid-ui.css"
|
|
21
|
+
},
|
|
22
|
+
"main": "./lib.js",
|
|
23
|
+
"module": "./lib.js",
|
|
24
|
+
"types": "./lib.d.ts",
|
|
25
|
+
"sideEffects": [
|
|
26
|
+
"**/*.css"
|
|
27
|
+
],
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"@tanstack/solid-table": ">=8.0.0",
|
|
30
|
+
"@tanstack/solid-virtual": ">=3.0.0",
|
|
31
|
+
"class-variance-authority": ">=0.7.0",
|
|
32
|
+
"clsx": ">=2.0.0",
|
|
33
|
+
"imask": ">=7.0.0",
|
|
34
|
+
"lucide-solid": ">=0.400.0",
|
|
35
|
+
"qrcode": ">=1.5.0",
|
|
36
|
+
"solid-js": ">=1.8.0",
|
|
37
|
+
"tailwind-merge": ">=3.0.0"
|
|
38
|
+
}
|
|
39
|
+
}
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "solid-tom-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "SolidJS UI component library (Ant Design–inspired, Tailwind CSS + DaisyUI)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
|
+
"author": "Truong Tom",
|
|
7
8
|
"keywords": [
|
|
8
9
|
"solidjs",
|
|
9
10
|
"ui",
|
|
@@ -29,39 +30,16 @@
|
|
|
29
30
|
"sideEffects": [
|
|
30
31
|
"**/*.css"
|
|
31
32
|
],
|
|
32
|
-
"scripts": {
|
|
33
|
-
"start": "vite",
|
|
34
|
-
"dev": "vite",
|
|
35
|
-
"build": "vite build",
|
|
36
|
-
"build:lib": "vite build --config vite.config.lib.ts && node scripts/build-css.js",
|
|
37
|
-
"build:lib:watch": "vite build --config vite.config.lib.ts --watch",
|
|
38
|
-
"dev:link": "npm run build:lib && cd ../solid_test_02 && pnpm install",
|
|
39
|
-
"link:local": "cd ../solid_test_02 && pnpm add solid-tom-ui@file:../solid_ui --save",
|
|
40
|
-
"link:npm": "cd ../solid_test_02 && pnpm add solid-tom-ui@latest --save",
|
|
41
|
-
"prepublishOnly": "npm run build:lib",
|
|
42
|
-
"serve": "vite preview",
|
|
43
|
-
"server": "bun src/server/index.ts",
|
|
44
|
-
"test": "vitest",
|
|
45
|
-
"test:ui": "vitest --ui",
|
|
46
|
-
"test:run": "vitest run",
|
|
47
|
-
"test:coverage": "vitest run --coverage",
|
|
48
|
-
"tsc": "tsc --noEmit",
|
|
49
|
-
"tsc:lib": "tsc --project tsconfig.lib.json --noEmit",
|
|
50
|
-
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md,astro,html,mdx}\"",
|
|
51
|
-
"format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md,astro,html,mdx}\"",
|
|
52
|
-
"clear:comment": "python src/utils/minify.py",
|
|
53
|
-
"extract": "npx tsx src/utils/extractor.ts",
|
|
54
|
-
"sb": "storybook dev -p 6006 --no-open",
|
|
55
|
-
"build-sb": "storybook build && node scripts/zip-sb.js",
|
|
56
|
-
"release:patch": "npm version patch && npm publish",
|
|
57
|
-
"release:minor": "npm version minor && npm publish",
|
|
58
|
-
"release:major": "npm version major && npm publish"
|
|
59
|
-
},
|
|
60
33
|
"peerDependencies": {
|
|
61
34
|
"@tanstack/solid-table": ">=8.0.0",
|
|
35
|
+
"@tanstack/solid-virtual": ">=3.0.0",
|
|
36
|
+
"class-variance-authority": ">=0.7.0",
|
|
37
|
+
"clsx": ">=2.0.0",
|
|
62
38
|
"imask": ">=7.0.0",
|
|
39
|
+
"lucide-solid": ">=0.400.0",
|
|
63
40
|
"qrcode": ">=1.5.0",
|
|
64
|
-
"solid-js": ">=1.8.0"
|
|
41
|
+
"solid-js": ">=1.8.0",
|
|
42
|
+
"tailwind-merge": ">=3.0.0"
|
|
65
43
|
},
|
|
66
44
|
"devDependencies": {
|
|
67
45
|
"@chromatic-com/storybook": "^5.1.0",
|
|
@@ -116,5 +94,34 @@
|
|
|
116
94
|
"sucrase": "^3.35.1",
|
|
117
95
|
"tailwind-merge": "^3.5.0",
|
|
118
96
|
"tailwindcss": "^4.2.2"
|
|
97
|
+
},
|
|
98
|
+
"scripts": {
|
|
99
|
+
"start": "vite",
|
|
100
|
+
"dev": "vite",
|
|
101
|
+
"build": "vite build",
|
|
102
|
+
"build:lib": "vite build --config vite.config.lib.ts && node scripts/build-css.js",
|
|
103
|
+
"build:lib:watch": "vite build --config vite.config.lib.ts --watch",
|
|
104
|
+
"dev:link": "npm run build:lib && cd ../solid_test_02 && pnpm add solid-tom-ui@file:../solid_ui/dist --save",
|
|
105
|
+
"link:local": "npm run build:lib && cd ../solid_test_02 && pnpm add solid-tom-ui@file:../solid_ui/dist --save",
|
|
106
|
+
"link:npm": "cd ../solid_test_02 && pnpm add solid-tom-ui@latest --save",
|
|
107
|
+
"serve": "vite preview",
|
|
108
|
+
"server": "bun src/server/index.ts",
|
|
109
|
+
"test": "vitest",
|
|
110
|
+
"test:ui": "vitest --ui",
|
|
111
|
+
"test:run": "vitest run",
|
|
112
|
+
"test:coverage": "vitest run --coverage",
|
|
113
|
+
"tsc": "tsc --noEmit",
|
|
114
|
+
"tsc:lib": "tsc --project tsconfig.lib.json --noEmit",
|
|
115
|
+
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md,astro,html,mdx}\"",
|
|
116
|
+
"format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md,astro,html,mdx}\"",
|
|
117
|
+
"clear:comment": "python src/utils/minify.py",
|
|
118
|
+
"extract": "npx tsx src/utils/extractor.ts",
|
|
119
|
+
"sb": "storybook dev -p 6006 --no-open",
|
|
120
|
+
"build-sb": "storybook build && node scripts/zip-sb.js",
|
|
121
|
+
"release:patch": "npm version patch && npm run build:lib && npm publish dist --access public",
|
|
122
|
+
"release:minor": "npm version minor && npm run build:lib && npm publish dist --access public",
|
|
123
|
+
"release:major": "npm version major && npm run build:lib && npm publish dist --access public",
|
|
124
|
+
"release:github": "node scripts/release-github.js",
|
|
125
|
+
"release:github:copy-only": "node scripts/release-github.js --no-build"
|
|
119
126
|
}
|
|
120
|
-
}
|
|
127
|
+
}
|