@hzblj/kara-components 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# @hzblj/kara-components
+
+## 0.1.0
+
+### Minor Changes
+
+- [`f919c7b`](https://github.com/hzblj/kara-ui/commit/f919c7b06f3798cebd58eef1581076bf1ee61cd1) Thanks [@hzblj](https://github.com/hzblj)! - First release of the kara-ui design system: theme and tokens, the `sx` engine, atoms, molecules, organisms and `Screen`, native tabs (`@hzblj/kara-ui/router`), the KaraUI native module (Liquid Glass, scroll edge effect, native countdown, context menu with preview, rich tooltip, FAB menu), and `KaraProvider` with theme overrides — colours, the app's own fonts, the Material seed, and Material You dynamic colour on Android. Text uses the platform's face by default. Install `@hzblj/kara-ui`; the scoped packages are its building blocks.
+
+### Patch Changes
+
+- Updated dependencies [[`f919c7b`](https://github.com/hzblj/kara-ui/commit/f919c7b06f3798cebd58eef1581076bf1ee61cd1)]:
+  - @hzblj/kara-theme@0.1.0
+  - @hzblj/kara-sx@0.1.0
+  - @hzblj/kara-native@0.1.0

package/README.md

@@ -1,3 +1,8 @@
-# Temporary Holding Version
+# @hzblj/kara-components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The atoms, molecules, organisms and templates of kara-ui — real SwiftUI and Jetpack Compose views through `@expo/ui` and the KaraUI module, styled through `sx`.
+
+**Install [`@hzblj/kara-ui`](https://www.npmjs.com/package/@hzblj/kara-ui) instead.** This package is one of its building
+blocks, published so the umbrella can depend on it; it is versioned together with it and has no standalone docs.
+
+MIT

package/lib/module/atoms/activity-indicator/activity-indicator.js

@@ -0,0 +1,14 @@
+"use strict";
+
+import { useAppTheme } from '@hzblj/kara-theme';
+import { ActivityIndicator as RNActivityIndicator } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ActivityIndicator = props => {
+  const theme = useAppTheme();
+  return /*#__PURE__*/_jsx(RNActivityIndicator, {
+    color: theme.color('fill.accent.primary'),
+    size: "small",
+    ...props
+  });
+};
+//# sourceMappingURL=activity-indicator.js.map

package/lib/module/atoms/activity-indicator/activity-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useAppTheme","ActivityIndicator","RNActivityIndicator","jsx","_jsx","props","theme","color","size"],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.tsx"],"mappings":";;AAAA,SAAQA,WAAW,QAAO,mBAAmB;AAE7C,SAAqCC,iBAAiB,IAAIC,mBAAmB,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAElG,OAAO,MAAMH,iBAA6C,GAAGI,KAAK,IAAI;EACpE,MAAMC,KAAK,GAAGN,WAAW,CAAC,CAAC;EAE3B,oBAAOI,IAAA,CAACF,mBAAmB;IAACK,KAAK,EAAED,KAAK,CAACC,KAAK,CAAC,qBAAqB,CAAE;IAACC,IAAI,EAAC,OAAO;IAAA,GAAKH;EAAK,CAAG,CAAC;AACnG,CAAC","ignoreList":[]}

package/lib/module/atoms/activity-indicator/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./activity-indicator.js";
+//# sourceMappingURL=index.js.map

package/lib/module/atoms/activity-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/index.ts"],"mappings":";;AAAA,cAAc,yBAAsB","ignoreList":[]}

package/lib/module/atoms/avatar/avatar.js

@@ -0,0 +1,47 @@
+"use strict";
+
+import { spacing } from '@hzblj/kara-theme';
+import { Box } from "../box/index.js";
+import { Image } from "../image/index.js";
+import { RnText } from "../rn-text/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DIAMETER = {
+  lg: spacing.s64,
+  md: spacing.s40,
+  sm: spacing.s24
+};
+const VARIANT = {
+  lg: 'headingXs',
+  md: 'labelMedium',
+  sm: 'caption'
+};
+export const Avatar = ({
+  initials,
+  size = 'md',
+  source,
+  testID
+}) => {
+  const diameter = DIAMETER[size];
+  return /*#__PURE__*/_jsx(Box, {
+    align: "center",
+    bg: "fill.tertiary",
+    borderRadius: "full",
+    h: diameter,
+    justify: "center",
+    overflow: "hidden",
+    testID: testID,
+    w: diameter,
+    children: source ? /*#__PURE__*/_jsx(Image, {
+      source: source,
+      style: {
+        height: diameter,
+        width: diameter
+      }
+    }) : /*#__PURE__*/_jsx(RnText, {
+      color: "content.secondary",
+      variant: VARIANT[size],
+      children: initials ?? ''
+    })
+  });
+};
+//# sourceMappingURL=avatar.js.map

package/lib/module/atoms/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["spacing","Box","Image","RnText","jsx","_jsx","DIAMETER","lg","s64","md","s40","sm","s24","VARIANT","Avatar","initials","size","source","testID","diameter","align","bg","borderRadius","h","justify","overflow","w","children","style","height","width","color","variant"],"sourceRoot":"../../../../src","sources":["atoms/avatar/avatar.tsx"],"mappings":";;AAAA,SAAQA,OAAO,QAAO,mBAAmB;AAEzC,SAAQC,GAAG,QAAO,iBAAQ;AAC1B,SAAQC,KAAK,QAAO,mBAAU;AAC9B,SAAQC,MAAM,QAAO,qBAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGjC,MAAMC,QAAQ,GAAG;EACfC,EAAE,EAAEP,OAAO,CAACQ,GAAG;EACfC,EAAE,EAAET,OAAO,CAACU,GAAG;EACfC,EAAE,EAAEX,OAAO,CAACY;AACd,CAA+C;AAE/C,MAAMC,OAAO,GAAG;EACdN,EAAE,EAAE,WAAW;EACfE,EAAE,EAAE,aAAa;EACjBE,EAAE,EAAE;AACN,CAAU;AAEV,OAAO,MAAMG,MAAuB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,IAAI,GAAG,IAAI;EAAEC,MAAM;EAAEC;AAAmB,CAAC,KAAK;EAC/F,MAAMC,QAAQ,GAAGb,QAAQ,CAACU,IAAI,CAAC;EAE/B,oBACEX,IAAA,CAACJ,GAAG;IACFmB,KAAK,EAAC,QAAQ;IACdC,EAAE,EAAC,eAAe;IAClBC,YAAY,EAAC,MAAM;IACnBC,CAAC,EAAEJ,QAAS;IACZK,OAAO,EAAC,QAAQ;IAChBC,QAAQ,EAAC,QAAQ;IACjBP,MAAM,EAAEA,MAAO;IACfQ,CAAC,EAAEP,QAAS;IAAAQ,QAAA,EAEXV,MAAM,gBACLZ,IAAA,CAACH,KAAK;MAACe,MAAM,EAAEA,MAAO;MAACW,KAAK,EAAE;QAACC,MAAM,EAAEV,QAAQ;QAAEW,KAAK,EAAEX;MAAQ;IAAE,CAAE,CAAC,gBAErEd,IAAA,CAACF,MAAM;MAAC4B,KAAK,EAAC,mBAAmB;MAACC,OAAO,EAAEnB,OAAO,CAACG,IAAI,CAAE;MAAAW,QAAA,EACtDZ,QAAQ,IAAI;IAAE,CACT;EACT,CACE,CAAC;AAEV,CAAC","ignoreList":[]}

