@loworbitstudio/visor 0.5.0 → 0.7.0

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-04-28T22:06:10.255Z",
+  "generated_at": "2026-05-01T00:42:09.764Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -1432,6 +1432,16 @@
           "name": "onOpenChange",
           "type": "(open: boolean) => void",
           "description": "Callback when CommandDialog open state changes"
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "description": "Additional class name merged onto DialogContent via cn(). Use for width, padding, or elevation overrides (e.g. the V7 640 px / 540 px palette spec)."
+        },
+        {
+          "name": "contentProps",
+          "type": "Omit<React.ComponentProps<typeof DialogContent>, 'className' | 'children'>",
+          "description": "Spread of any remaining DialogContent props (e.g. onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onEscapeKeyDown). className and children are excluded to prevent conflicts."
         }
       ],
       "sub_components": [
@@ -1779,8 +1789,17 @@
         {
           "name": "data",
           "type": "TData[]",
-          "required": true,
-          "description": "Array of row records."
+          "description": "Array of row records. Optional when `rows` is provided — DataTable derives the data array from row entries internally."
+        },
+        {
+          "name": "rows",
+          "type": "DataTableRow<TData>[]",
+          "description": "Mixed render order with group-head separators. Each entry is either `{ kind: \"group\", id, label, count? }` or `{ kind: \"data\", id, row }`. When provided, the caller owns sort/grouping/windowing — column header sort UI and the pagination footer are suppressed. Group rows render full-width via colSpan and are excluded from selection state.\n"
+        },
+        {
+          "name": "groupRowRenderer",
+          "type": "(group: DataTableGroupRow) => React.ReactNode",
+          "description": "Optional render slot for custom group-head content. When omitted, the default renderer shows label + optional count using the eyebrow type scale and `--surface-subtle` background."
         },
         {
           "name": "sorting",
@@ -1880,6 +1899,8 @@
         "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-sm",
+        "--font-size-xs",
+        "--font-weight-medium",
         "--font-weight-semibold",
         "--line-height-tight",
         "--motion-duration-fast",
@@ -1893,7 +1914,9 @@
         "--spacing-6",
         "--spacing-8",
         "--surface-card",
+        "--surface-subtle",
         "--text-primary",
+        "--text-quaternary",
         "--text-secondary",
         "--text-tertiary"
       ],
@@ -2452,6 +2475,7 @@
       ],
       "tokens_used": [
         "--font-size-sm",
+        "--font-size-xs",
         "--font-weight-medium",
         "--font-weight-normal",
         "--spacing-1",
@@ -2778,6 +2802,11 @@
           "type": "'onSubmit' | 'onBlur' | 'onInput'",
           "default": "onBlur",
           "description": "When to trigger client-side validation"
+        },
+        {
+          "name": "passwordManagers",
+          "type": "'ignore' | 'allow'",
+          "description": "Form-level default for password-manager autofill on descendant Input and Textarea fields. Field-level passwordManagers prop always wins. When omitted, fields fall back to their own default of \"ignore\".\n"
         }
       ],
       "sub_components": [
@@ -3126,6 +3155,12 @@
           "name": "leadingIcon",
           "type": "React.ReactNode",
           "description": "Optional leading glyph rendered inside the field (e.g. a Phosphor icon). The input reserves enough left padding to clear it."
+        },
+        {
+          "name": "passwordManagers",
+          "type": "'ignore' | 'allow'",
+          "default": "ignore",
+          "description": "Controls password-manager autofill behavior. Defaults to \"ignore\" so contact, marketing, and settings forms don't render 1Password/Bitwarden/LastPass autofill icons. Set to \"allow\" on login and credential fields. When \"ignore\", emits data-1p-ignore, data-bwignore, data-lpignore, and data-form-type=\"other\" — the four per-manager opt-out attributes browsers honor where autocomplete=\"off\" is ignored.\n"
         }
       ],
       "dependencies": [],
@@ -3150,7 +3185,7 @@
         "--text-primary",
         "--text-secondary"
       ],
