@allxsmith/bestax-bulma 5.16.4 → 5.16.6

package/dist/types-cjs/index.d.ts

@@ -0,0 +1,113 @@
+export * from './columns/Column.js';
+export * from './columns/Columns.js';
+export * from './components/Avatar.js';
+export * from './components/Avatars.js';
+export * from './components/Badge.js';
+export * from './components/Breadcrumb.js';
+export * from './components/Card.js';
+export * from './components/Dropdown.js';
+export * from './components/Menu.js';
+export * from './components/Message.js';
+export * from './components/Modal.js';
+export * from './components/Navbar.js';
+export * from './components/Pagination.js';
+export * from './components/Panel.js';
+export * from './components/Tabs.js';
+export * from './components/Loading.js';
+export * from './components/Collapse.js';
+export * from './components/Tooltip.js';
+export * from './components/Steps.js';
+export * from './components/Sidebar.js';
+export * from './components/Toast.js';
+export * from './components/Dialog.js';
+export * from './components/Carousel.js';
+export * from './components/Reveal.js';
+export * from './elements/Block.js';
+export * from './elements/Box.js';
+export * from './elements/Button.js';
+export * from './elements/Buttons.js';
+export * from './elements/LinkButton.js';
+export * from './elements/Code.js';
+export * from './elements/Content.js';
+export * from './elements/Delete.js';
+export * from './elements/Divider.js';
+export * from './elements/Emphasis.js';
+export * from './elements/Figure.js';
+export * from './elements/Icon.js';
+export * from './elements/IconText.js';
+export * from './elements/Image.js';
+export * from './elements/Link.js';
+export * from './elements/ListItem.js';
+export * from './elements/Notification.js';
+export * from './elements/OrderedList.js';
+export * from './elements/Paragraph.js';
+export * from './elements/Pre.js';
+export * from './elements/Progress.js';
+export * from './elements/Skeleton.js';
+export * from './elements/Span.js';
+export * from './elements/Strong.js';
+export * from './elements/SubTitle.js';
+export * from './elements/Table.js';
+export * from './elements/Tag.js';
+export * from './elements/Tags.js';
+export * from './elements/Tbody.js';
+export * from './elements/Td.js';
+export * from './elements/Tfoot.js';
+export * from './elements/Th.js';
+export * from './elements/Thead.js';
+export * from './elements/Title.js';
+export * from './elements/Tr.js';
+export * from './elements/UnorderedList.js';
+export * from './form/Checkbox.js';
+export * from './form/Checkboxes.js';
+export * from './form/Control.js';
+export * from './form/Field.js';
+export * from './form/File.js';
+export * from './form/Radio.js';
+export * from './form/Radios.js';
+export * from './form/Switch.js';
+export * from './form/Slider.js';
+export * from './form/Numberinput.js';
+export * from './form/Rate.js';
+export * from './form/Autocomplete.js';
+export * from './form/Taginput.js';
+export { InputBase } from './form/InputBase.js';
+export type { InputBaseProps } from './form/InputBase.js';
+export { SelectBase } from './form/SelectBase.js';
+export type { SelectBaseProps } from './form/SelectBase.js';
+export { TextAreaBase } from './form/TextAreaBase.js';
+export type { TextAreaBaseProps } from './form/TextAreaBase.js';
+export { Input } from './form/Input.js';
+export type { InputProps } from './form/Input.js';
+export { Select } from './form/Select.js';
+export type { SelectProps } from './form/Select.js';
+export { TextArea } from './form/TextArea.js';
+export type { TextAreaProps } from './form/TextArea.js';
+export { DateInputBase } from './form/DateInputBase.js';
+export type { DateInputBaseProps } from './form/DateInputBase.js';
+export { DateInput } from './form/DateInput.js';
+export type { DateInputProps } from './form/DateInput.js';
+export { TimeInputBase } from './form/TimeInputBase.js';
+export type { TimeInputBaseProps } from './form/TimeInputBase.js';
+export { TimeInput } from './form/TimeInput.js';
+export type { TimeInputProps } from './form/TimeInput.js';
+export { DateTimeInputBase } from './form/DateTimeInputBase.js';
+export type { DateTimeInputBaseProps } from './form/DateTimeInputBase.js';
+export { DateTimeInput } from './form/DateTimeInput.js';
+export type { DateTimeInputProps } from './form/DateTimeInput.js';
+export { useInsideField, useInsideControl } from './form/FormContext.js';
+export type { FormFieldProps } from './form/fieldProps.js';
+export * from './grid/Cell.js';
+export * from './grid/Grid.js';
+export * from './helpers/classNames.js';
+export type { ConstrainedPolymorphicComponentWithoutRef, PolymorphicComponent, PolymorphicComponentWithoutRef, PolymorphicProps, PolymorphicRef, } from './helpers/polymorphic.js';
+export * from './helpers/mergeBulmaStyles.js';
+export * from './helpers/useBulmaClasses.js';
+export * from './helpers/Theme.js';
+export * from './helpers/Config.js';
+export * from './layout/Container.js';
+export * from './layout/Footer.js';
+export * from './layout/Hero.js';
+export * from './layout/Level.js';
+export * from './layout/Media.js';
+export * from './layout/Section.js';

