base-themes 0.1.1 → 0.1.3

package/src/docs/componentMeta.json

@@ -0,0 +1,322 @@
+[
+  {
+    "id": "button",
+    "registryName": "button",
+    "title": "Button",
+    "group": "Inputs",
+    "summary": "An action primitive with semantic variants for primary commands, quiet actions, icons, and destructive-looking accents.",
+    "exportName": "Button"
+  },
+  {
+    "id": "checkbox",
+    "registryName": "checkbox",
+    "title": "Checkbox",
+    "group": "Inputs",
+    "summary": "A labeled boolean control with checked and unchecked visual states.",
+    "exportName": "Checkbox"
+  },
+  {
+    "id": "switch",
+    "registryName": "switch",
+    "title": "Switch",
+    "group": "Inputs",
+    "summary": "A binary setting control for immediate on/off preferences.",
+    "exportName": "Switch"
+  },
+  {
+    "id": "slider",
+    "registryName": "slider",
+    "title": "Slider",
+    "group": "Inputs",
+    "summary": "A range input with Base UI keyboard handling and tokenized track styling.",
+    "exportName": "Slider"
+  },
+  {
+    "id": "select",
+    "registryName": "select",
+    "title": "Select",
+    "group": "Inputs",
+    "summary": "A popover-backed single choice control with keyboard navigation and positioned content.",
+    "exportName": "Select"
+  },
+  {
+    "id": "radiogroup",
+    "registryName": "radio-group",
+    "title": "Radio Group",
+    "group": "Inputs",
+    "summary": "A grouped set of mutually exclusive choices.",
+    "exportName": "RadioGroup"
+  },
+  {
+    "id": "togglegroup",
+    "registryName": "toggle-group",
+    "title": "Toggle Group",
+    "group": "Inputs",
+    "summary": "A compact multi-select control for formatting and segmented actions.",
+    "exportName": "ToggleGroup"
+  },
+  {
+    "id": "combobox",
+    "registryName": "combobox",
+    "title": "Combobox",
+    "group": "Inputs",
+    "summary": "A searchable listbox for quickly filtering component names.",
+    "exportName": "Combobox"
+  },
+  {
+    "id": "input",
+    "registryName": "input",
+    "title": "Input",
+    "group": "Inputs",
+    "summary": "A styled Base UI input with optional label and helper text slots.",
+    "exportName": "Input"
+  },
+  {
+    "id": "autocomplete",
+    "registryName": "autocomplete",
+    "title": "Autocomplete",
+    "group": "Inputs",
+    "summary": "A text input with filtered suggestions and inline selection behavior.",
+    "exportName": "Autocomplete"
+  },
+  {
+    "id": "checkboxgroup",
+    "registryName": "checkbox-group",
+    "title": "Checkbox Group",
+    "group": "Inputs",
+    "summary": "A shared state container for related checkboxes.",
+    "exportName": "CheckboxGroup"
+  },
+  {
+    "id": "field",
+    "registryName": "field",
+    "title": "Field",
+    "group": "Inputs",
+    "summary": "A form field wrapper that connects label, control, description, and error state.",
+    "exportName": "Field"
+  },
+  {
+    "id": "fieldset",
+    "registryName": "fieldset",
+    "title": "Fieldset",
+    "group": "Inputs",
+    "summary": "A semantic grouping primitive for related form controls.",
+    "exportName": "Fieldset"
+  },
+  {
+    "id": "form",
+    "registryName": "form",
+    "title": "Form",
+    "group": "Inputs",
+    "summary": "A form root that integrates Base UI field validation and native submission.",
+    "exportName": "Form"
+  },
+  {
+    "id": "numberfield",
+    "registryName": "number-field",
+    "title": "Number Field",
+    "group": "Inputs",
+    "summary": "A numeric input with increment and decrement controls.",
+    "exportName": "NumberField"
+  },
+  {
+    "id": "otpfield",
+    "registryName": "otp-field",
+    "title": "OTP Field",
+    "group": "Inputs",
+    "summary": "A one-time-password input with separate slots and paste handling.",
+    "exportName": "OtpField"
+  },
+  {
+    "id": "radio",
+    "registryName": "radio",
+    "title": "Radio",
+    "group": "Inputs",
+    "summary": "A single radio primitive for custom radio group compositions.",
+    "exportName": "Radio"
+  },
+  {
+    "id": "separator",
+    "registryName": "separator",
+    "title": "Separator",
+    "group": "Inputs",
+    "summary": "A semantic divider for grouping content and toolbar controls.",
+    "exportName": "Separator"
+  },
+  {
+    "id": "toggle",
+    "registryName": "toggle",
+    "title": "Toggle",
+    "group": "Inputs",
+    "summary": "A single pressable on/off button for formatting and filters.",
+    "exportName": "Toggle"
+  },
+  {
+    "id": "toolbar",
+    "registryName": "toolbar",
+    "title": "Toolbar",
+    "group": "Inputs",
+    "summary": "A keyboard-aware toolbar for grouped commands and inputs.",
+    "exportName": "Toolbar"
+  },
+  {
+    "id": "cspprovider",
+    "registryName": "csp-provider",
+    "title": "CSP Provider",
+    "group": "Feedback",
+    "summary": "A provider for passing Content Security Policy nonce settings to Base UI internals.",
+    "exportName": "CspProvider"
+  },
+  {
+    "id": "directionprovider",
+    "registryName": "direction-provider",
+    "title": "Direction Provider",
+    "group": "Feedback",
+    "summary": "A provider that enables RTL or LTR behavior across Base UI components.",
+    "exportName": "DirectionProvider"
+  },
+  {
+    "id": "accordion",
+    "registryName": "accordion",
+    "title": "Accordion",
+    "group": "Disclosure",
+    "summary": "Stacked disclosure panels for related sections of content.",
+    "exportName": "Accordion"
+  },
+  {
+    "id": "collapsible",
+    "registryName": "collapsible",
+    "title": "Collapsible",
+    "group": "Disclosure",
+    "summary": "A single expandable region for optional detail.",
+    "exportName": "Collapsible"
+  },
+  {
+    "id": "dialog",
+    "registryName": "dialog",
+    "title": "Dialog",
+    "group": "Disclosure",
+    "summary": "A modal layer with focus management and dismiss behavior.",
+    "exportName": "Dialog"
+  },
+  {
+    "id": "alertdialog",
+    "registryName": "alert-dialog",
+    "title": "Alert Dialog",
+    "group": "Disclosure",
+    "summary": "A confirmation modal for actions that need explicit acknowledgement.",
+    "exportName": "AlertDialog"
+  },
+  {
+    "id": "drawer",
+    "registryName": "drawer",
+    "title": "Drawer",
+    "group": "Disclosure",
+    "summary": "A side panel for settings and secondary workflows.",
+    "exportName": "Drawer"
+  },
+  {
+    "id": "popover",
+    "registryName": "popover",
+    "title": "Popover",
+    "group": "Disclosure",
+    "summary": "A lightweight positioned layer for contextual content.",
+    "exportName": "Popover"
+  },
+  {
+    "id": "previewcard",
+    "registryName": "preview-card",
+    "title": "Preview Card",
+    "group": "Disclosure",
+    "summary": "A hover or focus preview surface for linked resources.",
+    "exportName": "PreviewCard"
+  },
+  {
+    "id": "tooltip",
+    "registryName": "tooltip",
+    "title": "Tooltip",
+    "group": "Disclosure",
+    "summary": "A small non-interactive label for controls and dense interfaces.",
+    "exportName": "Tooltip"
+  },
+  {
+    "id": "tabs",
+    "registryName": "tabs",
+    "title": "Tabs",
+    "group": "Navigation",
+    "summary": "A tablist for switching between related panels without navigating away.",
+    "exportName": "Tabs"
+  },
+  {
+    "id": "menu",
+    "registryName": "menu",
+    "title": "Menu",
+    "group": "Navigation",
+    "summary": "A command menu for grouped actions and disabled items.",
+    "exportName": "Menu"
+  },
+  {
+    "id": "contextmenu",
+    "registryName": "context-menu",
+    "title": "Context Menu",
+    "group": "Navigation",
+    "summary": "A menu opened from a contextual right-click or keyboard context action.",
+    "exportName": "ContextMenu"
+  },
+  {
+    "id": "menubar",
+    "registryName": "menubar",
+    "title": "Menubar",
+    "group": "Navigation",
+    "summary": "A horizontal application menu composed from Base UI menubar and menu primitives.",
+    "exportName": "Menubar"
+  },
+  {
+    "id": "navmenu",
+    "registryName": "navigation-menu",
+    "title": "Navigation Menu",
+    "group": "Navigation",
+    "summary": "A top-level navigation primitive with nested flyout items.",
+    "exportName": "NavigationMenu"
+  },
+  {
+    "id": "progress",
+    "registryName": "progress",
+    "title": "Progress",
+    "group": "Feedback",
+    "summary": "A linear indicator for completion percentage and loading workflows.",
+    "exportName": "Progress"
+  },
+  {
+    "id": "meter",
+    "registryName": "meter",
+    "title": "Meter",
+    "group": "Feedback",
+    "summary": "A semantic gauge for bounded measurements like storage or quota usage.",
+    "exportName": "Meter"
+  },
+  {
+    "id": "toast",
+    "registryName": "toast",
+    "title": "Toast",
+    "group": "Feedback",
+    "summary": "A transient notification system with provider-managed state.",
+    "exportName": "ToastProvider"
+  },
+  {
+    "id": "scrollarea",
+    "registryName": "scroll-area",
+    "title": "Scroll Area",
+    "group": "Feedback",
+    "summary": "A custom scroll container with consistent scrollbar styling across the site.",
+    "exportName": "ScrollArea"
+  },
+  {
+    "id": "avatar",
+    "registryName": "avatar",
+    "title": "Avatar",
+    "group": "Feedback",
+    "summary": "A compact identity primitive with fallback initials and grouped presentation.",
+    "exportName": "Avatar"
+  }
+]

