@xleddyl/443-components-native 0.0.0-stage → 0.0.0

package/lib/module/components/display/Chip.js

@@ -0,0 +1,122 @@
+"use strict";
+
+import { View } from 'react-native';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { hitSlopFor } from "../../utils/hitSlop.js";
+import { disabledOpacity } from "../../utils/styles.js";
+import { buttonColors } from "../core/buttonColors.js";
+import { renderIcon } from "../core/Icon.js";
+import { Text } from "../core/Text.js";
+import { Touchable } from "../core/Touchable.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const chipHeight = (theme, size) => theme.components.chip?.height?.[size] ?? Math.round(theme.sizes.control[size] * 0.75);
+export const Chip = ({
+  ref,
+  children,
+  tone = 'neutral',
+  variant = 'soft',
+  size = 'md',
+  selected = false,
+  disabled = false,
+  onPress,
+  onRemove,
+  removeLabel,
+  leftIcon,
+  leftElement,
+  style,
+  styles
+}) => {
+  const {
+    theme
+  } = useUnistyles();
+  const colors = buttonColors(theme, selected ? 'solid' : variant, tone);
+  const iconSize = size === 'lg' ? 'md' : 'sm';
+  const leading = leftElement ?? renderIcon(leftIcon, {
+    size: iconSize,
+    color: colors.content
+  });
+  const body = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [leading ? /*#__PURE__*/_jsx(View, {
+      style: [stylesheet.element, styles?.leftElement],
+      children: leading
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      variant: size === 'sm' ? 'caption' : 'label',
+      weight: "medium",
+      numberOfLines: 1,
+      style: [stylesheet.label(colors.content), styles?.label],
+      children: children
+    })]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [stylesheet.container(size, colors.background, colors.border, disabled), style, styles?.container],
+    children: [onPress ? /*#__PURE__*/_jsx(Touchable, {
+      feedback: disabled ? 'none' : 'opacity',
+      accessibilityRole: "button",
+      accessibilityLabel: children,
+      accessibilityState: {
+        selected,
+        disabled
+      },
+      disabled: disabled,
+      onPress: onPress,
+      hitSlop: hitSlopFor(chipHeight(theme, size), undefined, theme.sizes.minTouchTarget),
+      style: stylesheet.body,
+      children: body
+    }) : /*#__PURE__*/_jsx(View, {
+      style: stylesheet.body,
+      accessible: true,
+      accessibilityLabel: children,
+      children: body
+    }), onRemove ? /*#__PURE__*/_jsx(Touchable, {
+      feedback: disabled ? 'none' : 'opacity',
+      accessibilityRole: "button",
+      accessibilityLabel: removeLabel ?? `Remove ${children}`,
+      disabled: disabled,
+      onPress: onRemove,
+      hitSlop: hitSlopFor(chipHeight(theme, size), 24, theme.sizes.minTouchTarget),
+      style: [stylesheet.remove, styles?.remove],
+      children: renderIcon('close', {
+        size: iconSize,
+        color: colors.content
+      })
+    }) : null]
+  });
+};
+const stylesheet = StyleSheet.create(theme => ({
+  container: (size, background, border, disabled) => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    height: chipHeight(theme, size),
+    borderRadius: theme.components.chip?.radius ?? theme.radius.full,
+    backgroundColor: background,
+    borderColor: border,
+    borderWidth: theme.sizes.borderWidth,
+    opacity: disabledOpacity(theme, disabled)
+  }),
+  body: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.space(0.5),
+    paddingLeft: theme.space(1.25),
+    paddingRight: theme.space(1.25),
+    height: '100%',
+    flexShrink: 1
+  },
+  remove: {
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingRight: theme.space(1),
+    marginLeft: -theme.space(0.75)
+  },
+  element: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  label: color => ({
+    color
+  })
+}));
+//# sourceMappingURL=Chip.js.map

