@vvedantb/native-ui 0.2.1 → 0.3.13

package/src/marketing/pricing.ts

@@ -0,0 +1,76 @@
+// Plan types and pure helpers for `PricingModal`, the same shapes and rules as
+// the web `PricingModal` multi-plan layout. No React Native imports.
+import type { ReactNode } from "react";
+import type { AppName } from "../brand/svg";
+import { V_PRO_APP_BENEFITS, type PricingPlanAppBenefit } from "../brand/vProAppBenefits";
+
+export type PricingModalPeriod = "month" | "year";
+
+export type PricingPlanBenefit = {
+  label: ReactNode;
+  /** `"check"` (default) or an app mark. */
+  icon?: "check" | AppName;
+  /** Dimmed row. */
+  muted?: boolean;
+};
+
+export type PricingPlan = {
+  id: string;
+  name: string;
+  /** Display strings per month, for example `{ month: "$10", year: "$8" }`. The yearly price is still per month. */
+  price: { month: string; year: string };
+  /** Default "Get started". */
+  ctaLabel?: string;
+  /** Line above the highlight, for example "Everything in Free, and:". */
+  intro?: ReactNode;
+  /** Large title with small text under it. */
+  highlight?: { title: string; description: string };
+  benefits?: readonly PricingPlanBenefit[];
+  /** Grouped per app, after `benefits`. The featured plan defaults to `V_PRO_APP_BENEFITS`. */
+  appBenefits?: readonly PricingPlanAppBenefit[];
+  /** The plan the user is on: the button reads "Current plan" and is disabled. */
+  current?: boolean;
+  /** Subtle ring on the card. `highlighted` is an alias. */
+  featured?: boolean;
+  highlighted?: boolean;
+  /** Text after the price. Default "/month". */
+  periodSuffix?: string;
+};
+
+/** `featured`, else `highlighted` (the web rule: `featured ?? highlighted`). */
+export function isEmphasised(plan: PricingPlan): boolean {
+  return Boolean(plan.featured ?? plan.highlighted);
+}
+
+/** The plan's app groups: its own, else `V_PRO_APP_BENEFITS` for the emphasised plan, else none. */
+export function planAppBenefits(
+  plan: PricingPlan,
+): readonly PricingPlanAppBenefit[] | undefined {
+  return plan.appBenefits ?? (isEmphasised(plan) ? V_PRO_APP_BENEFITS : undefined);
+}
+
+/** Stable sort: the current app's group first, the rest in their order. */
+export function sortAppBenefits(
+  groups: readonly PricingPlanAppBenefit[],
+  currentApp?: AppName,
+): PricingPlanAppBenefit[] {
+  return [...groups].sort(
+    (a, b) => Number(b.app === currentApp) - Number(a.app === currentApp),
+  );
+}
+
+/** Label, variant and state of a plan's button, as on the web. */
+export function planButton(plan: PricingPlan): {
+  label: string;
+  variant: "default" | "secondary" | "outline";
+  disabled: boolean;
+} {
+  if (plan.current) {
+    return { label: "Current plan", variant: "outline", disabled: true };
+  }
+  return {
+    label: plan.ctaLabel ?? "Get started",
+    variant: isEmphasised(plan) ? "default" : "secondary",
+    disabled: false,
+  };
+}

package/src/palette.ts

