@allxsmith/bestax-bulma 2.0.1 → 2.0.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/dist/index.cjs.js +267 -69
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +266 -68
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Card.d.ts +50 -1
- package/dist/types/components/Message.d.ts +18 -2
- package/dist/types/elements/Icon.d.ts +22 -1
- package/dist/types/elements/Tag.d.ts +1 -1
- package/dist/types/helpers/useBulmaClasses.d.ts +20 -2
- package/package.json +9 -2
|
@@ -14,7 +14,56 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Omit<Bu
|
|
|
14
14
|
imageAlt?: string;
|
|
15
15
|
children?: React.ReactNode;
|
|
16
16
|
}
|
|
17
|
-
|
|
17
|
+
declare const CardComponent: React.FC<CardProps>;
|
|
18
|
+
export interface CardHeaderProps extends React.HTMLAttributes<HTMLElement> {
|
|
19
|
+
className?: string;
|
|
20
|
+
children?: React.ReactNode;
|
|
21
|
+
centered?: boolean;
|
|
22
|
+
}
|
|
23
|
+
export interface CardImageProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
24
|
+
className?: string;
|
|
25
|
+
children?: React.ReactNode;
|
|
26
|
+
}
|
|
27
|
+
export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
28
|
+
className?: string;
|
|
29
|
+
children?: React.ReactNode;
|
|
30
|
+
}
|
|
31
|
+
export interface CardFooterProps extends React.HTMLAttributes<HTMLElement> {
|
|
32
|
+
className?: string;
|
|
33
|
+
children?: React.ReactNode;
|
|
34
|
+
}
|
|
35
|
+
export interface CardFooterItemProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
36
|
+
className?: string;
|
|
37
|
+
children?: React.ReactNode;
|
|
38
|
+
}
|
|
39
|
+
export interface CardHeaderTitleProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
40
|
+
className?: string;
|
|
41
|
+
children?: React.ReactNode;
|
|
42
|
+
centered?: boolean;
|
|
43
|
+
}
|
|
44
|
+
export interface CardHeaderIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
45
|
+
className?: string;
|
|
46
|
+
children?: React.ReactNode;
|
|
47
|
+
}
|
|
48
|
+
declare const CardHeader: React.FC<CardHeaderProps>;
|
|
49
|
+
declare const CardHeaderTitle: React.FC<CardHeaderTitleProps>;
|
|
50
|
+
declare const CardHeaderIcon: React.FC<CardHeaderIconProps>;
|
|
51
|
+
declare const CardImage: React.FC<CardImageProps>;
|
|
52
|
+
declare const CardContent: React.FC<CardContentProps>;
|
|
53
|
+
declare const CardFooter: React.FC<CardFooterProps>;
|
|
54
|
+
declare const CardFooterItem: React.FC<CardFooterItemProps>;
|
|
55
|
+
type CardWithCompounds = typeof CardComponent & {
|
|
56
|
+
Header: typeof CardHeader & {
|
|
57
|
+
Title: typeof CardHeaderTitle;
|
|
58
|
+
Icon: typeof CardHeaderIcon;
|
|
59
|
+
};
|
|
60
|
+
Image: typeof CardImage;
|
|
61
|
+
Content: typeof CardContent;
|
|
62
|
+
Footer: typeof CardFooter;
|
|
63
|
+
FooterItem: typeof CardFooterItem;
|
|
64
|
+
};
|
|
65
|
+
declare const CardWithSubComponents: CardWithCompounds;
|
|
66
|
+
export { CardWithSubComponents as Card };
|
|
18
67
|
export declare const __test_exports__: {
|
|
19
68
|
renderFooter: (footer: CardProps["footer"]) => import("react/jsx-runtime").JSX.Element[] | null;
|
|
20
69
|
};
|
|
@@ -9,5 +9,21 @@ export interface MessageProps extends Omit<React.HTMLAttributes<HTMLElement>, 't
|
|
|
9
9
|
onClose?: () => void;
|
|
10
10
|
children?: React.ReactNode;
|
|
11
11
|
}
|
|
12
|
-
|
|
13
|
-
export
|
|
12
|
+
declare const MessageComponent: React.FC<MessageProps>;
|
|
13
|
+
export interface MessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
14
|
+
className?: string;
|
|
15
|
+
children?: React.ReactNode;
|
|
16
|
+
}
|
|
17
|
+
export interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
18
|
+
className?: string;
|
|
19
|
+
children?: React.ReactNode;
|
|
20
|
+
}
|
|
21
|
+
declare const MessageHeader: React.FC<MessageHeaderProps>;
|
|
22
|
+
declare const MessageBody: React.FC<MessageBodyProps>;
|
|
23
|
+
type MessageWithCompounds = typeof MessageComponent & {
|
|
24
|
+
Header: typeof MessageHeader;
|
|
25
|
+
Body: typeof MessageBody;
|
|
26
|
+
};
|
|
27
|
+
declare const MessageWithSubComponents: MessageWithCompounds;
|
|
28
|
+
export { MessageWithSubComponents as Message };
|
|
29
|
+
export default MessageWithSubComponents;
|
|
@@ -1,6 +1,25 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
|
|
3
|
-
|
|
3
|
+
interface IonIconProps extends React.HTMLAttributes<HTMLElement> {
|
|
4
|
+
name?: string;
|
|
5
|
+
src?: string;
|
|
6
|
+
icon?: unknown;
|
|
7
|
+
size?: string;
|
|
8
|
+
lazy?: boolean;
|
|
9
|
+
sanitize?: boolean;
|
|
10
|
+
color?: string;
|
|
11
|
+
flipRtl?: boolean;
|
|
12
|
+
ariaLabel?: string;
|
|
13
|
+
ariaHidden?: string;
|
|
14
|
+
}
|
|
15
|
+
declare global {
|
|
16
|
+
namespace JSX {
|
|
17
|
+
interface IntrinsicElements {
|
|
18
|
+
'ion-icon': IonIconProps;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
|
|
4
23
|
export interface IconProps extends React.HTMLAttributes<HTMLSpanElement>, BulmaClassesProps {
|
|
5
24
|
className?: string;
|
|
6
25
|
textColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
@@ -8,6 +27,8 @@ export interface IconProps extends React.HTMLAttributes<HTMLSpanElement>, BulmaC
|
|
|
8
27
|
bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
9
28
|
name: string;
|
|
10
29
|
library?: IconLibrary;
|
|
30
|
+
variant?: string;
|
|
31
|
+
features?: string | string[];
|
|
11
32
|
libraryFeatures?: string | string[];
|
|
12
33
|
size?: 'small' | 'medium' | 'large';
|
|
13
34
|
ariaLabel?: string;
|
|
@@ -4,7 +4,7 @@ declare const validTagColors: readonly ["primary", "link", "info", "success", "w
|
|
|
4
4
|
export type TagColor = (typeof validTagColors)[number];
|
|
5
5
|
declare const validTagSizes: readonly ["normal", "medium", "large"];
|
|
6
6
|
export type TagSize = (typeof validTagSizes)[number];
|
|
7
|
-
export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, Omit<BulmaClassesProps, '
|
|
7
|
+
export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, Omit<BulmaClassesProps, 'color'> {
|
|
8
8
|
className?: string;
|
|
9
9
|
color?: TagColor;
|
|
10
10
|
size?: TagSize;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const validColors: readonly ["primary", "link", "info", "success", "warning", "danger", "black", "black-bis", "black-ter", "grey-darker", "grey-dark", "grey", "grey-light", "grey-lighter", "white", "light", "dark"];
|
|
2
|
-
export declare const validColorShades: readonly ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55", "60", "65", "70", "75", "80", "85", "90", "95", "invert"];
|
|
2
|
+
export declare const validColorShades: readonly ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55", "60", "65", "70", "75", "80", "85", "90", "95", "invert", "light", "dark", "soft", "bold", "on-scheme"];
|
|
3
3
|
export declare const validSizes: readonly ["0", "1", "2", "3", "4", "5", "6", "auto"];
|
|
4
4
|
export declare const validTextSizes: readonly ["1", "2", "3", "4", "5", "6", "7"];
|
|
5
5
|
export declare const validAlignments: readonly ["centered", "justified", "left", "right"];
|
|
@@ -7,7 +7,7 @@ export declare const validTextTransforms: readonly ["capitalized", "lowercase",
|
|
|
7
7
|
export declare const validTextWeights: readonly ["light", "normal", "medium", "semibold", "bold"];
|
|
8
8
|
export declare const validFontFamilies: readonly ["sans-serif", "monospace", "primary", "secondary", "code"];
|
|
9
9
|
export declare const validDisplays: readonly ["block", "flex", "inline", "inline-block", "inline-flex"];
|
|
10
|
-
export declare const validVisibilities: readonly ["hidden", "sr-only"];
|
|
10
|
+
export declare const validVisibilities: readonly ["hidden", "sr-only", "invisible"];
|
|
11
11
|
export declare const validFlexDirections: readonly ["row", "row-reverse", "column", "column-reverse"];
|
|
12
12
|
export declare const validFlexWraps: readonly ["nowrap", "wrap", "wrap-reverse"];
|
|
13
13
|
export declare const validJustifyContents: readonly ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "start", "end", "left", "right"];
|
|
@@ -20,6 +20,7 @@ export interface BulmaClassesProps {
|
|
|
20
20
|
color?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
21
21
|
backgroundColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
22
22
|
colorShade?: (typeof validColorShades)[number];
|
|
23
|
+
backgroundColorShade?: (typeof validColorShades)[number];
|
|
23
24
|
m?: (typeof validSizes)[number];
|
|
24
25
|
mt?: (typeof validSizes)[number];
|
|
25
26
|
mr?: (typeof validSizes)[number];
|
|
@@ -62,7 +63,24 @@ export interface BulmaClassesProps {
|
|
|
62
63
|
displayDesktop?: (typeof validDisplays)[number] | 'none';
|
|
63
64
|
displayWidescreen?: (typeof validDisplays)[number] | 'none';
|
|
64
65
|
displayFullhd?: (typeof validDisplays)[number] | 'none';
|
|
66
|
+
textSizeMobile?: (typeof validTextSizes)[number];
|
|
67
|
+
textSizeTablet?: (typeof validTextSizes)[number];
|
|
68
|
+
textSizeDesktop?: (typeof validTextSizes)[number];
|
|
69
|
+
textSizeWidescreen?: (typeof validTextSizes)[number];
|
|
70
|
+
textSizeFullhd?: (typeof validTextSizes)[number];
|
|
71
|
+
textAlignMobile?: (typeof validAlignments)[number];
|
|
72
|
+
textAlignTablet?: (typeof validAlignments)[number];
|
|
73
|
+
textAlignDesktop?: (typeof validAlignments)[number];
|
|
74
|
+
textAlignWidescreen?: (typeof validAlignments)[number];
|
|
75
|
+
textAlignFullhd?: (typeof validAlignments)[number];
|
|
76
|
+
visibilityMobile?: (typeof validVisibilities)[number];
|
|
77
|
+
visibilityTablet?: (typeof validVisibilities)[number];
|
|
78
|
+
visibilityDesktop?: (typeof validVisibilities)[number];
|
|
79
|
+
visibilityWidescreen?: (typeof validVisibilities)[number];
|
|
80
|
+
visibilityFullhd?: (typeof validVisibilities)[number];
|
|
65
81
|
skeleton?: boolean;
|
|
82
|
+
clearfix?: boolean;
|
|
83
|
+
relative?: boolean;
|
|
66
84
|
}
|
|
67
85
|
export declare const useBulmaClasses: <T extends Record<string, unknown>>(props: BulmaClassesProps & T) => {
|
|
68
86
|
bulmaHelperClasses: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@allxsmith/bestax-bulma",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"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.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"build-storybook": "storybook build",
|
|
30
30
|
"release": "npx semantic-release"
|
|
31
31
|
},
|
|
32
|
-
"dependencies": {},
|
|
33
32
|
"devDependencies": {
|
|
34
33
|
"@faker-js/faker": "^9.0.3",
|
|
34
|
+
"@mdi/font": "^7.4.47",
|
|
35
35
|
"@rollup/plugin-commonjs": "^28.0.0",
|
|
36
36
|
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
37
37
|
"@rollup/plugin-typescript": "^12.1.0",
|
|
@@ -53,8 +53,11 @@
|
|
|
53
53
|
"eslint-plugin-react": "^7.37.1",
|
|
54
54
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
55
55
|
"eslint-plugin-storybook": "^9.0.12",
|
|
56
|
+
"ionicons": "^4.6.3",
|
|
56
57
|
"jest": "^29.7.0",
|
|
57
58
|
"jest-environment-jsdom": "^29.7.0",
|
|
59
|
+
"material-icons": "^1.13.14",
|
|
60
|
+
"material-symbols": "^0.34.1",
|
|
58
61
|
"prettier": "^3.3.3",
|
|
59
62
|
"rimraf": "^6.0.1",
|
|
60
63
|
"rollup": "^4.24.0",
|
|
@@ -66,7 +69,11 @@
|
|
|
66
69
|
},
|
|
67
70
|
"peerDependencies": {
|
|
68
71
|
"@fortawesome/fontawesome-free": "^6.7.2",
|
|
72
|
+
"@mdi/font": "^7.4.47",
|
|
69
73
|
"bulma": "^1.0.4",
|
|
74
|
+
"ionicons": "^4.6.3",
|
|
75
|
+
"material-icons": "^1.13.10",
|
|
76
|
+
"material-symbols": "^0.34.1",
|
|
70
77
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
71
78
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
72
79
|
},
|