package/src/docs/staticPageMeta.json

@@ -0,0 +1,143 @@
+[
+  {
+    "id": "landing",
+    "path": "/",
+    "title": "Base Themes — Themeable Base UI React Components",
+    "description": "Typed Base UI React component wrappers with production CSS tokens, 20 visual themes, registry metadata, and ready-to-use product UI blocks.",
+    "priority": "1.0"
+  },
+  {
+    "id": "blocks",
+    "path": "/blocks",
+    "title": "Application Blocks — Base Themes",
+    "description": "Composable dashboard and settings blocks built from accessible Base UI React primitives and themeable product UI tokens.",
+    "priority": "0.8"
+  },
+  {
+    "id": "themes",
+    "path": "/themes",
+    "title": "Theme System — Base Themes",
+    "description": "Explore Bento, shadcn, neo brutalism, minimal, enterprise, glass, terminal, and other token-based React UI themes.",
+    "priority": "0.9"
+  },
+  {
+    "id": "installation",
+    "path": "/docs/installation",
+    "title": "Install Base Themes for React",
+    "description": "Install base-themes from npm, import the bundled styles, and use typed Base UI React wrappers in Vite, Next.js, Remix, or any React app.",
+    "type": "article",
+    "priority": "0.9"
+  },
+  {
+    "id": "theming",
+    "path": "/docs/theming",
+    "title": "Theme Tokens and CSS Variables — Base Themes",
+    "description": "Learn the Base Themes data-style and data-theme contract, CSS variable layers, dark mode behavior, and practical theme override workflow.",
+    "type": "article",
+    "priority": "0.85"
+  },
+  {
+    "id": "registry",
+    "path": "/docs/registry",
+    "title": "Registry and Source Copy Workflow — Base Themes",
+    "description": "Use the Base Themes registry metadata to resolve components, blocks, source files, CSS tokens, dependencies, and copy plans for tools and agents.",
+    "type": "article",
+    "priority": "0.85"
+  },
+  {
+    "id": "cliUsage",
+    "path": "/docs/cli",
+    "title": "Base Themes CLI for Registry Copy Workflows",
+    "description": "Use npx base-themes list, plan, add, and doctor to inspect registry coverage, generate source-copy plans, copy files conservatively, and verify React app integration.",
+    "type": "article",
+    "priority": "0.8"
+  },
+  {
+    "id": "agentUsage",
+    "path": "/docs/agent-usage",
+    "title": "Agent Usage Guide — Base Themes",
+    "description": "Use the bundled Base Themes agent skill, registry exports, and verification commands to customize React components, blocks, and themes safely.",
+    "type": "article",
+    "priority": "0.8"
+  },
+  {
+    "id": "examples",
+    "path": "/docs/examples",
+    "title": "Runnable React Examples — Base Themes",
+    "description": "Build Vite, dashboard, Next.js, and registry-copy examples that prove Base Themes package installs, CSS imports, blocks, and registry metadata work in real apps.",
+    "type": "article",
+    "priority": "0.8"
+  },
+  {
+    "id": "contributingGuide",
+    "path": "/docs/contributing",
+    "title": "Contributing to Base Themes",
+    "description": "Follow the contribution workflow for Base Themes components, blocks, themes, registry metadata, tests, and release validation.",
+    "type": "article",
+    "priority": "0.75"
+  },
+  {
+    "id": "themeCustomization",
+    "path": "/docs/theme-customization",
+    "title": "Customize React UI Theme Tokens — Base Themes",
+    "description": "Adjust Base Themes primary color, radius, font, and density tokens, preview the result, and copy ready-to-use CSS variables.",
+    "type": "article",
+    "priority": "0.85"
+  },
+  {
+    "id": "whyBaseThemes",
+    "path": "/docs/why-base-themes",
+    "title": "Why Base Themes for Base UI React Components",
+    "description": "Learn how Base Themes adds typed wrappers, CSS variables, visual styles, registry metadata, and agent workflows on top of Base UI React primitives.",
+    "type": "article",
+    "priority": "0.85"
+  },
+  {
+    "id": "baseUiVsShadcn",
+    "path": "/docs/base-ui-vs-shadcn",
+    "title": "Base UI vs shadcn/ui for Themed React Apps",
+    "description": "Compare Base UI, shadcn/ui, and Base Themes honestly across primitives, install model, theming, source-copy workflows, and agent-ready registry metadata.",
+    "type": "article",
+    "priority": "0.8"
+  },
+  {
+    "id": "tokenSystem",
+    "path": "/docs/token-system",
+    "title": "CSS Variable Theme System for React — Base Themes",
+    "description": "Understand the Base Themes token architecture for surfaces, text, actions, radius, typography, dark mode, and custom React UI themes.",
+    "type": "article",
+    "priority": "0.85"
+  },
+  {
+    "id": "accessibility",
+    "path": "/docs/accessibility",
+    "title": "Accessible React UI Components — Base Themes",
+    "description": "See how Base Themes builds on Base UI accessibility primitives and verifies focus states, keyboard behavior, contrast, SSR safety, and registry parity.",
+    "type": "article",
+    "priority": "0.8"
+  },
+  {
+    "id": "migrationGuide",
+    "path": "/docs/migration-guide",
+    "title": "Migrate to Base Themes from shadcn, MUI, Chakra, or Custom CSS",
+    "description": "Adopt Base Themes incrementally with package CSS, data-style and data-theme tokens, component replacement slices, and registry-backed verification.",
+    "type": "article",
+    "priority": "0.8"
+  },
+  {
+    "id": "designHandoff",
+    "path": "/docs/design-handoff",
+    "title": "Figma and Design Token Handoff — Base Themes",
+    "description": "Use Base Themes CSS variables, preview assets, theme metadata, and registry files as a shared contract between design and implementation.",
+    "type": "article",
+    "priority": "0.75"
+  },
+  {
+    "id": "securityTrust",
+    "path": "/docs/security",
+    "title": "Security and Release Trust — Base Themes",
+    "description": "Review Base Themes vulnerability reporting, npm provenance, release checks, dependency posture, and registry trust boundaries before adopting the package.",
+    "type": "article",
+    "priority": "0.75"
+  }
+]

