@hzblj/kara-components 0.16.0 → 0.18.0

package/lib/module/atoms/color-picker/color-picker.ios.js

@@ -1,9 +1,18 @@
 "use strict";
 
 import { ColorPicker as SwiftUIColorPicker } from '@expo/ui/swift-ui';
+import { disabled as disabledModifier, labelsHidden, opacity as opacityModifier } from '@expo/ui/swift-ui/modifiers';
+import { opacity } from '@hzblj/kara-theme';
 import { useHostGuard } from "../../host-context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { HStack } from "../h-stack/index.js";
+import { Spacer } from "../spacer/index.js";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// iOS 27 stops a disabled picker but draws its label and well at full strength: the label is then kara's own text,
+// dimmed, and the well takes the opacity.
+const DISABLED = [labelsHidden(), disabledModifier(true), opacityModifier(opacity.o40)];
 export const ColorPicker = ({
+  disabled = false,
   label,
   onValueChange,
   supportsOpacity = false,
@@ -11,12 +20,25 @@ export const ColorPicker = ({
   value
 }) => {
   useHostGuard('ColorPicker');
-  return /*#__PURE__*/_jsx(SwiftUIColorPicker, {
+  const picker = /*#__PURE__*/_jsx(SwiftUIColorPicker, {
     label: label,
+    modifiers: disabled ? DISABLED : undefined,
     onSelectionChange: onValueChange,
     selection: value,
     supportsOpacity: supportsOpacity,
     testID: testID
   });
+  if (!disabled) {
+    return picker;
+  }
+  return /*#__PURE__*/_jsxs(HStack, {
+    align: "center",
+    spacing: "s12",
+    wide: true,
+    children: [label ? /*#__PURE__*/_jsx(Text, {
+      color: "content.tertiary",
+      children: label
+    }) : null, /*#__PURE__*/_jsx(Spacer, {}), picker]
+  });
 };
 //# sourceMappingURL=color-picker.ios.js.map

package/lib/module/atoms/color-picker/color-picker.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["ColorPicker","SwiftUIColorPicker","useHostGuard","jsx","_jsx","label","onValueChange","supportsOpacity","testID","value","onSelectionChange","selection"],"sourceRoot":"../../../../src","sources":["atoms/color-picker/color-picker.ios.tsx"],"mappings":";;AAAA,SAAQA,WAAW,IAAIC,kBAAkB,QAAO,mBAAmB;AAEnE,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMJ,WAAiC,GAAGA,CAAC;EAChDK,KAAK;EACLC,aAAa;EACbC,eAAe,GAAG,KAAK;EACvBC,MAAM;EACNC;AACgB,CAAC,KAAK;EACtBP,YAAY,CAAC,aAAa,CAAC;EAE3B,oBACEE,IAAA,CAACH,kBAAkB;IACjBI,KAAK,EAAEA,KAAM;IACbK,iBAAiB,EAAEJ,aAAc;IACjCK,SAAS,EAAEF,KAAM;IACjBF,eAAe,EAAEA,eAAgB;IACjCC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["ColorPicker","SwiftUIColorPicker","disabled","disabledModifier","labelsHidden","opacity","opacityModifier","useHostGuard","HStack","Spacer","Text","jsx","_jsx","jsxs","_jsxs","DISABLED","o40","label","onValueChange","supportsOpacity","testID","value","picker","modifiers","undefined","onSelectionChange","selection","align","spacing","wide","children","color"],"sourceRoot":"../../../../src","sources":["atoms/color-picker/color-picker.ios.tsx"],"mappings":";;AAAA,SAAQA,WAAW,IAAIC,kBAAkB,QAAO,mBAAmB;AACnE,SAAQC,QAAQ,IAAIC,gBAAgB,EAAEC,YAAY,EAAEC,OAAO,IAAIC,eAAe,QAAO,6BAA6B;AAClH,SAAQD,OAAO,QAAO,mBAAmB;AAEzC,SAAQE,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,MAAM,QAAO,qBAAY;AACjC,SAAQC,MAAM,QAAO,oBAAW;AAChC,SAAQC,IAAI,QAAO,kBAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG5B;AACA;AACA,MAAMC,QAAQ,GAAG,CAACX,YAAY,CAAC,CAAC,EAAED,gBAAgB,CAAC,IAAI,CAAC,EAAEG,eAAe,CAACD,OAAO,CAACW,GAAG,CAAC,CAAC;AAEvF,OAAO,MAAMhB,WAAiC,GAAGA,CAAC;EAChDE,QAAQ,GAAG,KAAK;EAChBe,KAAK;EACLC,aAAa;EACbC,eAAe,GAAG,KAAK;EACvBC,MAAM;EACNC;AACgB,CAAC,KAAK;EACtBd,YAAY,CAAC,aAAa,CAAC;EAE3B,MAAMe,MAAM,gBACVV,IAAA,CAACX,kBAAkB;IACjBgB,KAAK,EAAEA,KAAM;IACbM,SAAS,EAAErB,QAAQ,GAAGa,QAAQ,GAAGS,SAAU;IAC3CC,iBAAiB,EAAEP,aAAc;IACjCQ,SAAS,EAAEL,KAAM;IACjBF,eAAe,EAAEA,eAAgB;IACjCC,MAAM,EAAEA;EAAO,CAChB,CACF;EAED,IAAI,CAAClB,QAAQ,EAAE;IACb,OAAOoB,MAAM;EACf;EAEA,oBACER,KAAA,CAACN,MAAM;IAACmB,KAAK,EAAC,QAAQ;IAACC,OAAO,EAAC,KAAK;IAACC,IAAI;IAAAC,QAAA,GACtCb,KAAK,gBAAGL,IAAA,CAACF,IAAI;MAACqB,KAAK,EAAC,kBAAkB;MAAAD,QAAA,EAAEb;IAAK,CAAO,CAAC,GAAG,IAAI,eAC7DL,IAAA,CAACH,MAAM,IAAE,CAAC,EACTa,MAAM;EAAA,CACD,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/atoms/date-picker/date-picker.android.js

@@ -1,14 +1,19 @@
 "use strict";
 
 import { DateTimePicker } from '@expo/ui/community/datetime-picker';
-import { RNHostView } from '@expo/ui/jetpack-compose';
-import { useAppTheme } from '@hzblj/kara-theme';
-import { useCallback, useState } from 'react';
+import { DateTimePicker as ComposeDateTimePicker, Host, RNHostView } from '@expo/ui/jetpack-compose';
+import { alpha, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { opacity, useAppTheme } from '@hzblj/kara-theme';
+import { useCallback, useMemo, useState } from 'react';
 import { useInsideHost } from "../../host-context.js";
 import { Box } from "../box/index.js";
 import { Pressable } from "../pressable/index.js";
 import { RnText } from "../rn-text/index.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const MATCH_HEIGHT_ONLY = {
+  horizontal: false,
+  vertical: true
+};
 const formatted = (value, mode) => {
   if (mode === 'time') {
     return value.toLocaleTimeString(undefined, {
@@ -27,20 +32,76 @@ const formatted = (value, mode) => {
   })}` : date;
 };
 
+/** Material's calendar counts in UTC days: `value`'s local day goes in as that day's UTC midnight. */
+const utcDayOf = value => new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate())).toISOString();
+
+/** The UTC day the calendar reports, back on `value`'s local time of day. */
+const localDayOf = (utcDay, value) => {
+  const next = new Date(value);
+  next.setFullYear(utcDay.getUTCFullYear(), utcDay.getUTCMonth(), utcDay.getUTCDate());
+  return next;
+};
+
 /**
- * The value as a field that opens Material's date picker dialog on a tap. Android's picker *is* a dialog — mounted, it
- * opens — so it is mounted only while open, and unmounted on confirm or dismiss, as the component asks its caller to.
- * Both are React Native views; inside a `Screen` or `Island` `RNHostView` carries them into that host, sized to the
- * field (see `useInsideHost`).
+ * Material's calendar in place, for `graphical`: the month and its days, without the title and headline its dialog
+ * shows, in the accent. It also reports its day when it first shows and whenever `value` hands it a new one, so only a
+ * day that differs from `value` goes out. It has no disabled state, so a disabled one is dimmed and offers only the
+ * selected day.
  */
-export const DatePicker = ({
+const Calendar = ({
+  disabled,
   max,
   min,
-  mode = 'date',
   onValueChange,
   testID,
   value
 }) => {
+  const theme = useAppTheme();
+  const onDateSelected = useCallback(date => {
+    const next = localDayOf(date, value);
+    if (!disabled && next.getTime() !== value.getTime()) {
+      onValueChange?.(next);
+    }
+  }, [disabled, onValueChange, value]);
+  const modifiers = useMemo(() => [...(disabled ? [alpha(opacity.o40)] : []), ...(testID ? [testIdModifier(testID)] : [])], [disabled, testID]);
+  return /*#__PURE__*/_jsx(ComposeDateTimePicker, {
+    color: theme.color('fill.accent.primary'),
+    displayedComponents: "date",
+    initialDate: utcDayOf(value),
+    modifiers: modifiers,
+    onDateSelected: onDateSelected,
+    selectableDates: disabled ? {
+      end: value,
+      start: value
+    } : min || max ? {
+      end: max,
+      start: min
+    } : undefined,
+    showHeadline: false,
+    showTitle: false,
+    showVariantToggle: false,
+    variant: "picker"
+  });
+};
+
+/**
+ * The value as a field that opens Material's date picker dialog on a tap. Android's picker *is* a dialog (mounted, it
+ * opens), so it is mounted only while open, and unmounted on confirm or dismiss, as the component asks its caller to.
+ * Both are React Native views; inside a `Screen` or `Island` `RNHostView` carries them into that host, sized to the
+ * field (see `useInsideHost`). With `datePickerStyle="graphical"` and a date to pick, it is Material's calendar in
+ * place instead: a Compose view, in a host of its own the width of its container, or straight in the enclosing one.
+ */
+export const DatePicker = props => {
+  const {
+    datePickerStyle = 'compact',
+    disabled = false,
+    max,
+    min,
+    mode = 'date',
+    onValueChange,
+    testID,
+    value
+  } = props;
   const theme = useAppTheme();
   const insideHost = useInsideHost();
   const [open, setOpen] = useState(false);
@@ -50,20 +111,34 @@ export const DatePicker = ({
     setOpen(false);
     onValueChange?.(date);
   }, [onValueChange]);
+  if (datePickerStyle === 'graphical' && mode !== 'time') {
+    const calendar = /*#__PURE__*/_jsx(Calendar, {
+      ...props,
+      disabled: disabled
+    });
+    return insideHost ? calendar : /*#__PURE__*/_jsx(Host, {
+      colorScheme: theme.dark ? 'dark' : 'light',
+      matchContents: MATCH_HEIGHT_ONLY,
+      seedColor: theme.materialSeed,
+      children: calendar
+    });
+  }
   const field = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Pressable, {
       alignSelf: "flex-start",
       bg: "fill.tertiary",
       borderRadius: "medium",
+      disabled: disabled,
       onPress: show,
       px: "s12",
       py: "s8",
       testID: testID,
       children: /*#__PURE__*/_jsx(RnText, {
+        color: disabled ? 'content.tertiary' : 'content.primary',
         variant: "body",
         children: formatted(value, mode)
       })
-    }), open ? /*#__PURE__*/_jsx(DateTimePicker, {
+    }), open && !disabled ? /*#__PURE__*/_jsx(DateTimePicker, {
       accentColor: theme.colorString('fill.accent.primary'),
       maximumDate: max,
       minimumDate: min,

package/lib/module/atoms/date-picker/date-picker.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["DateTimePicker","RNHostView","useAppTheme","useCallback","useState","useInsideHost","Box","Pressable","RnText","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","formatted","value","mode","toLocaleTimeString","undefined","hour","minute","date","toLocaleDateString","day","month","year","DatePicker","max","min","onValueChange","testID","theme","insideHost","open","setOpen","show","hide","onChange","_event","field","children","alignSelf","bg","borderRadius","onPress","px","py","variant","accentColor","colorString","maximumDate","minimumDate","onDismiss","presentation","matchContents"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.android.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["DateTimePicker","ComposeDateTimePicker","Host","RNHostView","alpha","testID","testIdModifier","opacity","useAppTheme","useCallback","useMemo","useState","useInsideHost","Box","Pressable","RnText","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","MATCH_HEIGHT_ONLY","horizontal","vertical","formatted","value","mode","toLocaleTimeString","undefined","hour","minute","date","toLocaleDateString","day","month","year","utcDayOf","Date","UTC","getFullYear","getMonth","getDate","toISOString","localDayOf","utcDay","next","setFullYear","getUTCFullYear","getUTCMonth","getUTCDate","Calendar","disabled","max","min","onValueChange","theme","onDateSelected","getTime","modifiers","o40","color","displayedComponents","initialDate","selectableDates","end","start","showHeadline","showTitle","showVariantToggle","variant","DatePicker","props","datePickerStyle","insideHost","open","setOpen","show","hide","onChange","_event","calendar","colorScheme","dark","matchContents","seedColor","materialSeed","children","field","alignSelf","bg","borderRadius","onPress","px","py","accentColor","colorString","maximumDate","minimumDate","onDismiss","presentation"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/date-picker/date-picker.ios.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { Host, DatePicker as SwiftUIDatePicker } from '@expo/ui/swift-ui';
-import { datePickerStyle, labelsHidden, tint } from '@expo/ui/swift-ui/modifiers';
+import { datePickerStyle as datePickerStyleModifier, disabled as disabledModifier, labelsHidden, tint } from '@expo/ui/swift-ui/modifiers';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useInsideHost } from "../../host-context.js";
@@ -13,13 +13,15 @@ const COMPONENTS = {
 };
 
 /**
- * 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 const DatePicker = ({
+  datePickerStyle = 'compact',
+  disabled = false,
   max,
   min,
   mode = 'date',
@@ -29,7 +31,7 @@ export const DatePicker = ({
 }) => {
   const theme = useAppTheme();
   const insideHost = useInsideHost();
-  const modifiers = useMemo(() => [datePickerStyle('compact'), labelsHidden(), tint(theme.color('fill.accent.primary'))], [theme]);
+  const modifiers = useMemo(() => [datePickerStyleModifier(datePickerStyle), labelsHidden(), tint(theme.color('fill.accent.primary')), ...(disabled ? [disabledModifier(true)] : [])], [datePickerStyle, disabled, theme]);
   const picker = /*#__PURE__*/_jsx(SwiftUIDatePicker, {
     displayedComponents: [...COMPONENTS[mode]],
     modifiers: modifiers,

package/lib/module/atoms/date-picker/date-picker.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Host","DatePicker","SwiftUIDatePicker","datePickerStyle","labelsHidden","tint","useAppTheme","useMemo","useInsideHost","jsx","_jsx","COMPONENTS","date","datetime","time","max","min","mode","onValueChange","testID","value","theme","insideHost","modifiers","color","picker","displayedComponents","onDateChange","range","end","start","undefined","selection","colorScheme","dark","matchContents","children"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.ios.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,UAAU,IAAIC,iBAAiB,QAAO,mBAAmB;AACvE,SAAQC,eAAe,EAAEC,YAAY,EAAEC,IAAI,QAAO,6BAA6B;AAC/E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE,CAAC,MAAM,CAAC;EACdC,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC;EACnCC,IAAI,EAAE,CAAC,eAAe;AACxB,CAAyE;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMb,UAA+B,GAAGA,CAAC;EAC9Cc,GAAG;EACHC,GAAG;EACHC,IAAI,GAAG,MAAM;EACbC,aAAa;EACbC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAMC,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,UAAU,GAAGd,aAAa,CAAC,CAAC;EAElC,MAAMe,SAAS,GAAGhB,OAAO,CACvB,MAAM,CAACJ,eAAe,CAAC,SAAS,CAAC,EAAEC,YAAY,CAAC,CAAC,EAAEC,IAAI,CAACgB,KAAK,CAACG,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAC5F,CAACH,KAAK,CACR,CAAC;EAED,MAAMI,MAAM,gBACVf,IAAA,CAACR,iBAAiB;IAChBwB,mBAAmB,EAAE,CAAC,GAAGf,UAAU,CAACM,IAAI,CAAC,CAAE;IAC3CM,SAAS,EAAEA,SAAU;IACrBI,YAAY,EAAET,aAAc;IAC5BU,KAAK,EAAEZ,GAAG,IAAID,GAAG,GAAG;MAACc,GAAG,EAAEd,GAAG;MAAEe,KAAK,EAAEd;IAAG,CAAC,GAAGe,SAAU;IACvDC,SAAS,EAAEZ,KAAM;IACjBD,MAAM,EAAEA;EAAO,CAChB,CACF;EAED,IAAIG,UAAU,EAAE;IACd,OAAOG,MAAM;EACf;EAEA,oBACEf,IAAA,CAACV,IAAI;IAACiC,WAAW,EAAEZ,KAAK,CAACa,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,aAAa;IAAAC,QAAA,EAC5DX;EAAM,CACH,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["Host","DatePicker","SwiftUIDatePicker","datePickerStyle","datePickerStyleModifier","disabled","disabledModifier","labelsHidden","tint","useAppTheme","useMemo","useInsideHost","jsx","_jsx","COMPONENTS","date","datetime","time","max","min","mode","onValueChange","testID","value","theme","insideHost","modifiers","color","picker","displayedComponents","onDateChange","range","end","start","undefined","selection","colorScheme","dark","matchContents","children"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.ios.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,UAAU,IAAIC,iBAAiB,QAAO,mBAAmB;AACvE,SACEC,eAAe,IAAIC,uBAAuB,EAC1CC,QAAQ,IAAIC,gBAAgB,EAC5BC,YAAY,EACZC,IAAI,QACC,6BAA6B;AACpC,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE,CAAC,MAAM,CAAC;EACdC,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC;EACnCC,IAAI,EAAE,CAAC,eAAe;AACxB,CAAyE;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMhB,UAA+B,GAAGA,CAAC;EAC9CE,eAAe,GAAG,SAAS;EAC3BE,QAAQ,GAAG,KAAK;EAChBa,GAAG;EACHC,GAAG;EACHC,IAAI,GAAG,MAAM;EACbC,aAAa;EACbC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAMC,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,UAAU,GAAGd,aAAa,CAAC,CAAC;EAElC,MAAMe,SAAS,GAAGhB,OAAO,CACvB,MAAM,CACJN,uBAAuB,CAACD,eAAe,CAAC,EACxCI,YAAY,CAAC,CAAC,EACdC,IAAI,CAACgB,KAAK,CAACG,KAAK,CAAC,qBAAqB,CAAC,CAAC,EACxC,IAAItB,QAAQ,GAAG,CAACC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC,CAC9C,EACD,CAACH,eAAe,EAAEE,QAAQ,EAAEmB,KAAK,CACnC,CAAC;EAED,MAAMI,MAAM,gBACVf,IAAA,CAACX,iBAAiB;IAChB2B,mBAAmB,EAAE,CAAC,GAAGf,UAAU,CAACM,IAAI,CAAC,CAAE;IAC3CM,SAAS,EAAEA,SAAU;IACrBI,YAAY,EAAET,aAAc;IAC5BU,KAAK,EAAEZ,GAAG,IAAID,GAAG,GAAG;MAACc,GAAG,EAAEd,GAAG;MAAEe,KAAK,EAAEd;IAAG,CAAC,GAAGe,SAAU;IACvDC,SAAS,EAAEZ,KAAM;IACjBD,MAAM,EAAEA;EAAO,CAChB,CACF;EAED,IAAIG,UAAU,EAAE;IACd,OAAOG,MAAM;EACf;EAEA,oBACEf,IAAA,CAACb,IAAI;IAACoC,WAAW,EAAEZ,KAAK,CAACa,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,aAAa;IAAAC,QAAA,EAC5DX;EAAM,CACH,CAAC;AAEX,CAAC","ignoreList":[]}

package/lib/module/atoms/divider/divider.android.js

@@ -1,16 +1,29 @@
 "use strict";
 
-import { HorizontalDivider } from '@expo/ui/jetpack-compose';
+import { HorizontalDivider, VerticalDivider } from '@expo/ui/jetpack-compose';
+import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
 import { useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Compose's dividers. Unlike SwiftUI's, a Compose divider does not turn with its stack, so `axis` picks the one:
+ * `VerticalDivider` fills the height of the `Row` around it.
+ */
 export const Divider = ({
-  color = 'border.tertiary'
+  axis = 'horizontal',
+  color = 'border.tertiary',
+  testID
 }) => {
   useHostGuard('Divider');
   const theme = useAppTheme();
-  return /*#__PURE__*/_jsx(HorizontalDivider, {
-    color: theme.color(color)
+  const modifiers = useMemo(() => testID ? [testIdModifier(testID)] : undefined, [testID]);
+  return axis === 'vertical' ? /*#__PURE__*/_jsx(VerticalDivider, {
+    color: theme.color(color),
+    modifiers: modifiers
+  }) : /*#__PURE__*/_jsx(HorizontalDivider, {
+    color: theme.color(color),
+    modifiers: modifiers
   });
 };
 //# sourceMappingURL=divider.android.js.map

package/lib/module/atoms/divider/divider.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["HorizontalDivider","useAppTheme","useHostGuard","jsx","_jsx","Divider","color","theme"],"sourceRoot":"../../../../src","sources":["atoms/divider/divider.android.tsx"],"mappings":";;AAAA,SAAQA,iBAAiB,QAAO,0BAA0B;AAC1D,SAAQC,WAAW,QAAO,mBAAmB;AAE7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,OAAyB,GAAGA,CAAC;EAACC,KAAK,GAAG;AAA+B,CAAC,KAAK;EACtFJ,YAAY,CAAC,SAAS,CAAC;EACvB,MAAMK,KAAK,GAAGN,WAAW,CAAC,CAAC;EAE3B,oBAAOG,IAAA,CAACJ,iBAAiB;IAACM,KAAK,EAAEC,KAAK,CAACD,KAAK,CAACA,KAAK;EAAE,CAAE,CAAC;AACzD,CAAC","ignoreList":[]}
+{"version":3,"names":["HorizontalDivider","VerticalDivider","testID","testIdModifier","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Divider","axis","color","theme","modifiers","undefined"],"sourceRoot":"../../../../src","sources":["atoms/divider/divider.android.tsx"],"mappings":";;AAAA,SAAQA,iBAAiB,EAAEC,eAAe,QAAO,0BAA0B;AAC3E,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C;AACA;AACA;AACA;AACA,OAAO,MAAMC,OAAyB,GAAGA,CAAC;EAACC,IAAI,GAAG,YAAY;EAAEC,KAAK,GAAG,iBAAiB;EAAET;AAAoB,CAAC,KAAK;EACnHI,YAAY,CAAC,SAAS,CAAC;EACvB,MAAMM,KAAK,GAAGR,WAAW,CAAC,CAAC;EAC3B,MAAMS,SAAS,GAAGR,OAAO,CAAC,MAAOH,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAGY,SAAU,EAAE,CAACZ,MAAM,CAAC,CAAC;EAE1F,OAAOQ,IAAI,KAAK,UAAU,gBACxBF,IAAA,CAACP,eAAe;IAACU,KAAK,EAAEC,KAAK,CAACD,KAAK,CAACA,KAAK,CAAE;IAACE,SAAS,EAAEA;EAAU,CAAE,CAAC,gBAEpEL,IAAA,CAACR,iBAAiB;IAACW,KAAK,EAAEC,KAAK,CAACD,KAAK,CAACA,KAAK,CAAE;IAACE,SAAS,EAAEA;EAAU,CAAE,CACtE;AACH,CAAC","ignoreList":[]}

package/lib/module/atoms/divider/divider.ios.js

@@ -6,6 +6,10 @@ import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 const Divider = ({
   color = 'border.tertiary',
   testID

package/lib/module/atoms/divider/divider.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Divider","SwiftUIDivider","background","useAppTheme","useMemo","useHostGuard","jsx","_jsx","color","testID","theme","modifiers"],"sourceRoot":"../../../../src","sources":["atoms/divider/divider.ios.tsx"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,cAAc,QAAO,mBAAmB;AAC3D,SAAQC,UAAU,QAAO,6BAA6B;AACtD,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMP,OAAyB,GAAGA,CAAC;EAACQ,KAAK,GAAG,iBAAiB;EAAEC;AAAoB,CAAC,KAAK;EAC9FJ,YAAY,CAAC,SAAS,CAAC;EACvB,MAAMK,KAAK,GAAGP,WAAW,CAAC,CAAC;EAC3B,MAAMQ,SAAS,GAAGP,OAAO,CAAC,MAAM,CAACF,UAAU,CAACQ,KAAK,CAACF,KAAK,CAACA,KAAK,CAAC,CAAC,CAAC,EAAE,CAACA,KAAK,EAAEE,KAAK,CAAC,CAAC;EAEjF,oBAAOH,IAAA,CAACN,cAAc;IAACU,SAAS,EAAEA,SAAU;IAACF,MAAM,EAAEA;EAAO,CAAE,CAAC;AACjE,CAAC","ignoreList":[]}
+{"version":3,"names":["Divider","SwiftUIDivider","background","useAppTheme","useMemo","useHostGuard","jsx","_jsx","color","testID","theme","modifiers"],"sourceRoot":"../../../../src","sources":["atoms/divider/divider.ios.tsx"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,cAAc,QAAO,mBAAmB;AAC3D,SAAQC,UAAU,QAAO,6BAA6B;AACtD,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C;AACA;AACA;AACA;AACA,OAAO,MAAMP,OAAyB,GAAGA,CAAC;EAACQ,KAAK,GAAG,iBAAiB;EAAEC;AAAoB,CAAC,KAAK;EAC9FJ,YAAY,CAAC,SAAS,CAAC;EACvB,MAAMK,KAAK,GAAGP,WAAW,CAAC,CAAC;EAC3B,MAAMQ,SAAS,GAAGP,OAAO,CAAC,MAAM,CAACF,UAAU,CAACQ,KAAK,CAACF,KAAK,CAACA,KAAK,CAAC,CAAC,CAAC,EAAE,CAACA,KAAK,EAAEE,KAAK,CAAC,CAAC;EAEjF,oBAAOH,IAAA,CAACN,cAAc;IAACU,SAAS,EAAEA,SAAU;IAACF,MAAM,EAAEA;EAAO,CAAE,CAAC;AACjE,CAAC","ignoreList":[]}

package/lib/module/atoms/fab/fab.android.js

@@ -1,31 +1,87 @@
 "use strict";
 
-import { FloatingActionButton } from '@expo/ui/jetpack-compose';
+import { ExtendedFloatingActionButton, FloatingActionButton, LargeFloatingActionButton, SmallFloatingActionButton } from '@expo/ui/jetpack-compose';
+import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
 import { useAccessibilityModifiers } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { Icon } from "../icon/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Material's three FABs, and the icon each draws (`FloatingActionButtonDefaults.LargeIconSize` is 36dp). */
+const SIZES = {
+  large: {
+    icon: 's36',
+    Material: LargeFloatingActionButton
+  },
+  regular: {
+    icon: 's24',
+    Material: FloatingActionButton
+  },
+  small: {
+    icon: 's24',
+    Material: SmallFloatingActionButton
+  }
+};
 export const Fab = ({
   accessibilityHint,
   accessibilityLabel,
+  label,
   name,
-  onPress
+  onPress,
+  size = 'regular',
+  testID
 }) => {
   useHostGuard('Fab');
   const theme = useAppTheme();
-  const modifiers = useAccessibilityModifiers({
+  const accessibilityModifiers = useAccessibilityModifiers({
     accessibilityHint
   }, accessibilityHint !== undefined);
-  return /*#__PURE__*/_jsx(FloatingActionButton, {
-    containerColor: theme.color('fill.accent.primary'),
+  const modifiers = useMemo(() => testID ? [testIdModifier(testID), ...accessibilityModifiers] : accessibilityModifiers, [accessibilityModifiers, testID]);
+  const containerColor = theme.color('fill.accent.primary');
+
+  /*
+   * `@expo/ui`'s FABs are slot-based: content outside `.Icon` (and the extended one's `.Text`) is not composed at all.
+   * The label rides on the icon, as for every FAB, and the text beside it is hidden from TalkBack so the button is not
+   * read twice; a label on the FAB itself would clear the click inside it, which Material's FAB composes after our
+   * modifiers.
+   */
+  if (label) {
+    return /*#__PURE__*/_jsxs(ExtendedFloatingActionButton, {
+      containerColor: containerColor,
+      modifiers: modifiers,
+      onClick: onPress,
+      children: [/*#__PURE__*/_jsx(ExtendedFloatingActionButton.Icon, {
+        children: /*#__PURE__*/_jsx(Icon, {
+          accessibilityLabel: accessibilityLabel,
+          color: "content.on.accent",
+          name: name
+        })
+      }), /*#__PURE__*/_jsx(ExtendedFloatingActionButton.Text, {
+        children: /*#__PURE__*/_jsx(Text, {
+          accessibilityHidden: true,
+          color: "content.on.accent",
+          variant: "body",
+          children: label
+        })
+      })]
+    });
+  }
+  const {
+    icon,
+    Material
+  } = SIZES[size];
+  return /*#__PURE__*/_jsx(Material, {
+    containerColor: containerColor,
     modifiers: modifiers,
     onClick: onPress,
-    children: /*#__PURE__*/_jsx(FloatingActionButton.Icon, {
+    children: /*#__PURE__*/_jsx(Material.Icon, {
       children: /*#__PURE__*/_jsx(Icon, {
         accessibilityLabel: accessibilityLabel,
         color: "content.on.accent",
-        name: name
+        name: name,
+        size: icon
       })
     })
   });

package/lib/module/atoms/fab/fab.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["FloatingActionButton","useAccessibilityModifiers","useAppTheme","useHostGuard","Icon","jsx","_jsx","Fab","accessibilityHint","accessibilityLabel","name","onPress","theme","modifiers","undefined","containerColor","color","onClick","children"],"sourceRoot":"../../../../src","sources":["atoms/fab/fab.android.tsx"],"mappings":";;AAAA,SAAQA,oBAAoB,QAAO,0BAA0B;AAC7D,SAAQC,yBAAyB,QAAO,gBAAgB;AACxD,SAAQC,WAAW,QAAO,mBAAmB;AAE7C,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,IAAI,QAAO,kBAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG5B,OAAO,MAAMC,GAAiB,GAAGA,CAAC;EAACC,iBAAiB;EAAEC,kBAAkB;EAAEC,IAAI;EAAEC;AAAiB,CAAC,KAAK;EACrGR,YAAY,CAAC,KAAK,CAAC;EAEnB,MAAMS,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,SAAS,GAAGZ,yBAAyB,CAAC;IAACO;EAAiB,CAAC,EAAEA,iBAAiB,KAAKM,SAAS,CAAC;EAEjG,oBACER,IAAA,CAACN,oBAAoB;IAACe,cAAc,EAAEH,KAAK,CAACI,KAAK,CAAC,qBAAqB,CAAE;IAACH,SAAS,EAAEA,SAAU;IAACI,OAAO,EAAEN,OAAQ;IAAAO,QAAA,eAE/GZ,IAAA,CAACN,oBAAoB,CAACI,IAAI;MAAAc,QAAA,eACxBZ,IAAA,CAACF,IAAI;QAACK,kBAAkB,EAAEA,kBAAmB;QAACO,KAAK,EAAC,mBAAmB;QAACN,IAAI,EAAEA;MAAK,CAAE;IAAC,CAC7D;EAAC,CACR,CAAC;AAE3B,CAAC","ignoreList":[]}
+{"version":3,"names":["ExtendedFloatingActionButton","FloatingActionButton","LargeFloatingActionButton","SmallFloatingActionButton","testID","testIdModifier","useAccessibilityModifiers","useAppTheme","useMemo","useHostGuard","Icon","Text","jsx","_jsx","jsxs","_jsxs","SIZES","large","icon","Material","regular","small","Fab","accessibilityHint","accessibilityLabel","label","name","onPress","size","theme","accessibilityModifiers","undefined","modifiers","containerColor","color","onClick","children","accessibilityHidden","variant"],"sourceRoot":"../../../../src","sources":["atoms/fab/fab.android.tsx"],"mappings":";;AAAA,SACEA,4BAA4B,EAC5BC,oBAAoB,EACpBC,yBAAyB,EACzBC,yBAAyB,QACpB,0BAA0B;AACjC,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,yBAAyB,QAAO,gBAAgB;AACxD,SAAwBC,WAAW,QAAO,mBAAmB;AAC7D,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,IAAI,QAAO,kBAAS;AAC5B,SAAQC,IAAI,QAAO,kBAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG5B;AACA,MAAMC,KAAK,GAAG;EACZC,KAAK,EAAE;IAACC,IAAI,EAAE,KAAK;IAAEC,QAAQ,EAAEjB;EAAyB,CAAC;EACzDkB,OAAO,EAAE;IAACF,IAAI,EAAE,KAAK;IAAEC,QAAQ,EAAElB;EAAoB,CAAC;EACtDoB,KAAK,EAAE;IAACH,IAAI,EAAE,KAAK;IAAEC,QAAQ,EAAEhB;EAAyB;AAC1D,CAA0E;AAE1E,OAAO,MAAMmB,GAAiB,GAAGA,CAAC;EAChCC,iBAAiB;EACjBC,kBAAkB;EAClBC,KAAK;EACLC,IAAI;EACJC,OAAO;EACPC,IAAI,GAAG,SAAS;EAChBxB;AACQ,CAAC,KAAK;EACdK,YAAY,CAAC,KAAK,CAAC;EAEnB,MAAMoB,KAAK,GAAGtB,WAAW,CAAC,CAAC;EAC3B,MAAMuB,sBAAsB,GAAGxB,yBAAyB,CAAC;IAACiB;EAAiB,CAAC,EAAEA,iBAAiB,KAAKQ,SAAS,CAAC;EAC9G,MAAMC,SAAS,GAAGxB,OAAO,CACvB,MAAOJ,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,EAAE,GAAG0B,sBAAsB,CAAC,GAAGA,sBAAuB,EAC7F,CAACA,sBAAsB,EAAE1B,MAAM,CACjC,CAAC;EACD,MAAM6B,cAAc,GAAGJ,KAAK,CAACK,KAAK,CAAC,qBAAqB,CAAC;;EAEzD;AACF;AACA;AACA;AACA;AACA;EACE,IAAIT,KAAK,EAAE;IACT,oBACEV,KAAA,CAACf,4BAA4B;MAACiC,cAAc,EAAEA,cAAe;MAACD,SAAS,EAAEA,SAAU;MAACG,OAAO,EAAER,OAAQ;MAAAS,QAAA,gBACnGvB,IAAA,CAACb,4BAA4B,CAACU,IAAI;QAAA0B,QAAA,eAChCvB,IAAA,CAACH,IAAI;UAACc,kBAAkB,EAAEA,kBAAmB;UAACU,KAAK,EAAC,mBAAmB;UAACR,IAAI,EAAEA;QAAK,CAAE;MAAC,CACrD,CAAC,eACpCb,IAAA,CAACb,4BAA4B,CAACW,IAAI;QAAAyB,QAAA,eAChCvB,IAAA,CAACF,IAAI;UAAC0B,mBAAmB;UAACH,KAAK,EAAC,mBAAmB;UAACI,OAAO,EAAC,MAAM;UAAAF,QAAA,EAC/DX;QAAK,CACF;MAAC,CAC0B,CAAC;IAAA,CACR,CAAC;EAEnC;EAEA,MAAM;IAACP,IAAI;IAAEC;EAAQ,CAAC,GAAGH,KAAK,CAACY,IAAI,CAAC;EAEpC,oBACEf,IAAA,CAACM,QAAQ;IAACc,cAAc,EAAEA,cAAe;IAACD,SAAS,EAAEA,SAAU;IAACG,OAAO,EAAER,OAAQ;IAAAS,QAAA,eAC/EvB,IAAA,CAACM,QAAQ,CAACT,IAAI;MAAA0B,QAAA,eACZvB,IAAA,CAACH,IAAI;QAACc,kBAAkB,EAAEA,kBAAmB;QAACU,KAAK,EAAC,mBAAmB;QAACR,IAAI,EAAEA,IAAK;QAACE,IAAI,EAAEV;MAAK,CAAE;IAAC,CACrF;EAAC,CACR,CAAC;AAEf,CAAC","ignoreList":[]}

package/lib/module/atoms/fab/fab.ios.js

@@ -5,36 +5,92 @@ import { buttonStyle } from '@expo/ui/swift-ui/modifiers';
 import { useAccessibilityModifiers, useSxModifiers } from '@hzblj/kara-sx';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
+import { HStack } from "../h-stack/index.js";
 import { Icon } from "../icon/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Material's sizes, in points: the circle across and the icon in it. */
+const SIZES = {
+  large: {
+    icon: 's36',
+    side: 96
+  },
+  regular: {
+    icon: 's24',
+    side: 56
+  },
+  small: {
+    icon: 's24',
+    side: 40
+  }
+};
+const SURFACE = {
+  bg: 'fill.accent.primary',
+  borderRadius: 'full',
+  shadow: 'btn.accent'
+};
+
+/**
+ * Material's extended FAB in kara's iOS language: the regular FAB's height, accent and shadow, drawn as a capsule (the
+ * shape a round button takes once it has words), 16 before the icon and 20 after the text, as Material pads it.
+ */
+const EXTENDED = {
+  ...SURFACE,
+  h: SIZES.regular.side,
+  pl: 's16',
+  pr: 's20'
+};
 export const Fab = ({
   accessibilityHint,
   accessibilityLabel,
+  label,
   name,
   onPress,
+  size = 'regular',
   testID
 }) => {
   useHostGuard('Fab');
-  const accessibilityModifiers = useAccessibilityModifiers({
+  const extended = Boolean(label);
+  const {
+    icon,
+    side
+  } = SIZES[size];
+
+  // An icon alone carries the label; beside text, the button does, in place of what the text would say.
+  const accessibilityModifiers = useAccessibilityModifiers(extended ? {
+    accessibilityHint,
+    accessibilityLabel
+  } : {
     accessibilityHint
   });
-  const sxModifiers = useSxModifiers({
-    bg: 'fill.accent.primary',
-    borderRadius: 'full',
-    h: 56,
-    p: 's16',
-    shadow: 'btn.accent',
-    w: 56
-  });
+
+  // The frame centres the icon, so one circle serves every size: `regular` is the 56pt one it always was.
+  const sxModifiers = useSxModifiers(extended ? EXTENDED : {
+    ...SURFACE,
+    h: side,
+    w: side
+  }, 'center');
   const modifiers = useMemo(() => [buttonStyle('plain'), ...sxModifiers, ...accessibilityModifiers], [accessibilityModifiers, sxModifiers]);
   return /*#__PURE__*/_jsx(Button, {
     modifiers: modifiers,
     onPress: onPress,
     testID: testID,
-    children: /*#__PURE__*/_jsx(Icon, {
+    children: extended ? /*#__PURE__*/_jsxs(HStack, {
+      align: "center",
+      spacing: "s12",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        color: "content.on.accent",
+        name: name
+      }), /*#__PURE__*/_jsx(Text, {
+        color: "content.on.accent",
+        variant: "body",
+        children: label
+      })]
+    }) : /*#__PURE__*/_jsx(Icon, {
       accessibilityLabel: accessibilityLabel,
       color: "content.on.accent",
-      name: name
+      name: name,
+      size: icon
     })
   });
 };

package/lib/module/atoms/fab/fab.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Button","buttonStyle","useAccessibilityModifiers","useSxModifiers","useMemo","useHostGuard","Icon","jsx","_jsx","Fab","accessibilityHint","accessibilityLabel","name","onPress","testID","accessibilityModifiers","sxModifiers","bg","borderRadius","h","p","shadow","w","modifiers","children","color"],"sourceRoot":"../../../../src","sources":["atoms/fab/fab.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SAAQC,WAAW,QAAO,6BAA6B;AACvD,SAAQC,yBAAyB,EAAEC,cAAc,QAAO,gBAAgB;AACxE,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,IAAI,QAAO,kBAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG5B,OAAO,MAAMC,GAAiB,GAAGA,CAAC;EAACC,iBAAiB;EAAEC,kBAAkB;EAAEC,IAAI;EAAEC,OAAO;EAAEC;AAAgB,CAAC,KAAK;EAC7GT,YAAY,CAAC,KAAK,CAAC;EACnB,MAAMU,sBAAsB,GAAGb,yBAAyB,CAAC;IAACQ;EAAiB,CAAC,CAAC;EAE7E,MAAMM,WAAW,GAAGb,cAAc,CAAC;IACjCc,EAAE,EAAE,qBAAqB;IACzBC,YAAY,EAAE,MAAM;IACpBC,CAAC,EAAE,EAAE;IACLC,CAAC,EAAE,KAAK;IACRC,MAAM,EAAE,YAAY;IACpBC,CAAC,EAAE;EACL,CAAC,CAAC;EACF,MAAMC,SAAS,GAAGnB,OAAO,CACvB,MAAM,CAACH,WAAW,CAAC,OAAO,CAAC,EAAE,GAAGe,WAAW,EAAE,GAAGD,sBAAsB,CAAC,EACvE,CAACA,sBAAsB,EAAEC,WAAW,CACtC,CAAC;EAED,oBACER,IAAA,CAACR,MAAM;IAACuB,SAAS,EAAEA,SAAU;IAACV,OAAO,EAAEA,OAAQ;IAACC,MAAM,EAAEA,MAAO;IAAAU,QAAA,eAC7DhB,IAAA,CAACF,IAAI;MAACK,kBAAkB,EAAEA,kBAAmB;MAACc,KAAK,EAAC,mBAAmB;MAACb,IAAI,EAAEA;IAAK,CAAE;EAAC,CAChF,CAAC;AAEb,CAAC","ignoreList":[]}
+{"version":3,"names":["Button","buttonStyle","useAccessibilityModifiers","useSxModifiers","useMemo","useHostGuard","HStack","Icon","Text","jsx","_jsx","jsxs","_jsxs","SIZES","large","icon","side","regular","small","SURFACE","bg","borderRadius","shadow","EXTENDED","h","pl","pr","Fab","accessibilityHint","accessibilityLabel","label","name","onPress","size","testID","extended","Boolean","accessibilityModifiers","sxModifiers","w","modifiers","children","align","spacing","color","variant"],"sourceRoot":"../../../../src","sources":["atoms/fab/fab.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SAAQC,WAAW,QAAO,6BAA6B;AACvD,SAA2BC,yBAAyB,EAAEC,cAAc,QAAO,gBAAgB;AAE3F,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,MAAM,QAAO,qBAAY;AACjC,SAAQC,IAAI,QAAO,kBAAS;AAC5B,SAAQC,IAAI,QAAO,kBAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG5B;AACA,MAAMC,KAAK,GAAG;EACZC,KAAK,EAAE;IAACC,IAAI,EAAE,KAAK;IAAEC,IAAI,EAAE;EAAE,CAAC;EAC9BC,OAAO,EAAE;IAACF,IAAI,EAAE,KAAK;IAAEC,IAAI,EAAE;EAAE,CAAC;EAChCE,KAAK,EAAE;IAACH,IAAI,EAAE,KAAK;IAAEC,IAAI,EAAE;EAAE;AAC/B,CAAqE;AAErE,MAAMG,OAAO,GAAG;EAACC,EAAE,EAAE,qBAAqB;EAAEC,YAAY,EAAE,MAAM;EAAEC,MAAM,EAAE;AAAY,CAAiC;;AAEvH;AACA;AACA;AACA;AACA,MAAMC,QAAQ,GAAG;EAAC,GAAGJ,OAAO;EAAEK,CAAC,EAAEX,KAAK,CAACI,OAAO,CAACD,IAAI;EAAES,EAAE,EAAE,KAAK;EAAEC,EAAE,EAAE;AAAK,CAAiC;AAE1G,OAAO,MAAMC,GAAiB,GAAGA,CAAC;EAChCC,iBAAiB;EACjBC,kBAAkB;EAClBC,KAAK;EACLC,IAAI;EACJC,OAAO;EACPC,IAAI,GAAG,SAAS;EAChBC;AACQ,CAAC,KAAK;EACd7B,YAAY,CAAC,KAAK,CAAC;EACnB,MAAM8B,QAAQ,GAAGC,OAAO,CAACN,KAAK,CAAC;EAC/B,MAAM;IAACf,IAAI;IAAEC;EAAI,CAAC,GAAGH,KAAK,CAACoB,IAAI,CAAC;;EAEhC;EACA,MAAMI,sBAAsB,GAAGnC,yBAAyB,CACtDiC,QAAQ,GAAG;IAACP,iBAAiB;IAAEC;EAAkB,CAAC,GAAG;IAACD;EAAiB,CACzE,CAAC;;EAED;EACA,MAAMU,WAAW,GAAGnC,cAAc,CAACgC,QAAQ,GAAGZ,QAAQ,GAAG;IAAC,GAAGJ,OAAO;IAAEK,CAAC,EAAER,IAAI;IAAEuB,CAAC,EAAEvB;EAAI,CAAC,EAAE,QAAQ,CAAC;EAClG,MAAMwB,SAAS,GAAGpC,OAAO,CACvB,MAAM,CAACH,WAAW,CAAC,OAAO,CAAC,EAAE,GAAGqC,WAAW,EAAE,GAAGD,sBAAsB,CAAC,EACvE,CAACA,sBAAsB,EAAEC,WAAW,CACtC,CAAC;EAED,oBACE5B,IAAA,CAACV,MAAM;IAACwC,SAAS,EAAEA,SAAU;IAACR,OAAO,EAAEA,OAAQ;IAACE,MAAM,EAAEA,MAAO;IAAAO,QAAA,EAC5DN,QAAQ,gBACPvB,KAAA,CAACN,MAAM;MAACoC,KAAK,EAAC,QAAQ;MAACC,OAAO,EAAC,KAAK;MAAAF,QAAA,gBAClC/B,IAAA,CAACH,IAAI;QAACqC,KAAK,EAAC,mBAAmB;QAACb,IAAI,EAAEA;MAAK,CAAE,CAAC,eAC9CrB,IAAA,CAACF,IAAI;QAACoC,KAAK,EAAC,mBAAmB;QAACC,OAAO,EAAC,MAAM;QAAAJ,QAAA,EAC3CX;MAAK,CACF,CAAC;IAAA,CACD,CAAC,gBAETpB,IAAA,CAACH,IAAI;MAACsB,kBAAkB,EAAEA,kBAAmB;MAACe,KAAK,EAAC,mBAAmB;MAACb,IAAI,EAAEA,IAAK;MAACE,IAAI,EAAElB;IAAK,CAAE;EAClG,CACK,CAAC;AAEb,CAAC","ignoreList":[]}