package/lib/module/components/display/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","StyleSheet","useUnistyles","hitSlopFor","disabledOpacity","buttonColors","renderIcon","Text","Touchable","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","chipHeight","theme","size","components","chip","height","Math","round","sizes","control","Chip","ref","children","tone","variant","selected","disabled","onPress","onRemove","removeLabel","leftIcon","leftElement","style","styles","colors","iconSize","leading","color","content","body","stylesheet","element","weight","numberOfLines","label","container","background","border","feedback","accessibilityRole","accessibilityLabel","accessibilityState","hitSlop","undefined","minTouchTarget","accessible","remove","create","flexDirection","alignItems","alignSelf","borderRadius","radius","full","backgroundColor","borderColor","borderWidth","opacity","gap","space","paddingLeft","paddingRight","flexShrink","justifyContent","marginLeft"],"sourceRoot":"../../../../src","sources":["components/display/Chip.tsx"],"mappings":";;AACA,SAASA,IAAI,QAAQ,cAAc;AAEnC,SAASC,UAAU,EAAEC,YAAY,QAAQ,wBAAwB;AAEjE,SAASC,UAAU,QAAQ,wBAAqB;AAChD,SAASC,eAAe,QAAQ,uBAAoB;AAEpD,SAASC,YAAY,QAAQ,yBAAsB;AAEnD,SAASC,UAAU,QAAQ,iBAAc;AACzC,SAASC,IAAI,QAAQ,iBAAc;AACnC,SAASC,SAAS,QAAQ,sBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAkC7C,MAAMC,UAAU,GAAGA,CAACC,KAAgB,EAAEC,IAAiB,KACpDD,KAAK,CAACE,UAAU,CAACC,IAAI,EAAEC,MAAM,GAAGH,IAAI,CAAC,IAAII,IAAI,CAACC,KAAK,CAACN,KAAK,CAACO,KAAK,CAACC,OAAO,CAACP,IAAI,CAAC,GAAG,IAAI,CAAC;AAExF,OAAO,MAAMQ,IAAI,GAAGA,CAAC;EAClBC,GAAG;EACHC,QAAQ;EACRC,IAAI,GAAG,SAAS;EAChBC,OAAO,GAAG,MAAM;EAChBZ,IAAI,GAAG,IAAI;EACXa,QAAQ,GAAG,KAAK;EAChBC,QAAQ,GAAG,KAAK;EAChBC,OAAO;EACPC,QAAQ;EACRC,WAAW;EACXC,QAAQ;EACRC,WAAW;EACXC,KAAK;EACLC;AACQ,CAAC,KAAK;EACd,MAAM;IAAEtB;EAAM,CAAC,GAAGd,YAAY,CAAC,CAAC;EAChC,MAAMqC,MAAM,GAAGlC,YAAY,CAACW,KAAK,EAAEc,QAAQ,GAAG,OAAO,GAAGD,OAAO,EAAED,IAAI,CAAC;EACtE,MAAMY,QAAQ,GAAGvB,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI;EAC5C,MAAMwB,OAAO,GAAGL,WAAW,IAAI9B,UAAU,CAAC6B,QAAQ,EAAE;IAAElB,IAAI,EAAEuB,QAAQ;IAAEE,KAAK,EAAEH,MAAM,CAACI;EAAQ,CAAC,CAAC;EAC9F,MAAMC,IAAI,gBACP9B,KAAA,CAAAF,SAAA;IAAAe,QAAA,GACIc,OAAO,gBAAG/B,IAAA,CAACV,IAAI;MAACqC,KAAK,EAAE,CAACQ,UAAU,CAACC,OAAO,EAAER,MAAM,EAAEF,WAAW,CAAE;MAAAT,QAAA,EAAEc;IAAO,CAAO,CAAC,GAAG,IAAI,eAC1F/B,IAAA,CAACH,IAAI;MACFsB,OAAO,EAAEZ,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,OAAQ;MAC7C8B,MAAM,EAAC,QAAQ;MACfC,aAAa,EAAE,CAAE;MACjBX,KAAK,EAAE,CAACQ,UAAU,CAACI,KAAK,CAACV,MAAM,CAACI,OAAO,CAAC,EAAEL,MAAM,EAAEW,KAAK,CAAE;MAAAtB,QAAA,EAExDA;IAAQ,CACN,CAAC;EAAA,CACR,CACJ;EAED,oBACGb,KAAA,CAACd,IAAI;IACF0B,GAAG,EAAEA,GAAI;IACTW,KAAK,EAAE,CACJQ,UAAU,CAACK,SAAS,CAACjC,IAAI,EAAEsB,MAAM,CAACY,UAAU,EAAEZ,MAAM,CAACa,MAAM,EAAErB,QAAQ,CAAC,EACtEM,KAAK,EACLC,MAAM,EAAEY,SAAS,CAClB;IAAAvB,QAAA,GAEDK,OAAO,gBACLtB,IAAA,CAACF,SAAS;MACP6C,QAAQ,EAAEtB,QAAQ,GAAG,MAAM,GAAG,SAAU;MACxCuB,iBAAiB,EAAC,QAAQ;MAC1BC,kBAAkB,EAAE5B,QAAS;MAC7B6B,kBAAkB,EAAE;QAAE1B,QAAQ;QAAEC;MAAS,CAAE;MAC3CA,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjByB,OAAO,EAAEtD,UAAU,CAACY,UAAU,CAACC,KAAK,EAAEC,IAAI,CAAC,EAAEyC,SAAS,EAAE1C,KAAK,CAACO,KAAK,CAACoC,cAAc,CAAE;MACpFtB,KAAK,EAAEQ,UAAU,CAACD,IAAK;MAAAjB,QAAA,EAEtBiB;IAAI,CACG,CAAC,gBAEZlC,IAAA,CAACV,IAAI;MAACqC,KAAK,EAAEQ,UAAU,CAACD,IAAK;MAACgB,UAAU;MAACL,kBAAkB,EAAE5B,QAAS;MAAAA,QAAA,EAClEiB;IAAI,CACF,CACR,EACAX,QAAQ,gBACNvB,IAAA,CAACF,SAAS;MACP6C,QAAQ,EAAEtB,QAAQ,GAAG,MAAM,GAAG,SAAU;MACxCuB,iBAAiB,EAAC,QAAQ;MAC1BC,kBAAkB,EAAErB,WAAW,IAAI,UAAUP,QAAQ,EAAG;MACxDI,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEC,QAAS;MAClBwB,OAAO,EAAEtD,UAAU,CAACY,UAAU,CAACC,KAAK,EAAEC,IAAI,CAAC,EAAE,EAAE,EAAED,KAAK,CAACO,KAAK,CAACoC,cAAc,CAAE;MAC7EtB,KAAK,EAAE,CAACQ,UAAU,CAACgB,MAAM,EAAEvB,MAAM,EAAEuB,MAAM,CAAE;MAAAlC,QAAA,EAE1CrB,UAAU,CAAC,OAAO,EAAE;QAAEW,IAAI,EAAEuB,QAAQ;QAAEE,KAAK,EAAEH,MAAM,CAACI;MAAQ,CAAC;IAAC,CACvD,CAAC,GACX,IAAI;EAAA,CACL,CAAC;AAEb,CAAC;AAED,MAAME,UAAU,GAAG5C,UAAU,CAAC6D,MAAM,CAAE9C,KAAK,KAAM;EAC9CkC,SAAS,EAAEA,CAACjC,IAAiB,EAAEkC,UAAkB,EAAEC,MAAc,EAAErB,QAAiB,MAAM;IACvFgC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,SAAS,EAAE,YAAY;IACvB7C,MAAM,EAAEL,UAAU,CAACC,KAAK,EAAEC,IAAI,CAAC;IAC/BiD,YAAY,EAAElD,KAAK,CAACE,UAAU,CAACC,IAAI,EAAEgD,MAAM,IAAInD,KAAK,CAACmD,MAAM,CAACC,IAAI;IAChEC,eAAe,EAAElB,UAAU;IAC3BmB,WAAW,EAAElB,MAAM;IACnBmB,WAAW,EAAEvD,KAAK,CAACO,KAAK,CAACgD,WAAW;IACpCC,OAAO,EAAEpE,eAAe,CAACY,KAAK,EAAEe,QAAQ;EAC3C,CAAC,CAAC;EACFa,IAAI,EAAE;IACHmB,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBS,GAAG,EAAEzD,KAAK,CAAC0D,KAAK,CAAC,GAAG,CAAC;IACrBC,WAAW,EAAE3D,KAAK,CAAC0D,KAAK,CAAC,IAAI,CAAC;IAC9BE,YAAY,EAAE5D,KAAK,CAAC0D,KAAK,CAAC,IAAI,CAAC;IAC/BtD,MAAM,EAAE,MAAM;IACdyD,UAAU,EAAE;EACf,CAAC;EACDhB,MAAM,EAAE;IACLzC,MAAM,EAAE,MAAM;IACd4C,UAAU,EAAE,QAAQ;IACpBc,cAAc,EAAE,QAAQ;IACxBF,YAAY,EAAE5D,KAAK,CAAC0D,KAAK,CAAC,CAAC,CAAC;IAC5BK,UAAU,EAAE,CAAC/D,KAAK,CAAC0D,KAAK,CAAC,IAAI;EAChC,CAAC;EACD5B,OAAO,EAAE;IACNkB,UAAU,EAAE,QAAQ;IACpBc,cAAc,EAAE;EACnB,CAAC;EACD7B,KAAK,EAAGP,KAAa,KAAM;IACxBA;EACH,CAAC;AACJ,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/display/DescriptionList.js

