diff --git a/bestax-mcp/data/catalog.json b/bestax-mcp/data/catalog.json
index e63cf4e28..565d17104 100644
--- a/bestax-mcp/data/catalog.json
+++ b/bestax-mcp/data/catalog.json
@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.26.6"
+    "version": "5.27.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
diff --git a/bestax-mcp/data/components/Autocomplete.json b/bestax-mcp/data/components/Autocomplete.json
index 55b57b8f1..5d7044800 100644
--- a/bestax-mcp/data/components/Autocomplete.json
+++ b/bestax-mcp/data/components/Autocomplete.json
@@ -7,15 +7,15 @@
   "examples": [
     {
       "title": "Basic Autocomplete",
-      "code": "function example() {\n  const [selected, setSelected] = useState(null);\n  const fruits = [\n    'Apple',\n    'Banana',\n    'Cherry',\n    'Date',\n    'Elderberry',\n    'Fig',\n    'Grape',\n  ];\n\n  return (\n    <Block>\n      <Autocomplete\n        data={fruits}\n        placeholder=\"Search fruit...\"\n        onSelect={setSelected}\n      />\n      {selected && <Paragraph mt=\"2\">Selected: {selected}</Paragraph>}\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [selected, setSelected] = useState<string | null>(null);\n  const fruits = [\n    'Apple',\n    'Banana',\n    'Cherry',\n    'Date',\n    'Elderberry',\n    'Fig',\n    'Grape',\n  ];\n\n  return (\n    <Block>\n      <Autocomplete\n        data={fruits}\n        placeholder=\"Search fruit...\"\n        onSelect={item => setSelected(typeof item === 'string' ? item : null)}\n      />\n      {selected && <Paragraph mt=\"2\">Selected: {selected}</Paragraph>}\n    </Block>\n  );\n}"
     },
     {
       "title": "Open on Focus",
-      "code": "function example() {\n  const [selected, setSelected] = useState(null);\n  const countries = [\n    'United States',\n    'United Kingdom',\n    'Canada',\n    'Australia',\n    'Germany',\n    'France',\n  ];\n\n  return (\n    <Autocomplete\n      data={countries}\n      placeholder=\"Select a country...\"\n      openOnFocus\n      onSelect={setSelected}\n    />\n  );\n}"
+      "code": "function example() {\n  const countries = [\n    'United States',\n    'United Kingdom',\n    'Canada',\n    'Australia',\n    'Germany',\n    'France',\n  ];\n\n  return (\n    <Autocomplete\n      data={countries}\n      placeholder=\"Select a country...\"\n      openOnFocus\n    />\n  );\n}"
     },
     {
       "title": "With Clear Button",
-      "code": "function example() {\n  const [selected, setSelected] = useState(null);\n  const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];\n\n  return (\n    <Autocomplete\n      data={options}\n      placeholder=\"Search options...\"\n      clearable\n      onSelect={setSelected}\n    />\n  );\n}"
+      "code": "function example() {\n  const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];\n\n  return (\n    <Autocomplete data={options} placeholder=\"Search options...\" clearable />\n  );\n}"
     },
     {
       "title": "Color and Size Variants",
@@ -23,11 +23,11 @@
     },
     {
       "title": "With Object Data",
-      "code": "function example() {\n  const [selected, setSelected] = useState(null);\n  const users = [\n    { value: '1', label: 'John Doe', email: 'john@example.com' },\n    { value: '2', label: 'Jane Smith', email: 'jane@example.com' },\n    { value: '3', label: 'Bob Johnson', email: 'bob@example.com' },\n  ];\n\n  return (\n    <Block>\n      <Autocomplete\n        data={users}\n        field=\"label\"\n        placeholder=\"Search users...\"\n        openOnFocus\n        onSelect={setSelected}\n      />\n      {selected && (\n        <Paragraph mt=\"2\">\n          Selected: {selected.label} ({selected.email})\n        </Paragraph>\n      )}\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const users = [\n    { value: '1', label: 'John Doe', email: 'john@example.com' },\n    { value: '2', label: 'Jane Smith', email: 'jane@example.com' },\n    { value: '3', label: 'Bob Johnson', email: 'bob@example.com' },\n  ];\n  const [selected, setSelected] = useState<(typeof users)[number] | null>(null);\n\n  return (\n    <Block>\n      <Autocomplete\n        data={users}\n        field=\"label\"\n        placeholder=\"Search users...\"\n        openOnFocus\n        onSelect={item =>\n          setSelected(\n            users.find(\n              u => u.value === (typeof item === 'string' ? item : item?.value)\n            ) ?? null\n          )\n        }\n      />\n      {selected && (\n        <Paragraph mt=\"2\">\n          Selected: {selected.label} ({selected.email})\n        </Paragraph>\n      )}\n    </Block>\n  );\n}"
     },
     {
       "title": "Custom Item Template",
-      "code": "function example() {\n  const [selected, setSelected] = useState(null);\n  const users = [\n    { value: '1', label: 'John Doe', role: 'Admin' },\n    { value: '2', label: 'Jane Smith', role: 'Editor' },\n    { value: '3', label: 'Bob Johnson', role: 'Viewer' },\n  ];\n\n  return (\n    <Autocomplete\n      data={users}\n      field=\"label\"\n      placeholder=\"Search users...\"\n      openOnFocus\n      onSelect={setSelected}\n      itemTemplate={item => (\n        <Block display=\"flex\" justifyContent=\"space-between\">\n          <Span>{item.label}</Span>\n          <Tag color=\"info\" light>\n            {item.role}\n          </Tag>\n        </Block>\n      )}\n    />\n  );\n}"
+      "code": "function example() {\n  const users = [\n    { value: '1', label: 'John Doe', role: 'Admin' },\n    { value: '2', label: 'Jane Smith', role: 'Editor' },\n    { value: '3', label: 'Bob Johnson', role: 'Viewer' },\n  ];\n\n  return (\n    <Autocomplete\n      data={users}\n      field=\"label\"\n      placeholder=\"Search users...\"\n      openOnFocus\n      itemTemplate={item => {\n        const user = users.find(\n          u => u.value === (typeof item === 'string' ? item : item.value)\n        );\n        return (\n          <Block display=\"flex\" justifyContent=\"space-between\">\n            <Span>{user?.label}</Span>\n            <Tag color=\"info\" isLight>\n              {user?.role}\n            </Tag>\n          </Block>\n        );\n      }}\n    />\n  );\n}"
     },
     {
       "title": "With Empty State",
diff --git a/bestax-mcp/data/components/Avatar.json b/bestax-mcp/data/components/Avatar.json
index 6ee7bd8de..8e098eaaa 100644
--- a/bestax-mcp/data/components/Avatar.json
+++ b/bestax-mcp/data/components/Avatar.json
@@ -35,7 +35,7 @@
     },
     {
       "title": "Forwarded ref",
-      "code": "function example() {\n  const avatarRef = React.useRef(null);\n  const [tag, setTag] = React.useState(null);\n\n  return (\n    <>\n      <Avatar ref={avatarRef} name=\"Ada Lovelace\" size=\"64x64\" />\n      <Button mt=\"3\" onClick={() => setTag(avatarRef.current?.tagName)}>\n        Read the tag from its ref\n      </Button>\n      <p>Rendered element: {tag ?? '—'}</p>\n    </>\n  );\n}"
+      "code": "function example() {\n  const avatarRef = React.useRef<HTMLElement>(null);\n  const [tag, setTag] = React.useState<string>();\n\n  return (\n    <>\n      <Avatar ref={avatarRef} name=\"Ada Lovelace\" size=\"64x64\" />\n      <Button mt=\"3\" onClick={() => setTag(avatarRef.current?.tagName)}>\n        Read the tag from its ref\n      </Button>\n      <p>Rendered element: {tag ?? '—'}</p>\n    </>\n  );\n}"
     }
   ],
   "accessibility": "- Image avatars use `alt` (falling back to `name`) for their accessible name.\n- Initials/icon avatars expose `role=\"img\"` and `aria-label` (from `alt`/`name`) — unless\n  rendered as a link or button, where the native link/button role and `aria-label` are used\n  instead. A custom component passed to `as` counts as interactive, since a router link takes\n  `to` rather than this component's `href`. If yours renders something that really is just a\n  picture, say so with `role=\"img\"` and it's treated as one — `alt=\"\"` included. A truthy\n  `aria-hidden` says it too, and so do `role=\"presentation\"` and `role=\"none\"`, though ARIA's\n  own conflict resolution drops those two whenever the avatar still carries a name — prefer\n  `role=\"img\"`. A role claiming the opposite, such as `\"button\"`, doesn't, and neither does an\n  `href`.\n- **Decorative avatars:** pass an explicit `alt=\"\"` when the avatar repeats information\n  already visible next to it (e.g. beside the author's name in a comment row). The image\n  stays decorative and an initials/icon avatar is skipped entirely (`aria-hidden`), avoiding\n  double-speak. The opt-out never applies to a link/button avatar — an interactive element\n  always keeps an accessible name (from `name`, or a generic `\"Avatar\"` fallback) — and a\n  custom component passed to `as` counts as one until it says otherwise, so `alt=\"\"` on a\n  custom wrapper needs that signal next to it.\n- A link/button avatar with no `alt`/`name` (e.g. an API that returns only a photo URL) still\n  gets an `aria-label` fallback rather than rendering a nameless control.\n- `as=\"button\"` defaults to `type=\"button\"`, so a clickable avatar inside a form doesn't\n  submit it.\n- The default fallback icon is `aria-hidden`.",
diff --git a/bestax-mcp/data/components/Button.json b/bestax-mcp/data/components/Button.json
index 6a2c24bab..42d5bff6a 100644
--- a/bestax-mcp/data/components/Button.json
+++ b/bestax-mcp/data/components/Button.json
@@ -8,11 +8,11 @@
     { "title": "Default Button", "code": "<Button>Default Button</Button>" },
     {
       "title": "All Colors",
-      "code": "<Buttons>\n  {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(color => (\n    <Button key={color} color={color}>\n      {color.charAt(0).toUpperCase() + color.slice(1)}\n    </Button>\n  ))}\n</Buttons>"
+      "code": "<Buttons>\n  {(['primary', 'link', 'info', 'success', 'warning', 'danger'] as const).map(\n    color => (\n      <Button key={color} color={color}>\n        {color.charAt(0).toUpperCase() + color.slice(1)}\n      </Button>\n    )\n  )}\n</Buttons>"
     },
     {
       "title": "All Sizes",
-      "code": "<Buttons>\n  {['small', 'normal', 'medium', 'large'].map(size => (\n    <Button key={size} size={size}>\n      {size.charAt(0).toUpperCase() + size.slice(1)}\n    </Button>\n  ))}\n</Buttons>"
+      "code": "<Buttons>\n  {(['small', 'normal', 'medium', 'large'] as const).map(size => (\n    <Button key={size} size={size}>\n      {size.charAt(0).toUpperCase() + size.slice(1)}\n    </Button>\n  ))}\n</Buttons>"
     },
     {
       "title": "Light Variant",
@@ -94,7 +94,7 @@
     },
     {
       "title": "Forwarded ref",
-      "code": "function example() {\n  const buttonRef = React.useRef(null);\n  const [tag, setTag] = React.useState(null);\n\n  return (\n    <>\n      <Button color=\"primary\" ref={buttonRef}>\n        Target\n      </Button>\n      <Button ml=\"2\" onClick={() => setTag(buttonRef.current?.tagName)}>\n        Read the tag from its ref\n      </Button>\n      <p>Rendered element: {tag ?? '—'}</p>\n    </>\n  );\n}"
+      "code": "function example() {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const [tag, setTag] = React.useState<string>();\n\n  return (\n    <>\n      <Button color=\"primary\" ref={buttonRef}>\n        Target\n      </Button>\n      <Button ml=\"2\" onClick={() => setTag(buttonRef.current?.tagName)}>\n        Read the tag from its ref\n      </Button>\n      <p>Rendered element: {tag ?? '—'}</p>\n    </>\n  );\n}"
     }
   ],
   "accessibility": "- **Labeling:** Always provide descriptive content for buttons for screen readers.\n- **States:** The `isDisabled` and `disabled` props ensure correct `aria-disabled` and `disabled` attributes.\n- **Keyboard:** When rendered as `<a>`, disabled buttons are not focusable.\n- **Focus:** Use `isFocused` and `isActive` for visual feedback, but rely on browser focus for actual accessibility.\n\n:::note\nIf your button has only an icon, use `aria-label` to provide accessible text.\n:::",
diff --git a/bestax-mcp/data/components/Buttons.json b/bestax-mcp/data/components/Buttons.json
index d8d9952ed..b15f59365 100644
--- a/bestax-mcp/data/components/Buttons.json
+++ b/bestax-mcp/data/components/Buttons.json
@@ -11,11 +11,11 @@
     },
     {
       "title": "All Colors Group",
-      "code": "<Buttons>\n  {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(color => (\n    <Button key={color} color={color}>\n      {color.charAt(0).toUpperCase() + color.slice(1)}\n    </Button>\n  ))}\n</Buttons>"
+      "code": "<Buttons>\n  {(['primary', 'link', 'info', 'success', 'warning', 'danger'] as const).map(\n    color => (\n      <Button key={color} color={color}>\n        {color.charAt(0).toUpperCase() + color.slice(1)}\n      </Button>\n    )\n  )}\n</Buttons>"
     },
     {
       "title": "All Sizes Group",
-      "code": "<Buttons>\n  {['small', 'normal', 'medium', 'large'].map(size => (\n    <Button key={size} size={size}>\n      {size.charAt(0).toUpperCase() + size.slice(1)}\n    </Button>\n  ))}\n</Buttons>"
+      "code": "<Buttons>\n  {(['small', 'normal', 'medium', 'large'] as const).map(size => (\n    <Button key={size} size={size}>\n      {size.charAt(0).toUpperCase() + size.slice(1)}\n    </Button>\n  ))}\n</Buttons>"
     },
     {
       "title": "Group Size",
diff --git a/bestax-mcp/data/components/Carousel.json b/bestax-mcp/data/components/Carousel.json
index 6d55b63f0..5fd0c4093 100644
--- a/bestax-mcp/data/components/Carousel.json
+++ b/bestax-mcp/data/components/Carousel.json
@@ -15,7 +15,7 @@
     },
     {
       "title": "Indicator Styles",
-      "code": "function IndicatorExample() {\n  const [style, setStyle] = useState('dots');\n  return (\n    <Block>\n      <Buttons mb=\"4\">\n        <Button\n          onClick={() => setStyle('dots')}\n          color={style === 'dots' ? 'primary' : undefined}\n        >\n          Dots\n        </Button>\n        <Button\n          onClick={() => setStyle('circles')}\n          color={style === 'circles' ? 'primary' : undefined}\n        >\n          Circles\n        </Button>\n        <Button\n          onClick={() => setStyle('lines')}\n          color={style === 'lines' ? 'primary' : undefined}\n        >\n          Lines\n        </Button>\n        <Button\n          onClick={() => setStyle('bars')}\n          color={style === 'bars' ? 'primary' : undefined}\n        >\n          Bars\n        </Button>\n      </Buttons>\n      <Carousel indicatorStyle={style}>\n        <CarouselItem>\n          <Hero color=\"primary\" size=\"medium\">\n            <Hero.Body textAlign=\"centered\">\n              <Paragraph textColor=\"white\">Slide 1</Paragraph>\n            </Hero.Body>\n          </Hero>\n        </CarouselItem>\n        <CarouselItem>\n          <Hero color=\"success\" size=\"medium\">\n            <Hero.Body textAlign=\"centered\">\n              <Paragraph textColor=\"white\">Slide 2</Paragraph>\n            </Hero.Body>\n          </Hero>\n        </CarouselItem>\n        <CarouselItem>\n          <Hero color=\"danger\" size=\"medium\">\n            <Hero.Body textAlign=\"centered\">\n              <Paragraph textColor=\"white\">Slide 3</Paragraph>\n            </Hero.Body>\n          </Hero>\n        </CarouselItem>\n      </Carousel>\n    </Block>\n  );\n}"
+      "code": "function IndicatorExample() {\n  const [style, setStyle] = useState<'dots' | 'circles' | 'lines' | 'bars'>(\n    'dots'\n  );\n  return (\n    <Block>\n      <Buttons mb=\"4\">\n        <Button\n          onClick={() => setStyle('dots')}\n          color={style === 'dots' ? 'primary' : undefined}\n        >\n          Dots\n        </Button>\n        <Button\n          onClick={() => setStyle('circles')}\n          color={style === 'circles' ? 'primary' : undefined}\n        >\n          Circles\n        </Button>\n        <Button\n          onClick={() => setStyle('lines')}\n          color={style === 'lines' ? 'primary' : undefined}\n        >\n          Lines\n        </Button>\n        <Button\n          onClick={() => setStyle('bars')}\n          color={style === 'bars' ? 'primary' : undefined}\n        >\n          Bars\n        </Button>\n      </Buttons>\n      <Carousel indicatorStyle={style}>\n        <CarouselItem>\n          <Hero color=\"primary\" size=\"medium\">\n            <Hero.Body textAlign=\"centered\">\n              <Paragraph textColor=\"white\">Slide 1</Paragraph>\n            </Hero.Body>\n          </Hero>\n        </CarouselItem>\n        <CarouselItem>\n          <Hero color=\"success\" size=\"medium\">\n            <Hero.Body textAlign=\"centered\">\n              <Paragraph textColor=\"white\">Slide 2</Paragraph>\n            </Hero.Body>\n          </Hero>\n        </CarouselItem>\n        <CarouselItem>\n          <Hero color=\"danger\" size=\"medium\">\n            <Hero.Body textAlign=\"centered\">\n              <Paragraph textColor=\"white\">Slide 3</Paragraph>\n            </Hero.Body>\n          </Hero>\n        </CarouselItem>\n      </Carousel>\n    </Block>\n  );\n}"
     },
     {
       "title": "Without Arrows",
diff --git a/bestax-mcp/data/components/Collapse.json b/bestax-mcp/data/components/Collapse.json
index a804ab5e1..4196daa5d 100644
--- a/bestax-mcp/data/components/Collapse.json
+++ b/bestax-mcp/data/components/Collapse.json
@@ -7,19 +7,19 @@
   "examples": [
     {
       "title": "Basic Collapse",
-      "code": "function example() {\n  return (\n    <Collapse\n      trigger={\n        <Block\n          p=\"3\"\n          bgColor=\"white-ter\"\n          cursor=\"pointer\"\n          style={{ borderRadius: '4px' }}\n        >\n          <Strong>Click to expand</Strong>\n        </Block>\n      }\n    >\n      <Block p=\"3\">\n        <Paragraph>\n          This is the collapsible content. It can contain any React elements.\n        </Paragraph>\n        <Paragraph>Click the header again to collapse.</Paragraph>\n      </Block>\n    </Collapse>\n  );\n}"
+      "code": "function example() {\n  return (\n    <Collapse\n      bordered\n      trigger={\n        <Block p=\"3\" cursor=\"pointer\">\n          <Strong>Click to expand</Strong>\n        </Block>\n      }\n    >\n      <Block p=\"3\">\n        <Paragraph>\n          This is the collapsible content. It can contain any React elements.\n        </Paragraph>\n        <Paragraph>Click the header again to collapse.</Paragraph>\n      </Block>\n    </Collapse>\n  );\n}"
     },
     {
       "title": "Default Open",
-      "code": "function example() {\n  return (\n    <Collapse\n      defaultOpen\n      trigger={\n        <Block\n          p=\"3\"\n          bgColor=\"white-ter\"\n          cursor=\"pointer\"\n          style={{ borderRadius: '4px' }}\n        >\n          <Strong>This starts open</Strong>\n        </Block>\n      }\n    >\n      <Block p=\"3\">\n        <Paragraph>This content is visible by default.</Paragraph>\n      </Block>\n    </Collapse>\n  );\n}"
+      "code": "function example() {\n  return (\n    <Collapse\n      bordered\n      defaultOpen\n      trigger={\n        <Block p=\"3\" cursor=\"pointer\">\n          <Strong>This starts open</Strong>\n        </Block>\n      }\n    >\n      <Block p=\"3\">\n        <Paragraph>This content is visible by default.</Paragraph>\n      </Block>\n    </Collapse>\n  );\n}"
     },
     {
       "title": "Without Animation",
-      "code": "function example() {\n  return (\n    <Collapse\n      animation={false}\n      trigger={\n        <Block\n          p=\"3\"\n          bgColor=\"white-ter\"\n          cursor=\"pointer\"\n          style={{ borderRadius: '4px' }}\n        >\n          <Strong>No animation</Strong>\n        </Block>\n      }\n    >\n      <Block p=\"3\">\n        <Paragraph>This collapse has animation disabled.</Paragraph>\n      </Block>\n    </Collapse>\n  );\n}"
+      "code": "function example() {\n  return (\n    <Collapse\n      bordered\n      animation={false}\n      trigger={\n        <Block p=\"3\" cursor=\"pointer\">\n          <Strong>No animation</Strong>\n        </Block>\n      }\n    >\n      <Block p=\"3\">\n        <Paragraph>This collapse has animation disabled.</Paragraph>\n      </Block>\n    </Collapse>\n  );\n}"
     },
     {
       "title": "Controlled Mode",
-      "code": "function example() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Block>\n      <Block mb=\"4\">\n        <Button color=\"primary\" onClick={() => setIsOpen(!isOpen)}>\n          {isOpen ? 'Close' : 'Open'} Collapse\n        </Button>\n        <Span ml=\"4\">State: {isOpen ? 'Open' : 'Closed'}</Span>\n      </Block>\n      <Collapse\n        open={isOpen}\n        onOpenChange={setIsOpen}\n        trigger={\n          <Block p=\"3\" bgColor=\"white-ter\" style={{ borderRadius: '4px' }}>\n            Controlled collapse (click here or the button above)\n          </Block>\n        }\n      >\n        <Block p=\"3\">\n          <Paragraph>This collapse is controlled by external state.</Paragraph>\n        </Block>\n      </Collapse>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Block>\n      <Block mb=\"4\">\n        <Button color=\"primary\" onClick={() => setIsOpen(!isOpen)}>\n          {isOpen ? 'Close' : 'Open'} Collapse\n        </Button>\n        <Span ml=\"4\">State: {isOpen ? 'Open' : 'Closed'}</Span>\n      </Block>\n      <Collapse\n        bordered\n        open={isOpen}\n        onOpenChange={setIsOpen}\n        trigger={\n          <Block p=\"3\">\n            Controlled collapse (click here or the button above)\n          </Block>\n        }\n      >\n        <Block p=\"3\">\n          <Paragraph>This collapse is controlled by external state.</Paragraph>\n        </Block>\n      </Collapse>\n    </Block>\n  );\n}"
     },
     {
       "title": "Accordion",
diff --git a/bestax-mcp/data/components/DateInput.json b/bestax-mcp/data/components/DateInput.json
index b1eb0989e..0a2f2e1b1 100644
--- a/bestax-mcp/data/components/DateInput.json
+++ b/bestax-mcp/data/components/DateInput.json
@@ -15,11 +15,11 @@
     },
     {
       "title": "Controlled",
-      "code": "function example() {\n  const [value, setValue] = useState(new Date());\n  return (\n    <Block>\n      <DateInput label=\"Date\" value={value} onChange={setValue} />\n      <Paragraph mt=\"2\">\n        Selected: {value ? value.toDateString() : '—'}\n      </Paragraph>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [value, setValue] = useState<Date | null>(new Date());\n  return (\n    <Block>\n      <DateInput label=\"Date\" value={value} onChange={setValue} />\n      <Paragraph mt=\"2\">\n        Selected: {value ? value.toDateString() : '—'}\n      </Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "Controlled",
-      "code": "function example() {\n  const [value, setValue] = useState(new Date());\n  return (\n    <Block>\n      <DateInput\n        label=\"Date\"\n        value={value}\n        onChange={setValue}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">\n        Selected: {value ? value.toDateString() : '—'}\n      </Paragraph>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [value, setValue] = useState<Date | null>(new Date());\n  return (\n    <Block>\n      <DateInput\n        label=\"Date\"\n        value={value}\n        onChange={setValue}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">\n        Selected: {value ? value.toDateString() : '—'}\n      </Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "Inline",
@@ -67,11 +67,11 @@
     },
     {
       "title": "Formats",
-      "code": "function example() {\n  const parse = s => {\n    const t = Date.parse(s);\n    return isNaN(t) ? null : new Date(t);\n  };\n  return (\n    <DateInput\n      label=\"Intl long + custom parse\"\n      format={{ year: 'numeric', month: 'long', day: 'numeric' }}\n      parse={parse}\n      defaultValue={new Date(2026, 4, 30)}\n      mobileNative={false}\n    />\n  );\n}"
+      "code": "function example() {\n  const parse = (s: string) => {\n    const t = Date.parse(s);\n    return isNaN(t) ? null : new Date(t);\n  };\n  return (\n    <DateInput\n      label=\"Intl long + custom parse\"\n      format={{ year: 'numeric', month: 'long', day: 'numeric' }}\n      parse={parse}\n      defaultValue={new Date(2026, 4, 30)}\n      mobileNative={false}\n    />\n  );\n}"
     },
     {
       "title": "Formats",
-      "code": "function example() {\n  const parse = s => {\n    const t = Date.parse(s);\n    return isNaN(t) ? null : new Date(t);\n  };\n  return (\n    <DateInput\n      label=\"Intl long + custom parse — typing-first\"\n      format={{ year: 'numeric', month: 'long', day: 'numeric' }}\n      parse={parse}\n      defaultValue={new Date(2026, 4, 30)}\n      mobileNative={false}\n      openOnFocus={false}\n    />\n  );\n}"
+      "code": "function example() {\n  const parse = (s: string) => {\n    const t = Date.parse(s);\n    return isNaN(t) ? null : new Date(t);\n  };\n  return (\n    <DateInput\n      label=\"Intl long + custom parse — typing-first\"\n      format={{ year: 'numeric', month: 'long', day: 'numeric' }}\n      parse={parse}\n      defaultValue={new Date(2026, 4, 30)}\n      mobileNative={false}\n      openOnFocus={false}\n    />\n  );\n}"
     },
     {
       "title": "Launcher Icon",
@@ -95,7 +95,7 @@
     },
     {
       "title": "Manual Keyboard Entry",
-      "code": "function example() {\n  const [v, setV] = useState(() => new Date(2024, 5, 7));\n  return (\n    <Block>\n      <DateInput\n        label=\"Arrow or type — value updates live\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toDateString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [v, setV] = useState<Date | null>(() => new Date(2024, 5, 7));\n  return (\n    <Block>\n      <DateInput\n        label=\"Arrow or type — value updates live\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toDateString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "Manual Keyboard Entry",
diff --git a/bestax-mcp/data/components/DateRangeInput.json b/bestax-mcp/data/components/DateRangeInput.json
index 4213ccdf2..f04d49b4a 100644
--- a/bestax-mcp/data/components/DateRangeInput.json
+++ b/bestax-mcp/data/components/DateRangeInput.json
@@ -11,7 +11,7 @@
     },
     {
       "title": "Controlled",
-      "code": "function ControlledRange() {\n  const [range, setRange] = React.useState([null, null]);\n  const [start, end] = range;\n  return (\n    <Block>\n      <DateRangeInput label=\"Report period\" value={range} onChange={setRange} />\n      <Paragraph>\n        {start ? start.toDateString() : 'No start'} to{' '}\n        {end ? end.toDateString() : 'no end'}\n      </Paragraph>\n      <Button size=\"small\" onClick={() => setRange([null, null])}>\n        Clear\n      </Button>\n    </Block>\n  );\n}"
+      "code": "import type { DateRangeValue } from '@allxsmith/bestax-bulma';\n\nfunction ControlledRange() {\n  const [range, setRange] = React.useState<DateRangeValue>([null, null]);\n  const [start, end] = range;\n  return (\n    <Block>\n      <DateRangeInput label=\"Report period\" value={range} onChange={setRange} />\n      <Paragraph>\n        {start ? start.toDateString() : 'No start'} to{' '}\n        {end ? end.toDateString() : 'no end'}\n      </Paragraph>\n      <Button size=\"small\" onClick={() => setRange([null, null])}>\n        Clear\n      </Button>\n    </Block>\n  );\n}"
     },
     {
       "title": "Inline",
@@ -23,7 +23,7 @@
     },
     {
       "title": "Disabled Dates",
-      "code": "function Weekdays() {\n  const weekend = d => d.getDay() === 0 || d.getDay() === 6;\n  return (\n    <Block>\n      <DateRangeInput label=\"Weekdays only\" shouldDisableDate={weekend} />\n      <DateRangeInput\n        label=\"Over weekends\"\n        shouldDisableDate={weekend}\n        allowDisabledInRange\n      />\n    </Block>\n  );\n}"
+      "code": "function Weekdays() {\n  const weekend = (d: Date) => d.getDay() === 0 || d.getDay() === 6;\n  return (\n    <Block>\n      <DateRangeInput label=\"Weekdays only\" shouldDisableDate={weekend} />\n      <DateRangeInput\n        label=\"Over weekends\"\n        shouldDisableDate={weekend}\n        allowDisabledInRange\n      />\n    </Block>\n  );\n}"
     },
     {
       "title": "Typing the Dates",
diff --git a/bestax-mcp/data/components/DateTimeInput.json b/bestax-mcp/data/components/DateTimeInput.json
index 2a5b6f3e2..e5e6c9d3d 100644
--- a/bestax-mcp/data/components/DateTimeInput.json
+++ b/bestax-mcp/data/components/DateTimeInput.json
@@ -15,11 +15,11 @@
     },
     {
       "title": "Controlled",
-      "code": "function example() {\n  const [v, setV] = useState(new Date());\n  return (\n    <Block>\n      <DateTimeInput label=\"Meeting\" value={v} onChange={setV} />\n      <Paragraph mt=\"2\">Selected: {v ? v.toString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [v, setV] = useState<Date | null>(new Date());\n  return (\n    <Block>\n      <DateTimeInput label=\"Meeting\" value={v} onChange={setV} />\n      <Paragraph mt=\"2\">Selected: {v ? v.toString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "Controlled",
-      "code": "function example() {\n  const [v, setV] = useState(new Date());\n  return (\n    <Block>\n      <DateTimeInput\n        label=\"Meeting\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [v, setV] = useState<Date | null>(new Date());\n  return (\n    <Block>\n      <DateTimeInput\n        label=\"Meeting\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "12-hour Format",
@@ -155,7 +155,7 @@
     },
     {
       "title": "Manual Keyboard Entry",
-      "code": "function example() {\n  const [v, setV] = useState(() => new Date(2024, 5, 7, 13, 45));\n  return (\n    <Block>\n      <DateTimeInput\n        label=\"Arrow or type — value updates live\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [v, setV] = useState<Date | null>(() => new Date(2024, 5, 7, 13, 45));\n  return (\n    <Block>\n      <DateTimeInput\n        label=\"Arrow or type — value updates live\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "Manual Keyboard Entry",
diff --git a/bestax-mcp/data/components/Dialog.json b/bestax-mcp/data/components/Dialog.json
index 7ad6af06c..fb20daf8e 100644
--- a/bestax-mcp/data/components/Dialog.json
+++ b/bestax-mcp/data/components/Dialog.json
@@ -15,7 +15,7 @@
     },
     {
       "title": "Dialog Types",
-      "code": "function example() {\n  const [dialogType, setDialogType] = useState(null);\n  return (\n    <Block>\n      <Buttons>\n        <Button color=\"success\" onClick={() => setDialogType('success')}>\n          Success\n        </Button>\n        <Button color=\"danger\" onClick={() => setDialogType('danger')}>\n          Danger\n        </Button>\n        <Button color=\"warning\" onClick={() => setDialogType('warning')}>\n          Warning\n        </Button>\n        <Button color=\"info\" onClick={() => setDialogType('info')}>\n          Info\n        </Button>\n      </Buttons>\n      {dialogType && (\n        <Dialog\n          isOpen\n          title={`${dialogType.charAt(0).toUpperCase() + dialogType.slice(1)} Dialog`}\n          message={`This is a ${dialogType} dialog with an automatic icon.`}\n          type={dialogType}\n          onConfirm={() => setDialogType(null)}\n          onCancel={() => setDialogType(null)}\n        />\n      )}\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [dialogType, setDialogType] = useState<\n    'success' | 'danger' | 'warning' | 'info' | null\n  >(null);\n  return (\n    <Block>\n      <Buttons>\n        <Button color=\"success\" onClick={() => setDialogType('success')}>\n          Success\n        </Button>\n        <Button color=\"danger\" onClick={() => setDialogType('danger')}>\n          Danger\n        </Button>\n        <Button color=\"warning\" onClick={() => setDialogType('warning')}>\n          Warning\n        </Button>\n        <Button color=\"info\" onClick={() => setDialogType('info')}>\n          Info\n        </Button>\n      </Buttons>\n      {dialogType && (\n        <Dialog\n          isOpen\n          title={`${dialogType.charAt(0).toUpperCase() + dialogType.slice(1)} Dialog`}\n          message={`This is a ${dialogType} dialog with an automatic icon.`}\n          type={dialogType}\n          onConfirm={() => setDialogType(null)}\n          onCancel={() => setDialogType(null)}\n        />\n      )}\n    </Block>\n  );\n}"
     },
     {
       "title": "With Rich Content",
diff --git a/bestax-mcp/data/components/Dropdown.json b/bestax-mcp/data/components/Dropdown.json
index 35a44c7c4..191402f6a 100644
--- a/bestax-mcp/data/components/Dropdown.json
+++ b/bestax-mcp/data/components/Dropdown.json
@@ -31,7 +31,7 @@
     },
     {
       "title": "Forwarded ref",
-      "code": "function example() {\n  const dropdownRef = React.useRef(null);\n  const [tag, setTag] = React.useState(null);\n\n  return (\n    <>\n      <Dropdown label=\"Pick one\" ref={dropdownRef}>\n        <Dropdown.Item>First</Dropdown.Item>\n        <Dropdown.Item>Second</Dropdown.Item>\n      </Dropdown>\n      <Button mt=\"3\" onClick={() => setTag(dropdownRef.current?.className)}>\n        Read the root from its ref\n      </Button>\n      <p>Root class: {tag ?? '—'}</p>\n    </>\n  );\n}"
+      "code": "function example() {\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n  const [tag, setTag] = React.useState<string>();\n\n  return (\n    <>\n      <Dropdown label=\"Pick one\" ref={dropdownRef}>\n        <Dropdown.Item>First</Dropdown.Item>\n        <Dropdown.Item>Second</Dropdown.Item>\n      </Dropdown>\n      <Button mt=\"3\" onClick={() => setTag(dropdownRef.current?.className)}>\n        Read the root from its ref\n      </Button>\n      <p>Root class: {tag ?? '—'}</p>\n    </>\n  );\n}"
     },
     {
       "title": "Split Button",
diff --git a/bestax-mcp/data/components/Field.json b/bestax-mcp/data/components/Field.json
index 385dcf9ed..1638a400d 100644
--- a/bestax-mcp/data/components/Field.json
+++ b/bestax-mcp/data/components/Field.json
@@ -43,7 +43,7 @@
     },
     {
       "title": "With Input (Static, Horizontal)",
-      "code": "<>\n  <Field horizontal label=\"Username\">\n    <Control>\n      <Input isStatic value=\"Static value\" />\n    </Control>\n  </Field>\n  <Field horizontal label=\"Password\">\n    <Control>\n      <Input placeholder=\"Editable value\" />\n    </Control>\n  </Field>\n</>"
+      "code": "<>\n  <Field horizontal label=\"Username\">\n    <Control>\n      <Input isStatic readOnly value=\"Static value\" />\n    </Control>\n  </Field>\n  <Field horizontal label=\"Password\">\n    <Control>\n      <Input placeholder=\"Editable value\" />\n    </Control>\n  </Field>\n</>"
     },
     {
       "title": "With Input (Icons)",
diff --git a/bestax-mcp/data/components/Link.json b/bestax-mcp/data/components/Link.json
index f40c513f0..7986e67f2 100644
--- a/bestax-mcp/data/components/Link.json
+++ b/bestax-mcp/data/components/Link.json
@@ -48,7 +48,7 @@
     },
     {
       "title": "Forwarded ref",
-      "code": "function example() {\n  const linkRef = React.useRef(null);\n  const [tag, setTag] = React.useState(null);\n\n  return (\n    <>\n      <Link href=\"#target\" ref={linkRef} textColor=\"primary\">\n        Target\n      </Link>\n      <Button ml=\"2\" onClick={() => setTag(linkRef.current?.tagName)}>\n        Read the tag from its ref\n      </Button>\n      <p>Rendered element: {tag ?? '—'}</p>\n    </>\n  );\n}"
+      "code": "function example() {\n  const linkRef = React.useRef<HTMLAnchorElement>(null);\n  const [tag, setTag] = React.useState<string>();\n\n  return (\n    <>\n      <Link href=\"#target\" ref={linkRef} textColor=\"primary\">\n        Target\n      </Link>\n      <Button ml=\"2\" onClick={() => setTag(linkRef.current?.tagName)}>\n        Read the tag from its ref\n      </Button>\n      <p>Rendered element: {tag ?? '—'}</p>\n    </>\n  );\n}"
     }
   ],
   "accessibility": "- **Descriptive Text:** Use meaningful link text that describes the destination, not generic text like \"click here\".\n- **External Links:** When opening links in new tabs, consider informing users (e.g., with an icon or text like \"opens in new tab\").\n- **Focus States:** Links inherit browser focus styles. Customize with CSS if needed.\n- **Keyboard Navigation:** Links are naturally keyboard accessible via Tab and Enter keys.\n\n:::info\nFor navigation menus, consider using the `isActive` prop to indicate the current page.\n:::\n\n:::warning Links Are for Navigation, Buttons Are for Actions\nPer [Section 508](https://www.section508.gov/) and [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y) best practices, links (`<a>`) should navigate to a URL — not trigger an action via `onClick` alone. If your element performs an action (opening a modal, submitting data, toggling state, etc.) without navigating, use a [`Button`](./button.md) or [`LinkButton`](./linkbutton.md) instead. A `<Link href=\"#\" onClick={handleClick}>` is an anti-pattern that confuses screen readers and fails accessibility audits.\n:::",
diff --git a/bestax-mcp/data/components/LinkButton.json b/bestax-mcp/data/components/LinkButton.json
index 40fd2e37c..0538ce6b7 100644
--- a/bestax-mcp/data/components/LinkButton.json
+++ b/bestax-mcp/data/components/LinkButton.json
@@ -27,7 +27,7 @@
     },
     {
       "title": "All Colors",
-      "code": "<Buttons>\n  {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(color => (\n    <LinkButton key={color} color={color}>\n      {color.charAt(0).toUpperCase() + color.slice(1)}\n    </LinkButton>\n  ))}\n</Buttons>"
+      "code": "<Buttons>\n  {(['primary', 'link', 'info', 'success', 'warning', 'danger'] as const).map(\n    color => (\n      <LinkButton key={color} color={color}>\n        {color.charAt(0).toUpperCase() + color.slice(1)}\n      </LinkButton>\n    )\n  )}\n</Buttons>"
     },
     {
       "title": "Disabled",
@@ -35,7 +35,7 @@
     },
     {
       "title": "All Sizes",
-      "code": "<Buttons>\n  {['small', 'normal', 'medium', 'large'].map(size => (\n    <LinkButton key={size} size={size}>\n      {size.charAt(0).toUpperCase() + size.slice(1)}\n    </LinkButton>\n  ))}\n</Buttons>"
+      "code": "<Buttons>\n  {(['small', 'normal', 'medium', 'large'] as const).map(size => (\n    <LinkButton key={size} size={size}>\n      {size.charAt(0).toUpperCase() + size.slice(1)}\n    </LinkButton>\n  ))}\n</Buttons>"
     },
     {
       "title": "Polymorphic `as` (Router Links)",
@@ -43,7 +43,7 @@
     },
     {
       "title": "Forwarded ref",
-      "code": "function example() {\n  const defaultRef = React.useRef(null);\n  const anchorRef = React.useRef(null);\n  const [tags, setTags] = React.useState(null);\n\n  return (\n    <>\n      <LinkButton ref={defaultRef}>Default</LinkButton>\n      <LinkButton as=\"a\" href=\"#forwarded-ref\" ml=\"2\" ref={anchorRef}>\n        As an anchor\n      </LinkButton>\n      <Button\n        ml=\"2\"\n        onClick={() =>\n          setTags(\n            `${defaultRef.current?.tagName} / ${anchorRef.current?.tagName}`\n          )\n        }\n      >\n        Read both from their refs\n      </Button>\n      <p>Rendered elements: {tags ?? '—'}</p>\n    </>\n  );\n}"
+      "code": "function example() {\n  const defaultRef = React.useRef<HTMLButtonElement>(null);\n  const anchorRef = React.useRef<HTMLAnchorElement>(null);\n  const [tags, setTags] = React.useState<string>();\n\n  return (\n    <>\n      <LinkButton ref={defaultRef}>Default</LinkButton>\n      <LinkButton as=\"a\" href=\"#forwarded-ref\" ml=\"2\" ref={anchorRef}>\n        As an anchor\n      </LinkButton>\n      <Button\n        ml=\"2\"\n        onClick={() =>\n          setTags(\n            `${defaultRef.current?.tagName} / ${anchorRef.current?.tagName}`\n          )\n        }\n      >\n        Read both from their refs\n      </Button>\n      <p>Rendered elements: {tags ?? '—'}</p>\n    </>\n  );\n}"
     }
   ],
   "accessibility": "- **Semantic HTML:** Renders a native `<button>` element, providing correct keyboard navigation, focus management, and screen reader announcements.\n- **States:** The `isDisabled` and `disabled` props ensure correct `aria-disabled` and `disabled` attributes.\n- **Keyboard:** Fully keyboard accessible with Enter and Space activation.\n- **Replaces anti-patterns:** Use this instead of `<div onClick>` or `<span onClick>` for interactive elements that should not navigate.\n\n:::note\nIf your LinkButton has only an icon, use `aria-label` to provide accessible text.\n:::",
