@loworbitstudio/visor 1.31.0 → 1.34.0

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-10-03T23:23:41.691Z",
+  "generated_at": "2026-10-04T04:36:38.216Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -1220,24 +1220,29 @@
         "--border-focus",
         "--border-strong",
         "--button-dlg-font-size",
+        "--button-dlg-font-weight",
         "--button-dlg-letter-spacing",
         "--button-dlg-radius",
         "--button-dlg-text-transform",
+        "--button-font-weight",
         "--button-icon-ghost-color",
         "--button-icon-pad",
         "--button-icon-radius",
         "--button-icon-size",
         "--button-letter-spacing",
         "--button-lg-font-size",
+        "--button-lg-font-weight",
         "--button-lg-letter-spacing",
         "--button-lg-radius",
         "--button-lg-text-transform",
         "--button-md-font-size",
+        "--button-md-font-weight",
         "--button-md-letter-spacing",
         "--button-md-radius",
         "--button-md-text-transform",
         "--button-radius",
         "--button-sm-font-size",
+        "--button-sm-font-weight",
         "--button-sm-letter-spacing",
         "--button-sm-radius",
         "--button-sm-text-transform",
@@ -3440,6 +3445,30 @@
           "name": "disabled",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "align",
+          "type": "\"start\" | \"center\" | \"end\"",
+          "default": "\"start\"",
+          "description": "Popover alignment against the trigger. Use \"end\" under a full-width trigger so the calendar does not sit against the right edge."
+        },
+        {
+          "name": "sideOffset",
+          "type": "number",
+          "default": "4",
+          "description": "Gap in px between the trigger and the popover"
+        },
+        {
+          "name": "collisionPadding",
+          "type": "number",
+          "default": "0",
+          "description": "Viewport padding in px the popover keeps clear when it collides with an edge"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Whether the popover starts open (uncontrolled)"
         }
       ],
       "dependencies": [
@@ -3451,6 +3480,9 @@
         "--border-default",
         "--border-focus",
         "--border-strong",
+        "--control-edge-color",
+        "--control-edge-style",
+        "--control-edge-width",
         "--field-menu-bg",
         "--focus-ring-offset",
         "--focus-ring-width",
@@ -5656,6 +5688,16 @@
           "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": "prefix",
+          "type": "React.ReactNode",
+          "description": "Fixed text before the value, inside the same well (a currency symbol). Drawn in the secondary text colour, never part of the value or the selection, and the value never runs under it. Clicking it focuses the input; it is wired to the input with aria-describedby, so assistive tech reads it as a description, not as the value. Replaces the native `prefix` HTML attribute, which is not forwarded. When set, `className` lands on the wrapper that draws the well.\n"
+        },
+        {
+          "name": "suffix",
+          "type": "React.ReactNode",
+          "description": "Fixed text after the value, inside the same well (`.epk.pro`, a unit). Same behaviour as `prefix`."
+        },
         {
           "name": "passwordManagers",
           "type": "'ignore' | 'allow'",
@@ -5665,6 +5707,8 @@
       ],
       "dependencies": [],
       "tokens_used": [
+        "--affix-inset",
+        "--affix-pad-y",
         "--border-default",
         "--border-error",
         "--border-focus",
@@ -5672,17 +5716,27 @@
         "--control-edge-color",
         "--control-edge-style",
         "--control-edge-width",
+        "--control-invalid-halo-width",
+        "--control-invalid-ring-width",
         "--control-state-edge-width",
         "--field-control-bg",
         "--focus-ring-offset",
         "--focus-ring-width",
+        "--font-ascent",
+        "--font-descent",
         "--font-size-base",
         "--font-size-sm",
+        "--input-affix-color",
+        "--input-affix-gap",
         "--input-bg",
         "--input-bg-invalid",
         "--input-border",
+        "--input-box",
         "--input-height-lg",
         "--input-height-md",
+        "--input-md-height",
+        "--input-md-padding",
+        "--input-md-radius",
         "--input-nudge",
         "--input-padding-lg",
         "--input-padding-md",
@@ -5695,6 +5749,7 @@
         "--radius-md",
         "--radius-sm",
         "--spacing-1",
+        "--spacing-2",
         "--spacing-3",
         "--spacing-3_5",
         "--spacing-4",
@@ -5707,7 +5762,7 @@
         "--text-primary",
         "--text-secondary"
       ],
