bestax-mcp 0.0.0

package/data/skills/bestax-custom-component/examples/stat-card.tsx

@@ -0,0 +1,105 @@
+// StatCard — the app-side worked example for the bestax-custom-component skill.
+// (The library-contributor counterpart is Dialog, in references/patterns.md.)
+//
+// Context: an app depending on @allxsmith/bestax-bulma (e.g. `npm create bestax`).
+// Everything imports from the package; no monorepo wiring, no Sass pipeline.
+//
+// It demonstrates the two lowest rungs of the styling ladder:
+//   Rung 1 — composition + helper props only (StatCard): Box/Title/Icon plus
+//            flexbox and spacing helper props. No CSS written at all.
+//   Rung 2 — a small scoped CSS file consuming --bulma-* variables (the
+//            commented block at the bottom) for the one thing helper props
+//            can't do (an accent border), keeping Theme + dark mode working.
+import type React from 'react';
+import {
+  Box,
+  Title,
+  Icon,
+  classNames,
+  usePrefixedClassNames,
+  useBulmaClasses,
+  type BulmaClassesProps,
+} from '@allxsmith/bestax-bulma';
+
+export interface StatCardProps
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,
+    Omit<BulmaClassesProps, 'color'> {
+  /** Metric label, e.g. "Active users". */
+  label: string;
+  /** The headline value, e.g. "12,481". */
+  value: string;
+  /** Icon name (Font Awesome by default), e.g. "users". */
+  icon?: string;
+  /** Bulma color for the icon + accent. */
+  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+}
+
+export function StatCard({
+  label,
+  value,
+  icon,
+  color = 'primary',
+  className,
+  ...props
+}: StatCardProps) {
+  // The library's own spine, via public exports: helper props in, classes out.
+  const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+  const mainClasses = usePrefixedClassNames('statcard', {
+    [`is-${color}`]: !!color,
+  });
+
+  return (
+    <Box
+      className={classNames(mainClasses, bulmaHelperClasses, className)}
+      // Rung 1: layout entirely with helper props — no style={{}}, no CSS.
+      display="flex"
+      alignItems="center"
+      p="4"
+      {...rest}
+    >
+      {icon && (
+        <Icon
+          name={icon}
+          size="large"
+          textColor={color}
+          mr="4"
+          // Decorative: the label below already says it, so hide it from AT —
+          // Icon otherwise emits its default aria-label="icon". (To *label* an
+          // icon, use Icon's own camelCase `ariaLabel`; most components take
+          // the plain aria-label attribute.)
+          aria-hidden="true"
+        />
+      )}
+      {/* No `gap` helper exists — space siblings with margin props (mr above). */}
+      <div>
+        {/* as="p": the sizes are visual scale, not document structure — a bare
+            <Title size> renders a heading and breaks the page outline. */}
+        <Title as="p" size="6" textColor="grey" mb="1">
+          {label}
+        </Title>
+        <Title as="p" size="3" mb="0">
+          {value}
+        </Title>
+      </div>
+    </Box>
+  );
+}
+
+// Rung 2 (optional) — src/components/StatCard.css, imported from this file:
+//
+//   .statcard {
+//     /* Component-scoped custom props initialized from Bulma tokens, so any
+//        ancestor (or <Theme>) can re-theme the card by overriding them. */
+//     --statcard-accent: var(--bulma-primary);
+//     --statcard-radius: var(--bulma-radius);
+//     border-left: 0.25rem solid var(--statcard-accent);
+//     border-radius: var(--statcard-radius);
+//   }
+//   .statcard.is-success { --statcard-accent: var(--bulma-success); }
+//   .statcard.is-danger  { --statcard-accent: var(--bulma-danger);  }
+//
+// Only --bulma-*-derived values — never literal colors — so dark mode and
+// Theme overrides keep working. Caveat: if the app uses the prefixed CSS
+// flavor / ConfigProvider classPrefix, usePrefixedClassNames renders
+// `bestax-statcard`; adjust the selectors (or use plain classNames).