@@ -0,0 +1,40 @@
+"use strict";
+
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { KeyValue } from "./KeyValue.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DescriptionList = ({
+  ref,
+  items,
+  orientation = 'horizontal',
+  separators = true,
+  style,
+  styles
+}) => /*#__PURE__*/_jsx(View, {
+  ref: ref,
+  style: [stylesheet.container, style, styles?.container],
+  children: items.map((item, index) => /*#__PURE__*/_jsxs(View, {
+    children: [separators && index > 0 ? /*#__PURE__*/_jsx(View, {
+      style: [stylesheet.separator, styles?.separator]
+    }) : null, /*#__PURE__*/_jsx(KeyValue, {
+      label: item.label,
+      value: item.value,
+      orientation: orientation,
+      style: [stylesheet.item, styles?.item]
+    })]
+  }, item.label))
+});
+const stylesheet = StyleSheet.create(theme => ({
+  container: {
+    alignSelf: 'stretch'
+  },
+  item: {
+    paddingVertical: theme.space(1.25)
+  },
+  separator: {
+    height: theme.sizes.borderWidth,
+    backgroundColor: theme.colors.border
+  }
+}));
+//# sourceMappingURL=DescriptionList.js.map

package/lib/module/components/display/DescriptionList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","StyleSheet","KeyValue","jsx","_jsx","jsxs","_jsxs","DescriptionList","ref","items","orientation","separators","style","styles","stylesheet","container","children","map","item","index","separator","label","value","create","theme","alignSelf","paddingVertical","space","height","sizes","borderWidth","backgroundColor","colors","border"],"sourceRoot":"../../../../src","sources":["components/display/DescriptionList.tsx"],"mappings":";;AACA,SAASA,IAAI,QAAQ,cAAc;AAEnC,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,QAAQ,QAAQ,eAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAsBrC,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAC7BC,GAAG;EACHC,KAAK;EACLC,WAAW,GAAG,YAAY;EAC1BC,UAAU,GAAG,IAAI;EACjBC,KAAK;EACLC;AACmB,CAAC,kBACpBT,IAAA,CAACJ,IAAI;EAACQ,GAAG,EAAEA,GAAI;EAACI,KAAK,EAAE,CAACE,UAAU,CAACC,SAAS,EAAEH,KAAK,EAAEC,MAAM,EAAEE,SAAS,CAAE;EAAAC,QAAA,EACpEP,KAAK,CAACQ,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACpBb,KAAA,CAACN,IAAI;IAAAgB,QAAA,GACDL,UAAU,IAAIQ,KAAK,GAAG,CAAC,gBACrBf,IAAA,CAACJ,IAAI;MAACY,KAAK,EAAE,CAACE,UAAU,CAACM,SAAS,EAAEP,MAAM,EAAEO,SAAS;IAAE,CAAE,CAAC,GACzD,IAAI,eACRhB,IAAA,CAACF,QAAQ;MACNmB,KAAK,EAAEH,IAAI,CAACG,KAAM;MAClBC,KAAK,EAAEJ,IAAI,CAACI,KAAM;MAClBZ,WAAW,EAAEA,WAAY;MACzBE,KAAK,EAAE,CAACE,UAAU,CAACI,IAAI,EAAEL,MAAM,EAAEK,IAAI;IAAE,CACzC,CAAC;EAAA,GATMA,IAAI,CAACG,KAUV,CACR;AAAC,CACC,CACR;AAED,MAAMP,UAAU,GAAGb,UAAU,CAACsB,MAAM,CAAEC,KAAK,KAAM;EAC9CT,SAAS,EAAE;IACRU,SAAS,EAAE;EACd,CAAC;EACDP,IAAI,EAAE;IACHQ,eAAe,EAAEF,KAAK,CAACG,KAAK,CAAC,IAAI;EACpC,CAAC;EACDP,SAAS,EAAE;IACRQ,MAAM,EAAEJ,KAAK,CAACK,KAAK,CAACC,WAAW;IAC/BC,eAAe,EAAEP,KAAK,CAACQ,MAAM,CAACC;EACjC;AACH,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/display/Divider.js