-      "example": "<Input type=\"email\" placeholder=\"you@example.com\" />\n\n<Input type=\"password\" passwordManagers=\"allow\" aria-invalid=\"true\" />\n"
+      "example": "<Input type=\"email\" placeholder=\"you@example.com\" />\n\n<Input suffix=\".epk.pro\" aria-label=\"Address\" />\n\n<Input prefix=\"€\" inputMode=\"decimal\" aria-label=\"Amount\" />\n\n<Input type=\"password\" passwordManagers=\"allow\" aria-invalid=\"true\" />\n"
     },
     "kbd": {
       "category": "admin",
@@ -6510,6 +6565,16 @@
           "type": "number",
           "default": "1",
           "description": "Increment/decrement step size."
+        },
+        {
+          "name": "prefix",
+          "type": "React.ReactNode",
+          "description": "Fixed text before the value, inside the same well (a currency symbol). Same treatment as Input's prefix; replaces the native `prefix` attribute."
+        },
+        {
+          "name": "suffix",
+          "type": "React.ReactNode",
+          "description": "Fixed text after the value, inside the same well (a unit such as `h` or `m`)."
         }
       ],
       "dependencies": [
@@ -6518,21 +6583,31 @@
       "tokens_used": [
         "--border-default",
         "--border-focus",
+        "--control-edge-color",
+        "--control-edge-style",
+        "--control-edge-width",
+        "--control-state-edge-width",
         "--focus-ring-offset",
         "--focus-ring-width",
+        "--font-ascent",
+        "--font-descent",
         "--font-size-sm",
+        "--input-affix-color",
+        "--input-affix-gap",
+        "--input-nudge",
         "--motion-duration-150",
         "--motion-easing-default",
         "--number-input-bg",
         "--number-input-border",
         "--radius-md",
+        "--spacing-2",
         "--surface-interactive-default",
         "--surface-interactive-hover",
         "--surface-muted",
         "--text-primary",
         "--text-secondary"
       ],
-      "example": "<NumberInput defaultValue={1} min={0} max={10} step={1} />\n"
+      "example": "<NumberInput defaultValue={1} min={0} max={10} step={1} />\n\n<NumberInput prefix=\"$\" defaultValue={150} aria-label=\"Fee\" />\n\n<NumberInput suffix=\"h\" defaultValue={2} aria-label=\"Hours\" />\n"
     },
     "offline-banner": {
       "category": "feedback",
@@ -6690,23 +6765,52 @@
           "type": "boolean",
           "default": "false",
           "description": "Auto-focus the first cell on mount."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "default": "false",
+          "description": "Marks every cell aria-invalid and draws the invalid edge. The digits are kept so they can be corrected."
+        },
+        {
+          "name": "errorMessage",
+          "type": "ReactNode",
+          "description": "Shown under the cells while invalid, in the error text colour, as a role=alert live region. The component draws the message, so do not render a second error line."
+        },
+        {
+          "name": "trailing",
+          "type": "ReactNode",
+          "description": "Trailing content beside the cells, for a working indicator (Spinner) or a resend action."
         }
       ],
       "dependencies": [],
       "tokens_used": [
         "--border-default",
+        "--border-error",
         "--border-focus",
         "--border-strong",
+        "--control-edge-color",
+        "--control-edge-style",
+        "--control-edge-width",
+        "--control-invalid-halo-width",
+        "--control-invalid-ring-width",
+        "--control-state-edge-width",
+        "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-lg",
+        "--font-size-sm",
         "--font-weight-medium",
+        "--font-weight-normal",
         "--motion-duration-150",
         "--motion-easing-default",
         "--otp-bg",
+        "--otp-bg-invalid",
         "--otp-border",
         "--radius-md",
         "--spacing-2",
+        "--surface-error-subtle",
         "--surface-interactive-default",
+        "--text-error",
         "--text-primary",
         "--text-secondary"
       ],
@@ -7439,6 +7543,12 @@
           "default": "\"text\"",
           "description": "How unsaved is drawn. dot draws a dot alone, keeping the label as visually hidden text so it is still announced."
         },
