@itiseeron/component-lib 1.0.0 → 1.1.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/README.md CHANGED
@@ -5,7 +5,8 @@ conventions:
5
5
 
6
6
  - **Style props are mutable, with sensible defaults.** Each visual piece has its own
7
7
  `*Style` prop (e.g. `containerStyle`, `itemStyle`) backed by a default `CSSProperties`
8
- object — override only what you need.
8
+ object. Passing one **replaces that object entirely** rather than merging into it — see
9
+ [Gotchas](#gotchas) below before writing a full custom style for a clickable element.
9
10
  - **Selection-driven components share one behavior engine.** `HamburgerMenu`,
10
11
  `RadioButtonGroup`, and `ScrollMenu` are all presentational wrappers around
11
12
  `NavigationBar` — they reuse its selection rules (one item always selected, disabled
@@ -22,14 +23,6 @@ import { Card, ThinButton } from '@itiseeron/component-lib';
22
23
 
23
24
  ## Components
24
25
 
25
- ### HelloWorld
26
-
27
- A placeholder component from the project template.
28
-
29
- ```tsx
30
- <HelloWorld />
31
- ```
32
-
33
26
  ### ThinButton
34
27
 
35
28
  A bordered, clickable button. Renders `text` unless `children` are given.
@@ -143,9 +136,8 @@ inline. Same selection guarantees, purely a different presentation
143
136
 
144
137
  ### RadioButtonGroup
145
138
 
146
- `NavigationBar`'s items as a segmented radio control (default styling mirrors
147
- homepairsUI's `AccountTypeRadioButton`: accent fill on the selected segment, rounded
148
- outer edges only).
139
+ `NavigationBar`'s items as a segmented radio control (accent fill on the selected
140
+ segment, rounded outer edges only).
149
141
 
150
142
  ```tsx
151
143
  <RadioButtonGroup
@@ -181,11 +173,15 @@ fallback logic is conceptually built on (used independently here, not shared —
181
173
  own default is deliberately two-toned like the original).
182
174
 
183
175
  ```tsx
184
- <ImageTile image={logoUrl} /> {/* 70x70 */}
185
- <ImageTile image={logoUrl} enlarge /> {/* 100x100 */}
186
- <TextTile text="+" /> {/* fontSize defaults to 30 */}
176
+ <ImageTile image={logoUrl} alt="Acme Plumbing logo" /> {/* 70x70 */}
177
+ <ImageTile image={logoUrl} enlarge /> {/* 100x100 */}
178
+ <TextTile text="+" /> {/* fontSize defaults to 30 */}
187
179
  ```
188
180
 
181
+ `ImageTile`'s `alt` defaults to `''` (not a missing attribute) — pass real alt text
182
+ whenever the image conveys information, and only rely on the default for genuinely
183
+ decorative images.
184
+
189
185
  ### Loading
190
186
 
191
187
  A small centered spinner panel, built on `Card`. Takes `children` for a status message.
@@ -241,6 +237,33 @@ Wraps `InputForm` (no styling of its own) and adds filtering: on every keystroke
241
237
  />
242
238
  ```
243
239
 
240
+ ## Gotchas
241
+
242
+ **Style props replace, they don't merge.** Passing `buttonStyle={{ color: 'red' }}` to
243
+ `ThinButton` gives you *only* `color: red` — none of the library's default border,
244
+ padding, or background come along with it. Every clickable element (`ThinButton`,
245
+ `NavigationBar`/`RadioButtonGroup`/`ScrollMenu`/`HamburgerMenu` items, `Card`'s close
246
+ button) does apply one small always-on baseline underneath whatever you pass
247
+ (`appearance: none`, `border: none`, `backgroundColor: transparent`), specifically so a
248
+ style override that doesn't think to reset those can't accidentally leak the browser's
249
+ native `<button>` chrome (an outset 3D bevel) through a mostly-empty custom style. But
250
+ anything beyond that baseline — padding, sizing, everything else — is entirely on the
251
+ style object you pass.
252
+
253
+ **Don't mix a CSS shorthand and its longhand across a base/active style pair.** If you
254
+ write your own `itemStyle`/`activeItemStyle` (or `tileStyle`/`activeTileStyle`, etc.)
255
+ pair, declare a given property the same way — all shorthand or all longhand — in both.
256
+ For example, `itemStyle={{ border: '1px solid gray' }}` paired with
257
+ `activeItemStyle={{ borderColor: 'blue' }}` will work the first time an item becomes
258
+ selected, but deselecting it can leave `border-color` cleared to nothing rather than
259
+ restored to `gray`: React's style diffing removes a property outright when a key present
260
+ in the old merged style object is absent from the new one, and once the shorthand's color
261
+ component has been overwritten by an explicit `borderColor`, there's nothing to revert to
262
+ — whatever a stray global stylesheet rule says for that element shows through instead.
263
+ Fix it by writing `itemStyle={{ borderWidth: '1px', borderStyle: 'solid', borderColor:
264
+ 'gray' }}` so `activeItemStyle`'s `borderColor` only ever changes a value that's already
265
+ present in both states, never adds or removes it.
266
+
244
267
  ## Development