-      "example": "<Input type=\"email\" placeholder=\"you@example.com\" />\n\n<Input type=\"password\" aria-invalid=\"true\" />\n"
+      "example": "<Input type=\"email\" placeholder=\"you@example.com\" />\n\n<Input type=\"password\" passwordManagers=\"allow\" aria-invalid=\"true\" />\n"
     },
     "kbd": {
       "category": "admin",
@@ -4925,6 +4960,11 @@
         "size": [
           "sm",
           "md"
+        ],
+        "valueAs": [
+          "default",
+          "hero",
+          "compact"
         ]
       },
       "props": [
@@ -4972,6 +5012,17 @@
           "type": "'sm' | 'md'",
           "default": "md",
           "description": "Dimensional density. Use sm for dense rows of compact cards; md is the default dashboard size."
+        },
+        {
+          "name": "valueAs",
+          "type": "'default' | 'hero' | 'compact'",
+          "default": "default",
+          "description": "Typography scale for the value. \"hero\" applies a marquee display treatment (large font, display weight, tabular-nums, letter-spacing 0). \"compact\" uses a tighter 2xl size. Override the font and size via --stat-card-value-font and --stat-card-value-size CSS custom properties.\n"
+        },
+        {
+          "name": "valueClassName",
+          "type": "string",
+          "description": "Additional class names forwarded to the value element for fully custom value rendering."
         }
       ],
       "dependencies": [
@@ -4979,6 +5030,7 @@
       ],
       "tokens_used": [
         "--border-default",
+        "--font-display",
         "--font-family-heading",
         "--font-size-2xl",
         "--font-size-3xl",
@@ -4986,6 +5038,7 @@
         "--font-size-sm",
         "--font-size-xs",
         "--font-weight-medium",
+        "--font-weight-normal",
         "--font-weight-regular",
         "--font-weight-semibold",
         "--interactive-primary-bg",
@@ -5003,6 +5056,8 @@
         "--spacing-3",
         "--spacing-4",
         "--spacing-5",
+        "--stat-card-value-font",
+        "--stat-card-value-size",
         "--surface-card",
         "--text-danger",
         "--text-primary",
@@ -5429,6 +5484,7 @@
         "--spacing-2",
         "--surface-muted",
         "--surface-page",
+        "--tabs-indicator-color",
         "--text-primary",
         "--text-secondary"
       ],
@@ -5626,6 +5682,12 @@
         {
           "name": "placeholder",
           "type": "string"
+        },
+        {
+          "name": "passwordManagers",
+          "type": "'ignore' | 'allow'",
+          "default": "ignore",
+          "description": "Controls password-manager autofill behavior. Defaults to \"ignore\" so contact, marketing, and settings forms don't render 1Password/Bitwarden/LastPass autofill icons. Set to \"allow\" on the rare credential field where autofill is desired. When \"ignore\", emits data-1p-ignore, data-bwignore, data-lpignore, and data-form-type=\"other\" — the four per-manager opt-out attributes browsers honor where autocomplete=\"off\" is ignored.\n"
         }
       ],
       "dependencies": [],
@@ -5651,6 +5713,81 @@
       ],
       "example": "<Textarea placeholder=\"Write your message...\" rows={4} />\n\n<Textarea aria-invalid=\"true\" />\n"
     },
