tri-ui-library 1.0.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 +125 -0
- package/dist/styles.css +1 -0
- package/dist/tri-ui-library.js +868 -0
- package/dist/tri-ui-library.js.map +1 -0
- package/dist/tri-ui-library.umd.cjs +2 -0
- package/dist/tri-ui-library.umd.cjs.map +1 -0
- package/package.json +66 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Tri UI Library contributors
|
|
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,125 @@
|
|
|
1
|
+
# Tri UI Library
|
|
2
|
+
|
|
3
|
+
A reusable React UI component library built with **React**, **JavaScript**, and **plain CSS** (no Tailwind, Material UI, Bootstrap, or other UI frameworks).
|
|
4
|
+
|
|
5
|
+
## Setup (contributors)
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install
|
|
9
|
+
npm run dev # Development with demo app
|
|
10
|
+
npm run build # Build library (runs automatically before `npm publish`)
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Publishing to npm (public package)
|
|
14
|
+
|
|
15
|
+
This library is set up like other React UI packages: consumers install it from the **public npm registry**.
|
|
16
|
+
|
|
17
|
+
### One-time setup
|
|
18
|
+
|
|
19
|
+
1. **Create an npm account** at [https://www.npmjs.com/signup](https://www.npmjs.com/signup).
|
|
20
|
+
2. **Log in locally:** `npm login` (or `npm login --auth-type=web` if you use 2FA).
|
|
21
|
+
3. **Choose the package name** in `package.json` → `"name"`. The name `tri-ui-library` must be **available** on npm. Check: `npm view tri-ui-library` (404 = free). If it is taken, use a [scoped name](https://docs.npmjs.com/about-scopes-and-packages) such as `@your-org/tri-ui-library` and set `"publishConfig": { "access": "public" }` (already set for public scoped packages).
|
|
22
|
+
4. **Replace placeholders** in `package.json`: `repository`, `bugs`, and `homepage` URLs (search for `YOUR_USERNAME`).
|
|
23
|
+
|
|
24
|
+
### Publish a version
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm run build # optional; prepublishOnly runs this automatically
|
|
28
|
+
npm publish # first publish: public unscoped package goes live
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
- Bump **`version`** in `package.json` (semver) for each release, or use `npm version patch|minor|major` before `npm publish`.
|
|
32
|
+
- **`files`**: only the `dist/` folder is published (plus `README.md` and `LICENSE` automatically).
|
|
33
|
+
- **Peer deps:** apps must install `react` and `react-dom` themselves (same as MUI/Chakra).
|
|
34
|
+
|
|
35
|
+
### After publish — anyone can install
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install tri-ui-library
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
(Use your real package name if you changed it.)
|
|
42
|
+
|
|
43
|
+
## Use in another project
|
|
44
|
+
|
|
45
|
+
From npm (or test locally with `npm link` / `"tri-ui-library": "file:../path/to/tri-ui-library"`):
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npm install tri-ui-library
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
In your app:
|
|
52
|
+
|
|
53
|
+
```jsx
|
|
54
|
+
import { Button, Card, Alert } from "tri-ui-library";
|
|
55
|
+
import "tri-ui-library/styles.css";
|
|
56
|
+
|
|
57
|
+
function App() {
|
|
58
|
+
return (
|
|
59
|
+
<Card>
|
|
60
|
+
<Alert type="success">Saved</Alert>
|
|
61
|
+
<Button variant="primary">Submit</Button>
|
|
62
|
+
</Card>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Design System
|
|
68
|
+
|
|
69
|
+
All components use CSS variables from `variables.css`:
|
|
70
|
+
|
|
71
|
+
- **Colors:** `--ui-primary`, `--ui-secondary`, `--ui-danger`, etc.
|
|
72
|
+
- **Spacing:** `--ui-spacing-sm`, `--ui-spacing-md`, `--ui-spacing-lg`
|
|
73
|
+
- **Typography:** `--ui-font-size-*`, `--ui-font-weight-*`
|
|
74
|
+
- **Borders:** `--ui-border-radius`, `--ui-border`
|
|
75
|
+
- **Shadows:** `--ui-shadow`, `--ui-shadow-md`
|
|
76
|
+
- **Transitions:** `--ui-transition`, `--ui-transition-fast`
|
|
77
|
+
|
|
78
|
+
Override these in your app to theme the library.
|
|
79
|
+
|
|
80
|
+
## Components
|
|
81
|
+
|
|
82
|
+
| Component | Description |
|
|
83
|
+
|----------------|--------------------------------|
|
|
84
|
+
| Accordion | Expandable sections |
|
|
85
|
+
| Alert | Success / warning / error msg |
|
|
86
|
+
| AlertDialog | Modal confirmation |
|
|
87
|
+
| AspectRatio | Fixed aspect ratio container |
|
|
88
|
+
| Avatar | User avatar with fallback |
|
|
89
|
+
| Badge | Label / tag |
|
|
90
|
+
| Breadcrumb | Navigation path |
|
|
91
|
+
| Button | Primary, secondary, danger |
|
|
92
|
+
| ButtonGroup | Grouped buttons |
|
|
93
|
+
| Calendar | Month calendar |
|
|
94
|
+
| Card | Content container |
|
|
95
|
+
| Carousel | Slide content |
|
|
96
|
+
| Chart | Simple bar chart |
|
|
97
|
+
| Checkbox | Checkbox with label |
|
|
98
|
+
| Collapsible | Toggle content |
|
|
99
|
+
| Combobox | Searchable select |
|
|
100
|
+
| Command | Command palette shell |
|
|
101
|
+
| ContextMenu | Right-click menu |
|
|
102
|
+
| DataTable | Table from columns + data |
|
|
103
|
+
| DatePicker | Date input + calendar |
|
|
104
|
+
| Dialog | Modal dialog |
|
|
105
|
+
| Drawer | Side panel |
|
|
106
|
+
| DropdownMenu | Menu from trigger |
|
|
107
|
+
| Empty | Empty state |
|
|
108
|
+
| Field | Label + error wrapper |
|
|
109
|
+
| HoverCard | Hover popover |
|
|
110
|
+
| Input | Text input with label/error |
|
|
111
|
+
| InputGroup | Input with addons |
|
|
112
|
+
| InputOTP | OTP / PIN input |
|
|
113
|
+
|
|
114
|
+
## Accessibility
|
|
115
|
+
|
|
116
|
+
Components include:
|
|
117
|
+
|
|
118
|
+
- `aria-label`, `aria-expanded`, `aria-selected` where appropriate
|
|
119
|
+
- `role` attributes for dialogs, menus, alerts
|
|
120
|
+
- Keyboard support (Escape to close dialogs, arrows in dropdowns)
|
|
121
|
+
- Focus management in modals
|
|
122
|
+
|
|
123
|
+
## License
|
|
124
|
+
|
|
125
|
+
MIT
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{min-height:100vh;line-height:var(--ui-line-height-normal, 1.5);font-family:var(--ui-font-family);font-size:var(--ui-font-size-base);color:var(--ui-foreground);background-color:var(--ui-background)}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer}a{color:var(--ui-primary);text-decoration:none}a:hover{text-decoration:underline}:root{--ui-primary: #2563eb;--ui-primary-hover: #1d4ed8;--ui-primary-active: #1e40af;--ui-primary-foreground: #ffffff;--ui-secondary: #64748b;--ui-secondary-hover: #475569;--ui-secondary-active: #334155;--ui-secondary-foreground: #ffffff;--ui-danger: #dc2626;--ui-danger-hover: #b91c1c;--ui-danger-active: #991b1b;--ui-danger-foreground: #ffffff;--ui-success: #16a34a;--ui-success-bg: #dcfce7;--ui-success-border: #22c55e;--ui-warning: #ca8a04;--ui-warning-bg: #fef9c3;--ui-warning-border: #eab308;--ui-info: #0284c7;--ui-info-bg: #e0f2fe;--ui-info-border: #0ea5e9;--ui-background: #ffffff;--ui-foreground: #0f172a;--ui-muted: #f1f5f9;--ui-muted-foreground: #64748b;--ui-border: #e2e8f0;--ui-border-focus: var(--ui-primary);--ui-spacing-xs: .25rem;--ui-spacing-sm: .5rem;--ui-spacing-md: 1rem;--ui-spacing-lg: 1.5rem;--ui-spacing-xl: 2rem;--ui-spacing-2xl: 3rem;--ui-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--ui-font-size-xs: .75rem;--ui-font-size-sm: .875rem;--ui-font-size-base: 1rem;--ui-font-size-lg: 1.125rem;--ui-font-size-xl: 1.25rem;--ui-font-size-2xl: 1.5rem;--ui-font-weight-normal: 400;--ui-font-weight-medium: 500;--ui-font-weight-semibold: 600;--ui-font-weight-bold: 700;--ui-line-height-tight: 1.25;--ui-line-height-normal: 1.5;--ui-line-height-relaxed: 1.75;--ui-border-radius-sm: .25rem;--ui-border-radius: .375rem;--ui-border-radius-md: .5rem;--ui-border-radius-lg: .75rem;--ui-border-radius-xl: 1rem;--ui-border-radius-full: 9999px;--ui-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--ui-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--ui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ui-transition-fast: .15s ease;--ui-transition: .2s ease;--ui-transition-slow: .3s ease;--ui-shell-navbar-bg: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);--ui-shell-navbar-border: rgba(15, 23, 42, .06);--ui-shell-sidebar-bg: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);--ui-shell-sidebar-border: rgba(15, 23, 42, .08);--ui-shell-canvas: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 50%, #eef2f7 100%);--ui-shell-accent-gradient: linear-gradient(135deg, var(--ui-primary) 0%, #4f46e5 100%)}.ui-focus-ring:focus-visible{outline:2px solid var(--ui-border-focus);outline-offset:2px}.ui-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.ui-accordion{border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);overflow:hidden}.ui-accordion--borders .ui-accordion-item{border-left:3px solid var(--ui-primary)}.ui-accordion--card{border:none;background:transparent}.ui-accordion--card .ui-accordion-item{margin-bottom:var(--ui-spacing-sm);border-radius:var(--ui-border-radius);border:1px solid var(--ui-border);overflow:hidden}.ui-accordion--card .ui-accordion-item:last-child{margin-bottom:0}.ui-accordion--disabled .ui-accordion-trigger{cursor:not-allowed;opacity:.6}.ui-accordion-item{border-bottom:1px solid var(--ui-border)}.ui-accordion-item:last-child{border-bottom:none}.ui-accordion--card .ui-accordion-item{border-bottom:none}.ui-accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--ui-spacing-md);padding:var(--ui-spacing-md) var(--ui-spacing-lg);text-align:left;font-family:var(--ui-font-family);font-size:var(--ui-font-size-base);font-weight:var(--ui-font-weight-medium);background:var(--ui-muted);border:none;cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-accordion-trigger:hover:not(:disabled){background:var(--ui-border)}.ui-accordion-trigger:disabled{cursor:not-allowed}.ui-accordion-trigger-text{flex:1}.ui-accordion-trigger-icon{flex-shrink:0;width:1rem;height:1rem;transition:transform var(--ui-transition-fast)}.ui-accordion-trigger-icon:after{content:"";display:block;width:.5em;height:.5em;margin:.25em 0 0 .25em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}.ui-accordion-trigger[aria-expanded=true] .ui-accordion-trigger-icon{transform:rotate(-180deg)}.ui-accordion-panel{padding:var(--ui-spacing-lg);background:var(--ui-background)}.ui-accordion-panel[hidden]{display:none}.ui-alert{display:flex;align-items:flex-start;gap:var(--ui-spacing-md);padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-radius:var(--ui-border-radius);border:1px solid;font-size:var(--ui-font-size-sm)}.ui-alert-content{flex:1;min-width:0}.ui-alert-title{font-weight:var(--ui-font-weight-semibold);margin-bottom:var(--ui-spacing-xs)}.ui-alert-message{line-height:var(--ui-line-height-normal)}.ui-alert--success{background-color:var(--ui-success-bg);border-color:var(--ui-success-border);color:#166534}.ui-alert--warning{background-color:var(--ui-warning-bg);border-color:var(--ui-warning-border);color:#854d0e}.ui-alert--error{background-color:#fee2e2;border-color:#fca5a5;color:#991b1b}.ui-alert--info{background-color:var(--ui-info-bg);border-color:var(--ui-info-border);color:#075985}.ui-alert-dismiss{flex-shrink:0;padding:var(--ui-spacing-xs);background:none;border:none;font-size:1.25rem;line-height:1;cursor:pointer;opacity:.7;border-radius:var(--ui-border-radius-sm)}.ui-alert-dismiss:hover{opacity:1;background-color:#0000000d}.ui-alert-dismiss:focus-visible{outline:2px solid var(--ui-foreground);outline-offset:2px}.ui-alertdialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:1000}.ui-alertdialog{max-width:24rem;padding:var(--ui-spacing-xl);background:var(--ui-background);border-radius:var(--ui-border-radius-lg);box-shadow:var(--ui-shadow-lg)}.ui-alertdialog-title{margin:0 0 var(--ui-spacing-sm);font-size:var(--ui-font-size-lg)}.ui-alertdialog-desc{margin:0 0 var(--ui-spacing-lg);color:var(--ui-muted-foreground);font-size:var(--ui-font-size-sm)}.ui-alertdialog-actions{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end}.ui-alertdialog-btn{padding:var(--ui-spacing-sm) var(--ui-spacing-md);border-radius:var(--ui-border-radius);font-family:var(--ui-font-family);cursor:pointer;border:1px solid transparent}.ui-alertdialog-btn--primary{background:var(--ui-primary);color:var(--ui-primary-foreground)}.ui-alertdialog-btn--secondary{background:var(--ui-muted);color:var(--ui-foreground);border-color:var(--ui-border)}.ui-aspectratio{width:100%;overflow:hidden}.ui-aspectratio>*{width:100%;height:100%;object-fit:cover}.ui-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ui-border-radius-full);background:var(--ui-muted);color:var(--ui-muted-foreground);font-weight:var(--ui-font-weight-medium);overflow:hidden}.ui-avatar--sm{width:2rem;height:2rem;font-size:var(--ui-font-size-xs)}.ui-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--ui-font-size-sm)}.ui-avatar--lg{width:3rem;height:3rem;font-size:var(--ui-font-size-base)}.ui-avatar-img{width:100%;height:100%;object-fit:cover}.ui-avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ui-badge{display:inline-flex;align-items:center;padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-size:var(--ui-font-size-xs);font-weight:var(--ui-font-weight-medium);border-radius:var(--ui-border-radius-full)}.ui-badge--default{background:var(--ui-muted);color:var(--ui-muted-foreground)}.ui-badge--primary{background:var(--ui-primary);color:var(--ui-primary-foreground)}.ui-badge--danger{background:var(--ui-danger);color:var(--ui-danger-foreground)}.ui-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);list-style:none;margin:0;padding:0;font-size:var(--ui-font-size-sm)}.ui-breadcrumb-item{display:flex;align-items:center;gap:var(--ui-spacing-xs)}.ui-breadcrumb-link{color:var(--ui-primary);text-decoration:none}.ui-breadcrumb-link:hover{text-decoration:underline}.ui-breadcrumb-current,.ui-breadcrumb-sep{color:var(--ui-muted-foreground)}.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-medium);border-radius:var(--ui-border-radius);border:1px solid transparent;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast),border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);cursor:pointer}.ui-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1em;height:1em;line-height:1}.ui-btn-icon svg{width:100%;height:100%}.ui-btn-icon--left{order:-1}.ui-btn-icon--right{order:1}.ui-btn-label{display:inline-block}.ui-btn--icon-only{min-width:2.25rem}.ui-btn--icon-only.ui-btn--sm{min-width:1.75rem}.ui-btn--icon-only.ui-btn--lg{min-width:2.75rem}.ui-btn:focus-visible{outline:2px solid var(--ui-border-focus);outline-offset:2px}.ui-btn--sm{padding:var(--ui-spacing-xs) var(--ui-spacing-md);font-size:var(--ui-font-size-sm)}.ui-btn--md{padding:var(--ui-spacing-sm) var(--ui-spacing-lg);font-size:var(--ui-font-size-base)}.ui-btn--lg{padding:var(--ui-spacing-md) var(--ui-spacing-xl);font-size:var(--ui-font-size-lg)}.ui-btn--primary{background-color:var(--ui-primary);color:var(--ui-primary-foreground);border-color:var(--ui-primary)}.ui-btn--primary:hover:not(.ui-btn--disabled){background-color:var(--ui-primary-hover);border-color:var(--ui-primary-hover)}.ui-btn--primary:active:not(.ui-btn--disabled){background-color:var(--ui-primary-active)}.ui-btn--secondary{background-color:var(--ui-secondary);color:var(--ui-secondary-foreground);border-color:var(--ui-secondary)}.ui-btn--secondary:hover:not(.ui-btn--disabled){background-color:var(--ui-secondary-hover);border-color:var(--ui-secondary-hover)}.ui-btn--secondary:active:not(.ui-btn--disabled){background-color:var(--ui-secondary-active)}.ui-btn--danger{background-color:var(--ui-danger);color:var(--ui-danger-foreground);border-color:var(--ui-danger)}.ui-btn--danger:hover:not(.ui-btn--disabled){background-color:var(--ui-danger-hover);border-color:var(--ui-danger-hover)}.ui-btn--danger:active:not(.ui-btn--disabled){background-color:var(--ui-danger-active)}.ui-btn--ghost{background-color:transparent;color:var(--ui-foreground);border-color:var(--ui-border)}.ui-btn--ghost:hover:not(.ui-btn--disabled){background-color:var(--ui-muted)}.ui-btn--ghost:active:not(.ui-btn--disabled){background-color:var(--ui-border)}.ui-btn--disabled{opacity:.6;cursor:not-allowed}.ui-buttongroup{display:inline-flex;border-radius:var(--ui-border-radius);overflow:hidden}.ui-buttongroup .ui-btn{border-radius:0}.ui-buttongroup .ui-btn:first-child{border-top-left-radius:var(--ui-border-radius);border-bottom-left-radius:var(--ui-border-radius)}.ui-buttongroup .ui-btn:last-child{border-top-right-radius:var(--ui-border-radius);border-bottom-right-radius:var(--ui-border-radius)}.ui-buttongroup .ui-btn+.ui-btn{margin-left:-1px}.ui-calendar{padding:var(--ui-spacing-md);border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);background:var(--ui-background)}.ui-calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ui-spacing-md)}.ui-calendar-header button{padding:var(--ui-spacing-xs) var(--ui-spacing-sm);border:1px solid var(--ui-border);border-radius:var(--ui-border-radius-sm);background:var(--ui-muted);cursor:pointer}.ui-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--ui-spacing-xs)}.ui-calendar-weekday{font-size:var(--ui-font-size-xs);font-weight:var(--ui-font-weight-semibold);color:var(--ui-muted-foreground);text-align:center}.ui-calendar-day{padding:var(--ui-spacing-sm);border:none;border-radius:var(--ui-border-radius-sm);background:transparent;cursor:pointer;font-size:var(--ui-font-size-sm)}.ui-calendar-day:hover:not(.ui-calendar-day--empty){background:var(--ui-muted)}.ui-calendar-day--empty{cursor:default}.ui-card{font-family:var(--ui-font-family);border-radius:var(--ui-border-radius-lg);overflow:hidden;background-color:var(--ui-background)}.ui-card--outlined{border:1px solid var(--ui-border);box-shadow:var(--ui-shadow-sm)}.ui-card--elevated{border:1px solid transparent;box-shadow:var(--ui-shadow-md)}.ui-card-header{padding:var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border);background-color:var(--ui-muted)}.ui-card-title{margin:0;font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);color:var(--ui-foreground)}.ui-card-body{padding:var(--ui-spacing-lg)}.ui-card-footer{padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border);background-color:var(--ui-muted)}.ui-carousel{overflow:hidden;position:relative}.ui-carousel-track{display:flex;transition:transform var(--ui-transition)}.ui-carousel-slide{flex:0 0 100%;min-width:0}.ui-carousel-dots{display:flex;justify-content:center;gap:var(--ui-spacing-sm);margin-top:var(--ui-spacing-md)}.ui-carousel-dot{width:.5rem;height:.5rem;border-radius:var(--ui-border-radius-full);border:none;background:var(--ui-border);cursor:pointer}.ui-carousel-dot--active{background:var(--ui-primary)}.ui-chart{padding:var(--ui-spacing-lg);border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);background:var(--ui-background)}.ui-chart-bars{display:flex;align-items:flex-end;gap:var(--ui-spacing-md);height:8rem}.ui-chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--ui-spacing-xs)}.ui-chart-bar{width:100%;max-width:2rem;min-height:2px;background:var(--ui-primary);border-radius:var(--ui-border-radius-sm);transition:height var(--ui-transition)}.ui-chart-label{font-size:var(--ui-font-size-xs);color:var(--ui-muted-foreground);text-align:center}.ui-checkbox-wrapper{display:inline-flex;align-items:center}.ui-checkbox-wrapper--disabled{opacity:.6;cursor:not-allowed}.ui-checkbox-label{display:inline-flex;align-items:center;gap:var(--ui-spacing-sm);cursor:pointer;font-size:var(--ui-font-size-sm);color:var(--ui-foreground)}.ui-checkbox-wrapper--disabled .ui-checkbox-label{cursor:not-allowed}.ui-checkbox{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ui-checkbox-box{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;flex-shrink:0;border:2px solid var(--ui-border);border-radius:var(--ui-border-radius-sm);background-color:var(--ui-background);transition:border-color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-checkbox:focus-visible+.ui-checkbox-box{outline:2px solid var(--ui-border-focus);outline-offset:2px}.ui-checkbox:checked+.ui-checkbox-box{background-color:var(--ui-primary);border-color:var(--ui-primary)}.ui-checkbox:checked+.ui-checkbox-box:after{content:"";width:.35em;height:.6em;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);margin-bottom:2px}.ui-checkbox:indeterminate+.ui-checkbox-box{background-color:var(--ui-primary);border-color:var(--ui-primary)}.ui-checkbox:indeterminate+.ui-checkbox-box:after{content:"";width:.6em;height:2px;background-color:#fff}.ui-checkbox:disabled+.ui-checkbox-box{opacity:.6;cursor:not-allowed}.ui-checkbox-text{-webkit-user-select:none;user-select:none}.ui-collapsible{border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);overflow:hidden}.ui-collapsible-trigger{width:100%;padding:var(--ui-spacing-md) var(--ui-spacing-lg);text-align:left;font-family:var(--ui-font-family);background:var(--ui-muted);border:none;cursor:pointer}.ui-collapsible-content{padding:var(--ui-spacing-lg);border-top:1px solid var(--ui-border);background:var(--ui-background)}.ui-combobox{position:relative;width:100%}.ui-combobox-input{width:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);font-family:var(--ui-font-family);font-size:var(--ui-font-size-base)}.ui-combobox-list{position:absolute;top:100%;left:0;right:0;margin:var(--ui-spacing-xs) 0 0;padding:var(--ui-spacing-xs);list-style:none;background:var(--ui-background);border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);box-shadow:var(--ui-shadow-md);max-height:12rem;overflow-y:auto;z-index:50}.ui-combobox-option{padding:var(--ui-spacing-sm) var(--ui-spacing-md);cursor:pointer;border-radius:var(--ui-border-radius-sm)}.ui-combobox-option:hover,.ui-combobox-option[aria-selected=true]{background:var(--ui-muted)}.ui-command{border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);overflow:hidden;background:var(--ui-background)}.ui-command-input{width:100%;padding:var(--ui-spacing-md);border:none;border-bottom:1px solid var(--ui-border);font-family:var(--ui-font-family);font-size:var(--ui-font-size-base)}.ui-command-input:focus{outline:none}.ui-command-list{max-height:16rem;overflow-y:auto}.ui-contextmenu-wrapper{position:relative}.ui-contextmenu{position:fixed;z-index:1000;min-width:10rem;padding:var(--ui-spacing-xs);list-style:none;margin:0;background:var(--ui-background);border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);box-shadow:var(--ui-shadow-lg)}.ui-contextmenu-item{display:block;width:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);text-align:left;font-family:var(--ui-font-family);font-size:var(--ui-font-size-sm);background:none;border:none;border-radius:var(--ui-border-radius-sm);cursor:pointer}.ui-contextmenu-item:hover{background:var(--ui-muted)}.ui-dashboard{display:flex;flex-direction:column;width:100%;background-color:var(--ui-background)}.ui-dashboard--full-height{min-height:100vh}.ui-dashboard-navbar{flex-shrink:0;width:100%;z-index:2}.ui-dashboard-body{display:flex;flex:1;min-height:0;min-width:0}.ui-dashboard-sidebar-wrap{flex-shrink:0;display:flex;min-height:0;max-height:100%;z-index:1}.ui-dashboard--full-height .ui-dashboard-sidebar-wrap{align-self:stretch}.ui-dashboard-main{flex:1;min-width:0;min-height:0;overflow:auto;background:var(--ui-shell-canvas);position:relative}.ui-dashboard-main:before{content:"";position:absolute;inset:0 0 auto 0;height:120px;background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,transparent 100%);pointer-events:none}.ui-dashboard-main--contained .ui-dashboard-main-inner{max-width:72rem;margin-left:auto;margin-right:auto}.ui-dashboard-main-inner{position:relative;z-index:0;padding:var(--ui-spacing-xl) var(--ui-spacing-2xl)}@media (max-width: 767px){.ui-dashboard-main-inner{padding:var(--ui-spacing-lg) var(--ui-spacing-md)}}@media (max-width: 767px){.ui-dashboard-body{flex-direction:column}.ui-dashboard-sidebar-wrap{width:100%;max-height:none}.ui-dashboard-sidebar-wrap .ui-sidebar{width:100%!important;min-width:0!important;border-right:none;border-bottom:1px solid var(--ui-shell-sidebar-border);box-shadow:0 8px 24px -12px #0f172a1a}.ui-dashboard-sidebar-wrap .ui-sidebar--collapsed{width:100%!important}.ui-dashboard-sidebar-wrap .ui-sidebar--collapsed .ui-navlink-text{position:static;width:auto;height:auto;clip:auto;margin:0;overflow:visible;white-space:normal}.ui-dashboard-sidebar-wrap .ui-sidebar--collapsed .ui-navlink{justify-content:flex-start;padding:var(--ui-spacing-sm) var(--ui-spacing-md)}}.ui-datatable{width:100%;overflow-x:auto;border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);font-size:var(--ui-font-size-sm)}.ui-datatable-table{width:100%;border-collapse:collapse;font-family:var(--ui-font-family)}.ui-datatable-th{padding:var(--ui-spacing-sm) var(--ui-spacing-md);text-align:left;font-weight:var(--ui-font-weight-semibold);color:var(--ui-foreground);background-color:var(--ui-muted);border-bottom:1px solid var(--ui-border)}.ui-datatable-tr{transition:background-color var(--ui-transition-fast)}.ui-datatable-tr:hover{background-color:var(--ui-muted)}.ui-datatable-td{padding:var(--ui-spacing-sm) var(--ui-spacing-md);border-bottom:1px solid var(--ui-border);color:var(--ui-foreground)}.ui-datatable-tr:last-child .ui-datatable-td{border-bottom:none}.ui-datatable-empty,.ui-datatable-empty-cell{padding:var(--ui-spacing-xl);text-align:center;color:var(--ui-muted-foreground)}.ui-datatable-empty{margin:0}.ui-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs);width:100%}.ui-input-label{font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-medium);color:var(--ui-foreground)}.ui-input{width:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:var(--ui-font-family);font-size:var(--ui-font-size-base);color:var(--ui-foreground);background-color:var(--ui-background);border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-input::placeholder{color:var(--ui-muted-foreground)}.ui-input:hover:not(:disabled):not(.ui-input--error){border-color:var(--ui-muted-foreground)}.ui-input:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px #2563eb33}.ui-input--error{border-color:var(--ui-danger)}.ui-input--error:focus{box-shadow:0 0 0 3px #dc262633}.ui-input--disabled{opacity:.6;cursor:not-allowed;background-color:var(--ui-muted)}.ui-input-error{font-size:var(--ui-font-size-sm);color:var(--ui-danger)}.ui-datepicker{position:relative}.ui-datepicker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999}.ui-datepicker-dropdown{position:absolute;top:100%;left:0;margin-top:var(--ui-spacing-xs);z-index:1000}.ui-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-lg);background-color:#00000080;z-index:1000;animation:ui-dialog-overlay-in var(--ui-transition) ease}@keyframes ui-dialog-overlay-in{0%{opacity:0}to{opacity:1}}.ui-dialog{position:relative;width:100%;max-width:28rem;max-height:90vh;overflow:auto;background-color:var(--ui-background);border-radius:var(--ui-border-radius-lg);box-shadow:var(--ui-shadow-lg);animation:ui-dialog-in var(--ui-transition) ease}@keyframes ui-dialog-in{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.ui-dialog-content{padding:var(--ui-spacing-xl)}.ui-dialog-title{margin:0 0 var(--ui-spacing-md);font-size:var(--ui-font-size-xl);font-weight:var(--ui-font-weight-semibold);color:var(--ui-foreground)}.ui-dialog-body{color:var(--ui-foreground);line-height:var(--ui-line-height-normal)}.ui-dialog-footer{margin-top:var(--ui-spacing-lg);padding-top:var(--ui-spacing-md);border-top:1px solid var(--ui-border);display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end}.ui-dialog-close{position:absolute;top:var(--ui-spacing-md);right:var(--ui-spacing-md);width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;padding:0;background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ui-muted-foreground);border-radius:var(--ui-border-radius)}.ui-dialog-close:hover{color:var(--ui-foreground);background-color:var(--ui-muted)}.ui-dialog-close:focus-visible{outline:2px solid var(--ui-border-focus);outline-offset:2px}.ui-drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:1000}.ui-drawer{position:fixed;top:0;bottom:0;width:20rem;max-width:90vw;background:var(--ui-background);box-shadow:var(--ui-shadow-lg);z-index:1001;padding:var(--ui-spacing-xl);overflow:auto}.ui-drawer--left{left:0}.ui-drawer--right{right:0}.ui-drawer-title{margin:0 0 var(--ui-spacing-lg);font-size:var(--ui-font-size-lg)}.ui-drawer-close{position:absolute;top:var(--ui-spacing-md);right:var(--ui-spacing-md);background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ui-muted-foreground)}.ui-dropdown{position:relative;display:inline-block}.ui-dropdown-trigger{cursor:pointer;outline:none}.ui-dropdown-trigger:focus-visible{outline:2px solid var(--ui-border-focus);outline-offset:2px}.ui-dropdown-menu{position:absolute;z-index:100;min-width:10rem;margin:var(--ui-spacing-xs) 0 0;padding:var(--ui-spacing-xs);list-style:none;background-color:var(--ui-background);border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);box-shadow:var(--ui-shadow-md);animation:ui-dropdown-in var(--ui-transition-fast) ease}.ui-dropdown-menu--start{left:0}.ui-dropdown-menu--end{right:0}@keyframes ui-dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ui-dropdown-item{display:block;width:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);text-align:left;font-family:var(--ui-font-family);font-size:var(--ui-font-size-sm);color:var(--ui-foreground);background:none;border:none;border-radius:var(--ui-border-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-dropdown-item:hover:not(:disabled){background-color:var(--ui-muted)}.ui-dropdown-item:focus{outline:none;background-color:var(--ui-muted)}.ui-dropdown-item:disabled{opacity:.5;cursor:not-allowed}.ui-empty{padding:var(--ui-spacing-2xl);text-align:center}.ui-empty-icon{font-size:3rem;color:var(--ui-muted-foreground);margin-bottom:var(--ui-spacing-md)}.ui-empty-title{margin:0 0 var(--ui-spacing-sm);font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);color:var(--ui-foreground)}.ui-empty-desc{margin:0 0 var(--ui-spacing-lg);font-size:var(--ui-font-size-sm);color:var(--ui-muted-foreground)}.ui-empty-actions{display:flex;justify-content:center;gap:var(--ui-spacing-sm)}.ui-field{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-field-label{font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-medium);color:var(--ui-foreground)}.ui-field-hint{font-size:var(--ui-font-size-xs);color:var(--ui-muted-foreground)}.ui-field-error{font-size:var(--ui-font-size-sm);color:var(--ui-danger)}.ui-hovercard{position:relative;display:inline-block}.ui-hovercard-content{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-var(--ui-spacing-sm));padding:var(--ui-spacing-md);background:var(--ui-background);border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);box-shadow:var(--ui-shadow-md);z-index:50;min-width:12rem}.ui-inputgroup{display:flex;width:100%;border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);overflow:hidden}.ui-inputgroup-input{flex:1;min-width:0}.ui-inputgroup-input .ui-input{border:none;border-radius:0}.ui-inputgroup-addon{display:flex;align-items:center;padding:var(--ui-spacing-sm) var(--ui-spacing-md);background:var(--ui-muted);color:var(--ui-muted-foreground);font-size:var(--ui-font-size-sm)}.ui-inputgroup-addon--left{border-right:1px solid var(--ui-border)}.ui-inputgroup-addon--right{border-left:1px solid var(--ui-border)}.ui-inputotp{display:flex;gap:var(--ui-spacing-sm);justify-content:center}.ui-inputotp-digit{width:2.5rem;height:2.5rem;text-align:center;font-size:var(--ui-font-size-lg);font-family:var(--ui-font-family);border:1px solid var(--ui-border);border-radius:var(--ui-border-radius);background:var(--ui-background)}.ui-inputotp-digit:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 2px #2563eb33}.ui-navlink{display:inline-flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:var(--ui-font-family);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-medium);color:var(--ui-muted-foreground);background:none;border:none;border-radius:var(--ui-border-radius);text-decoration:none;cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast);width:100%;text-align:left}.ui-navlink:hover:not(.ui-navlink--disabled){color:var(--ui-foreground);background-color:var(--ui-muted)}.ui-navlink--active{color:var(--ui-primary);background-color:#2563eb14}.ui-navlink--active:hover:not(.ui-navlink--disabled){color:var(--ui-primary);background-color:#2563eb1f}.ui-navlink--disabled{opacity:.5;cursor:not-allowed}.ui-navlink-icon{display:inline-flex;flex-shrink:0;width:1.125em;height:1.125em}.ui-navlink-icon svg{width:100%;height:100%}.ui-navlink-text{flex:1;min-width:0}.ui-navlink:focus-visible{outline:2px solid var(--ui-border-focus);outline-offset:2px}.ui-navbar-nav .ui-navlink,.ui-navbar-mobile-inner .ui-navlink{width:auto;border-radius:var(--ui-border-radius-full);padding:var(--ui-spacing-sm) var(--ui-spacing-lg);font-size:var(--ui-font-size-sm)}.ui-navbar-nav .ui-navlink:hover:not(.ui-navlink--disabled),.ui-navbar-mobile-inner .ui-navlink:hover:not(.ui-navlink--disabled){background-color:var(--ui-muted);color:var(--ui-foreground)}.ui-navbar-nav .ui-navlink--active,.ui-navbar-mobile-inner .ui-navlink--active{color:var(--ui-primary);font-weight:var(--ui-font-weight-semibold);background:linear-gradient(135deg,#2563eb1f,#6366f114);box-shadow:0 0 0 1px #2563eb1f}.ui-navbar-nav .ui-navlink--active:hover:not(.ui-navlink--disabled),.ui-navbar-mobile-inner .ui-navlink--active:hover:not(.ui-navlink--disabled){background:linear-gradient(135deg,#2563eb29,#6366f11a);color:var(--ui-primary)}.ui-navbar-mobile-inner .ui-navlink{width:100%;justify-content:flex-start}.ui-navbar{width:100%;background-color:var(--ui-background);border-bottom:1px solid transparent;transition:box-shadow var(--ui-transition),background-color var(--ui-transition)}.ui-navbar--default{background:var(--ui-shell-navbar-bg);border-bottom-color:var(--ui-shell-navbar-border);box-shadow:0 1px #fffc inset,var(--ui-shadow-sm)}.ui-navbar--bordered{background:var(--ui-background);border-bottom:2px solid var(--ui-border);box-shadow:none}.ui-navbar--transparent{background-color:#ffffff8c;border-bottom-color:var(--ui-shell-navbar-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.ui-navbar--sticky{position:sticky;top:0;z-index:100}.ui-navbar--sticky.ui-navbar--default{background:#ffffffe0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--ui-shell-navbar-border);box-shadow:var(--ui-shadow-md)}.ui-navbar-inner{display:flex;align-items:center;gap:var(--ui-spacing-lg);max-width:100%;padding:var(--ui-spacing-md) var(--ui-spacing-xl)}.ui-navbar--dense .ui-navbar-inner{padding:var(--ui-spacing-sm) var(--ui-spacing-lg)}.ui-navbar-brand{flex-shrink:0;display:flex;align-items:center;gap:var(--ui-spacing-md);font-weight:var(--ui-font-weight-semibold);letter-spacing:-.02em;color:var(--ui-foreground)}.ui-navbar-brand--with-mark:before{content:"";display:block;width:2.25rem;height:2.25rem;flex-shrink:0;border-radius:var(--ui-border-radius-md);background:var(--ui-shell-accent-gradient);box-shadow:0 2px 8px #2563eb59}.ui-navbar-nav{display:none;flex:1;align-items:center;gap:var(--ui-spacing-xs);flex-wrap:wrap}.ui-navbar-nav .ui-navlink{width:auto}.ui-navbar-mobile-inner>.ui-navlink,.ui-navbar-mobile-inner>nav .ui-navlink{width:100%}@media (min-width: 768px){.ui-navbar-nav{display:flex}}.ui-navbar-actions{display:none;flex-shrink:0;align-items:center;gap:var(--ui-spacing-sm)}@media (min-width: 768px){.ui-navbar-actions{display:flex}}.ui-navbar-menu-toggle{margin-left:auto;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;background:var(--ui-background);border:1px solid var(--ui-border);border-radius:var(--ui-border-radius-md);cursor:pointer;box-shadow:var(--ui-shadow-sm);transition:background-color var(--ui-transition-fast),border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-navbar-menu-toggle:hover{background:var(--ui-muted);border-color:var(--ui-muted-foreground);box-shadow:var(--ui-shadow)}.ui-navbar-menu-toggle:active{transform:scale(.97)}@media (min-width: 768px){.ui-navbar-menu-toggle{display:none}}.ui-navbar-menu-toggle:focus-visible{outline:2px solid var(--ui-border-focus);outline-offset:2px}.ui-navbar-menu-icon{display:block;width:1.125rem;height:2px;background:var(--ui-foreground);position:relative;border-radius:1px;transition:background-color var(--ui-transition-fast)}.ui-navbar-menu-icon:before,.ui-navbar-menu-icon:after{content:"";position:absolute;left:0;width:100%;height:2px;background:var(--ui-foreground);border-radius:1px;transition:transform var(--ui-transition-fast)}.ui-navbar-menu-icon:before{top:-6px}.ui-navbar-menu-icon:after{top:6px}.ui-navbar-mobile{border-top:1px solid var(--ui-shell-navbar-border);background:linear-gradient(180deg,#fff,#f8fafc);box-shadow:0 8px 24px -8px #0f172a1f;animation:ui-navbar-mobile-in var(--ui-transition) ease}@keyframes ui-navbar-mobile-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.ui-navbar-mobile[hidden]{display:none}@media (min-width: 768px){.ui-navbar-mobile{display:none!important}}.ui-navbar-mobile-inner{padding:var(--ui-spacing-lg) var(--ui-spacing-xl);display:flex;flex-direction:column;gap:var(--ui-spacing-md)}.ui-navbar-mobile-actions{display:flex;flex-wrap:wrap;gap:var(--ui-spacing-sm);padding-top:var(--ui-spacing-lg);margin-top:var(--ui-spacing-xs);border-top:1px solid var(--ui-border)}.ui-sidebar{display:flex;flex-direction:column;height:100%;min-height:0;background-color:var(--ui-background);border-right:1px solid var(--ui-shell-sidebar-border);box-shadow:4px 0 24px -12px #0f172a14;transition:width var(--ui-transition-slow),min-width var(--ui-transition-slow),box-shadow var(--ui-transition);width:var(--ui-sidebar-expanded, 16rem);min-width:var(--ui-sidebar-expanded, 16rem)}.ui-sidebar--right{border-right:none;border-left:1px solid var(--ui-shell-sidebar-border);box-shadow:-4px 0 24px -12px #0f172a14}.ui-sidebar--width-wide{--ui-sidebar-expanded: 18rem}.ui-sidebar--width-normal{--ui-sidebar-expanded: 16rem}.ui-sidebar--collapsed{width:var(--ui-sidebar-collapsed, 3.75rem);min-width:var(--ui-sidebar-collapsed, 3.75rem);box-shadow:2px 0 16px -8px #0f172a0f}.ui-sidebar--collapsed .ui-navlink-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ui-sidebar--collapsed .ui-navlink{position:relative;justify-content:center;padding:var(--ui-spacing-sm)}.ui-sidebar--collapsed .ui-sidebar-footer{padding-left:var(--ui-spacing-sm);padding-right:var(--ui-spacing-sm);overflow:hidden}.ui-sidebar--default{background:var(--ui-shell-sidebar-bg)}.ui-sidebar--accent{background:var(--ui-shell-accent-gradient);border-color:transparent;box-shadow:4px 0 32px -8px #2563eb73}.ui-sidebar--accent.ui-sidebar--right{box-shadow:-4px 0 32px -8px #2563eb73}.ui-sidebar--accent .ui-navlink{color:#ffffffe0}.ui-sidebar--accent .ui-navlink:hover:not(.ui-navlink--disabled){color:#fff;background-color:#ffffff24}.ui-sidebar--accent .ui-navlink--active{color:#fff;background:#ffffff38;box-shadow:0 2px 12px #0000001f}.ui-sidebar--accent .ui-sidebar-collapse-btn{color:#fff;border-color:#ffffff59;background:#ffffff1f}.ui-sidebar--accent .ui-sidebar-collapse-btn:hover{background:#fff3;border-color:#ffffff80}.ui-sidebar--minimal{background-color:var(--ui-background);box-shadow:inset -1px 0 0 var(--ui-shell-sidebar-border)}.ui-sidebar--minimal.ui-sidebar--right{box-shadow:inset 1px 0 0 var(--ui-shell-sidebar-border)}.ui-sidebar-top{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-shell-navbar-border);min-height:3.25rem}.ui-sidebar-top--collapse-only{justify-content:flex-end}.ui-sidebar--accent .ui-sidebar-top{border-bottom-color:#ffffff2e}.ui-sidebar-header{flex:1;min-width:0;font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-semibold);color:var(--ui-foreground);line-height:var(--ui-line-height-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-sidebar--accent .ui-sidebar-header{color:#fffffff2}.ui-sidebar-collapse-btn{flex-shrink:0;width:2.25rem;height:2.25rem;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--ui-background);border:1px solid var(--ui-border);border-radius:var(--ui-border-radius-md);cursor:pointer;color:var(--ui-muted-foreground);transition:background-color var(--ui-transition-fast),border-color var(--ui-transition-fast),color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);box-shadow:var(--ui-shadow-sm)}.ui-sidebar-collapse-btn:hover{background:var(--ui-muted);color:var(--ui-foreground);border-color:var(--ui-muted-foreground);box-shadow:var(--ui-shadow)}.ui-sidebar-collapse-icon{display:block;width:.5rem;height:.5rem;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:1px;transition:transform var(--ui-transition)}.ui-sidebar--collapsed .ui-sidebar-collapse-icon{transform:rotate(-135deg);margin-left:-1px}.ui-sidebar--collapsed .ui-sidebar-top{justify-content:center;padding-left:var(--ui-spacing-sm);padding-right:var(--ui-spacing-sm)}.ui-sidebar--collapsed .ui-sidebar-header{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ui-sidebar--collapsed .ui-sidebar-top--collapse-only{justify-content:center}.ui-sidebar-collapse-btn:focus-visible{outline:2px solid var(--ui-border-focus);outline-offset:2px}.ui-sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--ui-spacing-md) var(--ui-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ui-border) transparent}.ui-sidebar-nav::-webkit-scrollbar{width:6px}.ui-sidebar-nav::-webkit-scrollbar-thumb{background:var(--ui-border);border-radius:var(--ui-border-radius-full)}.ui-sidebar-nav::-webkit-scrollbar-thumb:hover{background:var(--ui-muted-foreground)}.ui-sidebar-list{list-style:none;margin:0;padding:0}.ui-sidebar-item{margin-bottom:var(--ui-spacing-xs)}.ui-sidebar-item:last-child{margin-bottom:0}.ui-sidebar .ui-navlink{border-radius:var(--ui-border-radius-md);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-size-sm)}.ui-sidebar--default .ui-navlink--active{color:var(--ui-primary);font-weight:var(--ui-font-weight-semibold);background:var(--ui-background);box-shadow:var(--ui-shadow-sm),0 0 0 1px #2563eb14}.ui-sidebar--default .ui-navlink--active:hover:not(.ui-navlink--disabled){background:var(--ui-background);box-shadow:var(--ui-shadow),0 0 0 1px #2563eb1f}.ui-sidebar--minimal .ui-navlink--active{color:var(--ui-primary);font-weight:var(--ui-font-weight-semibold);background:#2563eb14;box-shadow:none}.ui-sidebar-footer{flex-shrink:0;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-shell-navbar-border);background:#ffffff80}.ui-sidebar--default .ui-sidebar-footer{background:#ffffffa6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.ui-sidebar--accent .ui-sidebar-footer{border-top-color:#fff3;background:#00000014}.ui-sidebar--minimal .ui-sidebar-footer{background:var(--ui-muted)}
|