@ponti-studios/ui 1.1.0 → 1.3.0

package/src/components/forms/slider.tsx

@@ -27,18 +27,21 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
   ) => (
     <SliderPrimitive.Root
       ref={ref}
-      className={cn("relative flex w-full touch-none items-center select-none", className)}
       {...props}
       onValueChange={(value) => onValueChange?.(Array.isArray(value) ? [...value] : [value])}
     >
-      <SliderPrimitive.Track className="bg-muted relative h-2 w-full grow overflow-hidden rounded-full">
-        <SliderPrimitive.Indicator className="bg-primary absolute h-full" />
-      </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb
-        aria-label={ariaLabel ?? "Slider"}
-        aria-labelledby={ariaLabelledby}
-        className="border-border focus-visible:border-ring focus-visible:bg-primary focus-visible:ring-ring bg-background block h-6 w-6 rounded-full border shadow-sm ring-1 ring-black/5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-      />
+      <SliderPrimitive.Control
+        className={cn("relative flex w-full touch-none items-center py-2 select-none", className)}
+      >
+        <SliderPrimitive.Track className="bg-muted relative h-2 w-full grow rounded-full">
+          <SliderPrimitive.Indicator className="bg-primary absolute h-full rounded-full" />
+          <SliderPrimitive.Thumb
+            aria-label={ariaLabel ?? "Slider"}
+            aria-labelledby={ariaLabelledby}
+            className="border-border focus-visible:border-ring focus-visible:bg-primary focus-visible:ring-ring bg-background z-10 block h-6 w-6 rounded-full border shadow-sm ring-1 ring-border/5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+          />
+        </SliderPrimitive.Track>
+      </SliderPrimitive.Control>
     </SliderPrimitive.Root>
   ),
 );

package/src/components/forms/switch.tsx

@@ -15,7 +15,10 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer data-checked:bg-primary data-unchecked:bg-input focus-visible:ring-ring inline-flex shrink-0 items-center rounded-full border border-transparent p-px focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-checked:justify-end data-unchecked:justify-start",
+        "peer inline-flex shrink-0 items-center rounded-full border border-transparent p-px",
+        "data-checked:bg-primary data-unchecked:bg-input data-checked:justify-end data-unchecked:justify-start",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
         size === "default" ? "h-[1.15rem] w-8" : "h-3.5 w-6",
         className,
       )}
@@ -25,7 +28,7 @@ function Switch({
         data-slot="switch-thumb"
         data-size={size}
         className={cn(
-          "pointer-events-none block rounded-full bg-white shadow-sm ring-1 ring-black/5 transition-all",
+          "pointer-events-none block rounded-full bg-background shadow-sm ring-1 ring-border/5 transition-all",
           size === "default" ? "size-4" : "size-3",
         )}
       />

package/src/components/forms/textarea.tsx

@@ -7,7 +7,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "placeholder:text-muted-foreground aria-invalid:ring-destructive/20 aria-invalid:border-destructive focus-visible:ring-ring border-input flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base transition-colors md:text-sm",
+        "placeholder:text-muted-foreground",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
         className,
       )}
       {...props}

package/src/components/layout/index.ts

@@ -1,7 +1,5 @@
 export { ScrollArea } from "./scroll-area";
 export type { ScrollAreaProps } from "./scroll-area";
-export { SearchFilterBar } from "../filters/search-filter-bar";
-export type { SearchFilterBarProps } from "../filters/search-filter-bar";
 export { SectionIntro } from "./section-intro";
 export type { SectionIntroProps } from "./section-intro";
 export { SurfacePanel } from "./surface-panel";

package/src/components/layout/section-intro.tsx

@@ -21,7 +21,7 @@ export function SectionIntro({ eyebrow, title, description, actions }: SectionIn
           </div>
         ) : null}
         <div className="space-y-3">
-          <h1 className="text-title-2 text-foreground font-semibold tracking-tight">{title}</h1>
+          <h1 className="text-2xl text-foreground font-semibold tracking-tight">{title}</h1>
           {description ? <p className="text-muted-foreground text-sm">{description}</p> : null}
         </div>
       </div>

package/src/components/layout/surface-panel.tsx