+    "theme-switcher": {
+      "category": "general",
+      "description": "Fixed-position pill switcher for theme and dark/light mode, with an extras slot for hosting devtools chrome.",
+      "when_to_use": [
+        "Hosts apps that ship multiple Visor themes and need a runtime switcher",
+        "Dark/light mode toggle persisted across sessions",
+        "Mounting devtools chrome (e.g., SourceInspectorToggle) into a stable host"
+      ],
+      "when_not_to_use": [
+        "Production-only chrome with no dev affordances (use a tighter custom switcher)",
+        "Single-theme apps that only need a mode toggle (build a leaner control)"
+      ],
+      "props": [
+        {
+          "name": "themes",
+          "type": "ThemeOption[]",
+          "default": "[]",
+          "description": "List of themes available in the Theme segment. Empty list hides the Theme segment and only renders Mode."
+        },
+        {
+          "name": "defaultThemeId",
+          "type": "string",
+          "default": "themes[0]?.id",
+          "description": "Initial theme id when nothing is stored."
+        },
+        {
+          "name": "defaultMode",
+          "type": "'dark' | 'light'",
+          "default": "dark"
+        },
+        {
+          "name": "themeStorageKey",
+          "type": "string",
+          "default": "visor-theme"
+        },
+        {
+          "name": "modeStorageKey",
+          "type": "string",
+          "default": "visor-color-mode"
+        },
+        {
+          "name": "extras",
+          "type": "React.ReactNode",
+          "description": "Rendered after the Mode segment, inside the wrapper. For dev chrome (e.g., SourceInspectorToggle)."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional className merged onto the root wrapper."
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [
+        "--border-focus",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-body",
+        "--font-size-xs",
+        "--font-weight-medium",
+        "--motion-duration-100",
+        "--motion-easing-default",
+        "--radius-full",
+        "--shadow-md",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--stroke-width-thin",
+        "--surface-card",
+        "--surface-popover",
+        "--text-primary",
+        "--text-secondary",
+        "--text-tertiary"
+      ],
+      "example": "import { ThemeSwitcher } from \"@/components/ui/theme-switcher/theme-switcher\"\nimport { SourceInspectorToggle } from \"@/components/devtools/source-inspector/source-inspector-toggle\"\n\n<ThemeSwitcher\n  themes={[\n    { id: \"default\", label: \"Default\", bodyClass: \"\" },\n    { id: \"blackout\", label: \"Blackout\", bodyClass: \"blackout-theme\" },\n  ]}\n  extras={<SourceInspectorToggle />}\n/>\n"
+    },
     "timeline": {
       "category": "data-display",
       "description": "A vertical timeline with status-based styling, optional icons, timestamps, and connector lines.",
@@ -6706,7 +6843,7 @@
     },
     "admin-detail-drawer": {
       "category": "admin",
-      "description": "Right-side slide-out panel for viewing or editing a single record. Composes Sheet with a sticky save/cancel footer, async save handler with pending state, an unsaved-changes guard powered by ConfirmDialog, and sm/md/lg/xl width variants.",
+      "description": "Right-side slide-out panel for viewing or editing a single record. Composes Sheet with a sticky save/cancel footer, async save handler with pending state, an unsaved-changes guard powered by ConfirmDialog, sm/md/lg/xl width variants, and optional header customization via hideHeader and customHeader props.",
       "components_used": [
         "sheet",
         "button",
@@ -6746,7 +6883,7 @@
     },
     "admin-settings-page": {
       "category": "admin",
-      "description": "Long scrollable settings archetype with labeled sections and an optional sticky left-side nav that sync-scrolls via intersection observer. Supports two mutually-exclusive modes — a single global sticky save/cancel footer (default) or per-section save/revert footer rows. Composes PageHeader, Separator, Heading, Text, Button, and ConfirmDialog.",
+      "description": "Long scrollable settings archetype with labeled sections and an optional sticky left-side nav that sync-scrolls via intersection observer. Supports flat or grouped (categorical) nav with eyebrow labels above section clusters. Supports two mutually-exclusive modes — a single global sticky save/cancel footer (default) or per-section save/revert footer rows. Composes PageHeader, Separator, Heading, Text, Button, and ConfirmDialog.",
       "components_used": [
         "page-header",
         "separator",
@@ -7074,6 +7211,25 @@
         "Product reviews with ratings (extend with star component)",
         "User-generated content feeds"
       ]
+    },
+    "workspace-switcher": {
+      "category": "admin",
+      "description": "Sidebar-header workspace switcher composing a button trigger and a DropdownMenu of available workspaces. The trigger displays the current workspace's avatar, name, optional plan/role line, and a caret. Used in the AdminShell's `logo` slot for multi-tenant admin apps.",
+      "components_used": [
+        "avatar",
+        "dropdown-menu"
+      ],
+      "when_to_use": [
+        "Multi-tenant admin apps where users belong to multiple workspaces or organizations",
+        "Sidebar header (`logo` slot) of `AdminShell` to swap the active workspace context",
+        "Any UI where the active org/team is part of the user's mental address bar"
+      ],
+      "when_not_to_use": [
+        "Single-tenant apps with no concept of switching context",
+        "Search-to-filter pickers (use a combobox or command palette instead)",
+        "Workspace creation flows (consumer composes those above or below the switcher)",
+        "Loading or skeleton states (consumer renders their own skeleton until data is ready)"
+      ]
     }
   },
   "hooks": {
@@ -7871,6 +8027,9 @@
       "menubar",
       "sheet"
     ],
+    "general": [
+      "theme-switcher"
+    ],
     "deck": [
       "deck-card-grid",
       "deck-carousel-gallery",
@@ -8411,6 +8570,13 @@
         "defaultLight": "4px",
         "defaultDark": "4px"
       },
+      {
+        "name": "--font-size-2xs",
+        "tier": "primitive",
+        "description": "Primitive font size: 11px",
+        "defaultLight": "0.6875rem",
+        "defaultDark": "0.6875rem"
+      },
       {
         "name": "--font-size-xs",
         "tier": "primitive",
@@ -8973,6 +9139,41 @@
         "defaultLight": "var(--color-info-500)",
         "defaultDark": "var(--color-info-500)"
       },
+      {
+        "name": "--surface-elev-0",
+        "tier": "semantic",
+        "description": "Semantic surface: elev-0",
+        "defaultLight": "var(--color-neutral-950)",
+        "defaultDark": "var(--color-neutral-950)"
+      },
+      {
+        "name": "--surface-elev-1",
+        "tier": "semantic",
+        "description": "Semantic surface: elev-1",
+        "defaultLight": "var(--color-neutral-900)",
+        "defaultDark": "var(--color-neutral-900)"
+      },
+      {
+        "name": "--surface-elev-2",
+        "tier": "semantic",
+        "description": "Semantic surface: elev-2",
+        "defaultLight": "var(--color-neutral-800)",
+        "defaultDark": "var(--color-neutral-800)"
+      },
+      {
+        "name": "--surface-elev-3",
+        "tier": "semantic",
+        "description": "Semantic surface: elev-3",
+        "defaultLight": "var(--color-neutral-700)",
+        "defaultDark": "var(--color-neutral-700)"
+      },
+      {
+        "name": "--surface-elev-4",
+        "tier": "semantic",
+        "description": "Semantic surface: elev-4",
+        "defaultLight": "var(--color-neutral-600)",
+        "defaultDark": "var(--color-neutral-600)"
+      },
       {
         "name": "--border-default",
         "tier": "semantic",
@@ -9717,6 +9918,41 @@
         "defaultLight": "#0ea5e9",
         "defaultDark": "#0ea5e9"
       },
+      {
+        "name": "--surface-elev-0",
+        "tier": "adaptive",
+        "description": "Adaptive surface: elev-0",
+        "defaultLight": "#ffffff",
+        "defaultDark": "#030712"
+      },
+      {
+        "name": "--surface-elev-1",
+        "tier": "adaptive",
+        "description": "Adaptive surface: elev-1",
+        "defaultLight": "#f9fafb",
+        "defaultDark": "#111827"
+      },
+      {
+        "name": "--surface-elev-2",
+        "tier": "adaptive",
+        "description": "Adaptive surface: elev-2",
+        "defaultLight": "#f3f4f6",
+        "defaultDark": "#1f2937"
+      },
+      {
+        "name": "--surface-elev-3",
+        "tier": "adaptive",
+        "description": "Adaptive surface: elev-3",
+        "defaultLight": "#e5e7eb",
+        "defaultDark": "#374151"
+      },
+      {
+        "name": "--surface-elev-4",
+        "tier": "adaptive",
+        "description": "Adaptive surface: elev-4",
+        "defaultLight": "#d1d5db",
+        "defaultDark": "#4b5563"
+      },
       {
         "name": "--border-default",
         "tier": "adaptive",
@@ -9999,7 +10235,7 @@
       }
     ],
     "summary": {
-      "total": 300
+      "total": 311
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loworbitstudio/visor",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "CLI for the Visor design system — add components, hooks, and utilities to your project.",
   "type": "module",
   "bin": {