@@ -0,0 +1,43 @@
+/**
+ * Web semantic colours for React Native, converted from `@vvedantb/ui`
+ * `tokens.css` (oklch → sRGB hex, clipped to sRGB). `tokens.ts` holds the
+ * neutrals the native app ships; these are the colours it lacks (primary,
+ * danger, success, warning, overlay, segment, field placeholder, backdrop,
+ * dialog description).
+ *
+ * A test in this package converts `tokens.css` and fails when a value here
+ * drifts, so change `tokens.css` first and then this file.
+ */
+export const palette = {
+  /** `--accent` (web `primary`): near-black in light, near-white in dark. */
+  primary: { light: "#181818", dark: "#fcfcfc" },
+  primaryForeground: { light: "#fcfcfc", dark: "#181818" },
+  danger: { light: "#ff373c", dark: "#db3b3e" },
+  dangerForeground: { light: "#fcfcfc", dark: "#fcfcfc" },
+  success: { light: "#15c964", dark: "#15c964" },
+  successForeground: { light: "#161917", dark: "#161917" },
+  warning: { light: "#f5a523", dark: "#f7b750" },
+  warningForeground: { light: "#1a1815", dark: "#1a1815" },
+  /** `--default` (web `secondary`): neutral control fill. */
+  default: { light: "#ebebeb", dark: "#272727" },
+  defaultForeground: { light: "#181818", dark: "#fcfcfc" },
+  overlay: { light: "#ffffff", dark: "#181818" },
+  overlayForeground: { light: "#181818", dark: "#fcfcfc" },
+  segment: { light: "#ffffff", dark: "#474747" },
+  segmentForeground: { light: "#181818", dark: "#fcfcfc" },
+  surfaceTertiary: { light: "#eaeaea", dark: "#282627" },
+  fieldPlaceholder: { light: "#727272", dark: "#a0a0a0" },
+  backdrop: { light: "rgba(0, 0, 0, 0.5)", dark: "rgba(0, 0, 0, 0.6)" },
+  /** Web `DialogDescription` text: `--overlay-foreground` mixed 72% into `--overlay` (oklch), for 4.5:1 on the overlay. */
+  overlayMuted: { light: "#505050", dark: "#b5b5b5" },
+  /** Fill of the web destructive `Button` (`oklch(47.2% 0.195 25.7)`), the same in both schemes. */
+  destructive: "#af0015",
+} as const;
+
+export type Palette = typeof palette;
+
+/** `#rrggbb` with an alpha, as `rgba(...)`. For tints such as the badge fills (web `bg-danger/12`). */
+export function withAlpha(hex: string, alpha: number): string {
+  const n = Number.parseInt(hex.slice(1, 7), 16);
+  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
+}

package/src/primitives/button.tsx

@@ -47,7 +47,9 @@ const buttonVariants = cva(
   },
 );
 
