@loworbitstudio/visor 1.24.0 → 1.25.0

package/dist/CHANGELOG.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-09-09T19:18:41.935Z",
+  "generated_at": "2026-09-18T04:27:52.352Z",
   "components": {
     "accessibility-specimen": {
       "changeType": "current",

package/dist/registry.json

@@ -41,12 +41,12 @@
         {
           "path": "components/ui/heading/heading.tsx",
           "type": "registry:ui",
-          "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"../../../lib/utils\"\nimport styles from \"./heading.module.css\"\n\nconst headingVariants = cva(styles.base, {\n  variants: {\n    size: {\n      xs: styles.sizeXs,\n      sm: styles.sizeSm,\n      md: styles.sizeMd,\n      lg: styles.sizeLg,\n      xl: styles.sizeXl,\n      \"2xl\": styles.size2xl,\n    },\n    weight: {\n      normal: styles.weightNormal,\n      medium: styles.weightMedium,\n      semibold: styles.weightSemibold,\n      bold: styles.weightBold,\n    },\n  },\n  defaultVariants: {\n    weight: \"semibold\",\n  },\n})\n\nconst levelSizeMap: Record<number, \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"> = {\n  1: \"2xl\",\n  2: \"xl\",\n  3: \"lg\",\n  4: \"md\",\n  5: \"sm\",\n  6: \"xs\",\n}\n\nexport interface HeadingProps\n  extends React.HTMLAttributes<HTMLHeadingElement>,\n    VariantProps<typeof headingVariants> {\n  level?: 1 | 2 | 3 | 4 | 5 | 6\n}\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n  ({ className, level = 2, size, weight, ...props }, ref) => {\n    const Tag = `h${level}` as const\n    const resolvedSize = size ?? levelSizeMap[level]\n\n    return (\n      <Tag\n        ref={ref}\n        data-slot=\"heading\"\n        data-level={level}\n        className={cn(headingVariants({ size: resolvedSize, weight }), className)}\n        {...props}\n      />\n    )\n  }\n)\nHeading.displayName = \"Heading\"\n\nexport { Heading, headingVariants }\n"
+          "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"../../../lib/utils\"\nimport styles from \"./heading.module.css\"\n\nconst headingVariants = cva(styles.base, {\n  variants: {\n    size: {\n      xs: styles.sizeXs,\n      sm: styles.sizeSm,\n      md: styles.sizeMd,\n      lg: styles.sizeLg,\n      xl: styles.sizeXl,\n      \"2xl\": styles.size2xl,\n    },\n    weight: {\n      // `heading` follows the theme's declared heading weight; the other four\n      // are steps on the named ramp. Before VI-639 these were the same thing —\n      // `--font-weight-semibold` was emitted as the theme's heading weight, so\n      // the default below silently meant \"heading\" on every theme.\n      heading: styles.weightHeading,\n      normal: styles.weightNormal,\n      medium: styles.weightMedium,\n      semibold: styles.weightSemibold,\n      bold: styles.weightBold,\n    },\n  },\n  defaultVariants: {\n    weight: \"heading\",\n  },\n})\n\nconst levelSizeMap: Record<number, \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"> = {\n  1: \"2xl\",\n  2: \"xl\",\n  3: \"lg\",\n  4: \"md\",\n  5: \"sm\",\n  6: \"xs\",\n}\n\nexport interface HeadingProps\n  extends React.HTMLAttributes<HTMLHeadingElement>,\n    VariantProps<typeof headingVariants> {\n  level?: 1 | 2 | 3 | 4 | 5 | 6\n}\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n  ({ className, level = 2, size, weight, ...props }, ref) => {\n    const Tag = `h${level}` as const\n    const resolvedSize = size ?? levelSizeMap[level]\n\n    return (\n      <Tag\n        ref={ref}\n        data-slot=\"heading\"\n        data-level={level}\n        className={cn(headingVariants({ size: resolvedSize, weight }), className)}\n        {...props}\n      />\n    )\n  }\n)\nHeading.displayName = \"Heading\"\n\nexport { Heading, headingVariants }\n"
         },
         {
           "path": "components/ui/heading/heading.module.css",
           "type": "registry:ui",
-          "content": "/* Heading base styles */\n.base {\n  font-family: var(--font-heading, ui-sans-serif, system-ui, sans-serif);\n  color: var(--text-primary, #111827);\n  line-height: var(--line-height-tight, 1.25);\n  margin: 0;\n}\n\n/* Sizes */\n.sizeXs {\n  font-size: var(--font-size-sm, 0.875rem);\n}\n\n.sizeSm {\n  font-size: var(--font-size-base, 1rem);\n}\n\n.sizeMd {\n  font-size: var(--font-size-lg, 1.125rem);\n}\n\n.sizeLg {\n  font-size: var(--font-size-xl, 1.25rem);\n}\n\n.sizeXl {\n  font-size: var(--font-size-2xl, 1.5rem);\n}\n\n.size2xl {\n  font-size: var(--font-size-4xl, 2.25rem);\n}\n\n/* Weights */\n.weightNormal {\n  font-weight: var(--font-weight-normal, 400);\n}\n\n.weightMedium {\n  font-weight: var(--font-weight-medium, 500);\n}\n\n.weightSemibold {\n  font-weight: var(--font-weight-semibold, 600);\n}\n\n.weightBold {\n  font-weight: var(--font-weight-bold, 700);\n}\n"
+          "content": "/* Heading base styles */\n.base {\n  font-family: var(--font-heading, ui-sans-serif, system-ui, sans-serif);\n  color: var(--text-primary, #111827);\n  line-height: var(--line-height-tight, 1.25);\n  margin: 0;\n}\n\n/* Sizes */\n.sizeXs {\n  font-size: var(--font-size-sm, 0.875rem);\n}\n\n.sizeSm {\n  font-size: var(--font-size-base, 1rem);\n}\n\n.sizeMd {\n  font-size: var(--font-size-lg, 1.125rem);\n}\n\n.sizeLg {\n  font-size: var(--font-size-xl, 1.25rem);\n}\n\n.sizeXl {\n  font-size: var(--font-size-2xl, 1.5rem);\n}\n\n.size2xl {\n  font-size: var(--font-size-4xl, 2.25rem);\n}\n\n/* Weights */\n\n/*\n * VI-639: the theme's own heading weight. `--font-weight-heading` carries what\n * this theme says headings weigh; `--font-weight-semibold` is a step on the\n * named ramp and no longer doubles as that channel. Falls back through semibold\n * so a consumer on an older tokens package keeps the previous resolution.\n */\n.weightHeading {\n  font-weight: var(--font-weight-heading, var(--font-weight-semibold, 600));\n}\n\n.weightNormal {\n  font-weight: var(--font-weight-normal, 400);\n}\n\n.weightMedium {\n  font-weight: var(--font-weight-medium, 500);\n}\n\n.weightSemibold {\n  font-weight: var(--font-weight-semibold, 600);\n}\n\n.weightBold {\n  font-weight: var(--font-weight-bold, 700);\n}\n"
         }
       ]
     },
@@ -1944,7 +1944,7 @@
         {
           "path": "components/ui/phone-input/phone-input.tsx",
           "type": "registry:ui",
-          "content": "\"use client\"\n\nimport * as React from \"react\"\nimport IntlTelInput from \"@intl-tel-input/react\"\nimport type { IntlTelInputRef } from \"@intl-tel-input/react\"\nimport type { CountrySelectorMode, Iso2, ValidationError } from \"intl-tel-input\"\nimport \"intl-tel-input/styles\"\nimport { cn } from \"../../../lib/utils\"\n\n// Password managers mangle tel fields. Typed through `input` props because the\n// library's `inputProps` surface does not model arbitrary data attributes.\nconst PASSWORD_MANAGER_OPT_OUT = {\n  \"data-1p-ignore\": true,\n  \"data-lpignore\": \"true\",\n  \"data-bwignore\": true,\n  \"data-form-type\": \"other\",\n} as React.ComponentPropsWithoutRef<\"input\">\n\nexport interface PhoneInputPortal {\n  /** Element the country selector is portaled into. */\n  container: HTMLElement\n  /**\n   * Theme-scoping class applied to the portaled country selector. Required —\n   * a selector portaled out of the tree escapes the consumer's theme class,\n   * so the scope has to travel with it.\n   */\n  scopeClassName: string\n}\n\nexport interface PhoneInputProps {\n  /** HTML id attribute */\n  id?: string\n  /** HTML name attribute */\n  name?: string\n  /** Phone number in E.164 (e.g. \"+14155551234\"). Displayed formatted for the detected country. */\n  value?: string | null\n  /** Placeholder text */\n  placeholder?: string\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Whether the field is read-only. Pair with `countrySelectorMode=\"OFF\"` to also close off the country dropdown. */\n  readOnly?: boolean\n  /** Country selector behaviour. `\"OFF\"` renders the selected country as a non-interactive element. */\n  countrySelectorMode?: CountrySelectorMode\n  /** ISO 3166-1 alpha-2 country selected on mount. */\n  initialCountry?: Iso2\n  /** Size variant — matches Input component sizes */\n  size?: \"sm\" | \"md\" | \"lg\"\n  /** Additional CSS classes applied to the wrapper */\n  className?: string\n  /**\n   * Portal the country selector out of the input's DOM position. All-or-nothing:\n   * the scoping class is not separable from the container, so the selector can\n   * never escape its theme. Omit for the default inline selector.\n   */\n  portal?: PhoneInputPortal\n  /**\n   * Called with the E.164 number and its validity. `e164` is `null` for anything\n   * that is not a complete, valid number — a partial is never emitted.\n   */\n  onChange?: (e164: string | null, isValid: boolean) => void\n  /** Called on blur with the validation error for a non-empty, invalid number (otherwise `null`). */\n  onBlur?: (error: ValidationError | null) => void\n}\n\nconst PhoneInput = React.forwardRef<IntlTelInputRef, PhoneInputProps>(\n  (\n    {\n      id,\n      name,\n      value,\n      placeholder,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      countrySelectorMode,\n      initialCountry = \"us\",\n      size = \"md\",\n      className,\n      portal,\n      onChange,\n      onBlur,\n    },\n    ref\n  ) => {\n    const itiRef = React.useRef<IntlTelInputRef>(null)\n    // `undefined` until the first emission — an initial `{ null, false }` would be\n    // indistinguishable from the first partial the user types and would swallow it.\n    const lastEmitted = React.useRef<\n      { e164: string | null; isValid: boolean } | undefined\n    >(undefined)\n\n    React.useImperativeHandle(ref, () => ({\n      getInstance: () => itiRef.current?.getInstance() ?? null,\n      getInput: () => itiRef.current?.getInput() ?? null,\n    }))\n\n    // `emit` must be identity-stable. The wrapper derives its internal `update`\n    // from the onChange* props and keys its value-writeback effect on\n    // `[value, update]`; a new `emit` each render re-runs that effect, and while\n    // the field is unfocused and holding a partial (so the controlled value is\n    // null) it calls setNumber(\"\") and erases what the user typed. Reading the\n    // consumer's callback from a ref keeps the effect keyed on `value` alone.\n    const onChangeRef = React.useRef(onChange)\n    onChangeRef.current = onChange\n\n    // The library's own `onChangeNumber` emits `getNumber()` verbatim, which for a\n    // partial is a `+<dial code>` prefix glued to the formatted national string\n    // (typing \"21337\" yields \"+1213-37\"). Derive the value at emit time instead so\n    // a malformed number can never reach the consumer.\n    const emit = React.useCallback(() => {\n      const iti = itiRef.current?.getInstance()\n      const isValid = iti?.isValidNumber() ?? false\n      const e164 = isValid ? iti!.getNumber() : null\n      const last = lastEmitted.current\n      if (last && last.e164 === e164 && last.isValid === isValid) return\n      lastEmitted.current = { e164, isValid }\n      onChangeRef.current?.(e164, isValid)\n    }, [])\n\n    const handleBlur = React.useCallback(() => {\n      const iti = itiRef.current?.getInstance()\n      const input = itiRef.current?.getInput()\n      // The error callback never fires while a number is still partial, so read the\n      // error directly — a visibly-present partial that saves as nothing is silent\n      // data loss. Gate on validity: getValidationError() reports \"IS_POSSIBLE\" for\n      // a number that is fine, which is not an error.\n      const error =\n        iti && input?.value && !iti.isValidNumber()\n          ? (iti.getValidationError() ?? null)\n          : null\n      onBlur?.(error)\n    }, [onBlur])\n\n    return (\n      <div data-slot=\"phone-input\" data-size={size} className={cn(className)}>\n        <IntlTelInput\n          ref={itiRef}\n          value={value}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChangeNumber={emit}\n          onChangeCountry={emit}\n          onChangeValidity={emit}\n          initialCountry={initialCountry}\n          initialCountryLookup={null}\n          countrySelectorMode={countrySelectorMode}\n          separateDialCode\n          formatAsYouType\n          strictMode\n          countrySearch\n          loadUtils={() => import(\"intl-tel-input/utils\")}\n          dropdownParent={portal?.container ?? null}\n          classNames={\n            portal\n              ? { countrySelectorContainer: portal.scopeClassName }\n              : undefined\n          }\n          inputProps={{\n            id,\n            name,\n            placeholder,\n            required,\n            autoComplete: \"tel\",\n            onBlur: handleBlur,\n            ...PASSWORD_MANAGER_OPT_OUT,\n          }}\n        />\n      </div>\n    )\n  }\n)\nPhoneInput.displayName = \"PhoneInput\"\n\nexport { PhoneInput }\n"
+          "content": "\"use client\"\n\nimport * as React from \"react\"\nimport IntlTelInput from \"@intl-tel-input/react\"\nimport type { IntlTelInputRef } from \"@intl-tel-input/react\"\nimport type { CountrySelectorMode, Iso2, ValidationError } from \"intl-tel-input\"\nimport \"intl-tel-input/styles\"\nimport { cn } from \"../../../lib/utils\"\n\n// Password managers mangle tel fields. Typed through `input` props because the\n// library's `inputProps` surface does not model arbitrary data attributes.\nconst PASSWORD_MANAGER_OPT_OUT = {\n  \"data-1p-ignore\": true,\n  \"data-lpignore\": \"true\",\n  \"data-bwignore\": true,\n  \"data-form-type\": \"other\",\n} as React.ComponentPropsWithoutRef<\"input\">\n\nexport interface PhoneInputPortal {\n  /** Element the country selector is portaled into. */\n  container: HTMLElement\n  /**\n   * Theme-scoping class applied to the portaled country selector. Required —\n   * a selector portaled out of the tree escapes the consumer's theme class,\n   * so the scope has to travel with it.\n   */\n  scopeClassName: string\n}\n\nexport interface PhoneInputProps {\n  /** HTML id attribute */\n  id?: string\n  /** HTML name attribute */\n  name?: string\n  /** Phone number in E.164 (e.g. \"+14155551234\"). Displayed formatted for the detected country. */\n  value?: string | null\n  /** Placeholder text */\n  placeholder?: string\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Whether the field is read-only. Pair with `countrySelectorMode=\"OFF\"` to also close off the country dropdown. */\n  readOnly?: boolean\n  /** Country selector behaviour. `\"OFF\"` renders the selected country as a non-interactive element. */\n  countrySelectorMode?: CountrySelectorMode\n  /** ISO 3166-1 alpha-2 country selected on mount. */\n  initialCountry?: Iso2\n  /** Size variant — matches Input component sizes */\n  size?: \"sm\" | \"md\" | \"lg\"\n  /** Additional CSS classes applied to the wrapper */\n  className?: string\n  /**\n   * Portal the country selector out of the input's DOM position. All-or-nothing:\n   * the scoping class is not separable from the container, so the selector can\n   * never escape its theme. Omit for the default inline selector.\n   */\n  portal?: PhoneInputPortal\n  /**\n   * Called with the E.164 number and its validity. `e164` is `null` for anything\n   * that is not a complete, valid number — a partial is never emitted.\n   */\n  onChange?: (e164: string | null, isValid: boolean) => void\n  /** Called on blur with the validation error for a non-empty, invalid number (otherwise `null`). */\n  onBlur?: (error: ValidationError | null) => void\n}\n\nconst PhoneInput = React.forwardRef<IntlTelInputRef, PhoneInputProps>(\n  (\n    {\n      id,\n      name,\n      value,\n      placeholder,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      countrySelectorMode,\n      initialCountry = \"us\",\n      size = \"md\",\n      className,\n      portal,\n      onChange,\n      onBlur,\n    },\n    ref\n  ) => {\n    const itiRef = React.useRef<IntlTelInputRef>(null)\n    // `undefined` until the first emission — an initial `{ null, false }` would be\n    // indistinguishable from the first partial the user types and would swallow it.\n    const lastEmitted = React.useRef<\n      { e164: string | null; isValid: boolean } | undefined\n    >(undefined)\n\n    React.useImperativeHandle(ref, () => ({\n      getInstance: () => itiRef.current?.getInstance() ?? null,\n      getInput: () => itiRef.current?.getInput() ?? null,\n    }))\n\n    // `emit` must be identity-stable. The wrapper derives its internal `update`\n    // from the onChange* props and keys its value-writeback effect on\n    // `[value, update]`; a new `emit` each render re-runs that effect, and while\n    // the field is unfocused and holding a partial (so the controlled value is\n    // null) it calls setNumber(\"\") and erases what the user typed. Reading the\n    // consumer's callback from a ref keeps the effect keyed on `value` alone.\n    const onChangeRef = React.useRef(onChange)\n    onChangeRef.current = onChange\n\n    // The library's own `onChangeNumber` emits `getNumber()` verbatim, which for a\n    // partial is a `+<dial code>` prefix glued to the formatted national string\n    // (typing \"21337\" yields \"+1213-37\"). Derive the value at emit time instead so\n    // a malformed number can never reach the consumer.\n    const emit = React.useCallback(() => {\n      const iti = itiRef.current?.getInstance()\n      const isValid = iti?.isValidNumber() ?? false\n      const e164 = isValid ? iti!.getNumber() : null\n      const last = lastEmitted.current\n      if (last && last.e164 === e164 && last.isValid === isValid) return\n      lastEmitted.current = { e164, isValid }\n      onChangeRef.current?.(e164, isValid)\n    }, [])\n\n    const handleBlur = React.useCallback(() => {\n      const iti = itiRef.current?.getInstance()\n      const input = itiRef.current?.getInput()\n      // The error callback never fires while a number is still partial, so read the\n      // error directly — a visibly-present partial that saves as nothing is silent\n      // data loss. Gate on validity: getValidationError() reports \"IS_POSSIBLE\" for\n      // a number that is fine, which is not an error.\n      const error =\n        iti && input?.value && !iti.isValidNumber()\n          ? (iti.getValidationError() ?? null)\n          : null\n      onBlur?.(error)\n    }, [onBlur])\n\n    // The library validates every option key it is handed, and a key explicitly\n    // set to `undefined` is still an own key — so spreading an unset optional\n    // prop makes it warn (\"must be ...; got undefined. Ignoring.\") on every\n    // mount. Carry each key only when the consumer actually set one; there is no\n    // correct default to invent for either.\n    const optional = {\n      ...(countrySelectorMode !== undefined && { countrySelectorMode }),\n      ...(portal && {\n        classNames: { countrySelectorContainer: portal.scopeClassName },\n      }),\n    }\n\n    return (\n      <div data-slot=\"phone-input\" data-size={size} className={cn(className)}>\n        <IntlTelInput\n          ref={itiRef}\n          {...optional}\n          value={value}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChangeNumber={emit}\n          onChangeCountry={emit}\n          onChangeValidity={emit}\n          initialCountry={initialCountry}\n          initialCountryLookup={null}\n          separateDialCode\n          formatAsYouType\n          strictMode\n          countrySearch\n          loadUtils={() => import(\"intl-tel-input/utils\")}\n          dropdownParent={portal?.container ?? null}\n          inputProps={{\n            id,\n            name,\n            placeholder,\n            required,\n            autoComplete: \"tel\",\n            onBlur: handleBlur,\n            ...PASSWORD_MANAGER_OPT_OUT,\n          }}\n        />\n      </div>\n    )\n  }\n)\nPhoneInput.displayName = \"PhoneInput\"\n\nexport { PhoneInput }\n"
         },
         {
           "path": "components/ui/phone-input/phone-input.css",

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-09-09T19:18:41.930Z",
+  "generated_at": "2026-09-18T04:27:52.346Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -4937,6 +4937,7 @@
           "2xl"
         ],
         "weight": [
+          "heading",
           "normal",
           "medium",
           "semibold",
@@ -4957,8 +4958,9 @@
         },
         {
           "name": "weight",
-          "type": "'normal' | 'medium' | 'semibold' | 'bold'",
-          "default": "'semibold'"
+          "type": "'heading' | 'normal' | 'medium' | 'semibold' | 'bold'",
+          "default": "'heading'",
+          "description": "Visual weight. 'heading' follows the theme's declared heading weight (--weight-heading); the rest are steps on the named ramp."
         }
       ],
       "dependencies": [
@@ -4973,6 +4975,7 @@
         "--font-size-sm",
         "--font-size-xl",
         "--font-weight-bold",
+        "--font-weight-heading",
         "--font-weight-medium",
         "--font-weight-normal",
         "--font-weight-semibold",
@@ -13650,6 +13653,27 @@
         "defaultLight": "700",
         "defaultDark": "700"
       },
+      {
+        "name": "--font-weight-heading",
+        "tier": "primitive",
+        "description": "Primitive font weight: 600",
+        "defaultLight": "600",
+        "defaultDark": "600"
+      },
+      {
+        "name": "--font-weight-body",
+        "tier": "primitive",
+        "description": "Primitive font weight: 400",
+        "defaultLight": "400",
+        "defaultDark": "400"
+      },
+      {
+        "name": "--font-weight-display",
+        "tier": "primitive",
+        "description": "Primitive font weight: 400",
+        "defaultLight": "400",
+        "defaultDark": "400"
+      },
       {
         "name": "--line-height-none",
         "tier": "primitive",
@@ -14552,8 +14576,8 @@
         "name": "--weight-body",
         "tier": "semantic",
         "description": "Semantic typography: weight-body",
-        "defaultLight": "var(--font-weight-normal)",
-        "defaultDark": "var(--font-weight-normal)"
+        "defaultLight": "var(--font-weight-body)",
+        "defaultDark": "var(--font-weight-body)"
       },
       {
         "name": "--weight-label",
@@ -14566,8 +14590,8 @@
         "name": "--weight-heading",
         "tier": "semantic",
         "description": "Semantic typography: weight-heading",
-        "defaultLight": "var(--font-weight-semibold)",
-        "defaultDark": "var(--font-weight-semibold)"
+        "defaultLight": "var(--font-weight-heading)",
+        "defaultDark": "var(--font-weight-heading)"
       },
       {
         "name": "--weight-strong",
@@ -15245,7 +15269,7 @@
       }
     ],
     "summary": {
-      "total": 314
+      "total": 317
     }
   }
 }

package/package.json

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