package/src/docs/themeMeta.json

@@ -0,0 +1,22 @@
+[
+  { "style": "bento", "label": "Bento", "description": "Warm modular product cards with soft depth and teal controls." },
+  { "style": "shadcn", "label": "Shadcn", "description": "Neutral zinc interface styling modeled after shadcn/ui." },
+  { "style": "neo-brutalism", "label": "Neo Brutalism", "description": "Hard borders, loud accents, and offset block shadows." },
+  { "style": "minimal", "label": "Minimal", "description": "Swiss-inspired whitespace, thin rules, and quiet monochrome controls." },
+  { "style": "enterprise", "label": "Enterprise", "description": "Dense operational UI with blue actions and explicit boundaries." },
+  { "style": "linear", "label": "Linear", "description": "Developer-tool polish with subtle gradients and refined dark mode." },
+  { "style": "glass", "label": "Glass", "description": "Translucent surfaces, blur, and luminous focus states." },
+  { "style": "terminal", "label": "Terminal", "description": "Monospace command-line interface with phosphor green command surfaces." },
+  { "style": "material", "label": "Material", "description": "Layered Google-style surfaces with blue primary actions and soft elevation." },
+  { "style": "fluent", "label": "Fluent", "description": "Microsoft-style acrylic surfaces, soft blue accents, and gentle borders." },
+  { "style": "retro", "label": "Retro", "description": "Early desktop UI cues with chunky controls and saturated classic colors." },
+  { "style": "cyberpunk", "label": "Cyberpunk", "description": "Dark high-energy neon controls for expressive dashboards." },
+  { "style": "editorial", "label": "Editorial", "description": "Magazine-like typography, ivory surfaces, and ink-forward contrast." },
+  { "style": "calm", "label": "Calm", "description": "Low-saturation wellness palette with relaxed controls and readable contrast." },
+  { "style": "data-dense", "label": "Data Dense", "description": "Compact analytics styling for tables, filters, and repeated workflows." },
+  { "style": "playful", "label": "Playful", "description": "Rounded, bright, friendly components for creative and education tools." },
+  { "style": "luxury", "label": "Luxury", "description": "Dark premium surfaces, gold accents, and fine-line hierarchy." },
+  { "style": "soft-ui", "label": "Soft UI", "description": "Low-contrast tactile controls with inset and raised shadows." },
+  { "style": "bauhaus", "label": "Bauhaus", "description": "Geometric composition with primary colors and strong graphic contrast." },
+  { "style": "mono", "label": "Mono", "description": "Black-and-white ink system with no decorative color dependency." }
+]

