@hzblj/kara-components 0.1.0 → 0.2.0

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

@@ -2,9 +2,15 @@
 
 import { LazyColumn, PullToRefreshBox } from '@expo/ui/jetpack-compose';
 import { useSxModifiers } from '@hzblj/kara-sx';
+import { Children, Fragment, isValidElement } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { useRefreshState } from "../../use-refresh-state.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Divider } from "../divider/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A divider between rows, the separator SwiftUI's `List` draws on its own — so rows are written the same for both. */
+const withSeparators = children => Children.toArray(children).map((child, index) => /*#__PURE__*/_jsxs(Fragment, {
+  children: [index > 0 ? /*#__PURE__*/_jsx(Divider, {}) : null, child]
+}, /*#__PURE__*/isValidElement(child) && child.key !== null ? child.key : index));
 export const List = ({
   children,
   onRefresh
@@ -19,7 +25,7 @@ export const List = ({
   } = useRefreshState(onRefresh);
   const column = /*#__PURE__*/_jsx(LazyColumn, {
     modifiers: modifiers,
-    children: children
+    children: withSeparators(children)
   });
   if (!onRefresh) {
     return column;

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

@@ -1 +1 @@
-{"version":3,"names":["LazyColumn","PullToRefreshBox","useSxModifiers","useHostGuard","useRefreshState","jsx","_jsx","List","children","onRefresh","modifiers","wide","isRefreshing","refresh","column"],"sourceRoot":"../../../../src","sources":["atoms/list/list.android.tsx"],"mappings":";;AAAA,SAAQA,UAAU,EAAEC,gBAAgB,QAAO,0BAA0B;AACrE,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,eAAe,QAAO,4BAAyB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGvD,OAAO,MAAMC,IAAmB,GAAGA,CAAC;EAACC,QAAQ;EAAEC;AAAoB,CAAC,KAAK;EACvEN,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMO,SAAS,GAAGR,cAAc,CAAC;IAACS,IAAI,EAAE;EAAI,CAAC,CAAC;EAC9C,MAAM;IAACC,YAAY;IAAEC;EAAO,CAAC,GAAGT,eAAe,CAACK,SAAS,CAAC;EAE1D,MAAMK,MAAM,gBAAGR,IAAA,CAACN,UAAU;IAACU,SAAS,EAAEA,SAAU;IAAAF,QAAA,EAAEA;EAAQ,CAAa,CAAC;EAExE,IAAI,CAACC,SAAS,EAAE;IACd,OAAOK,MAAM;EACf;EAEA,oBACER,IAAA,CAACL,gBAAgB;IAACW,YAAY,EAAEA,YAAa;IAACH,SAAS,EAAEI,OAAQ;IAAAL,QAAA,EAC9DM;EAAM,CACS,CAAC;AAEvB,CAAC","ignoreList":[]}
+{"version":3,"names":["LazyColumn","PullToRefreshBox","useSxModifiers","Children","Fragment","isValidElement","useHostGuard","useRefreshState","Divider","jsx","_jsx","jsxs","_jsxs","withSeparators","children","toArray","map","child","index","key","List","onRefresh","modifiers","wide","isRefreshing","refresh","column"],"sourceRoot":"../../../../src","sources":["atoms/list/list.android.tsx"],"mappings":";;AAAA,SAAQA,UAAU,EAAEC,gBAAgB,QAAO,0BAA0B;AACrE,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,QAAQ,EAAEC,QAAQ,EAAEC,cAAc,QAAO,OAAO;AACxD,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,eAAe,QAAO,4BAAyB;AACvD,SAAQC,OAAO,QAAO,qBAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGlC;AACA,MAAMC,cAAc,GAAIC,QAA+B,IACrDX,QAAQ,CAACY,OAAO,CAACD,QAAQ,CAAC,CAACE,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,kBAC1CN,KAAA,CAACR,QAAQ;EAAAU,QAAA,GACNI,KAAK,GAAG,CAAC,gBAAGR,IAAA,CAACF,OAAO,IAAE,CAAC,GAAG,IAAI,EAC9BS,KAAK;AAAA,GAFO,aAAAZ,cAAc,CAACY,KAAK,CAAC,IAAIA,KAAK,CAACE,GAAG,KAAK,IAAI,GAAGF,KAAK,CAACE,GAAG,GAAGD,KAG/D,CACX,CAAC;AAEJ,OAAO,MAAME,IAAmB,GAAGA,CAAC;EAACN,QAAQ;EAAEO;AAAoB,CAAC,KAAK;EACvEf,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMgB,SAAS,GAAGpB,cAAc,CAAC;IAACqB,IAAI,EAAE;EAAI,CAAC,CAAC;EAC9C,MAAM;IAACC,YAAY;IAAEC;EAAO,CAAC,GAAGlB,eAAe,CAACc,SAAS,CAAC;EAE1D,MAAMK,MAAM,gBAAGhB,IAAA,CAACV,UAAU;IAACsB,SAAS,EAAEA,SAAU;IAAAR,QAAA,EAAED,cAAc,CAACC,QAAQ;EAAC,CAAa,CAAC;EAExF,IAAI,CAACO,SAAS,EAAE;IACd,OAAOK,MAAM;EACf;EAEA,oBACEhB,IAAA,CAACT,gBAAgB;IAACuB,YAAY,EAAEA,YAAa;IAACH,SAAS,EAAEI,OAAQ;IAAAX,QAAA,EAC9DY;EAAM,CACS,CAAC;AAEvB,CAAC","ignoreList":[]}

package/lib/module/atoms/picker/index.js

@@ -1,5 +1,5 @@
 "use strict";
 
-export * from "./picker.js";
+export * from './picker';
 export * from "./picker.types.js";
 //# sourceMappingURL=index.js.map

package/lib/module/atoms/picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/picker/index.ts"],"mappings":";;AAAA,cAAc,aAAU;AACxB,cAAc,mBAAgB","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/picker/index.ts"],"mappings":";;AAAA,cAAc,UAAU;AACxB,cAAc,mBAAgB","ignoreList":[]}

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

@@ -0,0 +1,87 @@
+"use strict";
+
+import { Text as ComposeText, DropdownMenuItem, ExposedDropdownMenu, ExposedDropdownMenuBox, Host, OutlinedTextField, useNativeState } from '@expo/ui/jetpack-compose';
+import { fillMaxWidth, menuAnchor, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useEffect, useMemo, useState } from 'react';
+import { Glyph } from "../../glyph/index.js";
+import { HostBoundary } from "../../host-context.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MATCH_HEIGHT_ONLY = {
+  horizontal: false,
+  vertical: true
+};
+
+/**
+ * Material's exposed dropdown: a read-only outlined field the width of its container, opening a menu of the options
+ * under it. Its own host, themed like an `Island`, so it drops into React Native layout like the iOS picker does.
+ */
+export const Picker = ({
+  disabled = false,
+  onValueChange,
+  options,
+  testID,
+  value
+}) => {
+  const theme = useAppTheme();
+  const [expanded, setExpanded] = useState(false);
+  const selectedLabel = options.find(option => option.value === value)?.label ?? '';
+  const label = useNativeState(selectedLabel);
+  const fieldModifiers = useMemo(() => {
+    const list = [fillMaxWidth(), menuAnchor('primaryNotEditable', !disabled)];
+    return testID ? [...list, testIdModifier(testID)] : list;
+  }, [disabled, testID]);
+
+  // `useNativeState` takes only its initial value; a new selection is pushed to the field.
+  useEffect(() => {
+    label.set(selectedLabel);
+  }, [label, selectedLabel]);
+  return /*#__PURE__*/_jsx(Host, {
+    colorScheme: theme.dark ? 'dark' : 'light',
+    matchContents: MATCH_HEIGHT_ONLY,
+    seedColor: theme.materialSeed,
+    children: /*#__PURE__*/_jsx(HostBoundary, {
+      children: /*#__PURE__*/_jsxs(ExposedDropdownMenuBox, {
+        expanded: expanded,
+        onExpandedChange: disabled ? undefined : setExpanded,
+        children: [/*#__PURE__*/_jsx(OutlinedTextField, {
+          enabled: !disabled,
+          modifiers: fieldModifiers,
+          readOnly: true,
+          singleLine: true,
+          textStyle: {
+            color: theme.colorString('content.primary'),
+            fontFamily: theme.typography.body.fontFamily,
+            fontWeight: theme.typography.body.fontWeight
+          },
+          value: label,
+          children: /*#__PURE__*/_jsx(OutlinedTextField.TrailingIcon, {
+            children: /*#__PURE__*/_jsx(Glyph, {
+              color: "content.secondary",
+              name: "chevronDown",
+              size: "s20"
+            })
+          })
+        }), /*#__PURE__*/_jsx(ExposedDropdownMenu, {
+          containerColor: theme.color('surface.primary'),
+          expanded: expanded,
+          onDismissRequest: () => setExpanded(false),
+          children: options.map(option => /*#__PURE__*/_jsx(DropdownMenuItem, {
+            onClick: () => {
+              setExpanded(false);
+              onValueChange?.(option.value);
+            },
+            children: /*#__PURE__*/_jsx(DropdownMenuItem.Text, {
+              children: /*#__PURE__*/_jsx(ComposeText, {
+                color: theme.colorString(option.value === value ? 'content.accent' : 'content.primary'),
+                style: theme.typography.body,
+                children: option.label
+              })
+            })
+          }, option.value))
+        })]
+      })
+    })
+  });
+};
+//# sourceMappingURL=picker.android.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Text","ComposeText","DropdownMenuItem","ExposedDropdownMenu","ExposedDropdownMenuBox","Host","OutlinedTextField","useNativeState","fillMaxWidth","menuAnchor","testID","testIdModifier","useAppTheme","useEffect","useMemo","useState","Glyph","HostBoundary","jsx","_jsx","jsxs","_jsxs","MATCH_HEIGHT_ONLY","horizontal","vertical","Picker","disabled","onValueChange","options","value","theme","expanded","setExpanded","selectedLabel","find","option","label","fieldModifiers","list","set","colorScheme","dark","matchContents","seedColor","materialSeed","children","onExpandedChange","undefined","enabled","modifiers","readOnly","singleLine","textStyle","color","colorString","fontFamily","typography","body","fontWeight","TrailingIcon","name","size","containerColor","onDismissRequest","map","onClick","style"],"sourceRoot":"../../../../src","sources":["atoms/picker/picker.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/picker/{picker.js → picker.ios.js}

@@ -25,4 +25,4 @@ export const Picker = ({
     }, option.value))
   });
 };
