Showing preview only (464K chars total). Download the full file or copy to clipboard to get everything.
Repository: zwgnr/BaseLayer
Branch: main
Commit: 3e7e74ea8517
Files: 217
Total size: 411.3 KB
Directory structure:
gitextract_31woigsj/
├── .cursorrules
├── .github/
│ └── workflows/
│ └── sync-components.yml
├── .gitignore
├── .prototools
├── LICENSE.md
├── README.md
├── biome.json
├── package.json
├── packages/
│ ├── components/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── registry.json
│ │ ├── scripts/
│ │ │ └── gen-registry-json.ts
│ │ ├── src/
│ │ │ ├── core/
│ │ │ │ ├── accordion/
│ │ │ │ │ ├── accordion.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── badge/
│ │ │ │ │ ├── badge.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── breadcrumbs/
│ │ │ │ │ ├── breadcrumbs.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── button/
│ │ │ │ │ ├── button.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── calendar/
│ │ │ │ │ ├── calendar.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── card/
│ │ │ │ │ ├── card.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── checkbox/
│ │ │ │ │ ├── checkbox.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── combobox/
│ │ │ │ │ ├── combobox.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── command/
│ │ │ │ │ ├── command.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── date-field/
│ │ │ │ │ ├── date-field.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── date-picker/
│ │ │ │ │ ├── date-picker.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── index.ts
│ │ │ │ ├── input/
│ │ │ │ │ ├── input.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── menu/
│ │ │ │ │ ├── menu.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── meter/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── meter.tsx
│ │ │ │ ├── modal/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── modal.tsx
│ │ │ │ ├── popover/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── popover.tsx
│ │ │ │ ├── radio-group/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── radio-group.tsx
│ │ │ │ ├── select/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── select.tsx
│ │ │ │ ├── slider/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── slider.tsx
│ │ │ │ ├── switch/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── switch.tsx
│ │ │ │ ├── table/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── table.tsx
│ │ │ │ ├── tabs/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── tabs.tsx
│ │ │ │ ├── tag-group/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── tag-group.tsx
│ │ │ │ ├── time-field/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── time-field.tsx
│ │ │ │ ├── toggle/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── toggle.tsx
│ │ │ │ └── tooltip/
│ │ │ │ ├── meta.json
│ │ │ │ └── tooltip.tsx
│ │ │ ├── examples/
│ │ │ │ ├── accordion-base.tsx
│ │ │ │ ├── accordion-group.tsx
│ │ │ │ ├── badge-base.tsx
│ │ │ │ ├── badge-variants.tsx
│ │ │ │ ├── breadcrumbs-base.tsx
│ │ │ │ ├── breadcrumbs-seperators.tsx
│ │ │ │ ├── button-base.tsx
│ │ │ │ ├── button-helper-icons.tsx
│ │ │ │ ├── button-sizes.tsx
│ │ │ │ ├── button-variants.tsx
│ │ │ │ ├── calendar-base.tsx
│ │ │ │ ├── card-base.tsx
│ │ │ │ ├── card-variants.tsx
│ │ │ │ ├── checkbox-base.tsx
│ │ │ │ ├── checkbox-group.tsx
│ │ │ │ ├── combobox-base.tsx
│ │ │ │ ├── combobox-disabled-option.tsx
│ │ │ │ ├── combobox-menu-trigger.tsx
│ │ │ │ ├── command-base.tsx
│ │ │ │ ├── command-custom-trigger.tsx
│ │ │ │ ├── date-field-base.tsx
│ │ │ │ ├── date-picker-base.tsx
│ │ │ │ ├── date-range-picker-base.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── input-base.tsx
│ │ │ │ ├── input-disabled.tsx
│ │ │ │ ├── input-label.tsx
│ │ │ │ ├── menu-base.tsx
│ │ │ │ ├── meter-base.tsx
│ │ │ │ ├── modal-base.tsx
│ │ │ │ ├── modal-dismissable.tsx
│ │ │ │ ├── popover-base.tsx
│ │ │ │ ├── radio-group-base.tsx
│ │ │ │ ├── range-calendar-base.tsx
│ │ │ │ ├── select-base.tsx
│ │ │ │ ├── select-popover-classname.tsx
│ │ │ │ ├── select-searchable.tsx
│ │ │ │ ├── slider-base.tsx
│ │ │ │ ├── switch-base.tsx
│ │ │ │ ├── table-base.tsx
│ │ │ │ ├── tabs-base.tsx
│ │ │ │ ├── tag-group-base.tsx
│ │ │ │ ├── time-field-base.tsx
│ │ │ │ ├── toggle-base.tsx
│ │ │ │ ├── toggle-group-base.tsx
│ │ │ │ └── tooltip-base.tsx
│ │ │ ├── index.ts
│ │ │ └── tailwind.css
│ │ └── tsconfig.json
│ └── registry/
│ ├── CHANGELOG.md
│ ├── package.json
│ ├── src/
│ │ ├── index.ts
│ │ └── schema.ts
│ └── tsconfig.json
├── pnpm-workspace.yaml
├── turbo.json
└── web/
├── .gitignore
├── CHANGELOG.md
├── README.md
├── app/
│ ├── api/
│ │ ├── examples/
│ │ │ └── [name]/
│ │ │ └── route.ts
│ │ └── search/
│ │ └── route.ts
│ ├── docs/
│ │ ├── [...slug]/
│ │ │ └── page.tsx
│ │ ├── content/
│ │ │ ├── components/
│ │ │ │ ├── accordion.mdx
│ │ │ │ ├── badge.mdx
│ │ │ │ ├── breadcrumbs.mdx
│ │ │ │ ├── button.mdx
│ │ │ │ ├── calendar.mdx
│ │ │ │ ├── card.mdx
│ │ │ │ ├── checkbox.mdx
│ │ │ │ ├── combobox.mdx
│ │ │ │ ├── command.mdx
│ │ │ │ ├── date-field.mdx
│ │ │ │ ├── date-picker.mdx
│ │ │ │ ├── input.mdx
│ │ │ │ ├── menu.mdx
│ │ │ │ ├── meter.mdx
│ │ │ │ ├── modal.mdx
│ │ │ │ ├── popover.mdx
│ │ │ │ ├── radio-group.mdx
│ │ │ │ ├── select.mdx
│ │ │ │ ├── slider.mdx
│ │ │ │ ├── switch.mdx
│ │ │ │ ├── table.mdx
│ │ │ │ ├── tabs.mdx
│ │ │ │ ├── tag-group.mdx
│ │ │ │ ├── time-field.mdx
│ │ │ │ ├── toggle.mdx
│ │ │ │ └── tooltip.mdx
│ │ │ ├── intro.mdx
│ │ │ ├── styles.mdx
│ │ │ └── usage.mdx
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── globals.css
│ ├── layout.tsx
│ ├── llms.txt/
│ │ └── route.ts
│ ├── page.tsx
│ └── r/
│ └── [[...segments]]/
│ └── route.ts
├── components/
│ ├── code-block-client.tsx
│ ├── code-block.tsx
│ ├── component-metadata.tsx
│ ├── docs-page.tsx
│ ├── mdx-components.tsx
│ ├── mobile-nav.tsx
│ ├── open-in-ai-menu.tsx
│ ├── preview.tsx
│ ├── rac-link.tsx
│ ├── search.tsx
│ ├── sidebar-link.tsx
│ ├── sidebar.tsx
│ ├── table-of-contents.tsx
│ └── theme-toggle.tsx
├── components.json
├── hooks/
│ └── use-active-heading.ts
├── lib/
│ ├── component-data.ts
│ ├── cx.ts
│ ├── examples-map.ts
│ ├── metadata.ts
│ ├── navigation.ts
│ └── source.ts
├── next.config.ts
├── package.json
├── postcss.config.mjs
├── public/
│ └── r/
│ ├── accordion.json
│ ├── badge.json
│ ├── breadcrumbs.json
│ ├── button.json
│ ├── calendar.json
│ ├── card.json
│ ├── checkbox.json
│ ├── combobox.json
│ ├── command.json
│ ├── date-field.json
│ ├── date-picker.json
│ ├── input.json
│ ├── menu.json
│ ├── meter.json
│ ├── modal.json
│ ├── popover.json
│ ├── radio-group.json
│ ├── registry.json
│ ├── select.json
│ ├── slider.json
│ ├── switch.json
│ ├── table.json
│ ├── tabs.json
│ ├── tag-group.json
│ ├── time-field.json
│ ├── toggle.json
│ └── tooltip.json
├── source.config.ts
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .cursorrules
================================================
# Cursor Rules
## General
- Always use pnpm
================================================
FILE: .github/workflows/sync-components.yml
================================================
name: Component Sync Check
on:
pull_request:
paths:
- 'packages/components/src/**'
- 'packages/components/scripts/**'
- 'packages/components/package.json'
push:
branches:
- main
jobs:
pr-check:
if: github.event_name == 'pull_request'
runs-on: ubuntu-latest
name: Check Registry Drift
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10.12.1
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Build registry dependency first
run: pnpm --filter @baselayer/registry build
- name: Build components and generate registry
run: pnpm --filter @baselayer/components build
- name: Check for registry drift
run: |
# Check registry.json and generated shadcn registry files
if git diff --quiet packages/components/registry.json web/public/r/; then
echo "✅ Registry is in sync"
else
echo "❌ Registry out of sync! Generated files differ from committed files."
echo ""
echo "Please run the following locally and commit the changes:"
echo " pnpm --filter @baselayer/components build"
echo ""
echo "Changed files:"
git diff --name-only packages/components/registry.json web/public/r/
echo ""
echo "Diff:"
git diff packages/components/registry.json web/public/r/
exit 1
fi
build-and-test:
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
runs-on: ubuntu-latest
name: Build and Test
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10.12.1
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Build all packages
run: pnpm build
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
node_modules/
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
/dist
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# local env files
.env.local
.env
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
# turbo
.turbo
# pnpm
.pnpm-store/
.pnpm-debug.log*
# build outputs
**/dist/
**/build/
**/.next/
**/.turbo/
# IDE and editor files
.vscode/
.idea/
*.swp
*.swo
*~
.project
.classpath
.settings/
# OS generated files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
*.vsix
# Go workspace file
go.work
================================================
FILE: .prototools
================================================
pnpm = "10.12.2"
================================================
FILE: LICENSE.md
================================================
MIT License
Copyright (c) 2025 Zach Wagner
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# BaseLayer
## Overview
BaseLayer is a comprehensive React component library built for modern development workflows and AI-powered tooling. It combines the accessibility and power of React Aria Components with the styling flexibility of Tailwind CSS, creating a robust foundation for building incredible user interfaces.
## Docs
[https://baselayer.dev](https://baselayer.dev)
## Contributing
Coming soon, but in the meantime, feel free to open an issue or [reach out!](https://x.com/zwagnr)
================================================
FILE: biome.json
================================================
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"formatter": {
"enabled": true
},
"linter": {
"enabled": true,
"domains": {
"next": "recommended"
},
"rules": {
"recommended": true,
"nursery": {
"useSortedClasses": {
"level": "warn",
"fix": "safe",
"options": {
"attributes": ["className"],
"functions": ["cx", "tv"]
}
}
}
}
},
"assist": {
"actions": {
"source": {
"organizeImports": {
"level": "on",
"options": {
"groups": [
["react", "react/**"],
":BLANK_LINE:",
"next/**",
":BLANK_LINE:",
"react-aria-components",
"tailwind-variants",
":BLANK_LINE:",
":PACKAGE:",
":BLANK_LINE:",
"@/hooks/**",
":BLANK_LINE:",
["@/lib/**", "@/utils/**"],
":BLANK_LINE:",
"@/components/**",
":BLANK_LINE:",
"~/**",
":BLANK_LINE:",
":PATH:"
]
}
}
}
}
}
}
================================================
FILE: package.json
================================================
{
"name": "baselayer",
"private": true,
"version": "2.1.1",
"description": "Beautiful, accessible, and AI optimized React components for the web.",
"scripts": {
"build": "turbo build",
"dev": "turbo dev",
"lint": "turbo lint",
"clean": "turbo clean",
"type-check": "turbo type-check"
},
"devDependencies": {
"@biomejs/biome": "2.2.5",
"shadcn": "3.4.0",
"turbo": "^2.5.8"
},
"packageManager": "pnpm@10.12.1",
"engines": {
"node": "22.17.0"
}
}
================================================
FILE: packages/components/CHANGELOG.md
================================================
# @baselayer/components
## 2.0.3
### Patch Changes
- f594c82: update RAC + tw
## 2.0.2
### Patch Changes
- 6f88f68: mobile optimizations
## 2.0.1
### Patch Changes
- 6f94762: fix secondary button border
## 2.0.0
### Major Changes
- 7204382: v2
### Patch Changes
- Updated dependencies [7204382]
- @baselayer/registry@2.0.0
================================================
FILE: packages/components/package.json
================================================
{
"name": "@baselayer/components",
"version": "2.1.1",
"private": true,
"type": "module",
"main": "./src/index.ts",
"types": "./src/index.ts",
"files": [
"src"
],
"scripts": {
"build": "tsc && pnpm generate:registry && pnpm registry:build",
"dev": "tsc --watch",
"generate:registry": "tsx scripts/gen-registry-json.ts",
"registry:build": "shadcn build --cwd . --output ../../web/public/r"
},
"dependencies": {
"@baselayer/registry": "workspace:*",
"lucide-react": "^0.525.0",
"react": "^19.2.3",
"react-aria-components": "catalog:",
"tailwind-variants": "catalog:",
"zod": "^3.25.67"
},
"devDependencies": {
"@types/node": "catalog:",
"@types/react": "^19.2.7",
"fast-glob": "^3.3.2",
"ts-morph": "^26.0.0",
"tsx": "^4.20.3",
"tw-animate-css": "^1.3.6",
"typescript": "catalog:"
},
"peerDependencies": {
"react": ">=19.0.0",
"tailwindcss": ">=4.0.0"
}
}
================================================
FILE: packages/components/registry.json
================================================
{
"name": "@baselayer",
"$schema": "https://ui.shadcn.com/schema/registry.json",
"homepage": "https://baselayer.dev",
"items": [
{
"name": "accordion",
"type": "registry:ui",
"title": "accordion",
"description": "An accordion allows users to toggle the display of sections of content. Each accordion consists of a header with a title and content area.",
"author": "BaseLayer",
"categories": [
"layout"
],
"files": [
{
"path": "src/core/accordion/accordion.tsx",
"target": "components/ui/accordion.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"disclosure",
"collapsible",
"expandable",
"content"
]
}
},
{
"name": "badge",
"type": "registry:ui",
"title": "badge",
"description": "A badge is a small label that can be used to display information or status.",
"author": "BaseLayer",
"categories": [
"display"
],
"files": [
{
"path": "src/core/badge/badge.tsx",
"target": "components/ui/badge.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"status"
]
}
},
{
"name": "breadcrumbs",
"type": "registry:ui",
"title": "breadcrumbs",
"description": "Breadcrumbs display a heirarchy of links to the current page or resource in an application.",
"author": "BaseLayer",
"categories": [
"navigation"
],
"files": [
{
"path": "src/core/breadcrumbs/breadcrumbs.tsx",
"target": "components/ui/breadcrumbs.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"navigation"
]
}
},
{
"name": "button",
"type": "registry:ui",
"title": "button",
"description": "A button allows a user to perform an action, with mouse, touch, and keyboard interactions.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/button/button.tsx",
"target": "components/ui/button.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive"
]
}
},
{
"name": "calendar",
"type": "registry:ui",
"title": "calendar",
"description": "A calendar displays one or more date grids and allows users to select either a single date or a contiguous range of dates.",
"author": "BaseLayer",
"categories": [
"data-entry"
],
"files": [
{
"path": "src/core/calendar/calendar.tsx",
"target": "components/ui/calendar.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive",
"date-time"
]
}
},
{
"name": "card",
"type": "registry:ui",
"title": "card",
"description": "Displays a card with header, content, and footer.",
"author": "BaseLayer",
"categories": [
"layout"
],
"files": [
{
"path": "src/core/card/card.tsx",
"target": "components/ui/card.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"layout",
"container",
"display"
]
}
},
{
"name": "checkbox",
"type": "registry:ui",
"title": "checkbox",
"description": "A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/checkbox/checkbox.tsx",
"target": "components/ui/checkbox.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive"
]
}
},
{
"name": "combobox",
"type": "registry:ui",
"title": "combobox",
"description": "A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/combobox/combobox.tsx",
"target": "components/ui/combobox.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive",
"picker"
]
}
},
{
"name": "command",
"type": "registry:ui",
"title": "command",
"description": "A command palette that allows users to quickly search and execute commands using keyboard shortcuts.",
"author": "BaseLayer",
"categories": [
"navigation"
],
"files": [
{
"path": "src/core/command/command.tsx",
"target": "components/ui/command.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "beta",
"tags": [
"search",
"navigation",
"keyboard",
"palette"
]
}
},
{
"name": "date-field",
"type": "registry:ui",
"title": "date-field",
"description": "A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/date-field/date-field.tsx",
"target": "components/ui/date-field.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive",
"date"
]
}
},
{
"name": "date-picker",
"type": "registry:ui",
"title": "date-picker",
"description": "A date picker combines one or more DateFields with a calendar popover, allowing users to enter or select a single date/time or a range.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/date-picker/date-picker.tsx",
"target": "components/ui/date-picker.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"calendar"
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive",
"date-time"
]
}
},
{
"name": "input",
"type": "registry:ui",
"title": "input",
"description": "Allows a user to enter a plain text value with a keyboard.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/input/input.tsx",
"target": "components/ui/input.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive"
]
}
},
{
"name": "menu",
"type": "registry:ui",
"title": "menu",
"description": "A menu displays a list of actions or options that a user can choose.",
"author": "BaseLayer",
"categories": [
"pickers"
],
"files": [
{
"path": "src/core/menu/menu.tsx",
"target": "components/ui/menu.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"interactive",
"navigation"
]
}
},
{
"name": "meter",
"type": "registry:ui",
"title": "meter",
"description": "A meter represents a quantity within a known range, or a fractional value.",
"author": "BaseLayer",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/meter/meter.tsx",
"target": "components/ui/meter.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"data-display",
"progress"
]
}
},
{
"name": "modal",
"type": "registry:ui",
"title": "modal",
"description": "A modal is an overlay element which blocks interaction with elements outside it.",
"author": "BaseLayer",
"categories": [
"overlays"
],
"files": [
{
"path": "src/core/modal/modal.tsx",
"target": "components/ui/modal.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"overlay"
]
}
},
{
"name": "popover",
"type": "registry:ui",
"title": "popover",
"description": "A popover is an overlay element positioned relative to a trigger.",
"author": "BaseLayer",
"categories": [
"overlays"
],
"files": [
{
"path": "src/core/popover/popover.tsx",
"target": "components/ui/popover.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"overlay",
"interactive"
]
}
},
{
"name": "radio-group",
"type": "registry:ui",
"title": "radio-group",
"description": "A radio group allows a user to select a single option from a list of mutually exclusive options.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/radio-group/radio-group.tsx",
"target": "components/ui/radio-group.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive",
"selection"
]
}
},
{
"name": "select",
"type": "registry:ui",
"title": "select",
"description": "A select displays a collapsible list of options and allows a user to select one of them.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/select/select.tsx",
"target": "components/ui/select.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive",
"picker"
]
}
},
{
"name": "slider",
"type": "registry:ui",
"title": "slider",
"description": "A slider allows a user to select one or more values within a range.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/slider/slider.tsx",
"target": "components/ui/slider.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive",
"range"
]
}
},
{
"name": "switch",
"type": "registry:ui",
"title": "switch",
"description": "A switch allows a user to turn a setting on or off.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/switch/switch.tsx",
"target": "components/ui/switch.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive",
"toggle"
]
}
},
{
"name": "table",
"type": "registry:ui",
"title": "table",
"description": "A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.",
"author": "BaseLayer",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/table/table.tsx",
"target": "components/ui/table.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"button",
"checkbox"
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"data-display",
"interactive"
]
}
},
{
"name": "tabs",
"type": "registry:ui",
"title": "tabs",
"description": "Tabs organize content into multiple sections and allow users to navigate between them.",
"author": "BaseLayer",
"categories": [
"navigation"
],
"files": [
{
"path": "src/core/tabs/tabs.tsx",
"target": "components/ui/tabs.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"navigation",
"interactive",
"layout"
]
}
},
{
"name": "tag-group",
"type": "registry:ui",
"title": "tag-group",
"description": "A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/tag-group/tag-group.tsx",
"target": "components/ui/tag-group.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive",
"selection",
"filtering"
]
}
},
{
"name": "time-field",
"type": "registry:ui",
"title": "time-field",
"description": "A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/time-field/time-field.tsx",
"target": "components/ui/time-field.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive",
"time"
]
}
},
{
"name": "toggle",
"type": "registry:ui",
"title": "toggle",
"description": "A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.",
"author": "BaseLayer",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/toggle/toggle.tsx",
"target": "components/ui/toggle.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"form",
"interactive",
"toggle"
]
}
},
{
"name": "tooltip",
"type": "registry:ui",
"title": "tooltip",
"description": "A tooltip displays a description of an element on hover or focus.",
"author": "BaseLayer",
"categories": [
"overlays"
],
"files": [
{
"path": "src/core/tooltip/tooltip.tsx",
"target": "components/ui/tooltip.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css"
],
"tailwind": {
"config": {
"content": [
"./components/**/*.{ts,tsx}"
],
"theme": {
"extend": {}
}
}
},
"cssVars": {
"theme": {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)"
},
"light": {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff"
},
"dark": {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)"
}
},
"css": {
"@import \"tw-animate-css\"": {}
},
"meta": {
"status": "stable",
"tags": [
"overlay",
"interactive",
"help"
]
}
}
]
}
================================================
FILE: packages/components/scripts/gen-registry-json.ts
================================================
/** biome-ignore-all lint/suspicious/noAssignInExpressions: skip */
import type { Registry, RegistryItem } from "@baselayer/registry";
import glob from "fast-glob";
import { existsSync, readFileSync, writeFileSync } from "node:fs";
const COMPONENTS_DIR = "src/core";
const OUTPUT_FILE = "registry.json";
async function generateRegistryJson() {
console.log("Discovering components...");
// Find all component directories with meta.json files
const metaFiles = await glob(`${COMPONENTS_DIR}/*/meta.json`);
console.log(`Found ${metaFiles.length} components`);
const registryItems: RegistryItem[] = [];
for (const metaFilePath of metaFiles) {
try {
const component = await processComponent(metaFilePath);
if (component) {
registryItems.push(component);
console.log(`Processed ${component.name}`);
}
} catch (error) {
console.error(`Failed to process ${metaFilePath}:`, error);
}
}
// Sort components by name for consistent output
registryItems.sort((a, b) => a.name.localeCompare(b.name));
const registry: Registry = {
name: "@baselayer",
$schema: "https://ui.shadcn.com/schema/registry.json",
homepage: "https://baselayer.dev",
items: registryItems,
};
const jsonContent = JSON.stringify(registry, null, 2);
writeFileSync(OUTPUT_FILE, jsonContent);
console.log(
`Generated registry.json with ${registryItems.length} components`,
);
console.log(`\nNext step: Run 'pnpm registry:build' to generate final files`);
}
async function processComponent(
metaFilePath: string,
): Promise<RegistryItem | null> {
// Extract component id from path (e.g., src/core/button/meta.json -> button)
const componentId = metaFilePath.split("/").slice(-2, -1)[0];
// Read component metadata
const metaContent = readFileSync(metaFilePath, "utf8");
const meta = JSON.parse(metaContent);
// Read component source file
const sourceFile = `${COMPONENTS_DIR}/${componentId}/${componentId}.tsx`;
if (!existsSync(sourceFile)) {
console.warn(`Source file not found: ${sourceFile}`);
return null;
}
const sourceContent = readFileSync(sourceFile, "utf8");
// Detect registry dependencies (imports from other components in registry)
const registryDependencies: string[] = [];
// Match both relative imports and alias imports
const relativeImportRegex = /from\s+["']\.\.\/([^/"']+)\/\1["']/g;
const aliasImportRegex = /from\s+["']@\/components\/ui\/([^/"']+)\/\1["']/g;
let match: RegExpExecArray | null;
// Check relative imports
while ((match = relativeImportRegex.exec(sourceContent)) !== null) {
const depComponentId = match[1];
if (depComponentId !== componentId) {
registryDependencies.push(depComponentId);
}
}
// Check alias imports
while ((match = aliasImportRegex.exec(sourceContent)) !== null) {
const depComponentId = match[1];
if (depComponentId !== componentId) {
registryDependencies.push(depComponentId);
}
}
return {
name: componentId,
type: "registry:ui",
title: meta.name,
description: meta.description,
author: "BaseLayer",
categories: [meta.category],
files: [
{
path: `src/core/${componentId}/${componentId}.tsx`,
target: `components/ui/${componentId}.tsx`,
type: "registry:component",
},
],
// Add registry dependencies (other components this depends on in registry)
...(registryDependencies.length > 0 && { registryDependencies }),
// Add dependencies
dependencies: [
"react-aria-components",
"tailwind-variants",
"lucide-react",
"tw-animate-css",
],
tailwind: {
config: {
content: ["./components/**/*.{ts,tsx}"],
theme: {
extend: {},
},
},
},
// CSS variables
cssVars: {
theme: {
"--color-surface": "var(--surface)",
"--color-surface-2": "var(--surface-2)",
"--color-fg": "var(--fg)",
"--color-fg-muted": "var(--fg-muted)",
"--color-fg-disabled": "var(--fg-disabled)",
"--color-fg-inverse": "var(--fg-inverse)",
"--color-border": "var(--border)",
"--color-focus": "var(--focus)",
"--color-primary": "var(--primary)",
"--color-primary-fg": "var(--primary-fg)",
"--color-secondary": "var(--secondary)",
"--color-secondary-fg": "var(--secondary-fg)",
"--color-danger": "var(--danger)",
"--color-danger-fg": "var(--danger-fg)",
},
light: {
"--surface": "oklch(98.5% 0 0)",
"--surface-2": "oklch(97% 0 0)",
"--fg": "oklch(14.5% 0 0)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(70.8% 0 0)",
"--border": "oklch(87% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(14.5% 0 0)",
"--primary-fg": "oklch(98.5% 0 0)",
"--secondary": "oklch(92.2% 0 0)",
"--secondary-fg": "oklch(14.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "#ffffff",
},
dark: {
"--surface": "oklch(14.5% 0 0)",
"--surface-2": "oklch(20.5% 0 0)",
"--fg": "oklch(98.5% 0.001 106.423)",
"--fg-muted": "oklch(55.6% 0 0)",
"--fg-inverse": "oklch(98.5% 0 0)",
"--fg-disabled": "oklch(37.1% 0 0)",
"--border": "oklch(37.1% 0 0)",
"--focus": "oklch(68.5% 0.169 237.323)",
"--primary": "oklch(98.5% 0 0)",
"--primary-fg": "oklch(14.5% 0 0)",
"--secondary": "oklch(26.9% 0 0)",
"--secondary-fg": "oklch(98.5% 0 0)",
"--danger": "oklch(63.7% 0.237 25.331)",
"--danger-fg": "oklch(98.5% 0 0)",
},
},
// CSS imports and custom CSS
css: {
"@import \"tw-animate-css\"": {},
},
meta: {
status: meta.status,
tags: meta.tags,
},
};
}
generateRegistryJson().catch(console.error);
================================================
FILE: packages/components/src/core/accordion/accordion.tsx
================================================
"use client";
import type { ReactNode } from "react";
import {
Button,
Disclosure,
DisclosureGroup,
type DisclosureGroupProps,
DisclosurePanel,
type DisclosureProps,
Heading,
} from "react-aria-components";
import { tv, type VariantProps } from "tailwind-variants";
import { Minus, Plus } from "lucide-react";
const accordion = tv({
slots: {
root: "group w-full",
group: "flex flex-col gap-3",
button:
"flex w-full items-center justify-between gap-6 rounded-2xl border border-border bg-surface-2 p-4 data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-focus data-[focus-visible]:ring-offset-2 data-[focus-visible]:ring-offset-surface group-data-[expanded]:rounded-b-none group-data-[expanded]:border-b-0",
icon: "size-4 shrink-0 fill-none transition-transform duration-200",
panel:
"rounded-b-2xl border-border bg-surface-2 px-4 text-muted-foreground text-sm group-data-[expanded]:border-x group-data-[expanded]:border-b group-data-[expanded]:pb-4",
},
});
const styles = accordion();
type AccordionVariantProps = VariantProps<typeof accordion>;
interface AccordionProps
extends AccordionVariantProps,
Omit<DisclosureProps, "children"> {
className?: string;
title?: string;
children?: ReactNode;
}
const Accordion = ({
className,
title,
children,
...props
}: AccordionProps) => {
return (
<Disclosure className={styles.root({ className })} {...props}>
{({ isExpanded }) => (
<>
<Heading>
<Button slot="trigger" className={styles.button()}>
<span className="font-bold">{title}</span>
{isExpanded ? (
<Minus className={styles.icon()} />
) : (
<Plus className={styles.icon()} />
)}
</Button>
</Heading>
<DisclosurePanel className={styles.panel()}>
{children}
</DisclosurePanel>
</>
)}
</Disclosure>
);
};
interface AccordionGroupProps extends DisclosureGroupProps {
className?: string;
children: ReactNode;
}
const AccordionGroup = ({
className,
children,
...props
}: AccordionGroupProps) => (
<DisclosureGroup {...props} className={styles.group({ className })}>
{children}
</DisclosureGroup>
);
export { Accordion, AccordionGroup };
export type { AccordionProps, AccordionGroupProps };
================================================
FILE: packages/components/src/core/accordion/meta.json
================================================
{
"name": "accordion",
"category": "layout",
"status": "stable",
"description": "An accordion allows users to toggle the display of sections of content. Each accordion consists of a header with a title and content area.",
"tags": [
"disclosure",
"collapsible",
"expandable",
"content"
]
}
================================================
FILE: packages/components/src/core/badge/badge.tsx
================================================
import type { HTMLAttributes } from "react";
import { tv, type VariantProps } from "tailwind-variants";
export const badge = tv({
base: "flex items-center justify-center rounded-4xl px-3 py-2 font-semibold text-xs",
variants: {
variant: {
attention: "bg-gradient-to-r from-pink-500 to-purple-500 text-white",
neutral: "bg-secondary text-secondary-fg",
danger: "bg-danger text-danger-fg",
},
},
defaultVariants: {
variant: "attention",
},
});
type BadgeProps = VariantProps<typeof badge> & HTMLAttributes<HTMLSpanElement>;
const Badge = ({ className, variant, ...props }: BadgeProps) => (
<span className={badge({ variant, className })} {...props} />
);
export { Badge };
export type { BadgeProps };
================================================
FILE: packages/components/src/core/badge/meta.json
================================================
{
"name": "badge",
"category": "display",
"status": "stable",
"description": "A badge is a small label that can be used to display information or status.",
"tags": [
"status"
]
}
================================================
FILE: packages/components/src/core/breadcrumbs/breadcrumbs.tsx
================================================
"use client";
import {
Breadcrumbs as AriaBreadcrumbs,
type BreadcrumbsProps as AriaBreadcrumbsProps,
Breadcrumb,
type BreadcrumbProps,
Link,
type LinkProps,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const breadcrumbs = tv({
slots: {
root: "m-0 flex list-none items-center gap-2 p-0 font-md",
link: "relative cursor-pointer rounded-md text-fg outline-none ring-focus data-[hovered]:underline data-[focus-visible]:ring-2 [&[aria-current]]:font-extrabold [&[aria-current]]:text-fg",
item: "flex items-center gap-2",
},
});
const styles = breadcrumbs();
const Breadcrumbs = <T extends object>({
children,
className,
...props
}: AriaBreadcrumbsProps<T> & { className?: string }) => (
<AriaBreadcrumbs className={styles.root({ className })} {...props}>
{children}
</AriaBreadcrumbs>
);
const BreadcrumbsLink = ({
children,
className,
...props
}: LinkProps & { className?: string }) => (
<Link className={styles.link({ className })} {...props}>
{children}
</Link>
);
const BreadcrumbsItem = ({
children,
className,
...props
}: BreadcrumbProps & { className?: string }) => (
<Breadcrumb className={styles.item({ className })} {...props}>
{children}
</Breadcrumb>
);
export { BreadcrumbsItem, BreadcrumbsLink, Breadcrumbs };
================================================
FILE: packages/components/src/core/breadcrumbs/meta.json
================================================
{
"name": "breadcrumbs",
"category": "navigation",
"status": "stable",
"description": "Breadcrumbs display a heirarchy of links to the current page or resource in an application.",
"tags": [
"navigation"
]
}
================================================
FILE: packages/components/src/core/button/button.tsx
================================================
"use client";
import {
Button as AriaButton,
type ButtonProps as AriaButtonProps,
} from "react-aria-components";
import { tv, type VariantProps } from "tailwind-variants";
const button = tv({
base: "inline-flex appearance-none items-center justify-center rounded-full font-semibold outline-none ring-focus ring-offset-3 ring-offset-surface transition-transform duration-100 disabled:pointer-events-none disabled:opacity-50 data-[focus-visible]:ring-2",
variants: {
variant: {
primary:
"bg-primary text-primary-fg data-[hovered]:bg-primary/80",
secondary:
"border border-border text-fg data-[hovered]:border-secondary data-[hovered]:bg-secondary",
ghost:
"bg-transparent text-fg data-[hovered]:bg-secondary data-[hovered]:text-secondary-fg",
danger:
"border border-transparent bg-danger text-danger-fg data-[hovered]:bg-danger/80",
},
size: {
sm: "px-2 py-1.5 text-sm",
md: "px-4 py-2.5 text-base",
lg: "px-6 py-3.5 font-bold text-lg",
icon: "size-9",
},
},
defaultVariants: {
variant: "primary",
size: "md",
},
});
type ButtonVariantProps = VariantProps<typeof button>;
interface ButtonProps
extends Omit<AriaButtonProps, "className">,
ButtonVariantProps {
className?: string;
}
const Button = ({
className,
size,
variant,
children,
...props
}: ButtonProps) => (
<AriaButton className={button({ className, size, variant })} {...props}>
{children}
</AriaButton>
);
Button.displayName = "Button";
export { Button };
export type { ButtonProps };
================================================
FILE: packages/components/src/core/button/meta.json
================================================
{
"name": "button",
"category": "forms",
"status": "stable",
"description": "A button allows a user to perform an action, with mouse, touch, and keyboard interactions.",
"tags": [
"form",
"interactive"
]
}
================================================
FILE: packages/components/src/core/calendar/calendar.tsx
================================================
"use client";
import {
Calendar as AriaCalendar,
type CalendarProps as AriaCalendarProps,
RangeCalendar as AriaRangeCalendar,
type RangeCalendarProps as AriaRangeCalendarProps,
Button,
CalendarCell,
CalendarGrid,
CalendarGridBody,
CalendarGridHeader,
CalendarHeaderCell,
type DateValue,
Heading,
Text,
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { ChevronLeft, ChevronRight } from "lucide-react";
const baseStyles = tv({
slots: {
root: "w-fit max-w-full rounded-2xl border border-border bg-surface p-4 text-fg",
header: "flex w-full items-center gap-1 pb-4",
heading: "flex-1 text-center font-bold",
headerCell: "pb-2 text-fg-muted text-sm",
monthButton:
"flex appearance-none items-center justify-center rounded-full p-2 text-center outline-none ring-focus data-[hovered]:bg-secondary data-[focus-visible]:ring-2",
},
});
const calendar = tv({
extend: baseStyles,
slots: {
cell: "flex size-9 cursor-default items-center justify-center rounded-full border-border text-center text-sm outline-focus outline-offset-2 data-[hovered]:bg-secondary data-[pressed]:bg-secondary data-[selected]:bg-primary data-[selected]:text-primary-fg data-[unavailable]:text-fg-muted data-[unavailable]:line-through data-[focus-visible]:outline-2 data-[focus-visible]:outline-focus [&[data-outside-month]]:hidden",
},
});
const rangeCalendar = tv({
extend: baseStyles,
slots: {
cell: "flex size-9 cursor-default items-center justify-center rounded-full text-center text-sm outline-none outline-offset-2 data-[selected]:rounded-none data-[hovered]:bg-secondary data-[pressed]:bg-secondary data-[selected]:bg-primary data-[selected]:text-primary-fg data-[unavailable]:text-fg-muted data-[unavailable]:line-through data-[focus-visible]:ring-2 data-[focus-visible]:ring-focus data-[focus-visible]:ring-offset-2 [&[data-outside-month]]:hidden [&[data-selection-end]]:rounded-r-full [&[data-selection-start]]:rounded-l-full",
},
});
const styles = calendar();
const rangeStyles = rangeCalendar();
interface CalendarProps<T extends DateValue>
extends Omit<AriaCalendarProps<T>, "className"> {
errorMessage?: string;
className?: string;
}
const Calendar = ({
className,
errorMessage,
...props
}: CalendarProps<DateValue>) => (
<AriaCalendar {...props} className={styles.root({ className })}>
<header className={styles.header()}>
<Button className={styles.monthButton()} slot="previous">
<ChevronLeft className="h-5 w-5 self-center" />
</Button>
<Heading className={styles.heading()} slot="label" />
<Button className={styles.monthButton()} slot="next">
<ChevronRight className="h-5 w-5 self-center" />
</Button>
</header>
<CalendarGrid>
<CalendarGridHeader>
{(day) => (
<CalendarHeaderCell className={styles.headerCell()}>
{day}
</CalendarHeaderCell>
)}
</CalendarGridHeader>
<CalendarGridBody>
{(date) => <CalendarCell className={styles.cell()} date={date} />}
</CalendarGridBody>
</CalendarGrid>
{errorMessage && (
<Text className="text-danger text-sm" slot="errorMessage">
{errorMessage}
</Text>
)}
</AriaCalendar>
);
interface RangeCalendarProps<T extends DateValue>
extends Omit<AriaRangeCalendarProps<T>, "className"> {
errorMessage?: string;
className?: string;
}
const RangeCalendar = ({
className,
errorMessage,
...props
}: RangeCalendarProps<DateValue>) => (
<AriaRangeCalendar {...props} className={rangeStyles.root({ className })}>
<header className={rangeStyles.header()}>
<Button className={rangeStyles.monthButton()} slot="previous">
<ChevronLeft className="h-5 w-5 self-center" />
</Button>
<Heading className={rangeStyles.heading()} slot="label" />
<Button className={rangeStyles.monthButton()} slot="next">
<ChevronRight className="h-5 w-5 self-center" />
</Button>
</header>
<CalendarGrid>
<CalendarGridHeader>
{(day) => (
<CalendarHeaderCell className={rangeStyles.headerCell()}>
{day}
</CalendarHeaderCell>
)}
</CalendarGridHeader>
<CalendarGridBody>
{(date) => <CalendarCell className={rangeStyles.cell()} date={date} />}
</CalendarGridBody>
</CalendarGrid>
{errorMessage && (
<Text className="text-danger text-sm" slot="errorMessage">
{errorMessage}
</Text>
)}
</AriaRangeCalendar>
);
export { Calendar, RangeCalendar };
export type { CalendarProps, RangeCalendarProps };
================================================
FILE: packages/components/src/core/calendar/meta.json
================================================
{
"name": "calendar",
"category": "data-entry",
"status": "stable",
"description": "A calendar displays one or more date grids and allows users to select either a single date or a contiguous range of dates.",
"tags": [
"form",
"interactive",
"date-time"
]
}
================================================
FILE: packages/components/src/core/card/card.tsx
================================================
"use client";
import type { HTMLAttributes } from "react";
import { tv, type VariantProps } from "tailwind-variants";
const card = tv({
slots: {
root: "rounded-2xl border-2 bg-surface text-fg",
header: "flex flex-col space-y-1.5 p-6",
title: "font-semibold text-2xl leading-none tracking-tight",
description: "text-fg-muted text-sm",
content: "p-6 pt-0",
footer: "flex items-center p-6 pt-0",
},
variants: {
variant: {
outlined: {
root: "border border-border/50",
},
filled: {
root: "border-surface-2 bg-surface-2",
},
},
},
defaultVariants: {
variant: "outlined",
},
});
const styles = card();
type CardVariantProps = VariantProps<typeof card>;
interface CardProps extends HTMLAttributes<HTMLDivElement>, CardVariantProps {
className?: string;
title?: string;
description?: string;
}
interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
className?: string;
}
interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
className?: string;
}
interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
className?: string;
}
const Card = ({
className,
variant,
title,
description,
children,
...props
}: CardProps) => (
<div className={styles.root({ variant, className })} {...props}>
{(title || description) && (
<div className={styles.header()}>
{title && <h3 className={styles.title()}>{title}</h3>}
{description && <p className={styles.description()}>{description}</p>}
</div>
)}
{children}
</div>
);
const CardHeader = ({ className, ...props }: CardHeaderProps) => (
<div className={styles.header({ className })} {...props} />
);
const CardContent = ({ className, ...props }: CardContentProps) => (
<div className={styles.content({ className })} {...props} />
);
const CardFooter = ({ className, ...props }: CardFooterProps) => (
<div className={styles.footer({ className })} {...props} />
);
export { Card, CardHeader, CardContent, CardFooter };
export type { CardProps, CardHeaderProps, CardContentProps, CardFooterProps };
================================================
FILE: packages/components/src/core/card/meta.json
================================================
{
"name": "card",
"category": "layout",
"status": "stable",
"description": "Displays a card with header, content, and footer.",
"tags": [
"layout",
"container",
"display"
]
}
================================================
FILE: packages/components/src/core/checkbox/checkbox.tsx
================================================
"use client";
import type { ReactNode } from "react";
import {
type CheckboxProps as AriaCheckBoxProps,
Checkbox as AriaCheckbox,
CheckboxGroup as AriaCheckboxGroup,
type CheckboxGroupProps as AriaCheckboxGroupProps,
FieldError,
Text,
type ValidationResult,
} from "react-aria-components";
import { tv, type VariantProps } from "tailwind-variants";
import { Check } from "lucide-react";
const checkbox = tv({
base: "group flex items-center justify-center gap-2 py-1 text-fg",
});
const checkboxGroup = tv({
base: "flex flex-col gap-2",
});
type CheckboxVariantProps = VariantProps<typeof checkbox>;
interface CheckboxProps extends CheckboxVariantProps, AriaCheckBoxProps {
className?: string;
children: ReactNode;
description?: string;
errorMessage?: string | ((validation: ValidationResult) => string);
}
const Checkbox = ({
className,
errorMessage,
children,
description,
...props
}: CheckboxProps) => {
return (
<AriaCheckbox className={checkbox({ className })} {...props}>
{({ isSelected }) => (
<>
<div className="flex size-6 shrink-0 items-center justify-center rounded-lg border border-border transition-all group-data-[selected]:border-primary group-data-[selected]:bg-primary group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-focus group-data-[focus-visible]:ring-offset-2 group-data-[focus-visible]:ring-offset-surface">
{isSelected && <Check className="size-4 text-primary-fg" />}
</div>
{children}
{description && (
<Text className="text-sm" slot="description">
{description}
</Text>
)}
<FieldError className="text-danger text-sm">
{errorMessage}
</FieldError>
</>
)}
</AriaCheckbox>
);
};
interface CheckboxGroupProps extends AriaCheckboxGroupProps {
className?: string;
label?: string;
children: ReactNode;
description?: string;
errorMessage?: string | ((validation: ValidationResult) => string);
}
const CheckboxGroup = ({
className,
label,
description,
errorMessage,
children,
...props
}: CheckboxGroupProps) => (
<AriaCheckboxGroup {...props} className={checkboxGroup({ className })}>
{label && (
<Text className="text-md" slot="label">
{label}
</Text>
)}
{children}
{description && (
<Text className="text-md" slot="description">
{description}
</Text>
)}
<FieldError className="text-danger text-sm">{errorMessage}</FieldError>
</AriaCheckboxGroup>
);
export { Checkbox, CheckboxGroup };
export type { CheckboxProps, CheckboxGroupProps };
================================================
FILE: packages/components/src/core/checkbox/meta.json
================================================
{
"name": "checkbox",
"category": "forms",
"status": "stable",
"description": "A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.",
"tags": [
"form",
"interactive"
]
}
================================================
FILE: packages/components/src/core/combobox/combobox.tsx
================================================
"use client";
import type { ReactNode } from "react";
import {
ComboBox as AriaComboBox,
type ComboBoxProps as AriaComboBoxProps,
Button,
FieldError,
Input,
Label,
ListBox,
ListBoxItem,
type ListBoxItemProps,
Popover,
Text,
type ValidationResult,
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { CheckIcon, ChevronsUpDown } from "lucide-react";
const combobox = tv({
slots: {
root: "group max-h-inherit w-full overflow-auto p-1 outline-none",
input:
"w-full rounded-lg border border-border bg-surface px-4 py-1.5 align-middle font-semibold text-fg outline-none ring-fg transition-all group-data-[focused]:border-transparent group-data-[focused]:bg-surface group-data-[focused]:ring-2",
button:
"absolute right-2 flex appearance-none items-center justify-center rounded-full border-0 outline-none ring-focus ring-offset-2 ring-offset-surface data-[focus-visible]:ring-2",
popover:
"w-[var(--trigger-width)] rounded-xl border border-border/25 bg-surface p-1 text-fg shadow-lg outline-none",
item: "relative m-1 flex cursor-default flex-col rounded-lg p-2 font-semibold outline-none data-[disabled]:cursor-not-allowed data-[focused]:bg-secondary data-[disabled]:text-fg-disabled",
},
});
const styles = combobox();
interface ComboBoxProps<T extends ListBoxItemProps>
extends Omit<AriaComboBoxProps<T>, "className"> {
className?: string;
label?: string;
description?: string;
errorMessage?: string | ((validation: ValidationResult) => string);
}
const ComboBox = <T extends ListBoxItemProps>({
label,
className,
description,
errorMessage,
children,
...props
}: ComboBoxProps<T>) => (
<AriaComboBox
{...props}
className={styles.root({ className })}
>
{label && <Label className="text-sm">{label}</Label>}
<div className="relative flex w-full items-center rounded-2xl bg-surface">
<Input className={styles.input()} />
<Button className={styles.button()}>
<ChevronsUpDown className="size-5 text-fg-muted group-data-[focused]:text-fg" />
</Button>
</div>
{description && (
<Text className="text-fg-muted text-sm" slot="description">
{description}
</Text>
)}
<FieldError className="text-danger text-sm">{errorMessage}</FieldError>
<Popover className={styles.popover()}>
<ListBox className="max-h-56 overflow-y-auto">{children}</ListBox>
</Popover>
</AriaComboBox>
);
interface ComboBoxItemProps
extends Omit<ListBoxItemProps, "className" | "children"> {
children: ReactNode;
className?: string;
}
const ComboBoxItem = ({ className, ...props }: ComboBoxItemProps) => (
<ListBoxItem {...props} className={styles.item({ className })}>
{({ isSelected }) => (
<div className="flex items-center justify-between gap-2">
<span>{props.children}</span>
{isSelected && <CheckIcon className="size-4" />}
</div>
)}
</ListBoxItem>
);
export { ComboBox, ComboBoxItem };
export type { ComboBoxProps, ListBoxItemProps as ComboBoxItemProps };
================================================
FILE: packages/components/src/core/combobox/meta.json
================================================
{
"name": "combobox",
"category": "forms",
"status": "stable",
"description": "A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
"tags": [
"form",
"interactive",
"picker"
]
}
================================================
FILE: packages/components/src/core/command/command.tsx
================================================
"use client";
import type { ComponentType, ReactNode } from "react";
import { useEffect, useState } from "react";
import {
Button as AriaButton,
Dialog as AriaDialog,
DialogTrigger as AriaDialogTrigger,
Modal as AriaModal,
Autocomplete,
Input,
Menu,
MenuItem,
type MenuItemProps,
ModalOverlay,
type ModalOverlayProps,
TextField,
useFilter,
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { Search } from "lucide-react";
const command = tv({
slots: {
trigger:
"flex w-full items-center justify-between rounded-full bg-secondary px-4 py-2 font-semibold text-fg outline-none ring-primary ring-offset-2 ring-offset-surface transition-colors data-[hovered]:bg-secondary/75 data-[focus-visible]:ring-2",
overlay:
"data-[entering]:fade-in data-[exiting]:fade-out fixed inset-0 z-50 flex min-h-full items-start justify-center bg-zinc-500/25 p-4 text-center data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:duration-300 data-[exiting]:duration-200 sm:items-center",
modal:
"data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:duration-300 data-[exiting]:duration-200",
dialog:
"flex min-h-96 min-w-80 max-w-full flex-col gap-1 rounded-2xl bg-surface p-2 shadow-lg outline-none md:w-lg",
input:
"rounded-lg border-b-2 border-none bg-transparent px-3 py-2 text-base text-fg leading-5 outline-none placeholder:text-fg-muted",
menu: "mt-2 h-80 overflow-auto",
item: "group flex min-h-12 w-full cursor-default items-center rounded-lg px-3 py-2 text-fg outline-none data-[focused]:bg-secondary data-[pressed]:bg-surface-3 data-[focused]:text-focus-fg",
kbd: "ml-auto rounded border border-border bg-surface-2 px-2 py-1 font-semibold text-fg-muted text-xs",
},
});
const styles = command();
interface CommandItem {
id: string;
label: string;
shortcut?: string;
icon?: ComponentType<{ className?: string }>;
onSelect?: () => void;
}
interface CommandProps extends Omit<ModalOverlayProps, "className"> {
className?: string;
trigger?: ReactNode;
commands: CommandItem[];
placeholder?: string;
triggerKey?: string;
onCommandSelect?: (command: CommandItem) => void;
onSearchChange?: (search: string) => void;
}
const Command = ({
className,
trigger,
commands,
placeholder = "Search commands…",
triggerKey = "k",
onCommandSelect,
onSearchChange,
...props
}: CommandProps) => {
const [isOpen, setOpen] = useState(false);
const [isMac, setIsMac] = useState(true);
const { contains } = useFilter({ sensitivity: "base" });
useEffect(() => {
setIsMac(/Mac/.test(navigator?.platform || ""));
}, []);
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (
e.key.toLowerCase() === triggerKey.toLowerCase() &&
(isMac ? e.metaKey : e.ctrlKey)
) {
e.preventDefault();
setOpen((prev) => !prev);
} else if (e.key === "Escape") {
e.preventDefault();
setOpen(false);
}
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [isMac, triggerKey]);
const handleCommandSelect = (command: CommandItem) => {
command.onSelect?.();
onCommandSelect?.(command);
setOpen(false);
};
return (
<AriaDialogTrigger isOpen={isOpen} onOpenChange={setOpen}>
{trigger || (
<AriaButton className={styles.trigger({ className })}>
<div className="flex items-center gap-2 text-fg-muted">
<Search className="size-4 text-fg-muted" />
Search
</div>
<kbd className="rounded-md border border-border px-2 py-1 font-semibold text-fg-muted text-xs">
{isMac ? "⌘" : "Ctrl"} {triggerKey.toUpperCase()}
</kbd>
</AriaButton>
)}
<ModalOverlay {...props} isDismissable className={styles.overlay()}>
<AriaModal className={styles.modal()}>
<AriaDialog className={styles.dialog()}>
<Autocomplete filter={onSearchChange ? () => true : contains}>
<TextField
aria-label="Search commands"
className="flex flex-col border-border border-b px-3 py-2 outline-none"
onChange={onSearchChange}
>
<Input
autoFocus
placeholder={placeholder}
className={styles.input()}
/>
</TextField>
<Menu
items={commands}
className={styles.menu()}
selectionMode="none"
>
{({ label, shortcut, icon: Icon, ...command }) => (
<CommandMenuItem
{...command}
textValue={label}
onAction={() =>
handleCommandSelect({
label,
shortcut,
icon: Icon,
...command,
})
}
>
<div className="flex min-w-0 items-center gap-3">
{Icon && (
<Icon className="size-4 shrink-0 text-fg-muted" />
)}
<span className="truncate font-medium text-sm leading-tight">
{label}
</span>
</div>
{shortcut && (
<span className={styles.kbd()}>{shortcut}</span>
)}
</CommandMenuItem>
)}
</Menu>
</Autocomplete>
</AriaDialog>
</AriaModal>
</ModalOverlay>
</AriaDialogTrigger>
);
};
interface CommandMenuItemProps extends Omit<MenuItemProps, "className"> {
className?: string;
children: ReactNode;
}
const CommandMenuItem = ({
className,
children,
...props
}: CommandMenuItemProps) => (
<MenuItem {...props} className={styles.item({ className })}>
{children}
</MenuItem>
);
const CommandTrigger = AriaDialogTrigger;
export { Command, CommandMenuItem, CommandTrigger };
export type { CommandProps, CommandMenuItemProps, CommandItem };
================================================
FILE: packages/components/src/core/command/meta.json
================================================
{
"name": "command",
"category": "navigation",
"status": "beta",
"description": "A command palette that allows users to quickly search and execute commands using keyboard shortcuts.",
"tags": [
"search",
"navigation",
"keyboard",
"palette"
]
}
================================================
FILE: packages/components/src/core/date-field/date-field.tsx
================================================
"use client";
import type {
DateFieldProps as AriaDateFieldProps,
DateValue,
} from "react-aria-components";
import {
DateField as AriaDateField,
DateInput,
DateSegment,
FieldError,
Label,
Text,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const dateField = tv({
slots: {
input:
"flex min-h-11 min-w-48 appearance-none items-center rounded-lg border border-border bg-surface px-3 py-0.5 outline-none ring-primary transition-all data-[disabled]:cursor-not-allowed data-[focus-within]:border-transparent data-[disabled]:border-none data-[disabled]:bg-primary/10 data-[focus-within]:bg-surface data-[disabled]:text-fg-disabled data-[focus-within]:ring-2 [&::placeholder]:text-sm",
segmentStyles:
"rounded-md p-1 text-end outline-none focus:text-primary-fg data-[focused]:bg-primary data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg",
},
});
const styles = dateField();
interface DateFieldProps<T extends DateValue> extends AriaDateFieldProps<T> {
label?: string;
description?: string;
errorMessage?: string;
}
const DateField = <T extends DateValue>({
label,
description,
errorMessage,
...props
}: DateFieldProps<T>) => (
<AriaDateField className="flex flex-col gap-1" {...props}>
{label && <Label className="text-sm">{label}</Label>}
<DateInput className={styles.input()}>
{(segment) => (
<DateSegment className={styles.segmentStyles()} segment={segment} />
)}
</DateInput>
{description && <Text slot="description">{description}</Text>}
<FieldError className="text-danger text-sm">{errorMessage}</FieldError>
</AriaDateField>
);
export { DateField };
export type { DateFieldProps };
================================================
FILE: packages/components/src/core/date-field/meta.json
================================================
{
"name": "date-field",
"category": "forms",
"status": "stable",
"description": "A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.",
"tags": [
"form",
"interactive",
"date"
]
}
================================================
FILE: packages/components/src/core/date-picker/date-picker.tsx
================================================
"use client";
import type {
DatePickerProps as AriaDatePickerProps,
DateRangePickerProps as AriaDateRangePickerProps,
} from "react-aria-components";
import {
DatePicker as AriaDatePicker,
DateRangePicker as AriaDateRangePicker,
Button,
DateInput,
DateSegment,
type DateValue,
Dialog,
FieldError,
Group,
Label,
Popover,
Text,
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { ChevronDown } from "lucide-react";
import { Calendar, RangeCalendar } from "@/components/ui/calendar/calendar";
const baseStyles = tv({
slots: {
input:
"appearance-none rounded-lg px-3 py-1.5 outline-none ring-primary transition-all",
popover:
"overflow-auto rounded-2xl data-[entering]:animate-fade data-[exiting]:animate-fadeOut",
},
});
const datePicker = tv({
extend: baseStyles,
slots: {
group:
"relative flex min-h-11 w-auto min-w-48 items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface",
dateSegment:
"min-w-16 rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg",
},
});
const dateRangePicker = tv({
extend: baseStyles,
slots: {
group:
"relative flex min-h-11 w-full flex-wrap items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface",
dateSegment:
"rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg",
separator: "px-2 text-fg-muted",
},
});
const styles = datePicker();
const rangeStyles = dateRangePicker();
interface DatePickerProps<T extends DateValue> extends AriaDatePickerProps<T> {
label?: string;
description?: string;
errorMessage?: string;
}
const DatePicker = <T extends DateValue>({
className,
label,
description,
errorMessage,
children,
...props
}: DatePickerProps<T>) => (
<AriaDatePicker className="flex flex-col gap-1" {...props}>
{label && <Label className="text-sm">{label}</Label>}
<Group className={styles.group()}>
<DateInput className={styles.input()}>
{(segment) => (
<DateSegment className={styles.dateSegment()} segment={segment} />
)}
</DateInput>
<Button className="absolute right-2 w-6 rounded-xs outline-offset-0">
<ChevronDown className="size-4 text-fg-muted" />
</Button>
</Group>
{description && (
<Text className="text-fg-muted text-sm" slot="description">
{description}
</Text>
)}
<FieldError className="text-danger text-sm">{errorMessage}</FieldError>
<Popover className={styles.popover()}>
<Dialog>
<Calendar />
</Dialog>
</Popover>
</AriaDatePicker>
);
interface DateRangePickerProps<T extends DateValue>
extends AriaDateRangePickerProps<T> {
label?: string;
description?: string;
errorMessage?: string;
className?: string;
}
const DateRangePicker = <T extends DateValue>({
className,
label,
description,
errorMessage,
children,
...props
}: DateRangePickerProps<T>) => (
<AriaDateRangePicker className="flex w-full flex-col gap-1" {...props}>
{label && <Label className="text-sm">{label}</Label>}
<Group className={rangeStyles.group({ className })}>
<DateInput slot="start" className={rangeStyles.input()}>
{(segment) => (
<DateSegment
className={rangeStyles.dateSegment()}
segment={segment}
/>
)}
</DateInput>
<span className={rangeStyles.separator()} aria-hidden="true">
–
</span>
<DateInput slot="end" className={rangeStyles.input()}>
{(segment) => (
<DateSegment
className={rangeStyles.dateSegment()}
segment={segment}
/>
)}
</DateInput>
<Button className="absolute right-2 w-6 rounded-xs outline-offset-0">
<ChevronDown className="size-4 text-fg-muted" />
</Button>
</Group>
{description && (
<Text className="text-fg-muted text-sm" slot="description">
{description}
</Text>
)}
<FieldError className="text-danger text-sm">{errorMessage}</FieldError>
<Popover className={rangeStyles.popover()}>
<Dialog>
<RangeCalendar />
</Dialog>
</Popover>
</AriaDateRangePicker>
);
export { DatePicker, DateRangePicker };
export type { DatePickerProps, DateRangePickerProps };
================================================
FILE: packages/components/src/core/date-picker/meta.json
================================================
{
"name": "date-picker",
"category": "forms",
"status": "stable",
"description": "A date picker combines one or more DateFields with a calendar popover, allowing users to enter or select a single date/time or a range.",
"tags": [
"form",
"interactive",
"date-time"
]
}
================================================
FILE: packages/components/src/core/index.ts
================================================
export * from "./accordion/accordion";
export * from "./badge/badge";
export * from "./breadcrumbs/breadcrumbs";
export * from "./button/button";
export * from "./calendar/calendar";
export * from "./card/card";
export * from "./checkbox/checkbox";
export * from "./combobox/combobox";
export * from "./command/command";
export * from "./date-field/date-field";
export * from "./date-picker/date-picker";
export * from "./input/input";
export * from "./menu/menu";
export * from "./meter/meter";
export * from "./modal/modal";
export * from "./popover/popover";
export * from "./radio-group/radio-group";
export * from "./select/select";
export * from "./slider/slider";
export * from "./switch/switch";
export * from "./table/table";
export * from "./tabs/tabs";
export * from "./tag-group/tag-group";
export * from "./time-field/time-field";
export * from "./toggle/toggle";
export * from "./tooltip/tooltip";
================================================
FILE: packages/components/src/core/input/input.tsx
================================================
"use client";
import type {
TextFieldProps as AriaTextFieldProps,
ValidationResult,
} from "react-aria-components";
import {
Input as AriaInput,
TextField as AriaTextField,
FieldError,
Label,
Text,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const input = tv({
base: "min-h-11 appearance-none rounded-lg border border-border bg-surface px-3 py-1 text-fg outline-none ring-primary transition-all data-[disabled]:cursor-not-allowed data-[focused]:border-transparent data-[disabled]:bg-primary/10 data-[disabled]:text-fg-disabled data-[focused]:ring-2 [&::placeholder]:text-fg-muted [&::placeholder]:text-sm",
});
interface InputProps extends Omit<AriaTextFieldProps, "className"> {
className?: string;
label?: string;
description?: string;
errorMessage?: string | ((validation: ValidationResult) => string);
placeholder?: string;
}
const Input = ({
label,
description,
errorMessage,
placeholder,
className,
...props
}: InputProps) => (
<AriaTextField className="flex w-full flex-col gap-1" {...props}>
{label && <Label className="text-sm">{label}</Label>}
<AriaInput className={input({ className })} placeholder={placeholder} />
{description && (
<Text className="text-fg-muted text-sm" slot="description">
{description}
</Text>
)}
<FieldError className="text-danger text-sm">{errorMessage}</FieldError>
</AriaTextField>
);
export { Input };
export type { InputProps };
================================================
FILE: packages/components/src/core/input/meta.json
================================================
{
"name": "input",
"category": "forms",
"status": "stable",
"description": "Allows a user to enter a plain text value with a keyboard.",
"tags": [
"form",
"interactive"
]
}
================================================
FILE: packages/components/src/core/menu/menu.tsx
================================================
"use client";
import type { HTMLAttributes } from "react";
import {
Header as AriaHeader,
Menu as AriaMenu,
MenuItem as AriaMenuItem,
MenuSection as AriaMenuSection,
MenuTrigger as AriaMenuTrigger,
type MenuItemProps,
type MenuProps,
Popover,
Separator,
} from "react-aria-components";
import { tv } from "tailwind-variants";
export const menu = tv({
slots: {
menuPopover:
"data-[entering]:fade-in data-[exiting]:fade-out overflow-auto rounded-2xl border border-border/25 bg-surface shadow-xl data-[entering]:animate-in data-[exiting]:animate-out",
header: "p-2 font-semibold",
content: "flex h-fit min-w-56 flex-col gap-2 p-3 outline-none",
item: "relative flex cursor-default justify-between rounded-lg p-3 font-semibold outline-none data-[disabled]:cursor-not-allowed data-[focused]:bg-secondary data-[disabled]:text-fg-disabled",
separator: "h-[1px] bg-border",
},
});
const { menuPopover, content, header, item, separator } = menu();
const MenuTrigger = AriaMenuTrigger;
const MenuSection = AriaMenuSection;
const MenuContent = <T extends object>({
children,
className,
...props
}: MenuProps<T> & { className?: string }) => (
<Popover className={menuPopover()}>
<AriaMenu {...props} className={content({ className })}>
{children}
</AriaMenu>
</Popover>
);
const MenuItem = ({
children,
className,
...props
}: MenuItemProps & { className?: string }) => (
<AriaMenuItem {...props} className={item({ className })}>
{children}
</AriaMenuItem>
);
const MenuHeader = ({
children,
className,
...props
}: HTMLAttributes<HTMLElement> & { className?: string }) => (
<AriaHeader {...props} className={header({ className })}>
{children}
</AriaHeader>
);
const MenuSeperator = ({
className,
...props
}: HTMLAttributes<HTMLElement> & { className?: string }) => (
<Separator {...props} className={separator({ className })} />
);
export {
MenuContent,
MenuHeader,
MenuItem,
MenuSeperator,
MenuTrigger,
MenuSection,
};
================================================
FILE: packages/components/src/core/menu/meta.json
================================================
{
"name": "menu",
"category": "pickers",
"status": "stable",
"description": "A menu displays a list of actions or options that a user can choose.",
"tags": [
"interactive",
"navigation"
]
}
================================================
FILE: packages/components/src/core/meter/meta.json
================================================
{
"name": "meter",
"category": "data-display",
"status": "stable",
"description": "A meter represents a quantity within a known range, or a fractional value.",
"tags": [
"data-display",
"progress"
]
}
================================================
FILE: packages/components/src/core/meter/meter.tsx
================================================
"use client";
import {
Meter as AriaMeter,
type MeterProps as AriaMeterProps,
Label,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const bar = tv({
base: "h-4 overflow-hidden rounded-2xl bg-surface-2",
});
interface MeterProps extends Omit<AriaMeterProps, "className"> {
label?: string;
className?: string;
}
const Meter = ({ label, className, ...props }: MeterProps) => (
<AriaMeter className="flex w-56 flex-col gap-2" {...props}>
{({ percentage, valueText }) => (
<>
<div className="flex justify-between">
{label && <Label className="text-primary text-sm">{label}</Label>}
<span className="value text-primary text-sm">{valueText}</span>
</div>
<div className={bar({ className })}>
<div
className="h-full bg-primary"
style={{ width: `${percentage}%` }}
/>
</div>
</>
)}
</AriaMeter>
);
export { Meter };
export type { MeterProps };
================================================
FILE: packages/components/src/core/modal/meta.json
================================================
{
"name": "modal",
"category": "overlays",
"status": "stable",
"description": "A modal is an overlay element which blocks interaction with elements outside it.",
"tags": [
"overlay"
]
}
================================================
FILE: packages/components/src/core/modal/modal.tsx
================================================
"use client";
import {
Dialog as AriaDialog,
DialogTrigger as AriaDialogTrigger,
Modal as AriaModal,
type DialogProps,
ModalOverlay,
type ModalOverlayProps,
} from "react-aria-components";
import { tv } from "tailwind-variants";
export const modal = tv({
slots: {
dialog: "flex w-full flex-col gap-6 outline-none",
modalStyles:
"fade-in w-full rounded-2xl bg-surface p-6 text-fg outline-none data-[entering]:animate-in md:w-md",
},
});
const styles = modal();
interface ModalProps extends Omit<ModalOverlayProps, "className"> {
className?: string;
}
const Modal = ({ children, className, ...props }: ModalProps) => (
<ModalOverlay
{...props}
className="fade-in fade-out fixed top-0 left-0 z-50 flex h-[var(--visual-viewport-height)] w-screen items-center justify-center bg-zinc-500/50 data-[entering]:animate-in data-[exiting]:animate-out"
>
<AriaModal className={styles.modalStyles({ className })}>
{children}
</AriaModal>
</ModalOverlay>
);
const Dialog = ({ children, className, ...props }: DialogProps) => (
<AriaDialog {...props} className={styles.dialog({ className })}>
{children}
</AriaDialog>
);
const ModalTrigger = AriaDialogTrigger;
export { Modal, Dialog, ModalTrigger };
export type { ModalProps, DialogProps };
================================================
FILE: packages/components/src/core/popover/meta.json
================================================
{
"name": "popover",
"category": "overlays",
"status": "stable",
"description": "A popover is an overlay element positioned relative to a trigger.",
"tags": [
"overlay",
"interactive"
]
}
================================================
FILE: packages/components/src/core/popover/popover.tsx
================================================
"use client";
import type { ReactNode } from "react";
import {
DialogTrigger as AriaDialogTrigger,
Popover as AriaPopover,
type PopoverProps as AriaPopoverProps,
Dialog,
} from "react-aria-components";
import { tv } from "tailwind-variants";
export const popover = tv({
base: "data-[entering]:fade-in data-[exiting]:fade-out m-1 max-w-lg rounded-2xl border border-border/25 bg-surface p-2 text-fg shadow-lg outline-none data-[entering]:animate-in data-[exiting]:animate-out",
});
interface DialogProps extends Omit<AriaPopoverProps, "className" | "children"> {
children: ReactNode;
className?: string;
}
const PopoverTrigger = AriaDialogTrigger;
const Popover = ({ children, className, ...props }: DialogProps) => (
<AriaPopover className={popover({ className })} {...props}>
<Dialog className="outline-none">{children}</Dialog>
</AriaPopover>
);
export { Popover, PopoverTrigger };
================================================
FILE: packages/components/src/core/radio-group/meta.json
================================================
{
"name": "radio-group",
"category": "forms",
"status": "stable",
"description": "A radio group allows a user to select a single option from a list of mutually exclusive options.",
"tags": [
"form",
"interactive",
"selection"
]
}
================================================
FILE: packages/components/src/core/radio-group/radio-group.tsx
================================================
"use client";
import type { ReactNode } from "react";
import type {
RadioGroupProps as AriaRadioGroupProps,
RadioProps,
ValidationResult,
} from "react-aria-components";
import {
Radio as AriaRadio,
RadioGroup as AriaRadioGroup,
FieldError,
Text,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const radioGroup = tv({
slots: {
radio:
"flex items-center gap-4 text-fg before:block before:h-5 before:w-5 before:rounded-full before:border before:border-border before:ring-focus before:ring-offset-2 before:ring-offset-surface before:transition-all data-[selected]:before:border-4 data-[selected]:before:border-primary data-[focus-visible]:before:ring-2",
group: "flex flex-col gap-4 text-fg",
},
});
const { group, radio } = radioGroup();
interface RadioGroupProps extends Omit<AriaRadioGroupProps, "children" | "className"> {
className?: string;
children?: ReactNode;
label?: string;
description?: string;
errorMessage?: string | ((validation: ValidationResult) => string)
}
const RadioGroup = ({
className,
label,
description,
errorMessage,
children,
...props
}: RadioGroupProps) => (
<AriaRadioGroup className={group({ className })} {...props}>
{label}
{children}
{description && <Text slot="description">{description}</Text>}
<FieldError className="text-danger text-sm">{errorMessage}</FieldError>
</AriaRadioGroup>
);
const Radio = ({
children,
className,
...props
}: RadioProps & {
className?: string;
}) => (
<AriaRadio className={radio({ className })} {...props}>
{children}
</AriaRadio>
);
export { RadioGroup, Radio };
================================================
FILE: packages/components/src/core/select/meta.json
================================================
{
"name": "select",
"category": "forms",
"status": "stable",
"description": "A select displays a collapsible list of options and allows a user to select one of them.",
"tags": [
"form",
"interactive",
"picker"
]
}
================================================
FILE: packages/components/src/core/select/select.tsx
================================================
"use client";
import type { ReactNode } from "react";
import type {
SelectProps as AriaSelectProps,
ListBoxItemProps,
ValidationResult,
} from "react-aria-components";
import {
Select as AriaSelect,
Autocomplete,
Button,
FieldError,
Input,
Label,
ListBox,
ListBoxItem,
Popover,
SearchField,
SelectValue,
Text,
useFilter,
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { CheckIcon, ChevronDown, Search } from "lucide-react";
const select = tv({
slots: {
group: "group flex flex-col gap-1",
button:
"group flex w-fit items-center justify-between gap-4 rounded-full border border-border bg-surface px-4 py-2.75 align-middle font-semibold text-fg text-sm outline-none ring-fg transition-all data-[hovered]:bg-surface-2 group-data-[focus-visible]:border-transparent group-data-[open]:bg-surface-2 group-data-[focus-visible]:ring-2",
item: "relative m-1 flex cursor-default flex-col rounded-lg p-2 font-semibold outline-none data-[disabled]:cursor-not-allowed data-[focused]:bg-secondary data-[disabled]:text-fg-disabled",
searchField:
"group m-1 flex items-center rounded-full border border-border bg-surface px-2 py-1.5",
searchInput:
"flex-1 bg-transparent text-fg outline-none placeholder:text-fg-muted",
searchIcon: "mr-2 size-4 text-fg-muted",
clearButton:
"ml-2 rounded p-0.5 text-fg-muted transition-colors hover:bg-surface-2 hover:text-fg group-empty:invisible",
popover:
"min-w-[var(--trigger-width)] rounded-xl border border-border/25 bg-surface p-1 text-fg shadow-lg outline-none",
},
});
const styles = select();
interface SelectProps<T extends ListBoxItemProps>
extends Omit<AriaSelectProps<T>, "className"> {
className?: string;
popoverClassName?: string;
label?: string;
description?: string;
errorMessage?: string | ((validation: ValidationResult) => string);
}
const Select = <T extends ListBoxItemProps>({
label,
className,
description,
errorMessage,
popoverClassName,
children,
...props
}: SelectProps<T>) => (
<AriaSelect className={styles.group()} {...props}>
{label && <Label className="text-sm">{label}</Label>}
<Button className={styles.button({ className })}>
<SelectValue className="data-[placeholder]:text-fg-muted" />
<ChevronDown className="size-4 text-fg-muted group-data-[open]:rotate-180 group-data-[focused]:text-fg" />
</Button>
{description && (
<Text className="text-fg-muted text-sm" slot="description">
{description}
</Text>
)}
<FieldError className="text-danger text-sm">{errorMessage}</FieldError>
<Popover className={styles.popover({ className: popoverClassName })}>
<ListBox className="outline-none">{children}</ListBox>
</Popover>
</AriaSelect>
);
interface SelectItemProps
extends Omit<ListBoxItemProps, "className" | "children"> {
children: ReactNode;
className?: string;
}
const SelectItem = ({ className, ...props }: SelectItemProps) => (
<ListBoxItem {...props} className={styles.item({ className })}>
{({ isSelected }) => (
<div className="flex items-center justify-between gap-2">
<span>{props.children}</span>
{isSelected && <CheckIcon className="size-4" />}
</div>
)}
</ListBoxItem>
);
interface SearchableSelectProps<T extends ListBoxItemProps>
extends SelectProps<T> {
searchPlaceholder?: string;
}
const SearchableSelect = <T extends ListBoxItemProps>({
label,
className,
description,
errorMessage,
searchPlaceholder = "Search...",
children,
popoverClassName,
...props
}: SearchableSelectProps<T>) => {
const { contains } = useFilter({ sensitivity: "base" });
return (
<AriaSelect className={styles.group()} {...props}>
{label && <Label className="text-sm">{label}</Label>}
<Button className={styles.button({ className })}>
<SelectValue className="data-[placeholder]:text-fg-muted" />
<ChevronDown className="size-4 text-fg-muted group-data-[open]:rotate-180 group-data-[focused]:text-fg" />
</Button>
{description && (
<Text className="text-fg-muted text-sm" slot="description">
{description}
</Text>
)}
<FieldError className="text-danger text-sm">{errorMessage}</FieldError>
<Popover className={styles.popover({ className: popoverClassName })}>
<Autocomplete filter={contains}>
<SearchField
aria-label="Search"
autoFocus
className={styles.searchField()}
>
<Search className={styles.searchIcon()} />
<Input
placeholder={searchPlaceholder}
className={styles.searchInput()}
/>
</SearchField>
<ListBox className="max-h-48 overflow-auto outline-none">
{children}
</ListBox>
</Autocomplete>
</Popover>
</AriaSelect>
);
};
export { Select, SelectItem, SearchableSelect };
export type { SelectProps, SelectItemProps, SearchableSelectProps };
================================================
FILE: packages/components/src/core/slider/meta.json
================================================
{
"name": "slider",
"category": "forms",
"status": "stable",
"description": "A slider allows a user to select one or more values within a range.",
"tags": [
"form",
"interactive",
"range"
]
}
================================================
FILE: packages/components/src/core/slider/slider.tsx
================================================
"use client";
import {
Slider as AriaSlider,
SliderThumb as AriaSliderThumb,
SliderTrack as AriaSliderTrack,
Label,
type LabelProps,
SliderOutput,
type SliderProps,
type SliderThumbProps,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const slider = tv({
slots: {
root: "grid w-64 auto-cols-fr grid-cols-1 text-fg-muted",
thumb:
"h-5 w-5 rounded-full bg-primary ring-focus ring-offset-2 ring-offset-surface data-[dragging]:outline-2 data-[focus-visible]:ring-2",
track:
"before:-translate-y-1/2 relative col-span-2 col-start-1 w-full before:absolute before:top-1/2 before:h-0.5 before:w-full before:transform before:bg-secondary",
},
});
const { root, thumb, track } = slider();
const SliderRoot = ({
children,
className,
...props
}: SliderProps & { className?: string }) => (
<AriaSlider {...props} className={root({ className })}>
{children}
</AriaSlider>
);
const SliderThumb = ({
children,
className,
...props
}: SliderThumbProps & { className?: string }) => (
<AriaSliderTrack className={track()}>
<AriaSliderThumb className={thumb({ className })} {...props} />
</AriaSliderTrack>
);
const SliderLabel = ({
children,
className,
...props
}: LabelProps & { className?: string }) => (
<div className="col-span-2 my-4 flex w-full justify-between">
<Label className="text-fg text-sm" {...props}>
{children}
</Label>
<SliderOutput className="text-fg text-sm" />
</div>
);
export { SliderRoot, SliderThumb, SliderLabel };
================================================
FILE: packages/components/src/core/switch/meta.json
================================================
{
"name": "switch",
"category": "forms",
"status": "stable",
"description": "A switch allows a user to turn a setting on or off.",
"tags": [
"form",
"interactive",
"toggle"
]
}
================================================
FILE: packages/components/src/core/switch/switch.tsx
================================================
"use client";
import type { ReactNode } from "react";
import {
Switch as AriaSwitch,
type SwitchProps as AriaSwitchProps,
Label,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const switchStyles = tv({
slots: {
root: "group flex items-center gap-2 transition-none duration-200",
indicator:
"h-6 w-10 cursor-pointer rounded-xl bg-secondary duration-200 before:mx-[3px] before:mt-[3px] before:block before:size-4.5 before:rounded-2xl before:bg-surface before:transition-all data-[selected]:bg-primary group-data-[selected]:bg-primary group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-focus group-data-[focus-visible]:ring-offset-2 group-data-[focus-visible]:ring-offset-surface group-data-[selected]:before:translate-x-4",
label: "font-semibold text-fg text-sm",
},
});
const styles = switchStyles();
interface SwitchProps extends AriaSwitchProps {
children?: ReactNode;
className?: string;
}
const Switch = ({ className, children, ...restProps }: SwitchProps) => (
<AriaSwitch className={styles.root({ className })} {...restProps}>
<div className={styles.indicator()} />
<Label className={styles.label()}> {children}</Label>
</AriaSwitch>
);
export { Switch };
export type { SwitchProps };
================================================
FILE: packages/components/src/core/table/meta.json
================================================
{
"name": "table",
"category": "data-display",
"status": "stable",
"description": "A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.",
"tags": [
"data-display",
"interactive"
]
}
================================================
FILE: packages/components/src/core/table/table.tsx
================================================
"use client";
import {
Column as AriaColumn,
Table as AriaTable,
TableBody as AriaTableBody,
TableHeader as AriaTableheader,
Cell,
type CellProps,
Collection,
type ColumnProps,
Row,
type RowProps,
type TableHeaderProps,
type TableProps,
useTableOptions,
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { Menu } from "lucide-react";
import { Button } from "@/components/ui/button/button";
import { Checkbox } from "@/components/ui/checkbox/checkbox";
const table = tv({
slots: {
root: "table min-h-[100px] border-separate border-spacing-0 rounded-xl border border-border p-4 outline-none",
column: "border-border border-b-2 px-4 py-1 text-left outline-none",
header: "text-fg after:table-row after:h-[2px]",
label: "text-fg-3",
row: "relative cursor-default rounded-xl text-fg outline-none ring-focus data-[focus-visible]:ring-2",
cell: "px-4 py-2 outline-none ring-focus data-[focus-visible]:ring-2",
},
});
const styles = table();
const TableBody = AriaTableBody;
const Table = ({
children,
className,
...props
}: TableProps & { className?: string }) => (
<AriaTable {...props} className={styles.root({ className })}>
{children}
</AriaTable>
);
const TableCell = ({
children,
className,
...props
}: CellProps & { className?: string }) => (
<Cell {...props} className={styles.cell({ className })}>
{children}
</Cell>
);
const TableColumn = ({
children,
className,
...props
}: ColumnProps & { className?: string }) => (
<AriaColumn {...props} className={styles.column({ className })}>
{children}
</AriaColumn>
);
const TableHeader = <T extends object>({
children,
className,
columns,
...props
}: TableHeaderProps<T> & { className?: string }) => {
const { selectionBehavior, selectionMode, allowsDragging } =
useTableOptions();
return (
<AriaTableheader {...props} className={styles.header({ className })}>
{/* Add extra columns for drag and drop and selection. */}
{allowsDragging && <TableColumn />}
{selectionBehavior === "toggle" && (
<TableColumn>
{selectionMode === "multiple" && (
<Checkbox slot="selection"> </Checkbox>
)}
</TableColumn>
)}
<Collection items={columns}>{children}</Collection>
</AriaTableheader>
);
};
const TableRow = <T extends object>({
children,
className,
columns,
id,
...props
}: RowProps<T> & { className?: string }) => {
const { selectionBehavior, allowsDragging } = useTableOptions();
return (
<Row id={id} {...props} className={styles.row({ className })}>
{allowsDragging && (
<Cell className="ring-focus data-[focus-visible]:ring-2">
<Button className="bg-transparent" slot="drag">
<Menu className="h-4 w-4 text-fg" />
</Button>
</Cell>
)}
{selectionBehavior === "toggle" && (
<Cell className="">
<Checkbox slot="selection"> </Checkbox>
</Cell>
)}
<Collection items={columns}>{children}</Collection>
</Row>
);
};
export { TableColumn, Table, TableBody, TableCell, TableHeader, TableRow };
================================================
FILE: packages/components/src/core/tabs/meta.json
================================================
{
"name": "tabs",
"category": "navigation",
"status": "stable",
"description": "Tabs organize content into multiple sections and allow users to navigate between them.",
"tags": [
"navigation",
"interactive",
"layout"
]
}
================================================
FILE: packages/components/src/core/tabs/tabs.tsx
================================================
"use client";
import {
Tab as AriaTab,
TabList as AriaTabList,
type TabListProps as AriaTabListProps,
TabPanel as AriaTabPanel,
type TabPanelProps as AriaTabPanelProps,
type TabProps as AriaTabProps,
type TabsProps as AriaTabsProps,
Tabs as AriaTabsRoot,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const tabs = tv({
slots: {
root: "flex w-full flex-col items-start",
list: "relative inline-flex items-center justify-between gap-6 rounded-md p-1",
tab: "relative flex w-fit cursor-pointer justify-center rounded-2xl border-primary pb-0.5 font-semibold text-fg-muted outline-none ring-focus ring-offset-2 ring-offset-surface transition-colors duration-200 aria-selected:cursor-default aria-selected:rounded-none aria-selected:border-b-2 aria-selected:pb-0 aria-selected:text-primary aria-selected:hover:bg-transparent data-[hovered]:text-primary data-[focus-visible]:ring-2",
panel:
"mt-4 w-96 rounded-xl p-4 outline-none ring-focus data-[focus-visible]:ring-2",
},
});
const styles = tabs();
interface TabsProps extends Omit<AriaTabsProps, "className"> {
className?: string;
}
const TabsRoot = ({ children, className, ...props }: TabsProps) => (
<AriaTabsRoot {...props} className={styles.root({ className })}>
{children}
</AriaTabsRoot>
);
interface TabListProps<T> extends Omit<AriaTabListProps<T>, "className"> {
className?: string;
}
const TabList = <T extends object>({
children,
className,
...props
}: TabListProps<T>) => (
<AriaTabList {...props} className={styles.list({ className })}>
{children}
</AriaTabList>
);
interface TabProps extends Omit<AriaTabProps, "className"> {
className?: string;
}
const Tab = ({ children, className, ...props }: TabProps) => (
<AriaTab {...props} className={styles.tab({ className })}>
{children}
</AriaTab>
);
interface TabPanelProps extends Omit<AriaTabPanelProps, "className"> {
className?: string;
}
const TabPanel = ({ children, className, ...props }: TabPanelProps) => (
<AriaTabPanel {...props} className={styles.panel({ className })}>
{children}
</AriaTabPanel>
);
export { Tab, TabList, TabPanel, TabsRoot };
export type { TabsProps, TabListProps, TabProps, TabPanelProps };
================================================
FILE: packages/components/src/core/tag-group/meta.json
================================================
{
"name": "tag-group",
"category": "forms",
"status": "stable",
"description": "A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.",
"tags": [
"form",
"interactive",
"selection",
"filtering"
]
}
================================================
FILE: packages/components/src/core/tag-group/tag-group.tsx
================================================
"use client";
import {
Tag as AriaTag,
TagGroup as AriaTagGroup,
type TagGroupProps as AriaTagGroupProps,
type TagProps as AriaTagProps,
Label,
TagList,
type TagListProps,
Text,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const tagGroup = tv({
slots: {
root: "flex flex-col gap-2 text-sm",
list: "flex flex-wrap gap-2",
tag: "flex cursor-default items-center rounded-full border border-border px-2 py-1 outline-none ring-focus ring-offset-2 ring-offset-surface aria-selected:border-primary aria-selected:bg-primary aria-selected:text-primary-fg data-[focus-visible]:ring-2",
},
});
const styles = tagGroup();
interface TagGroupProps<T>
extends Omit<AriaTagGroupProps, "children">,
Pick<TagListProps<T>, "items" | "children" | "renderEmptyState"> {
label?: string;
description?: string;
errorMessage?: string;
}
const TagGroup = <T extends object>({
label,
className,
description,
errorMessage,
items,
children,
renderEmptyState,
...props
}: TagGroupProps<T>) => (
<AriaTagGroup className={styles.root({ className })} {...props}>
{label && <Label className="text-primary text-sm">{label}</Label>}
<TagList
className={styles.list()}
items={items}
renderEmptyState={renderEmptyState}
>
{children}
</TagList>
{description && (
<Text className="text-sm" slot="description">
{description}
</Text>
)}
{errorMessage && (
<Text className="text-danger text-sm" slot="errorMessage">
{errorMessage}
</Text>
)}
</AriaTagGroup>
);
const Tag = ({
children,
className,
...props
}: AriaTagProps & { className?: string }) => {
const textValue = typeof children === "string" ? children : undefined;
return (
<AriaTag
className={styles.tag({ className })}
textValue={textValue}
{...props}
>
{children}
</AriaTag>
);
};
export { Tag, TagGroup };
================================================
FILE: packages/components/src/core/time-field/meta.json
================================================
{
"name": "time-field",
"category": "forms",
"status": "stable",
"description": "A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.",
"tags": [
"form",
"interactive",
"time"
]
}
================================================
FILE: packages/components/src/core/time-field/time-field.tsx
================================================
"use client";
import type {
TimeFieldProps as AriaTimeFieldProps,
TimeValue,
} from "react-aria-components";
import {
TimeField as AriaTimeField,
DateInput,
DateSegment,
FieldError,
Label,
Text,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const timeField = tv({
slots: {
input:
"appearance-none rounded-lg border border-border bg-surface px-3 py-1.75 outline-none ring-primary transition-all data-[disabled]:cursor-not-allowed data-[focus-within]:border-transparent data-[disabled]:bg-primary/10 data-[focus-within]:bg-surface data-[disabled]:text-fg-disabled data-[focus-within]:ring-2 [&::placeholder]:text-sm [&::placeholder]:focus:text-primary-fg",
segmentStyles:
"rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted",
},
});
const styles = timeField();
interface TimeFieldProps<T extends TimeValue> extends AriaTimeFieldProps<T> {
label?: string;
description?: string;
errorMessage?: string;
}
const TimeField = <T extends TimeValue>({
label,
description,
errorMessage,
...props
}: TimeFieldProps<T>) => (
<AriaTimeField className="flex w-fit min-w-36 flex-col gap-1" {...props}>
{label && <Label className="text-sm">{label}</Label>}
<DateInput className={styles.input()}>
{(segment) => (
<DateSegment className={styles.segmentStyles()} segment={segment} />
)}
</DateInput>
{description && (
<Text className="text-fg-muted text-sm" slot="description">
{description}
</Text>
)}
<FieldError className="text-danger text-sm">{errorMessage}</FieldError>
</AriaTimeField>
);
export { TimeField };
export type { TimeFieldProps };
================================================
FILE: packages/components/src/core/toggle/meta.json
================================================
{
"name": "toggle",
"category": "forms",
"status": "stable",
"description": "A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.",
"tags": [
"form",
"interactive",
"toggle"
]
}
================================================
FILE: packages/components/src/core/toggle/toggle.tsx
================================================
"use client";
import type { ReactNode } from "react";
import {
ToggleButton,
ToggleButtonGroup,
type ToggleButtonGroupProps,
type ToggleButtonProps,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const toggle = tv({
base: "inline-flex appearance-none items-center justify-center rounded-full bg-surface-2 px-4 py-1 font-medium outline-none ring-focus ring-offset-2 ring-offset-surface transition-transform duration-100 disabled:pointer-events-none disabled:opacity-50 data-[selected]:bg-primary data-[selected]:text-primary-fg data-[focus-visible]:ring-2",
});
const toggleGroup = tv({
base: "flex min-h-11 gap-1 rounded-full border border-border bg-surface-2 p-1",
});
interface ToggleProps extends Omit<ToggleButtonProps, "className"> {
className?: string;
}
const Toggle = ({ className, children, ...props }: ToggleProps) => (
<ToggleButton className={toggle({ className })} {...props}>
{children}
</ToggleButton>
);
interface ToggleGroupProps extends ToggleButtonGroupProps {
className?: string;
children: ReactNode;
}
const ToggleGroup = ({ className, children, ...props }: ToggleGroupProps) => (
<ToggleButtonGroup {...props} className={toggleGroup({ className })}>
{children}
</ToggleButtonGroup>
);
export { Toggle, ToggleGroup };
export type { ToggleProps, ToggleGroupProps };
================================================
FILE: packages/components/src/core/tooltip/meta.json
================================================
{
"name": "tooltip",
"category": "overlays",
"status": "stable",
"description": "A tooltip displays a description of an element on hover or focus.",
"tags": [
"overlay",
"interactive",
"help"
]
}
================================================
FILE: packages/components/src/core/tooltip/tooltip.tsx
================================================
"use client";
import type { ReactNode } from "react";
import {
Tooltip as AriaTooltip,
type TooltipProps as AriaTooltipProps,
TooltipTrigger as AriaTooltipTrigger,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const tooltip = tv({
base: "[&[data-entering]]:fade-in [&[data-exiting]]:fade-out m-1 max-w-sm rounded-full border border-border bg-surface px-4 py-2 text-fg shadow-xl outline-none [&[data-entering]]:animate-fade-in [&[data-exiting]]:animate-fade-out",
});
const TooltipTrigger = AriaTooltipTrigger;
interface TooltipProps extends Omit<AriaTooltipProps, "children"> {
className?: string;
children: ReactNode;
}
const Tooltip = ({ children, className, ...props }: TooltipProps) => (
<AriaTooltip className={tooltip({ className })} {...props}>
{children}
</AriaTooltip>
);
export { Tooltip, TooltipTrigger };
================================================
FILE: packages/components/src/examples/accordion-base.tsx
================================================
import { Accordion } from "../core/accordion/accordion";
export const AccordionBase = () => {
return (
<Accordion className="size-72 lg:size-80 xl:size-96" title="How do I cancel my subscription?">
You can cancel your subscription at any time by going to your account
settings and clicking "Cancel Subscription". Your access will continue
until the end of your current billing period, and you won't be charged
again. All your data will be safely stored for 30 days in case you decide
to reactivate.
</Accordion>
);
};
================================================
FILE: packages/components/src/examples/accordion-group.tsx
================================================
import { Accordion, AccordionGroup } from "../core/accordion/accordion";
export const AccordionGroupExample = () => {
return (
<div className="h-[500px]">
<AccordionGroup
className="w-72 lg:w-80"
defaultExpandedKeys={["getting-started"]}
>
<Accordion id="getting-started" title="Getting Started">
<div className="space-y-3">
<p>
<strong>Quick Setup:</strong> Install our SDK with npm install
@company/sdk
</p>
<p>
<strong>API Key:</strong> Generate your API key from the dashboard
</p>
<p>
<strong>First Request:</strong> Make your first API call in under
5 minutes
</p>
<p>
Our comprehensive documentation includes code examples in Python,
JavaScript, and cURL. Start building in minutes with our
interactive tutorials.
</p>
</div>
</Accordion>
<Accordion id="authentication" title="Authentication & Security">
<div className="space-y-3">
<p>
<strong>API Keys:</strong> Secure your requests with bearer token
authentication
</p>
<p>
<strong>Rate Limits:</strong> 1,000 requests per minute on free
tier, unlimited on pro
</p>
<p>
<strong>Webhooks:</strong> Real-time notifications with 256-bit
SSL encryption
</p>
<p>
Enterprise-grade security with SOC 2 compliance, end-to-end
encryption, and 99.9% uptime SLA.
</p>
</div>
</Accordion>
<Accordion id="integrations" title="Integrations & SDKs">
<div className="space-y-3">
<p>
<strong>Official SDKs:</strong> JavaScript, Python, Ruby, Go, PHP
</p>
<p>
<strong>Frameworks:</strong> React, Vue, Angular, Next.js
components
</p>
<p>
<strong>Platforms:</strong> Slack, Discord, Teams, Notion
integrations
</p>
<p>
Join 50,000+ developers using our APIs. Browse community-built
packages and contribute to our open-source ecosystem.
</p>
</div>
</Accordion>
</AccordionGroup>
</div>
);
};
================================================
FILE: packages/components/src/examples/badge-base.tsx
================================================
import { Badge } from "../core/badge/badge";
export const BadgeBase = () => {
return (
<Badge>New</Badge>
);
};
================================================
FILE: packages/components/src/examples/badge-variants.tsx
================================================
import { Badge } from "../core/badge/badge";
export const BadgeVariants = () => {
return (
<div className="flex items-center justify-center gap-2">
<Badge variant="attention">Attention</Badge>
<Badge variant="neutral">Neutral</Badge>
<Badge variant="danger">Danger</Badge>
</div>
);
};
================================================
FILE: packages/components/src/examples/breadcrumbs-base.tsx
================================================
import { ChevronRightIcon } from "lucide-react";
import { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink } from "../core/breadcrumbs/breadcrumbs";
export const BreadcrumbsBase = () => {
return (
<div className='flex items-center justify-center gap-2'>
<Breadcrumbs>
<BreadcrumbsItem>
<BreadcrumbsLink>Home</BreadcrumbsLink>
<ChevronRightIcon className='h-4 w-4' />
</BreadcrumbsItem>
<BreadcrumbsItem>
<BreadcrumbsLink>Documents</BreadcrumbsLink>
<ChevronRightIcon className='h-4 w-4' />
</BreadcrumbsItem>
<BreadcrumbsItem>
<BreadcrumbsLink>Recent</BreadcrumbsLink>
</BreadcrumbsItem>
</Breadcrumbs>
</div>
);
};
================================================
FILE: packages/components/src/examples/breadcrumbs-seperators.tsx
================================================
import { SlashIcon } from "lucide-react";
import { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink } from "../core/breadcrumbs/breadcrumbs";
export const BreadcrumbsSeperators = () => {
return (
<div className='flex items-center justify-center gap-2'>
<Breadcrumbs>
<BreadcrumbsItem>
<BreadcrumbsLink>Home</BreadcrumbsLink>
<SlashIcon className='h-4 w-4' />
</BreadcrumbsItem>
<BreadcrumbsItem>
<BreadcrumbsLink>Documents</BreadcrumbsLink>
<SlashIcon className='h-4 w-4' />
</BreadcrumbsItem>
<BreadcrumbsItem>
<BreadcrumbsLink>Recent</BreadcrumbsLink>
</BreadcrumbsItem>
</Breadcrumbs>
</div>
);
};
================================================
FILE: packages/components/src/examples/button-base.tsx
================================================
import { Button } from "../core/button/button";
export const ButtonBase = () => {
return (
<Button>Button</Button>
);
};
================================================
FILE: packages/components/src/examples/button-helper-icons.tsx
================================================
import { PlusIcon, TrashIcon } from "lucide-react";
import { Button } from "../core/button/button";
export const ButtonHelperIcons = () => {
return (
<div className="flex flex-wrap items-center gap-4">
<Button
variant="primary"
className="flex items-center justify-center gap-2"
>
<PlusIcon className="h-4 w-4" />
<span>Add Item</span>
</Button>
<Button variant="danger" className="flex items-center justify-center gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete</span>
</Button>
</div>
);
};
================================================
FILE: packages/components/src/examples/button-sizes.tsx
================================================
import { PlusIcon } from "lucide-react";
import { Button } from "../core/button/button";
export const ButtonSizes = () => {
return (
<div className="flex items-center gap-4">
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button aria-label="Add Item" size="icon">
<PlusIcon className="size-4" />
</Button>
</div>
);
};
================================================
FILE: packages/components/src/examples/button-variants.tsx
================================================
import { Button } from "../core/button/button";
export const ButtonVariants = () => {
return (
<div className="flex flex-wrap items-center gap-4">
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger">Danger</Button>
<Button variant="ghost">Ghost</Button>
</div>
);
};
================================================
FILE: packages/components/src/examples/calendar-base.tsx
================================================
import { Calendar } from "../core/calendar/calendar";
export const CalendarExample = () => (
<div className="flex items-center justify-center p-8">
<Calendar />
</div>
);
================================================
FILE: packages/components/src/examples/card-base.tsx
================================================
import { GithubIcon } from "lucide-react";
import { Button } from "../core/button/button";
import { Card, CardContent, CardFooter } from "../core/card/card";
import { Input } from "../core/input/input";
export const CardBase = () => {
return (
<Card
className="w-72 md:w-96"
title="Sign in"
description="Sign in to your account."
>
<CardContent>
<form>
<div className="flex w-full flex-col items-center justify-between gap-4">
<Input
className="w-full"
label="Email"
placeholder="Email"
/>
<Input
className="w-full"
label="Password"
placeholder="Password"
/>
</div>
</form>
</CardContent>
<CardFooter className="flex w-full flex-col justify-between gap-3">
<Button className="w-full">Sign in</Button>
<Button className="w-full gap-4" variant="secondary">
<GithubIcon className="size-4" />
Continue with GitHub
</Button>
</CardFooter>
</Card>
);
};
================================================
FILE: packages/components/src/examples/card-variants.tsx
================================================
import { Card, CardContent } from "../core/card/card";
export const CardVariants = () => {
return (
<div className="flex flex-wrap gap-4">
<Card
className="w-[300px]"
variant="outlined"
title="Outlined Card"
description="Default outlined card variant."
>
<CardContent>
<p>Content goes here with outlined border.</p>
</CardContent>
</Card>
<Card
className="w-[300px]"
variant="filled"
title="Filled Card"
description="This card has a filled background."
>
<CardContent>
<p>Content goes here with surface 2 background.</p>
</CardContent>
</Card>
</div>
);
};
================================================
FILE: packages/components/src/examples/checkbox-base.tsx
================================================
import { Checkbox } from "../core/checkbox/checkbox";
export const CheckboxBase = () => {
return (
<Checkbox>Accept terms and conditions</Checkbox>
);
};
================================================
FILE: packages/components/src/examples/checkbox-group.tsx
================================================
import { Checkbox, CheckboxGroup } from "../core/checkbox/checkbox";
export const CheckboxGroupExample = () => {
return (
<CheckboxGroup>
<Checkbox value="option-1">Option 1</Checkbox>
<Checkbox value="option-2">Option 2</Checkbox>
<Checkbox value="option-3">Option 3</Checkbox>
</CheckboxGroup>
);
};
================================================
FILE: packages/components/src/examples/combobox-base.tsx
================================================
import { ComboBox, ComboBoxItem } from "../core/combobox/combobox";
const countries = [
"United States",
"United Kingdom",
"Canada",
"Australia",
"Germany",
"France",
"Japan",
"Brazil",
"India",
"China",
"Mexico",
"Netherlands",
"Sweden",
"Norway",
"Italy",
];
export const ComboboxBase = () => {
return (
<div className="flex w-64 items-center justify-center gap-2">
<ComboBox label="Select Country">
{countries.map((country) => (
<ComboBoxItem key={country} textValue={country}>
{country}
</ComboBoxItem>
))}
</ComboBox>
</div>
);
};
================================================
FILE: packages/components/src/examples/combobox-disabled-option.tsx
================================================
import { ComboBox, ComboBoxItem } from "../core/combobox/combobox";
export const ComboboxDisabledOption = () => {
return (
<div className="flex w-64 items-center justify-center gap-2">
<ComboBox label="Select a Model">
<ComboBoxItem textValue="ChatGPT">ChatGPT</ComboBoxItem>
<ComboBoxItem isDisabled textValue="Gemini">Gemini</ComboBoxItem>
<ComboBoxItem textValue="Claude">Claude</ComboBoxItem>
</ComboBox>
</div>
);
};
================================================
FILE: packages/components/src/examples/combobox-menu-trigger.tsx
================================================
import { ComboBox, ComboBoxItem } from "../core/combobox/combobox";
export const ComboboxMenuTrigger = () => {
return (
<div className="flex w-64 items-center justify-center gap-2">
<ComboBox label="Select a Model" menuTrigger="focus">
<ComboBoxItem textValue="ChatGPT">ChatGPT</ComboBoxItem>
<ComboBoxItem textValue="Gemini">Gemini</ComboBoxItem>
<ComboBoxItem textValue="Claude">Claude</ComboBoxItem>
</ComboBox>
</div>
);
};
================================================
FILE: packages/components/src/examples/command-base.tsx
================================================
"use client";
import {
Calendar,
FileBarChart,
Flag,
FolderPlus,
MessageSquare,
Plus,
RotateCcw,
Target,
UserPlus,
Users,
} from "lucide-react";
import { Command, type CommandItem } from "../core/command/command";
export const CommandBase = () => {
const commands = [
{ id: "create-task", label: "Create new task", icon: Plus },
{ id: "create-project", label: "Create new project", icon: FolderPlus },
{ id: "assign-task", label: "Assign task to team member", icon: UserPlus },
{ id: "set-priority", label: "Set task priority", icon: Flag },
{ id: "change-status", label: "Change task status", icon: RotateCcw },
{ id: "add-comment", label: "Add comment to task", icon: MessageSquare },
{ id: "set-deadline", label: "Set task deadline", icon: Calendar },
{ id: "create-milestone", label: "Create project milestone", icon: Target },
{
id: "generate-report",
label: "Generate project report",
icon: FileBarChart,
},
{ id: "invite-member", label: "Invite team member", icon: Users },
] satisfies CommandItem[];
return (
<div className="flex w-96 items-center justify-center p-8">
<Command
commands={commands}
triggerKey="x"
onCommandSelect={(command) => {
console.log("Executed:", command.label);
}}
/>
</div>
);
};
================================================
FILE: packages/components/src/examples/command-custom-trigger.tsx
================================================
"use client";
import {
Calendar,
FileBarChart,
Flag,
FolderPlus,
MessageSquare,
Plus,
RotateCcw,
Search,
Target,
UserPlus,
Users,
} from "lucide-react";
import { Button } from "../core/button/button";
import { Command, type CommandItem } from "../core/command/command";
export const CommandCustomTrigger = () => {
const commands = [
{ id: "create-task", label: "Create new task", icon: Plus },
{ id: "create-project", label: "Create new project", icon: FolderPlus },
{ id: "assign-task", label: "Assign task to team member", icon: UserPlus },
{ id: "set-priority", label: "Set task priority", icon: Flag },
{ id: "change-status", label: "Change task status", icon: RotateCcw },
{ id: "add-comment", label: "Add comment to task", icon: MessageSquare },
{ id: "set-deadline", label: "Set task deadline", icon: Calendar },
{ id: "create-milestone", label: "Create project milestone", icon: Target },
{
id: "generate-report",
label: "Generate project report",
icon: FileBarChart,
},
{ id: "invite-member", label: "Invite team member", icon: Users },
] satisfies CommandItem[];
return (
<div className="flex w-96 items-center justify-center p-8">
<Command
commands={commands}
triggerKey="x"
trigger={
<Button variant="secondary" size="lg">
Search commands
</Button>
}
onCommandSelect={(command) => {
console.log("Executed:", command.label);
}}
/>
</div>
);
};
================================================
FILE: packages/components/src/examples/date-field-base.tsx
================================================
import { DateField } from "../core/date-field/date-field";
export const DateFieldBase = () => {
return <DateField label="Birthday" />;
};
================================================
FILE: packages/components/src/examples/date-picker-base.tsx
================================================
import { DatePicker } from "../core/date-picker/date-picker";
export const DatePickerBase = () => <DatePicker label="Check In" />;
================================================
FILE: packages/components/src/examples/date-range-picker-base.tsx
================================================
import { DateRangePicker } from "../core/date-picker/date-picker";
export const DateRangePickerBase = () => (
<div className="flex w-64 items-center justify-center lg:w-96">
<DateRangePicker label="Trip Dates" />
</div>
);
================================================
FILE: packages/components/src/examples/index.ts
================================================
export * from "./accordion-base";
export * from "./accordion-group";
export * from "./badge-base";
export * from "./badge-variants";
export * from "./breadcrumbs-base";
export * from "./breadcrumbs-seperators";
export * from "./button-base";
export * from "./button-helper-icons";
export * from "./button-sizes";
export * from "./button-variants";
export * from "./calendar-base";
export * from "./card-base";
export * from "./card-variants";
export * from "./checkbox-base";
export * from "./checkbox-group";
export * from "./combobox-base";
export * from "./combobox-disabled-option";
export * from "./combobox-menu-trigger";
export * from "./command-base";
export * from "./command-custom-trigger";
export * from "./date-field-base";
export * from "./date-picker-base";
export * from "./date-range-picker-base";
export * from "./input-base";
export * from "./input-disabled";
export * from "./input-label";
export * from "./menu-base";
export * from "./meter-base";
export * from "./modal-base";
export * from "./modal-dismissable";
export * from "./popover-base";
export * from "./radio-group-base";
export * from "./range-calendar-base";
export * from "./select-base";
export * from "./select-popover-classname";
export * from "./select-searchable";
export * from "./slider-base";
export * from "./switch-base";
export * from "./table-base";
export * from "./tabs-base";
export * from "./tag-group-base";
export * from "./time-field-base";
export * from "./toggle-base";
export * from "./toggle-group-base";
export * from "./tooltip-base";
================================================
FILE: packages/components/src/examples/input-base.tsx
================================================
import { Input } from "../core/input/input";
export const InputBase = () => {
return (
<div className="flex w-56 flex-col gap-2">
<Input aria-label="email" placeholder="Enter your email" />
</div>
);
};
================================================
FILE: packages/components/src/examples/input-disabled.tsx
================================================
import { Input } from "../core/input/input";
export const InputDisabled = () => {
return (
<div className="flex w-56 flex-col gap-2">
<Input label="Email" placeholder="example@email.com" isDisabled />
</div>
);
};
================================================
FILE: packages/components/src/examples/input-label.tsx
================================================
import { Input } from "../core/input/input";
export const InputLabel = () => {
return (
<div className="flex w-56 flex-col gap-2">
<Input label="Email" placeholder="example@email.com" />
</div>
);
};
================================================
FILE: packages/components/src/examples/menu-base.tsx
================================================
import {
HelpCircle,
LogOut,
Plus,
Settings,
} from "lucide-react";
import { Button } from "../core/button/button";
import {
MenuContent,
MenuHeader,
MenuItem,
MenuSection,
MenuSeperator,
MenuTrigger,
} from "../core/menu/menu";
export const Menu = () => {
return (
<MenuTrigger>
<Button size="icon" className="size-12 rounded-full p-0">
Z
</Button>
<MenuContent className="w-72">
<MenuSection>
<MenuHeader>me@hello.com</MenuHeader>
</MenuSection>
<MenuSeperator />
<MenuItem>
Account Settings
<Settings />
</MenuItem>
<MenuItem>
Add Account
<Plus />
</MenuItem>
<MenuSeperator />
<MenuItem>
Support
<HelpCircle />
</MenuItem>
<MenuItem>
Logout
<LogOut />
</MenuItem>
</MenuContent>
</MenuTrigger>
);
};
================================================
FILE: packages/components/src/examples/meter-base.tsx
================================================
import { Meter } from "../core/meter/meter";
export const MeterExample = () => <Meter label="Monthly Usage" value={80} />;
================================================
FILE: packages/components/src/examples/modal-base.tsx
================================================
"use client";
import { Heading } from "react-aria-components";
import { Button } from "../core/button/button";
import { Input } from "../core/input/input";
import { Dialog, Modal, ModalTrigger } from "../core/modal/modal";
export const ModalExample = () => {
return (
<ModalTrigger>
<Button variant="secondary">Edit</Button>
<Modal>
<Dialog>
<Heading slot="title" className="font-bold text-lg">Edit Name</Heading>
<div className="flex flex-col justify-center gap-6">
<Input label="Name" defaultValue="John Doe" />
<div className="flex flex-col gap-3">
<Button slot="close">
Update
</Button>
<Button variant="secondary" slot="close">
Cancel
</Button>
</div>
</div>
</Dialog >
</Modal>
</ModalTrigger>
);
};
================================================
FILE: packages/components/src/examples/modal-dismissable.tsx
================================================
"use client";
import { Heading } from "react-aria-components";
import { Button } from "../core/button/button";
import { Input } from "../core/input/input";
import { Dialog, Modal, ModalTrigger } from "../core/modal/modal";
export const ModalDismissable = () => {
return (
<ModalTrigger>
<Button>Edit</Button>
<Modal isDismissable>
<Dialog>
<Heading slot="title" className="font-bold text-lg">Edit Name</Heading>
<div className="flex flex-col justify-center gap-6">
<Input label="Name" defaultValue="John Doe" />
<div className="flex flex-col gap-2">
<Button slot="close">
Update
</Button>
<Button variant="secondary" slot="close">
Cancel
</Button>
</div>
</div>
</Dialog>
</Modal>
</ModalTrigger>
);
};
================================================
FILE: packages/components/src/examples/popover-base.tsx
================================================
import { Calendar, MapPin, MessageCircle, Settings, Star, User } from "lucide-react";
import { Button } from "../core/button/button";
import { Popover, PopoverTrigger } from "../core/popover/popover";
export const PopoverExample = () => (
<PopoverTrigger>
<Button className="flex items-center gap-4">
<User className="size-4" />
<span className="font-medium text-sm">Alex Morgan</span>
</Button>
<Popover>
<div className="w-80 p-4">
<div className="mb-4 flex items-start gap-3">
<div className="flex-1">
<h3 className="font-semibold text-lg">Alex Morgan</h3>
<p className="text-fg-muted text-sm">Senior Product Designer</p>
<div className="mt-1 flex items-center gap-1 text-fg-muted text-xs">
<MapPin className="size-3" />
<span>San Francisco, CA</span>
</div>
</div>
</div>
<div className="mb-4 grid grid-cols-3 gap-4 rounded-lg bg-surface-2 p-3">
<div className="text-center">
<div className="font-semibold text-lg">127</div>
<div className="text-fg-muted text-xs">Projects</div>
</div>
<div className="text-center">
<div className="font-semibold text-lg">4.9</div>
<div className="flex items-center justify-center gap-1 text-fg-muted text-xs">
<Star className="size-3 fill-current text-yellow-500" />
Rating
</div>
</div>
<div className="text-center">
<div className="font-semibold text-lg">2.1k</div>
<div className="text-fg-muted text-xs">Followers</div>
</div>
</div>
<p className="mb-4 text-fg-muted text-sm">
Passionate about creating intuitive user experiences and building design systems that scale.
</p>
<div className="flex gap-2">
<Button size="sm" className="flex-1 gap-2">
<MessageCircle className="size-4" />
Message
</Button>
<Button variant="secondary" size="sm" className="flex-1 gap-2">
<Calendar className="size-4" />
Schedule
</Button>
<Button variant="ghost" size="icon">
<Settings className="size-4" />
</Button>
</div>
</div>
</Popover>
</PopoverTrigger>
);
================================================
FILE: packages/components/src/examples/radio-group-base.tsx
================================================
import { Radio, RadioGroup } from "../core/radio-group/radio-group";
export const RadioExample = () => (
<RadioGroup label="Choose your preferred contact method:" defaultValue="email">
<Radio value="email">Email</Radio>
<Radio value="phone">Phone Call</Radio>
<Radio value="sms">Text Message</Radio>
</RadioGroup>
);
================================================
FILE: packages/components/src/examples/range-calendar-base.tsx
================================================
import { RangeCalendar } from "../core/calendar/calendar";
export const RangeCalendarBase = () => <RangeCalendar />;
================================================
FILE: packages/components/src/examples/select-base.tsx
================================================
import { Select, SelectItem } from "../core/select/select";
export const SelectExample = () => {
return (
<Select aria-label="timeframe" placeholder="Timeframe" className="w-40">
<SelectItem>Today</SelectItem>
<SelectItem>This Week</SelectItem>
<SelectItem>This Month</SelectItem>
<SelectItem>This Year</SelectItem>
</Select>
);
};
================================================
FILE: packages/components/src/examples/select-popover-classname.tsx
================================================
import { Select, SelectItem } from "../core/select/select";
export const SelectPopoverClassname = () => {
return (
<Select
aria-label="timeframe"
placeholder="Timeframe"
className="w-36"
popoverClassName="min-w-48"
>
<SelectItem>Today</SelectItem>
<SelectItem>This Week</SelectItem>
<SelectItem>This Month</SelectItem>
<SelectItem>This Year</SelectItem>
</Select>
);
};
================================================
FILE: packages/components/src/examples/select-searchable.tsx
================================================
import { SearchableSelect, SelectItem } from "../core/select/select";
export const SearchableSelectExample = () => {
return (
<div className="flex w-full flex-col gap-2">
<SearchableSelect
label="Model"
searchPlaceholder="Search"
className="w-48"
>
<SelectItem textValue="4o">4o</SelectItem>
<SelectItem textValue="o3">o3</SelectItem>
<SelectItem textValue="Sonnet 4">Sonnet 4</SelectItem>
<SelectItem textValue="Gemini 2.0">Gemini 2.0</SelectItem>
</SearchableSelect>
</div>
);
};
================================================
FILE: packages/components/src/examples/slider-base.tsx
================================================
import { SliderLabel, SliderRoot, SliderThumb } from "../core/slider/slider";
export const Slider = () => {
return (
<SliderRoot defaultValue={30}>
<SliderLabel>Temperature</SliderLabel>
<SliderThumb />
</SliderRoot>
);
};
================================================
FILE: packages/components/src/examples/switch-base.tsx
================================================
import { Switch } from "../core/switch/switch";
export const SwitchBase = () => {
return <Switch>On/Off</Switch>;
};
================================================
FILE: packages/components/src/examples/table-base.tsx
================================================
"use client";
import {
Table,
TableBody,
TableCell,
TableColumn,
TableHeader,
TableRow,
} from "../core/table/table";
interface User {
id: number;
name: string;
email: string;
role: string;
status: "Active" | "Inactive" | "Pending";
}
const users: User[] = [
{
id: 1,
name: "Alice Johnson",
email: "alice@example.com",
role: "Admin",
status: "Active",
},
{
id: 2,
name: "Bob Smith",
email: "bob@example.com",
role: "Developer",
status: "Active",
},
{
id: 3,
name: "Carol Davis",
email: "carol@example.com",
role: "Designer",
status: "Pending",
},
{
id: 4,
name: "David Wilson",
email: "david@example.com",
role: "Developer",
status: "Inactive",
},
{
id: 5,
name: "Eva Brown",
email: "eva@example.com",
role: "Manager",
status: "Active",
},
];
export const TableExample = () => (
<div className="ml-56 md:ml-0">
<Table aria-label="User management table" className="shrink-0">
<TableHeader>
<TableColumn isRowHeader>Name</TableColumn>
<TableColumn>Email</TableColumn>
<TableColumn>Role</TableColumn>
<TableColumn>Status</TableColumn>
</TableHeader>
<TableBody items={users}>
{(user) => (
<TableRow key={user.id}>
<TableCell>{user.name}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>{user.role}</TableCell>
<TableCell>
<span
className={`inline-flex rounded-full px-2 py-1 font-semibold text-xs ${
user.status === "Active"
? "bg-green-100 text-green-800"
: user.status === "Pending"
? "bg-yellow-100 text-yellow-800"
: "bg-red-100 text-red-800"
}`}
>
{user.status}
</span>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
);
================================================
FILE: packages/components/src/examples/tabs-base.tsx
================================================
import { ArrowDown, Heart, Plus } from "lucide-react";
import { Tab, TabList, TabPanel, TabsRoot } from "../core/tabs/tabs";
export const TabsExample = () => {
return (
<TabsRoot className="h-[450px]">
<TabList className="px-10">
<Tab id="for-you">For You</Tab>
<Tab id="browse">Browse</Tab>
<Tab id="library">Library</Tab>
</TabList>
<TabPanel className="px-10" id="for-you">
<div className="space-y-4">
<div>
<h3 className="mb-3 font-semibold">Made for You</h3>
<div className="space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="size-12 rounded-lg bg-gradient-to-br from-purple-400 to-pink-400"></div>
<div>
<p className="font-semibold">Electric Dreams</p>
<p className="text-fg-muted text-sm">
Synthwave Collective
</p>
</div>
</div>
<p className="text-fg-muted text-sm">3:42</p>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="size-12 rounded-lg bg-gradient-to-br from-blue-400 to-cyan-400"></div>
<div>
<p className="font-semibold">Ocean Breeze</p>
<p className="text-fg-muted text-sm">Coastal Sounds</p>
</div>
</div>
<p className="text-fg-muted text-sm">4:15</p>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="size-12 rounded-lg bg-gradient-to-br from-green-400 to-blue-400"></div>
<div>
<p className="font-semibold">Forest Whispers</p>
<p classNa
gitextract_31woigsj/
├── .cursorrules
├── .github/
│ └── workflows/
│ └── sync-components.yml
├── .gitignore
├── .prototools
├── LICENSE.md
├── README.md
├── biome.json
├── package.json
├── packages/
│ ├── components/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── registry.json
│ │ ├── scripts/
│ │ │ └── gen-registry-json.ts
│ │ ├── src/
│ │ │ ├── core/
│ │ │ │ ├── accordion/
│ │ │ │ │ ├── accordion.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── badge/
│ │ │ │ │ ├── badge.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── breadcrumbs/
│ │ │ │ │ ├── breadcrumbs.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── button/
│ │ │ │ │ ├── button.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── calendar/
│ │ │ │ │ ├── calendar.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── card/
│ │ │ │ │ ├── card.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── checkbox/
│ │ │ │ │ ├── checkbox.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── combobox/
│ │ │ │ │ ├── combobox.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── command/
│ │ │ │ │ ├── command.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── date-field/
│ │ │ │ │ ├── date-field.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── date-picker/
│ │ │ │ │ ├── date-picker.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── index.ts
│ │ │ │ ├── input/
│ │ │ │ │ ├── input.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── menu/
│ │ │ │ │ ├── menu.tsx
│ │ │ │ │ └── meta.json
│ │ │ │ ├── meter/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── meter.tsx
│ │ │ │ ├── modal/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── modal.tsx
│ │ │ │ ├── popover/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── popover.tsx
│ │ │ │ ├── radio-group/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── radio-group.tsx
│ │ │ │ ├── select/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── select.tsx
│ │ │ │ ├── slider/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── slider.tsx
│ │ │ │ ├── switch/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── switch.tsx
│ │ │ │ ├── table/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── table.tsx
│ │ │ │ ├── tabs/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── tabs.tsx
│ │ │ │ ├── tag-group/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── tag-group.tsx
│ │ │ │ ├── time-field/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── time-field.tsx
│ │ │ │ ├── toggle/
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── toggle.tsx
│ │ │ │ └── tooltip/
│ │ │ │ ├── meta.json
│ │ │ │ └── tooltip.tsx
│ │ │ ├── examples/
│ │ │ │ ├── accordion-base.tsx
│ │ │ │ ├── accordion-group.tsx
│ │ │ │ ├── badge-base.tsx
│ │ │ │ ├── badge-variants.tsx
│ │ │ │ ├── breadcrumbs-base.tsx
│ │ │ │ ├── breadcrumbs-seperators.tsx
│ │ │ │ ├── button-base.tsx
│ │ │ │ ├── button-helper-icons.tsx
│ │ │ │ ├── button-sizes.tsx
│ │ │ │ ├── button-variants.tsx
│ │ │ │ ├── calendar-base.tsx
│ │ │ │ ├── card-base.tsx
│ │ │ │ ├── card-variants.tsx
│ │ │ │ ├── checkbox-base.tsx
│ │ │ │ ├── checkbox-group.tsx
│ │ │ │ ├── combobox-base.tsx
│ │ │ │ ├── combobox-disabled-option.tsx
│ │ │ │ ├── combobox-menu-trigger.tsx
│ │ │ │ ├── command-base.tsx
│ │ │ │ ├── command-custom-trigger.tsx
│ │ │ │ ├── date-field-base.tsx
│ │ │ │ ├── date-picker-base.tsx
│ │ │ │ ├── date-range-picker-base.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── input-base.tsx
│ │ │ │ ├── input-disabled.tsx
│ │ │ │ ├── input-label.tsx
│ │ │ │ ├── menu-base.tsx
│ │ │ │ ├── meter-base.tsx
│ │ │ │ ├── modal-base.tsx
│ │ │ │ ├── modal-dismissable.tsx
│ │ │ │ ├── popover-base.tsx
│ │ │ │ ├── radio-group-base.tsx
│ │ │ │ ├── range-calendar-base.tsx
│ │ │ │ ├── select-base.tsx
│ │ │ │ ├── select-popover-classname.tsx
│ │ │ │ ├── select-searchable.tsx
│ │ │ │ ├── slider-base.tsx
│ │ │ │ ├── switch-base.tsx
│ │ │ │ ├── table-base.tsx
│ │ │ │ ├── tabs-base.tsx
│ │ │ │ ├── tag-group-base.tsx
│ │ │ │ ├── time-field-base.tsx
│ │ │ │ ├── toggle-base.tsx
│ │ │ │ ├── toggle-group-base.tsx
│ │ │ │ └── tooltip-base.tsx
│ │ │ ├── index.ts
│ │ │ └── tailwind.css
│ │ └── tsconfig.json
│ └── registry/
│ ├── CHANGELOG.md
│ ├── package.json
│ ├── src/
│ │ ├── index.ts
│ │ └── schema.ts
│ └── tsconfig.json
├── pnpm-workspace.yaml
├── turbo.json
└── web/
├── .gitignore
├── CHANGELOG.md
├── README.md
├── app/
│ ├── api/
│ │ ├── examples/
│ │ │ └── [name]/
│ │ │ └── route.ts
│ │ └── search/
│ │ └── route.ts
│ ├── docs/
│ │ ├── [...slug]/
│ │ │ └── page.tsx
│ │ ├── content/
│ │ │ ├── components/
│ │ │ │ ├── accordion.mdx
│ │ │ │ ├── badge.mdx
│ │ │ │ ├── breadcrumbs.mdx
│ │ │ │ ├── button.mdx
│ │ │ │ ├── calendar.mdx
│ │ │ │ ├── card.mdx
│ │ │ │ ├── checkbox.mdx
│ │ │ │ ├── combobox.mdx
│ │ │ │ ├── command.mdx
│ │ │ │ ├── date-field.mdx
│ │ │ │ ├── date-picker.mdx
│ │ │ │ ├── input.mdx
│ │ │ │ ├── menu.mdx
│ │ │ │ ├── meter.mdx
│ │ │ │ ├── modal.mdx
│ │ │ │ ├── popover.mdx
│ │ │ │ ├── radio-group.mdx
│ │ │ │ ├── select.mdx
│ │ │ │ ├── slider.mdx
│ │ │ │ ├── switch.mdx
│ │ │ │ ├── table.mdx
│ │ │ │ ├── tabs.mdx
│ │ │ │ ├── tag-group.mdx
│ │ │ │ ├── time-field.mdx
│ │ │ │ ├── toggle.mdx
│ │ │ │ └── tooltip.mdx
│ │ │ ├── intro.mdx
│ │ │ ├── styles.mdx
│ │ │ └── usage.mdx
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── globals.css
│ ├── layout.tsx
│ ├── llms.txt/
│ │ └── route.ts
│ ├── page.tsx
│ └── r/
│ └── [[...segments]]/
│ └── route.ts
├── components/
│ ├── code-block-client.tsx
│ ├── code-block.tsx
│ ├── component-metadata.tsx
│ ├── docs-page.tsx
│ ├── mdx-components.tsx
│ ├── mobile-nav.tsx
│ ├── open-in-ai-menu.tsx
│ ├── preview.tsx
│ ├── rac-link.tsx
│ ├── search.tsx
│ ├── sidebar-link.tsx
│ ├── sidebar.tsx
│ ├── table-of-contents.tsx
│ └── theme-toggle.tsx
├── components.json
├── hooks/
│ └── use-active-heading.ts
├── lib/
│ ├── component-data.ts
│ ├── cx.ts
│ ├── examples-map.ts
│ ├── metadata.ts
│ ├── navigation.ts
│ └── source.ts
├── next.config.ts
├── package.json
├── postcss.config.mjs
├── public/
│ └── r/
│ ├── accordion.json
│ ├── badge.json
│ ├── breadcrumbs.json
│ ├── button.json
│ ├── calendar.json
│ ├── card.json
│ ├── checkbox.json
│ ├── combobox.json
│ ├── command.json
│ ├── date-field.json
│ ├── date-picker.json
│ ├── input.json
│ ├── menu.json
│ ├── meter.json
│ ├── modal.json
│ ├── popover.json
│ ├── radio-group.json
│ ├── registry.json
│ ├── select.json
│ ├── slider.json
│ ├── switch.json
│ ├── table.json
│ ├── tabs.json
│ ├── tag-group.json
│ ├── time-field.json
│ ├── toggle.json
│ └── tooltip.json
├── source.config.ts
└── tsconfig.json
SYMBOL INDEX (93 symbols across 48 files)
FILE: packages/components/scripts/gen-registry-json.ts
constant COMPONENTS_DIR (line 7) | const COMPONENTS_DIR = "src/core";
constant OUTPUT_FILE (line 8) | const OUTPUT_FILE = "registry.json";
function generateRegistryJson (line 10) | async function generateRegistryJson() {
function processComponent (line 50) | async function processComponent(
FILE: packages/components/src/core/accordion/accordion.tsx
type AccordionVariantProps (line 32) | type AccordionVariantProps = VariantProps<typeof accordion>;
type AccordionProps (line 34) | interface AccordionProps
type AccordionGroupProps (line 71) | interface AccordionGroupProps extends DisclosureGroupProps {
FILE: packages/components/src/core/badge/badge.tsx
type BadgeProps (line 19) | type BadgeProps = VariantProps<typeof badge> & HTMLAttributes<HTMLSpanEl...
FILE: packages/components/src/core/button/button.tsx
type ButtonVariantProps (line 35) | type ButtonVariantProps = VariantProps<typeof button>;
type ButtonProps (line 37) | interface ButtonProps
FILE: packages/components/src/core/calendar/calendar.tsx
type CalendarProps (line 50) | interface CalendarProps<T extends DateValue>
type RangeCalendarProps (line 91) | interface RangeCalendarProps<T extends DateValue>
FILE: packages/components/src/core/card/card.tsx
type CardVariantProps (line 33) | type CardVariantProps = VariantProps<typeof card>;
type CardProps (line 35) | interface CardProps extends HTMLAttributes<HTMLDivElement>, CardVariantP...
type CardHeaderProps (line 41) | interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
type CardContentProps (line 45) | interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
type CardFooterProps (line 49) | interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
FILE: packages/components/src/core/checkbox/checkbox.tsx
type CheckboxVariantProps (line 26) | type CheckboxVariantProps = VariantProps<typeof checkbox>;
type CheckboxProps (line 28) | interface CheckboxProps extends CheckboxVariantProps, AriaCheckBoxProps {
type CheckboxGroupProps (line 64) | interface CheckboxGroupProps extends AriaCheckboxGroupProps {
FILE: packages/components/src/core/combobox/combobox.tsx
type ComboBoxProps (line 38) | interface ComboBoxProps<T extends ListBoxItemProps>
type ComboBoxItemProps (line 77) | interface ComboBoxItemProps
FILE: packages/components/src/core/command/command.tsx
type CommandItem (line 45) | interface CommandItem {
type CommandProps (line 53) | interface CommandProps extends Omit<ModalOverlayProps, "className"> {
type CommandMenuItemProps (line 173) | interface CommandMenuItemProps extends Omit<MenuItemProps, "className"> {
FILE: packages/components/src/core/date-field/date-field.tsx
type DateFieldProps (line 28) | interface DateFieldProps<T extends DateValue> extends AriaDateFieldProps...
FILE: packages/components/src/core/date-picker/date-picker.tsx
type DatePickerProps (line 60) | interface DatePickerProps<T extends DateValue> extends AriaDatePickerPro...
type DateRangePickerProps (line 100) | interface DateRangePickerProps<T extends DateValue>
FILE: packages/components/src/core/input/input.tsx
type InputProps (line 20) | interface InputProps extends Omit<AriaTextFieldProps, "className"> {
FILE: packages/components/src/core/meter/meter.tsx
type MeterProps (line 14) | interface MeterProps extends Omit<AriaMeterProps, "className"> {
FILE: packages/components/src/core/modal/modal.tsx
type ModalProps (line 23) | interface ModalProps extends Omit<ModalOverlayProps, "className"> {
FILE: packages/components/src/core/popover/popover.tsx
type DialogProps (line 17) | interface DialogProps extends Omit<AriaPopoverProps, "className" | "chil...
FILE: packages/components/src/core/radio-group/radio-group.tsx
type RadioGroupProps (line 28) | interface RadioGroupProps extends Omit<AriaRadioGroupProps, "children" |...
FILE: packages/components/src/core/select/select.tsx
type SelectProps (line 49) | interface SelectProps<T extends ListBoxItemProps>
type SelectItemProps (line 85) | interface SelectItemProps
type SearchableSelectProps (line 102) | interface SearchableSelectProps<T extends ListBoxItemProps>
FILE: packages/components/src/core/switch/switch.tsx
type SwitchProps (line 23) | interface SwitchProps extends AriaSwitchProps {
FILE: packages/components/src/core/tabs/tabs.tsx
type TabsProps (line 27) | interface TabsProps extends Omit<AriaTabsProps, "className"> {
type TabListProps (line 37) | interface TabListProps<T> extends Omit<AriaTabListProps<T>, "className"> {
type TabProps (line 51) | interface TabProps extends Omit<AriaTabProps, "className"> {
type TabPanelProps (line 61) | interface TabPanelProps extends Omit<AriaTabPanelProps, "className"> {
FILE: packages/components/src/core/tag-group/tag-group.tsx
type TagGroupProps (line 25) | interface TagGroupProps<T>
FILE: packages/components/src/core/time-field/time-field.tsx
type TimeFieldProps (line 28) | interface TimeFieldProps<T extends TimeValue> extends AriaTimeFieldProps...
FILE: packages/components/src/core/toggle/toggle.tsx
type ToggleProps (line 21) | interface ToggleProps extends Omit<ToggleButtonProps, "className"> {
type ToggleGroupProps (line 31) | interface ToggleGroupProps extends ToggleButtonGroupProps {
FILE: packages/components/src/core/tooltip/tooltip.tsx
type TooltipProps (line 18) | interface TooltipProps extends Omit<AriaTooltipProps, "children"> {
FILE: packages/components/src/examples/table-base.tsx
type User (line 12) | interface User {
FILE: packages/registry/src/schema.ts
type RegistryItem (line 66) | type RegistryItem = z.infer<typeof RegistryItemSchema>;
type RegistryItemFile (line 67) | type RegistryItemFile = z.infer<typeof RegistryItemFileSchema>;
type Registry (line 68) | type Registry = z.infer<typeof RegistrySchema>;
FILE: web/app/api/examples/[name]/route.ts
function GET (line 5) | async function GET(
FILE: web/app/docs/[...slug]/page.tsx
type PageProps (line 17) | interface PageProps {
function titleToComponentId (line 24) | function titleToComponentId(title: string): string {
function Page (line 38) | async function Page({ params }: PageProps) {
function generateStaticParams (line 72) | async function generateStaticParams() {
function generateMetadata (line 76) | async function generateMetadata({
FILE: web/app/docs/layout.tsx
type LayoutProps (line 14) | interface LayoutProps {
function Layout (line 18) | function Layout({ children }: LayoutProps) {
FILE: web/app/docs/page.tsx
function DocsPage (line 3) | function DocsPage() {
FILE: web/app/layout.tsx
function RootLayout (line 18) | function RootLayout({
FILE: web/app/llms.txt/route.ts
type RegistryItem (line 4) | interface RegistryItem {
function GET (line 11) | async function GET() {
FILE: web/app/page.tsx
function Home (line 17) | function Home() {
FILE: web/app/r/[[...segments]]/route.ts
function GET (line 6) | async function GET(
FILE: web/components/code-block-client.tsx
type CodeBlockWithCopyProps (line 7) | interface CodeBlockWithCopyProps {
FILE: web/components/code-block.tsx
type CodeBlockProps (line 5) | interface CodeBlockProps {
FILE: web/components/component-metadata.tsx
type ComponentMetadataProps (line 6) | interface ComponentMetadataProps {
type RegistryItem (line 15) | interface RegistryItem {
function ComponentMetadata (line 26) | async function ComponentMetadata({
FILE: web/components/docs-page.tsx
type TocItem (line 13) | interface TocItem {
type DocsPageProps (line 19) | interface DocsPageProps {
function DocsPage (line 25) | function DocsPage({ toc, children, navigation }: DocsPageProps) {
FILE: web/components/mobile-nav.tsx
type Page (line 13) | interface Page {
type MobileNavProps (line 20) | interface MobileNavProps {
function MobileNav (line 25) | function MobileNav({ introDocs, componentDocs }: MobileNavProps) {
FILE: web/components/open-in-ai-menu.tsx
type OpenInAiMenuProps (line 11) | interface OpenInAiMenuProps {
constant AI_SERVICES (line 16) | const AI_SERVICES = [
function OpenInAiMenu (line 40) | function OpenInAiMenu({ pageTitle, pageUrl }: OpenInAiMenuProps) {
FILE: web/components/preview.tsx
type TabButtonProps (line 7) | interface TabButtonProps {
FILE: web/components/search.tsx
function SearchDialog (line 11) | function SearchDialog() {
FILE: web/components/sidebar-link.tsx
type SidebarLinkProps (line 8) | interface SidebarLinkProps {
function SidebarLink (line 14) | function SidebarLink({ href, children, onClick }: SidebarLinkProps) {
FILE: web/components/sidebar.tsx
function Sidebar (line 6) | function Sidebar() {
FILE: web/components/table-of-contents.tsx
type TocItem (line 7) | interface TocItem {
type TableOfContentsProps (line 13) | interface TableOfContentsProps {
function TableOfContents (line 18) | function TableOfContents({ toc, activeId }: TableOfContentsProps) {
FILE: web/hooks/use-active-heading.ts
function useActiveHeading (line 5) | function useActiveHeading() {
FILE: web/lib/component-data.ts
function getComponentSource (line 7) | async function getComponentSource(name: string): Promise<string> {
function getExampleSource (line 19) | async function getExampleSource(name: string): Promise<string> {
FILE: web/lib/examples-map.ts
function getExampleComponent (line 10) | async function getExampleComponent(exampleId: string) {
FILE: web/lib/navigation.ts
type NavigationPage (line 3) | interface NavigationPage {
type PageNavigation (line 8) | interface PageNavigation {
function getPageNavigation (line 13) | function getPageNavigation(currentUrl: string): PageNavigation {
Condensed preview — 217 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (486K chars).
[
{
"path": ".cursorrules",
"chars": 45,
"preview": "# Cursor Rules\n\n## General\n\n- Always use pnpm"
},
{
"path": ".github/workflows/sync-components.yml",
"chars": 2368,
"preview": "name: Component Sync Check\n\non:\n pull_request:\n paths:\n - 'packages/components/src/**'\n - 'packages/compon"
},
{
"path": ".gitignore",
"chars": 984,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules/\n/.pn"
},
{
"path": ".prototools",
"chars": 17,
"preview": "pnpm = \"10.12.2\"\n"
},
{
"path": "LICENSE.md",
"chars": 1067,
"preview": "MIT License\n\nCopyright (c) 2025 Zach Wagner\n\nPermission is hereby granted, free of charge, to any person obtaining a cop"
},
{
"path": "README.md",
"chars": 497,
"preview": "# BaseLayer\n\n## Overview\n\nBaseLayer is a comprehensive React component library built for modern development workflows an"
},
{
"path": "biome.json",
"chars": 1245,
"preview": "{\n \"$schema\": \"./node_modules/@biomejs/biome/configuration_schema.json\",\n \"formatter\": {\n \"enabled\": true\n },\n \"l"
},
{
"path": "package.json",
"chars": 501,
"preview": "{\n \"name\": \"baselayer\",\n \"private\": true,\n \"version\": \"2.1.1\",\n \"description\": \"Beautiful, accessible, and AI optimi"
},
{
"path": "packages/components/CHANGELOG.md",
"chars": 339,
"preview": "# @baselayer/components\n\n## 2.0.3\n\n### Patch Changes\n\n- f594c82: update RAC + tw\n\n## 2.0.2\n\n### Patch Changes\n\n- 6f88f68"
},
{
"path": "packages/components/package.json",
"chars": 910,
"preview": "{\n\t\"name\": \"@baselayer/components\",\n\t\"version\": \"2.1.1\",\n\t\"private\": true,\n\t\"type\": \"module\",\n\t\"main\": \"./src/index.ts\","
},
{
"path": "packages/components/registry.json",
"chars": 80375,
"preview": "{\n \"name\": \"@baselayer\",\n \"$schema\": \"https://ui.shadcn.com/schema/registry.json\",\n \"homepage\": \"https://baselayer.de"
},
{
"path": "packages/components/scripts/gen-registry-json.ts",
"chars": 5613,
"preview": "/** biome-ignore-all lint/suspicious/noAssignInExpressions: skip */\nimport type { Registry, RegistryItem } from \"@basela"
},
{
"path": "packages/components/src/core/accordion/accordion.tsx",
"chars": 2277,
"preview": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tButton,\n\tDisclosure,\n\tDisclosureGroup,\n\ttype Disclosur"
},
{
"path": "packages/components/src/core/accordion/meta.json",
"chars": 316,
"preview": "{\n \"name\": \"accordion\",\n \"category\": \"layout\",\n \"status\": \"stable\",\n \"description\": \"An accordion allows users to to"
},
{
"path": "packages/components/src/core/badge/badge.tsx",
"chars": 725,
"preview": "import type { HTMLAttributes } from \"react\";\n\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const b"
},
{
"path": "packages/components/src/core/badge/meta.json",
"chars": 194,
"preview": "{\n \"name\": \"badge\",\n \"category\": \"display\",\n \"status\": \"stable\",\n \"description\": \"A badge is a small label that can "
},
{
"path": "packages/components/src/core/breadcrumbs/breadcrumbs.tsx",
"chars": 1288,
"preview": "\"use client\";\n\nimport {\n\tBreadcrumbs as AriaBreadcrumbs,\n\ttype BreadcrumbsProps as AriaBreadcrumbsProps,\n\tBreadcrumb,\n\tt"
},
{
"path": "packages/components/src/core/breadcrumbs/meta.json",
"chars": 223,
"preview": "{\n \"name\": \"breadcrumbs\",\n \"category\": \"navigation\",\n \"status\": \"stable\",\n \"description\": \"Breadcrumbs display a hei"
},
{
"path": "packages/components/src/core/button/button.tsx",
"chars": 1523,
"preview": "\"use client\";\n\nimport {\n\tButton as AriaButton,\n\ttype ButtonProps as AriaButtonProps,\n} from \"react-aria-components\";\nimp"
},
{
"path": "packages/components/src/core/button/meta.json",
"chars": 225,
"preview": "{\n \"name\": \"button\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"A button allows a user to perform a"
},
{
"path": "packages/components/src/core/calendar/calendar.tsx",
"chars": 4435,
"preview": "\"use client\";\n\nimport {\n\tCalendar as AriaCalendar,\n\ttype CalendarProps as AriaCalendarProps,\n\tRangeCalendar as AriaRange"
},
{
"path": "packages/components/src/core/calendar/meta.json",
"chars": 281,
"preview": "{\n \"name\": \"calendar\",\n \"category\": \"data-entry\",\n \"status\": \"stable\",\n \"description\": \"A calendar displays one or m"
},
{
"path": "packages/components/src/core/card/card.tsx",
"chars": 2053,
"preview": "\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\n\nimport { tv, type VariantProps } from \"tailwind-variants\";\n"
},
{
"path": "packages/components/src/core/card/meta.json",
"chars": 198,
"preview": "{\n \"name\": \"card\",\n \"category\": \"layout\",\n \"status\": \"stable\",\n \"description\": \"Displays a card with header, content"
},
{
"path": "packages/components/src/core/checkbox/checkbox.tsx",
"chars": 2532,
"preview": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\ttype CheckboxProps as AriaCheckBoxProps,\n\tCheckbox as "
},
{
"path": "packages/components/src/core/checkbox/meta.json",
"chars": 263,
"preview": "{\n \"name\": \"checkbox\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"A checkbox allows a user to selec"
},
{
"path": "packages/components/src/core/combobox/combobox.tsx",
"chars": 2973,
"preview": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tComboBox as AriaComboBox,\n\ttype ComboBoxProps as AriaC"
},
{
"path": "packages/components/src/core/combobox/meta.json",
"chars": 270,
"preview": "{\n \"name\": \"combobox\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"A combo box combines a text input"
},
{
"path": "packages/components/src/core/command/command.tsx",
"chars": 5748,
"preview": "\"use client\";\n\nimport type { ComponentType, ReactNode } from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimpo"
},
{
"path": "packages/components/src/core/command/meta.json",
"chars": 271,
"preview": "{\n \"name\": \"command\",\n \"category\": \"navigation\",\n \"status\": \"beta\",\n \"description\": \"A command palette that allows u"
},
{
"path": "packages/components/src/core/date-field/date-field.tsx",
"chars": 1723,
"preview": "\"use client\";\n\nimport type {\n\tDateFieldProps as AriaDateFieldProps,\n\tDateValue,\n} from \"react-aria-components\";\nimport {"
},
{
"path": "packages/components/src/core/date-field/meta.json",
"chars": 309,
"preview": "{\n \"name\": \"date-field\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"A date field allows users to en"
},
{
"path": "packages/components/src/core/date-picker/date-picker.tsx",
"chars": 4646,
"preview": "\"use client\";\n\nimport type {\n\tDatePickerProps as AriaDatePickerProps,\n\tDateRangePickerProps as AriaDateRangePickerProps,"
},
{
"path": "packages/components/src/core/date-picker/meta.json",
"chars": 292,
"preview": "{\n \"name\": \"date-picker\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"A date picker combines one or "
},
{
"path": "packages/components/src/core/index.ts",
"chars": 911,
"preview": "export * from \"./accordion/accordion\";\nexport * from \"./badge/badge\";\nexport * from \"./breadcrumbs/breadcrumbs\";\nexport "
},
{
"path": "packages/components/src/core/input/input.tsx",
"chars": 1442,
"preview": "\"use client\";\n\nimport type {\n\tTextFieldProps as AriaTextFieldProps,\n\tValidationResult,\n} from \"react-aria-components\";\ni"
},
{
"path": "packages/components/src/core/input/meta.json",
"chars": 192,
"preview": "{\n \"name\": \"input\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"Allows a user to enter a plain text "
},
{
"path": "packages/components/src/core/menu/menu.tsx",
"chars": 1976,
"preview": "\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\n\nimport {\n\tHeader as AriaHeader,\n\tMenu as AriaMenu,\n\tMenuIte"
},
{
"path": "packages/components/src/core/menu/meta.json",
"chars": 209,
"preview": "{\n \"name\": \"menu\",\n \"category\": \"pickers\",\n \"status\": \"stable\",\n \"description\": \"A menu displays a list of actions o"
},
{
"path": "packages/components/src/core/meter/meta.json",
"chars": 220,
"preview": "{\n \"name\": \"meter\",\n \"category\": \"data-display\",\n \"status\": \"stable\",\n \"description\": \"A meter represents a quantity"
},
{
"path": "packages/components/src/core/meter/meter.tsx",
"chars": 931,
"preview": "\"use client\";\n\nimport {\n\tMeter as AriaMeter,\n\ttype MeterProps as AriaMeterProps,\n\tLabel,\n} from \"react-aria-components\";"
},
{
"path": "packages/components/src/core/modal/meta.json",
"chars": 201,
"preview": "{\n \"name\": \"modal\",\n \"category\": \"overlays\",\n \"status\": \"stable\",\n \"description\": \"A modal is an overlay element whi"
},
{
"path": "packages/components/src/core/modal/modal.tsx",
"chars": 1267,
"preview": "\"use client\";\n\nimport {\n\tDialog as AriaDialog,\n\tDialogTrigger as AriaDialogTrigger,\n\tModal as AriaModal,\n\ttype DialogPro"
},
{
"path": "packages/components/src/core/popover/meta.json",
"chars": 207,
"preview": "{\n \"name\": \"popover\",\n \"category\": \"overlays\",\n \"status\": \"stable\",\n \"description\": \"A popover is an overlay element"
},
{
"path": "packages/components/src/core/popover/popover.tsx",
"chars": 901,
"preview": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tDialogTrigger as AriaDialogTrigger,\n\tPopover as AriaPo"
},
{
"path": "packages/components/src/core/radio-group/meta.json",
"chars": 253,
"preview": "{\n \"name\": \"radio-group\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"A radio group allows a user to"
},
{
"path": "packages/components/src/core/radio-group/radio-group.tsx",
"chars": 1649,
"preview": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport type {\n RadioGroupProps as AriaRadioGroupProps,\n RadioP"
},
{
"path": "packages/components/src/core/select/meta.json",
"chars": 237,
"preview": "{\n \"name\": \"select\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"A select displays a collapsible lis"
},
{
"path": "packages/components/src/core/select/select.tsx",
"chars": 4804,
"preview": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport type {\n\tSelectProps as AriaSelectProps,\n\tListBoxItemProps"
},
{
"path": "packages/components/src/core/slider/meta.json",
"chars": 215,
"preview": "{\n \"name\": \"slider\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"A slider allows a user to select on"
},
{
"path": "packages/components/src/core/slider/slider.tsx",
"chars": 1502,
"preview": "\"use client\";\n\nimport {\n\tSlider as AriaSlider,\n\tSliderThumb as AriaSliderThumb,\n\tSliderTrack as AriaSliderTrack,\n\tLabel,"
},
{
"path": "packages/components/src/core/switch/meta.json",
"chars": 200,
"preview": "{\n \"name\": \"switch\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"A switch allows a user to turn a se"
},
{
"path": "packages/components/src/core/switch/switch.tsx",
"chars": 1260,
"preview": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tSwitch as AriaSwitch,\n\ttype SwitchProps as AriaSwitchP"
},
{
"path": "packages/components/src/core/table/meta.json",
"chars": 318,
"preview": "{\n \"name\": \"table\",\n \"category\": \"data-display\",\n \"status\": \"stable\",\n \"description\": \"A table displays data in rows"
},
{
"path": "packages/components/src/core/table/table.tsx",
"chars": 3029,
"preview": "\"use client\";\n\nimport {\n\tColumn as AriaColumn,\n\tTable as AriaTable,\n\tTableBody as AriaTableBody,\n\tTableHeader as AriaTab"
},
{
"path": "packages/components/src/core/tabs/meta.json",
"chars": 244,
"preview": "{\n \"name\": \"tabs\",\n \"category\": \"navigation\",\n \"status\": \"stable\",\n \"description\": \"Tabs organize content into multi"
},
{
"path": "packages/components/src/core/tabs/tabs.tsx",
"chars": 2210,
"preview": "\"use client\";\n\nimport {\n\tTab as AriaTab,\n\tTabList as AriaTabList,\n\ttype TabListProps as AriaTabListProps,\n\tTabPanel as A"
},
{
"path": "packages/components/src/core/tag-group/meta.json",
"chars": 323,
"preview": "{\n \"name\": \"tag-group\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"A tag group is a focusable list "
},
{
"path": "packages/components/src/core/tag-group/tag-group.tsx",
"chars": 1864,
"preview": "\"use client\";\n\nimport {\n\tTag as AriaTag,\n\tTagGroup as AriaTagGroup,\n\ttype TagGroupProps as AriaTagGroupProps,\n\ttype TagP"
},
{
"path": "packages/components/src/core/time-field/meta.json",
"chars": 300,
"preview": "{\n \"name\": \"time-field\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"A time field allows users to en"
},
{
"path": "packages/components/src/core/time-field/time-field.tsx",
"chars": 1716,
"preview": "\"use client\";\n\nimport type {\n\tTimeFieldProps as AriaTimeFieldProps,\n\tTimeValue,\n} from \"react-aria-components\";\nimport {"
},
{
"path": "packages/components/src/core/toggle/meta.json",
"chars": 262,
"preview": "{\n \"name\": \"toggle\",\n \"category\": \"forms\",\n \"status\": \"stable\",\n \"description\": \"A toggle button allows a user to to"
},
{
"path": "packages/components/src/core/toggle/toggle.tsx",
"chars": 1337,
"preview": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tToggleButton,\n\tToggleButtonGroup,\n\ttype ToggleButtonGr"
},
{
"path": "packages/components/src/core/tooltip/meta.json",
"chars": 219,
"preview": "{\n \"name\": \"tooltip\",\n \"category\": \"overlays\",\n \"status\": \"stable\",\n \"description\": \"A tooltip displays a descriptio"
},
{
"path": "packages/components/src/core/tooltip/tooltip.tsx",
"chars": 860,
"preview": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tTooltip as AriaTooltip,\n\ttype TooltipProps as AriaTool"
},
{
"path": "packages/components/src/examples/accordion-base.tsx",
"chars": 540,
"preview": "import { Accordion } from \"../core/accordion/accordion\";\n\nexport const AccordionBase = () => {\n\treturn (\n\t\t<Accordion cl"
},
{
"path": "packages/components/src/examples/accordion-group.tsx",
"chars": 2116,
"preview": "import { Accordion, AccordionGroup } from \"../core/accordion/accordion\";\n\nexport const AccordionGroupExample = () => {\n\t"
},
{
"path": "packages/components/src/examples/badge-base.tsx",
"chars": 120,
"preview": "import { Badge } from \"../core/badge/badge\";\n\nexport const BadgeBase = () => {\n return (\n <Badge>New</Badge>\n );\n};"
},
{
"path": "packages/components/src/examples/badge-variants.tsx",
"chars": 302,
"preview": "import { Badge } from \"../core/badge/badge\";\n\nexport const BadgeVariants = () => {\n\treturn (\n\t\t<div className=\"flex item"
},
{
"path": "packages/components/src/examples/breadcrumbs-base.tsx",
"chars": 708,
"preview": "import { ChevronRightIcon } from \"lucide-react\";\n\nimport { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink } from \"../core"
},
{
"path": "packages/components/src/examples/breadcrumbs-seperators.tsx",
"chars": 693,
"preview": "import { SlashIcon } from \"lucide-react\";\n\nimport { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink } from \"../core/breadc"
},
{
"path": "packages/components/src/examples/button-base.tsx",
"chars": 129,
"preview": "import { Button } from \"../core/button/button\";\n\nexport const ButtonBase = () => {\n return (\n <Button>Button</Button"
},
{
"path": "packages/components/src/examples/button-helper-icons.tsx",
"chars": 567,
"preview": "import { PlusIcon, TrashIcon } from \"lucide-react\";\n\nimport { Button } from \"../core/button/button\";\n\nexport const Butto"
},
{
"path": "packages/components/src/examples/button-sizes.tsx",
"chars": 400,
"preview": "import { PlusIcon } from \"lucide-react\";\n\nimport { Button } from \"../core/button/button\";\n\nexport const ButtonSizes = ()"
},
{
"path": "packages/components/src/examples/button-variants.tsx",
"chars": 366,
"preview": "import { Button } from \"../core/button/button\";\n\nexport const ButtonVariants = () => {\n return (\n <div className=\"fl"
},
{
"path": "packages/components/src/examples/calendar-base.tsx",
"chars": 179,
"preview": "import { Calendar } from \"../core/calendar/calendar\";\n\nexport const CalendarExample = () => (\n <div className=\"flex ite"
},
{
"path": "packages/components/src/examples/card-base.tsx",
"chars": 985,
"preview": "import { GithubIcon } from \"lucide-react\";\n\nimport { Button } from \"../core/button/button\";\nimport { Card, CardContent, "
},
{
"path": "packages/components/src/examples/card-variants.tsx",
"chars": 727,
"preview": "import { Card, CardContent } from \"../core/card/card\";\n\nexport const CardVariants = () => {\n return (\n <div classNam"
},
{
"path": "packages/components/src/examples/checkbox-base.tsx",
"chars": 163,
"preview": "import { Checkbox } from \"../core/checkbox/checkbox\";\n\nexport const CheckboxBase = () => {\n return (\n <Checkbox>Acce"
},
{
"path": "packages/components/src/examples/checkbox-group.tsx",
"chars": 317,
"preview": "import { Checkbox, CheckboxGroup } from \"../core/checkbox/checkbox\";\n\nexport const CheckboxGroupExample = () => {\n\tretur"
},
{
"path": "packages/components/src/examples/combobox-base.tsx",
"chars": 589,
"preview": "import { ComboBox, ComboBoxItem } from \"../core/combobox/combobox\";\n\nconst countries = [\n\t\"United States\",\n\t\"United King"
},
{
"path": "packages/components/src/examples/combobox-disabled-option.tsx",
"chars": 458,
"preview": "import { ComboBox, ComboBoxItem } from \"../core/combobox/combobox\";\n\nexport const ComboboxDisabledOption = () => {\n ret"
},
{
"path": "packages/components/src/examples/combobox-menu-trigger.tsx",
"chars": 464,
"preview": "import { ComboBox, ComboBoxItem } from \"../core/combobox/combobox\";\n\nexport const ComboboxMenuTrigger = () => {\n return"
},
{
"path": "packages/components/src/examples/command-base.tsx",
"chars": 1293,
"preview": "\"use client\";\n\nimport {\n\tCalendar,\n\tFileBarChart,\n\tFlag,\n\tFolderPlus,\n\tMessageSquare,\n\tPlus,\n\tRotateCcw,\n\tTarget,\n\tUserP"
},
{
"path": "packages/components/src/examples/command-custom-trigger.tsx",
"chars": 1460,
"preview": "\"use client\";\n\nimport {\n\tCalendar,\n\tFileBarChart,\n\tFlag,\n\tFolderPlus,\n\tMessageSquare,\n\tPlus,\n\tRotateCcw,\n\tSearch,\n\tTarge"
},
{
"path": "packages/components/src/examples/date-field-base.tsx",
"chars": 140,
"preview": "import { DateField } from \"../core/date-field/date-field\";\n\nexport const DateFieldBase = () => {\n\treturn <DateField labe"
},
{
"path": "packages/components/src/examples/date-picker-base.tsx",
"chars": 132,
"preview": "import { DatePicker } from \"../core/date-picker/date-picker\";\n\nexport const DatePickerBase = () => <DatePicker label=\"Ch"
},
{
"path": "packages/components/src/examples/date-range-picker-base.tsx",
"chars": 228,
"preview": "import { DateRangePicker } from \"../core/date-picker/date-picker\";\n\nexport const DateRangePickerBase = () => (\n\t<div cla"
},
{
"path": "packages/components/src/examples/index.ts",
"chars": 1545,
"preview": "export * from \"./accordion-base\";\nexport * from \"./accordion-group\";\nexport * from \"./badge-base\";\nexport * from \"./badg"
},
{
"path": "packages/components/src/examples/input-base.tsx",
"chars": 213,
"preview": "import { Input } from \"../core/input/input\";\n\nexport const InputBase = () => {\n\treturn (\n\t\t<div className=\"flex w-56 fle"
},
{
"path": "packages/components/src/examples/input-disabled.tsx",
"chars": 223,
"preview": "import { Input } from \"../core/input/input\";\n\nexport const InputDisabled = () => {\n\treturn (\n\t\t<div className=\"flex w-56"
},
{
"path": "packages/components/src/examples/input-label.tsx",
"chars": 209,
"preview": "import { Input } from \"../core/input/input\";\n\nexport const InputLabel = () => {\n\treturn (\n\t\t<div className=\"flex w-56 fl"
},
{
"path": "packages/components/src/examples/menu-base.tsx",
"chars": 831,
"preview": "import {\n\tHelpCircle,\n\tLogOut,\n\tPlus,\n\tSettings,\n} from \"lucide-react\";\n\nimport { Button } from \"../core/button/button\";"
},
{
"path": "packages/components/src/examples/meter-base.tsx",
"chars": 124,
"preview": "import { Meter } from \"../core/meter/meter\";\n\nexport const MeterExample = () => <Meter label=\"Monthly Usage\" value={80} "
},
{
"path": "packages/components/src/examples/modal-base.tsx",
"chars": 806,
"preview": "\"use client\";\n\nimport { Heading } from \"react-aria-components\";\n\nimport { Button } from \"../core/button/button\";\nimport "
},
{
"path": "packages/components/src/examples/modal-dismissable.tsx",
"chars": 803,
"preview": "\"use client\";\n\nimport { Heading } from \"react-aria-components\";\n\nimport { Button } from \"../core/button/button\";\nimport "
},
{
"path": "packages/components/src/examples/popover-base.tsx",
"chars": 2400,
"preview": "import { Calendar, MapPin, MessageCircle, Settings, Star, User } from \"lucide-react\";\n\nimport { Button } from \"../core/b"
},
{
"path": "packages/components/src/examples/radio-group-base.tsx",
"chars": 334,
"preview": "import { Radio, RadioGroup } from \"../core/radio-group/radio-group\";\n\nexport const RadioExample = () => (\n <RadioGroup "
},
{
"path": "packages/components/src/examples/range-calendar-base.tsx",
"chars": 118,
"preview": "import { RangeCalendar } from \"../core/calendar/calendar\";\n\nexport const RangeCalendarBase = () => <RangeCalendar />; "
},
{
"path": "packages/components/src/examples/select-base.tsx",
"chars": 351,
"preview": "import { Select, SelectItem } from \"../core/select/select\";\n\nexport const SelectExample = () => {\n\treturn (\n\t\t<Select ar"
},
{
"path": "packages/components/src/examples/select-popover-classname.tsx",
"chars": 403,
"preview": "import { Select, SelectItem } from \"../core/select/select\";\n\nexport const SelectPopoverClassname = () => {\n\treturn (\n\t\t<"
},
{
"path": "packages/components/src/examples/select-searchable.tsx",
"chars": 526,
"preview": "import { SearchableSelect, SelectItem } from \"../core/select/select\";\n\nexport const SearchableSelectExample = () => {\n\tr"
},
{
"path": "packages/components/src/examples/slider-base.tsx",
"chars": 236,
"preview": "import { SliderLabel, SliderRoot, SliderThumb } from \"../core/slider/slider\";\n\nexport const Slider = () => {\n\treturn (\n\t"
},
{
"path": "packages/components/src/examples/switch-base.tsx",
"chars": 120,
"preview": "import { Switch } from \"../core/switch/switch\";\n\nexport const SwitchBase = () => {\n return <Switch>On/Off</Switch>;\n}; "
},
{
"path": "packages/components/src/examples/table-base.tsx",
"chars": 1765,
"preview": "\"use client\";\n\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableColumn,\n\tTableHeader,\n\tTableRow,\n} from \"../core/table/tab"
},
{
"path": "packages/components/src/examples/tabs-base.tsx",
"chars": 5905,
"preview": "import { ArrowDown, Heart, Plus } from \"lucide-react\";\n\nimport { Tab, TabList, TabPanel, TabsRoot } from \"../core/tabs/t"
},
{
"path": "packages/components/src/examples/tag-group-base.tsx",
"chars": 541,
"preview": "import { Tag, TagGroup } from \"../core/tag-group/tag-group\";\n\nexport const TagGroupExample = () => (\n <div className=\"s"
},
{
"path": "packages/components/src/examples/time-field-base.tsx",
"chars": 367,
"preview": "\"use client\";\n\nimport { TimeField } from \"../core/time-field/time-field\";\n\nexport const TimeFieldExample = () => (\n <di"
},
{
"path": "packages/components/src/examples/toggle-base.tsx",
"chars": 107,
"preview": "import { Toggle } from \"../core/toggle/toggle\";\n\nexport const ToggleExample = () => <Toggle>Mode</Toggle>; "
},
{
"path": "packages/components/src/examples/toggle-group-base.tsx",
"chars": 491,
"preview": "import { LayoutGrid, List, SquareStack } from \"lucide-react\";\n\nimport { Toggle, ToggleGroup } from \"../core/toggle/toggl"
},
{
"path": "packages/components/src/examples/tooltip-base.tsx",
"chars": 720,
"preview": "import { Settings, Share } from \"lucide-react\";\n\nimport { Button } from \"../core/button/button\";\nimport { Tooltip, Toolt"
},
{
"path": "packages/components/src/index.ts",
"chars": 52,
"preview": "export * from \"./core\";\nexport * from \"./examples\";\n"
},
{
"path": "packages/components/src/tailwind.css",
"chars": 2833,
"preview": "@variant dark ([data-theme=\"dark\"] &);\n\n:root {\n /* SURFACES (neutrals & elevation) */\n --surface: oklch(98.5% 0 0); /"
},
{
"path": "packages/components/tsconfig.json",
"chars": 704,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"lib\": [\"DOM\", \"DOM.Iterable\", \"ES6\"],\n \"allowJs\": true,\n \"sk"
},
{
"path": "packages/registry/CHANGELOG.md",
"chars": 66,
"preview": "# @baselayer/registry\n\n## 2.0.0\n\n### Major Changes\n\n- 7204382: v2\n"
},
{
"path": "packages/registry/package.json",
"chars": 539,
"preview": "{\n \"name\": \"@baselayer/registry\",\n \"version\": \"2.1.0\",\n \"private\": true,\n \"type\": \"module\",\n \"main\": \"./dist/index."
},
{
"path": "packages/registry/src/index.ts",
"chars": 118,
"preview": "// Registry package entry point\n// Exports all schemas and types for component registry\n\nexport * from './schema.js'; "
},
{
"path": "packages/registry/src/schema.ts",
"chars": 2099,
"preview": "// Registry Schema Definition\n// This defines the structure for machine-readable component metadata compatible with shad"
},
{
"path": "packages/registry/tsconfig.json",
"chars": 534,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"lib\": [\"ES6\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n "
},
{
"path": "pnpm-workspace.yaml",
"chars": 190,
"preview": "packages:\n - 'web'\n - 'packages/*'\n\n# Define a catalog of version ranges.\ncatalog:\n react-aria-components: 1.11.0\n t"
},
{
"path": "turbo.json",
"chars": 414,
"preview": "{\n \"$schema\": \"https://turbo.build/schema.json\",\n \"ui\": \"tui\",\n \"tasks\": {\n \"build\": {\n \"dependsOn\": [\"^build"
},
{
"path": "web/.gitignore",
"chars": 517,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "web/CHANGELOG.md",
"chars": 520,
"preview": "# @baselayer/web\n\n## 2.0.3\n\n### Patch Changes\n\n- f594c82: update RAC + tw\n- Updated dependencies [f594c82]\n - @baselaye"
},
{
"path": "web/README.md",
"chars": 15,
"preview": "# baselayer v2\n"
},
{
"path": "web/app/api/examples/[name]/route.ts",
"chars": 729,
"preview": "import { NextResponse } from \"next/server\";\n\nimport { getExampleSource } from \"@/lib/component-data\";\n\nexport async func"
},
{
"path": "web/app/api/search/route.ts",
"chars": 154,
"preview": "import { createFromSource } from 'fumadocs-core/search/server';\n\nimport { source } from '@/lib/source';\n\nexport const { "
},
{
"path": "web/app/docs/[...slug]/page.tsx",
"chars": 2389,
"preview": "import { notFound } from \"next/navigation\";\n\nimport type { Metadata } from \"next\";\n\nimport { getPageNavigation } from \"@"
},
{
"path": "web/app/docs/content/components/accordion.mdx",
"chars": 191,
"preview": "---\ntitle: Accordion\nisRAC: true\n---\n\n<ComponentPreview example=\"accordion-base\" />\n\n## Group\n\n<ComponentPreview example"
},
{
"path": "web/app/docs/content/components/badge.mdx",
"chars": 280,
"preview": "---\ntitle: Badge\ndescription: A badge is a small, visual indicator that can be used to label, categorize, or organize co"
},
{
"path": "web/app/docs/content/components/breadcrumbs.mdx",
"chars": 214,
"preview": "---\ntitle: Breadcrumbs\nisRAC: true\n---\n\n<ComponentPreview example='breadcrumbs-base' />\n\n## Separator Icons\n\n<ComponentP"
},
{
"path": "web/app/docs/content/components/button.mdx",
"chars": 309,
"preview": "---\ntitle: Button\nisRAC: true\n---\n\n<ComponentPreview example=\"button-base\" />\n\n## Variants\n\n<ComponentPreview example=\"b"
},
{
"path": "web/app/docs/content/components/calendar.mdx",
"chars": 202,
"preview": "---\ntitle: Calendar\nisRAC: true\n---\n\n<ComponentPreview example=\"calendar-base\" />\n\n## Range Calendar\n\n<ComponentPreview "
},
{
"path": "web/app/docs/content/components/card.mdx",
"chars": 166,
"preview": "---\ntitle: Card\n---\n\n<ComponentPreview example=\"card-base\" />\n\n## Variants\n\n<ComponentPreview example=\"card-variants\" />"
},
{
"path": "web/app/docs/content/components/checkbox.mdx",
"chars": 189,
"preview": "---\ntitle: Checkbox\nisRAC: true\n---\n\n<ComponentPreview example=\"checkbox-base\" />\n\n## Group\n\n<ComponentPreview example=\""
},
{
"path": "web/app/docs/content/components/combobox.mdx",
"chars": 459,
"preview": "---\ntitle: ComboBox\nisRAC: true\n---\n\n<ComponentPreview example=\"combobox-base\" />\n\nIf this component is not what exactly"
},
{
"path": "web/app/docs/content/components/command.mdx",
"chars": 304,
"preview": "---\ntitle: Command\ndescription: A command palette that allows users to quickly search and execute commands using keyboar"
},
{
"path": "web/app/docs/content/components/date-field.mdx",
"chars": 136,
"preview": "---\ntitle: DateField\nisRAC: true\n---\n\n<ComponentPreview example=\"date-field-base\" />\n\n## Source\n\n<ComponentPreview name="
},
{
"path": "web/app/docs/content/components/date-picker.mdx",
"chars": 216,
"preview": "---\ntitle: DatePicker\nisRAC: true\n---\n\n<ComponentPreview example=\"date-picker-base\" />\n\n## Date Range Picker\n\n<Component"
},
{
"path": "web/app/docs/content/components/input.mdx",
"chars": 385,
"preview": "---\ntitle: Input\ndescription: Allows a user to enter a plain text value with a keyboard.\n---\n\nimport { RACLink } from \"@"
},
{
"path": "web/app/docs/content/components/menu.mdx",
"chars": 120,
"preview": "---\ntitle: Menu\nisRAC: true\n---\n\n<ComponentPreview example=\"menu-base\" />\n\n## Source \n\n<ComponentPreview name=\"menu\" />\n"
},
{
"path": "web/app/docs/content/components/meter.mdx",
"chars": 123,
"preview": "---\ntitle: Meter\nisRAC: true\n---\n\n<ComponentPreview example=\"meter-base\" />\n\n## Source \n\n<ComponentPreview name=\"meter\" "
},
{
"path": "web/app/docs/content/components/modal.mdx",
"chars": 190,
"preview": "---\ntitle: Modal\nisRAC: true\n---\n\n<ComponentPreview example=\"modal-base\" />\n\n## Dismissable\n\n<ComponentPreview example=\""
},
{
"path": "web/app/docs/content/components/popover.mdx",
"chars": 129,
"preview": "---\ntitle: Popover\nisRAC: true\n---\n\n<ComponentPreview example=\"popover-base\" />\n\n## Source \n\n<ComponentPreview name=\"pop"
},
{
"path": "web/app/docs/content/components/radio-group.mdx",
"chars": 140,
"preview": "---\ntitle: RadioGroup\nisRAC: true\n---\n\n<ComponentPreview example=\"radio-group-base\" />\n\n## Source \n\n<ComponentPreview na"
},
{
"path": "web/app/docs/content/components/select.mdx",
"chars": 276,
"preview": "---\ntitle: Select\nisRAC: true\n---\n\n<ComponentPreview example=\"select-base\" />\n\n## Searchable Select\n\n<ComponentPreview e"
},
{
"path": "web/app/docs/content/components/slider.mdx",
"chars": 126,
"preview": "---\ntitle: Slider\nisRAC: true\n---\n\n<ComponentPreview example=\"slider-base\" />\n\n## Source \n\n<ComponentPreview name=\"slide"
},
{
"path": "web/app/docs/content/components/switch.mdx",
"chars": 125,
"preview": "---\ntitle: Switch\nisRAC: true\n---\n\n<ComponentPreview example=\"switch-base\" />\n\n## Source\n\n<ComponentPreview name=\"switch"
},
{
"path": "web/app/docs/content/components/table.mdx",
"chars": 123,
"preview": "---\ntitle: Table\nisRAC: true\n---\n\n<ComponentPreview example=\"table-base\" />\n\n## Source \n\n<ComponentPreview name=\"table\" "
},
{
"path": "web/app/docs/content/components/tabs.mdx",
"chars": 119,
"preview": "---\ntitle: Tabs\nisRAC: true\n---\n\n<ComponentPreview example=\"tabs-base\" />\n\n## Source\n\n<ComponentPreview name=\"tabs\" /> "
},
{
"path": "web/app/docs/content/components/tag-group.mdx",
"chars": 134,
"preview": "---\ntitle: TagGroup\nisRAC: true\n---\n\n<ComponentPreview example=\"tag-group-base\" />\n\n## Source \n\n<ComponentPreview name=\""
},
{
"path": "web/app/docs/content/components/time-field.mdx",
"chars": 137,
"preview": "---\ntitle: TimeField\nisRAC: true\n---\n\n<ComponentPreview example=\"time-field-base\" />\n\n## Source \n\n<ComponentPreview name"
},
{
"path": "web/app/docs/content/components/toggle.mdx",
"chars": 186,
"preview": "---\ntitle: Toggle\nisRAC: true\n---\n\n<ComponentPreview example=\"toggle-base\" />\n\n## Group\n\n<ComponentPreview example=\"togg"
},
{
"path": "web/app/docs/content/components/tooltip.mdx",
"chars": 129,
"preview": "---\ntitle: Tooltip\nisRAC: true\n---\n\n<ComponentPreview example=\"tooltip-base\" />\n\n## Source \n\n<ComponentPreview name=\"too"
},
{
"path": "web/app/docs/content/intro.mdx",
"chars": 2041,
"preview": "---\ntitle: Intro\ndescription: BaseLayer is a collection of beautiful, accessible React components built with React Aria "
},
{
"path": "web/app/docs/content/styles.mdx",
"chars": 1225,
"preview": "---\ntitle: Styles\n---\n\n## Tailwind CSS\n\nBaseLayer uses Tailwind CSS for styling. Tailwind CSS is a utility-first CSS fra"
},
{
"path": "web/app/docs/content/usage.mdx",
"chars": 2950,
"preview": "---\ntitle: Usage\ndescription: How to setup and use BaseLayer components in your project\n---\n\n## Prerequisites\n\n- React w"
},
{
"path": "web/app/docs/layout.tsx",
"chars": 2258,
"preview": "import type { ReactNode } from \"react\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\n\nimport { GithubI"
},
{
"path": "web/app/docs/page.tsx",
"chars": 389,
"preview": "import Link from \"next/link\";\n\nexport default function DocsPage() {\n\treturn (\n\t\t<div className=\"px-8 py-12\">\n\t\t\t<div cla"
},
{
"path": "web/app/globals.css",
"chars": 1564,
"preview": "@import 'tailwindcss';\n@import \"tw-animate-css\";\n@import \"../../packages/components/src/tailwind.css\";\n@source '../../pa"
},
{
"path": "web/app/layout.tsx",
"chars": 1002,
"preview": "import { GeistMono } from 'geist/font/mono';\nimport { GeistSans } from 'geist/font/sans';\nimport type { Metadata } from "
},
{
"path": "web/app/llms.txt/route.ts",
"chars": 4655,
"preview": "import { readFileSync } from \"node:fs\";\nimport { join } from \"node:path\";\n\ninterface RegistryItem {\n\tname: string;\n\ttitl"
},
{
"path": "web/app/page.tsx",
"chars": 10487,
"preview": "import Image from \"next/image\";\nimport Link from \"next/link\";\n\nimport {\n\tAccessibility,\n\tArrowRight,\n\tCodeIcon,\n\tGithub,"
},
{
"path": "web/app/r/[[...segments]]/route.ts",
"chars": 1358,
"preview": "import { NextResponse } from \"next/server\";\n\nimport { existsSync, readFileSync } from \"node:fs\";\nimport { join } from \"n"
},
{
"path": "web/components/code-block-client.tsx",
"chars": 1056,
"preview": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { Check, Copy } from \"lucide-react\";\n\ninterface CodeBlockWithCo"
},
{
"path": "web/components/code-block.tsx",
"chars": 453,
"preview": "import { codeToHtml } from \"shiki\";\n\nimport { CodeBlockWithCopy } from \"./code-block-client\";\n\ninterface CodeBlockProps "
},
{
"path": "web/components/component-metadata.tsx",
"chars": 2157,
"preview": "import { Badge } from \"@baselayer/components\";\n\nimport { readFileSync } from \"node:fs\";\nimport { join } from \"node:path\""
},
{
"path": "web/components/docs-page.tsx",
"chars": 2283,
"preview": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport Link from \"next/link\";\n\nimport { ChevronLeftIcon, Chevron"
},
{
"path": "web/components/mdx-components.tsx",
"chars": 3070,
"preview": "import { getComponentSource, getExampleSource } from \"../lib/component-data\";\nimport { getExampleComponent } from \"../li"
},
{
"path": "web/components/mobile-nav.tsx",
"chars": 2784,
"preview": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport Image from \"next/image\";\n\nimport { Button, Dialog, Modal, Modal"
},
{
"path": "web/components/open-in-ai-menu.tsx",
"chars": 1817,
"preview": "\"use client\";\n\nimport {\n\tButton,\n\tMenuContent,\n\tMenuItem,\n\tMenuTrigger,\n} from \"@baselayer/components\";\nimport { ArrowUp"
},
{
"path": "web/components/preview.tsx",
"chars": 2929,
"preview": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { CodeIcon, ComponentIcon, type LucideIcon } from \"lucide-react"
},
{
"path": "web/components/rac-link.tsx",
"chars": 455,
"preview": "import Link from \"next/link\";\n\nimport { ArrowUpRightIcon } from \"lucide-react\";\n\nexport const RACLink = ({ componentName"
},
{
"path": "web/components/search.tsx",
"chars": 1415,
"preview": "\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\n\nimport { useRouter } from \"next/navigation\";\n\nimpo"
},
{
"path": "web/components/sidebar-link.tsx",
"chars": 662,
"preview": "\"use client\";\n\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\n\nimport { cx } from \"@/lib/c"
},
{
"path": "web/components/sidebar.tsx",
"chars": 1882,
"preview": "import { source } from \"@/lib/source\";\n\nimport { SearchDialog } from \"./search\";\nimport { SidebarLink } from \"./sidebar-"
},
{
"path": "web/components/table-of-contents.tsx",
"chars": 2262,
"preview": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport { cx } from \"@/lib/cx\";\n\ninterface TocItem {\n\tdepth: numb"
},
{
"path": "web/components/theme-toggle.tsx",
"chars": 952,
"preview": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { Button } from \"@baselayer/components\";\nimport { Mo"
},
{
"path": "web/components.json",
"chars": 597,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry.json\",\n \"name\": \"@baselayer\",\n \"homepage\": \"https://baselayer.de"
},
{
"path": "web/hooks/use-active-heading.ts",
"chars": 1234,
"preview": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\nexport function useActiveHeading() {\n\tconst contain"
},
{
"path": "web/lib/component-data.ts",
"chars": 1243,
"preview": "import { readFileSync } from \"node:fs\";\nimport { join } from \"node:path\";\n\nconst examplesDir = join(process.cwd(), \"../p"
},
{
"path": "web/lib/cx.ts",
"chars": 175,
"preview": "import { twJoin, twMerge } from \"tailwind-merge\";\n\n/**\n * re export tailwind-merge\n */\nexport const cx = twMerge;\n\n/**\n "
},
{
"path": "web/lib/examples-map.ts",
"chars": 1321,
"preview": "// Filesystem-based examples map using dynamic discovery\n\nimport type { ComponentType } from \"react\";\n\nimport { readFile"
},
{
"path": "web/lib/metadata.ts",
"chars": 281,
"preview": "export const metadataImage = {\n src: '/bl.svg',\n width: 1200,\n height: 630,\n alt: 'BaseLayer Documentation'\n};\n\nexpo"
},
{
"path": "web/lib/navigation.ts",
"chars": 1641,
"preview": "import { source } from \"./source\";\n\nexport interface NavigationPage {\n\ttitle: string;\n\turl: string;\n}\n\nexport interface "
},
{
"path": "web/lib/source.ts",
"chars": 172,
"preview": "import { loader } from 'fumadocs-core/source';\n\nimport { docs } from '@/.source';\n\nexport const source = loader({\n base"
},
{
"path": "web/next.config.ts",
"chars": 546,
"preview": "import { createMDX } from \"fumadocs-mdx/next\";\nimport type { NextConfig } from \"next\";\n\nimport path from \"node:path\";\n\nc"
},
{
"path": "web/package.json",
"chars": 1176,
"preview": "{\n \"name\": \"@baselayer/web\",\n \"version\": \"2.1.1\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev --turbopack\","
},
{
"path": "web/postcss.config.mjs",
"chars": 81,
"preview": "const config = {\n plugins: [\"@tailwindcss/postcss\"],\n};\n\nexport default config;\n"
},
{
"path": "web/public/r/accordion.json",
"chars": 2847,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"accordion\",\n \"type\": \"registry:ui\",\n \"tit"
},
{
"path": "web/public/r/badge.json",
"chars": 2703,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"badge\",\n \"type\": \"registry:ui\",\n \"title\":"
},
{
"path": "web/public/r/breadcrumbs.json",
"chars": 2756,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"breadcrumbs\",\n \"type\": \"registry:ui\",\n \"t"
},
{
"path": "web/public/r/button.json",
"chars": 2740,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"button\",\n \"type\": \"registry:ui\",\n \"title\""
},
{
"path": "web/public/r/calendar.json",
"chars": 2806,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"calendar\",\n \"type\": \"registry:ui\",\n \"titl"
},
{
"path": "web/public/r/card.json",
"chars": 2707,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"card\",\n \"type\": \"registry:ui\",\n \"title\": "
},
{
"path": "web/public/r/checkbox.json",
"chars": 2786,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"checkbox\",\n \"type\": \"registry:ui\",\n \"titl"
},
{
"path": "web/public/r/combobox.json",
"chars": 2795,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"combobox\",\n \"type\": \"registry:ui\",\n \"titl"
},
{
"path": "web/public/r/command.json",
"chars": 2794,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"command\",\n \"type\": \"registry:ui\",\n \"title"
},
{
"path": "web/public/r/date-field.json",
"chars": 2842,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"date-field\",\n \"type\": \"registry:ui\",\n \"ti"
},
{
"path": "web/public/r/date-picker.json",
"chars": 2877,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"date-picker\",\n \"type\": \"registry:ui\",\n \"t"
},
{
"path": "web/public/r/input.json",
"chars": 2703,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"input\",\n \"type\": \"registry:ui\",\n \"title\":"
}
]
// ... and 17 more files (download for full content)
About this extraction
This page contains the full source code of the zwgnr/BaseLayer GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 217 files (411.3 KB), approximately 134.4k tokens, and a symbol index with 93 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.