@whop/elements-react-native 0.1.0

package/lib/module/theme/appearance.test.js

@@ -0,0 +1,124 @@
+"use strict";
+
+import { describe, expect, it } from 'vitest';
+import { assertNativeAppearance, parseTheme } from "./appearance.js";
+import { resolveTheme } from "./resolve.js";
+describe('parseTheme', () => {
+  it('falls back rather than throwing on an unknown value', () => {
+    expect(parseTheme({
+      accentColor: 'chartreuse'
+    }).accentColor).toBeUndefined();
+    expect(parseTheme({
+      appearance: 'sepia'
+    }).appearance).toBeUndefined();
+  });
+  it('keeps every documented value', () => {
+    const theme = parseTheme({
+      appearance: 'dark',
+      accentColor: 'jade',
+      grayColor: 'sand',
+      dangerColor: 'tomato',
+      warningColor: 'amber',
+      successColor: 'grass',
+      infoColor: 'sky'
+    });
+    expect(theme).toEqual({
+      appearance: 'dark',
+      accentColor: 'jade',
+      grayColor: 'sand',
+      dangerColor: 'tomato',
+      warningColor: 'amber',
+      successColor: 'grass',
+      infoColor: 'sky'
+    });
+  });
+});
+describe('assertNativeAppearance', () => {
+  // A silently-ignored style object is the worst failure available here.
+  it('refuses the web CSS keys by name', () => {
+    expect(() => assertNativeAppearance({
+      variables: {}
+    })).toThrow(/appearance\.tokens/);
+    expect(() => assertNativeAppearance({
+      classes: {}
+    })).toThrow(/appearance\.parts/);
+  });
+  it('accepts the native shape', () => {
+    expect(() => assertNativeAppearance({
+      theme: {
+        accentColor: 'blue'
+      },
+      tokens: {
+        radius: 4
+      }
+    })).not.toThrow();
+  });
+});
+describe('resolveTheme', () => {
+  it('follows the device when no appearance is named', () => {
+    expect(resolveTheme(undefined, 'dark').mode).toBe('dark');
+    expect(resolveTheme({
+      theme: {
+        appearance: 'light'
+      }
+    }, 'dark').mode).toBe('light');
+  });
+  it('pairs a neutral with the accent when grayColor is auto or unset', () => {
+    const jade = resolveTheme({
+      theme: {
+        accentColor: 'jade'
+      }
+    }, 'light');
+    const sage = resolveTheme({
+      theme: {
+        accentColor: 'jade',
+        grayColor: 'sage'
+      }
+    }, 'light');
+    expect(jade.gray.solid).toEqual(sage.gray.solid);
+  });
+  it('honours an explicit gray over the pairing', () => {
+    const explicit = resolveTheme({
+      theme: {
+        accentColor: 'jade',
+        grayColor: 'slate'
+      }
+    }, 'light');
+    const paired = resolveTheme({
+      theme: {
+        accentColor: 'jade'
+      }
+    }, 'light');
+    expect(explicit.gray.solid).not.toEqual(paired.gray.solid);
+  });
+  it('resolves twelve steps per scale in both modes', () => {
+    for (const mode of ['light', 'dark']) {
+      const theme = resolveTheme({
+        theme: {
+          accentColor: 'ruby'
+        }
+      }, mode);
+      expect(theme.accent.solid).toHaveLength(12);
+      expect(theme.accent.alpha).toHaveLength(12);
+      expect(theme.accent.solid.every(c => c.startsWith('#'))).toBe(true);
+    }
+  });
+  it('falls back to a real scale for an unknown accent instead of crashing', () => {
+    const theme = resolveTheme({
+      theme: {
+        accentColor: 'chartreuse'
+      }
+    }, 'light');
+    expect(theme.accent.solid).toHaveLength(12);
+  });
+  it('merges tokens over the defaults', () => {
+    const theme = resolveTheme({
+      tokens: {
+        radius: 22
+      }
+    }, 'light');
+    expect(theme.tokens.radius).toBe(22);
+    expect(theme.tokens.controlHeight).toBe(44);
+  });
+});
+//# sourceMappingURL=appearance.test.js.map

package/lib/module/theme/appearance.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","expect","it","assertNativeAppearance","parseTheme","resolveTheme","accentColor","toBeUndefined","appearance","theme","grayColor","dangerColor","warningColor","successColor","infoColor","toEqual","variables","toThrow","classes","tokens","radius","not","undefined","mode","toBe","jade","sage","gray","solid","explicit","paired","accent","toHaveLength","alpha","every","c","startsWith","controlHeight"],"sourceRoot":"../../../src","sources":["theme/appearance.test.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/theme/provider.js