package/dist/types-cjs/layout/Container.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { BulmaClassesProps, validColors, validSchemeColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Bulma container breakpoints.
+ */
+export type ContainerBreakpoint = 'tablet' | 'desktop' | 'widescreen';
+/**
+ * Props for the Container component.
+ */
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /**
+     * Text color alias: renders `has-text-<color>`, exactly like `textColor`.
+     * Not a filled variant (no `.container.is-<color>` CSS exists). Prefer
+     * `textColor`, which takes precedence when both are set; use `bgColor` for
+     * a colored surface.
+     */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /**
+     * Background color helper. `scheme-*` values render as a dark-mode-safe
+     * inline `background-color: var(--bulma-scheme-*)` instead of a class. The
+     * `scheme-invert*` values do not change text color — pair them with a
+     * contrasting foreground.
+     */
+    bgColor?: (typeof validColors)[number] | (typeof validSchemeColors)[number] | 'inherit' | 'current';
+    /** Makes the container full-width with a 32px gap on each side. */
+    fluid?: boolean;
+    /** Makes the container full-width until the `widescreen` breakpoint. */
+    widescreen?: boolean;
+    /** Makes the container full-width until the `fullhd` breakpoint. */
+    fullhd?: boolean;
+    /** Responsive breakpoint for container (`is-tablet`, `is-desktop`, `is-widescreen`). */
+    breakpoint?: ContainerBreakpoint;
+    /** Uses Bulma's `is-max-*` class for the specified breakpoint, limiting max width. */
+    isMax?: boolean;
+    /** Content inside the container. */
+    children?: React.ReactNode;
+}
+/**
+ * The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.
+ *
+ * @function
+ * @param {ContainerProps} props - Props for the Container component.
+ * @returns {JSX.Element} The rendered container.
+ * @see {@link https://bulma.io/documentation/layout/container/ | Bulma Container documentation}
+ */
+export declare const Container: React.FC<ContainerProps>;
+export default Container;

package/dist/types-cjs/layout/Footer.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { BulmaClassesProps, validColors, validSchemeColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Footer component.
+ */
+export interface FooterProps extends React.HTMLAttributes<HTMLElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** The HTML tag to render as. */
+    as?: 'footer' | 'div';
+    /** Bulma color modifier. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /**
+     * Background color. `scheme-*` values render as a dark-mode-safe inline
+     * `background-color: var(--bulma-scheme-*)` instead of a class. The
+     * `scheme-invert*` values do not change text color — pair them with a
+     * contrasting foreground.
+     */
+    bgColor?: (typeof validColors)[number] | (typeof validSchemeColors)[number] | 'inherit' | 'current';
+    /** Text color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** Content inside the footer. */
+    children?: React.ReactNode;
+}
+/**
+ * The `Footer` component provides a semantic and accessible site footer for your Bulma React UI.
+ *
+ * @function
+ * @param {FooterProps} props - Props for the Footer component.
+ * @returns {JSX.Element} The rendered footer element.
+ * @see {@link https://bulma.io/documentation/layout/footer/ | Bulma Footer documentation}
+ *
+ * @example
+ * <Footer>
+ *   <div className="content has-text-centered">...</div>
+ * </Footer>
+ */
+export declare const Footer: React.FC<FooterProps>;
+export default Footer;

package/dist/types-cjs/layout/Hero.d.ts

