@hzblj/kara-components 0.8.0 → 0.10.0

package/lib/module/atoms/text-field/text-field.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Column","Text","ComposeText","OutlinedTextField","useNativeState","useSxModifiers","useAppTheme","useHostGuard","jsx","_jsx","jsxs","_jsxs","TextField","defaultValue","disabled","error","label","multiline","onChangeText","secure","theme","value","modifiers","wide","verticalArrangement","spacedBy","children","color","colorString","style","typography","labelMedium","enabled","isError","onValueChange","singleLine","textStyle","fontFamily","body","fontWeight","visualTransformation"],"sourceRoot":"../../../../src","sources":["atoms/text-field/text-field.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,EAAEC,IAAI,IAAIC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,QAAO,0BAA0B;AACvG,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,OAAO,MAAMC,SAA6B,GAAGA,CAAC;EAC5CC,YAAY,GAAG,EAAE;EACjBC,QAAQ,GAAG,KAAK;EAChBC,KAAK,GAAG,KAAK;EACbC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,YAAY;EACZC,MAAM,GAAG;AACK,CAAC,KAAK;EACpBZ,YAAY,CAAC,WAAW,CAAC;EACzB,MAAMa,KAAK,GAAGd,WAAW,CAAC,CAAC;EAC3B,MAAMe,KAAK,GAAGjB,cAAc,CAACS,YAAY,CAAC;EAC1C,MAAMS,SAAS,GAAGjB,cAAc,CAAC;IAACkB,IAAI,EAAE;EAAI,CAAC,CAAC;EAE9C,oBACEZ,KAAA,CAACX,MAAM;IAACwB,mBAAmB,EAAE;MAACC,QAAQ,EAAE;IAAC,CAAE;IAAAC,QAAA,GACxCV,KAAK,gBACJP,IAAA,CAACP,WAAW;MACVyB,KAAK,EAAEP,KAAK,CAACQ,WAAW,CAACb,KAAK,GAAG,qBAAqB,GAAG,mBAAmB,CAAE;MAC9Ec,KAAK,EAAET,KAAK,CAACU,UAAU,CAACC,WAAY;MAAAL,QAAA,EAEnCV;IAAK,CACK,CAAC,GACZ,IAAI,eACRP,IAAA,CAACN,iBAAiB;MAChB6B,OAAO,EAAE,CAAClB,QAAS;MACnBmB,OAAO,EAAElB,KAAM;MACfO,SAAS,EAAEA,SAAU;MACrBY,aAAa,EAAEhB,YAAa;MAC5BiB,UAAU,EAAE,CAAClB,SAAU;MACvBmB,SAAS,EAAE;QACTT,KAAK,EAAEP,KAAK,CAACQ,WAAW,CAAC,iBAAiB,CAAC;QAC3CS,UAAU,EAAEjB,KAAK,CAACU,UAAU,CAACQ,IAAI,CAACD,UAAU;QAC5CE,UAAU,EAAEnB,KAAK,CAACU,UAAU,CAACQ,IAAI,CAACC;MACpC,CAAE;MACFlB,KAAK,EAAEA,KAAM;MACbmB,oBAAoB,EAAErB,MAAM,GAAG,UAAU,GAAG;IAAO,CACpD,CAAC;EAAA,CACI,CAAC;AAEb,CAAC","ignoreList":[]}
+{"version":3,"names":["Column","Text","ComposeText","OutlinedTextField","useNativeState","useSxModifiers","useAppTheme","Glyph","useHostGuard","jsx","_jsx","jsxs","_jsxs","TextField","defaultValue","disabled","error","label","multiline","onChangeText","secure","theme","value","modifiers","wide","invalid","Boolean","message","undefined","verticalArrangement","spacedBy","children","color","colorString","style","typography","labelMedium","enabled","isError","onValueChange","singleLine","textStyle","fontFamily","body","fontWeight","visualTransformation","TrailingIcon","name","SupportingText","footnote"],"sourceRoot":"../../../../src","sources":["atoms/text-field/text-field.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,EAAEC,IAAI,IAAIC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,QAAO,0BAA0B;AACvG,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,KAAK,QAAO,sBAAa;AACjC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,OAAO,MAAMC,SAA6B,GAAGA,CAAC;EAC5CC,YAAY,GAAG,EAAE;EACjBC,QAAQ,GAAG,KAAK;EAChBC,KAAK,GAAG,KAAK;EACbC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,YAAY;EACZC,MAAM,GAAG;AACK,CAAC,KAAK;EACpBZ,YAAY,CAAC,WAAW,CAAC;EACzB,MAAMa,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,KAAK,GAAGlB,cAAc,CAACU,YAAY,CAAC;EAC1C,MAAMS,SAAS,GAAGlB,cAAc,CAAC;IAACmB,IAAI,EAAE;EAAI,CAAC,CAAC;EAC9C,MAAMC,OAAO,GAAGC,OAAO,CAACV,KAAK,CAAC;EAC9B,MAAMW,OAAO,GAAG,OAAOX,KAAK,KAAK,QAAQ,IAAIA,KAAK,GAAGA,KAAK,GAAGY,SAAS;EAEtE,oBACEhB,KAAA,CAACZ,MAAM;IAAC6B,mBAAmB,EAAE;MAACC,QAAQ,EAAE;IAAC,CAAE;IAAAC,QAAA,GACxCd,KAAK,gBACJP,IAAA,CAACR,WAAW;MACV8B,KAAK,EAAEX,KAAK,CAACY,WAAW,CAACR,OAAO,GAAG,qBAAqB,GAAG,mBAAmB,CAAE;MAChFS,KAAK,EAAEb,KAAK,CAACc,UAAU,CAACC,WAAY;MAAAL,QAAA,EAEnCd;IAAK,CACK,CAAC,GACZ,IAAI,eACRL,KAAA,CAACT,iBAAiB;MAChBkC,OAAO,EAAE,CAACtB,QAAS;MACnBuB,OAAO,EAAEb,OAAQ;MACjBF,SAAS,EAAEA,SAAU;MACrBgB,aAAa,EAAEpB,YAAa;MAC5BqB,UAAU,EAAE,CAACtB,SAAU;MACvBuB,SAAS,EAAE;QACTT,KAAK,EAAEX,KAAK,CAACY,WAAW,CAAC,iBAAiB,CAAC;QAC3CS,UAAU,EAAErB,KAAK,CAACc,UAAU,CAACQ,IAAI,CAACD,UAAU;QAC5CE,UAAU,EAAEvB,KAAK,CAACc,UAAU,CAACQ,IAAI,CAACC;MACpC,CAAE;MACFtB,KAAK,EAAEA,KAAM;MACbuB,oBAAoB,EAAEzB,MAAM,GAAG,UAAU,GAAG,MAAO;MAAAW,QAAA,GAElDN,OAAO,gBACNf,IAAA,CAACP,iBAAiB,CAAC2C,YAAY;QAAAf,QAAA,eAC7BrB,IAAA,CAACH,KAAK;UAACyB,KAAK,EAAC,qBAAqB;UAACe,IAAI,EAAC;QAAO,CAAE;MAAC,CACpB,CAAC,GAC/B,IAAI,EACPpB,OAAO,gBACNjB,IAAA,CAACP,iBAAiB,CAAC6C,cAAc;QAAAjB,QAAA,eAC/BrB,IAAA,CAACR,WAAW;UAAC8B,KAAK,EAAEX,KAAK,CAACY,WAAW,CAAC,qBAAqB,CAAE;UAACC,KAAK,EAAEb,KAAK,CAACc,UAAU,CAACc,QAAS;UAAAlB,QAAA,EAC5FJ;QAAO,CACG;MAAC,CACkB,CAAC,GACjC,IAAI;IAAA,CACS,CAAC;EAAA,CACd,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/atoms/text-field/text-field.ios.js

@@ -48,7 +48,8 @@ export const TextField = ({
 }) => {
   useHostGuard('TextField');
   const text = useNativeState(defaultValue);
-  const tone = TONE[toneOf(disabled, error)];
+  const tone = TONE[toneOf(disabled, Boolean(error))];
+  const message = tone === TONE.error && typeof error === 'string' && error ? error : undefined;
   const sxModifiers = useSxModifiers({
     bg: tone.bg,
     borderColor: tone.border,
@@ -83,7 +84,11 @@ export const TextField = ({
       onTextChange: onChangeText,
       testID: testID,
       text: text
-    })]
+    }), message ? /*#__PURE__*/_jsx(Text, {
+      color: "content.destructive",
+      variant: "footnote",
+      children: message
+    }) : null]
   });
 };
 //# sourceMappingURL=text-field.ios.js.map

