jvdm-ui 1.0.5
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/LICENSE +21 -0
- package/README.md +221 -0
- package/bin/jvdm-ui.mjs +49 -0
- package/dist/atoms/index.d.ts +343 -0
- package/dist/atoms/index.js +3 -0
- package/dist/atoms/index.js.map +1 -0
- package/dist/chunk-AHE2576G.js +682 -0
- package/dist/chunk-AHE2576G.js.map +1 -0
- package/dist/chunk-CGDYSB4G.js +3 -0
- package/dist/chunk-CGDYSB4G.js.map +1 -0
- package/dist/chunk-JYNDKPAH.js +362 -0
- package/dist/chunk-JYNDKPAH.js.map +1 -0
- package/dist/chunk-WWOXGKLF.js +724 -0
- package/dist/chunk-WWOXGKLF.js.map +1 -0
- package/dist/client/code-block.d.ts +9 -0
- package/dist/client/code-block.js +65 -0
- package/dist/client/code-block.js.map +1 -0
- package/dist/client/confirm-dialog.d.ts +16 -0
- package/dist/client/confirm-dialog.js +181 -0
- package/dist/client/confirm-dialog.js.map +1 -0
- package/dist/client/date-picker.d.ts +10 -0
- package/dist/client/date-picker.js +236 -0
- package/dist/client/date-picker.js.map +1 -0
- package/dist/client/file-upload.d.ts +12 -0
- package/dist/client/file-upload.js +58 -0
- package/dist/client/file-upload.js.map +1 -0
- package/dist/client/gallery.d.ts +14 -0
- package/dist/client/gallery.js +122 -0
- package/dist/client/gallery.js.map +1 -0
- package/dist/client/menu.d.ts +24 -0
- package/dist/client/menu.js +115 -0
- package/dist/client/menu.js.map +1 -0
- package/dist/client/modal.d.ts +19 -0
- package/dist/client/modal.js +147 -0
- package/dist/client/modal.js.map +1 -0
- package/dist/client/multi-select.d.ts +16 -0
- package/dist/client/multi-select.js +84 -0
- package/dist/client/multi-select.js.map +1 -0
- package/dist/client/number-input.d.ts +6 -0
- package/dist/client/number-input.js +59 -0
- package/dist/client/number-input.js.map +1 -0
- package/dist/client/password-input.d.ts +16 -0
- package/dist/client/password-input.js +103 -0
- package/dist/client/password-input.js.map +1 -0
- package/dist/client/pin-input.d.ts +10 -0
- package/dist/client/pin-input.js +55 -0
- package/dist/client/pin-input.js.map +1 -0
- package/dist/client/theme-toggle.d.ts +8 -0
- package/dist/client/theme-toggle.js +126 -0
- package/dist/client/theme-toggle.js.map +1 -0
- package/dist/client/theme.d.ts +8 -0
- package/dist/client/theme.js +32 -0
- package/dist/client/theme.js.map +1 -0
- package/dist/client/time-picker.d.ts +10 -0
- package/dist/client/time-picker.js +140 -0
- package/dist/client/time-picker.js.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -0
- package/dist/molecules/index.d.ts +309 -0
- package/dist/molecules/index.js +4 -0
- package/dist/molecules/index.js.map +1 -0
- package/dist/organisms/index.d.ts +113 -0
- package/dist/organisms/index.js +4 -0
- package/dist/organisms/index.js.map +1 -0
- package/dist/presets/gavel.css +19 -0
- package/dist/theme/index.d.ts +60 -0
- package/dist/theme/index.js +85 -0
- package/dist/theme/index.js.map +1 -0
- package/dist/tokens/index.d.ts +8 -0
- package/dist/tokens/index.js +3 -0
- package/dist/tokens/index.js.map +1 -0
- package/dist/tokens.css +129 -0
- package/package.json +114 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 João Vitor Duarte Mariucio
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
# jvdm-ui
|
|
4
|
+
|
|
5
|
+
**A React design system where the theme is a JSON file — and the rules are enforced by lint, not by hope.**
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/jvdm-ui)
|
|
8
|
+
[](./LICENSE)
|
|
9
|
+
[](https://react.dev)
|
|
10
|
+
[](https://tailwindcss.com)
|
|
11
|
+
|
|
12
|
+
[Documentation](https://joaoduartemariucio.github.io/jvdm-ui) · [Theming](#theming) · [Components](#components)
|
|
13
|
+
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## Why another one
|
|
19
|
+
|
|
20
|
+
Most component libraries let you theme the colors and stop there. Change the spacing rhythm or the
|
|
21
|
+
type scale and you are patching CSS from the outside, hoping specificity holds.
|
|
22
|
+
|
|
23
|
+
Here **every scale is a token, and every token is yours.** Colors, spacing base, radii, type steps,
|
|
24
|
+
tracking, weights, font. You hand over a JSON object; it becomes a Tailwind `@theme` block at build
|
|
25
|
+
time — which means you can even _add_ tokens, not just repaint the ones we picked.
|
|
26
|
+
|
|
27
|
+
The other half is that the constraints are real. No odd values, one component per folder, no raw
|
|
28
|
+
colors, no loose text in JSX. Not documented — **enforced**, by lint rules that fail CI. The library
|
|
29
|
+
holds itself to the rules it asks of you.
|
|
30
|
+
|
|
31
|
+
## Install
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install jvdm-ui
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
`react@^19` is a peer dependency. Tailwind CSS v4 is required. The package is pure ESM.
|
|
38
|
+
|
|
39
|
+
## Quick start
|
|
40
|
+
|
|
41
|
+
**1. Wire up the CSS.** Three lines, and one of them is easy to miss:
|
|
42
|
+
|
|
43
|
+
```css
|
|
44
|
+
@import "tailwindcss";
|
|
45
|
+
@import "jvdm-ui/tokens.css";
|
|
46
|
+
@source "../../node_modules/jvdm-ui/dist";
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
> **`@source` is not optional.** Tailwind v4's automatic content detection skips `node_modules`,
|
|
50
|
+
> so without it none of the component classes are ever generated and the UI renders unstyled —
|
|
51
|
+
> with no error anywhere. The path is relative to your CSS file.
|
|
52
|
+
|
|
53
|
+
**2. Apply the stored theme before first paint**, so the screen never flashes the wrong one:
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import { applyStoredTheme } from "jvdm-ui/tokens";
|
|
57
|
+
|
|
58
|
+
applyStoredTheme();
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
**3. Compose:**
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import { Button, Card, Label } from "jvdm-ui/atoms";
|
|
65
|
+
import { Field, PageHeader } from "jvdm-ui/molecules";
|
|
66
|
+
import { DataTable } from "jvdm-ui/organisms";
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Each layer is its own entry point. Deep imports (`jvdm-ui/atoms/button`) are not supported — the
|
|
70
|
+
`exports` map publishes the four layers and the root, nothing else.
|
|
71
|
+
|
|
72
|
+
## Theming
|
|
73
|
+
|
|
74
|
+
Write a JSON file. Every field is optional; whatever you leave out keeps the default. The canonical
|
|
75
|
+
shape separates visual roles from the scales that define them: `colors`, `typography` and `tokens`.
|
|
76
|
+
See [docs/theme.example.json](docs/theme.example.json) for a complete portable theme.
|
|
77
|
+
|
|
78
|
+
```json
|
|
79
|
+
{
|
|
80
|
+
"colors": {
|
|
81
|
+
"accent": { "light": "oklch(0.55 0.2 265)", "dark": "oklch(0.75 0.16 265)" },
|
|
82
|
+
"on-accent": "oklch(1 0 0)",
|
|
83
|
+
"brand": { "light": "oklch(0.5 0.18 320)", "dark": "oklch(0.8 0.15 320)" }
|
|
84
|
+
},
|
|
85
|
+
"typography": {
|
|
86
|
+
"font": { "sans": "Avenir Next, sans-serif", "mono": "SF Mono, monospace" },
|
|
87
|
+
"text": { "sm": ["15px", 1.6] },
|
|
88
|
+
"tracking": { "caps": "0.08em" },
|
|
89
|
+
"weight": { "medium": 500 }
|
|
90
|
+
},
|
|
91
|
+
"tokens": {
|
|
92
|
+
"spacing": "0.25rem",
|
|
93
|
+
"radius": { "lg": "14px" }
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Turn it into CSS and import it after the tokens:
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
npx jvdm-ui theme theme.json --out src/theme.css
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
```css
|
|
105
|
+
@import "jvdm-ui/tokens.css";
|
|
106
|
+
@import "./theme.css";
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
That `brand` key was not one of ours — and `bg-brand`, `text-brand` and `border-brand` now exist as
|
|
110
|
+
real utilities, in both light and dark. That is the point of emitting `@theme` instead of `:root`.
|
|
111
|
+
|
|
112
|
+
A single color value (rather than a `light`/`dark` pair) means the same color in both modes.
|
|
113
|
+
|
|
114
|
+
### In TypeScript instead
|
|
115
|
+
|
|
116
|
+
```ts
|
|
117
|
+
import { defineTheme, gavel } from "jvdm-ui/theme";
|
|
118
|
+
|
|
119
|
+
const css = defineTheme({ ...gavel, colors: { ...gavel.colors, accent: "oklch(0.7 0.2 150)" } });
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### Presets
|
|
123
|
+
|
|
124
|
+
Presets ship as ready CSS, generated from the same source object at build time, so the two cannot
|
|
125
|
+
drift:
|
|
126
|
+
|
|
127
|
+
```css
|
|
128
|
+
@import "jvdm-ui/presets/gavel.css";
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
| Preset | Looks like |
|
|
132
|
+
| --------- | ----------------------------------------------------------- |
|
|
133
|
+
| _default_ | achromatic neutrals, high-contrast neutral accent, no brand |
|
|
134
|
+
| `gavel` | navy and gold — institutional, built for a marketplace |
|
|
135
|
+
|
|
136
|
+
### How it works
|
|
137
|
+
|
|
138
|
+
Every color is declared exactly once, using `light-dark()`:
|
|
139
|
+
|
|
140
|
+
```css
|
|
141
|
+
--color-accent: light-dark(oklch(0.24 0.01 255), oklch(0.96 0.003 255));
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
Mode switching lives entirely in `color-scheme`. No token is ever re-declared in a `[data-theme]`
|
|
145
|
+
block, so there is **no specificity contest** — your override wins in both modes. Most systems get
|
|
146
|
+
this wrong in exactly one place, and the bug shows up as "my brand color works until the user flips
|
|
147
|
+
to light mode".
|
|
148
|
+
|
|
149
|
+
The cost is a browser floor: `light-dark()` needs Chrome 123, Safari 17.5 or Firefox 120 (all 2024).
|
|
150
|
+
Older browsers get the dark palette regardless of preference.
|
|
151
|
+
|
|
152
|
+
## Components
|
|
153
|
+
|
|
154
|
+
**Atoms** — `Avatar` · `Badge` · `Button` / `buttonClass` · `Card` · `Checkbox` · `FormAlert` · `Icon` (31 of them) · `Input` · `Label` · `MoreIcon` · `PasswordInput` · `ProgressBar` · `Select` · `Skeleton` · `Switch` · `ThemeToggle` · `Thumb`
|
|
155
|
+
|
|
156
|
+
**Molecules** — `CardTitle` · `ConfirmDialog` · `Empty` · `Field` · `Gallery` · `LoadError` · `Menu` · `Modal` · `PageHeader` · `Pagination` · `StatCard` · `Tabs`
|
|
157
|
+
|
|
158
|
+
**Organisms** — `BarChart` · `DataTable` · `Sparkline`
|
|
159
|
+
|
|
160
|
+
`buttonClass()` exists separately from `<Button>` because many actions navigate — they are a router
|
|
161
|
+
`<Link>`, not a `<button>`. Use the class there instead of making `Button` polymorphic.
|
|
162
|
+
|
|
163
|
+
Loading is always `Skeleton`, never a spinner.
|
|
164
|
+
|
|
165
|
+
## The scales
|
|
166
|
+
|
|
167
|
+
No odd values, anywhere. The lint fails CI on every one of these — in this repository, and it is the
|
|
168
|
+
same config you can copy into yours:
|
|
169
|
+
|
|
170
|
+
| dimension | scale |
|
|
171
|
+
| ---------- | ---------------------------------------------------------------------- |
|
|
172
|
+
| typography | 11, 12, 13, 15, 18, 23, 29, 58px (`text-2xs` … `text-display`) |
|
|
173
|
+
| tracking | `tracking-caps`, `tracking-code`, `tracking-tight`, `tracking-display` |
|
|
174
|
+
| weight | 400/500/700. No 600: the browser would synthesise it |
|
|
175
|
+
| radius | 3, 5, 8, 12, 20px (`radius-xs\|sm\|md\|lg\|xl`) |
|
|
176
|
+
| spacing | 2px and multiples of 4 |
|
|
177
|
+
| depth | `shadow-raised\|popover\|modal`, coloured from the palette |
|
|
178
|
+
| motion | `ease-out\|in-out\|over`, `--duration-instant\|fast\|base\|slow` |
|
|
179
|
+
| icon | 12, 16, 20, 24, 32px via `Icon`'s `size`, never a loose `h-* w-*` |
|
|
180
|
+
| color | semantic tokens only |
|
|
181
|
+
|
|
182
|
+
You can change every value. You cannot make the scale stop existing.
|
|
183
|
+
|
|
184
|
+
Depth and motion are scales like any other, so a component never picks its own duration or casts a
|
|
185
|
+
raw `box-shadow`:
|
|
186
|
+
|
|
187
|
+
```json
|
|
188
|
+
{
|
|
189
|
+
"tokens": {
|
|
190
|
+
"shadow": { "modal": "0 28px 64px -16px oklch(0 0 0 / 0.5)" },
|
|
191
|
+
"ease": { "out": "cubic-bezier(0.16, 1, 0.3, 1)" },
|
|
192
|
+
"duration": { "base": "240ms" }
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
## Localisation
|
|
198
|
+
|
|
199
|
+
Default strings are English. The three components that speak on their own take an optional prop:
|
|
200
|
+
|
|
201
|
+
| Component | Prop | Default |
|
|
202
|
+
| --------------- | ------------ | ----------------- |
|
|
203
|
+
| `PasswordInput` | `showLabel` | `"Show password"` |
|
|
204
|
+
| `PasswordInput` | `hideLabel` | `"Hide password"` |
|
|
205
|
+
| `ThemeToggle` | `label` | `(theme) => …` |
|
|
206
|
+
| `LoadError` | `retryLabel` | `"Try again"` |
|
|
207
|
+
|
|
208
|
+
Everything else is a prop, and yours.
|
|
209
|
+
|
|
210
|
+
## Contributing
|
|
211
|
+
|
|
212
|
+
`docs/adr/` is the standing norm, not history. Read
|
|
213
|
+
[ADR 0001](docs/adr/0001-design-system.md) before writing a component.
|
|
214
|
+
|
|
215
|
+
```bash
|
|
216
|
+
npm run typecheck && npm run lint && npm run format:check && npm run build
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
## License
|
|
220
|
+
|
|
221
|
+
MIT
|
package/bin/jvdm-ui.mjs
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
import { readFileSync, writeFileSync } from "node:fs";
|
|
3
|
+
import { resolve } from "node:path";
|
|
4
|
+
import { defineTheme } from "../dist/theme/index.js";
|
|
5
|
+
|
|
6
|
+
const USAGE = `jvdm-ui theme <input.json> [--out <output.css>]
|
|
7
|
+
|
|
8
|
+
Turns a theme JSON into a Tailwind @theme block.
|
|
9
|
+
|
|
10
|
+
jvdm-ui theme theme.json --out src/theme.css
|
|
11
|
+
jvdm-ui theme theme.json > src/theme.css
|
|
12
|
+
`;
|
|
13
|
+
|
|
14
|
+
const [command, input, ...rest] = process.argv.slice(2);
|
|
15
|
+
|
|
16
|
+
if (command !== "theme" || !input) {
|
|
17
|
+
process.stdout.write(USAGE);
|
|
18
|
+
process.exit(command === "theme" ? 1 : 0);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const outIndex = rest.findIndex((arg) => arg === "--out" || arg === "-o");
|
|
22
|
+
const out = outIndex === -1 ? null : rest[outIndex + 1];
|
|
23
|
+
|
|
24
|
+
if (outIndex !== -1 && !out) {
|
|
25
|
+
process.stderr.write("jvdm-ui: --out needs a file path\n");
|
|
26
|
+
process.exit(1);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
let config;
|
|
30
|
+
try {
|
|
31
|
+
config = JSON.parse(readFileSync(resolve(input), "utf8"));
|
|
32
|
+
} catch (error) {
|
|
33
|
+
process.stderr.write(`jvdm-ui: cannot read ${input}\n${error.message}\n`);
|
|
34
|
+
process.exit(1);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
const css = defineTheme(config);
|
|
38
|
+
|
|
39
|
+
if (!css) {
|
|
40
|
+
process.stderr.write(`jvdm-ui: ${input} produced no tokens\n`);
|
|
41
|
+
process.exit(1);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
if (out) {
|
|
45
|
+
writeFileSync(resolve(out), css);
|
|
46
|
+
process.stderr.write(`jvdm-ui: wrote ${out}\n`);
|
|
47
|
+
} else {
|
|
48
|
+
process.stdout.write(css);
|
|
49
|
+
}
|
|
@@ -0,0 +1,343 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode, ComponentProps } from 'react';
|
|
3
|
+
import { Theme } from '../tokens/index.js';
|
|
4
|
+
|
|
5
|
+
declare const SIZES$1: {
|
|
6
|
+
readonly sm: "size-8 text-xs";
|
|
7
|
+
readonly md: "size-10 text-sm";
|
|
8
|
+
readonly lg: "size-12 text-base";
|
|
9
|
+
};
|
|
10
|
+
type AvatarSize = keyof typeof SIZES$1;
|
|
11
|
+
declare function Avatar({ name, size, label, }: {
|
|
12
|
+
name: string;
|
|
13
|
+
size?: AvatarSize;
|
|
14
|
+
label?: string;
|
|
15
|
+
}): react.JSX.Element;
|
|
16
|
+
|
|
17
|
+
declare const TONES$2: {
|
|
18
|
+
readonly neutral: "bg-raised text-ink-soft";
|
|
19
|
+
readonly accent: "bg-accent-soft text-accent-ink";
|
|
20
|
+
readonly ok: "bg-ok-soft text-ok";
|
|
21
|
+
readonly warn: "bg-warn-soft text-warn";
|
|
22
|
+
readonly danger: "bg-danger-soft text-danger";
|
|
23
|
+
readonly info: "bg-info-soft text-info";
|
|
24
|
+
};
|
|
25
|
+
type BadgeTone = keyof typeof TONES$2;
|
|
26
|
+
declare function Badge({ tone, children, className, }: {
|
|
27
|
+
tone?: BadgeTone;
|
|
28
|
+
children: ReactNode;
|
|
29
|
+
className?: string;
|
|
30
|
+
}): react.JSX.Element;
|
|
31
|
+
|
|
32
|
+
type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
|
|
33
|
+
type ButtonSize = "sm" | "md" | "lg" | "icon" | "icon-sm";
|
|
34
|
+
type ButtonOptions = {
|
|
35
|
+
variant?: ButtonVariant;
|
|
36
|
+
size?: ButtonSize;
|
|
37
|
+
className?: string;
|
|
38
|
+
};
|
|
39
|
+
declare function buttonClass({ variant, size, className, }?: ButtonOptions): string;
|
|
40
|
+
|
|
41
|
+
declare function Button({ variant, size, className, ...props }: ButtonOptions & ComponentProps<"button">): react.JSX.Element;
|
|
42
|
+
|
|
43
|
+
declare const PADDINGS: {
|
|
44
|
+
readonly none: "";
|
|
45
|
+
readonly sm: "p-4";
|
|
46
|
+
readonly md: "p-5";
|
|
47
|
+
readonly lg: "p-6";
|
|
48
|
+
};
|
|
49
|
+
type CardPadding = keyof typeof PADDINGS;
|
|
50
|
+
declare function Card({ children, padding, className, }: {
|
|
51
|
+
children: ReactNode;
|
|
52
|
+
padding?: CardPadding;
|
|
53
|
+
className?: string;
|
|
54
|
+
}): react.JSX.Element;
|
|
55
|
+
|
|
56
|
+
declare function Checkbox({ label, className, ...props }: {
|
|
57
|
+
label?: ReactNode;
|
|
58
|
+
className?: string;
|
|
59
|
+
} & ComponentProps<"input">): react.JSX.Element;
|
|
60
|
+
|
|
61
|
+
type ComboboxOption = {
|
|
62
|
+
value: string;
|
|
63
|
+
label: string;
|
|
64
|
+
};
|
|
65
|
+
declare function Combobox({ options, onValueChange, className, ...props }: {
|
|
66
|
+
options: readonly ComboboxOption[];
|
|
67
|
+
onValueChange?: (value: string) => void;
|
|
68
|
+
className?: string;
|
|
69
|
+
} & ComponentProps<"input">): react.JSX.Element;
|
|
70
|
+
|
|
71
|
+
declare function DatePicker({ value, defaultValue, onValueChange, className, ...props }: Omit<ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
|
|
72
|
+
value?: string;
|
|
73
|
+
defaultValue?: string;
|
|
74
|
+
onValueChange?: (value: string) => void;
|
|
75
|
+
}): react.JSX.Element;
|
|
76
|
+
|
|
77
|
+
declare function DateTimePicker({ date, time, onDateChange, onTimeChange, className, }: {
|
|
78
|
+
date?: string;
|
|
79
|
+
time?: string;
|
|
80
|
+
onDateChange?: (value: string) => void;
|
|
81
|
+
onTimeChange?: (value: string) => void;
|
|
82
|
+
className?: string;
|
|
83
|
+
}): react.JSX.Element;
|
|
84
|
+
|
|
85
|
+
declare function Divider({ children, vertical, className, }: {
|
|
86
|
+
children?: ReactNode;
|
|
87
|
+
vertical?: boolean;
|
|
88
|
+
className?: string;
|
|
89
|
+
}): react.JSX.Element;
|
|
90
|
+
|
|
91
|
+
declare function FormAlert({ className, children, }: {
|
|
92
|
+
className?: string;
|
|
93
|
+
children: ReactNode;
|
|
94
|
+
}): react.JSX.Element;
|
|
95
|
+
|
|
96
|
+
declare function FileUpload({ accept, multiple, onFilesChange, children, className, }: {
|
|
97
|
+
accept?: string;
|
|
98
|
+
multiple?: boolean;
|
|
99
|
+
onFilesChange?: (files: FileList | null) => void;
|
|
100
|
+
children?: ReactNode;
|
|
101
|
+
className?: string;
|
|
102
|
+
}): react.JSX.Element;
|
|
103
|
+
|
|
104
|
+
type IconSize = "sm" | "md" | "lg" | "xl" | "2xl";
|
|
105
|
+
type Props = {
|
|
106
|
+
size?: IconSize;
|
|
107
|
+
className?: string;
|
|
108
|
+
};
|
|
109
|
+
declare function Svg({ size, className, children }: Props & {
|
|
110
|
+
children: ReactNode;
|
|
111
|
+
}): react.JSX.Element;
|
|
112
|
+
|
|
113
|
+
declare function AccessIcon(p: Props): react.JSX.Element;
|
|
114
|
+
|
|
115
|
+
declare function AlertIcon(p: Props): react.JSX.Element;
|
|
116
|
+
|
|
117
|
+
declare function BackIcon(p: Props): react.JSX.Element;
|
|
118
|
+
|
|
119
|
+
declare function BoxIcon(p: Props): react.JSX.Element;
|
|
120
|
+
|
|
121
|
+
declare function BuildingIcon(p: Props): react.JSX.Element;
|
|
122
|
+
|
|
123
|
+
declare function CalendarIcon(p: Props): react.JSX.Element;
|
|
124
|
+
|
|
125
|
+
declare function CarIcon(p: Props): react.JSX.Element;
|
|
126
|
+
|
|
127
|
+
declare function ChevronIcon(p: Props): react.JSX.Element;
|
|
128
|
+
|
|
129
|
+
declare function CloseIcon(p: Props): react.JSX.Element;
|
|
130
|
+
|
|
131
|
+
declare function DashboardIcon(p: Props): react.JSX.Element;
|
|
132
|
+
|
|
133
|
+
declare function EyeIcon(p: Props): react.JSX.Element;
|
|
134
|
+
|
|
135
|
+
declare function EyeOffIcon(p: Props): react.JSX.Element;
|
|
136
|
+
|
|
137
|
+
declare function FaceIcon(p: Props): react.JSX.Element;
|
|
138
|
+
|
|
139
|
+
declare function FactoryIcon(p: Props): react.JSX.Element;
|
|
140
|
+
|
|
141
|
+
declare function FunnelIcon(p: Props): react.JSX.Element;
|
|
142
|
+
|
|
143
|
+
declare function GavelIcon(p: Props): react.JSX.Element;
|
|
144
|
+
|
|
145
|
+
declare function InstagramIcon(p: Props): react.JSX.Element;
|
|
146
|
+
|
|
147
|
+
declare function LogoutIcon(p: Props): react.JSX.Element;
|
|
148
|
+
|
|
149
|
+
declare function MailIcon(p: Props): react.JSX.Element;
|
|
150
|
+
|
|
151
|
+
declare function MoonIcon(p: Props): react.JSX.Element;
|
|
152
|
+
|
|
153
|
+
declare function PencilIcon(p: Props): react.JSX.Element;
|
|
154
|
+
|
|
155
|
+
declare function PhoneIcon(p: Props): react.JSX.Element;
|
|
156
|
+
|
|
157
|
+
declare function PlansIcon(p: Props): react.JSX.Element;
|
|
158
|
+
|
|
159
|
+
declare function PlusIcon(p: Props): react.JSX.Element;
|
|
160
|
+
|
|
161
|
+
declare function SearchIcon(p: Props): react.JSX.Element;
|
|
162
|
+
|
|
163
|
+
declare function ShieldCheckIcon(p: Props): react.JSX.Element;
|
|
164
|
+
|
|
165
|
+
declare function StaffIcon(p: Props): react.JSX.Element;
|
|
166
|
+
|
|
167
|
+
declare function StudentsIcon(p: Props): react.JSX.Element;
|
|
168
|
+
|
|
169
|
+
declare function SunIcon(p: Props): react.JSX.Element;
|
|
170
|
+
|
|
171
|
+
declare function TrashIcon(p: Props): react.JSX.Element;
|
|
172
|
+
|
|
173
|
+
declare function WhatsappIcon(p: Props): react.JSX.Element;
|
|
174
|
+
|
|
175
|
+
type IconButtonSize = "icon" | "icon-sm";
|
|
176
|
+
declare function IconButton({ label, variant, size, className, ...props }: {
|
|
177
|
+
label: string;
|
|
178
|
+
variant?: ButtonVariant;
|
|
179
|
+
size?: IconButtonSize;
|
|
180
|
+
} & Omit<ComponentProps<"button">, "aria-label" | "size">): react.JSX.Element;
|
|
181
|
+
|
|
182
|
+
declare const CONTROL: string;
|
|
183
|
+
declare const CONTROL_SIZES: {
|
|
184
|
+
readonly md: "px-4 py-3";
|
|
185
|
+
readonly sm: "px-3 py-2";
|
|
186
|
+
};
|
|
187
|
+
type ControlSize = keyof typeof CONTROL_SIZES;
|
|
188
|
+
|
|
189
|
+
declare function Input({ size, className, ...props }: {
|
|
190
|
+
size?: ControlSize;
|
|
191
|
+
} & Omit<ComponentProps<"input">, "size">): react.JSX.Element;
|
|
192
|
+
|
|
193
|
+
declare function PasswordInput({ className, showLabel, hideLabel, ...props }: {
|
|
194
|
+
size?: ControlSize;
|
|
195
|
+
showLabel?: string;
|
|
196
|
+
hideLabel?: string;
|
|
197
|
+
} & Omit<ComponentProps<"input">, "size" | "type">): react.JSX.Element;
|
|
198
|
+
|
|
199
|
+
declare function Select({ size, className, ...props }: {
|
|
200
|
+
size?: ControlSize;
|
|
201
|
+
} & Omit<ComponentProps<"select">, "size">): react.JSX.Element;
|
|
202
|
+
|
|
203
|
+
declare function Textarea({ size, rows, className, ...props }: {
|
|
204
|
+
size?: ControlSize;
|
|
205
|
+
} & Omit<ComponentProps<"textarea">, "size">): react.JSX.Element;
|
|
206
|
+
|
|
207
|
+
declare function Kbd({ children, className }: {
|
|
208
|
+
children: ReactNode;
|
|
209
|
+
className?: string;
|
|
210
|
+
}): react.JSX.Element;
|
|
211
|
+
|
|
212
|
+
declare const TONES$1: {
|
|
213
|
+
readonly muted: "text-ink-muted";
|
|
214
|
+
readonly dim: "text-ink-dim";
|
|
215
|
+
readonly accent: "text-accent-ink";
|
|
216
|
+
};
|
|
217
|
+
declare function Label({ children, tone, className, }: {
|
|
218
|
+
children: ReactNode;
|
|
219
|
+
tone?: keyof typeof TONES$1;
|
|
220
|
+
className?: string;
|
|
221
|
+
}): react.JSX.Element;
|
|
222
|
+
|
|
223
|
+
declare const TONES: {
|
|
224
|
+
readonly accent: "text-accent-ink decoration-accent/40 hover:decoration-accent";
|
|
225
|
+
readonly ink: "text-ink decoration-line-strong hover:decoration-ink-muted";
|
|
226
|
+
readonly muted: "text-ink-muted decoration-line hover:text-ink-soft hover:decoration-line-strong";
|
|
227
|
+
};
|
|
228
|
+
type LinkTone = keyof typeof TONES;
|
|
229
|
+
declare function Link({ tone, className, ...props }: {
|
|
230
|
+
tone?: LinkTone;
|
|
231
|
+
} & ComponentProps<"a">): react.JSX.Element;
|
|
232
|
+
|
|
233
|
+
type MultiSelectOption = {
|
|
234
|
+
value: string;
|
|
235
|
+
label: ReactNode;
|
|
236
|
+
};
|
|
237
|
+
declare function MultiSelect({ options, selected, onSelectedChange, label, className, }: {
|
|
238
|
+
options: readonly MultiSelectOption[];
|
|
239
|
+
selected?: readonly string[];
|
|
240
|
+
onSelectedChange?: (values: string[]) => void;
|
|
241
|
+
label?: string;
|
|
242
|
+
className?: string;
|
|
243
|
+
}): react.JSX.Element;
|
|
244
|
+
|
|
245
|
+
declare function NumberInput({ className, ...props }: ComponentProps<"input">): react.JSX.Element;
|
|
246
|
+
|
|
247
|
+
declare function MoreIcon(): react.JSX.Element;
|
|
248
|
+
|
|
249
|
+
type ProgressTone = "accent" | "ok" | "warn" | "danger";
|
|
250
|
+
declare const HEIGHTS: {
|
|
251
|
+
readonly md: "h-2";
|
|
252
|
+
readonly xs: "h-1";
|
|
253
|
+
};
|
|
254
|
+
declare function ProgressBar({ value, tone, size, dim, label, className, }: {
|
|
255
|
+
value: number;
|
|
256
|
+
tone?: ProgressTone;
|
|
257
|
+
size?: keyof typeof HEIGHTS;
|
|
258
|
+
dim?: boolean;
|
|
259
|
+
label?: string;
|
|
260
|
+
className?: string;
|
|
261
|
+
}): react.JSX.Element;
|
|
262
|
+
|
|
263
|
+
declare function PinInput({ length, value, onValueChange, className, }: {
|
|
264
|
+
length?: number;
|
|
265
|
+
value?: string;
|
|
266
|
+
onValueChange?: (value: string) => void;
|
|
267
|
+
className?: string;
|
|
268
|
+
}): react.JSX.Element;
|
|
269
|
+
|
|
270
|
+
declare function RangeDatePicker({ start, end, onStartChange, onEndChange, className, }: {
|
|
271
|
+
start?: string;
|
|
272
|
+
end?: string;
|
|
273
|
+
onStartChange?: (value: string) => void;
|
|
274
|
+
onEndChange?: (value: string) => void;
|
|
275
|
+
className?: string;
|
|
276
|
+
}): react.JSX.Element;
|
|
277
|
+
|
|
278
|
+
declare function Radio({ label, className, ...props }: {
|
|
279
|
+
label?: ReactNode;
|
|
280
|
+
className?: string;
|
|
281
|
+
} & ComponentProps<"input">): react.JSX.Element;
|
|
282
|
+
|
|
283
|
+
type SegmentedOption<T extends string> = {
|
|
284
|
+
value: T;
|
|
285
|
+
label: ReactNode;
|
|
286
|
+
disabled?: boolean;
|
|
287
|
+
};
|
|
288
|
+
declare function Segmented<T extends string>({ name, options, value, defaultValue, onValueChange, label, className, }: {
|
|
289
|
+
name: string;
|
|
290
|
+
options: readonly SegmentedOption<T>[];
|
|
291
|
+
value?: T;
|
|
292
|
+
defaultValue?: T;
|
|
293
|
+
onValueChange?: (value: T) => void;
|
|
294
|
+
label?: string;
|
|
295
|
+
className?: string;
|
|
296
|
+
}): react.JSX.Element;
|
|
297
|
+
|
|
298
|
+
declare function Skeleton({ className }: {
|
|
299
|
+
className?: string;
|
|
300
|
+
}): react.JSX.Element;
|
|
301
|
+
|
|
302
|
+
declare function Slider({ className, ...props }: ComponentProps<"input">): react.JSX.Element;
|
|
303
|
+
|
|
304
|
+
declare const SIZES: {
|
|
305
|
+
readonly sm: "h-3 w-3";
|
|
306
|
+
readonly md: "h-4 w-4";
|
|
307
|
+
readonly lg: "h-5 w-5";
|
|
308
|
+
readonly xl: "h-6 w-6";
|
|
309
|
+
readonly "2xl": "h-8 w-8";
|
|
310
|
+
};
|
|
311
|
+
type SpinnerSize = keyof typeof SIZES;
|
|
312
|
+
declare function Spinner({ size, label, className, }: {
|
|
313
|
+
size?: SpinnerSize;
|
|
314
|
+
label?: string;
|
|
315
|
+
className?: string;
|
|
316
|
+
}): react.JSX.Element;
|
|
317
|
+
|
|
318
|
+
declare function Switch({ checked, onCheckedChange, label, disabled, className, }: {
|
|
319
|
+
checked: boolean;
|
|
320
|
+
onCheckedChange: (checked: boolean) => void;
|
|
321
|
+
label?: ReactNode;
|
|
322
|
+
disabled?: boolean;
|
|
323
|
+
className?: string;
|
|
324
|
+
}): react.JSX.Element;
|
|
325
|
+
|
|
326
|
+
declare function TimePicker({ value, defaultValue, onValueChange, className, ...props }: Omit<ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
|
|
327
|
+
value?: string;
|
|
328
|
+
defaultValue?: string;
|
|
329
|
+
onValueChange?: (value: string) => void;
|
|
330
|
+
}): react.JSX.Element;
|
|
331
|
+
|
|
332
|
+
declare function Thumb({ src, alt, fallback, className, }: {
|
|
333
|
+
src?: string | null;
|
|
334
|
+
alt: string;
|
|
335
|
+
fallback?: ReactNode;
|
|
336
|
+
className?: string;
|
|
337
|
+
}): react.JSX.Element;
|
|
338
|
+
|
|
339
|
+
declare function ThemeToggle({ label }: {
|
|
340
|
+
label?: (theme: Theme) => string;
|
|
341
|
+
}): react.JSX.Element;
|
|
342
|
+
|
|
343
|
+
export { AccessIcon, AlertIcon, Avatar, type AvatarSize, BackIcon, Badge, type BadgeTone, BoxIcon, BuildingIcon, Button, type ButtonOptions, type ButtonSize, type ButtonVariant, CONTROL, CONTROL_SIZES, CalendarIcon, CarIcon, Card, type CardPadding, Checkbox, ChevronIcon, CloseIcon, Combobox, type ComboboxOption, type ControlSize, DashboardIcon, DatePicker, DateTimePicker, Divider, EyeIcon, EyeOffIcon, FaceIcon, FactoryIcon, FileUpload, FormAlert, FunnelIcon, GavelIcon, IconButton, type IconButtonSize, type IconSize, Input, InstagramIcon, Kbd, Label, Link, type LinkTone, LogoutIcon, MailIcon, MoonIcon, MoreIcon, MultiSelect, type MultiSelectOption, NumberInput, PasswordInput, PencilIcon, PhoneIcon, PinInput, PlansIcon, PlusIcon, ProgressBar, type ProgressTone, type Props, Radio, RangeDatePicker, SearchIcon, Segmented, type SegmentedOption, Select, ShieldCheckIcon, Skeleton, Slider, Spinner, type SpinnerSize, StaffIcon, StudentsIcon, SunIcon, Svg, Switch, Textarea, ThemeToggle, Thumb, TimePicker, TrashIcon, WhatsappIcon, buttonClass };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { AccessIcon, AlertIcon, Avatar, BackIcon, Badge, BoxIcon, BuildingIcon, Button, CONTROL, CONTROL_SIZES, CalendarIcon, CarIcon, Card, Checkbox, ChevronIcon, CloseIcon, Combobox, DashboardIcon, DateTimePicker, Divider, EyeIcon, EyeOffIcon, FaceIcon, FactoryIcon, FormAlert, FunnelIcon, GavelIcon, IconButton, Input, InstagramIcon, Kbd, Label, Link, LogoutIcon, MailIcon, MoonIcon, MoreIcon, PasswordInput, PencilIcon, PhoneIcon, PlansIcon, PlusIcon, ProgressBar, Radio, RangeDatePicker, SearchIcon, Segmented, Select, ShieldCheckIcon, Skeleton, Slider, Spinner, StaffIcon, StudentsIcon, SunIcon, Svg, Switch, Textarea, ThemeToggle, Thumb, TrashIcon, WhatsappIcon, buttonClass } from '../chunk-WWOXGKLF.js';
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
3
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|