@darthcharles/greda 0.0.0-stage → 0.1.0
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 +262 -2
- package/THIRD_PARTY_NOTICES.md +19 -0
- package/dist/components/ui/badge.d.ts +9 -0
- package/dist/components/ui/button.d.ts +12 -0
- package/dist/components/ui/card.d.ts +8 -0
- package/dist/components/ui/checkbox.d.ts +4 -0
- package/dist/components/ui/dialog.d.ts +24 -0
- package/dist/components/ui/input.d.ts +3 -0
- package/dist/components/ui/label.d.ts +5 -0
- package/dist/components/ui/select.d.ts +18 -0
- package/dist/components/ui/tabs.d.ts +7 -0
- package/dist/components/ui/textarea.d.ts +3 -0
- package/dist/components/ui/toast.d.ts +15 -0
- package/dist/components/ui/tooltip.d.ts +12 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +614 -0
- package/dist/index.js.map +1 -0
- package/dist/lib/utils.d.ts +3 -0
- package/dist/styles.css +104 -0
- package/dist/tokens.css +102 -0
- package/dist/utils.js +10 -0
- package/dist/utils.js.map +1 -0
- package/package.json +96 -4
- package/upstream/shadcn-ui/LICENSE.md +21 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Carlos Contreras
|
|
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
CHANGED
|
@@ -1,3 +1,263 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @darthcharles/greda
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A reusable React/TypeScript package built from **shadcn/ui component source**,
|
|
4
|
+
with a complete neutral base theme and consumer-owned token overrides.
|
|
5
|
+
Storybook documents each component in its own `*.stories.tsx` file.
|
|
6
|
+
|
|
7
|
+
## Quick start
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
import { Button, Input, Label } from "@darthcharles/greda";
|
|
11
|
+
import "@darthcharles/greda/styles.css";
|
|
12
|
+
import "./theme.css";
|
|
13
|
+
|
|
14
|
+
export function Example() {
|
|
15
|
+
return (
|
|
16
|
+
<>
|
|
17
|
+
<Label htmlFor="name">Name</Label>
|
|
18
|
+
<Input id="name" />
|
|
19
|
+
<Button>Continue</Button>
|
|
20
|
+
</>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
React 18 and 19 are peer dependencies and are excluded from the ESM build.
|
|
26
|
+
Import the stylesheet once at the application entry point. CSS is compiled by
|
|
27
|
+
the package: consumers need **no Tailwind setup**. Utility classes use the `ds-`
|
|
28
|
+
prefix, and the baseline reset and Tailwind variable initialization are scoped to `.comal-ui`. Page layout, page
|
|
29
|
+
backgrounds, and fonts remain the application's responsibility.
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
body {
|
|
33
|
+
background: hsl(var(--background));
|
|
34
|
+
color: hsl(var(--foreground));
|
|
35
|
+
font-family: var(--font-sans);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Consumer themes
|
|
40
|
+
|
|
41
|
+
Override any subset of tokens. Unspecified tokens retain their base values.
|
|
42
|
+
Colors use **space-separated HSL channels**, not hex or complete `hsl()` calls.
|
|
43
|
+
The overlay token additionally includes alpha. Other tokens accept CSS values.
|
|
44
|
+
Token names and value formats are part of the versioned public API.
|
|
45
|
+
|
|
46
|
+
```css
|
|
47
|
+
/* The consumer's theme.css */
|
|
48
|
+
:root {
|
|
49
|
+
--primary: 9.500 55.556% 42.353%;
|
|
50
|
+
--primary-hover: 9.714 56.150% 36.667%;
|
|
51
|
+
--primary-foreground: 0 0% 100%;
|
|
52
|
+
--ring: 9.500 55.556% 42.353%;
|
|
53
|
+
--radius: 0.75rem;
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Base token selectors use `:where()` so ordinary consumer selectors win even
|
|
58
|
+
if the library CSS loads later. Keep background/foreground pairs readable and
|
|
59
|
+
verify contrast in your theme. The base theme downloads no external fonts.
|
|
60
|
+
Comal's brand overrides belong in its consuming application.
|
|
61
|
+
|
|
62
|
+
Set `data-color-scheme="dark"` on `<html>` to opt into the base dark palette.
|
|
63
|
+
Brand identity and color scheme are independent. A consumer can customize dark
|
|
64
|
+
mode using `:root[data-color-scheme="dark"]` overrides.
|
|
65
|
+
|
|
66
|
+
Apply themes on `<html>` so portaled dialogs, selects, and tooltips inherit them.
|
|
67
|
+
For themes scoped to a subtree, pass the themed element to the content component's
|
|
68
|
+
`container` prop. `@darthcharles/greda/tokens.css` exports just the tokens;
|
|
69
|
+
`styles.css` already includes them.
|
|
70
|
+
|
|
71
|
+
### Base token reference
|
|
72
|
+
|
|
73
|
+
| Token | Default |
|
|
74
|
+
| --- | --- |
|
|
75
|
+
| `--background` | `0 0% 100%` |
|
|
76
|
+
| `--foreground` | `222 47% 11%` |
|
|
77
|
+
| `--card` | `0 0% 100%` |
|
|
78
|
+
| `--card-foreground` | `222 47% 11%` |
|
|
79
|
+
| `--popover` | `0 0% 100%` |
|
|
80
|
+
| `--popover-foreground` | `222 47% 11%` |
|
|
81
|
+
| `--accent` | `220 20% 94%` |
|
|
82
|
+
| `--accent-foreground` | `222 35% 20%` |
|
|
83
|
+
| `--primary` | `220 80% 45%` |
|
|
84
|
+
| `--primary-foreground` | `0 0% 100%` |
|
|
85
|
+
| `--primary-hover` | `220 80% 38%` |
|
|
86
|
+
| `--secondary` | `220 20% 94%` |
|
|
87
|
+
| `--secondary-foreground` | `222 35% 20%` |
|
|
88
|
+
| `--muted` | `220 15% 96%` |
|
|
89
|
+
| `--muted-foreground` | `220 10% 42%` |
|
|
90
|
+
| `--border` | `220 15% 82%` |
|
|
91
|
+
| `--input` | `220 15% 82%` |
|
|
92
|
+
| `--ring` | `220 80% 45%` |
|
|
93
|
+
| `--destructive` | `0 72% 43%` |
|
|
94
|
+
| `--destructive-foreground` | `0 0% 100%` |
|
|
95
|
+
| `--overlay` | `222 47% 11% / 0.4` |
|
|
96
|
+
| `--font-sans` | `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` |
|
|
97
|
+
| `--font-heading` | `var(--font-sans)` |
|
|
98
|
+
| `--font-size-xs` | `0.75rem` |
|
|
99
|
+
| `--font-size-sm` | `0.8125rem` |
|
|
100
|
+
| `--font-size-md` | `0.875rem` |
|
|
101
|
+
| `--font-size-lg` | `1.25rem` |
|
|
102
|
+
| `--font-weight-medium` | `500` |
|
|
103
|
+
| `--font-weight-bold` | `600` |
|
|
104
|
+
| `--line-height` | `1.5` |
|
|
105
|
+
| `--spacing-unit` | `0.25rem` |
|
|
106
|
+
| `--space-0` | `calc(var(--spacing-unit) * 0)` |
|
|
107
|
+
| `--space-0-5` | `calc(var(--spacing-unit) * 0.5)` |
|
|
108
|
+
| `--space-1` | `calc(var(--spacing-unit) * 1)` |
|
|
109
|
+
| `--space-1-5` | `calc(var(--spacing-unit) * 1.5)` |
|
|
110
|
+
| `--space-2` | `calc(var(--spacing-unit) * 2)` |
|
|
111
|
+
| `--space-2-5` | `calc(var(--spacing-unit) * 2.5)` |
|
|
112
|
+
| `--space-3` | `calc(var(--spacing-unit) * 3)` |
|
|
113
|
+
| `--space-3-5` | `calc(var(--spacing-unit) * 3.5)` |
|
|
114
|
+
| `--space-4` | `calc(var(--spacing-unit) * 4)` |
|
|
115
|
+
| `--space-5` | `calc(var(--spacing-unit) * 5)` |
|
|
116
|
+
| `--space-6` | `calc(var(--spacing-unit) * 6)` |
|
|
117
|
+
| `--space-8` | `calc(var(--spacing-unit) * 8)` |
|
|
118
|
+
| `--space-9` | `calc(var(--spacing-unit) * 9)` |
|
|
119
|
+
| `--space-10` | `calc(var(--spacing-unit) * 10)` |
|
|
120
|
+
| `--space-12` | `calc(var(--spacing-unit) * 12)` |
|
|
121
|
+
| `--space-16` | `calc(var(--spacing-unit) * 16)` |
|
|
122
|
+
| `--space-20` | `calc(var(--spacing-unit) * 20)` |
|
|
123
|
+
| `--space-24` | `calc(var(--spacing-unit) * 24)` |
|
|
124
|
+
| `--space-32` | `calc(var(--spacing-unit) * 32)` |
|
|
125
|
+
| `--radius` | `0.5rem` |
|
|
126
|
+
| `--radius-sm` | `calc(var(--radius) * 0.6)` |
|
|
127
|
+
| `--radius-full` | `9999px` |
|
|
128
|
+
| `--radius-lg` | `calc(var(--radius) * 1.5)` |
|
|
129
|
+
| `--border-width` | `1px` |
|
|
130
|
+
| `--dialog-width` | `32.5rem` |
|
|
131
|
+
| `--tooltip-width` | `20rem` |
|
|
132
|
+
| `--toast-width` | `24rem` |
|
|
133
|
+
| `--shadow-sm` | `0 1px 2px hsl(222 47% 11% / 0.08)` |
|
|
134
|
+
| `--shadow` | `0 8px 24px hsl(222 47% 11% / 0.12)` |
|
|
135
|
+
| `--shadow-dialog` | `0 24px 70px hsl(222 47% 11% / 0.24)` |
|
|
136
|
+
| `--focus-width` | `2px` |
|
|
137
|
+
| `--focus-offset` | `2px` |
|
|
138
|
+
| `--disabled-opacity` | `0.5` |
|
|
139
|
+
| `--duration` | `150ms` |
|
|
140
|
+
| `--z-overlay` | `50` |
|
|
141
|
+
| `--z-popover` | `60` |
|
|
142
|
+
| `--z-toast` | `70` |
|
|
143
|
+
|
|
144
|
+
The **Design Tokens** section in Storybook shows every token's value and a live
|
|
145
|
+
preview: color swatches, typography samples, spacing bars, corner shapes, shadows,
|
|
146
|
+
focus outlines, motion, opacity, sizing, and stacking layers. Its examples update
|
|
147
|
+
with the theme and color-scheme toolbar. The catalog reads directly from the token
|
|
148
|
+
stylesheet. Run `npm run docs:tokens` after editing tokens to refresh the reference
|
|
149
|
+
table in this README.
|
|
150
|
+
|
|
151
|
+
`--spacing-unit` scales the spacing utilities used by components. Named steps such
|
|
152
|
+
as `--space-1` (4px), `--space-2` (8px), `--space-4` (16px), and `--space-8` (32px)
|
|
153
|
+
derive from that unit. Override a single step to adjust every component utility
|
|
154
|
+
that uses it. Fractional steps use a hyphen, for example `--space-0-5` (2px).
|
|
155
|
+
|
|
156
|
+
```css
|
|
157
|
+
:root {
|
|
158
|
+
--space-4: 1.25rem; /* Change the step used by px-4 and p-4. */
|
|
159
|
+
}
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
Radii, fonts,
|
|
163
|
+
shadows, focus, and semantic colors are also mapped through Tailwind to runtime
|
|
164
|
+
variables. Breakpoints are build-time application layout choices rather than
|
|
165
|
+
CSS variable tokens. Components fit their containers; dialog and toast content
|
|
166
|
+
are constrained to the viewport. Use composition and `className` for layout
|
|
167
|
+
changes and application-specific styling.
|
|
168
|
+
|
|
169
|
+
## Components and Storybook
|
|
170
|
+
|
|
171
|
+
| Component | Storybook source |
|
|
172
|
+
| --------- | -------------------------------------------------------------------- |
|
|
173
|
+
| Button | [src/stories/Button.stories.tsx](src/stories/Button.stories.tsx) |
|
|
174
|
+
| Input | [src/stories/Input.stories.tsx](src/stories/Input.stories.tsx) |
|
|
175
|
+
| Textarea | [src/stories/Textarea.stories.tsx](src/stories/Textarea.stories.tsx) |
|
|
176
|
+
| Label | [src/stories/Label.stories.tsx](src/stories/Label.stories.tsx) |
|
|
177
|
+
| Select | [src/stories/Select.stories.tsx](src/stories/Select.stories.tsx) |
|
|
178
|
+
| Dialog | [src/stories/Dialog.stories.tsx](src/stories/Dialog.stories.tsx) |
|
|
179
|
+
| Card | [src/stories/Card.stories.tsx](src/stories/Card.stories.tsx) |
|
|
180
|
+
| Badge | [src/stories/Badge.stories.tsx](src/stories/Badge.stories.tsx) |
|
|
181
|
+
| Checkbox | [src/stories/Checkbox.stories.tsx](src/stories/Checkbox.stories.tsx) |
|
|
182
|
+
| Tabs | [src/stories/Tabs.stories.tsx](src/stories/Tabs.stories.tsx) |
|
|
183
|
+
| Toast | [src/stories/Toast.stories.tsx](src/stories/Toast.stories.tsx) |
|
|
184
|
+
| Tooltip | [src/stories/Tooltip.stories.tsx](src/stories/Tooltip.stories.tsx) |
|
|
185
|
+
|
|
186
|
+
Each file contains default usage and relevant variants, sizes, disabled/loading,
|
|
187
|
+
validation, and keyboard documentation. The toolbar previews base/Comal themes
|
|
188
|
+
and light/dark color schemes. Noninteractive components do not invent loading
|
|
189
|
+
or disabled behavior. `npm run validate:stories` enforces one story file per
|
|
190
|
+
component. Storybook includes automatic prop documentation and an axe panel.
|
|
191
|
+
|
|
192
|
+
The public API follows shadcn's composition model:
|
|
193
|
+
|
|
194
|
+
- Button: `default`, `secondary`, `outline`, `ghost`, `destructive`, `link` variants;
|
|
195
|
+
`default`, `sm`, `lg`, `icon` sizes. `loading` sets `aria-busy` and disables native
|
|
196
|
+
buttons. Set a useful label such as `Saving…`. The default type is `button`;
|
|
197
|
+
pass `type="submit"` for forms. `asChild` supports links; disabled/loading
|
|
198
|
+
behavior is intended for native buttons.
|
|
199
|
+
- Input, Textarea, Label: native field props and refs. Associate visible labels
|
|
200
|
+
and connect errors using `aria-invalid` and `aria-describedby`.
|
|
201
|
+
- Select: SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectLabel,
|
|
202
|
+
SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton.
|
|
203
|
+
Controlled values use `onValueChange`.
|
|
204
|
+
- Dialog: DialogTrigger, DialogContent, DialogTitle, DialogDescription,
|
|
205
|
+
DialogHeader, DialogFooter, DialogClose, DialogOverlay, DialogPortal. Content
|
|
206
|
+
includes a built-in accessible close button. Include a title. Explicitly pass
|
|
207
|
+
`aria-describedby={undefined}` when there is no description.
|
|
208
|
+
- Card: CardHeader, CardTitle, CardDescription, CardContent, CardFooter.
|
|
209
|
+
- Badge: `default`, `secondary`, `outline`, `destructive` variants.
|
|
210
|
+
- Checkbox: boolean or `indeterminate` state; controlled `onCheckedChange`.
|
|
211
|
+
- Tabs: TabsList, TabsTrigger, TabsContent; horizontal/vertical orientation.
|
|
212
|
+
- Toast: ToastProvider, ToastViewport, ToastTitle, ToastDescription, ToastAction,
|
|
213
|
+
ToastClose. Supply one provider/viewport and control each toast's open state.
|
|
214
|
+
- Tooltip: TooltipProvider, TooltipTrigger, TooltipContent.
|
|
215
|
+
|
|
216
|
+
Radix remains a dependency of the shadcn components and supplies their keyboard
|
|
217
|
+
and ARIA behavior. Give icon buttons accessible names and keep critical errors
|
|
218
|
+
inline. `cn` is exported from the root and `@darthcharles/greda/utils`; it combines
|
|
219
|
+
conditional classes and merges conflicting `ds-` Tailwind utilities.
|
|
220
|
+
|
|
221
|
+
## Development
|
|
222
|
+
|
|
223
|
+
Use Node 24 (`nvm use`) and npm:
|
|
224
|
+
|
|
225
|
+
```bash
|
|
226
|
+
npm ci
|
|
227
|
+
npm run storybook # http://localhost:6006
|
|
228
|
+
npm run check # types, interactions, stories, package, static catalog
|
|
229
|
+
npm run test:browser # render all stories, axe, theme/portal checks
|
|
230
|
+
npm pack # build a local package archive
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
Local browser tests use installed Google Chrome. CI installs Playwright Chromium.
|
|
234
|
+
Build Storybook before running browser tests (`npm run build-storybook`).
|
|
235
|
+
Build outputs are ignored: ESM and declarations go to `dist/`, compiled CSS to
|
|
236
|
+
`dist/styles.css`, and the static catalog to `storybook-static/`.
|
|
237
|
+
|
|
238
|
+
The Comal example in `.storybook/themes/comal.css` uses Meal Planner’s cream,
|
|
239
|
+
paper, terracotta, and sage palette with locally hosted DM Sans and Fraunces.
|
|
240
|
+
Its dark palette is a complementary Storybook example; Meal Planner currently
|
|
241
|
+
defines only light colors. Action and muted text colors use darker shades for
|
|
242
|
+
contrast. This example and its fonts are excluded from the published package. No application integration or registry publication is performed.
|
|
243
|
+
|
|
244
|
+
### shadcn source and updates
|
|
245
|
+
|
|
246
|
+
This package owns customized copies of the React 18-compatible New York component
|
|
247
|
+
sources and builds them with Tailwind 3.4. `components.json` records aliases, CSS,
|
|
248
|
+
style, and prefix settings. Original registry responses, hashes, and MIT license
|
|
249
|
+
are preserved in `upstream/shadcn-ui/`; see [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).
|
|
250
|
+
|
|
251
|
+
To update, review changes against those snapshots and preserve the documented
|
|
252
|
+
local adaptations. `node scripts/fetch-shadcn.mjs` refreshes only the upstream
|
|
253
|
+
snapshots and manifest; it does not overwrite local components. Upstream CLI
|
|
254
|
+
updates may overwrite customizations, so review their diffs before keeping them.
|
|
255
|
+
|
|
256
|
+
### Versioning and publishing
|
|
257
|
+
|
|
258
|
+
Use `npm run changeset` for a change description, then `npm run version-packages`
|
|
259
|
+
to prepare the version and changelog. Compatible features use minors and fixes
|
|
260
|
+
use patches. Breaking prop, token, or export changes need explicit notes and a
|
|
261
|
+
minor bump before 1.0, then a major bump after 1.0. CI validates the package and
|
|
262
|
+
Storybook. `npm run release` validates and publishes through Changesets using
|
|
263
|
+
the maintainer's npm credentials. Publishing requires an explicit release action.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# Third-party notices
|
|
2
|
+
|
|
3
|
+
The components in `src/components/ui/` are adapted from shadcn/ui's official
|
|
4
|
+
New York registry, distributed under the MIT license.
|
|
5
|
+
|
|
6
|
+
- Source: https://github.com/shadcn-ui/ui
|
|
7
|
+
- Registry: https://ui.shadcn.com/r/styles/new-york/{component}.json
|
|
8
|
+
- Original copyright and license: `upstream/shadcn-ui/LICENSE.md` (included in the package)
|
|
9
|
+
- Exact downloaded source, retrieval date, and hashes: `upstream/shadcn-ui/`
|
|
10
|
+
|
|
11
|
+
This project uses the React 18-compatible New York component sources and
|
|
12
|
+
Tailwind 3.4. Radix dependencies remain because they are used by those shadcn
|
|
13
|
+
components. The upstream Toast is maintained here as the explicit primitive API
|
|
14
|
+
requested for the initial component set.
|
|
15
|
+
|
|
16
|
+
Local adaptations: relative imports; `ds-` utility prefixes; a scoped CSS baseline;
|
|
17
|
+
consumer token mapping; optional portal containers; button loading, 1px press feedback from the current Nova style, and a default
|
|
18
|
+
non-submit type; viewport bounds on dialogs; invalid-field styles; an accessible
|
|
19
|
+
toast close name; and a distinct indeterminate checkbox icon.
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const badgeVariants: (props?: ({
|
|
4
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
7
|
+
}
|
|
8
|
+
declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;
|
|
9
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const buttonVariants: (props?: ({
|
|
4
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
5
|
+
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
8
|
+
loading?: boolean;
|
|
9
|
+
asChild?: boolean;
|
|
10
|
+
}
|
|
11
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
12
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
3
|
+
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
3
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
4
|
+
export { Checkbox };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
3
|
+
declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
|
|
4
|
+
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
5
|
+
declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
6
|
+
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
7
|
+
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
export type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
|
|
9
|
+
container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>["container"];
|
|
10
|
+
};
|
|
11
|
+
declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
12
|
+
container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>["container"];
|
|
13
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
14
|
+
declare const DialogHeader: {
|
|
15
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
16
|
+
displayName: string;
|
|
17
|
+
};
|
|
18
|
+
declare const DialogFooter: {
|
|
19
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
20
|
+
displayName: string;
|
|
21
|
+
};
|
|
22
|
+
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
23
|
+
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
24
|
+
export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
3
|
+
import { type VariantProps } from "class-variance-authority";
|
|
4
|
+
declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
|
|
5
|
+
export { Label };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
3
|
+
declare const Select: React.FC<SelectPrimitive.SelectProps>;
|
|
4
|
+
declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
|
|
6
|
+
declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
7
|
+
declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
9
|
+
export type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
|
|
10
|
+
container?: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Portal>["container"];
|
|
11
|
+
};
|
|
12
|
+
declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
13
|
+
container?: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Portal>["container"];
|
|
14
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
+
declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
16
|
+
declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
17
|
+
declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
3
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as ToastPrimitives from "@radix-ui/react-toast";
|
|
3
|
+
import { type VariantProps } from "class-variance-authority";
|
|
4
|
+
declare const ToastProvider: React.FC<ToastPrimitives.ToastProviderProps>;
|
|
5
|
+
declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
|
|
6
|
+
declare const Toast: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ({
|
|
7
|
+
variant?: "default" | "destructive" | null | undefined;
|
|
8
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLLIElement>>;
|
|
9
|
+
declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
10
|
+
declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
11
|
+
declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastTitleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
12
|
+
declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
|
|
14
|
+
type ToastActionElement = React.ReactElement<typeof ToastAction>;
|
|
15
|
+
export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
3
|
+
declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
|
|
4
|
+
declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
|
|
5
|
+
declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
export type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
|
|
7
|
+
container?: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Portal>["container"];
|
|
8
|
+
};
|
|
9
|
+
declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
10
|
+
container?: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Portal>["container"];
|
|
11
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export * from "./components/ui/button";
|
|
2
|
+
export * from "./components/ui/input";
|
|
3
|
+
export * from "./components/ui/textarea";
|
|
4
|
+
export * from "./components/ui/label";
|
|
5
|
+
export * from "./components/ui/select";
|
|
6
|
+
export * from "./components/ui/dialog";
|
|
7
|
+
export * from "./components/ui/card";
|
|
8
|
+
export * from "./components/ui/badge";
|
|
9
|
+
export * from "./components/ui/checkbox";
|
|
10
|
+
export * from "./components/ui/tabs";
|
|
11
|
+
export * from "./components/ui/toast";
|
|
12
|
+
export * from "./components/ui/tooltip";
|
|
13
|
+
export { cn } from "./lib/utils";
|