@@ -0,0 +1,126 @@
+import React from 'react';
+import { BulmaClassesProps, validColors, validSchemeColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Possible values for Bulma hero size.
+ */
+export type HeroSize = 'small' | 'medium' | 'large' | 'fullheight' | 'fullheight-with-navbar';
+/**
+ * Props for the Hero component.
+ */
+export interface HeroProps extends React.HTMLAttributes<HTMLElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes. */
+    className?: string;
+    /**
+     * Bulma color modifier for the hero section (renders `is-<color>`).
+     *
+     * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,
+     * `white`, `light`, and `dark` have shipped CSS for `.hero`. Every other
+     * value the union accepts emits a class no CSS rule matches, so the hero
+     * renders unstyled; those log a console warning in development and will be
+     * removed from this union in the next major version.
+     */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Hero size. */
+    size?: HeroSize;
+    /**
+     * Bulma background color helper. `scheme-*` values render as a
+     * dark-mode-safe inline `background-color: var(--bulma-scheme-*)` instead
+     * of a class. The `scheme-invert*` values do not change text color — pair
+     * them with a contrasting foreground.
+     */
+    bgColor?: (typeof validColors)[number] | (typeof validSchemeColors)[number] | 'inherit' | 'current';
+    /** Use fullheight hero with a navbar offset. */
+    fullheightWithNavbar?: boolean;
+    /** Hero content (often includes `Hero.Head`, `Hero.Body`, `Hero.Foot`). */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the HeroHead component.
+ */
+export interface HeroHeadProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** Bulma color modifier for text. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /**
+     * Background color. `scheme-*` values render as a dark-mode-safe inline
+     * `background-color: var(--bulma-scheme-*)` instead of a class. The
+     * `scheme-invert*` values do not change text color — pair them with a
+     * contrasting foreground.
+     */
+    bgColor?: (typeof validColors)[number] | (typeof validSchemeColors)[number] | 'inherit' | 'current';
+    /** Text color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Content. */
+    children?: React.ReactNode;
+}
+/**
+ * Top bar for navigation or branding.
+ *
+ * @function
+ * @param {HeroHeadProps} props - Props for the HeroHead component.
+ * @returns {JSX.Element} The rendered hero head.
+ */
+export declare const HeroHead: React.FC<HeroHeadProps>;
+/**
+ * Props for the HeroBody component.
+ */
+export interface HeroBodyProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** Bulma color modifier for text. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /**
+     * Background color. `scheme-*` values render as a dark-mode-safe inline
+     * `background-color: var(--bulma-scheme-*)` instead of a class. The
+     * `scheme-invert*` values do not change text color — pair them with a
+     * contrasting foreground.
+     */
+    bgColor?: (typeof validColors)[number] | (typeof validSchemeColors)[number] | 'inherit' | 'current';
+    /** Text color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Content. */
+    children?: React.ReactNode;
+}
+/**
+ * Main content area, vertically centered by default.
+ *
+ * @function
+ * @param {HeroBodyProps} props - Props for the HeroBody component.
+ * @returns {JSX.Element} The rendered hero body.
+ */
+export declare const HeroBody: React.FC<HeroBodyProps>;
+/**
+ * Props for the HeroFoot component.
+ */
+export interface HeroFootProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** Bulma color modifier for text. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /**
+     * Background color. `scheme-*` values render as a dark-mode-safe inline
+     * `background-color: var(--bulma-scheme-*)` instead of a class. The
+     * `scheme-invert*` values do not change text color — pair them with a
+     * contrasting foreground.
+     */
+    bgColor?: (typeof validColors)[number] | (typeof validSchemeColors)[number] | 'inherit' | 'current';
+    /** Text color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Content. */
+    children?: React.ReactNode;
+}
+/**
+ * Bottom bar for tabs or actions.
+ *
+ * @function
+ * @param {HeroFootProps} props - Props for the HeroFoot component.
+ * @returns {JSX.Element} The rendered hero foot.
+ */
+export declare const HeroFoot: React.FC<HeroFootProps>;
+export declare const Hero: React.FC<HeroProps> & {
+    Head: React.FC<HeroHeadProps>;
+    Body: React.FC<HeroBodyProps>;
+    Foot: React.FC<HeroFootProps>;
+};
+export default Hero;

package/dist/types-cjs/layout/Level.d.ts

