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.
Files changed (74) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +221 -0
  3. package/bin/jvdm-ui.mjs +49 -0
  4. package/dist/atoms/index.d.ts +343 -0
  5. package/dist/atoms/index.js +3 -0
  6. package/dist/atoms/index.js.map +1 -0
  7. package/dist/chunk-AHE2576G.js +682 -0
  8. package/dist/chunk-AHE2576G.js.map +1 -0
  9. package/dist/chunk-CGDYSB4G.js +3 -0
  10. package/dist/chunk-CGDYSB4G.js.map +1 -0
  11. package/dist/chunk-JYNDKPAH.js +362 -0
  12. package/dist/chunk-JYNDKPAH.js.map +1 -0
  13. package/dist/chunk-WWOXGKLF.js +724 -0
  14. package/dist/chunk-WWOXGKLF.js.map +1 -0
  15. package/dist/client/code-block.d.ts +9 -0
  16. package/dist/client/code-block.js +65 -0
  17. package/dist/client/code-block.js.map +1 -0
  18. package/dist/client/confirm-dialog.d.ts +16 -0
  19. package/dist/client/confirm-dialog.js +181 -0
  20. package/dist/client/confirm-dialog.js.map +1 -0
  21. package/dist/client/date-picker.d.ts +10 -0
  22. package/dist/client/date-picker.js +236 -0
  23. package/dist/client/date-picker.js.map +1 -0
  24. package/dist/client/file-upload.d.ts +12 -0
  25. package/dist/client/file-upload.js +58 -0
  26. package/dist/client/file-upload.js.map +1 -0
  27. package/dist/client/gallery.d.ts +14 -0
  28. package/dist/client/gallery.js +122 -0
  29. package/dist/client/gallery.js.map +1 -0
  30. package/dist/client/menu.d.ts +24 -0
  31. package/dist/client/menu.js +115 -0
  32. package/dist/client/menu.js.map +1 -0
  33. package/dist/client/modal.d.ts +19 -0
  34. package/dist/client/modal.js +147 -0
  35. package/dist/client/modal.js.map +1 -0
  36. package/dist/client/multi-select.d.ts +16 -0
  37. package/dist/client/multi-select.js +84 -0
  38. package/dist/client/multi-select.js.map +1 -0
  39. package/dist/client/number-input.d.ts +6 -0
  40. package/dist/client/number-input.js +59 -0
  41. package/dist/client/number-input.js.map +1 -0
  42. package/dist/client/password-input.d.ts +16 -0
  43. package/dist/client/password-input.js +103 -0
  44. package/dist/client/password-input.js.map +1 -0
  45. package/dist/client/pin-input.d.ts +10 -0
  46. package/dist/client/pin-input.js +55 -0
  47. package/dist/client/pin-input.js.map +1 -0
  48. package/dist/client/theme-toggle.d.ts +8 -0
  49. package/dist/client/theme-toggle.js +126 -0
  50. package/dist/client/theme-toggle.js.map +1 -0
  51. package/dist/client/theme.d.ts +8 -0
  52. package/dist/client/theme.js +32 -0
  53. package/dist/client/theme.js.map +1 -0
  54. package/dist/client/time-picker.d.ts +10 -0
  55. package/dist/client/time-picker.js +140 -0
  56. package/dist/client/time-picker.js.map +1 -0
  57. package/dist/index.d.ts +5 -0
  58. package/dist/index.js +6 -0
  59. package/dist/index.js.map +1 -0
  60. package/dist/molecules/index.d.ts +309 -0
  61. package/dist/molecules/index.js +4 -0
  62. package/dist/molecules/index.js.map +1 -0
  63. package/dist/organisms/index.d.ts +113 -0
  64. package/dist/organisms/index.js +4 -0
  65. package/dist/organisms/index.js.map +1 -0
  66. package/dist/presets/gavel.css +19 -0
  67. package/dist/theme/index.d.ts +60 -0
  68. package/dist/theme/index.js +85 -0
  69. package/dist/theme/index.js.map +1 -0
  70. package/dist/tokens/index.d.ts +8 -0
  71. package/dist/tokens/index.js +3 -0
  72. package/dist/tokens/index.js.map +1 -0
  73. package/dist/tokens.css +129 -0
  74. 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
+ [![npm](https://img.shields.io/npm/v/jvdm-ui?color=0b7285)](https://www.npmjs.com/package/jvdm-ui)
8
+ [![license](https://img.shields.io/npm/l/jvdm-ui?color=0b7285)](./LICENSE)
9
+ [![React 19](https://img.shields.io/badge/react-19-0b7285)](https://react.dev)
10
+ [![Tailwind v4](https://img.shields.io/badge/tailwind-v4-0b7285)](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
@@ -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"}