-const buttonTextVariants = cva("text-sm font-medium text-foreground", {
+// No weight: a class context cannot carry the `typeStyle` that a face class
+// needs, so `Button` sets the medium face and its weight on its label.
+const buttonTextVariants = cva("text-sm text-foreground", {
   variants: {
     variant: {
       default: "text-primary-foreground",

package/src/primitives/card.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { View } from "react-native";
 import { Text, TextClassContext } from "./text";
 import { cn } from "../cn";
+import { typeStyle } from "../controlStyles";
 
 type CardViewProps = React.ComponentPropsWithoutRef<typeof View> & {
   className?: string;
@@ -40,13 +41,15 @@ const CardHeader = React.forwardRef<
 const CardTitle = React.forwardRef<
   React.ElementRef<typeof Text>,
   React.ComponentPropsWithoutRef<typeof Text> & { className?: string }
->(({ className, ...props }, ref) => {
+>(({ className, style, ...props }, ref) => {
+  // The web `font-semibold`: the semibold face, with its weight as a style.
   return (
     <Text
       ref={ref}
       role="heading"
       aria-level={3}
-      className={cn("font-semibold leading-none", className)}
+      className={cn("font-instrument-sans-semibold leading-none", className)}
+      style={[typeStyle("semibold"), style]}
       {...props}
     />
   );

package/src/primitives/input.tsx

@@ -1,16 +1,24 @@
 import * as React from "react";
 import { Platform, TextInput } from "react-native";
 import { cn } from "../cn";
+import { palette } from "../palette";
+import { useScheme } from "../useScheme";
 
 type InputProps = React.ComponentPropsWithoutRef<typeof TextInput> & {
   className?: string;
 };
 
 const Input = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, placeholderTextColor, ...props }, ref) => {
+    const scheme = useScheme();
     return (
       <TextInput
         ref={ref}
+        // A prop, not a `placeholder:` class: on native NativeWind turns that
+        // class into `placeholderTextColor`, which beats the prop. The old
+        // `placeholder:text-muted-foreground/50` was the light grey at half
+        // opacity in apps that nest `dark` under `muted-foreground`.
+        placeholderTextColor={placeholderTextColor ?? palette.fieldPlaceholder[scheme]}
         className={cn(
           "flex w-full flex-row items-center rounded-lg border-0 bg-secondary px-3 py-2 text-base text-foreground",
           props.editable === false &&
@@ -22,7 +30,6 @@ const Input = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
             ),
           Platform.select({
             web: "outline-none transition-[color,box-shadow] md:text-sm",
-            native: "placeholder:text-muted-foreground/50",
           }),
           className,
         )}

package/src/primitives/native-only-animated-view.tsx

@@ -1,5 +1,6 @@
 import { Platform, View, type ViewProps } from "react-native";
 import Animated, { type AnimatedProps } from "react-native-reanimated";
+import { useReduceMotion } from "../useReduceMotion";
 
 type NativeOnlyAnimatedViewProps = ViewProps & {
   entering?: AnimatedProps<ViewProps>["entering"];
@@ -7,6 +8,11 @@ type NativeOnlyAnimatedViewProps = ViewProps & {
   layout?: AnimatedProps<ViewProps>["layout"];
 };
 
+/**
+ * `Animated.View` with layout animations on iOS and Android, a plain `View`
+ * on web. With Reduce Motion on, it drops the animations: sheets, toasts and
+ * the `Select` popover appear and leave in place.
+ */
 function NativeOnlyAnimatedView({
   children,
   entering,
@@ -14,15 +20,16 @@ function NativeOnlyAnimatedView({
   layout,
   ...props
 }: NativeOnlyAnimatedViewProps) {
+  const reduceMotion = useReduceMotion();
   if (Platform.OS === "web") {
     return <View {...props}>{children}</View>;
   }
 
   return (
     <Animated.View
-      entering={entering}
-      exiting={exiting}
-      layout={layout}
+      entering={reduceMotion ? undefined : entering}
+      exiting={reduceMotion ? undefined : exiting}
+      layout={reduceMotion ? undefined : layout}
       {...props}
     >
       {children}

package/src/primitives/overlay.tsx

@@ -0,0 +1,179 @@
+import * as Slot from "@rn-primitives/slot";
+import {
+  createContext,
+  useContext,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Pressable,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { palette } from "../palette";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { useControllableState } from "./use-controllable-state";
+
+type OverlayContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+};
+
+const OverlayContext = createContext<OverlayContextValue | null>(null);
+
+export function useOverlay(part: string): OverlayContextValue {
+  const context = useContext(OverlayContext);
+  if (!context) {
+    throw new Error(`${part} must be inside its Dialog, AlertDialog or Sheet root.`);
+  }
+  return context;
+}
+
+export type OverlayRootProps = {
+  /** Open state when the parent controls it. */
+  open?: boolean;
+  /** Initial open state when `open` is not set. Default `false`. */
+  defaultOpen?: boolean;
+  /** Called with the next open state (trigger, close, backdrop, Android back). */
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+};
+
+/** Root shared by `Dialog`, `AlertDialog` and `Sheet`: holds the open state, renders no view. */
+export function OverlayRoot({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+}: OverlayRootProps) {
+  const [value, setValue] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+  return (
+    <OverlayContext.Provider value={{ open: value, setOpen: setValue }}>
+      {children}
+    </OverlayContext.Provider>
+  );
+}
+
+export type OverlayPressableProps = ComponentPropsWithoutRef<typeof Pressable> & {
+  /** Merge the press handler into the single child (for example a `Button`) instead of wrapping it. */
+  asChild?: boolean;
+};
+
+function OverlayPressable({
+  asChild,
+  next,
+  part,
+  onPress,
+  ...props
+}: OverlayPressableProps & { next: boolean; part: string }) {
+  const { setOpen } = useOverlay(part);
+  const Component = asChild ? Slot.Pressable : Pressable;
+  return (
+    <Component
+      accessibilityRole="button"
+      {...props}
+      onPress={(event: GestureResponderEvent) => {
+        onPress?.(event);
+        setOpen(next);
+      }}
+    />
+  );
+}
+
+export function OverlayTrigger(props: OverlayPressableProps & { part: string }) {
+  return <OverlayPressable {...props} next />;
+}
+
+export function OverlayClose(props: OverlayPressableProps & { part: string }) {
+  return <OverlayPressable {...props} next={false} />;
+}
+
+/**
+ * RN `Modal` with a tinted backdrop, safe-area padding and keyboard avoidance.
+ * `placement="center"` centres the child (dialogs) inside the insets on every
+ * side; `"bottom"` pins it to the bottom edge (sheets), which pad their own
+ * bottom inset. The backdrop closes the overlay only when `dismissible`;
+ * Android back and the VoiceOver escape gesture always close it, as Escape
+ * does on the web. With Reduce Motion on, the fade is off.
+ */
+export function OverlayModal({
+  part,
+  placement,
+  dismissible,
+  children,
+}: {
+  part: string;
+  placement: "center" | "bottom";
+  dismissible: boolean;
+  children: ReactNode;
+}) {
+  const { open, setOpen } = useOverlay(part);
+  const scheme = useScheme();
+  const insets = useSafeAreaInsets();
+  const reduceMotion = useReduceMotion();
+  const close = () => setOpen(false);
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType={reduceMotion ? "none" : "fade"}
+      statusBarTranslucent
+      onRequestClose={close}
+    >
+      {/* Android too: a modal window with `statusBarTranslucent` may not
+          resize for the keyboard, which then covers the fields. The padding
+          is the measured overlap, so it drops to 0 where the window does
+          resize. */}
+      <KeyboardAvoidingView behavior="padding" style={styles.fill}>
+        <Pressable
+          testID={`${part}-backdrop`}
+          accessible={dismissible}
+          accessibilityRole="button"
+          accessibilityLabel="Close"
+          disabled={!dismissible}
+          onPress={close}
+          style={[StyleSheet.absoluteFill, { backgroundColor: palette.backdrop[scheme] }]}
+        />
+        <View
+          pointerEvents="box-none"
+          onAccessibilityEscape={close}
+          style={[
+            styles.fill,
+            placement === "bottom"
+              ? {
+                  justifyContent: "flex-end",
+                  paddingTop: insets.top + 16,
+                  paddingLeft: insets.left,
+                  paddingRight: insets.right,
+                }
+              : {
+                  justifyContent: "center",
+                  paddingTop: insets.top + 16,
+                  paddingBottom: insets.bottom + 16,
+                  paddingLeft: insets.left + 16,
+                  paddingRight: insets.right + 16,
+                },
+          ]}
+        >
+          {children}
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+});

package/src/primitives/select.tsx

@@ -6,13 +6,16 @@ import {
   ChevronUpIcon,
 } from "lucide-react-native";
 import * as React from "react";
-import { Platform, ScrollView, StyleSheet, View } from "react-native";
+import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
 import { FadeIn, FadeOut } from "react-native-reanimated";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { NativeOnlyAnimatedView } from "./native-only-animated-view";
 import { TextClassContext } from "./text";
 import { LiquidGlass } from "../LiquidGlass";
 import { cn } from "../cn";
+import { textStyle, typeStyle } from "../controlStyles";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
 
 type Option = SelectPrimitive.Option;
 
@@ -30,14 +33,18 @@ type SelectValueProps = React.ComponentPropsWithoutRef<
 const SelectValue = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Value>,
   SelectValueProps
->(({ className, ...props }, ref) => {
-  return (
-    <SelectPrimitive.Value
-      ref={ref}
-      className={cn("line-clamp-1 text-sm text-foreground", className)}
-      {...props}
-    />
-  );
+>(({ className, style, ...props }, ref) => {
+  const classes = cn("line-clamp-1 text-sm text-foreground", className);
+  if (Platform.OS === "web") {
+    // Radix `Select.Value` drops `className` and `style`, so the placeholder
+    // took the page colour. Its span inherits them from this Text instead.
+    return (
+      <Text className={classes} style={style}>
+        <SelectPrimitive.Value ref={ref} {...props} />
+      </Text>
+    );
+  }
+  return <SelectPrimitive.Value ref={ref} className={classes} style={style} {...props} />;
 });
 
 type SelectTriggerProps = React.ComponentPropsWithoutRef<
@@ -51,6 +58,7 @@ const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   SelectTriggerProps
 >(({ className, children, size = "default", disabled, ...props }, ref) => {
+  const scheme = useScheme();
   return (
     <SelectPrimitive.Trigger
       ref={ref}
@@ -64,7 +72,7 @@ const SelectTrigger = React.forwardRef<
       {...props}
     >
       <>{children}</>
-      <ChevronDown size={16} color="#737373" />
+      <ChevronDown size={16} color={tokens.color.muted[scheme]} />
     </SelectPrimitive.Trigger>
   );
 });
@@ -155,6 +163,7 @@ const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   SelectItemProps
 >(({ className, disabled, ...props }, ref) => {
+  const scheme = useScheme();
   return (
     <SelectPrimitive.Item
       ref={ref}
@@ -168,10 +177,14 @@ const SelectItem = React.forwardRef<
     >
       <View className="absolute right-2 size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <Check size={16} color="#737373" />
+          <Check size={16} color={tokens.color.muted[scheme]} />
         </SelectPrimitive.ItemIndicator>
       </View>
-      <SelectPrimitive.ItemText className="select-none text-sm font-instrument-sans-medium text-foreground" />
+      <SelectPrimitive.ItemText
+        className="select-none text-sm font-instrument-sans-medium"
+        // One object: on web the item text is a Radix slot, which drops arrays.
+        style={{ ...textStyle("foreground", scheme), ...typeStyle("medium") }}
+      />
     </SelectPrimitive.Item>
   );
 });

package/src/primitives/switch.tsx

@@ -1,6 +1,6 @@
 import * as SwitchPrimitives from "@rn-primitives/switch";
 import * as React from "react";
-import { Platform } from "react-native";
+import { Platform, type ViewStyle } from "react-native";
 import { cn } from "../cn";
 
 type SwitchProps = React.ComponentPropsWithoutRef<
@@ -8,8 +8,12 @@ type SwitchProps = React.ComponentPropsWithoutRef<
 > & {
   className?: string;
   thumbClassName?: string;
-  onColor?: string;
-  offColor?: string;
+  /**
+   * Track and thumb colours. Flat objects: on web each part is a Radix slot,
+   * which spreads `style`, so these are the only styles applied there.
+   */
+  trackStyle?: ViewStyle;
+  thumbStyle?: ViewStyle;
 };
 
 const Switch = React.forwardRef<
@@ -20,8 +24,8 @@ const Switch = React.forwardRef<
     {
       className,
       thumbClassName,
-      onColor,
-      offColor,
+      trackStyle,
+      thumbStyle,
       checked,
       style,
       disabled,
@@ -30,16 +34,10 @@ const Switch = React.forwardRef<
     ref,
   ) => {
     const isChecked = Boolean(checked);
-    const trackColor =
-      Platform.OS !== "web" && (onColor || offColor)
-        ? { backgroundColor: isChecked ? onColor : offColor }
-        : null;
     const resolvedStyle =
       Platform.OS === "web" || typeof style === "function"
-        ? undefined
-        : trackColor
-          ? [trackColor, style]
-          : style;
+        ? trackStyle
+        : [trackStyle, style];
 
     return (
       <SwitchPrimitives.Root
@@ -59,6 +57,7 @@ const Switch = React.forwardRef<
         {...props}
       >
         <SwitchPrimitives.Thumb
+          style={thumbStyle}
           className={cn(
             "h-4 w-4 rounded-full bg-background transition-transform",
             isChecked

package/src/primitives/text.tsx

@@ -3,6 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { Platform, Text as RNText, type Role } from "react-native";
 import { cn } from "../cn";
+import { typeStyle } from "../controlStyles";
 
 const textVariants = cva(
   cn(
@@ -16,27 +17,27 @@ const textVariants = cva(
       variant: {
         default: "",
         h1: cn(
-          "text-4xl font-extrabold tracking-tight",
+          "text-4xl font-instrument-sans-semibold tracking-tight",
           Platform.select({ web: "scroll-m-20" }),
         ),
         h2: cn(
-          "text-3xl font-semibold tracking-tight border-border border-b pb-2",
+          "text-3xl font-instrument-sans-semibold tracking-tight border-border border-b pb-2",
           Platform.select({ web: "scroll-m-20" }),
         ),
         h3: cn(
-          "text-2xl font-semibold tracking-tight",
+          "text-2xl font-instrument-sans-semibold tracking-tight",
           Platform.select({ web: "scroll-m-20" }),
         ),
         h4: cn(
-          "text-xl font-semibold tracking-tight",
+          "text-xl font-instrument-sans-semibold tracking-tight",
           Platform.select({ web: "scroll-m-20" }),
         ),
         p: "leading-7",
         blockquote: "border-l-2 border-border pl-4 italic",
-        code: "bg-muted rounded px-[0.3rem] py-[0.2rem] text-sm font-semibold",
+        code: "bg-muted rounded px-[0.3rem] py-[0.2rem] text-sm font-instrument-sans-semibold",
         lead: "text-xl text-muted-foreground",
-        large: "text-lg font-semibold",
-        small: "text-sm font-medium",
+        large: "text-lg font-instrument-sans-semibold",
+        small: "text-sm font-instrument-sans-medium",
         muted: "text-sm text-muted-foreground",
       },
     },
@@ -65,6 +66,20 @@ const ARIA_LEVEL: Partial<Record<TextVariant, string>> = {
   h4: "4",
 };
 
+// The weight of each variant's `font-instrument-sans-*` class, set as a style
+// beside it (`typeStyle`): where an app maps every one of those classes to one
+// family, the class alone draws Regular. Headings are semibold, as the web
+// titles; `h1` was `font-extrabold` before 0.3.13.
+const WEIGHT: Partial<Record<TextVariant, ReturnType<typeof typeStyle>>> = {
+  h1: typeStyle("semibold"),
+  h2: typeStyle("semibold"),
+  h3: typeStyle("semibold"),
+  h4: typeStyle("semibold"),
+  code: typeStyle("semibold"),
+  large: typeStyle("semibold"),
+  small: typeStyle("medium"),
+};
+
 const TextClassContext = React.createContext<string | undefined>(undefined);
 
 type TextProps = React.ComponentPropsWithoutRef<typeof RNText> &
@@ -74,9 +89,10 @@ type TextProps = React.ComponentPropsWithoutRef<typeof RNText> &
   };
 
 const Text = React.forwardRef<React.ElementRef<typeof RNText>, TextProps>(
-  ({ className, asChild = false, variant = "default", ...props }, ref) => {
+  ({ className, asChild = false, variant = "default", style, ...props }, ref) => {
     const textClass = React.useContext(TextClassContext);
     const Component = asChild ? Slot.Text : RNText;
+    const weight = variant ? WEIGHT[variant] : undefined;
 
     return (
       <Component
@@ -84,6 +100,7 @@ const Text = React.forwardRef<React.ElementRef<typeof RNText>, TextProps>(
         className={cn(textVariants({ variant }), textClass, className)}
         role={variant ? ROLE[variant] : undefined}
         aria-level={variant ? ARIA_LEVEL[variant] : undefined}
+        style={weight ? [weight, style] : style}
         {...props}
       />
     );

package/src/primitives/use-controllable-state.ts

@@ -0,0 +1,24 @@
+import { useCallback, useState } from "react";
+
+/** `value` when the parent controls it, else local state seeded by `defaultValue`. `onChange` fires either way. */
+export function useControllableState<T>({
+  value,
+  defaultValue,
+  onChange,
+}: {
+  value: T | undefined;
+  defaultValue: T;
+  onChange?: (next: T) => void;
+}) {
+  const [local, setLocal] = useState(defaultValue);
+  const controlled = value !== undefined;
+  const current = controlled ? value : local;
+  const setValue = useCallback(
+    (next: T) => {
+      if (!controlled) setLocal(next);
+      onChange?.(next);
+    },
+    [controlled, onChange],
+  );
+  return [current, setValue] as const;
+}