@@ -0,0 +1,112 @@
+import React from 'react';
+import { type AnchorOnlyAttributes } from '../helpers/anchorAttrs.js';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Level component.
+ */
+export interface LevelProps extends React.HTMLAttributes<HTMLElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Keeps the level horizontal on mobile (Bulma `is-mobile`). Without it
+     * the level stacks vertically below tablet. */
+    isMobile?: boolean;
+    /** Bulma color modifier for the level. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Bulma background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Bulma text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** Level content (`Level.Left`, `Level.Right`, `Level.Item`). */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the LevelLeft component.
+ */
+export interface LevelLeftProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Bulma color modifier. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** Content. */
+    children?: React.ReactNode;
+}
+/**
+ * Left-aligned content.
+ *
+ * @function
+ * @param {LevelLeftProps} props - Props for the LevelLeft component.
+ * @returns {JSX.Element} The rendered level left section.
+ */
+export declare const LevelLeft: React.FC<LevelLeftProps>;
+/**
+ * Props for the LevelRight component.
+ */
+export interface LevelRightProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Bulma color modifier. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** Content. */
+    children?: React.ReactNode;
+}
+/**
+ * Right-aligned content.
+ *
+ * @function
+ * @param {LevelRightProps} props - Props for the LevelRight component.
+ * @returns {JSX.Element} The rendered level right section.
+ */
+export declare const LevelRight: React.FC<LevelRightProps>;
+/**
+ * Props for the LevelItem component.
+ *
+ * The anchor attributes arrive through `AnchorOnlyAttributes`, at every `as`, and
+ * are forwarded only when the tag is an `<a>` — so `<Level.Item as="p" download>` compiles and
+ * renders a `<p>` without it. That asymmetry is deliberate for now: deriving
+ * them from `as` instead is what makes the dead pair a type error, and it also
+ * stops `const p: LevelItemProps = { href }` compiling for consumers who write
+ * it today. #672 carries that half, labelled `next-major`.
+ *
+ * What that set must NOT become is a hand-written list. Enumerating only `href`,
+ * `target` and `rel` made every other anchor attribute a type error even at
+ * `as="a"`, which is what #641 reported; `helpers/anchorAttrs.ts` derives it from
+ * React instead, and `ANCHOR_ONLY_ATTRS` there is the guard to protect.
+ */
+export interface LevelItemProps extends AnchorOnlyAttributes, React.HTMLAttributes<HTMLDivElement | HTMLParagraphElement | HTMLAnchorElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Element type to render. */
+    as?: 'div' | 'p' | 'a';
+    /** Center the text in the item. */
+    hasTextCentered?: boolean;
+    /** Bulma color modifier. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** Content. */
+    children?: React.ReactNode;
+}
+/**
+ * Individual item, can be rendered as `div`, `p`, or `a`.
+ *
+ * @function
+ * @param {LevelItemProps} props - Props for the LevelItem component.
+ * @returns {JSX.Element} The rendered level item.
+ */
+export declare const LevelItem: React.FC<LevelItemProps>;
+export declare const Level: React.FC<LevelProps> & {
+    Left: React.FC<LevelLeftProps>;
+    Right: React.FC<LevelRightProps>;
+    Item: React.FC<LevelItemProps>;
+};
+export default Level;

package/dist/types-cjs/layout/Media.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Media component.
+ */
+export interface MediaProps extends React.HTMLAttributes<HTMLElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Element type for the root Media container. */
+    as?: 'article' | 'div';
+    /** Bulma color modifier. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Bulma background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Bulma text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** Content inside the media container. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the MediaLeft component.
+ */
+export interface MediaLeftProps extends React.HTMLAttributes<HTMLElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Element type to render. */
+    as?: 'figure' | 'div';
+    /** Bulma color modifier. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** Content. */
+    children?: React.ReactNode;
+}
+/**
+ * For avatars, thumbnails, icons (renders as `figure` or `div`)
+ *
+ * @function
+ * @param {MediaLeftProps} props - Props for the MediaLeft component.
+ * @returns {JSX.Element} The rendered media left section.
+ */
+export declare const MediaLeft: React.FC<MediaLeftProps>;
+/**
+ * Props for the MediaContent component.
+ */
+export interface MediaContentProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Bulma color modifier. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** Content. */
+    children?: React.ReactNode;
+}
+/**
+ * Main content (renders as `div`)
+ *
+ * @function
+ * @param {MediaContentProps} props - Props for the MediaContent component.
+ * @returns {JSX.Element} The rendered media content section.
+ */
+export declare const MediaContent: React.FC<MediaContentProps>;
+/**
+ * Props for the MediaRight component.
+ */
+export interface MediaRightProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Bulma color modifier. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Additional CSS classes. */
+    className?: string;
+    /** Content. */
+    children?: React.ReactNode;
+}
+/**
+ * Actions or controls (renders as `div`)
+ *
+ * @function
+ * @param {MediaRightProps} props - Props for the MediaRight component.
+ * @returns {JSX.Element} The rendered media right section.
+ */
+export declare const MediaRight: React.FC<MediaRightProps>;
+/** Media component with Left, Content, and Right sub-components. */
+export declare const Media: React.FC<MediaProps> & {
+    Left: React.FC<MediaLeftProps>;
+    Content: React.FC<MediaContentProps>;
+    Right: React.FC<MediaRightProps>;
+};
+export default Media;

