@hzblj/kara-components 0.17.0 → 0.18.0

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","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":[]}
+{"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

@@ -1,6 +1,7 @@
 "use strict";
 
 import { Button, Image, Label, Menu } from '@expo/ui/swift-ui';
+import { disabled } from '@expo/ui/swift-ui/modifiers';
 import { iconResourceName } from '@hzblj/expo-native-icons';
 import { Icon } from "../../atoms/icon/index.js";
 import { VStack } from "../../atoms/v-stack/index.js";
@@ -9,6 +10,7 @@ import { useHostGuard } from "../../host-context.js";
 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;
+const DISABLED = [disabled(true)];
 export const FabMenu = ({
   accessibilityLabel,
   actions,
@@ -37,6 +39,7 @@ export const FabMenu = ({
     }),
     testID: testID,
     children: actions.map(action => /*#__PURE__*/_jsx(Button, {
+      modifiers: action.disabled ? DISABLED : undefined,
       onPress: action.onPress,
       role: action.destructive ? 'destructive' : 'default',
       children: /*#__PURE__*/_jsx(Label, {

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","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,0BAA0B;AAEzD,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":[]}
+{"version":3,"names":["Button","Image","Label","Menu","disabled","iconResourceName","Icon","VStack","Glyph","useHostGuard","jsx","_jsx","FAB_SIZE","DISABLED","FabMenu","accessibilityLabel","actions","icon","testID","label","align","bg","borderRadius","h","p","shadow","w","children","color","name","map","action","modifiers","undefined","onPress","role","destructive","assetName","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,QAAQ,QAAO,6BAA6B;AACpD,SAAQC,gBAAgB,QAAO,0BAA0B;AAEzD,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,MAAMC,QAAQ,GAAG,CAACT,QAAQ,CAAC,IAAI,CAAC,CAAC;AAEjC,OAAO,MAAMU,OAAyB,GAAGA,CAAC;EAACC,kBAAkB;EAAEC,OAAO;EAAEC,IAAI;EAAEC;AAAoB,CAAC,KAAK;EACtGT,YAAY,CAAC,SAAS,CAAC;EAEvB,oBACEE,IAAA,CAACR,IAAI;IACHgB,KAAK,eACHR,IAAA,CAACJ,MAAM;MACLa,KAAK,EAAC,QAAQ;MACdC,EAAE,EAAC,qBAAqB;MACxBC,YAAY,EAAC,MAAM;MACnBC,CAAC,EAAEX,QAAS;MACZY,CAAC,EAAC,KAAK;MACPC,MAAM,EAAC,YAAY;MACnBC,CAAC,EAAEd,QAAS;MAAAe,QAAA,EAEXV,IAAI,gBACHN,IAAA,CAACL,IAAI;QAACS,kBAAkB,EAAEA,kBAAmB;QAACa,KAAK,EAAC,mBAAmB;QAACC,IAAI,EAAEZ;MAAK,CAAE,CAAC,gBAEtFN,IAAA,CAACH,KAAK;QAACO,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,iBACjBpB,IAAA,CAACX,MAAM;MAELgC,SAAS,EAAED,MAAM,CAAC3B,QAAQ,GAAGS,QAAQ,GAAGoB,SAAU;MAClDC,OAAO,EAAEH,MAAM,CAACG,OAAQ;MACxBC,IAAI,EAAEJ,MAAM,CAACK,WAAW,GAAG,aAAa,GAAG,SAAU;MAAAT,QAAA,eAGrDhB,IAAA,CAACT,KAAK;QACJe,IAAI,EAAEc,MAAM,CAACd,IAAI,gBAAGN,IAAA,CAACV,KAAK;UAACoC,SAAS,EAAEhC,gBAAgB,CAAC0B,MAAM,CAACd,IAAI;QAAE,CAAE,CAAC,GAAGgB,SAAU;QACpFK,KAAK,EAAEP,MAAM,CAACZ;MAAM,CACrB;IAAC,GATGY,MAAM,CAACZ,KAUN,CACT;EAAC,CACE,CAAC;AAEX,CAAC","ignoreList":[]}

package/lib/module/organisms/menu/menu-parts.js

@@ -0,0 +1,20 @@
+"use strict";
+
+/**
+ * An action's colour in a row kara draws itself (the Android menus and sheets): greyed when disabled, as `IconButton`
+ * greys, red when destructive. A Compose `DropdownMenuItem` cannot grey its own text here, since the text sets its
+ * colour explicitly.
+ */
+export const menuActionColor = ({
+  destructive,
+  disabled
+}) => {
+  if (disabled) {
+    return 'btn.content.disabled';
+  }
+  return destructive ? 'content.destructive' : 'content.primary';
+};
+
+/** A trigger with no text: the props' union guarantees its icon and the words a screen reader says for it. */
+export const isIconOnly = props => props.label === undefined;
+//# sourceMappingURL=menu-parts.js.map

package/lib/module/organisms/menu/menu-parts.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["menuActionColor","destructive","disabled","isIconOnly","props","label","undefined"],"sourceRoot":"../../../../src","sources":["organisms/menu/menu-parts.ts"],"mappings":";;AAKA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,eAAe,GAAGA,CAAC;EAACC,WAAW;EAAEC;AAAoB,CAAC,KAAiB;EAClF,IAAIA,QAAQ,EAAE;IACZ,OAAO,sBAAsB;EAC/B;EAEA,OAAOD,WAAW,GAAG,qBAAqB,GAAG,iBAAiB;AAChE,CAAC;;AAED;AACA,OAAO,MAAME,UAAU,GAAIC,KAAgB,IACzCA,KAAK,CAACC,KAAK,KAAKC,SAAS","ignoreList":[]}

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

@@ -5,21 +5,24 @@ import { useAppTheme } from '@hzblj/kara-theme';
 import { useCallback, useState } from 'react';
 import { HStack } from "../../atoms/h-stack/index.js";
 import { Icon } from "../../atoms/icon/index.js";
+import { IconButton } from "../../atoms/icon-button/index.js";
 import { Text } from "../../atoms/text/index.js";
 import { Glyph } from "../../glyph/index.js";
 import { useHostGuard } from "../../host-context.js";
+import { isIconOnly, menuActionColor } from "./menu-parts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MenuItem = ({
   action,
   onDismiss
 }) => {
   const theme = useAppTheme();
-  const color = action.destructive ? 'content.destructive' : 'content.primary';
+  const color = menuActionColor(action);
   return /*#__PURE__*/_jsxs(DropdownMenuItem, {
     elementColors: {
       leadingIconColor: theme.color(color),
       textColor: theme.color(color)
     },
+    enabled: !action.disabled,
     onClick: () => {
       onDismiss();
       action.onPress();
@@ -39,39 +42,68 @@ const MenuItem = ({
     }) : null]
   });
 };
+const triggerOf = (props, open) => {
+  if (isIconOnly(props)) {
+    // Material's overflow menu: an icon button, its label carried by the icon.
+    return /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: props.accessibilityLabel,
+      name: props.icon,
+      onPress: open,
+      testID: props.testID
+    });
+  }
+  const {
+    accessibilityLabel,
+    icon,
+    label,
+    testID
+  } = props;
+  return /*#__PURE__*/_jsxs(HStack, {
+    accessibilityLabel: accessibilityLabel,
+    align: "center",
+    onPress: open,
+    spacing: "s4",
+    testID: testID,
+    children: [icon ? /*#__PURE__*/_jsxs(HStack, {
+      align: "center",
+      spacing: "s8",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        color: "content.accent",
+        name: icon,
+        size: "s20"
+      }), /*#__PURE__*/_jsx(Text, {
+        color: "content.accent",
+        children: label
+      })]
+    }) : /*#__PURE__*/_jsx(Text, {
+      color: "content.accent",
+      children: label
+    }), /*#__PURE__*/_jsx(Glyph, {
+      color: "content.accent",
+      name: "chevronDown",
+      size: "s16"
+    })]
+  });
+};
 
 /**
  * Material's dropdown menu, anchored to its trigger. The items live in the `Items` slot, which Compose presents in
  * its own popup — anywhere else they would be laid out in place, on top of the trigger.
  */
-export const Menu = ({
-  actions,
-  label
-}) => {
+export const Menu = props => {
   useHostGuard('Menu');
   const theme = useAppTheme();
   const [expanded, setExpanded] = useState(false);
+  const open = useCallback(() => setExpanded(true), []);
   const dismiss = useCallback(() => setExpanded(false), []);
   return /*#__PURE__*/_jsxs(DropdownMenu, {
     color: theme.color('surface.primary'),
     expanded: expanded,
     onDismissRequest: dismiss,
     children: [/*#__PURE__*/_jsx(DropdownMenu.Trigger, {
-      children: /*#__PURE__*/_jsxs(HStack, {
-        align: "center",
-        onPress: () => setExpanded(true),
-        spacing: "s4",
-        children: [/*#__PURE__*/_jsx(Text, {
-          color: "content.accent",
-          children: label
-        }), /*#__PURE__*/_jsx(Glyph, {
-          color: "content.accent",
-          name: "chevronDown",
-          size: "s16"
-        })]
-      })
+      children: triggerOf(props, open)
     }), /*#__PURE__*/_jsx(DropdownMenu.Items, {
-      children: actions.map(action => /*#__PURE__*/_jsx(MenuItem, {
+      children: props.actions.map(action => /*#__PURE__*/_jsx(MenuItem, {
         action: action,
         onDismiss: dismiss
       }, action.label))

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

@@ -1 +1 @@
-{"version":3,"names":["Text","ComposeText","DropdownMenu","DropdownMenuItem","useAppTheme","useCallback","useState","HStack","Icon","Glyph","useHostGuard","jsx","_jsx","jsxs","_jsxs","MenuItem","action","onDismiss","theme","color","destructive","elementColors","leadingIconColor","textColor","onClick","onPress","children","colorString","style","typography","body","label","icon","LeadingIcon","name","size","Menu","actions","expanded","setExpanded","dismiss","onDismissRequest","Trigger","align","spacing","Items","map"],"sourceRoot":"../../../../src","sources":["organisms/menu/menu.android.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Text","ComposeText","DropdownMenu","DropdownMenuItem","useAppTheme","useCallback","useState","HStack","Icon","IconButton","Glyph","useHostGuard","isIconOnly","menuActionColor","jsx","_jsx","jsxs","_jsxs","MenuItem","action","onDismiss","theme","color","elementColors","leadingIconColor","textColor","enabled","disabled","onClick","onPress","children","colorString","style","typography","body","label","icon","LeadingIcon","name","size","triggerOf","props","open","accessibilityLabel","testID","align","spacing","Menu","expanded","setExpanded","dismiss","onDismissRequest","Trigger","Items","actions","map"],"sourceRoot":"../../../../src","sources":["organisms/menu/menu.android.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -1,19 +1,82 @@
 "use strict";
 
-import { Button, Menu as SwiftUIMenu } from '@expo/ui/swift-ui';
+import { Button, Image, Label, Menu as SwiftUIMenu } from '@expo/ui/swift-ui';
+import { contentShape, disabled, frame, resizable, shapes } from '@expo/ui/swift-ui/modifiers';
+import { iconResourceName } from '@hzblj/expo-native-icons';
+import { useAccessibilityModifiers } from '@hzblj/kara-sx';
+import { spacing } from '@hzblj/kara-theme';
+import { Icon } from "../../atoms/icon/index.js";
+import { ZStack } from "../../atoms/z-stack/index.js";
 import { useHostGuard } from "../../host-context.js";
+import { isIconOnly } from "./menu-parts.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Menu = ({
-  actions,
-  label
-}) => {
+const DISABLED = [disabled(true)];
+
+/** Apple's least tap target, as `IconButton` takes it. */
+const TARGET = 44;
+
+/** The whole square takes the tap, not only the glyph's own pixels. */
+const WHOLE_TARGET = {
+  modifiers: [contentShape(shapes.circle())]
+};
+
+/**
+ * The icon beside the trigger's text, the size `Link` draws one beside body text. No colour of its own: the asset is a
+ * template image, so it takes the menu's tint with the text.
+ */
+const LABEL_ICON = [resizable(), frame({
+  height: spacing.s20,
+  width: spacing.s20
+})];
+const triggerOf = props => {
+  if (isIconOnly(props)) {
+    // An icon alone is drawn as an `IconButton`: `content.primary`, its label carried by the icon.
+    return /*#__PURE__*/_jsx(ZStack, {
+      h: TARGET,
+      ios: WHOLE_TARGET,
+      w: TARGET,
+      children: /*#__PURE__*/_jsx(Icon, {
+        accessibilityLabel: props.accessibilityLabel,
+        color: "content.primary",
+        name: props.icon
+      })
+    });
+  }
+  return props.icon ? /*#__PURE__*/_jsx(Label, {
+    icon: /*#__PURE__*/_jsx(Image, {
+      assetName: iconResourceName(props.icon),
+      modifiers: LABEL_ICON
+    }),
+    title: props.label
+  }) : props.label;
+};
+export const Menu = props => {
   useHostGuard('Menu');
+  const {
+    accessibilityLabel,
+    actions,
+    label,
+    testID
+  } = props;
+  // An icon alone carries its own label; with text, `accessibilityLabel` replaces it on the menu.
+  const modifiers = useAccessibilityModifiers({
+    accessibilityLabel: label === undefined ? undefined : accessibilityLabel
+  });
   return /*#__PURE__*/_jsx(SwiftUIMenu, {
-    label: label,
+    label: triggerOf(props),
+    modifiers: modifiers,
+    testID: testID,
     children: actions.map(action => /*#__PURE__*/_jsx(Button, {
-      label: action.label,
+      label: action.icon ? undefined : action.label,
+      modifiers: action.disabled ? DISABLED : undefined,
       onPress: action.onPress,
-      role: action.destructive ? 'destructive' : 'default'
+      role: action.destructive ? 'destructive' : 'default',
+      children: action.icon ? /*#__PURE__*/_jsx(Label, {
+        icon: /*#__PURE__*/_jsx(Image, {
+          assetName: iconResourceName(action.icon)
+        }),
+        title: action.label
+      }) : undefined
     }, action.label))
   });
 };

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

@@ -1 +1 @@
-{"version":3,"names":["Button","Menu","SwiftUIMenu","useHostGuard","jsx","_jsx","actions","label","children","map","action","onPress","role","destructive"],"sourceRoot":"../../../../src","sources":["organisms/menu/menu.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,EAAEC,IAAI,IAAIC,WAAW,QAAO,mBAAmB;AAE7D,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMJ,IAAmB,GAAGA,CAAC;EAACK,OAAO;EAAEC;AAAgB,CAAC,KAAK;EAClEJ,YAAY,CAAC,MAAM,CAAC;EAEpB,oBACEE,IAAA,CAACH,WAAW;IAACK,KAAK,EAAEA,KAAM;IAAAC,QAAA,EACvBF,OAAO,CAACG,GAAG,CAACC,MAAM,iBACjBL,IAAA,CAACL,MAAM;MAELO,KAAK,EAAEG,MAAM,CAACH,KAAM;MACpBI,OAAO,EAAED,MAAM,CAACC,OAAQ;MACxBC,IAAI,EAAEF,MAAM,CAACG,WAAW,GAAG,aAAa,GAAG;IAAU,GAHhDH,MAAM,CAACH,KAIb,CACF;EAAC,CACS,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["Button","Image","Label","Menu","SwiftUIMenu","contentShape","disabled","frame","resizable","shapes","iconResourceName","useAccessibilityModifiers","spacing","Icon","ZStack","useHostGuard","isIconOnly","jsx","_jsx","DISABLED","TARGET","WHOLE_TARGET","modifiers","circle","LABEL_ICON","height","s20","width","triggerOf","props","h","ios","w","children","accessibilityLabel","color","name","icon","assetName","title","label","actions","testID","undefined","map","action","onPress","role","destructive"],"sourceRoot":"../../../../src","sources":["organisms/menu/menu.ios.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/organisms/sheet/sheet.js

@@ -34,6 +34,7 @@ const SheetRoot = ({
   onPresent,
   ref,
   scrollable = false,
+  systemBackground = false,
   testID,
   visible
 }) => {
@@ -99,7 +100,7 @@ const SheetRoot = ({
     pointerEvents: "box-none",
     style: styles.host,
     children: /*#__PURE__*/_jsx(TrueSheet, {
-      backgroundColor: theme.color(bg),
+      backgroundColor: systemBackground && Platform.OS === 'ios' ? undefined : theme.color(bg),
       cornerRadius: CORNER_RADIUS,
       detents: detents,
       dimmed: dimmed,

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

@@ -1 +1 @@
-{"version":3,"names":["useAppTheme","TrueSheet","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","Platform","StyleSheet","View","SheetHeader","SheetScrollContext","SheetScrollView","splitSheetChildren","useSheetHeader","jsxs","_jsxs","jsx","_jsx","FIT_CONTENT","CORNER_RADIUS","OS","undefined","styles","create","host","position","SheetRoot","bg","children","detents","dimmed","dismissible","draggable","footer","grabber","onDetentChange","onDismiss","onPresent","ref","scrollable","testID","visible","theme","content","header","headerProps","sheetHeader","sheetRef","presented","programmaticDismiss","dismiss","current","Promise","resolve","present","detentIndex","resize","sheet","handleDidDismiss","handleDetentChange","event","nativeEvent","index","collapsable","pointerEvents","style","backgroundColor","color","cornerRadius","headerStyle","onDidDismiss","onDidPresent","scrollableOptions","Provider","value","scrollContext","staticLargeTitle","Sheet","Object","assign","Header","ScrollView"],"sourceRoot":"../../../../src","sources":["organisms/sheet/sheet.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useAppTheme","TrueSheet","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","Platform","StyleSheet","View","SheetHeader","SheetScrollContext","SheetScrollView","splitSheetChildren","useSheetHeader","jsxs","_jsxs","jsx","_jsx","FIT_CONTENT","CORNER_RADIUS","OS","undefined","styles","create","host","position","SheetRoot","bg","children","detents","dimmed","dismissible","draggable","footer","grabber","onDetentChange","onDismiss","onPresent","ref","scrollable","systemBackground","testID","visible","theme","content","header","headerProps","sheetHeader","sheetRef","presented","programmaticDismiss","dismiss","current","Promise","resolve","present","detentIndex","resize","sheet","handleDidDismiss","handleDetentChange","event","nativeEvent","index","collapsable","pointerEvents","style","backgroundColor","color","cornerRadius","headerStyle","onDidDismiss","onDidPresent","scrollableOptions","Provider","value","scrollContext","staticLargeTitle","Sheet","Object","assign","Header","ScrollView"],"sourceRoot":"../../../../src","sources":["organisms/sheet/sheet.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -4,6 +4,8 @@ export type BadgeTone = 'accent' | 'destructive' | 'neutral' | 'success';
 export type BadgeProps = {
     /** The text inside. */
     label: string;
+    /** Test identifier, forwarded to the native view. */
+    testID?: string;
     /** The fill and text colours. `neutral` by default. */
     tone?: BadgeTone;
 };

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

@@ -12,14 +12,18 @@ export declare const buttonTokens: (variant: ButtonVariant, disabled: boolean, t
     readonly content: 'content.primary';
     readonly fill: 'btn.bg.glass.base';
     readonly shadow: 'btn.glass';
+} | {
+    readonly content: 'content.accent';
+    readonly fill: undefined;
+    readonly shadow: undefined;
 } | {
     readonly content: 'content.primary';
     readonly fill: 'btn.bg.secondary.base';
     readonly shadow: 'btn.secondary';
 } | {
     readonly content: 'btn.content.disabled';
-    readonly fill: "btn.bg.glass.disabled" | "btn.bg.secondary.disabled" | "fill.accent.disabled" | "fill.destructive.disabled";
-    readonly shadow: "btn.accent" | "btn.destructive" | "btn.glass" | "btn.secondary";
+    readonly fill: "btn.bg.glass.disabled" | "btn.bg.secondary.disabled" | "fill.accent.disabled" | "fill.destructive.disabled" | undefined;
+    readonly shadow: "btn.accent" | "btn.destructive" | "btn.glass" | "btn.secondary" | undefined;
 };
 /**
  * The label for a button filled with an arbitrary `tint`: the on-accent white over a strong colour, the primary

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

@@ -1,6 +1,7 @@
 import type { ColorToken } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
-export type ButtonVariant = 'accent' | 'destructive' | 'glass' | 'secondary';
+import type { IconName } from '../icon';
+export type ButtonVariant = 'accent' | 'destructive' | 'glass' | 'plain' | 'secondary';
 /**
  * SwiftUI `ButtonStyle`. iOS only: Compose has no equivalent, so Android ignores it and keeps
  * rendering the variant's tokens.
@@ -11,19 +12,28 @@ export type ButtonStyleName = 'automatic' | 'bordered' | 'borderedProminent' | '
  * 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 on Android (outlined for `glass`, a `TextButton`
+ * for `plain`).
+ */
 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.
+     * `secondary`, `glass` for `glass`, `borderless` for `plain`. iOS only. Android ignores it.
      */
     buttonStyle?: ButtonStyleName;
     /** 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;
+    /**
+     * One of the app's icons, before the label and in the label's colour. iOS sets the two as a SwiftUI `Label`; Android
+     * puts the icon in the button's content row, as Material's buttons with an icon do. Screen readers read the label
+     * only.
+     */
+    icon?: IconName;
     /** The button's text. */
     label: string;
     /** Called when the button is pressed. */
@@ -33,10 +43,14 @@ 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). `plain` has no fill, so there it colours the label.
      */
     tint?: ColorToken;
-    /** The look. `accent` by default. Material has no glass, so on Android `glass` is an outlined button. */
+    /**
+     * The look. `accent` by default. Material has no glass, so on Android `glass` is an outlined button. `plain` is a
+     * text button in the accent, with no fill or border, for a lesser action beside a prominent one ("Skip", "Forgot
+     * password?"): SwiftUI's `borderless` style, Material's `TextButton`.
+     */
     variant?: ButtonVariant;
     /** Stretches the button to the full width it is offered. On by default. */
     wide?: boolean;

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

@@ -7,6 +7,8 @@ export type CheckboxProps = {
     label?: string;
     /** Called with the new value when the user toggles it. */
     onValueChange?: (value: boolean) => void;
+    /** Test identifier, forwarded to the native control (on Android the box itself, not the labelled row). */
+    testID?: string;
     /** Whether it is checked. Controlled: update it from `onValueChange`. */
     value: boolean;
 };

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

@@ -5,6 +5,8 @@ import type { ReactNode } from 'react';
  * spectrum and RGB sliders.
  */
 export type ColorPickerProps = {
+    /** Stops the user picking a colour, and dims the label and the well. */
+    disabled?: boolean;
     /** Text beside the colour well, and the Android sheet's title. */
     label?: string;
     /** Called with the colour the user picks. */

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

@@ -1,9 +1,9 @@
 import type { DatePickerComponent } from './date-picker.types';
 /**
- * The system's compact date picker: the value in a pill, and a tap on it opens the calendar popover UIKit owns. Its own
- * host, sized to the pill on both axes — a host that took the width it was given would lay the pill out against the
- * far edge of it, or past its container's — so it drops into a row the way a `Text` does. The label is the caller's,
- * beside it; the calendar is in the accent. Inside a `Screen` or `Island` it renders into that host instead (see
- * `useInsideHost`).
+ * The system's date picker, in the accent. `compact` by default: the value in a pill, and a tap on it opens the
+ * calendar popover UIKit owns. `graphical` is that calendar in place, `wheel` the value on wheels. Its own host, sized
+ * to the picker on both axes (a host that took the width it was given would lay the pill out against the far edge of
+ * it, or past its container's), so it drops into a row the way a `Text` does. The label is the caller's, beside it.
+ * Inside a `Screen` or `Island` it renders into that host instead (see `useInsideHost`).
  */
 export declare const DatePicker: DatePickerComponent;

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

@@ -1,23 +1,46 @@
 import type { ReactNode } from 'react';
 export type DatePickerMode = 'date' | 'datetime' | 'time';
+/** How SwiftUI shows the picker: a pill that opens the calendar, the calendar in place, or wheels. */
+export type DatePickerStyleName = 'compact' | 'graphical' | 'wheel';
 /**
- * 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`. Inside a `Screen` or `Island` it joins that host instead, beside a native `Text` label.
+ * A date or time picker: SwiftUI's `DatePicker` on iOS (a pill by default, a calendar or wheels with
+ * `datePickerStyle`), a field that opens Material's picker dialog on a tap on Android, or Material's calendar in place
+ * with `datePickerStyle="graphical"`. 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`. Inside a `Screen` or `Island` it joins that host instead, beside a
+ * native `Text` label.
  */
 export type DatePickerProps = {
+    /**
+     * SwiftUI's date picker style. `compact` by default: the value in a pill, which opens the calendar in a popover.
+     * `graphical` is the calendar in place, a month at a time, with the time under it in `datetime` mode: what a screen
+     * built around picking a day wants. `wheel` puts the value on wheels. Android shows Material's calendar in place for
+     * `graphical` in `date` and `datetime` modes (without its title and headline); otherwise it keeps its field and
+     * dialog, since Material has no wheel.
+     */
+    datePickerStyle?: DatePickerStyleName;
+    /**
+     * Stops the user changing the date, and dims the picker. Material's calendar has no disabled state of its own, so a
+     * `graphical` picker on Android is dimmed and offers only the selected day.
+     */
+    disabled?: boolean;
     /** The latest date that can be picked. Android ignores it in `time` mode. */
     max?: Date;
     /** The earliest date that can be picked. Android ignores it in `time` mode. */
     min?: Date;
     /**
-     * What it picks. `date` by default. Android has no combined dialog, so there `datetime` picks the date and keeps
-     * `value`'s time of day.
+     * What it picks. `date` by default. Android has no combined dialog or calendar, so there `datetime` picks the date
+     * and keeps `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 or a day in the calendar
+     * is tapped.
+     */
     onValueChange?: (date: Date) => void;
-    /** Test identifier, on the native picker on iOS and on the tappable field on Android. */
+    /**
+     * Test identifier, on the native picker on iOS and on Android's calendar, and on the tappable field elsewhere on
+     * Android.
+     */
     testID?: string;
     /** The selected date. Controlled: update it from `onValueChange`. */
     value: Date;

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

@@ -1,2 +1,6 @@
 import type { DividerComponent } from './divider.types';
+/**
+ * SwiftUI's divider, which turns with its stack: vertical in an `HStack`, horizontal anywhere else. So `axis`, which
+ * Android needs to pick its divider, has nothing to do here.
+ */
 export declare const Divider: DividerComponent;

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

@@ -1,10 +1,21 @@
 import type { ColorToken } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
-/** A horizontal hairline: SwiftUI `Divider` / Compose `HorizontalDivider`. */
+/** Which way the line runs. */
+export type DividerAxis = 'horizontal' | 'vertical';
+/**
+ * A hairline between views: SwiftUI `Divider` / Compose `HorizontalDivider`, or `VerticalDivider` with
+ * `axis="vertical"`.
+ */
 export type DividerProps = {
+    /**
+     * Which way the line runs. `horizontal` by default: across a `VStack`. `vertical` stands it up between the children
+     * of an `HStack`, as tall as the stack, so give the stack a height (`h`). iOS ignores it: SwiftUI's divider turns by
+     * itself, vertical in an `HStack` and horizontal anywhere else. Set it anyway, so Android draws the same.
+     */
+    axis?: DividerAxis;
     /** 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. */
     testID?: string;
 };
 export type DividerComponent = (props: DividerProps) => ReactNode;