package/lib/module/atoms/avatar/avatar.types.js

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

package/lib/module/atoms/avatar/avatar.types.js.map

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

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

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

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

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

package/lib/module/atoms/badge/badge-tokens.js

@@ -0,0 +1,21 @@
+"use strict";
+
+export const BADGE_TOKENS = {
+  accent: {
+    content: 'content.accent',
+    fill: 'fill.accent.base'
+  },
+  destructive: {
+    content: 'content.destructive',
+    fill: 'fill.destructive.base'
+  },
+  neutral: {
+    content: 'content.secondary',
+    fill: 'fill.tertiary'
+  },
+  success: {
+    content: 'content.success',
+    fill: 'fill.success.base'
+  }
+};
+//# sourceMappingURL=badge-tokens.js.map

package/lib/module/atoms/badge/badge-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BADGE_TOKENS","accent","content","fill","destructive","neutral","success"],"sourceRoot":"../../../../src","sources":["atoms/badge/badge-tokens.ts"],"mappings":";;AAIA,OAAO,MAAMA,YAAY,GAAG;EAC1BC,MAAM,EAAE;IAACC,OAAO,EAAE,gBAAgB;IAAEC,IAAI,EAAE;EAAkB,CAAC;EAC7DC,WAAW,EAAE;IAACF,OAAO,EAAE,qBAAqB;IAAEC,IAAI,EAAE;EAAuB,CAAC;EAC5EE,OAAO,EAAE;IAACH,OAAO,EAAE,mBAAmB;IAAEC,IAAI,EAAE;EAAe,CAAC;EAC9DG,OAAO,EAAE;IAACJ,OAAO,EAAE,iBAAiB;IAAEC,IAAI,EAAE;EAAmB;AACjE,CAA+E","ignoreList":[]}

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