package/lib/module/atoms/text-field/text-field.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["SecureField","TextField","SwiftUITextField","useNativeState","VStack","disabled","disabledModifier","textFieldStyle","useSxModifiers","spacing","useMemo","useHostGuard","Text","jsx","_jsx","jsxs","_jsxs","TONE","default","bg","border","label","error","toneOf","defaultValue","multiline","onChangeText","secure","testID","text","tone","sxModifiers","borderColor","borderRadius","borderWidth","px","py","wide","modifiers","list","push","alignment","s4","children","color","variant","onTextChange","axis"],"sourceRoot":"../../../../src","sources":["atoms/text-field/text-field.ios.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["SecureField","TextField","SwiftUITextField","useNativeState","VStack","disabled","disabledModifier","textFieldStyle","useSxModifiers","spacing","useMemo","useHostGuard","Text","jsx","_jsx","jsxs","_jsxs","TONE","default","bg","border","label","error","toneOf","defaultValue","multiline","onChangeText","secure","testID","text","tone","Boolean","message","undefined","sxModifiers","borderColor","borderRadius","borderWidth","px","py","wide","modifiers","list","push","alignment","s4","children","color","variant","onTextChange","axis"],"sourceRoot":"../../../../src","sources":["atoms/text-field/text-field.ios.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/atoms/activity-indicator/activity-indicator.types.d.ts

@@ -2,7 +2,7 @@ import type { ColorToken } from '@hzblj/kara-theme';
 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/lib/typescript/atoms/avatar/avatar.types.d.ts

@@ -1,11 +1,11 @@
 import type { ReactNode } from 'react';
 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/lib/typescript/atoms/badge/badge.types.d.ts

@@ -1,6 +1,6 @@
 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;

package/lib/typescript/atoms/blur-view/blur-view.types.d.ts

@@ -3,16 +3,16 @@ import type { ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { ReactNode } from 'react';
 export type { BlurMaterial, BlurVibrancy } from '@hzblj/kara-native/swift-ui';
 /**
- * One of the system's materials behind React Native content — what sheets, bars, menus and HUDs are made of, in
+ * One of the system's materials (what sheets, bars, menus and HUDs are made of) behind React Native content, in
  * SwiftUI's five thicknesses. iOS: UIKit's `system*Material` blur, with optional vibrancy for the content. Android:
- * what lies behind, blurred and saturated (Android 12+), under a Material tonal surface as thick as the material —
- * `surface` at `ultraThin` up to `surfaceContainerHighest` at `ultraThick`; below Android 12 the surface alone. The
+ * what lies behind, blurred and saturated (Android 12+), under a Material tonal surface as thick as the material
+ * (`surface` at `ultraThin` up to `surfaceContainerHighest` at `ultraThick`); below Android 12 the surface alone. The
  * React Native tier: it needs no host, so it suits a list cell. Shape it with `borderRadius`; it clips its children.
  */
 export type BlurViewProps = ResponsiveViewSx & {
     /**
-     * Pins the material to light or dark whatever the app's appearance — a dark HUD over a light screen. Unset, it follows
-     * the app theme. Android draws the opposite appearance with Material's inverse surface.
+     * Pins the material to light or dark whatever the app's appearance (a dark HUD over a light screen). Unset, it
+     * follows the app theme. Android draws the opposite appearance with Material's inverse surface.
      */
     appearance?: 'dark' | 'light';
     /** React Native content, over the material. */
@@ -22,7 +22,7 @@ export type BlurViewProps = ResponsiveViewSx & {
     /** Test identifier, forwarded to the view. */
     testID?: string;
     /**
-     * iOS: draws the children vibrant at this level, the way iOS draws its own labels and fills on a material — their
+     * iOS: draws the children vibrant at this level, the way iOS draws its own labels and fills on a material. Their
      * colour becomes the material's vibrant one and their alpha the mask. Android has no vibrancy: the children keep
      * their colours there.
      */

package/lib/typescript/atoms/button/button.types.d.ts

@@ -2,23 +2,23 @@ import type { ColorToken } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 export type ButtonVariant = 'accent' | 'destructive' | 'glass' | 'secondary';
 /**
- * SwiftUI `ButtonStyle`. iOS only — Compose has no equivalent, so Android ignores it and keeps
+ * SwiftUI `ButtonStyle`. iOS only: Compose has no equivalent, so Android ignores it and keeps
  * rendering the variant's tokens.
  */
 export type ButtonStyleName = 'automatic' | 'bordered' | 'borderedProminent' | 'borderless' | 'glass' | 'glassProminent' | 'plain';
 /**
- * SwiftUI `ControlSize`. iOS only, and it has no `automatic` member — leave it unset to inherit
+ * SwiftUI `ControlSize`. iOS only, and it has no `automatic` member: leave it unset to inherit
  * whatever the surrounding SwiftUI environment provides.
  */
 export type ButtonControlSize = 'extraLarge' | 'large' | 'mini' | 'regular' | 'small';
-/** A text button — SwiftUI `Button` on iOS, Material's filled button (outlined for `glass`) on Android. */
+/** A text button: SwiftUI `Button` on iOS, Material's filled button (outlined for `glass`) on Android. */
 export type ButtonProps = {
     /**
-     * Replaces the style the variant picks — `borderedProminent` for `accent` and `destructive`, `bordered` for
-     * `secondary`, `glass` for `glass`. iOS only — Android ignores it.
+     * Replaces the style the variant picks: `borderedProminent` for `accent` and `destructive`, `bordered` for
+     * `secondary`, `glass` for `glass`. iOS only. Android ignores it.
      */
     buttonStyle?: ButtonStyleName;
-    /** SwiftUI's control size. `large` by default. iOS only — Android ignores it. */
+    /** SwiftUI's control size. `large` by default. iOS only. Android ignores it. */
     controlSize?: ButtonControlSize;
     /** Draws the button in its disabled colours and stops it responding to presses. */
     disabled?: boolean;
@@ -31,7 +31,7 @@ export type ButtonProps = {
     /**
      * Overrides the variant's own tint. A prominent style takes it as the fill and picks a contrasting
      * label. `glass` has to reach the material through `glassEffect` instead, so tinting one costs it
-     * the stock `.glass` style — see the iOS implementation.
+     * the stock `.glass` style (see the iOS implementation).
      */
     tint?: ColorToken;
     /** The look. `accent` by default. Material has no glass, so on Android `glass` is an outlined button. */

package/lib/typescript/atoms/card/card.types.d.ts

@@ -1,7 +1,7 @@
 import type { ResponsiveSx } from '@hzblj/kara-sx';
 import type { ReactNode } from 'react';
 /**
- * A raised container — SwiftUI `VStack` / Compose `Column` on `surface.primary`, with a large radius, `s16` padding and
+ * A raised container: SwiftUI `VStack` / Compose `Column` on `surface.primary`, with a large radius, `s16` padding and
  * the `card` shadow. Any `sx` prop overrides its default.
  */
 export type CardProps = ResponsiveSx & {

package/lib/typescript/atoms/checkbox/checkbox.types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-/** Material's `Checkbox` on Android. iOS has none, so there it is a SwiftUI `Toggle` — the same switch as `Switch`. */
+/** Material's `Checkbox` on Android. iOS has none, so there it is a SwiftUI `Toggle`, the same switch as `Switch`. */
 export type CheckboxProps = {
     /** Dims the control and ignores taps. */
     disabled?: boolean;
@@ -7,7 +7,7 @@ export type CheckboxProps = {
     label?: string;
     /** Called with the new value when the user toggles it. */
     onValueChange?: (value: boolean) => void;
-    /** Whether it is checked. Controlled — update it from `onValueChange`. */
+    /** Whether it is checked. Controlled: update it from `onValueChange`. */
     value: boolean;
 };
 export type CheckboxComponent = (props: CheckboxProps) => ReactNode;

package/lib/typescript/atoms/chip/chip.types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-/** A filter pill on a `Pressable`, not a native control — the React Native tier, so it needs no host. */
+/** A filter pill on a `Pressable`, not a native control. It belongs to the React Native tier, so it needs no host. */
 export type ChipProps = {
     /** The text in the pill. */
     label: string;

package/lib/typescript/atoms/color-picker/color-picker.types.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react';
 /**
- * The system colour picker. iOS only — Compose ships no equivalent, so on Android this
- * renders nothing and says so in dev. Branch on `Platform.OS` if the screen needs a fallback.
+ * A row with a label and a colour well that opens a picker: SwiftUI's `ColorPicker` on iOS. Compose ships none, so on
+ * Android it is kara's own, in the same shape: a well with a rainbow ring, and a sheet with a grid of swatches, a
+ * spectrum and RGB sliders.
  */
 export type ColorPickerProps = {
-    /** Text beside the colour well. */
+    /** Text beside the colour well, and the Android sheet's title. */
     label?: string;
     /** Called with the colour the user picks. */
     onValueChange?: (color: string) => void;

package/lib/typescript/atoms/date-picker/date-picker.types.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 export type DatePickerMode = 'date' | 'datetime' | 'time';
 /**
- * A date or time picker — SwiftUI's compact `DatePicker` on iOS, a field that opens Material's picker dialog on a tap
+ * A date or time picker: SwiftUI's compact `DatePicker` on iOS, a field that opens Material's picker dialog on a tap
  * on Android. The React Native tier: it brings its own host and sizes itself to the value, so it sits in a row beside
  * its label like a `Text`.
  */
@@ -15,11 +15,11 @@ export type DatePickerProps = {
      * `value`'s time of day.
      */
     mode?: DatePickerMode;
-    /** Called with the new date — on iOS as it changes, on Android when the dialog is confirmed. */
+    /** Called with the new date: on iOS as it changes, on Android when the dialog is confirmed. */
     onValueChange?: (date: Date) => void;
-    /** Test identifier — on the native picker on iOS, on the tappable field on Android. */
+    /** Test identifier, on the native picker on iOS and on the tappable field on Android. */
     testID?: string;
-    /** The selected date. Controlled — update it from `onValueChange`. */
+    /** The selected date. Controlled: update it from `onValueChange`. */
     value: Date;
 };
 export type DatePickerComponent = (props: DatePickerProps) => ReactNode;

package/lib/typescript/atoms/divider/divider.types.d.ts

@@ -1,10 +1,10 @@
 import type { ColorToken } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
-/** A horizontal hairline — SwiftUI `Divider` / Compose `HorizontalDivider`. */
+/** A horizontal hairline: SwiftUI `Divider` / Compose `HorizontalDivider`. */
 export type DividerProps = {
     /** The line's colour. `border.tertiary` by default. */
     color?: ColorToken;
-    /** Test identifier, forwarded to the native view on iOS — Android ignores it. */
+    /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
     testID?: string;
 };
 export type DividerComponent = (props: DividerProps) => ReactNode;

package/lib/typescript/atoms/fab/fab.types.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { IconName } from '../icon';
 /**
- * A floating action button — Material's `FloatingActionButton` on Android, a 56pt accent circle (a plain SwiftUI
+ * A floating action button: Material's `FloatingActionButton` on Android, a 56pt accent circle (a plain SwiftUI
  * `Button`) on iOS. It renders inline; pinning it to a corner is up to the screen.
  */
 export type FabProps = {
@@ -9,7 +9,7 @@ export type FabProps = {
     name: IconName;
     /** Called when the button is pressed. */
     onPress?: () => void;
-    /** Test identifier, forwarded to the native view on iOS — Android ignores it. */
+    /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
     testID?: string;
 };
 export type FabComponent = (props: FabProps) => ReactNode;

package/lib/typescript/atoms/glass-view/glass-view.types.d.ts

@@ -2,13 +2,13 @@ import type { ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { ColorToken } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 /**
- * Glass around a React Native subtree, shaped as a capsule — the React Native tier, so it needs no host. iOS 26:
- * Liquid Glass. Android: frosted glass — what lies behind, blurred on Android 12+, under a translucent tonal surface
- * (or `tint`) and a hairline. iOS before 26 has no Liquid Glass and draws a capsule of `tint` instead, or of the glass
- * buttons' translucent fill (`btn.bg.glass.base`) when there is none.
+ * Glass around a React Native subtree, shaped as a capsule. It belongs to the React Native tier, so it needs no host.
+ * iOS 26: Liquid Glass. Android: frosted glass, made of what lies behind, blurred on Android 12+, under a translucent
+ * tonal surface (or `tint`) and a hairline. iOS before 26 has no Liquid Glass and draws a capsule of `tint` instead, or
+ * of the glass buttons' translucent fill (`btn.bg.glass.base`) when there is none.
  *
  * On Android each glass re-records what lies behind it before every frame: a few buttons cost nothing, but keep it out
- * of the cells of a long list — a plain `tint` reads as well there.
+ * of the cells of a long list. A plain `tint` reads as well there.
  */
 export type GlassViewProps = ResponsiveViewSx & {
     /** React Native views. Give them `pointerEvents="none"` when `interactive`, so the press reaches the `Pressable`. */

package/lib/typescript/atoms/h-stack/h-stack.types.d.ts

@@ -2,13 +2,13 @@ import type { ResponsiveSx } from '@hzblj/kara-sx';
 import type { SpaceSize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 export type HStackAlign = 'center' | 'end' | 'start';
-/** A horizontal stack — SwiftUI `HStack` / Compose `Row`. */
+/** A horizontal stack: SwiftUI `HStack` / Compose `Row`. */
 export type HStackProps = ResponsiveSx & {
-    /** How the children line up vertically — `start` is the top, `end` the bottom. `start` by default. */
+    /** How the children line up vertically: `start` is the top, `end` the bottom. `start` by default. */
     align?: HStackAlign;
     /** Native views, laid out from the leading edge. */
     children?: ReactNode;
-    /** Makes the stack pressable — a tap gesture on iOS, a `clickable` with Material's ripple on Android. */
+    /** Makes the stack pressable: a tap gesture on iOS, a `clickable` with Material's ripple on Android. */
     onPress?: () => void;
     /** The gap between children. Unset, SwiftUI puts its default spacing between them and Compose none. */
     spacing?: SpaceSize;

package/lib/typescript/atoms/icon/icon.types.d.ts

@@ -11,12 +11,12 @@ declare global {
 }
 type DeclaredIconName = keyof KaraIcons & string;
 /**
- * One of the app's icons. Once the plugin has written `kara-icons.d.ts` only those names type-check — an icon removed
+ * One of the app's icons. Once the plugin has written `kara-icons.d.ts` only those names type-check: an icon removed
  * from the folder fails at every call site. Before that, any string, so a project can adopt icons gradually.
  */
 export type IconName = [DeclaredIconName] extends [never] ? string : DeclaredIconName;
 /**
- * One of the app's icons, in a host — SwiftUI `Image` from the asset catalog on iOS, Material's `Icon` with the vector
+ * One of the app's icons, in a host: SwiftUI `Image` from the asset catalog on iOS, Material's `Icon` with the vector
  * drawable on Android. `RnIcon` draws the same asset outside one.
  */
 export type IconProps = {
@@ -24,11 +24,11 @@ export type IconProps = {
     accessibilityLabel?: string;
     /** The icon's tint. `content.primary` by default. */
     color?: ColorToken;
-    /** Which of the app's icons — a key of `KaraIcons`. */
+    /** Which of the app's icons, a key of `KaraIcons`. */
     name: IconName;
     /** Its width and height, a spacing token. `s24` by default. */
     size?: SpaceSize;
-    /** Test identifier, forwarded to the native view on iOS — Android ignores it. */
+    /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
     testID?: string;
 };
 export type IconComponent = (props: IconProps) => ReactNode;

package/lib/typescript/atoms/icon-button/icon-button.types.d.ts

@@ -1,14 +1,18 @@
 import type { ReactNode } from 'react';
 import type { IconName } from '../icon';
-/** A button that is just an icon — a plain SwiftUI `Button` on iOS, Material's `IconButton` on Android. */
+/**
+ * A button that is just an icon: a plain SwiftUI `Button` on iOS, Material's `IconButton` on Android. The icon sits
+ * centred in a tap target the size each platform asks for, 44pt on iOS and 48dp on Android, so a row of them spaces
+ * itself the same way on both.
+ */
 export type IconButtonProps = {
-    /** Draws the icon in `btn.content.disabled` and stops the button responding to presses. */
+    /** Dims the icon (iOS's own disabled look, `btn.content.disabled` on Android) and stops the button responding. */
     disabled?: boolean;
     /** The icon, one of the app's. */
     name: IconName;
     /** Called when the button is pressed. */
     onPress?: () => void;
-    /** Test identifier, forwarded to the native view on iOS — Android ignores it. */
+    /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
     testID?: string;
 };
 export type IconButtonComponent = (props: IconButtonProps) => ReactNode;

package/lib/typescript/atoms/island/island.types.d.ts

@@ -2,7 +2,7 @@ import type { ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 /**
- * A host for native atoms in a React Native layout — the SwiftUI / Compose `Host` an `@expo/ui` tree mounts into. It
+ * A host for native atoms in a React Native layout: the SwiftUI / Compose `Host` an `@expo/ui` tree mounts into. It
  * sits in that layout like a `Box`, and takes `Box`'s `sx` props for it: `h`, `flex`, margins.
  */
 export type IslandProps = ResponsiveViewSx & {
@@ -14,15 +14,15 @@ export type IslandProps = ResponsiveViewSx & {
      * width maps to `fixedSize(horizontal: true)`, so the native side ignores the proposed width and
      * resolves a `wide` stack's ideal width as unbounded.
      *
-     * Turn it off — and give the island an explicit height, `h` — when the subtree contains an
+     * Turn it off (and give the island an explicit height, `h`) when the subtree contains an
      * `RnView`: that host drives its SwiftUI frame from the child's Yoga-laid-out bounds while this one
      * writes its measured size back into the Yoga style, and the two together spin a layout loop that
      * hangs the main thread as soon as the views lay out on screen.
      */
     matchContents?: boolean;
-    /** A React Native style for the host view, merged over the `sx` props — for what they cannot say. */
+    /** A React Native style for the host view, merged over the `sx` props, for what they cannot say. */
     style?: StyleProp<ViewStyle>;
-    /** Test identifier, forwarded to the host view on iOS — Android ignores it. */
+    /** Test identifier, forwarded to the host view on iOS. Android ignores it. */
     testID?: string;
 };
 export type IslandComponent = (props: IslandProps) => ReactNode;

package/lib/typescript/atoms/list/list.types.d.ts

@@ -1,22 +1,22 @@
 import type { ReactNode } from 'react';
 /**
- * A scrolling list — SwiftUI `List`, Compose `LazyColumn`. It has no height of its own, so it needs one from outside:
+ * A scrolling list: SwiftUI `List`, Compose `LazyColumn`. It has no height of its own, so it needs one from outside:
  * a `Screen`, or an `Island` with `matchContents={false}` and a height. In an island that sizes itself to its content
  * Compose measures it against an infinite height and throws ("Vertically scrollable component was measured with an
  * infinity maximum height"); SwiftUI shows nothing. For a handful of rows that should not scroll, use a `VStack`.
  *
- * Rows are separated for you — SwiftUI's own separators, a `Divider` between rows on Android — so a `Divider` among
+ * Rows are separated for you (SwiftUI's own separators, a `Divider` between rows on Android), so a `Divider` among
  * the children is one too many: on iOS it becomes an empty row of its own.
  */
 export type ListProps = {
-    /** The rows — native views, one row each. */
+    /** The rows: native views, one row each. */
     children: ReactNode;
     /**
-     * Enables pull-to-refresh. Async on purpose — see `ScrollViewProps.onRefresh`: the spinner runs
+     * Enables pull-to-refresh. Async on purpose (see `ScrollViewProps.onRefresh`): the spinner runs
      * until the promise settles, so neither platform needs a `refreshing` flag kept in sync by hand.
      */
     onRefresh?: () => Promise<void>;
-    /** Test identifier, forwarded to the native view on iOS — Android ignores it. */
+    /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
     testID?: string;
 };
 export type ListComponent = (props: ListProps) => ReactNode;

package/lib/typescript/atoms/picker/picker.types.d.ts

@@ -7,7 +7,7 @@ export type PickerOption = {
     value: string;
 };
 /**
- * A single choice from a list — a SwiftUI wheel picker on iOS, Material's exposed dropdown on Android. It brings its
+ * A single choice from a list: a SwiftUI wheel picker on iOS, Material's exposed dropdown on Android. It brings its
  * own host, so it renders outside `Screen` and `Island` as well.
  */
 export type PickerProps = {

package/lib/typescript/atoms/pressable/pressable.types.d.ts

@@ -1,21 +1,37 @@
 import type { ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { OpacitySize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 import type { Haptic } from '../../haptics';
+/** How the content answers a press: it springs down, it dims, or it stays still. */
+export type PressEffect = 'none' | 'opacity' | 'scale';
 /**
- * React Native's `Pressable`, styled through `sx` like a `Box`, taking touches 8 points past its edges. The press is
- * each platform's own: iOS springs it down to 96%; Android draws Material's ripple over the content, clipped to the
- * pressable's shape — give it the `borderRadius` of what it wraps (`full` around a `GlassView`). The React Native
- * tier — it needs no host.
+ * React Native's `Pressable`, styled through `sx` like a `Box`, taking touches 8 points past its edges. Each platform
+ * presses its own way by default: iOS springs the content down to 96%, Android draws Material's ripple over it,
+ * clipped to the pressable's shape. `pressEffect` picks the same answer on both, and Android keeps its ripple on top
+ * unless `ripple` is off. Give it the `borderRadius` of what it wraps (`full` around a `GlassView`). The React Native
+ * tier: it needs no host.
  */
 export type PressableProps = ResponsiveViewSx & {
     /** The pressable content. */
     children?: ReactNode;
-    /** Ignores presses — no `onPress`, no haptic, no spring or ripple. */
+    /** Ignores presses: no `onPress`, no haptic, no press effect or ripple. */
     disabled?: boolean;
     /** Played on press. `true` is a `light` impact; a name picks the haptic, e.g. `selection` for a choice. */
     haptic?: boolean | Haptic;
     /** Called when the press is released, after the `haptic` plays. */
     onPress?: () => void;
+    /**
+     * How the content answers while it is held. `scale` springs it down to `pressedScale`, `opacity` dims it to
+     * `pressedOpacity`, `none` leaves it still. `scale` on iOS and `none` on Android by default, where the ripple is the
+     * press.
+     */
+    pressEffect?: PressEffect;
+    /** What `opacity` dims to, an opacity token. `o60` by default. */
+    pressedOpacity?: OpacitySize;
+    /** What `scale` springs down to. `0.96` by default. */
+    pressedScale?: number;
+    /** Android's ripple: Material's pressed state layer over the content, clipped to the shape. On by default. iOS has none. */
+    ripple?: boolean;
     /** Test identifier, forwarded to the view. */
     testID?: string;
 };

package/lib/typescript/atoms/progress/progress.types.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 /**
- * A progress bar or ring, tinted `fill.accent.primary` — SwiftUI `ProgressView` / Compose's
- * `LinearProgressIndicator` and `CircularProgressIndicator`.
+ * A progress bar or ring, tinted `fill.accent.primary`: SwiftUI `ProgressView` (a capacity `Gauge` for a ring with a
+ * value, which `ProgressView` cannot draw on iOS) / Compose's `LinearProgressIndicator` and `CircularProgressIndicator`.
  */
 export type ProgressProps = {
     /** A circular indicator instead of a bar. Off by default. */

package/lib/typescript/atoms/rn-flat-list/rn-flat-list.types.d.ts

@@ -2,10 +2,10 @@ import type { ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { FlatListProps as RNFlatListProps } from 'react-native';
 /**
  * Top-level `sx` styles the viewport; `content` styles the scrolling content container, so padding and
- * gap belong there — the same split as `RnScrollView`. `removeClippedSubviews` is off unless you turn it on:
+ * gap belong there (the same split as `RnScrollView`). `removeClippedSubviews` is off unless you turn it on:
  * Android's default would detach a row's host before it has measured itself, and the row would stay empty.
  */
 export type RnFlatListProps<TItem> = ResponsiveViewSx & Omit<RNFlatListProps<TItem>, 'contentContainerStyle' | 'style'> & {
-    /** Styles the scrolling content container — padding and gap belong here. */
+    /** Styles the scrolling content container; padding and gap belong here. */
     content?: ResponsiveViewSx;
 };

package/lib/typescript/atoms/rn-icon/rn-icon.types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
 import type { IconProps } from '../icon';
-/** The same contract as `Icon`, for the React Native tier — anywhere, no `Screen` or `Island` needed. */
+/** The same contract as `Icon`, for the React Native tier: anywhere, no `Screen` or `Island` needed. */
 export type RnIconProps = IconProps;
 export type RnIconComponent = (props: RnIconProps) => ReactNode;

package/lib/typescript/atoms/rn-scroll-view/rn-scroll-view.types.d.ts

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 import type { ScrollViewProps as RNScrollViewProps } from 'react-native';
 import type { ScrollViewAxis } from '../scroll-view';
 /**
- * React Native tier scroll container — the sibling of `RnView`/`RnText`. Use it when the
+ * React Native tier scroll container, the sibling of `RnView`/`RnText`. Use it when the
  * subtree is React Native and native atoms are embedded through `Island`. For a screen that
  * is native all the way down, reach for the `ScrollView` atom instead.
  *
@@ -15,7 +15,7 @@ export type RnScrollViewProps = ResponsiveViewSx & Omit<RNScrollViewProps, 'cont
     axis?: ScrollViewAxis;
     /** The scrolling content. */
     children?: ReactNode;
-    /** Styles the scrolling content container — padding and gap belong here. */
+    /** Styles the scrolling content container; padding and gap belong here. */
     content?: ResponsiveViewSx;
     /** Shows the scroll indicators. On by default. */
     showsIndicators?: boolean;

package/lib/typescript/atoms/rn-section-list/rn-section-list.types.d.ts

@@ -2,10 +2,10 @@ import type { ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { DefaultSectionT, SectionListProps as RNSectionListProps } from 'react-native';
 /**
  * Top-level `sx` styles the viewport; `content` styles the scrolling content container, so padding and
- * gap belong there — the same split as `RnScrollView` and `RnFlatList`. `removeClippedSubviews` is off unless
+ * gap belong there (the same split as `RnScrollView` and `RnFlatList`). `removeClippedSubviews` is off unless
  * you turn it on, as in `RnFlatList`: Android's default would leave rows with hosts in them empty.
  */
 export type RnSectionListProps<TItem, TSection = DefaultSectionT> = ResponsiveViewSx & Omit<RNSectionListProps<TItem, TSection>, 'contentContainerStyle' | 'style'> & {
-    /** Styles the scrolling content container — padding and gap belong here. */
+    /** Styles the scrolling content container; padding and gap belong here. */
     content?: ResponsiveViewSx;
 };

package/lib/typescript/atoms/rn-text/rn-text.types.d.ts

@@ -3,8 +3,8 @@ import type { ColorToken, TextVariant } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 import type { TextProps as RNTextProps } from 'react-native';
 /**
- * React Native's `Text` in a theme typography variant — the React Native tier, for text outside a native host. It takes
- * `Box`'s `sx` surface for its own box — margins, flex, padding, a background — all but `align`, which here aligns the
+ * React Native's `Text` in a theme typography variant: the React Native tier, for text outside a native host. It takes
+ * `Box`'s `sx` surface for its own box (margins, flex, padding, a background), all but `align`, which here aligns the
  * lines.
  */
 export type RnTextProps = Omit<RNTextProps, 'style'> & Omit<ResponsiveViewSx, 'align'> & {

package/lib/typescript/atoms/rn-view/rn-view.types.d.ts

@@ -1,11 +1,11 @@
 import type { ReactElement, ReactNode } from 'react';
-/** Carries a React Native view into a SwiftUI or Compose tree — `@expo/ui`'s `RNHostView` on both platforms. */
+/** Carries a React Native view into a SwiftUI or Compose tree: `@expo/ui`'s `RNHostView` on both platforms. */
 export type RnViewProps = {
     /**
      * A single React Native *view*. It may not contain React Native text: a bare string becomes a
      * `RawText` node, which has no component view, so mounting it across the SwiftUI host boundary
      * fails the `RCTComponentViewFactory` assertion and takes the whole app down. `@expo/ui` states
-     * the rule itself in `ListItem.ios.tsx` — "SwiftUI hosts can't render bare strings" — and wraps
+     * the rule itself in `ListItem.ios.tsx` ("SwiftUI hosts can't render bare strings") and wraps
      * every raw string in a SwiftUI `Text` before it reaches a host. Do the same: use the `Text` atom
      * inside the host, and keep `RnText` outside it.
      */
@@ -15,7 +15,7 @@ export type RnViewProps = {
      * intrinsic size and would otherwise stretch to fill the SwiftUI parent.
      */
     matchContents?: boolean;
-    /** Not forwarded on either platform — give the child its own `testID`. */
+    /** Not forwarded on either platform: give the child its own `testID`. */
     testID?: string;
 };
 export type RnViewComponent = (props: RnViewProps) => ReactNode;

package/lib/typescript/atoms/scroll-view/scroll-view.types.d.ts

@@ -3,7 +3,7 @@ import type { SpaceSize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 export type ScrollViewAxis = 'horizontal' | 'vertical';
 /**
- * The `sx` props style the scrolling *content* container, not the viewport — `p` behaves
+ * The `sx` props style the scrolling *content* container, not the viewport: `p` behaves
  * like React Native's `contentContainerStyle` padding and scrolls with the content.
  */
 export type ScrollViewProps = ResponsiveSx & {
@@ -13,13 +13,13 @@ export type ScrollViewProps = ResponsiveSx & {
     children?: ReactNode;
     /**
      * Enables pull-to-refresh. Async on purpose: the spinner runs until the promise settles, which is
-     * what SwiftUI's `refreshable` expects and what Compose's controlled indicator is driven from — so
+     * what SwiftUI's `refreshable` expects and what Compose's controlled indicator is driven from, so
      * neither platform needs a separate `refreshing` flag to be kept in sync by the caller.
      *
      * Only a vertical scroll view can be pulled; on a horizontal one both platforms ignore it.
      */
     onRefresh?: () => Promise<void>;
-    /** iOS only — Compose exposes no indicator toggle, so Android always shows the native one. */
+    /** iOS only: Compose exposes no indicator toggle, so Android always shows the native one. */
     showsIndicators?: boolean;
     /** The space between children. */
     spacing?: SpaceSize;