@allxsmith/bestax-bulma 5.13.0 → 5.14.0

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.13.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",