@@ -0,0 +1,25 @@
+"use strict";
+
+import { createContext, useContext, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { resolveTheme } from "./resolve.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ThemeContext = /*#__PURE__*/createContext(null);
+export function ThemeProvider({
+  appearance,
+  children
+}) {
+  const system = useColorScheme();
+  const resolved = useMemo(() => resolveTheme(appearance ?? undefined, system ?? 'light'), [appearance, system]);
+  return /*#__PURE__*/_jsx(ThemeContext.Provider, {
+    value: resolved,
+    children: children
+  });
+}
+export function useTheme() {
+  const theme = useContext(ThemeContext);
+  if (!theme) throw new Error('Whop Elements components must be used within <WhopElements>');
+  return theme;
+}
+export { alphaStep, resolveTheme, step } from "./resolve.js";
+//# sourceMappingURL=provider.js.map

package/lib/module/theme/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","useMemo","useColorScheme","resolveTheme","jsx","_jsx","ThemeContext","ThemeProvider","appearance","children","system","resolved","undefined","Provider","value","useTheme","theme","Error","alphaStep","step"],"sourceRoot":"../../../src","sources":["theme/provider.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAkBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC1E,SAASC,cAAc,QAAQ,cAAc;AAG7C,SAA6BC,YAAY,QAAQ,cAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7D,MAAMC,YAAY,gBAAGP,aAAa,CAAuB,IAAI,CAAC;AAE9D,OAAO,SAASQ,aAAaA,CAAC;EAC7BC,UAAU;EACVC;AAID,CAAC,EAAa;EACb,MAAMC,MAAM,GAAGR,cAAc,CAAC,CAAC;EAC/B,MAAMS,QAAQ,GAAGV,OAAO,CAAC,MAAME,YAAY,CAACK,UAAU,IAAII,SAAS,EAAEF,MAAM,IAAI,OAAO,CAAC,EAAE,CAACF,UAAU,EAAEE,MAAM,CAAC,CAAC;EAC9G,oBAAOL,IAAA,CAACC,YAAY,CAACO,QAAQ;IAACC,KAAK,EAAEH,QAAS;IAAAF,QAAA,EAAEA;EAAQ,CAAwB,CAAC;AAClF;AAEA,OAAO,SAASM,QAAQA,CAAA,EAAkB;EACzC,MAAMC,KAAK,GAAGhB,UAAU,CAACM,YAAY,CAAC;EACtC,IAAI,CAACU,KAAK,EAAE,MAAM,IAAIC,KAAK,CAAC,6DAA6D,CAAC;EAC1F,OAAOD,KAAK;AACb;AAEA,SAASE,SAAS,EAAEf,YAAY,EAAEgB,IAAI,QAAQ,cAAW","ignoreList":[]}

package/lib/module/theme/resolve.js

@@ -0,0 +1,69 @@
+"use strict";
+
+import { DEFAULT_TOKENS, parseTheme } from "./appearance.js";
+import { ACCENT_SCALES, GRAY_SCALES } from "./scales.generated.js";
+/** frosted's pairing: a neutral carrying a hint of the accent unless one is named. */
+const GRAY_FOR_ACCENT = {
+  tomato: 'mauve',
+  red: 'mauve',
+  ruby: 'mauve',
+  crimson: 'mauve',
+  pink: 'mauve',
+  plum: 'mauve',
+  purple: 'mauve',
+  violet: 'mauve',
+  iris: 'slate',
+  indigo: 'slate',
+  blue: 'slate',
+  sky: 'slate',
+  cyan: 'slate',
+  teal: 'sage',
+  jade: 'sage',
+  mint: 'sage',
+  green: 'sage',
+  grass: 'olive',
+  lime: 'olive',
+  yellow: 'sand',
+  lemon: 'sand',
+  amber: 'sand',
+  orange: 'sand',
+  brown: 'sand',
+  gold: 'sand',
+  bronze: 'sand',
+  magenta: 'mauve',
+  gray: 'gray'
+};
+export function resolveTheme(appearance, system) {
+  const theme = parseTheme(appearance?.theme);
+  // An unset appearance follows the device, which is what a native buyer expects.
+  const mode = theme.appearance ?? system;
+  const accentName = theme.accentColor ?? 'blue';
+  const grayName = theme.grayColor === 'auto' || theme.grayColor === undefined ? GRAY_FOR_ACCENT[accentName] ?? 'gray' : theme.grayColor;
+  return {
+    mode,
+    accent: pickAccent(accentName, mode),
+    gray: GRAY_SCALES[grayName]?.[mode] ?? GRAY_SCALES.gray[mode],
+    danger: pickAccent(theme.dangerColor ?? 'red', mode),
+    warning: pickAccent(theme.warningColor ?? 'amber', mode),
+    success: pickAccent(theme.successColor ?? 'green', mode),
+    info: pickAccent(theme.infoColor ?? 'blue', mode),
+    tokens: {
+      ...DEFAULT_TOKENS,
+      ...appearance?.tokens
+    },
+    parts: appearance?.parts ?? {}
+  };
+}
+function pickAccent(name, mode) {
+  return ACCENT_SCALES[name]?.[mode] ?? ACCENT_SCALES.blue[mode];
+}
+
+/** Radix scales are 1-indexed in their own docs; keeping that here makes call sites read like the
+ *  design tokens they mirror. */
+export function step(scale, n) {
+  return scale.solid[n - 1] ?? scale.solid[0];
+}
+export function alphaStep(scale, n) {
+  return scale.alpha[n - 1] ?? scale.alpha[0];
+}
+//# sourceMappingURL=resolve.js.map

package/lib/module/theme/resolve.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_TOKENS","parseTheme","ACCENT_SCALES","GRAY_SCALES","GRAY_FOR_ACCENT","tomato","red","ruby","crimson","pink","plum","purple","violet","iris","indigo","blue","sky","cyan","teal","jade","mint","green","grass","lime","yellow","lemon","amber","orange","brown","gold","bronze","magenta","gray","resolveTheme","appearance","system","theme","mode","accentName","accentColor","grayName","grayColor","undefined","accent","pickAccent","danger","dangerColor","warning","warningColor","success","successColor","info","infoColor","tokens","parts","name","step","scale","n","solid","alphaStep","alpha"],"sourceRoot":"../../../src","sources":["theme/resolve.ts"],"mappings":"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","ignoreList":[]}