@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.
Files changed (128) hide show
  1. package/AGENTS.md +28 -0
  2. package/CLAUDE.md +28 -0
  3. package/README.md +15 -15
  4. package/dist/index.cjs.js +3885 -243
  5. package/dist/index.cjs.js.map +1 -1
  6. package/dist/index.esm.js +3884 -242
  7. package/dist/index.esm.js.map +1 -1
  8. package/dist/types/columns/Column.d.ts +43 -0
  9. package/dist/types/columns/Columns.d.ts +41 -1
  10. package/dist/types/components/Avatar.d.ts +37 -0
  11. package/dist/types/components/Avatars.d.ts +15 -2
  12. package/dist/types/components/Badge.d.ts +42 -0
  13. package/dist/types/components/Breadcrumb.d.ts +28 -0
  14. package/dist/types/components/Card.d.ts +70 -18
  15. package/dist/types/components/Carousel.d.ts +70 -0
  16. package/dist/types/components/Collapse.d.ts +53 -0
  17. package/dist/types/components/Dialog.d.ts +94 -0
  18. package/dist/types/components/Dropdown.d.ts +44 -0
  19. package/dist/types/components/Loading.d.ts +55 -0
  20. package/dist/types/components/Menu.d.ts +48 -0
  21. package/dist/types/components/Message.d.ts +27 -9
  22. package/dist/types/components/Modal.d.ts +65 -17
  23. package/dist/types/components/Navbar.d.ts +171 -12
  24. package/dist/types/components/Pagination.d.ts +84 -7
  25. package/dist/types/components/Panel.d.ts +109 -9
  26. package/dist/types/components/Reveal.d.ts +43 -0
  27. package/dist/types/components/Sidebar.d.ts +40 -0
  28. package/dist/types/components/Steps.d.ts +66 -1
  29. package/dist/types/components/Tabs.d.ts +100 -11
  30. package/dist/types/components/Toast.d.ts +109 -0
  31. package/dist/types/components/Tooltip.d.ts +50 -0
  32. package/dist/types/elements/Block.d.ts +20 -0
  33. package/dist/types/elements/Box.d.ts +23 -1
  34. package/dist/types/elements/Button.d.ts +26 -0
  35. package/dist/types/elements/Buttons.d.ts +16 -1
  36. package/dist/types/elements/Code.d.ts +19 -0
  37. package/dist/types/elements/Content.d.ts +21 -0
  38. package/dist/types/elements/Delete.d.ts +22 -0
  39. package/dist/types/elements/Divider.d.ts +16 -0
  40. package/dist/types/elements/Emphasis.d.ts +19 -0
  41. package/dist/types/elements/Figure.d.ts +25 -0
  42. package/dist/types/elements/Icon.d.ts +28 -0
  43. package/dist/types/elements/IconText.d.ts +20 -1
  44. package/dist/types/elements/Image.d.ts +27 -0
  45. package/dist/types/elements/Link.d.ts +24 -0
  46. package/dist/types/elements/LinkButton.d.ts +26 -0
  47. package/dist/types/elements/ListItem.d.ts +20 -0
  48. package/dist/types/elements/Notification.d.ts +101 -0
  49. package/dist/types/elements/OrderedList.d.ts +14 -1
  50. package/dist/types/elements/Paragraph.d.ts +19 -0
  51. package/dist/types/elements/Pre.d.ts +19 -0
  52. package/dist/types/elements/Progress.d.ts +20 -0
  53. package/dist/types/elements/Skeleton.d.ts +31 -0
  54. package/dist/types/elements/Span.d.ts +18 -0
  55. package/dist/types/elements/Strong.d.ts +19 -0
  56. package/dist/types/elements/SubTitle.d.ts +27 -0
  57. package/dist/types/elements/Table.d.ts +23 -1
  58. package/dist/types/elements/Tag.d.ts +28 -0
  59. package/dist/types/elements/Tags.d.ts +11 -1
  60. package/dist/types/elements/Tbody.d.ts +19 -0
  61. package/dist/types/elements/Td.d.ts +24 -0
  62. package/dist/types/elements/Tfoot.d.ts +19 -0
  63. package/dist/types/elements/Th.d.ts +25 -0
  64. package/dist/types/elements/Thead.d.ts +19 -0
  65. package/dist/types/elements/Title.d.ts +28 -0
  66. package/dist/types/elements/Tr.d.ts +21 -0
  67. package/dist/types/elements/UnorderedList.d.ts +11 -1
  68. package/dist/types/form/Autocomplete.d.ts +67 -0
  69. package/dist/types/form/Checkbox.d.ts +44 -0
  70. package/dist/types/form/Checkboxes.d.ts +13 -1
  71. package/dist/types/form/Control.d.ts +36 -0
  72. package/dist/types/form/DateInput.d.ts +44 -0
  73. package/dist/types/form/DateInputBase.d.ts +47 -0
  74. package/dist/types/form/DateTimeInput.d.ts +42 -0
  75. package/dist/types/form/DateTimeInputBase.d.ts +56 -0
  76. package/dist/types/form/Field.d.ts +66 -2
  77. package/dist/types/form/File.d.ts +26 -0
  78. package/dist/types/form/FormContext.d.ts +46 -0
  79. package/dist/types/form/Input.d.ts +49 -0
  80. package/dist/types/form/InputBase.d.ts +22 -0
  81. package/dist/types/form/Numberinput.d.ts +46 -0
  82. package/dist/types/form/Radio.d.ts +44 -0
  83. package/dist/types/form/Radios.d.ts +13 -1
  84. package/dist/types/form/Rate.d.ts +71 -0
  85. package/dist/types/form/Select.d.ts +39 -0
  86. package/dist/types/form/SelectBase.d.ts +25 -0
  87. package/dist/types/form/Slider.d.ts +71 -0
  88. package/dist/types/form/Switch.d.ts +53 -0
  89. package/dist/types/form/Taginput.d.ts +77 -0
  90. package/dist/types/form/TextArea.d.ts +38 -0
  91. package/dist/types/form/TextAreaBase.d.ts +25 -0
  92. package/dist/types/form/TimeInput.d.ts +39 -0
  93. package/dist/types/form/TimeInputBase.d.ts +72 -0
  94. package/dist/types/form/_pickerInternals/Calendar.d.ts +6 -0
  95. package/dist/types/form/_pickerInternals/TimeWheels.d.ts +13 -0
  96. package/dist/types/form/_pickerInternals/audioTick.d.ts +47 -0
  97. package/dist/types/form/_pickerInternals/dateUtils.d.ts +13 -0
  98. package/dist/types/form/_pickerInternals/formatters.d.ts +19 -0
  99. package/dist/types/form/_pickerInternals/haptics.d.ts +23 -0
  100. package/dist/types/form/_pickerInternals/pickerTypes.d.ts +8 -0
  101. package/dist/types/form/_pickerInternals/segmentMap.d.ts +48 -0
  102. package/dist/types/form/_pickerInternals/useNativeMobilePicker.d.ts +1 -0
  103. package/dist/types/form/_pickerInternals/useSegmentedEntry.d.ts +30 -0
  104. package/dist/types/form/fieldProps.d.ts +12 -0
  105. package/dist/types/grid/Cell.d.ts +26 -0
  106. package/dist/types/grid/Grid.d.ts +36 -1
  107. package/dist/types/helpers/Config.d.ts +50 -0
  108. package/dist/types/helpers/Theme.d.ts +66 -0
  109. package/dist/types/helpers/bulmaClassHelpers.d.ts +97 -0
  110. package/dist/types/helpers/classNames.d.ts +50 -0
  111. package/dist/types/helpers/useBulmaClasses.d.ts +22 -0
  112. package/dist/types/helpers/useColorClasses.d.ts +20 -0
  113. package/dist/types/helpers/useFlexboxClasses.d.ts +34 -0
  114. package/dist/types/helpers/useOtherClasses.d.ts +27 -0
  115. package/dist/types/helpers/useSpacingClasses.d.ts +27 -0
  116. package/dist/types/helpers/useTypographyClasses.d.ts +32 -0
  117. package/dist/types/helpers/useVisibilityClasses.d.ts +25 -0
  118. package/dist/types/helpers/withSubComponents.d.ts +16 -0
  119. package/dist/types/layout/Container.d.ts +26 -0
  120. package/dist/types/layout/Footer.d.ts +23 -0
  121. package/dist/types/layout/Hero.d.ts +66 -5
  122. package/dist/types/layout/Level.d.ts +68 -5
  123. package/dist/types/layout/Media.d.ts +63 -5
  124. package/dist/types/layout/Section.d.ts +21 -0
  125. package/dist/types/skill-examples/ExampleMeta.d.ts +5 -0
  126. package/dist/types/skill-examples/ProfileCard.d.ts +13 -0
  127. package/llms.txt +9 -0
  128. 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
+ };