+        {
+          "name": "dot",
+          "type": "boolean",
+          "default": "false",
+          "description": "Draws a status dot before the label in every state, in the state's ink. Its box is as wide as the larger of the two dot sizes, so the label never moves."
+        },
         {
           "name": "retryLabel",
           "type": "string",
@@ -7464,9 +7574,11 @@
         "--radius-sm",
         "--save-status-dot-size",
         "--save-status-font-family",
+        "--save-status-font-size",
         "--save-status-letter-spacing",
         "--save-status-syncing-color",
         "--save-status-text-transform",
+        "--save-status-unsaved-dot-size",
         "--save-status-width",
         "--spacing-1",
         "--spacing-2",
@@ -7896,6 +8008,103 @@
       ],
       "example": "import Link from 'next/link'\nimport { UsersIcon, ShieldIcon, EnvelopeIcon } from '@phosphor-icons/react'\nimport { SectionNav, SectionNavItem } from '@/components/ui/section-nav/section-nav'\n\n<SectionNav aria-label=\"Organization sections\">\n  <SectionNavItem asChild isActive icon={UsersIcon} label=\"Detail\">\n    <Link href=\"/org/detail\" />\n  </SectionNavItem>\n  <SectionNavItem asChild icon={ShieldIcon} label=\"Roles\" count={4}>\n    <Link href=\"/org/roles\" />\n  </SectionNavItem>\n  <SectionNavItem asChild icon={EnvelopeIcon} label=\"Invites\" count={2}>\n    <Link href=\"/org/invites\" />\n  </SectionNavItem>\n</SectionNav>\n"
     },
+    "segmented-control": {
+      "category": "form",
+      "description": "A single-select pill group with a sliding active indicator, an options API and a fullWidth equal-segment layout. A thin wrapper over ToggleGroup that never goes empty.",
+      "when_to_use": [
+        "Switching a list or view filter between 2-5 mutually exclusive options (Unpaid / Paid / Any)",
+        "A scope or range selector where exactly one option is always on",
+        "Compact view-mode switches (day / week / month) that change the content below in place"
+      ],
+      "when_not_to_use": [
+        "Navigation between pages or routes (use Tabs)",
+        "Multi-select toolbar toggles (use ToggleGroup type=\"multiple\")",
+        "A form answer that is submitted with the form (use Radio Group)",
+        "A long list of options (use Select or Combobox)",
+        "Binary on/off (use Switch)"
+      ],
+      "variants": {
+        "size": [
+          "xs",
+          "sm",
+          "md",
+          "lg"
+        ],
+        "fullWidth": [
+          true,
+          false
+        ]
+      },
+      "props": [
+        {
+          "name": "options",
+          "type": "{ value: string; label: ReactNode; icon?: ReactNode; disabled?: boolean }[]",
+          "description": "The segments, in order."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Controlled value."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "description": "Uncontrolled initial value. Falls back to the first enabled option."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Fires with the new value. Never fires with an empty string."
+        },
+        {
+          "name": "size",
+          "type": "'xs' | 'sm' | 'md' | 'lg'",
+          "default": "md"
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "default": false,
+          "description": "Equal-width segments spanning the container."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": false
+        }
+      ],
+      "dependencies": [
+        "class-variance-authority"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-focus",
+        "--control-edge-color",
+        "--control-edge-style",
+        "--control-edge-width",
+        "--control-state-edge-width",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-weight-medium",
+        "--interactive-primary-bg",
+        "--interactive-primary-text",
+        "--label-box-height",
+        "--primary",
+        "--radius-lg",
+        "--radius-md",
+        "--radius-xl",
+        "--segmented-control-active-weight",
+        "--segmented-control-inactive-text",
+        "--segmented-control-indicator-bg",
+        "--segmented-control-indicator-edge",
+        "--segmented-control-indicator-text",
+        "--segmented-control-radius",
+        "--segmented-control-track-bg",
+        "--surface-page",
+        "--text-primary"
+      ],
+      "example": "<SegmentedControl\n  aria-label=\"Payment status\"\n  defaultValue=\"unpaid\"\n  options={[\n    { value: \"unpaid\", label: \"Unpaid\" },\n    { value: \"paid\", label: \"Paid\" },\n    { value: \"any\", label: \"Any\" },\n  ]}\n/>\n"
+    },
     "segmented-progress": {
       "category": "data-display",
       "description": "Discrete per-step progress meter — N equal pill segments in a row, each individually expressing done, current, or pending state. Designed for multi-step flows where individual step completion matters, not just an overall percentage.",
@@ -8043,6 +8252,8 @@
         "--control-edge-color",
         "--control-edge-style",
         "--control-edge-width",
+        "--control-invalid-halo-width",
+        "--control-invalid-ring-width",
         "--control-state-edge-width",
         "--field-control-bg",
         "--field-menu-bg",
@@ -8061,6 +8272,9 @@
         "--radix-select-trigger-width",
         "--select-bg",
         "--select-border",
+        "--select-height",
+        "--select-padding",
+        "--select-radius",
         "--shadow-lg",
         "--spacing-1",
         "--spacing-2",
@@ -8105,16 +8319,25 @@
           "name": "decorative",
           "type": "boolean",
           "default": true,
-          "description": "When true, removes the separator from the accessibility tree"
+          "description": "When true, removes the separator from the accessibility tree. Ignored when a label is set."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "description": "Text centred on a horizontal rule, with the rule on both sides. A labelled separator is never decorative (role=\"separator\", named by the label). Ignored on a vertical separator."
         }
       ],
       "dependencies": [
         "@radix-ui/react-separator"
       ],
       "tokens_used": [
-        "--border-default"
+        "--border-default",
+        "--font-size-sm",
+        "--separator-color",
+        "--spacing-3",
+        "--text-secondary"
       ],
