@ponti-studios/ui 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",
@@ -133,13 +133,15 @@
     "style-dictionary": "5.5.0",
     "tailwindcss": "^4.3.3",
     "typescript": "6.0.3",
+    "uniwind": "^1.10.1",
     "vite": "^8.1.5",
     "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "react-native": ">=0.74"
+    "react-native": ">=0.74",
+    "uniwind": ">=1.10.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {
@@ -147,6 +149,9 @@
     },
     "react-native": {
       "optional": true
+    },
+    "uniwind": {
+      "optional": true
     }
   },
   "packageManager": "pnpm@11.10.0"

package/src/components/overlays/sheet.tsx

@@ -49,18 +49,28 @@ const SheetOverlay = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Backdrop>
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Backdrop
-    className={cn(
-      "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 transition-opacity",
-      className,
-    )}
+    data-slot="sheet-overlay"
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
     {...props}
     ref={ref}
   />
 ));
 SheetOverlay.displayName = "SheetOverlay";
 
-const sheetClassName =
-  "bg-background text-foreground data-open:animate-in data-closed:animate-out fixed inset-x-0 bottom-0 z-50 flex max-h-[90dvh] min-h-[30dvh] flex-col gap-6 rounded-t-xl border border-b-0 border-l-0 border-r-0 p-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:inset-y-0 md:right-0 md:bottom-auto md:left-auto md:h-full md:w-3/4 md:max-w-sm md:min-h-0 md:rounded-t-none md:rounded-l-xl md:border-t-0 md:border-r-0 md:border-b-0 md:border-l md:p-6 md:pb-6";
+const sheetClassName = [
+  // Appearance
+  "bg-background text-foreground rounded-xl border shadow-lg",
+  // Layout
+  "flex flex-col gap-6 p-4",
+  // Position: floats off every edge, anchored to the bottom on mobile
+  "fixed z-50 inset-x-2 bottom-[max(0.5rem,env(safe-area-inset-bottom))]",
+  // Size: mobile
+  "max-h-[calc(100dvh-2rem)] min-h-[30dvh]",
+  // Position: anchored to the right edge on desktop
+  "md:inset-y-2 md:right-2 md:left-auto md:bottom-auto",
+  // Size: desktop
+  "md:w-3/4 md:max-w-sm md:min-h-0",
+];
 
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Popup> {}
 
@@ -70,7 +80,12 @@ const SheetContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
-    <SheetPrimitive.Popup ref={ref} className={cn(sheetClassName, className)} {...props}>
+    <SheetPrimitive.Popup
+      ref={ref}
+      data-slot="sheet-content"
+      className={cn(sheetClassName, className)}
+      {...props}
+    >
       <SheetPrimitive.Close className="text-muted-foreground hover:bg-muted hover:text-muted-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-9 items-center justify-center rounded-md border border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none md:top-4 md:right-4">
         <X className="size-4.5" />
         <span className="sr-only">Close</span>

package/src/native/card.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Text, View, type TextProps, type ViewProps } from "react-native";
+
+import { cn } from "../lib/utils";
+
+function Card({ className, ...props }: ViewProps) {
+  return <View className={cn("bg-card gap-4 rounded border border-border p-4", className)} {...props} />;
+}
+
+function CardHeader({ className, ...props }: ViewProps) {
+  return <View className={cn("gap-1", className)} {...props} />;
+}
+
+function CardTitle({ className, ...props }: TextProps) {
+  return <Text className={cn("text-card-foreground text-xl", className)} {...props} />;
+}
+
+function CardDescription({ className, ...props }: TextProps) {
+  return <Text className={cn("text-muted-foreground text-xs", className)} {...props} />;
+}
+
+function CardAction({ className, ...props }: ViewProps) {
+  return <View className={cn("self-start", className)} {...props} />;
+}
+
+function CardContent({ className, ...props }: ViewProps) {
+  return <View className={className} {...props} />;
+}
+
+function CardFooter({ className, ...props }: ViewProps) {
+  return <View className={cn("flex-row items-center", className)} {...props} />;
+}
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/src/native/icon-button.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import { Pressable } from "react-native";
+import { useCSSVariable } from "uniwind";
+
+interface IconButtonProps {
+  accessibilityLabel?: string;
+  children: ReactNode;
+  disabled?: boolean;
+  onPress?: () => void;
+  testID?: string;
+  variant?: "bordered" | "plain";
+}
+
+export function IconButton({
+  accessibilityLabel,
+  children,
+  disabled = false,
+  onPress,
+  testID,
+  variant = "bordered",
+}: IconButtonProps) {
+  const [border] = useCSSVariable(["--color-border"]) as string[];
+
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      disabled={disabled}
+      onPress={onPress}
+      testID={testID}
+      className={`w-8 h-8 rounded-full border items-center justify-center ${variant === "plain" ? "border-0" : ""}`}
+      style={({ pressed }) => [
+        { borderColor: variant === "plain" ? "transparent" : border },
+        pressed && { opacity: 0.7 },
+        disabled && { opacity: 0.4 },
+      ]}
+    >
+      {children}
+    </Pressable>
+  );
+}

