@hzblj/kara-components 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @hzblj/kara-components
 
+## 0.9.0
+
+### Minor Changes
+
+- [#21](https://github.com/hzblj/kara-ui/pull/21) [`356c00f`](https://github.com/hzblj/kara-ui/commit/356c00f76eee8323c4eb65ed4cbcda121c3af627) Thanks [@hzblj](https://github.com/hzblj)! - `TextField`'s `error` takes a message: `error="A postcode has five digits."` shows it under the field — Material's supporting text beside its error icon on Android — so an error never rests on colour alone, which in dark mode Material draws a pale red. `error` alone still marks the field. kara's glyphs gain `error` for it.
+
+  `Tabs` on iOS tint their icons: the selected one takes the accent and the rest the label colour. Expo Router tints an asset-catalog icon only when both states have an icon colour, so with the accent alone every icon kept its SVG's black, selected or not, in dark mode too.
+
+  `Surface` on iOS sits on `surface.primary` unless told otherwise, as it does on Android; a plain one drew nothing behind its content. `Progress` with `circular` and a `value` is a ring that fills on iOS — a SwiftUI capacity `Gauge` — where a circular `ProgressView` ignored the value and spun.
+
+### Patch Changes
+
+- Updated dependencies [[`356c00f`](https://github.com/hzblj/kara-ui/commit/356c00f76eee8323c4eb65ed4cbcda121c3af627)]:
+  - @hzblj/kara-native@0.9.0
+  - @hzblj/kara-theme@0.9.0
+  - @hzblj/kara-sx@0.9.0
+
 ## 0.8.0
 
 ### Minor Changes

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

@@ -1,7 +1,7 @@
 "use strict";
 
-import { ProgressView } from '@expo/ui/swift-ui';
-import { progressViewStyle, tint } from '@expo/ui/swift-ui/modifiers';
+import { Gauge, ProgressView } from '@expo/ui/swift-ui';
+import { gaugeStyle, progressViewStyle, tint } from '@expo/ui/swift-ui/modifiers';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
@@ -12,8 +12,14 @@ export const Progress = ({
 }) => {
   useHostGuard('Progress');
   const theme = useAppTheme();
-  const modifiers = useMemo(() => [progressViewStyle(circular ? 'circular' : 'linear'), tint(theme.color('fill.accent.primary'))], [circular, theme]);
-  return /*#__PURE__*/_jsx(ProgressView, {
+  const ring = circular && value !== undefined;
+  const modifiers = useMemo(() => [ring ? gaugeStyle('circularCapacity') : progressViewStyle(circular ? 'circular' : 'linear'), tint(theme.color('fill.accent.primary'))], [circular, ring, theme]);
+
+  // SwiftUI's circular `ProgressView` ignores its value on iOS and spins; a ring that fills is a capacity `Gauge`.
+  return ring ? /*#__PURE__*/_jsx(Gauge, {
+    modifiers: modifiers,
+    value: value
+  }) : /*#__PURE__*/_jsx(ProgressView, {
     modifiers: modifiers,
     value: value ?? null
   });

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

@@ -1 +1 @@
-{"version":3,"names":["ProgressView","progressViewStyle","tint","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Progress","circular","value","theme","modifiers","color"],"sourceRoot":"../../../../src","sources":["atoms/progress/progress.ios.tsx"],"mappings":";;AAAA,SAAQA,YAAY,QAAO,mBAAmB;AAC9C,SAAQC,iBAAiB,EAAEC,IAAI,QAAO,6BAA6B;AACnE,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,QAA2B,GAAGA,CAAC;EAACC,QAAQ,GAAG,KAAK;EAAEC;AAAoB,CAAC,KAAK;EACvFL,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMM,KAAK,GAAGR,WAAW,CAAC,CAAC;EAE3B,MAAMS,SAAS,GAAGR,OAAO,CACvB,MAAM,CAACH,iBAAiB,CAACQ,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC,EAAEP,IAAI,CAACS,KAAK,CAACE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EACrG,CAACJ,QAAQ,EAAEE,KAAK,CAClB,CAAC;EAED,oBAAOJ,IAAA,CAACP,YAAY;IAACY,SAAS,EAAEA,SAAU;IAACF,KAAK,EAAEA,KAAK,IAAI;EAAK,CAAE,CAAC;AACrE,CAAC","ignoreList":[]}
+{"version":3,"names":["Gauge","ProgressView","gaugeStyle","progressViewStyle","tint","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Progress","circular","value","theme","ring","undefined","modifiers","color"],"sourceRoot":"../../../../src","sources":["atoms/progress/progress.ios.tsx"],"mappings":";;AAAA,SAAQA,KAAK,EAAEC,YAAY,QAAO,mBAAmB;AACrD,SAAQC,UAAU,EAAEC,iBAAiB,EAAEC,IAAI,QAAO,6BAA6B;AAC/E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,QAA2B,GAAGA,CAAC;EAACC,QAAQ,GAAG,KAAK;EAAEC;AAAoB,CAAC,KAAK;EACvFL,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMM,KAAK,GAAGR,WAAW,CAAC,CAAC;EAE3B,MAAMS,IAAI,GAAGH,QAAQ,IAAIC,KAAK,KAAKG,SAAS;EAC5C,MAAMC,SAAS,GAAGV,OAAO,CACvB,MAAM,CACJQ,IAAI,GAAGZ,UAAU,CAAC,kBAAkB,CAAC,GAAGC,iBAAiB,CAACQ,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC,EAC3FP,IAAI,CAACS,KAAK,CAACI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CACzC,EACD,CAACN,QAAQ,EAAEG,IAAI,EAAED,KAAK,CACxB,CAAC;;EAED;EACA,OAAOC,IAAI,gBACTL,IAAA,CAACT,KAAK;IAACgB,SAAS,EAAEA,SAAU;IAACJ,KAAK,EAAEA;EAAM,CAAE,CAAC,gBAE7CH,IAAA,CAACR,YAAY;IAACe,SAAS,EAAEA,SAAU;IAACJ,KAAK,EAAEA,KAAK,IAAI;EAAK,CAAE,CAC5D;AACH,CAAC","ignoreList":[]}

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

@@ -11,7 +11,10 @@ export const Surface = ({
   ...sx
 }) => {
   useHostGuard('Surface');
+
+  // `surface.primary` unless told otherwise, as Material's `Surface` is on Android — without it a plain one drew nothing.
   const modifiers = useSxModifiers({
+    bg: 'surface.primary',
     borderRadius: 'large',
     p: 's16',
     ...sx

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

@@ -1 +1 @@
-{"version":3,"names":["GlassEffectContainer","VStack","useSxModifiers","useHostGuard","jsx","_jsx","Surface","children","glass","testID","sx","modifiers","borderRadius","p","content","alignment"],"sourceRoot":"../../../../src","sources":["atoms/surface/surface.ios.tsx"],"mappings":";;AAAA,SAAQA,oBAAoB,EAAEC,MAAM,QAAO,mBAAmB;AAC9D,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,OAAyB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,KAAK,GAAG,KAAK;EAAEC,MAAM;EAAE,GAAGC;AAAgB,CAAC,KAAK;EACnGP,YAAY,CAAC,SAAS,CAAC;EAEvB,MAAMQ,SAAS,GAAGT,cAAc,CAAC;IAACU,YAAY,EAAE,OAAO;IAAEC,CAAC,EAAE,KAAK;IAAE,GAAGH;EAAE,CAAC,CAAC;EAC1E,MAAMI,OAAO,gBACXT,IAAA,CAACJ,MAAM;IAACc,SAAS,EAAC,SAAS;IAACJ,SAAS,EAAEA,SAAU;IAACF,MAAM,EAAEA,MAAO;IAAAF,QAAA,EAC9DA;EAAQ,CACH,CACT;EAED,IAAI,CAACC,KAAK,EAAE;IACV,OAAOM,OAAO;EAChB;EAEA,oBAAOT,IAAA,CAACL,oBAAoB;IAAAO,QAAA,EAAEO;EAAO,CAAuB,CAAC;AAC/D,CAAC","ignoreList":[]}
+{"version":3,"names":["GlassEffectContainer","VStack","useSxModifiers","useHostGuard","jsx","_jsx","Surface","children","glass","testID","sx","modifiers","bg","borderRadius","p","content","alignment"],"sourceRoot":"../../../../src","sources":["atoms/surface/surface.ios.tsx"],"mappings":";;AAAA,SAAQA,oBAAoB,EAAEC,MAAM,QAAO,mBAAmB;AAC9D,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,OAAyB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,KAAK,GAAG,KAAK;EAAEC,MAAM;EAAE,GAAGC;AAAgB,CAAC,KAAK;EACnGP,YAAY,CAAC,SAAS,CAAC;;EAEvB;EACA,MAAMQ,SAAS,GAAGT,cAAc,CAAC;IAACU,EAAE,EAAE,iBAAiB;IAAEC,YAAY,EAAE,OAAO;IAAEC,CAAC,EAAE,KAAK;IAAE,GAAGJ;EAAE,CAAC,CAAC;EACjG,MAAMK,OAAO,gBACXV,IAAA,CAACJ,MAAM;IAACe,SAAS,EAAC,SAAS;IAACL,SAAS,EAAEA,SAAU;IAACF,MAAM,EAAEA,MAAO;IAAAF,QAAA,EAC9DA;EAAQ,CACH,CACT;EAED,IAAI,CAACC,KAAK,EAAE;IACV,OAAOO,OAAO;EAChB;EAEA,oBAAOV,IAAA,CAACL,oBAAoB;IAAAO,QAAA,EAAEQ;EAAO,CAAuB,CAAC;AAC/D,CAAC","ignoreList":[]}

package/lib/module/atoms/text-field/text-field.android.js

@@ -3,6 +3,7 @@
 import { Column, Text as ComposeText, OutlinedTextField, useNativeState } from '@expo/ui/jetpack-compose';
 import { useSxModifiers } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
+import { Glyph } from "../../glyph/index.js";
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const TextField = ({
@@ -20,17 +21,19 @@ export const TextField = ({
   const modifiers = useSxModifiers({
     wide: true
   });
+  const invalid = Boolean(error);
+  const message = typeof error === 'string' && error ? error : undefined;
   return /*#__PURE__*/_jsxs(Column, {
     verticalArrangement: {
       spacedBy: 4
     },
     children: [label ? /*#__PURE__*/_jsx(ComposeText, {
-      color: theme.colorString(error ? 'content.destructive' : 'content.secondary'),
+      color: theme.colorString(invalid ? 'content.destructive' : 'content.secondary'),
       style: theme.typography.labelMedium,
       children: label
-    }) : null, /*#__PURE__*/_jsx(OutlinedTextField, {
+    }) : null, /*#__PURE__*/_jsxs(OutlinedTextField, {
       enabled: !disabled,
-      isError: error,
+      isError: invalid,
       modifiers: modifiers,
       onValueChange: onChangeText,
       singleLine: !multiline,
@@ -40,7 +43,19 @@ export const TextField = ({
         fontWeight: theme.typography.body.fontWeight
       },
       value: value,
-      visualTransformation: secure ? 'password' : 'none'
+      visualTransformation: secure ? 'password' : 'none',
+      children: [invalid ? /*#__PURE__*/_jsx(OutlinedTextField.TrailingIcon, {
+        children: /*#__PURE__*/_jsx(Glyph, {
+          color: "content.destructive",
+          name: "error"
+        })
+      }) : null, message ? /*#__PURE__*/_jsx(OutlinedTextField.SupportingText, {
+        children: /*#__PURE__*/_jsx(ComposeText, {
+          color: theme.colorString('content.destructive'),
+          style: theme.typography.footnote,
+          children: message
+        })
+      }) : null]
     })]
   });
 };

package/lib/module/atoms/text-field/text-field.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Column","Text","ComposeText","OutlinedTextField","useNativeState","useSxModifiers","useAppTheme","useHostGuard","jsx","_jsx","jsxs","_jsxs","TextField","defaultValue","disabled","error","label","multiline","onChangeText","secure","theme","value","modifiers","wide","verticalArrangement","spacedBy","children","color","colorString","style","typography","labelMedium","enabled","isError","onValueChange","singleLine","textStyle","fontFamily","body","fontWeight","visualTransformation"],"sourceRoot":"../../../../src","sources":["atoms/text-field/text-field.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,EAAEC,IAAI,IAAIC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,QAAO,0BAA0B;AACvG,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,OAAO,MAAMC,SAA6B,GAAGA,CAAC;EAC5CC,YAAY,GAAG,EAAE;EACjBC,QAAQ,GAAG,KAAK;EAChBC,KAAK,GAAG,KAAK;EACbC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,YAAY;EACZC,MAAM,GAAG;AACK,CAAC,KAAK;EACpBZ,YAAY,CAAC,WAAW,CAAC;EACzB,MAAMa,KAAK,GAAGd,WAAW,CAAC,CAAC;EAC3B,MAAMe,KAAK,GAAGjB,cAAc,CAACS,YAAY,CAAC;EAC1C,MAAMS,SAAS,GAAGjB,cAAc,CAAC;IAACkB,IAAI,EAAE;EAAI,CAAC,CAAC;EAE9C,oBACEZ,KAAA,CAACX,MAAM;IAACwB,mBAAmB,EAAE;MAACC,QAAQ,EAAE;IAAC,CAAE;IAAAC,QAAA,GACxCV,KAAK,gBACJP,IAAA,CAACP,WAAW;MACVyB,KAAK,EAAEP,KAAK,CAACQ,WAAW,CAACb,KAAK,GAAG,qBAAqB,GAAG,mBAAmB,CAAE;MAC9Ec,KAAK,EAAET,KAAK,CAACU,UAAU,CAACC,WAAY;MAAAL,QAAA,EAEnCV;IAAK,CACK,CAAC,GACZ,IAAI,eACRP,IAAA,CAACN,iBAAiB;MAChB6B,OAAO,EAAE,CAAClB,QAAS;MACnBmB,OAAO,EAAElB,KAAM;MACfO,SAAS,EAAEA,SAAU;MACrBY,aAAa,EAAEhB,YAAa;MAC5BiB,UAAU,EAAE,CAAClB,SAAU;MACvBmB,SAAS,EAAE;QACTT,KAAK,EAAEP,KAAK,CAACQ,WAAW,CAAC,iBAAiB,CAAC;QAC3CS,UAAU,EAAEjB,KAAK,CAACU,UAAU,CAACQ,IAAI,CAACD,UAAU;QAC5CE,UAAU,EAAEnB,KAAK,CAACU,UAAU,CAACQ,IAAI,CAACC;MACpC,CAAE;MACFlB,KAAK,EAAEA,KAAM;MACbmB,oBAAoB,EAAErB,MAAM,GAAG,UAAU,GAAG;IAAO,CACpD,CAAC;EAAA,CACI,CAAC;AAEb,CAAC","ignoreList":[]}
+{"version":3,"names":["Column","Text","ComposeText","OutlinedTextField","useNativeState","useSxModifiers","useAppTheme","Glyph","useHostGuard","jsx","_jsx","jsxs","_jsxs","TextField","defaultValue","disabled","error","label","multiline","onChangeText","secure","theme","value","modifiers","wide","invalid","Boolean","message","undefined","verticalArrangement","spacedBy","children","color","colorString","style","typography","labelMedium","enabled","isError","onValueChange","singleLine","textStyle","fontFamily","body","fontWeight","visualTransformation","TrailingIcon","name","SupportingText","footnote"],"sourceRoot":"../../../../src","sources":["atoms/text-field/text-field.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,EAAEC,IAAI,IAAIC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,QAAO,0BAA0B;AACvG,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,KAAK,QAAO,sBAAa;AACjC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,OAAO,MAAMC,SAA6B,GAAGA,CAAC;EAC5CC,YAAY,GAAG,EAAE;EACjBC,QAAQ,GAAG,KAAK;EAChBC,KAAK,GAAG,KAAK;EACbC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,YAAY;EACZC,MAAM,GAAG;AACK,CAAC,KAAK;EACpBZ,YAAY,CAAC,WAAW,CAAC;EACzB,MAAMa,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,KAAK,GAAGlB,cAAc,CAACU,YAAY,CAAC;EAC1C,MAAMS,SAAS,GAAGlB,cAAc,CAAC;IAACmB,IAAI,EAAE;EAAI,CAAC,CAAC;EAC9C,MAAMC,OAAO,GAAGC,OAAO,CAACV,KAAK,CAAC;EAC9B,MAAMW,OAAO,GAAG,OAAOX,KAAK,KAAK,QAAQ,IAAIA,KAAK,GAAGA,KAAK,GAAGY,SAAS;EAEtE,oBACEhB,KAAA,CAACZ,MAAM;IAAC6B,mBAAmB,EAAE;MAACC,QAAQ,EAAE;IAAC,CAAE;IAAAC,QAAA,GACxCd,KAAK,gBACJP,IAAA,CAACR,WAAW;MACV8B,KAAK,EAAEX,KAAK,CAACY,WAAW,CAACR,OAAO,GAAG,qBAAqB,GAAG,mBAAmB,CAAE;MAChFS,KAAK,EAAEb,KAAK,CAACc,UAAU,CAACC,WAAY;MAAAL,QAAA,EAEnCd;IAAK,CACK,CAAC,GACZ,IAAI,eACRL,KAAA,CAACT,iBAAiB;MAChBkC,OAAO,EAAE,CAACtB,QAAS;MACnBuB,OAAO,EAAEb,OAAQ;MACjBF,SAAS,EAAEA,SAAU;MACrBgB,aAAa,EAAEpB,YAAa;MAC5BqB,UAAU,EAAE,CAACtB,SAAU;MACvBuB,SAAS,EAAE;QACTT,KAAK,EAAEX,KAAK,CAACY,WAAW,CAAC,iBAAiB,CAAC;QAC3CS,UAAU,EAAErB,KAAK,CAACc,UAAU,CAACQ,IAAI,CAACD,UAAU;QAC5CE,UAAU,EAAEvB,KAAK,CAACc,UAAU,CAACQ,IAAI,CAACC;MACpC,CAAE;MACFtB,KAAK,EAAEA,KAAM;MACbuB,oBAAoB,EAAEzB,MAAM,GAAG,UAAU,GAAG,MAAO;MAAAW,QAAA,GAElDN,OAAO,gBACNf,IAAA,CAACP,iBAAiB,CAAC2C,YAAY;QAAAf,QAAA,eAC7BrB,IAAA,CAACH,KAAK;UAACyB,KAAK,EAAC,qBAAqB;UAACe,IAAI,EAAC;QAAO,CAAE;MAAC,CACpB,CAAC,GAC/B,IAAI,EACPpB,OAAO,gBACNjB,IAAA,CAACP,iBAAiB,CAAC6C,cAAc;QAAAjB,QAAA,eAC/BrB,IAAA,CAACR,WAAW;UAAC8B,KAAK,EAAEX,KAAK,CAACY,WAAW,CAAC,qBAAqB,CAAE;UAACC,KAAK,EAAEb,KAAK,CAACc,UAAU,CAACc,QAAS;UAAAlB,QAAA,EAC5FJ;QAAO,CACG;MAAC,CACkB,CAAC,GACjC,IAAI;IAAA,CACS,CAAC;EAAA,CACd,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/atoms/text-field/text-field.ios.js

@@ -48,7 +48,8 @@ export const TextField = ({
 }) => {
   useHostGuard('TextField');
   const text = useNativeState(defaultValue);
-  const tone = TONE[toneOf(disabled, error)];
+  const tone = TONE[toneOf(disabled, Boolean(error))];
+  const message = tone === TONE.error && typeof error === 'string' && error ? error : undefined;
   const sxModifiers = useSxModifiers({
     bg: tone.bg,
     borderColor: tone.border,
@@ -83,7 +84,11 @@ export const TextField = ({
       onTextChange: onChangeText,
       testID: testID,
       text: text
-    })]
+    }), message ? /*#__PURE__*/_jsx(Text, {
+      color: "content.destructive",
+      variant: "footnote",
+      children: message
+    }) : null]
   });
 };
 //# sourceMappingURL=text-field.ios.js.map

package/lib/module/atoms/text-field/text-field.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["SecureField","TextField","SwiftUITextField","useNativeState","VStack","disabled","disabledModifier","textFieldStyle","useSxModifiers","spacing","useMemo","useHostGuard","Text","jsx","_jsx","jsxs","_jsxs","TONE","default","bg","border","label","error","toneOf","defaultValue","multiline","onChangeText","secure","testID","text","tone","sxModifiers","borderColor","borderRadius","borderWidth","px","py","wide","modifiers","list","push","alignment","s4","children","color","variant","onTextChange","axis"],"sourceRoot":"../../../../src","sources":["atoms/text-field/text-field.ios.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["SecureField","TextField","SwiftUITextField","useNativeState","VStack","disabled","disabledModifier","textFieldStyle","useSxModifiers","spacing","useMemo","useHostGuard","Text","jsx","_jsx","jsxs","_jsxs","TONE","default","bg","border","label","error","toneOf","defaultValue","multiline","onChangeText","secure","testID","text","tone","Boolean","message","undefined","sxModifiers","borderColor","borderRadius","borderWidth","px","py","wide","modifiers","list","push","alignment","s4","children","color","variant","onTextChange","axis"],"sourceRoot":"../../../../src","sources":["atoms/text-field/text-field.ios.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 /**
- * A progress bar or ring, tinted `fill.accent.primary` — SwiftUI `ProgressView` / Compose's
- * `LinearProgressIndicator` and `CircularProgressIndicator`.
+ * A progress bar or ring, tinted `fill.accent.primary` — SwiftUI `ProgressView` (a capacity `Gauge` for a ring with a
+ * value, which `ProgressView` cannot draw on iOS) / Compose's `LinearProgressIndicator` and `CircularProgressIndicator`.
  */
 export type ProgressProps = {
     /** A circular indicator instead of a bar. Off by default. */

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

@@ -1,8 +1,8 @@
 import type { ResponsiveSx } from '@hzblj/kara-sx';
 import type { ReactNode } from 'react';
 /**
- * A container padded `s16` and rounded `large` unless told otherwise — a SwiftUI `VStack` on iOS, Material's
- * `Surface` around a `Column` on Android.
+ * A container on `surface.primary`, padded `s16` and rounded `large` unless told otherwise — a SwiftUI `VStack` on
+ * iOS, Material's `Surface` around a `Column` on Android.
  */
 export type SurfaceProps = ResponsiveSx & {
     /** Stacked vertically, from the leading edge. */

package/lib/typescript/atoms/text-field/text-field.types.d.ts

@@ -8,8 +8,12 @@ export type TextFieldProps = {
     defaultValue?: string;
     /** Stops editing and dims the field. On iOS it outranks `error`. */
     disabled?: boolean;
-    /** Marks the field invalid: a destructive outline and label. */
-    error?: boolean;
+    /**
+     * Marks the field invalid: a destructive outline and label. A message is shown under the field as well — on Android
+     * as Material's supporting text, beside its error icon — so the error never rests on colour alone; Material's error
+     * colour is a pale red in dark mode. `true` marks it without a message.
+     */
+    error?: boolean | string;
     /** Shown above the field, in `labelMedium`. */
     label?: string;
     /** Wraps the text and grows the field to fit it. iOS ignores it when `secure`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -59,9 +59,9 @@
     ]
   },
   "dependencies": {
-    "@hzblj/kara-native": "^0.8.0",
-    "@hzblj/kara-sx": "^0.8.0",
-    "@hzblj/kara-theme": "^0.8.0",
+    "@hzblj/kara-native": "^0.9.0",
+    "@hzblj/kara-sx": "^0.9.0",
+    "@hzblj/kara-theme": "^0.9.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

package/src/atoms/progress/progress.ios.tsx

@@ -1,5 +1,5 @@
-import {ProgressView} from '@expo/ui/swift-ui'
-import {progressViewStyle, tint} from '@expo/ui/swift-ui/modifiers'
+import {Gauge, ProgressView} from '@expo/ui/swift-ui'
+import {gaugeStyle, progressViewStyle, tint} from '@expo/ui/swift-ui/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
@@ -10,10 +10,19 @@ export const Progress: ProgressComponent = ({circular = false, value}: ProgressP
   useHostGuard('Progress')
   const theme = useAppTheme()
 
+  const ring = circular && value !== undefined
   const modifiers = useMemo(
-    () => [progressViewStyle(circular ? 'circular' : 'linear'), tint(theme.color('fill.accent.primary'))],
-    [circular, theme]
+    () => [
+      ring ? gaugeStyle('circularCapacity') : progressViewStyle(circular ? 'circular' : 'linear'),
+      tint(theme.color('fill.accent.primary')),
+    ],
+    [circular, ring, theme]
   )
 
-  return <ProgressView modifiers={modifiers} value={value ?? null} />
+  // SwiftUI's circular `ProgressView` ignores its value on iOS and spins; a ring that fills is a capacity `Gauge`.
+  return ring ? (
+    <Gauge modifiers={modifiers} value={value} />
+  ) : (
+    <ProgressView modifiers={modifiers} value={value ?? null} />
+  )
 }

package/src/atoms/progress/progress.types.ts

@@ -1,8 +1,8 @@
 import type {ReactNode} from 'react'
 
 /**
- * A progress bar or ring, tinted `fill.accent.primary` — SwiftUI `ProgressView` / Compose's
- * `LinearProgressIndicator` and `CircularProgressIndicator`.
+ * A progress bar or ring, tinted `fill.accent.primary` — SwiftUI `ProgressView` (a capacity `Gauge` for a ring with a
+ * value, which `ProgressView` cannot draw on iOS) / Compose's `LinearProgressIndicator` and `CircularProgressIndicator`.
  */
 export type ProgressProps = {
   /** A circular indicator instead of a bar. Off by default. */

package/src/atoms/surface/surface.ios.tsx

@@ -6,7 +6,8 @@ import type {SurfaceComponent, SurfaceProps} from './surface.types'
 export const Surface: SurfaceComponent = ({children, glass = false, testID, ...sx}: SurfaceProps) => {
   useHostGuard('Surface')
 
-  const modifiers = useSxModifiers({borderRadius: 'large', p: 's16', ...sx})
+  // `surface.primary` unless told otherwise, as Material's `Surface` is on Android — without it a plain one drew nothing.
+  const modifiers = useSxModifiers({bg: 'surface.primary', borderRadius: 'large', p: 's16', ...sx})
   const content = (
     <VStack alignment="leading" modifiers={modifiers} testID={testID}>
       {children}

package/src/atoms/surface/surface.types.ts

@@ -2,8 +2,8 @@ import type {ResponsiveSx} from '@hzblj/kara-sx'
 import type {ReactNode} from 'react'
 
 /**
- * A container padded `s16` and rounded `large` unless told otherwise — a SwiftUI `VStack` on iOS, Material's
- * `Surface` around a `Column` on Android.
+ * A container on `surface.primary`, padded `s16` and rounded `large` unless told otherwise — a SwiftUI `VStack` on
+ * iOS, Material's `Surface` around a `Column` on Android.
  */
 export type SurfaceProps = ResponsiveSx & {
   /** Stacked vertically, from the leading edge. */

package/src/atoms/text-field/text-field.android.tsx

@@ -1,6 +1,7 @@
 import {Column, Text as ComposeText, OutlinedTextField, useNativeState} from '@expo/ui/jetpack-compose'
 import {useSxModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
+import {Glyph} from '../../glyph'
 import {useHostGuard} from '../../host-context'
 import type {TextFieldComponent, TextFieldProps} from './text-field.types'
 
@@ -17,12 +18,14 @@ export const TextField: TextFieldComponent = ({
   const theme = useAppTheme()
   const value = useNativeState(defaultValue)
   const modifiers = useSxModifiers({wide: true})
+  const invalid = Boolean(error)
+  const message = typeof error === 'string' && error ? error : undefined
 
   return (
     <Column verticalArrangement={{spacedBy: 4}}>
       {label ? (
         <ComposeText
-          color={theme.colorString(error ? 'content.destructive' : 'content.secondary')}
+          color={theme.colorString(invalid ? 'content.destructive' : 'content.secondary')}
           style={theme.typography.labelMedium}
         >
           {label}
@@ -30,7 +33,7 @@ export const TextField: TextFieldComponent = ({
       ) : null}
       <OutlinedTextField
         enabled={!disabled}
-        isError={error}
+        isError={invalid}
         modifiers={modifiers}
         onValueChange={onChangeText}
         singleLine={!multiline}
@@ -41,7 +44,20 @@ export const TextField: TextFieldComponent = ({
         }}
         value={value}
         visualTransformation={secure ? 'password' : 'none'}
-      />
+      >
+        {invalid ? (
+          <OutlinedTextField.TrailingIcon>
+            <Glyph color="content.destructive" name="error" />
+          </OutlinedTextField.TrailingIcon>
+        ) : null}
+        {message ? (
+          <OutlinedTextField.SupportingText>
+            <ComposeText color={theme.colorString('content.destructive')} style={theme.typography.footnote}>
+              {message}
+            </ComposeText>
+          </OutlinedTextField.SupportingText>
+        ) : null}
+      </OutlinedTextField>
     </Column>
   )
 }

package/src/atoms/text-field/text-field.ios.tsx

@@ -45,7 +45,8 @@ export const TextField: TextFieldComponent = ({
 }: TextFieldProps) => {
   useHostGuard('TextField')
   const text = useNativeState(defaultValue)
-  const tone = TONE[toneOf(disabled, error)]
+  const tone = TONE[toneOf(disabled, Boolean(error))]
+  const message = tone === TONE.error && typeof error === 'string' && error ? error : undefined
 
   const sxModifiers = useSxModifiers({
     bg: tone.bg,
@@ -85,6 +86,11 @@ export const TextField: TextFieldComponent = ({
           text={text}
         />
       )}
+      {message ? (
+        <Text color="content.destructive" variant="footnote">
+          {message}
+        </Text>
+      ) : null}
     </VStack>
   )
 }

package/src/atoms/text-field/text-field.types.ts

@@ -9,8 +9,12 @@ export type TextFieldProps = {
   defaultValue?: string
   /** Stops editing and dims the field. On iOS it outranks `error`. */
   disabled?: boolean
-  /** Marks the field invalid: a destructive outline and label. */
-  error?: boolean
+  /**
+   * Marks the field invalid: a destructive outline and label. A message is shown under the field as well — on Android
+   * as Material's supporting text, beside its error icon — so the error never rests on colour alone; Material's error
+   * colour is a pale red in dark mode. `true` marks it without a message.
+   */
+  error?: boolean | string
   /** Shown above the field, in `labelMedium`. */
   label?: string
   /** Wraps the text and grows the field to fit it. iOS ignores it when `secure`. */