-      "example": "<div>\n  <h3>Section A</h3>\n  <Separator />\n  <h3>Section B</h3>\n</div>\n\n<div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n  <span>Item 1</span>\n  <Separator orientation=\"vertical\" />\n  <span>Item 2</span>\n</div>\n"
+      "example": "<div>\n  <h3>Section A</h3>\n  <Separator />\n  <h3>Section B</h3>\n</div>\n\n<Separator label=\"or\" />\n\n<div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n  <span>Item 1</span>\n  <Separator orientation=\"vertical\" />\n  <span>Item 2</span>\n</div>\n"
     },
     "session-timeout": {
       "category": "overlay",
@@ -10166,6 +10389,12 @@
           "type": "boolean",
           "default": "false",
           "description": "Disables the tag input."
+        },
+        {
+          "name": "entryAs",
+          "type": "'text' | 'slot'",
+          "default": "\"text\"",
+          "description": "Where the next tag is typed. text types after the last tag as bare text; slot types into a dashed slot the shape of a held tag, drawn on the shared drop edge so edges off turns it off."
         }
       ],
       "dependencies": [
@@ -10175,6 +10404,8 @@
         "--border-default",
         "--border-focus",
         "--border-strong",
+        "--control-drop-edge-style",
+        "--control-drop-edge-width",
         "--control-edge-color",
         "--control-edge-style",
         "--control-edge-width",
@@ -10192,6 +10423,18 @@
         "--surface-muted",
         "--tag-input-bg",
         "--tag-input-border",
+        "--tag-input-min-height",
+        "--tag-input-padding",
+        "--tag-input-radius",
+        "--tag-input-slot-height",
+        "--tag-input-slot-min-width",
+        "--tag-input-slot-padding-x",
+        "--tag-input-slot-radius",
+        "--tag-input-tag-font-size",
+        "--tag-input-tag-font-weight",
+        "--tag-input-tag-height",
+        "--tag-input-tag-padding-x",
+        "--tag-input-tag-radius",
         "--text-primary",
         "--text-secondary"
       ],
@@ -10354,6 +10597,8 @@
         "--control-edge-color",
         "--control-edge-style",
         "--control-edge-width",
+        "--control-invalid-halo-width",
+        "--control-invalid-ring-width",
         "--control-state-edge-width",
         "--focus-ring-width",
         "--font-size-base",
@@ -10370,7 +10615,9 @@
         "--text-primary",
         "--text-secondary",
         "--textarea-bg",
-        "--textarea-border"
+        "--textarea-border",
+        "--textarea-padding",
+        "--textarea-radius"
       ],
       "example": "<Textarea placeholder=\"Write your message...\" rows={4} />\n\n<Textarea aria-invalid=\"true\" />\n"
     },
@@ -10972,6 +11219,7 @@
       "tokens_used": [
         "--border-default",
         "--border-focus",
+        "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-base",
         "--font-size-sm",
@@ -13556,6 +13804,7 @@
       "phone-input",
       "radio-group",
       "search-input",
+      "segmented-control",
       "select",
       "slider",
       "slider-control",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loworbitstudio/visor",
-  "version": "1.31.0",
+  "version": "1.34.0",
   "description": "CLI for the Visor design system — add components, hooks, and utilities to your project.",
   "type": "module",
   "bin": {
@@ -46,7 +46,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1021.0",
     "@babel/parser": "^7.26.0",
-    "@loworbitstudio/visor-theme-engine": "^0.25.0",
+    "@loworbitstudio/visor-theme-engine": "^0.28.0",
     "commander": "^13.1.0",
     "diff": "^8.0.4",
     "picocolors": "^1.1.1",