package/src/native/index.ts

@@ -9,3 +9,20 @@
 export { createMakeStyles, type NamedStyles } from "./make-styles";
 export { nativeShadows, type NativeShadowLayer } from "./shadows";
 export { useColorMode, useThemeColors } from "./use-theme-colors";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
+export { TextField } from "./text-field";
+export { IconButton } from "./icon-button";
+
+export {
+  typography as nativeTypography,
+  spacing as nativeSpacing,
+  screenMargin as nativeScreenMargin,
+  componentSize as nativeComponentSize,
+  borderRadius as nativeBorderRadius,
+  streamItem as nativeStreamItem,
+  fontFamily as nativeFontFamily,
+  type TypographyVariant,
+  type SpacingToken,
+  type ComponentSizeToken,
+  type BorderRadiusToken,
+} from "../styles/tokens/normalize-native";

package/src/native/text-field.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, useState } from "react";
+import { TextInput, type TextInputProps } from "react-native";
+import { useCSSVariable } from "uniwind";
+
+export const TextField = forwardRef<TextInput, TextInputProps>(function TextField(
+  { onBlur, onFocus, style, ...props },
+  ref,
+) {
+  const [ring, borderInput, foreground, mutedForeground] = useCSSVariable([
+    "--color-ring",
+    "--color-input",
+    "--color-foreground",
+    "--color-muted-foreground",
+  ]) as string[];
+  const [focused, setFocused] = useState(false);
+
+  return (
+    <TextInput
+      {...props}
+      ref={ref}
+      onBlur={(event) => {
+        setFocused(false);
+        onBlur?.(event);
+      }}
+      onFocus={(event) => {
+        setFocused(true);
+        onFocus?.(event);
+      }}
+      placeholderTextColor={props.placeholderTextColor ?? mutedForeground}
+      className="rounded-md border min-h-11 px-4 py-3 text-base"
+      style={[{ borderColor: focused ? ring : borderInput, color: foreground }, style]}
+    />
+  );
+});

package/src/native/uniwind.d.ts

@@ -0,0 +1 @@
+/// <reference types="uniwind/types" />

package/src/styles/animations.css

@@ -50,6 +50,46 @@
     transform: scale(0.95);
   }
 }