@@ -0,0 +1,21 @@
+"use strict";
+
+import { Badge as ComposeBadge } from '@expo/ui/jetpack-compose';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useHostGuard } from "../../host-context.js";
+import { BADGE_TOKENS } from "./badge-tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Badge = ({
+  label,
+  tone = 'neutral'
+}) => {
+  useHostGuard('Badge');
+  const theme = useAppTheme();
+  const tokens = BADGE_TOKENS[tone];
+  return /*#__PURE__*/_jsx(ComposeBadge, {
+    containerColor: theme.color(tokens.fill),
+    contentColor: theme.color(tokens.content),
+    children: label
+  });
+};
+//# sourceMappingURL=badge.android.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Badge","ComposeBadge","useAppTheme","useHostGuard","BADGE_TOKENS","jsx","_jsx","label","tone","theme","tokens","containerColor","color","fill","contentColor","content","children"],"sourceRoot":"../../../../src","sources":["atoms/badge/badge.android.tsx"],"mappings":";;AAAA,SAAQA,KAAK,IAAIC,YAAY,QAAO,0BAA0B;AAC9D,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAE/C,SAAQC,YAAY,QAAO,mBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE3C,OAAO,MAAMN,KAAqB,GAAGA,CAAC;EAACO,KAAK;EAAEC,IAAI,GAAG;AAAqB,CAAC,KAAK;EAC9EL,YAAY,CAAC,OAAO,CAAC;EACrB,MAAMM,KAAK,GAAGP,WAAW,CAAC,CAAC;EAC3B,MAAMQ,MAAM,GAAGN,YAAY,CAACI,IAAI,CAAC;EAEjC,oBACEF,IAAA,CAACL,YAAY;IAACU,cAAc,EAAEF,KAAK,CAACG,KAAK,CAACF,MAAM,CAACG,IAAI,CAAE;IAACC,YAAY,EAAEL,KAAK,CAACG,KAAK,CAACF,MAAM,CAACK,OAAO,CAAE;IAAAC,QAAA,EAC/FT;EAAK,CACM,CAAC;AAEnB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,30 @@
+"use strict";
+
+import { HStack } from '@expo/ui/swift-ui';
+import { useSxModifiers } from '@hzblj/kara-sx';
+import { useHostGuard } from "../../host-context.js";
+import { Text } from "../text/index.js";
+import { BADGE_TOKENS } from "./badge-tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Badge = ({
+  label,
+  tone = 'neutral'
+}) => {
+  useHostGuard('Badge');
+  const tokens = BADGE_TOKENS[tone];
+  const modifiers = useSxModifiers({
+    bg: tokens.fill,
+    borderRadius: 'full',
+    px: 's8',
+    py: 's2'
+  });
+  return /*#__PURE__*/_jsx(HStack, {
+    modifiers: modifiers,
+    children: /*#__PURE__*/_jsx(Text, {
+      color: tokens.content,
+      variant: "labelMedium",
+      children: label
+    })
+  });
+};
+//# sourceMappingURL=badge.ios.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["HStack","useSxModifiers","useHostGuard","Text","BADGE_TOKENS","jsx","_jsx","Badge","label","tone","tokens","modifiers","bg","fill","borderRadius","px","py","children","color","content","variant"],"sourceRoot":"../../../../src","sources":["atoms/badge/badge.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,IAAI,QAAO,kBAAS;AAE5B,SAAQC,YAAY,QAAO,mBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE3C,OAAO,MAAMC,KAAqB,GAAGA,CAAC;EAACC,KAAK;EAAEC,IAAI,GAAG;AAAqB,CAAC,KAAK;EAC9EP,YAAY,CAAC,OAAO,CAAC;EACrB,MAAMQ,MAAM,GAAGN,YAAY,CAACK,IAAI,CAAC;EACjC,MAAME,SAAS,GAAGV,cAAc,CAAC;IAACW,EAAE,EAAEF,MAAM,CAACG,IAAI;IAAEC,YAAY,EAAE,MAAM;IAAEC,EAAE,EAAE,IAAI;IAAEC,EAAE,EAAE;EAAI,CAAC,CAAC;EAE7F,oBACEV,IAAA,CAACN,MAAM;IAACW,SAAS,EAAEA,SAAU;IAAAM,QAAA,eAC3BX,IAAA,CAACH,IAAI;MAACe,KAAK,EAAER,MAAM,CAACS,OAAQ;MAACC,OAAO,EAAC,aAAa;MAAAH,QAAA,EAC/CT;IAAK,CACF;EAAC,CACD,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/atoms/badge/badge.types.js

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