package/src/styles/tokenContract.json

@@ -0,0 +1,61 @@
+{
+  "version": "0.1.0",
+  "stablePrefix": "--bt-",
+  "legacyCompatibility": "Legacy tokens without the --bt- prefix remain compatibility aliases for the 0.x line. New docs, examples, registry items, and agent workflows should prefer --bt-* tokens.",
+  "dataAttributes": ["data-style", "data-theme"],
+  "publicTokens": {
+    "semantic": [
+      { "name": "--bt-bg", "legacy": "--bg", "description": "Page background." },
+      { "name": "--bt-fg", "legacy": "--text-strong", "description": "Primary foreground text." },
+      { "name": "--bt-text", "legacy": "--text", "description": "Default body text." },
+      { "name": "--bt-muted-fg", "legacy": "--text-muted", "description": "Secondary text and labels." },
+      { "name": "--bt-surface", "legacy": "--surface", "description": "Default panel or control surface." },
+      { "name": "--bt-surface-muted", "legacy": "--surface-muted", "description": "Subtle grouped surface." },
+      { "name": "--bt-surface-strong", "legacy": "--surface-strong", "description": "High-contrast surface used for inverse controls." },
+      { "name": "--bt-border", "legacy": "--line", "description": "Default border color." },
+      { "name": "--bt-border-strong", "legacy": "--line-strong", "description": "Higher emphasis border color." },
+      { "name": "--bt-primary", "legacy": "--accent", "description": "Primary action color." },
+      { "name": "--bt-primary-hover", "legacy": "--accent-strong", "description": "Primary action hover or pressed color." },
+      { "name": "--bt-primary-fg", "legacy": "--theme-primary-foreground", "description": "Text/icon color on primary actions." },
+      { "name": "--bt-secondary", "legacy": "--teal", "description": "Secondary action color." },
+      { "name": "--bt-secondary-fg", "legacy": "--theme-teal-foreground", "description": "Text/icon color on secondary actions." },
+      { "name": "--bt-info", "legacy": "--blue", "description": "Informational accent color." },
+      { "name": "--bt-success", "legacy": "--green", "description": "Success accent color." },
+      { "name": "--bt-danger", "legacy": "--theme-danger", "description": "Danger/error accent color." },
+      { "name": "--bt-danger-fg", "legacy": "--theme-danger-foreground", "description": "Text/icon color on danger actions." },
+      { "name": "--bt-ring", "legacy": "--theme-focus", "description": "Focus ring color." }
+    ],
+    "shapeTypography": [
+      { "name": "--bt-radius", "legacy": "--radius", "description": "Default large radius." },
+      { "name": "--bt-radius-sm", "legacy": "--radius-sm", "description": "Compact control radius." },
+      { "name": "--bt-font-sans", "legacy": "--font-sans", "description": "Sans-serif font stack." },
+      { "name": "--bt-font-mono", "legacy": "--font-mono", "description": "Monospace font stack." },
+      { "name": "--bt-shadow", "legacy": "--shadow", "description": "Default elevated shadow." },
+      { "name": "--bt-shadow-strong", "legacy": "--shadow-strong", "description": "High emphasis shadow." }
+    ],
+    "componentAliases": [
+      { "name": "--bt-button-bg", "legacy": "--surface-strong", "description": "Default button background." },
+      { "name": "--bt-button-fg", "legacy": "--bg", "description": "Default button foreground." },
+      { "name": "--bt-button-border", "legacy": "--line", "description": "Button border color." },
+      { "name": "--bt-input-bg", "legacy": "--surface", "description": "Input background." },
+      { "name": "--bt-input-fg", "legacy": "--text-strong", "description": "Input foreground." },
+      { "name": "--bt-input-border", "legacy": "--line-strong", "description": "Input border color." },
+      { "name": "--bt-select-popup-bg", "legacy": "--theme-popup-bg", "description": "Select/menu popup background." },
+      { "name": "--bt-select-popup-fg", "legacy": "--theme-popup-text", "description": "Select/menu popup foreground." },
+      { "name": "--bt-tabs-active-bg", "legacy": "--surface", "description": "Active tab background." },
+      { "name": "--bt-tabs-active-fg", "legacy": "--text-strong", "description": "Active tab foreground." }
+    ],
+    "motionDensity": [
+      { "name": "--bt-border-width", "legacy": "--theme-border-width", "description": "Default control border width." },
+      { "name": "--bt-font-weight", "legacy": "--theme-font-weight", "description": "Default control font weight." },
+      { "name": "--bt-duration", "legacy": "--theme-transition-duration", "description": "Default interaction transition duration." },
+      { "name": "--bt-letter-spacing", "legacy": "--theme-letter-spacing", "description": "Default control letter spacing." },
+      { "name": "--bt-control-height", "legacy": "--theme-control-height", "description": "Default control height for dense customization." }
+    ],
+    "docsOnly": [
+      { "name": "--topbar-bg", "description": "Docs topbar background; not a package component API." },
+      { "name": "--card-bg", "description": "Docs card background; not a package component API." },
+      { "name": "--hero-text", "description": "Docs hero text token; not a package component API." }
+    ]
+  }
+}