@kanso-labs/react-native-kanso-ui 0.8.0 → 0.9.0

package/dist/typography/size.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+//#region src/typography/size.ts
+const TextSizeContext = createContext(void 0);
+/**
+* The font size of the library's Text around the caller, or `undefined` when
+* the caller is not inside one.
+*/
+function useTextSize() {
+	return useContext(TextSizeContext);
+}
+//#endregion
+export { TextSizeContext, useTextSize };
+
+//# sourceMappingURL=size.js.map

package/dist/typography/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","names":["createContext","useContext","TextSizeContext","undefined","useTextSize"],"sources":["../../src/typography/size.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\n// The font size the Text around a caller draws in, once its role and its call\n// site's style have both applied, and `undefined` outside one. A native Text\n// nested in another takes the outer one's size without being able to read it,\n// and Code and Keycap set a share of that size, which takes the number.\nconst TextSizeContext = createContext<number | undefined>(undefined)\n\n/**\n * The font size of the library's Text around the caller, or `undefined` when\n * the caller is not inside one.\n */\nfunction useTextSize(): number | undefined {\n  return useContext(TextSizeContext)\n}\n\nexport { TextSizeContext, useTextSize }\n"],"mappings":";;AAMA,MAAME,kBAAkBF,cAAkCG,KAAAA,CAAS;;;;;AAMnE,SAAAC,cAAA;CAAA,OACSH,WAAWC,eAAe;AAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/react-native-kanso-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Kanso UI's Material Design components for React Native, themed through the same --kui-* design tokens as the web library",
   "keywords": [
     "react-native",

package/dist/badge/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","names":["StyleSheet","themedStyles","ICON_SIZE","OVERLAP","RISE","SMALL_SIZE","LARGE_SIZE","styles","create","anchor","alignItems","flexDirection","inFlow","marginStart","position","top","over","start","small","end","height","width","space","stylesOf","colors","radii","spacing","count","color","onError","fontVariant","large","justifyContent","minHeight","minWidth","paddingHorizontal","xs","mark","backgroundColor","error","borderRadius","pill","pointerEvents"],"sources":["../../src/badge/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport { themedStyles } from '../theme/styles'\n\n// The icon a badge is drawn on, which the large badge's corner is measured\n// from: the 24dp every destination draws.\nconst ICON_SIZE = 24\n\n// How far back over the icon the large badge reaches, from the icon's\n// trailing edge, and how far above the icon it stands. The page's own\n// figures: its bottom leading corner 14dp down and 12dp in from the icon's\n// top trailing corner, on a 16dp badge.\nconst OVERLAP = 12\nconst RISE = 2\n\n// The small badge's side, and the large badge's least height and width.\nconst SMALL_SIZE = 6\nconst LARGE_SIZE = 16\n\nconst styles = StyleSheet.create({\n  // What the badge is drawn on. It shrinks to what it holds, so its box is\n  // the icon's and the mark lands where the page puts it, and lays a mark\n  // that joins the flow after the icon.\n  anchor: {\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n  },\n  // The large badge in the flow after the icon, 12dp back over it and 2dp\n  // above it, which is where its own placement puts it, so what follows the\n  // icon starts after the badge rather than under it.\n  inFlow: {\n    marginStart: -OVERLAP,\n    position: 'relative',\n    top: -RISE,\n  },\n  // The large badge over the icon's top trailing corner.\n  over: {\n    position: 'absolute',\n    start: ICON_SIZE - OVERLAP,\n    top: -RISE,\n  },\n  // The small badge, filling the icon's top trailing 6dp square.\n  small: {\n    end: 0,\n    height: SMALL_SIZE,\n    position: 'absolute',\n    top: 0,\n    width: SMALL_SIZE,\n  },\n  // The space before the count, out of the flow, so it sets the count apart\n  // from the text before it without moving anything.\n  space: {\n    position: 'absolute',\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, radii, spacing }) =>\n  StyleSheet.create({\n    // The count, in label small with tabular figures, so a count that\n    // changes does not change the badge's width digit by digit.\n    count: {\n      color: colors.onError,\n      fontVariant: ['tabular-nums'],\n    },\n    // The page's large badge: at least 16dp tall and as wide, 4dp either\n    // side of its count. A minimum rather than a size, so a larger text size\n    // the device asks for grows the badge rather than cutting the count.\n    large: {\n      alignItems: 'center',\n      justifyContent: 'center',\n      minHeight: LARGE_SIZE,\n      minWidth: LARGE_SIZE,\n      paddingHorizontal: spacing.xs,\n    },\n    // The fill and corner both badges share. It takes no touches, so a press\n    // on it lands on what it is drawn on.\n    mark: {\n      backgroundColor: colors.error,\n      borderRadius: radii.pill,\n      pointerEvents: 'none',\n    },\n  }),\n)\n\nexport { styles, stylesOf }\n"],"mappings":";;;AAgBA,MAAMK,aAAa;AACnB,MAAMC,aAAa;AAEnB,MAAMC,SAASP,WAAWQ,OAAO;CAI/BC,QAAQ;EACNC,YAAY;EACZC,eAAe;CACjB;CAIAC,QAAQ;EACNC,aAAa;EACbC,UAAU;EACVC,KAAK;CACP;CAEAC,MAAM;EACJF,UAAU;EACVG,OAAOf;EACPa,KAAK;CACP;CAEAG,OAAO;EACLC,KAAK;EACLC,QAAQf;EACRS,UAAU;EACVC,KAAK;EACLM,OAAOhB;CACT;CAGAiB,OAAO,EACLR,UAAU,WACZ;AACF,CAAC;AAED,MAAMS,WAAWtB,cAAc,EAAEuB,QAAQC,OAAOC,cAC9C1B,WAAWQ,OAAO;CAGhBmB,OAAO;EACLC,OAAOJ,OAAOK;EACdC,aAAa,CAAC,cAAc;CAC9B;CAIAC,OAAO;EACLrB,YAAY;EACZsB,gBAAgB;EAChBC,WAAW3B;EACX4B,UAAU5B;EACV6B,mBAAmBT,QAAQU;CAC7B;CAGAC,MAAM;EACJC,iBAAiBd,OAAOe;EACxBC,cAAcf,MAAMgB;EACpBC,eAAe;CACjB;AACF,CAAC,CACH"}