package/lib/module/atoms/badge/badge.types.js.map

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

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

@@ -0,0 +1,6 @@
+"use strict";
+
+export * from './badge';
+export * from "./badge.types.js";
+export * from "./badge-tokens.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/badge/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,kBAAe;AAC7B,cAAc,mBAAgB","ignoreList":[]}

package/lib/module/atoms/box/a-box.js

@@ -0,0 +1,6 @@
+"use strict";
+
+import Animated from 'react-native-reanimated';
+import { Box } from "./box.js";
+export const ABox = Animated.createAnimatedComponent(Box);
+//# sourceMappingURL=a-box.js.map

package/lib/module/atoms/box/a-box.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Animated","Box","ABox","createAnimatedComponent"],"sourceRoot":"../../../../src","sources":["atoms/box/a-box.ts"],"mappings":";;AAAA,OAAOA,QAAQ,MAAM,yBAAyB;AAE9C,SAAQC,GAAG,QAAO,UAAO;AAEzB,OAAO,MAAMC,IAAI,GAAGF,QAAQ,CAACG,uBAAuB,CAACF,GAAG,CAAC","ignoreList":[]}

package/lib/module/atoms/box/box.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import { sx } from '@hzblj/kara-sx';
+import { View } from 'react-native';
+
+/**
+ * A React Native `View` that takes the design system's `sx` props. The `sx()` HOC is the whole
+ * implementation — Box is just its first caller, and any other style-taking component gets the same.
+ */
+export const Box = sx(View);
+//# sourceMappingURL=box.js.map

package/lib/module/atoms/box/box.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sx","View","Box"],"sourceRoot":"../../../../src","sources":["atoms/box/box.tsx"],"mappings":";;AAAA,SAAQA,EAAE,QAAO,gBAAgB;AACjC,SAAQC,IAAI,QAAO,cAAc;;AAEjC;AACA;AACA;AACA;AACA,OAAO,MAAMC,GAAG,GAAGF,EAAE,CAACC,IAAI,CAAC","ignoreList":[]}

package/lib/module/atoms/box/box.types.js

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

package/lib/module/atoms/box/box.types.js.map

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

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

@@ -0,0 +1,6 @@
+"use strict";
+
+export * from "./a-box.js";
+export * from "./box.js";
+export * from "./box.types.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/box/index.ts"],"mappings":";;AAAA,cAAc,YAAS;AACvB,cAAc,UAAO;AACrB,cAAc,gBAAa","ignoreList":[]}

package/lib/module/atoms/button/button-tokens.js

@@ -0,0 +1,43 @@
+"use strict";
+
+const TOKENS = {
+  accent: {
+    content: 'content.on.bg',
+    fill: 'fill.accent.primary',
+    shadow: 'btn.accent'
+  },
+  destructive: {
+    content: 'content.on.destructive',
+    fill: 'fill.destructive.primary',
+    shadow: 'btn.destructive'
+  },
+  glass: {
+    content: 'content.primary',
+    fill: 'btn.bg.glass.base',
+    shadow: 'btn.glass'
+  },
+  secondary: {
+    content: 'content.primary',
+    fill: 'btn.bg.secondary.base',
+    shadow: 'btn.secondary'
+  }
+};
+export const buttonTokens = (variant, disabled, theme) => {
+  const tokens = TOKENS[variant];
+  if (!disabled) {
+    return tokens;
+  }
+  const disabledFill = {
+    accent: 'fill.accent.disabled',
+    destructive: 'fill.destructive.disabled',
+    glass: 'btn.bg.glass.disabled',
+    secondary: 'btn.bg.secondary.disabled'
+  };
+  void theme;
+  return {
+    content: 'btn.content.disabled',
+    fill: disabledFill[variant],
+    shadow: tokens.shadow
+  };
+};
+//# sourceMappingURL=button-tokens.js.map

