@hzblj/kara-components 0.8.0 → 0.10.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 (154) hide show
  1. package/CHANGELOG.md +60 -26
  2. package/README.md +8 -8
  3. package/lib/module/atoms/color-picker/color-picker.android.js +32 -5
  4. package/lib/module/atoms/color-picker/color-picker.android.js.map +1 -1
  5. package/lib/module/atoms/icon-button/icon-button.ios.js +17 -4
  6. package/lib/module/atoms/icon-button/icon-button.ios.js.map +1 -1
  7. package/lib/module/atoms/pressable/pressable.js +45 -22
  8. package/lib/module/atoms/pressable/pressable.js.map +1 -1
  9. package/lib/module/atoms/progress/progress.ios.js +10 -4
  10. package/lib/module/atoms/progress/progress.ios.js.map +1 -1
  11. package/lib/module/atoms/surface/surface.ios.js +3 -0
  12. package/lib/module/atoms/surface/surface.ios.js.map +1 -1
  13. package/lib/module/atoms/text-field/text-field.android.js +19 -4
  14. package/lib/module/atoms/text-field/text-field.android.js.map +1 -1
  15. package/lib/module/atoms/text-field/text-field.ios.js +7 -2
  16. package/lib/module/atoms/text-field/text-field.ios.js.map +1 -1
  17. package/lib/typescript/atoms/activity-indicator/activity-indicator.types.d.ts +1 -1
  18. package/lib/typescript/atoms/avatar/avatar.types.d.ts +2 -2
  19. package/lib/typescript/atoms/badge/badge.types.d.ts +1 -1
  20. package/lib/typescript/atoms/blur-view/blur-view.types.d.ts +6 -6
  21. package/lib/typescript/atoms/button/button.types.d.ts +7 -7
  22. package/lib/typescript/atoms/card/card.types.d.ts +1 -1
  23. package/lib/typescript/atoms/checkbox/checkbox.types.d.ts +2 -2
  24. package/lib/typescript/atoms/chip/chip.types.d.ts +1 -1
  25. package/lib/typescript/atoms/color-picker/color-picker.types.d.ts +4 -3
  26. package/lib/typescript/atoms/date-picker/date-picker.types.d.ts +4 -4
  27. package/lib/typescript/atoms/divider/divider.types.d.ts +2 -2
  28. package/lib/typescript/atoms/fab/fab.types.d.ts +2 -2
  29. package/lib/typescript/atoms/glass-view/glass-view.types.d.ts +5 -5
  30. package/lib/typescript/atoms/h-stack/h-stack.types.d.ts +3 -3
  31. package/lib/typescript/atoms/icon/icon.types.d.ts +4 -4
  32. package/lib/typescript/atoms/icon-button/icon-button.types.d.ts +7 -3
  33. package/lib/typescript/atoms/island/island.types.d.ts +4 -4
  34. package/lib/typescript/atoms/list/list.types.d.ts +5 -5
  35. package/lib/typescript/atoms/picker/picker.types.d.ts +1 -1
  36. package/lib/typescript/atoms/pressable/pressable.types.d.ts +21 -5
  37. package/lib/typescript/atoms/progress/progress.types.d.ts +2 -2
  38. package/lib/typescript/atoms/rn-flat-list/rn-flat-list.types.d.ts +2 -2
  39. package/lib/typescript/atoms/rn-icon/rn-icon.types.d.ts +1 -1
  40. package/lib/typescript/atoms/rn-scroll-view/rn-scroll-view.types.d.ts +2 -2
  41. package/lib/typescript/atoms/rn-section-list/rn-section-list.types.d.ts +2 -2
  42. package/lib/typescript/atoms/rn-text/rn-text.types.d.ts +2 -2
  43. package/lib/typescript/atoms/rn-view/rn-view.types.d.ts +3 -3
  44. package/lib/typescript/atoms/scroll-view/scroll-view.types.d.ts +3 -3
  45. package/lib/typescript/atoms/segmented-control/segmented-control.types.d.ts +3 -3
  46. package/lib/typescript/atoms/skeleton/skeleton.types.d.ts +2 -2
  47. package/lib/typescript/atoms/spacer/spacer.types.d.ts +1 -1
  48. package/lib/typescript/atoms/surface/surface.types.d.ts +2 -2
  49. package/lib/typescript/atoms/switch/switch.types.d.ts +1 -1
  50. package/lib/typescript/atoms/text/text.types.d.ts +1 -1
  51. package/lib/typescript/atoms/text-field/text-field.types.d.ts +8 -4
  52. package/lib/typescript/atoms/v-stack/v-stack.types.d.ts +1 -1
  53. package/lib/typescript/atoms/z-stack/z-stack.types.d.ts +1 -1
  54. package/lib/typescript/glyph/glyph-button.types.d.ts +1 -1
  55. package/lib/typescript/glyph/glyph.types.d.ts +1 -1
  56. package/lib/typescript/molecules/collapsible/collapsible.types.d.ts +1 -1
  57. package/lib/typescript/molecules/empty-state/empty-state.types.d.ts +1 -1
  58. package/lib/typescript/molecules/label/label.types.d.ts +1 -1
  59. package/lib/typescript/molecules/labeled-content/labeled-content.types.d.ts +2 -2
  60. package/lib/typescript/molecules/list-item/list-item.types.d.ts +2 -2
  61. package/lib/typescript/molecules/navigation-bar/navigation-bar.types.d.ts +8 -8
  62. package/lib/typescript/molecules/pager/pager.types.d.ts +2 -2
  63. package/lib/typescript/molecules/radio-group/radio-group.types.d.ts +2 -2
  64. package/lib/typescript/molecules/rn-list-item/rn-list-item.types.d.ts +1 -1
  65. package/lib/typescript/molecules/rn-tooltip/rn-tooltip.types.d.ts +7 -7
  66. package/lib/typescript/molecules/scroll-edge-container/scroll-edge-container.types.d.ts +3 -3
  67. package/lib/typescript/molecules/search-bar/search-bar.types.d.ts +2 -2
  68. package/lib/typescript/molecules/stepper/stepper.types.d.ts +2 -2
  69. package/lib/typescript/molecules/tooltip/tooltip.types.d.ts +6 -6
  70. package/lib/typescript/organisms/action-sheet/action-sheet.types.d.ts +3 -3
  71. package/lib/typescript/organisms/alert/alert.types.d.ts +3 -3
  72. package/lib/typescript/organisms/context-menu/context-menu.types.d.ts +9 -9
  73. package/lib/typescript/organisms/fab-menu/fab-menu.types.d.ts +5 -5
  74. package/lib/typescript/organisms/form/form.types.d.ts +1 -1
  75. package/lib/typescript/organisms/menu/menu.types.d.ts +2 -2
  76. package/lib/typescript/organisms/sheet/sheet.types.d.ts +12 -12
  77. package/lib/typescript/organisms/snackbar/snackbar.types.d.ts +1 -1
  78. package/lib/typescript/organisms/swipe-actions/swipe-actions.types.d.ts +5 -5
  79. package/lib/typescript/templates/screen/screen.types.d.ts +2 -2
  80. package/package.json +4 -4
  81. package/src/atoms/activity-indicator/activity-indicator.types.ts +1 -1
  82. package/src/atoms/avatar/avatar.types.ts +2 -2
  83. package/src/atoms/badge/badge.types.ts +1 -1
  84. package/src/atoms/blur-view/blur-view.types.ts +6 -6
  85. package/src/atoms/button/button.types.ts +7 -7
  86. package/src/atoms/card/card.types.ts +1 -1
  87. package/src/atoms/checkbox/checkbox.types.ts +2 -2
  88. package/src/atoms/chip/chip.types.ts +1 -1
  89. package/src/atoms/color-picker/color-picker.android.tsx +26 -6
  90. package/src/atoms/color-picker/color-picker.types.ts +4 -3
  91. package/src/atoms/date-picker/date-picker.types.ts +4 -4
  92. package/src/atoms/divider/divider.types.ts +2 -2
  93. package/src/atoms/fab/fab.types.ts +2 -2
  94. package/src/atoms/glass-view/glass-view.types.ts +5 -5
  95. package/src/atoms/h-stack/h-stack.types.ts +3 -3
  96. package/src/atoms/icon/icon.types.ts +4 -4
  97. package/src/atoms/icon-button/icon-button.ios.tsx +12 -2
  98. package/src/atoms/icon-button/icon-button.types.ts +7 -3
  99. package/src/atoms/island/island.types.ts +4 -4
  100. package/src/atoms/list/list.types.ts +5 -5
  101. package/src/atoms/picker/picker.types.ts +1 -1
  102. package/src/atoms/pressable/pressable.tsx +39 -18
  103. package/src/atoms/pressable/pressable.types.ts +22 -5
  104. package/src/atoms/progress/progress.ios.tsx +14 -5
  105. package/src/atoms/progress/progress.types.ts +2 -2
  106. package/src/atoms/rn-flat-list/rn-flat-list.types.ts +2 -2
  107. package/src/atoms/rn-icon/rn-icon.types.ts +1 -1
  108. package/src/atoms/rn-scroll-view/rn-scroll-view.types.ts +2 -2
  109. package/src/atoms/rn-section-list/rn-section-list.types.ts +2 -2
  110. package/src/atoms/rn-text/rn-text.types.ts +2 -2
  111. package/src/atoms/rn-view/rn-view.types.ts +3 -3
  112. package/src/atoms/scroll-view/scroll-view.types.ts +3 -3
  113. package/src/atoms/segmented-control/segmented-control.types.ts +3 -3
  114. package/src/atoms/skeleton/skeleton.types.ts +2 -2
  115. package/src/atoms/spacer/spacer.types.ts +1 -1
  116. package/src/atoms/surface/surface.ios.tsx +2 -1
  117. package/src/atoms/surface/surface.types.ts +2 -2
  118. package/src/atoms/switch/switch.types.ts +1 -1
  119. package/src/atoms/text/text.types.ts +1 -1
  120. package/src/atoms/text-field/text-field.android.tsx +19 -3
  121. package/src/atoms/text-field/text-field.ios.tsx +7 -1
  122. package/src/atoms/text-field/text-field.types.ts +8 -4
  123. package/src/atoms/v-stack/v-stack.types.ts +1 -1
  124. package/src/atoms/z-stack/z-stack.types.ts +1 -1
  125. package/src/glyph/glyph-button.types.ts +1 -1
  126. package/src/glyph/glyph.types.ts +1 -1
  127. package/src/molecules/collapsible/collapsible.types.ts +1 -1
  128. package/src/molecules/empty-state/empty-state.types.ts +1 -1
  129. package/src/molecules/label/label.types.ts +1 -1
  130. package/src/molecules/labeled-content/labeled-content.types.ts +2 -2
  131. package/src/molecules/list-item/list-item.types.ts +2 -2
  132. package/src/molecules/navigation-bar/navigation-bar.types.ts +8 -8
  133. package/src/molecules/pager/pager.types.ts +2 -2
  134. package/src/molecules/radio-group/radio-group.types.ts +2 -2
  135. package/src/molecules/rn-list-item/rn-list-item.types.ts +1 -1
  136. package/src/molecules/rn-tooltip/rn-tooltip.types.ts +7 -7
  137. package/src/molecules/scroll-edge-container/scroll-edge-container.types.ts +3 -3
  138. package/src/molecules/search-bar/search-bar.types.ts +2 -2
  139. package/src/molecules/stepper/stepper.types.ts +2 -2
  140. package/src/molecules/tooltip/tooltip.types.ts +6 -6
  141. package/src/organisms/action-sheet/action-sheet.types.ts +3 -3
  142. package/src/organisms/alert/alert.types.ts +3 -3
  143. package/src/organisms/context-menu/context-menu.types.ts +9 -9
  144. package/src/organisms/fab-menu/fab-menu.types.ts +5 -5
  145. package/src/organisms/form/form.types.ts +1 -1
  146. package/src/organisms/menu/menu.types.ts +2 -2
  147. package/src/organisms/sheet/sheet.types.ts +12 -12
  148. package/src/organisms/snackbar/snackbar.types.ts +1 -1
  149. package/src/organisms/swipe-actions/swipe-actions.types.ts +5 -5
  150. package/src/templates/screen/screen.types.ts +2 -2
  151. package/lib/module/platform-support.js +0 -19
  152. package/lib/module/platform-support.js.map +0 -1
  153. package/lib/typescript/platform-support.d.ts +0 -8
  154. package/src/platform-support.ts +0 -20
