@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.1

package/dist/typography/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.js","names":["useSyncExternalStore","Platform","FontRegistry","isLoaded","family","registry","loading","Promise","listeners","Set","load","settle","listener","snapshot","start","subscribe","add","delete","SYSTEM_FONT","select","android","default","undefined","ios","cssStack","families","map","test","join","useFontFamily","$","_c","fonts","OS","t0","first","at","_c"],"sources":["../../src/typography/fonts.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react'\nimport { Platform } from 'react-native'\n\ntype FontRegistry = { readonly isLoaded: (family: string) => boolean }\n\n// expo-font is an optional peer, so it is imported where its absence can be\n// caught. Metro takes an import inside a `try` as optional and bundles the\n// app without it, where an import at the top of the module would fail the\n// bundle of every app that does not have it. Until the import settles the\n// registry is `undefined`, and `null` once it has failed.\nlet registry: FontRegistry | null | undefined\nlet loading: Promise<void> | undefined\nconst listeners = new Set<() => void>()\n\nasync function load(): Promise<FontRegistry | null> {\n  try {\n    return await import(/* @vite-ignore */ 'expo-font')\n  } catch {\n    return null\n  }\n}\n\nasync function settle() {\n  registry = await load()\n\n  for (const listener of listeners) {\n    listener()\n  }\n}\n\nfunction snapshot() {\n  start()\n  return registry\n}\n\nfunction start() {\n  loading ??= settle()\n}\n\nfunction subscribe(listener: () => void) {\n  start()\n  listeners.add(listener)\n  return () => {\n    listeners.delete(listener)\n  }\n}\n\n// What a role draws in when its own family is not there: the platform's\n// system font, named rather than left unset, so a role nested in another's\n// text does not inherit the outer role's family.\nconst SYSTEM_FONT = Platform.select({\n  android: 'sans-serif',\n  default: undefined,\n  ios: 'System',\n})\n\n/** A family list as CSS writes it, quoting the names with spaces in them. */\nfunction cssStack(families: readonly string[]): string {\n  return families\n    .map((family) => (/\\s/u.test(family) ? `'${family}'` : family))\n    .join(', ')\n}\n\n/**\n * The family a type role draws in, from the token's list of families.\n *\n * On iOS and Android that is the list's first family when the app has\n * registered it with expo-font, under the name the token gives it, and the\n * system font otherwise. Neither package ships a font, and React Native names\n * one family rather than falling through a list, so the rest of the list is\n * the browser's alone. Under React Native Web the whole list goes to CSS, as\n * it does on kanso-ui.\n *\n * A family registered after its text has drawn takes effect when that text\n * next renders, which is what an app gating its first screen on `useFonts()`\n * already arranges.\n */\nfunction useFontFamily(families: readonly string[]): string | undefined {\n  const fonts = useSyncExternalStore(subscribe, snapshot)\n\n  if (Platform.OS === 'web') {\n    return cssStack(families)\n  }\n\n  const first = families.at(0)\n\n  return first !== undefined && fonts?.isLoaded(first) === true\n    ? first\n    : SYSTEM_FONT\n}\n\nexport { useFontFamily }\n"],"mappings":";;;;AAUA,IAAIK;AACJ,IAAIC;AACJ,MAAME,4BAAY,IAAIC,IAAgB;AAEtC,eAAeC,OAAqC;CAClD,IAAI;EACF,OAAO,MAAM;;GAA0B;;CACzC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,eAAeC,SAAS;CACtBN,WAAW,MAAMK,KAAK;CAEtB,KAAK,MAAME,YAAYJ,WACrBI,SAAS;AAEb;AAEA,SAASC,WAAW;CAClBC,MAAM;CACN,OAAOT;AACT;AAEA,SAASS,QAAQ;CACfR,YAAYK,OAAO;AACrB;AAEA,SAASI,UAAUH,UAAsB;CACvCE,MAAM;CACNN,UAAUQ,IAAIJ,QAAQ;CACtB,aAAa;EACXJ,UAAUS,OAAOL,QAAQ;CAC3B;AACF;AAKA,MAAMM,cAAcjB,SAASkB,OAAO;CAClCC,SAAS;CACTC,SAASC,KAAAA;CACTC,KAAK;AACP,CAAC;;AAGD,SAASC,SAASC,UAAqC;CACrD,OAAOA,SACJC,KAAKtB,WAAY,MAAMuB,KAAKvB,MAAM,IAAI,IAAIA,OAAM,KAAMA,MAAO,CAAC,CAC9DwB,KAAK,IAAI;AACd;;;;;;;;;;;;;;;AAgBA,SAAAC,cAAAJ,UAAA;CAAA,MAAAK,IAAAC,EAAA,CAAA;CACE,MAAAC,QAAchC,qBAAqBe,WAAWF,QAAQ;CAEtD,IAAIZ,SAAQgC,OAAQ,OAAK;EAAA,IAAAC;EAAA,IAAAJ,EAAA,OAAAL,UAAA;GAChBS,KAAAV,SAASC,QAAQ;GAACK,EAAA,KAAAL;GAAAK,EAAA,KAAAI;EAAA,OAAAA,KAAAJ,EAAA;EAAA,OAAlBI;CAAkB;CAC1B,IAAAA;CAAA,IAAAJ,EAAA,OAAAL,YAAAK,EAAA,OAAAE,OAAA;EAED,MAAAG,QAAcV,SAAQW,GAAI,CAAC;EAEpBF,KAAAC,UAAUb,KAAAA,KAAaU,OAAK7B,SAAWgC,KAAK,MAAM,OAAlDA,QAAAjB;EAEQY,EAAA,KAAAL;EAAAK,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAFRI;AAEQ"}