package/lib/module/atoms/button/button-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TOKENS","accent","content","fill","shadow","destructive","glass","secondary","buttonTokens","variant","disabled","theme","tokens","disabledFill"],"sourceRoot":"../../../../src","sources":["atoms/button/button-tokens.ts"],"mappings":";;AAUA,MAAMA,MAAM,GAAG;EACbC,MAAM,EAAE;IAACC,OAAO,EAAE,eAAe;IAAEC,IAAI,EAAE,qBAAqB;IAAEC,MAAM,EAAE;EAAY,CAAC;EACrFC,WAAW,EAAE;IAACH,OAAO,EAAE,wBAAwB;IAAEC,IAAI,EAAE,0BAA0B;IAAEC,MAAM,EAAE;EAAiB,CAAC;EAC7GE,KAAK,EAAE;IAACJ,OAAO,EAAE,iBAAiB;IAAEC,IAAI,EAAE,mBAAmB;IAAEC,MAAM,EAAE;EAAW,CAAC;EACnFG,SAAS,EAAE;IAACL,OAAO,EAAE,iBAAiB;IAAEC,IAAI,EAAE,uBAAuB;IAAEC,MAAM,EAAE;EAAe;AAChG,CAAwD;AAExD,OAAO,MAAMI,YAAY,GAAGA,CAACC,OAAsB,EAAEC,QAAiB,EAAEC,KAAY,KAAK;EACvF,MAAMC,MAAM,GAAGZ,MAAM,CAACS,OAAO,CAAC;EAE9B,IAAI,CAACC,QAAQ,EAAE;IACb,OAAOE,MAAM;EACf;EAEA,MAAMC,YAAY,GAAG;IACnBZ,MAAM,EAAE,sBAAsB;IAC9BI,WAAW,EAAE,2BAA2B;IACxCC,KAAK,EAAE,uBAAuB;IAC9BC,SAAS,EAAE;EACb,CAAsD;EAEtD,KAAKI,KAAK;EAEV,OAAO;IAACT,OAAO,EAAE,sBAAsB;IAAEC,IAAI,EAAEU,YAAY,CAACJ,OAAO,CAAC;IAAEL,MAAM,EAAEQ,MAAM,CAACR;EAAM,CAAC;AAC9F,CAAC","ignoreList":[]}

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

