@multiplatform.one/theme 7.78.0 → 7.79.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.78.0",
+  "version": "7.79.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -72,8 +72,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.78.0",
-    "@multiplatform.one/store": "^7.78.0",
+    "@multiplatform.one/platform": "^7.79.0",
+    "@multiplatform.one/store": "^7.79.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -89,8 +89,8 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.78.0",
-    "@multiplatform.one/test-utils": "7.78.0",
+    "@multiplatform.one/config": "7.79.0",
+    "@multiplatform.one/test-utils": "7.79.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/index.ts

@@ -43,6 +43,7 @@ export * from "./scale/index";
 export * from "./shared";
 export * from "./themeValue";
 export * from "./sizeRecipes";
+export * from "./listRows";
 export * from "./subsetThemes";
 export * from "./Surface";
 export * from "./Text";

package/src/theme/listRows.spec.ts

@@ -0,0 +1,31 @@
+/**
+ * LC-222 LIST-HEIGHT-IN-ROWS: an embedded list's cap is a row count at its
+ * row pitch, so every size step and the touch scale show the same visible
+ * rows where a pixel cap would show more or fewer.
+ */
+import { describe, expect, it } from "vitest";
+import { listHeightForRows, menuListHeight, rowsInListHeight } from "./listRows";
+import { SIZE_RECIPE_TOKENS, sizeRecipeForToken } from "./sizeRecipes";
+
+describe("listHeightForRows (LC-222)", () => {
+  it("is rows times pitch plus the separators between them", () => {
+    expect(listHeightForRows(8, 36)).toBe(288);
+    expect(listHeightForRows(3, 40, 1)).toBe(122);
+    expect(listHeightForRows(0, 40, 1)).toBe(0);
+    expect(rowsInListHeight(122, 40, 1)).toBe(3);
+  });
+
+  it("shows the same visible rows on every size step and on touch", () => {
+    const counts = new Set<number>();
+    const pixelCapCounts = new Set<number>();
+    for (const token of SIZE_RECIPE_TOKENS) {
+      for (const touch of [false, true]) {
+        const pitch = sizeRecipeForToken(token, { touch, family: "menuRow" }).height;
+        counts.add(rowsInListHeight(menuListHeight(8, token, { touch }), pitch));
+        pixelCapCounts.add(rowsInListHeight(320, pitch));
+      }
+    }
+    expect([...counts]).toEqual([8]);
+    expect(pixelCapCounts.size).toBeGreaterThan(1);
+  });
+});

package/src/theme/listRows.ts

@@ -0,0 +1,22 @@
+import { sizeRecipeForToken } from "./sizeRecipes";
+
+/**
+ * LC-222 LIST-HEIGHT-IN-ROWS: an embedded list's bounded height is a count of
+ * visible rows at its row pitch, never pixels, so every preset scale shows the
+ * same number of rows. `separator` is the hairline between rows, if any.
+ */
+export function listHeightForRows(rows: number, rowPitch: number, separator = 0): number {
+  const count = Math.max(0, Math.floor(rows));
+  return count * rowPitch + Math.max(count - 1, 0) * separator;
+}
+
+/** Visible rows a list of `height` shows at `rowPitch`; the inverse of listHeightForRows. */
+export function rowsInListHeight(height: number, rowPitch: number, separator = 0): number {
+  return rowPitch > 0 ? Math.floor((height + separator) / (rowPitch + separator)) : 0;
+}
+
+/** Height of `rows` menu or listbox rows at a size token (the menuRow recipe pitch). */
+export function menuListHeight(rows: number, sizeToken: string, options?: { touch?: boolean }) {
+  const pitch = sizeRecipeForToken(sizeToken, { touch: options?.touch, family: "menuRow" }).height;
+  return listHeightForRows(rows, pitch);
+}

package/types/theme/index.d.ts

@@ -43,6 +43,7 @@ export * from "./scale/index";
 export * from "./shared";
 export * from "./themeValue";
 export * from "./sizeRecipes";
+export * from "./listRows";
 export * from "./subsetThemes";
 export * from "./Surface";
 export * from "./Text";

package/types/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjF,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAElC,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,eAAe,IAAI,kBAAkB,EACrC,kBAAkB,EAClB,WAAW,EACX,KAAK,UAAU,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEpF,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjF,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAElC,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,eAAe,IAAI,kBAAkB,EACrC,kBAAkB,EAClB,WAAW,EACX,KAAK,UAAU,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEpF,cAAc,YAAY,CAAC"}

package/types/theme/listRows.d.ts

@@ -0,0 +1,13 @@
+/**
+ * LC-222 LIST-HEIGHT-IN-ROWS: an embedded list's bounded height is a count of
+ * visible rows at its row pitch, never pixels, so every preset scale shows the
+ * same number of rows. `separator` is the hairline between rows, if any.
+ */
+export declare function listHeightForRows(rows: number, rowPitch: number, separator?: number): number;
+/** Visible rows a list of `height` shows at `rowPitch`; the inverse of listHeightForRows. */
+export declare function rowsInListHeight(height: number, rowPitch: number, separator?: number): number;
+/** Height of `rows` menu or listbox rows at a size token (the menuRow recipe pitch). */
+export declare function menuListHeight(rows: number, sizeToken: string, options?: {
+    touch?: boolean;
+}): number;
+//# sourceMappingURL=listRows.d.ts.map

package/types/theme/listRows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listRows.d.ts","sourceRoot":"","sources":["../../src/theme/listRows.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,SAAI,GAAG,MAAM,CAGvF;AAED,6FAA6F;AAC7F,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,SAAI,GAAG,MAAM,CAExF;AAED,wFAAwF;AACxF,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,UAG5F"}