@allxsmith/bestax-bulma 5.12.0 → 5.14.0

package/dist/types/components/Dropdown.d.ts

@@ -46,6 +46,8 @@ export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLElement
     className?: string;
     /** The element type to render. */
     as?: 'a' | 'div' | 'button';
+    /** Marks the item as disabled; disabled items are skipped during keyboard navigation. Use with `as="button"` for a native disabled control, or pair with `aria-disabled` on a link. */
+    disabled?: boolean;
     /** Item content. */
     children?: React.ReactNode;
 }

package/dist/types/components/Navbar.d.ts

@@ -186,6 +186,8 @@ export interface NavbarDropdownProps extends React.HTMLAttributes<HTMLDivElement
     hoverable?: boolean;
     /** Dropdown is open. */
     active?: boolean;
+    /** Callback when dropdown active state changes. */
+    onActiveChange?: (active: boolean) => void;
     /** Dropdown content. */
     children?: React.ReactNode;
 }

package/dist/types/components/Panel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
-import { IconProps } from '../elements/Icon';
+import { IconChildrenProps, IconNameProps } from '../elements/Icon';
 /**
  * Props for the Panel component.
  */
@@ -45,7 +45,7 @@ export interface PanelBlockProps extends React.AnchorHTMLAttributes<HTMLAnchorEl
  * Props for the PanelIcon component.
  * Extends IconProps but uses 'panel-icon' as the container class.
  */
-export type PanelIconProps = Omit<IconProps, 'containerClassName'>;
+export type PanelIconProps = Omit<IconNameProps, 'containerClassName'> | Omit<IconChildrenProps, 'containerClassName'>;
 /**
  * Props for the PanelInputBlock component.
  */
@@ -102,8 +102,9 @@ export declare const PanelTabs: React.FC<PanelTabsProps>;
  */
 export declare const PanelBlock: React.FC<PanelBlockProps>;
 /**
- * Icon wrapper with panel styling (renders as `<span class="panel-icon"><i/></span>`).
- * Accepts all Icon props (`name`, `variant`, `features`, etc.)
+ * Icon wrapper with panel styling (renders as `<span class="panel-icon">`, containing an
+ * `<i/>` when a `name` is given, or the custom node passed as `children`).
+ * Accepts all Icon props (`name`, `variant`, `features`, etc.), or `children` for a custom node.
  *
  * @function
  * @param {PanelIconProps} props - Props for the PanelIcon component.

package/dist/types/elements/Icon.d.ts

@@ -21,9 +21,10 @@ declare module 'react' {
 }
 type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
 /**
- * Props for the Icon component.
+ * Shared props for the Icon component, independent of whether a class-based `name` or a
+ * custom `children` node supplies the glyph.
  */
