@asevenid/ui 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 +105 -0
- package/dist/components/primitives/accordion.d.ts +10 -0
- package/dist/components/primitives/accordion.d.ts.map +1 -0
- package/dist/components/primitives/accordion.js +37 -0
- package/dist/components/primitives/accordion.js.map +1 -0
- package/dist/components/primitives/alert-dialog.d.ts +9 -0
- package/dist/components/primitives/alert-dialog.d.ts.map +1 -0
- package/dist/components/primitives/alert-dialog.js +58 -0
- package/dist/components/primitives/alert-dialog.js.map +1 -0
- package/dist/components/primitives/alert.d.ts +12 -0
- package/dist/components/primitives/alert.d.ts.map +1 -0
- package/dist/components/primitives/alert.js +32 -0
- package/dist/components/primitives/alert.js.map +1 -0
- package/dist/components/primitives/avatar.d.ts +20 -0
- package/dist/components/primitives/avatar.d.ts.map +1 -0
- package/dist/components/primitives/avatar.js +55 -0
- package/dist/components/primitives/avatar.js.map +1 -0
- package/dist/components/primitives/badge.d.ts +14 -0
- package/dist/components/primitives/badge.d.ts.map +1 -0
- package/dist/components/primitives/badge.js +42 -0
- package/dist/components/primitives/badge.js.map +1 -0
- package/dist/components/primitives/button.d.ts +7 -0
- package/dist/components/primitives/button.d.ts.map +1 -0
- package/dist/components/primitives/button.js +52 -0
- package/dist/components/primitives/button.js.map +1 -0
- package/dist/components/primitives/calendar.d.ts +7 -0
- package/dist/components/primitives/calendar.d.ts.map +1 -0
- package/dist/components/primitives/calendar.js +32 -0
- package/dist/components/primitives/calendar.js.map +1 -0
- package/dist/components/primitives/card.d.ts +14 -0
- package/dist/components/primitives/card.d.ts.map +1 -0
- package/dist/components/primitives/card.js +29 -0
- package/dist/components/primitives/card.js.map +1 -0
- package/dist/components/primitives/checkbox.d.ts +7 -0
- package/dist/components/primitives/checkbox.d.ts.map +1 -0
- package/dist/components/primitives/checkbox.js +51 -0
- package/dist/components/primitives/checkbox.js.map +1 -0
- package/dist/components/primitives/color-picker.d.ts +23 -0
- package/dist/components/primitives/color-picker.d.ts.map +1 -0
- package/dist/components/primitives/color-picker.js +128 -0
- package/dist/components/primitives/color-picker.js.map +1 -0
- package/dist/components/primitives/combobox.d.ts +17 -0
- package/dist/components/primitives/combobox.d.ts.map +1 -0
- package/dist/components/primitives/combobox.js +106 -0
- package/dist/components/primitives/combobox.js.map +1 -0
- package/dist/components/primitives/date-picker.d.ts +21 -0
- package/dist/components/primitives/date-picker.d.ts.map +1 -0
- package/dist/components/primitives/date-picker.js +81 -0
- package/dist/components/primitives/date-picker.js.map +1 -0
- package/dist/components/primitives/date-range-picker.d.ts +16 -0
- package/dist/components/primitives/date-range-picker.d.ts.map +1 -0
- package/dist/components/primitives/date-range-picker.js +51 -0
- package/dist/components/primitives/date-range-picker.js.map +1 -0
- package/dist/components/primitives/dialog.d.ts +8 -0
- package/dist/components/primitives/dialog.d.ts.map +1 -0
- package/dist/components/primitives/dialog.js +46 -0
- package/dist/components/primitives/dialog.js.map +1 -0
- package/dist/components/primitives/drawer.d.ts +2 -0
- package/dist/components/primitives/drawer.d.ts.map +1 -0
- package/dist/components/primitives/field.d.ts +19 -0
- package/dist/components/primitives/field.d.ts.map +1 -0
- package/dist/components/primitives/field.js +55 -0
- package/dist/components/primitives/field.js.map +1 -0
- package/dist/components/primitives/input-group.d.ts +11 -0
- package/dist/components/primitives/input-group.d.ts.map +1 -0
- package/dist/components/primitives/input-group.js +32 -0
- package/dist/components/primitives/input-group.js.map +1 -0
- package/dist/components/primitives/input.d.ts +7 -0
- package/dist/components/primitives/input.d.ts.map +1 -0
- package/dist/components/primitives/input.js +18 -0
- package/dist/components/primitives/input.js.map +1 -0
- package/dist/components/primitives/kbd.d.ts +13 -0
- package/dist/components/primitives/kbd.d.ts.map +1 -0
- package/dist/components/primitives/kbd.js +18 -0
- package/dist/components/primitives/kbd.js.map +1 -0
- package/dist/components/primitives/label.d.ts +7 -0
- package/dist/components/primitives/label.d.ts.map +1 -0
- package/dist/components/primitives/label.js +21 -0
- package/dist/components/primitives/label.js.map +1 -0
- package/dist/components/primitives/pagination.d.ts +12 -0
- package/dist/components/primitives/pagination.d.ts.map +1 -0
- package/dist/components/primitives/pagination.js +92 -0
- package/dist/components/primitives/pagination.js.map +1 -0
- package/dist/components/primitives/radio-group.d.ts +9 -0
- package/dist/components/primitives/radio-group.d.ts.map +1 -0
- package/dist/components/primitives/radio-group.js +36 -0
- package/dist/components/primitives/radio-group.js.map +1 -0
- package/dist/components/primitives/select.d.ts +7 -0
- package/dist/components/primitives/select.d.ts.map +1 -0
- package/dist/components/primitives/select.js +31 -0
- package/dist/components/primitives/select.js.map +1 -0
- package/dist/components/primitives/sheet.d.ts +2 -0
- package/dist/components/primitives/sheet.d.ts.map +1 -0
- package/dist/components/primitives/skeleton.d.ts +5 -0
- package/dist/components/primitives/skeleton.d.ts.map +1 -0
- package/dist/components/primitives/skeleton.js +15 -0
- package/dist/components/primitives/skeleton.js.map +1 -0
- package/dist/components/primitives/slider.d.ts +10 -0
- package/dist/components/primitives/slider.d.ts.map +1 -0
- package/dist/components/primitives/slider.js +91 -0
- package/dist/components/primitives/slider.js.map +1 -0
- package/dist/components/primitives/sonner.d.ts +5 -0
- package/dist/components/primitives/sonner.d.ts.map +1 -0
- package/dist/components/primitives/sonner.js +50 -0
- package/dist/components/primitives/sonner.js.map +1 -0
- package/dist/components/primitives/switch.d.ts +7 -0
- package/dist/components/primitives/switch.d.ts.map +1 -0
- package/dist/components/primitives/switch.js +22 -0
- package/dist/components/primitives/switch.js.map +1 -0
- package/dist/components/primitives/table.d.ts +10 -0
- package/dist/components/primitives/table.d.ts.map +1 -0
- package/dist/components/primitives/table.js +74 -0
- package/dist/components/primitives/table.js.map +1 -0
- package/dist/components/primitives/tabs.d.ts +6 -0
- package/dist/components/primitives/tabs.d.ts.map +1 -0
- package/dist/components/primitives/tabs.js +146 -0
- package/dist/components/primitives/tabs.js.map +1 -0
- package/dist/components/primitives/tag.d.ts +17 -0
- package/dist/components/primitives/tag.d.ts.map +1 -0
- package/dist/components/primitives/tag.js +71 -0
- package/dist/components/primitives/tag.js.map +1 -0
- package/dist/components/primitives/textarea.d.ts +7 -0
- package/dist/components/primitives/textarea.d.ts.map +1 -0
- package/dist/components/primitives/textarea.js +18 -0
- package/dist/components/primitives/textarea.js.map +1 -0
- package/dist/components/primitives/toggle-group.d.ts +9 -0
- package/dist/components/primitives/toggle-group.d.ts.map +1 -0
- package/dist/components/primitives/toggle-group.js +61 -0
- package/dist/components/primitives/toggle-group.js.map +1 -0
- package/dist/components/primitives/toggle.d.ts +7 -0
- package/dist/components/primitives/toggle.d.ts.map +1 -0
- package/dist/components/primitives/toggle.js +36 -0
- package/dist/components/primitives/toggle.js.map +1 -0
- package/dist/components/ui/accordion.d.ts +8 -0
- package/dist/components/ui/accordion.d.ts.map +1 -0
- package/dist/components/ui/accordion.js +67 -0
- package/dist/components/ui/accordion.js.map +1 -0
- package/dist/components/ui/alert-dialog.d.ts +19 -0
- package/dist/components/ui/alert-dialog.d.ts.map +1 -0
- package/dist/components/ui/alert-dialog.js +147 -0
- package/dist/components/ui/alert-dialog.js.map +1 -0
- package/dist/components/ui/alert.d.ts +10 -0
- package/dist/components/ui/alert.d.ts.map +1 -0
- package/dist/components/ui/alert.js +69 -0
- package/dist/components/ui/alert.js.map +1 -0
- package/dist/components/ui/avatar.d.ts +12 -0
- package/dist/components/ui/avatar.d.ts.map +1 -0
- package/dist/components/ui/avatar.js +106 -0
- package/dist/components/ui/avatar.js.map +1 -0
- package/dist/components/ui/badge.d.ts +10 -0
- package/dist/components/ui/badge.d.ts.map +1 -0
- package/dist/components/ui/badge.js +46 -0
- package/dist/components/ui/badge.js.map +1 -0
- package/dist/components/ui/breadcrumb.d.ts +12 -0
- package/dist/components/ui/breadcrumb.d.ts.map +1 -0
- package/dist/components/ui/breadcrumb.js +106 -0
- package/dist/components/ui/breadcrumb.js.map +1 -0
- package/dist/components/ui/button-group.d.ts +12 -0
- package/dist/components/ui/button-group.d.ts.map +1 -0
- package/dist/components/ui/button-group.js +78 -0
- package/dist/components/ui/button-group.js.map +1 -0
- package/dist/components/ui/button.d.ts +11 -0
- package/dist/components/ui/button.d.ts.map +1 -0
- package/dist/components/ui/button.js +59 -0
- package/dist/components/ui/button.js.map +1 -0
- package/dist/components/ui/calendar.d.ts +9 -0
- package/dist/components/ui/calendar.d.ts.map +1 -0
- package/dist/components/ui/calendar.js +175 -0
- package/dist/components/ui/calendar.js.map +1 -0
- package/dist/components/ui/card.d.ts +10 -0
- package/dist/components/ui/card.d.ts.map +1 -0
- package/dist/components/ui/card.js +93 -0
- package/dist/components/ui/card.js.map +1 -0
- package/dist/components/ui/checkbox.d.ts +5 -0
- package/dist/components/ui/checkbox.d.ts.map +1 -0
- package/dist/components/ui/combobox.d.ts +25 -0
- package/dist/components/ui/combobox.d.ts.map +1 -0
- package/dist/components/ui/combobox.js +246 -0
- package/dist/components/ui/combobox.js.map +1 -0
- package/dist/components/ui/dialog.d.ts +18 -0
- package/dist/components/ui/dialog.d.ts.map +1 -0
- package/dist/components/ui/dialog.js +125 -0
- package/dist/components/ui/dialog.js.map +1 -0
- package/dist/components/ui/drawer.d.ts +14 -0
- package/dist/components/ui/drawer.d.ts.map +1 -0
- package/dist/components/ui/drawer.js +131 -0
- package/dist/components/ui/drawer.js.map +1 -0
- package/dist/components/ui/dropdown-menu.d.ts +26 -0
- package/dist/components/ui/dropdown-menu.d.ts.map +1 -0
- package/dist/components/ui/dropdown-menu.js +234 -0
- package/dist/components/ui/dropdown-menu.js.map +1 -0
- package/dist/components/ui/field.d.ts +25 -0
- package/dist/components/ui/field.d.ts.map +1 -0
- package/dist/components/ui/field.js +223 -0
- package/dist/components/ui/field.js.map +1 -0
- package/dist/components/ui/input-group.d.ts +17 -0
- package/dist/components/ui/input-group.d.ts.map +1 -0
- package/dist/components/ui/input-group.js +136 -0
- package/dist/components/ui/input-group.js.map +1 -0
- package/dist/components/ui/input.d.ts +4 -0
- package/dist/components/ui/input.d.ts.map +1 -0
- package/dist/components/ui/input.js +24 -0
- package/dist/components/ui/input.js.map +1 -0
- package/dist/components/ui/kbd.d.ts +4 -0
- package/dist/components/ui/kbd.d.ts.map +1 -0
- package/dist/components/ui/kbd.js +33 -0
- package/dist/components/ui/kbd.js.map +1 -0
- package/dist/components/ui/label.d.ts +5 -0
- package/dist/components/ui/label.d.ts.map +1 -0
- package/dist/components/ui/label.js +25 -0
- package/dist/components/ui/label.js.map +1 -0
- package/dist/components/ui/pagination.d.ts +14 -0
- package/dist/components/ui/pagination.d.ts.map +1 -0
- package/dist/components/ui/pagination.js +39 -0
- package/dist/components/ui/pagination.js.map +1 -0
- package/dist/components/ui/popover.d.ts +11 -0
- package/dist/components/ui/popover.d.ts.map +1 -0
- package/dist/components/ui/popover.js +83 -0
- package/dist/components/ui/popover.js.map +1 -0
- package/dist/components/ui/radio-group.d.ts +6 -0
- package/dist/components/ui/radio-group.d.ts.map +1 -0
- package/dist/components/ui/radio-group.js +48 -0
- package/dist/components/ui/radio-group.js.map +1 -0
- package/dist/components/ui/select.d.ts +16 -0
- package/dist/components/ui/select.d.ts.map +1 -0
- package/dist/components/ui/select.js +181 -0
- package/dist/components/ui/select.js.map +1 -0
- package/dist/components/ui/separator.d.ts +5 -0
- package/dist/components/ui/separator.d.ts.map +1 -0
- package/dist/components/ui/separator.js +29 -0
- package/dist/components/ui/separator.js.map +1 -0
- package/dist/components/ui/sheet.d.ts +15 -0
- package/dist/components/ui/sheet.d.ts.map +1 -0
- package/dist/components/ui/sheet.js +130 -0
- package/dist/components/ui/sheet.js.map +1 -0
- package/dist/components/ui/sidebar.d.ts +70 -0
- package/dist/components/ui/sidebar.d.ts.map +1 -0
- package/dist/components/ui/sidebar.js +599 -0
- package/dist/components/ui/sidebar.js.map +1 -0
- package/dist/components/ui/skeleton.d.ts +3 -0
- package/dist/components/ui/skeleton.d.ts.map +1 -0
- package/dist/components/ui/skeleton.js +17 -0
- package/dist/components/ui/skeleton.js.map +1 -0
- package/dist/components/ui/slider.d.ts +5 -0
- package/dist/components/ui/slider.d.ts.map +1 -0
- package/dist/components/ui/slider.js +65 -0
- package/dist/components/ui/slider.js.map +1 -0
- package/dist/components/ui/sonner.d.ts +4 -0
- package/dist/components/ui/sonner.d.ts.map +1 -0
- package/dist/components/ui/sonner.js +33 -0
- package/dist/components/ui/sonner.js.map +1 -0
- package/dist/components/ui/spinner.d.ts +3 -0
- package/dist/components/ui/spinner.d.ts.map +1 -0
- package/dist/components/ui/spinner.js +19 -0
- package/dist/components/ui/spinner.js.map +1 -0
- package/dist/components/ui/switch.d.ts +7 -0
- package/dist/components/ui/switch.d.ts.map +1 -0
- package/dist/components/ui/switch.js +36 -0
- package/dist/components/ui/switch.js.map +1 -0
- package/dist/components/ui/table.d.ts +11 -0
- package/dist/components/ui/table.d.ts.map +1 -0
- package/dist/components/ui/table.js +117 -0
- package/dist/components/ui/table.js.map +1 -0
- package/dist/components/ui/tabs.d.ts +12 -0
- package/dist/components/ui/tabs.d.ts.map +1 -0
- package/dist/components/ui/tabs.js +94 -0
- package/dist/components/ui/tabs.js.map +1 -0
- package/dist/components/ui/textarea.d.ts +4 -0
- package/dist/components/ui/textarea.d.ts.map +1 -0
- package/dist/components/ui/textarea.js +21 -0
- package/dist/components/ui/textarea.js.map +1 -0
- package/dist/components/ui/toggle-group.d.ts +10 -0
- package/dist/components/ui/toggle-group.d.ts.map +1 -0
- package/dist/components/ui/toggle-group.js +71 -0
- package/dist/components/ui/toggle-group.js.map +1 -0
- package/dist/components/ui/toggle.d.ts +10 -0
- package/dist/components/ui/toggle.d.ts.map +1 -0
- package/dist/components/ui/toggle.js +46 -0
- package/dist/components/ui/toggle.js.map +1 -0
- package/dist/components/ui/tooltip.d.ts +8 -0
- package/dist/components/ui/tooltip.d.ts.map +1 -0
- package/dist/components/ui/tooltip.js +58 -0
- package/dist/components/ui/tooltip.js.map +1 -0
- package/dist/design-system/modes/options.d.ts +26 -0
- package/dist/design-system/modes/options.d.ts.map +1 -0
- package/dist/design-system/modes/options.js +61 -0
- package/dist/design-system/modes/options.js.map +1 -0
- package/dist/design-system/modes/runtime.d.ts +34 -0
- package/dist/design-system/modes/runtime.d.ts.map +1 -0
- package/dist/design-system/modes/runtime.js +195 -0
- package/dist/design-system/modes/runtime.js.map +1 -0
- package/dist/hooks/use-mobile.d.ts +2 -0
- package/dist/hooks/use-mobile.d.ts.map +1 -0
- package/dist/hooks/use-mobile.js +16 -0
- package/dist/hooks/use-mobile.js.map +1 -0
- package/dist/index.d.ts +51 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +306 -0
- package/dist/index.js.map +1 -0
- package/dist/lib/constants.d.ts +2 -0
- package/dist/lib/constants.d.ts.map +1 -0
- package/dist/lib/cva.d.ts +2 -0
- package/dist/lib/cva.d.ts.map +1 -0
- package/dist/lib/generate-shades.d.ts +39 -0
- package/dist/lib/generate-shades.d.ts.map +1 -0
- package/dist/lib/generate-shades.js +220 -0
- package/dist/lib/generate-shades.js.map +1 -0
- package/dist/lib/utils.d.ts +3 -0
- package/dist/lib/utils.d.ts.map +1 -0
- package/dist/lib/utils.js +10 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/styles.css +2 -0
- package/package.json +106 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Falah Filano
|
|
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,105 @@
|
|
|
1
|
+
# @asevenid/ui
|
|
2
|
+
|
|
3
|
+
A themeable React component library built on shadcn/ui, Radix UI, Base UI and Tailwind CSS v4. Ships compiled components, TypeScript types, and a single self-contained stylesheet — **no Tailwind setup required in your app**.
|
|
4
|
+
|
|
5
|
+
Theming is runtime: a token system driven by `data-*` attributes on `<html>` lets you switch **brand, gray, radius, font, density, feedback colors (error/warning/info/success), decorative palettes, surface style, and elevation** independently, plus standard `.dark` mode.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install @asevenid/ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
`react` and `react-dom` (>=18, works with 19) are peer dependencies — install them if you haven't already.
|
|
14
|
+
|
|
15
|
+
## Setup
|
|
16
|
+
|
|
17
|
+
### 1. Import the stylesheet once (e.g. in your root/entry file)
|
|
18
|
+
|
|
19
|
+
```ts
|
|
20
|
+
import "@asevenid/ui/styles.css"
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
This bundles every mode palette, the `.dark` overrides, and all utilities the components use.
|
|
24
|
+
|
|
25
|
+
### 2. (Optional) Load the web fonts
|
|
26
|
+
|
|
27
|
+
Non-system fonts are **not bundled**. To use the `inter`, `jakarta`, `space-grotesk`, `lora`, `dynapuff`, or `arima` font modes, add the Google Fonts link to your HTML `<head>` (or self-host). The default stack degrades to system fonts without it.
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
31
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
32
|
+
<link
|
|
33
|
+
rel="stylesheet"
|
|
34
|
+
href="https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=DynaPuff:wght@400..700&family=Inter:opsz,wght@14..32,100..900&family=Lora:wght@400..700&family=Plus+Jakarta+Sans:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap"
|
|
35
|
+
/>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### 3. (Optional) Initialize modes from storage
|
|
39
|
+
|
|
40
|
+
`initModes()` reads persisted mode choices from `localStorage` and applies the matching `data-*` attributes to `<html>` before paint. Call it once at startup.
|
|
41
|
+
|
|
42
|
+
```ts
|
|
43
|
+
import { initModes } from "@asevenid/ui"
|
|
44
|
+
|
|
45
|
+
initModes()
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Usage
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import { Button } from "@asevenid/ui"
|
|
52
|
+
|
|
53
|
+
export function Example() {
|
|
54
|
+
return <Button variant="default">Click me</Button>
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Switching themes at runtime
|
|
59
|
+
|
|
60
|
+
Modes are plain attributes on the document element, so you can set them directly or via the helpers:
|
|
61
|
+
|
|
62
|
+
```ts
|
|
63
|
+
import { setMode } from "@asevenid/ui"
|
|
64
|
+
|
|
65
|
+
setMode("brand", "violet") // data-brand="violet" + persisted to localStorage
|
|
66
|
+
setMode("radius", "lg")
|
|
67
|
+
setMode("font", "jakarta")
|
|
68
|
+
|
|
69
|
+
// Dark mode is the standard `.dark` class:
|
|
70
|
+
document.documentElement.classList.toggle("dark")
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
The available values per dimension live in `MODE_OPTIONS`:
|
|
74
|
+
|
|
75
|
+
```ts
|
|
76
|
+
import { MODE_OPTIONS, getMode } from "@asevenid/ui"
|
|
77
|
+
|
|
78
|
+
MODE_OPTIONS.brand // ["blue","red",…,"custom"]
|
|
79
|
+
getMode("brand") // current value
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
You can also generate a fully custom palette from a single hex with `setCustomColor("brand", "#3b82f6")`.
|
|
83
|
+
|
|
84
|
+
## What's included
|
|
85
|
+
|
|
86
|
+
**Components** (canonical, retuned wrappers): Accordion, AlertDialog, Alert, Avatar, Badge, Button, Calendar, Card, Checkbox, ColorPicker, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Field, InputGroup, Input, Kbd, Label, Pagination, RadioGroup, Select, Sheet, Skeleton, Slider, Sonner (toaster), Switch, Table, Tabs, Tag, Textarea, ToggleGroup, Toggle — plus Breadcrumb, ButtonGroup, DropdownMenu, Popover, Separator, Sidebar, Spinner, Tooltip.
|
|
87
|
+
|
|
88
|
+
**Utilities:** `cn`, `cva`, shade generation (`generateShadesWith`, …), the `useIsMobile` hook, and the full mode runtime (`getMode`, `setMode`, `initModes`, `setCustomColor`, `MODE_OPTIONS`, types).
|
|
89
|
+
|
|
90
|
+
## Deep imports
|
|
91
|
+
|
|
92
|
+
The published package preserves the source module tree, so you can import a single component directly for maximum tree-shaking:
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
import { Button } from "@asevenid/ui/components/primitives/button"
|
|
96
|
+
import { buttonVariants } from "@asevenid/ui/components/ui/button"
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Next.js
|
|
100
|
+
|
|
101
|
+
Every module ships with a `"use client"` banner, so the components work in the App Router (React Server Components) out of the box — import them from client or server components alike.
|
|
102
|
+
|
|
103
|
+
## License
|
|
104
|
+
|
|
105
|
+
[MIT](./LICENSE) © Falah Filano
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Accordion, AccordionContent as UIAccordionContent, AccordionItem as UIAccordionItem, AccordionTrigger as UIAccordionTrigger } from '../ui/accordion';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
type AccordionItemProps = React.ComponentProps<typeof UIAccordionItem>;
|
|
4
|
+
declare function AccordionItem({ className, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
type AccordionTriggerProps = React.ComponentProps<typeof UIAccordionTrigger>;
|
|
6
|
+
declare function AccordionTrigger({ className, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
type AccordionContentProps = React.ComponentProps<typeof UIAccordionContent>;
|
|
8
|
+
declare function AccordionContent({ className, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
|
10
|
+
//# sourceMappingURL=accordion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,SAAS,EACT,gBAAgB,IAAI,kBAAkB,EACtC,aAAa,IAAI,eAAe,EAChC,gBAAgB,IAAI,kBAAkB,EACvC,MAAM,2BAA2B,CAAA;AAGlC,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;AAEtE,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAUjE;AAED,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAE5E,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAOvE;AAED,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAE5E,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAEvE;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
4
|
+
import { AccordionContent as e, AccordionItem as t, AccordionTrigger as i } from "../ui/accordion.js";
|
|
5
|
+
import { Accordion as l } from "../ui/accordion.js";
|
|
6
|
+
import { cn as c } from "../../lib/utils.js";
|
|
7
|
+
function A({ className: o, ...r }) {
|
|
8
|
+
return /* @__PURE__ */ n(
|
|
9
|
+
t,
|
|
10
|
+
{
|
|
11
|
+
className: c(
|
|
12
|
+
"rounded-md border-b-0 px-3 transition-colors hover:bg-state-hover last:border-b-0",
|
|
13
|
+
o
|
|
14
|
+
),
|
|
15
|
+
...r
|
|
16
|
+
}
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
function u({ className: o, ...r }) {
|
|
20
|
+
return /* @__PURE__ */ n(
|
|
21
|
+
i,
|
|
22
|
+
{
|
|
23
|
+
className: c("hover:no-underline", o),
|
|
24
|
+
...r
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
function f({ className: o, ...r }) {
|
|
29
|
+
return /* @__PURE__ */ n(e, { className: o, ...r });
|
|
30
|
+
}
|
|
31
|
+
export {
|
|
32
|
+
l as Accordion,
|
|
33
|
+
f as AccordionContent,
|
|
34
|
+
A as AccordionItem,
|
|
35
|
+
u as AccordionTrigger
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.js","sources":["../../../src/components/primitives/accordion.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport {\n Accordion,\n AccordionContent as UIAccordionContent,\n AccordionItem as UIAccordionItem,\n AccordionTrigger as UIAccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { cn } from \"@/lib/utils\"\n\ntype AccordionItemProps = React.ComponentProps<typeof UIAccordionItem>\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n return (\n <UIAccordionItem\n className={cn(\n \"rounded-md border-b-0 px-3 transition-colors hover:bg-state-hover last:border-b-0\",\n className\n )}\n {...props}\n />\n )\n}\n\ntype AccordionTriggerProps = React.ComponentProps<typeof UIAccordionTrigger>\n\nfunction AccordionTrigger({ className, ...props }: AccordionTriggerProps) {\n return (\n <UIAccordionTrigger\n className={cn(\"hover:no-underline\", className)}\n {...props}\n />\n )\n}\n\ntype AccordionContentProps = React.ComponentProps<typeof UIAccordionContent>\n\nfunction AccordionContent({ className, ...props }: AccordionContentProps) {\n return <UIAccordionContent className={className} {...props} />\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"],"names":["AccordionItem","className","props","jsx","UIAccordionItem","cn","AccordionTrigger","UIAccordionTrigger","AccordionContent","UIAccordionContent"],"mappings":";;;;;;AAYA,SAASA,EAAc,EAAE,WAAAC,GAAW,GAAGC,KAA6B;AAClE,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAIA,SAASI,EAAiB,EAAE,WAAAL,GAAW,GAAGC,KAAgC;AACxE,SACE,gBAAAC;AAAA,IAACI;AAAAA,IAAA;AAAA,MACC,WAAWF,EAAG,sBAAsBJ,CAAS;AAAA,MAC5C,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAIA,SAASM,EAAiB,EAAE,WAAAP,GAAW,GAAGC,KAAgC;AACxE,SAAO,gBAAAC,EAACM,GAAA,EAAmB,WAAAR,GAAuB,GAAGC,EAAA,CAAO;AAC9D;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
|
|
2
|
+
import { Button } from './button';
|
|
3
|
+
import { AlertDialog as UIAlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from '../ui/alert-dialog';
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
declare function AlertDialog({ ...props }: React.ComponentProps<typeof UIAlertDialog>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function AlertDialogAction({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function AlertDialogCancel({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
|
|
9
|
+
//# sourceMappingURL=alert-dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AACvD,OAAO,EACL,WAAW,IAAI,aAAa,EAC5B,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,8BAA8B,CAAA;AAGrC,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,2CAE5C;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,2CAU9D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,2CAU9D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAA"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
4
|
+
import { AlertDialog as a } from "radix-ui";
|
|
5
|
+
import { Button as i } from "./button.js";
|
|
6
|
+
import { AlertDialog as g } from "../ui/alert-dialog.js";
|
|
7
|
+
import { AlertDialogContent as x, AlertDialogDescription as N, AlertDialogFooter as T, AlertDialogHeader as $, AlertDialogMedia as j, AlertDialogOverlay as v, AlertDialogPortal as y, AlertDialogTitle as B, AlertDialogTrigger as F } from "../ui/alert-dialog.js";
|
|
8
|
+
import { cn as n } from "../../lib/utils.js";
|
|
9
|
+
function s({
|
|
10
|
+
...l
|
|
11
|
+
}) {
|
|
12
|
+
return /* @__PURE__ */ t(g, { ...l });
|
|
13
|
+
}
|
|
14
|
+
function f({
|
|
15
|
+
className: l,
|
|
16
|
+
variant: r = "default",
|
|
17
|
+
size: e = "default",
|
|
18
|
+
...o
|
|
19
|
+
}) {
|
|
20
|
+
return /* @__PURE__ */ t(i, { variant: r, size: e, asChild: !0, children: /* @__PURE__ */ t(
|
|
21
|
+
a.Action,
|
|
22
|
+
{
|
|
23
|
+
"data-slot": "alert-dialog-action",
|
|
24
|
+
className: n(l),
|
|
25
|
+
...o
|
|
26
|
+
}
|
|
27
|
+
) });
|
|
28
|
+
}
|
|
29
|
+
function p({
|
|
30
|
+
className: l,
|
|
31
|
+
variant: r = "outline",
|
|
32
|
+
size: e = "default",
|
|
33
|
+
...o
|
|
34
|
+
}) {
|
|
35
|
+
return /* @__PURE__ */ t(i, { variant: r, size: e, asChild: !0, children: /* @__PURE__ */ t(
|
|
36
|
+
a.Cancel,
|
|
37
|
+
{
|
|
38
|
+
"data-slot": "alert-dialog-cancel",
|
|
39
|
+
className: n(l),
|
|
40
|
+
...o
|
|
41
|
+
}
|
|
42
|
+
) });
|
|
43
|
+
}
|
|
44
|
+
export {
|
|
45
|
+
s as AlertDialog,
|
|
46
|
+
f as AlertDialogAction,
|
|
47
|
+
p as AlertDialogCancel,
|
|
48
|
+
x as AlertDialogContent,
|
|
49
|
+
N as AlertDialogDescription,
|
|
50
|
+
T as AlertDialogFooter,
|
|
51
|
+
$ as AlertDialogHeader,
|
|
52
|
+
j as AlertDialogMedia,
|
|
53
|
+
v as AlertDialogOverlay,
|
|
54
|
+
y as AlertDialogPortal,
|
|
55
|
+
B as AlertDialogTitle,
|
|
56
|
+
F as AlertDialogTrigger
|
|
57
|
+
};
|
|
58
|
+
//# sourceMappingURL=alert-dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog.js","sources":["../../../src/components/primitives/alert-dialog.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { Button } from \"@/components/primitives/button\"\nimport {\n AlertDialog as UIAlertDialog,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\"\nimport { cn } from \"@/lib/utils\"\n\nfunction AlertDialog({\n ...props\n}: React.ComponentProps<typeof UIAlertDialog>) {\n return <UIAlertDialog {...props} />\n}\n\nfunction AlertDialogAction({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n return (\n <Button variant={variant} size={size} asChild>\n <AlertDialogPrimitive.Action\n data-slot=\"alert-dialog-action\"\n className={cn(className)}\n {...props}\n />\n </Button>\n )\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n return (\n <Button variant={variant} size={size} asChild>\n <AlertDialogPrimitive.Cancel\n data-slot=\"alert-dialog-cancel\"\n className={cn(className)}\n {...props}\n />\n </Button>\n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n"],"names":["AlertDialog","props","jsx","UIAlertDialog","AlertDialogAction","className","variant","size","Button","AlertDialogPrimitive","cn","AlertDialogCancel"],"mappings":";;;;;;;;AAkBA,SAASA,EAAY;AAAA,EACnB,GAAGC;AACL,GAA+C;AAC7C,SAAO,gBAAAC,EAACC,GAAA,EAAe,GAAGF,EAAA,CAAO;AACnC;AAEA,SAASG,EAAkB;AAAA,EACzB,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,GAAGN;AACL,GACiE;AAC/D,SACE,gBAAAC,EAACM,GAAA,EAAO,SAAAF,GAAkB,MAAAC,GAAY,SAAO,IAC3C,UAAA,gBAAAL;AAAA,IAACO,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAGL,CAAS;AAAA,MACtB,GAAGJ;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;AAEA,SAASU,EAAkB;AAAA,EACzB,WAAAN;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,GAAGN;AACL,GACiE;AAC/D,SACE,gBAAAC,EAACM,GAAA,EAAO,SAAAF,GAAkB,MAAAC,GAAY,SAAO,IAC3C,UAAA,gBAAAL;AAAA,IAACO,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAGL,CAAS;AAAA,MACtB,GAAGJ;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Alert as UIAlert, AlertDescription, AlertTitle } from '../ui/alert';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
type UIAlertProps = React.ComponentProps<typeof UIAlert>;
|
|
4
|
+
type UIAlertVariant = NonNullable<UIAlertProps["variant"]>;
|
|
5
|
+
type AlertVariant = UIAlertVariant | "warning" | "success" | "info";
|
|
6
|
+
type AlertProps = Omit<UIAlertProps, "variant"> & {
|
|
7
|
+
variant?: AlertVariant;
|
|
8
|
+
};
|
|
9
|
+
declare function Alert({ className, variant, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Alert, AlertTitle, AlertDescription };
|
|
11
|
+
export type { AlertProps, AlertVariant };
|
|
12
|
+
//# sourceMappingURL=alert.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,IAAI,OAAO,EAChB,gBAAgB,EAChB,UAAU,EACX,MAAM,uBAAuB,CAAA;AAG9B,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;AACxD,KAAK,cAAc,GAAG,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAA;AAC1D,KAAK,YAAY,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;AAanE,KAAK,UAAU,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,GAAG;IAChD,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAA;AAED,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAiBtE;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAA;AAC9C,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
4
|
+
import { Alert as n } from "../ui/alert.js";
|
|
5
|
+
import { AlertDescription as m, AlertTitle as p } from "../ui/alert.js";
|
|
6
|
+
import { cn as i } from "../../lib/utils.js";
|
|
7
|
+
const u = {
|
|
8
|
+
warning: "bg-warning-subtle text-warning-subtle-foreground border-warning/30 *:data-[slot=alert-description]:text-warning-subtle-foreground/85 [&>svg]:text-warning",
|
|
9
|
+
success: "bg-success-subtle text-success-subtle-foreground border-success/30 *:data-[slot=alert-description]:text-success-subtle-foreground/85 [&>svg]:text-success",
|
|
10
|
+
info: "bg-info-subtle text-info-subtle-foreground border-info/30 *:data-[slot=alert-description]:text-info-subtle-foreground/85 [&>svg]:text-info"
|
|
11
|
+
};
|
|
12
|
+
function f({ className: s, variant: t = "default", ...r }) {
|
|
13
|
+
const e = t === "warning" || t === "success" || t === "info";
|
|
14
|
+
return /* @__PURE__ */ o(
|
|
15
|
+
n,
|
|
16
|
+
{
|
|
17
|
+
variant: e ? "default" : t,
|
|
18
|
+
className: i(
|
|
19
|
+
t === "destructive" && "bg-destructive-subtle text-destructive-subtle-foreground border-destructive/30 *:data-[slot=alert-description]:text-destructive-subtle-foreground/85 [&>svg]:text-destructive",
|
|
20
|
+
e && u[t],
|
|
21
|
+
s
|
|
22
|
+
),
|
|
23
|
+
...r
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
export {
|
|
28
|
+
f as Alert,
|
|
29
|
+
m as AlertDescription,
|
|
30
|
+
p as AlertTitle
|
|
31
|
+
};
|
|
32
|
+
//# sourceMappingURL=alert.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.js","sources":["../../../src/components/primitives/alert.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport {\n Alert as UIAlert,\n AlertDescription,\n AlertTitle,\n} from \"@/components/ui/alert\"\nimport { cn } from \"@/lib/utils\"\n\ntype UIAlertProps = React.ComponentProps<typeof UIAlert>\ntype UIAlertVariant = NonNullable<UIAlertProps[\"variant\"]>\ntype AlertVariant = UIAlertVariant | \"warning\" | \"success\" | \"info\"\n\nconst semanticVariantClasses: Record<\n Extract<AlertVariant, \"warning\" | \"success\" | \"info\">,\n string\n> = {\n warning:\n \"bg-warning-subtle text-warning-subtle-foreground border-warning/30 *:data-[slot=alert-description]:text-warning-subtle-foreground/85 [&>svg]:text-warning\",\n success:\n \"bg-success-subtle text-success-subtle-foreground border-success/30 *:data-[slot=alert-description]:text-success-subtle-foreground/85 [&>svg]:text-success\",\n info: \"bg-info-subtle text-info-subtle-foreground border-info/30 *:data-[slot=alert-description]:text-info-subtle-foreground/85 [&>svg]:text-info\",\n}\n\ntype AlertProps = Omit<UIAlertProps, \"variant\"> & {\n variant?: AlertVariant\n}\n\nfunction Alert({ className, variant = \"default\", ...props }: AlertProps) {\n const isSemantic =\n variant === \"warning\" || variant === \"success\" || variant === \"info\"\n const uiVariant: UIAlertVariant = isSemantic ? \"default\" : variant\n\n return (\n <UIAlert\n variant={uiVariant}\n className={cn(\n variant === \"destructive\" &&\n \"bg-destructive-subtle text-destructive-subtle-foreground border-destructive/30 *:data-[slot=alert-description]:text-destructive-subtle-foreground/85 [&>svg]:text-destructive\",\n isSemantic && semanticVariantClasses[variant],\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Alert, AlertTitle, AlertDescription }\nexport type { AlertProps, AlertVariant }\n"],"names":["semanticVariantClasses","Alert","className","variant","props","isSemantic","jsx","UIAlert","cn"],"mappings":";;;;;;AAaA,MAAMA,IAGF;AAAA,EACF,SACE;AAAA,EACF,SACE;AAAA,EACF,MAAM;AACR;AAMA,SAASC,EAAM,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,GAAGC,KAAqB;AACvE,QAAMC,IACJF,MAAY,aAAaA,MAAY,aAAaA,MAAY;AAGhE,SACE,gBAAAG;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,SAJ8BF,IAAa,YAAYF;AAAA,MAKvD,WAAWK;AAAA,QACTL,MAAY,iBACV;AAAA,QACFE,KAAcL,EAAuBG,CAAO;AAAA,QAC5CD;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Avatar as UIAvatar, AvatarBadge, AvatarFallback as UIAvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from '../ui/avatar';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
type AvatarProps = React.ComponentProps<typeof UIAvatar>;
|
|
4
|
+
type AvatarFallbackProps = React.ComponentProps<typeof UIAvatarFallback>;
|
|
5
|
+
declare function Avatar(props: AvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
type InitialsAvatarProps = AvatarProps & {
|
|
8
|
+
/** Display name — drives both the fallback initials and the accent tint. */
|
|
9
|
+
name: string;
|
|
10
|
+
/** Optional image; falls back to initials while loading or on error. */
|
|
11
|
+
src?: string;
|
|
12
|
+
/** Apply a deterministic decorative tint keyed off `name`. */
|
|
13
|
+
accent?: boolean;
|
|
14
|
+
/** Extra classes for the fallback (e.g. text size on large avatars). */
|
|
15
|
+
fallbackClassName?: string;
|
|
16
|
+
};
|
|
17
|
+
declare function InitialsAvatar({ name, src, accent, fallbackClassName, ...props }: InitialsAvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount, InitialsAvatar, };
|
|
19
|
+
export type { AvatarProps, AvatarFallbackProps, InitialsAvatarProps };
|
|
20
|
+
//# sourceMappingURL=avatar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,MAAM,IAAI,QAAQ,EAClB,WAAW,EACX,cAAc,IAAI,gBAAgB,EAClC,WAAW,EACX,gBAAgB,EAChB,WAAW,EACZ,MAAM,wBAAwB,CAAA;AAG/B,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAA;AACxD,KAAK,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAExE,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAEjC;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAEnE;AA0BD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IACvC,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAA;IACZ,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,8DAA8D;IAC9D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,GAAG,EACH,MAAa,EACb,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAWrB;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,cAAc,EACd,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,cAAc,GACf,CAAA;AACD,YAAY,EAAE,WAAW,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,CAAA"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as a, jsxs as l } from "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
4
|
+
import { Avatar as u, AvatarFallback as s, AvatarImage as v } from "../ui/avatar.js";
|
|
5
|
+
import { AvatarBadge as j, AvatarGroup as k, AvatarGroupCount as I } from "../ui/avatar.js";
|
|
6
|
+
import { cn as n } from "../../lib/utils.js";
|
|
7
|
+
function d(t) {
|
|
8
|
+
return /* @__PURE__ */ a(u, { ...t });
|
|
9
|
+
}
|
|
10
|
+
function A({ className: t, ...r }) {
|
|
11
|
+
return /* @__PURE__ */ a(s, { className: n("font-medium", t), ...r });
|
|
12
|
+
}
|
|
13
|
+
const o = [
|
|
14
|
+
"bg-decorative-1/10 text-decorative-1-subtle-foreground",
|
|
15
|
+
"bg-decorative-2/10 text-decorative-2-subtle-foreground",
|
|
16
|
+
"bg-decorative-3/10 text-decorative-3-subtle-foreground",
|
|
17
|
+
"bg-decorative-4/10 text-decorative-4-subtle-foreground"
|
|
18
|
+
];
|
|
19
|
+
function f(t) {
|
|
20
|
+
return t.split(/\s+/).slice(0, 2).map((r) => r[0]?.toUpperCase() ?? "").join("");
|
|
21
|
+
}
|
|
22
|
+
function g(t) {
|
|
23
|
+
let r = 0;
|
|
24
|
+
for (let e = 0; e < t.length; e += 1)
|
|
25
|
+
r = r * 31 + t.charCodeAt(e) >>> 0;
|
|
26
|
+
return o[r % o.length];
|
|
27
|
+
}
|
|
28
|
+
function h({
|
|
29
|
+
name: t,
|
|
30
|
+
src: r,
|
|
31
|
+
accent: e = !0,
|
|
32
|
+
fallbackClassName: i,
|
|
33
|
+
...c
|
|
34
|
+
}) {
|
|
35
|
+
return /* @__PURE__ */ l(d, { ...c, children: [
|
|
36
|
+
r ? /* @__PURE__ */ a(v, { src: r, alt: t }) : null,
|
|
37
|
+
/* @__PURE__ */ a(
|
|
38
|
+
A,
|
|
39
|
+
{
|
|
40
|
+
className: n(e && g(t), i),
|
|
41
|
+
children: f(t)
|
|
42
|
+
}
|
|
43
|
+
)
|
|
44
|
+
] });
|
|
45
|
+
}
|
|
46
|
+
export {
|
|
47
|
+
d as Avatar,
|
|
48
|
+
j as AvatarBadge,
|
|
49
|
+
A as AvatarFallback,
|
|
50
|
+
k as AvatarGroup,
|
|
51
|
+
I as AvatarGroupCount,
|
|
52
|
+
v as AvatarImage,
|
|
53
|
+
h as InitialsAvatar
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=avatar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar.js","sources":["../../../src/components/primitives/avatar.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport {\n Avatar as UIAvatar,\n AvatarBadge,\n AvatarFallback as UIAvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { cn } from \"@/lib/utils\"\n\ntype AvatarProps = React.ComponentProps<typeof UIAvatar>\ntype AvatarFallbackProps = React.ComponentProps<typeof UIAvatarFallback>\n\nfunction Avatar(props: AvatarProps) {\n return <UIAvatar {...props} />\n}\n\nfunction AvatarFallback({ className, ...props }: AvatarFallbackProps) {\n return <UIAvatarFallback className={cn(\"font-medium\", className)} {...props} />\n}\n\n// Deterministic decorative accents so the same name always renders the same tint.\nconst AVATAR_ACCENTS = [\n \"bg-decorative-1/10 text-decorative-1-subtle-foreground\",\n \"bg-decorative-2/10 text-decorative-2-subtle-foreground\",\n \"bg-decorative-3/10 text-decorative-3-subtle-foreground\",\n \"bg-decorative-4/10 text-decorative-4-subtle-foreground\",\n] as const\n\nfunction getInitials(name: string) {\n return name\n .split(/\\s+/)\n .slice(0, 2)\n .map((part) => part[0]?.toUpperCase() ?? \"\")\n .join(\"\")\n}\n\nfunction accentFor(seed: string) {\n let hash = 0\n for (let i = 0; i < seed.length; i += 1) {\n hash = (hash * 31 + seed.charCodeAt(i)) >>> 0\n }\n return AVATAR_ACCENTS[hash % AVATAR_ACCENTS.length]\n}\n\ntype InitialsAvatarProps = AvatarProps & {\n /** Display name — drives both the fallback initials and the accent tint. */\n name: string\n /** Optional image; falls back to initials while loading or on error. */\n src?: string\n /** Apply a deterministic decorative tint keyed off `name`. */\n accent?: boolean\n /** Extra classes for the fallback (e.g. text size on large avatars). */\n fallbackClassName?: string\n}\n\nfunction InitialsAvatar({\n name,\n src,\n accent = true,\n fallbackClassName,\n ...props\n}: InitialsAvatarProps) {\n return (\n <Avatar {...props}>\n {src ? <AvatarImage src={src} alt={name} /> : null}\n <AvatarFallback\n className={cn(accent && accentFor(name), fallbackClassName)}\n >\n {getInitials(name)}\n </AvatarFallback>\n </Avatar>\n )\n}\n\nexport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n AvatarBadge,\n AvatarGroup,\n AvatarGroupCount,\n InitialsAvatar,\n}\nexport type { AvatarProps, AvatarFallbackProps, InitialsAvatarProps }\n"],"names":["Avatar","props","jsx","UIAvatar","AvatarFallback","className","UIAvatarFallback","cn","AVATAR_ACCENTS","getInitials","name","part","accentFor","seed","hash","i","InitialsAvatar","src","accent","fallbackClassName","jsxs","AvatarImage"],"mappings":";;;;;;AAeA,SAASA,EAAOC,GAAoB;AAClC,SAAO,gBAAAC,EAACC,GAAA,EAAU,GAAGF,EAAA,CAAO;AAC9B;AAEA,SAASG,EAAe,EAAE,WAAAC,GAAW,GAAGJ,KAA8B;AACpE,SAAO,gBAAAC,EAACI,KAAiB,WAAWC,EAAG,eAAeF,CAAS,GAAI,GAAGJ,GAAO;AAC/E;AAGA,MAAMO,IAAiB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAASC,EAAYC,GAAc;AACjC,SAAOA,EACJ,MAAM,KAAK,EACX,MAAM,GAAG,CAAC,EACV,IAAI,CAACC,MAASA,EAAK,CAAC,GAAG,YAAA,KAAiB,EAAE,EAC1C,KAAK,EAAE;AACZ;AAEA,SAASC,EAAUC,GAAc;AAC/B,MAAIC,IAAO;AACX,WAASC,IAAI,GAAGA,IAAIF,EAAK,QAAQE,KAAK;AACpC,IAAAD,IAAQA,IAAO,KAAKD,EAAK,WAAWE,CAAC,MAAO;AAE9C,SAAOP,EAAeM,IAAON,EAAe,MAAM;AACpD;AAaA,SAASQ,EAAe;AAAA,EACtB,MAAAN;AAAA,EACA,KAAAO;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,mBAAAC;AAAA,EACA,GAAGlB;AACL,GAAwB;AACtB,SACE,gBAAAmB,EAACpB,GAAA,EAAQ,GAAGC,GACT,UAAA;AAAA,IAAAgB,IAAM,gBAAAf,EAACmB,GAAA,EAAY,KAAAJ,GAAU,KAAKP,GAAM,IAAK;AAAA,IAC9C,gBAAAR;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAWG,EAAGW,KAAUN,EAAUF,CAAI,GAAGS,CAAiB;AAAA,QAEzD,YAAYT,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACF;AAEJ;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Badge as UIBadge } from '../ui/badge';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
type UIBadgeProps = React.ComponentProps<typeof UIBadge>;
|
|
4
|
+
type UIBadgeVariant = NonNullable<UIBadgeProps["variant"]>;
|
|
5
|
+
type BadgeVariant = UIBadgeVariant | "warning" | "success" | "info";
|
|
6
|
+
type BadgeSize = "default" | "sm";
|
|
7
|
+
type BadgeProps = Omit<UIBadgeProps, "variant"> & {
|
|
8
|
+
variant?: BadgeVariant;
|
|
9
|
+
size?: BadgeSize;
|
|
10
|
+
};
|
|
11
|
+
declare function Badge({ className, variant, size, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export { Badge };
|
|
13
|
+
export type { BadgeProps, BadgeSize, BadgeVariant };
|
|
14
|
+
//# sourceMappingURL=badge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAGxD,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;AACxD,KAAK,cAAc,GAAG,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAA;AAC1D,KAAK,YAAY,GACb,cAAc,GACd,SAAS,GACT,SAAS,GACT,MAAM,CAAA;AACV,KAAK,SAAS,GAAG,SAAS,GAAG,IAAI,CAAA;AAqBjC,KAAK,UAAU,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,GAAG;IAChD,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,UAAU,2CAqBZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA;AAChB,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
4
|
+
import { Badge as a } from "../ui/badge.js";
|
|
5
|
+
import { cn as d } from "../../lib/utils.js";
|
|
6
|
+
const t = {
|
|
7
|
+
warning: "bg-warning/10 text-warning-subtle-foreground [a&]:hover:bg-warning/15 focus-visible:ring-warning/20",
|
|
8
|
+
success: "bg-success/10 text-success-subtle-foreground [a&]:hover:bg-success/15 focus-visible:ring-success/20",
|
|
9
|
+
info: "bg-info/10 text-info-subtle-foreground [a&]:hover:bg-info/15 focus-visible:ring-info/20"
|
|
10
|
+
};
|
|
11
|
+
function s(r) {
|
|
12
|
+
return r in t;
|
|
13
|
+
}
|
|
14
|
+
function l({
|
|
15
|
+
className: r,
|
|
16
|
+
variant: e = "default",
|
|
17
|
+
size: o = "default",
|
|
18
|
+
...n
|
|
19
|
+
}) {
|
|
20
|
+
const i = s(e) ? "default" : e;
|
|
21
|
+
return /* @__PURE__ */ u(
|
|
22
|
+
a,
|
|
23
|
+
{
|
|
24
|
+
variant: i,
|
|
25
|
+
className: d(
|
|
26
|
+
"h-5 min-w-5 rounded-md",
|
|
27
|
+
e === "default" && "bg-[image:var(--surface-filled-primary-overlay)] bg-blend-normal border-none shadow-(--surface-inset-primary-sm)",
|
|
28
|
+
e === "secondary" && "bg-state-rest text-secondary-foreground [a&]:hover:bg-state-hover",
|
|
29
|
+
e === "outline" && "text-secondary-foreground dark:text-secondary-foreground [a&]:hover:bg-state-hover",
|
|
30
|
+
e === "destructive" && "bg-destructive/10 text-destructive-subtle-foreground [a&]:hover:bg-destructive/15 dark:bg-destructive/10 dark:text-destructive-subtle-foreground dark:[a&]:hover:bg-destructive/15",
|
|
31
|
+
o === "sm" && "h-4.5 min-w-4.5 px-1.5 text-[10px] gap-0.5 [&>svg]:size-2.5",
|
|
32
|
+
s(e) && t[e],
|
|
33
|
+
r
|
|
34
|
+
),
|
|
35
|
+
...n
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
export {
|
|
40
|
+
l as Badge
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge.js","sources":["../../../src/components/primitives/badge.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { Badge as UIBadge } from \"@/components/ui/badge\"\nimport { cn } from \"@/lib/utils\"\n\ntype UIBadgeProps = React.ComponentProps<typeof UIBadge>\ntype UIBadgeVariant = NonNullable<UIBadgeProps[\"variant\"]>\ntype BadgeVariant =\n | UIBadgeVariant\n | \"warning\"\n | \"success\"\n | \"info\"\ntype BadgeSize = \"default\" | \"sm\"\n\ntype SemanticBadgeVariant = Extract<\n BadgeVariant,\n \"warning\" | \"success\" | \"info\"\n>\n\nconst semanticVariantClasses: Record<SemanticBadgeVariant, string> = {\n warning:\n \"bg-warning/10 text-warning-subtle-foreground [a&]:hover:bg-warning/15 focus-visible:ring-warning/20\",\n success:\n \"bg-success/10 text-success-subtle-foreground [a&]:hover:bg-success/15 focus-visible:ring-success/20\",\n info: \"bg-info/10 text-info-subtle-foreground [a&]:hover:bg-info/15 focus-visible:ring-info/20\",\n}\n\nfunction isSemanticBadgeVariant(\n variant: BadgeVariant\n): variant is SemanticBadgeVariant {\n return variant in semanticVariantClasses\n}\n\ntype BadgeProps = Omit<UIBadgeProps, \"variant\"> & {\n variant?: BadgeVariant\n size?: BadgeSize\n}\n\nfunction Badge({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: BadgeProps) {\n const uiVariant: UIBadgeVariant = isSemanticBadgeVariant(variant)\n ? \"default\"\n : variant\n\n return (\n <UIBadge\n variant={uiVariant}\n className={cn(\n \"h-5 min-w-5 rounded-md\",\n variant === \"default\" && \"bg-[image:var(--surface-filled-primary-overlay)] bg-blend-normal border-none shadow-(--surface-inset-primary-sm)\",\n variant === \"secondary\" && \"bg-state-rest text-secondary-foreground [a&]:hover:bg-state-hover\",\n variant === \"outline\" && \"text-secondary-foreground dark:text-secondary-foreground [a&]:hover:bg-state-hover\",\n variant === \"destructive\" && \"bg-destructive/10 text-destructive-subtle-foreground [a&]:hover:bg-destructive/15 dark:bg-destructive/10 dark:text-destructive-subtle-foreground dark:[a&]:hover:bg-destructive/15\",\n size === \"sm\" && \"h-4.5 min-w-4.5 px-1.5 text-[10px] gap-0.5 [&>svg]:size-2.5\",\n isSemanticBadgeVariant(variant) && semanticVariantClasses[variant],\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Badge }\nexport type { BadgeProps, BadgeSize, BadgeVariant }\n"],"names":["semanticVariantClasses","isSemanticBadgeVariant","variant","Badge","className","size","props","uiVariant","jsx","UIBadge","cn"],"mappings":";;;;;AAmBA,MAAMA,IAA+D;AAAA,EACnE,SACE;AAAA,EACF,SACE;AAAA,EACF,MAAM;AACR;AAEA,SAASC,EACPC,GACiC;AACjC,SAAOA,KAAWF;AACpB;AAOA,SAASG,EAAM;AAAA,EACb,WAAAC;AAAA,EACA,SAAAF,IAAU;AAAA,EACV,MAAAG,IAAO;AAAA,EACP,GAAGC;AACL,GAAe;AACb,QAAMC,IAA4BN,EAAuBC,CAAO,IAC5D,YACAA;AAEJ,SACI,gBAAAM;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,SAASF;AAAA,MACT,WAAWG;AAAA,QACT;AAAA,QACAR,MAAY,aAAa;AAAA,QACzBA,MAAY,eAAe;AAAA,QAC3BA,MAAY,aAAa;AAAA,QACzBA,MAAY,iBAAiB;AAAA,QAC7BG,MAAS,QAAQ;AAAA,QACjBJ,EAAuBC,CAAO,KAAKF,EAAuBE,CAAO;AAAA,QACjEE;AAAA,MAAA;AAAA,MAEH,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Button as UIButton } from '../ui/button';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
type ButtonProps = React.ComponentProps<typeof UIButton>;
|
|
4
|
+
declare function Button({ className, variant, size, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export { Button };
|
|
6
|
+
export type { ButtonProps };
|
|
7
|
+
//# sourceMappingURL=button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAG3D,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAA;AAExD,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,WAAW,2CAoCb;AAED,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
4
|
+
import { Button as s } from "../ui/button.js";
|
|
5
|
+
import { cn as n } from "../../lib/utils.js";
|
|
6
|
+
function u({
|
|
7
|
+
className: a,
|
|
8
|
+
variant: t = "default",
|
|
9
|
+
size: e = "default",
|
|
10
|
+
...r
|
|
11
|
+
}) {
|
|
12
|
+
return /* @__PURE__ */ o(
|
|
13
|
+
s,
|
|
14
|
+
{
|
|
15
|
+
variant: t,
|
|
16
|
+
size: e,
|
|
17
|
+
className: n(
|
|
18
|
+
"ease-out",
|
|
19
|
+
t === "default" && "relative isolate bg-[image:var(--surface-filled-primary-overlay)] hover:bg-primary bg-blend-normal shadow-(--surface-shadow-primary) hover:shadow-(--surface-shadow-primary-hover) after:content-[''] after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-state-hover after:opacity-0 after:transition-opacity hover:after:opacity-100",
|
|
20
|
+
t === "secondary" && "relative isolate text-foreground dark:text-foreground aria-expanded:text-foreground dark:aria-expanded:text-foreground bg-muted hover:bg-muted bg-[image:var(--surface-filled-neutral-overlay)] shadow-(--surface-shadow-neutral) hover:shadow-(--surface-shadow-neutral-hover) after:content-[''] after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-state-hover after:opacity-0 after:transition-opacity hover:after:opacity-100",
|
|
21
|
+
// border as a layout-neutral inset ring (box-shadow), not a real border:
|
|
22
|
+
// buttons are auto-width, where a 1px border adds 2px to the total width
|
|
23
|
+
// (box-sizing can't prevent it on shrink-to-fit). The ring paints in the
|
|
24
|
+
// same place but costs zero layout, so outline matches the borderless
|
|
25
|
+
// variants' size. --border auto-adapts per mode, so no dark override; the
|
|
26
|
+
// hover elevation is inlined with the ring since two shadow utilities
|
|
27
|
+
// can't coexist. border-0 strips the base cva's real border.
|
|
28
|
+
t === "outline" && "border-0 bg-background dark:bg-background hover:bg-state-hover dark:hover:bg-state-hover shadow-[inset_0_0_0_1px_var(--border)] hover:shadow-[inset_0_0_0_1px_var(--border),var(--elevation-1)]",
|
|
29
|
+
t === "ghost" && "hover:bg-state-hover dark:hover:bg-state-hover",
|
|
30
|
+
// dark only: blend primary 50% toward the subtle foreground (brand-300) so
|
|
31
|
+
// the link sits between brand-600 and brand-300 — a touch lighter for the
|
|
32
|
+
// dark surface. Light keeps the base text-primary. Both stay semantic.
|
|
33
|
+
t === "link" && "dark:text-[color-mix(in_oklch,var(--primary),var(--primary-subtle-foreground)_50%)]",
|
|
34
|
+
t === "destructive" && "relative isolate bg-destructive-subtle hover:bg-destructive-subtle text-destructive-subtle-foreground dark:bg-destructive-subtle/50 dark:hover:bg-destructive-subtle/50 dark:text-destructive-subtle-foreground bg-[image:var(--surface-filled-destructive-overlay)] bg-blend-normal shadow-(--surface-shadow-destructive) hover:shadow-(--surface-shadow-destructive-hover) after:content-[''] after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-destructive/10 after:opacity-0 after:transition-opacity hover:after:opacity-100",
|
|
35
|
+
e === "xs" && "[--inset-lip:2px] px-2 gap-0.75 font-medium [&:has(>[data-icon=inline-end]):not(:has(>[data-icon=inline-start]))]:pl-2 [&:has(>[data-icon=inline-start]):not(:has(>[data-icon=inline-end]))]:pr-2 [&_svg:not([class*='size-'])]:size-3.5",
|
|
36
|
+
e === "sm" && "px-3 gap-0.75 font-medium [&:has(>[data-icon=inline-end]):not(:has(>[data-icon=inline-start]))]:pl-3 [&:has(>[data-icon=inline-start]):not(:has(>[data-icon=inline-end]))]:pr-3 [&_svg:not([class*='size-'])]:size-4",
|
|
37
|
+
e === "default" && "px-4 gap-1 font-medium [&:has(>[data-icon=inline-end]):not(:has(>[data-icon=inline-start]))]:pl-4 [&:has(>[data-icon=inline-start]):not(:has(>[data-icon=inline-end]))]:pr-4 [&_svg:not([class*='size-'])]:size-4.5",
|
|
38
|
+
e === "lg" && "px-5 gap-1 text-base font-medium [&:has(>[data-icon=inline-end]):not(:has(>[data-icon=inline-start]))]:pl-5 [&:has(>[data-icon=inline-start]):not(:has(>[data-icon=inline-end]))]:pr-5 [&_svg:not([class*='size-'])]:size-5",
|
|
39
|
+
e === "icon-xs" && "[&_svg:not([class*='size-'])]:size-4",
|
|
40
|
+
e === "icon-sm" && "[&_svg:not([class*='size-'])]:size-5",
|
|
41
|
+
e === "icon" && "[&_svg:not([class*='size-'])]:size-5.5",
|
|
42
|
+
e === "icon-lg" && "[&_svg:not([class*='size-'])]:size-6",
|
|
43
|
+
a
|
|
44
|
+
),
|
|
45
|
+
...r
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
export {
|
|
50
|
+
u as Button
|
|
51
|
+
};
|
|
52
|
+
//# sourceMappingURL=button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../src/components/primitives/button.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { Button as UIButton } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\ntype ButtonProps = React.ComponentProps<typeof UIButton>\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonProps) {\n return (\n <UIButton\n variant={variant}\n size={size}\n className={cn(\n \"ease-out\",\n variant === \"default\" && \"relative isolate bg-[image:var(--surface-filled-primary-overlay)] hover:bg-primary bg-blend-normal shadow-(--surface-shadow-primary) hover:shadow-(--surface-shadow-primary-hover) after:content-[''] after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-state-hover after:opacity-0 after:transition-opacity hover:after:opacity-100\",\n variant === \"secondary\" && \"relative isolate text-foreground dark:text-foreground aria-expanded:text-foreground dark:aria-expanded:text-foreground bg-muted hover:bg-muted bg-[image:var(--surface-filled-neutral-overlay)] shadow-(--surface-shadow-neutral) hover:shadow-(--surface-shadow-neutral-hover) after:content-[''] after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-state-hover after:opacity-0 after:transition-opacity hover:after:opacity-100\",\n // border as a layout-neutral inset ring (box-shadow), not a real border:\n // buttons are auto-width, where a 1px border adds 2px to the total width\n // (box-sizing can't prevent it on shrink-to-fit). The ring paints in the\n // same place but costs zero layout, so outline matches the borderless\n // variants' size. --border auto-adapts per mode, so no dark override; the\n // hover elevation is inlined with the ring since two shadow utilities\n // can't coexist. border-0 strips the base cva's real border.\n variant === \"outline\" && \"border-0 bg-background dark:bg-background hover:bg-state-hover dark:hover:bg-state-hover shadow-[inset_0_0_0_1px_var(--border)] hover:shadow-[inset_0_0_0_1px_var(--border),var(--elevation-1)]\",\n variant === \"ghost\" && \"hover:bg-state-hover dark:hover:bg-state-hover\",\n // dark only: blend primary 50% toward the subtle foreground (brand-300) so\n // the link sits between brand-600 and brand-300 — a touch lighter for the\n // dark surface. Light keeps the base text-primary. Both stay semantic.\n variant === \"link\" && \"dark:text-[color-mix(in_oklch,var(--primary),var(--primary-subtle-foreground)_50%)]\",\n variant === \"destructive\" && \"relative isolate bg-destructive-subtle hover:bg-destructive-subtle text-destructive-subtle-foreground dark:bg-destructive-subtle/50 dark:hover:bg-destructive-subtle/50 dark:text-destructive-subtle-foreground bg-[image:var(--surface-filled-destructive-overlay)] bg-blend-normal shadow-(--surface-shadow-destructive) hover:shadow-(--surface-shadow-destructive-hover) after:content-[''] after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-destructive/10 after:opacity-0 after:transition-opacity hover:after:opacity-100\",\n size === \"xs\" && \"[--inset-lip:2px] px-2 gap-0.75 font-medium [&:has(>[data-icon=inline-end]):not(:has(>[data-icon=inline-start]))]:pl-2 [&:has(>[data-icon=inline-start]):not(:has(>[data-icon=inline-end]))]:pr-2 [&_svg:not([class*='size-'])]:size-3.5\",\n size === \"sm\" && \"px-3 gap-0.75 font-medium [&:has(>[data-icon=inline-end]):not(:has(>[data-icon=inline-start]))]:pl-3 [&:has(>[data-icon=inline-start]):not(:has(>[data-icon=inline-end]))]:pr-3 [&_svg:not([class*='size-'])]:size-4\",\n size === \"default\" && \"px-4 gap-1 font-medium [&:has(>[data-icon=inline-end]):not(:has(>[data-icon=inline-start]))]:pl-4 [&:has(>[data-icon=inline-start]):not(:has(>[data-icon=inline-end]))]:pr-4 [&_svg:not([class*='size-'])]:size-4.5\",\n size === \"lg\" && \"px-5 gap-1 text-base font-medium [&:has(>[data-icon=inline-end]):not(:has(>[data-icon=inline-start]))]:pl-5 [&:has(>[data-icon=inline-start]):not(:has(>[data-icon=inline-end]))]:pr-5 [&_svg:not([class*='size-'])]:size-5\",\n size === \"icon-xs\" && \"[&_svg:not([class*='size-'])]:size-4\",\n size === \"icon-sm\" && \"[&_svg:not([class*='size-'])]:size-5\",\n size === \"icon\" && \"[&_svg:not([class*='size-'])]:size-5.5\",\n size === \"icon-lg\" && \"[&_svg:not([class*='size-'])]:size-6\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Button }\nexport type { ButtonProps }\n"],"names":["Button","className","variant","size","props","jsx","UIButton","cn"],"mappings":";;;;;AAOA,SAASA,EAAO;AAAA,EACd,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAgB;AACd,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACD,SAAAJ;AAAA,MACA,MAAAC;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACAL,MAAY,aAAa;AAAA,QACzBA,MAAY,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQ3BA,MAAY,aAAa;AAAA,QACzBA,MAAY,WAAW;AAAA;AAAA;AAAA;AAAA,QAIvBA,MAAY,UAAU;AAAA,QACtBA,MAAY,iBAAiB;AAAA,QAC7BC,MAAS,QAAQ;AAAA,QACjBA,MAAS,QAAQ;AAAA,QACjBA,MAAS,aAAa;AAAA,QACtBA,MAAS,QAAQ;AAAA,QACjBA,MAAS,aAAa;AAAA,QACtBA,MAAS,aAAa;AAAA,QACtBA,MAAS,UAAU;AAAA,QACnBA,MAAS,aAAa;AAAA,QACtBF;AAAA,MAAA;AAAA,MAEC,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Calendar as UICalendar } from '../ui/calendar';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
type CalendarProps = React.ComponentProps<typeof UICalendar>;
|
|
4
|
+
declare function Calendar({ captionLayout, startMonth, endMonth, className, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export { Calendar };
|
|
6
|
+
export type { CalendarProps };
|
|
7
|
+
//# sourceMappingURL=calendar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,QAAQ,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAGjE,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;AAU5D,iBAAS,QAAQ,CAAC,EAChB,aAA0B,EAC1B,UAAU,EACV,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,2CAgBf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA;AACnB,YAAY,EAAE,aAAa,EAAE,CAAA"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
3
|
+
import * as m from "react";
|
|
4
|
+
import { Calendar as u } from "../ui/calendar.js";
|
|
5
|
+
import { cn as g } from "../../lib/utils.js";
|
|
6
|
+
const c = "[&_[data-selected-single=true]]:bg-[image:var(--surface-filled-primary-overlay)] [&_[data-selected-single=true]]:bg-blend-normal [&_[data-selected-single=true]]:shadow-(--surface-inset-primary) [&_[data-range-start=true]]:bg-[image:var(--surface-filled-primary-overlay)] [&_[data-range-start=true]]:bg-blend-normal [&_[data-range-start=true]]:shadow-(--surface-inset-primary) [&_[data-range-end=true]]:bg-[image:var(--surface-filled-primary-overlay)] [&_[data-range-end=true]]:bg-blend-normal [&_[data-range-end=true]]:shadow-(--surface-inset-primary)";
|
|
7
|
+
function b({
|
|
8
|
+
captionLayout: r = "dropdown",
|
|
9
|
+
startMonth: e,
|
|
10
|
+
endMonth: a,
|
|
11
|
+
className: t,
|
|
12
|
+
...n
|
|
13
|
+
}) {
|
|
14
|
+
const [s, d] = m.useMemo(() => {
|
|
15
|
+
const l = e ?? new Date(1900, 0), o = a ?? new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 11);
|
|
16
|
+
return [l, o];
|
|
17
|
+
}, [e, a]);
|
|
18
|
+
return /* @__PURE__ */ i(
|
|
19
|
+
u,
|
|
20
|
+
{
|
|
21
|
+
captionLayout: r,
|
|
22
|
+
startMonth: s,
|
|
23
|
+
endMonth: d,
|
|
24
|
+
className: g(c, t),
|
|
25
|
+
...n
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
export {
|
|
30
|
+
b as Calendar
|
|
31
|
+
};
|
|
32
|
+
//# sourceMappingURL=calendar.js.map
|