@@ -0,0 +1,65 @@
+"use strict";
+
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Text } from "../core/Text.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Divider = ({
+  ref,
+  orientation = 'horizontal',
+  label,
+  inset = 0,
+  strong = false,
+  style,
+  styles
+}) => {
+  if (label && orientation === 'horizontal') {
+    return /*#__PURE__*/_jsxs(View, {
+      ref: ref,
+      accessible: true,
+      accessibilityLabel: label,
+      style: [stylesheet.labeled(inset), style],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [stylesheet.line('horizontal', strong), stylesheet.grow, styles?.line]
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        tone: "muted",
+        style: styles?.label,
+        children: label
+      }), /*#__PURE__*/_jsx(View, {
+        style: [stylesheet.line('horizontal', strong), stylesheet.grow, styles?.line]
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    accessible: false,
+    importantForAccessibility: "no-hide-descendants",
+    style: [stylesheet.line(orientation, strong), orientation === 'horizontal' ? stylesheet.horizontalInset(inset) : undefined, style, styles?.line]
+  });
+};
+const stylesheet = StyleSheet.create(theme => ({
+  line: (orientation, strong) => ({
+    backgroundColor: strong ? theme.colors.borderStrong : theme.colors.border,
+    ...(orientation === 'horizontal' ? {
+      height: theme.sizes.borderWidth,
+      alignSelf: 'stretch'
+    } : {
+      width: theme.sizes.borderWidth,
+      alignSelf: 'stretch'
+    })
+  }),
+  grow: {
+    flex: 1
+  },
+  horizontalInset: inset => ({
+    marginHorizontal: inset
+  }),
+  labeled: inset => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.space(1.5),
+    marginHorizontal: inset
+  })
+}));
+//# sourceMappingURL=Divider.js.map