package/dist/types-cjs/layout/Section.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { BulmaClassesProps, validColors, validSchemeColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Section size values for Bulma.
+ */
+type SectionSize = 'medium' | 'large';
+/**
+ * Props for the Section component.
+ */
+export interface SectionProps extends React.HTMLAttributes<HTMLElement>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
+    /** Bulma color modifier for text. */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /**
+     * Bulma background color helper. `scheme-*` values render as a
+     * dark-mode-safe inline `background-color: var(--bulma-scheme-*)` instead
+     * of a class. The `scheme-invert*` values do not change text color — pair
+     * them with a contrasting foreground.
+     */
+    bgColor?: (typeof validColors)[number] | (typeof validSchemeColors)[number] | 'inherit' | 'current';
+    /** Bulma text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Section size for extra vertical spacing. */
+    size?: SectionSize;
+    /** Additional CSS classes. */
+    className?: string;
+    /** Section content. */
+    children?: React.ReactNode;
+}
+/**
+ * The `Section` component provides vertical spacing and visual separation for your Bulma React UI.
+ *
+ * @function
+ * @param {SectionProps} props - Props for the Section component.
+ * @returns {JSX.Element} The rendered section.
+ * @see {@link https://bulma.io/documentation/layout/section/ | Bulma Section documentation}
+ */
+export declare const Section: React.FC<SectionProps>;
+export {};

package/dist/types-cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/types-cjs/skill-examples/ExampleMeta.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface ExampleMetaProps {
+    /** Skill slug, e.g. "bestax-custom-component". */
+    skill: string;
+    /** Link to the skill's SKILL.md. */
+    skillHref: string;
+    /** Natural-language request given to the agent. */
+    prompt: string;
+    /** Model that generated the example, e.g. "Claude Opus 4.8". */
+    model: string;
+    /** Date generated, e.g. "2026-06-27". */
+    date: string;
+}
+export declare const ExampleMeta: React.FC<ExampleMetaProps>;
+export default ExampleMeta;

package/dist/types-cjs/skill-examples/ProfileCard.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+export interface ProfileCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'color'>, BulmaClassesProps {
+    /** Person's name (rendered as the title). */
+    name: string;
+    /** Role / subtitle line under the name. */
+    role?: string;
+    /** Avatar image URL. */
+    imageSrc: string;
+    /** Alt text for the avatar (defaults to the name). */
+    imageAlt?: string;
+}
+/**
+ * ProfileCard — avatar on top, then name, role, and a description. Composes the
+ * existing Image/Title/SubTitle/Content elements.
+ *
+ * @example
+ * <ProfileCard name="Ada Lovelace" role="Mathematician" imageSrc="/ada.jpg">
+ *   Wrote the first algorithm intended for a machine.
+ * </ProfileCard>
+ */
+export declare const ProfileCard: React.ForwardRefExoticComponent<ProfileCardProps & React.RefAttributes<HTMLDivElement>>;
+export default ProfileCard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.16.4",
+  "version": "5.16.6",
   "description": "A fully-typed React component library for the Bulma CSS framework. Build modern UIs quickly with reusable, accessible, and customizable Bulma-based React components.",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -108,9 +108,14 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.esm.js"
+      },
+      "require": {
+        "types": "./dist/types-cjs/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./constants": {
       "import": {