@@ -1,15 +1,23 @@
 import type { ComponentPropsWithoutRef, ElementType } from "react";
 
+import { cn } from "../../lib/utils";
+
 type SurfacePanelProps<T extends ElementType = "div"> = { as?: T } & Omit<
   ComponentPropsWithoutRef<T>,
-  "as" | "className"
+  "as"
 >;
 
 /** Rounded, bordered surface panel — a generic content container. */
 export function SurfacePanel<T extends ElementType = "div">({
   as,
+  className,
   ...props
 }: SurfacePanelProps<T>) {
   const Component = as ?? "div";
-  return <Component className="border-border bg-surface rounded-3xl border p-5" {...props} />;
+  return (
+    <Component
+      className={cn("border-border bg-card rounded-3xl border p-5", className)}
+      {...props}
+    />
+  );
 }

package/src/components/navigation/app-navigation.stories.tsx

@@ -121,7 +121,11 @@ export const WithCustomRouterLink: Story = {
 
           <Navigation.Action>
             <Button size="md" asChild>
-              <a href="/get-started" data-router-link="stand-in" onClick={(e) => e.preventDefault()}>
+              <a
+                href="/get-started"
+                data-router-link="stand-in"
+                onClick={(e) => e.preventDefault()}
+              >
                 Get started
               </a>
             </Button>

package/src/components/navigation/app-navigation.tsx

@@ -26,17 +26,26 @@ export interface NavigationRootProps {
  * shape) so `Navigation.Item`'s active state and `asChild` composition
  * behave identically in both places.
  */
-function NavigationRoot({ children, ariaLabel = "Primary navigation", className }: NavigationRootProps) {
+function NavigationRoot({
+  children,
+  ariaLabel = "Primary navigation",
+  className,
+}: NavigationRootProps) {
   const [mobileOpen, setMobileOpen] = React.useState(false);
 
   const items = React.Children.toArray(children);
-  const brand = items.find((child) => React.isValidElement(child) && child.type === NavigationBrand);
+  const brand = items.find(
+    (child) => React.isValidElement(child) && child.type === NavigationBrand,
+  );
   const rest = items.filter((child) => child !== brand);
 
   return (
     <header className="bg-background/95 supports-backdrop-filter:bg-background/60 sticky top-0 z-50 flex w-full justify-center border-b px-4 backdrop-blur">
       <nav
-        className={cn("flex min-h-14 w-full max-w-7xl items-center justify-between gap-6", className)}
+        className={cn(
+          "flex min-h-14 w-full max-w-7xl items-center justify-between gap-6",
+          className,
+        )}
         aria-label={ariaLabel}
       >
         <div className="flex min-w-0 items-center">{brand}</div>
@@ -108,7 +117,13 @@ export type NavigationItemProps = NavigationItemOwnProps &
   Omit<ComponentPropsWithoutRef<"a">, keyof NavigationItemOwnProps>;
 
 /** A single nav link, wrapped in `<li>`. Auto-closes the mobile Sheet on click when rendered there. */
-function NavigationItem({ active = false, asChild = false, className, children, ...props }: NavigationItemProps) {
+function NavigationItem({
+  active = false,
+  asChild = false,
+  className,
+  children,
+  ...props
+}: NavigationItemProps) {
   const isMobile = React.useContext(MobileMenuContext);
   const itemClassName = cn(
     "inline-flex h-9 max-h-9 shrink-0 items-center px-3 py-2 text-sm font-medium hover:bg-muted hover:text-muted-foreground data-[active]:font-semibold data-[active]:text-foreground",

package/src/components/navigation/tabs.tsx

@@ -25,7 +25,10 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "text-foreground focus-visible:ring-ring data-active:bg-background data-active:text-foreground data-active:border-border flex flex-1 items-center justify-center gap-2 rounded-full px-3 py-2 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-active:border",
+        "text-foreground flex flex-1 items-center justify-center gap-2 rounded-full px-3 py-2 text-sm font-medium whitespace-nowrap transition-all",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+        "data-active:ring-1 data-active:ring-inset data-active:bg-background data-active:text-foreground data-active:ring-border",
         className,
       )}
       {...props}

package/src/components/overlays/command.tsx

@@ -2,6 +2,7 @@ import { Combobox as CommandPrimitive } from "@base-ui/react/combobox";
 import { SearchIcon } from "lucide-react";
 import * as React from "react";
 
+import { cn } from "../../lib/utils";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
 
 function Command({
@@ -14,7 +15,10 @@ function Command({
   return (
     <div
       data-slot="command"
-      className={`bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md ${className ?? ""}`}
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className,
+      )}
     >
       <CommandPrimitive.Root {...props}>{children}</CommandPrimitive.Root>
     </div>
@@ -63,7 +67,11 @@ function CommandInput({
       <CommandPrimitive.Input
         data-slot="command-input"
         aria-label={ariaLabel}
-        className={`placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 ${className ?? ""}`}
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
         onChange={(event) => {
           onChange?.(event);
           onValueChange?.(event.currentTarget.value);
@@ -74,14 +82,18 @@ function CommandInput({
   );
 }
 
-function CommandList({ children, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+function CommandList({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
   if (typeof children === "function") {
     return (
       <CommandPrimitive.List
         data-slot="command-list"
         aria-label="Command results"
         tabIndex={0}
-        className="max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto"
+        className={cn("max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
         {...props}
       >
         {children}
@@ -103,7 +115,7 @@ function CommandList({ children, ...props }: React.ComponentProps<typeof Command
         data-slot="command-list"
         aria-label="Command results"
         tabIndex={0}
-        className="max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto"
+        className={cn("max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
         {...props}
       >
         {listChildren}
@@ -113,11 +125,14 @@ function CommandList({ children, ...props }: React.ComponentProps<typeof Command
   );
 }
 
-function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
-      className="py-6 text-center text-sm"
+      className={cn("py-6 text-center text-sm", className)}
       {...props}
     />
   );
@@ -132,7 +147,7 @@ function CommandGroup({
   return (
     <CommandPrimitive.Group
       data-slot="command-group"
-      className={`text-foreground overflow-hidden p-1 ${className ?? ""}`}
+      className={cn("text-foreground overflow-hidden p-1", className)}
       {...props}
     >
       {heading ? (
@@ -153,7 +168,11 @@ function CommandItem({ className, onSelect, onClick, ...props }: CommandItemProp
   return (
     <CommandPrimitive.Item
       data-slot="command-item"
-      className={`data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 ${className ?? ""}`}
+      className={cn(
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none",
+        "data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
       onClick={(event) => {
         onClick?.(event);
         onSelect?.();
@@ -168,24 +187,30 @@ function CommandSeparator({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="command-separator"
       aria-hidden="true"
-      className={`bg-border -mx-1 h-px ${className ?? ""}`}
+      className={cn("bg-border -mx-1 h-px", className)}
       {...props}
     />
   );
 }
 
-function CommandShortcut(props: React.ComponentProps<"span">) {
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="command-shortcut"
-      className="text-muted-foreground ml-auto text-xs tracking-widest"
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
   );
 }
 
-function CommandListLoading(props: React.ComponentProps<"div">) {
-  return <div data-slot="command-list-loading" className="py-6 text-center text-sm" {...props} />;
+function CommandListLoading({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="command-list-loading"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  );
 }
 
 export {

package/src/components/overlays/popover.stories.tsx

@@ -25,12 +25,24 @@ export const Default: Story = {
         </div>
         <div className="grid gap-4 pt-4">
           <div className="grid grid-cols-3 items-center gap-4">
-            <label className="text-sm">Width</label>
-            <input className="col-span-2 h-8 rounded border px-2 text-sm" defaultValue="100%" />
+            <label htmlFor="popover-width" className="text-sm">
+              Width
+            </label>
+            <input
+              id="popover-width"
+              className="col-span-2 h-8 rounded border px-2 text-sm"
+              defaultValue="100%"
+            />
           </div>
           <div className="grid grid-cols-3 items-center gap-4">
-            <label className="text-sm">Height</label>
-            <input className="col-span-2 h-8 rounded border px-2 text-sm" defaultValue="25px" />
+            <label htmlFor="popover-height" className="text-sm">
+              Height
+            </label>
+            <input
+              id="popover-height"
+              className="col-span-2 h-8 rounded border px-2 text-sm"
+              defaultValue="25px"
+            />
           </div>
         </div>
       </PopoverContent>

package/src/components/primitives/badge.tsx

@@ -12,7 +12,7 @@ const badgeVariants = cva(
         secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80",
         destructive: "bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90",
         outline: "border-border text-foreground [a&]:hover:bg-muted",
-        ghost: "[a&]:[a&]: [a&]: [a&]:",
+        ghost: "bg-transparent text-foreground [a&]:hover:bg-muted",
         link: "text-foreground underline-offset-4 [a&]:hover:underline",
         /** Quiet metadata marker for real reference IDs (case/appointment/feed
          * numbers) — never for decorative sequence markers. */

package/src/components/primitives/button.tsx

@@ -6,7 +6,12 @@ import { cn } from "../../lib/utils";
 import { Spinner } from "../feedback/spinner";
 
 const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  [
+    "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent font-medium transition-colors outline-none",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  ],
   {
     variants: {
       variant: {

package/src/hooks/use-derived-filter-state.ts

@@ -53,9 +53,7 @@ export function useDerivedFilterState<T extends Record<string, FilterConfig>>({
       .filter(([, v]) => v !== "")
       .map(([key, v]) => ({
         id: key,
-        label: fields[key]?.label
-          ? fields[key].label!(v)
-          : `${key}: ${v}`,
+        label: fields[key]?.label ? fields[key].label!(v) : `${key}: ${v}`,
         onRemove: () => setValue(key, ""),
       }));
   }, [values, fields, setValue]);

package/src/hooks/use-filter-state.ts

@@ -18,8 +18,7 @@ export function useFilterState<T extends Record<string, unknown>>(
   const setFilters = useCallback(
     (newFilters: T | ((prev: T) => T)) => {
       setFiltersState((prev) => {
-        const updatedFilters =
-          typeof newFilters === "function" ? newFilters(prev) : newFilters;
+        const updatedFilters = typeof newFilters === "function" ? newFilters(prev) : newFilters;
 
         if (debounceMs && debounceMs > 0) {
           if (debounceTimerRef.current) {

package/src/native/card.tsx

@@ -4,7 +4,9 @@ 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} />;
+  return (
+    <View className={cn("bg-card gap-4 rounded border border-border p-4", className)} {...props} />
+  );
 }
 
 function CardHeader({ className, ...props }: ViewProps) {

package/src/native/index.ts

@@ -6,23 +6,33 @@
  * code, so web consumers never pull React Native into their graph and native
  * consumers never pull in react-dom.
  */
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card";
+export { IconButton } from "./icon-button";
+export { ListRow } from "./list-row";
 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 { useColorMode, useThemeColors } from "./use-theme-colors";
 
 export {
-  typography as nativeTypography,
-  spacing as nativeSpacing,
-  screenMargin as nativeScreenMargin,
-  componentSize as nativeComponentSize,
   borderRadius as nativeBorderRadius,
-  streamItem as nativeStreamItem,
+  componentSize as nativeComponentSize,
   fontFamily as nativeFontFamily,
-  type TypographyVariant,
-  type SpacingToken,
-  type ComponentSizeToken,
+  screenMargin as nativeScreenMargin,
+  spacing as nativeSpacing,
+  streamItem as nativeStreamItem,
+  typography as nativeTypography,
   type BorderRadiusToken,
+  type ComponentSizeToken,
+  type SpacingToken,
+  type TypographyVariant,
 } from "../styles/tokens/normalize-native";
+export { motion as nativeMotion } from "../styles/tokens";

package/src/native/list-row.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import { Pressable, type StyleProp, Text, type TextStyle, View } from "react-native";
+import { useCSSVariable } from "uniwind";
+
+interface ListRowProps {
+  accessibilityLabel: string;
+  actionTestID?: string;
+  eyebrow?: string;
+  leading?: ReactNode;
+  onLongPress?: () => void;
+  onPress: () => void;
+  subtitle?: string | null;
+  testID?: string;
+  title: string;
+  titleStyle?: StyleProp<TextStyle>;
+  trailing?: ReactNode;
+}
+
+function ListRow({
+  accessibilityLabel,
+  actionTestID,
+  eyebrow,
+  leading,
+  onLongPress,
+  onPress,
+  subtitle,
+  testID,
+  title,
+  titleStyle,
+  trailing,
+}: ListRowProps) {
+  const [muted] = useCSSVariable(["--color-muted"]) as string[];
+
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      onLongPress={onLongPress}
+      onPress={onPress}
+      className="flex-row items-center gap-3 min-h-14 border-b border-border px-4 py-2"
+      style={({ pressed }) => pressed && { backgroundColor: muted }}
+      testID={testID ?? actionTestID}
+    >
+      {leading ? <View className="items-center justify-center w-6">{leading}</View> : null}
+      <View className="flex-1 gap-0.5 min-w-0">
+        {eyebrow ? (
+          <Text className="text-caption2 text-muted-foreground tracking-[0.2]">{eyebrow}</Text>
+        ) : null}
+        <Text numberOfLines={2} className="text-body text-foreground" style={titleStyle}>
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            className="text-caption1 text-muted-foreground"
+          >
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+      {trailing ? <View className="items-center justify-center">{trailing}</View> : null}
+    </Pressable>
+  );
+}
+
+export { ListRow };

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

@@ -223,16 +223,44 @@ export default {
     icon: "0.375rem",
   },
   "stream-item": {
-    "border-radius": "0.375rem",
+    "border-radius": "0rem",
     "border-width": "1px",
-    gap: "0.5rem",
-    "icon-size": "1.5rem",
-    "min-height": "50px",
-    "padding-horizontal": "0.5rem",
-    "padding-vertical": "0.25rem",
+    gap: "0.75rem",
+    "icon-size": "1.25rem",
+    "min-height": "3.5rem",
+    "padding-horizontal": "1rem",
+    "padding-vertical": "0.5rem",
   },
   "font-family": {
     primary: "System",
     mono: "Menlo",
   },
+  motion: {
+    duration: {
+      instant: "0ms",
+      quick: "150ms",
+      standard: "300ms",
+      deliberate: "500ms",
+    },
+    easing: {
+      enter: [0, 0, 0.2, 1],
+      exit: [0.4, 0, 1, 1],
+      inOut: [0.4, 0, 0.2, 1],
+    },
+    distance: {
+      rowEnter: "0.5rem",
+      sceneReveal: "2rem",
+    },
+    opacity: {
+      hidden: 0,
+      visible: 1,
+      disabled: 0.5,
+    },
+    interruption: {
+      policy: "cancel-and-settle",
+    },
+    reducedMotion: {
+      policy: "replace-transform-with-opacity",
+    },
+  },
 };

package/src/styles/tokens/index.ts

@@ -1,6 +1,7 @@
 import darkTokens from "./generated/dark.colors.generated";
 import foundations from "./generated/foundations.generated";
 import lightTokens from "./generated/light.colors.generated";
+import nativeTokens from "./generated/native.generated";
 
 const toPixels = (value: string) => {
   if (value.endsWith("rem")) return Number.parseFloat(value) * 16;
@@ -62,6 +63,7 @@ export const transitionDurations = Object.fromEntries(
   Object.entries(foundations.duration).map(([key, value]) => [key, toMilliseconds(value)]),
 ) as Record<keyof typeof foundations.duration, number>;
 export const animations = foundations.animate;
+export const motion = nativeTokens.motion;
 
 export type RadiusToken = keyof typeof radii;
 export type TextSizeToken = keyof typeof textSizes;

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

@@ -17,7 +17,9 @@ const makeFlat = (raw: Record<string, unknown>) => ({
   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" } : {}),
+  ...(raw.textTransform
+    ? { textTransform: raw.textTransform as "uppercase" | "lowercase" | "capitalize" | "none" }
+    : {}),
 });
 
 const generated = nativeGenerated as unknown as {
@@ -62,13 +64,13 @@ 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>;
+) 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>;
+) as Record<keyof (typeof generated)["border-radius"], number>;
 
 export type BorderRadiusToken = keyof typeof borderRadius;