package/lib/module/components/display/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","StyleSheet","Text","jsx","_jsx","jsxs","_jsxs","Divider","ref","orientation","label","inset","strong","style","styles","accessible","accessibilityLabel","stylesheet","labeled","children","line","grow","variant","tone","importantForAccessibility","horizontalInset","undefined","create","theme","backgroundColor","colors","borderStrong","border","height","sizes","borderWidth","alignSelf","width","flex","marginHorizontal","flexDirection","alignItems","gap","space"],"sourceRoot":"../../../../src","sources":["components/display/Divider.tsx"],"mappings":";;AACA,SAASA,IAAI,QAAQ,cAAc;AAEnC,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,IAAI,QAAQ,iBAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAiBnC,OAAO,MAAMC,OAAO,GAAGA,CAAC;EACrBC,GAAG;EACHC,WAAW,GAAG,YAAY;EAC1BC,KAAK;EACLC,KAAK,GAAG,CAAC;EACTC,MAAM,GAAG,KAAK;EACdC,KAAK;EACLC;AACW,CAAC,KAAK;EACjB,IAAIJ,KAAK,IAAID,WAAW,KAAK,YAAY,EAAE;IACxC,oBACGH,KAAA,CAACN,IAAI;MACFQ,GAAG,EAAEA,GAAI;MACTO,UAAU;MACVC,kBAAkB,EAAEN,KAAM;MAC1BG,KAAK,EAAE,CAACI,UAAU,CAACC,OAAO,CAACP,KAAK,CAAC,EAAEE,KAAK,CAAE;MAAAM,QAAA,gBAE1Cf,IAAA,CAACJ,IAAI;QAACa,KAAK,EAAE,CAACI,UAAU,CAACG,IAAI,CAAC,YAAY,EAAER,MAAM,CAAC,EAAEK,UAAU,CAACI,IAAI,EAAEP,MAAM,EAAEM,IAAI;MAAE,CAAE,CAAC,eACvFhB,IAAA,CAACF,IAAI;QAACoB,OAAO,EAAC,SAAS;QAACC,IAAI,EAAC,OAAO;QAACV,KAAK,EAAEC,MAAM,EAAEJ,KAAM;QAAAS,QAAA,EACtDT;MAAK,CACH,CAAC,eACPN,IAAA,CAACJ,IAAI;QAACa,KAAK,EAAE,CAACI,UAAU,CAACG,IAAI,CAAC,YAAY,EAAER,MAAM,CAAC,EAAEK,UAAU,CAACI,IAAI,EAAEP,MAAM,EAAEM,IAAI;MAAE,CAAE,CAAC;IAAA,CACpF,CAAC;EAEb;EAEA,oBACGhB,IAAA,CAACJ,IAAI;IACFQ,GAAG,EAAEA,GAAI;IACTO,UAAU,EAAE,KAAM;IAClBS,yBAAyB,EAAC,qBAAqB;IAC/CX,KAAK,EAAE,CACJI,UAAU,CAACG,IAAI,CAACX,WAAW,EAAEG,MAAM,CAAC,EACpCH,WAAW,KAAK,YAAY,GAAGQ,UAAU,CAACQ,eAAe,CAACd,KAAK,CAAC,GAAGe,SAAS,EAC5Eb,KAAK,EACLC,MAAM,EAAEM,IAAI;EACb,CACJ,CAAC;AAER,CAAC;AAED,MAAMH,UAAU,GAAGhB,UAAU,CAAC0B,MAAM,CAAEC,KAAK,KAAM;EAC9CR,IAAI,EAAEA,CAACX,WAAsC,EAAEG,MAAe,MAAM;IACjEiB,eAAe,EAAEjB,MAAM,GAAGgB,KAAK,CAACE,MAAM,CAACC,YAAY,GAAGH,KAAK,CAACE,MAAM,CAACE,MAAM;IACzE,IAAIvB,WAAW,KAAK,YAAY,GAC3B;MAAEwB,MAAM,EAAEL,KAAK,CAACM,KAAK,CAACC,WAAW;MAAEC,SAAS,EAAE;IAAmB,CAAC,GAClE;MAAEC,KAAK,EAAET,KAAK,CAACM,KAAK,CAACC,WAAW;MAAEC,SAAS,EAAE;IAAmB,CAAC;EACzE,CAAC,CAAC;EACFf,IAAI,EAAE;IACHiB,IAAI,EAAE;EACT,CAAC;EACDb,eAAe,EAAGd,KAAa,KAAM;IAClC4B,gBAAgB,EAAE5B;EACrB,CAAC,CAAC;EACFO,OAAO,EAAGP,KAAa,KAAM;IAC1B6B,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAEd,KAAK,CAACe,KAAK,CAAC,GAAG,CAAC;IACrBJ,gBAAgB,EAAE5B;EACrB,CAAC;AACJ,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/display/EmptyState.js

@@ -0,0 +1,69 @@
+"use strict";
+
+import { View } from 'react-native';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { renderIcon } from "../core/Icon.js";
+import { Text } from "../core/Text.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const EmptyState = ({
+  ref,
+  title,
+  description,
+  icon,
+  illustration,
+  action,
+  style,
+  styles
+}) => {
+  const {
+    theme
+  } = useUnistyles();
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    accessible: true,
+    accessibilityLabel: description ? `${title}. ${description}` : title,
+    style: [stylesheet.container, style, styles?.container],
+    children: [illustration ?? (icon ? /*#__PURE__*/_jsx(View, {
+      style: [stylesheet.icon, styles?.icon],
+      children: renderIcon(icon, {
+        size: 'lg',
+        color: theme.colors.textMuted
+      })
+    }) : null), /*#__PURE__*/_jsx(Text, {
+      variant: "heading",
+      align: "center",
+      accessibilityRole: "header",
+      style: styles?.title,
+      children: title
+    }), description ? /*#__PURE__*/_jsx(Text, {
+      variant: "body",
+      tone: "muted",
+      align: "center",
+      style: styles?.description,
+      children: description
+    }) : null, action ? /*#__PURE__*/_jsx(View, {
+      style: [stylesheet.action, styles?.action],
+      children: action
+    }) : null]
+  });
+};
+const stylesheet = StyleSheet.create(theme => ({
+  container: {
+    alignItems: 'center',
+    gap: theme.space(1),
+    padding: theme.space(3)
+  },
+  icon: {
+    width: theme.sizes.control.lg + theme.space(2),
+    height: theme.sizes.control.lg + theme.space(2),
+    borderRadius: theme.radius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.surfaceSunken,
+    marginBottom: theme.space(0.5)
+  },
+  action: {
+    marginTop: theme.space(1)
+  }
+}));
+//# sourceMappingURL=EmptyState.js.map