-//# sourceMappingURL=picker.js.map
+//# sourceMappingURL=picker.ios.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Picker","NativePicker","useAppTheme","useCallback","jsx","_jsx","disabled","onValueChange","options","testID","value","theme","onChange","next","String","enabled","selectedValue","children","map","option","Item","color","colorString","label"],"sourceRoot":"../../../../src","sources":["atoms/picker/picker.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,YAAY,QAAO,2BAA2B;AAChE,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIjC,OAAO,MAAML,MAAuB,GAAGA,CAAC;EAACM,QAAQ,GAAG,KAAK;EAAEC,aAAa;EAAEC,OAAO;EAAEC,MAAM;EAAEC;AAAkB,CAAC,KAAK;EACjH,MAAMC,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,MAAMU,QAAQ,GAAGT,WAAW,CAAEU,IAA4B,IAAKN,aAAa,GAAGO,MAAM,CAACD,IAAI,CAAC,CAAC,EAAE,CAACN,aAAa,CAAC,CAAC;EAE9G,oBACEF,IAAA,CAACJ,YAAY;IAACc,OAAO,EAAE,CAACT,QAAS;IAACC,aAAa,EAAEK,QAAS;IAACI,aAAa,EAAEN,KAAM;IAACD,MAAM,EAAEA,MAAO;IAAAQ,QAAA,EAC7FT,OAAO,CAACU,GAAG,CAACC,MAAM,iBACjBd,IAAA,CAACJ,YAAY,CAACmB,IAAI;MAChBC,KAAK,EAAEV,KAAK,CAACW,WAAW,CAAC,iBAAiB,CAAE;MAE5CC,KAAK,EAAEJ,MAAM,CAACI,KAAM;MACpBb,KAAK,EAAES,MAAM,CAACT;IAAM,GAFfS,MAAM,CAACT,KAGb,CACF;EAAC,CACU,CAAC;AAEnB,CAAC","ignoreList":[]}