diff --git a/bestax-mcp/data/components/Menu.json b/bestax-mcp/data/components/Menu.json
index 53d6adb5c..a89fec61e 100644
--- a/bestax-mcp/data/components/Menu.json
+++ b/bestax-mcp/data/components/Menu.json
@@ -11,7 +11,7 @@
     },
     {
       "title": "Custom Link Component",
-      "code": "// import { Link } from 'react-router-dom';\nfunction example() {\n  const Link = props => <a>{props.children}</a>;\n  return (\n    <Menu>\n      <Menu.Label>App</Menu.Label>\n      <Menu.List>\n        <Menu.Item as={Link} to=\"/dashboard\">\n          Dashboard\n        </Menu.Item>\n        <Menu.Item as={Link} to=\"/settings\">\n          Settings\n        </Menu.Item>\n      </Menu.List>\n    </Menu>\n  );\n}"
+      "code": "// import { Link } from 'react-router-dom';\nfunction example() {\n  const Link = (props: { to: string; children?: React.ReactNode }) => (\n    <a>{props.children}</a>\n  );\n  return (\n    <Menu>\n      <Menu.Label>App</Menu.Label>\n      <Menu.List>\n        <Menu.Item as={Link} to=\"/dashboard\">\n          Dashboard\n        </Menu.Item>\n        <Menu.Item as={Link} to=\"/settings\">\n          Settings\n        </Menu.Item>\n      </Menu.List>\n    </Menu>\n  );\n}"
     },
     {
       "title": "Active Menu Item",
@@ -23,7 +23,7 @@
     },
     {
       "title": "Forwarded ref",
-      "code": "function example() {\n  const itemRef = React.useRef(null);\n\n  return (\n    <>\n      <Button mb=\"3\" onClick={() => itemRef.current?.focus()}>\n        Focus Customers\n      </Button>\n      <Menu>\n        <Menu.Label>General</Menu.Label>\n        <Menu.List>\n          <Menu.Item href=\"#dashboard\">Dashboard</Menu.Item>\n          <Menu.Item href=\"#customers\" ref={itemRef}>\n            Customers\n          </Menu.Item>\n        </Menu.List>\n      </Menu>\n    </>\n  );\n}"
+      "code": "function example() {\n  const itemRef = React.useRef<HTMLAnchorElement>(null);\n\n  return (\n    <>\n      <Button mb=\"3\" onClick={() => itemRef.current?.focus()}>\n        Focus Customers\n      </Button>\n      <Menu>\n        <Menu.Label>General</Menu.Label>\n        <Menu.List>\n          <Menu.Item href=\"#dashboard\">Dashboard</Menu.Item>\n          <Menu.Item href=\"#customers\" ref={itemRef}>\n            Customers\n          </Menu.Item>\n        </Menu.List>\n      </Menu>\n    </>\n  );\n}"
     },
     {
       "title": "Compound (dot-notation) usage",
diff --git a/bestax-mcp/data/components/Modal.json b/bestax-mcp/data/components/Modal.json
index 6b5db4916..39e6e47c6 100644
--- a/bestax-mcp/data/components/Modal.json
+++ b/bestax-mcp/data/components/Modal.json
@@ -35,7 +35,7 @@
     },
     {
       "title": "Forwarded ref",
-      "code": "function example() {\n  const [open, setOpen] = React.useState(false);\n  const [width, setWidth] = React.useState(null);\n  const modalRef = React.useRef(null);\n\n  return (\n    <>\n      <Button color=\"info\" onClick={() => setOpen(true)}>\n        Open and measure\n      </Button>\n      <Modal\n        active={open}\n        onClose={() => setOpen(false)}\n        ref={modalRef}\n        modalCardTitle=\"Measured through the ref\"\n      >\n        <Button\n          onClick={() =>\n            setWidth(modalRef.current?.getBoundingClientRect().width ?? null)\n          }\n        >\n          Measure\n        </Button>\n        <p>Width: {width === null ? '—' : `${Math.round(width)}px`}</p>\n      </Modal>\n    </>\n  );\n}"
+      "code": "function example() {\n  const [open, setOpen] = React.useState(false);\n  const [width, setWidth] = React.useState<number | null>(null);\n  const modalRef = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <>\n      <Button color=\"info\" onClick={() => setOpen(true)}>\n        Open and measure\n      </Button>\n      <Modal\n        active={open}\n        onClose={() => setOpen(false)}\n        ref={modalRef}\n        modalCardTitle=\"Measured through the ref\"\n      >\n        <Button\n          onClick={() =>\n            setWidth(modalRef.current?.getBoundingClientRect().width ?? null)\n          }\n        >\n          Measure\n        </Button>\n        <p>Width: {width === null ? '—' : `${Math.round(width)}px`}</p>\n      </Modal>\n    </>\n  );\n}"
     },
     {
       "title": "Compound (dot-notation) usage",
diff --git a/bestax-mcp/data/components/Navbar.json b/bestax-mcp/data/components/Navbar.json
index f3ef2ca02..8bdb85dd3 100644
--- a/bestax-mcp/data/components/Navbar.json
+++ b/bestax-mcp/data/components/Navbar.json
@@ -31,7 +31,7 @@
     },
     {
       "title": "Custom Link Component",
-      "code": "// import { Link } from 'react-router-dom';\nfunction example() {\n  const Link = props => <a>{props.children}</a>;\n  return (\n    <Navbar>\n      <Navbar.Menu active>\n        <Navbar.Start>\n          <Navbar.Item as={Link} to=\"/\">\n            Home\n          </Navbar.Item>\n          <Navbar.Item as={Link} to=\"/pricing\">\n            Pricing\n          </Navbar.Item>\n        </Navbar.Start>\n      </Navbar.Menu>\n    </Navbar>\n  );\n}"
+      "code": "// import { Link } from 'react-router-dom';\nfunction example() {\n  const Link = (props: { to: string; children?: React.ReactNode }) => (\n    <a>{props.children}</a>\n  );\n  return (\n    <Navbar>\n      <Navbar.Menu active>\n        <Navbar.Start>\n          <Navbar.Item as={Link} to=\"/\">\n            Home\n          </Navbar.Item>\n          <Navbar.Item as={Link} to=\"/pricing\">\n            Pricing\n          </Navbar.Item>\n        </Navbar.Start>\n      </Navbar.Menu>\n    </Navbar>\n  );\n}"
     },
     {
       "title": "Transparent Navbar",
@@ -63,11 +63,11 @@
     },
     {
       "title": "Color Modifiers",
-      "code": "function example() {\n  const colors = [\n    'primary',\n    'link',\n    'info',\n    'success',\n    'warning',\n    'danger',\n    'black',\n    'dark',\n    'light',\n    'white',\n  ];\n  return (\n    <>\n      {colors.map(color => (\n        <Navbar key={color} color={color} mb=\"2\">\n          <Navbar.Brand>\n            <Navbar.Item href=\"#\">\n              <img src=\"/img/logo.svg\" alt=\"Logo\" width=\"28\" height=\"28\" />\n            </Navbar.Item>\n          </Navbar.Brand>\n          <Navbar.Menu active>\n            <Navbar.Start>\n              <Navbar.Item href=\"#\">Home</Navbar.Item>\n              <Navbar.Item href=\"#\">Docs</Navbar.Item>\n              <Navbar.Item href=\"#\">Components</Navbar.Item>\n            </Navbar.Start>\n          </Navbar.Menu>\n        </Navbar>\n      ))}\n    </>\n  );\n}"
+      "code": "function example() {\n  const colors = [\n    'primary',\n    'link',\n    'info',\n    'success',\n    'warning',\n    'danger',\n    'black',\n    'dark',\n    'light',\n    'white',\n  ] as const;\n  return (\n    <>\n      {colors.map(color => (\n        <Navbar key={color} color={color} mb=\"2\">\n          <Navbar.Brand>\n            <Navbar.Item href=\"#\">\n              <img src=\"/img/logo.svg\" alt=\"Logo\" width=\"28\" height=\"28\" />\n            </Navbar.Item>\n          </Navbar.Brand>\n          <Navbar.Menu active>\n            <Navbar.Start>\n              <Navbar.Item href=\"#\">Home</Navbar.Item>\n              <Navbar.Item href=\"#\">Docs</Navbar.Item>\n              <Navbar.Item href=\"#\">Components</Navbar.Item>\n            </Navbar.Start>\n          </Navbar.Menu>\n        </Navbar>\n      ))}\n    </>\n  );\n}"
     },
     {
       "title": "Forwarded ref",
-      "code": "function example() {\n  const navRef = React.useRef(null);\n  const [height, setHeight] = React.useState(null);\n\n  return (\n    <>\n      <Navbar ref={navRef}>\n        <Navbar.Brand>\n          <Navbar.Item href=\"#\">Home</Navbar.Item>\n        </Navbar.Brand>\n      </Navbar>\n      <Button mt=\"3\" onClick={() => setHeight(navRef.current?.offsetHeight)}>\n        Measure the navbar\n      </Button>\n      <p>Height: {height == null ? '—' : `${height}px`}</p>\n    </>\n  );\n}"
+      "code": "function example() {\n  const navRef = React.useRef<HTMLElement>(null);\n  const [height, setHeight] = React.useState<number>();\n\n  return (\n    <>\n      <Navbar ref={navRef}>\n        <Navbar.Brand>\n          <Navbar.Item href=\"#\">Home</Navbar.Item>\n        </Navbar.Brand>\n      </Navbar>\n      <Button mt=\"3\" onClick={() => setHeight(navRef.current?.offsetHeight)}>\n        Measure the navbar\n      </Button>\n      <p>Height: {height == null ? '—' : `${height}px`}</p>\n    </>\n  );\n}"
     },
     {
       "title": "Compound (dot-notation) usage",
diff --git a/bestax-mcp/data/components/Panel.json b/bestax-mcp/data/components/Panel.json
index 3bb78e471..3a7e74226 100644
--- a/bestax-mcp/data/components/Panel.json
+++ b/bestax-mcp/data/components/Panel.json
@@ -11,7 +11,7 @@
     },
     {
       "title": "Color Variants",
-      "code": "<>\n  {[\n    'primary',\n    'link',\n    'info',\n    'success',\n    'warning',\n    'danger',\n    'black',\n    'dark',\n    'light',\n    'white',\n  ].map(color => (\n    <Panel key={color} color={color}>\n      <Panel.Heading>\n        {color.charAt(0).toUpperCase() + color.slice(1)} Panel\n      </Panel.Heading>\n      <Panel.InputBlock placeholder=\"Search\" />\n      <Panel.Block active>\n        <Panel.Icon name=\"user\" variant=\"solid\" />\n        George Washington\n      </Panel.Block>\n      <Panel.Block>\n        <Panel.Icon name=\"user\" variant=\"solid\" />\n        Marquis de Lafayette\n      </Panel.Block>\n      <Panel.Block>\n        <Panel.Icon name=\"user\" variant=\"solid\" />\n        Nathanael Greene\n      </Panel.Block>\n      <Panel.Block>\n        <Panel.Icon name=\"flag\" variant=\"solid\" />\n        Battle of Trenton\n      </Panel.Block>\n      <Panel.Block>\n        <Panel.Icon name=\"flag\" variant=\"solid\" />\n        Yorktown\n      </Panel.Block>\n      <Panel.ButtonBlock>Reset all filters</Panel.ButtonBlock>\n    </Panel>\n  ))}\n</>"
+      "code": "<>\n  {(\n    [\n      'primary',\n      'link',\n      'info',\n      'success',\n      'warning',\n      'danger',\n      'black',\n      'dark',\n      'light',\n      'white',\n    ] as const\n  ).map(color => (\n    <Panel key={color} color={color}>\n      <Panel.Heading>\n        {color.charAt(0).toUpperCase() + color.slice(1)} Panel\n      </Panel.Heading>\n      <Panel.InputBlock placeholder=\"Search\" />\n      <Panel.Block active>\n        <Panel.Icon name=\"user\" variant=\"solid\" />\n        George Washington\n      </Panel.Block>\n      <Panel.Block>\n        <Panel.Icon name=\"user\" variant=\"solid\" />\n        Marquis de Lafayette\n      </Panel.Block>\n      <Panel.Block>\n        <Panel.Icon name=\"user\" variant=\"solid\" />\n        Nathanael Greene\n      </Panel.Block>\n      <Panel.Block>\n        <Panel.Icon name=\"flag\" variant=\"solid\" />\n        Battle of Trenton\n      </Panel.Block>\n      <Panel.Block>\n        <Panel.Icon name=\"flag\" variant=\"solid\" />\n        Yorktown\n      </Panel.Block>\n      <Panel.ButtonBlock>Reset all filters</Panel.ButtonBlock>\n    </Panel>\n  ))}\n</>"
     },
     {
       "title": "Compound (dot-notation) usage",
diff --git a/bestax-mcp/data/components/Rate.json b/bestax-mcp/data/components/Rate.json
index b04a3a55b..e59223227 100644
--- a/bestax-mcp/data/components/Rate.json
+++ b/bestax-mcp/data/components/Rate.json
@@ -36,7 +36,7 @@
     },
     {
       "title": "Custom Icons",
-      "code": "function example() {\n  const [rating, setRating] = useState(3);\n\n  const HeartIcon = ({ isActive }) => (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill={isActive ? 'currentColor' : 'none'}\n      stroke=\"currentColor\"\n      strokeWidth={isActive ? 0 : 2}\n      style={{ color: '#f14668' }}\n    >\n      <path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\" />\n    </svg>\n  );\n\n  return (\n    <Rate\n      value={rating}\n      onChange={setRating}\n      customIcon={({ isActive }) => <HeartIcon isActive={isActive} />}\n      showScore\n    />\n  );\n}"
+      "code": "function example() {\n  const [rating, setRating] = useState(3);\n\n  const HeartIcon = ({ isActive }: { isActive: boolean }) => (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill={isActive ? 'currentColor' : 'none'}\n      stroke=\"currentColor\"\n      strokeWidth={isActive ? 0 : 2}\n      style={{ color: '#f14668' }}\n    >\n      <path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\" />\n    </svg>\n  );\n\n  return (\n    <Rate\n      value={rating}\n      onChange={setRating}\n      customIcon={({ isActive }) => <HeartIcon isActive={isActive} />}\n      showScore\n    />\n  );\n}"
     },
     {
       "title": "Context-Aware Rendering",
@@ -48,7 +48,7 @@
     },
     {
       "title": "Context-Aware Rendering",
-      "code": "function example() {\n  return (\n    <Field horizontal label=\"Rating\">\n      <Field.Body>\n        <Field>\n          <Control iconLeftName=\"star\">\n            <Rate defaultValue={3} />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
+      "code": "function example() {\n  return (\n    <Field horizontal label=\"Rating\">\n      <Field.Body>\n        <Field>\n          <Control>\n            <Rate defaultValue={3} />\n          </Control>\n        </Field>\n      </Field.Body>\n    </Field>\n  );\n}"
     }
   ],
   "accessibility": "- Uses `role=\"radiogroup\"` for the container\n- The `label` prop names the group via `aria-labelledby` (the rendered `<label>` gets an id — yours via `labelProps.id`, or a generated one); without a label the container falls back to `aria-label=\"Rating\"`\n- Each star has `role=\"radio\"` with `aria-checked`\n- Has `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`\n- Full keyboard navigation with arrow keys\n- Home/End keys jump to 0/max values",