package/data/skills/bestax-custom-component/references/api.md

@@ -0,0 +1,90 @@
+# Reference: helper APIs for building components
+
+Everything below is public API. Where to import from depends on your context:
+
+| Context                                       | Import from                                      |
+| --------------------------------------------- | ------------------------------------------------ |
+| An app depending on `@allxsmith/bestax-bulma` | `'@allxsmith/bestax-bulma'`                      |
+| Inside the bestax monorepo (`bulma-ui/src/`)  | Relative paths — `'../helpers/classNames'`, etc. |
+
+## `useBulmaClasses(props)` — `helpers/useBulmaClasses.tsx`
+
+Turns Bulma helper props into a class string and returns the leftover (non-helper) props.
+
+```ts
+const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+// bulmaHelperClasses: e.g. 'has-text-primary is-size-3 m-3'
+// rest: every prop that was NOT a recognized helper (safe to spread on the DOM)
+```
+
+`BulmaClassesProps` is the union of all helper prop groups, composed from per-concern hooks
+that can also be used on their own:
+
+| Group      | Hook                   | Representative props                                                                                                             |
+| ---------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| Color      | `useColorClasses`      | `color`, `colorShade`, `backgroundColor`, `backgroundColorShade`                                                                 |
+| Spacing    | `useSpacingClasses`    | `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my`, `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py`                                                 |
+| Typography | `useTypographyClasses` | `textSize`, `textAlign`, `textTransform`, `textWeight`, `fontFamily` (+ responsive variants)                                     |
+| Visibility | `useVisibilityClasses` | `display`, `visibility` (+ per-viewport variants)                                                                                |
+| Flexbox    | `useFlexboxClasses`    | `flexDirection`, `flexWrap`, `justifyContent`, `alignItems`, `alignContent`, `alignSelf`, `flexGrow`, `flexShrink`               |
+| Other      | `useOtherClasses`      | `float`, `overflow`, `radius`, `shadow`, `interaction`, `cursor`, `skeleton`, `clearfix`, `relative`, `fullHeight`, `responsive` |
+
+Because the component destructures these into `bulmaHelperClasses`, callers get the full Bulma
+helper surface for free on every component built this way, and `rest` stays clean for DOM
+spreading. (Library compound sub-parts — `Card.Content`, `Modal.Card`, `Tabs.Tab`,
+`Message.Body` — do **not** take helper props: just `className`, HTML attributes, and their own
+few, e.g. `Tabs.Tab`'s required `index` and its built-in `icon`/`disabled` props.)
+
+## `classNames(...)` and friends — `helpers/classNames.ts`
+
+```ts
+classNames('foo', ['bar', { baz: true }], { qux: false }); // => 'foo bar baz'
+```
+
+Accepts strings, numbers, arrays, and objects (truthy keys included); flattens recursively and
+de-dupes. Related exports:
+
+- `usePrefixedClassNames(...args)` — **use this in components.** Reads `classPrefix` from the
+  `ConfigProvider` context and prefixes every class. With `classPrefix="bulma-"`,
+  `usePrefixedClassNames('button', { 'is-primary': true })` → `'bulma-button bulma-is-primary'`.
+- `prefixedClassNames(prefix, ...args)` — non-hook form; pass `undefined` for no prefix.
+- `createPrefixedClassNames(prefix)` — factory returning a bound `classNames`.
+
+## Valid-value constants — `helpers/bulmaClassHelpers.ts`
+
+Re-exported through `useBulmaClasses`. Use them to type component-specific props and to drive
+Storybook `argTypes`/tests:
+
+`validColors`, `validColorShades`, `validSizes`, `validTextSizes`, `validAlignments`,
+`validTextTransforms`, `validTextWeights`, `validFontFamilies`, `validDisplays`,
+`validVisibilities`, `validFlexDirections`, `validFlexWraps`, `validJustifyContents`,
+`validAlignContents`, `validAlignItems`, `validAlignSelfs`, `validFlexGrowShrink`,
+`validViewports`.
+
+```ts
+export type MyColor = (typeof validColors)[number];
+```
+
+## `ConfigProvider` / `Theme` — `helpers/Config.tsx`, `helpers/Theme.tsx`
+
+`ConfigProvider` provides the runtime `classPrefix` (and `iconLibrary`) consumed via `useConfig`;
+`classPrefix` feeds `usePrefixedClassNames` (opt-in class prefixing to avoid collisions). `Theme`
+overrides `--bulma-*` custom properties at runtime —
+which is exactly why component SCSS must register its vars via `cv.register-vars` rather than
+hard-coding values.
+
+## SCSS utilities — from the `bulma` package
+
+```scss
+@use 'bulma/sass/utilities/initial-variables' as iv; // iv.$class-prefix
+@use 'bulma/sass/utilities/css-variables' as cv; // cv.getVar, cv.register-vars
+```
+
+In an app these work too (styling-ladder rung 3 in `SKILL.md`): `npm i -D sass` and Vite
+compiles imported `.scss` zero-config — `bulma` resolves because it's a runtime dependency of
+bestax-bulma.
+
+- `iv.$class-prefix` — the configurable class prefix; prepend to every selector.
+- `cv.getVar("name")` — emits `var(--bulma-name)`; use for both Bulma vars (`"primary"`,
+  `"radius"`, `"scheme-main"`, `"text"`) and your own registered vars.
+- `cv.register-vars((...))` — declares `--bulma-*` custom properties on the current selector.

package/data/skills/bestax-custom-component/references/component-catalog.md

@@ -0,0 +1,149 @@
+<!-- GENERATED by scripts/gen-component-catalog.mjs — do not edit by hand. -->
+<!-- Regenerate with `npm run gen:catalog`. Source: docs/docs/api/**. -->
+
+# Component catalog
+
+Every **documented** component of `@allxsmith/bestax-bulma`, so you **don't
+reinvent one that already exists**. Import everything from the package root
+(`@allxsmith/bestax-bulma`). Scan this list first; if a component fits, use it
+instead of hand-writing markup.
+
+- **Full props are not listed here** (that would be too large to keep in context).
+  Follow a component's link for its complete prop table, or see the per-skill
+  references. Value unions (`size`, `color`, variants) differ per component —
+  never reuse one by analogy (`Tag size` is `normal|medium|large`; `Button`
+  adds `small`): the bestax-theming skill's
+  `references/themeable-components.md` lists them verbatim. The installed
+  types are at `node_modules/@allxsmith/bestax-bulma/dist/types/` (the
+  symlink resolves under pnpm's isolated linker — go straight there, no
+  `find` hunt), and when a `.d.ts` shows an opaque alias (`size?: TagSize`),
+  grep the alias name in that same file for the literals instead of guessing.
+  Top-level components accept the shared Bulma **helper props**
+  (`m`/`p` spacing, `textColor`/`bgColor`, `textAlign`, `display`, flex, …) —
+  documented once in `references/api.md` — with rare exceptions (`Skeleton`).
+- **Compound components** expose sub-parts via dot access (e.g. `Card.Header`,
+  `Navbar.Item`, `Tabs.Tab`, `Hero.Body`, `Columns.Column`, `Table.Tr`); see the
+  component's linked page for the full set. Sub-parts do **not** all take helper
+  props: the `Table.*`, `Menu.*`, and `Hero.*` families do (most `Navbar.*`
+  too), but `Card.*`, `Modal.*`, `Tabs.*`, and `Message.*` sub-parts take none —
+  just `className`, HTML attributes, and their own few (`Tabs.Tab` requires
+  `index` and has built-in `icon`/`disabled` props). Put helper props on the
+  parent or on an element inside (`Span`, `Paragraph`, …) instead.
+- **Composing these into your own reusable component?** Use the spine in this
+  skill's `SKILL.md`: extend `BulmaClassesProps`, run your props through
+  `useBulmaClasses`, merge its `bulmaHelperClasses` into `className`, and spread
+  the `rest` it returns — so it takes the same helper props as the library
+  components.
+- Raw `*Base` form exports (`InputBase`, `SelectBase`, `TextAreaBase`, …) are
+  escape-hatch variants of the convenience wrappers above them; see the Form docs.
+
+87 documented components. Generated from the API docs — every exported
+component is guaranteed to appear (the generator fails if one lacks an API page).
+
+## Elements
+
+- [Block](https://bestax.io/docs/api/elements/block) — The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
+- [Box](https://bestax.io/docs/api/elements/box) — The `Box` component renders a bordered, padded container with an optional shadow using Bulma's `.box` class.
+- [Button](https://bestax.io/docs/api/elements/button) — The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
+- [Buttons](https://bestax.io/docs/api/elements/buttons) — The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.
+- [Code](https://bestax.io/docs/api/elements/code) — The `Code` component renders a styled `<code>` element with Bulma helper class integration.
+- [Content](https://bestax.io/docs/api/elements/content) — The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists…
+- [Delete](https://bestax.io/docs/api/elements/delete) — The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more.
+- [Divider](https://bestax.io/docs/api/elements/divider) — The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration.
+- [Emphasis](https://bestax.io/docs/api/elements/emphasis) — The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration.
+- [Figure](https://bestax.io/docs/api/elements/figure) — The `Figure` component renders a styled `<figure>` element with Bulma helper class integration.
+- [Icon](https://bestax.io/docs/api/elements/icon) — The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons…
+- [IconText](https://bestax.io/docs/api/elements/icontext) — The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
+- [Image](https://bestax.io/docs/api/elements/image) — The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners…
+- [Link](https://bestax.io/docs/api/elements/link) — The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
+- [LinkButton](https://bestax.io/docs/api/elements/linkbutton) — The `LinkButton` component renders a `<button>` that visually looks like text or a link.
+- [ListItem](https://bestax.io/docs/api/elements/listitem) — The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
+- [Notification](https://bestax.io/docs/api/elements/notification) — The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
+- [OrderedList](https://bestax.io/docs/api/elements/orderedlist) — The `OrderedList` component renders a styled ordered list (`<ol>`) element with Bulma helper class integration.
+- [Paragraph](https://bestax.io/docs/api/elements/paragraph) — The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
+- [Pre](https://bestax.io/docs/api/elements/pre) — The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.
+- [Progress](https://bestax.io/docs/api/elements/progress) — The `Progress` component displays a Bulma-styled progress bar.
+- [Skeleton](https://bestax.io/docs/api/elements/skeleton) — The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
+- [Span](https://bestax.io/docs/api/elements/span) — The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
+- [Strong](https://bestax.io/docs/api/elements/strong) — The `Strong` component renders a styled `<strong>` element with Bulma helper class integration.
+- [SubTitle](https://bestax.io/docs/api/elements/subtitle) — The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), supporting sizes `1-6` and rendering as any heading or paragraph element (`h1-h6`…
+- [Table](https://bestax.io/docs/api/elements/table) — The `Table` component and its subcomponents provide a highly composable, Bulma-styled table system for React.
+- [Tag](https://bestax.io/docs/api/elements/tag) — The `Tag` component renders a Bulma-styled label or badge.
+- [Tags](https://bestax.io/docs/api/elements/tags) — The `Tags` component groups multiple `Tag` components together in a horizontal (or multiline) Bulma-styled container.
+- [Title](https://bestax.io/docs/api/elements/title) — The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`…
+- [UnorderedList](https://bestax.io/docs/api/elements/unorderedlist) — The `UnorderedList` component renders a styled unordered list (`<ul>`) element with Bulma helper class integration.
+
+## Components
+
+- [Avatar](https://bestax.io/docs/api/components/avatar) — The `Avatar` component represents a person or entity as a compact image.
+- [Avatars](https://bestax.io/docs/api/components/avatars) — The `Avatars` component renders an overlapping/stacked group of `Avatar`s, the "members" list pattern.
+- [Badge](https://bestax.io/docs/api/components/badge) — The `Badge` component is a small status/count indicator overlaid on the corner of another element, or rendered standalone.
+- [Breadcrumb](https://bestax.io/docs/api/components/breadcrumb) — The `Breadcrumb` component renders a Bulma-styled breadcrumb navigation.
+- [Card](https://bestax.io/docs/api/components/card) — The `Card` component renders a Bulma-styled card with optional header, image, content, and footer.
+- [Carousel](https://bestax.io/docs/api/components/carousel) — The `Carousel` component provides an image/content slider with navigation arrows and indicators.
+- [Collapse](https://bestax.io/docs/api/components/collapse) — The `Collapse` component provides an expandable/collapsible content panel.
+- [Dialog](https://bestax.io/docs/api/components/dialog) — The `Dialog` component provides confirmation and alert dialogs with customizable actions.
+- [Dropdown](https://bestax.io/docs/api/components/dropdown) — The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.
+- [Loading](https://bestax.io/docs/api/components/loading) — The `Loading` component provides a loading overlay with a spinner animation.
+- [Menu](https://bestax.io/docs/api/components/menu) — The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.
+- [Message](https://bestax.io/docs/api/components/message) — The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.
+- [Modal](https://bestax.io/docs/api/components/modal) — The `Modal` component provides a flexible, accessible modal dialog for your Bulma React UI.
+- [Navbar](https://bestax.io/docs/api/components/navbar) — The `Navbar` component implements Bulma's powerful, responsive navigation bar for your Bulma React UI.
+- [Pagination](https://bestax.io/docs/api/components/pagination) — The `Pagination` component provides a flexible, composable Bulma pagination navigation for your Bulma React UI.
+- [Panel](https://bestax.io/docs/api/components/panel) — The `Panel` component implements Bulma's versatile panel block for React.
+- [Reveal](https://bestax.io/docs/api/components/reveal) — The `Reveal` component animates its content into view as it scrolls into the viewport, backed by `IntersectionObserver`.
+- [Sidebar](https://bestax.io/docs/api/components/sidebar) — The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.
+- [Steps](https://bestax.io/docs/api/components/steps) — The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.
+- [Tabs](https://bestax.io/docs/api/components/tabs) — The `Tabs` component provides flexible and fully-featured Bulma tab navigation for your Bulma React UI.
+- [Toast](https://bestax.io/docs/api/components/toast) — The `Toast` component provides brief notification messages with optional action and cancel buttons.
+- [Tooltip](https://bestax.io/docs/api/components/tooltip) — The `Tooltip` component displays helpful information when users hover over or focus on an element.
+
+## Form
+
+- [Autocomplete](https://bestax.io/docs/api/form/autocomplete) — The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.
+- [Checkbox](https://bestax.io/docs/api/form/checkbox) — The `Checkbox` component provides a Bulma-styled checkbox input.
+- [Checkboxes](https://bestax.io/docs/api/form/checkboxes) — The `Checkboxes` component wraps multiple `Checkbox` components in a Bulma-styled group.
+- [Control](https://bestax.io/docs/api/form/control) — The `Control` component is a Bulma-styled wrapper for form controls (`Input`, `Select`, `TextArea`, etc.), supporting icons (left/right), loading state…
+- [DateInput](https://bestax.io/docs/api/form/datetime/dateinput) — The `DateInput` component is a form input that opens a popover calendar for date selection.
+- [DateTimeInput](https://bestax.io/docs/api/form/datetime/datetimeinput) — The `DateTimeInput` combines a calendar and a time **wheel spinner** in a single popover — an iOS-style layout.
+- [Field](https://bestax.io/docs/api/form/field) — The `Field` component is a Bulma-styled form field container.
+- [File](https://bestax.io/docs/api/form/file) — The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, "has name", and filename display.
+- [Input](https://bestax.io/docs/api/form/input) — The `Input` component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static/read-only state, hover/focus/loading states…
+- [Numberinput](https://bestax.io/docs/api/form/numberinput) — The `Numberinput` component provides a number input with increment/decrement buttons.
+- [Radio](https://bestax.io/docs/api/form/radio) — The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.
+- [Radios](https://bestax.io/docs/api/form/radios) — The `Radios` component wraps multiple `Radio` components in a Bulma-styled group.
+- [Rate](https://bestax.io/docs/api/form/rate) — The `Rate` component provides a star/icon-based rating system.
+- [Select](https://bestax.io/docs/api/form/select) — The `Select` component provides a Bulma-styled dropdown for selecting one or more options.
+- [Slider](https://bestax.io/docs/api/form/slider) — The `Slider` component provides a range slider input for selecting values within a range.
+- [Switch](https://bestax.io/docs/api/form/switch) — The `Switch` component provides a toggle switch for boolean on/off states.
+- [Taginput](https://bestax.io/docs/api/form/taginput) — The `Taginput` component provides a tag/chip input field for managing multiple tags.
+- [TextArea](https://bestax.io/docs/api/form/textarea) — The `TextArea` component provides a Bulma-styled multi-line text input, supporting color, size, rounded corners, static/read-only state…
+- [TimeInput](https://bestax.io/docs/api/form/datetime/timeinput) — The `TimeInput` component is a form input that opens a popover spinner for time-of-day selection.
+
+## Columns
+
+- [Column](https://bestax.io/docs/api/columns/column) — The `Column` component provides a single responsive layout column using Bulma's flexbox-based column system.
+- [Columns](https://bestax.io/docs/api/columns/columns) — The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](./column.md) components.
+
+## Grid
+
+- [Cell](https://bestax.io/docs/api/grid/cell) — The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](./grid.md) component.
+- [Grid](https://bestax.io/docs/api/grid/grid) — The `Grid` component provides Bulma's advanced CSS Grid layout for complex, modern layouts.
+
+## Layout
+
+- [Container](https://bestax.io/docs/api/layout/container) — The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.
+- [Footer](https://bestax.io/docs/api/layout/footer) — The `Footer` component provides a semantic and accessible site footer for your Bulma React UI.
+- [Hero](https://bestax.io/docs/api/layout/hero) — The `Hero` component provides a responsive, flexible, and visually striking section for your Bulma React UI.
+- [Level](https://bestax.io/docs/api/layout/level) — The `Level` component provides a flexible horizontal layout for your Bulma React UI, perfect for aligning items on the left and right…
+- [Media](https://bestax.io/docs/api/layout/media) — The `Media` component implements Bulma’s powerful media object layout for React.
+- [Section](https://bestax.io/docs/api/layout/section) — The `Section` component provides vertical spacing and visual separation for your Bulma React UI.
+
+## Helpers
+
+- [ConfigProvider](https://bestax.io/docs/api/helpers/config) — The `ConfigProvider` component provides a React context for configuring global settings across all Bulma UI components.
+- [Theme](https://bestax.io/docs/api/helpers/theme) — The `Theme` component provides a powerful way to customize Bulma's appearance using CSS custom properties (CSS variables).
+- [Valid value constants](https://bestax.io/docs/api/helpers/valid-values) — The `valid*` constant arrays enumerate every accepted value for the shared Bulma helper props — public API you can import to build prop types and validation.
+- [classNames](https://bestax.io/docs/api/helpers/classnames) — `classNames` is a utility function for conditionally joining class names together.
+- [useBulmaClasses](https://bestax.io/docs/api/helpers/usebulmaclasses) — `useBulmaClasses` is a custom React hook that generates Bulma helper class strings from a set of props.
+- [usePrefixedClassNames](https://bestax.io/docs/api/helpers/useprefixedclassnames) — `usePrefixedClassNames` builds a component class string that honors the `classPrefix` from `ConfigProvider` — the hook every bestax component uses for its own…