245
268
 
246
269
  ```bash
package/dist/index.d.mts CHANGED
@@ -1,8 +1,6 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
- declare function HelloWorld(): JSX.Element;
5
-
6
4
  type ThinButtonProps = {
7
5
  testID?: string;
8
6
  key?: any;
@@ -65,22 +63,22 @@ type CardProps = {
65
63
  *
66
64
  * @param {CardProps} props
67
65
  * */
68
- declare function Card({ containerStyle, wrapperStyle, titleText, titleStyle, subtitleText, subtitleStyle, titleContainerStyle, closeButtonStyle, showCloseButton, onClickCloseButton: closeButtonPressedCallBack, children }: CardProps): JSX.Element;
66
+ declare function Card({ containerStyle, wrapperStyle, titleText, titleStyle, subtitleText, subtitleStyle, titleContainerStyle, closeButtonStyle, closeButtonContainerStyle, showCloseButton, onClickCloseButton: closeButtonPressedCallBack, children }: CardProps): JSX.Element;
69
67
  declare namespace Card {
70
68
  var propTypes: {
71
69
  key: PropTypes.Requireable<string>;
72
70
  children: PropTypes.Requireable<any>;
73
71
  containerStyle: PropTypes.Requireable<object>;
74
72
  wrapperStyle: PropTypes.Requireable<object>;
75
- title: PropTypes.Requireable<string>;
73
+ titleText: PropTypes.Requireable<string>;
76
74
  titleStyle: PropTypes.Requireable<object>;
77
- subtitle: PropTypes.Requireable<string>;
78
- subtitleStyle: PropTypes.Requireable<string>;
75
+ subtitleText: PropTypes.Requireable<string>;
76
+ subtitleStyle: PropTypes.Requireable<object>;
79
77
  titleContainerStyle: PropTypes.Requireable<object>;
80
78
  closeButtonStyle: PropTypes.Requireable<object>;
81
79
  closeButtonContainerStyle: PropTypes.Requireable<object>;
82
- showCloseButton: PropTypes.Requireable<object>;
83
- closeButtonPressedCallBack: PropTypes.Requireable<(...args: any[]) => any>;
80
+ showCloseButton: PropTypes.Requireable<boolean>;
81
+ onClickCloseButton: PropTypes.Requireable<(...args: any[]) => any>;
84
82
  };
85
83
  }
86
84
 
@@ -396,11 +394,11 @@ type RadioButtonGroupProps = {
396
394
  * so it can never disagree with a NavigationBar built from the same
397
395
  * `items` about what "selected" means.
398
396
  *
399
- * Default styling mirrors homepairsUI's AccountTypeRadioButton
400
- * (accent `#00ADE9` fill, `#1177B0` border when selected, muted
401
- * `rgba(55,66,69,.5)` otherwise), generalized from its fixed
402
- * two-option layout to any number of items. Every `*Style` prop is
403
- * mutable the same way as Card's: each has that default, override
397
+ * Default styling is a segmented-control look (accent `#00ADE9` fill,
398
+ * `#1177B0` border when selected, muted `rgba(55,66,69,.5)`
399
+ * otherwise), generalized to any number of items rather than a fixed
400
+ * two-option layout. Every `*Style` prop is mutable the same way as
401
+ * Card's: each has that default, override
404
402
  * just the ones you need.
405
403
  *
406
404
  * @param {RadioButtonGroupProps} props