diff --git a/bestax-mcp/data/components/SubTitle.json b/bestax-mcp/data/components/SubTitle.json
index f54e82e26..c1e9c3d22 100644
--- a/bestax-mcp/data/components/SubTitle.json
+++ b/bestax-mcp/data/components/SubTitle.json
@@ -31,7 +31,7 @@
     },
     {
       "title": "All Sizes",
-      "code": "<>\n  {['1', '2', '3', '4', '5', '6'].map(size => (\n    <SubTitle key={size} size={size}>\n      SubTitle Size {size}\n    </SubTitle>\n  ))}\n</>"
+      "code": "<>\n  {(['1', '2', '3', '4', '5', '6'] as const).map(size => (\n    <SubTitle key={size} size={size}>\n      SubTitle Size {size}\n    </SubTitle>\n  ))}\n</>"
     },
     {
       "title": "Title and Subtitle Pairings",
diff --git a/bestax-mcp/data/components/Switch.json b/bestax-mcp/data/components/Switch.json
index fa6538020..c36dba16d 100644
--- a/bestax-mcp/data/components/Switch.json
+++ b/bestax-mcp/data/components/Switch.json
@@ -47,7 +47,7 @@
     },
     {
       "title": "Settings Panel Example",
-      "code": "function example() {\n  const [settings, setSettings] = useState({\n    notifications: true,\n    darkMode: false,\n    autoSave: true,\n  });\n\n  const updateSetting = key => e => {\n    setSettings(prev => ({ ...prev, [key]: e.target.checked }));\n  };\n\n  return (\n    <Block style={{ maxWidth: '300px' }}>\n      <Title size=\"5\">Settings</Title>\n      <Block display=\"flex\" flexDirection=\"column\">\n        <Switch\n          color=\"primary\"\n          checked={settings.notifications}\n          onChange={updateSetting('notifications')}\n        >\n          Push notifications\n        </Switch>\n        <Switch\n          color=\"info\"\n          checked={settings.darkMode}\n          onChange={updateSetting('darkMode')}\n        >\n          Dark mode\n        </Switch>\n        <Switch\n          color=\"success\"\n          checked={settings.autoSave}\n          onChange={updateSetting('autoSave')}\n        >\n          Auto-save\n        </Switch>\n      </Block>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [settings, setSettings] = useState({\n    notifications: true,\n    darkMode: false,\n    autoSave: true,\n  });\n\n  const updateSetting =\n    (key: keyof typeof settings) =>\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setSettings(prev => ({ ...prev, [key]: e.target.checked }));\n    };\n\n  return (\n    <Block style={{ maxWidth: '300px' }}>\n      <Title size=\"5\">Settings</Title>\n      <Block display=\"flex\" flexDirection=\"column\">\n        <Switch\n          color=\"primary\"\n          checked={settings.notifications}\n          onChange={updateSetting('notifications')}\n        >\n          Push notifications\n        </Switch>\n        <Switch\n          color=\"info\"\n          checked={settings.darkMode}\n          onChange={updateSetting('darkMode')}\n        >\n          Dark mode\n        </Switch>\n        <Switch\n          color=\"success\"\n          checked={settings.autoSave}\n          onChange={updateSetting('autoSave')}\n        >\n          Auto-save\n        </Switch>\n      </Block>\n    </Block>\n  );\n}"
     }
   ],
   "accessibility": "- The Switch is built on a native checkbox input for proper keyboard navigation\n- Use the `children` prop to provide a visible label\n- For icon-only switches, provide an `aria-label` prop\n- The switch can be focused and toggled with keyboard (Space/Enter)",
