@hzblj/kara-components 0.9.0 → 0.10.0

package/lib/typescript/molecules/labeled-content/labeled-content.types.d.ts

@@ -2,7 +2,7 @@ import type { SpaceSize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 import type { IconName } from '../../atoms/icon';
 /**
- * A label on the leading edge and its value on the trailing edge — the settings/detail row.
+ * A label on the leading edge and its value on the trailing edge: the settings/detail row.
  * Pass `children` instead of `value` when the trailing side is a control rather than text.
  */
 export type LabeledContentProps = {
@@ -14,7 +14,7 @@ export type LabeledContentProps = {
     label: string;
     /** Makes the row pressable and adds a chevron on the trailing edge. */
     onPress?: () => void;
-    /** Horizontal padding inside the row — inside its press area too, so Android's ripple reaches the card's edges. */
+    /** Horizontal padding inside the row, and inside its press area too, so Android's ripple reaches the card's edges. */
     px?: SpaceSize;
     /** Test identifier, forwarded to the native view. */
     testID?: string;

package/lib/typescript/molecules/list-item/list-item.types.d.ts

@@ -2,7 +2,7 @@ import type { SpaceSize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 import type { IconName } from '../../atoms/icon';
 /**
- * A row with an optional icon, a title and subtitle, and a chevron when it can be pressed. A native atom — it renders
+ * A row with an optional icon, a title and subtitle, and a chevron when it can be pressed. A native atom: it renders
  * inside `<Screen>` or `<Island>`; `RnListItem` is the same row without a host.
  */
 export type ListItemProps = {
@@ -11,7 +11,7 @@ export type ListItemProps = {
     /** Makes the row pressable and adds a chevron on the trailing edge. */
     onPress?: () => void;
     /**
-     * Horizontal padding inside the row — inside its press area too, so Android's ripple reaches the card's edges. For
+     * Horizontal padding inside the row, and inside its press area too, so Android's ripple reaches the card's edges. For
      * rows in a card of your own; a `List` insets its rows by itself.
      */
     px?: SpaceSize;

package/lib/typescript/molecules/navigation-bar/navigation-bar.types.d.ts

@@ -12,8 +12,8 @@ type NavigationBarItemBase = {
     testID?: string;
 };
 /**
- * One item of the bar. `back` and `close` are the platform's own — a chevron and the system close item on iOS, the
- * Material arrow and cross on Android — with `Back` / `Close` as their labels unless given others. `icon` is one of the
+ * One item of the bar. `back` and `close` are the platform's own (a chevron and the system close item on iOS, the
+ * Material arrow and cross on Android), with `Back` / `Close` as their labels unless given others. `icon` is one of the
  * app's icons and names itself for VoiceOver and TalkBack.
  */
 export type NavigationBarItem = (NavigationBarItemBase & {
@@ -28,7 +28,7 @@ export type NavigationBarSearchRef = {
     /** Empties the field and ends editing. */
     clear: () => void;
 };
-/** A search field in place of the title — iOS only for now; Android keeps the title. */
+/** A search field in place of the title. iOS only for now; Android keeps the title. */
 export type NavigationBarSearch = {
     /** Every edit of the field's text. */
     onChangeText: (text: string) => void;
@@ -43,10 +43,10 @@ export type NavigationBarSearch = {
 };
 export type NavigationBarTitleAlignment = 'center' | 'leading';
 /**
- * A title with items on either side, for a header that is not a navigation screen's — `Sheet.Header` is built on it.
+ * A title with items on either side, for a header that is not a navigation screen's. `Sheet.Header` is built on it.
  * On iOS a standalone `UINavigationBar`, so the items press and render exactly like a native-stack header's: on iOS 26
  * neighbours share a glass capsule instead of swelling as standalone glass buttons do. On Android Material's top app
- * bar. Where an item goes is the caller's choice — the bar places nothing by itself, so a close can sit on either side.
+ * bar. Where an item goes is the caller's choice: the bar places nothing by itself, so a close can sit on either side.
  * The React Native tier: it needs no host.
  */
 export type NavigationBarProps = {
@@ -56,13 +56,13 @@ export type NavigationBarProps = {
     leadingItems?: NavigationBarItem[];
     /** Replaces the title with a search field (iOS). */
     search?: NavigationBarSearch;
-    /** Test identifier, forwarded to the native bar. iOS only — Android ignores it. */
+    /** Test identifier, forwarded to the native bar. iOS only; Android ignores it. */
     testID?: string;
     /** The bar's title. */
     title?: string;
-    /** `center` by default — iOS's own; `leading` is Material's top app bar. */
+    /** `center` (iOS's own) by default; `leading` is Material's top app bar. */
     titleAlignment?: NavigationBarTitleAlignment;
-    /** Fades the title out and in without moving the items — for a large title that scrolls under the bar. */
+    /** Fades the title out and in without moving the items, for a large title that scrolls under the bar. */
     titleVisible?: boolean;
     /** In screen order, toward the trailing edge. */
     trailingItems?: NavigationBarItem[];

package/lib/typescript/molecules/pager/pager.types.d.ts

@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
  * A swipeable, snapping pager: SwiftUI's `TabView` in its page style, Compose's `HorizontalPager`.
  *
  * Pages are addressed by their index rather than by a name, because Compose's pager is index-native
- * and SwiftUI's tab values are strings — synthesising the string from the child's position is
+ * and SwiftUI's tab values are strings; synthesising the string from the child's position is
  * lossless, whereas inventing indices for named tabs on Compose would not be. Children are therefore
  * plain nodes with no `Pager.Page` part to wrap them in: a page carries no props of its own, so the
  * ceremony would buy nothing.
@@ -21,7 +21,7 @@ export type PagerProps = {
     onPageChange?: (page: number) => void;
     /** Zero-based. Controlled when passed; otherwise the pager just starts at 0 and owns its position. */
     page?: number;
-    /** Android only — a SwiftUI page-style `TabView` has no gap between pages. */
+    /** Android only: a SwiftUI page-style `TabView` has no gap between pages. */
     pageSpacing?: SpaceSize;
     /**
      * Android only. SwiftUI can only disable a `TabView` as a whole, which would take the pages'

package/lib/typescript/molecules/radio-group/radio-group.types.d.ts

@@ -3,12 +3,12 @@ import type { ReactNode } from 'react';
 export type RadioOption = {
     /** The option's text. */
     label: string;
-    /** Identifies the option to `value` and `onValueChange`, and keys its row — keep it unique. */
+    /** Identifies the option to `value` and `onValueChange`, and keys its row. Keep it unique. */
     value: string;
 };
 /**
  * A single choice from a list: rows with a checkmark on the selected one on iOS, Material radio buttons on Android. A
- * native atom — it renders inside `<Screen>` or `<Island>`.
+ * native atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type RadioGroupProps = {
     /** The user pressed an option; it passes that option's `value`. */

package/lib/typescript/molecules/rn-list-item/rn-list-item.types.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ListItemProps } from '../list-item';
 /**
- * `ListItem`'s row in the React Native tier — plain views, no host. For lists long enough that a native host per row
+ * `ListItem`'s row in the React Native tier: plain views, no host. For lists long enough that a native host per row
  * would cost too much to mount (a navigation list, an `RnFlatList` of rows), with the platform's own press feedback: a
  * ripple across the whole row on Android, a highlight on iOS. In a rounded card, give the card `overflow="hidden"`:
  * Android draws the ripple as the row's foreground, which only a parent's clip keeps inside rounded corners.

package/lib/typescript/molecules/rn-tooltip/rn-tooltip.types.d.ts

@@ -4,15 +4,15 @@ export type RnTooltipActionVariant = 'link' | 'primary' | 'secondary';
 export type RnTooltipAction = {
     /** The button's text. */
     label: string;
-    /** Called on press. The tooltip stays up — turn `visible` off here if the action should close it. */
+    /** Called on press. The tooltip stays up; turn `visible` off here if the action should close it. */
     onPress: () => void;
-    /** `link` by default — an underlined text. `primary`/`secondary` are small filled/outlined buttons. */
+    /** `link` by default, an underlined text. `primary`/`secondary` are small filled/outlined buttons. */
     variant?: RnTooltipActionVariant;
 };
 /** `outside`: a touch outside the bubble. `anchorHidden`: the anchor's centre left the visible area. */
 export type RnTooltipDismissReason = 'anchorHidden' | 'outside';
 /**
- * A rich tooltip — title, message, actions — anchored below a React Native view, and drawn above every sibling.
+ * A rich tooltip (title, message, actions) anchored below a React Native view, and drawn above every sibling.
  * Controlled: it never hides itself. `onDismiss` reports why it should, and the caller turns `visible` off. The React
  * Native tier, unlike `Tooltip`, whose anchor is a native view inside a host.
  */
@@ -22,19 +22,19 @@ export type RnTooltipProps = {
     /** Which end of the bubble the actions sit at. `end` by default. */
     actionsAlignment?: 'end' | 'start';
     /**
-     * Insets from the window's top and bottom that the anchor's centre must stay inside — a header or a tab bar over the
-     * content. Past them the tooltip asks to be dismissed with `anchorHidden`.
+     * Insets from the window's top and bottom that the anchor's centre must stay inside (a header or a tab bar over the
+     * content). Past them the tooltip asks to be dismissed with `anchorHidden`.
      */
     boundaryInsets?: {
         bottom?: number;
         top?: number;
     };
-    /** The anchor — a single React Native view. */
+    /** The anchor: a single React Native view. */
     children: ReactElement;
     /** The body text, under the title. */
     message?: string;
     /**
-     * Asks for the tooltip to close, with the reason — turn `visible` off. On Android any touch outside asks, the start
+     * Asks for the tooltip to close, with the reason; turn `visible` off. On Android any touch outside asks, the start
      * of a scroll included; iOS keeps the tooltip through a scroll.
      */
     onDismiss: (reason: RnTooltipDismissReason) => void;

package/lib/typescript/molecules/scroll-edge-container/scroll-edge-container.types.d.ts

@@ -3,13 +3,13 @@ import type { ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { ReactElement, ReactNode } from 'react';
 export type { ScrollEdgeEffect, ScrollEdgeScrollableProps } from '@hzblj/kara-native/swift-ui';
 /**
- * Bars over one React Native scroll view, with each platform's scroll edge under them — on iOS 26 the system's
+ * Bars over one React Native scroll view, with each platform's scroll edge under them: on iOS 26 the system's
  * progressive blur where content scrolls past a bar; on Android a Material top app bar's behaviour, the bars stacked
  * around the scroll view and filling with `surface.secondary` once content scrolls under them. The React Native tier:
  * it needs no host.
  *
  * A screen-level container: wrap the screen's scroll view with it. Mounted inside a cell of a virtualized list on iOS
- * it draws only its bottom bar — the hosted scroll view and the top bar stay blank.
+ * it draws only its bottom bar; the hosted scroll view and the top bar stay blank.
  */
 export type ScrollEdgeContainerProps = ResponsiveViewSx & {
     /**
@@ -19,7 +19,7 @@ export type ScrollEdgeContainerProps = ResponsiveViewSx & {
     automaticInsets?: boolean;
     /** Laid over the scroll view's bottom edge on iOS; stacked below it on Android, filled while content continues below. */
     bottomBar?: ReactNode;
-    /** Exactly one React Native scroll view — `RnScrollView`, `RnFlatList`, `RnSectionList`. */
+    /** Exactly one React Native scroll view: `RnScrollView`, `RnFlatList`, `RnSectionList`. */
     children: ReactElement<ScrollEdgeScrollableProps>;
     /** iOS 26: how hard the edge cuts. `soft` by default. */
     effect?: ScrollEdgeEffect;

package/lib/typescript/molecules/search-bar/search-bar.types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 /**
- * A search field drawn the same on both platforms — a rounded box with a magnifier, a `TextInput` and a clear button
+ * A search field drawn the same on both platforms: a rounded box with a magnifier, a `TextInput` and a clear button
  * while there is text. The React Native tier: it needs no host.
  */
 export type SearchBarProps = {
@@ -10,7 +10,7 @@ export type SearchBarProps = {
     placeholder?: string;
     /** Test identifier, put on the field's container view rather than on the `TextInput`. */
     testID?: string;
-    /** The field's text. Controlled — pass back what `onChangeText` reports. */
+    /** The field's text. Controlled: pass back what `onChangeText` reports. */
     value: string;
 };
 export type SearchBarComponent = (props: SearchBarProps) => ReactNode;

package/lib/typescript/molecules/stepper/stepper.types.d.ts

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react';
 /**
  * A number with minus and plus buttons beside a label: SwiftUI's `Stepper` on iOS; on Android the label, the value and
- * two icon buttons in a row. A native atom — it renders inside `<Screen>` or `<Island>`.
+ * two icon buttons in a row. A native atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type StepperProps = {
-    /** The leading text. The value is shown too — before the control on iOS, between the buttons on Android. */
+    /** The leading text. The value is shown too: before the control on iOS, between the buttons on Android. */
     label: string;
     /** The highest value. When unset, Android has no upper limit and iOS stops at `100`. */
     max?: number;

package/lib/typescript/molecules/tooltip/tooltip.types.d.ts

@@ -1,19 +1,19 @@
 import type { ReactNode } from 'react';
 /**
- * A short text tip on a native view, shown while `visible` — a SwiftUI popover from `children` on iOS, Material's plain
- * tooltip centred above them on Android. A native atom — it renders inside `<Screen>` or `<Island>`; `RnTooltip`
+ * A short text tip on a native view, shown while `visible`: a SwiftUI popover from `children` on iOS, Material's plain
+ * tooltip centred above them on Android. A native atom: it renders inside `<Screen>` or `<Island>`; `RnTooltip`
  * anchors to a React Native view.
  */
 export type TooltipProps = {
-    /** The anchor — a native view. */
+    /** The anchor: a native view. */
     children: ReactNode;
     /** The tip. */
     text: string;
-    /** Shows the tip while true. Controlled: nothing opens it but this — wire a long press to it if you want one. */
+    /** Shows the tip while true. Controlled: nothing opens it but this. Wire a long press to it if you want one. */
     visible: boolean;
     /**
-     * The user dismissed the tip — turn `visible` off. iOS: a tap outside the popover. Android: any touch outside it, the
-     * start of a scroll included, or the anchor scrolling out of the window.
+     * The user dismissed the tip, so turn `visible` off. iOS: a tap outside the popover. Android: any touch outside it,
+     * the start of a scroll included, or the anchor scrolling out of the window.
      */
     onDismiss: () => void;
 };

package/lib/typescript/organisms/action-sheet/action-sheet.types.d.ts

@@ -1,13 +1,13 @@
 import type { ReactNode } from 'react';
 import type { MenuAction } from '../menu';
 /**
- * A list of actions to pick one from: SwiftUI's confirmation dialog on iOS, a `Sheet` of Material rows — icon and label
- * — under the title on Android. A native atom — it renders inside `<Screen>` or `<Island>`.
+ * A list of actions to pick one from: SwiftUI's confirmation dialog on iOS, a `Sheet` of Material rows (icon and label)
+ * under the title on Android. A native atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type ActionSheetProps = {
     /** The choices, top to bottom. Picking one closes the sheet. */
     actions: MenuAction[];
-    /** The sheet closed — after a pick too — so turn `visible` off. */
+    /** The sheet closed (after a pick too), so turn `visible` off. */
     onDismiss: () => void;
     /** The heading above the actions. Android always shows it; on iOS the system decides, and may hide it. */
     title: string;

package/lib/typescript/organisms/alert/alert.types.d.ts

@@ -1,18 +1,18 @@
 import type { ReactNode } from 'react';
 /**
  * A modal alert with a confirm button and Cancel: SwiftUI's alert on iOS, Material's `AlertDialog` on Android. A native
- * atom — it renders inside `<Screen>` or `<Island>`.
+ * atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type AlertProps = {
     /** The confirm button's label. `OK` by default. */
     confirmLabel?: string;
-    /** Marks the confirm button destructive — the system's destructive role on iOS, the destructive colour on Android. */
+    /** Marks the confirm button destructive: the system's destructive role on iOS, the destructive colour on Android. */
     destructive?: boolean;
     /** The body text, under the title. */
     message?: string;
     /** The confirm button was pressed. `onDismiss` follows, as it does for every way the alert closes. */
     onConfirm?: () => void;
-    /** The alert closed — either button, or on Android a tap outside or back — so turn `visible` off. */
+    /** The alert closed (either button, or on Android a tap outside or back), so turn `visible` off. */
     onDismiss: () => void;
     /** The alert's heading. */
     title: string;

package/lib/typescript/organisms/context-menu/context-menu.types.d.ts

@@ -2,7 +2,7 @@ import type { ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { ReactNode } from 'react';
 import type { MenuAction } from '../menu';
 /**
- * A context menu on a React Native subtree — a card in a list, say — opened by a long press. iOS: a
+ * A context menu on a React Native subtree (a card in a list, say), opened by a long press. iOS: a
  * `UIContextMenuInteraction`, with an optional React Native `preview` lifted while the menu is open and a callback for
  * a tap on it. Android, where Material has no lifted preview: a ripple and the long-press haptic, then a Material
  * dropdown where the finger is, with the trigger highlighted while it is open. The trigger is ordinary React Native layout, so it
@@ -13,33 +13,33 @@ export type ContextMenuProps = ResponsiveViewSx & {
     actions: MenuAction[];
     /** The trigger, laid out as usual. */
     children: ReactNode;
-    /** iOS: the user tapped the lifted preview, committing to it — open the detail the card stands for. */
+    /** iOS: the user tapped the lifted preview, committing to it. Open the detail the card stands for. */
     onPreviewPress?: () => void;
     /**
-     * iOS: lifted in place of the trigger while the menu is open — a larger version of the card, say. A snapshot of the
+     * iOS: lifted in place of the trigger while the menu is open (a larger version of the card, say). A snapshot of the
      * trigger when unset. Mounted only once a finger has rested on the trigger, so a list of cards does not pay for
      * every preview up front.
      */
     preview?: ReactNode;
     /**
      * iOS: how the preview leaves once tapped, before `onPreviewPress`. `zoom`: its photo grows straight into the pushed
-     * screen, the way the App Store expands a preview — needs a `ZoomTransition.Source` (`@hzblj/kara-ui/router`) in the
-     * trigger, a `preview` and iOS 18, and shrinks back like `dismiss` otherwise. `pop`: UIKit's default, the preview
+     * screen, the way the App Store expands a preview. It needs a `ZoomTransition.Source` (`@hzblj/kara-ui/router`) in
+     * the trigger, a `preview` and iOS 18, and shrinks back like `dismiss` otherwise. `pop`: UIKit's default, the preview
      * flies out. `dismiss`: it shrinks back onto the trigger first. Default: `zoom` when the trigger holds a
      * `ZoomTransition.Source`, `pop` otherwise.
      */
     previewTransition?: 'dismiss' | 'pop' | 'zoom';
-    /** Test identifier — on the native view around the trigger on iOS, on the trigger's `Pressable` on Android. */
+    /** Test identifier: on the native view around the trigger on iOS, on the trigger's `Pressable` on Android. */
     testID?: string;
 };
-/** A region of a `ContextMenu`'s trigger that keeps its own long press — see `ContextMenu.Exclusion`. */
+/** A region of a `ContextMenu`'s trigger that keeps its own long press (see `ContextMenu.Exclusion`). */
 export type ContextMenuExclusionProps = {
-    /** The region — a button inside the card, say. */
+    /** The region: a button inside the card, say. */
     children: ReactNode;
 };
 export type ContextMenuComponent = ((props: ContextMenuProps) => ReactNode) & {
     /**
-     * A region of the trigger that must not open the menu — a button inside the card. On iOS the interaction covers the
+     * A region of the trigger that must not open the menu: a button inside the card. On iOS the interaction covers the
      * whole trigger, so a long press on that button would otherwise open the card's menu.
      */
     Exclusion: (props: ContextMenuExclusionProps) => ReactNode;

package/lib/typescript/organisms/fab-menu/fab-menu.types.d.ts

@@ -2,16 +2,16 @@ import type { ReactNode } from 'react';
 import type { IconName } from '../../atoms/icon';
 import type { MenuAction } from '../menu';
 /**
- * A floating action button that unfolds into its actions. Android: Material 3 Expressive's `FloatingActionButtonMenu`
- * — the button turns into a close and the actions rise above it as labelled pills. iOS: the same button as the label
- * of a SwiftUI `Menu`. A native atom — it renders inside `<Screen>` or `<Island>`.
+ * A floating action button that unfolds into its actions. Android: Material 3 Expressive's `FloatingActionButtonMenu`,
+ * where the button turns into a close and the actions rise above it as labelled pills. iOS: the same button as the
+ * label of a SwiftUI `Menu`. A native atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type FabMenuProps = {
     /** The actions the button unfolds into. */
     actions: MenuAction[];
-    /** The closed button's icon — one of the app's. A plus by default. */
+    /** The closed button's icon, one of the app's. A plus by default. */
     icon?: IconName;
-    /** Test identifier, forwarded to the SwiftUI `Menu`. iOS only — Android ignores it. */
+    /** Test identifier, forwarded to the SwiftUI `Menu`. iOS only; Android ignores it. */
     testID?: string;
 };
 export type FabMenuComponent = (props: FabMenuProps) => ReactNode;

package/lib/typescript/organisms/form/form.types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 /**
- * A settings form — SwiftUI `Form` with its grouped sections, Material cards on Android. On iOS it scrolls like a
+ * A settings form: SwiftUI `Form` with its grouped sections, Material cards on Android. On iOS it scrolls like a
  * `List`, so it needs a height from outside: a `Screen`, or an `Island` with `matchContents={false}` and a height. In
  * an island that sizes itself to its content it has no height and shows nothing.
  */

package/lib/typescript/organisms/menu/menu.types.d.ts

@@ -3,7 +3,7 @@ import type { IconName } from '../../atoms/icon';
 /** One action of a `Menu`, an `ActionSheet`, a `ContextMenu` or a `FabMenu`. */
 export type MenuAction = {
     /**
-     * Draws the action in the destructive colour — the system's destructive role on iOS. `FabMenu` ignores it on
+     * Draws the action in the destructive colour (the system's destructive role on iOS). `FabMenu` ignores it on
      * Android.
      */
     destructive?: boolean;
@@ -19,7 +19,7 @@ export type MenuAction = {
 };
 /**
  * A text button that opens a list of actions: a SwiftUI `Menu` on iOS, a Material dropdown anchored to it on Android.
- * A native atom — it renders inside `<Screen>` or `<Island>`.
+ * A native atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type MenuProps = {
     /** The menu's actions, top to bottom. */

package/lib/typescript/organisms/sheet/sheet.types.d.ts

@@ -7,12 +7,12 @@ import type { NavigationBarItem, NavigationBarSearch } from '../../molecules/nav
 export type SheetDetent = 'auto' | number;
 /**
  * `center` is iOS's own, `leading` Material's. `large` puts the title above the content in a large face, and once
- * that scrolls under the bar the bar's own title fades in — centred on iOS, leading on Android.
+ * that scrolls under the bar the bar's own title fades in (centred on iOS, leading on Android).
  */
 export type SheetTitleStyle = 'center' | 'large' | 'leading';
 /**
  * The sheet's header: a `NavigationBar` with the title and items, and anything else that should stay put above the
- * content (`children` — a segmented control, a search hint). On iOS 26 a scrollable sheet's content scrolls under it
+ * content (`children`: a segmented control, a search hint). On iOS 26 a scrollable sheet's content scrolls under it
  * with the system's scroll edge effect; elsewhere it sits above the content.
  */
 export type SheetHeaderProps = {
@@ -24,24 +24,24 @@ export type SheetHeaderProps = {
     leadingItems?: NavigationBarItem[];
     /** A search field in place of the title (iOS). */
     search?: NavigationBarSearch;
-    /** The title — in the bar, or above the content with a `large` `titleStyle`. */
+    /** The title: in the bar, or above the content with a `large` `titleStyle`. */
     title?: string;
     /** `center` by default. */
     titleStyle?: SheetTitleStyle;
-    /** In screen order, toward the trailing edge — the close item, by convention. */
+    /** In screen order, toward the trailing edge: the close item, by convention. */
     trailingItems?: NavigationBarItem[];
 };
 /** Imperative control of a `Sheet`, through its `ref`. */
 export type SheetRef = {
     /** Dismisses it without calling `onDismiss`, which reports the user's dismissals only. */
     dismiss: () => Promise<void>;
-    /** Presents at a detent — the first by default. */
+    /** Presents at a detent, the first by default. */
     present: (detentIndex?: number) => Promise<void>;
     /** Moves to another detent. */
     resize: (detentIndex: number) => Promise<void>;
 };
 /**
- * A native sheet — `UISheetPresentationController` on iOS, Material's bottom sheet on Android — with an optional
+ * A native sheet (`UISheetPresentationController` on iOS, Material's bottom sheet on Android) with an optional
  * native header (`<Sheet.Header>` as a direct child). The React Native tier: it needs no host, and must not sit inside
  * one; native atoms in its content go in an `Island`.
  */
@@ -50,7 +50,7 @@ export type SheetProps = {
     bg?: ColorToken;
     /** The content. A `<Sheet.Header>` among the direct children becomes the native header instead. */
     children: ReactNode;
-    /** Where the sheet can rest, smallest first. `['auto']` — fit the content — by default. */
+    /** Where the sheet can rest, smallest first. `['auto']` (fit the content) by default. */
     detents?: SheetDetent[];
     /** Dims what is behind. On by default. */
     dimmed?: boolean;
@@ -62,9 +62,9 @@ export type SheetProps = {
     footer?: ReactElement;
     /** The drag handle. On by default. */
     grabber?: boolean;
-    /** The user dismissed it — `visible` going false does not call this. */
+    /** The user dismissed it; `visible` going false does not call this. */
     onDismiss: () => void;
-    /** The sheet moved to another detent — its index in `detents`. */
+    /** The sheet moved to another detent: its index in `detents`. */
     onDetentChange?: (detentIndex: number) => void;
     /** The sheet finished presenting. */
     onPresent?: () => void;
@@ -72,7 +72,7 @@ export type SheetProps = {
     ref?: Ref<SheetRef>;
     /**
      * The content is a scroll view (`<Sheet.ScrollView>`) the sheet drives: dragging past its top resizes the sheet,
-     * and a header scrolls with the iOS 26 edge effect. Off by default — set it with a scrolling body.
+     * and a header scrolls with the iOS 26 edge effect. Off by default; set it with a scrolling body.
      */
     scrollable?: boolean;
     /** Test identifier, forwarded to the native sheet. */
@@ -85,7 +85,7 @@ export type SheetScrollHandler = (event: NativeSyntheticEvent<NativeScrollEvent>
 export type SheetScrollContextValue = {
     /** Render it first in the content. `null` unless the header's `titleStyle` is `large`. */
     largeTitle: ReactNode;
-    /** Forward the scroll view's scroll events to it — it tracks the large title. Unset when there is none. */
+    /** Forward the scroll view's scroll events to it; it tracks the large title. Unset when there is none. */
     onScroll?: SheetScrollHandler;
     /** The room an overlaid header takes, to add to the content's top padding. `0` where the header sits above it. */
     topInset: number;
@@ -97,7 +97,7 @@ export type SheetScrollContextValue = {
 export type SheetScrollViewProps = Pick<ScrollViewProps, 'keyboardShouldPersistTaps'> & {
     /** The scrolling content, after the large title if there is one. */
     children: ReactNode;
-    /** Styles the scrolling content — padding and gap belong here, as with `RnScrollView`. */
+    /** Styles the scrolling content: padding and gap belong here, as with `RnScrollView`. */
     content?: ResponsiveViewSx;
     /** Called on every scroll event, after the sheet's own listener. */
     onScroll?: SheetScrollHandler;

package/lib/typescript/organisms/snackbar/snackbar.types.d.ts

@@ -8,7 +8,7 @@ export type SnackbarProps = {
     actionLabel?: string;
     /** The message. */
     message: string;
-    /** The action was pressed. The snackbar stays up — turn `visible` off to hide it. */
+    /** The action was pressed. The snackbar stays up; turn `visible` off to hide it. */
     onAction?: () => void;
     /** Shows the snackbar while true, fading it in and out. It sets no timer of its own. */
     visible: boolean;

package/lib/typescript/organisms/swipe-actions/swipe-actions.types.d.ts

@@ -5,25 +5,25 @@ import type { IconName } from '../../atoms/icon';
 export type SwipeAction = {
     /** Fills the button with `fill.destructive.primary` unless `tint` says otherwise. */
     destructive?: boolean;
-    /** One of the app's icons, on the button — a round one on iOS 26, as in Mail, a filled stadium on Android. */
+    /** One of the app's icons, on the button: a round one on iOS 26, as in Mail, a filled stadium on Android. */
     icon: IconName;
     /**
-     * The action's name, written under the button — before iOS 26 a row of the usual height shows the icon alone and
+     * The action's name, written under the button; before iOS 26 a row of the usual height shows the icon alone and
      * keeps the label for VoiceOver. Actions are keyed by it, so keep labels unique within one row.
      */
     label: string;
     /** Called when the button is pressed. The row closes by itself. */
     onPress: () => void;
     /**
-     * The button's fill — `fill.destructive.primary` for a destructive action, `fill.accent.primary` otherwise. The icon
+     * The button's fill: `fill.destructive.primary` for a destructive action, `fill.accent.primary` otherwise. The icon
      * on it is white, so pick a fill that holds white in both appearances.
      */
     tint?: ColorToken;
 };
 /**
- * A list row with buttons behind it, uncovered by a swipe — SwiftUI's `swipeActions` on iOS, and on Android, where
+ * A list row with buttons behind it, uncovered by a swipe. SwiftUI's `swipeActions` on iOS, and on Android, where
  * Compose has none, kara's own: the row slides on an anchored drag and the buttons show in the strip it leaves. One
- * row is open at a time on both; a tap on an open row closes it. A native organism — it belongs inside a `List`.
+ * row is open at a time on both; a tap on an open row closes it. A native organism: it belongs inside a `List`.
  */
 export type SwipeActionsProps = {
     /**

package/lib/typescript/templates/screen/screen.types.d.ts

@@ -1,7 +1,7 @@
 import type { Sx } from '@hzblj/kara-sx';
 import type { ReactNode } from 'react';
 /**
- * The full-bleed native host a screen starts with — a SwiftUI or Compose `Host` filling its parent, so native atoms
+ * The full-bleed native host a screen starts with: a SwiftUI or Compose `Host` filling its parent, so native atoms
  * render anywhere inside it. The background runs to the edges; the content keeps clear of the status bar where the
  * screen covers it (no navigation bar above), on Android as SwiftUI's safe area does on iOS.
  */
@@ -12,7 +12,7 @@ export type ScreenProps = {
     children?: ReactNode;
     /** Keeps the content where it is when the keyboard opens, instead of avoiding it. Android reads it once, on mount. */
     ignoreKeyboardInset?: boolean;
-    /** Test identifier — on the host view on iOS, on the view around it on Android. */
+    /** Test identifier, on the host view on iOS and on the view around it on Android. */
     testID?: string;
 };
 export type ScreenComponent = (props: ScreenProps) => ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -59,9 +59,9 @@
     ]
   },
   "dependencies": {
-    "@hzblj/kara-native": "^0.9.0",
-    "@hzblj/kara-sx": "^0.9.0",
-    "@hzblj/kara-theme": "^0.9.0",
+    "@hzblj/kara-native": "^0.10.0",
+    "@hzblj/kara-sx": "^0.10.0",
+    "@hzblj/kara-theme": "^0.10.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

package/src/atoms/activity-indicator/activity-indicator.types.ts

@@ -4,7 +4,7 @@ import type {ReactNode} from 'react'
 export type ActivityIndicatorSize = 'large' | 'small'
 
 /**
- * That something is loading, for as long as it takes — UIKit's spinner on iOS, Material 3's expressive
+ * That something is loading, for as long as it takes: UIKit's spinner on iOS, Material 3's expressive
  * `LoadingIndicator` on Android, its shapes morphing as it turns. A React Native view on iOS and a host of its own on
  * Android, so it renders anywhere. For how far along something is, use `Progress`.
  */

package/src/atoms/avatar/avatar.types.ts

@@ -3,11 +3,11 @@ import type {ImageSourcePropType} from 'react-native'
 
 export type AvatarSize = 'lg' | 'md' | 'sm'
 
-/** A round avatar: the image in `source`, or `initials` without one. The React Native tier — it needs no host. */
+/** A round avatar: the image in `source`, or `initials` without one. The React Native tier: it needs no host. */
 export type AvatarProps = {
   /** Shown in place of the image when there is no `source`. */
   initials?: string
-  /** The diameter — `sm` is `s24`, `md` `s40`, `lg` `s64`. `md` by default. */
+  /** The diameter: `sm` is `s24`, `md` `s40`, `lg` `s64`. `md` by default. */
   size?: AvatarSize
   /** The image, cropped to the circle. */
   source?: ImageSourcePropType

package/src/atoms/badge/badge.types.ts

@@ -2,7 +2,7 @@ import type {ReactNode} from 'react'
 
 export type BadgeTone = 'accent' | 'destructive' | 'neutral' | 'success'
 
-/** A small status label in a capsule — a SwiftUI `HStack` in the tone's fill on iOS, Material's `Badge` on Android. */
+/** A small status label in a capsule: a SwiftUI `HStack` in the tone's fill on iOS, Material's `Badge` on Android. */
 export type BadgeProps = {
   /** The text inside. */
   label: string