silver-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.
- package/README.md +10 -76
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,75 +1,14 @@
|
|
|
1
1
|
# silver-ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/silver-ui)
|
|
4
|
+
[](./LICENSE)
|
|
5
|
+
|
|
6
|
+
A complete, themeable React component library, built with [Panda CSS](https://panda-css.com/).
|
|
4
7
|
|
|
5
8
|
[Storybook](https://silver-ui-eight.vercel.app/) — browse and interact with all components.
|
|
6
9
|
|
|
7
10
|
## Installation
|
|
8
11
|
|
|
9
|
-
silver-ui is not published to npm yet. Until it is, consume a local build by
|
|
10
|
-
copying the full build output into your app:
|
|
11
|
-
|
|
12
|
-
```bash
|
|
13
|
-
pnpm build
|
|
14
|
-
rm -rf path/to/app/src/vendor/silver-ui
|
|
15
|
-
mkdir -p path/to/app/src/vendor/silver-ui
|
|
16
|
-
cp -R dist/* path/to/app/src/vendor/silver-ui/
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
Copy the whole `dist/` directory, not only `index.js`; component entry points
|
|
20
|
-
share generated chunks.
|
|
21
|
-
|
|
22
|
-
The vendored build expects your app to install silver-ui's runtime
|
|
23
|
-
dependencies:
|
|
24
|
-
|
|
25
|
-
```bash
|
|
26
|
-
npm install lucide-react
|
|
27
|
-
# or
|
|
28
|
-
pnpm add lucide-react
|
|
29
|
-
# or
|
|
30
|
-
yarn add lucide-react
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
Then import from the vendored ESM files. Use component subpaths for smaller JS
|
|
34
|
-
bundles:
|
|
35
|
-
|
|
36
|
-
```tsx
|
|
37
|
-
import './vendor/silver-ui/styles.css';
|
|
38
|
-
import {Button} from './vendor/silver-ui/components/Button/index.js';
|
|
39
|
-
|
|
40
|
-
function App() {
|
|
41
|
-
return <Button label="Click me" />;
|
|
42
|
-
}
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
The root vendored entry is also available when convenience matters more than
|
|
46
|
-
bundle size:
|
|
47
|
-
|
|
48
|
-
```tsx
|
|
49
|
-
import './vendor/silver-ui/styles.css';
|
|
50
|
-
import {Button} from './vendor/silver-ui/index.js';
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
The JS bundle uses the standard React ecosystem pattern
|
|
54
|
-
`process.env.NODE_ENV` for development-only validation. Most app bundlers
|
|
55
|
-
(Vite, Webpack, Next.js, Remix, etc.) replace this automatically. If you copy
|
|
56
|
-
the file into a setup that does not perform that replacement, configure your
|
|
57
|
-
bundler to define it. For example:
|
|
58
|
-
|
|
59
|
-
```ts
|
|
60
|
-
import {defineConfig} from 'vite';
|
|
61
|
-
|
|
62
|
-
export default defineConfig({
|
|
63
|
-
define: {
|
|
64
|
-
'process.env.NODE_ENV': JSON.stringify(
|
|
65
|
-
process.env.NODE_ENV ?? 'development',
|
|
66
|
-
),
|
|
67
|
-
},
|
|
68
|
-
});
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
Once silver-ui is published, install it from npm:
|
|
72
|
-
|
|
73
12
|
```bash
|
|
74
13
|
npm install silver-ui
|
|
75
14
|
# or
|
|
@@ -78,13 +17,8 @@ pnpm add silver-ui
|
|
|
78
17
|
yarn add silver-ui
|
|
79
18
|
```
|
|
80
19
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
```tsx
|
|
84
|
-
import 'silver-ui/styles.css';
|
|
85
|
-
import {Button} from 'silver-ui/Button';
|
|
86
|
-
import {SideNav, SideNavItem} from 'silver-ui/SideNav';
|
|
87
|
-
```
|
|
20
|
+
silver-ui requires **React 19+** as a peer dependency. Its other runtime
|
|
21
|
+
dependencies (`lucide-react`, `@js-temporal/polyfill`) install automatically.
|
|
88
22
|
|
|
89
23
|
## Usage
|
|
90
24
|
|
|
@@ -181,13 +115,12 @@ scoped theming examples, and per-instance overrides.
|
|
|
181
115
|
- **Tag** — removable label for categories or filters
|
|
182
116
|
- **Text / Heading** — typography primitives with size, color, and truncation
|
|
183
117
|
- **Thumbnail** — image preview with fallback and remove action
|
|
184
|
-
- **Tooltip** — informational popup on hover or focus
|
|
185
118
|
- **TreeView** — hierarchical expandable tree
|
|
186
119
|
|
|
187
120
|
### Forms
|
|
188
121
|
|
|
189
122
|
- **CheckboxInput** — checkbox with label and description
|
|
190
|
-
- **AutocompleteInput** — searchable autocomplete input
|
|
123
|
+
- **AutocompleteInput** — searchable autocomplete input (combobox)
|
|
191
124
|
- **DateInput** — date picker field
|
|
192
125
|
- **DateRangeInput** — date range picker field
|
|
193
126
|
- **DateTimeInput** — combined date and time picker
|
|
@@ -225,6 +158,7 @@ scoped theming examples, and per-instance overrides.
|
|
|
225
158
|
- **Drawer** — slide-in panel from screen edge
|
|
226
159
|
- **HoverCard** — rich content popup on hover
|
|
227
160
|
- **Popover** — anchored popup with arbitrary content
|
|
161
|
+
- **Tooltip** — informational popup on hover or focus
|
|
228
162
|
|
|
229
163
|
### Composite
|
|
230
164
|
|
|
@@ -237,8 +171,8 @@ scoped theming examples, and per-instance overrides.
|
|
|
237
171
|
|
|
238
172
|
### Prerequisites
|
|
239
173
|
|
|
240
|
-
- [Node.js](https://nodejs.org/) >=
|
|
241
|
-
- [pnpm](https://pnpm.io/) >=
|
|
174
|
+
- [Node.js](https://nodejs.org/) >= 22
|
|
175
|
+
- [pnpm](https://pnpm.io/) >= 11 (`corepack enable` uses the version pinned in `package.json`)
|
|
242
176
|
|
|
243
177
|
### Setup
|
|
244
178
|
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "silver-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"packageManager": "pnpm@11.3.0",
|
|
5
|
-
"description": "A
|
|
5
|
+
"description": "A comprehensive themeable React component library",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"sideEffects": [
|