base-themes 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/README.md +174 -0
- package/dist/base-themes.css +2 -0
- package/dist/base-themes.js +918 -0
- package/dist/types/components/ui/Accordion.d.ts +15 -0
- package/dist/types/components/ui/AlertDialog.d.ts +16 -0
- package/dist/types/components/ui/Autocomplete.d.ts +20 -0
- package/dist/types/components/ui/Avatar.d.ts +16 -0
- package/dist/types/components/ui/Button.d.ts +9 -0
- package/dist/types/components/ui/Checkbox.d.ts +9 -0
- package/dist/types/components/ui/CheckboxGroup.d.ts +11 -0
- package/dist/types/components/ui/Collapsible.d.ts +12 -0
- package/dist/types/components/ui/Combobox.d.ts +13 -0
- package/dist/types/components/ui/ContextMenu.d.ts +17 -0
- package/dist/types/components/ui/CspProvider.d.ts +5 -0
- package/dist/types/components/ui/Dialog.d.ts +13 -0
- package/dist/types/components/ui/DirectionProvider.d.ts +6 -0
- package/dist/types/components/ui/Drawer.d.ts +14 -0
- package/dist/types/components/ui/Field.d.ts +11 -0
- package/dist/types/components/ui/Fieldset.d.ts +8 -0
- package/dist/types/components/ui/Form.d.ts +7 -0
- package/dist/types/components/ui/Input.d.ts +13 -0
- package/dist/types/components/ui/Menu.d.ts +17 -0
- package/dist/types/components/ui/Menubar.d.ts +18 -0
- package/dist/types/components/ui/Meter.d.ts +9 -0
- package/dist/types/components/ui/NavigationMenu.d.ts +16 -0
- package/dist/types/components/ui/NumberField.d.ts +8 -0
- package/dist/types/components/ui/OtpField.d.ts +9 -0
- package/dist/types/components/ui/Popover.d.ts +13 -0
- package/dist/types/components/ui/PreviewCard.d.ts +14 -0
- package/dist/types/components/ui/Progress.d.ts +9 -0
- package/dist/types/components/ui/Radio.d.ts +8 -0
- package/dist/types/components/ui/RadioGroup.d.ts +13 -0
- package/dist/types/components/ui/ScrollArea.d.ts +5 -0
- package/dist/types/components/ui/Select.d.ts +9 -0
- package/dist/types/components/ui/Separator.d.ts +5 -0
- package/dist/types/components/ui/Slider.d.ts +7 -0
- package/dist/types/components/ui/Switch.d.ts +9 -0
- package/dist/types/components/ui/Tabs.d.ts +16 -0
- package/dist/types/components/ui/Toast.d.ts +7 -0
- package/dist/types/components/ui/Toggle.d.ts +5 -0
- package/dist/types/components/ui/ToggleGroup.d.ts +13 -0
- package/dist/types/components/ui/Toolbar.d.ts +8 -0
- package/dist/types/components/ui/Tooltip.d.ts +14 -0
- package/dist/types/components/ui/index.d.ts +82 -0
- package/dist/types/components/ui/useDirection.d.ts +1 -0
- package/dist/types/components/ui/useToastManager.d.ts +4 -0
- package/dist/types/hooks/useTheme.d.ts +10 -0
- package/dist/types/lib.d.ts +3 -0
- package/package.json +68 -0
- package/public/previews/base-themes-bento.png +0 -0
- package/public/previews/base-themes-neo-brutalism.png +0 -0
- package/public/previews/base-themes-shadcn.png +0 -0
- package/registry/registry.json +64 -0
- package/skills/base-themes/SKILL.md +107 -0
package/README.md
ADDED
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
# base-themes
|
|
2
|
+
|
|
3
|
+
Themeable React components built on [Base UI](https://base-ui.com/), with ready-to-use Bento, shadcn, and neo brutalism visual styles.
|
|
4
|
+
|
|
5
|
+
`base-themes` gives you typed component wrappers, shared CSS tokens, shadcn/ui-style component docs, installable registry metadata, and block examples.
|
|
6
|
+
|
|
7
|
+
## Preview
|
|
8
|
+
|
|
9
|
+
### Bento
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### shadcn
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Neo Brutalism
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
## Install
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install base-themes @base-ui/react react react-dom
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Import the component CSS once:
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import 'base-themes/styles.css'
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Use components:
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
import { Button, Select } from 'base-themes'
|
|
37
|
+
|
|
38
|
+
export function Example() {
|
|
39
|
+
return (
|
|
40
|
+
<div data-style="shadcn" data-theme="light">
|
|
41
|
+
<Button>Save changes</Button>
|
|
42
|
+
<Select
|
|
43
|
+
id="density"
|
|
44
|
+
label="Density"
|
|
45
|
+
defaultValue="comfortable"
|
|
46
|
+
items={{ compact: 'Compact', comfortable: 'Comfortable', spacious: 'Spacious' }}
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
)
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Themes
|
|
54
|
+
|
|
55
|
+
Set `data-style` for the visual style:
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<html data-style="bento" data-theme="light">
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Available styles:
|
|
62
|
+
|
|
63
|
+
- `bento`: the default Bento style with warm accents and teal controls.
|
|
64
|
+
- `shadcn`: neutral/zinc product UI styling modeled after shadcn/ui.
|
|
65
|
+
- `neo-brutalism`: high-contrast chunky borders, hard shadows, and bold accent colors.
|
|
66
|
+
|
|
67
|
+
Set `data-theme` for color mode:
|
|
68
|
+
|
|
69
|
+
- `light`
|
|
70
|
+
- `dark`
|
|
71
|
+
|
|
72
|
+
You can also use the included hook in React apps:
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
import { useTheme } from 'base-themes'
|
|
76
|
+
|
|
77
|
+
function ThemeToggle() {
|
|
78
|
+
const { style, setStyle, resolved, setTheme } = useTheme()
|
|
79
|
+
return (
|
|
80
|
+
<button onClick={() => setStyle(style === 'bento' ? 'shadcn' : 'bento')}>
|
|
81
|
+
{style} / {resolved}
|
|
82
|
+
</button>
|
|
83
|
+
)
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Components
|
|
88
|
+
|
|
89
|
+
Coverage includes Base UI public component and provider primitives:
|
|
90
|
+
|
|
91
|
+
`Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Combobox`, `ContextMenu`, `CspProvider`, `Dialog`, `DirectionProvider`, `Drawer`, `Field`, `Fieldset`, `Form`, `Input`, `Menu`, `Menubar`, `Meter`, `NavigationMenu`, `NumberField`, `OtpField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `RadioGroup`, `ScrollArea`, `Select`, `Separator`, `Slider`, `Switch`, `Tabs`, `ToastProvider`, `Toggle`, `ToggleGroup`, `Toolbar`, and `Tooltip`.
|
|
92
|
+
|
|
93
|
+
## Registry
|
|
94
|
+
|
|
95
|
+
The package includes a shadcn/ui-style registry:
|
|
96
|
+
|
|
97
|
+
```ts
|
|
98
|
+
import registry from 'base-themes/registry.json'
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
The source file is [registry/registry.json](./registry/registry.json). It lists components, required files, blocks, pages, dependencies, and theme variants.
|
|
102
|
+
|
|
103
|
+
Validate it locally:
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
npm run registry:check
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## Blocks
|
|
110
|
+
|
|
111
|
+
The docs app includes block examples at `/blocks`:
|
|
112
|
+
|
|
113
|
+
- Dashboard Shell
|
|
114
|
+
- Settings Form
|
|
115
|
+
|
|
116
|
+
Blocks are also listed in `registry/registry.json` so agents and scripts can discover their component dependencies.
|
|
117
|
+
|
|
118
|
+
## Development
|
|
119
|
+
|
|
120
|
+
```bash
|
|
121
|
+
npm install
|
|
122
|
+
npm run dev
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
Open:
|
|
126
|
+
|
|
127
|
+
```text
|
|
128
|
+
http://localhost:5175/components/button
|
|
129
|
+
http://localhost:5175/blocks
|
|
130
|
+
http://localhost:5175/themes
|
|
131
|
+
http://localhost:5175/docs/installation
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Verify:
|
|
135
|
+
|
|
136
|
+
```bash
|
|
137
|
+
npm run registry:check
|
|
138
|
+
npm run lint
|
|
139
|
+
npm run build
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
Build outputs:
|
|
143
|
+
|
|
144
|
+
- Docs app: `dist/index.html`
|
|
145
|
+
- Package JS: `dist/base-themes.js`
|
|
146
|
+
- Package CSS: `dist/base-themes.css`
|
|
147
|
+
- Types: `dist/types/lib.d.ts`
|
|
148
|
+
|
|
149
|
+
## Publishing
|
|
150
|
+
|
|
151
|
+
This repo includes GitHub Actions workflows:
|
|
152
|
+
|
|
153
|
+
- `.github/workflows/ci.yml`: runs registry validation, lint, and build on PRs and pushes to `main`.
|
|
154
|
+
- `.github/workflows/publish.yml`: publishes to npm on a GitHub release or manual dispatch.
|
|
155
|
+
|
|
156
|
+
To publish from GitHub:
|
|
157
|
+
|
|
158
|
+
1. Add an npm automation token as the `NPM_TOKEN` repository secret.
|
|
159
|
+
2. Create a GitHub release for the package version.
|
|
160
|
+
3. The publish workflow runs `npm publish --access public --provenance`.
|
|
161
|
+
|
|
162
|
+
Manual local dry run:
|
|
163
|
+
|
|
164
|
+
```bash
|
|
165
|
+
npm pack --dry-run
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
## Agent Skill
|
|
169
|
+
|
|
170
|
+
An agent skill is included at [skills/base-themes/SKILL.md](./skills/base-themes/SKILL.md). It describes how to install components, add blocks, customize themes, and verify the registry.
|
|
171
|
+
|
|
172
|
+
## License
|
|
173
|
+
|
|
174
|
+
MIT
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.bento-accordion{gap:8px;display:grid}.bento-accordion-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--group-bg)}.bento-accordion-header{margin:0}.bento-accordion-trigger{width:100%;min-height:46px;color:var(--text-strong);cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;padding:0 14px;font-weight:760;display:flex}.bento-accordion-trigger svg{transition:transform .16s}.bento-accordion-item[data-open] .bento-accordion-trigger svg{transform:rotate(180deg)}.bento-accordion-panel{color:var(--text-muted);padding:0 14px 14px;line-height:1.6}.bento-alert-backdrop{z-index:60;background:var(--backdrop);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:fixed;inset:0}.bento-alert-popup{z-index:61;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:min(400px,100vw - 32px);box-shadow:var(--shadow);padding:24px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.bento-alert-title{color:var(--text-strong);margin:0;font-size:20px;font-weight:780}.bento-alert-description{color:var(--text-muted);margin:14px 0 22px;line-height:1.6}.bento-alert-actions{justify-content:flex-end;gap:10px;display:flex}.bento-button{border-radius:var(--radius-sm);min-height:40px;color:var(--bg);background:var(--surface-strong);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-weight:720;text-decoration:none;transition:background .16s,box-shadow .16s;display:inline-flex}.bento-button:hover{color:var(--bg);background:var(--text-strong)}.bento-button:focus-visible{outline-offset:2px;outline:3px solid #2563eb52}.bento-button.outline{color:var(--text-strong);border-color:var(--line);background:var(--surface)}.bento-button.outline:hover{border-color:var(--line-strong);box-shadow:0 8px 24px #0f172a14}.bento-button.ghost{color:var(--text-strong);background:0 0}.bento-button.ghost:hover{background:#0f172a0f}.bento-button.icon{width:40px;color:var(--text-strong);border-color:var(--line);background:var(--surface);padding:0}.bento-button.icon:hover{border-color:var(--line-strong);box-shadow:0 8px 24px #0f172a14}.bento-button.accent{color:#fff;background:var(--accent)}.bento-button.accent:hover{background:var(--accent-strong)}.bento-button.teal{color:#fff;background:var(--teal)}.bento-button.teal:hover{background:#0d5c55}.bento-combobox{width:min(100%,330px)}.bento-combobox-input{border:1px solid var(--line-strong);border-radius:var(--radius-sm);width:100%;min-height:44px;color:var(--text-strong);background:var(--surface);outline:none;align-items:center;padding:0 12px;font-size:14px;transition:border-color .14s;display:flex}.bento-combobox-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb, var(--teal), transparent 84%)}:is([dir=rtl] .bento-combobox-input,.bento-combobox-input:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}.bento-combobox-popup{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);min-width:220px;box-shadow:var(--shadow);padding:6px}.bento-combobox-item{border-radius:var(--radius-sm);min-height:36px;color:var(--text-strong);cursor:pointer;align-items:center;gap:10px;padding:0 10px;font-size:14px;display:flex}:is([dir=rtl] .bento-combobox-popup,.bento-combobox-popup:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}:is([dir=rtl] .bento-combobox-item,.bento-combobox-item:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){flex-direction:row-reverse}.bento-combobox-item[data-highlighted]{background:var(--surface-muted)}.bento-combobox-no-results{color:var(--text-muted);text-align:center;padding:12px;font-size:14px}[data-theme=dark] .bento-combobox-popup{background:#111827;box-shadow:0 18px 48px #00000061,0 0 0 1px #ffffff05}.bento-autocomplete{width:min(100%,320px)}.bento-avatar{background:var(--surface-muted);width:40px;height:40px;color:var(--text-strong);-webkit-user-select:none;user-select:none;border-radius:999px;justify-content:center;align-items:center;font-size:16px;font-weight:760;display:inline-flex;overflow:hidden}.bento-avatar img{object-fit:cover;width:100%;height:100%}.bento-avatar.sm{width:32px;height:32px;font-size:13px}.bento-avatar.lg{width:56px;height:56px;font-size:22px}.bento-avatar-group{display:flex}.bento-avatar-group .bento-avatar{border:2px solid #fff;margin-left:-10px}.bento-avatar-group .bento-avatar:first-child{margin-left:0}.bento-checkbox{border:1px solid var(--line-strong);color:#fff;background:var(--surface);cursor:pointer;border-radius:5px;place-items:center;width:22px;height:22px;transition:border-color .14s,background .14s;display:grid}.bento-checkbox[data-checked]{border-color:var(--teal);background:var(--teal)}.bento-checkbox:focus-visible{outline-offset:2px;outline:3px solid #2563eb52}.bento-checkbox-label{color:var(--text-strong);cursor:pointer;align-items:center;gap:9px;font-weight:680;display:inline-flex}.bento-checkbox-group{flex-wrap:wrap;gap:12px 16px;display:flex}.bento-collapsible{border:1px solid var(--line);border-radius:var(--radius);background:var(--group-bg);overflow:hidden}.bento-collapsible-trigger{width:100%;min-height:46px;color:var(--text-strong);cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;padding:0 14px;font-weight:760;display:flex}.bento-collapsible-trigger svg{transition:transform .16s}.bento-collapsible[data-open] .bento-collapsible-trigger svg{transform:rotate(180deg)}.bento-collapsible-panel{color:var(--text-muted);padding:0 14px 14px;line-height:1.6}.bento-menu-positioner{z-index:45}.bento-menu-popup{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);min-width:180px;box-shadow:var(--shadow);padding:6px}.bento-menu-item{border-radius:var(--radius-sm);min-height:36px;color:var(--text-strong);cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;width:100%;padding:0 10px;font-size:14px;font-weight:680;display:flex}:is([dir=rtl] .bento-menu-popup,.bento-menu-popup:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}:is([dir=rtl] .bento-menu-item,.bento-menu-item:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){flex-direction:row-reverse}.bento-menu-item[data-highlighted]{background:var(--surface-muted)}.bento-menu-item[data-disabled]{color:var(--text-muted);opacity:.5;cursor:default}.bento-menu-separator{background:var(--line);height:1px;margin:4px 8px}[data-theme=dark] .bento-menu-popup{background:#111827;box-shadow:0 18px 48px #00000061,0 0 0 1px #ffffff05}.bento-context-menu-trigger{border:1px dashed var(--line-strong);border-radius:var(--radius);min-width:240px;color:var(--text-muted);background:var(--surface);text-align:center;padding:22px}.bento-dialog-backdrop{z-index:50;background:var(--backdrop);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:fixed;inset:0}.bento-dialog-popup{z-index:51;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:min(420px,100vw - 32px);box-shadow:var(--shadow);padding:22px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.bento-dialog-topline{justify-content:space-between;align-items:center;gap:16px;display:flex}.bento-dialog-title{color:var(--text-strong);margin:0;font-size:20px;font-weight:780}.bento-dialog-description{color:var(--text-muted);margin:14px 0 18px;line-height:1.6}.bento-drawer-backdrop{z-index:50;background:var(--backdrop);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:fixed;inset:0}.bento-drawer-popup{z-index:51;box-sizing:border-box;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);flex-direction:column;display:flex;position:fixed}.bento-drawer-popup[data-side=left]{border-left:0;width:min(360px,90vw);top:0;bottom:0;left:0}.bento-drawer-popup[data-side=right]{border-right:0;width:min(360px,90vw);top:0;bottom:0;right:0}.bento-drawer-popup[data-side=top]{border-top:0;height:min(300px,50vh);top:0;left:0;right:0}.bento-drawer-popup[data-side=bottom]{border-bottom:0;height:min(300px,50vh);bottom:0;left:0;right:0}.bento-drawer-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.bento-drawer-title{color:var(--text-strong);margin:0;font-size:18px;font-weight:780}.bento-drawer-description{color:var(--text-muted);padding:14px 20px;line-height:1.6}.bento-drawer-body{flex:1;padding:0 20px 20px;overflow:auto}.bento-field{gap:8px;width:min(100%,360px);display:grid}.bento-field-description,.bento-field-error{font-size:13px;line-height:1.5}.bento-field-description{color:var(--text-muted)}.bento-field-error{color:var(--accent-strong)}.bento-fieldset{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);gap:14px;min-width:0;padding:16px;display:grid}.bento-fieldset-legend{color:var(--text-strong);padding:0 4px;font-size:14px;font-weight:760}.bento-form{gap:16px;width:min(100%,420px);display:grid}.bento-input,.bento-textarea{border:1px solid var(--line-strong);border-radius:var(--radius-sm);width:100%;min-height:42px;color:var(--text-strong);background:var(--surface);padding:0 12px;font-size:14px;transition:border-color .14s,box-shadow .14s}.bento-input:focus,.bento-textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px #0f766e1f}.bento-textarea{resize:vertical;min-height:80px;padding:10px 12px}.bento-field{gap:8px;display:grid}.bento-field-label{color:var(--text-muted);text-transform:uppercase;font-size:13px;font-weight:760}.bento-field-error{color:#dc2626;font-size:13px;font-weight:600}.field-label{color:var(--text-muted);text-transform:uppercase;font-size:13px;font-weight:760}.bento-menubar{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);align-items:center;gap:4px;padding:4px;display:inline-flex}.bento-menubar-trigger{border-radius:var(--radius-sm);height:32px;color:var(--text);cursor:pointer;background:0 0;border:0;padding:0 10px;font-weight:650}.bento-menubar-trigger:hover,.bento-menubar-trigger[data-open]{color:var(--text-strong);background:var(--surface-muted)}.bento-meter{width:100%}.bento-meter-track{background:var(--track-bg);border-radius:999px;width:100%;height:12px;position:relative;overflow:hidden}.bento-meter-indicator{border-radius:inherit;background:var(--accent);height:100%;transition:width .3s}.bento-meter-high{background:var(--green)}.bento-meter-mid{background:var(--accent)}.bento-meter-low{background:#dc2626}.bento-meter-label{color:var(--text-muted);justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;font-weight:680;display:flex}.bento-meter-value{color:var(--text-strong)}.bento-nav-menu{align-items:center;display:flex;position:relative}.bento-nav-menu-list{align-items:center;gap:2px;margin:0;padding:0;list-style:none;display:flex}.bento-nav-menu-trigger{border-radius:var(--radius-sm);min-height:36px;color:var(--text-strong);cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:0 12px;font-size:14px;font-weight:680;display:inline-flex}.bento-nav-menu-trigger:hover{background:var(--surface-muted)}:is([dir=rtl] .bento-nav-menu-list,.bento-nav-menu-list:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))),:is([dir=rtl] .bento-nav-menu-trigger,.bento-nav-menu-trigger:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){flex-direction:row-reverse}.bento-nav-menu-trigger svg{transition:transform .14s}.bento-nav-menu-trigger[data-expanded] svg{transform:rotate(180deg)}.bento-nav-menu-popup{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);min-width:200px;box-shadow:var(--shadow);padding:6px}.bento-nav-menu-item{border-radius:var(--radius-sm);min-height:36px;color:var(--text-strong);cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;width:100%;padding:0 10px;font-size:14px;font-weight:680;display:flex}:is([dir=rtl] .bento-nav-menu-popup,.bento-nav-menu-popup:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}:is([dir=rtl] .bento-nav-menu-item,.bento-nav-menu-item:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){flex-direction:row-reverse}.bento-nav-menu-item[data-highlighted]{background:var(--surface-muted)}.bento-nav-menu-viewport{width:100%;position:absolute;top:100%;left:0;overflow:hidden}[data-theme=dark] .bento-nav-menu-popup{background:#111827;box-shadow:0 18px 48px #00000061,0 0 0 1px #ffffff05}.bento-number-field{gap:8px;width:220px;display:grid}.bento-number-field-group{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);grid-template-columns:36px 1fr 36px;height:40px;display:grid;overflow:hidden}.bento-number-field-button,.bento-number-field-input{color:var(--text-strong);background:0 0;border:0}.bento-number-field-button{cursor:pointer;place-items:center;display:grid}.bento-number-field-button:hover{background:var(--surface-muted)}.bento-number-field-input{text-align:center;outline:0;min-width:0}.bento-otp-field{gap:8px;display:grid}.bento-otp-inputs{flex-wrap:wrap;gap:8px;display:flex}.bento-otp-input{border:1px solid var(--line);border-radius:var(--radius-sm);width:40px;height:44px;color:var(--text-strong);background:var(--surface);text-align:center;outline:0;font-size:18px;font-weight:760}.bento-otp-input:focus-visible{border-color:var(--blue);box-shadow:0 0 0 3px #2563eb2e}.bento-popover-popup{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:250px;box-shadow:var(--shadow);padding:16px}.bento-popover-arrow{fill:#fff}.bento-popover-title{color:var(--text-strong);margin:0;font-size:20px;font-weight:780}.bento-popover-description{color:var(--text-muted);margin:10px 0 0;line-height:1.6}.bento-preview-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:280px;box-shadow:var(--shadow);padding:16px}.bento-preview-card img{object-fit:cover;border-radius:var(--radius-sm);width:100%;height:140px;margin-bottom:12px}.bento-preview-card-title{color:var(--text-strong);margin:0;font-size:16px;font-weight:760}.bento-preview-card-description{color:var(--text-muted);margin-top:6px;font-size:14px}.bento-preview-card-arrow{fill:#fff}.bento-progress{width:100%}.bento-progress-track{background:var(--track-bg);border-radius:999px;width:100%;height:10px;position:relative;overflow:hidden}.bento-progress-indicator{border-radius:inherit;background:linear-gradient(90deg, var(--teal), var(--accent));height:100%;transition:width .3s}.bento-progress-label{color:var(--text-muted);justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;font-weight:680;display:flex}.bento-progress-value{color:var(--text-strong)}.bento-radio-group{flex-wrap:wrap;gap:10px;display:flex}.bento-radio{border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;border-radius:999px;place-items:center;width:22px;height:22px;transition:border-color .14s;display:grid}.bento-radio[data-checked]{border-color:var(--teal)}.bento-radio-indicator{background:var(--teal);border-radius:999px;width:12px;height:12px}.bento-radio-label{color:var(--text-strong);cursor:pointer;align-items:center;gap:9px;font-weight:680;display:inline-flex}.bento-radio:focus-visible{outline-offset:2px;outline:3px solid #2563eb52}.bento-scroll-area{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.bento-scroll-area-viewport{scrollbar-width:none;width:100%;height:100%;overflow:auto}.bento-scroll-area-viewport::-webkit-scrollbar{display:none}.bento-scroll-area-scrollbar{touch-action:none;background:0 0;padding:2px;display:flex}.bento-scroll-area-scrollbar[data-vertical]{width:10px}.bento-scroll-area-thumb{background:var(--line-strong);border-radius:999px;flex:1;transition:background .14s}.bento-scroll-area-thumb:hover{background:var(--scrollbar-thumb-hover)}.bento-scroll-area-corner{background:0 0}.bento-select-trigger{border:1px solid var(--line-strong);border-radius:var(--radius-sm);width:min(100%,330px);min-height:44px;color:var(--text-strong);background:var(--surface);cursor:pointer;justify-content:space-between;align-items:center;gap:12px;padding:0 12px 0 14px;font-size:14px;display:flex}:is([dir=rtl] .bento-select-trigger,.bento-select-trigger:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right;flex-direction:row-reverse;padding:0 14px 0 12px}.bento-select-trigger:focus-visible{outline-offset:2px;outline:3px solid #2563eb52}.bento-select-positioner{z-index:40}.bento-select-popup{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);min-width:220px;box-shadow:var(--shadow);padding:6px}.bento-select-item{border-radius:var(--radius-sm);min-height:36px;color:var(--text-strong);cursor:pointer;grid-template-columns:22px 1fr;align-items:center;padding:0 10px;font-size:14px;display:grid}:is([dir=rtl] .bento-select-item,.bento-select-item:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right;grid-template-columns:1fr 22px}:is([dir=rtl] .bento-select-item [data-base-ui-select-item-indicator],.bento-select-item:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) [data-base-ui-select-item-indicator]){grid-area:1/2}.bento-select-item[data-highlighted]{background:var(--surface-muted)}.bento-select-item[data-selected]{color:var(--teal);font-weight:760}.bento-select-item[data-selected][data-highlighted]{background:color-mix(in srgb, var(--teal), transparent 86%)}[data-theme=dark] .bento-select-popup{background:#111827;box-shadow:0 18px 48px #00000061,0 0 0 1px #ffffff05}[data-theme=dark] .bento-select-item[data-selected][data-highlighted]{background:color-mix(in srgb, var(--teal), transparent 84%)}.bento-separator{background:var(--line);flex-shrink:0}.bento-separator[data-orientation=horizontal]{width:100%;height:1px}.bento-separator[data-orientation=vertical]{width:1px;height:28px}.bento-slider{width:min(100%,420px);padding:12px 0}.bento-slider-control{align-items:center;height:24px;display:flex}.bento-slider-track{background:var(--track-bg);border-radius:999px;width:100%;height:8px;position:relative}.bento-slider-indicator{background:var(--accent);border-radius:999px;height:100%;position:absolute}.bento-slider-thumb{background:var(--accent-strong);border:3px solid #fff;border-radius:999px;width:22px;height:22px;box-shadow:0 5px 14px #ea580c47}.bento-slider-thumb:focus-visible{outline-offset:2px;outline:3px solid #2563eb52}.bento-switch{border:1px solid var(--line-strong);background:var(--track-bg);cursor:pointer;border-radius:999px;align-items:center;width:44px;height:26px;padding:3px;transition:border-color .16s,background .16s;display:inline-flex;position:relative}.bento-switch[data-checked]{border-color:var(--surface-strong);background:var(--surface-strong)}.bento-switch:focus-visible{outline-offset:2px;outline:3px solid #2563eb52}.bento-switch-thumb{background:var(--surface);border-radius:999px;width:18px;height:18px;transition:transform .18s;box-shadow:0 2px 8px #0f172a3d}.bento-switch[data-checked] .bento-switch-thumb{transform:translate(18px)}.bento-switch-label{color:var(--text-strong);cursor:pointer;align-items:center;gap:9px;font-weight:680;display:inline-flex}.bento-tabs{flex-direction:column;gap:18px;min-height:100%;display:flex}.bento-tabs-list{border:1px solid var(--line);border-radius:var(--radius);background:var(--group-bg);gap:4px;padding:4px;display:grid;position:relative}.bento-tabs-list.cols-2{grid-template-columns:1fr 1fr}.bento-tabs-list.cols-3{grid-template-columns:1fr 1fr 1fr}.bento-tabs-tab{z-index:1;border-radius:var(--radius-sm);min-height:36px;color:var(--text-muted);cursor:pointer;background:0 0;border:0;font-weight:760}.bento-tabs-tab[data-selected]{color:var(--text-strong)}.bento-tabs-indicator{border-radius:var(--radius-sm);background:var(--surface);transition:left .18s,width .18s;position:absolute;top:4px;bottom:4px;box-shadow:0 5px 18px #0f172a1a}.bento-tabs-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--group-bg);flex:1;padding:18px}.bento-tabs-panel-title{color:var(--text-strong);margin-bottom:10px;font-size:20px;font-weight:750;display:block}.bento-tabs-panel p{color:var(--text-muted);margin:0}.bento-toggle-group{border:1px solid var(--line);border-radius:var(--radius);background:var(--group-bg);gap:4px;padding:4px;display:inline-flex}.bento-toggle{border-radius:var(--radius-sm);min-height:36px;color:var(--text-muted);cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;padding:0 12px;font-size:14px;font-weight:680;transition:color .14s,background .14s;display:inline-flex}.bento-toggle[data-pressed]{color:var(--text-strong);background:var(--surface);box-shadow:0 5px 18px #0f172a1a}.bento-toggle:focus-visible{outline-offset:2px;outline:3px solid #2563eb52}.bento-toast-provider{z-index:100;gap:12px;width:min(420px,100vw - 32px);display:grid;position:fixed;bottom:24px;right:24px}.bento-toast{border:1px solid var(--line-strong);border-radius:var(--radius);width:100%;color:var(--text-strong);background:color-mix(in srgb, var(--surface), var(--bg) 4%);isolation:isolate;align-items:flex-start;gap:14px;padding:16px 44px 16px 16px;display:flex;position:relative;box-shadow:0 18px 42px #0f172a29,0 1px 2px #0f172a14}.bento-toast-title{color:var(--text-strong);font-size:14px;font-weight:780;line-height:1.35}.bento-toast-description{color:var(--text-muted);margin-top:6px;font-size:13px;line-height:1.5}.bento-toast-close{border-radius:var(--radius-sm);width:26px;height:26px;color:var(--text-muted);cursor:pointer;opacity:.72;background:0 0;border:0;flex-shrink:0;place-items:center;transition:color .14s,background .14s,opacity .14s;display:grid;position:absolute;top:10px;right:10px}.bento-toast-close:hover{color:var(--text-strong);background:var(--surface-muted);opacity:1}[data-theme=dark] .bento-toast{border-color:var(--line-strong);background:#111827;box-shadow:0 18px 48px #00000061,0 0 0 1px #ffffff05}@media (width<=640px){.bento-toast-provider{bottom:16px;right:16px}}.bento-toolbar{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);flex-wrap:wrap;align-items:center;gap:10px;padding:8px;display:flex}.bento-toolbar-group{align-items:center;gap:4px;display:flex}.bento-toolbar-button{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text);cursor:pointer;background:0 0;border:0;place-items:center;display:inline-grid}.bento-toolbar-button:hover,.bento-toolbar-button[data-pressed]{color:var(--text-strong);background:var(--surface-muted)}.bento-toolbar-separator{background:var(--line);width:1px;height:22px;margin:0 4px}.bento-toolbar-search{border:1px solid var(--line);border-radius:var(--radius-sm);height:32px;color:var(--text-muted);align-items:center;gap:7px;padding:0 9px;display:flex}.bento-toolbar-input{width:150px;color:var(--text-strong);background:0 0;border:0;outline:0}.bento-tooltip-popup{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);color:var(--text-strong);padding:8px 10px;font-size:13px;font-weight:720}.bento-tooltip-arrow{fill:#fff}
|
|
2
|
+
/*$vite$:1*/
|