package/dist/typography/roles.d.ts

@@ -0,0 +1,10 @@
+import { StyleProp } from "react-native";
+//#region src/typography/roles.d.ts
+/**
+ * The type scale on Material Design's typography pages: the display, headline,
+ * title, body and label roles at large, medium and small.
+ */
+type TypeRole = 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';
+//#endregion
+export type { TypeRole };
+//# sourceMappingURL=roles.d.ts.map

package/dist/typography/roles.js

@@ -0,0 +1,82 @@
+import { useTheme } from "../theme/scope.js";
+import { composeStyles, themedStyles } from "../theme/styles.js";
+import { useFontFamily } from "./fonts.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet } from "react-native";
+//#region src/typography/roles.ts
+const WEIGHTS = [
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900
+];
+const familyStyles = /* @__PURE__ */ new Map();
+/**
+* The style that sets a family `useFontFamily` chose, one object per family,
+* so every text drawn in it is handed the same one.
+*/
+function familyStyle(family) {
+	if (family === void 0) return;
+	const known = familyStyles.get(family);
+	if (known !== void 0) return known;
+	const style = { fontFamily: family };
+	familyStyles.set(family, style);
+	return style;
+}
+/** The weight React Native takes nearest a token's, from 1 to 1000. */
+function nativeWeight(weight) {
+	return WEIGHTS[Math.min(Math.max(Math.round(weight / 100), 1), 9) - 1];
+}
+function roleStyle(typography, role) {
+	return {
+		fontSize: typography[`${role}Size`],
+		fontWeight: nativeWeight(typography[`${role}Weight`]),
+		letterSpacing: typography[`${role}Tracking`],
+		lineHeight: typography[`${role}LineHeight`]
+	};
+}
+const stylesOf = themedStyles(({ typography }) => StyleSheet.create({
+	bodyLarge: roleStyle(typography, "bodyLarge"),
+	bodyMedium: roleStyle(typography, "bodyMedium"),
+	bodySmall: roleStyle(typography, "bodySmall"),
+	displayLarge: roleStyle(typography, "displayLarge"),
+	displayMedium: roleStyle(typography, "displayMedium"),
+	displaySmall: roleStyle(typography, "displaySmall"),
+	headlineLarge: roleStyle(typography, "headlineLarge"),
+	headlineMedium: roleStyle(typography, "headlineMedium"),
+	headlineSmall: roleStyle(typography, "headlineSmall"),
+	labelLarge: roleStyle(typography, "labelLarge"),
+	labelMedium: roleStyle(typography, "labelMedium"),
+	labelSmall: roleStyle(typography, "labelSmall"),
+	titleLarge: roleStyle(typography, "titleLarge"),
+	titleMedium: roleStyle(typography, "titleMedium"),
+	titleSmall: roleStyle(typography, "titleSmall")
+}));
+/**
+* The style a type role draws in under the theme around the caller: its size,
+* line height, weight and tracking from the role's tokens, and its family.
+* Every component that sets text in a role draws it through this.
+*/
+function useTypeRole(role) {
+	const $ = c(4);
+	const theme = useTheme();
+	const family = useFontFamily(theme.typography[`${role}Font`]);
+	let t0;
+	if ($[0] !== family || $[1] !== role || $[2] !== theme) {
+		t0 = composeStyles(stylesOf(theme)[role], familyStyle(family));
+		$[0] = family;
+		$[1] = role;
+		$[2] = theme;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
+}
+//#endregion
+export { familyStyle, nativeWeight, useTypeRole };
+
+//# sourceMappingURL=roles.js.map

package/dist/typography/roles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roles.js","names":["StyleProp","TextStyle","StyleSheet","ResolvedTheme","useTheme","composeStyles","themedStyles","useFontFamily","TypeRole","WEIGHTS","const","familyStyles","Map","familyStyle","family","undefined","known","get","style","fontFamily","set","nativeWeight","weight","Math","min","max","round","roleStyle","typography","role","fontSize","fontWeight","letterSpacing","lineHeight","stylesOf","create","bodyLarge","bodyMedium","bodySmall","displayLarge","displayMedium","displaySmall","headlineLarge","headlineMedium","headlineSmall","labelLarge","labelMedium","labelSmall","titleLarge","titleMedium","titleSmall","useTypeRole","$","_c","theme","t0","_c"],"sources":["../../src/typography/roles.ts"],"sourcesContent":["import type { StyleProp, TextStyle } from 'react-native'\n\nimport { StyleSheet } from 'react-native'\n\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { useTheme } from '../theme/scope'\nimport { composeStyles, themedStyles } from '../theme/styles'\nimport { useFontFamily } from './fonts'\n\n/**\n * The type scale on Material Design's typography pages: the display, headline,\n * title, body and label roles at large, medium and small.\n */\ntype TypeRole =\n  | 'bodyLarge'\n  | 'bodyMedium'\n  | 'bodySmall'\n  | 'displayLarge'\n  | 'displayMedium'\n  | 'displaySmall'\n  | 'headlineLarge'\n  | 'headlineMedium'\n  | 'headlineSmall'\n  | 'labelLarge'\n  | 'labelMedium'\n  | 'labelSmall'\n  | 'titleLarge'\n  | 'titleMedium'\n  | 'titleSmall'\n\n// The weights React Native names. A variable font on web takes any weight from\n// 1 to 1000, and native takes the nearest of these.\nconst WEIGHTS = [100, 200, 300, 400, 500, 600, 700, 800, 900] as const\n\nconst familyStyles = new Map<string, TextStyle>()\n\n/**\n * The style that sets a family `useFontFamily` chose, one object per family,\n * so every text drawn in it is handed the same one.\n */\nfunction familyStyle(family: string | undefined): TextStyle | undefined {\n  if (family === undefined) {\n    return undefined\n  }\n\n  const known = familyStyles.get(family)\n\n  if (known !== undefined) {\n    return known\n  }\n\n  const style = { fontFamily: family }\n\n  familyStyles.set(family, style)\n\n  return style\n}\n\n/** The weight React Native takes nearest a token's, from 1 to 1000. */\nfunction nativeWeight(weight: number) {\n  return WEIGHTS[Math.min(Math.max(Math.round(weight / 100), 1), 9) - 1]\n}\n\n// Every role sets all four of its measures rather than inheriting any, so a\n// role nested in another's text keeps its own line height and tracking, as on\n// web. The family is the fifth, and is chosen at render by useFontFamily.\nfunction roleStyle(\n  typography: ResolvedTheme['typography'],\n  role: TypeRole,\n): TextStyle {\n  return {\n    fontSize: typography[`${role}Size`],\n    fontWeight: nativeWeight(typography[`${role}Weight`]),\n    letterSpacing: typography[`${role}Tracking`],\n    lineHeight: typography[`${role}LineHeight`],\n  }\n}\n\nconst stylesOf = themedStyles(({ typography }) =>\n  StyleSheet.create({\n    bodyLarge: roleStyle(typography, 'bodyLarge'),\n    bodyMedium: roleStyle(typography, 'bodyMedium'),\n    bodySmall: roleStyle(typography, 'bodySmall'),\n    displayLarge: roleStyle(typography, 'displayLarge'),\n    displayMedium: roleStyle(typography, 'displayMedium'),\n    displaySmall: roleStyle(typography, 'displaySmall'),\n    headlineLarge: roleStyle(typography, 'headlineLarge'),\n    headlineMedium: roleStyle(typography, 'headlineMedium'),\n    headlineSmall: roleStyle(typography, 'headlineSmall'),\n    labelLarge: roleStyle(typography, 'labelLarge'),\n    labelMedium: roleStyle(typography, 'labelMedium'),\n    labelSmall: roleStyle(typography, 'labelSmall'),\n    titleLarge: roleStyle(typography, 'titleLarge'),\n    titleMedium: roleStyle(typography, 'titleMedium'),\n    titleSmall: roleStyle(typography, 'titleSmall'),\n  }),\n)\n\n/**\n * The style a type role draws in under the theme around the caller: its size,\n * line height, weight and tracking from the role's tokens, and its family.\n * Every component that sets text in a role draws it through this.\n */\nfunction useTypeRole(role: TypeRole): StyleProp<TextStyle> {\n  const theme = useTheme()\n  const family = useFontFamily(theme.typography[`${role}Font`])\n\n  return composeStyles(stylesOf(theme)[role], familyStyle(family))\n}\n\nexport { familyStyle, nativeWeight, useTypeRole }\nexport type { TypeRole }\n"],"mappings":";;;;;;AAiCA,MAAMS,UAAU;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG;AAE5D,MAAME,+BAAe,IAAIC,IAAuB;;;;;AAMhD,SAASC,YAAYC,QAAmD;CACtE,IAAIA,WAAWC,KAAAA,GACb;CAGF,MAAMC,QAAQL,aAAaM,IAAIH,MAAM;CAErC,IAAIE,UAAUD,KAAAA,GACZ,OAAOC;CAGT,MAAME,QAAQ,EAAEC,YAAYL,OAAO;CAEnCH,aAAaS,IAAIN,QAAQI,KAAK;CAE9B,OAAOA;AACT;;AAGA,SAASG,aAAaC,QAAgB;CACpC,OAAOb,QAAQc,KAAKC,IAAID,KAAKE,IAAIF,KAAKG,MAAMJ,SAAS,GAAG,GAAG,CAAC,GAAG,CAAC,IAAI;AACtE;AAKA,SAASK,UACPC,YACAC,MACW;CACX,OAAO;EACLC,UAAUF,WAAW,GAAGC,KAAI;EAC5BE,YAAYV,aAAaO,WAAW,GAAGC,KAAI,QAAS;EACpDG,eAAeJ,WAAW,GAAGC,KAAI;EACjCI,YAAYL,WAAW,GAAGC,KAAI;CAChC;AACF;AAEA,MAAMK,WAAW5B,cAAc,EAAEsB,iBAC/B1B,WAAWiC,OAAO;CAChBC,WAAWT,UAAUC,YAAY,WAAW;CAC5CS,YAAYV,UAAUC,YAAY,YAAY;CAC9CU,WAAWX,UAAUC,YAAY,WAAW;CAC5CW,cAAcZ,UAAUC,YAAY,cAAc;CAClDY,eAAeb,UAAUC,YAAY,eAAe;CACpDa,cAAcd,UAAUC,YAAY,cAAc;CAClDc,eAAef,UAAUC,YAAY,eAAe;CACpDe,gBAAgBhB,UAAUC,YAAY,gBAAgB;CACtDgB,eAAejB,UAAUC,YAAY,eAAe;CACpDiB,YAAYlB,UAAUC,YAAY,YAAY;CAC9CkB,aAAanB,UAAUC,YAAY,aAAa;CAChDmB,YAAYpB,UAAUC,YAAY,YAAY;CAC9CoB,YAAYrB,UAAUC,YAAY,YAAY;CAC9CqB,aAAatB,UAAUC,YAAY,aAAa;CAChDsB,YAAYvB,UAAUC,YAAY,YAAY;AAChD,CAAC,CACH;;;;;;AAOA,SAAAuB,YAAAtB,MAAA;CAAA,MAAAuB,IAAAC,EAAA,CAAA;CACE,MAAAC,QAAclD,SAAS;CACvB,MAAAU,SAAeP,cAAc+C,MAAK1B,WAAY,GAAGC,KAAI,MAAO;CAAC,IAAA0B;CAAA,IAAAH,EAAA,OAAAtC,UAAAsC,EAAA,OAAAvB,QAAAuB,EAAA,OAAAE,OAAA;EAEtDC,KAAAlD,cAAc6B,SAASoB,KAAK,CAAC,CAACzB,OAAOhB,YAAYC,MAAM,CAAC;EAACsC,EAAA,KAAAtC;EAAAsC,EAAA,KAAAvB;EAAAuB,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAAzDG;AAAyD"}

package/package.json

@@ -1,6 +1,134 @@
 {
   "name": "@kanso-labs/react-native-kanso-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Kanso UI's Material Design components for React Native, themed through the same --kui-* design tokens as the web library",
+  "keywords": [
+    "react-native",
+    "expo",
+    "material-design",
+    "design-system",
+    "design-tokens",
+    "components"
+  ],
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kanso-labs/react-native-kanso-ui.git"
+  },
+  "scripts": {
+    "build": "npm run tokens:build && tsc -b && tsdown",
+    "build-storybook": "storybook build",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
+    "lint": "npm run tokens:build && oxlint --type-aware . && eslint . && npm run format:check",
+    "package:check": "publint && attw --pack --profile esm-only",
+    "prepare": "husky || true",
+    "storybook": "storybook dev -p ${PORT:-6006}",
+    "test": "npm run tokens:build && jest",
+    "test:coverage": "npm run tokens:build && jest --coverage",
+    "test:storybook": "vitest run --mode development",
+    "tokens:build": "node scripts/build-tokens.mjs"
+  },
+  "author": "Kanso Labs <kanso.labs.org@gmail.com>",
+  "dependencies": {
+    "@internationalized/number": "3.6.9",
+    "react-stately": "3.51.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "0.18.5",
+    "@babel/core": "7.29.7",
+    "@babel/plugin-transform-dynamic-import": "7.29.7",
+    "@codecov/rollup-plugin": "2.0.1",
+    "@commitlint/cli": "21.2.3",
+    "@commitlint/config-conventional": "21.2.3",
+    "@eslint/js": "10.0.1",
+    "@jest/globals": "29.7.0",
+    "@kanso-labs/kanso-ui": "0.43.2",
+    "@kanso-labs/unplugin-style-dictionary": "0.10.29",
+    "@react-native/babel-preset": "0.86.3",
+    "@react-native/jest-preset": "0.86.3",
+    "@rolldown/plugin-babel": "0.2.4",
+    "@storybook/addon-a11y": "10.6.2",
+    "@storybook/addon-docs": "10.6.2",
+    "@storybook/addon-vitest": "10.6.2",
+    "@storybook/react": "10.6.2",
+    "@storybook/react-native-web-vite": "10.6.2",
+    "@testing-library/react-native": "14.1.0",
+    "@types/node": "26.6.5",
+    "@types/react": "19.2.18",
+    "@vitest/browser-playwright": "5.0.4",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "10.12.0",
+    "eslint-plugin-oxlint": "1.88.0",
+    "eslint-plugin-perfectionist": "5.12.1",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "globals": "17.13.0",
+    "husky": "9.1.7",
+    "jest": "29.7.0",
+    "jest-junit": "17.0.0",
+    "lint-staged": "17.6.0",
+    "oxfmt": "0.73.0",
+    "oxlint": "1.88.0",
+    "oxlint-tsgolint": "7.0.2004",
+    "playwright": "1.64.1",
+    "publint": "0.3.25",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-gesture-handler": "2.33.0",
+    "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "5.10.1",
+    "react-native-svg": "15.15.5",
+    "react-native-web": "0.21.4",
+    "react-native-worklets": "0.10.1",
+    "storybook": "10.6.2",
+    "style-dictionary": "5.6.1",
+    "test-renderer": "1.3.1",
+    "tsdown": "0.23.1",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.71.2",
+    "vite": "8.3.4",
+    "vitest": "5.0.4"
+  },
+  "peerDependencies": {
+    "expo-clipboard": ">=57.0.0",
+    "expo-font": ">=57.0.0",
+    "react": ">=19.2.0",
+    "react-native": ">=0.86.0",
+    "react-native-gesture-handler": "^2.32.0 || ^3.0.0",
+    "react-native-reanimated": "^4.5.0",
+    "react-native-safe-area-context": "^5.0.0",
+    "react-native-svg": "^15.15.0"
+  },
+  "peerDependenciesMeta": {
+    "expo-clipboard": {
+      "optional": true
+    },
+    "expo-font": {
+      "optional": true
+    }
+  },
+  "overrides": {
+    "eslint-plugin-oxlint": {
+      "oxlint": "$oxlint"
+    }
+  }
+}