@loworbitstudio/visor 0.1.0 → 0.4.0

package/dist/registry.json

@@ -2056,7 +2056,7 @@
       "name": "page-header",
       "type": "registry:ui",
       "description": "An admin page header compound with eyebrow, title, description, breadcrumb slot, and actions slot. Uses container queries for responsive collapse.",
-      "category": "admin",
+      "category": "navigation",
       "dependencies": [
         "class-variance-authority",
         "@loworbitstudio/visor-core"
@@ -2132,6 +2132,7 @@
       "name": "use-media-query",
       "type": "registry:hook",
       "description": "SSR-safe hook that returns whether a CSS media query matches.",
+      "category": "hooks",
       "files": [
         {
           "path": "hooks/use-media-query.ts",
@@ -3081,16 +3082,6 @@
           "type": "registry:block",
           "content": "import { Slide } from \"../../../components/deck/slide/slide\"\nimport { Text } from \"../../../components/ui/text/text\"\nimport styles from \"./slides.module.css\"\n\nexport function TitleSlide() {\n  return (\n    <Slide id=\"s-title\" center>\n      <div className={styles.titleSlideContent}>\n        <Text size=\"sm\" color=\"secondary\" weight=\"medium\" as=\"div\" className={styles.titleSlideLabel}>\n          Design System\n        </Text>\n        <h1 className={styles.titleSlideHeading}>Visor</h1>\n        <Text size=\"lg\" color=\"secondary\" as=\"p\" className={styles.titleSlideDescription}>\n          A theme-agnostic component system built on CSS custom properties.\n          Tokens adapt. Components follow.\n        </Text>\n      </div>\n    </Slide>\n  )\n}\n"
         },
-        {
-          "path": "blocks/design-system-deck/slides/gray-scale-slide.tsx",
-          "type": "registry:block",
-          "content": ""
-        },
-        {
-          "path": "blocks/design-system-deck/slides/accent-palette-slide.tsx",
-          "type": "registry:block",
-          "content": ""
-        },
         {
           "path": "blocks/design-system-deck/slides/semantic-tokens-slide.tsx",
           "type": "registry:block",
@@ -3160,6 +3151,21 @@
           "path": "blocks/design-system-deck/slides/closing-slide.tsx",
           "type": "registry:block",
           "content": "import { Slide } from \"../../../components/deck/slide/slide\"\nimport { Text } from \"../../../components/ui/text/text\"\nimport styles from \"./slides.module.css\"\n\nexport function ClosingSlide() {\n  return (\n    <Slide id=\"s-closing\" center>\n      <div className={styles.titleSlideContent}>\n        <Text size=\"sm\" color=\"secondary\" weight=\"medium\" as=\"div\" className={styles.titleSlideLabel}>\n          Visor Design System\n        </Text>\n        <h2 className={styles.closingHeading}>Start Building</h2>\n        <Text size=\"lg\" color=\"secondary\" as=\"p\" className={styles.titleSlideDescription}>\n          Install components with the registry CLI. Tokens ship via npm.\n          Themes are just CSS.\n        </Text>\n        <div className={styles.closingLinks}>\n          <code className={styles.closingCode}>npx visor add button</code>\n          <code className={styles.closingCode}>npm i @loworbitstudio/visor-core</code>\n        </div>\n      </div>\n    </Slide>\n  )\n}\n"
+        },
+        {
+          "path": "blocks/design-system-deck/slides/spacing-slide.tsx",
+          "type": "registry:block",
+          "content": "import { Slide } from \"../../../components/deck/slide/slide\"\nimport { SlideHeader } from \"../../../components/deck/slide-header/slide-header\"\nimport { SpacingScale } from \"../../../components/ui/spacing-scale/spacing-scale\"\nimport { SPACING_STEPS } from \"../../design-system-specimen/specimen-data\"\n\nexport function SpacingSlide() {\n  return (\n    <Slide id=\"s-spacing\">\n      <SlideHeader\n        subtitle=\"Foundation\"\n        title=\"Spacing\"\n        description=\"4px-based spacing scale for consistent rhythm across all components.\"\n      />\n\n      <SpacingScale steps={SPACING_STEPS} />\n    </Slide>\n  )\n}\n"
+        },
+        {
+          "path": "blocks/design-system-deck/slides/status-colors-slide.tsx",
+          "type": "registry:block",
+          "content": "import { Slide } from \"../../../components/deck/slide/slide\"\nimport { SlideHeader } from \"../../../components/deck/slide-header/slide-header\"\nimport { ColorSwatchGrid } from \"../../../components/ui/color-swatch/color-swatch\"\nimport { STATUS_COLOR_SCALES } from \"../../design-system-specimen/specimen-data\"\nimport styles from \"./slides.module.css\"\n\nexport function StatusColorsSlide() {\n  return (\n    <Slide id=\"s-status-colors\">\n      <SlideHeader\n        subtitle=\"Foundation\"\n        title=\"Status Colors\"\n        description=\"Success, warning, error, and info — semantic color scales for system feedback.\"\n      />\n\n      <div className={styles.statusGrid}>\n        {STATUS_COLOR_SCALES.map((scale) => (\n          <ColorSwatchGrid\n            key={scale.name}\n            label={scale.role}\n            size=\"sm\"\n            swatches={scale.swatches.map((s) => ({\n              token: s.token,\n              hex: s.hex,\n              name: s.name,\n              lightText: s.lightText,\n            }))}\n          />\n        ))}\n      </div>\n    </Slide>\n  )\n}\n"
+        },
+        {
+          "path": "blocks/design-system-deck/slides/theme-colors-slide.tsx",
+          "type": "registry:block",
+          "content": "\"use client\"\n\nimport { Slide } from \"../../../components/deck/slide/slide\"\nimport { SlideHeader } from \"../../../components/deck/slide-header/slide-header\"\nimport { ColorSwatchGrid } from \"../../../components/ui/color-swatch/color-swatch\"\nimport { ColorBar } from \"../../../components/ui/color-bar/color-bar\"\nimport { THEME_COLOR_SCALES } from \"../../design-system-specimen/specimen-data\"\nimport styles from \"./slides.module.css\"\n\nexport function ThemeColorsSlide() {\n  return (\n    <Slide id=\"s-theme-colors\">\n      <SlideHeader\n        subtitle=\"Foundation\"\n        title=\"Theme Colors\"\n        description=\"Primary and neutral scales — fully theme-aware and responsive to the active theme.\"\n      />\n\n      <div className={styles.content}>\n        {THEME_COLOR_SCALES.map((scale) => (\n          <div key={scale.name} className={styles.themeScaleGroup}>\n            {scale.brandToken && (\n              <ColorBar token={scale.brandToken} label=\"Brand Color\" />\n            )}\n            <ColorSwatchGrid\n              label={scale.name}\n              size=\"lg\"\n              swatches={scale.swatches.map((s) => ({\n                token: s.token,\n                hex: s.hex,\n                name: s.name,\n                lightText: s.lightText,\n                dynamic: s.dynamic,\n              }))}\n            />\n          </div>\n        ))}\n      </div>\n    </Slide>\n  )\n}\n"
         }
       ]
     },