-export interface IconProps extends React.HTMLAttributes<HTMLSpanElement>, BulmaClassesProps {
+interface IconBaseProps extends React.HTMLAttributes<HTMLSpanElement>, BulmaClassesProps {
     /** Additional CSS classes to apply. */
     className?: string;
     /** Text color helper. */
@@ -32,18 +33,16 @@ export interface IconProps extends React.HTMLAttributes<HTMLSpanElement>, BulmaC
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
     /** Background color helper. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
-    /** The icon name, with or without its library prefix (e.g. `'star'` or `'fa-star'`). */
-    name: string;
     /** DEPRECATED: Legacy prop, use `name` instead. */
     icon?: string;
     /**
-     * The icon library to use ('fa' = Font Awesome, 'mdi' = Material Design Icons, 'ion' = Ionicons Web Components, 'material-icons' = Google Material Icons, 'material-symbols' = Google Material Symbols). Defaults to the value set in ConfigProvider or 'fa' if not configured.
+     * The icon library to use ('fa' = Font Awesome, 'mdi' = Material Design Icons, 'ion' = Ionicons Web Components, 'material-icons' = Google Material Icons, 'material-symbols' = Google Material Symbols). Defaults to the value set in ConfigProvider or 'fa' if not configured. Ignored when `children` supplies the glyph instead of `name`.
      * @defaultValue 'fa'
      */
     library?: IconLibrary;
-    /** Icon style variant (e.g. `'solid'`, `'outlined'`, `'rounded'`). */
+    /** Icon style variant (e.g. `'solid'`, `'outlined'`, `'rounded'`). Ignored when `children` supplies the glyph instead of `name`. */
     variant?: string;
-    /** Additional modifiers (e.g. `'fa-lg'`, `'fa-spin'`, `'is-size-1'`). */
+    /** Additional modifiers (e.g. `'fa-lg'`, `'fa-spin'`, `'is-size-1'`). Ignored when `children` supplies the glyph instead of `name`. */
     features?: string | string[];
     /** **DEPRECATED:** Use `variant` and `features` instead. */
     libraryFeatures?: string | string[];
@@ -64,6 +63,30 @@ export interface IconProps extends React.HTMLAttributes<HTMLSpanElement>, BulmaC
     /** Override the default `'icon'` container class (e.g., `'panel-icon'`). */
     containerClassName?: string;
 }
+/**
+ * Props for `Icon` rendering a class-based glyph from an icon library.
+ */
+export interface IconNameProps extends IconBaseProps {
+    /** The icon name, with or without its library prefix (e.g. `'star'` or `'fa-star'`). Mutually exclusive with `children`. */
+    name: string;
+    /** A custom node (an inline SVG, a `react-icons` component, …) rendered inside the icon container in place of a class-based glyph. Mutually exclusive with `name`. */
+    children?: never;
+}
+/**
+ * Props for `Icon` rendering a custom node (an inline SVG, a `react-icons` component, a Font
+ * Awesome React `<FontAwesomeIcon>`, …) in place of a class-based glyph.
+ */
+export interface IconChildrenProps extends IconBaseProps {
+    /** The icon name, with or without its library prefix (e.g. `'star'` or `'fa-star'`). Mutually exclusive with `children`. */
+    name?: undefined;
+    /** A custom node (an inline SVG, a `react-icons` component, …) rendered inside the icon container in place of a class-based glyph. Mutually exclusive with `name`. */
+    children: Exclude<React.ReactNode, undefined>;
+}
+/**
+ * Props for the Icon component — a discriminated union of a class-based `name` and a custom
+ * `children` node.
+ */
+export type IconProps = IconNameProps | IconChildrenProps;
 /**
  * The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.).
  *

package/dist/types/elements/IconText.d.ts

@@ -5,8 +5,8 @@ import { IconProps } from './Icon';
  * Represents an item for the IconText component, containing icon props and optional text.
  */
 interface IconTextItem {
-    /** Props for the Icon component. */
-    iconProps: IconProps;
+    /** Props for the Icon component, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph. */
+    iconProps: IconProps | React.ReactNode;
     /** Optional text to display next to the icon. */
     text?: string;
 }
@@ -27,8 +27,8 @@ interface IconTextProps extends React.HTMLAttributes<HTMLSpanElement>, BulmaClas
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
     /** Background color helper. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
-    /** Props for a single Icon component (for single icon mode). */
-    iconProps?: IconProps;
+    /** Props for a single Icon component, or a custom node, for single icon mode. */
+    iconProps?: IconProps | React.ReactNode;
     /** Text for a single icon (for single icon mode). */
     children?: React.ReactNode;
     /** Array of icon/text pairs (for multiple icons mode). */

package/dist/types/elements/Tags.d.ts

@@ -13,7 +13,13 @@ export interface TagsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'c
     className?: string;
     /** Group tags together as add-ons (no spacing). */
     hasAddons?: boolean;
-    /** Allow tags to wrap onto multiple lines. */
+    /**
+     * No-op retained for backwards compatibility.
+     *
+     * @deprecated Bulma's `.tags` wraps by default (no shipped `are-multiline`
+     * CSS exists for it) — this prop has never had a visual effect and will be
+     * removed in the next major version.
+     */
     isMultiline?: boolean;
     /** Size of every tag in the group. */
     size?: TagsSize;

package/dist/types/form/Control.d.ts

@@ -21,10 +21,10 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
     /** Background color. */
     bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
-    /** Icon props for left icon. */
-    iconLeft?: IconProps;
-    /** Icon props for right icon. */
-    iconRight?: IconProps;
+    /** Icon props for left icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph. */
+    iconLeft?: IconProps | React.ReactNode;
+    /** Icon props for right icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph. */
+    iconRight?: IconProps | React.ReactNode;
     /** Shortcut for left icon name. */
     iconLeftName?: string;
     /** Shortcut for left icon size. */

package/dist/types/helpers/bulmaClassHelpers.d.ts

@@ -51,7 +51,7 @@ export declare const validFontFamilies: readonly ["sans-serif", "monospace", "pr
  * Valid Bulma display classes.
  * @example 'block', 'flex', 'inline'
  */
-export declare const validDisplays: readonly ["block", "flex", "inline", "inline-block", "inline-flex"];
+export declare const validDisplays: readonly ["block", "flex", "inline", "inline-block", "inline-flex", "grid"];
 /**
  * Valid Bulma visibility classes.
  * These are all the valid visibility options available in Bulma.
@@ -97,7 +97,7 @@ export declare const validFlexGrowShrink: readonly ["0", "1", "2", "3", "4", "5"
  * Valid Bulma viewport classes for responsive design.
  * @example 'mobile', 'tablet', 'desktop'
  */
-export declare const validViewports: readonly ["mobile", "tablet", "desktop", "widescreen", "fullhd"];
+export declare const validViewports: readonly ["mobile", "tablet", "tablet-only", "touch", "desktop", "desktop-only", "widescreen", "widescreen-only", "fullhd"];
 /**
  * Props for applying a Bulma viewport modifier to viewport-aware helper classes.
  */
@@ -116,10 +116,18 @@ export interface BulmaDisplayProps {
     displayMobile?: (typeof validDisplays)[number] | 'none';
     /** Display type for tablet viewport (769px - 1023px). */
     displayTablet?: (typeof validDisplays)[number] | 'none';
+    /** Display type for tablet-only viewport (769px - 1023px, excludes desktop+). */
+    displayTabletOnly?: (typeof validDisplays)[number] | 'none';
+    /** Display type for touch viewport (up to 1023px; mobile + tablet). */
+    displayTouch?: (typeof validDisplays)[number] | 'none';
     /** Display type for desktop viewport (1024px - 1215px). */
     displayDesktop?: (typeof validDisplays)[number] | 'none';
+    /** Display type for desktop-only viewport (1024px - 1215px, excludes widescreen+). */
+    displayDesktopOnly?: (typeof validDisplays)[number] | 'none';
     /** Display type for widescreen viewport (1216px - 1407px). */
     displayWidescreen?: (typeof validDisplays)[number] | 'none';
+    /** Display type for widescreen-only viewport (1216px - 1407px, excludes fullhd). */
+    displayWidescreenOnly?: (typeof validDisplays)[number] | 'none';
     /** Display type for fullhd viewport (1408px and above). */
     displayFullhd?: (typeof validDisplays)[number] | 'none';
 }
@@ -136,6 +144,6 @@ export interface BulmaDisplayProps {
 export declare const createBulmaClassHelpers: (classPrefix?: string, viewport?: (typeof validViewports)[number]) => {
     classes: string[];
     addPrefixedClass: (className: string) => void;
-    addClass: (prefix: string, value: string | undefined, validValues: readonly string[], supportsViewport?: boolean) => void;
+    addClass: (prefix: string, value: string | undefined, validValues: readonly string[], supportsViewport?: boolean, supportedViewports?: readonly string[]) => void;
     addClassNoViewport: (prefix: string, value: string | undefined, validValues: readonly string[]) => void;
 };

package/dist/types/helpers/useVisibilityClasses.d.ts

@@ -9,10 +9,18 @@ export interface BulmaVisibilityProps extends BulmaViewportProps, BulmaDisplayPr
     visibilityMobile?: (typeof validVisibilities)[number];
     /** Visibility for tablet viewport (769px - 1023px). */
     visibilityTablet?: (typeof validVisibilities)[number];
+    /** Visibility for tablet-only viewport (769px - 1023px, excludes desktop+). */
+    visibilityTabletOnly?: (typeof validVisibilities)[number];
+    /** Visibility for touch viewport (up to 1023px; mobile + tablet). */
+    visibilityTouch?: (typeof validVisibilities)[number];
     /** Visibility for desktop viewport (1024px - 1215px). */
     visibilityDesktop?: (typeof validVisibilities)[number];
+    /** Visibility for desktop-only viewport (1024px - 1215px, excludes widescreen+). */
+    visibilityDesktopOnly?: (typeof validVisibilities)[number];
     /** Visibility for widescreen viewport (1216px - 1407px). */
     visibilityWidescreen?: (typeof validVisibilities)[number];
+    /** Visibility for widescreen-only viewport (1216px - 1407px, excludes fullhd). */
+    visibilityWidescreenOnly?: (typeof validVisibilities)[number];
     /** Visibility for fullhd viewport (1408px and above). */
     visibilityFullhd?: (typeof validVisibilities)[number];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.12.0",
+  "version": "5.14.0",
   "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.js",
   "module": "dist/index.esm.js",