@@ -0,0 +1,38 @@
+"use strict";
+
+import { Button as ComposeButton } from '@expo/ui/jetpack-compose';
+import { useSxModifiers } from '@hzblj/kara-sx';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useHostGuard } from "../../host-context.js";
+import { buttonTokens } from "./button-tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Button = ({
+  disabled = false,
+  label,
+  onPress,
+  testID,
+  variant = 'accent',
+  wide = true
+}) => {
+  useHostGuard('Button');
+  const theme = useAppTheme();
+  const tokens = buttonTokens(variant, disabled, theme);
+  const modifiers = useSxModifiers({
+    borderRadius: 'medium',
+    shadow: tokens.shadow,
+    wide
+  });
+  return /*#__PURE__*/_jsx(ComposeButton, {
+    colors: {
+      containerColor: theme.color(tokens.fill),
+      contentColor: theme.color(tokens.content),
+      disabledContainerColor: theme.color(tokens.fill),
+      disabledContentColor: theme.color(tokens.content)
+    },
+    enabled: !disabled,
+    modifiers: modifiers,
+    onClick: onPress,
+    children: label
+  });
+};
+//# sourceMappingURL=button.android.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Button","ComposeButton","useSxModifiers","useAppTheme","useHostGuard","buttonTokens","jsx","_jsx","disabled","label","onPress","testID","variant","wide","theme","tokens","modifiers","borderRadius","shadow","colors","containerColor","color","fill","contentColor","content","disabledContainerColor","disabledContentColor","enabled","onClick","children"],"sourceRoot":"../../../../src","sources":["atoms/button/button.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,QAAO,0BAA0B;AAChE,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAE/C,SAAQC,YAAY,QAAO,oBAAiB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE5C,OAAO,MAAMP,MAAuB,GAAGA,CAAC;EACtCQ,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACLC,OAAO;EACPC,MAAM;EACNC,OAAO,GAAG,QAAQ;EAClBC,IAAI,GAAG;AACI,CAAC,KAAK;EACjBT,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMU,KAAK,GAAGX,WAAW,CAAC,CAAC;EAC3B,MAAMY,MAAM,GAAGV,YAAY,CAACO,OAAO,EAAEJ,QAAQ,EAAEM,KAAK,CAAC;EACrD,MAAME,SAAS,GAAGd,cAAc,CAAC;IAACe,YAAY,EAAE,QAAQ;IAAEC,MAAM,EAAEH,MAAM,CAACG,MAAM;IAAEL;EAAI,CAAC,CAAC;EAEvF,oBACEN,IAAA,CAACN,aAAa;IACZkB,MAAM,EAAE;MACNC,cAAc,EAAEN,KAAK,CAACO,KAAK,CAACN,MAAM,CAACO,IAAI,CAAC;MACxCC,YAAY,EAAET,KAAK,CAACO,KAAK,CAACN,MAAM,CAACS,OAAO,CAAC;MACzCC,sBAAsB,EAAEX,KAAK,CAACO,KAAK,CAACN,MAAM,CAACO,IAAI,CAAC;MAChDI,oBAAoB,EAAEZ,KAAK,CAACO,KAAK,CAACN,MAAM,CAACS,OAAO;IAClD,CAAE;IACFG,OAAO,EAAE,CAACnB,QAAS;IACnBQ,SAAS,EAAEA,SAAU;IACrBY,OAAO,EAAElB,OAAQ;IAAAmB,QAAA,EAEhBpB;EAAK,CACO,CAAC;AAEpB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,86 @@
+"use strict";
+
+import { Button as SwiftUIButton } from '@expo/ui/swift-ui';
+import { buttonStyle as buttonStyleModifier, controlSize as controlSizeModifier, disabled as disabledModifier, glassEffect as glassEffectModifier, tint as tintModifier } from '@expo/ui/swift-ui/modifiers';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
+import { useHostGuard } from "../../host-context.js";
+import { Text } from "../text/index.js";
+import { VStack } from "../v-stack/index.js";
+import { buttonTokens } from "./button-tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const STYLE_BY_VARIANT = {
+  accent: 'borderedProminent',
+  destructive: 'borderedProminent',
+  glass: 'glass',
+  secondary: 'bordered'
+};
+const TINT_BY_VARIANT = {
+  accent: 'fill.accent.primary',
+  destructive: 'fill.destructive.primary',
+  glass: undefined,
+  secondary: undefined
+};
+export const Button = ({
+  buttonStyle,
+  controlSize = 'large',
+  disabled = false,
+  label,
+  onPress,
+  testID,
+  tint,
+  variant = 'accent',
+  wide = true
+}) => {
+  useHostGuard('Button');
+  const theme = useAppTheme();
+  const tokens = buttonTokens(variant, disabled, theme);
+  const resolvedTint = tint ?? TINT_BY_VARIANT[variant];
+  const style = buttonStyle ?? STYLE_BY_VARIANT[variant];
+
+  /**
+   * `.glass` ignores `.tint` — colouring the material is `.glassEffect(.regular.tint(…))`, a different
+   * modifier that only lands on a button once the style stops drawing its own material. So a tinted
+   * glass button is a plain one wearing the effect, and `interactive` is what buys back the press
+   * response the style would have given it.
+   *
+   * `plain` has no chrome for `controlSize` to size, so the label carries the padding that gives the
+   * button its height — without it a tinted glass button comes out shorter than every other variant.
+   */
+  const glassTint = style === 'glass' && resolvedTint ? theme.color(resolvedTint) : undefined;
+  const modifiers = useMemo(() => {
+    const list = [buttonStyleModifier(glassTint ? 'plain' : style), controlSizeModifier(controlSize)];
+    if (glassTint) {
+      list.push(glassEffectModifier({
+        glass: {
+          interactive: true,
+          tint: glassTint,
+          variant: 'regular'
+        },
+        shape: 'capsule'
+      }));
+    } else if (resolvedTint) {
+      list.push(tintModifier(theme.color(resolvedTint)));
+    }
+    if (disabled) {
+      list.push(disabledModifier(true));
+    }
+    return list;
+  }, [controlSize, disabled, glassTint, resolvedTint, style, theme]);
+  return /*#__PURE__*/_jsx(SwiftUIButton, {
+    modifiers: modifiers,
+    onPress: onPress,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(VStack, {
+      align: "center",
+      py: glassTint ? 's16' : undefined,
+      wide: wide,
+      children: /*#__PURE__*/_jsx(Text, {
+        color: tokens.content,
+        variant: "body",
+        children: label
+      })
+    })
+  });
+};
+//# sourceMappingURL=button.ios.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Button","SwiftUIButton","buttonStyle","buttonStyleModifier","controlSize","controlSizeModifier","disabled","disabledModifier","glassEffect","glassEffectModifier","tint","tintModifier","useAppTheme","useMemo","useHostGuard","Text","VStack","buttonTokens","jsx","_jsx","STYLE_BY_VARIANT","accent","destructive","glass","secondary","TINT_BY_VARIANT","undefined","label","onPress","testID","variant","wide","theme","tokens","resolvedTint","style","glassTint","color","modifiers","list","push","interactive","shape","children","align","py","content"],"sourceRoot":"../../../../src","sources":["atoms/button/button.ios.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/atoms/button/button.types.js

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