package/lib/module/components/display/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","StyleSheet","useUnistyles","renderIcon","Text","jsx","_jsx","jsxs","_jsxs","EmptyState","ref","title","description","icon","illustration","action","style","styles","theme","accessible","accessibilityLabel","stylesheet","container","children","size","color","colors","textMuted","variant","align","accessibilityRole","tone","create","alignItems","gap","space","padding","width","sizes","control","lg","height","borderRadius","radius","full","justifyContent","backgroundColor","surfaceSunken","marginBottom","marginTop"],"sourceRoot":"../../../../src","sources":["components/display/EmptyState.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/display/KeyValue.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { joinLabel } from "../../utils/a11y.js";
+import { Text } from "../core/Text.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const KeyValue = ({
+  ref,
+  label,
+  value,
+  orientation = 'horizontal',
+  style,
+  styles
+}) => {
+  const textValue = typeof value === 'string' || typeof value === 'number';
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    accessible: textValue,
+    accessibilityLabel: textValue ? joinLabel(label, value) : undefined,
+    style: [stylesheet.container(orientation), style, styles?.container],
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "label",
+      tone: "muted",
+      style: [stylesheet.label(orientation), styles?.label],
+      children: label
+    }), textValue ? /*#__PURE__*/_jsx(Text, {
+      variant: "body",
+      align: orientation === 'horizontal' ? 'right' : 'left',
+      style: [stylesheet.value(orientation), styles?.value],
+      children: value
+    }) : /*#__PURE__*/_jsx(View, {
+      style: stylesheet.value(orientation),
+      children: value
+    })]
+  });
+};
+const stylesheet = StyleSheet.create(theme => ({
+  container: orientation => ({
+    flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+    alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',
+    justifyContent: 'space-between',
+    gap: theme.space(orientation === 'horizontal' ? 2 : 0.25)
+  }),
+  label: orientation => ({
+    flexShrink: orientation === 'horizontal' ? 0 : 1
+  }),
+  value: orientation => ({
+    flexShrink: 1,
+    alignItems: orientation === 'horizontal' ? 'flex-end' : 'flex-start'
+  })
+}));
+//# sourceMappingURL=KeyValue.js.map

package/lib/module/components/display/KeyValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","StyleSheet","joinLabel","Text","jsx","_jsx","jsxs","_jsxs","KeyValue","ref","label","value","orientation","style","styles","textValue","accessible","accessibilityLabel","undefined","stylesheet","container","children","variant","tone","align","create","theme","flexDirection","alignItems","justifyContent","gap","space","flexShrink"],"sourceRoot":"../../../../src","sources":["components/display/KeyValue.tsx"],"mappings":";;AACA,SAASA,IAAI,QAAQ,cAAc;AAEnC,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,SAAS,QAAQ,qBAAkB;AAE5C,SAASC,IAAI,QAAQ,iBAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAiBnC,OAAO,MAAMC,QAAQ,GAAGA,CAAC;EACtBC,GAAG;EACHC,KAAK;EACLC,KAAK;EACLC,WAAW,GAAG,YAAY;EAC1BC,KAAK;EACLC;AACY,CAAC,KAAK;EAClB,MAAMC,SAAS,GAAG,OAAOJ,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ;EACxE,oBACGJ,KAAA,CAACP,IAAI;IACFS,GAAG,EAAEA,GAAI;IACTO,UAAU,EAAED,SAAU;IACtBE,kBAAkB,EAAEF,SAAS,GAAGb,SAAS,CAACQ,KAAK,EAAEC,KAAK,CAAC,GAAGO,SAAU;IACpEL,KAAK,EAAE,CAACM,UAAU,CAACC,SAAS,CAACR,WAAW,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAEM,SAAS,CAAE;IAAAC,QAAA,gBAErEhB,IAAA,CAACF,IAAI;MAACmB,OAAO,EAAC,OAAO;MAACC,IAAI,EAAC,OAAO;MAACV,KAAK,EAAE,CAACM,UAAU,CAACT,KAAK,CAACE,WAAW,CAAC,EAAEE,MAAM,EAAEJ,KAAK,CAAE;MAAAW,QAAA,EACrFX;IAAK,CACH,CAAC,EACNK,SAAS,gBACPV,IAAA,CAACF,IAAI;MACFmB,OAAO,EAAC,MAAM;MACdE,KAAK,EAAEZ,WAAW,KAAK,YAAY,GAAG,OAAO,GAAG,MAAO;MACvDC,KAAK,EAAE,CAACM,UAAU,CAACR,KAAK,CAACC,WAAW,CAAC,EAAEE,MAAM,EAAEH,KAAK,CAAE;MAAAU,QAAA,EAErDV;IAAK,CACH,CAAC,gBAEPN,IAAA,CAACL,IAAI;MAACa,KAAK,EAAEM,UAAU,CAACR,KAAK,CAACC,WAAW,CAAE;MAAAS,QAAA,EAAEV;IAAK,CAAO,CAC3D;EAAA,CACE,CAAC;AAEb,CAAC;AAED,MAAMQ,UAAU,GAAGlB,UAAU,CAACwB,MAAM,CAAEC,KAAK,KAAM;EAC9CN,SAAS,EAAGR,WAAsC,KAAM;IACrDe,aAAa,EAAEf,WAAW,KAAK,YAAY,GAAG,KAAK,GAAG,QAAQ;IAC9DgB,UAAU,EAAEhB,WAAW,KAAK,YAAY,GAAG,YAAY,GAAG,SAAS;IACnEiB,cAAc,EAAE,eAAe;IAC/BC,GAAG,EAAEJ,KAAK,CAACK,KAAK,CAACnB,WAAW,KAAK,YAAY,GAAG,CAAC,GAAG,IAAI;EAC3D,CAAC,CAAC;EACFF,KAAK,EAAGE,WAAsC,KAAM;IACjDoB,UAAU,EAAEpB,WAAW,KAAK,YAAY,GAAG,CAAC,GAAG;EAClD,CAAC,CAAC;EACFD,KAAK,EAAGC,WAAsC,KAAM;IACjDoB,UAAU,EAAE,CAAC;IACbJ,UAAU,EAAEhB,WAAW,KAAK,YAAY,GAAG,UAAU,GAAG;EAC3D,CAAC;AACJ,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/display/List.js

