@loworbitstudio/visor 0.4.0 → 0.6.0

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-04-21T17:12:43.539Z",
+  "generated_at": "2026-04-29T19:23:27.556Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -1401,6 +1401,7 @@
         "--surface-card",
         "--surface-interactive-default",
         "--surface-interactive-hover",
+        "--surface-popover",
         "--text-primary",
         "--text-secondary"
       ],
@@ -1492,6 +1493,7 @@
         "--spacing-6",
         "--surface-card",
         "--surface-interactive-hover",
+        "--surface-popover",
         "--text-primary",
         "--text-secondary",
         "--text-tertiary"
@@ -1744,6 +1746,7 @@
         "--surface-card",
         "--surface-error-subtle",
         "--surface-interactive-hover",
+        "--surface-popover",
         "--text-error",
         "--text-primary",
         "--text-secondary"
@@ -1958,11 +1961,80 @@
         "--spacing-2",
         "--spacing-3",
         "--surface-card",
+        "--surface-popover",
         "--text-primary",
         "--text-tertiary"
       ],
       "example": "<DatePicker\n  value={selectedDate}\n  onChange={setSelectedDate}\n  placeholder=\"Select a date\"\n/>\n\n<DatePicker\n  value={dueDate}\n  onChange={setDueDate}\n  dateFormat=\"MM/dd/yyyy\"\n  disabled={isReadOnly}\n/>\n"
     },
+    "date-range-picker": {
+      "category": "form",
+      "description": "A date range picker combining a trigger button with a two-month popover Calendar for start–end date selection.",
+      "when_to_use": [
+        "Date range input in forms (check-in/check-out, travel dates, billing period)",
+        "Any field where users need to select both a start and end date from a calendar popup",
+        "Compact range selection that doesn't take up inline space"
+      ],
+      "when_not_to_use": [
+        "Single date selection (use DatePicker)",
+        "Always-visible range calendar display (use Calendar with mode=\"range\" inline)",
+        "Date and time together (use a dedicated datetime picker)",
+        "Free-form date text entry (use Input with date validation)"
+      ],
+      "props": [
+        {
+          "name": "value",
+          "type": "DateRange | undefined",
+          "description": "Currently selected date range ({ from, to })"
+        },
+        {
+          "name": "onChange",
+          "type": "(range: DateRange) => void",
+          "description": "Called when the range changes"
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "default": "\"Pick a date range\""
+        },
+        {
+          "name": "dateFormat",
+          "type": "string",
+          "default": "\"PPP\"",
+          "description": "date-fns format string for displaying both endpoints"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "dependencies": [
+        "@radix-ui/react-popover",
+        "date-fns",
+        "@phosphor-icons/react"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-focus",
+        "--border-strong",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-size-sm",
+        "--motion-duration-fast",
+        "--motion-easing-default",
+        "--radius-lg",
+        "--radius-md",
+        "--shadow-md",
+        "--spacing-2",
+        "--spacing-3",
+        "--surface-card",
+        "--surface-popover",
+        "--text-primary",
+        "--text-tertiary"
+      ],
+      "example": "<DateRangePicker\n  value={range}\n  onChange={setRange}\n  placeholder=\"Select date range\"\n/>\n\n<DateRangePicker\n  value={travelDates}\n  onChange={setTravelDates}\n  dateFormat=\"MM/dd/yyyy\"\n  disabled={isReadOnly}\n/>\n"
+    },
     "dialog": {
       "category": "overlay",
       "description": "Modal overlay that requires user attention before returning to the page.",
@@ -2190,6 +2262,7 @@
         "--surface-card",
         "--surface-error-subtle",
         "--surface-interactive-hover",
+        "--surface-popover",
         "--text-error",
         "--text-primary",
         "--text-secondary"
@@ -2922,6 +2995,7 @@
         "--shadow-lg",
         "--spacing-4",
         "--surface-card",
+        "--surface-popover",
         "--text-primary"
       ],
       "example": "<HoverCard>\n  <HoverCardTrigger asChild>\n    <a href=\"/user/jane\">@jane</a>\n  </HoverCardTrigger>\n  <HoverCardContent>\n    <p><strong>Jane Smith</strong></p>\n    <p>Product designer at Acme Corp</p>\n  </HoverCardContent>\n</HoverCard>\n"
@@ -3372,6 +3446,7 @@
         "--surface-card",
         "--surface-error-subtle",
         "--surface-interactive-hover",
+        "--surface-popover",
         "--text-error",
         "--text-primary",
         "--text-secondary"
@@ -4007,6 +4082,7 @@
         "--shadow-lg",
         "--spacing-4",
         "--surface-card",
+        "--surface-popover",
         "--text-primary"
       ],
       "example": "<Popover>\n  <PopoverTrigger asChild>\n    <Button variant=\"outline\">Open settings</Button>\n  </PopoverTrigger>\n  <PopoverContent>\n    <p>Popover content here</p>\n  </PopoverContent>\n</Popover>\n"
@@ -4320,7 +4396,7 @@
         "--surface-card",
         "--surface-interactive-default",
         "--surface-interactive-hover",
-        "--surface-overlay",
+        "--surface-popover",
         "--text-primary",
         "--text-secondary"
       ],
@@ -4732,7 +4808,8 @@
         "--motion-easing-default",
         "--shadow-sm",
         "--surface-card",
-        "--surface-interactive-default"
+        "--surface-interactive-default",
+        "--surface-popover"
       ],
       "example": "<Slider defaultValue={[50]} max={100} step={1} />\n\n<Slider defaultValue={[25, 75]} max={100} step={5} />\n"
     },
@@ -5574,6 +5651,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.",
@@ -5710,6 +5862,7 @@
         "--surface-card",
         "--surface-error-subtle",
         "--surface-info-subtle",
+        "--surface-popover",
         "--surface-success-subtle",
         "--surface-warning-subtle",
         "--text-primary",
@@ -7747,6 +7900,7 @@
       "checkbox",
       "combobox",
       "date-picker",
+      "date-range-picker",
       "field",
       "fieldset",
       "file-upload",
@@ -7792,6 +7946,9 @@
       "menubar",
       "sheet"
     ],
+    "general": [
+      "theme-switcher"
+    ],
     "deck": [
       "deck-card-grid",
       "deck-carousel-gallery",
@@ -8810,6 +8967,13 @@
         "defaultLight": "var(--color-neutral-50)",
         "defaultDark": "var(--color-neutral-50)"
       },
+      {
+        "name": "--surface-selected",
+        "tier": "semantic",
+        "description": "Semantic surface: selected",
+        "defaultLight": "var(--color-primary-100)",
+        "defaultDark": "var(--color-primary-100)"
+      },
       {
         "name": "--surface-accent-subtle",
         "tier": "semantic",
@@ -9547,6 +9711,13 @@
         "defaultLight": "#f9fafb",
         "defaultDark": "#1f2937"
       },
+      {
+        "name": "--surface-selected",
+        "tier": "adaptive",
+        "description": "Adaptive surface: selected",
+        "defaultLight": "#dbeafe",
+        "defaultDark": "#1e40af"
+      },
       {
         "name": "--surface-accent-subtle",
         "tier": "adaptive",
@@ -9906,7 +10077,7 @@
       }
     ],
     "summary": {
-      "total": 298
+      "total": 300
     }
   }
 }

package/package.json

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