package/lib/module/atoms/button/button.types.js.map

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+"use strict";
+
+import { Column } from '@expo/ui/jetpack-compose';
+import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { useSxModifiers } from '@hzblj/kara-sx';
+import { useMemo } from 'react';
+import { useHostGuard } from "../../host-context.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Card = ({
+  children,
+  testID,
+  ...sx
+}) => {
+  useHostGuard('Card');
+  const sxModifiers = useSxModifiers({
+    bg: 'surface.primary',
+    borderRadius: 'large',
+    p: 's16',
+    shadow: 'card',
+    ...sx
+  });
+  const modifiers = useMemo(() => testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers, [sxModifiers, testID]);
+  return /*#__PURE__*/_jsx(Column, {
+    modifiers: modifiers,
+    children: children
+  });
+};
+//# sourceMappingURL=card.android.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Column","testID","testIdModifier","useSxModifiers","useMemo","useHostGuard","jsx","_jsx","Card","children","sx","sxModifiers","bg","borderRadius","p","shadow","modifiers"],"sourceRoot":"../../../../src","sources":["atoms/card/card.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,0BAA0B;AAC/C,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,IAAmB,GAAGA,CAAC;EAACC,QAAQ;EAAER,MAAM;EAAE,GAAGS;AAAa,CAAC,KAAK;EAC3EL,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMM,WAAW,GAAGR,cAAc,CAAC;IAACS,EAAE,EAAE,iBAAiB;IAAEC,YAAY,EAAE,OAAO;IAAEC,CAAC,EAAE,KAAK;IAAEC,MAAM,EAAE,MAAM;IAAE,GAAGL;EAAE,CAAC,CAAC;EACnH,MAAMM,SAAS,GAAGZ,OAAO,CACvB,MAAOH,MAAM,GAAG,CAAC,GAAGU,WAAW,EAAET,cAAc,CAACD,MAAM,CAAC,CAAC,GAAGU,WAAY,EACvE,CAACA,WAAW,EAAEV,MAAM,CACtB,CAAC;EAED,oBAAOM,IAAA,CAACP,MAAM;IAACgB,SAAS,EAAEA,SAAU;IAAAP,QAAA,EAAEA;EAAQ,CAAS,CAAC;AAC1D,CAAC","ignoreList":[]}

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