@@ -0,0 +1,156 @@
+"use strict";
+
+import { FlatList, SectionList, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Text } from "../core/Text.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ListRow = ({
+  first,
+  last,
+  inset,
+  separators,
+  separatorInset,
+  rowStyle,
+  separatorStyle,
+  children
+}) => /*#__PURE__*/_jsxs(View, {
+  style: [stylesheet.row(inset, first, last), rowStyle],
+  children: [!first && separators ? /*#__PURE__*/_jsx(View, {
+    style: [stylesheet.separator(separatorInset), separatorStyle]
+  }) : null, children]
+});
+const defaultKeyExtractor = (_item, index) => String(index);
+export const List = ({
+  ref,
+  data,
+  sections,
+  renderItem,
+  keyExtractor,
+  inset = false,
+  separators = true,
+  separatorInset = 0,
+  header,
+  footer,
+  emptyState,
+  scrollEnabled,
+  refreshing,
+  onRefresh,
+  onEndReached,
+  accessibilityLabel,
+  style,
+  styles
+}) => {
+  const empty = emptyState ? /*#__PURE__*/_jsx(View, {
+    style: [stylesheet.empty, styles?.empty],
+    children: emptyState
+  }) : null;
+  const listProps = {
+    keyExtractor: keyExtractor ?? defaultKeyExtractor,
+    ListHeaderComponent: header ? /*#__PURE__*/_jsx(_Fragment, {
+      children: header
+    }) : undefined,
+    ListFooterComponent: footer ? /*#__PURE__*/_jsx(_Fragment, {
+      children: footer
+    }) : undefined,
+    ListEmptyComponent: empty,
+    scrollEnabled,
+    refreshing,
+    onRefresh,
+    onEndReached,
+    accessibilityLabel,
+    style: [stylesheet.container, style, styles?.container],
+    contentContainerStyle: [stylesheet.content(inset), styles?.content]
+  };
+  const rowProps = {
+    inset,
+    separators,
+    separatorInset,
+    rowStyle: styles?.row,
+    separatorStyle: styles?.separator
+  };
+  if (sections) {
+    return /*#__PURE__*/_jsx(SectionList, {
+      ...listProps,
+      sections: sections,
+      renderItem: ({
+        item,
+        index,
+        section
+      }) => /*#__PURE__*/_jsx(ListRow, {
+        first: index === 0,
+        last: index === section.data.length - 1,
+        ...rowProps,
+        children: renderItem({
+          item,
+          index
+        })
+      }),
+      renderSectionHeader: ({
+        section
+      }) => section.title ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        weight: "semibold",
+        tone: "muted",
+        accessibilityRole: "header",
+        style: [stylesheet.sectionTitle(inset), styles?.sectionTitle],
+        children: section.title
+      }) : null,
+      stickySectionHeadersEnabled: false
+    });
+  }
+  const items = data ?? [];
+  return /*#__PURE__*/_jsx(FlatList, {
+    ...listProps,
+    ref: ref,
+    data: items,
+    renderItem: ({
+      item,
+      index
+    }) => /*#__PURE__*/_jsx(ListRow, {
+      first: index === 0,
+      last: index === items.length - 1,
+      ...rowProps,
+      children: renderItem({
+        item,
+        index
+      })
+    })
+  });
+};
+const stylesheet = StyleSheet.create(theme => ({
+  container: {
+    alignSelf: 'stretch'
+  },
+  content: inset => ({
+    paddingHorizontal: inset ? theme.space(2) : 0,
+    paddingVertical: inset ? theme.space(1) : 0
+  }),
+  row: (inset, first, last) => ({
+    backgroundColor: inset ? theme.colors.surfaceRaised : 'transparent',
+    borderTopLeftRadius: inset && first ? theme.radius.lg : 0,
+    borderTopRightRadius: inset && first ? theme.radius.lg : 0,
+    borderBottomLeftRadius: inset && last ? theme.radius.lg : 0,
+    borderBottomRightRadius: inset && last ? theme.radius.lg : 0,
+    borderLeftWidth: inset ? theme.sizes.borderWidth : 0,
+    borderRightWidth: inset ? theme.sizes.borderWidth : 0,
+    borderTopWidth: inset && first ? theme.sizes.borderWidth : 0,
+    borderBottomWidth: inset && last ? theme.sizes.borderWidth : 0,
+    borderColor: theme.colors.border,
+    overflow: 'hidden'
+  }),
+  separator: inset => ({
+    height: theme.sizes.borderWidth,
+    marginLeft: inset,
+    backgroundColor: theme.colors.border
+  }),
+  sectionTitle: inset => ({
+    paddingHorizontal: inset ? theme.space(0.5) : theme.space(2),
+    paddingTop: theme.space(2),
+    paddingBottom: theme.space(0.75),
+    textTransform: 'uppercase'
+  }),
+  empty: {
+    paddingVertical: theme.space(3)
+  }
+}));
+//# sourceMappingURL=List.js.map