+@keyframes sheet-slide-in-bottom {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes sheet-slide-out-bottom {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+@keyframes sheet-slide-in-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes sheet-slide-out-right {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
 
 .data-open\:animate-in[data-open],
 .data-open\:animate-in[data-state="open"] {
@@ -64,6 +104,38 @@
     zoom-out 120ms ease-in;
 }
 
+[data-slot="sheet-overlay"][data-open],
+[data-slot="sheet-overlay"][data-state="open"] {
+  animation: fade-in 400ms var(--ease-out);
+}
+[data-slot="sheet-overlay"][data-closed],
+[data-slot="sheet-overlay"][data-state="closed"] {
+  /* Must stay in lockstep with [data-slot="sheet-content"]'s close duration below (both 200ms) —
+     Base UI gates the whole portal's unmount on this element's own close-animation duration, not
+     the content panel's, so a mismatch here yanks the sliding panel off mid-animation. */
+  animation: fade-out 200ms var(--ease-in);
+}
+
+[data-slot="sheet-content"][data-open],
+[data-slot="sheet-content"][data-state="open"] {
+  animation: sheet-slide-in-bottom 300ms var(--ease-drawer);
+}
+[data-slot="sheet-content"][data-closed],
+[data-slot="sheet-content"][data-state="closed"] {
+  animation: sheet-slide-out-bottom 200ms var(--ease-drawer);
+}
+
+@media (min-width: 768px) {
+  [data-slot="sheet-content"][data-open],
+  [data-slot="sheet-content"][data-state="open"] {
+    animation: sheet-slide-in-right 300ms var(--ease-drawer);
+  }
+  [data-slot="sheet-content"][data-closed],
+  [data-slot="sheet-content"][data-state="closed"] {
+    animation: sheet-slide-out-right 200ms var(--ease-drawer);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .animate-in,
   .animate-out,
@@ -72,3 +144,22 @@
     animation: none !important;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="sheet-overlay"][data-open],
+  [data-slot="sheet-overlay"][data-state="open"] {
+    animation: fade-in 120ms var(--ease-out) !important;
+  }
+  [data-slot="sheet-overlay"][data-closed],
+  [data-slot="sheet-overlay"][data-state="closed"] {
+    animation: fade-out 120ms var(--ease-in) !important;
+  }
+  [data-slot="sheet-content"][data-open],
+  [data-slot="sheet-content"][data-state="open"] {
+    animation: fade-in var(--duration-150) var(--ease-out) !important;
+  }
+  [data-slot="sheet-content"][data-closed],
+  [data-slot="sheet-content"][data-state="closed"] {
+    animation: fade-out 120ms var(--ease-in) !important;
+  }
+}

package/src/styles/tokens/generated/foundations.css

@@ -133,6 +133,7 @@
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
   --duration-75: 75ms;
   --duration-100: 100ms;
   --duration-150: 150ms;

package/src/styles/tokens/generated/foundations.generated.ts

@@ -431,6 +431,7 @@ export default {
     in: [0.4, 0, 1, 1],
     out: [0, 0, 0.2, 1],
     "in-out": [0.4, 0, 0.2, 1],
+    drawer: [0.32, 0.72, 0, 1],
   },
   duration: {
     75: "75ms",

package/src/styles/tokens/generated/native.generated.ts

@@ -0,0 +1,238 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  text: {
+    "large-title": {
+      fontSize: {
+        value: 34,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 41,
+        unit: "px",
+      },
+      fontWeight: 700,
+      letterSpacing: {
+        value: -0.6,
+        unit: "px",
+      },
+    },
+    title1: {
+      fontSize: {
+        value: 28,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 34,
+        unit: "px",
+      },
+      fontWeight: 700,
+      letterSpacing: {
+        value: -0.4,
+        unit: "px",
+      },
+    },
+    title2: {
+      fontSize: {
+        value: 22,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 28,
+        unit: "px",
+      },
+      fontWeight: 600,
+      letterSpacing: {
+        value: -0.2,
+        unit: "px",
+      },
+    },
+    headline: {
+      fontSize: {
+        value: 17,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 22,
+        unit: "px",
+      },
+      fontWeight: 600,
+      letterSpacing: {
+        value: -0.1,
+        unit: "px",
+      },
+    },
+    body: {
+      fontSize: {
+        value: 17,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 24,
+        unit: "px",
+      },
+      fontWeight: 400,
+      letterSpacing: {
+        value: 0,
+        unit: "px",
+      },
+    },
+    callout: {
+      fontSize: {
+        value: 16,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 22,
+        unit: "px",
+      },
+      fontWeight: 400,
+      letterSpacing: {
+        value: -0.1,
+        unit: "px",
+      },
+    },
+    subhead: {
+      fontSize: {
+        value: 15,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 20,
+        unit: "px",
+      },
+      fontWeight: 400,
+      letterSpacing: {
+        value: 0,
+        unit: "px",
+      },
+    },
+    footnote: {
+      fontSize: {
+        value: 13,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 18,
+        unit: "px",
+      },
+      fontWeight: 400,
+      letterSpacing: {
+        value: 0,
+        unit: "px",
+      },
+    },
+    caption1: {
+      fontSize: {
+        value: 12,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 16,
+        unit: "px",
+      },
+      fontWeight: 400,
+      letterSpacing: {
+        value: 0,
+        unit: "px",
+      },
+    },
+    caption2: {
+      fontSize: {
+        value: 11,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 14,
+        unit: "px",
+      },
+      fontWeight: 500,
+      letterSpacing: {
+        value: 0.2,
+        unit: "px",
+      },
+    },
+    display: {
+      fontSize: {
+        value: 40,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 44,
+        unit: "px",
+      },
+      fontWeight: 700,
+      letterSpacing: {
+        value: -1.2,
+        unit: "px",
+      },
+    },
+    overline: {
+      fontSize: {
+        value: 11,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 16,
+        unit: "px",
+      },
+      fontWeight: 500,
+      letterSpacing: {
+        value: 0.8,
+        unit: "px",
+      },
+      textTransform: "uppercase",
+    },
+    mono: {
+      fontFamily: "Menlo",
+      fontSize: {
+        value: 12,
+        unit: "px",
+      },
+      lineHeight: {
+        value: 16,
+        unit: "px",
+      },
+      fontWeight: 400,
+      letterSpacing: {
+        value: 0,
+        unit: "px",
+      },
+    },
+  },
+  space: {
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+    xl: "1.5rem",
+  },
+  "screen-margin": "1rem",
+  "component-size": {
+    sm: "1rem",
+    md: "1.5rem",
+    lg: "2rem",
+    xl: "2.75rem",
+    icon: "1.25rem",
+  },
+  "border-radius": {
+    sm: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    icon: "0.375rem",
+  },
+  "stream-item": {
+    "border-radius": "0.375rem",
+    "border-width": "1px",
+    gap: "0.5rem",
+    "icon-size": "1.5rem",
+    "min-height": "50px",
+    "padding-horizontal": "0.5rem",
+    "padding-vertical": "0.25rem",
+  },
+  "font-family": {
+    primary: "System",
+    mono: "Menlo",
+  },
+};

package/src/styles/tokens/normalize-native.ts

@@ -0,0 +1,86 @@
+import nativeGenerated from "./generated/native.generated";
+
+const toPixels = (value: string) => {
+  if (value.endsWith("rem")) return Number.parseFloat(value) * 16;
+  if (value.endsWith("px")) return Number.parseFloat(value);
+  throw new Error(`Unsupported dimension: ${value}`);
+};
+
+const unwrap = (v: { value: number; unit?: string } | number) =>
+  typeof v === "number" ? v : v.value;
+
+type DimensionValue = number | { value: number; unit?: string };
+
+const makeFlat = (raw: Record<string, unknown>) => ({
+  fontFamily: raw.fontFamily as string | undefined,
+  fontSize: unwrap(raw.fontSize as DimensionValue),
+  fontWeight: raw.fontWeight as number,
+  lineHeight: unwrap(raw.lineHeight as DimensionValue),
+  letterSpacing: unwrap(raw.letterSpacing as DimensionValue),
+  ...(raw.textTransform ? { textTransform: raw.textTransform as "uppercase" | "lowercase" | "capitalize" | "none" } : {}),
+});
+
+const generated = nativeGenerated as unknown as {
+  text: Record<string, Record<string, unknown>>;
+  space: Record<string, string>;
+  "screen-margin": string;
+  "component-size": Record<string, string>;
+  "border-radius": Record<string, string>;
+  "stream-item": Record<string, string>;
+  "font-family": { primary: string; mono: string };
+};
+
+const primaryFont = generated["font-family"].primary;
+
+const typographyEntries = Object.entries(generated.text).map(([key, raw]) => {
+  const flat = makeFlat(raw);
+  if (!flat.fontFamily) flat.fontFamily = primaryFont;
+  return [key, flat] as const;
+});
+
+export const typography = Object.fromEntries(typographyEntries) as Record<
+  string,
+  {
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: number;
+    lineHeight: number;
+    letterSpacing: number;
+    textTransform?: "uppercase" | "lowercase" | "capitalize" | "none";
+  }
+>;
+
+export type TypographyVariant = keyof typeof typography;
+
+export const spacing = Object.fromEntries(
+  Object.entries(generated.space).map(([key, value]) => [key, toPixels(value)]),
+) as Record<keyof typeof generated.space, number>;
+
+export type SpacingToken = keyof typeof spacing;
+
+export const screenMargin = toPixels(generated["screen-margin"]);
+
+export const componentSize = Object.fromEntries(
+  Object.entries(generated["component-size"]).map(([key, value]) => [key, toPixels(value)]),
+) as Record<keyof typeof generated["component-size"], number>;
+
+export type ComponentSizeToken = keyof typeof componentSize;
+
+export const borderRadius = Object.fromEntries(
+  Object.entries(generated["border-radius"]).map(([key, value]) => [key, toPixels(value)]),
+) as Record<keyof typeof generated["border-radius"], number>;
+
+export type BorderRadiusToken = keyof typeof borderRadius;
+
+const rawStreamItem = generated["stream-item"];
+export const streamItem = {
+  borderRadius: toPixels(rawStreamItem["border-radius"]),
+  borderWidth: toPixels(rawStreamItem["border-width"]),
+  gap: toPixels(rawStreamItem.gap),
+  iconSize: toPixels(rawStreamItem["icon-size"]),
+  minHeight: toPixels(rawStreamItem["min-height"]),
+  paddingHorizontal: toPixels(rawStreamItem["padding-horizontal"]),
+  paddingVertical: toPixels(rawStreamItem["padding-vertical"]),
+};
+
+export const fontFamily = generated["font-family"];

package/src/styles/tokens/source/foundations.tokens.json

@@ -318,7 +318,8 @@
     "$type": "cubicBezier",
     "in": { "$value": [0.4, 0, 1, 1] },
     "out": { "$value": [0, 0, 0.2, 1] },
-    "in-out": { "$value": [0.4, 0, 0.2, 1] }
+    "in-out": { "$value": [0.4, 0, 0.2, 1] },
+    "drawer": { "$value": [0.32, 0.72, 0, 1] }
   },
   "duration": {
     "$type": "duration",

package/src/styles/tokens/source/native.tokens.json

@@ -0,0 +1,169 @@
+{
+  "$extensions": {
+    "org.ponti.description": "Semantic and component tokens for React Native consumers. Values reference the shared foundations so mobile stays in lockstep with web. Consumed via @ponti-studios/ui/native."
+  },
+  "space": {
+    "$type": "dimension",
+    "sm": { "$value": "{spacing-scale.2}" },
+    "md": { "$value": "{spacing-scale.3}" },
+    "lg": { "$value": "{spacing-scale.4}" },
+    "xl": { "$value": "{spacing-scale.6}" }
+  },
+  "screen-margin": {
+    "$type": "dimension",
+    "$value": "{spacing-scale.4}"
+  },
+  "component-size": {
+    "$type": "dimension",
+    "sm": { "$value": "{spacing-scale.4}" },
+    "md": { "$value": "{spacing-scale.6}" },
+    "lg": { "$value": "{spacing-scale.8}" },
+    "xl": { "$value": "{spacing-scale.11}" },
+    "icon": { "$value": "{spacing-scale.5}" }
+  },
+  "border-radius": {
+    "$type": "dimension",
+    "sm": { "$value": "{radius.sm}" },
+    "md": { "$value": "{radius.md}" },
+    "lg": { "$value": "{radius.lg}" },
+    "icon": { "$value": "{radius.md}" }
+  },
+  "stream-item": {
+    "$description": "Shared look for stream rows (time, inbox). Mirrors what the app used to hand-roll in theme.ts.",
+    "$type": "dimension",
+    "border-radius": { "$value": "{radius.md}" },
+    "border-width": { "$value": { "value": 1, "unit": "px" } },
+    "gap": { "$value": "{spacing-scale.2}" },
+    "icon-size": { "$value": "{component-size.md}" },
+    "min-height": { "$value": { "value": 50, "unit": "px" } },
+    "padding-horizontal": { "$value": "{spacing-scale.2}" },
+    "padding-vertical": { "$value": "{spacing-scale.1}" }
+  },
+  "font-family": {
+    "$type": "string",
+    "primary": { "$value": "System" },
+    "mono": { "$value": "Menlo" }
+  },
+  "text": {
+    "$description": "Apple-HIG-aligned type ramp for native editorial text.",
+    "large-title": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 34, "unit": "px" },
+        "lineHeight": { "value": 41, "unit": "px" },
+        "fontWeight": "{font-weight.bold}",
+        "letterSpacing": { "value": -0.6, "unit": "px" }
+      }
+    },
+    "title1": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 28, "unit": "px" },
+        "lineHeight": { "value": 34, "unit": "px" },
+        "fontWeight": "{font-weight.bold}",
+        "letterSpacing": { "value": -0.4, "unit": "px" }
+      }
+    },
+    "title2": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 22, "unit": "px" },
+        "lineHeight": { "value": 28, "unit": "px" },
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": { "value": -0.2, "unit": "px" }
+      }
+    },
+    "headline": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 17, "unit": "px" },
+        "lineHeight": { "value": 22, "unit": "px" },
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": { "value": -0.1, "unit": "px" }
+      }
+    },
+    "body": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 17, "unit": "px" },
+        "lineHeight": { "value": 24, "unit": "px" },
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": { "value": 0, "unit": "px" }
+      }
+    },
+    "callout": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 16, "unit": "px" },
+        "lineHeight": { "value": 22, "unit": "px" },
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": { "value": -0.1, "unit": "px" }
+      }
+    },
+    "subhead": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 15, "unit": "px" },
+        "lineHeight": { "value": 20, "unit": "px" },
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": { "value": 0, "unit": "px" }
+      }
+    },
+    "footnote": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 13, "unit": "px" },
+        "lineHeight": { "value": 18, "unit": "px" },
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": { "value": 0, "unit": "px" }
+      }
+    },
+    "caption1": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 12, "unit": "px" },
+        "lineHeight": { "value": 16, "unit": "px" },
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": { "value": 0, "unit": "px" }
+      }
+    },
+    "caption2": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 11, "unit": "px" },
+        "lineHeight": { "value": 14, "unit": "px" },
+        "fontWeight": "{font-weight.medium}",
+        "letterSpacing": { "value": 0.2, "unit": "px" }
+      }
+    },
+    "display": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 40, "unit": "px" },
+        "lineHeight": { "value": 44, "unit": "px" },
+        "fontWeight": "{font-weight.bold}",
+        "letterSpacing": { "value": -1.2, "unit": "px" }
+      }
+    },
+    "overline": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 11, "unit": "px" },
+        "lineHeight": { "value": 16, "unit": "px" },
+        "fontWeight": "{font-weight.medium}",
+        "letterSpacing": { "value": 0.8, "unit": "px" },
+        "textTransform": "uppercase"
+      }
+    },
+    "mono": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.mono}",
+        "fontSize": { "value": 12, "unit": "px" },
+        "lineHeight": { "value": 16, "unit": "px" },
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": { "value": 0, "unit": "px" }
+      }
+    }
+  }
+}

package/src/styles/tokens/style-dictionary.native.mjs

@@ -0,0 +1,23 @@
+/**
+ * Emits ONLY the native semantic/component tokens (native.tokens.json) as a
+ * typed module. Foundations are kept in the dictionary so references resolve,
+ * but are filtered out of the output — they already ship via
+ * foundations.generated.ts.
+ */
+export default {
+  source: ["src/styles/tokens/source/foundations.tokens.json", "src/styles/tokens/source/native.tokens.json"],
+  platforms: {
+    typescript: {
+      transformGroup: "js",
+      buildPath: "src/styles/tokens/generated/",
+      files: [
+        {
+          destination: "native.generated.ts",
+          format: "javascript/esm",
+          options: { minify: true },
+          filter: (token) => token.filePath.includes("native.tokens.json"),
+        },
+      ],
+    },
+  },
+};