@multiplatform.one/theme 7.37.0 → 7.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.37.0",
+  "version": "7.39.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -59,8 +59,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.37.0",
-    "@multiplatform.one/store": "^7.37.0",
+    "@multiplatform.one/platform": "^7.39.0",
+    "@multiplatform.one/store": "^7.39.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -73,8 +73,8 @@
     "react-cookie": "^8.1.2"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.37.0",
-    "@multiplatform.one/test-utils": "7.37.0",
+    "@multiplatform.one/config": "7.39.0",
+    "@multiplatform.one/test-utils": "7.39.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/IconSlot.spec.tsx

@@ -0,0 +1,88 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { forwardRef, memo } from "react";
+import { getVariableValue, TamaguiProvider, useTheme } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { IconSlot } from "./IconSlot";
+
+const platform = vi.hoisted(() => ({ web: false }));
+vi.mock("tamagui", async (original) => ({
+  ...(await original<typeof import("tamagui")>()),
+  get isWeb() {
+    return platform.web;
+  },
+}));
+const config = createDefaultThemeConfig();
+function Probe({ color, size }: { color?: string; size?: number }) {
+  const theme = useTheme();
+  return (
+    <span
+      data-testid="icon"
+      data-color={color ?? "black"}
+      data-size={size}
+      data-ink={String(getVariableValue(theme.color))}
+      data-muted={String(getVariableValue(theme.color11))}
+    />
+  );
+}
+const Memo = memo(Probe);
+const Forward = forwardRef<HTMLSpanElement, { color?: string; size?: number }>((props, _ref) => (
+  <Probe {...props} />
+));
+afterEach(() => {
+  cleanup();
+  platform.web = false;
+});
+describe("IconSlot", () => {
+  it.each(["light", "dark"] as const)(
+    "%s resolves functions, memo, forwardRef, elements and fragments",
+    (scheme) => {
+      render(
+        <TamaguiProvider config={config.tamagui} defaultTheme={scheme} disableInjectCSS>
+          <IconSlot icon={Probe} />
+          <IconSlot icon={Memo} />
+          <IconSlot icon={Forward} />
+          <IconSlot icon={<Probe color="currentColor" />} />
+          <IconSlot
+            icon={
+              <>
+                <Probe />
+              </>
+            }
+          />
+        </TamaguiProvider>,
+      );
+      for (const icon of screen.getAllByTestId("icon"))
+        expect(icon.dataset.color).toBe(icon.dataset.ink);
+    },
+  );
+  it("resolves an explicit token and preserves literal ink", () => {
+    render(
+      <TamaguiProvider config={config.tamagui} defaultTheme="dark" disableInjectCSS>
+        <IconSlot icon={<Probe color="$color11" />} size={20} />
+        <IconSlot icon={<Probe color="rebeccapurple" />} />
+      </TamaguiProvider>,
+    );
+    const [token, literal] = screen.getAllByTestId("icon");
+    expect(token.dataset.color).toBe(token.dataset.muted);
+    expect(token.dataset.size).toBe("20");
+    expect(literal.dataset.color).toBe("rebeccapurple");
+  });
+  it("preserves explicit element size", () => {
+    render(
+      <TamaguiProvider config={config.tamagui} defaultTheme="dark" disableInjectCSS>
+        <IconSlot icon={<Probe size={12} />} size={20} />
+      </TamaguiProvider>,
+    );
+    expect(screen.getByTestId("icon").dataset.size).toBe("12");
+  });
+  it("keeps web inheritance", () => {
+    platform.web = true;
+    render(
+      <TamaguiProvider config={config.tamagui} defaultTheme="dark" disableInjectCSS>
+        <IconSlot icon={<Probe color="currentColor" />} />
+      </TamaguiProvider>,
+    );
+    expect(screen.getByTestId("icon").dataset.color).toBe("currentColor");
+  });
+});

package/src/theme/IconSlot.tsx

@@ -0,0 +1,51 @@
+import {
+  Children,
+  Fragment,
+  cloneElement,
+  createElement,
+  isValidElement,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+import { isWeb, useTheme } from "tamagui";
+import { resolveGlyphPaint } from "./glyphPaint";
+
+export type IconSlotValue = ReactNode | ComponentType<{ size?: number; color?: string }>;
+
+export function IconSlot({
+  icon,
+  color,
+  size,
+}: {
+  icon: IconSlotValue;
+  color?: string;
+  size?: number;
+}) {
+  const theme = useTheme();
+  const ink = (value?: string) =>
+    resolveGlyphPaint(
+      theme,
+      value && value !== "currentColor" ? value : color === "currentColor" ? undefined : color,
+    );
+  const render = (value: IconSlotValue): ReactNode => {
+    if (isValidElement<{ color?: string; size?: number; children?: ReactNode }>(value)) {
+      if (value.type === Fragment)
+        return cloneElement(value, {}, Children.map(value.props.children, render));
+      return cloneElement(value, {
+        ...(size == null || value.props.size != null ? {} : { size }),
+        ...(!isWeb ? { color: ink(value.props.color) } : {}),
+      });
+    }
+    if (
+      typeof value === "function" ||
+      (value && typeof value === "object" && "$$typeof" in value)
+    ) {
+      return createElement(value as ComponentType<{ size?: number; color?: string }>, {
+        size,
+        ...(!isWeb ? { color: ink() } : {}),
+      });
+    }
+    return value as ReactNode;
+  };
+  return render(icon);
+}

package/src/theme/index.ts

@@ -58,3 +58,5 @@ export {
   type MotionStop,
 } from "./animations/css";
 export { animationConfig as nativeAnimationConfig } from "./animations/reactNative";
+
+export * from "./IconSlot";

package/types/theme/IconSlot.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentType, type ReactNode } from "react";
+export type IconSlotValue = ReactNode | ComponentType<{
+    size?: number;
+    color?: string;
+}>;
+export declare function IconSlot({ icon, color, size, }: {
+    icon: IconSlotValue;
+    color?: string;
+    size?: number;
+}): ReactNode;
+//# sourceMappingURL=IconSlot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconSlot.d.ts","sourceRoot":"","sources":["../../src/theme/IconSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,aAAa,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEzF,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,IAAI,GACL,EAAE;IACD,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,aA4BA"}

package/types/theme/index.d.ts

@@ -51,4 +51,5 @@ export * from "./overlaySurfaces";
 export * from "./motion";
 export { animationConfig as cssAnimationConfig, animationDurations, motionStops, type MotionStop, } from "./animations/css";
 export { animationConfig as nativeAnimationConfig } from "./animations/reactNative";
+export * from "./IconSlot";
 //# sourceMappingURL=index.d.ts.map

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,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,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,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,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,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"}
+{"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,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,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,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,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,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"}