@hzblj/kara-components 0.10.0 → 0.11.0

package/lib/module/organisms/fab-menu/fab-menu.android.js

@@ -17,16 +17,16 @@ const FabMenuRow = ({
   const onClick = useCallback(() => onSelect(action), [action, onSelect]);
   return /*#__PURE__*/_jsxs(FloatingActionButtonMenuItem, {
     containerColor: theme.color('fill.accent.primary'),
-    contentColor: theme.color('content.on.bg'),
+    contentColor: theme.color('content.on.accent'),
     onClick: onClick,
     children: [action.icon ? /*#__PURE__*/_jsx(FloatingActionButtonMenuItem.Icon, {
       children: /*#__PURE__*/_jsx(Icon, {
-        color: "content.on.bg",
+        color: "content.on.accent",
         name: action.icon
       })
     }) : null, /*#__PURE__*/_jsx(FloatingActionButtonMenuItem.Text, {
       children: /*#__PURE__*/_jsx(ComposeText, {
-        color: theme.colorString('content.on.bg'),
+        color: theme.colorString('content.on.accent'),
         style: theme.typography.labelMedium,
         children: action.label
       })
@@ -40,6 +40,7 @@ const FabMenuRow = ({
  * unfolding rather than a second surface.
  */
 export const FabMenu = ({
+  accessibilityLabel,
   actions,
   icon
 }) => {
@@ -60,10 +61,12 @@ export const FabMenu = ({
         onCheckedChange: setExpanded,
         children: /*#__PURE__*/_jsx(ToggleFloatingActionButton.Icon, {
           children: icon ? /*#__PURE__*/_jsx(Icon, {
-            color: "content.on.bg",
+            accessibilityLabel: accessibilityLabel,
+            color: "content.on.accent",
             name: icon
           }) : /*#__PURE__*/_jsx(Glyph, {
-            color: "content.on.bg",
+            accessibilityLabel: accessibilityLabel,
+            color: "content.on.accent",
             name: "plus"
           })
         })

package/lib/module/organisms/fab-menu/fab-menu.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Text","ComposeText","FloatingActionButtonMenu","FloatingActionButtonMenuItem","ToggleFloatingActionButton","useAppTheme","useCallback","useState","Icon","Glyph","useHostGuard","jsx","_jsx","jsxs","_jsxs","FabMenuRow","action","onSelect","theme","onClick","containerColor","color","contentColor","children","icon","name","colorString","style","typography","labelMedium","label","FabMenu","actions","expanded","setExpanded","onPress","horizontalAlignment","Button","checked","onCheckedChange","map"],"sourceRoot":"../../../../src","sources":["organisms/fab-menu/fab-menu.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,IAAIC,WAAW,QAAO,0BAA0B;AAC5D,SACEC,wBAAwB,EACxBC,4BAA4B,EAC5BC,0BAA0B,QACrB,oCAAoC;AAC3C,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,QAAQ,QAAO,OAAO;AAC3C,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,KAAK,QAAO,sBAAa;AACjC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAS/C;AACA,MAAMC,UAAU,GAAGA,CAAC;EAACC,MAAM;EAAEC;AAAyB,CAAC,KAAK;EAC1D,MAAMC,KAAK,GAAGb,WAAW,CAAC,CAAC;EAC3B,MAAMc,OAAO,GAAGb,WAAW,CAAC,MAAMW,QAAQ,CAACD,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEC,QAAQ,CAAC,CAAC;EAEvE,oBACEH,KAAA,CAACX,4BAA4B;IAC3BiB,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC,qBAAqB,CAAE;IACnDC,YAAY,EAAEJ,KAAK,CAACG,KAAK,CAAC,eAAe,CAAE;IAC3CF,OAAO,EAAEA,OAAQ;IAAAI,QAAA,GAEhBP,MAAM,CAACQ,IAAI,gBACVZ,IAAA,CAACT,4BAA4B,CAACK,IAAI;MAAAe,QAAA,eAChCX,IAAA,CAACJ,IAAI;QAACa,KAAK,EAAC,eAAe;QAACI,IAAI,EAAET,MAAM,CAACQ;MAAK,CAAE;IAAC,CAChB,CAAC,GAClC,IAAI,eACRZ,IAAA,CAACT,4BAA4B,CAACH,IAAI;MAAAuB,QAAA,eAChCX,IAAA,CAACX,WAAW;QAACoB,KAAK,EAAEH,KAAK,CAACQ,WAAW,CAAC,eAAe,CAAE;QAACC,KAAK,EAAET,KAAK,CAACU,UAAU,CAACC,WAAY;QAAAN,QAAA,EACzFP,MAAM,CAACc;MAAK,CACF;IAAC,CACmB,CAAC;EAAA,CACR,CAAC;AAEnC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,OAAyB,GAAGA,CAAC;EAACC,OAAO;EAAER;AAAkB,CAAC,KAAK;EAC1Ed,YAAY,CAAC,SAAS,CAAC;EAEvB,MAAMQ,KAAK,GAAGb,WAAW,CAAC,CAAC;EAC3B,MAAM,CAAC4B,QAAQ,EAAEC,WAAW,CAAC,GAAG3B,QAAQ,CAAC,KAAK,CAAC;EAE/C,MAAMU,QAAQ,GAAGX,WAAW,CAAEU,MAAkB,IAAK;IACnDkB,WAAW,CAAC,KAAK,CAAC;IAClBlB,MAAM,CAACmB,OAAO,CAAC,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACErB,KAAA,CAACZ,wBAAwB;IAAC+B,QAAQ,EAAEA,QAAS;IAACG,mBAAmB,EAAC,KAAK;IAAAb,QAAA,gBACrEX,IAAA,CAACV,wBAAwB,CAACmC,MAAM;MAAAd,QAAA,eAC9BX,IAAA,CAACR,0BAA0B;QACzBkC,OAAO,EAAEL,QAAS;QAClBb,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC,qBAAqB,CAAE;QACnDkB,eAAe,EAAEL,WAAY;QAAAX,QAAA,eAE7BX,IAAA,CAACR,0BAA0B,CAACI,IAAI;UAAAe,QAAA,EAC7BC,IAAI,gBAAGZ,IAAA,CAACJ,IAAI;YAACa,KAAK,EAAC,eAAe;YAACI,IAAI,EAAED;UAAK,CAAE,CAAC,gBAAGZ,IAAA,CAACH,KAAK;YAACY,KAAK,EAAC,eAAe;YAACI,IAAI,EAAC;UAAM,CAAE;QAAC,CACjE;MAAC,CACR;IAAC,CACE,CAAC,EACjCO,OAAO,CAACQ,GAAG,CAACxB,MAAM,iBACjBJ,IAAA,CAACG,UAAU;MAACC,MAAM,EAAEA,MAAO;MAAoBC,QAAQ,EAAEA;IAAS,GAAjCD,MAAM,CAACc,KAA4B,CACrE,CAAC;EAAA,CACsB,CAAC;AAE/B,CAAC","ignoreList":[]}
+{"version":3,"names":["Text","ComposeText","FloatingActionButtonMenu","FloatingActionButtonMenuItem","ToggleFloatingActionButton","useAppTheme","useCallback","useState","Icon","Glyph","useHostGuard","jsx","_jsx","jsxs","_jsxs","FabMenuRow","action","onSelect","theme","onClick","containerColor","color","contentColor","children","icon","name","colorString","style","typography","labelMedium","label","FabMenu","accessibilityLabel","actions","expanded","setExpanded","onPress","horizontalAlignment","Button","checked","onCheckedChange","map"],"sourceRoot":"../../../../src","sources":["organisms/fab-menu/fab-menu.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/organisms/fab-menu/fab-menu.ios.js

@@ -10,6 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /** Matches `Fab`, so a screen can switch between the two without the button changing shape. */
 const FAB_SIZE = 56;
 export const FabMenu = ({
+  accessibilityLabel,
   actions,
   icon,
   testID
@@ -25,10 +26,12 @@ export const FabMenu = ({
       shadow: "btn.accent",
       w: FAB_SIZE,
       children: icon ? /*#__PURE__*/_jsx(Icon, {
-        color: "content.on.bg",
+        accessibilityLabel: accessibilityLabel,
+        color: "content.on.accent",
         name: icon
       }) : /*#__PURE__*/_jsx(Glyph, {
-        color: "content.on.bg",
+        accessibilityLabel: accessibilityLabel,
+        color: "content.on.accent",
         name: "plus"
       })
     }),

package/lib/module/organisms/fab-menu/fab-menu.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Button","Image","Label","Menu","iconResourceName","Icon","VStack","Glyph","useHostGuard","jsx","_jsx","FAB_SIZE","FabMenu","actions","icon","testID","label","align","bg","borderRadius","h","p","shadow","w","children","color","name","map","action","onPress","role","destructive","assetName","undefined","title"],"sourceRoot":"../../../../src","sources":["organisms/fab-menu/fab-menu.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,QAAO,mBAAmB;AAC5D,SAAQC,gBAAgB,QAAO,oBAAoB;AAEnD,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,KAAK,QAAO,sBAAa;AACjC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C;AACA,MAAMC,QAAQ,GAAG,EAAE;AAEnB,OAAO,MAAMC,OAAyB,GAAGA,CAAC;EAACC,OAAO;EAAEC,IAAI;EAAEC;AAAoB,CAAC,KAAK;EAClFP,YAAY,CAAC,SAAS,CAAC;EAEvB,oBACEE,IAAA,CAACP,IAAI;IACHa,KAAK,eACHN,IAAA,CAACJ,MAAM;MACLW,KAAK,EAAC,QAAQ;MACdC,EAAE,EAAC,qBAAqB;MACxBC,YAAY,EAAC,MAAM;MACnBC,CAAC,EAAET,QAAS;MACZU,CAAC,EAAC,KAAK;MACPC,MAAM,EAAC,YAAY;MACnBC,CAAC,EAAEZ,QAAS;MAAAa,QAAA,EAEXV,IAAI,gBAAGJ,IAAA,CAACL,IAAI;QAACoB,KAAK,EAAC,eAAe;QAACC,IAAI,EAAEZ;MAAK,CAAE,CAAC,gBAAGJ,IAAA,CAACH,KAAK;QAACkB,KAAK,EAAC,eAAe;QAACC,IAAI,EAAC;MAAM,CAAE;IAAC,CAC1F,CACT;IACDX,MAAM,EAAEA,MAAO;IAAAS,QAAA,EAEdX,OAAO,CAACc,GAAG,CAACC,MAAM,iBACjBlB,IAAA,CAACV,MAAM;MAAoB6B,OAAO,EAAED,MAAM,CAACC,OAAQ;MAACC,IAAI,EAAEF,MAAM,CAACG,WAAW,GAAG,aAAa,GAAG,SAAU;MAAAP,QAAA,eAEvGd,IAAA,CAACR,KAAK;QACJY,IAAI,EAAEc,MAAM,CAACd,IAAI,gBAAGJ,IAAA,CAACT,KAAK;UAAC+B,SAAS,EAAE5B,gBAAgB,CAACwB,MAAM,CAACd,IAAI;QAAE,CAAE,CAAC,GAAGmB,SAAU;QACpFC,KAAK,EAAEN,MAAM,CAACZ;MAAM,CACrB;IAAC,GALSY,MAAM,CAACZ,KAMZ,CACT;EAAC,CACE,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["Button","Image","Label","Menu","iconResourceName","Icon","VStack","Glyph","useHostGuard","jsx","_jsx","FAB_SIZE","FabMenu","accessibilityLabel","actions","icon","testID","label","align","bg","borderRadius","h","p","shadow","w","children","color","name","map","action","onPress","role","destructive","assetName","undefined","title"],"sourceRoot":"../../../../src","sources":["organisms/fab-menu/fab-menu.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,QAAO,mBAAmB;AAC5D,SAAQC,gBAAgB,QAAO,oBAAoB;AAEnD,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,KAAK,QAAO,sBAAa;AACjC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C;AACA,MAAMC,QAAQ,GAAG,EAAE;AAEnB,OAAO,MAAMC,OAAyB,GAAGA,CAAC;EAACC,kBAAkB;EAAEC,OAAO;EAAEC,IAAI;EAAEC;AAAoB,CAAC,KAAK;EACtGR,YAAY,CAAC,SAAS,CAAC;EAEvB,oBACEE,IAAA,CAACP,IAAI;IACHc,KAAK,eACHP,IAAA,CAACJ,MAAM;MACLY,KAAK,EAAC,QAAQ;MACdC,EAAE,EAAC,qBAAqB;MACxBC,YAAY,EAAC,MAAM;MACnBC,CAAC,EAAEV,QAAS;MACZW,CAAC,EAAC,KAAK;MACPC,MAAM,EAAC,YAAY;MACnBC,CAAC,EAAEb,QAAS;MAAAc,QAAA,EAEXV,IAAI,gBACHL,IAAA,CAACL,IAAI;QAACQ,kBAAkB,EAAEA,kBAAmB;QAACa,KAAK,EAAC,mBAAmB;QAACC,IAAI,EAAEZ;MAAK,CAAE,CAAC,gBAEtFL,IAAA,CAACH,KAAK;QAACM,kBAAkB,EAAEA,kBAAmB;QAACa,KAAK,EAAC,mBAAmB;QAACC,IAAI,EAAC;MAAM,CAAE;IACvF,CACK,CACT;IACDX,MAAM,EAAEA,MAAO;IAAAS,QAAA,EAEdX,OAAO,CAACc,GAAG,CAACC,MAAM,iBACjBnB,IAAA,CAACV,MAAM;MAAoB8B,OAAO,EAAED,MAAM,CAACC,OAAQ;MAACC,IAAI,EAAEF,MAAM,CAACG,WAAW,GAAG,aAAa,GAAG,SAAU;MAAAP,QAAA,eAEvGf,IAAA,CAACR,KAAK;QACJa,IAAI,EAAEc,MAAM,CAACd,IAAI,gBAAGL,IAAA,CAACT,KAAK;UAACgC,SAAS,EAAE7B,gBAAgB,CAACyB,MAAM,CAACd,IAAI;QAAE,CAAE,CAAC,GAAGmB,SAAU;QACpFC,KAAK,EAAEN,MAAM,CAACZ;MAAM,CACrB;IAAC,GALSY,MAAM,CAACZ,KAMZ,CACT;EAAC,CACE,CAAC;AAEX,CAAC","ignoreList":[]}

package/lib/module/organisms/snackbar/snackbar.js

@@ -1,45 +1,170 @@
 "use strict";
 
-import { FadeInDown, FadeOutDown } from 'react-native-reanimated';
-import { ABox } from "../../atoms/box/index.js";
+import { duration as durations, easing, spacing, useReducedMotion } from '@hzblj/kara-theme';
+import { useEffect, useRef } from 'react';
+import { AccessibilityInfo, Platform } from 'react-native';
+import { Easing, FadeIn, FadeInDown, FadeInUp, FadeOut, FadeOutDown, FadeOutUp, ReduceMotion, withTiming } from 'react-native-reanimated';
+import { ABox, Box } from "../../atoms/box/index.js";
 import { Pressable } from "../../atoms/pressable/index.js";
 import { RnText } from "../../atoms/rn-text/index.js";
+import { RnGlyph } from "../../glyph/index.js";
+import { timing } from "../../motion.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Material's `SnackbarDuration.Short` and `Long`. */
+const DURATIONS = {
+  long: 10_000,
+  short: 4_000
+};
+const PLATFORM_ANIMATION = Platform.OS === 'android' ? 'scale' : 'slide';
+
+/** The close glyph at the label's height: an SF Symbol fills its box, Material's icon sits inside a padded one. */
+const CLOSE_SIZE = Platform.OS === 'ios' ? 's12' : 's16';
+const SMOOTH_OUT = Easing.bezier(...easing.smoothOut);
+const GROW = timing('quick');
+
+/** Material's snackbar enter: it fades in while it grows from 80 %, in 150 ms. */
+const scaleIn = () => {
+  'worklet';
+
+  return {
+    animations: {
+      opacity: withTiming(1, GROW),
+      transform: [{
+        scale: withTiming(1, GROW)
+      }]
+    },
+    initialValues: {
+      opacity: 0,
+      transform: [{
+        scale: 0.8
+      }]
+    }
+  };
+};
+
+/**
+ * The presets in and out: arriving in `fast`, leaving in `quick`, both on `smoothOut`. `ReduceMotion.Never`, because
+ * `useReducedMotion` has already picked the fade by then, and a fade is what should still run.
+ */
+const TRANSITIONS = {
+  fade: {
+    entering: FadeIn.duration(durations.fast).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never),
+    exiting: FadeOut.duration(durations.quick).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never)
+  },
+  // Material's exit is a 75 ms fade: `micro`.
+  scale: {
+    entering: scaleIn,
+    exiting: FadeOut.duration(durations.micro).reduceMotion(ReduceMotion.Never)
+  },
+  // Slide: in from the edge it sits on, and back out toward it.
+  slideBottom: {
+    entering: FadeInDown.duration(durations.fast).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never),
+    exiting: FadeOutDown.duration(durations.quick).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never)
+  },
+  slideTop: {
+    entering: FadeInUp.duration(durations.fast).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never),
+    exiting: FadeOutUp.duration(durations.quick).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never)
+  }
+};
+const transitionsFor = (animation, position) => {
+  if (animation === 'slide') {
+    return position === 'top' ? TRANSITIONS.slideTop : TRANSITIONS.slideBottom;
+  }
+  return TRANSITIONS[animation];
+};
+const millisecondsOf = duration => typeof duration === 'number' ? duration : duration === 'indefinite' ? undefined : DURATIONS[duration];
 export const Snackbar = ({
   actionLabel,
+  actionOnNewLine = false,
+  animation = PLATFORM_ANIMATION,
+  dismissible = false,
+  duration = 'indefinite',
+  entering,
+  exiting,
   message,
+  offset = 's24',
   onAction,
+  onDismiss,
+  position = 'bottom',
   visible
 }) => {
+  const reduced = useReducedMotion();
+  // A caller's inline `onDismiss` is a new function every render; the timer must not restart for it.
+  const dismiss = useRef(onDismiss);
+  dismiss.current = onDismiss;
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: a new `message` restarts the timer, as a new snackbar
+  useEffect(() => {
+    const milliseconds = millisecondsOf(duration);
+    if (!visible || milliseconds === undefined) {
+      return;
+    }
+    const timer = setTimeout(() => dismiss.current?.(), milliseconds);
+    return () => clearTimeout(timer);
+  }, [duration, message, visible]);
+
+  // Material's snackbar is announced; a React Native view is not unless asked.
+  useEffect(() => {
+    if (visible) {
+      AccessibilityInfo.announceForAccessibility(message);
+    }
+  }, [message, visible]);
   if (!visible) {
     return null;
   }
+  const edge = position === 'top' ? {
+    top: spacing[offset]
+  } : {
+    bottom: spacing[offset]
+  };
+  const hasTrailing = Boolean(actionLabel) || dismissible;
+  // With motion reduced it only fades: nothing slides or grows.
+  const preset = transitionsFor(reduced ? 'fade' : animation, position);
   return /*#__PURE__*/_jsxs(ABox, {
-    align: "center",
+    align: actionOnNewLine ? 'stretch' : 'center',
     bg: "surface.high.contrast",
     borderRadius: "medium",
-    bottom: 24,
-    entering: FadeInDown,
-    exiting: FadeOutDown,
-    flexDirection: "row",
-    gap: "s12",
-    left: 16,
+    flexDirection: actionOnNewLine ? 'column' : 'row',
+    gap: actionOnNewLine ? 's8' : 's12',
+    left: spacing.s16,
     position: "absolute",
     px: "s16",
     py: "s12",
-    right: 16,
+    right: spacing.s16,
     shadow: "snackbar",
+    ...edge,
+    entering: entering ?? preset.entering,
+    exiting: exiting ?? preset.exiting,
     children: [/*#__PURE__*/_jsx(RnText, {
       color: "content.on.high.contrast",
+      flex: actionOnNewLine ? undefined : 1,
       variant: "footnote",
       children: message
-    }), actionLabel ? /*#__PURE__*/_jsx(Pressable, {
-      onPress: onAction,
-      children: /*#__PURE__*/_jsx(RnText, {
-        color: "content.accent",
-        variant: "footnoteMedium",
-        children: actionLabel
-      })
+    }), hasTrailing ? /*#__PURE__*/_jsxs(Box, {
+      align: "center",
+      alignSelf: actionOnNewLine ? 'flex-end' : undefined,
+      flexDirection: "row",
+      gap: "s16",
+      children: [actionLabel ? /*#__PURE__*/_jsx(Pressable, {
+        onPress: onAction,
+        pressEffect: "opacity",
+        ripple: false,
+        children: /*#__PURE__*/_jsx(RnText, {
+          color: "content.accent",
+          variant: "footnoteMedium",
+          children: actionLabel
+        })
+      }) : null, dismissible ? /*#__PURE__*/_jsx(Pressable, {
+        accessibilityLabel: "Dismiss",
+        onPress: onDismiss,
+        pressEffect: "opacity",
+        ripple: false,
+        children: /*#__PURE__*/_jsx(RnGlyph, {
+          color: "content.on.high.contrast",
+          name: "close",
+          size: CLOSE_SIZE
+        })
+      }) : null]
     }) : null]
   });
 };

package/lib/module/organisms/snackbar/snackbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["FadeInDown","FadeOutDown","ABox","Pressable","RnText","jsx","_jsx","jsxs","_jsxs","Snackbar","actionLabel","message","onAction","visible","align","bg","borderRadius","bottom","entering","exiting","flexDirection","gap","left","position","px","py","right","shadow","children","color","variant","onPress"],"sourceRoot":"../../../../src","sources":["organisms/snackbar/snackbar.tsx"],"mappings":";;AAAA,SAAQA,UAAU,EAAEC,WAAW,QAAO,yBAAyB;AAE/D,SAAQC,IAAI,QAAO,0BAAiB;AACpC,SAAQC,SAAS,QAAO,gCAAuB;AAC/C,SAAQC,MAAM,QAAO,8BAAqB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG1C,OAAO,MAAMC,QAA2B,GAAGA,CAAC;EAACC,WAAW;EAAEC,OAAO;EAAEC,QAAQ;EAAEC;AAAsB,CAAC,KAAK;EACvG,IAAI,CAACA,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,oBACEL,KAAA,CAACN,IAAI;IACHY,KAAK,EAAC,QAAQ;IACdC,EAAE,EAAC,uBAAuB;IAC1BC,YAAY,EAAC,QAAQ;IACrBC,MAAM,EAAE,EAAG;IACXC,QAAQ,EAAElB,UAAW;IACrBmB,OAAO,EAAElB,WAAY;IACrBmB,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAC,KAAK;IACTC,IAAI,EAAE,EAAG;IACTC,QAAQ,EAAC,UAAU;IACnBC,EAAE,EAAC,KAAK;IACRC,EAAE,EAAC,KAAK;IACRC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAC,UAAU;IAAAC,QAAA,gBAEjBtB,IAAA,CAACF,MAAM;MAACyB,KAAK,EAAC,0BAA0B;MAACC,OAAO,EAAC,UAAU;MAAAF,QAAA,EACxDjB;IAAO,CACF,CAAC,EACRD,WAAW,gBACVJ,IAAA,CAACH,SAAS;MAAC4B,OAAO,EAAEnB,QAAS;MAAAgB,QAAA,eAC3BtB,IAAA,CAACF,MAAM;QAACyB,KAAK,EAAC,gBAAgB;QAACC,OAAO,EAAC,gBAAgB;QAAAF,QAAA,EACpDlB;MAAW,CACN;IAAC,CACA,CAAC,GACV,IAAI;EAAA,CACJ,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["duration","durations","easing","spacing","useReducedMotion","useEffect","useRef","AccessibilityInfo","Platform","Easing","FadeIn","FadeInDown","FadeInUp","FadeOut","FadeOutDown","FadeOutUp","ReduceMotion","withTiming","ABox","Box","Pressable","RnText","RnGlyph","timing","jsx","_jsx","jsxs","_jsxs","DURATIONS","long","short","PLATFORM_ANIMATION","OS","CLOSE_SIZE","SMOOTH_OUT","bezier","smoothOut","GROW","scaleIn","animations","opacity","transform","scale","initialValues","TRANSITIONS","fade","entering","fast","reduceMotion","Never","exiting","quick","micro","slideBottom","slideTop","transitionsFor","animation","position","millisecondsOf","undefined","Snackbar","actionLabel","actionOnNewLine","dismissible","message","offset","onAction","onDismiss","visible","reduced","dismiss","current","milliseconds","timer","setTimeout","clearTimeout","announceForAccessibility","edge","top","bottom","hasTrailing","Boolean","preset","align","bg","borderRadius","flexDirection","gap","left","s16","px","py","right","shadow","children","color","flex","variant","alignSelf","onPress","pressEffect","ripple","accessibilityLabel","name","size"],"sourceRoot":"../../../../src","sources":["organisms/snackbar/snackbar.tsx"],"mappings":";;AAAA,SAAQA,QAAQ,IAAIC,SAAS,EAAEC,MAAM,EAAEC,OAAO,EAAEC,gBAAgB,QAAO,mBAAmB;AAC1F,SAAQC,SAAS,EAAEC,MAAM,QAAO,OAAO;AACvC,SAAQC,iBAAiB,EAAEC,QAAQ,QAAO,cAAc;AACxD,SACEC,MAAM,EAENC,MAAM,EACNC,UAAU,EACVC,QAAQ,EACRC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,UAAU,QACL,yBAAyB;AAEhC,SAAQC,IAAI,EAAEC,GAAG,QAAO,0BAAiB;AACzC,SAAQC,SAAS,QAAO,gCAAuB;AAC/C,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,OAAO,QAAO,sBAAa;AACnC,SAAQC,MAAM,QAAO,iBAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGnC;AACA,MAAMC,SAAS,GAAG;EAACC,IAAI,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAK,CAAU;AAEvD,MAAMC,kBAAqC,GAAGvB,QAAQ,CAACwB,EAAE,KAAK,SAAS,GAAG,OAAO,GAAG,OAAO;;AAE3F;AACA,MAAMC,UAAU,GAAGzB,QAAQ,CAACwB,EAAE,KAAK,KAAK,GAAG,KAAK,GAAG,KAAK;AAExD,MAAME,UAAU,GAAGzB,MAAM,CAAC0B,MAAM,CAAC,GAAGjC,MAAM,CAACkC,SAAS,CAAC;AACrD,MAAMC,IAAI,GAAGd,MAAM,CAAC,OAAO,CAAC;;AAE5B;AACA,MAAMe,OAAmC,GAAGA,CAAA,KAAM;EAChD,SAAS;;EAET,OAAO;IACLC,UAAU,EAAE;MAACC,OAAO,EAAEvB,UAAU,CAAC,CAAC,EAAEoB,IAAI,CAAC;MAAEI,SAAS,EAAE,CAAC;QAACC,KAAK,EAAEzB,UAAU,CAAC,CAAC,EAAEoB,IAAI;MAAC,CAAC;IAAC,CAAC;IACrFM,aAAa,EAAE;MAACH,OAAO,EAAE,CAAC;MAAEC,SAAS,EAAE,CAAC;QAACC,KAAK,EAAE;MAAG,CAAC;IAAC;EACvD,CAAC;AACH,CAAC;;AAED;AACA;AACA;AACA;AACA,MAAME,WAAW,GAAG;EAClBC,IAAI,EAAE;IACJC,QAAQ,EAAEpC,MAAM,CAACV,QAAQ,CAACC,SAAS,CAAC8C,IAAI,CAAC,CAAC7C,MAAM,CAACgC,UAAU,CAAC,CAACc,YAAY,CAAChC,YAAY,CAACiC,KAAK,CAAC;IAC7FC,OAAO,EAAErC,OAAO,CAACb,QAAQ,CAACC,SAAS,CAACkD,KAAK,CAAC,CAACjD,MAAM,CAACgC,UAAU,CAAC,CAACc,YAAY,CAAChC,YAAY,CAACiC,KAAK;EAC/F,CAAC;EACD;EACAP,KAAK,EAAE;IAACI,QAAQ,EAAER,OAAO;IAAEY,OAAO,EAAErC,OAAO,CAACb,QAAQ,CAACC,SAAS,CAACmD,KAAK,CAAC,CAACJ,YAAY,CAAChC,YAAY,CAACiC,KAAK;EAAC,CAAC;EACvG;EACAI,WAAW,EAAE;IACXP,QAAQ,EAAEnC,UAAU,CAACX,QAAQ,CAACC,SAAS,CAAC8C,IAAI,CAAC,CAAC7C,MAAM,CAACgC,UAAU,CAAC,CAACc,YAAY,CAAChC,YAAY,CAACiC,KAAK,CAAC;IACjGC,OAAO,EAAEpC,WAAW,CAACd,QAAQ,CAACC,SAAS,CAACkD,KAAK,CAAC,CAACjD,MAAM,CAACgC,UAAU,CAAC,CAACc,YAAY,CAAChC,YAAY,CAACiC,KAAK;EACnG,CAAC;EACDK,QAAQ,EAAE;IACRR,QAAQ,EAAElC,QAAQ,CAACZ,QAAQ,CAACC,SAAS,CAAC8C,IAAI,CAAC,CAAC7C,MAAM,CAACgC,UAAU,CAAC,CAACc,YAAY,CAAChC,YAAY,CAACiC,KAAK,CAAC;IAC/FC,OAAO,EAAEnC,SAAS,CAACf,QAAQ,CAACC,SAAS,CAACkD,KAAK,CAAC,CAACjD,MAAM,CAACgC,UAAU,CAAC,CAACc,YAAY,CAAChC,YAAY,CAACiC,KAAK;EACjG;AACF,CAAC;AAED,MAAMM,cAAc,GAAGA,CAACC,SAA4B,EAAEC,QAA0B,KAAK;EACnF,IAAID,SAAS,KAAK,OAAO,EAAE;IACzB,OAAOC,QAAQ,KAAK,KAAK,GAAGb,WAAW,CAACU,QAAQ,GAAGV,WAAW,CAACS,WAAW;EAC5E;EAEA,OAAOT,WAAW,CAACY,SAAS,CAAC;AAC/B,CAAC;AAED,MAAME,cAAc,GAAI1D,QAA0B,IAChD,OAAOA,QAAQ,KAAK,QAAQ,GAAGA,QAAQ,GAAGA,QAAQ,KAAK,YAAY,GAAG2D,SAAS,GAAG/B,SAAS,CAAC5B,QAAQ,CAAC;AAEvG,OAAO,MAAM4D,QAA2B,GAAGA,CAAC;EAC1CC,WAAW;EACXC,eAAe,GAAG,KAAK;EACvBN,SAAS,GAAGzB,kBAAkB;EAC9BgC,WAAW,GAAG,KAAK;EACnB/D,QAAQ,GAAG,YAAY;EACvB8C,QAAQ;EACRI,OAAO;EACPc,OAAO;EACPC,MAAM,GAAG,KAAK;EACdC,QAAQ;EACRC,SAAS;EACTV,QAAQ,GAAG,QAAQ;EACnBW;AACa,CAAC,KAAK;EACnB,MAAMC,OAAO,GAAGjE,gBAAgB,CAAC,CAAC;EAClC;EACA,MAAMkE,OAAO,GAAGhE,MAAM,CAAC6D,SAAS,CAAC;EACjCG,OAAO,CAACC,OAAO,GAAGJ,SAAS;;EAE3B;EACA9D,SAAS,CAAC,MAAM;IACd,MAAMmE,YAAY,GAAGd,cAAc,CAAC1D,QAAQ,CAAC;IAE7C,IAAI,CAACoE,OAAO,IAAII,YAAY,KAAKb,SAAS,EAAE;MAC1C;IACF;IAEA,MAAMc,KAAK,GAAGC,UAAU,CAAC,MAAMJ,OAAO,CAACC,OAAO,GAAG,CAAC,EAAEC,YAAY,CAAC;IAEjE,OAAO,MAAMG,YAAY,CAACF,KAAK,CAAC;EAClC,CAAC,EAAE,CAACzE,QAAQ,EAAEgE,OAAO,EAAEI,OAAO,CAAC,CAAC;;EAEhC;EACA/D,SAAS,CAAC,MAAM;IACd,IAAI+D,OAAO,EAAE;MACX7D,iBAAiB,CAACqE,wBAAwB,CAACZ,OAAO,CAAC;IACrD;EACF,CAAC,EAAE,CAACA,OAAO,EAAEI,OAAO,CAAC,CAAC;EAEtB,IAAI,CAACA,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,MAAMS,IAAI,GAAGpB,QAAQ,KAAK,KAAK,GAAG;IAACqB,GAAG,EAAE3E,OAAO,CAAC8D,MAAM;EAAC,CAAC,GAAG;IAACc,MAAM,EAAE5E,OAAO,CAAC8D,MAAM;EAAC,CAAC;EACpF,MAAMe,WAAW,GAAGC,OAAO,CAACpB,WAAW,CAAC,IAAIE,WAAW;EACvD;EACA,MAAMmB,MAAM,GAAG3B,cAAc,CAACc,OAAO,GAAG,MAAM,GAAGb,SAAS,EAAEC,QAAQ,CAAC;EAErE,oBACE9B,KAAA,CAACT,IAAI;IACHiE,KAAK,EAAErB,eAAe,GAAG,SAAS,GAAG,QAAS;IAC9CsB,EAAE,EAAC,uBAAuB;IAC1BC,YAAY,EAAC,QAAQ;IACrBC,aAAa,EAAExB,eAAe,GAAG,QAAQ,GAAG,KAAM;IAClDyB,GAAG,EAAEzB,eAAe,GAAG,IAAI,GAAG,KAAM;IACpC0B,IAAI,EAAErF,OAAO,CAACsF,GAAI;IAClBhC,QAAQ,EAAC,UAAU;IACnBiC,EAAE,EAAC,KAAK;IACRC,EAAE,EAAC,KAAK;IACRC,KAAK,EAAEzF,OAAO,CAACsF,GAAI;IACnBI,MAAM,EAAC,UAAU;IAAA,GACbhB,IAAI;IACR/B,QAAQ,EAAEA,QAAQ,IAAIoC,MAAM,CAACpC,QAAS;IACtCI,OAAO,EAAEA,OAAO,IAAIgC,MAAM,CAAChC,OAAQ;IAAA4C,QAAA,gBAGnCrE,IAAA,CAACJ,MAAM;MAAC0E,KAAK,EAAC,0BAA0B;MAACC,IAAI,EAAElC,eAAe,GAAGH,SAAS,GAAG,CAAE;MAACsC,OAAO,EAAC,UAAU;MAAAH,QAAA,EAC/F9B;IAAO,CACF,CAAC,EACRgB,WAAW,gBACVrD,KAAA,CAACR,GAAG;MAACgE,KAAK,EAAC,QAAQ;MAACe,SAAS,EAAEpC,eAAe,GAAG,UAAU,GAAGH,SAAU;MAAC2B,aAAa,EAAC,KAAK;MAACC,GAAG,EAAC,KAAK;MAAAO,QAAA,GACnGjC,WAAW,gBACVpC,IAAA,CAACL,SAAS;QAAC+E,OAAO,EAAEjC,QAAS;QAACkC,WAAW,EAAC,SAAS;QAACC,MAAM,EAAE,KAAM;QAAAP,QAAA,eAChErE,IAAA,CAACJ,MAAM;UAAC0E,KAAK,EAAC,gBAAgB;UAACE,OAAO,EAAC,gBAAgB;UAAAH,QAAA,EACpDjC;QAAW,CACN;MAAC,CACA,CAAC,GACV,IAAI,EACPE,WAAW,gBACVtC,IAAA,CAACL,SAAS;QAACkF,kBAAkB,EAAC,SAAS;QAACH,OAAO,EAAEhC,SAAU;QAACiC,WAAW,EAAC,SAAS;QAACC,MAAM,EAAE,KAAM;QAAAP,QAAA,eAC9FrE,IAAA,CAACH,OAAO;UAACyE,KAAK,EAAC,0BAA0B;UAACQ,IAAI,EAAC,OAAO;UAACC,IAAI,EAAEvE;QAAW,CAAE;MAAC,CAClE,CAAC,GACV,IAAI;IAAA,CACL,CAAC,GACJ,IAAI;EAAA,CACJ,CAAC;AAEX,CAAC","ignoreList":[]}

package/lib/module/organisms/swipe-actions/swipe-actions.android.js

@@ -42,7 +42,7 @@ const ActionButton = ({
 }) => {
   const theme = useAppTheme();
   const fill = action.tint ?? (action.destructive ? 'fill.destructive.primary' : 'fill.accent.primary');
-  const content = !action.tint && action.destructive ? 'content.on.destructive' : 'content.on.bg';
+  const content = !action.tint && action.destructive ? 'content.on.destructive' : 'content.on.accent';
   const onClick = useCallback(() => {
     onDone();
     action.onPress();

package/lib/module/organisms/swipe-actions/swipe-actions.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["FilledIconButton","size","SwipeActionsBox","spacing","useAppTheme","useCallback","useEffect","useId","useState","useSyncExternalStore","HStack","Icon","Text","VStack","useHostGuard","jsx","_jsx","jsxs","_jsxs","BUTTON","openRow","listeners","Set","setOpenRow","row","listener","subscribe","add","delete","getOpenRow","ActionButton","action","onDone","theme","fill","tint","destructive","content","onClick","onPress","align","children","colors","containerColor","color","contentColor","modifiers","accessibilityLabel","label","name","icon","variant","Actions","actions","map","close","SwipeActions","leading","trailing","isOpenRow","edge","setEdge","onOpenChange","next","actionsSpacing","s12","openEdge","length","Leading","Trailing","reverse"],"sourceRoot":"../../../../src","sources":["organisms/swipe-actions/swipe-actions.android.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["FilledIconButton","size","SwipeActionsBox","spacing","useAppTheme","useCallback","useEffect","useId","useState","useSyncExternalStore","HStack","Icon","Text","VStack","useHostGuard","jsx","_jsx","jsxs","_jsxs","BUTTON","openRow","listeners","Set","setOpenRow","row","listener","subscribe","add","delete","getOpenRow","ActionButton","action","onDone","theme","fill","tint","destructive","content","onClick","onPress","align","children","colors","containerColor","color","contentColor","modifiers","accessibilityLabel","label","name","icon","variant","Actions","actions","map","close","SwipeActions","leading","trailing","isOpenRow","edge","setEdge","onOpenChange","next","actionsSpacing","s12","openEdge","length","Leading","Trailing","reverse"],"sourceRoot":"../../../../src","sources":["organisms/swipe-actions/swipe-actions.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/use-stack-modifiers.js

@@ -1,16 +1,17 @@
 "use strict";
 
 import { clickable, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
-import { useSxModifiers } from '@hzblj/kara-sx';
+import { splitAccessibility, useAccessibilityModifiers, useSxModifiers } from '@hzblj/kara-sx';
 import { useMemo } from 'react';
 
 /**
- * A Compose stack's modifiers in the order a pressable one needs: its frame, shape and background, then the press,
- * then its padding. Compose clips a `clickable` to what comes after it, so with the padding first the ripple would stop
- * at the padding and a row pressed by its edge would light up only in the middle.
+ * A Compose stack's modifiers in the order a pressable one needs: its frame, shape and background, then the press, its
+ * semantics, then its padding. Compose clips a `clickable` to what comes after it, so with the padding first the ripple
+ * would stop at the padding and a row pressed by its edge would light up only in the middle. The semantics come after
+ * the click, because a label that replaces the children's clears whatever semantics are inside it.
  */
-export const useStackModifiers = (sx, onPress, testID) => {
-  const {
+export const useStackModifiers = (props, onPress, testID) => {
+  const [accessibility, {
     p,
     pb,
     pl,
@@ -19,7 +20,7 @@ export const useStackModifiers = (sx, onPress, testID) => {
     px,
     py,
     ...frame
-  } = sx;
+  }] = splitAccessibility(props);
   const frameModifiers = useSxModifiers(frame);
   const paddingModifiers = useSxModifiers({
     p,
@@ -30,6 +31,7 @@ export const useStackModifiers = (sx, onPress, testID) => {
     px,
     py
   });
-  return useMemo(() => [...frameModifiers, ...(testID ? [testIdModifier(testID)] : []), ...(onPress ? [clickable(onPress)] : []), ...paddingModifiers], [frameModifiers, onPress, paddingModifiers, testID]);
+  const accessibilityModifiers = useAccessibilityModifiers(accessibility, onPress !== undefined);
+  return useMemo(() => [...frameModifiers, ...(testID ? [testIdModifier(testID)] : []), ...(onPress ? [clickable(onPress)] : []), ...accessibilityModifiers, ...paddingModifiers], [accessibilityModifiers, frameModifiers, onPress, paddingModifiers, testID]);
 };
 //# sourceMappingURL=use-stack-modifiers.js.map

package/lib/module/use-stack-modifiers.js.map

@@ -1 +1 @@
-{"version":3,"names":["clickable","testID","testIdModifier","useSxModifiers","useMemo","useStackModifiers","sx","onPress","p","pb","pl","pr","pt","px","py","frame","frameModifiers","paddingModifiers"],"sourceRoot":"../../src","sources":["use-stack-modifiers.ts"],"mappings":";;AAAA,SAAQA,SAAS,EAAuBC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3G,SAA2BC,cAAc,QAAO,gBAAgB;AAChE,SAAQC,OAAO,QAAO,OAAO;;AAE7B;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAACC,EAAgB,EAAEC,OAAoB,EAAEN,MAAe,KAAuB;EAC9G,MAAM;IAACO,CAAC;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAE,GAAGC;EAAK,CAAC,GAAGT,EAAE;EAChD,MAAMU,cAAc,GAAGb,cAAc,CAACY,KAAK,CAAC;EAC5C,MAAME,gBAAgB,GAAGd,cAAc,CAAC;IAACK,CAAC;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC;EAAE,CAAC,CAAC;EAEpE,OAAOV,OAAO,CACZ,MAAM,CACJ,GAAGY,cAAc,EACjB,IAAIf,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAC3C,IAAIM,OAAO,GAAG,CAACP,SAAS,CAACO,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EACxC,GAAGU,gBAAgB,CACpB,EACD,CAACD,cAAc,EAAET,OAAO,EAAEU,gBAAgB,EAAEhB,MAAM,CACpD,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["clickable","testID","testIdModifier","splitAccessibility","useAccessibilityModifiers","useSxModifiers","useMemo","useStackModifiers","props","onPress","accessibility","p","pb","pl","pr","pt","px","py","frame","frameModifiers","paddingModifiers","accessibilityModifiers","undefined"],"sourceRoot":"../../src","sources":["use-stack-modifiers.ts"],"mappings":";;AAAA,SAAQA,SAAS,EAAuBC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3G,SAGEC,kBAAkB,EAClBC,yBAAyB,EACzBC,cAAc,QACT,gBAAgB;AACvB,SAAQC,OAAO,QAAO,OAAO;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAC/BC,KAAwC,EACxCC,OAAoB,EACpBR,MAAe,KACM;EACrB,MAAM,CAACS,aAAa,EAAE;IAACC,CAAC;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAE,GAAGC;EAAK,CAAC,CAAC,GAAGf,kBAAkB,CAACK,KAAK,CAAC;EACxF,MAAMW,cAAc,GAAGd,cAAc,CAACa,KAAK,CAAC;EAC5C,MAAME,gBAAgB,GAAGf,cAAc,CAAC;IAACM,CAAC;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC;EAAE,CAAC,CAAC;EACpE,MAAMI,sBAAsB,GAAGjB,yBAAyB,CAACM,aAAa,EAAED,OAAO,KAAKa,SAAS,CAAC;EAE9F,OAAOhB,OAAO,CACZ,MAAM,CACJ,GAAGa,cAAc,EACjB,IAAIlB,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAC3C,IAAIQ,OAAO,GAAG,CAACT,SAAS,CAACS,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EACxC,GAAGY,sBAAsB,EACzB,GAAGD,gBAAgB,CACpB,EACD,CAACC,sBAAsB,EAAEF,cAAc,EAAEV,OAAO,EAAEW,gBAAgB,EAAEnB,MAAM,CAC5E,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -7,6 +7,8 @@ export type ActivityIndicatorSize = 'large' | 'small';
  * Android, so it renders anywhere. For how far along something is, use `Progress`.
  */
 export type ActivityIndicatorProps = {
+    /** What is loading, for VoiceOver and TalkBack: "Loading photos". Unset, the platform's own word ("In progress"). */
+    accessibilityLabel?: string;
     /** Its colour. `fill.accent.primary` by default. */
     color?: ColorToken;
     /** `small` sits in a row or a button, `large` holds a screen that is loading. `small` by default. */

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

@@ -3,6 +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. */
 export type AvatarProps = {
+    /**
+     * Who it is, for VoiceOver and TalkBack: "Jan Blazej". Unset, the avatar is decorative and hidden from them, as one
+     * beside the person's name should be.
+     */
+    accessibilityLabel?: string;
     /** 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. */

package/lib/typescript/atoms/button/button-tokens.d.ts

@@ -1,7 +1,7 @@
 import type { ColorToken, Theme } from '@hzblj/kara-theme';
 import type { ButtonVariant } from './button.types';
 export declare const buttonTokens: (variant: ButtonVariant, disabled: boolean, theme: Theme) => {
-    readonly content: 'content.on.bg';
+    readonly content: 'content.on.accent';
     readonly fill: 'fill.accent.primary';
     readonly shadow: 'btn.accent';
 } | {

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

@@ -13,6 +13,8 @@ export type ButtonStyleName = 'automatic' | 'bordered' | 'borderedProminent' | '
 export type ButtonControlSize = 'extraLarge' | 'large' | 'mini' | 'regular' | 'small';
 /** A text button: SwiftUI `Button` on iOS, Material's filled button (outlined for `glass`) on Android. */
 export type ButtonProps = {
+    /** What pressing it does, when the label alone does not say. See `AccessibilityProps`. */
+    accessibilityHint?: string;
     /**
      * Replaces the style the variant picks: `borderedProminent` for `accent` and `destructive`, `bordered` for
      * `secondary`, `glass` for `glass`. iOS only. Android ignores it.

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

@@ -1,10 +1,10 @@
-import type { ResponsiveSx } from '@hzblj/kara-sx';
+import type { AccessibilityProps, 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
  * the `card` shadow. Any `sx` prop overrides its default.
  */
-export type CardProps = ResponsiveSx & {
+export type CardProps = ResponsiveSx & AccessibilityProps & {
     /** Native views, stacked vertically from the leading edge. */
     children?: ReactNode;
     /** Test identifier, forwarded to the native view. */

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

@@ -5,7 +5,14 @@ import type { IconName } from '../icon';
  * `Button`) on iOS. It renders inline; pinning it to a corner is up to the screen.
  */
 export type FabProps = {
-    /** The icon, one of the app's, drawn in `content.on.bg`. */
+    /**
+     * What VoiceOver and TalkBack say for the button, since an icon has no words of its own: "Share", "Add to
+     * favourites". Required for that reason.
+     */
+    accessibilityLabel: string;
+    /** What pressing it does, when the label alone does not say. See `AccessibilityProps`. */
+    accessibilityHint?: string;
+    /** The icon, one of the app's, drawn in `content.on.accent`. */
     name: IconName;
     /** Called when the button is pressed. */
     onPress?: () => void;

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

@@ -1,14 +1,17 @@
-import type { ResponsiveSx } from '@hzblj/kara-sx';
+import type { AccessibilityProps, 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`. */
-export type HStackProps = ResponsiveSx & {
+export type HStackProps = ResponsiveSx & AccessibilityProps & {
     /** 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. Screen readers
+     * then read the stack as one button.
+     */
     onPress?: () => void;
     /** The gap between children. Unset, SwiftUI puts its default spacing between them and Compose none. */
     spacing?: SpaceSize;

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

@@ -6,6 +6,13 @@ import type { IconName } from '../icon';
  * itself the same way on both.
  */
 export type IconButtonProps = {
+    /**
+     * What VoiceOver and TalkBack say for the button, since an icon has no words of its own: "Share", "Add to
+     * favourites". Required for that reason.
+     */
+    accessibilityLabel: string;
+    /** What pressing it does, when the label alone does not say. See `AccessibilityProps`. */
+    accessibilityHint?: string;
     /** 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. */

package/lib/typescript/atoms/image/image.d.ts

@@ -1,8 +1,8 @@
 import { Image as ExpoImage, type ImageProps as ExpoImageProps } from 'expo-image';
 import type { Ref } from 'react';
 /**
- * `expo-image` with the `sx` props, the way `Box` is a `View` with them, and the design system's 100 ms linear fade
- * already applied, so a loaded image never pops in. An explicit `transition` wins, and so does an explicit `style`.
+ * `expo-image` with the `sx` props, the way `Box` is a `View` with them, and the design system's fade (`quick`,
+ * eased out) already applied, so a loaded image never pops in. An explicit `transition` wins, and so does an explicit `style`.
  */
 export declare const Image: import("react").MemoExoticComponent<{
     ({ style, ...props }: import("@hzblj/kara-sx").SxProps<ExpoImageProps & {

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

@@ -1,17 +1,17 @@
-import type { ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { AccessibilityProps, 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. */
+/** How the content answers a press: it eases 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. Each platform
- * presses its own way by default: iOS springs the content down to 96%, Android draws Material's ripple over it,
+ * presses its own way by default: iOS eases 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.
+ * unless `ripple` is off. Give it the `borderRadius` of what it wraps (`full` around a `GlassView`). Screen readers read
+ * it as a button unless `accessibilityRole` names another role. The React Native tier: it needs no host.
  */
-export type PressableProps = ResponsiveViewSx & {
+export type PressableProps = ResponsiveViewSx & AccessibilityProps & {
     /** The pressable content. */
     children?: ReactNode;
     /** Ignores presses: no `onPress`, no haptic, no press effect or ripple. */
@@ -21,14 +21,14 @@ export type PressableProps = ResponsiveViewSx & {
     /** 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
+     * How the content answers while it is held. `scale` eases 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.
+     * press. With motion reduced, `scale` dims instead: the press still shows, and nothing moves.
      */
     pressEffect?: PressEffect;
     /** What `opacity` dims to, an opacity token. `o60` by default. */
     pressedOpacity?: OpacitySize;
-    /** What `scale` springs down to. `0.96` by default. */
+    /** What `scale` eases down to. `0.96` by default: lower reads as a squash, not a press. */
     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;

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

@@ -4,6 +4,8 @@ import type { ReactNode } from 'react';
  * value, which `ProgressView` cannot draw on iOS) / Compose's `LinearProgressIndicator` and `CircularProgressIndicator`.
  */
 export type ProgressProps = {
+    /** What is in progress, for VoiceOver and TalkBack: "Uploading". They read how far along it is themselves. */
+    accessibilityLabel?: string;
     /** A circular indicator instead of a bar. Off by default. */
     circular?: boolean;
     /** Between `0` and `1`. Leave it unset for an indeterminate indicator. */

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

@@ -2,8 +2,9 @@ import type { SxDimension } from '@hzblj/kara-sx';
 import type { RadiiSize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 /**
- * A loading placeholder that pulses in `fill.quaternary`. It is a React Native view, so it needs no host. Sized with
- * the `sx` names: `w`, `h`, `borderRadius`.
+ * A loading placeholder that pulses in `fill.quaternary`, and holds still with motion reduced. Hidden from screen
+ * readers: what is loading is for the screen to say. It is a React Native view, so it needs no host. Sized with the
+ * `sx` names: `w`, `h`, `borderRadius`.
  */
 export type SkeletonProps = {
     /** The corner radius. `small` by default. */

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

@@ -1,10 +1,10 @@
-import type { ResponsiveSx } from '@hzblj/kara-sx';
+import type { AccessibilityProps, ResponsiveSx } from '@hzblj/kara-sx';
 import type { ReactNode } from 'react';
 /**
  * A container on `surface.primary`, padded `s16` and rounded `large` unless told otherwise: a SwiftUI `VStack` on
  * iOS, Material's `Surface` around a `Column` on Android.
  */
-export type SurfaceProps = ResponsiveSx & {
+export type SurfaceProps = ResponsiveSx & AccessibilityProps & {
     /** Stacked vertically, from the leading edge. */
     children?: ReactNode;
     /** iOS wraps the content in a `GlassEffectContainer`; Android raises it to a tonal elevation of `3`. */

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

@@ -1,4 +1,4 @@
-import type { ResponsiveSx } from '@hzblj/kara-sx';
+import type { AccessibilityProps, ResponsiveSx } from '@hzblj/kara-sx';
 import type { ColorToken, TextVariant } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 export type TextAlign = 'center' | 'left' | 'right';
@@ -9,7 +9,7 @@ export type TextTransform = 'lowercase' | 'uppercase';
  * the native `sx` surface too: padding, a frame (`wide` lines it up by `align`), a background, and the `ios` bucket's
  * `contentTransition`, `animation` and `monospacedDigit` for a number that changes in place.
  */
-export type TextProps = ResponsiveSx & {
+export type TextProps = ResponsiveSx & AccessibilityProps & {
     /**
      * How its lines align. iOS reads `left` and `right` as leading and trailing, so they flip in a right-to-left
      * layout; Android keeps them as they are.