npm - base-themes - Versions diffs - 0.1.0 - Mend

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.

Files changed (54) hide show

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 Viewed

@@ -0,0 +1,174 @@
+# base-themes
+Themeable React components built on [Base UI](https://base-ui.com/), with ready-to-use Bento, shadcn, and neo brutalism visual styles.
+`base-themes` gives you typed component wrappers, shared CSS tokens, shadcn/ui-style component docs, installable registry metadata, and block examples.
+## Preview
+### Bento
+![Bento theme preview](./public/previews/base-themes-bento.png)
+### shadcn
+![shadcn theme preview](./public/previews/base-themes-shadcn.png)
+### Neo Brutalism
+![Neo brutalism theme preview](./public/previews/base-themes-neo-brutalism.png)
+## Install
+```bash
+npm install base-themes @base-ui/react react react-dom
+```
+Import the component CSS once:
+```tsx
+import 'base-themes/styles.css'
+```
+Use components:
+```tsx
+import { Button, Select } from 'base-themes'
+export function Example() {
+  return (
+    <div data-style="shadcn" data-theme="light">
+      <Button>Save changes</Button>
+      <Select
+        id="density"
+        label="Density"
+        defaultValue="comfortable"
+        items={{ compact: 'Compact', comfortable: 'Comfortable', spacious: 'Spacious' }}
+      />
+    </div>
+  )
+}
+```
+## Themes
+Set `data-style` for the visual style:
+```html
+<html data-style="bento" data-theme="light">
+```
+Available styles:
+- `bento`: the default Bento style with warm accents and teal controls.
+- `shadcn`: neutral/zinc product UI styling modeled after shadcn/ui.
+- `neo-brutalism`: high-contrast chunky borders, hard shadows, and bold accent colors.
+Set `data-theme` for color mode:
+- `light`
+- `dark`
+You can also use the included hook in React apps:
+```tsx
+import { useTheme } from 'base-themes'
+function ThemeToggle() {
+  const { style, setStyle, resolved, setTheme } = useTheme()
+  return (
+    <button onClick={() => setStyle(style === 'bento' ? 'shadcn' : 'bento')}>
+      {style} / {resolved}
+    </button>
+  )
+}
+```
+## Components
+Coverage includes Base UI public component and provider primitives:
+`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`.
+## Registry
+The package includes a shadcn/ui-style registry:
+```ts
+import registry from 'base-themes/registry.json'
+```
+The source file is [registry/registry.json](./registry/registry.json). It lists components, required files, blocks, pages, dependencies, and theme variants.
+Validate it locally:
+```bash
+npm run registry:check
+```
+## Blocks
+The docs app includes block examples at `/blocks`:
+- Dashboard Shell
+- Settings Form
+Blocks are also listed in `registry/registry.json` so agents and scripts can discover their component dependencies.
+## Development
+```bash
+npm install
+npm run dev
+```
+Open:
+```text
+http://localhost:5175/components/button
+http://localhost:5175/blocks
+http://localhost:5175/themes
+http://localhost:5175/docs/installation
+```
+Verify:
+```bash
+npm run registry:check
+npm run lint
+npm run build
+```
+Build outputs:
+- Docs app: `dist/index.html`
+- Package JS: `dist/base-themes.js`
+- Package CSS: `dist/base-themes.css`
+- Types: `dist/types/lib.d.ts`
+## Publishing
+This repo includes GitHub Actions workflows:
+- `.github/workflows/ci.yml`: runs registry validation, lint, and build on PRs and pushes to `main`.
+- `.github/workflows/publish.yml`: publishes to npm on a GitHub release or manual dispatch.
+To publish from GitHub:
+1. Add an npm automation token as the `NPM_TOKEN` repository secret.
+2. Create a GitHub release for the package version.
+3. The publish workflow runs `npm publish --access public --provenance`.
+Manual local dry run:
+```bash
+npm pack --dry-run
+```
+## Agent Skill
+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.
+## License
+MIT

package/dist/base-themes.css ADDED Viewed

	@@ -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/