@allxsmith/bestax-bulma 5.6.2 → 5.8.0
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/AGENTS.md +28 -0
- package/CLAUDE.md +28 -0
- package/README.md +15 -15
- package/dist/index.cjs.js +3885 -243
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +3884 -242
- package/dist/index.esm.js.map +1 -1
- package/dist/types/columns/Column.d.ts +43 -0
- package/dist/types/columns/Columns.d.ts +41 -1
- package/dist/types/components/Avatar.d.ts +37 -0
- package/dist/types/components/Avatars.d.ts +15 -2
- package/dist/types/components/Badge.d.ts +42 -0
- package/dist/types/components/Breadcrumb.d.ts +28 -0
- package/dist/types/components/Card.d.ts +70 -18
- package/dist/types/components/Carousel.d.ts +70 -0
- package/dist/types/components/Collapse.d.ts +53 -0
- package/dist/types/components/Dialog.d.ts +94 -0
- package/dist/types/components/Dropdown.d.ts +44 -0
- package/dist/types/components/Loading.d.ts +55 -0
- package/dist/types/components/Menu.d.ts +48 -0
- package/dist/types/components/Message.d.ts +27 -9
- package/dist/types/components/Modal.d.ts +65 -17
- package/dist/types/components/Navbar.d.ts +171 -12
- package/dist/types/components/Pagination.d.ts +84 -7
- package/dist/types/components/Panel.d.ts +109 -9
- package/dist/types/components/Reveal.d.ts +43 -0
- package/dist/types/components/Sidebar.d.ts +40 -0
- package/dist/types/components/Steps.d.ts +66 -1
- package/dist/types/components/Tabs.d.ts +100 -11
- package/dist/types/components/Toast.d.ts +109 -0
- package/dist/types/components/Tooltip.d.ts +50 -0
- package/dist/types/elements/Block.d.ts +20 -0
- package/dist/types/elements/Box.d.ts +23 -1
- package/dist/types/elements/Button.d.ts +26 -0
- package/dist/types/elements/Buttons.d.ts +16 -1
- package/dist/types/elements/Code.d.ts +19 -0
- package/dist/types/elements/Content.d.ts +21 -0
- package/dist/types/elements/Delete.d.ts +22 -0
- package/dist/types/elements/Divider.d.ts +16 -0
- package/dist/types/elements/Emphasis.d.ts +19 -0
- package/dist/types/elements/Figure.d.ts +25 -0
- package/dist/types/elements/Icon.d.ts +28 -0
- package/dist/types/elements/IconText.d.ts +20 -1
- package/dist/types/elements/Image.d.ts +27 -0
- package/dist/types/elements/Link.d.ts +24 -0
- package/dist/types/elements/LinkButton.d.ts +26 -0
- package/dist/types/elements/ListItem.d.ts +20 -0
- package/dist/types/elements/Notification.d.ts +101 -0
- package/dist/types/elements/OrderedList.d.ts +14 -1
- package/dist/types/elements/Paragraph.d.ts +19 -0
- package/dist/types/elements/Pre.d.ts +19 -0
- package/dist/types/elements/Progress.d.ts +20 -0
- package/dist/types/elements/Skeleton.d.ts +31 -0
- package/dist/types/elements/Span.d.ts +18 -0
- package/dist/types/elements/Strong.d.ts +19 -0
- package/dist/types/elements/SubTitle.d.ts +27 -0
- package/dist/types/elements/Table.d.ts +23 -1
- package/dist/types/elements/Tag.d.ts +28 -0
- package/dist/types/elements/Tags.d.ts +11 -1
- package/dist/types/elements/Tbody.d.ts +19 -0
- package/dist/types/elements/Td.d.ts +24 -0
- package/dist/types/elements/Tfoot.d.ts +19 -0
- package/dist/types/elements/Th.d.ts +25 -0
- package/dist/types/elements/Thead.d.ts +19 -0
- package/dist/types/elements/Title.d.ts +28 -0
- package/dist/types/elements/Tr.d.ts +21 -0
- package/dist/types/elements/UnorderedList.d.ts +11 -1
- package/dist/types/form/Autocomplete.d.ts +67 -0
- package/dist/types/form/Checkbox.d.ts +44 -0
- package/dist/types/form/Checkboxes.d.ts +13 -1
- package/dist/types/form/Control.d.ts +36 -0
- package/dist/types/form/DateInput.d.ts +44 -0
- package/dist/types/form/DateInputBase.d.ts +47 -0
- package/dist/types/form/DateTimeInput.d.ts +42 -0
- package/dist/types/form/DateTimeInputBase.d.ts +56 -0
- package/dist/types/form/Field.d.ts +66 -2
- package/dist/types/form/File.d.ts +26 -0
- package/dist/types/form/FormContext.d.ts +46 -0
- package/dist/types/form/Input.d.ts +49 -0
- package/dist/types/form/InputBase.d.ts +22 -0
- package/dist/types/form/Numberinput.d.ts +46 -0
- package/dist/types/form/Radio.d.ts +44 -0
- package/dist/types/form/Radios.d.ts +13 -1
- package/dist/types/form/Rate.d.ts +71 -0
- package/dist/types/form/Select.d.ts +39 -0
- package/dist/types/form/SelectBase.d.ts +25 -0
- package/dist/types/form/Slider.d.ts +71 -0
- package/dist/types/form/Switch.d.ts +53 -0
- package/dist/types/form/Taginput.d.ts +77 -0
- package/dist/types/form/TextArea.d.ts +38 -0
- package/dist/types/form/TextAreaBase.d.ts +25 -0
- package/dist/types/form/TimeInput.d.ts +39 -0
- package/dist/types/form/TimeInputBase.d.ts +72 -0
- package/dist/types/form/_pickerInternals/Calendar.d.ts +6 -0
- package/dist/types/form/_pickerInternals/TimeWheels.d.ts +13 -0
- package/dist/types/form/_pickerInternals/audioTick.d.ts +47 -0
- package/dist/types/form/_pickerInternals/dateUtils.d.ts +13 -0
- package/dist/types/form/_pickerInternals/formatters.d.ts +19 -0
- package/dist/types/form/_pickerInternals/haptics.d.ts +23 -0
- package/dist/types/form/_pickerInternals/pickerTypes.d.ts +8 -0
- package/dist/types/form/_pickerInternals/segmentMap.d.ts +48 -0
- package/dist/types/form/_pickerInternals/useNativeMobilePicker.d.ts +1 -0
- package/dist/types/form/_pickerInternals/useSegmentedEntry.d.ts +30 -0
- package/dist/types/form/fieldProps.d.ts +12 -0
- package/dist/types/grid/Cell.d.ts +26 -0
- package/dist/types/grid/Grid.d.ts +36 -1
- package/dist/types/helpers/Config.d.ts +50 -0
- package/dist/types/helpers/Theme.d.ts +66 -0
- package/dist/types/helpers/bulmaClassHelpers.d.ts +97 -0
- package/dist/types/helpers/classNames.d.ts +50 -0
- package/dist/types/helpers/useBulmaClasses.d.ts +22 -0
- package/dist/types/helpers/useColorClasses.d.ts +20 -0
- package/dist/types/helpers/useFlexboxClasses.d.ts +34 -0
- package/dist/types/helpers/useOtherClasses.d.ts +27 -0
- package/dist/types/helpers/useSpacingClasses.d.ts +27 -0
- package/dist/types/helpers/useTypographyClasses.d.ts +32 -0
- package/dist/types/helpers/useVisibilityClasses.d.ts +25 -0
- package/dist/types/helpers/withSubComponents.d.ts +16 -0
- package/dist/types/layout/Container.d.ts +26 -0
- package/dist/types/layout/Footer.d.ts +23 -0
- package/dist/types/layout/Hero.d.ts +66 -5
- package/dist/types/layout/Level.d.ts +68 -5
- package/dist/types/layout/Media.d.ts +63 -5
- package/dist/types/layout/Section.d.ts +21 -0
- package/dist/types/skill-examples/ExampleMeta.d.ts +5 -0
- package/dist/types/skill-examples/ProfileCard.d.ts +13 -0
- package/llms.txt +9 -0
- package/package.json +13 -11
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BulmaClassesProps } from '../helpers/useBulmaClasses';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the TextArea component.
|
|
5
|
+
*
|
|
6
|
+
* @property {'primary'|'link'|'info'|'success'|'warning'|'danger'|'black'|'dark'|'light'|'white'} [color] - Bulma color modifier for the textarea.
|
|
7
|
+
* @property {'small'|'medium'|'large'} [size] - Size modifier for the textarea.
|
|
8
|
+
* @property {boolean} [isRounded] - Renders the textarea with rounded corners.
|
|
9
|
+
* @property {boolean} [isStatic] - Renders the textarea as static text.
|
|
10
|
+
* @property {boolean} [isHovered] - Applies the hovered state.
|
|
11
|
+
* @property {boolean} [isFocused] - Applies the focused state.
|
|
12
|
+
* @property {boolean} [isLoading] - Shows loading indicator.
|
|
13
|
+
* @property {boolean} [isActive] - Applies Bulma's is-active modifier.
|
|
14
|
+
* @property {boolean} [hasFixedSize] - Applies Bulma's has-fixed-size modifier.
|
|
15
|
+
* @property {string} [className] - Additional CSS classes to apply.
|
|
16
|
+
* @property {boolean} [disabled] - Whether the textarea is disabled.
|
|
17
|
+
* @property {boolean} [readOnly] - Whether the textarea is read-only.
|
|
18
|
+
* @property {number} [rows] - Number of visible text lines.
|
|
19
|
+
*/
|
|
3
20
|
export interface TextAreaBaseProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, Omit<BulmaClassesProps, 'color'> {
|
|
4
21
|
color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
|
|
5
22
|
size?: 'small' | 'medium' | 'large';
|
|
@@ -15,5 +32,13 @@ export interface TextAreaBaseProps extends Omit<React.TextareaHTMLAttributes<HTM
|
|
|
15
32
|
readOnly?: boolean;
|
|
16
33
|
rows?: number;
|
|
17
34
|
}
|
|
35
|
+
/**
|
|
36
|
+
* Bulma TextArea component with full Bulma helper class support.
|
|
37
|
+
*
|
|
38
|
+
* @function
|
|
39
|
+
* @param {TextAreaBaseProps} props - Props for the TextAreaBase component.
|
|
40
|
+
* @returns {JSX.Element} The rendered textarea element.
|
|
41
|
+
* @see {@link https://bulma.io/documentation/form/textarea/ | Bulma Textarea documentation}
|
|
42
|
+
*/
|
|
18
43
|
export declare const TextAreaBase: React.ForwardRefExoticComponent<TextAreaBaseProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
19
44
|
export default TextAreaBase;
|
|
@@ -2,6 +2,29 @@ import React from 'react';
|
|
|
2
2
|
import { FieldProps } from './Field';
|
|
3
3
|
import { ControlBaseProps } from './Control';
|
|
4
4
|
import { TimeInputBaseProps } from './TimeInputBase';
|
|
5
|
+
/**
|
|
6
|
+
* Props for the TimeInput convenience wrapper. Extends `TimeInputBaseProps`
|
|
7
|
+
* with Field-level (label, horizontal) and Control-level (icons, loading) props.
|
|
8
|
+
*
|
|
9
|
+
* @property {React.ReactNode} [label] - Field label.
|
|
10
|
+
* @property {FieldProps['labelSize']} [labelSize] - Size for the label.
|
|
11
|
+
* @property {FieldProps['labelProps']} [labelProps] - Props for the label element.
|
|
12
|
+
* @property {boolean} [horizontal] - Render the field with horizontal layout.
|
|
13
|
+
* @property {ControlBaseProps['iconLeft']} [iconLeft] - Icon props for the left icon.
|
|
14
|
+
* @property {ControlBaseProps['iconRight']} [iconRight] - Icon props for the right icon.
|
|
15
|
+
* @property {string} [iconRightName] - Shortcut for the right icon name.
|
|
16
|
+
* @property {ControlBaseProps['iconLeftSize']} [iconLeftSize] - Shortcut for left icon size.
|
|
17
|
+
* @property {ControlBaseProps['iconRightSize']} [iconRightSize] - Shortcut for right icon size.
|
|
18
|
+
* @property {boolean} [hasIconsLeft] - Force the left icon container.
|
|
19
|
+
* @property {boolean} [hasIconsRight] - Force the right icon container.
|
|
20
|
+
* @property {boolean} [isLoading] - Show a loading indicator on the control.
|
|
21
|
+
* @property {boolean} [isExpanded] - Expand the control to fill its container.
|
|
22
|
+
* @property {ControlBaseProps['size']} [controlSize] - Size of the wrapping Control.
|
|
23
|
+
* @property {React.ReactNode} [message] - Help/validation text below the input.
|
|
24
|
+
* @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [messageColor] - Message color.
|
|
25
|
+
* @property {string} [fieldClassName] - Additional CSS classes for the Field wrapper.
|
|
26
|
+
* @property {string} [controlClassName] - Additional CSS classes for the Control wrapper.
|
|
27
|
+
*/
|
|
5
28
|
export interface TimeInputProps extends TimeInputBaseProps {
|
|
6
29
|
label?: React.ReactNode;
|
|
7
30
|
labelSize?: FieldProps['labelSize'];
|
|
@@ -22,5 +45,21 @@ export interface TimeInputProps extends TimeInputBaseProps {
|
|
|
22
45
|
fieldClassName?: string;
|
|
23
46
|
controlClassName?: string;
|
|
24
47
|
}
|
|
48
|
+
/**
|
|
49
|
+
* TimeInput is a form input that opens a popover spinner for time-of-day
|
|
50
|
+
* selection. Supports 12h/24h, optional seconds, custom step increments,
|
|
51
|
+
* min/max bounds, an unselectable-times predicate, and a native
|
|
52
|
+
* `<input type="time">` fallback for touch devices.
|
|
53
|
+
*
|
|
54
|
+
* @function
|
|
55
|
+
* @param {TimeInputProps} props
|
|
56
|
+
* @returns {JSX.Element}
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
* <TimeInput label="Departure" defaultValue={new Date()} />
|
|
60
|
+
*
|
|
61
|
+
* @example
|
|
62
|
+
* <TimeInput label="Slot" hourFormat="12" incrementMinutes={15} />
|
|
63
|
+
*/
|
|
25
64
|
export declare const TimeInput: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
26
65
|
export default TimeInput;
|
|
@@ -2,6 +2,46 @@ import React from 'react';
|
|
|
2
2
|
import { BulmaClassesProps } from '../helpers/useBulmaClasses';
|
|
3
3
|
import { PickerPosition, HourFormat, PickerLabels } from './_pickerInternals/pickerTypes';
|
|
4
4
|
import { DateFormatOption } from './_pickerInternals/formatters';
|
|
5
|
+
/**
|
|
6
|
+
* Props for the raw TimeInput base. Use the higher-level `TimeInput` for
|
|
7
|
+
* Field/Control composition; `TimeInputBase` is the input + popover only.
|
|
8
|
+
*
|
|
9
|
+
* @property {Date | null} [value] - Controlled selected time.
|
|
10
|
+
* @property {Date | null} [defaultValue] - Initial value for uncontrolled usage.
|
|
11
|
+
* @property {(d: Date | null) => void} [onChange] - Fired when the value changes.
|
|
12
|
+
* @property {() => void} [onOpen] - Fired when the popover opens.
|
|
13
|
+
* @property {() => void} [onClose] - Fired when the popover closes.
|
|
14
|
+
* @property {Date} [min] - Earliest selectable time.
|
|
15
|
+
* @property {Date} [max] - Latest selectable time.
|
|
16
|
+
* @property {boolean} [disabled] - Disable the input.
|
|
17
|
+
* @property {boolean} [readOnly] - Make the input read-only.
|
|
18
|
+
* @property {string} [placeholder] - Placeholder text.
|
|
19
|
+
* @property {DateFormatOption} [format] - Token format string or `Intl.DateTimeFormat` options.
|
|
20
|
+
* @property {(s: string) => Date | null} [parse] - Custom parser.
|
|
21
|
+
* @property {string} [locale] - BCP-47 locale tag.
|
|
22
|
+
* @property {boolean} [inline] - Render the spinner inline (no popover).
|
|
23
|
+
* @property {boolean | 'auto'} [mobileNative] - Use native `<input type="time">` on coarse-pointer devices.
|
|
24
|
+
* @property {boolean} [editable] - Allow segmented keyboard typing in the input (type the time directly, auto-advancing across segments). Default `true`.
|
|
25
|
+
* @property {boolean} [popover] - Whether the spinner popover exists. `false` makes the field input-only (segmented typing with no popover). Default `true`.
|
|
26
|
+
* @property {boolean} [openOnFocus] - Open the popover on focus. Default `true`.
|
|
27
|
+
* @property {boolean} [closeOnSelect] - Close after selection. Default `false`.
|
|
28
|
+
* @property {PickerPosition} [position] - Popover anchor position.
|
|
29
|
+
* @property {boolean} [appendToBody] - Render the popover into `document.body` via portal.
|
|
30
|
+
* @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color modifier.
|
|
31
|
+
* @property {'small'|'medium'|'large'} [size] - Size variant.
|
|
32
|
+
* @property {boolean} [isRounded] - Rounded input corners.
|
|
33
|
+
* @property {HourFormat} [hourFormat] - `'12'` or `'24'`. Default `'24'`.
|
|
34
|
+
* @property {boolean} [enableSeconds] - Show a seconds column. Note: iOS Safari's native time picker has no seconds wheel; combine with `mobileNative={false}` if a seconds wheel is required on iOS.
|
|
35
|
+
* @property {number} [incrementHours] - Hour step. Default `1`.
|
|
36
|
+
* @property {number} [incrementMinutes] - Minute step. Default `1`.
|
|
37
|
+
* @property {number} [incrementSeconds] - Second step. Default `1`.
|
|
38
|
+
* @property {(d: Date) => boolean} [unselectableTimes] - Predicate for blocked times (the spinner skips ahead; manual typing rejects them).
|
|
39
|
+
* @property {string} [iconLeftName] - Decorative left icon glyph for the wrapping Control (shown by default; set to '' to hide).
|
|
40
|
+
* @property {boolean} [triggerIcon] - Show a clickable launcher button on the right that toggles the popover. Default `true`.
|
|
41
|
+
* @property {string} [triggerIconName] - Glyph name for the right launcher button. Default `'chevron-down'`.
|
|
42
|
+
* @property {boolean} [audioTick] - Play a short audible tick on each wheel-item crossing. Useful as a substitute for haptic feedback on iOS Safari, which has no web-accessible haptic API. Off by default.
|
|
43
|
+
* @property {boolean} [haptics] - Auto-route platform-appropriate tactile feedback per wheel tick: real vibration on Android (via `navigator.vibrate`) and an audible thunk on iOS (where no haptic API exists). Adds the audio thunk only when vibrate is unavailable, so Android devices aren't subjected to extra sound. The visual band pulse fires regardless. Off by default for backward compat.
|
|
44
|
+
*/
|
|
5
45
|
export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
|
|
6
46
|
value?: Date | null;
|
|
7
47
|
defaultValue?: Date | null;
|
|
@@ -36,9 +76,41 @@ export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
|
|
|
36
76
|
iconLeftName?: string;
|
|
37
77
|
triggerIcon?: boolean;
|
|
38
78
|
triggerIconName?: string;
|
|
79
|
+
/** Optional translatable string overrides. */
|
|
39
80
|
labels?: PickerLabels;
|
|
81
|
+
/**
|
|
82
|
+
* Play a short audible tick on each wheel-item crossing. Provides a
|
|
83
|
+
* substitute for haptic feedback on iOS Safari, which has no web-
|
|
84
|
+
* accessible haptic API as of May 2026. Off by default to avoid
|
|
85
|
+
* surprising users with sound; the tick respects the device's silent
|
|
86
|
+
* switch and is suppressed when no audio device is available.
|
|
87
|
+
*/
|
|
40
88
|
audioTick?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* Auto-route platform-appropriate tactile feedback per wheel tick. When
|
|
91
|
+
* `true`:
|
|
92
|
+
* - On platforms where `navigator.vibrate` is implemented (Android
|
|
93
|
+
* Chrome / Firefox Android / Samsung Internet), the existing
|
|
94
|
+
* unconditional `navigator.vibrate(5)` carries the haptic — no audio
|
|
95
|
+
* is added (don't want to subject Android users to extra sound).
|
|
96
|
+
* - On platforms where `navigator.vibrate` is absent (notably iOS
|
|
97
|
+
* Safari, which has no web-accessible haptic API as of May 2026),
|
|
98
|
+
* the audio thunk is enabled automatically — same as setting
|
|
99
|
+
* `audioTick={true}` manually.
|
|
100
|
+
* - The visual band pulse fires regardless (gated only by
|
|
101
|
+
* `prefers-reduced-motion`).
|
|
102
|
+
* Off by default for backward compat. If `audioTick` is also set, the
|
|
103
|
+
* audio fires regardless of detection (manual opt-in wins).
|
|
104
|
+
*/
|
|
41
105
|
haptics?: boolean;
|
|
42
106
|
}
|
|
107
|
+
/**
|
|
108
|
+
* Raw TimeInput — input + popover spinner without Field/Control wrapping.
|
|
109
|
+
* Use `TimeInput` for the convenience wrapper.
|
|
110
|
+
*
|
|
111
|
+
* @function
|
|
112
|
+
* @param {TimeInputBaseProps} props
|
|
113
|
+
* @returns {JSX.Element}
|
|
114
|
+
*/
|
|
43
115
|
export declare const TimeInputBase: React.ForwardRefExoticComponent<TimeInputBaseProps & React.RefAttributes<HTMLInputElement>>;
|
|
44
116
|
export default TimeInputBase;
|
|
@@ -18,8 +18,14 @@ export interface CalendarProps {
|
|
|
18
18
|
size?: 'small' | 'medium' | 'large';
|
|
19
19
|
className?: string;
|
|
20
20
|
id?: string;
|
|
21
|
+
/** When true, focus the cell matching `focusedDate` after each render. */
|
|
21
22
|
autoFocusCell?: boolean;
|
|
23
|
+
/** Optional translatable string overrides. */
|
|
22
24
|
labels?: PickerLabels;
|
|
25
|
+
/**
|
|
26
|
+
* Inclusive `[min, max]` year range shown in the year-dropdown view.
|
|
27
|
+
* Defaults to ±100 years around the focused year, clamped by `min`/`max`.
|
|
28
|
+
*/
|
|
23
29
|
yearsRange?: [number, number];
|
|
24
30
|
}
|
|
25
31
|
export declare const Calendar: React.FC<CalendarProps>;
|
|
@@ -10,6 +10,7 @@ export interface TimeWheelsProps {
|
|
|
10
10
|
onChange: (v: TimeWheelsValue) => void;
|
|
11
11
|
hourFormat?: HourFormat;
|
|
12
12
|
enableSeconds?: boolean;
|
|
13
|
+
/** Step between visible values in the wheel. Default `1`. */
|
|
13
14
|
incrementHours?: number;
|
|
14
15
|
incrementMinutes?: number;
|
|
15
16
|
incrementSeconds?: number;
|
|
@@ -20,9 +21,21 @@ export interface TimeWheelsProps {
|
|
|
20
21
|
className?: string;
|
|
21
22
|
id?: string;
|
|
22
23
|
labels?: PickerLabels;
|
|
24
|
+
/** Number of items visible at once (must be odd). Default 5. */
|
|
23
25
|
visibleCount?: number;
|
|
26
|
+
/** Item height in px. Default 32. */
|
|
24
27
|
itemHeight?: number;
|
|
28
|
+
/**
|
|
29
|
+
* Play a short audible tick on each item crossing. Useful as a fallback on
|
|
30
|
+
* iOS Safari, where there is no web-accessible haptic API. Off by default
|
|
31
|
+
* to avoid surprising users with sound; flip on for iOS-targeted UIs.
|
|
32
|
+
*/
|
|
25
33
|
audioTick?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Fired when the user presses Enter on a wheel column. The current value is
|
|
36
|
+
* already committed (each wheel-tick calls onChange), so this typically just
|
|
37
|
+
* needs to close the surrounding popover.
|
|
38
|
+
*/
|
|
26
39
|
onCommit?: () => void;
|
|
27
40
|
}
|
|
28
41
|
export declare const TimeWheels: React.FC<TimeWheelsProps>;
|
|
@@ -1,3 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Audio-tick fallback for platforms with no haptic API. iOS Safari has no
|
|
3
|
+
* web-accessible Taptic path (see `./haptics.ts` for the full story), so the
|
|
4
|
+
* closest UX substitute is a very short audible thunk played per item tick.
|
|
5
|
+
*
|
|
6
|
+
* Sound design — tuned to read as a body-felt impact, not an ear-felt beep:
|
|
7
|
+
*
|
|
8
|
+
* - Single triangle-wave oscillator at 160Hz, exponentially sweeping down to
|
|
9
|
+
* 110Hz over ~30ms. The low fundamental matches the frequency band where
|
|
10
|
+
* the Taptic Engine fires its UI pops (~150–200Hz); the downward sweep is
|
|
11
|
+
* the single biggest contributor to the perception of a damped physical
|
|
12
|
+
* impact (vs. a flat tone, which reads as a beep).
|
|
13
|
+
*
|
|
14
|
+
* - Triangle adds one odd harmonic over sine — just enough body to feel
|
|
15
|
+
* "soft" without the buzz of square or sawtooth.
|
|
16
|
+
*
|
|
17
|
+
* - Quick 1ms attack to 0.08 gain; exponential decay to silence over ~30ms;
|
|
18
|
+
* oscillator stops at +0.04s. Ramped envelope (no hard 0→1 jumps) avoids
|
|
19
|
+
* the classic Web Audio speaker pop on attack/release.
|
|
20
|
+
*
|
|
21
|
+
* - Uses a single oscillator + envelope rather than an audio buffer /
|
|
22
|
+
* decoded sample so there's no asset to ship and no `decodeAudioData`
|
|
23
|
+
* round-trip.
|
|
24
|
+
*
|
|
25
|
+
* - iOS Safari requires a user gesture to *resume* a suspended
|
|
26
|
+
* `AudioContext`. Call `unlockAudioTick()` from inside a touch / click
|
|
27
|
+
* handler before the first `playAudioTick()`. After that single resume,
|
|
28
|
+
* the context stays running and subsequent ticks play with no further
|
|
29
|
+
* gesture needed.
|
|
30
|
+
*
|
|
31
|
+
* - Silent / Ring switch behaviour on iOS: with the side switch in silent
|
|
32
|
+
* mode, this tick is suppressed (Web Audio respects the ringer). That
|
|
33
|
+
* matches iOS native UX expectations — silent mode means silent UI.
|
|
34
|
+
*
|
|
35
|
+
* - On hardware with neither speakers nor an audio device, every call
|
|
36
|
+
* silently no-ops.
|
|
37
|
+
*/
|
|
38
|
+
/**
|
|
39
|
+
* Call from inside a user-gesture handler (pointerdown, click, touchstart)
|
|
40
|
+
* to resume the AudioContext on iOS Safari. Idempotent and cheap; safe to
|
|
41
|
+
* call on every gesture. No-ops on platforms without Web Audio.
|
|
42
|
+
*/
|
|
1
43
|
export declare const unlockAudioTick: () => void;
|
|
44
|
+
/**
|
|
45
|
+
* Play a single short tick. No-op if Web Audio is unavailable or the
|
|
46
|
+
* context hasn't been unlocked yet.
|
|
47
|
+
*/
|
|
2
48
|
export declare const playAudioTick: () => void;
|
|
49
|
+
/** Test-only hook to drop the singleton AudioContext. */
|
|
3
50
|
export declare const __resetAudioTickForTest: () => void;
|
|
@@ -30,10 +30,23 @@ export declare function getTimeOfDay(d: Date): {
|
|
|
30
30
|
seconds: number;
|
|
31
31
|
};
|
|
32
32
|
export declare function clampDate(d: Date, min?: Date, max?: Date): Date;
|
|
33
|
+
/**
|
|
34
|
+
* Snap a Date's time-of-day to the nearest grid defined by the given
|
|
35
|
+
* increment steps. Used by the "Now" button in pickers configured with
|
|
36
|
+
* non-1 hour / minute / second steps so the committed time always lands on
|
|
37
|
+
* a slot that exists on the wheel. Overflows roll up: e.g.
|
|
38
|
+
* 13:58 with step=15 → 14:00. Seconds are zeroed when `enableSeconds` is
|
|
39
|
+
* false, regardless of step.
|
|
40
|
+
*/
|
|
33
41
|
export declare function snapTimeToIncrement(d: Date, opts?: {
|
|
34
42
|
incrementHours?: number;
|
|
35
43
|
incrementMinutes?: number;
|
|
36
44
|
incrementSeconds?: number;
|
|
37
45
|
enableSeconds?: boolean;
|
|
38
46
|
}): Date;
|
|
47
|
+
/**
|
|
48
|
+
* Build a 6-week × 7-day grid (42 cells) anchored on the month containing
|
|
49
|
+
* `monthAnchor`. The first cell is the start of the week containing the first
|
|
50
|
+
* of the month, where the week starts on `firstDayOfWeek`.
|
|
51
|
+
*/
|
|
39
52
|
export declare function buildMonthGrid(monthAnchor: Date, firstDayOfWeek?: DayOfWeek): CalendarCell[];
|
|
@@ -6,8 +6,27 @@ export declare const DEFAULT_DATETIME_FORMAT = "YYYY-MM-DD HH:mm";
|
|
|
6
6
|
export declare function formatDate(d: Date, fmt: DateFormatOption | undefined, locale?: string): string;
|
|
7
7
|
export declare function formatTime(d: Date, fmt: DateFormatOption | undefined, locale?: string): string;
|
|
8
8
|
export declare function formatDateTime(d: Date, fmt: DateFormatOption | undefined, locale?: string): string;
|
|
9
|
+
/**
|
|
10
|
+
* Derive the hour cycle (`'12'` or `'24'`) a display format will render, from
|
|
11
|
+
* its first hour token: `h`/`hh` → 12-hour with meridiem, `H`/`HH` → 24-hour.
|
|
12
|
+
*
|
|
13
|
+
* Returns `null` when the cycle can't be read from the format — it's an
|
|
14
|
+
* `Intl.DateTimeFormat` options object (no token string), `undefined`, or has
|
|
15
|
+
* no hour token — so callers fall back to the raw `hourFormat` prop. Scans with
|
|
16
|
+
* the same {@link TOKEN_RE} grammar the input renders with, so the derived cycle
|
|
17
|
+
* always agrees with what the field actually displays.
|
|
18
|
+
*/
|
|
9
19
|
export declare function hourCycleFromFormat(fmt: DateFormatOption | undefined): '12' | '24' | null;
|
|
20
|
+
/**
|
|
21
|
+
* Parse a date string against a token format. Returns null on mismatch.
|
|
22
|
+
* For Intl-options formats parsing is the consumer's responsibility — pass
|
|
23
|
+
* a custom `parse` prop on the picker.
|
|
24
|
+
*/
|
|
10
25
|
export declare function parseDate(s: string, fmt?: string, _locale?: string): Date | null;
|
|
11
26
|
export declare function parseTime(s: string, fmt?: string): Date | null;
|
|
27
|
+
/**
|
|
28
|
+
* Locale-aware day name labels in calendar order (Sunday → Saturday).
|
|
29
|
+
* Caller rotates by `firstDayOfWeek`.
|
|
30
|
+
*/
|
|
12
31
|
export declare function getDayNames(locale: string | undefined, length?: 'narrow' | 'short' | 'long'): string[];
|
|
13
32
|
export declare function getMonthNames(locale: string | undefined, length?: 'short' | 'long'): string[];
|
|
@@ -1 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tiny haptic blip used to signal each item tick on the time-wheel scroller.
|
|
3
|
+
*
|
|
4
|
+
* Implementation: feature-detect `navigator.vibrate()` and call it with a
|
|
5
|
+
* 5ms duration. Supported on Android Chrome (since v30), Firefox Android,
|
|
6
|
+
* and Samsung Internet. Silently no-ops elsewhere.
|
|
7
|
+
*
|
|
8
|
+
* iOS Safari does not expose `navigator.vibrate` and has no other web-
|
|
9
|
+
* accessible haptic API as of May 2026. We previously shipped a fallback
|
|
10
|
+
* that toggled a hidden `<input type="checkbox" switch>` element via
|
|
11
|
+
* `.click()` — that produced toggle haptics on iOS 17.4 through 26.4, but
|
|
12
|
+
* Apple patched the loophole in iOS 26.5: haptics now only fire on
|
|
13
|
+
* genuine, user-initiated taps on a visible switch, not on programmatic
|
|
14
|
+
* invocation. There is no public WebKit ticket for the patch; it's
|
|
15
|
+
* documented in the `tijnjh/ios-haptics` README and downstream community
|
|
16
|
+
* write-ups. The Web Audio "silent buffer" trick unlocks audio playback
|
|
17
|
+
* but never produced Taptic Engine output. PWAs added to the Home Screen
|
|
18
|
+
* use the same WebKit and gain no extra haptic capability.
|
|
19
|
+
*
|
|
20
|
+
* If you need haptics on iOS, the only path today is wrapping the web view
|
|
21
|
+
* in a native shell (Capacitor, react-native-webview) and bridging to
|
|
22
|
+
* `UIImpactFeedbackGenerator`. Pure web cannot do it.
|
|
23
|
+
*/
|
|
1
24
|
export declare const tickHaptic: () => void;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
export type PickerPosition = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'auto';
|
|
2
2
|
export type HourFormat = '12' | '24';
|
|
3
3
|
export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
4
|
+
/**
|
|
5
|
+
* Translatable strings used across all four pickers. Pass via the `labels`
|
|
6
|
+
* prop to override defaults; consumers manage their own locale-driven mapping.
|
|
7
|
+
*/
|
|
4
8
|
export interface PickerLabels {
|
|
5
9
|
prevMonth?: string;
|
|
6
10
|
nextMonth?: string;
|
|
@@ -23,9 +27,13 @@ export interface PickerLabels {
|
|
|
23
27
|
clear?: string;
|
|
24
28
|
cancel?: string;
|
|
25
29
|
ok?: string;
|
|
30
|
+
/** Mobile footer: text link that reverts to the value at open (like iOS). */
|
|
26
31
|
reset?: string;
|
|
32
|
+
/** Mobile footer: aria-label for the circular checkmark commit button. */
|
|
27
33
|
done?: string;
|
|
34
|
+
/** DateTimeInput footer: label preceding the selected-time display. */
|
|
28
35
|
time?: string;
|
|
29
36
|
}
|
|
30
37
|
export declare const DEFAULT_PICKER_LABELS: Required<PickerLabels>;
|
|
38
|
+
/** Merge user-supplied label overrides with the defaults. */
|
|
31
39
|
export declare const mergeLabels: (overrides?: PickerLabels) => Required<PickerLabels>;
|
|
@@ -1,20 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Segment-map utility for manual keyboard entry on a date / time picker input.
|
|
3
|
+
* Given a token-format string like `'YYYY-MM-DD'`, `'HH:mm:ss'`, `'hh:mm A'`,
|
|
4
|
+
* or a combined `'YYYY-MM-DD HH:mm'`, we compute the character ranges of each
|
|
5
|
+
* editable segment in the formatted output, plus arithmetic helpers
|
|
6
|
+
* (increment / digit-set) for each kind.
|
|
7
|
+
*
|
|
8
|
+
* Variable-width tokens (`Y`, `YYY`, `M`, `D`, `H`, `h`, `m`, `s`) cause the
|
|
9
|
+
* renderer to emit output of unpredictable width depending on value, which
|
|
10
|
+
* would shift segment boundaries between renders and break the selection.
|
|
11
|
+
* `buildSegmentMap` returns `null` for any format containing those, signalling
|
|
12
|
+
* the caller to fall back to free-form text entry.
|
|
13
|
+
*/
|
|
1
14
|
export type SegmentKind = 'year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds' | 'ampm' | 'literal';
|
|
2
15
|
export interface Segment {
|
|
3
16
|
kind: SegmentKind;
|
|
17
|
+
/** Source token (e.g., `'HH'`) for editable segments; literal text for `'literal'`. */
|
|
4
18
|
token: string;
|
|
19
|
+
/** Inclusive char index into the formatted-string output. */
|
|
5
20
|
start: number;
|
|
21
|
+
/** Exclusive char index. */
|
|
6
22
|
end: number;
|
|
23
|
+
/** Populated only when `kind === 'hours'`. */
|
|
7
24
|
hourFormat?: '12' | '24';
|
|
8
25
|
}
|
|
9
26
|
export interface SegmentMap {
|
|
10
27
|
segments: Segment[];
|
|
28
|
+
/** Indices of non-literal segments, left to right. */
|
|
11
29
|
editable: number[];
|
|
12
30
|
}
|
|
31
|
+
/**
|
|
32
|
+
* Walk a token-format string and produce a {@link SegmentMap}, or `null` if
|
|
33
|
+
* the format contains any variable-width tokens (`H`, `h`, `m`, `s`) — the
|
|
34
|
+
* caller should treat that case as "segment mode unsupported, use the input's
|
|
35
|
+
* free-form text-entry fallback".
|
|
36
|
+
*/
|
|
13
37
|
export declare function buildSegmentMap(format: string): SegmentMap | null;
|
|
38
|
+
/**
|
|
39
|
+
* Returns a new Date with the given segment incremented (`delta` = +1 or -1).
|
|
40
|
+
* Wraps at segment boundaries: year is unbounded, month 0↔11 (in place, no
|
|
41
|
+
* year roll), day within the current month's length, hours-24 0↔23, hours-12
|
|
42
|
+
* 1↔12, minutes/seconds 0↔59, am/pm toggles. Day is re-clamped after a
|
|
43
|
+
* month/year change (Jan 31 → Feb 28/29). `isPm` is the *current* meridiem
|
|
44
|
+
* when editing a 12h hour segment so we preserve it across the increment;
|
|
45
|
+
* date segments ignore it.
|
|
46
|
+
*/
|
|
14
47
|
export declare function incrementSegmentValue(segment: Segment, currentDate: Date, delta: number, isPm: boolean): Date;
|
|
48
|
+
/**
|
|
49
|
+
* Apply a buffered string of typed digits to the active segment. Returns the
|
|
50
|
+
* updated Date plus an `advance` flag — `true` when the buffer is full (its
|
|
51
|
+
* token width) or when the first digit alone forecloses any valid multi-digit
|
|
52
|
+
* completion (e.g., first digit `3` for hours-24 since 30+ is out of range, or
|
|
53
|
+
* `2` for month since there is no month 20+).
|
|
54
|
+
*
|
|
55
|
+
* Special cases: a leading `'0'` is held without committing for hours-12,
|
|
56
|
+
* month, and day (00 isn't a valid display value for any of them) — the buffer
|
|
57
|
+
* must reach `'0X'` first. Month/day writes clamp to range and re-clamp the
|
|
58
|
+
* day to the month's length; year writes re-clamp the day across leap-year
|
|
59
|
+
* boundaries.
|
|
60
|
+
*/
|
|
15
61
|
export declare function setSegmentValue(segment: Segment, currentDate: Date, rawDigits: string, isPm: boolean): {
|
|
16
62
|
date: Date;
|
|
17
63
|
advance: boolean;
|
|
18
64
|
};
|
|
65
|
+
/** Force the meridiem of `currentDate` to AM (isPm=false) or PM (true). */
|
|
19
66
|
export declare function setAmPm(currentDate: Date, isPm: boolean): Date;
|
|
67
|
+
/** Map a caret position into the index of the segment that contains it. */
|
|
20
68
|
export declare function segmentIndexAtCaret(map: SegmentMap, caret: number): number | null;
|
|
@@ -5,6 +5,7 @@ export interface NativeMobileDetect {
|
|
|
5
5
|
}
|
|
6
6
|
export interface UseNativeMobilePickerOptions {
|
|
7
7
|
smallViewportMaxPx?: number;
|
|
8
|
+
/** When set, overrides detection. */
|
|
8
9
|
force?: boolean;
|
|
9
10
|
}
|
|
10
11
|
export declare function useNativeMobilePicker(options?: UseNativeMobilePickerOptions): NativeMobileDetect;
|
|
@@ -2,21 +2,38 @@ import React from 'react';
|
|
|
2
2
|
import { DateFormatOption } from './formatters';
|
|
3
3
|
import { SegmentMap } from './segmentMap';
|
|
4
4
|
export interface UseSegmentedEntryParams {
|
|
5
|
+
/** Resolved format actually used to render (the host's default format). */
|
|
5
6
|
format: DateFormatOption;
|
|
7
|
+
/** Current canonical value (controlled or internal). */
|
|
6
8
|
value: Date | null;
|
|
9
|
+
/** Commit a new Date through the host's onChange / internal pipeline. */
|
|
7
10
|
commitValue: (next: Date | null) => void;
|
|
11
|
+
/** Host formatter: formatDate | formatTime | formatDateTime. */
|
|
8
12
|
formatFn: (d: Date, fmt: DateFormatOption | undefined, locale?: string) => string;
|
|
13
|
+
/** Host parser used by the free-form fallback (parseDate / parseTime / custom). */
|
|
9
14
|
tryParse: (s: string) => Date | null;
|
|
15
|
+
/** Host's displayed-text state and setter (the hook drives it during edits). */
|
|
10
16
|
text: string;
|
|
11
17
|
setText: (s: string) => void;
|
|
18
|
+
/**
|
|
19
|
+
* Seed for an empty value when the user starts typing: Time → today at noon,
|
|
20
|
+
* Date → today at 00:00, DateTime → now. Should be referentially stable.
|
|
21
|
+
*/
|
|
12
22
|
makeBaseDate: () => Date;
|
|
13
23
|
locale?: string;
|
|
14
24
|
min?: Date;
|
|
15
25
|
max?: Date;
|
|
26
|
+
/**
|
|
27
|
+
* Host-supplied blocking predicate (composed from shouldDisableDate /
|
|
28
|
+
* unselectableDates / unselectableTimes). Checked alongside min/max on
|
|
29
|
+
* every manual-entry commit; return true to reject the candidate value.
|
|
30
|
+
*/
|
|
16
31
|
isBlocked?: (d: Date) => boolean;
|
|
17
32
|
disabled?: boolean;
|
|
18
33
|
readOnly?: boolean;
|
|
34
|
+
/** Allow segmented typing. When false, segment mode never engages. */
|
|
19
35
|
editable?: boolean;
|
|
36
|
+
/** Whether a popover exists; gates open-on-focus / click / ArrowDown. */
|
|
20
37
|
popover?: boolean;
|
|
21
38
|
openOnFocus?: boolean;
|
|
22
39
|
closeOnSelect?: boolean;
|
|
@@ -32,8 +49,11 @@ export interface UseSegmentedEntryParams {
|
|
|
32
49
|
export interface UseSegmentedEntryResult {
|
|
33
50
|
segmentMap: SegmentMap | null;
|
|
34
51
|
activeSegmentIdx: number | null;
|
|
52
|
+
/** True when segment typing is available (map + editable + not disabled/readOnly). */
|
|
35
53
|
segmentEditable: boolean;
|
|
54
|
+
/** True when a segment is actively selected. */
|
|
36
55
|
inSegmentMode: boolean;
|
|
56
|
+
/** Spread onto the combobox `<input>`. */
|
|
37
57
|
inputHandlers: {
|
|
38
58
|
onChange: React.ChangeEventHandler<HTMLInputElement>;
|
|
39
59
|
onFocus: React.FocusEventHandler<HTMLInputElement>;
|
|
@@ -42,4 +62,14 @@ export interface UseSegmentedEntryResult {
|
|
|
42
62
|
onBlur: React.FocusEventHandler<HTMLInputElement>;
|
|
43
63
|
};
|
|
44
64
|
}
|
|
65
|
+
/**
|
|
66
|
+
* Segmented manual keyboard entry for a date / time picker input. Computes a
|
|
67
|
+
* segment map from the token format, tracks the active segment, and returns
|
|
68
|
+
* the full set of `<input>` event handlers — segment-mutating keys (arrows,
|
|
69
|
+
* digits, AM/PM, separators) are handled here, while popover open/close and
|
|
70
|
+
* free-form parse-on-blur/Enter are driven through the host-supplied
|
|
71
|
+
* `setOpen` / `tryParse` / `commitValue` callbacks. When the format is an
|
|
72
|
+
* `Intl` options object or contains variable-width tokens, the segment map is
|
|
73
|
+
* null and the input transparently falls back to free-form text entry.
|
|
74
|
+
*/
|
|
45
75
|
export declare function useSegmentedEntry(params: UseSegmentedEntryParams): UseSegmentedEntryResult;
|
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Shared props for form components that render an optional Field wrapper.
|
|
4
|
+
* When these props are provided and the component is not already inside a Field,
|
|
5
|
+
* it will automatically render a Field around itself.
|
|
6
|
+
*/
|
|
2
7
|
export interface FormFieldProps {
|
|
8
|
+
/** Field label. */
|
|
3
9
|
label?: React.ReactNode;
|
|
10
|
+
/** Size for the label (used in horizontal layouts). */
|
|
4
11
|
labelSize?: 'small' | 'normal' | 'medium' | 'large';
|
|
12
|
+
/** Props for the label element. */
|
|
5
13
|
labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
|
|
6
14
|
[key: string]: unknown;
|
|
7
15
|
};
|
|
16
|
+
/** Horizontal field layout. */
|
|
8
17
|
horizontal?: boolean;
|
|
18
|
+
/** Help/validation message below the input. */
|
|
9
19
|
message?: React.ReactNode;
|
|
20
|
+
/** Bulma color for the message. */
|
|
10
21
|
messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
|
|
22
|
+
/** Additional CSS classes for the Field wrapper. */
|
|
11
23
|
fieldClassName?: string;
|
|
12
24
|
}
|
|
@@ -1,6 +1,24 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
|
|
3
|
+
/**
|
|
4
|
+
* Type for grid cell span values.
|
|
5
|
+
*/
|
|
3
6
|
export type CellSpanValue = number;
|
|
7
|
+
/**
|
|
8
|
+
* Props for the Cell component.
|
|
9
|
+
*
|
|
10
|
+
* @property {number} [colStart] - Which column the cell starts at (Bulma: is-col-start-x).
|
|
11
|
+
* @property {number} [colFromEnd] - Which column the cell ends at, counting from the end (Bulma: is-col-from-end-x).
|
|
12
|
+
* @property {CellSpanValue} [colSpan] - How many columns the cell will span (Bulma: is-col-span-x).
|
|
13
|
+
* @property {number} [rowStart] - Which row the cell starts at (Bulma: is-row-start-x).
|
|
14
|
+
* @property {number} [rowFromEnd] - Which row the cell ends at, counting from the end (Bulma: is-row-from-end-x).
|
|
15
|
+
* @property {CellSpanValue} [rowSpan] - How many rows the cell will span (Bulma: is-row-span-x).
|
|
16
|
+
* @property {string} [className] - Additional CSS class names.
|
|
17
|
+
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
|
|
18
|
+
* @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color modifier for the cell.
|
|
19
|
+
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
|
|
20
|
+
* @property {React.ReactNode} [children] - Children to render inside the cell.
|
|
21
|
+
*/
|
|
4
22
|
export interface CellProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
|
|
5
23
|
colStart?: number;
|
|
6
24
|
colFromEnd?: number;
|
|
@@ -14,4 +32,12 @@ export interface CellProps extends React.HTMLAttributes<HTMLDivElement>, Omit<Bu
|
|
|
14
32
|
bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
15
33
|
children?: React.ReactNode;
|
|
16
34
|
}
|
|
35
|
+
/**
|
|
36
|
+
* Bulma Cell component for CSS Grid layouts.
|
|
37
|
+
*
|
|
38
|
+
* @function
|
|
39
|
+
* @param {CellProps} props - Props for the Cell component.
|
|
40
|
+
* @returns {JSX.Element} The rendered grid cell.
|
|
41
|
+
* @see {@link https://bulma.io/documentation/grid/ | Bulma Grid documentation}
|
|
42
|
+
*/
|
|
17
43
|
export declare const Cell: React.FC<CellProps>;
|
|
@@ -1,9 +1,42 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
|
|
3
|
+
/**
|
|
4
|
+
* Allowed gap values for Bulma's 0-8 spacing scale, shared by `Grid` and
|
|
5
|
+
* `Columns`. Accepts the value as a number or a numeric string.
|
|
6
|
+
*/
|
|
3
7
|
export type BulmaGapValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
|
|
8
|
+
/**
|
|
9
|
+
* Allowed minimum column values for Bulma grid.
|
|
10
|
+
*/
|
|
4
11
|
export type BulmaMinColValue = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32;
|
|
12
|
+
/**
|
|
13
|
+
* Allowed fixed grid columns for Bulma grid.
|
|
14
|
+
*/
|
|
5
15
|
export type BulmaFixedGridCols = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
16
|
+
/**
|
|
17
|
+
* Allowed fixed grid columns prop for Bulma grid.
|
|
18
|
+
*/
|
|
6
19
|
export type BulmaFixedGridColsProp = BulmaFixedGridCols | 'auto';
|
|
20
|
+
/**
|
|
21
|
+
* Props for the Grid component.
|
|
22
|
+
*
|
|
23
|
+
* @property {boolean} [isFixed] - Use a fixed grid layout (Bulma's .fixed-grid > .grid).
|
|
24
|
+
* @property {BulmaGapValue} [gap] - Main gap for grid (applies is-gap-X, 0-8).
|
|
25
|
+
* @property {BulmaGapValue} [columnGap] - Column gap for grid (applies is-column-gap-X, 0-8).
|
|
26
|
+
* @property {BulmaGapValue} [rowGap] - Row gap for grid (applies is-row-gap-X, 0-8).
|
|
27
|
+
* @property {BulmaMinColValue} [minCol] - Minimum column width for the grid (applies is-col-min-X, 1-32).
|
|
28
|
+
* @property {BulmaFixedGridColsProp} [fixedCols] - For fixed grid only: explicit column count (applies has-X-cols, 0-12), or 'auto' for has-auto-count.
|
|
29
|
+
* @property {BulmaFixedGridCols} [fixedColsMobile] - For fixed grid only: explicit column count for mobile.
|
|
30
|
+
* @property {BulmaFixedGridCols} [fixedColsTablet] - For fixed grid only: explicit column count for tablet.
|
|
31
|
+
* @property {BulmaFixedGridCols} [fixedColsDesktop] - For fixed grid only: explicit column count for desktop.
|
|
32
|
+
* @property {BulmaFixedGridCols} [fixedColsWidescreen] - For fixed grid only: explicit column count for widescreen.
|
|
33
|
+
* @property {BulmaFixedGridCols} [fixedColsFullhd] - For fixed grid only: explicit column count for fullhd.
|
|
34
|
+
* @property {string} [className] - Additional CSS class names.
|
|
35
|
+
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
|
|
36
|
+
* @property {'primary'|'link'|'info'|'success'|'warning'|'danger'} [color] - Bulma color modifier for the grid.
|
|
37
|
+
* @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
|
|
38
|
+
* @property {React.ReactNode} [children] - Children to render inside the grid.
|
|
39
|
+
*/
|
|
7
40
|
export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
|
|
8
41
|
isFixed?: boolean;
|
|
9
42
|
gap?: BulmaGapValue;
|
|
@@ -22,4 +55,6 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, Omit<Bu
|
|
|
22
55
|
bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
|
|
23
56
|
children?: React.ReactNode;
|
|
24
57
|
}
|
|
25
|
-
export declare const Grid: React.FC<GridProps
|
|
58
|
+
export declare const Grid: React.FC<GridProps> & {
|
|
59
|
+
Cell: React.FC<import("./Cell").CellProps>;
|
|
60
|
+
};
|