@@ -450,10 +448,9 @@ type RadioButtonGroupViewProps = {
450
448
  * ------------------------------------------------------------
451
449
  * Pure presentation for a RadioButtonGroup: a row of segments,
452
450
  * rounded like a segmented control at the two outer edges, filled
453
- * with the accent color when selected. Defaults (colors, radius,
454
- * height, padding, font) mirror homepairsUI's AccountTypeRadioButton,
455
- * generalized from its fixed two-option layout to any number of
456
- * `items`. Holds no selection state itself — clicking a segment just
451
+ * with the accent color when selected, generalized to any number of
452
+ * `items` rather than a fixed two-option layout. Holds no selection
453
+ * state itself — clicking a segment just
457
454
  * calls `onItemSelect`, the same guarded callback NavigationBar hands
458
455
  * to any of its views.
459
456
  *
@@ -495,9 +492,9 @@ type LoadingProps = {
495
492
  * Loading
496
493
  * ------------------------------------------------------------
497
494
  * A card that should be shown while assets, requests, or async work
498
- * are in flight. Mirrors homepairsUI's LoadingModal: built on this
499
- * library's own Card, sized to a small centered panel with a
500
- * spinner, and able to take children for a status message under it.
495
+ * are in flight. Built on this library's own Card, sized to a small
496
+ * centered panel with a spinner, and able to take children for a
497
+ * status message under it.
501
498
  *
502
499
  * @param {LoadingProps} props
503
500
  * */
@@ -531,18 +528,18 @@ type ScrollMenuProps = {
531
528
  * Scroll Menu
532
529
  * ------------------------------------------------------------
533
530
  * A NavigationBar whose items render as a horizontally scrollable
534
- * strip of thumbnail tiles instead of a nav strip — think
535
- * homepairsUI's PreferredProviderFlatList, generalized to any set of
536
- * `items`. Selection behavior is NavigationBar's, reused as-is:
537
- * exactly one tile is always selected (defaulting to the first), and
538
- * a disabled or already-active tile is a no-op. This component only
539
- * supplies presentation — ScrollMenuView — so it can never disagree
540
- * with a NavigationBar built from the same `items` about what
541
- * "selected" means.
531
+ * strip of thumbnail tiles instead of a nav strip — a scrollable
532
+ * picker of thumbnails, generalized to any set of `items`. Selection
533
+ * behavior is NavigationBar's, reused as-is: exactly one tile is
534
+ * always selected (defaulting to the first), and a disabled or
535
+ * already-active tile is a no-op. This component only supplies
536
+ * presentation — ScrollMenuView — so it can never disagree with a
537
+ * NavigationBar built from the same `items` about what "selected"
538
+ * means.
542
539
  *
543
540
  * Every `*Style` prop is mutable the same way as Card's: each has a
544
- * default drawn from homepairsUI's ImageTile/PreferredProviderFlatList
545
- * styling, override just the ones you need.
541
+ * default drawn from ScrollMenuView's own tile styling, override just
542
+ * the ones you need.
546
543
  *
547
544
  * @param {ScrollMenuProps} props
548
545
  * */
@@ -582,13 +579,12 @@ type ScrollMenuViewProps = {
582
579
  * Scroll Menu View
583
580
  * ------------------------------------------------------------
584
581
  * Pure presentation for a ScrollMenu: a horizontally scrollable row
585
- * of thumbnail tiles, sized and colored like homepairsUI's ImageTile
586
- * (70x70, 7.5 radius, light border, dark strip background). Give an
587
- * item a thumbnail via its `icon`, e.g.
582
+ * of thumbnail tiles (70x70, 7.5 radius, light border, dark strip
583
+ * background). Give an item a thumbnail via its `icon`, e.g.
588
584
  * `icon: <img src={...} style={{width: '100%', height: '100%', objectFit: 'cover'}} />`;
589
585
  * an item without an `icon` falls back to its `label` as centered
590
- * text, mirroring the ImageTile/TextTile fallback in the original.
591
- * Holds no selection state — clicking a tile just calls
586
+ * text, the same image/text fallback ImageTile/TextTile use. Holds
587
+ * no selection state — clicking a tile just calls
592
588
  * `onItemSelect`, the same guarded callback NavigationBar hands to
593
589
  * any of its views.
594
590
  *
@@ -617,6 +613,7 @@ type ImageTileProps = {
617
613
  key?: any;
618
614
  testID?: string;
619
615
  image: string;
616
+ alt?: string;
620
617
  enlarge?: boolean;
621
618
  containerStyle?: React.CSSProperties;
622
619
  imageStyle?: React.CSSProperties;
@@ -634,18 +631,22 @@ type TextTileProps = {
634
631
  * Image Tile
635
632
  * ------------------------------------------------------------
636
633
  * A small unit that holds an image and is formatted in the shape of
637
- * a rounded tile, matching homepairsUI's ImageTile (70x70, or 100x100
638
- * with `enlarge`, 7.5 radius, light border). Often seen holding a
639
- * service provider's logo, e.g. as an item's thumbnail in ScrollMenu.
634
+ * a rounded tile (70x70, or 100x100 with `enlarge`, 7.5 radius, light
635
+ * border). Often used to hold a logo or avatar, e.g. as an item's
636
+ * thumbnail in ScrollMenu. Pass `alt` whenever the image conveys
637
+ * information (a name, a logo); leave it unset only for genuinely
638
+ * decorative images — it defaults to `''`, not to a missing attribute,
639
+ * so screen readers don't fall back to reading the image URL.
640
640
  *
641
641
  * @param {ImageTileProps} props
642
642
  * */
643
- declare function ImageTile({ testID, image, enlarge, containerStyle, imageStyle }: ImageTileProps): JSX.Element;
643
+ declare function ImageTile({ testID, image, alt, enlarge, containerStyle, imageStyle }: ImageTileProps): JSX.Element;
644
644
  declare namespace ImageTile {
645
645
  var propTypes: {
646
646
  key: PropTypes.Requireable<any>;
647
647
  testID: PropTypes.Requireable<string>;
648
648
  image: PropTypes.Validator<string>;
649
+ alt: PropTypes.Requireable<string>;
649
650
  enlarge: PropTypes.Requireable<boolean>;
650
651
  containerStyle: PropTypes.Requireable<object>;
651
652
  imageStyle: PropTypes.Requireable<object>;
@@ -656,9 +657,8 @@ declare namespace ImageTile {
656
657
  * Text Tile
657
658
  * ------------------------------------------------------------
658
659
  * A small unit that holds a string and is formatted in the shape of
659
- * a rounded tile, matching homepairsUI's TextTile. Used as a fallback
660
- * where an ImageTile would go but there's no image available (e.g.
661
- * the hamburger menu, or an add-provider tile).
660
+ * a rounded tile, matching ImageTile's footprint. Used as a fallback
661
+ * where an ImageTile would go but there's no image available.
662
662
  *
663
663
  * @param {TextTileProps} props
664
664
  * */
@@ -692,8 +692,8 @@ type SearchBarProps<T = any> = Omit<InputFormProps, 'onInput' | 'value' | 'defau
692
692
  * ------------------------------------------------------------
693
693
  * Search Bar
694
694
  * ------------------------------------------------------------
695
- * Wraps InputForm as-is (no styling of its own, same as homepairsUI's
696
- * SearchForm) and adds filtering: on every keystroke, `objects` is
695
+ * Wraps InputForm as-is (no styling of its own) and adds filtering:
696
+ * on every keystroke, `objects` is
697
697
  * filtered and the result is handed to `onResults`. With no `keys`,
698
698
  * matching recurses through each object's own nested values; with
699
699
  * `keys`, only those top-level fields are checked.
@@ -741,4 +741,4 @@ declare namespace SearchBar {
741
741
  };
742
742
  }
743
743
 
744
- export { Card, type CardProps, type CustomMatcher, HamburgerMenu, type HamburgerMenuProps, HamburgerMenuView, type HamburgerMenuViewProps, HelloWorld, ImageTile, type ImageTileProps, InputForm, type InputFormProps, Loading, type LoadingProps, type MatchStrategy, type NavItem, NavigationBar, type NavigationBarProps, NavigationBarView, type NavigationBarViewProps, RadioButtonGroup, type RadioButtonGroupProps, RadioButtonGroupView, type RadioButtonGroupViewProps, type RadioOption, ScrollMenu, type ScrollMenuProps, ScrollMenuView, type ScrollMenuViewProps, SearchBar, type SearchBarProps, TextTile, type TextTileProps, ThinButton, type ThinButtonProps, type ThumbnailItem };
744
+ export { Card, type CardProps, type CustomMatcher, HamburgerMenu, type HamburgerMenuProps, HamburgerMenuView, type HamburgerMenuViewProps, ImageTile, type ImageTileProps, InputForm, type InputFormProps, Loading, type LoadingProps, type MatchStrategy, type NavItem, NavigationBar, type NavigationBarProps, NavigationBarView, type NavigationBarViewProps, RadioButtonGroup, type RadioButtonGroupProps, RadioButtonGroupView, type RadioButtonGroupViewProps, type RadioOption, ScrollMenu, type ScrollMenuProps, ScrollMenuView, type ScrollMenuViewProps, SearchBar, type SearchBarProps, TextTile, type TextTileProps, ThinButton, type ThinButtonProps, type ThumbnailItem };
package/dist/index.d.ts CHANGED
@@ -1,8 +1,6 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
- declare function HelloWorld(): JSX.Element;
5
-
6
4
  type ThinButtonProps = {
7
5
  testID?: string;
8
6
  key?: any;
@@ -65,22 +63,22 @@ type CardProps = {
65
63
  *
66
64
  * @param {CardProps} props
67
65
  * */
68
- declare function Card({ containerStyle, wrapperStyle, titleText, titleStyle, subtitleText, subtitleStyle, titleContainerStyle, closeButtonStyle, showCloseButton, onClickCloseButton: closeButtonPressedCallBack, children }: CardProps): JSX.Element;
66
+ declare function Card({ containerStyle, wrapperStyle, titleText, titleStyle, subtitleText, subtitleStyle, titleContainerStyle, closeButtonStyle, closeButtonContainerStyle, showCloseButton, onClickCloseButton: closeButtonPressedCallBack, children }: CardProps): JSX.Element;
69
67
  declare namespace Card {
70
68
  var propTypes: {
71
69
  key: PropTypes.Requireable<string>;
72
70
  children: PropTypes.Requireable<any>;
73
71
  containerStyle: PropTypes.Requireable<object>;
74
72
  wrapperStyle: PropTypes.Requireable<object>;
75
- title: PropTypes.Requireable<string>;
73
+ titleText: PropTypes.Requireable<string>;
76
74
  titleStyle: PropTypes.Requireable<object>;
77
- subtitle: PropTypes.Requireable<string>;
78
- subtitleStyle: PropTypes.Requireable<string>;
75
+ subtitleText: PropTypes.Requireable<string>;
76
+ subtitleStyle: PropTypes.Requireable<object>;
79
77
  titleContainerStyle: PropTypes.Requireable<object>;
80
78
  closeButtonStyle: PropTypes.Requireable<object>;
81
79
  closeButtonContainerStyle: PropTypes.Requireable<object>;
82
- showCloseButton: PropTypes.Requireable<object>;
83
- closeButtonPressedCallBack: PropTypes.Requireable<(...args: any[]) => any>;
80
+ showCloseButton: PropTypes.Requireable<boolean>;
81
+ onClickCloseButton: PropTypes.Requireable<(...args: any[]) => any>;
84
82
  };
85
83
  }
86
84
 
@@ -396,11 +394,11 @@ type RadioButtonGroupProps = {
396
394
  * so it can never disagree with a NavigationBar built from the same
397
395
  * `items` about what "selected" means.
398
396
  *
399
- * Default styling mirrors homepairsUI's AccountTypeRadioButton
400
- * (accent `#00ADE9` fill, `#1177B0` border when selected, muted
401
- * `rgba(55,66,69,.5)` otherwise), generalized from its fixed
402
- * two-option layout to any number of items. Every `*Style` prop is
403
- * mutable the same way as Card's: each has that default, override
397
+ * Default styling is a segmented-control look (accent `#00ADE9` fill,
398
+ * `#1177B0` border when selected, muted `rgba(55,66,69,.5)`
399
+ * otherwise), generalized to any number of items rather than a fixed
400
+ * two-option layout. Every `*Style` prop is mutable the same way as
401
+ * Card's: each has that default, override
404
402
  * just the ones you need.
405
403
  *
406
404
  * @param {RadioButtonGroupProps} props
@@ -450,10 +448,9 @@ type RadioButtonGroupViewProps = {
450
448
  * ------------------------------------------------------------
451
449
  * Pure presentation for a RadioButtonGroup: a row of segments,
452
450
  * rounded like a segmented control at the two outer edges, filled
453
- * with the accent color when selected. Defaults (colors, radius,
454
- * height, padding, font) mirror homepairsUI's AccountTypeRadioButton,
455
- * generalized from its fixed two-option layout to any number of
456
- * `items`. Holds no selection state itself — clicking a segment just
451
+ * with the accent color when selected, generalized to any number of
452
+ * `items` rather than a fixed two-option layout. Holds no selection
453
+ * state itself — clicking a segment just
457
454
  * calls `onItemSelect`, the same guarded callback NavigationBar hands
458
455
  * to any of its views.
459
456
  *
@@ -495,9 +492,9 @@ type LoadingProps = {
495
492
  * Loading
496
493
  * ------------------------------------------------------------
497
494
  * A card that should be shown while assets, requests, or async work
498
- * are in flight. Mirrors homepairsUI's LoadingModal: built on this
499
- * library's own Card, sized to a small centered panel with a
500
- * spinner, and able to take children for a status message under it.
495
+ * are in flight. Built on this library's own Card, sized to a small
496
+ * centered panel with a spinner, and able to take children for a
497
+ * status message under it.
501
498
  *
502
499
  * @param {LoadingProps} props
503
500
  * */
@@ -531,18 +528,18 @@ type ScrollMenuProps = {
531
528
  * Scroll Menu
532
529
  * ------------------------------------------------------------
533
530
  * A NavigationBar whose items render as a horizontally scrollable
534
- * strip of thumbnail tiles instead of a nav strip — think
535
- * homepairsUI's PreferredProviderFlatList, generalized to any set of
536
- * `items`. Selection behavior is NavigationBar's, reused as-is:
537
- * exactly one tile is always selected (defaulting to the first), and
538
- * a disabled or already-active tile is a no-op. This component only
539
- * supplies presentation — ScrollMenuView — so it can never disagree
540
- * with a NavigationBar built from the same `items` about what
541
- * "selected" means.
531
+ * strip of thumbnail tiles instead of a nav strip — a scrollable
532
+ * picker of thumbnails, generalized to any set of `items`. Selection
533
+ * behavior is NavigationBar's, reused as-is: exactly one tile is
534
+ * always selected (defaulting to the first), and a disabled or
535
+ * already-active tile is a no-op. This component only supplies
536
+ * presentation — ScrollMenuView — so it can never disagree with a
537
+ * NavigationBar built from the same `items` about what "selected"
538
+ * means.
542
539
  *
543
540
  * Every `*Style` prop is mutable the same way as Card's: each has a
544
- * default drawn from homepairsUI's ImageTile/PreferredProviderFlatList
545
- * styling, override just the ones you need.
541
+ * default drawn from ScrollMenuView's own tile styling, override just
542
+ * the ones you need.
546
543
  *
547
544
  * @param {ScrollMenuProps} props
548
545
  * */
@@ -582,13 +579,12 @@ type ScrollMenuViewProps = {
582
579
  * Scroll Menu View
583
580
  * ------------------------------------------------------------
584
581
  * Pure presentation for a ScrollMenu: a horizontally scrollable row
585
- * of thumbnail tiles, sized and colored like homepairsUI's ImageTile
586
- * (70x70, 7.5 radius, light border, dark strip background). Give an
587
- * item a thumbnail via its `icon`, e.g.
582
+ * of thumbnail tiles (70x70, 7.5 radius, light border, dark strip
583
+ * background). Give an item a thumbnail via its `icon`, e.g.
588
584
  * `icon: <img src={...} style={{width: '100%', height: '100%', objectFit: 'cover'}} />`;
589
585
  * an item without an `icon` falls back to its `label` as centered
590
- * text, mirroring the ImageTile/TextTile fallback in the original.
591
- * Holds no selection state — clicking a tile just calls
586
+ * text, the same image/text fallback ImageTile/TextTile use. Holds
587
+ * no selection state — clicking a tile just calls
592
588
  * `onItemSelect`, the same guarded callback NavigationBar hands to
593
589
  * any of its views.
594
590
  *
@@ -617,6 +613,7 @@ type ImageTileProps = {
617
613
  key?: any;
618
614
  testID?: string;
619
615
  image: string;
616
+ alt?: string;
620
617
  enlarge?: boolean;
621
618
  containerStyle?: React.CSSProperties;
622
619
  imageStyle?: React.CSSProperties;
@@ -634,18 +631,22 @@ type TextTileProps = {
634
631
  * Image Tile
635
632
  * ------------------------------------------------------------
636
633
  * A small unit that holds an image and is formatted in the shape of
637
- * a rounded tile, matching homepairsUI's ImageTile (70x70, or 100x100
638
- * with `enlarge`, 7.5 radius, light border). Often seen holding a
639
- * service provider's logo, e.g. as an item's thumbnail in ScrollMenu.
634
+ * a rounded tile (70x70, or 100x100 with `enlarge`, 7.5 radius, light
635
+ * border). Often used to hold a logo or avatar, e.g. as an item's
636
+ * thumbnail in ScrollMenu. Pass `alt` whenever the image conveys
637
+ * information (a name, a logo); leave it unset only for genuinely
638
+ * decorative images — it defaults to `''`, not to a missing attribute,
639
+ * so screen readers don't fall back to reading the image URL.
640
640
  *
641
641
  * @param {ImageTileProps} props
642
642
  * */
643
- declare function ImageTile({ testID, image, enlarge, containerStyle, imageStyle }: ImageTileProps): JSX.Element;
643
+ declare function ImageTile({ testID, image, alt, enlarge, containerStyle, imageStyle }: ImageTileProps): JSX.Element;
644
644
  declare namespace ImageTile {
645
645
  var propTypes: {
646
646
  key: PropTypes.Requireable<any>;
647
647
  testID: PropTypes.Requireable<string>;
648
648
  image: PropTypes.Validator<string>;
649
+ alt: PropTypes.Requireable<string>;
649
650
  enlarge: PropTypes.Requireable<boolean>;
650
651
  containerStyle: PropTypes.Requireable<object>;
651
652
  imageStyle: PropTypes.Requireable<object>;
@@ -656,9 +657,8 @@ declare namespace ImageTile {
656
657
  * Text Tile
657
658
  * ------------------------------------------------------------
658
659
  * A small unit that holds a string and is formatted in the shape of
659
- * a rounded tile, matching homepairsUI's TextTile. Used as a fallback
660
- * where an ImageTile would go but there's no image available (e.g.
661
- * the hamburger menu, or an add-provider tile).
660
+ * a rounded tile, matching ImageTile's footprint. Used as a fallback
661
+ * where an ImageTile would go but there's no image available.
662
662
  *
663
663
  * @param {TextTileProps} props
664
664
  * */
@@ -692,8 +692,8 @@ type SearchBarProps<T = any> = Omit<InputFormProps, 'onInput' | 'value' | 'defau
692
692
  * ------------------------------------------------------------
693
693
  * Search Bar
694
694
  * ------------------------------------------------------------
695
- * Wraps InputForm as-is (no styling of its own, same as homepairsUI's
696
- * SearchForm) and adds filtering: on every keystroke, `objects` is
695
+ * Wraps InputForm as-is (no styling of its own) and adds filtering:
696
+ * on every keystroke, `objects` is
697
697
  * filtered and the result is handed to `onResults`. With no `keys`,
698
698
  * matching recurses through each object's own nested values; with
699
699
  * `keys`, only those top-level fields are checked.
@@ -741,4 +741,4 @@ declare namespace SearchBar {
741
741
  };
742
742
  }
743
743
 
744
- export { Card, type CardProps, type CustomMatcher, HamburgerMenu, type HamburgerMenuProps, HamburgerMenuView, type HamburgerMenuViewProps, HelloWorld, ImageTile, type ImageTileProps, InputForm, type InputFormProps, Loading, type LoadingProps, type MatchStrategy, type NavItem, NavigationBar, type NavigationBarProps, NavigationBarView, type NavigationBarViewProps, RadioButtonGroup, type RadioButtonGroupProps, RadioButtonGroupView, type RadioButtonGroupViewProps, type RadioOption, ScrollMenu, type ScrollMenuProps, ScrollMenuView, type ScrollMenuViewProps, SearchBar, type SearchBarProps, TextTile, type TextTileProps, ThinButton, type ThinButtonProps, type ThumbnailItem };
744
+ export { Card, type CardProps, type CustomMatcher, HamburgerMenu, type HamburgerMenuProps, HamburgerMenuView, type HamburgerMenuViewProps, ImageTile, type ImageTileProps, InputForm, type InputFormProps, Loading, type LoadingProps, type MatchStrategy, type NavItem, NavigationBar, type NavigationBarProps, NavigationBarView, type NavigationBarViewProps, RadioButtonGroup, type RadioButtonGroupProps, RadioButtonGroupView, type RadioButtonGroupViewProps, type RadioOption, ScrollMenu, type ScrollMenuProps, ScrollMenuView, type ScrollMenuViewProps, SearchBar, type SearchBarProps, TextTile, type TextTileProps, ThinButton, type ThinButtonProps, type ThumbnailItem };