@allxsmith/bestax-bulma 5.8.0 → 5.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -0
- package/dist/index.cjs.js +304 -387
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +304 -387
- package/dist/index.esm.js.map +1 -1
- package/dist/types/columns/Column.d.ts +25 -30
- package/dist/types/columns/Columns.d.ts +23 -30
- package/dist/types/components/Avatar.d.ts +15 -20
- package/dist/types/components/Avatars.d.ts +8 -9
- package/dist/types/components/Badge.d.ts +13 -21
- package/dist/types/components/Breadcrumb.d.ts +6 -9
- package/dist/types/components/Card.d.ts +34 -36
- package/dist/types/components/Carousel.d.ts +29 -29
- package/dist/types/components/Collapse.d.ts +17 -18
- package/dist/types/components/Dialog.d.ts +24 -29
- package/dist/types/components/Dropdown.d.ts +16 -18
- package/dist/types/components/Loading.d.ts +13 -18
- package/dist/types/components/Menu.d.ts +11 -15
- package/dist/types/components/Message.d.ts +11 -14
- package/dist/types/components/Modal.d.ts +23 -29
- package/dist/types/components/Navbar.d.ts +60 -72
- package/dist/types/components/Pagination.d.ts +39 -35
- package/dist/types/components/Panel.d.ts +26 -33
- package/dist/types/components/Reveal.d.ts +11 -17
- package/dist/types/components/Sidebar.d.ts +17 -20
- package/dist/types/components/Steps.d.ts +28 -37
- package/dist/types/components/Tabs.d.ts +44 -43
- package/dist/types/components/Toast.d.ts +23 -28
- package/dist/types/components/Tooltip.d.ts +16 -20
- package/dist/types/elements/Block.d.ts +11 -10
- package/dist/types/elements/Box.d.ts +12 -10
- package/dist/types/elements/Button.d.ts +30 -23
- package/dist/types/elements/Buttons.d.ts +13 -9
- package/dist/types/elements/Code.d.ts +5 -10
- package/dist/types/elements/Content.d.ts +12 -11
- package/dist/types/elements/Delete.d.ts +14 -12
- package/dist/types/elements/Divider.d.ts +3 -7
- package/dist/types/elements/Emphasis.d.ts +5 -10
- package/dist/types/elements/Figure.d.ts +8 -10
- package/dist/types/elements/Icon.d.ts +18 -18
- package/dist/types/elements/IconText.d.ts +14 -11
- package/dist/types/elements/Image.d.ts +17 -17
- package/dist/types/elements/Link.d.ts +10 -14
- package/dist/types/elements/LinkButton.d.ts +3 -9
- package/dist/types/elements/ListItem.d.ts +6 -11
- package/dist/types/elements/Notification.d.ts +33 -24
- package/dist/types/elements/OrderedList.d.ts +7 -8
- package/dist/types/elements/Paragraph.d.ts +5 -10
- package/dist/types/elements/Pre.d.ts +5 -10
- package/dist/types/elements/Progress.d.ts +16 -10
- package/dist/types/elements/Skeleton.d.ts +4 -13
- package/dist/types/elements/Span.d.ts +5 -9
- package/dist/types/elements/Strong.d.ts +5 -10
- package/dist/types/elements/SubTitle.d.ts +9 -11
- package/dist/types/elements/Table.d.ts +8 -9
- package/dist/types/elements/Tag.d.ts +9 -12
- package/dist/types/elements/Tags.d.ts +4 -5
- package/dist/types/elements/Tbody.d.ts +2 -3
- package/dist/types/elements/Td.d.ts +3 -4
- package/dist/types/elements/Tfoot.d.ts +2 -3
- package/dist/types/elements/Th.d.ts +5 -6
- package/dist/types/elements/Thead.d.ts +2 -3
- package/dist/types/elements/Title.d.ts +10 -12
- package/dist/types/elements/Tr.d.ts +4 -5
- package/dist/types/elements/UnorderedList.d.ts +4 -5
- package/dist/types/form/Autocomplete.d.ts +35 -38
- package/dist/types/form/Checkbox.d.ts +7 -18
- package/dist/types/form/Checkboxes.d.ts +6 -7
- package/dist/types/form/Control.d.ts +21 -20
- package/dist/types/form/DateInput.d.ts +24 -24
- package/dist/types/form/DateInputBase.d.ts +36 -34
- package/dist/types/form/DateTimeInput.d.ts +22 -22
- package/dist/types/form/DateTimeInputBase.d.ts +44 -42
- package/dist/types/form/Field.d.ts +23 -26
- package/dist/types/form/File.d.ts +20 -16
- package/dist/types/form/Input.d.ts +20 -24
- package/dist/types/form/InputBase.d.ts +10 -11
- package/dist/types/form/Numberinput.d.ts +27 -24
- package/dist/types/form/Radio.d.ts +7 -18
- package/dist/types/form/Radios.d.ts +6 -7
- package/dist/types/form/Rate.d.ts +21 -37
- package/dist/types/form/Select.d.ts +16 -20
- package/dist/types/form/SelectBase.d.ts +13 -14
- package/dist/types/form/Slider.d.ts +62 -41
- package/dist/types/form/Switch.d.ts +16 -19
- package/dist/types/form/Taginput.d.ts +45 -48
- package/dist/types/form/TextArea.d.ts +11 -15
- package/dist/types/form/TextAreaBase.d.ts +13 -14
- package/dist/types/form/TimeInput.d.ts +24 -23
- package/dist/types/form/TimeInputBase.d.ts +38 -59
- package/dist/types/form/fieldProps.d.ts +1 -1
- package/dist/types/form/useAutoLabelId.d.ts +28 -0
- package/dist/types/grid/Cell.d.ts +12 -13
- package/dist/types/grid/Grid.d.ts +16 -17
- package/dist/types/helpers/colorDeprecations.d.ts +17 -0
- package/dist/types/layout/Container.d.ts +16 -13
- package/dist/types/layout/Footer.d.ts +7 -8
- package/dist/types/layout/Hero.d.ts +34 -28
- package/dist/types/layout/Level.d.ts +30 -33
- package/dist/types/layout/Media.d.ts +25 -29
- package/dist/types/layout/Section.d.ts +7 -8
- package/package.json +18 -18
|
@@ -2,28 +2,35 @@ import React from 'react';
|
|
|
2
2
|
import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the Notification component.
|
|
5
|
-
*
|
|
6
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
7
|
-
* @property {(typeof validColors)[number]} [color] - Bulma color modifier for the notification.
|
|
8
|
-
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
|
|
9
|
-
* @property {boolean} [isLight] - Use the light color variant.
|
|
10
|
-
* @property {boolean} [hasDelete] - Show a delete (close) button.
|
|
11
|
-
* @property {() => void} [onDelete] - Callback fired when the delete button is clicked.
|
|
12
|
-
* @property {React.ReactNode} [children] - Content to be rendered inside the notification.
|
|
13
5
|
*/
|
|
14
6
|
export interface NotificationProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
|
|
7
|
+
/** Additional CSS classes to apply. */
|
|
15
8
|
className?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Bulma color modifier for the notification (renders `is-<color>`).
|
|
11
|
+
*
|
|
12
|
+
* Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,
|
|
13
|
+
* `white`, `light`, and `dark` have shipped CSS for `.notification`. The
|
|
14
|
+
* other accepted values (`black-bis`, `black-ter`, `grey-darker`,
|
|
15
|
+
* `grey-dark`, `grey`, `grey-light`, `grey-lighter`) emit a class no CSS
|
|
16
|
+
* rule matches, so the notification renders unstyled; they log a console
|
|
17
|
+
* warning in development and will be removed from this union in the next
|
|
18
|
+
* major version.
|
|
19
|
+
*/
|
|
16
20
|
color?: (typeof validColors)[number];
|
|
21
|
+
/** Text color helper. */
|
|
17
22
|
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
23
|
+
/** Use the light color variant. */
|
|
18
24
|
isLight?: boolean;
|
|
25
|
+
/** Shows a close (delete) button in the notification. */
|
|
19
26
|
hasDelete?: boolean;
|
|
27
|
+
/** Callback fired when the delete button is clicked. */
|
|
20
28
|
onDelete?: () => void;
|
|
29
|
+
/** Content inside the notification. */
|
|
21
30
|
children?: React.ReactNode;
|
|
22
31
|
}
|
|
23
32
|
/**
|
|
24
|
-
* Notification component
|
|
25
|
-
*
|
|
26
|
-
* Supports colors, light variants, a delete button, and arbitrary content.
|
|
33
|
+
* The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
|
|
27
34
|
*
|
|
28
35
|
* @function
|
|
29
36
|
* @param {NotificationProps} props - Props for the Notification component.
|
|
@@ -35,20 +42,23 @@ export declare const Notification: React.FC<NotificationProps>;
|
|
|
35
42
|
export type NotificationPosition = 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';
|
|
36
43
|
/**
|
|
37
44
|
* Options for showing a programmatic notification.
|
|
38
|
-
*
|
|
39
|
-
* @property {string|React.ReactNode} message - The message to display.
|
|
40
|
-
* @property {(typeof validColors)[number]} [color] - Bulma color modifier.
|
|
41
|
-
* @property {boolean} [isLight] - Use the light color variant.
|
|
42
|
-
* @property {number} [duration] - Duration in ms before auto-close. Default: 3000.
|
|
43
|
-
* @property {NotificationPosition} [position] - Position on the screen. Default: 'top-right'.
|
|
44
|
-
* @property {boolean} [queue] - Display notifications one at a time in FIFO order.
|
|
45
|
-
* @property {boolean} [hasDelete] - Show a delete (close) button. Default: true.
|
|
46
|
-
* @property {boolean} [indefinite] - Stay open until dismissed.
|
|
47
|
-
* @property {boolean} [pauseOnHover] - Pause auto-close timer on hover. Default: true.
|
|
48
45
|
*/
|
|
49
46
|
export interface NotificationOptions {
|
|
47
|
+
/** The message to display. */
|
|
50
48
|
message: string | React.ReactNode;
|
|
49
|
+
/**
|
|
50
|
+
* Bulma color modifier for the notification (renders `is-<color>`).
|
|
51
|
+
*
|
|
52
|
+
* Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,
|
|
53
|
+
* `white`, `light`, and `dark` have shipped CSS for `.notification`. The
|
|
54
|
+
* other accepted values (`black-bis`, `black-ter`, `grey-darker`,
|
|
55
|
+
* `grey-dark`, `grey`, `grey-light`, `grey-lighter`) emit a class no CSS
|
|
56
|
+
* rule matches, so the notification renders unstyled; they log a console
|
|
57
|
+
* warning in development and will be removed from this union in the next
|
|
58
|
+
* major version.
|
|
59
|
+
*/
|
|
51
60
|
color?: (typeof validColors)[number];
|
|
61
|
+
/** Use the light color variant. */
|
|
52
62
|
isLight?: boolean;
|
|
53
63
|
/** Duration in ms before auto-close. Default 3000. */
|
|
54
64
|
duration?: number;
|
|
@@ -65,12 +75,11 @@ export interface NotificationOptions {
|
|
|
65
75
|
}
|
|
66
76
|
/**
|
|
67
77
|
* Internal representation of a notification instance.
|
|
68
|
-
*
|
|
69
|
-
* @property {string} id - Unique identifier for this notification.
|
|
70
|
-
* @property {NotificationOptions} options - Configuration options for the notification.
|
|
71
78
|
*/
|
|
72
79
|
interface NotificationInstance {
|
|
80
|
+
/** Unique identifier for this notification. */
|
|
73
81
|
id: string;
|
|
82
|
+
/** Configuration options for the notification. */
|
|
74
83
|
options: NotificationOptions;
|
|
75
84
|
}
|
|
76
85
|
/**
|
|
@@ -2,19 +2,18 @@ import React from 'react';
|
|
|
2
2
|
import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the OrderedList component.
|
|
5
|
-
*
|
|
6
|
-
* @
|
|
7
|
-
* @
|
|
8
|
-
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
|
|
9
|
-
* @property {'1' | 'a' | 'A' | 'i' | 'I'} [type] - The numbering type for the list.
|
|
10
|
-
* @property {number} [start] - The starting number for the list.
|
|
11
|
-
* @property {boolean} [reversed] - Whether to reverse the list numbering.
|
|
12
|
-
* @property {React.ReactNode} [children] - List items to be rendered inside the list.
|
|
5
|
+
* @extraProp {'1' | 'a' | 'A' | 'i' | 'I'} [type='1'] - The numbering type for the list.
|
|
6
|
+
* @extraProp {number} [start] - The starting number for the list.
|
|
7
|
+
* @extraProp {boolean} [reversed] - Whether to reverse the list numbering.
|
|
13
8
|
*/
|
|
14
9
|
export interface OrderedListProps extends React.OlHTMLAttributes<HTMLOListElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
|
|
10
|
+
/** Additional CSS classes to apply. */
|
|
15
11
|
className?: string;
|
|
12
|
+
/** Text color helper. */
|
|
16
13
|
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
14
|
+
/** Background color helper. */
|
|
17
15
|
bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
16
|
+
/** List items to render inside the list. */
|
|
18
17
|
children?: React.ReactNode;
|
|
19
18
|
}
|
|
20
19
|
export declare const OrderedList: React.FC<OrderedListProps> & {
|
|
@@ -2,24 +2,19 @@ import React from 'react';
|
|
|
2
2
|
import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the Paragraph component.
|
|
5
|
-
*
|
|
6
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
7
|
-
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
|
|
8
|
-
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
|
|
9
|
-
* @property {React.ReactNode} [children] - Content to be rendered inside the paragraph.
|
|
10
5
|
*/
|
|
11
6
|
export interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
|
|
7
|
+
/** Additional CSS classes to apply. */
|
|
12
8
|
className?: string;
|
|
9
|
+
/** Text color helper. */
|
|
13
10
|
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
11
|
+
/** Background color helper. */
|
|
14
12
|
bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
13
|
+
/** Content to render inside the paragraph. */
|
|
15
14
|
children?: React.ReactNode;
|
|
16
15
|
}
|
|
17
16
|
/**
|
|
18
|
-
* Paragraph component
|
|
19
|
-
*
|
|
20
|
-
* A Paragraph wraps the HTML `<p>` element with Bulma helper class integration.
|
|
21
|
-
* Supports Bulma helper classes for additional styling like text color, background color,
|
|
22
|
-
* typography, and spacing utilities.
|
|
17
|
+
* The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
|
|
23
18
|
*
|
|
24
19
|
* @function
|
|
25
20
|
* @param {ParagraphProps} props - Props for the Paragraph component.
|
|
@@ -2,24 +2,19 @@ import React from 'react';
|
|
|
2
2
|
import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the Pre component.
|
|
5
|
-
*
|
|
6
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
7
|
-
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
|
|
8
|
-
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
|
|
9
|
-
* @property {React.ReactNode} [children] - Preformatted content to be rendered inside the element.
|
|
10
5
|
*/
|
|
11
6
|
export interface PreProps extends React.HTMLAttributes<HTMLPreElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
|
|
7
|
+
/** Additional CSS classes to apply. */
|
|
12
8
|
className?: string;
|
|
9
|
+
/** Text color helper. */
|
|
13
10
|
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
11
|
+
/** Background color helper. */
|
|
14
12
|
bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
13
|
+
/** Preformatted content to render. */
|
|
15
14
|
children?: React.ReactNode;
|
|
16
15
|
}
|
|
17
16
|
/**
|
|
18
|
-
* Pre component
|
|
19
|
-
*
|
|
20
|
-
* A Pre wraps the HTML `<pre>` element with Bulma helper class integration.
|
|
21
|
-
* Use it for multi-line code blocks, ASCII art, or any content where whitespace
|
|
22
|
-
* formatting must be preserved. Often used together with the Code component.
|
|
17
|
+
* The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.
|
|
23
18
|
*
|
|
24
19
|
* @function
|
|
25
20
|
* @param {PreProps} props - Props for the Pre component.
|
|
@@ -2,26 +2,32 @@ import React from 'react';
|
|
|
2
2
|
import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the Progress component.
|
|
5
|
-
*
|
|
6
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
7
|
-
* @property {(typeof validColors)[number]} [color] - Bulma color modifier for the progress bar.
|
|
8
|
-
* @property {'small' | 'medium' | 'large'} [size] - Size modifier for the progress bar.
|
|
9
|
-
* @property {number} [value] - Current value of the progress bar.
|
|
10
|
-
* @property {number} [max] - Maximum value of the progress bar.
|
|
11
|
-
* @property {React.ReactNode} [children] - Optional custom content inside the progress element.
|
|
12
5
|
*/
|
|
13
6
|
export interface ProgressProps extends React.ProgressHTMLAttributes<HTMLProgressElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
|
|
7
|
+
/** Additional CSS classes to apply. */
|
|
14
8
|
className?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Bulma color modifier for the progress bar (renders `is-<color>`).
|
|
11
|
+
*
|
|
12
|
+
* Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,
|
|
13
|
+
* `white`, `light`, and `dark` have shipped CSS for `.progress`. The other
|
|
14
|
+
* accepted values (`black-bis`, `black-ter`, `grey-darker`, `grey-dark`,
|
|
15
|
+
* `grey`, `grey-light`, `grey-lighter`) emit a class no CSS rule matches, so
|
|
16
|
+
* the bar renders unstyled; they log a console warning in development and
|
|
17
|
+
* will be removed from this union in the next major version.
|
|
18
|
+
*/
|
|
15
19
|
color?: (typeof validColors)[number];
|
|
20
|
+
/** Size modifier for the progress bar. */
|
|
16
21
|
size?: 'small' | 'medium' | 'large';
|
|
22
|
+
/** Current value of the progress bar. */
|
|
17
23
|
value?: number;
|
|
24
|
+
/** Maximum value of the progress bar. */
|
|
18
25
|
max?: number;
|
|
26
|
+
/** Optional custom content inside the progress bar. */
|
|
19
27
|
children?: React.ReactNode;
|
|
20
28
|
}
|
|
21
29
|
/**
|
|
22
|
-
* Progress component
|
|
23
|
-
*
|
|
24
|
-
* Supports Bulma color and size modifiers, value/max attributes, and optional custom content.
|
|
30
|
+
* The `Progress` component displays a Bulma-styled progress bar.
|
|
25
31
|
*
|
|
26
32
|
* @function
|
|
27
33
|
* @param {ProgressProps} props - Props for the Progress component.
|
|
@@ -1,28 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Props for the Skeleton component.
|
|
4
|
-
*
|
|
5
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
6
|
-
* @property {'block' | 'lines'} [variant] - Variant of skeleton: 'block' (default) or 'lines'.
|
|
7
|
-
* @property {number} [lines] - Number of lines (only used if variant="lines").
|
|
8
|
-
* @property {React.ReactNode} [children] - Render content inside the skeleton (block variant only).
|
|
9
|
-
* @see {@link https://bulma.io/documentation/features/skeletons/ | Bulma Skeletons documentation}
|
|
10
4
|
*/
|
|
11
5
|
export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
12
6
|
/** Additional CSS classes to apply */
|
|
13
7
|
className?: string;
|
|
14
|
-
/**
|
|
8
|
+
/** Skeleton variant: block (single block) or lines. */
|
|
15
9
|
variant?: 'block' | 'lines';
|
|
16
|
-
/** Number of lines (only
|
|
10
|
+
/** Number of lines (only for `lines` variant). */
|
|
17
11
|
lines?: number;
|
|
18
|
-
/**
|
|
12
|
+
/** Content inside the block (only for block variant). */
|
|
19
13
|
children?: React.ReactNode;
|
|
20
14
|
}
|
|
21
15
|
/**
|
|
22
|
-
* Skeleton component
|
|
23
|
-
*
|
|
24
|
-
* Renders an animated placeholder that indicates content is loading.
|
|
25
|
-
* Supports block and multi-line variants.
|
|
16
|
+
* The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
|
|
26
17
|
*
|
|
27
18
|
* @function
|
|
28
19
|
* @param {SkeletonProps} props - Props for the Skeleton component.
|
|
@@ -2,23 +2,19 @@ import React from 'react';
|
|
|
2
2
|
import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the Span component.
|
|
5
|
-
*
|
|
6
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
7
|
-
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
|
|
8
|
-
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
|
|
9
|
-
* @property {React.ReactNode} [children] - Content to be rendered inside the span.
|
|
10
5
|
*/
|
|
11
6
|
export interface SpanProps extends React.HTMLAttributes<HTMLSpanElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
|
|
7
|
+
/** Additional CSS classes to apply. */
|
|
12
8
|
className?: string;
|
|
9
|
+
/** Text color helper. */
|
|
13
10
|
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
11
|
+
/** Background color helper. */
|
|
14
12
|
bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
13
|
+
/** Content to render inside the span. */
|
|
15
14
|
children?: React.ReactNode;
|
|
16
15
|
}
|
|
17
16
|
/**
|
|
18
|
-
* Span component
|
|
19
|
-
*
|
|
20
|
-
* A Span wraps the HTML `<span>` element with Bulma helper class integration.
|
|
21
|
-
* Useful for styling inline text with Bulma's color, typography, and spacing utilities.
|
|
17
|
+
* The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
|
|
22
18
|
*
|
|
23
19
|
* @function
|
|
24
20
|
* @param {SpanProps} props - Props for the Span component.
|
|
@@ -2,24 +2,19 @@ import React from 'react';
|
|
|
2
2
|
import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the Strong component.
|
|
5
|
-
*
|
|
6
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
7
|
-
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
|
|
8
|
-
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
|
|
9
|
-
* @property {React.ReactNode} [children] - Content to be rendered inside the strong element.
|
|
10
5
|
*/
|
|
11
6
|
export interface StrongProps extends React.HTMLAttributes<HTMLElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
|
|
7
|
+
/** Additional CSS classes to apply. */
|
|
12
8
|
className?: string;
|
|
9
|
+
/** Text color helper. */
|
|
13
10
|
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
11
|
+
/** Background color helper. */
|
|
14
12
|
bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
13
|
+
/** Content to render inside the strong element. */
|
|
15
14
|
children?: React.ReactNode;
|
|
16
15
|
}
|
|
17
16
|
/**
|
|
18
|
-
* Strong component
|
|
19
|
-
*
|
|
20
|
-
* A Strong wraps the HTML `<strong>` element with Bulma helper class integration.
|
|
21
|
-
* Use it for text that has strong importance, seriousness, or urgency.
|
|
22
|
-
* For visual-only bold styling without semantic meaning, use Span with textWeight="bold".
|
|
17
|
+
* The `Strong` component renders a styled `<strong>` element with Bulma helper class integration.
|
|
23
18
|
*
|
|
24
19
|
* @function
|
|
25
20
|
* @param {StrongProps} props - Props for the Strong component.
|
|
@@ -12,28 +12,26 @@ declare const validSubTitleElements: readonly ["h1", "h2", "h3", "h4", "h5", "h6
|
|
|
12
12
|
export type SubTitleElement = (typeof validSubTitleElements)[number];
|
|
13
13
|
/**
|
|
14
14
|
* Props for the SubTitle component.
|
|
15
|
-
*
|
|
16
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
17
|
-
* @property {SubTitleSize} [size] - Size of the subtitle (1-6).
|
|
18
|
-
* @property {SubTitleElement} [as='h1'] - HTML element to render as (h1-h6 or p).
|
|
19
|
-
* @property {boolean} [hasSkeleton] - Adds the has-skeleton CSS class.
|
|
20
|
-
* @property {React.ReactNode} [children] - Subtitle content.
|
|
21
|
-
* @property {string} [textColor] - Text color class (maps to Bulma's color helper).
|
|
22
|
-
* @property {string} [bgColor] - Background color class (maps to Bulma's backgroundColor helper).
|
|
15
|
+
* @extraProp {boolean} [skeleton] - Applies the `is-skeleton` class to the entire component.
|
|
23
16
|
*/
|
|
24
17
|
export interface SubTitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement | HTMLParagraphElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
|
|
18
|
+
/** Additional CSS classes to apply. */
|
|
25
19
|
className?: string;
|
|
20
|
+
/** Size of the subtitle (Bulma sizes). */
|
|
26
21
|
size?: SubTitleSize;
|
|
22
|
+
/** HTML element to render as (h1-h6 or p). */
|
|
27
23
|
as?: SubTitleElement;
|
|
24
|
+
/** Applies the `has-skeleton` class to part of the content. */
|
|
28
25
|
hasSkeleton?: boolean;
|
|
26
|
+
/** Subtitle content. */
|
|
29
27
|
children?: React.ReactNode;
|
|
28
|
+
/** Text color helper. */
|
|
30
29
|
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
30
|
+
/** Background color helper. */
|
|
31
31
|
bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
32
32
|
}
|
|
33
33
|
/**
|
|
34
|
-
* SubTitle component
|
|
35
|
-
*
|
|
36
|
-
* Supports Bulma subtitle sizes and rendering as different HTML elements (h1-h6, p).
|
|
34
|
+
* The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), supporting sizes `1-6` and rendering as any heading or paragraph element (`h1-h6`, `p`).
|
|
37
35
|
*
|
|
38
36
|
* @function
|
|
39
37
|
* @param {SubTitleProps} props - Props for the SubTitle component.
|
|
@@ -5,24 +5,23 @@ import React from 'react';
|
|
|
5
5
|
import { BulmaClassesProps } from '../helpers/useBulmaClasses';
|
|
6
6
|
/**
|
|
7
7
|
* Props for the Table component.
|
|
8
|
-
*
|
|
9
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
10
|
-
* @property {boolean} [isBordered] - Adds borders to all the cells.
|
|
11
|
-
* @property {boolean} [isStriped] - Adds zebra-striping to rows.
|
|
12
|
-
* @property {boolean} [isNarrow] - Makes the table more compact by cutting cell padding in half.
|
|
13
|
-
* @property {boolean} [isHoverable] - Adds a hover effect on rows.
|
|
14
|
-
* @property {boolean} [isFullwidth] - Makes the table span the full width of its parent.
|
|
15
|
-
* @property {boolean} [isResponsive] - Makes the table horizontally scrollable on small screens.
|
|
16
|
-
* @property {React.ReactNode} [children] - Table content.
|
|
17
8
|
*/
|
|
18
9
|
export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor'> {
|
|
10
|
+
/** Additional CSS classes to apply. */
|
|
19
11
|
className?: string;
|
|
12
|
+
/** Adds borders to all cells. */
|
|
20
13
|
isBordered?: boolean;
|
|
14
|
+
/** Adds zebra-striping to rows. */
|
|
21
15
|
isStriped?: boolean;
|
|
16
|
+
/** Makes the table more compact by cutting cell padding in half. */
|
|
22
17
|
isNarrow?: boolean;
|
|
18
|
+
/** Adds a hover effect on rows. */
|
|
23
19
|
isHoverable?: boolean;
|
|
20
|
+
/** Makes the table span the full width of its parent. */
|
|
24
21
|
isFullwidth?: boolean;
|
|
22
|
+
/** Makes the table horizontally scrollable on small screens. */
|
|
25
23
|
isResponsive?: boolean;
|
|
24
|
+
/** Table content (should use subcomponents). */
|
|
26
25
|
children?: React.ReactNode;
|
|
27
26
|
}
|
|
28
27
|
export declare const Table: React.FC<TableProps> & {
|
|
@@ -12,30 +12,27 @@ declare const validTagSizes: readonly ["normal", "medium", "large"];
|
|
|
12
12
|
export type TagSize = (typeof validTagSizes)[number];
|
|
13
13
|
/**
|
|
14
14
|
* Props for the Tag component.
|
|
15
|
-
*
|
|
16
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
17
|
-
* @property {TagColor} [color] - Bulma color modifier for the tag.
|
|
18
|
-
* @property {TagSize} [size] - Size modifier for the tag.
|
|
19
|
-
* @property {boolean} [isRounded] - Whether the tag should have rounded corners.
|
|
20
|
-
* @property {boolean} [isDelete] - Whether the tag is a delete button.
|
|
21
|
-
* @property {boolean} [isHoverable] - Whether the tag is hoverable.
|
|
22
|
-
* @property {() => void} [onDelete] - Callback fired when the delete button is clicked.
|
|
23
|
-
* @property {React.ReactNode} [children] - Tag content.
|
|
24
15
|
*/
|
|
25
16
|
export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, Omit<BulmaClassesProps, 'color'> {
|
|
17
|
+
/** Additional CSS classes to apply. */
|
|
26
18
|
className?: string;
|
|
19
|
+
/** Bulma color modifier for the tag. */
|
|
27
20
|
color?: TagColor;
|
|
21
|
+
/** Tag size. */
|
|
28
22
|
size?: TagSize;
|
|
23
|
+
/** Renders a rounded tag. */
|
|
29
24
|
isRounded?: boolean;
|
|
25
|
+
/** Renders a delete-style tag (delete button). */
|
|
30
26
|
isDelete?: boolean;
|
|
27
|
+
/** Adds hover effect to the tag. */
|
|
31
28
|
isHoverable?: boolean;
|
|
29
|
+
/** Callback for delete tag/button. */
|
|
32
30
|
onDelete?: () => void;
|
|
31
|
+
/** Tag content. */
|
|
33
32
|
children?: React.ReactNode;
|
|
34
33
|
}
|
|
35
34
|
/**
|
|
36
|
-
* Tag component
|
|
37
|
-
*
|
|
38
|
-
* Supports colors, sizes, rounded, delete, and hoverable variants.
|
|
35
|
+
* The `Tag` component renders a Bulma-styled label or badge.
|
|
39
36
|
*
|
|
40
37
|
* @function
|
|
41
38
|
* @param {TagProps} props - Props for the Tag component.
|
|
@@ -2,16 +2,15 @@ import React from 'react';
|
|
|
2
2
|
import { BulmaClassesProps } from '../helpers/useBulmaClasses';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the Tags component.
|
|
5
|
-
*
|
|
6
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
7
|
-
* @property {boolean} [hasAddons] - Group tags together as addons.
|
|
8
|
-
* @property {boolean} [isMultiline] - Allow tags to wrap onto multiple lines.
|
|
9
|
-
* @property {React.ReactNode} [children] - Tag elements to render inside the container.
|
|
10
5
|
*/
|
|
11
6
|
export interface TagsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
|
|
7
|
+
/** Additional CSS classes to apply. */
|
|
12
8
|
className?: string;
|
|
9
|
+
/** Group tags together as add-ons (no spacing). */
|
|
13
10
|
hasAddons?: boolean;
|
|
11
|
+
/** Allow tags to wrap onto multiple lines. */
|
|
14
12
|
isMultiline?: boolean;
|
|
13
|
+
/** Tag elements to render inside the container. */
|
|
15
14
|
children?: React.ReactNode;
|
|
16
15
|
}
|
|
17
16
|
export declare const Tags: React.FC<TagsProps> & {
|
|
@@ -5,12 +5,11 @@ import React from 'react';
|
|
|
5
5
|
import { BulmaClassesProps } from '../helpers/useBulmaClasses';
|
|
6
6
|
/**
|
|
7
7
|
* Props for the Tbody component.
|
|
8
|
-
*
|
|
9
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
10
|
-
* @property {React.ReactNode} [children] - Table body content (rows).
|
|
11
8
|
*/
|
|
12
9
|
export interface TbodyProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor'> {
|
|
10
|
+
/** Additional CSS classes to apply. */
|
|
13
11
|
className?: string;
|
|
12
|
+
/** Table body content (rows). */
|
|
14
13
|
children?: React.ReactNode;
|
|
15
14
|
}
|
|
16
15
|
/**
|
|
@@ -11,14 +11,13 @@ export declare const validTableColors: readonly ["primary", "link", "info", "suc
|
|
|
11
11
|
export type TableColor = (typeof validTableColors)[number];
|
|
12
12
|
/**
|
|
13
13
|
* Props for the Td component.
|
|
14
|
-
*
|
|
15
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
16
|
-
* @property {TableColor} [color] - Bulma color modifier for the table cell.
|
|
17
|
-
* @property {React.ReactNode} [children] - Table cell content.
|
|
18
14
|
*/
|
|
19
15
|
export interface TdProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
|
|
16
|
+
/** Additional CSS classes to apply. */
|
|
20
17
|
className?: string;
|
|
18
|
+
/** Bulma color modifier for the table cell. */
|
|
21
19
|
color?: TableColor;
|
|
20
|
+
/** Table cell content. */
|
|
22
21
|
children?: React.ReactNode;
|
|
23
22
|
}
|
|
24
23
|
/**
|
|
@@ -5,12 +5,11 @@ import React from 'react';
|
|
|
5
5
|
import { BulmaClassesProps } from '../helpers/useBulmaClasses';
|
|
6
6
|
/**
|
|
7
7
|
* Props for the Tfoot component.
|
|
8
|
-
*
|
|
9
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
10
|
-
* @property {React.ReactNode} [children] - Table footer content (rows).
|
|
11
8
|
*/
|
|
12
9
|
export interface TfootProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor'> {
|
|
10
|
+
/** Additional CSS classes to apply. */
|
|
13
11
|
className?: string;
|
|
12
|
+
/** Table footer content (rows). */
|
|
14
13
|
children?: React.ReactNode;
|
|
15
14
|
}
|
|
16
15
|
/**
|
|
@@ -11,18 +11,17 @@ declare const validAlignments: readonly ["left", "right", "centered"];
|
|
|
11
11
|
type TableAlignment = (typeof validAlignments)[number];
|
|
12
12
|
/**
|
|
13
13
|
* Props for the Th component.
|
|
14
|
-
*
|
|
15
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
16
|
-
* @property {TableAlignment} [isAligned] - Text alignment for the header cell ('left', 'right', 'centered').
|
|
17
|
-
* @property {string|number} [width] - Width of the header cell (e.g., '100px' or 100).
|
|
18
|
-
* @property {TableColor} [color] - Bulma color modifier for the header cell.
|
|
19
|
-
* @property {React.ReactNode} [children] - Table header cell content.
|
|
20
14
|
*/
|
|
21
15
|
export interface ThProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
|
|
16
|
+
/** Additional CSS classes to apply. */
|
|
22
17
|
className?: string;
|
|
18
|
+
/** Text alignment for the header cell ('left', 'right', 'centered'). */
|
|
23
19
|
isAligned?: TableAlignment;
|
|
20
|
+
/** Width of the header cell (e.g., '100px' or 100). */
|
|
24
21
|
width?: string | number;
|
|
22
|
+
/** Bulma color modifier for the header cell. */
|
|
25
23
|
color?: TableColor;
|
|
24
|
+
/** Table header cell content. */
|
|
26
25
|
children?: React.ReactNode;
|
|
27
26
|
}
|
|
28
27
|
/**
|
|
@@ -5,12 +5,11 @@ import React from 'react';
|
|
|
5
5
|
import { BulmaClassesProps } from '../helpers/useBulmaClasses';
|
|
6
6
|
/**
|
|
7
7
|
* Props for the Thead component.
|
|
8
|
-
*
|
|
9
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
10
|
-
* @property {React.ReactNode} [children] - Table header content (rows).
|
|
11
8
|
*/
|
|
12
9
|
export interface TheadProps extends Omit<React.HTMLAttributes<HTMLTableSectionElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor'> {
|
|
10
|
+
/** Additional CSS classes to apply. */
|
|
13
11
|
className?: string;
|
|
12
|
+
/** Table header content (rows). */
|
|
14
13
|
children?: React.ReactNode;
|
|
15
14
|
}
|
|
16
15
|
/**
|
|
@@ -12,30 +12,28 @@ declare const validTitleElements: readonly ["h1", "h2", "h3", "h4", "h5", "h6",
|
|
|
12
12
|
export type TitleElement = (typeof validTitleElements)[number];
|
|
13
13
|
/**
|
|
14
14
|
* Props for the Title component.
|
|
15
|
-
*
|
|
16
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
17
|
-
* @property {TitleSize} [size] - Size of the title (1-6).
|
|
18
|
-
* @property {boolean} [isSpaced] - Adds margin below the title.
|
|
19
|
-
* @property {TitleElement} [as='h1'] - HTML element to render as (h1-h6 or p).
|
|
20
|
-
* @property {boolean} [hasSkeleton] - Adds the has-skeleton CSS class.
|
|
21
|
-
* @property {React.ReactNode} [children] - Title content.
|
|
22
|
-
* @property {string} [textColor] - Text color class (maps to Bulma's color helper).
|
|
23
|
-
* @property {string} [bgColor] - Background color class (maps to Bulma's backgroundColor helper).
|
|
15
|
+
* @extraProp {boolean} [skeleton] - Applies the `is-skeleton` class to the entire component.
|
|
24
16
|
*/
|
|
25
17
|
export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement | HTMLParagraphElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
|
|
18
|
+
/** Additional CSS classes to apply. */
|
|
26
19
|
className?: string;
|
|
20
|
+
/** Size of the title (Bulma sizes). */
|
|
27
21
|
size?: TitleSize;
|
|
22
|
+
/** Adds margin below the title. */
|
|
28
23
|
isSpaced?: boolean;
|
|
24
|
+
/** HTML element to render as (h1-h6 or p). */
|
|
29
25
|
as?: TitleElement;
|
|
26
|
+
/** Applies the `has-skeleton` class to part of the content. */
|
|
30
27
|
hasSkeleton?: boolean;
|
|
28
|
+
/** Title content. */
|
|
31
29
|
children?: React.ReactNode;
|
|
30
|
+
/** Text color helper. */
|
|
32
31
|
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
32
|
+
/** Background color helper. */
|
|
33
33
|
bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
34
34
|
}
|
|
35
35
|
/**
|
|
36
|
-
* Title component
|
|
37
|
-
*
|
|
38
|
-
* Supports sizes, spacing, and rendering as different HTML elements.
|
|
36
|
+
* The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).
|
|
39
37
|
*
|
|
40
38
|
* @function
|
|
41
39
|
* @param {TitleProps} props - Props for the Title component.
|
|
@@ -6,16 +6,15 @@ import { BulmaClassesProps } from '../helpers/useBulmaClasses';
|
|
|
6
6
|
import { TableColor } from './Td';
|
|
7
7
|
/**
|
|
8
8
|
* Props for the Tr component.
|
|
9
|
-
*
|
|
10
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
11
|
-
* @property {boolean} [isSelected] - Whether the row is selected (adds Bulma's is-selected class).
|
|
12
|
-
* @property {TableColor} [color] - Bulma color modifier for the table row.
|
|
13
|
-
* @property {React.ReactNode} [children] - Table row content (cells).
|
|
14
9
|
*/
|
|
15
10
|
export interface TrProps extends Omit<React.HTMLAttributes<HTMLTableRowElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
|
|
11
|
+
/** Additional CSS classes to apply. */
|
|
16
12
|
className?: string;
|
|
13
|
+
/** Whether the row is selected (adds Bulma's is-selected class). */
|
|
17
14
|
isSelected?: boolean;
|
|
15
|
+
/** Bulma color modifier for the table row. */
|
|
18
16
|
color?: TableColor;
|
|
17
|
+
/** Table row content (cells). */
|
|
19
18
|
children?: React.ReactNode;
|
|
20
19
|
}
|
|
21
20
|
/**
|
|
@@ -2,16 +2,15 @@ import React from 'react';
|
|
|
2
2
|
import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the UnorderedList component.
|
|
5
|
-
*
|
|
6
|
-
* @property {string} [className] - Additional CSS classes to apply.
|
|
7
|
-
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
|
|
8
|
-
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
|
|
9
|
-
* @property {React.ReactNode} [children] - List items to be rendered inside the list.
|
|
10
5
|
*/
|
|
11
6
|
export interface UnorderedListProps extends React.HTMLAttributes<HTMLUListElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
|
|
7
|
+
/** Additional CSS classes to apply. */
|
|
12
8
|
className?: string;
|
|
9
|
+
/** Text color helper. */
|
|
13
10
|
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
11
|
+
/** Background color helper. */
|
|
14
12
|
bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
13
|
+
/** List items to render inside the list. */
|
|
15
14
|
children?: React.ReactNode;
|
|
16
15
|
}
|
|
17
16
|
export declare const UnorderedList: React.FC<UnorderedListProps> & {
|