@@ -0,0 +1,27 @@
+"use strict";
+
+import { VStack } from '@expo/ui/swift-ui';
+import { useSxModifiers } from '@hzblj/kara-sx';
+import { useHostGuard } from "../../host-context.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Card = ({
+  children,
+  testID,
+  ...sx
+}) => {
+  useHostGuard('Card');
+  const modifiers = useSxModifiers({
+    bg: 'surface.primary',
+    borderRadius: 'large',
+    p: 's16',
+    shadow: 'card',
+    ...sx
+  });
+  return /*#__PURE__*/_jsx(VStack, {
+    alignment: "leading",
+    modifiers: modifiers,
+    testID: testID,
+    children: children
+  });
+};
+//# sourceMappingURL=card.ios.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["VStack","useSxModifiers","useHostGuard","jsx","_jsx","Card","children","testID","sx","modifiers","bg","borderRadius","p","shadow","alignment"],"sourceRoot":"../../../../src","sources":["atoms/card/card.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,IAAmB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,MAAM;EAAE,GAAGC;AAAa,CAAC,KAAK;EAC3EN,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMO,SAAS,GAAGR,cAAc,CAAC;IAACS,EAAE,EAAE,iBAAiB;IAAEC,YAAY,EAAE,OAAO;IAAEC,CAAC,EAAE,KAAK;IAAEC,MAAM,EAAE,MAAM;IAAE,GAAGL;EAAE,CAAC,CAAC;EAEjH,oBACEJ,IAAA,CAACJ,MAAM;IAACc,SAAS,EAAC,SAAS;IAACL,SAAS,EAAEA,SAAU;IAACF,MAAM,EAAEA,MAAO;IAAAD,QAAA,EAC9DA;EAAQ,CACH,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/atoms/card/card.types.js

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

package/lib/module/atoms/card/card.types.js.map

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/card/index.ts"],"mappings":";;AAAA,cAAc,QAAQ;AACtB,cAAc,iBAAc","ignoreList":[]}

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

@@ -0,0 +1,32 @@
+"use strict";
+
+import { Checkbox as ComposeCheckbox, Row, Text } from '@expo/ui/jetpack-compose';
+import { useAppTheme } from '@hzblj/kara-theme';
+import { useHostGuard } from "../../host-context.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Checkbox = ({
+  disabled = false,
+  label,
+  onValueChange,
+  value
+}) => {
+  useHostGuard('Checkbox');
+  const theme = useAppTheme();
+  const control = /*#__PURE__*/_jsx(ComposeCheckbox, {
+    enabled: !disabled,
+    onCheckedChange: onValueChange,
+    value: value
+  });
+  if (!label) {
+    return control;
+  }
+  return /*#__PURE__*/_jsxs(Row, {
+    verticalAlignment: "center",
+    children: [control, /*#__PURE__*/_jsx(Text, {
+      color: theme.colorString('content.primary'),
+      style: theme.typography.body,
+      children: label
+    })]
+  });
+};
+//# sourceMappingURL=checkbox.android.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Checkbox","ComposeCheckbox","Row","Text","useAppTheme","useHostGuard","jsx","_jsx","jsxs","_jsxs","disabled","label","onValueChange","value","theme","control","enabled","onCheckedChange","verticalAlignment","children","color","colorString","style","typography","body"],"sourceRoot":"../../../../src","sources":["atoms/checkbox/checkbox.android.tsx"],"mappings":";;AAAA,SAAQA,QAAQ,IAAIC,eAAe,EAAEC,GAAG,EAAEC,IAAI,QAAO,0BAA0B;AAC/E,SAAQC,WAAW,QAAO,mBAAmB;AAE7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,OAAO,MAAMT,QAA2B,GAAGA,CAAC;EAACU,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAoB,CAAC,KAAK;EAC7GR,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMS,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,OAAO,gBAAGR,IAAA,CAACN,eAAe;IAACe,OAAO,EAAE,CAACN,QAAS;IAACO,eAAe,EAAEL,aAAc;IAACC,KAAK,EAAEA;EAAM,CAAE,CAAC;EAErG,IAAI,CAACF,KAAK,EAAE;IACV,OAAOI,OAAO;EAChB;EAEA,oBACEN,KAAA,CAACP,GAAG;IAACgB,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,GAC5BJ,OAAO,eACRR,IAAA,CAACJ,IAAI;MAACiB,KAAK,EAAEN,KAAK,CAACO,WAAW,CAAC,iBAAiB,CAAE;MAACC,KAAK,EAAER,KAAK,CAACS,UAAU,CAACC,IAAK;MAAAL,QAAA,EAC7ER;IAAK,CACF,CAAC;EAAA,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}