@loworbitstudio/visor 0.4.0 → 0.5.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-28T22:06:10.255Z",
   "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"
     },
@@ -5710,6 +5787,7 @@
         "--surface-card",
         "--surface-error-subtle",
         "--surface-info-subtle",
+        "--surface-popover",
         "--surface-success-subtle",
         "--surface-warning-subtle",
         "--text-primary",
@@ -7747,6 +7825,7 @@
       "checkbox",
       "combobox",
       "date-picker",
+      "date-range-picker",
       "field",
       "fieldset",
       "file-upload",
@@ -8810,6 +8889,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 +9633,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 +9999,7 @@
       }
     ],
     "summary": {
-      "total": 298
+      "total": 300
     }
   }
 }

package/package.json

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