diff --git a/bestax-mcp/data/components/Tag.json b/bestax-mcp/data/components/Tag.json
index 20a9fdaa9..a5e0a4ba6 100644
--- a/bestax-mcp/data/components/Tag.json
+++ b/bestax-mcp/data/components/Tag.json
@@ -30,11 +30,11 @@
     },
     {
       "title": "All Colors",
-      "code": "<Tags>\n  {[\n    'primary',\n    'link',\n    'info',\n    'success',\n    'warning',\n    'danger',\n    'black',\n    'dark',\n    'light',\n    'white',\n  ].map(color => (\n    <Tag key={color} color={color} isHoverable>\n      {color.charAt(0).toUpperCase() + color.slice(1)}\n    </Tag>\n  ))}\n</Tags>"
+      "code": "<Tags>\n  {(\n    [\n      'primary',\n      'link',\n      'info',\n      'success',\n      'warning',\n      'danger',\n      'black',\n      'dark',\n      'light',\n      'white',\n    ] as const\n  ).map(color => (\n    <Tag key={color} color={color} isHoverable>\n      {color.charAt(0).toUpperCase() + color.slice(1)}\n    </Tag>\n  ))}\n</Tags>"
     },
     {
       "title": "Sizes Together",
-      "code": "<Block>\n  {['primary', 'success', 'danger'].map(color => (\n    <Tags key={color}>\n      <Tag color={color} size=\"normal\" isHoverable>\n        {color.charAt(0).toUpperCase() + color.slice(1)} Normal\n      </Tag>\n      <Tag color={color} size=\"medium\" isHoverable>\n        {color.charAt(0).toUpperCase() + color.slice(1)} Medium\n      </Tag>\n      <Tag color={color} size=\"large\" isHoverable>\n        {color.charAt(0).toUpperCase() + color.slice(1)} Large\n      </Tag>\n    </Tags>\n  ))}\n</Block>"
+      "code": "<Block>\n  {(['primary', 'success', 'danger'] as const).map(color => (\n    <Tags key={color}>\n      <Tag color={color} size=\"normal\" isHoverable>\n        {color.charAt(0).toUpperCase() + color.slice(1)} Normal\n      </Tag>\n      <Tag color={color} size=\"medium\" isHoverable>\n        {color.charAt(0).toUpperCase() + color.slice(1)} Medium\n      </Tag>\n      <Tag color={color} size=\"large\" isHoverable>\n        {color.charAt(0).toUpperCase() + color.slice(1)} Large\n      </Tag>\n    </Tags>\n  ))}\n</Block>"
     },
     {
       "title": "Hoverable Tag",
diff --git a/bestax-mcp/data/components/Taginput.json b/bestax-mcp/data/components/Taginput.json
index 1a114848e..aebd64650 100644
--- a/bestax-mcp/data/components/Taginput.json
+++ b/bestax-mcp/data/components/Taginput.json
@@ -7,15 +7,15 @@
   "examples": [
     {
       "title": "Basic Taginput",
-      "code": "function example() {\n  const [tags, setTags] = useState(['React', 'TypeScript']);\n\n  return (\n    <Block>\n      <Taginput value={tags} onChange={setTags} placeholder=\"Add a tag...\" />\n      <Paragraph mt=\"2\" textColor=\"grey\">\n        Tags: {tags.join(', ')}\n      </Paragraph>\n    </Block>\n  );\n}"
+      "code": "import type { TaginputTag } from '@allxsmith/bestax-bulma';\n\nfunction example() {\n  const [tags, setTags] = useState<TaginputTag[]>(['React', 'TypeScript']);\n\n  return (\n    <Block>\n      <Taginput value={tags} onChange={setTags} placeholder=\"Add a tag...\" />\n      <Paragraph mt=\"2\" textColor=\"grey\">\n        Tags: {tags.join(', ')}\n      </Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "With Autocomplete",
-      "code": "function example() {\n  const [tags, setTags] = useState(['React']);\n  const suggestions = [\n    'React',\n    'Vue',\n    'Angular',\n    'Svelte',\n    'TypeScript',\n    'JavaScript',\n    'Python',\n    'Go',\n  ];\n\n  return (\n    <Taginput\n      value={tags}\n      onChange={setTags}\n      data={suggestions}\n      placeholder=\"Add frameworks...\"\n      openOnFocus\n    />\n  );\n}"
+      "code": "import type { TaginputTag } from '@allxsmith/bestax-bulma';\n\nfunction example() {\n  const [tags, setTags] = useState<TaginputTag[]>(['React']);\n  const suggestions = [\n    'React',\n    'Vue',\n    'Angular',\n    'Svelte',\n    'TypeScript',\n    'JavaScript',\n    'Python',\n    'Go',\n  ];\n\n  return (\n    <Taginput\n      value={tags}\n      onChange={setTags}\n      data={suggestions}\n      placeholder=\"Add frameworks...\"\n      openOnFocus\n    />\n  );\n}"
     },
     {
       "title": "Restrict to Suggestions",
-      "code": "function example() {\n  const [tags, setTags] = useState([]);\n  const categories = [\n    'Bug',\n    'Feature',\n    'Documentation',\n    'Enhancement',\n    'Question',\n  ];\n\n  return (\n    <Block>\n      <Taginput\n        value={tags}\n        onChange={setTags}\n        data={categories}\n        allowNew={false}\n        placeholder=\"Select categories...\"\n        openOnFocus\n      />\n      <Paragraph mt=\"2\" textColor=\"grey\" textSize=\"7\">\n        Only predefined categories can be selected\n      </Paragraph>\n    </Block>\n  );\n}"
+      "code": "import type { TaginputTag } from '@allxsmith/bestax-bulma';\n\nfunction example() {\n  const [tags, setTags] = useState<TaginputTag[]>([]);\n  const categories = [\n    'Bug',\n    'Feature',\n    'Documentation',\n    'Enhancement',\n    'Question',\n  ];\n\n  return (\n    <Block>\n      <Taginput\n        value={tags}\n        onChange={setTags}\n        data={categories}\n        allowNew={false}\n        placeholder=\"Select categories...\"\n        openOnFocus\n      />\n      <Paragraph mt=\"2\" textColor=\"grey\" textSize=\"7\">\n        Only predefined categories can be selected\n      </Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "Tag Colors",
@@ -27,15 +27,15 @@
     },
     {
       "title": "Maximum Tags",
-      "code": "function example() {\n  const [tags, setTags] = useState(['One', 'Two']);\n\n  return (\n    <Block>\n      <Taginput\n        value={tags}\n        onChange={setTags}\n        maxTags={3}\n        tagColor=\"info\"\n        placeholder=\"Max 3 tags...\"\n      />\n      <Paragraph mt=\"2\" textColor=\"grey\" textSize=\"7\">\n        {3 - tags.length} tags remaining\n      </Paragraph>\n    </Block>\n  );\n}"
+      "code": "import type { TaginputTag } from '@allxsmith/bestax-bulma';\n\nfunction example() {\n  const [tags, setTags] = useState<TaginputTag[]>(['One', 'Two']);\n\n  return (\n    <Block>\n      <Taginput\n        value={tags}\n        onChange={setTags}\n        maxTags={3}\n        tagColor=\"info\"\n        placeholder=\"Max 3 tags...\"\n      />\n      <Paragraph mt=\"2\" textColor=\"grey\" textSize=\"7\">\n        {3 - tags.length} tags remaining\n      </Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "Allow Duplicates",
-      "code": "function example() {\n  const [tags, setTags] = useState(['Tag']);\n\n  return (\n    <Taginput\n      value={tags}\n      onChange={setTags}\n      allowDuplicates\n      tagColor=\"warning\"\n      placeholder=\"Duplicates allowed...\"\n    />\n  );\n}"
+      "code": "import type { TaginputTag } from '@allxsmith/bestax-bulma';\n\nfunction example() {\n  const [tags, setTags] = useState<TaginputTag[]>(['Tag']);\n\n  return (\n    <Taginput\n      value={tags}\n      onChange={setTags}\n      allowDuplicates\n      tagColor=\"warning\"\n      placeholder=\"Duplicates allowed...\"\n    />\n  );\n}"
     },
     {
       "title": "Custom Confirm Keys",
-      "code": "function example() {\n  const [tags, setTags] = useState([]);\n\n  return (\n    <Block>\n      <Taginput\n        value={tags}\n        onChange={setTags}\n        confirmKeys={['Enter', 'Tab', ' ']}\n        tagColor=\"success\"\n        placeholder=\"Press Enter, Tab, or Space...\"\n      />\n      <Paragraph mt=\"2\" textColor=\"grey\" textSize=\"7\">\n        Space also creates a new tag\n      </Paragraph>\n    </Block>\n  );\n}"
+      "code": "import type { TaginputTag } from '@allxsmith/bestax-bulma';\n\nfunction example() {\n  const [tags, setTags] = useState<TaginputTag[]>([]);\n\n  return (\n    <Block>\n      <Taginput\n        value={tags}\n        onChange={setTags}\n        confirmKeys={['Enter', 'Tab', ' ']}\n        tagColor=\"success\"\n        placeholder=\"Press Enter, Tab, or Space...\"\n      />\n      <Paragraph mt=\"2\" textColor=\"grey\" textSize=\"7\">\n        Space also creates a new tag\n      </Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "Read-only and Disabled",
diff --git a/bestax-mcp/data/components/Tags.json b/bestax-mcp/data/components/Tags.json
index 13de8e6c8..9c638d994 100644
--- a/bestax-mcp/data/components/Tags.json
+++ b/bestax-mcp/data/components/Tags.json
@@ -27,7 +27,7 @@
     },
     {
       "title": "Mixed Tags",
-      "code": "function example() {\n  const [show, setShow] = useState();\n\n  return (\n    <Tags>\n      <Tag color=\"primary\" size=\"medium\">\n        Primary Medium\n      </Tag>\n      <Tag color=\"success\" isRounded>\n        Success Rounded\n      </Tag>\n      {/* Dismissible tag */}\n      {show && <Tag color=\"danger\" isDelete onDelete={() => setShow(false)} />}\n      <Tag color=\"info\">Info</Tag>\n    </Tags>\n  );\n}"
+      "code": "function example() {\n  const [show, setShow] = useState(true);\n\n  return (\n    <Tags>\n      <Tag color=\"primary\" size=\"medium\">\n        Primary Medium\n      </Tag>\n      <Tag color=\"success\" isRounded>\n        Success Rounded\n      </Tag>\n      {/* Dismissible tag */}\n      {show && <Tag color=\"danger\" isDelete onDelete={() => setShow(false)} />}\n      <Tag color=\"info\">Info</Tag>\n    </Tags>\n  );\n}"
     },
     {
       "title": "Add-ons with Delete Tag",
diff --git a/bestax-mcp/data/components/TimeInput.json b/bestax-mcp/data/components/TimeInput.json
index 235099a56..3b3341124 100644
--- a/bestax-mcp/data/components/TimeInput.json
+++ b/bestax-mcp/data/components/TimeInput.json
@@ -15,11 +15,11 @@
     },
     {
       "title": "Controlled",
-      "code": "function example() {\n  const [v, setV] = useState(() => {\n    const d = new Date();\n    d.setHours(13, 45, 0, 0);\n    return d;\n  });\n  return (\n    <Block>\n      <TimeInput label=\"Departure\" value={v} onChange={setV} />\n      <Paragraph mt=\"2\">Selected: {v ? v.toLocaleTimeString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [v, setV] = useState<Date | null>(() => {\n    const d = new Date();\n    d.setHours(13, 45, 0, 0);\n    return d;\n  });\n  return (\n    <Block>\n      <TimeInput label=\"Departure\" value={v} onChange={setV} />\n      <Paragraph mt=\"2\">Selected: {v ? v.toLocaleTimeString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "Controlled",
-      "code": "function example() {\n  const [v, setV] = useState(() => {\n    const d = new Date();\n    d.setHours(13, 45, 0, 0);\n    return d;\n  });\n  return (\n    <Block>\n      <TimeInput\n        label=\"Departure\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toLocaleTimeString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [v, setV] = useState<Date | null>(() => {\n    const d = new Date();\n    d.setHours(13, 45, 0, 0);\n    return d;\n  });\n  return (\n    <Block>\n      <TimeInput\n        label=\"Departure\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toLocaleTimeString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "12-hour Format",
@@ -59,7 +59,7 @@
     },
     {
       "title": "Min and Max",
-      "code": "function example() {\n  const at = (h, m) => {\n    const d = new Date();\n    d.setHours(h, m, 0, 0);\n    return d;\n  };\n  return (\n    <TimeInput\n      label=\"Typed entry clamped to 09:00 – 17:00\"\n      min={at(9, 0)}\n      max={at(17, 0)}\n      defaultValue={at(12, 0)}\n      openOnFocus={false}\n    />\n  );\n}"
+      "code": "function example() {\n  const at = (h: number, m: number) => {\n    const d = new Date();\n    d.setHours(h, m, 0, 0);\n    return d;\n  };\n  return (\n    <TimeInput\n      label=\"Typed entry clamped to 09:00 – 17:00\"\n      min={at(9, 0)}\n      max={at(17, 0)}\n      defaultValue={at(12, 0)}\n      openOnFocus={false}\n    />\n  );\n}"
     },
     {
       "title": "Unselectable Times",
@@ -79,7 +79,7 @@
     },
     {
       "title": "Manual Keyboard Entry",
-      "code": "function example() {\n  const [v, setV] = useState(() => {\n    const d = new Date();\n    d.setHours(13, 45, 0, 0);\n    return d;\n  });\n  return (\n    <Block>\n      <TimeInput\n        label=\"Arrow or type — value updates live\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toLocaleTimeString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [v, setV] = useState<Date | null>(() => {\n    const d = new Date();\n    d.setHours(13, 45, 0, 0);\n    return d;\n  });\n  return (\n    <Block>\n      <TimeInput\n        label=\"Arrow or type — value updates live\"\n        value={v}\n        onChange={setV}\n        openOnFocus={false}\n      />\n      <Paragraph mt=\"2\">Selected: {v ? v.toLocaleTimeString() : '—'}</Paragraph>\n    </Block>\n  );\n}"
     },
     {
       "title": "Manual Keyboard Entry",
@@ -159,7 +159,7 @@
     },
     {
       "title": "Colors",
-      "code": "function example() {\n  const v = new Date();\n  v.setHours(8, 30, 0, 0);\n  return (\n    <Block display=\"flex\" flexWrap=\"wrap\">\n      {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(c => (\n        <Block key={c} mr=\"4\">\n          <TimeInput label={c} color={c} inline defaultValue={v} />\n        </Block>\n      ))}\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const v = new Date();\n  v.setHours(8, 30, 0, 0);\n  return (\n    <Block display=\"flex\" flexWrap=\"wrap\">\n      {(\n        ['primary', 'link', 'info', 'success', 'warning', 'danger'] as const\n      ).map(c => (\n        <Block key={c} mr=\"4\">\n          <TimeInput label={c} color={c} inline defaultValue={v} />\n        </Block>\n      ))}\n    </Block>\n  );\n}"
     },
     {
       "title": "States",
diff --git a/bestax-mcp/data/components/Title.json b/bestax-mcp/data/components/Title.json
index bcfa719f0..8f90e8910 100644
--- a/bestax-mcp/data/components/Title.json
+++ b/bestax-mcp/data/components/Title.json
@@ -29,7 +29,7 @@
     },
     {
       "title": "All Sizes",
-      "code": "<>\n  {['1', '2', '3', '4', '5', '6'].map(size => (\n    <Title key={size} size={size}>\n      Title Size {size}\n    </Title>\n  ))}\n</>"
+      "code": "<>\n  {(['1', '2', '3', '4', '5', '6'] as const).map(size => (\n    <Title key={size} size={size}>\n      Title Size {size}\n    </Title>\n  ))}\n</>"
     },
     {
       "title": "Title and Subtitle",
diff --git a/bestax-mcp/data/components/Toast.json b/bestax-mcp/data/components/Toast.json
index 1f659ac6f..fbd2eb7c8 100644
--- a/bestax-mcp/data/components/Toast.json
+++ b/bestax-mcp/data/components/Toast.json
@@ -11,11 +11,11 @@
     },
     {
       "title": "Toast Types",
-      "code": "function example() {\n  const [toastType, setToastType] = useState(null);\n  return (\n    <Block>\n      <Buttons>\n        <Button color=\"success\" onClick={() => setToastType('success')}>\n          Success\n        </Button>\n        <Button color=\"danger\" onClick={() => setToastType('danger')}>\n          Danger\n        </Button>\n        <Button color=\"warning\" onClick={() => setToastType('warning')}>\n          Warning\n        </Button>\n        <Button color=\"info\" onClick={() => setToastType('info')}>\n          Info\n        </Button>\n      </Buttons>\n      {toastType && (\n        <Toast\n          inline\n          message={`This is a ${toastType} message!`}\n          type={toastType}\n          duration={0}\n          onClose={() => setToastType(null)}\n        />\n      )}\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [toastType, setToastType] = useState<\n    'success' | 'danger' | 'warning' | 'info' | null\n  >(null);\n  return (\n    <Block>\n      <Buttons>\n        <Button color=\"success\" onClick={() => setToastType('success')}>\n          Success\n        </Button>\n        <Button color=\"danger\" onClick={() => setToastType('danger')}>\n          Danger\n        </Button>\n        <Button color=\"warning\" onClick={() => setToastType('warning')}>\n          Warning\n        </Button>\n        <Button color=\"info\" onClick={() => setToastType('info')}>\n          Info\n        </Button>\n      </Buttons>\n      {toastType && (\n        <Toast\n          inline\n          message={`This is a ${toastType} message!`}\n          type={toastType}\n          duration={0}\n          onClose={() => setToastType(null)}\n        />\n      )}\n    </Block>\n  );\n}"
     },
     {
       "title": "Toast Positions",
-      "code": "function example() {\n  const [position, setPosition] = useState(null);\n  const [box, setBox] = useState(null);\n  return (\n    <div\n      ref={setBox}\n      style={{\n        position: 'relative',\n        height: '300px',\n        transform: 'translateZ(0)',\n        border: '1px dashed var(--ifm-color-emphasis-300)',\n        padding: '1rem',\n      }}\n    >\n      <Buttons>\n        <Button onClick={() => setPosition('top-left')}>Top Left</Button>\n        <Button onClick={() => setPosition('top-center')}>Top Center</Button>\n        <Button onClick={() => setPosition('top-right')}>Top Right</Button>\n      </Buttons>\n      <Buttons>\n        <Button onClick={() => setPosition('bottom-left')}>Bottom Left</Button>\n        <Button onClick={() => setPosition('bottom-center')}>\n          Bottom Center\n        </Button>\n        <Button onClick={() => setPosition('bottom-right')}>\n          Bottom Right\n        </Button>\n      </Buttons>\n      {position && box && (\n        <Toast\n          container={box}\n          message={`Position: ${position}`}\n          position={position}\n          type=\"info\"\n          duration={0}\n          onClose={() => setPosition(null)}\n        />\n      )}\n    </div>\n  );\n}"
+      "code": "import type { ToastPosition } from '@allxsmith/bestax-bulma';\n\nfunction example() {\n  const [position, setPosition] = useState<ToastPosition | null>(null);\n  const [box, setBox] = useState<HTMLDivElement | null>(null);\n  return (\n    <div\n      ref={setBox}\n      style={{\n        position: 'relative',\n        height: '300px',\n        transform: 'translateZ(0)',\n        border: '1px dashed var(--ifm-color-emphasis-300)',\n        padding: '1rem',\n      }}\n    >\n      <Buttons>\n        <Button onClick={() => setPosition('top-left')}>Top Left</Button>\n        <Button onClick={() => setPosition('top-center')}>Top Center</Button>\n        <Button onClick={() => setPosition('top-right')}>Top Right</Button>\n      </Buttons>\n      <Buttons>\n        <Button onClick={() => setPosition('bottom-left')}>Bottom Left</Button>\n        <Button onClick={() => setPosition('bottom-center')}>\n          Bottom Center\n        </Button>\n        <Button onClick={() => setPosition('bottom-right')}>\n          Bottom Right\n        </Button>\n      </Buttons>\n      {position && box && (\n        <Toast\n          container={box}\n          message={`Position: ${position}`}\n          position={position}\n          type=\"info\"\n          duration={0}\n          onClose={() => setPosition(null)}\n        />\n      )}\n    </div>\n  );\n}"
     },
     {
       "title": "Action Button",
diff --git a/bestax-mcp/data/components/useBulmaClasses.json b/bestax-mcp/data/components/useBulmaClasses.json
index 88e094fad..3b05fe93e 100644
--- a/bestax-mcp/data/components/useBulmaClasses.json
+++ b/bestax-mcp/data/components/useBulmaClasses.json
@@ -39,7 +39,7 @@
     },
     {
       "title": "Using with Components",
-      "code": "function example() {\n  function MyColumns({ children, ...props }) {\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    return (\n      <div className={classNames('columns', bulmaHelperClasses)} {...rest}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MyColumns textAlign=\"centered\" textTransform=\"uppercase\">\n      <div className=\"column\">\n        <Notification color=\"primary\">Left</Notification>\n      </div>\n      <div className=\"column\">\n        <Notification color=\"info\">Right</Notification>\n      </div>\n    </MyColumns>\n  );\n}"
+      "code": "import type { BulmaClassesProps } from '@allxsmith/bestax-bulma';\n\nfunction example() {\n  function MyColumns({\n    children,\n    ...props\n  }: BulmaClassesProps & React.ComponentPropsWithoutRef<'div'>) {\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    return (\n      <div className={classNames('columns', bulmaHelperClasses)} {...rest}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MyColumns textAlign=\"centered\" textTransform=\"uppercase\">\n      <div className=\"column\">\n        <Notification color=\"primary\">Left</Notification>\n      </div>\n      <div className=\"column\">\n        <Notification color=\"info\">Right</Notification>\n      </div>\n    </MyColumns>\n  );\n}"
     },
     {
       "title": "Using with Components",
@@ -195,7 +195,7 @@
   "storybook": null,
   "summary": "`useBulmaClasses` is a custom React hook that generates Bulma helper class strings from a set of props.",
   "import": "import { useBulmaClasses } from '@allxsmith/bestax-bulma';",
-  "doc": "# useBulmaClasses\n\n## Overview\n\n`useBulmaClasses` is a custom React hook that generates Bulma helper class strings from a set of props. It makes it easy to apply color, spacing, alignment, typography, flexbox, and other Bulma utility classes to your components in a type-safe, composable way. It also separates out any non-helper props for direct use on elements.\n\n---\n\n## Import\n\n```tsx\nimport { useBulmaClasses } from '@allxsmith/bestax-bulma';\n```\n\n---\n\n## Usage\n\n:::info Container components pad themselves\nContainer components like `Box`, `Notification`, `Message`, and `Card` ship with Bulma's standard, pleasant padding and stack with sensible default spacing. The examples below only add margin or padding props when spacing itself is what's being demonstrated.\n:::\n\n### Basic Example\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: 'link',\n    backgroundColor: 'primary',\n    p: '4',\n    textAlign: 'centered',\n    id: 'card1',\n  });\n\n  return JSON.stringify({ bulmaHelperClasses, rest });\n  // bulmaHelperClasses: 'has-text-link has-background-primary p-4 has-text-centered'\n  // rest: { id: 'card1' }\n}\n```\n\nApply to your component:\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: 'link',\n    backgroundColor: 'primary',\n    p: '4',\n    textAlign: 'centered',\n    id: 'card1',\n  });\n\n  return (\n    <div className={classNames('custom-card', bulmaHelperClasses)} {...rest}>\n      Card content\n    </div>\n  );\n}\n```\n\n---\n\n### Responsive Props\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses } = useBulmaClasses({\n    color: 'link',\n    backgroundColor: 'primary',\n    m: '2',\n    textAlign: 'centered',\n    viewport: 'mobile',\n  });\n  return JSON.stringify({ bulmaHelperClasses });\n  // bulmaHelperClasses: 'has-text-link-mobile m-2-mobile has-text-centered-mobile'\n}\n```\n\n---\n\n### Touch and `-only` Viewports\n\nBeyond the five breakpoint props, `display`/`visibility` also take `touch` (mobile + tablet combined — the breakpoint most often used to hide desktop-only chrome) and the `-only` variants (`tablet-only`, `desktop-only`, `widescreen-only`), each isolating a single breakpoint band:\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses } = useBulmaClasses({\n    displayTouch: 'none',\n    displayDesktopOnly: 'flex',\n  });\n  return JSON.stringify({ bulmaHelperClasses });\n  // bulmaHelperClasses: 'is-hidden-touch is-flex-desktop-only'\n}\n```\n\n```tsx live\n<Buttons>\n  <Button visibilityTouch=\"hidden\">Hidden on mobile + tablet</Button>\n  <Button visibilityDesktopOnly=\"invisible\">Invisible on desktop only</Button>\n  <Button>Always visible</Button>\n</Buttons>\n```\n\nThe legacy `viewport` prop widens to all nine values too, so `useBulmaClasses({ display: 'flex', viewport: 'touch' })` produces `is-flex-touch`. One exception: Bulma ships no `is-size-*` classes for the three `-only` bands, so `textSize` combined with a `tablet-only`/`desktop-only`/`widescreen-only` `viewport` degrades to the base `is-size-N` (rather than emitting a dead `is-size-N-tablet-only`); `touch` and the five breakpoints are unaffected.\n\n---\n\n### Grid Display\n\n`display` also accepts `'grid'`, emitting `is-grid`:\n\n```tsx live\n<Box display=\"grid\">\n  <Notification color=\"primary\" m=\"1\">\n    Cell 1\n  </Notification>\n  <Notification color=\"info\" m=\"1\">\n    Cell 2\n  </Notification>\n</Box>\n```\n\n---\n\n### With Flexbox Helpers\n\nFlexbox properties are divided into two categories:\n\n#### Container Properties\n\nThese properties apply to elements with `display: flex` or `display: inline-flex`:\n\n- `flexDirection` - Direction of flex items\n- `flexWrap` - Whether items wrap\n- `justifyContent` - Alignment along main axis\n- `alignContent` - Alignment of wrapped lines\n- `alignItems` - Alignment along cross axis\n\n#### Item Properties\n\nThese properties apply to flex items (children of flex containers) and **do not require** the element itself to have `display: flex`:\n\n- `alignSelf` - Override container's alignItems for this item\n- `flexGrow` - How much the item should grow\n- `flexShrink` - How much the item should shrink\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses } = useBulmaClasses({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '4',\n  });\n  return JSON.stringify({ bulmaHelperClasses });\n  // bulmaHelperClasses: 'is-gap-4 is-flex is-flex-direction-column is-align-items-center is-justify-content-center'\n}\n```\n\nExample with flex items:\n\n```tsx\n// Container with display flex\n<Box display=\"flex\" alignItems=\"center\">\n  {/* Items don't need display flex to use alignSelf, flexGrow, flexShrink */}\n  <Button alignSelf=\"flex-start\">Start</Button>\n  <Button alignSelf=\"center\" flexGrow=\"1\">\n    Center & Grow\n  </Button>\n  <Button alignSelf=\"flex-end\" flexShrink=\"0\">\n    End & No Shrink\n  </Button>\n</Box>\n```\n\n---\n\n### Using with Components\n\n:::note These are illustrations, not replacements\nThe snippets below rebuild simplified components by hand purely to show how `useBulmaClasses` fits inside one. In a real app, use the library's own [Columns / Column](../columns/columns.md) and [Card](../components/card.md) components — they already wire up `useBulmaClasses` (plus prefixes, modifiers, and more) for you.\n:::\n\n#### Columns\n\n`MyColumns` forwards all of its props to `useBulmaClasses` — the `textAlign` and `textTransform` helper props below flow through `props` into the hook (producing `has-text-centered is-uppercase`), while anything the hook doesn't recognize comes back in `rest` and lands on the `<div>`:\n\n```tsx live\nfunction example() {\n  function MyColumns({ children, ...props }) {\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    return (\n      <div className={classNames('columns', bulmaHelperClasses)} {...rest}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MyColumns textAlign=\"centered\" textTransform=\"uppercase\">\n      <div className=\"column\">\n        <Notification color=\"primary\">Left</Notification>\n      </div>\n      <div className=\"column\">\n        <Notification color=\"info\">Right</Notification>\n      </div>\n    </MyColumns>\n  );\n}\n```\n\n#### Card\n\n```tsx live\nfunction example() {\n  const props = {};\n\n  const textColor = 'white';\n  const bgColor = 'primary';\n  const hasShadow = true;\n  const className = 'custom-card';\n  const children = <p>Making a custom card</p>;\n  const p = '4';\n\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    p,\n    ...props,\n  });\n  const cardClasses = classNames('card', className, bulmaHelperClasses, {\n    'is-shadowless': !hasShadow,\n  });\n  return (\n    <div className={cardClasses} {...rest}>\n      {children}\n    </div>\n  );\n}\n```\n\n---\n\n### Colors\n\nUse the `color` prop to apply Bulma color classes. Here, each button demonstrates a different color:\n\n```tsx live\n<Buttons>\n  <Button color=\"primary\">Primary</Button>\n  <Button color=\"link\">Link</Button>\n  <Button color=\"info\">Info</Button>\n  <Button color=\"success\">Success</Button>\n  <Button color=\"warning\">Warning</Button>\n  <Button color=\"danger\">Danger</Button>\n  <Button color=\"black\">Black</Button>\n  <Button color=\"white\">White</Button>\n</Buttons>\n```\n\n### Background Color\n\nComponents expose this helper as `bgColor` (the hook's own parameter is `backgroundColor`). Pair it with a text color that keeps the label readable on each background:\n\n```tsx live\n<Columns isMultiline>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"primary\" textColor=\"white\">\n      Primary\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"link\" textColor=\"white\">\n      Link\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"info\" textColor=\"white\">\n      Info\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"success\" textColor=\"white\">\n      Success\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"warning\" textColor=\"black\">\n      Warning\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"danger\" textColor=\"white\">\n      Danger\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"black\" textColor=\"white\">\n      Black\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"white\" textColor=\"black\">\n      White\n    </Box>\n  </Column>\n</Columns>\n```\n\n### Scheme Backgrounds and `bulmaHelperStyles`\n\nThe hook returns a third member, `bulmaHelperStyles`, alongside `bulmaHelperClasses` and `rest`. It is `undefined` for every input except a scheme `backgroundColor` (`scheme-main`, `scheme-main-bis`, `scheme-main-ter`, `scheme-invert`, `scheme-invert-bis`, `scheme-invert-ter`): Bulma ships no `has-background-scheme-*` classes, so those values emit no class and instead surface here as a dark-mode-safe inline style tracking Bulma's scheme CSS variables.\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    color: 'primary',\n    backgroundColor: 'scheme-main-bis',\n    id: 'band1',\n  });\n\n  return JSON.stringify({ bulmaHelperClasses, bulmaHelperStyles, rest });\n  // bulmaHelperClasses: 'has-text-primary'\n  // bulmaHelperStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }\n  // rest: { id: 'band1' }\n}\n```\n\nPut it on your element with `mergeBulmaStyles`, which merges the helper style with a user-supplied `style` prop (the user style wins, and the result is `undefined` when both are absent so the DOM stays untouched):\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    backgroundColor: 'scheme-main-bis',\n    p: '4',\n  });\n\n  return (\n    <div\n      {...rest}\n      className={classNames('custom-band', bulmaHelperClasses)}\n      style={mergeBulmaStyles(bulmaHelperStyles, undefined)}\n    >\n      A dark-mode-safe surface with zero custom CSS\n    </div>\n  );\n}\n```\n\nIn a real component, destructure `style` out of your own props and pass it as `mergeBulmaStyles`'s second argument (as `Section` does) — if `style` stays in the object you spread, whichever comes later in JSX silently replaces the other instead of merging.\n\n### Color Shade\n\n`colorShade` refines the **text color** — it pairs with the hook's `color` prop (exposed as `textColor` on components, where `color` is the component's own modifier). Here, each line steps through the primary palette:\n\n```tsx live\n<>\n  <Paragraph textColor=\"primary\" colorShade=\"10\" textWeight=\"semibold\">\n    Primary 10\n  </Paragraph>\n  <Paragraph textColor=\"primary\" colorShade=\"30\" textWeight=\"semibold\">\n    Primary 30\n  </Paragraph>\n  <Paragraph textColor=\"primary\" colorShade=\"60\" textWeight=\"semibold\">\n    Primary 60\n  </Paragraph>\n  <Paragraph textColor=\"primary\" colorShade=\"90\" textWeight=\"semibold\">\n    Primary 90\n  </Paragraph>\n  <Paragraph textColor=\"primary\" colorShade=\"invert\" textWeight=\"semibold\">\n    Primary Invert\n  </Paragraph>\n</>\n```\n\n### Background Color Shade\n\nBackground shades use their own prop: `backgroundColorShade` pairs with `backgroundColor`, independently of `colorShade` (which pairs with the text color). Low shade numbers are dark and high numbers are light, so dark shades get light text and light shades get dark text to keep each label readable:\n\n```tsx live\n<Columns isMultiline>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"primary\" backgroundColorShade=\"10\" textColor=\"white\">\n      Primary 10\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"primary\" backgroundColorShade=\"30\" textColor=\"white\">\n      Primary 30\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"primary\" backgroundColorShade=\"60\" textColor=\"black\">\n      Primary 60\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"primary\" backgroundColorShade=\"90\" textColor=\"black\">\n      Primary 90\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"primary\" backgroundColorShade=\"invert\" textColor=\"white\">\n      Primary Invert\n    </Box>\n  </Column>\n</Columns>\n```\n\nBecause the two shade props are independent, you can shade the text and the background at the same time — a dark background shade with a light text shade of the same color reads well in both themes:\n\n```tsx live\n<Box\n  bgColor=\"primary\"\n  backgroundColorShade=\"15\"\n  textColor=\"primary\"\n  colorShade=\"85\"\n>\n  Primary text shade 85 on a primary background shade 15\n</Box>\n```\n\n### Margin\n\nUse margin props to add spacing. Here, margin is applied to buttons, and to a row of buttons using the `Buttons` component:\n\n```tsx live\n<>\n  <Buttons>\n    <Button>Left</Button>\n    <Button m=\"4\">Margin 4</Button>\n    <Button>Right</Button>\n  </Buttons>\n  <Buttons mt=\"5\" mb=\"5\">\n    <Button>Top/Bottom Margin</Button>\n    <Button>Row 2</Button>\n  </Buttons>\n</>\n```\n\n### Gap\n\n`gap` puts space between the children of a flex or grid container, and `columnGap` and `rowGap` set one axis. Each whole step is 0.5rem, so `gap=\"2\"` is 1rem and `gap=\"8\"` is 4rem, with half steps such as `\"1.5\"` between them. That is not the margin scale, where `m=\"2\"` is 0.5rem. A step can also be written as a number (`gap={2}`).\n\nThe helpers set the CSS `gap`, which does nothing unless the element lays its children out as flex or grid. Pair them with `display=\"flex\"` or `display=\"grid\"`, or use them on a component that already is one, such as `Buttons` or `Tags`, where they replace the spacing Bulma gives it:\n\n```tsx live\n<>\n  <Block display=\"flex\" flexWrap=\"wrap\" gap=\"2\">\n    <Tag color=\"primary\">One</Tag>\n    <Tag color=\"primary\">Two</Tag>\n    <Tag color=\"primary\">Three</Tag>\n  </Block>\n  <Block display=\"flex\" flexDirection=\"column\" gap=\"0.5\">\n    <Tag color=\"info\">A column</Tag>\n    <Tag color=\"info\">with a half step</Tag>\n  </Block>\n  <Buttons gap=\"1\">\n    <Button>Tighter</Button>\n    <Button>than Bulma's</Button>\n    <Button>default</Button>\n  </Buttons>\n</>\n```\n\n`gapless` removes the gap, the shortcut for `gap=\"0\"`; when both are set, `gap` wins. `columnGap` and `rowGap` win on their own axis over `gap` and `gapless`, so `gap=\"4\" rowGap=\"1\"` spaces the columns 2rem apart and the rows 0.5rem.\n\n`Grid` takes `gap`, `columnGap` and `rowGap` as its own props and renders the same classes. `Columns` keeps its own `gap`, the columns gutter, which takes whole steps; see [Columns](../columns/columns.md).\n\n### Text Size\n\nApply `textSize` to Notifications to illustrate different sizes:\n\n```tsx live\n<>\n  <Notification textSize=\"1\">Size 1</Notification>\n  <Notification textSize=\"3\">Size 3</Notification>\n  <Notification textSize=\"5\">Size 5</Notification>\n  <Notification textSize=\"7\">Size 7</Notification>\n</>\n```\n\n### Text Align\n\nApply `textAlign` to a Box to illustrate text alignment:\n\n```tsx live\n<>\n  <Box textAlign=\"centered\">Centered text</Box>\n  <Box textAlign=\"right\">Right aligned text</Box>\n  <Box textAlign=\"left\">Left aligned text</Box>\n</>\n```\n\n### Text Transform\n\nApply `textTransform` to a Content tag with a paragraph of the Declaration of Independence:\n\n```tsx live\n<>\n  <Box>\n    <Content textTransform=\"uppercase\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content textTransform=\"lowercase\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content textTransform=\"capitalized\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content textTransform=\"italic\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n</>\n```\n\n### Text Weight\n\nApply `textWeight` to Content tags to illustrate different font weights:\n\n```tsx live\n<>\n  <Box>\n    <Content textWeight=\"light\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content textWeight=\"normal\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content textWeight=\"medium\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content textWeight=\"bold\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n</>\n```\n\n### Font Family\n\nUse Content blocks with different font families:\n\n```tsx live\n<>\n  <Box>\n    <Content fontFamily=\"sans-serif\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content fontFamily=\"monospace\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content fontFamily=\"primary\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content fontFamily=\"secondary\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content fontFamily=\"code\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n</>\n```\n\n### Visibility\n\nShow three buttons, one hidden, one screen-reader only:\n\n```tsx live\n<Buttons>\n  <Button visibility=\"hidden\">Hidden</Button>\n  <Button visibility=\"sr-only\">Screen Reader Only</Button>\n  <Button>Visible</Button>\n</Buttons>\n```\n\n### Overflow\n\nShow a Box with clipped overflow:\n\n```tsx live\n<Box overflow=\"clipped\" style={{ width: 200, height: 50 }}>\n  This is a very long line of text that will be clipped and not overflow the\n  box.\n</Box>\n```\n\n`overflow` also takes the CSS keywords Bulma has helpers for (`auto`, `clip`, `hidden`, `scroll`, `visible`), and `overflowX` and `overflowY` set one axis. Beside `overflow`, an axis prop wins on its own axis and `overflow` sets the other, with `clipped` counting as `hidden`, so `overflow=\"hidden\" overflowY=\"auto\"` clips sideways and scrolls down.\n\nHere an aspect ratio fixes the height and the list scrolls inside it. A region that scrolls needs to be reachable from the keyboard, so the example gives it `tabIndex={0}`, a `region` role and a name.\n\n```tsx live\n<Box\n  aspectRatio=\"3by1\"\n  overflowY=\"auto\"\n  tabIndex={0}\n  role=\"region\"\n  aria-label=\"Scrolling list\"\n>\n  {Array.from({ length: 20 }, (_, i) => (\n    <p key={i}>Line {i + 1} of a list longer than the box.</p>\n  ))}\n</Box>\n```\n\nWithout `overflowY` the box would grow to fit the list, because an aspect ratio gives way to content that does not fit.\n\n### Overlay\n\n`overlay` is `position: absolute` with `top`, `right`, `bottom` and `left` at 0, so it covers the nearest positioned ancestor. The [position](#position) helpers set `position` with `!important`, so a `pos` or `relative` beside `overlay` replaces the `absolute` and keeps the zero offsets. `overlay pos=\"fixed\"` covers the viewport instead. `sticky`, `relative` and `static` put the element back in the normal flow, where it covers nothing, and a sticky one sticks at every edge of its scroll container.\n\nShow an overlay (toggle with button click):\n\n```tsx\nfunction OverlayExample() {\n  const [show, setShow] = useState(false);\n  return (\n    <Box overlay={show}>\n      <Button onClick={() => setShow(s => !s)}>\n        {show ? 'Hide Overlay' : 'Show Overlay'}\n      </Button>\n    </Box>\n  );\n}\n```\n\n### Interaction\n\nShow text in a Box with `unselectable`, and another Box with `clickable`:\n\n```tsx live\n<>\n  <Box interaction=\"unselectable\">This text cannot be selected.</Box>\n  <Box interaction=\"clickable\">This box is clickable.</Box>\n</>\n```\n\n### Cursor\n\nUse the `cursor` prop to set the cursor style. `'pointer'` reuses Bulma's `is-clickable` class, while `'help'` uses the project-level `is-cursor-help` class:\n\n```tsx live\n<>\n  <Box cursor=\"pointer\">Cursor: pointer (uses is-clickable)</Box>\n  <Box cursor=\"help\">Cursor: help</Box>\n</>\n```\n\n### Radius\n\n`radiusless` removes the radius; `small`, `normal`, `large` and `rounded` set one from Bulma's radius scale:\n\n```tsx live\n<Buttons>\n  <Button radius=\"radiusless\">Radiusless</Button>\n  <Button radius=\"small\">Small</Button>\n  <Button radius=\"normal\">Normal</Button>\n  <Button radius=\"large\">Large</Button>\n  <Button radius=\"rounded\">Rounded</Button>\n</Buttons>\n```\n\nThe class goes on the component's root element, so where an inner element draws the radius, such as the `<img>` inside `Image`, that element keeps its own. The sizes are not `!important`, unlike `radiusless`, so a component rule more specific than one class still wins: an `isRounded` control stays a pill, and a joined addon keeps its square inner corners.\n\n### Shadowless\n\nShow a Box with `shadowless`:\n\n```tsx live\n<Box shadow=\"shadowless\">This box has no shadow.</Box>\n```\n\n### ClassName\n\nShow a Message with a custom className:\n\n```tsx live\n<Message className=\"custom-message\">\n  This message uses a custom className.\n</Message>\n```\n\n### Clearfix\n\nShow containers with and without clearfix to demonstrate the importance of clearing floated elements:\n\n```tsx live\n<>\n  <Box>\n    <Title size=\"6\">Without clearfix (container collapses)</Title>\n    <Notification color=\"danger\">\n      <Button float=\"left\" color=\"primary\">\n        Left\n      </Button>\n      <Button float=\"right\" color=\"danger\">\n        Right\n      </Button>\n    </Notification>\n  </Box>\n\n  <Box>\n    <Title size=\"6\">With clearfix (container wraps its floats)</Title>\n    <Notification color=\"success\" clearfix>\n      <Button float=\"left\" color=\"primary\">\n        Left\n      </Button>\n      <Button float=\"right\" color=\"danger\">\n        Right\n      </Button>\n    </Notification>\n  </Box>\n</>\n```\n\n### Position\n\n`pos` sets CSS `position`: `absolute`, `fixed`, `relative`, `static` or `sticky`. It is named `pos` because several components already have a `position` prop of their own, for where they place a popup or a toast. `relative` is the older shortcut for `pos=\"relative\"` and still works; when both are set, `pos` wins. Beside `overlay`, a `pos` or `relative` replaces the overlay's `absolute` and keeps its zero offsets; see [Overlay](#overlay).\n\nShow a container with relative positioning that provides context for an absolutely positioned child. The helpers set `position` and nothing else, so the child keeps its `top` and `right` offsets inline:\n\n```tsx live\n<Notification pos=\"relative\" pb=\"6\" color=\"info\">\n  <Span>This container has position: relative</Span>\n  <Tag\n    color=\"primary\"\n    size=\"medium\"\n    pos=\"absolute\"\n    style={{ top: '1rem', right: '1rem' }}\n  >\n    Absolutely positioned child\n  </Tag>\n</Notification>\n```\n\n`pos=\"sticky\"` needs an offset in the same way, and does nothing until it has one.\n\n### Aspect Ratio\n\n`aspectRatio` fixes an element's width-to-height ratio to one of Bulma's ratios, such as `1by1`, `4by3` or `16by9`, or a portrait one such as `9by16`. The full set is in [Supported Props](#supported-props). The height follows the width:\n\n```tsx live\n<Columns>\n  <Column>\n    <Notification color=\"primary\" aspectRatio=\"1by1\">\n      1by1\n    </Notification>\n  </Column>\n  <Column>\n    <Notification color=\"info\" aspectRatio=\"4by3\">\n      4by3\n    </Notification>\n  </Column>\n  <Column>\n    <Notification color=\"success\" aspectRatio=\"16by9\">\n      16by9\n    </Notification>\n  </Column>\n</Columns>\n```\n\nOn `Image`, use its own `size` ratios instead, which also fit the picture to the box.\n\n---\n\n### Skeleton Examples\n\nThe `skeleton` prop applies Bulma's skeleton loading effect. [Skeleton's accessibility notes](../elements/skeleton.md#accessibility) cover it too, reduced motion included. Here are examples for each component:\n\n#### Skeleton Button\n\n```tsx live\n<Button skeleton>Skeleton Button</Button>\n```\n\n#### Skeleton Buttons Group\n\n```tsx live\n<Buttons>\n  <Button skeleton>Skeleton</Button>\n  <Button skeleton>Skeleton</Button>\n  <Button skeleton>Skeleton</Button>\n</Buttons>\n```\n\n#### Skeleton Icon\n\n```tsx live\n<Icon name=\"star\" skeleton ariaLabel=\"Star icon skeleton\" />\n```\n\n#### Skeleton Image\n\n```tsx live\n<Image skeleton src=\"/img/react-logo.png\" alt=\"Skeleton image\" size=\"128x128\" />\n```\n\n#### Skeleton Notification\n\n```tsx live\n<Notification skeleton>Skeleton notification message.</Notification>\n```\n\n#### Skeleton Tag\n\n```tsx live\n<Tag skeleton>Skeleton Tag</Tag>\n```\n\n#### Skeleton Title\n\n```tsx live\n<Title skeleton size=\"2\">\n  Skeleton Title\n</Title>\n```\n\n#### Skeleton SubTitle\n\n```tsx live\n<SubTitle skeleton size=\"4\">\n  Skeleton SubTitle\n</SubTitle>\n```\n\n#### Skeleton Input\n\n```tsx live\n<Input skeleton placeholder=\"Skeleton Input\" />\n```\n\n#### Skeleton TextArea\n\n```tsx live\n<TextArea skeleton placeholder=\"Skeleton TextArea\" rows={3} />\n```\n\n---\n\n## API\n\n```tsx\nconst { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses(props);\n```\n\n- **props**: An object supporting all Bulma helper class props (see table below), plus any additional props. `backgroundColor` additionally accepts the six [`validSchemeColors`](./valid-values.md) values.\n- **bulmaHelperClasses**: A string of Bulma utility classes to be applied to your element.\n- **bulmaHelperStyles**: `React.CSSProperties | undefined` — an inline style for a scheme `backgroundColor` (see [Scheme Backgrounds](#scheme-backgrounds-and-bulmahelperstyles)); `undefined` for every other input. Apply it with [`mergeBulmaStyles`](#scheme-backgrounds-and-bulmahelperstyles) so a user `style` prop wins.\n- **rest**: An object of all remaining props (with helper props stripped out), suitable for spreading onto your component.\n\n---\n\n## Composable Mini-Hooks\n\n`useBulmaClasses` remains the everything-hook — it is what every bestax-bulma component uses internally, and it covers the full helper prop surface with zero behavior change. If you are building a custom component that only needs a slice of that surface, you can reach for one of seven composable mini hooks instead. Each mini hook accepts just its own group of props and returns a plain class string (except `useColorStyles`, which returns an inline style object or `undefined`), which you can combine with the [`classNames`](./classnames.md) utility.\n\n| Hook                   | Props Covered                                                                                                                                                                                                                               | Returns                                                                                                                                                                                 |\n| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `useColorClasses`      | `color`, `colorShade`, `backgroundColor`, `backgroundColorShade`                                                                                                                                                                            | Text and background color classes, including palette shades                                                                                                                             |\n| `useColorStyles`       | `backgroundColor` (scheme values)                                                                                                                                                                                                           | `{ backgroundColor: 'var(--bulma-scheme-*)' }` for a scheme background, `undefined` otherwise — the source of `bulmaHelperStyles`                                                       |\n| `useSpacingClasses`    | `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my`, `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py`, `gap`, `columnGap`, `rowGap`, `gapless`                                                                                                                   | Margin, padding and gap classes                                                                                                                                                         |\n| `useTypographyClasses` | `textSize`, `textAlign`, `textTransform`, `textWeight`, `fontFamily`, `viewport`, plus `textSize{Mobile..Fullhd}`, `textAlign{Mobile..Fullhd}`                                                                                              | Typography classes, including responsive size/alignment variants                                                                                                                        |\n| `useVisibilityClasses` | `display`, `visibility`, `viewport`, plus `display{Mobile,Tablet,TabletOnly,Touch,Desktop,DesktopOnly,Widescreen,WidescreenOnly,Fullhd}`, `visibility{Mobile,Tablet,TabletOnly,Touch,Desktop,DesktopOnly,Widescreen,WidescreenOnly,Fullhd}` | Display and visibility classes (this hook owns all display emission)                                                                                                                    |\n| `useFlexboxClasses`    | `flexDirection`, `flexWrap`, `justifyContent`, `alignContent`, `alignItems`, `alignSelf`, `flexGrow`, `flexShrink`                                                                                                                          | Flexbox classes; container classes are only emitted when a `display`/`display{Viewport}` prop is `flex`/`inline-flex`, item classes (`alignSelf`, `flexGrow`, `flexShrink`) always emit |\n| `useOtherClasses`      | `float`, `overflow`, `overflowX`, `overflowY`, `overlay`, `interaction`, `cursor`, `radius`, `shadow`, `responsive`, `skeleton`, `clearfix`, `pos`, `relative`, `fullHeight`, `aspectRatio`                                                 | Miscellaneous utility classes                                                                                                                                                           |\n\nAll seven hooks (plus `classNames` and `mergeBulmaStyles`) are exported from the package root:\n\n```tsx\nimport {\n  useColorClasses,\n  useColorStyles,\n  useSpacingClasses,\n  classNames,\n  mergeBulmaStyles,\n} from '@allxsmith/bestax-bulma';\n```\n\nHere is a small custom component that only needs color and spacing helpers:\n\n```tsx live\nfunction example() {\n  function PriceTag({\n    color,\n    backgroundColor,\n    backgroundColorShade,\n    m,\n    children,\n  }) {\n    const colorClasses = useColorClasses({\n      color,\n      backgroundColor,\n      backgroundColorShade,\n    });\n    const spacingClasses = useSpacingClasses({ m });\n    return (\n      <span className={classNames('tag', colorClasses, spacingClasses)}>\n        {children}\n      </span>\n    );\n  }\n\n  return (\n    <div>\n      <PriceTag color=\"white\" backgroundColor=\"success\" m=\"2\">\n        $19.99\n      </PriceTag>\n      <PriceTag\n        color=\"white\"\n        backgroundColor=\"danger\"\n        backgroundColorShade=\"dark\"\n        m=\"2\"\n      >\n        $49.99\n      </PriceTag>\n    </div>\n  );\n}\n```\n\n:::note useFlexboxClasses and display\n\n`useFlexboxClasses` only emits container classes (`flexDirection`, `flexWrap`, `justifyContent`, `alignContent`, `alignItems`) when a `display` or `display{Viewport}` prop is `flex` or `inline-flex` — it reads those display props for gating but never emits the display class itself. Pair it with `useVisibilityClasses` (which owns display emission), or just use `useBulmaClasses`.\n\n:::\n\n---\n\n## Supported Props\n\nBelow is the full list of supported props, derived from the `BulmaClassesProps` TypeScript definition:\n\n| Prop                   | Type / Example Value                                                                                                                                                                                                                                                               | Effect / Example Class                                                                                      |\n| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |\n| `color`                | `'primary'`, `'link'`, `'info'`, `'success'`, `'warning'`, `'danger'`, `'black'`, `'black-bis'`, `'black-ter'`, `'grey-darker'`, `'grey-dark'`, `'grey'`, `'grey-light'`, `'grey-lighter'`, `'white'`, `'white-bis'`, `'white-ter'`, `'light'`, `'dark'`, `'inherit'`, `'current'` | `has-text-primary`, `has-text-grey-dark`, `has-text-inherit`                                                |\n| `backgroundColor`      | Same as `color`, plus the scheme values `'scheme-main'`, `'scheme-main-bis'`, `'scheme-main-ter'`, `'scheme-invert'`, `'scheme-invert-bis'`, `'scheme-invert-ter'`                                                                                                                 | `has-background-warning`; scheme values emit no class — they return as the `bulmaHelperStyles` inline style |\n| `colorShade`           | `'00'`, `'05'`, `'10'`, `'15'`, `'20'`, `'25'`, `'30'`, `'35'`, `'40'`, `'45'`, `'50'`, `'55'`, `'60'`, `'65'`, `'70'`, `'75'`, `'80'`, `'85'`, `'90'`, `'95'`, `'invert'`, `'light'`, `'dark'`, `'soft'`, `'bold'`, `'on-scheme'`                                                 | `has-text-primary-25`                                                                                       |\n| `backgroundColorShade` | `'00'`, `'05'`, `'10'`, `'15'`, `'20'`, `'25'`, `'30'`, `'35'`, `'40'`, `'45'`, `'50'`, `'55'`, `'60'`, `'65'`, `'70'`, `'75'`, `'80'`, `'85'`, `'90'`, `'95'`, `'invert'`, `'light'`, `'dark'`, `'soft'`, `'bold'`, `'on-scheme'`                                                 | `has-background-info-dark`                                                                                  |\n| `m`                    | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `m-4`, `m-auto`                                                                                             |\n| `mt`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `mt-2`                                                                                                      |\n| `mr`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `mr-6`                                                                                                      |\n| `mb`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `mb-0`                                                                                                      |\n| `ml`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `ml-auto`                                                                                                   |\n| `mx`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `mx-2`                                                                                                      |\n| `my`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `my-5`                                                                                                      |\n| `p`                    | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `p-3`, `p-auto`                                                                                             |\n| `pt`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `pt-1`                                                                                                      |\n| `pr`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `pr-6`                                                                                                      |\n| `pb`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `pb-0`                                                                                                      |\n| `pl`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `pl-4`                                                                                                      |\n| `px`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `px-1`                                                                                                      |\n| `py`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `py-6`                                                                                                      |\n| `gap`                  | `'0'..'8'` in half steps, or a number                                                                                                                                                                                                                                              | `is-gap-1.5`                                                                                                |\n| `columnGap`            | Same as `gap`                                                                                                                                                                                                                                                                      | `is-column-gap-4`                                                                                           |\n| `rowGap`               | Same as `gap`                                                                                                                                                                                                                                                                      | `is-row-gap-0.5`                                                                                            |\n| `gapless`              | `true`                                                                                                                                                                                                                                                                             | `is-gapless`                                                                                                |\n| `textSize`             | `'1'..'7'`                                                                                                                                                                                                                                                                         | `is-size-3`                                                                                                 |\n| `textAlign`            | `'centered'`, `'justified'`, `'left'`, `'right'`                                                                                                                                                                                                                                   | `has-text-centered`                                                                                         |\n| `textTransform`        | `'capitalized'`, `'lowercase'`, `'uppercase'`, `'italic'`                                                                                                                                                                                                                          | `is-uppercase`, `is-italic`                                                                                 |\n| `textWeight`           | `'light'`, `'normal'`, `'medium'`, `'semibold'`, `'bold'`                                                                                                                                                                                                                          | `has-text-weight-bold`                                                                                      |\n| `fontFamily`           | `'sans-serif'`, `'monospace'`, `'primary'`, `'secondary'`, `'code'`                                                                                                                                                                                                                | `is-family-monospace`                                                                                       |\n| `display`              | `'block'`, `'flex'`, `'inline'`, `'inline-block'`, `'inline-flex'`, `'grid'`, `'none'`                                                                                                                                                                                             | `is-flex`, `is-inline-block`, `is-grid`, `is-hidden`                                                        |\n| `visibility`           | `'hidden'`, `'sr-only'`, `'invisible'`                                                                                                                                                                                                                                             | `is-hidden`, `is-sr-only`, `is-invisible`                                                                   |\n| `flexDirection`        | `'row'`, `'row-reverse'`, `'column'`, `'column-reverse'`                                                                                                                                                                                                                           | `is-flex-direction-row`                                                                                     |\n| `flexWrap`             | `'nowrap'`, `'wrap'`, `'wrap-reverse'`                                                                                                                                                                                                                                             | `is-flex-wrap-nowrap`                                                                                       |\n| `justifyContent`       | `'flex-start'`, `'flex-end'`, `'center'`, `'space-between'`, `'space-around'`, `'space-evenly'`, `'start'`, `'end'`, `'left'`, `'right'`                                                                                                                                           | `is-justify-content-center`                                                                                 |\n| `alignContent`         | `'flex-start'`, `'flex-end'`, `'center'`, `'space-between'`, `'space-around'`, `'space-evenly'`, `'stretch'`                                                                                                                                                                       | `is-align-content-stretch`                                                                                  |\n| `alignItems`           | `'stretch'`, `'flex-start'`, `'flex-end'`, `'center'`, `'baseline'`, `'start'`, `'end'`                                                                                                                                                                                            | `is-align-items-center`                                                                                     |\n| `alignSelf`            | `'auto'`, `'flex-start'`, `'flex-end'`, `'center'`, `'baseline'`, `'stretch'`                                                                                                                                                                                                      | `is-align-self-center`                                                                                      |\n| `flexGrow`             | `'0'`, `'1'`, `'2'`, `'3'`, `'4'`, `'5'`                                                                                                                                                                                                                                           | `is-flex-grow-1`                                                                                            |\n| `flexShrink`           | `'0'`, `'1'`, `'2'`, `'3'`, `'4'`, `'5'`                                                                                                                                                                                                                                           | `is-flex-shrink-0`                                                                                          |\n| `float`                | `'left'`, `'right'`                                                                                                                                                                                                                                                                | `is-pulled-left`, `is-pulled-right`                                                                         |\n| `overflow`             | `'clipped'`, `'auto'`, `'clip'`, `'hidden'`, `'scroll'`, `'visible'`                                                                                                                                                                                                               | `is-clipped`, `is-overflow-auto`                                                                            |\n| `overflowX`            | `'auto'`, `'clip'`, `'hidden'`, `'scroll'`, `'visible'`                                                                                                                                                                                                                            | `is-overflow-x-auto`                                                                                        |\n| `overflowY`            | `'auto'`, `'clip'`, `'hidden'`, `'scroll'`, `'visible'`                                                                                                                                                                                                                            | `is-overflow-y-scroll`                                                                                      |\n| `overlay`              | `true`                                                                                                                                                                                                                                                                             | `is-overlay`                                                                                                |\n| `interaction`          | `'unselectable'`, `'clickable'`                                                                                                                                                                                                                                                    | `is-unselectable`                                                                                           |\n| `cursor`               | `'pointer'`, `'help'`                                                                                                                                                                                                                                                              | `is-clickable`, `is-cursor-help`                                                                            |\n| `radius`               | `'radiusless'`, `'small'`, `'normal'`, `'large'`, `'rounded'`                                                                                                                                                                                                                      | `is-radiusless`, `has-radius-large`                                                                         |\n| `shadow`               | `'shadowless'`                                                                                                                                                                                                                                                                     | `is-shadowless`                                                                                             |\n| `responsive`           | `'mobile'`, `'narrow'`                                                                                                                                                                                                                                                             | `is-mobile`, `is-narrow`                                                                                    |\n| `viewport`             | `'mobile'`, `'tablet'`, `'tablet-only'`, `'touch'`, `'desktop'`, `'desktop-only'`, `'widescreen'`, `'widescreen-only'`, `'fullhd'`                                                                                                                                                 | Adds viewport suffix to supported properties                                                                |\n| `skeleton`             | `true`                                                                                                                                                                                                                                                                             | `is-skeleton`                                                                                               |\n| `clearfix`             | `true`                                                                                                                                                                                                                                                                             | `is-clearfix`                                                                                               |\n| `pos`                  | `'absolute'`, `'fixed'`, `'relative'`, `'static'`, `'sticky'`                                                                                                                                                                                                                      | `is-position-sticky`                                                                                        |\n| `relative`             | `true`                                                                                                                                                                                                                                                                             | `is-relative` (ignored when `pos` is set)                                                                   |\n| `fullHeight`           | `true`                                                                                                                                                                                                                                                                             | `is-full-height`                                                                                            |\n| `aspectRatio`          | `'1by1'`, `'5by4'`, `'4by3'`, `'3by2'`, `'5by3'`, `'16by9'`, `'2by1'`, `'3by1'`, `'4by5'`, `'3by4'`, `'2by3'`, `'3by5'`, `'9by16'`, `'1by2'`, `'1by3'`                                                                                                                             | `is-aspect-ratio-16by9`                                                                                     |\n\n### Viewport-Specific Properties\n\nThe following properties allow you to set different values for each viewport breakpoint:\n\n| Prop                       | Type / Example Value                                                                                                               | Effect / Example Class                                                                    |\n| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |\n| `displayMobile`            | `'block'`, `'flex'`, `'inline'`, `'grid'`, `'none'`, etc.                                                                          | `is-block-mobile`, `is-flex-mobile`, `is-hidden-mobile`                                   |\n| `displayTablet`            | Same as above                                                                                                                      | `is-block-tablet`, `is-flex-tablet`, `is-hidden-tablet`                                   |\n| `displayTabletOnly`        | Same as above                                                                                                                      | `is-block-tablet-only`, `is-flex-tablet-only`, `is-hidden-tablet-only`                    |\n| `displayTouch`             | Same as above                                                                                                                      | `is-block-touch`, `is-flex-touch`, `is-hidden-touch`                                      |\n| `displayDesktop`           | Same as above                                                                                                                      | `is-block-desktop`, `is-flex-desktop`, `is-hidden-desktop`                                |\n| `displayDesktopOnly`       | Same as above                                                                                                                      | `is-block-desktop-only`, `is-flex-desktop-only`, `is-hidden-desktop-only`                 |\n| `displayWidescreen`        | Same as above                                                                                                                      | `is-block-widescreen`, `is-flex-widescreen`                                               |\n| `displayWidescreenOnly`    | Same as above                                                                                                                      | `is-block-widescreen-only`, `is-flex-widescreen-only`                                     |\n| `displayFullhd`            | Same as above                                                                                                                      | `is-block-fullhd`, `is-flex-fullhd`                                                       |\n| `textSizeMobile`           | `'1'..'7'`                                                                                                                         | `is-size-3-mobile`, `is-size-5-mobile`                                                    |\n| `textSizeTablet`           | `'1'..'7'`                                                                                                                         | `is-size-3-tablet`, `is-size-5-tablet`                                                    |\n| `textSizeDesktop`          | `'1'..'7'`                                                                                                                         | `is-size-3-desktop`, `is-size-5-desktop`                                                  |\n| `textSizeWidescreen`       | `'1'..'7'`                                                                                                                         | `is-size-3-widescreen`, `is-size-5-widescreen`                                            |\n| `textSizeFullhd`           | `'1'..'7'`                                                                                                                         | `is-size-3-fullhd`, `is-size-5-fullhd`                                                    |\n| `textAlignMobile`          | `'centered'`, `'left'`, `'right'`, `'justified'`                                                                                   | `has-text-centered-mobile`, `has-text-left-mobile`                                        |\n| `textAlignTablet`          | Same as above                                                                                                                      | `has-text-centered-tablet`, `has-text-left-tablet`                                        |\n| `textAlignDesktop`         | Same as above                                                                                                                      | `has-text-centered-desktop`, `has-text-left-desktop`                                      |\n| `textAlignWidescreen`      | Same as above                                                                                                                      | `has-text-centered-widescreen`, `has-text-left-widescreen`                                |\n| `textAlignFullhd`          | Same as above                                                                                                                      | `has-text-centered-fullhd`, `has-text-left-fullhd`                                        |\n| `visibilityMobile`         | `'hidden'`, `'sr-only'`, `'invisible'`                                                                                             | `is-hidden-mobile`, `is-sr-only-mobile`, `is-invisible-mobile`                            |\n| `visibilityTablet`         | Same as above                                                                                                                      | `is-hidden-tablet`, `is-sr-only-tablet`, `is-invisible-tablet`                            |\n| `visibilityTabletOnly`     | Same as above                                                                                                                      | `is-hidden-tablet-only`, `is-sr-only-tablet-only`, `is-invisible-tablet-only`             |\n| `visibilityTouch`          | Same as above                                                                                                                      | `is-hidden-touch`, `is-sr-only-touch`, `is-invisible-touch`                               |\n| `visibilityDesktop`        | Same as above                                                                                                                      | `is-hidden-desktop`, `is-sr-only-desktop`, `is-invisible-desktop`                         |\n| `visibilityDesktopOnly`    | Same as above                                                                                                                      | `is-hidden-desktop-only`, `is-sr-only-desktop-only`, `is-invisible-desktop-only`          |\n| `visibilityWidescreen`     | Same as above                                                                                                                      | `is-hidden-widescreen`, `is-sr-only-widescreen`, `is-invisible-widescreen`                |\n| `visibilityWidescreenOnly` | Same as above                                                                                                                      | `is-hidden-widescreen-only`, `is-sr-only-widescreen-only`, `is-invisible-widescreen-only` |\n| `visibilityFullhd`         | Same as above                                                                                                                      | `is-hidden-fullhd`, `is-sr-only-fullhd`, `is-invisible-fullhd`                            |\n| `responsive`               | `'mobile'`, `'narrow'`                                                                                                             | `is-mobile`, `is-narrow`                                                                  |\n| `clearfix`                 | `true`                                                                                                                             | `is-clearfix`                                                                             |\n| `relative`                 | `true`                                                                                                                             | `is-relative`                                                                             |\n| `viewport`                 | `'mobile'`, `'tablet'`, `'tablet-only'`, `'touch'`, `'desktop'`, `'desktop-only'`, `'widescreen'`, `'widescreen-only'`, `'fullhd'` | Adds suffix, e.g. `-mobile`, `-desktop`, `-touch`, `-tablet-only`                         |\n\n---\n\n### Full TypeScript Definition\n\n`BulmaClassesProps` is composed from the six group interfaces, each of which is also exported (along with the shared `BulmaViewportProps` and `BulmaDisplayProps` types) and accepted by the corresponding [mini hook](#composable-mini-hooks). The hook's parameter is the widened `BulmaClassesPropsWithScheme` — identical to `BulmaClassesProps` except that `backgroundColor` also accepts the six `validSchemeColors` values (`BulmaColorPropsWithScheme` is the color-group equivalent, accepted by `useColorClasses` and `useColorStyles`):\n\n```ts\nexport interface BulmaClassesProps\n  extends\n    BulmaColorProps,\n    BulmaSpacingProps,\n    BulmaTypographyProps,\n    BulmaVisibilityProps,\n    BulmaFlexboxProps,\n    BulmaOtherProps {}\n\nexport type BulmaViewportProps =\n  | 'mobile'\n  | 'tablet'\n  | 'tablet-only'\n  | 'touch'\n  | 'desktop'\n  | 'desktop-only'\n  | 'widescreen'\n  | 'widescreen-only'\n  | 'fullhd';\n\nexport type BulmaDisplayProps =\n  | 'block'\n  | 'flex'\n  | 'inline'\n  | 'inline-block'\n  | 'inline-flex'\n  | 'grid'\n  | 'none';\n\nexport interface BulmaColorProps {\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'black-bis'\n    | 'black-ter'\n    | 'grey-darker'\n    | 'grey-dark'\n    | 'grey'\n    | 'grey-light'\n    | 'grey-lighter'\n    | 'white'\n    | 'white-bis'\n    | 'white-ter'\n    | 'light'\n    | 'dark'\n    | 'inherit'\n    | 'current';\n  colorShade?:\n    | '00'\n    | '05'\n    | '10'\n    | '15'\n    | '20'\n    | '25'\n    | '30'\n    | '35'\n    | '40'\n    | '45'\n    | '50'\n    | '55'\n    | '60'\n    | '65'\n    | '70'\n    | '75'\n    | '80'\n    | '85'\n    | '90'\n    | '95'\n    | 'invert'\n    | 'light'\n    | 'dark'\n    | 'soft'\n    | 'bold'\n    | 'on-scheme';\n  backgroundColor?: BulmaColorProps['color'];\n  backgroundColorShade?: BulmaColorProps['colorShade'];\n}\n\n// The scheme-aware input accepted by useBulmaClasses, useColorClasses,\n// and useColorStyles ((typeof validSchemeColors)[number] is\n// 'scheme-main' | 'scheme-main-bis' | 'scheme-main-ter'\n// | 'scheme-invert' | 'scheme-invert-bis' | 'scheme-invert-ter'):\nexport type BulmaColorPropsWithScheme = Omit<\n  BulmaColorProps,\n  'backgroundColor'\n> & {\n  backgroundColor?:\n    BulmaColorProps['backgroundColor'] | (typeof validSchemeColors)[number];\n};\n\nexport type BulmaClassesPropsWithScheme = Omit<\n  BulmaClassesProps,\n  keyof BulmaColorProps\n> &\n  BulmaColorPropsWithScheme;\n\nexport interface BulmaSpacingProps {\n  m?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  mt?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  mr?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  mb?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  ml?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  mx?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  my?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  p?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  pt?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  pr?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  pb?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  pl?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  px?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  py?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  gap?: BulmaGapStep;\n  columnGap?: BulmaGapStep;\n  rowGap?: BulmaGapStep;\n  gapless?: boolean;\n}\n\n// '0' to '8' in half steps ('0', '0.5', '1', … '7.5', '8'), as strings or numbers\nexport type BulmaGapStep =\n  | '0'\n  | '0.5'\n  | '1'\n  | '1.5'\n  | '2'\n  | '2.5'\n  | '3'\n  | '3.5'\n  | '4'\n  | '4.5'\n  | '5'\n  | '5.5'\n  | '6'\n  | '6.5'\n  | '7'\n  | '7.5'\n  | '8'\n  | 0\n  | 0.5\n  | 1\n  | 1.5\n  | 2\n  | 2.5\n  | 3\n  | 3.5\n  | 4\n  | 4.5\n  | 5\n  | 5.5\n  | 6\n  | 6.5\n  | 7\n  | 7.5\n  | 8;\n\nexport interface BulmaTypographyProps {\n  textSize?: '1' | '2' | '3' | '4' | '5' | '6' | '7';\n  textAlign?: 'centered' | 'justified' | 'left' | 'right';\n  textTransform?: 'capitalized' | 'lowercase' | 'uppercase' | 'italic';\n  textWeight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';\n  fontFamily?: 'sans-serif' | 'monospace' | 'primary' | 'secondary' | 'code';\n  viewport?: BulmaViewportProps;\n  textSizeMobile?: '1' | '2' | '3' | '4' | '5' | '6' | '7';\n  textSizeTablet?: '1' | '2' | '3' | '4' | '5' | '6' | '7';\n  textSizeDesktop?: '1' | '2' | '3' | '4' | '5' | '6' | '7';\n  textSizeWidescreen?: '1' | '2' | '3' | '4' | '5' | '6' | '7';\n  textSizeFullhd?: '1' | '2' | '3' | '4' | '5' | '6' | '7';\n  textAlignMobile?: 'centered' | 'justified' | 'left' | 'right';\n  textAlignTablet?: 'centered' | 'justified' | 'left' | 'right';\n  textAlignDesktop?: 'centered' | 'justified' | 'left' | 'right';\n  textAlignWidescreen?: 'centered' | 'justified' | 'left' | 'right';\n  textAlignFullhd?: 'centered' | 'justified' | 'left' | 'right';\n}\n\nexport interface BulmaVisibilityProps {\n  display?: BulmaDisplayProps;\n  visibility?: 'hidden' | 'sr-only' | 'invisible';\n  viewport?: BulmaViewportProps;\n  displayMobile?: BulmaDisplayProps;\n  displayTablet?: BulmaDisplayProps;\n  displayTabletOnly?: BulmaDisplayProps;\n  displayTouch?: BulmaDisplayProps;\n  displayDesktop?: BulmaDisplayProps;\n  displayDesktopOnly?: BulmaDisplayProps;\n  displayWidescreen?: BulmaDisplayProps;\n  displayWidescreenOnly?: BulmaDisplayProps;\n  displayFullhd?: BulmaDisplayProps;\n  visibilityMobile?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityTablet?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityTabletOnly?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityTouch?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityDesktop?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityDesktopOnly?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityWidescreen?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityWidescreenOnly?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityFullhd?: 'hidden' | 'sr-only' | 'invisible';\n}\n\nexport interface BulmaFlexboxProps {\n  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';\n  justifyContent?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n    | 'start'\n    | 'end'\n    | 'left'\n    | 'right';\n  alignContent?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n    | 'stretch';\n  alignItems?:\n    | 'stretch'\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'baseline'\n    | 'start'\n    | 'end';\n  alignSelf?:\n    'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n  flexGrow?: '0' | '1' | '2' | '3' | '4' | '5';\n  flexShrink?: '0' | '1' | '2' | '3' | '4' | '5';\n}\n\nexport interface BulmaOtherProps {\n  float?: 'left' | 'right';\n  overflow?: 'clipped' | 'auto' | 'clip' | 'hidden' | 'scroll' | 'visible';\n  overflowX?: 'auto' | 'clip' | 'hidden' | 'scroll' | 'visible';\n  overflowY?: 'auto' | 'clip' | 'hidden' | 'scroll' | 'visible';\n  overlay?: boolean;\n  interaction?: 'unselectable' | 'clickable';\n  cursor?: 'pointer' | 'help';\n  radius?: 'radiusless' | 'small' | 'normal' | 'large' | 'rounded';\n  shadow?: 'shadowless';\n  responsive?: 'mobile' | 'narrow';\n  skeleton?: boolean;\n  clearfix?: boolean;\n  pos?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';\n  relative?: boolean;\n  fullHeight?: boolean;\n  aspectRatio?:\n    | '1by1'\n    | '5by4'\n    | '4by3'\n    | '3by2'\n    | '5by3'\n    | '16by9'\n    | '2by1'\n    | '3by1'\n    | '4by5'\n    | '3by4'\n    | '2by3'\n    | '3by5'\n    | '9by16'\n    | '1by2'\n    | '1by3';\n}\n```\n\n---\n\n## Responsive Design\n\n### Global Viewport Property (Legacy)\n\nThe `viewport` prop applies a single viewport modifier to ALL properties that support it:\n\n```tsx\nconst { bulmaHelperClasses } = useBulmaClasses({\n  color: 'primary',\n  textAlign: 'centered',\n  textSize: '4',\n  viewport: 'mobile', // Applies -mobile to ALL properties\n});\n// Result: has-text-primary-mobile has-text-centered-mobile is-size-4-mobile\n```\n\n### Viewport-Specific Properties (Recommended)\n\nViewport-specific properties allow you to set **different values for each viewport**:\n\n```tsx\nconst { bulmaHelperClasses } = useBulmaClasses({\n  // Different text sizes for each viewport\n  textSizeMobile: '6', // Small on mobile\n  textSizeTablet: '5', // Medium on tablet\n  textSizeDesktop: '4', // Large on desktop\n\n  // Different text alignment for each viewport\n  textAlignMobile: 'centered', // Center on mobile\n  textAlignDesktop: 'left', // Left align on desktop\n\n  // Different visibility for each viewport\n  visibilityMobile: 'hidden', // Hidden on mobile\n  visibilityTablet: 'invisible', // Invisible on tablet\n});\n// Result: is-size-6-mobile is-size-5-tablet is-size-4-desktop\n//         has-text-centered-mobile has-text-left-desktop is-hidden-mobile is-invisible-tablet\n```\n\n### Breakpoint Reference\n\nBulma's responsive breakpoints:\n\n- **mobile**: up to 768px\n- **tablet**: 769px and above\n- **tablet-only**: 769px - 1023px (excludes desktop and above)\n- **touch**: up to 1023px (mobile + tablet combined — the breakpoint most often used to hide desktop-only chrome)\n- **desktop**: 1024px and above\n- **desktop-only**: 1024px - 1215px (excludes widescreen and above)\n- **widescreen**: 1216px and above\n- **widescreen-only**: 1216px - 1407px (excludes fullhd)\n- **fullhd**: 1408px and above\n\n`display`/`visibility` are the only property families with `*Touch`/`*TabletOnly`/`*DesktopOnly`/`*WidescreenOnly` props; other viewport-aware properties (`textSize*`, `textAlign*`) only go through `mobile`/`tablet`/`desktop`/`widescreen`/`fullhd`, though the generic `viewport` prop itself accepts all nine values for any property that reads it.\n\n### Properties That Support Viewport Modifiers\n\nOnly certain properties support responsive variants:\n\n**✅ Support Viewport Modifiers:**\n\n- Text size (`textSize`, `textSizeMobile`, `textSizeTablet`, etc.)\n- Text alignment (`textAlign`, `textAlignMobile`, `textAlignTablet`, etc.)\n- Display (`display`, `displayMobile`, `displayTablet`, `displayTabletOnly`, `displayTouch`, `displayDesktop`, `displayDesktopOnly`, `displayWidescreen`, `displayWidescreenOnly`, `displayFullhd`)\n- Visibility (`visibility`, `visibilityMobile`, `visibilityTablet`, `visibilityTabletOnly`, `visibilityTouch`, `visibilityDesktop`, `visibilityDesktopOnly`, `visibilityWidescreen`, `visibilityWidescreenOnly`, `visibilityFullhd`)\n\n**❌ Do NOT Support Viewport Modifiers:**\n\n- Spacing (`m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my`, `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py`)\n- Background colors (`backgroundColor`)\n- Flexbox properties (`flexDirection`, `flexWrap`, `justifyContent`, etc.)\n- Other helpers (`float`, `overflow`, `pos`, `radius`, `shadow`, `aspectRatio`, etc.)\n\n---\n\n## Notes\n\n- Any prop not recognized as a Bulma helper prop is passed through in `rest`.\n- Responsive helper props (`viewport`) suffix classes with the breakpoint (e.g., `is-size-3-mobile`).\n- You can use in combination with [`classNames`](./classnames.md) for more advanced use.\n\n---\n\n## See Also\n\n- [classNames helper](./classnames.md)\n- [Bulma Classes Reference](https://bulma.io/documentation/helpers/)\n- [Storybook: useBulmaClasses Demo](https://bestax.io/storybook/?path=/story/helpers-usebulmaclasses--default)",
+  "doc": "# useBulmaClasses\n\n## Overview\n\n`useBulmaClasses` is a custom React hook that generates Bulma helper class strings from a set of props. It makes it easy to apply color, spacing, alignment, typography, flexbox, and other Bulma utility classes to your components in a type-safe, composable way. It also separates out any non-helper props for direct use on elements.\n\n---\n\n## Import\n\n```tsx\nimport { useBulmaClasses } from '@allxsmith/bestax-bulma';\n```\n\n---\n\n## Usage\n\n:::info Container components pad themselves\nContainer components like `Box`, `Notification`, `Message`, and `Card` ship with Bulma's standard, pleasant padding and stack with sensible default spacing. The examples below only add margin or padding props when spacing itself is what's being demonstrated.\n:::\n\n### Basic Example\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: 'link',\n    backgroundColor: 'primary',\n    p: '4',\n    textAlign: 'centered',\n    id: 'card1',\n  });\n\n  return JSON.stringify({ bulmaHelperClasses, rest });\n  // bulmaHelperClasses: 'has-text-link has-background-primary p-4 has-text-centered'\n  // rest: { id: 'card1' }\n}\n```\n\nApply to your component:\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: 'link',\n    backgroundColor: 'primary',\n    p: '4',\n    textAlign: 'centered',\n    id: 'card1',\n  });\n\n  return (\n    <div className={classNames('custom-card', bulmaHelperClasses)} {...rest}>\n      Card content\n    </div>\n  );\n}\n```\n\n---\n\n### Responsive Props\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses } = useBulmaClasses({\n    color: 'link',\n    backgroundColor: 'primary',\n    m: '2',\n    textAlign: 'centered',\n    viewport: 'mobile',\n  });\n  return JSON.stringify({ bulmaHelperClasses });\n  // bulmaHelperClasses: 'has-text-link-mobile m-2-mobile has-text-centered-mobile'\n}\n```\n\n---\n\n### Touch and `-only` Viewports\n\nBeyond the five breakpoint props, `display`/`visibility` also take `touch` (mobile + tablet combined — the breakpoint most often used to hide desktop-only chrome) and the `-only` variants (`tablet-only`, `desktop-only`, `widescreen-only`), each isolating a single breakpoint band:\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses } = useBulmaClasses({\n    displayTouch: 'none',\n    displayDesktopOnly: 'flex',\n  });\n  return JSON.stringify({ bulmaHelperClasses });\n  // bulmaHelperClasses: 'is-hidden-touch is-flex-desktop-only'\n}\n```\n\n```tsx live\n<Buttons>\n  <Button visibilityTouch=\"hidden\">Hidden on mobile + tablet</Button>\n  <Button visibilityDesktopOnly=\"invisible\">Invisible on desktop only</Button>\n  <Button>Always visible</Button>\n</Buttons>\n```\n\nThe legacy `viewport` prop widens to all nine values too, so `useBulmaClasses({ display: 'flex', viewport: 'touch' })` produces `is-flex-touch`. One exception: Bulma ships no `is-size-*` classes for the three `-only` bands, so `textSize` combined with a `tablet-only`/`desktop-only`/`widescreen-only` `viewport` degrades to the base `is-size-N` (rather than emitting a dead `is-size-N-tablet-only`); `touch` and the five breakpoints are unaffected.\n\n---\n\n### Grid Display\n\n`display` also accepts `'grid'`, emitting `is-grid`:\n\n```tsx live\n<Box display=\"grid\">\n  <Notification color=\"primary\" m=\"1\">\n    Cell 1\n  </Notification>\n  <Notification color=\"info\" m=\"1\">\n    Cell 2\n  </Notification>\n</Box>\n```\n\n---\n\n### With Flexbox Helpers\n\nFlexbox properties are divided into two categories:\n\n#### Container Properties\n\nThese properties apply to elements with `display: flex` or `display: inline-flex`:\n\n- `flexDirection` - Direction of flex items\n- `flexWrap` - Whether items wrap\n- `justifyContent` - Alignment along main axis\n- `alignContent` - Alignment of wrapped lines\n- `alignItems` - Alignment along cross axis\n\n#### Item Properties\n\nThese properties apply to flex items (children of flex containers) and **do not require** the element itself to have `display: flex`:\n\n- `alignSelf` - Override container's alignItems for this item\n- `flexGrow` - How much the item should grow\n- `flexShrink` - How much the item should shrink\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses } = useBulmaClasses({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '4',\n  });\n  return JSON.stringify({ bulmaHelperClasses });\n  // bulmaHelperClasses: 'is-gap-4 is-flex is-flex-direction-column is-align-items-center is-justify-content-center'\n}\n```\n\nExample with flex items:\n\n```tsx\n// Container with display flex\n<Box display=\"flex\" alignItems=\"center\">\n  {/* Items don't need display flex to use alignSelf, flexGrow, flexShrink */}\n  <Button alignSelf=\"flex-start\">Start</Button>\n  <Button alignSelf=\"center\" flexGrow=\"1\">\n    Center & Grow\n  </Button>\n  <Button alignSelf=\"flex-end\" flexShrink=\"0\">\n    End & No Shrink\n  </Button>\n</Box>\n```\n\n---\n\n### Using with Components\n\n:::note These are illustrations, not replacements\nThe snippets below rebuild simplified components by hand purely to show how `useBulmaClasses` fits inside one. In a real app, use the library's own [Columns / Column](../columns/columns.md) and [Card](../components/card.md) components — they already wire up `useBulmaClasses` (plus prefixes, modifiers, and more) for you.\n:::\n\n#### Columns\n\n`MyColumns` forwards all of its props to `useBulmaClasses` — the `textAlign` and `textTransform` helper props below flow through `props` into the hook (producing `has-text-centered is-uppercase`), while anything the hook doesn't recognize comes back in `rest` and lands on the `<div>`:\n\n```tsx live\nimport type { BulmaClassesProps } from '@allxsmith/bestax-bulma';\n\nfunction example() {\n  function MyColumns({\n    children,\n    ...props\n  }: BulmaClassesProps & React.ComponentPropsWithoutRef<'div'>) {\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    return (\n      <div className={classNames('columns', bulmaHelperClasses)} {...rest}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MyColumns textAlign=\"centered\" textTransform=\"uppercase\">\n      <div className=\"column\">\n        <Notification color=\"primary\">Left</Notification>\n      </div>\n      <div className=\"column\">\n        <Notification color=\"info\">Right</Notification>\n      </div>\n    </MyColumns>\n  );\n}\n```\n\n#### Card\n\n```tsx live\nfunction example() {\n  const props = {};\n\n  const textColor = 'white';\n  const bgColor = 'primary';\n  const hasShadow = true;\n  const className = 'custom-card';\n  const children = <p>Making a custom card</p>;\n  const p = '4';\n\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    p,\n    ...props,\n  });\n  const cardClasses = classNames('card', className, bulmaHelperClasses, {\n    'is-shadowless': !hasShadow,\n  });\n  return (\n    <div className={cardClasses} {...rest}>\n      {children}\n    </div>\n  );\n}\n```\n\n---\n\n### Colors\n\nUse the `color` prop to apply Bulma color classes. Here, each button demonstrates a different color:\n\n```tsx live\n<Buttons>\n  <Button color=\"primary\">Primary</Button>\n  <Button color=\"link\">Link</Button>\n  <Button color=\"info\">Info</Button>\n  <Button color=\"success\">Success</Button>\n  <Button color=\"warning\">Warning</Button>\n  <Button color=\"danger\">Danger</Button>\n  <Button color=\"black\">Black</Button>\n  <Button color=\"white\">White</Button>\n</Buttons>\n```\n\n### Background Color\n\nComponents expose this helper as `bgColor` (the hook's own parameter is `backgroundColor`). Pair it with a text color that keeps the label readable on each background:\n\n```tsx live\n<Columns isMultiline>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"primary\" textColor=\"white\">\n      Primary\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"link\" textColor=\"white\">\n      Link\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"info\" textColor=\"white\">\n      Info\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"success\" textColor=\"white\">\n      Success\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"warning\" textColor=\"black\">\n      Warning\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"danger\" textColor=\"white\">\n      Danger\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"black\" textColor=\"white\">\n      Black\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"white\" textColor=\"black\">\n      White\n    </Box>\n  </Column>\n</Columns>\n```\n\n### Scheme Backgrounds and `bulmaHelperStyles`\n\nThe hook returns a third member, `bulmaHelperStyles`, alongside `bulmaHelperClasses` and `rest`. It is `undefined` for every input except a scheme `backgroundColor` (`scheme-main`, `scheme-main-bis`, `scheme-main-ter`, `scheme-invert`, `scheme-invert-bis`, `scheme-invert-ter`): Bulma ships no `has-background-scheme-*` classes, so those values emit no class and instead surface here as a dark-mode-safe inline style tracking Bulma's scheme CSS variables.\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    color: 'primary',\n    backgroundColor: 'scheme-main-bis',\n    id: 'band1',\n  });\n\n  return JSON.stringify({ bulmaHelperClasses, bulmaHelperStyles, rest });\n  // bulmaHelperClasses: 'has-text-primary'\n  // bulmaHelperStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }\n  // rest: { id: 'band1' }\n}\n```\n\nPut it on your element with `mergeBulmaStyles`, which merges the helper style with a user-supplied `style` prop (the user style wins, and the result is `undefined` when both are absent so the DOM stays untouched):\n\n```tsx live\nfunction example() {\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    backgroundColor: 'scheme-main-bis',\n    p: '4',\n  });\n\n  return (\n    <div\n      {...rest}\n      className={classNames('custom-band', bulmaHelperClasses)}\n      style={mergeBulmaStyles(bulmaHelperStyles, undefined)}\n    >\n      A dark-mode-safe surface with zero custom CSS\n    </div>\n  );\n}\n```\n\nIn a real component, destructure `style` out of your own props and pass it as `mergeBulmaStyles`'s second argument (as `Section` does) — if `style` stays in the object you spread, whichever comes later in JSX silently replaces the other instead of merging.\n\n### Color Shade\n\n`colorShade` refines the **text color** — it pairs with the hook's `color` prop (exposed as `textColor` on components, where `color` is the component's own modifier). Here, each line steps through the primary palette:\n\n```tsx live\n<>\n  <Paragraph textColor=\"primary\" colorShade=\"10\" textWeight=\"semibold\">\n    Primary 10\n  </Paragraph>\n  <Paragraph textColor=\"primary\" colorShade=\"30\" textWeight=\"semibold\">\n    Primary 30\n  </Paragraph>\n  <Paragraph textColor=\"primary\" colorShade=\"60\" textWeight=\"semibold\">\n    Primary 60\n  </Paragraph>\n  <Paragraph textColor=\"primary\" colorShade=\"90\" textWeight=\"semibold\">\n    Primary 90\n  </Paragraph>\n  <Paragraph textColor=\"primary\" colorShade=\"invert\" textWeight=\"semibold\">\n    Primary Invert\n  </Paragraph>\n</>\n```\n\n### Background Color Shade\n\nBackground shades use their own prop: `backgroundColorShade` pairs with `backgroundColor`, independently of `colorShade` (which pairs with the text color). Low shade numbers are dark and high numbers are light, so dark shades get light text and light shades get dark text to keep each label readable:\n\n```tsx live\n<Columns isMultiline>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"primary\" backgroundColorShade=\"10\" textColor=\"white\">\n      Primary 10\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"primary\" backgroundColorShade=\"30\" textColor=\"white\">\n      Primary 30\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"primary\" backgroundColorShade=\"60\" textColor=\"black\">\n      Primary 60\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"primary\" backgroundColorShade=\"90\" textColor=\"black\">\n      Primary 90\n    </Box>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Box bgColor=\"primary\" backgroundColorShade=\"invert\" textColor=\"white\">\n      Primary Invert\n    </Box>\n  </Column>\n</Columns>\n```\n\nBecause the two shade props are independent, you can shade the text and the background at the same time — a dark background shade with a light text shade of the same color reads well in both themes:\n\n```tsx live\n<Box\n  bgColor=\"primary\"\n  backgroundColorShade=\"15\"\n  textColor=\"primary\"\n  colorShade=\"85\"\n>\n  Primary text shade 85 on a primary background shade 15\n</Box>\n```\n\n### Margin\n\nUse margin props to add spacing. Here, margin is applied to buttons, and to a row of buttons using the `Buttons` component:\n\n```tsx live\n<>\n  <Buttons>\n    <Button>Left</Button>\n    <Button m=\"4\">Margin 4</Button>\n    <Button>Right</Button>\n  </Buttons>\n  <Buttons mt=\"5\" mb=\"5\">\n    <Button>Top/Bottom Margin</Button>\n    <Button>Row 2</Button>\n  </Buttons>\n</>\n```\n\n### Gap\n\n`gap` puts space between the children of a flex or grid container, and `columnGap` and `rowGap` set one axis. Each whole step is 0.5rem, so `gap=\"2\"` is 1rem and `gap=\"8\"` is 4rem, with half steps such as `\"1.5\"` between them. That is not the margin scale, where `m=\"2\"` is 0.5rem. A step can also be written as a number (`gap={2}`).\n\nThe helpers set the CSS `gap`, which does nothing unless the element lays its children out as flex or grid. Pair them with `display=\"flex\"` or `display=\"grid\"`, or use them on a component that already is one, such as `Buttons` or `Tags`, where they replace the spacing Bulma gives it:\n\n```tsx live\n<>\n  <Block display=\"flex\" flexWrap=\"wrap\" gap=\"2\">\n    <Tag color=\"primary\">One</Tag>\n    <Tag color=\"primary\">Two</Tag>\n    <Tag color=\"primary\">Three</Tag>\n  </Block>\n  <Block display=\"flex\" flexDirection=\"column\" gap=\"0.5\">\n    <Tag color=\"info\">A column</Tag>\n    <Tag color=\"info\">with a half step</Tag>\n  </Block>\n  <Buttons gap=\"1\">\n    <Button>Tighter</Button>\n    <Button>than Bulma's</Button>\n    <Button>default</Button>\n  </Buttons>\n</>\n```\n\n`gapless` removes the gap, the shortcut for `gap=\"0\"`; when both are set, `gap` wins. `columnGap` and `rowGap` win on their own axis over `gap` and `gapless`, so `gap=\"4\" rowGap=\"1\"` spaces the columns 2rem apart and the rows 0.5rem.\n\n`Grid` takes `gap`, `columnGap` and `rowGap` as its own props and renders the same classes. `Columns` keeps its own `gap`, the columns gutter, which takes whole steps; see [Columns](../columns/columns.md).\n\n### Text Size\n\nApply `textSize` to Notifications to illustrate different sizes:\n\n```tsx live\n<>\n  <Notification textSize=\"1\">Size 1</Notification>\n  <Notification textSize=\"3\">Size 3</Notification>\n  <Notification textSize=\"5\">Size 5</Notification>\n  <Notification textSize=\"7\">Size 7</Notification>\n</>\n```\n\n### Text Align\n\nApply `textAlign` to a Box to illustrate text alignment:\n\n```tsx live\n<>\n  <Box textAlign=\"centered\">Centered text</Box>\n  <Box textAlign=\"right\">Right aligned text</Box>\n  <Box textAlign=\"left\">Left aligned text</Box>\n</>\n```\n\n### Text Transform\n\nApply `textTransform` to a Content tag with a paragraph of the Declaration of Independence:\n\n```tsx live\n<>\n  <Box>\n    <Content textTransform=\"uppercase\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content textTransform=\"lowercase\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content textTransform=\"capitalized\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content textTransform=\"italic\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n</>\n```\n\n### Text Weight\n\nApply `textWeight` to Content tags to illustrate different font weights:\n\n```tsx live\n<>\n  <Box>\n    <Content textWeight=\"light\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content textWeight=\"normal\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content textWeight=\"medium\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content textWeight=\"bold\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n</>\n```\n\n### Font Family\n\nUse Content blocks with different font families:\n\n```tsx live\n<>\n  <Box>\n    <Content fontFamily=\"sans-serif\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content fontFamily=\"monospace\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content fontFamily=\"primary\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content fontFamily=\"secondary\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n  <Box>\n    <Content fontFamily=\"code\">\n      <p>\n        We hold these truths to be self-evident, that all men are created\n        equal...\n      </p>\n    </Content>\n  </Box>\n</>\n```\n\n### Visibility\n\nShow three buttons, one hidden, one screen-reader only:\n\n```tsx live\n<Buttons>\n  <Button visibility=\"hidden\">Hidden</Button>\n  <Button visibility=\"sr-only\">Screen Reader Only</Button>\n  <Button>Visible</Button>\n</Buttons>\n```\n\n### Overflow\n\nShow a Box with clipped overflow:\n\n```tsx live\n<Box overflow=\"clipped\" style={{ width: 200, height: 50 }}>\n  This is a very long line of text that will be clipped and not overflow the\n  box.\n</Box>\n```\n\n`overflow` also takes the CSS keywords Bulma has helpers for (`auto`, `clip`, `hidden`, `scroll`, `visible`), and `overflowX` and `overflowY` set one axis. Beside `overflow`, an axis prop wins on its own axis and `overflow` sets the other, with `clipped` counting as `hidden`, so `overflow=\"hidden\" overflowY=\"auto\"` clips sideways and scrolls down.\n\nHere an aspect ratio fixes the height and the list scrolls inside it. A region that scrolls needs to be reachable from the keyboard, so the example gives it `tabIndex={0}`, a `region` role and a name.\n\n```tsx live\n<Box\n  aspectRatio=\"3by1\"\n  overflowY=\"auto\"\n  tabIndex={0}\n  role=\"region\"\n  aria-label=\"Scrolling list\"\n>\n  {Array.from({ length: 20 }, (_, i) => (\n    <p key={i}>Line {i + 1} of a list longer than the box.</p>\n  ))}\n</Box>\n```\n\nWithout `overflowY` the box would grow to fit the list, because an aspect ratio gives way to content that does not fit.\n\n### Overlay\n\n`overlay` is `position: absolute` with `top`, `right`, `bottom` and `left` at 0, so it covers the nearest positioned ancestor. The [position](#position) helpers set `position` with `!important`, so a `pos` or `relative` beside `overlay` replaces the `absolute` and keeps the zero offsets. `overlay pos=\"fixed\"` covers the viewport instead. `sticky`, `relative` and `static` put the element back in the normal flow, where it covers nothing, and a sticky one sticks at every edge of its scroll container.\n\nShow an overlay (toggle with button click):\n\n```tsx\nfunction OverlayExample() {\n  const [show, setShow] = useState(false);\n  return (\n    <Box overlay={show}>\n      <Button onClick={() => setShow(s => !s)}>\n        {show ? 'Hide Overlay' : 'Show Overlay'}\n      </Button>\n    </Box>\n  );\n}\n```\n\n### Interaction\n\nShow text in a Box with `unselectable`, and another Box with `clickable`:\n\n```tsx live\n<>\n  <Box interaction=\"unselectable\">This text cannot be selected.</Box>\n  <Box interaction=\"clickable\">This box is clickable.</Box>\n</>\n```\n\n### Cursor\n\nUse the `cursor` prop to set the cursor style. `'pointer'` reuses Bulma's `is-clickable` class, while `'help'` uses the project-level `is-cursor-help` class:\n\n```tsx live\n<>\n  <Box cursor=\"pointer\">Cursor: pointer (uses is-clickable)</Box>\n  <Box cursor=\"help\">Cursor: help</Box>\n</>\n```\n\n### Radius\n\n`radiusless` removes the radius; `small`, `normal`, `large` and `rounded` set one from Bulma's radius scale:\n\n```tsx live\n<Buttons>\n  <Button radius=\"radiusless\">Radiusless</Button>\n  <Button radius=\"small\">Small</Button>\n  <Button radius=\"normal\">Normal</Button>\n  <Button radius=\"large\">Large</Button>\n  <Button radius=\"rounded\">Rounded</Button>\n</Buttons>\n```\n\nThe class goes on the component's root element, so where an inner element draws the radius, such as the `<img>` inside `Image`, that element keeps its own. The sizes are not `!important`, unlike `radiusless`, so a component rule more specific than one class still wins: an `isRounded` control stays a pill, and a joined addon keeps its square inner corners.\n\n### Shadowless\n\nShow a Box with `shadowless`:\n\n```tsx live\n<Box shadow=\"shadowless\">This box has no shadow.</Box>\n```\n\n### ClassName\n\nShow a Message with a custom className:\n\n```tsx live\n<Message className=\"custom-message\">\n  This message uses a custom className.\n</Message>\n```\n\n### Clearfix\n\nShow containers with and without clearfix to demonstrate the importance of clearing floated elements:\n\n```tsx live\n<>\n  <Box>\n    <Title size=\"6\">Without clearfix (container collapses)</Title>\n    <Notification color=\"danger\">\n      <Button float=\"left\" color=\"primary\">\n        Left\n      </Button>\n      <Button float=\"right\" color=\"danger\">\n        Right\n      </Button>\n    </Notification>\n  </Box>\n\n  <Box>\n    <Title size=\"6\">With clearfix (container wraps its floats)</Title>\n    <Notification color=\"success\" clearfix>\n      <Button float=\"left\" color=\"primary\">\n        Left\n      </Button>\n      <Button float=\"right\" color=\"danger\">\n        Right\n      </Button>\n    </Notification>\n  </Box>\n</>\n```\n\n### Position\n\n`pos` sets CSS `position`: `absolute`, `fixed`, `relative`, `static` or `sticky`. It is named `pos` because several components already have a `position` prop of their own, for where they place a popup or a toast. `relative` is the older shortcut for `pos=\"relative\"` and still works; when both are set, `pos` wins. Beside `overlay`, a `pos` or `relative` replaces the overlay's `absolute` and keeps its zero offsets; see [Overlay](#overlay).\n\nShow a container with relative positioning that provides context for an absolutely positioned child. The helpers set `position` and nothing else, so the child keeps its `top` and `right` offsets inline:\n\n```tsx live\n<Notification pos=\"relative\" pb=\"6\" color=\"info\">\n  <Span>This container has position: relative</Span>\n  <Tag\n    color=\"primary\"\n    size=\"medium\"\n    pos=\"absolute\"\n    style={{ top: '1rem', right: '1rem' }}\n  >\n    Absolutely positioned child\n  </Tag>\n</Notification>\n```\n\n`pos=\"sticky\"` needs an offset in the same way, and does nothing until it has one.\n\n### Aspect Ratio\n\n`aspectRatio` fixes an element's width-to-height ratio to one of Bulma's ratios, such as `1by1`, `4by3` or `16by9`, or a portrait one such as `9by16`. The full set is in [Supported Props](#supported-props). The height follows the width:\n\n```tsx live\n<Columns>\n  <Column>\n    <Notification color=\"primary\" aspectRatio=\"1by1\">\n      1by1\n    </Notification>\n  </Column>\n  <Column>\n    <Notification color=\"info\" aspectRatio=\"4by3\">\n      4by3\n    </Notification>\n  </Column>\n  <Column>\n    <Notification color=\"success\" aspectRatio=\"16by9\">\n      16by9\n    </Notification>\n  </Column>\n</Columns>\n```\n\nOn `Image`, use its own `size` ratios instead, which also fit the picture to the box.\n\n---\n\n### Skeleton Examples\n\nThe `skeleton` prop applies Bulma's skeleton loading effect. [Skeleton's accessibility notes](../elements/skeleton.md#accessibility) cover it too, reduced motion included. Here are examples for each component:\n\n#### Skeleton Button\n\n```tsx live\n<Button skeleton>Skeleton Button</Button>\n```\n\n#### Skeleton Buttons Group\n\n```tsx live\n<Buttons>\n  <Button skeleton>Skeleton</Button>\n  <Button skeleton>Skeleton</Button>\n  <Button skeleton>Skeleton</Button>\n</Buttons>\n```\n\n#### Skeleton Icon\n\n```tsx live\n<Icon name=\"star\" skeleton ariaLabel=\"Star icon skeleton\" />\n```\n\n#### Skeleton Image\n\n```tsx live\n<Image skeleton src=\"/img/react-logo.png\" alt=\"Skeleton image\" size=\"128x128\" />\n```\n\n#### Skeleton Notification\n\n```tsx live\n<Notification skeleton>Skeleton notification message.</Notification>\n```\n\n#### Skeleton Tag\n\n```tsx live\n<Tag skeleton>Skeleton Tag</Tag>\n```\n\n#### Skeleton Title\n\n```tsx live\n<Title skeleton size=\"2\">\n  Skeleton Title\n</Title>\n```\n\n#### Skeleton SubTitle\n\n```tsx live\n<SubTitle skeleton size=\"4\">\n  Skeleton SubTitle\n</SubTitle>\n```\n\n#### Skeleton Input\n\n```tsx live\n<Input skeleton placeholder=\"Skeleton Input\" />\n```\n\n#### Skeleton TextArea\n\n```tsx live\n<TextArea skeleton placeholder=\"Skeleton TextArea\" rows={3} />\n```\n\n---\n\n## API\n\n```tsx\nconst { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses(props);\n```\n\n- **props**: An object supporting all Bulma helper class props (see table below), plus any additional props. `backgroundColor` additionally accepts the six [`validSchemeColors`](./valid-values.md) values.\n- **bulmaHelperClasses**: A string of Bulma utility classes to be applied to your element.\n- **bulmaHelperStyles**: `React.CSSProperties | undefined` — an inline style for a scheme `backgroundColor` (see [Scheme Backgrounds](#scheme-backgrounds-and-bulmahelperstyles)); `undefined` for every other input. Apply it with [`mergeBulmaStyles`](#scheme-backgrounds-and-bulmahelperstyles) so a user `style` prop wins.\n- **rest**: An object of all remaining props (with helper props stripped out), suitable for spreading onto your component.\n\n---\n\n## Composable Mini-Hooks\n\n`useBulmaClasses` remains the everything-hook — it is what every bestax-bulma component uses internally, and it covers the full helper prop surface with zero behavior change. If you are building a custom component that only needs a slice of that surface, you can reach for one of seven composable mini hooks instead. Each mini hook accepts just its own group of props and returns a plain class string (except `useColorStyles`, which returns an inline style object or `undefined`), which you can combine with the [`classNames`](./classnames.md) utility.\n\n| Hook                   | Props Covered                                                                                                                                                                                                                               | Returns                                                                                                                                                                                 |\n| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `useColorClasses`      | `color`, `colorShade`, `backgroundColor`, `backgroundColorShade`                                                                                                                                                                            | Text and background color classes, including palette shades                                                                                                                             |\n| `useColorStyles`       | `backgroundColor` (scheme values)                                                                                                                                                                                                           | `{ backgroundColor: 'var(--bulma-scheme-*)' }` for a scheme background, `undefined` otherwise — the source of `bulmaHelperStyles`                                                       |\n| `useSpacingClasses`    | `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my`, `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py`, `gap`, `columnGap`, `rowGap`, `gapless`                                                                                                                   | Margin, padding and gap classes                                                                                                                                                         |\n| `useTypographyClasses` | `textSize`, `textAlign`, `textTransform`, `textWeight`, `fontFamily`, `viewport`, plus `textSize{Mobile..Fullhd}`, `textAlign{Mobile..Fullhd}`                                                                                              | Typography classes, including responsive size/alignment variants                                                                                                                        |\n| `useVisibilityClasses` | `display`, `visibility`, `viewport`, plus `display{Mobile,Tablet,TabletOnly,Touch,Desktop,DesktopOnly,Widescreen,WidescreenOnly,Fullhd}`, `visibility{Mobile,Tablet,TabletOnly,Touch,Desktop,DesktopOnly,Widescreen,WidescreenOnly,Fullhd}` | Display and visibility classes (this hook owns all display emission)                                                                                                                    |\n| `useFlexboxClasses`    | `flexDirection`, `flexWrap`, `justifyContent`, `alignContent`, `alignItems`, `alignSelf`, `flexGrow`, `flexShrink`                                                                                                                          | Flexbox classes; container classes are only emitted when a `display`/`display{Viewport}` prop is `flex`/`inline-flex`, item classes (`alignSelf`, `flexGrow`, `flexShrink`) always emit |\n| `useOtherClasses`      | `float`, `overflow`, `overflowX`, `overflowY`, `overlay`, `interaction`, `cursor`, `radius`, `shadow`, `responsive`, `skeleton`, `clearfix`, `pos`, `relative`, `fullHeight`, `aspectRatio`                                                 | Miscellaneous utility classes                                                                                                                                                           |\n\nAll seven hooks (plus `classNames` and `mergeBulmaStyles`) are exported from the package root:\n\n```tsx\nimport {\n  useColorClasses,\n  useColorStyles,\n  useSpacingClasses,\n  classNames,\n  mergeBulmaStyles,\n} from '@allxsmith/bestax-bulma';\n```\n\nHere is a small custom component that only needs color and spacing helpers:\n\n```tsx live\nimport type { BulmaClassesProps } from '@allxsmith/bestax-bulma';\n\nfunction example() {\n  function PriceTag({\n    color,\n    backgroundColor,\n    backgroundColorShade,\n    m,\n    children,\n  }: BulmaClassesProps & { children?: React.ReactNode }) {\n    const colorClasses = useColorClasses({\n      color,\n      backgroundColor,\n      backgroundColorShade,\n    });\n    const spacingClasses = useSpacingClasses({ m });\n    return (\n      <span className={classNames('tag', colorClasses, spacingClasses)}>\n        {children}\n      </span>\n    );\n  }\n\n  return (\n    <div>\n      <PriceTag color=\"white\" backgroundColor=\"success\" m=\"2\">\n        $19.99\n      </PriceTag>\n      <PriceTag\n        color=\"white\"\n        backgroundColor=\"danger\"\n        backgroundColorShade=\"dark\"\n        m=\"2\"\n      >\n        $49.99\n      </PriceTag>\n    </div>\n  );\n}\n```\n\n:::note useFlexboxClasses and display\n\n`useFlexboxClasses` only emits container classes (`flexDirection`, `flexWrap`, `justifyContent`, `alignContent`, `alignItems`) when a `display` or `display{Viewport}` prop is `flex` or `inline-flex` — it reads those display props for gating but never emits the display class itself. Pair it with `useVisibilityClasses` (which owns display emission), or just use `useBulmaClasses`.\n\n:::\n\n---\n\n## Supported Props\n\nBelow is the full list of supported props, derived from the `BulmaClassesProps` TypeScript definition:\n\n| Prop                   | Type / Example Value                                                                                                                                                                                                                                                               | Effect / Example Class                                                                                      |\n| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |\n| `color`                | `'primary'`, `'link'`, `'info'`, `'success'`, `'warning'`, `'danger'`, `'black'`, `'black-bis'`, `'black-ter'`, `'grey-darker'`, `'grey-dark'`, `'grey'`, `'grey-light'`, `'grey-lighter'`, `'white'`, `'white-bis'`, `'white-ter'`, `'light'`, `'dark'`, `'inherit'`, `'current'` | `has-text-primary`, `has-text-grey-dark`, `has-text-inherit`                                                |\n| `backgroundColor`      | Same as `color`, plus the scheme values `'scheme-main'`, `'scheme-main-bis'`, `'scheme-main-ter'`, `'scheme-invert'`, `'scheme-invert-bis'`, `'scheme-invert-ter'`                                                                                                                 | `has-background-warning`; scheme values emit no class — they return as the `bulmaHelperStyles` inline style |\n| `colorShade`           | `'00'`, `'05'`, `'10'`, `'15'`, `'20'`, `'25'`, `'30'`, `'35'`, `'40'`, `'45'`, `'50'`, `'55'`, `'60'`, `'65'`, `'70'`, `'75'`, `'80'`, `'85'`, `'90'`, `'95'`, `'invert'`, `'light'`, `'dark'`, `'soft'`, `'bold'`, `'on-scheme'`                                                 | `has-text-primary-25`                                                                                       |\n| `backgroundColorShade` | `'00'`, `'05'`, `'10'`, `'15'`, `'20'`, `'25'`, `'30'`, `'35'`, `'40'`, `'45'`, `'50'`, `'55'`, `'60'`, `'65'`, `'70'`, `'75'`, `'80'`, `'85'`, `'90'`, `'95'`, `'invert'`, `'light'`, `'dark'`, `'soft'`, `'bold'`, `'on-scheme'`                                                 | `has-background-info-dark`                                                                                  |\n| `m`                    | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `m-4`, `m-auto`                                                                                             |\n| `mt`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `mt-2`                                                                                                      |\n| `mr`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `mr-6`                                                                                                      |\n| `mb`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `mb-0`                                                                                                      |\n| `ml`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `ml-auto`                                                                                                   |\n| `mx`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `mx-2`                                                                                                      |\n| `my`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `my-5`                                                                                                      |\n| `p`                    | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `p-3`, `p-auto`                                                                                             |\n| `pt`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `pt-1`                                                                                                      |\n| `pr`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `pr-6`                                                                                                      |\n| `pb`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `pb-0`                                                                                                      |\n| `pl`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `pl-4`                                                                                                      |\n| `px`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `px-1`                                                                                                      |\n| `py`                   | `'0'..'6'`, `'auto'`                                                                                                                                                                                                                                                               | `py-6`                                                                                                      |\n| `gap`                  | `'0'..'8'` in half steps, or a number                                                                                                                                                                                                                                              | `is-gap-1.5`                                                                                                |\n| `columnGap`            | Same as `gap`                                                                                                                                                                                                                                                                      | `is-column-gap-4`                                                                                           |\n| `rowGap`               | Same as `gap`                                                                                                                                                                                                                                                                      | `is-row-gap-0.5`                                                                                            |\n| `gapless`              | `true`                                                                                                                                                                                                                                                                             | `is-gapless`                                                                                                |\n| `textSize`             | `'1'..'7'`                                                                                                                                                                                                                                                                         | `is-size-3`                                                                                                 |\n| `textAlign`            | `'centered'`, `'justified'`, `'left'`, `'right'`                                                                                                                                                                                                                                   | `has-text-centered`                                                                                         |\n| `textTransform`        | `'capitalized'`, `'lowercase'`, `'uppercase'`, `'italic'`                                                                                                                                                                                                                          | `is-uppercase`, `is-italic`                                                                                 |\n| `textWeight`           | `'light'`, `'normal'`, `'medium'`, `'semibold'`, `'bold'`                                                                                                                                                                                                                          | `has-text-weight-bold`                                                                                      |\n| `fontFamily`           | `'sans-serif'`, `'monospace'`, `'primary'`, `'secondary'`, `'code'`                                                                                                                                                                                                                | `is-family-monospace`                                                                                       |\n| `display`              | `'block'`, `'flex'`, `'inline'`, `'inline-block'`, `'inline-flex'`, `'grid'`, `'none'`                                                                                                                                                                                             | `is-flex`, `is-inline-block`, `is-grid`, `is-hidden`                                                        |\n| `visibility`           | `'hidden'`, `'sr-only'`, `'invisible'`                                                                                                                                                                                                                                             | `is-hidden`, `is-sr-only`, `is-invisible`                                                                   |\n| `flexDirection`        | `'row'`, `'row-reverse'`, `'column'`, `'column-reverse'`                                                                                                                                                                                                                           | `is-flex-direction-row`                                                                                     |\n| `flexWrap`             | `'nowrap'`, `'wrap'`, `'wrap-reverse'`                                                                                                                                                                                                                                             | `is-flex-wrap-nowrap`                                                                                       |\n| `justifyContent`       | `'flex-start'`, `'flex-end'`, `'center'`, `'space-between'`, `'space-around'`, `'space-evenly'`, `'start'`, `'end'`, `'left'`, `'right'`                                                                                                                                           | `is-justify-content-center`                                                                                 |\n| `alignContent`         | `'flex-start'`, `'flex-end'`, `'center'`, `'space-between'`, `'space-around'`, `'space-evenly'`, `'stretch'`                                                                                                                                                                       | `is-align-content-stretch`                                                                                  |\n| `alignItems`           | `'stretch'`, `'flex-start'`, `'flex-end'`, `'center'`, `'baseline'`, `'start'`, `'end'`                                                                                                                                                                                            | `is-align-items-center`                                                                                     |\n| `alignSelf`            | `'auto'`, `'flex-start'`, `'flex-end'`, `'center'`, `'baseline'`, `'stretch'`                                                                                                                                                                                                      | `is-align-self-center`                                                                                      |\n| `flexGrow`             | `'0'`, `'1'`, `'2'`, `'3'`, `'4'`, `'5'`                                                                                                                                                                                                                                           | `is-flex-grow-1`                                                                                            |\n| `flexShrink`           | `'0'`, `'1'`, `'2'`, `'3'`, `'4'`, `'5'`                                                                                                                                                                                                                                           | `is-flex-shrink-0`                                                                                          |\n| `float`                | `'left'`, `'right'`                                                                                                                                                                                                                                                                | `is-pulled-left`, `is-pulled-right`                                                                         |\n| `overflow`             | `'clipped'`, `'auto'`, `'clip'`, `'hidden'`, `'scroll'`, `'visible'`                                                                                                                                                                                                               | `is-clipped`, `is-overflow-auto`                                                                            |\n| `overflowX`            | `'auto'`, `'clip'`, `'hidden'`, `'scroll'`, `'visible'`                                                                                                                                                                                                                            | `is-overflow-x-auto`                                                                                        |\n| `overflowY`            | `'auto'`, `'clip'`, `'hidden'`, `'scroll'`, `'visible'`                                                                                                                                                                                                                            | `is-overflow-y-scroll`                                                                                      |\n| `overlay`              | `true`                                                                                                                                                                                                                                                                             | `is-overlay`                                                                                                |\n| `interaction`          | `'unselectable'`, `'clickable'`                                                                                                                                                                                                                                                    | `is-unselectable`                                                                                           |\n| `cursor`               | `'pointer'`, `'help'`                                                                                                                                                                                                                                                              | `is-clickable`, `is-cursor-help`                                                                            |\n| `radius`               | `'radiusless'`, `'small'`, `'normal'`, `'large'`, `'rounded'`                                                                                                                                                                                                                      | `is-radiusless`, `has-radius-large`                                                                         |\n| `shadow`               | `'shadowless'`                                                                                                                                                                                                                                                                     | `is-shadowless`                                                                                             |\n| `responsive`           | `'mobile'`, `'narrow'`                                                                                                                                                                                                                                                             | `is-mobile`, `is-narrow`                                                                                    |\n| `viewport`             | `'mobile'`, `'tablet'`, `'tablet-only'`, `'touch'`, `'desktop'`, `'desktop-only'`, `'widescreen'`, `'widescreen-only'`, `'fullhd'`                                                                                                                                                 | Adds viewport suffix to supported properties                                                                |\n| `skeleton`             | `true`                                                                                                                                                                                                                                                                             | `is-skeleton`                                                                                               |\n| `clearfix`             | `true`                                                                                                                                                                                                                                                                             | `is-clearfix`                                                                                               |\n| `pos`                  | `'absolute'`, `'fixed'`, `'relative'`, `'static'`, `'sticky'`                                                                                                                                                                                                                      | `is-position-sticky`                                                                                        |\n| `relative`             | `true`                                                                                                                                                                                                                                                                             | `is-relative` (ignored when `pos` is set)                                                                   |\n| `fullHeight`           | `true`                                                                                                                                                                                                                                                                             | `is-full-height`                                                                                            |\n| `aspectRatio`          | `'1by1'`, `'5by4'`, `'4by3'`, `'3by2'`, `'5by3'`, `'16by9'`, `'2by1'`, `'3by1'`, `'4by5'`, `'3by4'`, `'2by3'`, `'3by5'`, `'9by16'`, `'1by2'`, `'1by3'`                                                                                                                             | `is-aspect-ratio-16by9`                                                                                     |\n\n### Viewport-Specific Properties\n\nThe following properties allow you to set different values for each viewport breakpoint:\n\n| Prop                       | Type / Example Value                                                                                                               | Effect / Example Class                                                                    |\n| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |\n| `displayMobile`            | `'block'`, `'flex'`, `'inline'`, `'grid'`, `'none'`, etc.                                                                          | `is-block-mobile`, `is-flex-mobile`, `is-hidden-mobile`                                   |\n| `displayTablet`            | Same as above                                                                                                                      | `is-block-tablet`, `is-flex-tablet`, `is-hidden-tablet`                                   |\n| `displayTabletOnly`        | Same as above                                                                                                                      | `is-block-tablet-only`, `is-flex-tablet-only`, `is-hidden-tablet-only`                    |\n| `displayTouch`             | Same as above                                                                                                                      | `is-block-touch`, `is-flex-touch`, `is-hidden-touch`                                      |\n| `displayDesktop`           | Same as above                                                                                                                      | `is-block-desktop`, `is-flex-desktop`, `is-hidden-desktop`                                |\n| `displayDesktopOnly`       | Same as above                                                                                                                      | `is-block-desktop-only`, `is-flex-desktop-only`, `is-hidden-desktop-only`                 |\n| `displayWidescreen`        | Same as above                                                                                                                      | `is-block-widescreen`, `is-flex-widescreen`                                               |\n| `displayWidescreenOnly`    | Same as above                                                                                                                      | `is-block-widescreen-only`, `is-flex-widescreen-only`                                     |\n| `displayFullhd`            | Same as above                                                                                                                      | `is-block-fullhd`, `is-flex-fullhd`                                                       |\n| `textSizeMobile`           | `'1'..'7'`                                                                                                                         | `is-size-3-mobile`, `is-size-5-mobile`                                                    |\n| `textSizeTablet`           | `'1'..'7'`                                                                                                                         | `is-size-3-tablet`, `is-size-5-tablet`                                                    |\n| `textSizeDesktop`          | `'1'..'7'`                                                                                                                         | `is-size-3-desktop`, `is-size-5-desktop`                                                  |\n| `textSizeWidescreen`       | `'1'..'7'`                                                                                                                         | `is-size-3-widescreen`, `is-size-5-widescreen`                                            |\n| `textSizeFullhd`           | `'1'..'7'`                                                                                                                         | `is-size-3-fullhd`, `is-size-5-fullhd`                                                    |\n| `textAlignMobile`          | `'centered'`, `'left'`, `'right'`, `'justified'`                                                                                   | `has-text-centered-mobile`, `has-text-left-mobile`                                        |\n| `textAlignTablet`          | Same as above                                                                                                                      | `has-text-centered-tablet`, `has-text-left-tablet`                                        |\n| `textAlignDesktop`         | Same as above                                                                                                                      | `has-text-centered-desktop`, `has-text-left-desktop`                                      |\n| `textAlignWidescreen`      | Same as above                                                                                                                      | `has-text-centered-widescreen`, `has-text-left-widescreen`                                |\n| `textAlignFullhd`          | Same as above                                                                                                                      | `has-text-centered-fullhd`, `has-text-left-fullhd`                                        |\n| `visibilityMobile`         | `'hidden'`, `'sr-only'`, `'invisible'`                                                                                             | `is-hidden-mobile`, `is-sr-only-mobile`, `is-invisible-mobile`                            |\n| `visibilityTablet`         | Same as above                                                                                                                      | `is-hidden-tablet`, `is-sr-only-tablet`, `is-invisible-tablet`                            |\n| `visibilityTabletOnly`     | Same as above                                                                                                                      | `is-hidden-tablet-only`, `is-sr-only-tablet-only`, `is-invisible-tablet-only`             |\n| `visibilityTouch`          | Same as above                                                                                                                      | `is-hidden-touch`, `is-sr-only-touch`, `is-invisible-touch`                               |\n| `visibilityDesktop`        | Same as above                                                                                                                      | `is-hidden-desktop`, `is-sr-only-desktop`, `is-invisible-desktop`                         |\n| `visibilityDesktopOnly`    | Same as above                                                                                                                      | `is-hidden-desktop-only`, `is-sr-only-desktop-only`, `is-invisible-desktop-only`          |\n| `visibilityWidescreen`     | Same as above                                                                                                                      | `is-hidden-widescreen`, `is-sr-only-widescreen`, `is-invisible-widescreen`                |\n| `visibilityWidescreenOnly` | Same as above                                                                                                                      | `is-hidden-widescreen-only`, `is-sr-only-widescreen-only`, `is-invisible-widescreen-only` |\n| `visibilityFullhd`         | Same as above                                                                                                                      | `is-hidden-fullhd`, `is-sr-only-fullhd`, `is-invisible-fullhd`                            |\n| `responsive`               | `'mobile'`, `'narrow'`                                                                                                             | `is-mobile`, `is-narrow`                                                                  |\n| `clearfix`                 | `true`                                                                                                                             | `is-clearfix`                                                                             |\n| `relative`                 | `true`                                                                                                                             | `is-relative`                                                                             |\n| `viewport`                 | `'mobile'`, `'tablet'`, `'tablet-only'`, `'touch'`, `'desktop'`, `'desktop-only'`, `'widescreen'`, `'widescreen-only'`, `'fullhd'` | Adds suffix, e.g. `-mobile`, `-desktop`, `-touch`, `-tablet-only`                         |\n\n---\n\n### Full TypeScript Definition\n\n`BulmaClassesProps` is composed from the six group interfaces, each of which is also exported (along with the shared `BulmaViewportProps` and `BulmaDisplayProps` types) and accepted by the corresponding [mini hook](#composable-mini-hooks). The hook's parameter is the widened `BulmaClassesPropsWithScheme` — identical to `BulmaClassesProps` except that `backgroundColor` also accepts the six `validSchemeColors` values (`BulmaColorPropsWithScheme` is the color-group equivalent, accepted by `useColorClasses` and `useColorStyles`):\n\n```ts\nexport interface BulmaClassesProps\n  extends\n    BulmaColorProps,\n    BulmaSpacingProps,\n    BulmaTypographyProps,\n    BulmaVisibilityProps,\n    BulmaFlexboxProps,\n    BulmaOtherProps {}\n\nexport type BulmaViewportProps =\n  | 'mobile'\n  | 'tablet'\n  | 'tablet-only'\n  | 'touch'\n  | 'desktop'\n  | 'desktop-only'\n  | 'widescreen'\n  | 'widescreen-only'\n  | 'fullhd';\n\nexport type BulmaDisplayProps =\n  | 'block'\n  | 'flex'\n  | 'inline'\n  | 'inline-block'\n  | 'inline-flex'\n  | 'grid'\n  | 'none';\n\nexport interface BulmaColorProps {\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'black-bis'\n    | 'black-ter'\n    | 'grey-darker'\n    | 'grey-dark'\n    | 'grey'\n    | 'grey-light'\n    | 'grey-lighter'\n    | 'white'\n    | 'white-bis'\n    | 'white-ter'\n    | 'light'\n    | 'dark'\n    | 'inherit'\n    | 'current';\n  colorShade?:\n    | '00'\n    | '05'\n    | '10'\n    | '15'\n    | '20'\n    | '25'\n    | '30'\n    | '35'\n    | '40'\n    | '45'\n    | '50'\n    | '55'\n    | '60'\n    | '65'\n    | '70'\n    | '75'\n    | '80'\n    | '85'\n    | '90'\n    | '95'\n    | 'invert'\n    | 'light'\n    | 'dark'\n    | 'soft'\n    | 'bold'\n    | 'on-scheme';\n  backgroundColor?: BulmaColorProps['color'];\n  backgroundColorShade?: BulmaColorProps['colorShade'];\n}\n\n// The scheme-aware input accepted by useBulmaClasses, useColorClasses,\n// and useColorStyles ((typeof validSchemeColors)[number] is\n// 'scheme-main' | 'scheme-main-bis' | 'scheme-main-ter'\n// | 'scheme-invert' | 'scheme-invert-bis' | 'scheme-invert-ter'):\nexport type BulmaColorPropsWithScheme = Omit<\n  BulmaColorProps,\n  'backgroundColor'\n> & {\n  backgroundColor?:\n    BulmaColorProps['backgroundColor'] | (typeof validSchemeColors)[number];\n};\n\nexport type BulmaClassesPropsWithScheme = Omit<\n  BulmaClassesProps,\n  keyof BulmaColorProps\n> &\n  BulmaColorPropsWithScheme;\n\nexport interface BulmaSpacingProps {\n  m?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  mt?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  mr?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  mb?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  ml?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  mx?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  my?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  p?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  pt?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  pr?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  pb?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  pl?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  px?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  py?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | 'auto';\n  gap?: BulmaGapStep;\n  columnGap?: BulmaGapStep;\n  rowGap?: BulmaGapStep;\n  gapless?: boolean;\n}\n\n// '0' to '8' in half steps ('0', '0.5', '1', … '7.5', '8'), as strings or numbers\nexport type BulmaGapStep =\n  | '0'\n  | '0.5'\n  | '1'\n  | '1.5'\n  | '2'\n  | '2.5'\n  | '3'\n  | '3.5'\n  | '4'\n  | '4.5'\n  | '5'\n  | '5.5'\n  | '6'\n  | '6.5'\n  | '7'\n  | '7.5'\n  | '8'\n  | 0\n  | 0.5\n  | 1\n  | 1.5\n  | 2\n  | 2.5\n  | 3\n  | 3.5\n  | 4\n  | 4.5\n  | 5\n  | 5.5\n  | 6\n  | 6.5\n  | 7\n  | 7.5\n  | 8;\n\nexport interface BulmaTypographyProps {\n  textSize?: '1' | '2' | '3' | '4' | '5' | '6' | '7';\n  textAlign?: 'centered' | 'justified' | 'left' | 'right';\n  textTransform?: 'capitalized' | 'lowercase' | 'uppercase' | 'italic';\n  textWeight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';\n  fontFamily?: 'sans-serif' | 'monospace' | 'primary' | 'secondary' | 'code';\n  viewport?: BulmaViewportProps;\n  textSizeMobile?: '1' | '2' | '3' | '4' | '5' | '6' | '7';\n  textSizeTablet?: '1' | '2' | '3' | '4' | '5' | '6' | '7';\n  textSizeDesktop?: '1' | '2' | '3' | '4' | '5' | '6' | '7';\n  textSizeWidescreen?: '1' | '2' | '3' | '4' | '5' | '6' | '7';\n  textSizeFullhd?: '1' | '2' | '3' | '4' | '5' | '6' | '7';\n  textAlignMobile?: 'centered' | 'justified' | 'left' | 'right';\n  textAlignTablet?: 'centered' | 'justified' | 'left' | 'right';\n  textAlignDesktop?: 'centered' | 'justified' | 'left' | 'right';\n  textAlignWidescreen?: 'centered' | 'justified' | 'left' | 'right';\n  textAlignFullhd?: 'centered' | 'justified' | 'left' | 'right';\n}\n\nexport interface BulmaVisibilityProps {\n  display?: BulmaDisplayProps;\n  visibility?: 'hidden' | 'sr-only' | 'invisible';\n  viewport?: BulmaViewportProps;\n  displayMobile?: BulmaDisplayProps;\n  displayTablet?: BulmaDisplayProps;\n  displayTabletOnly?: BulmaDisplayProps;\n  displayTouch?: BulmaDisplayProps;\n  displayDesktop?: BulmaDisplayProps;\n  displayDesktopOnly?: BulmaDisplayProps;\n  displayWidescreen?: BulmaDisplayProps;\n  displayWidescreenOnly?: BulmaDisplayProps;\n  displayFullhd?: BulmaDisplayProps;\n  visibilityMobile?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityTablet?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityTabletOnly?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityTouch?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityDesktop?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityDesktopOnly?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityWidescreen?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityWidescreenOnly?: 'hidden' | 'sr-only' | 'invisible';\n  visibilityFullhd?: 'hidden' | 'sr-only' | 'invisible';\n}\n\nexport interface BulmaFlexboxProps {\n  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';\n  justifyContent?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n    | 'start'\n    | 'end'\n    | 'left'\n    | 'right';\n  alignContent?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n    | 'stretch';\n  alignItems?:\n    | 'stretch'\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'baseline'\n    | 'start'\n    | 'end';\n  alignSelf?:\n    'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n  flexGrow?: '0' | '1' | '2' | '3' | '4' | '5';\n  flexShrink?: '0' | '1' | '2' | '3' | '4' | '5';\n}\n\nexport interface BulmaOtherProps {\n  float?: 'left' | 'right';\n  overflow?: 'clipped' | 'auto' | 'clip' | 'hidden' | 'scroll' | 'visible';\n  overflowX?: 'auto' | 'clip' | 'hidden' | 'scroll' | 'visible';\n  overflowY?: 'auto' | 'clip' | 'hidden' | 'scroll' | 'visible';\n  overlay?: boolean;\n  interaction?: 'unselectable' | 'clickable';\n  cursor?: 'pointer' | 'help';\n  radius?: 'radiusless' | 'small' | 'normal' | 'large' | 'rounded';\n  shadow?: 'shadowless';\n  responsive?: 'mobile' | 'narrow';\n  skeleton?: boolean;\n  clearfix?: boolean;\n  pos?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';\n  relative?: boolean;\n  fullHeight?: boolean;\n  aspectRatio?:\n    | '1by1'\n    | '5by4'\n    | '4by3'\n    | '3by2'\n    | '5by3'\n    | '16by9'\n    | '2by1'\n    | '3by1'\n    | '4by5'\n    | '3by4'\n    | '2by3'\n    | '3by5'\n    | '9by16'\n    | '1by2'\n    | '1by3';\n}\n```\n\n---\n\n## Responsive Design\n\n### Global Viewport Property (Legacy)\n\nThe `viewport` prop applies a single viewport modifier to ALL properties that support it:\n\n```tsx\nconst { bulmaHelperClasses } = useBulmaClasses({\n  color: 'primary',\n  textAlign: 'centered',\n  textSize: '4',\n  viewport: 'mobile', // Applies -mobile to ALL properties\n});\n// Result: has-text-primary-mobile has-text-centered-mobile is-size-4-mobile\n```\n\n### Viewport-Specific Properties (Recommended)\n\nViewport-specific properties allow you to set **different values for each viewport**:\n\n```tsx\nconst { bulmaHelperClasses } = useBulmaClasses({\n  // Different text sizes for each viewport\n  textSizeMobile: '6', // Small on mobile\n  textSizeTablet: '5', // Medium on tablet\n  textSizeDesktop: '4', // Large on desktop\n\n  // Different text alignment for each viewport\n  textAlignMobile: 'centered', // Center on mobile\n  textAlignDesktop: 'left', // Left align on desktop\n\n  // Different visibility for each viewport\n  visibilityMobile: 'hidden', // Hidden on mobile\n  visibilityTablet: 'invisible', // Invisible on tablet\n});\n// Result: is-size-6-mobile is-size-5-tablet is-size-4-desktop\n//         has-text-centered-mobile has-text-left-desktop is-hidden-mobile is-invisible-tablet\n```\n\n### Breakpoint Reference\n\nBulma's responsive breakpoints:\n\n- **mobile**: up to 768px\n- **tablet**: 769px and above\n- **tablet-only**: 769px - 1023px (excludes desktop and above)\n- **touch**: up to 1023px (mobile + tablet combined — the breakpoint most often used to hide desktop-only chrome)\n- **desktop**: 1024px and above\n- **desktop-only**: 1024px - 1215px (excludes widescreen and above)\n- **widescreen**: 1216px and above\n- **widescreen-only**: 1216px - 1407px (excludes fullhd)\n- **fullhd**: 1408px and above\n\n`display`/`visibility` are the only property families with `*Touch`/`*TabletOnly`/`*DesktopOnly`/`*WidescreenOnly` props; other viewport-aware properties (`textSize*`, `textAlign*`) only go through `mobile`/`tablet`/`desktop`/`widescreen`/`fullhd`, though the generic `viewport` prop itself accepts all nine values for any property that reads it.\n\n### Properties That Support Viewport Modifiers\n\nOnly certain properties support responsive variants:\n\n**✅ Support Viewport Modifiers:**\n\n- Text size (`textSize`, `textSizeMobile`, `textSizeTablet`, etc.)\n- Text alignment (`textAlign`, `textAlignMobile`, `textAlignTablet`, etc.)\n- Display (`display`, `displayMobile`, `displayTablet`, `displayTabletOnly`, `displayTouch`, `displayDesktop`, `displayDesktopOnly`, `displayWidescreen`, `displayWidescreenOnly`, `displayFullhd`)\n- Visibility (`visibility`, `visibilityMobile`, `visibilityTablet`, `visibilityTabletOnly`, `visibilityTouch`, `visibilityDesktop`, `visibilityDesktopOnly`, `visibilityWidescreen`, `visibilityWidescreenOnly`, `visibilityFullhd`)\n\n**❌ Do NOT Support Viewport Modifiers:**\n\n- Spacing (`m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my`, `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py`)\n- Background colors (`backgroundColor`)\n- Flexbox properties (`flexDirection`, `flexWrap`, `justifyContent`, etc.)\n- Other helpers (`float`, `overflow`, `pos`, `radius`, `shadow`, `aspectRatio`, etc.)\n\n---\n\n## Notes\n\n- Any prop not recognized as a Bulma helper prop is passed through in `rest`.\n- Responsive helper props (`viewport`) suffix classes with the breakpoint (e.g., `is-size-3-mobile`).\n- You can use in combination with [`classNames`](./classnames.md) for more advanced use.\n\n---\n\n## See Also\n\n- [classNames helper](./classnames.md)\n- [Bulma Classes Reference](https://bulma.io/documentation/helpers/)\n- [Storybook: useBulmaClasses Demo](https://bestax.io/storybook/?path=/story/helpers-usebulmaclasses--default)",
   "parts": [],
   "cssVars": []
 }
diff --git a/docs/docs/api/components/avatar.md b/docs/docs/api/components/avatar.md
index df823b278..4add469be 100644
--- a/docs/docs/api/components/avatar.md
+++ b/docs/docs/api/components/avatar.md
@@ -135,8 +135,8 @@ automatic initials/icon fallback runs.
 
 ```tsx live
 function example() {
-  const avatarRef = React.useRef(null);
-  const [tag, setTag] = React.useState(null);
+  const avatarRef = React.useRef<HTMLElement>(null);
+  const [tag, setTag] = React.useState<string>();
 
   return (
     <>
diff --git a/docs/docs/api/components/carousel.md b/docs/docs/api/components/carousel.md
index 48baae12f..f7031e3fe 100644
--- a/docs/docs/api/components/carousel.md
+++ b/docs/docs/api/components/carousel.md
@@ -102,7 +102,9 @@ Different indicator style options.
 
 ```tsx live
 function IndicatorExample() {
-  const [style, setStyle] = useState('dots');
+  const [style, setStyle] = useState<'dots' | 'circles' | 'lines' | 'bars'>(
+    'dots'
+  );
   return (
     <Block>
       <Buttons mb="4">
diff --git a/docs/docs/api/components/collapse.md b/docs/docs/api/components/collapse.md
index ef1ec4b3b..7ea5ccf43 100644
--- a/docs/docs/api/components/collapse.md
+++ b/docs/docs/api/components/collapse.md
@@ -40,13 +40,9 @@ A simple uncontrolled collapse.
 function example() {
   return (
     <Collapse
+      bordered
       trigger={
-        <Block
-          p="3"
-          bgColor="white-ter"
-          cursor="pointer"
-          style={{ borderRadius: '4px' }}
-        >
+        <Block p="3" cursor="pointer">
           <Strong>Click to expand</Strong>
         </Block>
       }
@@ -72,14 +68,10 @@ Collapse that starts open by default.
 function example() {
   return (
     <Collapse
+      bordered
       defaultOpen
       trigger={
-        <Block
-          p="3"
-          bgColor="white-ter"
-          cursor="pointer"
-          style={{ borderRadius: '4px' }}
-        >
+        <Block p="3" cursor="pointer">
           <Strong>This starts open</Strong>
         </Block>
       }
@@ -102,14 +94,10 @@ Collapse that toggles instantly without animation.
 function example() {
   return (
     <Collapse
+      bordered
       animation={false}
       trigger={
-        <Block
-          p="3"
-          bgColor="white-ter"
-          cursor="pointer"
-          style={{ borderRadius: '4px' }}
-        >
+        <Block p="3" cursor="pointer">
           <Strong>No animation</Strong>
         </Block>
       }
@@ -143,10 +131,11 @@ function example() {
         <Span ml="4">State: {isOpen ? 'Open' : 'Closed'}</Span>
       </Block>
       <Collapse
+        bordered
         open={isOpen}
         onOpenChange={setIsOpen}
         trigger={
-          <Block p="3" bgColor="white-ter" style={{ borderRadius: '4px' }}>
+          <Block p="3">
             Controlled collapse (click here or the button above)
           </Block>
         }
diff --git a/docs/docs/api/components/dialog.md b/docs/docs/api/components/dialog.md
index fc931cdc9..20364ffa8 100644
--- a/docs/docs/api/components/dialog.md
+++ b/docs/docs/api/components/dialog.md
@@ -102,7 +102,9 @@ Different dialog types with matching icons.
 
 ```tsx live
 function example() {
-  const [dialogType, setDialogType] = useState(null);
+  const [dialogType, setDialogType] = useState<
+    'success' | 'danger' | 'warning' | 'info' | null
+  >(null);
   return (
     <Block>
       <Buttons>
diff --git a/docs/docs/api/components/dropdown.md b/docs/docs/api/components/dropdown.md
index a0e01154f..7f9acaf1e 100644
--- a/docs/docs/api/components/dropdown.md
+++ b/docs/docs/api/components/dropdown.md
@@ -153,8 +153,8 @@ function example() {
 
 ```tsx live
 function example() {
-  const dropdownRef = React.useRef(null);
-  const [tag, setTag] = React.useState(null);
+  const dropdownRef = React.useRef<HTMLDivElement>(null);
+  const [tag, setTag] = React.useState<string>();
 
   return (
     <>
diff --git a/docs/docs/api/components/menu.md b/docs/docs/api/components/menu.md
index cc410ae5b..09f23df4e 100644
--- a/docs/docs/api/components/menu.md
+++ b/docs/docs/api/components/menu.md
@@ -80,7 +80,9 @@ Use the `as` prop on `Menu.Item` to render a custom link component, such as a ro
 ```tsx live
 // import { Link } from 'react-router-dom';
 function example() {
-  const Link = props => <a>{props.children}</a>;
+  const Link = (props: { to: string; children?: React.ReactNode }) => (
+    <a>{props.children}</a>
+  );
   return (
     <Menu>
       <Menu.Label>App</Menu.Label>
@@ -147,7 +149,7 @@ Create multi-level navigation by nesting `Menu.List` components inside `Menu.Ite
 
 ```tsx live
 function example() {
-  const itemRef = React.useRef(null);
+  const itemRef = React.useRef<HTMLAnchorElement>(null);
 
   return (
     <>
diff --git a/docs/docs/api/components/modal.md b/docs/docs/api/components/modal.md
index c51449ddc..5f951a3e9 100644
--- a/docs/docs/api/components/modal.md
+++ b/docs/docs/api/components/modal.md
@@ -240,8 +240,8 @@ It's SSR-safe: a portal has no server-rendered counterpart, so the modal renders
 ```tsx live
 function example() {
   const [open, setOpen] = React.useState(false);
-  const [width, setWidth] = React.useState(null);
-  const modalRef = React.useRef(null);
+  const [width, setWidth] = React.useState<number | null>(null);
+  const modalRef = React.useRef<HTMLDivElement>(null);
 
   return (
     <>
diff --git a/docs/docs/api/components/navbar.md b/docs/docs/api/components/navbar.md
index 12ae927fe..faffad43a 100644
--- a/docs/docs/api/components/navbar.md
+++ b/docs/docs/api/components/navbar.md
@@ -186,7 +186,9 @@ Use the `as` prop on `Navbar.Item` to render a custom link component, such as a
 ```tsx live
 // import { Link } from 'react-router-dom';
 function example() {
-  const Link = props => <a>{props.children}</a>;
+  const Link = (props: { to: string; children?: React.ReactNode }) => (
+    <a>{props.children}</a>
+  );
   return (
     <Navbar>
       <Navbar.Menu active>
@@ -363,7 +365,7 @@ function example() {
     'dark',
     'light',
     'white',
-  ];
+  ] as const;
   return (
     <>
       {colors.map(color => (
@@ -395,8 +397,8 @@ function example() {
 
 ```tsx live
 function example() {
-  const navRef = React.useRef(null);
-  const [height, setHeight] = React.useState(null);
+  const navRef = React.useRef<HTMLElement>(null);
+  const [height, setHeight] = React.useState<number>();
 
   return (
     <>
diff --git a/docs/docs/api/components/panel.md b/docs/docs/api/components/panel.md
index 7504b16c6..1368aaa62 100644
--- a/docs/docs/api/components/panel.md
+++ b/docs/docs/api/components/panel.md
@@ -92,18 +92,20 @@ This example demonstrates the `Panel` component's color variants. The `color` pr
 
 ```tsx live
 <>
-  {[
-    'primary',
-    'link',
-    'info',
-    'success',
-    'warning',
-    'danger',
-    'black',
-    'dark',
-    'light',
-    'white',
-  ].map(color => (
+  {(
+    [
+      'primary',
+      'link',
+      'info',
+      'success',
+      'warning',
+      'danger',
+      'black',
+      'dark',
+      'light',
+      'white',
+    ] as const
+  ).map(color => (
     <Panel key={color} color={color}>
       <Panel.Heading>
         {color.charAt(0).toUpperCase() + color.slice(1)} Panel
diff --git a/docs/docs/api/components/toast.md b/docs/docs/api/components/toast.md
index c9a380121..ce70a3d20 100644
--- a/docs/docs/api/components/toast.md
+++ b/docs/docs/api/components/toast.md
@@ -69,7 +69,9 @@ function example() {
 
 ```tsx live
 function example() {
-  const [toastType, setToastType] = useState(null);
+  const [toastType, setToastType] = useState<
+    'success' | 'danger' | 'warning' | 'info' | null
+  >(null);
   return (
     <Block>
       <Buttons>
@@ -107,9 +109,11 @@ function example() {
 Toast can appear in any of six positions. (The `transform` on the wrapper is a docs-only trick that scopes the toast's `position: fixed` to the example box; in your app, omit the wrapper.)
 
 ```tsx live
+import type { ToastPosition } from '@allxsmith/bestax-bulma';
+
 function example() {
-  const [position, setPosition] = useState(null);
-  const [box, setBox] = useState(null);
+  const [position, setPosition] = useState<ToastPosition | null>(null);
+  const [box, setBox] = useState<HTMLDivElement | null>(null);
   return (
     <div
       ref={setBox}
diff --git a/docs/docs/api/elements/button.md b/docs/docs/api/elements/button.md
index e3c65b815..c3e049a73 100644
--- a/docs/docs/api/elements/button.md
+++ b/docs/docs/api/elements/button.md
@@ -54,11 +54,13 @@ By setting the `color` prop, you can style your button with any of Bulma's butto
 
 ```tsx live
 <Buttons>
-  {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(color => (
-    <Button key={color} color={color}>
-      {color.charAt(0).toUpperCase() + color.slice(1)}
-    </Button>
-  ))}
+  {(['primary', 'link', 'info', 'success', 'warning', 'danger'] as const).map(
+    color => (
+      <Button key={color} color={color}>
+        {color.charAt(0).toUpperCase() + color.slice(1)}
+      </Button>
+    )
+  )}
 </Buttons>
 ```
 
@@ -68,7 +70,7 @@ The `size` prop lets you adjust the button’s scale for various contexts. Suppo
 
 ```tsx live
 <Buttons>
-  {['small', 'normal', 'medium', 'large'].map(size => (
+  {(['small', 'normal', 'medium', 'large'] as const).map(size => (
     <Button key={size} size={size}>
       {size.charAt(0).toUpperCase() + size.slice(1)}
     </Button>
@@ -291,8 +293,8 @@ The props follow `as`, so the type checker already limits what you can pass to w
 
 ```tsx live
 function example() {
-  const buttonRef = React.useRef(null);
-  const [tag, setTag] = React.useState(null);
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const [tag, setTag] = React.useState<string>();
 
   return (
     <>
diff --git a/docs/docs/api/elements/buttons.md b/docs/docs/api/elements/buttons.md
index dc9fad4f9..d03547e97 100644
--- a/docs/docs/api/elements/buttons.md
+++ b/docs/docs/api/elements/buttons.md
@@ -54,11 +54,13 @@ This example shows a group of buttons, each with a different `color` prop (`prim
 
 ```tsx live
 <Buttons>
-  {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(color => (
-    <Button key={color} color={color}>
-      {color.charAt(0).toUpperCase() + color.slice(1)}
-    </Button>
-  ))}
+  {(['primary', 'link', 'info', 'success', 'warning', 'danger'] as const).map(
+    color => (
+      <Button key={color} color={color}>
+        {color.charAt(0).toUpperCase() + color.slice(1)}
+      </Button>
+    )
+  )}
 </Buttons>
 ```
 
@@ -68,7 +70,7 @@ Demonstrates a group of buttons with different `size` props (`small`, `normal`,
 
 ```tsx live
 <Buttons>
-  {['small', 'normal', 'medium', 'large'].map(size => (
+  {(['small', 'normal', 'medium', 'large'] as const).map(size => (
     <Button key={size} size={size}>
       {size.charAt(0).toUpperCase() + size.slice(1)}
     </Button>
diff --git a/docs/docs/api/elements/link.md b/docs/docs/api/elements/link.md
index d4ad4a8de..9a75a046a 100644
--- a/docs/docs/api/elements/link.md
+++ b/docs/docs/api/elements/link.md
@@ -179,8 +179,8 @@ Links work seamlessly inline within text content.
 
 ```tsx live
 function example() {
-  const linkRef = React.useRef(null);
-  const [tag, setTag] = React.useState(null);
+  const linkRef = React.useRef<HTMLAnchorElement>(null);
+  const [tag, setTag] = React.useState<string>();
 
   return (
     <>
diff --git a/docs/docs/api/elements/linkbutton.md b/docs/docs/api/elements/linkbutton.md
index 44b8982b2..7f8256472 100644
--- a/docs/docs/api/elements/linkbutton.md
+++ b/docs/docs/api/elements/linkbutton.md
@@ -90,11 +90,13 @@ Colors work with the ghost variant too.
 
 ```tsx live
 <Buttons>
-  {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(color => (
-    <LinkButton key={color} color={color}>
-      {color.charAt(0).toUpperCase() + color.slice(1)}
-    </LinkButton>
-  ))}
+  {(['primary', 'link', 'info', 'success', 'warning', 'danger'] as const).map(
+    color => (
+      <LinkButton key={color} color={color}>
+        {color.charAt(0).toUpperCase() + color.slice(1)}
+      </LinkButton>
+    )
+  )}
 </Buttons>
 ```
 
@@ -110,7 +112,7 @@ Colors work with the ghost variant too.
 
 ```tsx live
 <Buttons>
-  {['small', 'normal', 'medium', 'large'].map(size => (
+  {(['small', 'normal', 'medium', 'large'] as const).map(size => (
     <LinkButton key={size} size={size}>
       {size.charAt(0).toUpperCase() + size.slice(1)}
     </LinkButton>
@@ -139,9 +141,9 @@ import { LinkButton } from '@allxsmith/bestax-bulma';
 
 ```tsx live
 function example() {
-  const defaultRef = React.useRef(null);
-  const anchorRef = React.useRef(null);
-  const [tags, setTags] = React.useState(null);
+  const defaultRef = React.useRef<HTMLButtonElement>(null);
+  const anchorRef = React.useRef<HTMLAnchorElement>(null);
+  const [tags, setTags] = React.useState<string>();
 
   return (
     <>
diff --git a/docs/docs/api/elements/subtitle.md b/docs/docs/api/elements/subtitle.md
index 90c688e81..fb2099955 100644
--- a/docs/docs/api/elements/subtitle.md
+++ b/docs/docs/api/elements/subtitle.md
@@ -99,7 +99,7 @@ Quickly render all subtitle sizes from `1` to `6` using a map function. This is
 
 ```tsx live
 <>
-  {['1', '2', '3', '4', '5', '6'].map(size => (
+  {(['1', '2', '3', '4', '5', '6'] as const).map(size => (
     <SubTitle key={size} size={size}>
       SubTitle Size {size}
     </SubTitle>
diff --git a/docs/docs/api/elements/tag.md b/docs/docs/api/elements/tag.md
index fe874d673..75994e68d 100644
--- a/docs/docs/api/elements/tag.md
+++ b/docs/docs/api/elements/tag.md
@@ -118,18 +118,20 @@ Render a set of tags with different `color` values to display a palette of avail
 
 ```tsx live
 <Tags>
-  {[
-    'primary',
-    'link',
-    'info',
-    'success',
-    'warning',
-    'danger',
-    'black',
-    'dark',
-    'light',
-    'white',
-  ].map(color => (
+  {(
+    [
+      'primary',
+      'link',
+      'info',
+      'success',
+      'warning',
+      'danger',
+      'black',
+      'dark',
+      'light',
+      'white',
+    ] as const
+  ).map(color => (
     <Tag key={color} color={color} isHoverable>
       {color.charAt(0).toUpperCase() + color.slice(1)}
     </Tag>
@@ -143,7 +145,7 @@ You can combine `color`, `size`, and `isHoverable` props to show all size varian
 
 ```tsx live
 <Block>
-  {['primary', 'success', 'danger'].map(color => (
+  {(['primary', 'success', 'danger'] as const).map(color => (
     <Tags key={color}>
       <Tag color={color} size="normal" isHoverable>
         {color.charAt(0).toUpperCase() + color.slice(1)} Normal
diff --git a/docs/docs/api/elements/tags.md b/docs/docs/api/elements/tags.md
index d5e9a4971..d6db9883c 100644
--- a/docs/docs/api/elements/tags.md
+++ b/docs/docs/api/elements/tags.md
@@ -107,7 +107,7 @@ Combine props such as `size`, `isRounded`, and `isDelete` to create flexible, in
 
 ```tsx live
 function example() {
-  const [show, setShow] = useState();
+  const [show, setShow] = useState(true);
 
   return (
     <Tags>
diff --git a/docs/docs/api/elements/title.md b/docs/docs/api/elements/title.md
index cedea1c49..be8d9e86c 100644
--- a/docs/docs/api/elements/title.md
+++ b/docs/docs/api/elements/title.md
@@ -107,7 +107,7 @@ Quickly render titles of all sizes from `1` to `6` using a map function. This is
 
 ```tsx live
 <>
-  {['1', '2', '3', '4', '5', '6'].map(size => (
+  {(['1', '2', '3', '4', '5', '6'] as const).map(size => (
     <Title key={size} size={size}>
       Title Size {size}
     </Title>
diff --git a/docs/docs/api/form/autocomplete.md b/docs/docs/api/form/autocomplete.md
index fee91035e..1856c5e47 100644
--- a/docs/docs/api/form/autocomplete.md
+++ b/docs/docs/api/form/autocomplete.md
@@ -34,11 +34,11 @@ import { Autocomplete } from '@allxsmith/bestax-bulma';
 
 ### Basic Autocomplete
 
-Simple autocomplete with string array.
+Simple autocomplete with string array. `onSelect` is typed for either kind of `data`, as `string | AutocompleteItem | null`, so narrow the item to the kind you passed before storing it.
 
 ```tsx live
 function example() {
-  const [selected, setSelected] = useState(null);
+  const [selected, setSelected] = useState<string | null>(null);
   const fruits = [
     'Apple',
     'Banana',
@@ -54,7 +54,7 @@ function example() {
       <Autocomplete
         data={fruits}
         placeholder="Search fruit..."
-        onSelect={setSelected}
+        onSelect={item => setSelected(typeof item === 'string' ? item : null)}
       />
       {selected && <Paragraph mt="2">Selected: {selected}</Paragraph>}
     </Block>
@@ -70,7 +70,6 @@ Dropdown opens immediately when input is focused.
 
 ```tsx live
 function example() {
-  const [selected, setSelected] = useState(null);
   const countries = [
     'United States',
     'United Kingdom',
@@ -85,7 +84,6 @@ function example() {
       data={countries}
       placeholder="Select a country..."
       openOnFocus
-      onSelect={setSelected}
     />
   );
 }
@@ -99,16 +97,10 @@ Autocomplete with clearable input. The clear button shows while the input holds
 
 ```tsx live
 function example() {
-  const [selected, setSelected] = useState(null);
   const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
 
   return (
-    <Autocomplete
-      data={options}
-      placeholder="Search options..."
-      clearable
-      onSelect={setSelected}
-    />
+    <Autocomplete data={options} placeholder="Search options..." clearable />
   );
 }
 ```
@@ -151,16 +143,16 @@ Autocomplete with different colors and sizes.
 
 ### With Object Data
 
-Autocomplete with object items.
+Autocomplete with object items. `onSelect` passes back the item you picked, so looking it up in your own array by its `value` gives it back with your fields typed.
 
 ```tsx live
 function example() {
-  const [selected, setSelected] = useState(null);
   const users = [
     { value: '1', label: 'John Doe', email: 'john@example.com' },
     { value: '2', label: 'Jane Smith', email: 'jane@example.com' },
     { value: '3', label: 'Bob Johnson', email: 'bob@example.com' },
   ];
+  const [selected, setSelected] = useState<(typeof users)[number] | null>(null);
 
   return (
     <Block>
@@ -169,7 +161,13 @@ function example() {
         field="label"
         placeholder="Search users..."
         openOnFocus
-        onSelect={setSelected}
+        onSelect={item =>
+          setSelected(
+            users.find(
+              u => u.value === (typeof item === 'string' ? item : item?.value)
+            ) ?? null
+          )
+        }
       />
       {selected && (
         <Paragraph mt="2">
@@ -185,11 +183,10 @@ function example() {
 
 ### Custom Item Template
 
-Autocomplete with custom item rendering.
+Autocomplete with custom item rendering. `itemTemplate` receives each item the same way, so the template looks it up by `value` too.
 
 ```tsx live
 function example() {
-  const [selected, setSelected] = useState(null);
   const users = [
     { value: '1', label: 'John Doe', role: 'Admin' },
     { value: '2', label: 'Jane Smith', role: 'Editor' },
@@ -202,15 +199,19 @@ function example() {
       field="label"
       placeholder="Search users..."
       openOnFocus
-      onSelect={setSelected}
-      itemTemplate={item => (
-        <Block display="flex" justifyContent="space-between">
-          <Span>{item.label}</Span>
-          <Tag color="info" light>
-            {item.role}
-          </Tag>
-        </Block>
-      )}
+      itemTemplate={item => {
+        const user = users.find(
+          u => u.value === (typeof item === 'string' ? item : item.value)
+        );
+        return (
+          <Block display="flex" justifyContent="space-between">
+            <Span>{user?.label}</Span>
+            <Tag color="info" isLight>
+              {user?.role}
+            </Tag>
+          </Block>
+        );
+      }}
     />
   );
 }
diff --git a/docs/docs/api/form/checkboxes.md b/docs/docs/api/form/checkboxes.md
index 18ae3acd4..38b74d6e2 100644
--- a/docs/docs/api/form/checkboxes.md
+++ b/docs/docs/api/form/checkboxes.md
@@ -171,7 +171,7 @@ function ControlledCheckboxes() {
 
 ```tsx live
 function UncontrolledCheckboxes() {
-  const [latest, setLatest] = React.useState([]);
+  const [latest, setLatest] = React.useState<string[]>([]);
   return (
     <div>
       <Checkboxes
diff --git a/docs/docs/api/form/datetime/dateinput.md b/docs/docs/api/form/datetime/dateinput.md
index ec3ec43ae..e352da007 100644
--- a/docs/docs/api/form/datetime/dateinput.md
+++ b/docs/docs/api/form/datetime/dateinput.md
@@ -64,7 +64,7 @@ Manage state externally with `value` and `onChange`.
 
 ```tsx live
 function example() {
-  const [value, setValue] = useState(new Date());
+  const [value, setValue] = useState<Date | null>(new Date());
   return (
     <Block>
       <DateInput label="Date" value={value} onChange={setValue} />
@@ -80,7 +80,7 @@ function example() {
 
 ```tsx live
 function example() {
-  const [value, setValue] = useState(new Date());
+  const [value, setValue] = useState<Date | null>(new Date());
   return (
     <Block>
       <DateInput
@@ -324,7 +324,7 @@ For an `Intl.DateTimeFormatOptions` format, supply a `parse` so typed text round
 
 ```tsx live
 function example() {
-  const parse = s => {
+  const parse = (s: string) => {
     const t = Date.parse(s);
     return isNaN(t) ? null : new Date(t);
   };
@@ -344,7 +344,7 @@ function example() {
 
 ```tsx live
 function example() {
-  const parse = s => {
+  const parse = (s: string) => {
     const t = Date.parse(s);
     return isNaN(t) ? null : new Date(t);
   };
@@ -455,7 +455,7 @@ function example() {
 
 ```tsx live
 function example() {
-  const [v, setV] = useState(() => new Date(2024, 5, 7));
+  const [v, setV] = useState<Date | null>(() => new Date(2024, 5, 7));
   return (
     <Block>
       <DateInput
diff --git a/docs/docs/api/form/datetime/daterangeinput.md b/docs/docs/api/form/datetime/daterangeinput.md
index aca78ea26..c0a2f31f4 100644
--- a/docs/docs/api/form/datetime/daterangeinput.md
+++ b/docs/docs/api/form/datetime/daterangeinput.md
@@ -49,8 +49,10 @@ function example() {
 The value is a `[start, end]` pair, and either end can be `null`. The calendar reports a range once it has both ends. Typing reports each end as it changes, so a range typed halfway arrives as `[start, null]`.
 
 ```tsx live
+import type { DateRangeValue } from '@allxsmith/bestax-bulma';
+
 function ControlledRange() {
-  const [range, setRange] = React.useState([null, null]);
+  const [range, setRange] = React.useState<DateRangeValue>([null, null]);
   const [start, end] = range;
   return (
     <Block>
@@ -104,7 +106,7 @@ function NextMonth() {
 
 ```tsx live
 function Weekdays() {
-  const weekend = d => d.getDay() === 0 || d.getDay() === 6;
+  const weekend = (d: Date) => d.getDay() === 0 || d.getDay() === 6;
   return (
     <Block>
       <DateRangeInput label="Weekdays only" shouldDisableDate={weekend} />
diff --git a/docs/docs/api/form/datetime/datetimeinput.md b/docs/docs/api/form/datetime/datetimeinput.md
index e9b004bc4..c15f9c72b 100644
--- a/docs/docs/api/form/datetime/datetimeinput.md
+++ b/docs/docs/api/form/datetime/datetimeinput.md
@@ -56,7 +56,7 @@ The popover opens to the calendar with an iOS-style footer — the selected time
 
 ```tsx live
 function example() {
-  const [v, setV] = useState(new Date());
+  const [v, setV] = useState<Date | null>(new Date());
   return (
     <Block>
       <DateTimeInput label="Meeting" value={v} onChange={setV} />
@@ -70,7 +70,7 @@ function example() {
 
 ```tsx live
 function example() {
-  const [v, setV] = useState(new Date());
+  const [v, setV] = useState<Date | null>(new Date());
   return (
     <Block>
       <DateTimeInput
@@ -687,7 +687,7 @@ function example() {
 
 ```tsx live
 function example() {
-  const [v, setV] = useState(() => new Date(2024, 5, 7, 13, 45));
+  const [v, setV] = useState<Date | null>(() => new Date(2024, 5, 7, 13, 45));
   return (
     <Block>
       <DateTimeInput
diff --git a/docs/docs/api/form/datetime/timeinput.md b/docs/docs/api/form/datetime/timeinput.md
index bcbd063a6..3afa7901d 100644
--- a/docs/docs/api/form/datetime/timeinput.md
+++ b/docs/docs/api/form/datetime/timeinput.md
@@ -50,7 +50,7 @@ import { TimeInput } from '@allxsmith/bestax-bulma';
 
 ```tsx live
 function example() {
-  const [v, setV] = useState(() => {
+  const [v, setV] = useState<Date | null>(() => {
     const d = new Date();
     d.setHours(13, 45, 0, 0);
     return d;
@@ -68,7 +68,7 @@ function example() {
 
 ```tsx live
 function example() {
-  const [v, setV] = useState(() => {
+  const [v, setV] = useState<Date | null>(() => {
     const d = new Date();
     d.setHours(13, 45, 0, 0);
     return d;
@@ -294,7 +294,7 @@ On iOS Safari the picker UI lets the user spin to any time; `min`/`max` only fir
 
 ```tsx live
 function example() {
-  const at = (h, m) => {
+  const at = (h: number, m: number) => {
     const d = new Date();
     d.setHours(h, m, 0, 0);
     return d;
@@ -412,7 +412,7 @@ The value updates on every increment, digit, or AM/PM toggle — exactly like th
 
 ```tsx live
 function example() {
-  const [v, setV] = useState(() => {
+  const [v, setV] = useState<Date | null>(() => {
     const d = new Date();
     d.setHours(13, 45, 0, 0);
     return d;
@@ -825,7 +825,9 @@ function example() {
   v.setHours(8, 30, 0, 0);
   return (
     <Block display="flex" flexWrap="wrap">
-      {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(c => (
+      {(
+        ['primary', 'link', 'info', 'success', 'warning', 'danger'] as const
+      ).map(c => (
         <Block key={c} mr="4">
           <TimeInput label={c} color={c} inline defaultValue={v} />
         </Block>
diff --git a/docs/docs/api/form/field.md b/docs/docs/api/form/field.md
index 4c743e6a3..914030403 100644
--- a/docs/docs/api/form/field.md
+++ b/docs/docs/api/form/field.md
@@ -216,7 +216,7 @@ You can use the `Field` component to create horizontal layouts for static and ed
 <>
   <Field horizontal label="Username">
     <Control>
-      <Input isStatic value="Static value" />
+      <Input isStatic readOnly value="Static value" />
     </Control>
   </Field>
   <Field horizontal label="Password">
diff --git a/docs/docs/api/form/radios.md b/docs/docs/api/form/radios.md
index db607e44b..16a3a237d 100644
--- a/docs/docs/api/form/radios.md
+++ b/docs/docs/api/form/radios.md
@@ -234,7 +234,7 @@ The same `name` propagation works through any wrapper — useful for layouts lik
 ```tsx live
 function RadiosWrappedFormDemo() {
   const [submitted, setSubmitted] = React.useState('');
-  const RadioCard = ({ value, label }) => (
+  const RadioCard = ({ value, label }: { value: string; label: string }) => (
     <div
       style={{
         padding: '0.5rem',
diff --git a/docs/docs/api/form/rate.md b/docs/docs/api/form/rate.md
index 3b2881631..b1e5ea297 100644
--- a/docs/docs/api/form/rate.md
+++ b/docs/docs/api/form/rate.md
@@ -165,7 +165,7 @@ Rating with custom heart icons.
 function example() {
   const [rating, setRating] = useState(3);
 
-  const HeartIcon = ({ isActive }) => (
+  const HeartIcon = ({ isActive }: { isActive: boolean }) => (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
@@ -235,7 +235,7 @@ function example() {
     <Field horizontal label="Rating">
       <Field.Body>
         <Field>
-          <Control iconLeftName="star">
+          <Control>
             <Rate defaultValue={3} />
           </Control>
         </Field>
diff --git a/docs/docs/api/form/switch.md b/docs/docs/api/form/switch.md
index df7d5e741..22879759a 100644
--- a/docs/docs/api/form/switch.md
+++ b/docs/docs/api/form/switch.md
@@ -263,9 +263,11 @@ function example() {
     autoSave: true,
   });
 
-  const updateSetting = key => e => {
-    setSettings(prev => ({ ...prev, [key]: e.target.checked }));
-  };
+  const updateSetting =
+    (key: keyof typeof settings) =>
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSettings(prev => ({ ...prev, [key]: e.target.checked }));
+    };
 
   return (
     <Block style={{ maxWidth: '300px' }}>
diff --git a/docs/docs/api/form/taginput.md b/docs/docs/api/form/taginput.md
index 51c26c170..37e0cfac8 100644
--- a/docs/docs/api/form/taginput.md
+++ b/docs/docs/api/form/taginput.md
@@ -39,8 +39,10 @@ The component is exported as `Taginput`; a deprecated `TagInput` alias names the
 Simple tag input without suggestions.
 
 ```tsx live
+import type { TaginputTag } from '@allxsmith/bestax-bulma';
+
 function example() {
-  const [tags, setTags] = useState(['React', 'TypeScript']);
+  const [tags, setTags] = useState<TaginputTag[]>(['React', 'TypeScript']);
 
   return (
     <Block>
@@ -60,8 +62,10 @@ function example() {
 Tag input with suggestion dropdown.
 
 ```tsx live
+import type { TaginputTag } from '@allxsmith/bestax-bulma';
+
 function example() {
-  const [tags, setTags] = useState(['React']);
+  const [tags, setTags] = useState<TaginputTag[]>(['React']);
   const suggestions = [
     'React',
     'Vue',
@@ -92,8 +96,10 @@ function example() {
 Only allow tags from the suggestion list.
 
 ```tsx live
+import type { TaginputTag } from '@allxsmith/bestax-bulma';
+
 function example() {
-  const [tags, setTags] = useState([]);
+  const [tags, setTags] = useState<TaginputTag[]>([]);
   const categories = [
     'Bug',
     'Feature',
@@ -202,8 +208,10 @@ Tag inputs in different sizes.
 Limit the number of tags allowed.
 
 ```tsx live
+import type { TaginputTag } from '@allxsmith/bestax-bulma';
+
 function example() {
-  const [tags, setTags] = useState(['One', 'Two']);
+  const [tags, setTags] = useState<TaginputTag[]>(['One', 'Two']);
 
   return (
     <Block>
@@ -229,8 +237,10 @@ function example() {
 Enable duplicate tag values.
 
 ```tsx live
+import type { TaginputTag } from '@allxsmith/bestax-bulma';
+
 function example() {
-  const [tags, setTags] = useState(['Tag']);
+  const [tags, setTags] = useState<TaginputTag[]>(['Tag']);
 
   return (
     <Taginput
@@ -251,8 +261,10 @@ function example() {
 Change which keys create a new tag.
 
 ```tsx live
+import type { TaginputTag } from '@allxsmith/bestax-bulma';
+
 function example() {
-  const [tags, setTags] = useState([]);
+  const [tags, setTags] = useState<TaginputTag[]>([]);
 
   return (
     <Block>
@@ -405,7 +417,9 @@ Inside a `Control` with no `Field` around it, `Taginput` renders no `Field` of i
 Use `value` and `onChange` to manage state externally:
 
 ```tsx
-const [tags, setTags] = useState(['React']);
+import type { TaginputTag } from '@allxsmith/bestax-bulma';
+
+const [tags, setTags] = useState<TaginputTag[]>(['React']);
 <Taginput value={tags} onChange={setTags} />;
 ```
 
diff --git a/docs/docs/api/helpers/usebulmaclasses.md b/docs/docs/api/helpers/usebulmaclasses.md
index f2f7b16ea..8686d520b 100644
--- a/docs/docs/api/helpers/usebulmaclasses.md
+++ b/docs/docs/api/helpers/usebulmaclasses.md
@@ -192,8 +192,13 @@ The snippets below rebuild simplified components by hand purely to show how `use
 `MyColumns` forwards all of its props to `useBulmaClasses` — the `textAlign` and `textTransform` helper props below flow through `props` into the hook (producing `has-text-centered is-uppercase`), while anything the hook doesn't recognize comes back in `rest` and lands on the `<div>`:
 
 ```tsx live
+import type { BulmaClassesProps } from '@allxsmith/bestax-bulma';
+
 function example() {
-  function MyColumns({ children, ...props }) {
+  function MyColumns({
+    children,
+    ...props
+  }: BulmaClassesProps & React.ComponentPropsWithoutRef<'div'>) {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     return (
       <div className={classNames('columns', bulmaHelperClasses)} {...rest}>
@@ -945,6 +950,8 @@ import {
 Here is a small custom component that only needs color and spacing helpers:
 
 ```tsx live
+import type { BulmaClassesProps } from '@allxsmith/bestax-bulma';
+
 function example() {
   function PriceTag({
     color,
@@ -952,7 +959,7 @@ function example() {
     backgroundColorShade,
     m,
     children,
-  }) {
+  }: BulmaClassesProps & { children?: React.ReactNode }) {
     const colorClasses = useColorClasses({
       color,
       backgroundColor,
diff --git a/docs/docs/guides/getting-started/variations.md b/docs/docs/guides/getting-started/variations.md
index 95110193a..c0f17dcb7 100644
--- a/docs/docs/guides/getting-started/variations.md
+++ b/docs/docs/guides/getting-started/variations.md
@@ -28,7 +28,6 @@ import '@allxsmith/bestax-bulma/bestax.css';
 **Usage:**
 
 ```tsx live
-import React from 'react';
 import { Button, Box, Title } from '@allxsmith/bestax-bulma';
 import '@allxsmith/bestax-bulma/bestax.css';
 
@@ -58,7 +57,6 @@ import '@allxsmith/bestax-bulma/versions/bestax-prefixed.css';
 **Usage:**
 
 ```tsx live
-import React from 'react';
 import { ConfigProvider, Button, Box, Title } from '@allxsmith/bestax-bulma';
 import '@allxsmith/bestax-bulma/versions/bestax-prefixed.css';
 
@@ -85,8 +83,9 @@ This renders HTML with prefixed classes:
 
 ```html title="HTML markup from example above"
 <div class="bestax-box">
-  <h1 class="bestax-title">Bestax-Prefixed Components</h1>
-  <button class="bestax-button bestax-is-primary">
+  <h2 class="bestax-title bestax-is-2">Bestax-Prefixed Components</h2>
+  <p>All components inside this ConfigProvider …</p>
+  <button class="bestax-button bestax-is-primary bestax-mt-3">
     Bestax-Prefixed Button
   </button>
 </div>
@@ -108,7 +107,6 @@ import '@allxsmith/bestax-bulma/versions/bestax-no-helpers.css';
 **Usage:**
 
 ```tsx
-import React from 'react';
 import { Button, Box, Title } from '@allxsmith/bestax-bulma';
 import '@allxsmith/bestax-bulma/versions/bestax-no-helpers.css';
 
@@ -143,7 +141,6 @@ import '@allxsmith/bestax-bulma/versions/bestax-no-helpers-prefixed.css';
 **Usage:**
 
 ```tsx
-import React from 'react';
 import { ConfigProvider, Button, Box, Title } from '@allxsmith/bestax-bulma';
 import '@allxsmith/bestax-bulma/versions/bestax-no-helpers-prefixed.css';
 
@@ -175,7 +172,6 @@ import '@allxsmith/bestax-bulma/versions/bestax-no-dark-mode.css';
 **Usage:**
 
 ```tsx
-import React from 'react';
 import { Button, Box, Title } from '@allxsmith/bestax-bulma';
 import '@allxsmith/bestax-bulma/versions/bestax-no-dark-mode.css';
 
@@ -233,7 +229,6 @@ For teams that want a custom class prefix matching their brand or organization.
 **Usage:**
 
 ```tsx
-import React from 'react';
 import { ConfigProvider, Button, Box, Title } from '@allxsmith/bestax-bulma';
 import './styles/mycompany-bestax.scss';