@allxsmith/bestax-bulma 5.27.1 → 5.27.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/esm/form/Autocomplete.js.map +1 -1
- package/dist/esm/form/Checkboxes.js +1 -0
- package/dist/esm/form/Checkboxes.js.map +1 -1
- package/dist/esm/form/DateInput.js +2 -1
- package/dist/esm/form/DateInput.js.map +1 -1
- package/dist/esm/form/DateRangeInput.js +1 -0
- package/dist/esm/form/DateRangeInput.js.map +1 -1
- package/dist/esm/form/DateTimeInput.js +2 -1
- package/dist/esm/form/DateTimeInput.js.map +1 -1
- package/dist/esm/form/Field.js +18 -4
- package/dist/esm/form/Field.js.map +1 -1
- package/dist/esm/form/File.js +4 -1
- package/dist/esm/form/File.js.map +1 -1
- package/dist/esm/form/FormContext.js +27 -3
- package/dist/esm/form/FormContext.js.map +1 -1
- package/dist/esm/form/Input.js +1 -1
- package/dist/esm/form/Input.js.map +1 -1
- package/dist/esm/form/Numberinput.js +3 -1
- package/dist/esm/form/Numberinput.js.map +1 -1
- package/dist/esm/form/Radios.js +1 -0
- package/dist/esm/form/Radios.js.map +1 -1
- package/dist/esm/form/Rate.js +1 -0
- package/dist/esm/form/Rate.js.map +1 -1
- package/dist/esm/form/Select.js +1 -1
- package/dist/esm/form/Select.js.map +1 -1
- package/dist/esm/form/Slider.js +4 -2
- package/dist/esm/form/Slider.js.map +1 -1
- package/dist/esm/form/Taginput.js +4 -5
- package/dist/esm/form/Taginput.js.map +1 -1
- package/dist/esm/form/TextArea.js +1 -1
- package/dist/esm/form/TextArea.js.map +1 -1
- package/dist/esm/form/TimeInput.js +2 -1
- package/dist/esm/form/TimeInput.js.map +1 -1
- package/dist/esm/form/useAutoLabelId.js +42 -8
- package/dist/esm/form/useAutoLabelId.js.map +1 -1
- package/dist/esm/helpers/Config.js.map +1 -1
- package/dist/esm/helpers/Theme.js.map +1 -1
- package/dist/index.cjs +112 -28
- package/dist/index.cjs.map +1 -1
- package/dist/types/form/Autocomplete.d.ts +1 -1
- package/dist/types/form/Checkboxes.d.ts +1 -1
- package/dist/types/form/DateInput.d.ts +1 -1
- package/dist/types/form/DateRangeInput.d.ts +1 -1
- package/dist/types/form/DateTimeInput.d.ts +1 -1
- package/dist/types/form/Field.d.ts +2 -2
- package/dist/types/form/File.d.ts +1 -1
- package/dist/types/form/FormContext.d.ts +24 -2
- package/dist/types/form/Numberinput.d.ts +1 -1
- package/dist/types/form/Radios.d.ts +1 -1
- package/dist/types/form/Rate.d.ts +1 -1
- package/dist/types/form/Slider.d.ts +1 -1
- package/dist/types/form/Taginput.d.ts +1 -1
- package/dist/types/form/TimeInput.d.ts +1 -1
- package/dist/types/form/useAutoLabelId.d.ts +25 -4
- package/dist/types/helpers/Config.d.ts +3 -4
- package/dist/types/helpers/Theme.d.ts +44 -40
- package/dist/types-cjs/form/Autocomplete.d.ts +1 -1
- package/dist/types-cjs/form/Checkboxes.d.ts +1 -1
- package/dist/types-cjs/form/DateInput.d.ts +1 -1
- package/dist/types-cjs/form/DateRangeInput.d.ts +1 -1
- package/dist/types-cjs/form/DateTimeInput.d.ts +1 -1
- package/dist/types-cjs/form/Field.d.ts +2 -2
- package/dist/types-cjs/form/File.d.ts +1 -1
- package/dist/types-cjs/form/FormContext.d.ts +24 -2
- package/dist/types-cjs/form/Numberinput.d.ts +1 -1
- package/dist/types-cjs/form/Radios.d.ts +1 -1
- package/dist/types-cjs/form/Rate.d.ts +1 -1
- package/dist/types-cjs/form/Slider.d.ts +1 -1
- package/dist/types-cjs/form/Taginput.d.ts +1 -1
- package/dist/types-cjs/form/TimeInput.d.ts +1 -1
- package/dist/types-cjs/form/useAutoLabelId.d.ts +25 -4
- package/dist/types-cjs/helpers/Config.d.ts +3 -4
- package/dist/types-cjs/helpers/Theme.d.ts +44 -40
- package/package.json +1 -1
|
@@ -22,7 +22,7 @@ import { TimeInputBaseProps } from './TimeInputBase.js';
|
|
|
22
22
|
* @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the underlying `<input>`.
|
|
23
23
|
*/
|
|
24
24
|
export interface TimeInputProps extends TimeInputBaseProps {
|
|
25
|
-
/** Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label)
|
|
25
|
+
/** Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label). Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */
|
|
26
26
|
label?: React.ReactNode;
|
|
27
27
|
/** Size for the label. */
|
|
28
28
|
labelSize?: FieldProps['labelSize'];
|
|
@@ -13,6 +13,11 @@ interface UseAutoLabelIdOptions {
|
|
|
13
13
|
* no Field, and in modes with no labellable control (e.g. inline pickers).
|
|
14
14
|
*/
|
|
15
15
|
rendersLabel: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* False when this render has no input to label at all (an inline picker),
|
|
18
|
+
* so it takes no id from a surrounding Field either. Defaults to true.
|
|
19
|
+
*/
|
|
20
|
+
hasInput?: boolean;
|
|
16
21
|
}
|
|
17
22
|
/**
|
|
18
23
|
* Associates the convenience `label` prop with its control (#368): generates
|
|
@@ -20,11 +25,16 @@ interface UseAutoLabelIdOptions {
|
|
|
20
25
|
* A user-supplied `id` is used as the target instead of the generated one, and
|
|
21
26
|
* an explicit `htmlFor` key in labelProps — even set to `undefined` — disables
|
|
22
27
|
* generation entirely: the user has taken over the association (#495 presence
|
|
23
|
-
* semantics).
|
|
28
|
+
* semantics). When the control renders no label of its own, it adopts the id
|
|
29
|
+
* a labeled Field around it offers, the way the bases do, so that Field's
|
|
30
|
+
* label names it (#939); a user `id` still wins there.
|
|
31
|
+
* Internal; not part of the public API.
|
|
24
32
|
*/
|
|
25
|
-
export declare function useAutoLabelId({ label, id, labelProps, rendersLabel, }: UseAutoLabelIdOptions): {
|
|
33
|
+
export declare function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput, }: UseAutoLabelIdOptions): {
|
|
26
34
|
controlId: string | undefined;
|
|
27
35
|
fieldLabelProps: FieldProps['labelProps'] | undefined;
|
|
36
|
+
/** Whether a rendered label, its own or a surrounding Field's, points at `controlId`. */
|
|
37
|
+
labelled: boolean;
|
|
28
38
|
};
|
|
29
39
|
interface UseAutoLabelledByOptions {
|
|
30
40
|
/** The convenience `label` prop as passed by the caller. */
|
|
@@ -33,6 +43,13 @@ interface UseAutoLabelledByOptions {
|
|
|
33
43
|
labelProps?: FieldProps['labelProps'];
|
|
34
44
|
/** True when this render actually outputs the label naming the group. */
|
|
35
45
|
rendersLabel: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* The caller's remaining props. A non-empty `aria-label` among them names
|
|
48
|
+
* the group, and so does any `aria-labelledby` key, even an undefined one,
|
|
49
|
+
* since the group spreads them after its own attribute. Either keeps every
|
|
50
|
+
* label off the group, its own and a surrounding Field's alike.
|
|
51
|
+
*/
|
|
52
|
+
callerProps: object;
|
|
36
53
|
}
|
|
37
54
|
/**
|
|
38
55
|
* Group-input counterpart of {@link useAutoLabelId} (#494): a group of
|
|
@@ -41,10 +58,14 @@ interface UseAutoLabelledByOptions {
|
|
|
41
58
|
* `aria-labelledby`. A user-supplied `labelProps.id` is used as the target
|
|
42
59
|
* instead of generating one. Any caller `htmlFor` is stripped — a group label
|
|
43
60
|
* names the group, never a single control — so the merged labelProps always
|
|
44
|
-
* carry an explicit `htmlFor: undefined`.
|
|
61
|
+
* carry an explicit `htmlFor: undefined`. When the group renders no label of
|
|
62
|
+
* its own, it points at the label of a labeled Field around it instead
|
|
63
|
+
* (#939). A caller who named the group with `aria-label` or
|
|
64
|
+
* `aria-labelledby` gets no `aria-labelledby` from either label, so their
|
|
65
|
+
* name wins wherever the label sits.
|
|
45
66
|
* Internal; not part of the public API.
|
|
46
67
|
*/
|
|
47
|
-
export declare function useAutoLabelledBy({ label, labelProps, rendersLabel, }: UseAutoLabelledByOptions): {
|
|
68
|
+
export declare function useAutoLabelledBy({ label, labelProps, rendersLabel, callerProps, }: UseAutoLabelledByOptions): {
|
|
48
69
|
ariaLabelledBy: string | undefined;
|
|
49
70
|
fieldLabelProps: FieldProps['labelProps'] | undefined;
|
|
50
71
|
};
|
|
@@ -20,14 +20,13 @@ export interface ConfigContextProps {
|
|
|
20
20
|
export declare const useConfig: () => ConfigContextProps;
|
|
21
21
|
/**
|
|
22
22
|
* Props for the ConfigProvider component.
|
|
23
|
-
*
|
|
24
|
-
* @property {React.ReactNode} children - Child components to receive configuration.
|
|
25
|
-
* @property {string} [classPrefix] - Prefix applied to all Bulma class names.
|
|
26
|
-
* @property {IconLibrary} [iconLibrary] - Default icon library for Icon components.
|
|
27
23
|
*/
|
|
28
24
|
export interface ConfigProviderProps {
|
|
25
|
+
/** Child components to receive configuration. */
|
|
29
26
|
children: ReactNode;
|
|
27
|
+
/** Prefix applied to all Bulma class names. */
|
|
30
28
|
classPrefix?: string;
|
|
29
|
+
/** Default icon library for Icon components. */
|
|
31
30
|
iconLibrary?: IconLibrary;
|
|
32
31
|
}
|
|
33
32
|
/**
|
|
@@ -8,48 +8,9 @@ type BulmaVarKey = (typeof bulmaCssVars)[number];
|
|
|
8
8
|
type BulmaVars = Partial<Record<BulmaVarKey, string>>;
|
|
9
9
|
/**
|
|
10
10
|
* Props for the Theme component.
|
|
11
|
-
*
|
|
12
|
-
* @property {React.ReactNode} children - Content to render inside the theme scope.
|
|
13
|
-
* @property {string} [className] - Additional CSS classes (only when isRoot is false).
|
|
14
|
-
* @property {BulmaVars} [bulmaVars] - Object mapping Bulma CSS variable names to values.
|
|
15
|
-
* @property {string} [schemeH] - Scheme hue value.
|
|
16
|
-
* @property {string} [schemeS] - Scheme saturation value.
|
|
17
|
-
* @property {string} [lightL] - Light theme lightness value.
|
|
18
|
-
* @property {string} [lightInvertL] - Light theme inverted lightness value.
|
|
19
|
-
* @property {string} [darkL] - Dark theme lightness value.
|
|
20
|
-
* @property {string} [darkInvertL] - Dark theme inverted lightness value.
|
|
21
|
-
* @property {string} [softL] - Soft lightness value.
|
|
22
|
-
* @property {string} [boldL] - Bold lightness value.
|
|
23
|
-
* @property {string} [softInvertL] - Soft inverted lightness value.
|
|
24
|
-
* @property {string} [boldInvertL] - Bold inverted lightness value.
|
|
25
|
-
* @property {string} [hoverBackgroundLDelta] - Background lightness delta on hover.
|
|
26
|
-
* @property {string} [activeBackgroundLDelta] - Background lightness delta on active.
|
|
27
|
-
* @property {string} [hoverBorderLDelta] - Border lightness delta on hover.
|
|
28
|
-
* @property {string} [activeBorderLDelta] - Border lightness delta on active.
|
|
29
|
-
* @property {string} [hoverColorLDelta] - Text color lightness delta on hover.
|
|
30
|
-
* @property {string} [activeColorLDelta] - Text color lightness delta on active.
|
|
31
|
-
* @property {string} [hoverShadowADelta] - Shadow alpha delta on hover.
|
|
32
|
-
* @property {string} [activeShadowADelta] - Shadow alpha delta on active.
|
|
33
|
-
* @property {string} [primaryH] - Primary color hue.
|
|
34
|
-
* @property {string} [primaryS] - Primary color saturation.
|
|
35
|
-
* @property {string} [primaryL] - Primary color lightness.
|
|
36
|
-
* @property {string} [linkH] - Link color hue.
|
|
37
|
-
* @property {string} [linkS] - Link color saturation.
|
|
38
|
-
* @property {string} [linkL] - Link color lightness.
|
|
39
|
-
* @property {string} [infoH] - Info color hue.
|
|
40
|
-
* @property {string} [infoS] - Info color saturation.
|
|
41
|
-
* @property {string} [infoL] - Info color lightness.
|
|
42
|
-
* @property {string} [successH] - Success color hue.
|
|
43
|
-
* @property {string} [successS] - Success color saturation.
|
|
44
|
-
* @property {string} [successL] - Success color lightness.
|
|
45
|
-
* @property {string} [warningH] - Warning color hue.
|
|
46
|
-
* @property {string} [warningS] - Warning color saturation.
|
|
47
|
-
* @property {string} [warningL] - Warning color lightness.
|
|
48
|
-
* @property {string} [dangerH] - Danger color hue.
|
|
49
|
-
* @property {string} [dangerS] - Danger color saturation.
|
|
50
|
-
* @property {string} [dangerL] - Danger color lightness.
|
|
51
11
|
*/
|
|
52
12
|
export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
|
|
13
|
+
/** The content the theme applies to. */
|
|
53
14
|
children: ReactNode;
|
|
54
15
|
/**
|
|
55
16
|
* Additional CSS classes for the wrapper div. A root Theme (`isRoot`) has no
|
|
@@ -86,6 +47,13 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
|
|
|
86
47
|
* write only `data-theme` and warn in development.
|
|
87
48
|
*/
|
|
88
49
|
colorMode?: 'light' | 'dark' | 'system';
|
|
50
|
+
/**
|
|
51
|
+
* Bulma CSS variables to set, by name, such as
|
|
52
|
+
* `{ '--bulma-primary-h': '210' }`. Only Bulma's own variables, the keys
|
|
53
|
+
* the `BulmaVars` type allows, are applied, and an empty value is skipped.
|
|
54
|
+
* Where a variable prop, such as `primaryH`, sets the same variable, the
|
|
55
|
+
* prop wins.
|
|
56
|
+
*/
|
|
89
57
|
bulmaVars?: BulmaVars;
|
|
90
58
|
/**
|
|
91
59
|
* Border radius helper, as on every other component: `radiusless` adds
|
|
@@ -124,41 +92,77 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
|
|
|
124
92
|
* now adds `is-column-gap-0` to the wrapper instead.
|
|
125
93
|
*/
|
|
126
94
|
columnGap?: BulmaGapStep;
|
|
95
|
+
/** Base hue for the color scheme, 0 to 360. Sets `--bulma-scheme-h`. */
|
|
127
96
|
schemeH?: string;
|
|
97
|
+
/** Base saturation for the color scheme, as a percentage. Sets `--bulma-scheme-s`. */
|
|
128
98
|
schemeS?: string;
|
|
99
|
+
/** Lightness for light backgrounds. Sets `--bulma-light-l`. */
|
|
129
100
|
lightL?: string;
|
|
101
|
+
/** Inverted lightness for light backgrounds. Sets `--bulma-light-invert-l`. */
|
|
130
102
|
lightInvertL?: string;
|
|
103
|
+
/** Lightness for dark backgrounds. Sets `--bulma-dark-l`. */
|
|
131
104
|
darkL?: string;
|
|
105
|
+
/** Inverted lightness for dark backgrounds. Sets `--bulma-dark-invert-l`. */
|
|
132
106
|
darkInvertL?: string;
|
|
107
|
+
/** Lightness for soft colors. Sets `--bulma-soft-l`. */
|
|
133
108
|
softL?: string;
|
|
109
|
+
/** Lightness for bold colors. Sets `--bulma-bold-l`. */
|
|
134
110
|
boldL?: string;
|
|
111
|
+
/** Inverted lightness for soft colors. Sets `--bulma-soft-invert-l`. */
|
|
135
112
|
softInvertL?: string;
|
|
113
|
+
/** Inverted lightness for bold colors. Sets `--bulma-bold-invert-l`. */
|
|
136
114
|
boldInvertL?: string;
|
|
115
|
+
/** Lightness change of a background on hover. Sets `--bulma-hover-background-l-delta`. */
|
|
137
116
|
hoverBackgroundLDelta?: string;
|
|
117
|
+
/** Lightness change of a background when active. Sets `--bulma-active-background-l-delta`. */
|
|
138
118
|
activeBackgroundLDelta?: string;
|
|
119
|
+
/** Lightness change of a border on hover. Sets `--bulma-hover-border-l-delta`. */
|
|
139
120
|
hoverBorderLDelta?: string;
|
|
121
|
+
/** Lightness change of a border when active. Sets `--bulma-active-border-l-delta`. */
|
|
140
122
|
activeBorderLDelta?: string;
|
|
123
|
+
/** Lightness change of text color on hover. Sets `--bulma-hover-color-l-delta`. */
|
|
141
124
|
hoverColorLDelta?: string;
|
|
125
|
+
/** Lightness change of text color when active. Sets `--bulma-active-color-l-delta`. */
|
|
142
126
|
activeColorLDelta?: string;
|
|
127
|
+
/** Alpha change of a shadow on hover. Sets `--bulma-hover-shadow-a-delta`. */
|
|
143
128
|
hoverShadowADelta?: string;
|
|
129
|
+
/** Alpha change of a shadow when active. Sets `--bulma-active-shadow-a-delta`. */
|
|
144
130
|
activeShadowADelta?: string;
|
|
131
|
+
/** Primary color hue, 0 to 360. Sets `--bulma-primary-h`. */
|
|
145
132
|
primaryH?: string;
|
|
133
|
+
/** Primary color saturation, as a percentage. Sets `--bulma-primary-s`. */
|
|
146
134
|
primaryS?: string;
|
|
135
|
+
/** Primary color lightness, as a percentage. Sets `--bulma-primary-l`. */
|
|
147
136
|
primaryL?: string;
|
|
137
|
+
/** Link color hue, 0 to 360. Sets `--bulma-link-h`. */
|
|
148
138
|
linkH?: string;
|
|
139
|
+
/** Link color saturation, as a percentage. Sets `--bulma-link-s`. */
|
|
149
140
|
linkS?: string;
|
|
141
|
+
/** Link color lightness, as a percentage. Sets `--bulma-link-l`. */
|
|
150
142
|
linkL?: string;
|
|
143
|
+
/** Info color hue, 0 to 360. Sets `--bulma-info-h`. */
|
|
151
144
|
infoH?: string;
|
|
145
|
+
/** Info color saturation, as a percentage. Sets `--bulma-info-s`. */
|
|
152
146
|
infoS?: string;
|
|
147
|
+
/** Info color lightness, as a percentage. Sets `--bulma-info-l`. */
|
|
153
148
|
infoL?: string;
|
|
149
|
+
/** Success color hue, 0 to 360. Sets `--bulma-success-h`. */
|
|
154
150
|
successH?: string;
|
|
151
|
+
/** Success color saturation, as a percentage. Sets `--bulma-success-s`. */
|
|
155
152
|
successS?: string;
|
|
153
|
+
/** Success color lightness, as a percentage. Sets `--bulma-success-l`. */
|
|
156
154
|
successL?: string;
|
|
155
|
+
/** Warning color hue, 0 to 360. Sets `--bulma-warning-h`. */
|
|
157
156
|
warningH?: string;
|
|
157
|
+
/** Warning color saturation, as a percentage. Sets `--bulma-warning-s`. */
|
|
158
158
|
warningS?: string;
|
|
159
|
+
/** Warning color lightness, as a percentage. Sets `--bulma-warning-l`. */
|
|
159
160
|
warningL?: string;
|
|
161
|
+
/** Danger color hue, 0 to 360. Sets `--bulma-danger-h`. */
|
|
160
162
|
dangerH?: string;
|
|
163
|
+
/** Danger color saturation, as a percentage. Sets `--bulma-danger-s`. */
|
|
161
164
|
dangerS?: string;
|
|
165
|
+
/** Danger color lightness, as a percentage. Sets `--bulma-danger-l`. */
|
|
162
166
|
dangerL?: string;
|
|
163
167
|
}
|
|
164
168
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@allxsmith/bestax-bulma",
|
|
3
|
-
"version": "5.27.
|
|
3
|
+
"version": "5.27.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",
|
|
6
6
|
"module": "dist/index.esm.js",
|