@@ -4,7 +4,7 @@ import type {ReactNode} from 'react'
4
4
  import type {IconName} from '../../atoms/icon'
5
5
 
6
6
  /**
7
- * A row with an optional icon, a title and subtitle, and a chevron when it can be pressed. A native atom — it renders
7
+ * A row with an optional icon, a title and subtitle, and a chevron when it can be pressed. A native atom: it renders
8
8
  * inside `<Screen>` or `<Island>`; `RnListItem` is the same row without a host.
9
9
  */
10
10
  export type ListItemProps = {
@@ -13,7 +13,7 @@ export type ListItemProps = {
13
13
  /** Makes the row pressable and adds a chevron on the trailing edge. */
14
14
  onPress?: () => void
15
15
  /**
16
- * Horizontal padding inside the row — inside its press area too, so Android's ripple reaches the card's edges. For
16
+ * Horizontal padding inside the row, and inside its press area too, so Android's ripple reaches the card's edges. For
17
17
  * rows in a card of your own; a `List` insets its rows by itself.
18
18
  */
19
19
  px?: SpaceSize
@@ -15,8 +15,8 @@ type NavigationBarItemBase = {
15
15
  }
16
16
 
17
17
  /**
18
- * One item of the bar. `back` and `close` are the platform's own — a chevron and the system close item on iOS, the
19
- * Material arrow and cross on Android — with `Back` / `Close` as their labels unless given others. `icon` is one of the
18
+ * One item of the bar. `back` and `close` are the platform's own (a chevron and the system close item on iOS, the
19
+ * Material arrow and cross on Android), with `Back` / `Close` as their labels unless given others. `icon` is one of the
20
20
  * app's icons and names itself for VoiceOver and TalkBack.
21
21
  */
22
22
  export type NavigationBarItem =
@@ -28,7 +28,7 @@ export type NavigationBarSearchRef = {
28
28
  clear: () => void
29
29
  }
30
30
 
31
- /** A search field in place of the title — iOS only for now; Android keeps the title. */
31
+ /** A search field in place of the title. iOS only for now; Android keeps the title. */
32
32
  export type NavigationBarSearch = {
33
33
  /** Every edit of the field's text. */
34
34
  onChangeText: (text: string) => void
@@ -45,10 +45,10 @@ export type NavigationBarSearch = {
45
45
  export type NavigationBarTitleAlignment = 'center' | 'leading'
46
46
 
47
47
  /**
48
- * A title with items on either side, for a header that is not a navigation screen's — `Sheet.Header` is built on it.
48
+ * A title with items on either side, for a header that is not a navigation screen's. `Sheet.Header` is built on it.
49
49
  * On iOS a standalone `UINavigationBar`, so the items press and render exactly like a native-stack header's: on iOS 26
50
50
  * neighbours share a glass capsule instead of swelling as standalone glass buttons do. On Android Material's top app
51
- * bar. Where an item goes is the caller's choice — the bar places nothing by itself, so a close can sit on either side.
51
+ * bar. Where an item goes is the caller's choice: the bar places nothing by itself, so a close can sit on either side.
52
52
  * The React Native tier: it needs no host.
53
53
  */
54
54
  export type NavigationBarProps = {
@@ -58,13 +58,13 @@ export type NavigationBarProps = {
58
58
  leadingItems?: NavigationBarItem[]
59
59
  /** Replaces the title with a search field (iOS). */
60
60
  search?: NavigationBarSearch
61
- /** Test identifier, forwarded to the native bar. iOS only — Android ignores it. */
61
+ /** Test identifier, forwarded to the native bar. iOS only; Android ignores it. */
62
62
  testID?: string
63
63
  /** The bar's title. */
64
64
  title?: string
65
- /** `center` by default — iOS's own; `leading` is Material's top app bar. */
65
+ /** `center` (iOS's own) by default; `leading` is Material's top app bar. */
66
66
  titleAlignment?: NavigationBarTitleAlignment
67
- /** Fades the title out and in without moving the items — for a large title that scrolls under the bar. */
67
+ /** Fades the title out and in without moving the items, for a large title that scrolls under the bar. */
68
68
  titleVisible?: boolean
69
69
  /** In screen order, toward the trailing edge. */
70
70
  trailingItems?: NavigationBarItem[]
@@ -5,7 +5,7 @@ import type {ReactNode} from 'react'
5
5
  * A swipeable, snapping pager: SwiftUI's `TabView` in its page style, Compose's `HorizontalPager`.
6
6
  *
7
7
  * Pages are addressed by their index rather than by a name, because Compose's pager is index-native
8
- * and SwiftUI's tab values are strings — synthesising the string from the child's position is
8
+ * and SwiftUI's tab values are strings; synthesising the string from the child's position is
9
9
  * lossless, whereas inventing indices for named tabs on Compose would not be. Children are therefore
10
10
  * plain nodes with no `Pager.Page` part to wrap them in: a page carries no props of its own, so the
11
11
  * ceremony would buy nothing.
@@ -22,7 +22,7 @@ export type PagerProps = {
22
22
  onPageChange?: (page: number) => void
23
23
  /** Zero-based. Controlled when passed; otherwise the pager just starts at 0 and owns its position. */
24
24
  page?: number
25
- /** Android only — a SwiftUI page-style `TabView` has no gap between pages. */
25
+ /** Android only: a SwiftUI page-style `TabView` has no gap between pages. */
26
26
  pageSpacing?: SpaceSize
27
27
  /**
28
28
  * Android only. SwiftUI can only disable a `TabView` as a whole, which would take the pages'
@@ -4,13 +4,13 @@ import type {ReactNode} from 'react'
4
4
  export type RadioOption = {
5
5
  /** The option's text. */
6
6
  label: string
7
- /** Identifies the option to `value` and `onValueChange`, and keys its row — keep it unique. */
7
+ /** Identifies the option to `value` and `onValueChange`, and keys its row. Keep it unique. */
8
8
  value: string
9
9
  }
10
10
 
11
11
  /**
12
12
  * A single choice from a list: rows with a checkmark on the selected one on iOS, Material radio buttons on Android. A
13
- * native atom — it renders inside `<Screen>` or `<Island>`.
13
+ * native atom: it renders inside `<Screen>` or `<Island>`.
14
14
  */
15
15
  export type RadioGroupProps = {
16
16
  /** The user pressed an option; it passes that option's `value`. */
@@ -3,7 +3,7 @@ import type {ReactNode} from 'react'
3
3
  import type {ListItemProps} from '../list-item'
4
4
 
5
5
  /**
6
- * `ListItem`'s row in the React Native tier — plain views, no host. For lists long enough that a native host per row
6
+ * `ListItem`'s row in the React Native tier: plain views, no host. For lists long enough that a native host per row
7
7
  * would cost too much to mount (a navigation list, an `RnFlatList` of rows), with the platform's own press feedback: a
8
8
  * ripple across the whole row on Android, a highlight on iOS. In a rounded card, give the card `overflow="hidden"`:
9
9
  * Android draws the ripple as the row's foreground, which only a parent's clip keeps inside rounded corners.
@@ -6,9 +6,9 @@ export type RnTooltipActionVariant = 'link' | 'primary' | 'secondary'
6
6
  export type RnTooltipAction = {
7
7
  /** The button's text. */
8
8
  label: string
9
- /** Called on press. The tooltip stays up — turn `visible` off here if the action should close it. */
9
+ /** Called on press. The tooltip stays up; turn `visible` off here if the action should close it. */
10
10
  onPress: () => void
11
- /** `link` by default — an underlined text. `primary`/`secondary` are small filled/outlined buttons. */
11
+ /** `link` by default, an underlined text. `primary`/`secondary` are small filled/outlined buttons. */
12
12
  variant?: RnTooltipActionVariant
13
13
  }
14
14
 
@@ -16,7 +16,7 @@ export type RnTooltipAction = {
16
16
  export type RnTooltipDismissReason = 'anchorHidden' | 'outside'
17
17
 
18
18
  /**
19
- * A rich tooltip — title, message, actions — anchored below a React Native view, and drawn above every sibling.
19
+ * A rich tooltip (title, message, actions) anchored below a React Native view, and drawn above every sibling.
20
20
  * Controlled: it never hides itself. `onDismiss` reports why it should, and the caller turns `visible` off. The React
21
21
  * Native tier, unlike `Tooltip`, whose anchor is a native view inside a host.
22
22
  */
@@ -26,16 +26,16 @@ export type RnTooltipProps = {
26
26
  /** Which end of the bubble the actions sit at. `end` by default. */
27
27
  actionsAlignment?: 'end' | 'start'
28
28
  /**
29
- * Insets from the window's top and bottom that the anchor's centre must stay inside — a header or a tab bar over the
30
- * content. Past them the tooltip asks to be dismissed with `anchorHidden`.
29
+ * Insets from the window's top and bottom that the anchor's centre must stay inside (a header or a tab bar over the
30
+ * content). Past them the tooltip asks to be dismissed with `anchorHidden`.
31
31
  */
32
32
  boundaryInsets?: {bottom?: number; top?: number}
33
- /** The anchor — a single React Native view. */
33
+ /** The anchor: a single React Native view. */
34
34
  children: ReactElement
35
35
  /** The body text, under the title. */
36
36
  message?: string
37
37
  /**
38
- * Asks for the tooltip to close, with the reason — turn `visible` off. On Android any touch outside asks, the start
38
+ * Asks for the tooltip to close, with the reason; turn `visible` off. On Android any touch outside asks, the start
39
39
  * of a scroll included; iOS keeps the tooltip through a scroll.
40
40
  */
41
41
  onDismiss: (reason: RnTooltipDismissReason) => void
@@ -5,13 +5,13 @@ import type {ReactElement, ReactNode} from 'react'
5
5
  export type {ScrollEdgeEffect, ScrollEdgeScrollableProps} from '@hzblj/kara-native/swift-ui'
6
6
 
7
7
  /**
8
- * Bars over one React Native scroll view, with each platform's scroll edge under them — on iOS 26 the system's
8
+ * Bars over one React Native scroll view, with each platform's scroll edge under them: on iOS 26 the system's
9
9
  * progressive blur where content scrolls past a bar; on Android a Material top app bar's behaviour, the bars stacked
10
10
  * around the scroll view and filling with `surface.secondary` once content scrolls under them. The React Native tier:
11
11
  * it needs no host.
12
12
  *
13
13
  * A screen-level container: wrap the screen's scroll view with it. Mounted inside a cell of a virtualized list on iOS
14
- * it draws only its bottom bar — the hosted scroll view and the top bar stay blank.
14
+ * it draws only its bottom bar; the hosted scroll view and the top bar stay blank.
15
15
  */
16
16
  export type ScrollEdgeContainerProps = ResponsiveViewSx & {
17
17
  /**
@@ -21,7 +21,7 @@ export type ScrollEdgeContainerProps = ResponsiveViewSx & {
21
21
  automaticInsets?: boolean
22
22
  /** Laid over the scroll view's bottom edge on iOS; stacked below it on Android, filled while content continues below. */
23
23
  bottomBar?: ReactNode
24
- /** Exactly one React Native scroll view — `RnScrollView`, `RnFlatList`, `RnSectionList`. */
24
+ /** Exactly one React Native scroll view: `RnScrollView`, `RnFlatList`, `RnSectionList`. */
25
25
  children: ReactElement<ScrollEdgeScrollableProps>
26
26
  /** iOS 26: how hard the edge cuts. `soft` by default. */
27
27
  effect?: ScrollEdgeEffect
@@ -1,7 +1,7 @@
1
1
  import type {ReactNode} from 'react'
2
2
 
3
3
  /**
4
- * A search field drawn the same on both platforms — a rounded box with a magnifier, a `TextInput` and a clear button
4
+ * A search field drawn the same on both platforms: a rounded box with a magnifier, a `TextInput` and a clear button
5
5
  * while there is text. The React Native tier: it needs no host.
6
6
  */
7
7
  export type SearchBarProps = {
@@ -11,7 +11,7 @@ export type SearchBarProps = {
11
11
  placeholder?: string
12
12
  /** Test identifier, put on the field's container view rather than on the `TextInput`. */
13
13
  testID?: string
14
- /** The field's text. Controlled — pass back what `onChangeText` reports. */
14
+ /** The field's text. Controlled: pass back what `onChangeText` reports. */
15
15
  value: string
16
16
  }
17
17
 
@@ -2,10 +2,10 @@ import type {ReactNode} from 'react'
2
2
 
3
3
  /**
4
4
  * A number with minus and plus buttons beside a label: SwiftUI's `Stepper` on iOS; on Android the label, the value and
5
- * two icon buttons in a row. A native atom — it renders inside `<Screen>` or `<Island>`.
5
+ * two icon buttons in a row. A native atom: it renders inside `<Screen>` or `<Island>`.
6
6
  */
7
7
  export type StepperProps = {
8
- /** The leading text. The value is shown too — before the control on iOS, between the buttons on Android. */
8
+ /** The leading text. The value is shown too: before the control on iOS, between the buttons on Android. */
9
9
  label: string
10
10
  /** The highest value. When unset, Android has no upper limit and iOS stops at `100`. */
11
11
  max?: number
@@ -1,20 +1,20 @@
1
1
  import type {ReactNode} from 'react'
2
2
 
3
3
  /**
4
- * A short text tip on a native view, shown while `visible` — a SwiftUI popover from `children` on iOS, Material's plain
5
- * tooltip centred above them on Android. A native atom — it renders inside `<Screen>` or `<Island>`; `RnTooltip`
4
+ * A short text tip on a native view, shown while `visible`: a SwiftUI popover from `children` on iOS, Material's plain
5
+ * tooltip centred above them on Android. A native atom: it renders inside `<Screen>` or `<Island>`; `RnTooltip`
6
6
  * anchors to a React Native view.
7
7
  */
8
8
  export type TooltipProps = {
9
- /** The anchor — a native view. */
9
+ /** The anchor: a native view. */
10
10
  children: ReactNode
11
11
  /** The tip. */
12
12
  text: string
13
- /** Shows the tip while true. Controlled: nothing opens it but this — wire a long press to it if you want one. */
13
+ /** Shows the tip while true. Controlled: nothing opens it but this. Wire a long press to it if you want one. */
14
14
  visible: boolean
15
15
  /**
16
- * The user dismissed the tip — turn `visible` off. iOS: a tap outside the popover. Android: any touch outside it, the
17
- * start of a scroll included, or the anchor scrolling out of the window.
16
+ * The user dismissed the tip, so turn `visible` off. iOS: a tap outside the popover. Android: any touch outside it,
17
+ * the start of a scroll included, or the anchor scrolling out of the window.
18
18
  */
19
19
  onDismiss: () => void
20
20
  }
@@ -3,13 +3,13 @@ import type {ReactNode} from 'react'
3
3
  import type {MenuAction} from '../menu'
4
4
 
5
5
  /**
6
- * A list of actions to pick one from: SwiftUI's confirmation dialog on iOS, a `Sheet` of Material rows — icon and label
7
- * — under the title on Android. A native atom — it renders inside `<Screen>` or `<Island>`.
6
+ * A list of actions to pick one from: SwiftUI's confirmation dialog on iOS, a `Sheet` of Material rows (icon and label)
7
+ * under the title on Android. A native atom: it renders inside `<Screen>` or `<Island>`.
8
8
  */
9
9
  export type ActionSheetProps = {
10
10
  /** The choices, top to bottom. Picking one closes the sheet. */
11
11
  actions: MenuAction[]
12
- /** The sheet closed — after a pick too — so turn `visible` off. */
12
+ /** The sheet closed (after a pick too), so turn `visible` off. */
13
13
  onDismiss: () => void
14
14
  /** The heading above the actions. Android always shows it; on iOS the system decides, and may hide it. */
15
15
  title: string
@@ -2,18 +2,18 @@ import type {ReactNode} from 'react'
2
2
 
3
3
  /**
4
4
  * A modal alert with a confirm button and Cancel: SwiftUI's alert on iOS, Material's `AlertDialog` on Android. A native
5
- * atom — it renders inside `<Screen>` or `<Island>`.
5
+ * atom: it renders inside `<Screen>` or `<Island>`.
6
6
  */
7
7
  export type AlertProps = {
8
8
  /** The confirm button's label. `OK` by default. */
9
9
  confirmLabel?: string
10
- /** Marks the confirm button destructive — the system's destructive role on iOS, the destructive colour on Android. */
10
+ /** Marks the confirm button destructive: the system's destructive role on iOS, the destructive colour on Android. */
11
11
  destructive?: boolean
12
12
  /** The body text, under the title. */
13
13
  message?: string
14
14
  /** The confirm button was pressed. `onDismiss` follows, as it does for every way the alert closes. */
15
15
  onConfirm?: () => void
16
- /** The alert closed — either button, or on Android a tap outside or back — so turn `visible` off. */
16
+ /** The alert closed (either button, or on Android a tap outside or back), so turn `visible` off. */
17
17
  onDismiss: () => void
18
18
  /** The alert's heading. */
19
19
  title: string
@@ -3,7 +3,7 @@ import type {ReactNode} from 'react'
3
3
  import type {MenuAction} from '../menu'
4
4
 
5
5
  /**
6
- * A context menu on a React Native subtree — a card in a list, say — opened by a long press. iOS: a
6
+ * A context menu on a React Native subtree (a card in a list, say), opened by a long press. iOS: a
7
7
  * `UIContextMenuInteraction`, with an optional React Native `preview` lifted while the menu is open and a callback for
8
8
  * a tap on it. Android, where Material has no lifted preview: a ripple and the long-press haptic, then a Material
9
9
  * dropdown where the finger is, with the trigger highlighted while it is open. The trigger is ordinary React Native layout, so it
@@ -14,35 +14,35 @@ export type ContextMenuProps = ResponsiveViewSx & {
14
14
  actions: MenuAction[]
15
15
  /** The trigger, laid out as usual. */
16
16
  children: ReactNode
17
- /** iOS: the user tapped the lifted preview, committing to it — open the detail the card stands for. */
17
+ /** iOS: the user tapped the lifted preview, committing to it. Open the detail the card stands for. */
18
18
  onPreviewPress?: () => void
19
19
  /**
20
- * iOS: lifted in place of the trigger while the menu is open — a larger version of the card, say. A snapshot of the
20
+ * iOS: lifted in place of the trigger while the menu is open (a larger version of the card, say). A snapshot of the
21
21
  * trigger when unset. Mounted only once a finger has rested on the trigger, so a list of cards does not pay for
22
22
  * every preview up front.
23
23
  */
24
24
  preview?: ReactNode
25
25
  /**
26
26
  * iOS: how the preview leaves once tapped, before `onPreviewPress`. `zoom`: its photo grows straight into the pushed
27
- * screen, the way the App Store expands a preview — needs a `ZoomTransition.Source` (`@hzblj/kara-ui/router`) in the
28
- * trigger, a `preview` and iOS 18, and shrinks back like `dismiss` otherwise. `pop`: UIKit's default, the preview
27
+ * screen, the way the App Store expands a preview. It needs a `ZoomTransition.Source` (`@hzblj/kara-ui/router`) in
28
+ * the trigger, a `preview` and iOS 18, and shrinks back like `dismiss` otherwise. `pop`: UIKit's default, the preview
29
29
  * flies out. `dismiss`: it shrinks back onto the trigger first. Default: `zoom` when the trigger holds a
30
30
  * `ZoomTransition.Source`, `pop` otherwise.
31
31
  */
32
32
  previewTransition?: 'dismiss' | 'pop' | 'zoom'
33
- /** Test identifier — on the native view around the trigger on iOS, on the trigger's `Pressable` on Android. */
33
+ /** Test identifier: on the native view around the trigger on iOS, on the trigger's `Pressable` on Android. */
34
34
  testID?: string
35
35
  }
36
36
 
37
- /** A region of a `ContextMenu`'s trigger that keeps its own long press — see `ContextMenu.Exclusion`. */
37
+ /** A region of a `ContextMenu`'s trigger that keeps its own long press (see `ContextMenu.Exclusion`). */
38
38
  export type ContextMenuExclusionProps = {
39
- /** The region — a button inside the card, say. */
39
+ /** The region: a button inside the card, say. */
40
40
  children: ReactNode
41
41
  }
42
42
 
43
43
  export type ContextMenuComponent = ((props: ContextMenuProps) => ReactNode) & {
44
44
  /**
45
- * A region of the trigger that must not open the menu — a button inside the card. On iOS the interaction covers the
45
+ * A region of the trigger that must not open the menu: a button inside the card. On iOS the interaction covers the
46
46
  * whole trigger, so a long press on that button would otherwise open the card's menu.
47
47
  */
48
48
  Exclusion: (props: ContextMenuExclusionProps) => ReactNode
@@ -4,16 +4,16 @@ import type {IconName} from '../../atoms/icon'
4
4
  import type {MenuAction} from '../menu'
5
5
 
6
6
  /**
7
- * A floating action button that unfolds into its actions. Android: Material 3 Expressive's `FloatingActionButtonMenu`
8
- * — the button turns into a close and the actions rise above it as labelled pills. iOS: the same button as the label
9
- * of a SwiftUI `Menu`. A native atom — it renders inside `<Screen>` or `<Island>`.
7
+ * A floating action button that unfolds into its actions. Android: Material 3 Expressive's `FloatingActionButtonMenu`,
8
+ * where the button turns into a close and the actions rise above it as labelled pills. iOS: the same button as the
9
+ * label of a SwiftUI `Menu`. A native atom: it renders inside `<Screen>` or `<Island>`.
10
10
  */
11
11
  export type FabMenuProps = {
12
12
  /** The actions the button unfolds into. */
13
13
  actions: MenuAction[]
14
- /** The closed button's icon — one of the app's. A plus by default. */
14
+ /** The closed button's icon, one of the app's. A plus by default. */
15
15
  icon?: IconName
16
- /** Test identifier, forwarded to the SwiftUI `Menu`. iOS only — Android ignores it. */
16
+ /** Test identifier, forwarded to the SwiftUI `Menu`. iOS only; Android ignores it. */
17
17
  testID?: string
18
18
  }
19
19
 
@@ -1,7 +1,7 @@
1
1
  import type {ReactNode} from 'react'
2
2
 
3
3
  /**
4
- * A settings form — SwiftUI `Form` with its grouped sections, Material cards on Android. On iOS it scrolls like a
4
+ * A settings form: SwiftUI `Form` with its grouped sections, Material cards on Android. On iOS it scrolls like a
5
5
  * `List`, so it needs a height from outside: a `Screen`, or an `Island` with `matchContents={false}` and a height. In
6
6
  * an island that sizes itself to its content it has no height and shows nothing.
7
7
  */
@@ -5,7 +5,7 @@ import type {IconName} from '../../atoms/icon'
5
5
  /** One action of a `Menu`, an `ActionSheet`, a `ContextMenu` or a `FabMenu`. */
6
6
  export type MenuAction = {
7
7
  /**
8
- * Draws the action in the destructive colour — the system's destructive role on iOS. `FabMenu` ignores it on
8
+ * Draws the action in the destructive colour (the system's destructive role on iOS). `FabMenu` ignores it on
9
9
  * Android.
10
10
  */
11
11
  destructive?: boolean
@@ -22,7 +22,7 @@ export type MenuAction = {
22
22
 
23
23
  /**
24
24
  * A text button that opens a list of actions: a SwiftUI `Menu` on iOS, a Material dropdown anchored to it on Android.
25
- * A native atom — it renders inside `<Screen>` or `<Island>`.
25
+ * A native atom: it renders inside `<Screen>` or `<Island>`.
26
26
  */
27
27
  export type MenuProps = {
28
28
  /** The menu's actions, top to bottom. */
@@ -9,13 +9,13 @@ export type SheetDetent = 'auto' | number
9
9
 
10
10
  /**
11
11
  * `center` is iOS's own, `leading` Material's. `large` puts the title above the content in a large face, and once
12
- * that scrolls under the bar the bar's own title fades in — centred on iOS, leading on Android.
12
+ * that scrolls under the bar the bar's own title fades in (centred on iOS, leading on Android).
13
13
  */
14
14
  export type SheetTitleStyle = 'center' | 'large' | 'leading'
15
15
 
16
16
  /**
17
17
  * The sheet's header: a `NavigationBar` with the title and items, and anything else that should stay put above the
18
- * content (`children` — a segmented control, a search hint). On iOS 26 a scrollable sheet's content scrolls under it
18
+ * content (`children`: a segmented control, a search hint). On iOS 26 a scrollable sheet's content scrolls under it
19
19
  * with the system's scroll edge effect; elsewhere it sits above the content.
20
20
  */
21
21
  export type SheetHeaderProps = {
@@ -27,11 +27,11 @@ export type SheetHeaderProps = {
27
27
  leadingItems?: NavigationBarItem[]
28
28
  /** A search field in place of the title (iOS). */
29
29
  search?: NavigationBarSearch
30
- /** The title — in the bar, or above the content with a `large` `titleStyle`. */
30
+ /** The title: in the bar, or above the content with a `large` `titleStyle`. */
31
31
  title?: string
32
32
  /** `center` by default. */
33
33
  titleStyle?: SheetTitleStyle
34
- /** In screen order, toward the trailing edge — the close item, by convention. */
34
+ /** In screen order, toward the trailing edge: the close item, by convention. */
35
35
  trailingItems?: NavigationBarItem[]
36
36
  }
37
37
 
@@ -39,14 +39,14 @@ export type SheetHeaderProps = {
39
39
  export type SheetRef = {
40
40
  /** Dismisses it without calling `onDismiss`, which reports the user's dismissals only. */
41
41
  dismiss: () => Promise<void>
42
- /** Presents at a detent — the first by default. */
42
+ /** Presents at a detent, the first by default. */
43
43
  present: (detentIndex?: number) => Promise<void>
44
44
  /** Moves to another detent. */
45
45
  resize: (detentIndex: number) => Promise<void>
46
46
  }
47
47
 
48
48
  /**
49
- * A native sheet — `UISheetPresentationController` on iOS, Material's bottom sheet on Android — with an optional
49
+ * A native sheet (`UISheetPresentationController` on iOS, Material's bottom sheet on Android) with an optional
50
50
  * native header (`<Sheet.Header>` as a direct child). The React Native tier: it needs no host, and must not sit inside
51
51
  * one; native atoms in its content go in an `Island`.
52
52
  */
@@ -55,7 +55,7 @@ export type SheetProps = {
55
55
  bg?: ColorToken
56
56
  /** The content. A `<Sheet.Header>` among the direct children becomes the native header instead. */
57
57
  children: ReactNode
58
- /** Where the sheet can rest, smallest first. `['auto']` — fit the content — by default. */
58
+ /** Where the sheet can rest, smallest first. `['auto']` (fit the content) by default. */
59
59
  detents?: SheetDetent[]
60
60
  /** Dims what is behind. On by default. */
61
61
  dimmed?: boolean
@@ -67,9 +67,9 @@ export type SheetProps = {
67
67
  footer?: ReactElement
68
68
  /** The drag handle. On by default. */
69
69
  grabber?: boolean
70
- /** The user dismissed it — `visible` going false does not call this. */
70
+ /** The user dismissed it; `visible` going false does not call this. */
71
71
  onDismiss: () => void
72
- /** The sheet moved to another detent — its index in `detents`. */
72
+ /** The sheet moved to another detent: its index in `detents`. */
73
73
  onDetentChange?: (detentIndex: number) => void
74
74
  /** The sheet finished presenting. */
75
75
  onPresent?: () => void
@@ -77,7 +77,7 @@ export type SheetProps = {
77
77
  ref?: Ref<SheetRef>
78
78
  /**
79
79
  * The content is a scroll view (`<Sheet.ScrollView>`) the sheet drives: dragging past its top resizes the sheet,
80
- * and a header scrolls with the iOS 26 edge effect. Off by default — set it with a scrolling body.
80
+ * and a header scrolls with the iOS 26 edge effect. Off by default; set it with a scrolling body.
81
81
  */
82
82
  scrollable?: boolean
83
83
  /** Test identifier, forwarded to the native sheet. */
@@ -92,7 +92,7 @@ export type SheetScrollHandler = (event: NativeSyntheticEvent<NativeScrollEvent>
92
92
  export type SheetScrollContextValue = {
93
93
  /** Render it first in the content. `null` unless the header's `titleStyle` is `large`. */
94
94
  largeTitle: ReactNode
95
- /** Forward the scroll view's scroll events to it — it tracks the large title. Unset when there is none. */
95
+ /** Forward the scroll view's scroll events to it; it tracks the large title. Unset when there is none. */
96
96
  onScroll?: SheetScrollHandler
97
97
  /** The room an overlaid header takes, to add to the content's top padding. `0` where the header sits above it. */
98
98
  topInset: number
@@ -105,7 +105,7 @@ export type SheetScrollContextValue = {
105
105
  export type SheetScrollViewProps = Pick<ScrollViewProps, 'keyboardShouldPersistTaps'> & {
106
106
  /** The scrolling content, after the large title if there is one. */
107
107
  children: ReactNode
108
- /** Styles the scrolling content — padding and gap belong here, as with `RnScrollView`. */
108
+ /** Styles the scrolling content: padding and gap belong here, as with `RnScrollView`. */
109
109
  content?: ResponsiveViewSx
110
110
  /** Called on every scroll event, after the sheet's own listener. */
111
111
  onScroll?: SheetScrollHandler
@@ -9,7 +9,7 @@ export type SnackbarProps = {
9
9
  actionLabel?: string
10
10
  /** The message. */
11
11
  message: string
12
- /** The action was pressed. The snackbar stays up — turn `visible` off to hide it. */
12
+ /** The action was pressed. The snackbar stays up; turn `visible` off to hide it. */
13
13
  onAction?: () => void
14
14
  /** Shows the snackbar while true, fading it in and out. It sets no timer of its own. */
15
15
  visible: boolean
@@ -7,26 +7,26 @@ import type {IconName} from '../../atoms/icon'
7
7
  export type SwipeAction = {
8
8
  /** Fills the button with `fill.destructive.primary` unless `tint` says otherwise. */
9
9
  destructive?: boolean
10
- /** One of the app's icons, on the button — a round one on iOS 26, as in Mail, a filled stadium on Android. */
10
+ /** One of the app's icons, on the button: a round one on iOS 26, as in Mail, a filled stadium on Android. */
11
11
  icon: IconName
12
12
  /**
13
- * The action's name, written under the button — before iOS 26 a row of the usual height shows the icon alone and
13
+ * The action's name, written under the button; before iOS 26 a row of the usual height shows the icon alone and
14
14
  * keeps the label for VoiceOver. Actions are keyed by it, so keep labels unique within one row.
15
15
  */
16
16
  label: string
17
17
  /** Called when the button is pressed. The row closes by itself. */
18
18
  onPress: () => void
19
19
  /**
20
- * The button's fill — `fill.destructive.primary` for a destructive action, `fill.accent.primary` otherwise. The icon
20
+ * The button's fill: `fill.destructive.primary` for a destructive action, `fill.accent.primary` otherwise. The icon
21
21
  * on it is white, so pick a fill that holds white in both appearances.
22
22
  */
23
23
  tint?: ColorToken
24
24
  }
25
25
 
26
26
  /**
27
- * A list row with buttons behind it, uncovered by a swipe — SwiftUI's `swipeActions` on iOS, and on Android, where
27
+ * A list row with buttons behind it, uncovered by a swipe. SwiftUI's `swipeActions` on iOS, and on Android, where
28
28
  * Compose has none, kara's own: the row slides on an anchored drag and the buttons show in the strip it leaves. One
29
- * row is open at a time on both; a tap on an open row closes it. A native organism — it belongs inside a `List`.
29
+ * row is open at a time on both; a tap on an open row closes it. A native organism: it belongs inside a `List`.
30
30
  */
31
31
  export type SwipeActionsProps = {
32
32
  /**
@@ -2,7 +2,7 @@ import type {Sx} from '@hzblj/kara-sx'
2
2
  import type {ReactNode} from 'react'
3
3
 
4
4
  /**
5
- * The full-bleed native host a screen starts with — a SwiftUI or Compose `Host` filling its parent, so native atoms
5
+ * The full-bleed native host a screen starts with: a SwiftUI or Compose `Host` filling its parent, so native atoms
6
6
  * render anywhere inside it. The background runs to the edges; the content keeps clear of the status bar where the
7
7
  * screen covers it (no navigation bar above), on Android as SwiftUI's safe area does on iOS.
8
8
  */
@@ -13,7 +13,7 @@ export type ScreenProps = {
13
13
  children?: ReactNode
14
14
  /** Keeps the content where it is when the keyboard opens, instead of avoiding it. Android reads it once, on mount. */
15
15
  ignoreKeyboardInset?: boolean
16
- /** Test identifier — on the host view on iOS, on the view around it on Android. */
16
+ /** Test identifier, on the host view on iOS and on the view around it on Android. */
17
17
  testID?: string
18
18
  }
19
19
 
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- const warned = new Set();
4
-
5
- /**
6
- * Announces an atom that only one platform can implement. The stub still satisfies the shared
7
- * component type, so `contract.check.ts` keeps both files honest — this just makes the gap loud
8
- * in dev instead of leaving a control that mysteriously never appears.
9
- *
10
- * Warns once per atom: the gap is permanent, so repeating it every render would be noise.
11
- */
12
- export const warnUnsupported = (atom, platform) => {
13
- if (!__DEV__ || warned.has(atom)) {
14
- return;
15
- }
16
- warned.add(atom);
17
- console.error(`[kara-ui] <${atom}> has no ${platform} implementation and renders nothing there. Branch on Platform.OS at the call site.`);
18
- };
19
- //# sourceMappingURL=platform-support.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["warned","Set","warnUnsupported","atom","platform","__DEV__","has","add","console","error"],"sourceRoot":"../../src","sources":["platform-support.ts"],"mappings":";;AAAA,MAAMA,MAAM,GAAG,IAAIC,GAAG,CAAS,CAAC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAACC,IAAY,EAAEC,QAA2B,KAAK;EAC5E,IAAI,CAACC,OAAO,IAAIL,MAAM,CAACM,GAAG,CAACH,IAAI,CAAC,EAAE;IAChC;EACF;EAEAH,MAAM,CAACO,GAAG,CAACJ,IAAI,CAAC;EAEhBK,OAAO,CAACC,KAAK,CACX,cAAcN,IAAI,YAAYC,QAAQ,oFACxC,CAAC;AACH,CAAC","ignoreList":[]}
@@ -1,8 +0,0 @@
1
- /**
2
- * Announces an atom that only one platform can implement. The stub still satisfies the shared
3
- * component type, so `contract.check.ts` keeps both files honest — this just makes the gap loud
4
- * in dev instead of leaving a control that mysteriously never appears.
5
- *
6
- * Warns once per atom: the gap is permanent, so repeating it every render would be noise.
7
- */
8
- export declare const warnUnsupported: (atom: string, platform: 'Android' | 'iOS') => void;
@@ -1,20 +0,0 @@
1
- const warned = new Set<string>()
2
-
3
- /**
4
- * Announces an atom that only one platform can implement. The stub still satisfies the shared
5
- * component type, so `contract.check.ts` keeps both files honest — this just makes the gap loud
6
- * in dev instead of leaving a control that mysteriously never appears.
7
- *
8
- * Warns once per atom: the gap is permanent, so repeating it every render would be noise.
9
- */
10
- export const warnUnsupported = (atom: string, platform: 'Android' | 'iOS') => {
11
- if (!__DEV__ || warned.has(atom)) {
12
- return
13
- }
14
-
15
- warned.add(atom)
16
-
17
- console.error(
18
- `[kara-ui] <${atom}> has no ${platform} implementation and renders nothing there. Branch on Platform.OS at the call site.`
19
- )
20
- }