package/lib/module/atoms/rn-icon/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from './rn-icon';
+export * from "./rn-icon.types.js";
+//# sourceMappingURL=index.js.map

package/lib/module/atoms/rn-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/rn-icon/index.ts"],"mappings":";;AAAA,cAAc,WAAW;AACzB,cAAc,oBAAiB","ignoreList":[]}

package/lib/module/atoms/rn-icon/rn-icon.android.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { iconResourceName } from '@hzblj/kara-native';
+import { IconView } from '@hzblj/kara-native/jetpack-compose';
+import { spacing, useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** An `ImageView` over the app's vector drawable — what a list row wants, rather than a Compose host per row. */
+export const RnIcon = ({
+  accessibilityLabel,
+  color = 'content.primary',
+  name,
+  size = 's24',
+  testID
+}) => {
+  const theme = useAppTheme();
+  const style = useMemo(() => ({
+    height: spacing[size],
+    width: spacing[size]
+  }), [size]);
+  return /*#__PURE__*/_jsx(IconView, {
+    accessibilityLabel: accessibilityLabel,
+    iconColor: theme.color(color),
+    resourceName: iconResourceName(name),
+    style: style,
+    testID: testID
+  });
+};
+//# sourceMappingURL=rn-icon.android.js.map

package/lib/module/atoms/rn-icon/rn-icon.android.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconResourceName","IconView","spacing","useAppTheme","useMemo","jsx","_jsx","RnIcon","accessibilityLabel","color","name","size","testID","theme","style","height","width","iconColor","resourceName"],"sourceRoot":"../../../../src","sources":["atoms/rn-icon/rn-icon.android.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,oBAAoB;AACnD,SAAQC,QAAQ,QAAO,oCAAoC;AAC3D,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AACtD,SAAQC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI7B;AACA,OAAO,MAAMC,MAAuB,GAAGA,CAAC;EACtCC,kBAAkB;EAClBC,KAAK,GAAG,iBAAiB;EACzBC,IAAI;EACJC,IAAI,GAAG,KAAK;EACZC;AACW,CAAC,KAAK;EACjB,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,KAAK,GAAGV,OAAO,CAAC,OAAO;IAACW,MAAM,EAAEb,OAAO,CAACS,IAAI,CAAC;IAAEK,KAAK,EAAEd,OAAO,CAACS,IAAI;EAAC,CAAC,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEpF,oBACEL,IAAA,CAACL,QAAQ;IACPO,kBAAkB,EAAEA,kBAAmB;IACvCS,SAAS,EAAEJ,KAAK,CAACJ,KAAK,CAACA,KAAK,CAAE;IAC9BS,YAAY,EAAElB,gBAAgB,CAACU,IAAI,CAAE;IACrCI,KAAK,EAAEA,KAAM;IACbF,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC","ignoreList":[]}

package/lib/module/atoms/rn-icon/rn-icon.ios.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { iconResourceName } from '@hzblj/kara-native';
+import { IconView } from '@hzblj/kara-native/swift-ui';
+import { spacing, useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** A `UIImageView` over the app's asset-catalog icon — what a list row wants, rather than a SwiftUI host per row. */
+export const RnIcon = ({
+  accessibilityLabel,
+  color = 'content.primary',
+  name,
+  size = 's24',
+  testID
+}) => {
+  const theme = useAppTheme();
+  const style = useMemo(() => ({
+    height: spacing[size],
+    width: spacing[size]
+  }), [size]);
+  return /*#__PURE__*/_jsx(IconView, {
+    accessibilityLabel: accessibilityLabel,
+    assetName: iconResourceName(name),
+    iconColor: theme.color(color),
+    style: style,
+    testID: testID
+  });
+};
+//# sourceMappingURL=rn-icon.ios.js.map

package/lib/module/atoms/rn-icon/rn-icon.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconResourceName","IconView","spacing","useAppTheme","useMemo","jsx","_jsx","RnIcon","accessibilityLabel","color","name","size","testID","theme","style","height","width","assetName","iconColor"],"sourceRoot":"../../../../src","sources":["atoms/rn-icon/rn-icon.ios.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,oBAAoB;AACnD,SAAQC,QAAQ,QAAO,6BAA6B;AACpD,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AACtD,SAAQC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI7B;AACA,OAAO,MAAMC,MAAuB,GAAGA,CAAC;EACtCC,kBAAkB;EAClBC,KAAK,GAAG,iBAAiB;EACzBC,IAAI;EACJC,IAAI,GAAG,KAAK;EACZC;AACW,CAAC,KAAK;EACjB,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,KAAK,GAAGV,OAAO,CAAC,OAAO;IAACW,MAAM,EAAEb,OAAO,CAACS,IAAI,CAAC;IAAEK,KAAK,EAAEd,OAAO,CAACS,IAAI;EAAC,CAAC,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEpF,oBACEL,IAAA,CAACL,QAAQ;IACPO,kBAAkB,EAAEA,kBAAmB;IACvCS,SAAS,EAAEjB,gBAAgB,CAACU,IAAI,CAAE;IAClCQ,SAAS,EAAEL,KAAK,CAACJ,KAAK,CAACA,KAAK,CAAE;IAC9BK,KAAK,EAAEA,KAAM;IACbF,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC","ignoreList":[]}

package/lib/module/atoms/rn-icon/rn-icon.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=rn-icon.types.js.map

package/lib/module/atoms/rn-icon/rn-icon.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/rn-icon/rn-icon.types.ts"],"mappings":"","ignoreList":[]}

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

@@ -1,8 +1,10 @@
 "use strict";
 
-import { Surface as ComposeSurface, Shape } from '@expo/ui/jetpack-compose';
+import { Column, Surface as ComposeSurface, Shape } from '@expo/ui/jetpack-compose';
+import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
 import { useSxModifiers } from '@hzblj/kara-sx';
 import { radii, useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const cornerRadii = radius => ({
@@ -11,18 +13,41 @@ const cornerRadii = radius => ({
   topEnd: radius,
   topStart: radius
 });
+
+/**
+ * Material's `Surface`, with the padding on a `Column` inside it. Compose applies a `Surface`'s own modifiers before it
+ * draws the shape, so padding there would inset the background instead of the content — and a bare `Surface` stacks
+ * its children on top of each other rather than in a column.
+ */
 export const Surface = ({
   children,
   glass = false,
+  p = 's16',
+  pb,
+  pl,
+  pr,
+  pt,
+  px,
+  py,
   testID,
   ...sx
 }) => {
   useHostGuard('Surface');
   const theme = useAppTheme();
-  const modifiers = useSxModifiers({
+  const sxModifiers = useSxModifiers({
     ...sx,
-    bg: undefined,
-    p: sx.p ?? 's16'
+    bg: undefined
+  });
+  const modifiers = useMemo(() => testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers, [sxModifiers, testID]);
+  const contentModifiers = useSxModifiers({
+    p,
+    pb,
+    pl,
+    pr,
+    pt,
+    px,
+    py,
+    wide: sx.wide
   });
   return /*#__PURE__*/_jsx(ComposeSurface, {
     color: theme.color(sx.bg ?? 'surface.primary'),
@@ -32,7 +57,10 @@ export const Surface = ({
       cornerRadii: cornerRadii(radii[sx.borderRadius ?? 'large'])
     }),
     tonalElevation: glass ? 3 : 0,
-    children: children
+    children: /*#__PURE__*/_jsx(Column, {
+      modifiers: contentModifiers,
+      children: children
+    })
   });
 };
 //# sourceMappingURL=surface.android.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Surface","ComposeSurface","Shape","useSxModifiers","radii","useAppTheme","useHostGuard","jsx","_jsx","cornerRadii","radius","bottomEnd","bottomStart","topEnd","topStart","children","glass","testID","sx","theme","modifiers","bg","undefined","p","color","contentColor","shape","RoundedCorner","borderRadius","tonalElevation"],"sourceRoot":"../../../../src","sources":["atoms/surface/surface.android.tsx"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,cAAc,EAAEC,KAAK,QAAO,0BAA0B;AACzE,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,KAAK,EAAEC,WAAW,QAAO,mBAAmB;AACpD,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,WAAW,GAAIC,MAAc,KAAM;EAACC,SAAS,EAAED,MAAM;EAAEE,WAAW,EAAEF,MAAM;EAAEG,MAAM,EAAEH,MAAM;EAAEI,QAAQ,EAAEJ;AAAM,CAAC,CAAC;AAEpH,OAAO,MAAMV,OAAyB,GAAGA,CAAC;EAACe,QAAQ;EAAEC,KAAK,GAAG,KAAK;EAAEC,MAAM;EAAE,GAAGC;AAAgB,CAAC,KAAK;EACnGZ,YAAY,CAAC,SAAS,CAAC;EAEvB,MAAMa,KAAK,GAAGd,WAAW,CAAC,CAAC;EAC3B,MAAMe,SAAS,GAAGjB,cAAc,CAAC;IAAC,GAAGe,EAAE;IAAEG,EAAE,EAAEC,SAAS;IAAEC,CAAC,EAAEL,EAAE,CAACK,CAAC,IAAI;EAAK,CAAC,CAAC;EAE1E,oBACEf,IAAA,CAACP,cAAc;IACbuB,KAAK,EAAEL,KAAK,CAACK,KAAK,CAACN,EAAE,CAACG,EAAE,IAAI,iBAAiB,CAAE;IAC/CI,YAAY,EAAEN,KAAK,CAACK,KAAK,CAAC,iBAAiB,CAAE;IAC7CJ,SAAS,EAAEA,SAAU;IACrBM,KAAK,EAAExB,KAAK,CAACyB,aAAa,CAAC;MAAClB,WAAW,EAAEA,WAAW,CAACL,KAAK,CAACc,EAAE,CAACU,YAAY,IAAI,OAAO,CAAC;IAAC,CAAC,CAAE;IAC1FC,cAAc,EAAEb,KAAK,GAAG,CAAC,GAAG,CAAE;IAAAD,QAAA,EAE7BA;EAAQ,CACK,CAAC;AAErB,CAAC","ignoreList":[]}
+{"version":3,"names":["Column","Surface","ComposeSurface","Shape","testID","testIdModifier","useSxModifiers","radii","useAppTheme","useMemo","useHostGuard","jsx","_jsx","cornerRadii","radius","bottomEnd","bottomStart","topEnd","topStart","children","glass","p","pb","pl","pr","pt","px","py","sx","theme","sxModifiers","bg","undefined","modifiers","contentModifiers","wide","color","contentColor","shape","RoundedCorner","borderRadius","tonalElevation"],"sourceRoot":"../../../../src","sources":["atoms/surface/surface.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,EAAEC,OAAO,IAAIC,cAAc,EAAEC,KAAK,QAAO,0BAA0B;AACjF,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,KAAK,EAAEC,WAAW,QAAO,mBAAmB;AACpD,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,WAAW,GAAIC,MAAc,KAAM;EAACC,SAAS,EAAED,MAAM;EAAEE,WAAW,EAAEF,MAAM;EAAEG,MAAM,EAAEH,MAAM;EAAEI,QAAQ,EAAEJ;AAAM,CAAC,CAAC;;AAEpH;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMb,OAAyB,GAAGA,CAAC;EACxCkB,QAAQ;EACRC,KAAK,GAAG,KAAK;EACbC,CAAC,GAAG,KAAK;EACTC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFvB,MAAM;EACN,GAAGwB;AACS,CAAC,KAAK;EAClBlB,YAAY,CAAC,SAAS,CAAC;EAEvB,MAAMmB,KAAK,GAAGrB,WAAW,CAAC,CAAC;EAC3B,MAAMsB,WAAW,GAAGxB,cAAc,CAAC;IAAC,GAAGsB,EAAE;IAAEG,EAAE,EAAEC;EAAS,CAAC,CAAC;EAC1D,MAAMC,SAAS,GAAGxB,OAAO,CACvB,MAAOL,MAAM,GAAG,CAAC,GAAG0B,WAAW,EAAEzB,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG0B,WAAY,EACvE,CAACA,WAAW,EAAE1B,MAAM,CACtB,CAAC;EACD,MAAM8B,gBAAgB,GAAG5B,cAAc,CAAC;IAACe,CAAC;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEQ,IAAI,EAAEP,EAAE,CAACO;EAAI,CAAC,CAAC;EAEnF,oBACEvB,IAAA,CAACV,cAAc;IACbkC,KAAK,EAAEP,KAAK,CAACO,KAAK,CAACR,EAAE,CAACG,EAAE,IAAI,iBAAiB,CAAE;IAC/CM,YAAY,EAAER,KAAK,CAACO,KAAK,CAAC,iBAAiB,CAAE;IAC7CH,SAAS,EAAEA,SAAU;IACrBK,KAAK,EAAEnC,KAAK,CAACoC,aAAa,CAAC;MAAC1B,WAAW,EAAEA,WAAW,CAACN,KAAK,CAACqB,EAAE,CAACY,YAAY,IAAI,OAAO,CAAC;IAAC,CAAC,CAAE;IAC1FC,cAAc,EAAErB,KAAK,GAAG,CAAC,GAAG,CAAE;IAAAD,QAAA,eAE9BP,IAAA,CAACZ,MAAM;MAACiC,SAAS,EAAEC,gBAAiB;MAAAf,QAAA,EAAEA;IAAQ,CAAS;EAAC,CAC1C,CAAC;AAErB,CAAC","ignoreList":[]}

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

@@ -1,9 +1,15 @@
 "use strict";
 
 import { Switch as ComposeSwitch, Row, Text } from '@expo/ui/jetpack-compose';
+import { clickable, fillMaxWidth } 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, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Material's switch, tinted with the accent like SwiftUI's toggle. With a label it is a full-width row — label at the
+ * start, switch at the end — and the whole row toggles, the way a Material settings row does.
+ */
 export const Switch = ({
   disabled = false,
   label,
@@ -12,7 +18,13 @@ export const Switch = ({
 }) => {
   useHostGuard('Switch');
   const theme = useAppTheme();
+  const rowModifiers = useMemo(() => disabled || !onValueChange ? [fillMaxWidth()] : [fillMaxWidth(), clickable(() => onValueChange(!value))], [disabled, onValueChange, value]);
   const control = /*#__PURE__*/_jsx(ComposeSwitch, {
+    colors: {
+      checkedBorderColor: theme.color('fill.accent.primary'),
+      checkedThumbColor: theme.color('content.on.bg'),
+      checkedTrackColor: theme.color('fill.accent.primary')
+    },
     enabled: !disabled,
     onCheckedChange: onValueChange,
     value: value
@@ -22,9 +34,10 @@ export const Switch = ({
   }
   return /*#__PURE__*/_jsxs(Row, {
     horizontalArrangement: "spaceBetween",
+    modifiers: rowModifiers,
     verticalAlignment: "center",
     children: [/*#__PURE__*/_jsx(Text, {
-      color: theme.colorString('content.primary'),
+      color: theme.colorString(disabled ? 'content.tertiary' : 'content.primary'),
       style: theme.typography.body,
       children: label
     }), control]

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

@@ -1 +1 @@
-{"version":3,"names":["Switch","ComposeSwitch","Row","Text","useAppTheme","useHostGuard","jsx","_jsx","jsxs","_jsxs","disabled","label","onValueChange","value","theme","control","enabled","onCheckedChange","horizontalArrangement","verticalAlignment","children","color","colorString","style","typography","body"],"sourceRoot":"../../../../src","sources":["atoms/switch/switch.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,EAAEC,GAAG,EAAEC,IAAI,QAAO,0BAA0B;AAC3E,SAAQC,WAAW,QAAO,mBAAmB;AAE7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,OAAO,MAAMT,MAAuB,GAAGA,CAAC;EAACU,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAkB,CAAC,KAAK;EACvGR,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMS,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,OAAO,gBAAGR,IAAA,CAACN,aAAa;IAACe,OAAO,EAAE,CAACN,QAAS;IAACO,eAAe,EAAEL,aAAc;IAACC,KAAK,EAAEA;EAAM,CAAE,CAAC;EAEnG,IAAI,CAACF,KAAK,EAAE;IACV,OAAOI,OAAO;EAChB;EAEA,oBACEN,KAAA,CAACP,GAAG;IAACgB,qBAAqB,EAAC,cAAc;IAACC,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,gBAClEb,IAAA,CAACJ,IAAI;MAACkB,KAAK,EAAEP,KAAK,CAACQ,WAAW,CAAC,iBAAiB,CAAE;MAACC,KAAK,EAAET,KAAK,CAACU,UAAU,CAACC,IAAK;MAAAL,QAAA,EAC7ET;IAAK,CACF,CAAC,EACNI,OAAO;EAAA,CACL,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["Switch","ComposeSwitch","Row","Text","clickable","fillMaxWidth","useAppTheme","useMemo","useHostGuard","jsx","_jsx","jsxs","_jsxs","disabled","label","onValueChange","value","theme","rowModifiers","control","colors","checkedBorderColor","color","checkedThumbColor","checkedTrackColor","enabled","onCheckedChange","horizontalArrangement","modifiers","verticalAlignment","children","colorString","style","typography","body"],"sourceRoot":"../../../../src","sources":["atoms/switch/switch.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,EAAEC,GAAG,EAAEC,IAAI,QAAO,0BAA0B;AAC3E,SAAQC,SAAS,EAAEC,YAAY,QAAO,oCAAoC;AAC1E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA;AACA;AACA;AACA,OAAO,MAAMZ,MAAuB,GAAGA,CAAC;EAACa,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAkB,CAAC,KAAK;EACvGR,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMS,KAAK,GAAGX,WAAW,CAAC,CAAC;EAC3B,MAAMY,YAAY,GAAGX,OAAO,CAC1B,MAAOM,QAAQ,IAAI,CAACE,aAAa,GAAG,CAACV,YAAY,CAAC,CAAC,CAAC,GAAG,CAACA,YAAY,CAAC,CAAC,EAAED,SAAS,CAAC,MAAMW,aAAa,CAAC,CAACC,KAAK,CAAC,CAAC,CAAE,EAChH,CAACH,QAAQ,EAAEE,aAAa,EAAEC,KAAK,CACjC,CAAC;EACD,MAAMG,OAAO,gBACXT,IAAA,CAACT,aAAa;IACZmB,MAAM,EAAE;MACNC,kBAAkB,EAAEJ,KAAK,CAACK,KAAK,CAAC,qBAAqB,CAAC;MACtDC,iBAAiB,EAAEN,KAAK,CAACK,KAAK,CAAC,eAAe,CAAC;MAC/CE,iBAAiB,EAAEP,KAAK,CAACK,KAAK,CAAC,qBAAqB;IACtD,CAAE;IACFG,OAAO,EAAE,CAACZ,QAAS;IACnBa,eAAe,EAAEX,aAAc;IAC/BC,KAAK,EAAEA;EAAM,CACd,CACF;EAED,IAAI,CAACF,KAAK,EAAE;IACV,OAAOK,OAAO;EAChB;EAEA,oBACEP,KAAA,CAACV,GAAG;IAACyB,qBAAqB,EAAC,cAAc;IAACC,SAAS,EAAEV,YAAa;IAACW,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,gBAC3FpB,IAAA,CAACP,IAAI;MAACmB,KAAK,EAAEL,KAAK,CAACc,WAAW,CAAClB,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,CAAE;MAACmB,KAAK,EAAEf,KAAK,CAACgB,UAAU,CAACC,IAAK;MAAAJ,QAAA,EAC7GhB;IAAK,CACF,CAAC,EACNK,OAAO;EAAA,CACL,CAAC;AAEV,CAAC","ignoreList":[]}

package/lib/module/glyph/glyph-button.android.js

@@ -0,0 +1,25 @@
+"use strict";
+
+import { IconButton as ComposeIconButton } from '@expo/ui/jetpack-compose';
+import { GLYPHS } from '@hzblj/kara-native';
+import { DrawableIcon } from '@hzblj/kara-native/jetpack-compose';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GlyphButton = ({
+  accessibilityLabel,
+  disabled = false,
+  name,
+  onPress
+}) => {
+  const theme = useAppTheme();
+  return /*#__PURE__*/_jsx(ComposeIconButton, {
+    enabled: !disabled,
+    onClick: onPress,
+    children: /*#__PURE__*/_jsx(DrawableIcon, {
+      accessibilityLabel: accessibilityLabel,
+      iconColor: theme.color(disabled ? 'btn.content.disabled' : 'content.primary'),
+      resourceName: GLYPHS[name].android
+    })
+  });
+};
+//# sourceMappingURL=glyph-button.android.js.map

package/lib/module/glyph/glyph-button.android.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["IconButton","ComposeIconButton","GLYPHS","DrawableIcon","useAppTheme","jsx","_jsx","GlyphButton","accessibilityLabel","disabled","name","onPress","theme","enabled","onClick","children","iconColor","color","resourceName","android"],"sourceRoot":"../../../src","sources":["glyph/glyph-button.android.tsx"],"mappings":";;AAAA,SAAQA,UAAU,IAAIC,iBAAiB,QAAO,0BAA0B;AACxE,SAAQC,MAAM,QAAO,oBAAoB;AACzC,SAAQC,YAAY,QAAO,oCAAoC;AAC/D,SAAQC,WAAW,QAAO,mBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI7C,OAAO,MAAMC,WAAiC,GAAGA,CAAC;EAChDC,kBAAkB;EAClBC,QAAQ,GAAG,KAAK;EAChBC,IAAI;EACJC;AACgB,CAAC,KAAK;EACtB,MAAMC,KAAK,GAAGR,WAAW,CAAC,CAAC;EAE3B,oBACEE,IAAA,CAACL,iBAAiB;IAACY,OAAO,EAAE,CAACJ,QAAS;IAACK,OAAO,EAAEH,OAAQ;IAAAI,QAAA,eACtDT,IAAA,CAACH,YAAY;MACXK,kBAAkB,EAAEA,kBAAmB;MACvCQ,SAAS,EAAEJ,KAAK,CAACK,KAAK,CAACR,QAAQ,GAAG,sBAAsB,GAAG,iBAAiB,CAAE;MAC9ES,YAAY,EAAEhB,MAAM,CAACQ,IAAI,CAAC,CAACS;IAAQ,CACpC;EAAC,CACe,CAAC;AAExB,CAAC","ignoreList":[]}

package/lib/module/glyph/glyph-button.ios.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import { Button } from '@expo/ui/swift-ui';
+import { buttonStyle, disabled as disabledModifier, accessibilityLabel as labelModifier } from '@expo/ui/swift-ui/modifiers';
+import { useMemo } from 'react';
+import { Glyph } from './glyph';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GlyphButton = ({
+  accessibilityLabel,
+  disabled = false,
+  name,
+  onPress
+}) => {
+  const modifiers = useMemo(() => {
+    const list = [buttonStyle('plain')];
+    if (disabled) {
+      list.push(disabledModifier(true));
+    }
+    if (accessibilityLabel) {
+      list.push(labelModifier(accessibilityLabel));
+    }
+    return list;
+  }, [accessibilityLabel, disabled]);
+  return /*#__PURE__*/_jsx(Button, {
+    modifiers: modifiers,
+    onPress: onPress,
+    children: /*#__PURE__*/_jsx(Glyph, {
+      color: disabled ? 'btn.content.disabled' : 'content.primary',
+      name: name
+    })
+  });
+};
+//# sourceMappingURL=glyph-button.ios.js.map

package/lib/module/glyph/glyph-button.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Button","buttonStyle","disabled","disabledModifier","accessibilityLabel","labelModifier","useMemo","Glyph","jsx","_jsx","GlyphButton","name","onPress","modifiers","list","push","children","color"],"sourceRoot":"../../../src","sources":["glyph/glyph-button.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SACEC,WAAW,EACXC,QAAQ,IAAIC,gBAAgB,EAC5BC,kBAAkB,IAAIC,aAAa,QAC9B,6BAA6B;AACpC,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,KAAK,QAAO,SAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG7B,OAAO,MAAMC,WAAiC,GAAGA,CAAC;EAChDN,kBAAkB;EAClBF,QAAQ,GAAG,KAAK;EAChBS,IAAI;EACJC;AACgB,CAAC,KAAK;EACtB,MAAMC,SAAS,GAAGP,OAAO,CAAC,MAAM;IAC9B,MAAMQ,IAAI,GAAG,CAACb,WAAW,CAAC,OAAO,CAAC,CAAC;IAEnC,IAAIC,QAAQ,EAAE;MACZY,IAAI,CAACC,IAAI,CAACZ,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC;IAEA,IAAIC,kBAAkB,EAAE;MACtBU,IAAI,CAACC,IAAI,CAACV,aAAa,CAACD,kBAAkB,CAAC,CAAC;IAC9C;IAEA,OAAOU,IAAI;EACb,CAAC,EAAE,CAACV,kBAAkB,EAAEF,QAAQ,CAAC,CAAC;EAElC,oBACEO,IAAA,CAACT,MAAM;IAACa,SAAS,EAAEA,SAAU;IAACD,OAAO,EAAEA,OAAQ;IAAAI,QAAA,eAC7CP,IAAA,CAACF,KAAK;MAACU,KAAK,EAAEf,QAAQ,GAAG,sBAAsB,GAAG,iBAAkB;MAACS,IAAI,EAAEA;IAAK,CAAE;EAAC,CAC7E,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/glyph/glyph-button.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=glyph-button.types.js.map

package/lib/module/glyph/glyph-button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["glyph/glyph-button.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/glyph/glyph.android.js

@@ -0,0 +1,20 @@
+"use strict";
+
+import { GLYPHS } from '@hzblj/kara-native';
+import { DrawableIcon } from '@hzblj/kara-native/jetpack-compose';
+import { spacing, useAppTheme } from '@hzblj/kara-theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The Material Symbol `@hzblj/kara-native` ships as a drawable — inside a Compose host. */
+export const Glyph = ({
+  color = 'content.primary',
+  name,
+  size = 's24'
+}) => {
+  const theme = useAppTheme();
+  return /*#__PURE__*/_jsx(DrawableIcon, {
+    iconColor: theme.color(color),
+    iconSize: spacing[size],
+    resourceName: GLYPHS[name].android
+  });
+};
+//# sourceMappingURL=glyph.android.js.map

package/lib/module/glyph/glyph.android.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["GLYPHS","DrawableIcon","spacing","useAppTheme","jsx","_jsx","Glyph","color","name","size","theme","iconColor","iconSize","resourceName","android"],"sourceRoot":"../../../src","sources":["glyph/glyph.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,oBAAoB;AACzC,SAAQC,YAAY,QAAO,oCAAoC;AAC/D,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAItD;AACA,OAAO,MAAMC,KAAqB,GAAGA,CAAC;EAACC,KAAK,GAAG,iBAAiB;EAAEC,IAAI;EAAEC,IAAI,GAAG;AAAiB,CAAC,KAAK;EACpG,MAAMC,KAAK,GAAGP,WAAW,CAAC,CAAC;EAE3B,oBAAOE,IAAA,CAACJ,YAAY;IAACU,SAAS,EAAED,KAAK,CAACH,KAAK,CAACA,KAAK,CAAE;IAACK,QAAQ,EAAEV,OAAO,CAACO,IAAI,CAAE;IAACI,YAAY,EAAEb,MAAM,CAACQ,IAAI,CAAC,CAACM;EAAQ,CAAE,CAAC;AACrH,CAAC","ignoreList":[]}

package/lib/module/glyph/glyph.ios.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import { Image } from '@expo/ui/swift-ui';
+import { accessibilityHidden } from '@expo/ui/swift-ui/modifiers';
+import { GLYPHS } from '@hzblj/kara-native';
+import { spacing, useAppTheme } from '@hzblj/kara-theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DECORATIVE = [accessibilityHidden(true)];
+
+/** The SF Symbol the system already has — inside a SwiftUI host. */
+export const Glyph = ({
+  color = 'content.primary',
+  name,
+  size = 's24'
+}) => {
+  const theme = useAppTheme();
+  return /*#__PURE__*/_jsx(Image, {
+    color: theme.color(color),
+    modifiers: DECORATIVE,
+    size: spacing[size],
+    systemName: GLYPHS[name].ios
+  });
+};
+//# sourceMappingURL=glyph.ios.js.map

package/lib/module/glyph/glyph.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","accessibilityHidden","GLYPHS","spacing","useAppTheme","jsx","_jsx","DECORATIVE","Glyph","color","name","size","theme","modifiers","systemName","ios"],"sourceRoot":"../../../src","sources":["glyph/glyph.ios.tsx"],"mappings":";;AAAA,SAAQA,KAAK,QAAO,mBAAmB;AACvC,SAAQC,mBAAmB,QAAO,6BAA6B;AAC/D,SAAQC,MAAM,QAAO,oBAAoB;AACzC,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAItD,MAAMC,UAAU,GAAG,CAACN,mBAAmB,CAAC,IAAI,CAAC,CAAC;;AAE9C;AACA,OAAO,MAAMO,KAAqB,GAAGA,CAAC;EAACC,KAAK,GAAG,iBAAiB;EAAEC,IAAI;EAAEC,IAAI,GAAG;AAAiB,CAAC,KAAK;EACpG,MAAMC,KAAK,GAAGR,WAAW,CAAC,CAAC;EAE3B,oBAAOE,IAAA,CAACN,KAAK;IAACS,KAAK,EAAEG,KAAK,CAACH,KAAK,CAACA,KAAK,CAAE;IAACI,SAAS,EAAEN,UAAW;IAACI,IAAI,EAAER,OAAO,CAACQ,IAAI,CAAE;IAACG,UAAU,EAAEZ,MAAM,CAACQ,IAAI,CAAC,CAACK;EAAI,CAAE,CAAC;AACvH,CAAC","ignoreList":[]}

package/lib/module/glyph/glyph.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=glyph.types.js.map

package/lib/module/glyph/glyph.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["glyph/glyph.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/glyph/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+export * from './glyph';
+export * from "./glyph.types.js";
+export * from './glyph-button';
+export * from "./glyph-button.types.js";
+export * from './rn-glyph';
+//# sourceMappingURL=index.js.map

package/lib/module/glyph/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["glyph/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,kBAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,yBAAsB;AACpC,cAAc,YAAY","ignoreList":[]}

package/lib/module/glyph/rn-glyph.android.js

@@ -0,0 +1,25 @@
+"use strict";
+
+import { GLYPHS } from '@hzblj/kara-native';
+import { IconView } from '@hzblj/kara-native/jetpack-compose';
+import { spacing, useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The Material Symbol drawable in an `ImageView` — the React Native tier. */
+export const RnGlyph = ({
+  color = 'content.primary',
+  name,
+  size = 's24'
+}) => {
+  const theme = useAppTheme();
+  const style = useMemo(() => ({
+    height: spacing[size],
+    width: spacing[size]
+  }), [size]);
+  return /*#__PURE__*/_jsx(IconView, {
+    iconColor: theme.color(color),
+    resourceName: GLYPHS[name].android,
+    style: style
+  });
+};
+//# sourceMappingURL=rn-glyph.android.js.map

package/lib/module/glyph/rn-glyph.android.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["GLYPHS","IconView","spacing","useAppTheme","useMemo","jsx","_jsx","RnGlyph","color","name","size","theme","style","height","width","iconColor","resourceName","android"],"sourceRoot":"../../../src","sources":["glyph/rn-glyph.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,oBAAoB;AACzC,SAAQC,QAAQ,QAAO,oCAAoC;AAC3D,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AACtD,SAAQC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI7B;AACA,OAAO,MAAMC,OAAuB,GAAGA,CAAC;EAACC,KAAK,GAAG,iBAAiB;EAAEC,IAAI;EAAEC,IAAI,GAAG;AAAiB,CAAC,KAAK;EACtG,MAAMC,KAAK,GAAGR,WAAW,CAAC,CAAC;EAC3B,MAAMS,KAAK,GAAGR,OAAO,CAAC,OAAO;IAACS,MAAM,EAAEX,OAAO,CAACQ,IAAI,CAAC;IAAEI,KAAK,EAAEZ,OAAO,CAACQ,IAAI;EAAC,CAAC,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEpF,oBAAOJ,IAAA,CAACL,QAAQ;IAACc,SAAS,EAAEJ,KAAK,CAACH,KAAK,CAACA,KAAK,CAAE;IAACQ,YAAY,EAAEhB,MAAM,CAACS,IAAI,CAAC,CAACQ,OAAQ;IAACL,KAAK,EAAEA;EAAM,CAAE,CAAC;AACtG,CAAC","ignoreList":[]}

package/lib/module/glyph/rn-glyph.ios.js

@@ -0,0 +1,26 @@
+"use strict";
+
+import { GLYPHS } from '@hzblj/kara-native';
+import { IconView } from '@hzblj/kara-native/swift-ui';
+import { spacing, useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The SF Symbol in a `UIImageView`, drawn at the size `Glyph` gives it inside a host — the React Native tier. */
+export const RnGlyph = ({
+  color = 'content.primary',
+  name,
+  size = 's24'
+}) => {
+  const theme = useAppTheme();
+  const style = useMemo(() => ({
+    height: spacing[size],
+    width: spacing[size]
+  }), [size]);
+  return /*#__PURE__*/_jsx(IconView, {
+    iconColor: theme.color(color),
+    style: style,
+    symbolSize: spacing[size],
+    systemName: GLYPHS[name].ios
+  });
+};
+//# sourceMappingURL=rn-glyph.ios.js.map

package/lib/module/glyph/rn-glyph.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["GLYPHS","IconView","spacing","useAppTheme","useMemo","jsx","_jsx","RnGlyph","color","name","size","theme","style","height","width","iconColor","symbolSize","systemName","ios"],"sourceRoot":"../../../src","sources":["glyph/rn-glyph.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,oBAAoB;AACzC,SAAQC,QAAQ,QAAO,6BAA6B;AACpD,SAAQC,OAAO,EAAEC,WAAW,QAAO,mBAAmB;AACtD,SAAQC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI7B;AACA,OAAO,MAAMC,OAAuB,GAAGA,CAAC;EAACC,KAAK,GAAG,iBAAiB;EAAEC,IAAI;EAAEC,IAAI,GAAG;AAAiB,CAAC,KAAK;EACtG,MAAMC,KAAK,GAAGR,WAAW,CAAC,CAAC;EAC3B,MAAMS,KAAK,GAAGR,OAAO,CAAC,OAAO;IAACS,MAAM,EAAEX,OAAO,CAACQ,IAAI,CAAC;IAAEI,KAAK,EAAEZ,OAAO,CAACQ,IAAI;EAAC,CAAC,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEpF,oBACEJ,IAAA,CAACL,QAAQ;IAACc,SAAS,EAAEJ,KAAK,CAACH,KAAK,CAACA,KAAK,CAAE;IAACI,KAAK,EAAEA,KAAM;IAACI,UAAU,EAAEd,OAAO,CAACQ,IAAI,CAAE;IAACO,UAAU,EAAEjB,MAAM,CAACS,IAAI,CAAC,CAACS;EAAI,CAAE,CAAC;AAEtH,CAAC","ignoreList":[]}