package/lib/module/components/display/List.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FlatList","SectionList","View","StyleSheet","Text","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ListRow","first","last","inset","separators","separatorInset","rowStyle","separatorStyle","children","style","stylesheet","row","separator","defaultKeyExtractor","_item","index","String","List","ref","data","sections","renderItem","keyExtractor","header","footer","emptyState","scrollEnabled","refreshing","onRefresh","onEndReached","accessibilityLabel","styles","empty","listProps","ListHeaderComponent","undefined","ListFooterComponent","ListEmptyComponent","container","contentContainerStyle","content","rowProps","item","section","length","renderSectionHeader","title","variant","weight","tone","accessibilityRole","sectionTitle","stickySectionHeadersEnabled","items","create","theme","alignSelf","paddingHorizontal","space","paddingVertical","backgroundColor","colors","surfaceRaised","borderTopLeftRadius","radius","lg","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","borderLeftWidth","sizes","borderWidth","borderRightWidth","borderTopWidth","borderBottomWidth","borderColor","border","overflow","height","marginLeft","paddingTop","paddingBottom","textTransform"],"sourceRoot":"../../../../src","sources":["components/display/List.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/display/ListItem.js

@@ -0,0 +1,106 @@
+"use strict";
+
+import { View } from 'react-native';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { joinLabel } from "../../utils/a11y.js";
+import { disabledOpacity } from "../../utils/styles.js";
+import { renderIcon } from "../core/Icon.js";
+import { Text } from "../core/Text.js";
+import { Touchable } from "../core/Touchable.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const ListItem = ({
+  ref,
+  title,
+  subtitle,
+  leftElement,
+  rightElement,
+  chevron = false,
+  destructive = false,
+  selected = false,
+  disabled = false,
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  style,
+  styles
+}) => {
+  const {
+    theme
+  } = useUnistyles();
+  const label = accessibilityLabel ?? joinLabel(title, subtitle);
+  const body = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [leftElement ? /*#__PURE__*/_jsx(View, {
+      style: [stylesheet.element, styles?.leftElement],
+      children: leftElement
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: [stylesheet.content, styles?.content],
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body",
+        tone: destructive ? 'danger' : 'default',
+        numberOfLines: 1,
+        style: styles?.title,
+        children: title
+      }), subtitle ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        tone: "muted",
+        numberOfLines: 2,
+        style: styles?.subtitle,
+        children: subtitle
+      }) : null]
+    }), rightElement ? /*#__PURE__*/_jsx(View, {
+      style: [stylesheet.element, styles?.rightElement],
+      children: rightElement
+    }) : null, chevron ? /*#__PURE__*/_jsx(View, {
+      style: stylesheet.element,
+      children: renderIcon('chevron-right', {
+        size: 'sm',
+        color: theme.colors.textDimmed
+      })
+    }) : null]
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Touchable, {
+      ref: ref,
+      feedback: "opacity",
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityHint: accessibilityHint,
+      accessibilityState: {
+        disabled,
+        selected
+      },
+      disabled: disabled,
+      onPress: onPress,
+      style: [stylesheet.container(selected, disabled), style, styles?.container],
+      children: body
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    accessible: true,
+    accessibilityLabel: label,
+    style: [stylesheet.container(selected, disabled), style, styles?.container],
+    children: body
+  });
+};
+const stylesheet = StyleSheet.create(theme => ({
+  container: (selected, disabled) => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.space(1.5),
+    minHeight: theme.components.listItem?.minHeight ?? theme.sizes.control.lg + 4,
+    paddingHorizontal: theme.components.listItem?.paddingX ?? theme.space(2),
+    paddingVertical: theme.space(1),
+    backgroundColor: selected ? theme.colors.primarySoft : 'transparent',
+    opacity: disabledOpacity(theme, disabled)
+  }),
+  element: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  content: {
+    flex: 1,
+    gap: theme.space(0.25)
+  }
+}));
+//# sourceMappingURL=ListItem.js.map