@ponti-studios/ui 0.4.0 → 0.4.1

package/README.md

@@ -25,3 +25,17 @@ pnpm config set --location=user //registry.npmjs.org/:_authToken "$NODE_AUTH_TOK
 ```
 
 CI consumers should use a secret-backed npm token with read access.
+
+### Ships TypeScript source, not a bundle
+
+This package has no build output — every `exports` entry resolves to a file under `src/`. Consumers are expected to transpile the package themselves (Vite, Metro, Next, etc. all do this for workspace/npm packages by default). This is deliberate: Tailwind v4 class detection for consumers of `./styles.css` or `./tokens.css` requires an `@source` directive pointing at the installed package's `src/`, e.g.
+
+```css
+@source "../../../node_modules/@ponti-studios/ui/src";
+```
+
+Bundling the package would break that detection, since Tailwind can't scan generated/minified output for class names. `pnpm run build` only type-checks; it does not emit JS.
+
+### `./native` subpath
+
+`@ponti-studios/ui/native` is the only part of the package that imports `react-native`. Web consumers never pull it in; native consumers get `createMakeStyles`, `nativeShadows`, `useColorMode`, and `useThemeColors`. `react-native` is an optional peer dependency — only declare it in your own `package.json` if you actually import from this subpath.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": false,
   "description": "Shared UI component library for ponti-studios labs",
   "license": "MIT",
@@ -14,13 +14,13 @@
     "access": "public"
   },
   "files": [
-    "dist",
     "src",
     "THIRD_PARTY_NOTICES.md"
   ],
   "type": "module",
   "sideEffects": [
     "./src/styles.css",
+    "./src/tokens.css",
     "./src/animations.css"
   ],
   "exports": {
@@ -64,15 +64,24 @@
       "types": "./src/tokens/index.ts",
       "import": "./src/tokens/index.ts"
     },
+    "./tokens/css-vars": {
+      "types": "./src/tokens/css-vars.ts",
+      "import": "./src/tokens/css-vars.ts"
+    },
+    "./native": {
+      "types": "./src/native/index.ts",
+      "import": "./src/native/index.ts"
+    },
     "./hooks": {
       "types": "./src/hooks/index.ts",
       "import": "./src/hooks/index.ts"
     },
     "./styles.css": "./src/styles.css",
+    "./tokens.css": "./src/tokens.css",
     "./animations.css": "./src/animations.css"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "tsc --noEmit",
     "dev": "vite",
     "storybook": "style-dictionary build --config style-dictionary.dark-storybook.json && storybook dev -p 6006",
     "check:source": "node tokens/check-source.mjs",
@@ -82,7 +91,7 @@
     "typecheck": "tsc --noEmit",
     "lint": "oxlint src --fix",
     "format": "oxfmt src --write",
-    "prepack": "pnpm run tokens:check && pnpm run check:source && pnpm run typecheck && pnpm run build"
+    "prepack": "pnpm run tokens:check && pnpm run check:source && pnpm run typecheck"
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
@@ -115,6 +124,7 @@
     "playwright": "catalog:",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
+    "react-native": "0.86.0",
     "storybook": "^10.5.3",
     "style-dictionary": "5.5.0",
     "tailwindcss": "catalog:",
@@ -124,7 +134,16 @@
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-native": ">=0.74"
   },
-  "packageManager": "pnpm@10.30.3"
+  "packageManager": "pnpm@10.30.3",
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
+  }
 }

package/src/index.ts

@@ -9,9 +9,9 @@ export { normalizeOtp, OTP_LENGTH } from "./lib/auth";
 export { copyToClipboard } from "./lib/clipboard";
 export { createMemoryStorage } from "./lib/create-memory-storage";
 export { cn } from "./lib/utils";
+export { colors } from "./tokens/css-vars";
 export {
   animations,
-  colors,
   colorThemes,
   colorTokenNames,
   containers,

package/src/native/index.ts

@@ -0,0 +1,11 @@
+/**
+ * React Native entry point.
+ *
+ * Kept as its own subpath (`@ponti-studios/ui/native`) because it is the only
+ * part of the package that imports `react-native`. Nothing here may import web
+ * code, so web consumers never pull React Native into their graph and native
+ * consumers never pull in react-dom.
+ */
+export { createMakeStyles, type NamedStyles } from "./make-styles";
+export { nativeShadows, type NativeShadowLayer } from "./shadows";
+export { useColorMode, useThemeColors } from "./use-theme-colors";

package/src/native/make-styles.ts

@@ -0,0 +1,32 @@
+import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
+
+export type NamedStyles = Record<string, ViewStyle | TextStyle | ImageStyle>;
+
+/**
+ * Builds a `makeStyles` helper bound to a consuming app's own theme hook.
+ *
+ * The theme *shape* stays owned by the app — this package supplies only the
+ * mechanism — so `Theme` is a type parameter rather than a type exported from
+ * here. An app calls this once with its `useTheme` and uses the result
+ * everywhere:
+ *
+ * ```ts
+ * export const makeStyles = createMakeStyles(useTheme);
+ *
+ * const useStyles = makeStyles((theme) => ({
+ *   card: { backgroundColor: theme.colors.card },
+ * }));
+ * ```
+ *
+ * The returned `useStyles` is a hook: it calls `useTheme` on every render, so
+ * styles re-resolve when the color mode changes. Styles are returned as plain
+ * objects rather than passed through `StyleSheet.create`, since they are
+ * rebuilt per render and React Native accepts plain style objects directly.
+ */
+export function createMakeStyles<Theme>(useTheme: () => Theme) {
+  return function makeStyles<T extends NamedStyles>(factory: (theme: Theme) => T & NamedStyles) {
+    return function useStyles(): T {
+      return factory(useTheme());
+    };
+  };
+}

package/src/native/shadows.ts

@@ -0,0 +1,38 @@
+import { shadows, type ShadowToken } from "../tokens";
+
+/**
+ * One layer of a shadow in the shape React Native's `boxShadow` expects.
+ *
+ * The shared shadow tokens are authored for CSS, where each dimension carries
+ * its own unit. React Native takes bare numbers (density-independent pixels),
+ * so the unit is dropped here rather than at every call site.
+ */
+export interface NativeShadowLayer {
+  color: string;
+  offsetX: number;
+  offsetY: number;
+  blurRadius: number;
+  spreadDistance: number;
+  inset: boolean;
+}
+
+/**
+ * The shared shadow scale translated to React Native's `boxShadow` shape.
+ *
+ * Every token maps to an array of layers, including `none`, which is a single
+ * fully transparent layer rather than an empty array — that keeps the value
+ * assignable wherever a real shadow is expected.
+ */
+export const nativeShadows = Object.fromEntries(
+  Object.entries(shadows).map(([name, layers]) => [
+    name,
+    layers.map((layer) => ({
+      color: layer.color,
+      offsetX: layer.offsetX.value,
+      offsetY: layer.offsetY.value,
+      blurRadius: layer.blur.value,
+      spreadDistance: layer.spread.value,
+      inset: false,
+    })),
+  ]),
+) as Record<ShadowToken, NativeShadowLayer[]>;

package/src/native/use-theme-colors.ts

@@ -0,0 +1,19 @@
+import { useColorScheme } from "react-native";
+
+import { colorThemes, type ColorMode, type ColorTheme } from "../tokens";
+
+/**
+ * Resolves the active color mode from the OS appearance setting.
+ *
+ * React Native's `useColorScheme` reports `null` before the appearance module
+ * has settled, so anything that isn't explicitly "dark" resolves to light —
+ * callers always receive a concrete mode rather than having to handle null.
+ */
+export function useColorMode(): ColorMode {
+  return useColorScheme() === "dark" ? "dark" : "light";
+}
+
+/** The full color token set for the active OS appearance. */
+export function useThemeColors(): ColorTheme {
+  return colorThemes[useColorMode()];
+}

package/src/styles.css

@@ -1,7 +1,5 @@
 @import "tailwindcss";
-@import "./tokens/generated/foundations.css";
-@import "./tokens/generated/light.css";
-@import "./tokens/generated/dark.css" (prefers-color-scheme: dark);
+@import "./tokens.css";
 @import "./animations.css";
 
 /* shadcn New York semantic contract. Values are generated from the DTCG

package/src/tokens/chart-colors.stories.tsx

@@ -78,16 +78,13 @@ export const CategoricalPalette: Story = {
         <p className="text-muted-foreground text-sm">Foundations / charts</p>
         <h1 className="text-4xl font-semibold tracking-tight">Chart colors</h1>
         <p className="text-muted-foreground max-w-2xl text-base">
-          <code className="font-mono">chart-1</code> through <code className="font-mono">
-            chart-5
-          </code>{" "}
-          are an ordinal palette for arbitrary categorical series (e.g. one line per country) —
-          there's no fixed meaning to a given slot, so they're assigned by index, not by what the
-          data represents. That's different from{" "}
-          <code className="font-mono">chart-positive</code>/<code className="font-mono">
-            chart-negative
-          </code>
-          /<code className="font-mono">chart-neutral</code> below, which carry real meaning
+          <code className="font-mono">chart-1</code> through{" "}
+          <code className="font-mono">chart-5</code> are an ordinal palette for arbitrary
+          categorical series (e.g. one line per country) — there's no fixed meaning to a given slot,
+          so they're assigned by index, not by what the data represents. That's different from{" "}
+          <code className="font-mono">chart-positive</code>/
+          <code className="font-mono">chart-negative</code>/
+          <code className="font-mono">chart-neutral</code> below, which carry real meaning
           (up/down/flat) and should stay semantic in any chart that shows a directional delta.
         </p>
       </header>
@@ -112,8 +109,8 @@ export const CategoricalPalette: Story = {
       <section className="border-border bg-card grid gap-5 rounded-xl border p-6">
         <h2 className="text-2xl font-semibold">Grouped bar chart (mock)</h2>
         <p className="text-muted-foreground max-w-2xl text-sm">
-          Three unrelated categories, five series each — a stress test for how distinguishable
-          the palette stays side by side.
+          Three unrelated categories, five series each — a stress test for how distinguishable the
+          palette stays side by side.
         </p>
         <div className="flex items-end gap-8" style={{ height: 220 }}>
           {BAR_DATA.map((group, groupIndex) => (

package/src/tokens/css-vars.ts

@@ -0,0 +1,15 @@
+import { colorTokenNames, type ColorToken } from "./index";
+
+/**
+ * Color tokens as CSS `var()` references, for consumers whose runtime resolves
+ * the CSS cascade (i.e. web). Kept out of `./tokens` because React Native has
+ * no cascade — a `var(--token)` string there fails silently, rendering as an
+ * unparseable color rather than throwing.
+ */
+export const colors = colorTokenNames.reduce(
+  (accumulator, token) => {
+    accumulator[token] = `var(--${token})`;
+    return accumulator;
+  },
+  {} as Record<ColorToken, `var(--${string})`>,
+);

package/src/tokens/generated/dark.colors.generated.ts

@@ -26,4 +26,5 @@ export default {
   "chart-positive": "#30a46c",
   "chart-negative": "#e5484d",
   "chart-neutral": "#5a6169",
+  "overlay-scrim": "#000000",
 };

package/src/tokens/generated/dark.css

@@ -26,4 +26,5 @@
   --chart-positive: #30a46c;
   --chart-negative: #e5484d;
   --chart-neutral: #5a6169;
+  --overlay-scrim: #000000;
 }

package/src/tokens/generated/light.colors.generated.ts

@@ -26,4 +26,5 @@ export default {
   "chart-positive": "#30a46c",
   "chart-negative": "#e5484d",
   "chart-neutral": "#b9bbc6",
+  "overlay-scrim": "#000000",
 };

package/src/tokens/generated/light.css

@@ -26,4 +26,5 @@
   --chart-positive: #30a46c;
   --chart-negative: #e5484d;
   --chart-neutral: #b9bbc6;
+  --overlay-scrim: #000000;
 }

package/src/tokens/index.ts

@@ -27,14 +27,6 @@ export const colorThemes = {
   dark: darkTokens,
 } as const satisfies Record<ColorMode, ColorTheme>;
 
-export const colors = colorTokenNames.reduce(
-  (accumulator, token) => {
-    accumulator[token] = `var(--${token})`;
-    return accumulator;
-  },
-  {} as Record<ColorToken, `var(--${string})`>,
-);
-
 export const spacing = Object.fromEntries(
   Object.entries(foundations["spacing-scale"]).map(([key, value]) => [
     key.replace("-", "."),

package/src/tokens.css

@@ -0,0 +1,3 @@
+@import "./tokens/generated/foundations.css";
+@import "./tokens/generated/light.css";
+@import "./tokens/generated/dark.css" (prefers-color-scheme: dark);