@xaui/native 0.9.1-alpha.15 → 0.9.1-alpha.17

package/dist/{chunk-NLFE3CRM.cjs → chunk-IZYRU7S2.cjs}

@@ -36,11 +36,12 @@ function _optionalChain(ops) {
   }
   return value;
 }
-var _chunkPUER6Y4Mcjs = require('./chunk-PUER6Y4M.cjs');
+var _chunk2UICXD3Qcjs = require('./chunk-2UICXD3Q.cjs');
+var _chunk5SU7FXWHcjs = require('./chunk-5SU7FXWH.cjs');
 var _chunk6N5JXRUZcjs = require('./chunk-6N5JXRUZ.cjs');
 
 // src/components/button/button.context.ts
-var [ButtonProvider, useButton] = _chunkPUER6Y4Mcjs.createSlotContext.call(void 0, "Button");
+var [ButtonProvider, useButton] = _chunk5SU7FXWHcjs.createSlotContext.call(void 0, "Button");
 
 // src/components/button/button-icon.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -52,7 +53,7 @@ function ButtonIcon({
   const {
     icon
   } = useButton();
-  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _chunkPUER6Y4Mcjs.Icon, {
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _chunk2UICXD3Qcjs.Icon, {
     size: _nullishCoalesce(size, () => icon.size),
     color: _nullishCoalesce(color, () => icon.color),
     ...rest
@@ -72,7 +73,7 @@ var ButtonLabel = _react.forwardRef.call(void 0, function ButtonLabel2({
   const {
     labelStyle
   } = useButton();
-  const [styleProps, rest] = _chunkPUER6Y4Mcjs.useStyleProps.call(void 0, props);
+  const [styleProps, rest] = _chunk5SU7FXWHcjs.useStyleProps.call(void 0, props);
   return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.Text, {
     ref,
     numberOfLines,
@@ -96,7 +97,7 @@ function ButtonSpinner({
   const {
     spinnerStyle
   } = useButton();
-  const [styleProps] = _chunkPUER6Y4Mcjs.useStyleProps.call(void 0, props);
+  const [styleProps] = _chunk5SU7FXWHcjs.useStyleProps.call(void 0, props);
   const ringStyle = [spinnerStyle, styleProps, style];
   if (!animation) return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
     style: ringStyle
@@ -106,10 +107,10 @@ function ButtonSpinner({
   });
 }
 ButtonSpinner.displayName = "XAUI.Button.Spinner";
-const _worklet_3169119127402_init_data = {
-  code: "function chunkNLFE3CRMCjs1(){const{angle}=this.__closure;return{transform:[{rotate:angle.value+\"deg\"}]};}",
-  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-NLFE3CRM.cjs",
-  sourceMap: "{\"version\":3,\"names\":[\"chunkNLFE3CRMCjs1\",\"angle\",\"__closure\",\"transform\",\"rotate\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-NLFE3CRM.cjs\"],\"mappings\":\"AA0E6E,SAAAA,iBAAMA,CAAA,QAAAC,KAAA,OAAAC,SAAA,CAE/E,MAAO,CAAEC,SAAS,CAAE,CAAC,CAAEC,MAAM,CAAKH,KAAK,CAACI,KAAK,MAAM,CAAC,CAAE,CAAC,CACzD\",\"ignoreList\":[]}"
+const _worklet_11467162648159_init_data = {
+  code: "function chunkIZYRU7S2Cjs1(){const{angle}=this.__closure;return{transform:[{rotate:angle.value+\"deg\"}]};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-IZYRU7S2.cjs",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkIZYRU7S2Cjs1\",\"angle\",\"__closure\",\"transform\",\"rotate\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-IZYRU7S2.cjs\"],\"mappings\":\"AA4E6E,SAAAA,iBAAMA,CAAA,QAAAC,KAAA,OAAAC,SAAA,CAE/E,MAAO,CAAEC,SAAS,CAAE,CAAC,CAAEC,MAAM,CAAKH,KAAK,CAACI,KAAK,MAAM,CAAC,CAAE,CAAC,CACzD\",\"ignoreList\":[]}"
 };
 function SpinningRing({
   style
@@ -122,28 +123,28 @@ function SpinningRing({
     }), -1, false);
     return () => _reactnativereanimated.cancelAnimation.call(void 0, angle);
   }, [angle]);
-  const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, function chunkNLFE3CRMCjs1Factory({
-    _worklet_3169119127402_init_data,
+  const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, function chunkIZYRU7S2Cjs1Factory({
+    _worklet_11467162648159_init_data,
     angle
   }) {
     const _e = [new global.Error(), -2, -27];
-    const chunkNLFE3CRMCjs1 = function () {
+    const chunkIZYRU7S2Cjs1 = function () {
       return {
         transform: [{
           rotate: `${angle.value}deg`
         }]
       };
     };
-    chunkNLFE3CRMCjs1.__closure = {
+    chunkIZYRU7S2Cjs1.__closure = {
       angle
     };
-    chunkNLFE3CRMCjs1.__workletHash = 3169119127402;
-    chunkNLFE3CRMCjs1.__pluginVersion = "0.7.4";
-    chunkNLFE3CRMCjs1.__initData = _worklet_3169119127402_init_data;
-    chunkNLFE3CRMCjs1.__stackDetails = _e;
-    return chunkNLFE3CRMCjs1;
+    chunkIZYRU7S2Cjs1.__workletHash = 11467162648159;
+    chunkIZYRU7S2Cjs1.__pluginVersion = "0.7.4";
+    chunkIZYRU7S2Cjs1.__initData = _worklet_11467162648159_init_data;
+    chunkIZYRU7S2Cjs1.__stackDetails = _e;
+    return chunkIZYRU7S2Cjs1;
   }({
-    _worklet_3169119127402_init_data,
+    _worklet_11467162648159_init_data,
     angle
   }), [angle]);
   return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, {
@@ -254,7 +255,7 @@ function sizeAxis(step) {
     spinner: ring(theme, theme.fontSizes[glyph])
   });
 }
-var buttonRecipe = _chunkPUER6Y4Mcjs.createRecipe.call(void 0, {
+var buttonRecipe = _chunk5SU7FXWHcjs.createRecipe.call(void 0, {
   slots: SLOTS,
   base: theme => ({
     root: {
@@ -443,7 +444,7 @@ var ButtonRoot = _react.forwardRef.call(void 0, function Button({
   ...props
 }, ref) {
   const theme = _chunk6N5JXRUZcjs.useXAUITheme.call(void 0);
-  const [styleProps, rest] = _chunkPUER6Y4Mcjs.useStyleProps.call(void 0, props);
+  const [styleProps, rest] = _chunk5SU7FXWHcjs.useStyleProps.call(void 0, props);
   const [isPressed, press] = usePressState({
     onPressIn,
     onPressOut
@@ -487,14 +488,14 @@ var ButtonRoot = _react.forwardRef.call(void 0, function Button({
   const rootStyle = [styles.root, _optionalChain([tint, 'optionalAccess', _8 => _8.root]), styleProps, typeof style === "function" ? style({
     pressed: isPressed
   }) : style];
-  const text = _chunkPUER6Y4Mcjs.childrenToString.call(void 0, children);
+  const text = _chunk5SU7FXWHcjs.childrenToString.call(void 0, children);
   const showSpinner = isLoading && !containsElementOfType(children, ButtonSpinner);
   if (isIconOnly && !rest.accessibilityLabel && !rest["aria-label"]) {
     warnDev("Button: an icon-only button needs an `accessibilityLabel` \u2014 there is no text for a screen reader to read, so it announces as an unlabelled button.");
   }
   return /* @__PURE__ */_jsxruntime.jsx.call(void 0, ButtonProvider, {
     value: context,
-    children: /* @__PURE__ */_jsxruntime.jsx.call(void 0, _chunkPUER6Y4Mcjs.PressableFeedback, {
+    children: /* @__PURE__ */_jsxruntime.jsx.call(void 0, _chunk2UICXD3Qcjs.PressableFeedback, {
       ref,
       isPressed,
       isDisabled: isDisabled || isLoading,

package/dist/{chunk-UOJBK5Z4.js → chunk-L3AQNVRN.js}

@@ -1,6 +1,6 @@
 import {
   useStyleProps
-} from "./chunk-64L44HEI.js";
+} from "./chunk-4K3LZS7M.js";
 
 // src/system/portal/portal.tsx
 import { useContext, useId, useLayoutEffect } from "react";

package/dist/{chunk-BAACHVM4.cjs → chunk-M2VYRHVS.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkPUER6Y4Mcjs = require('./chunk-PUER6Y4M.cjs');
+var _chunk5SU7FXWHcjs = require('./chunk-5SU7FXWH.cjs');
 
 // src/system/portal/portal.tsx
 var _react = require('react');
@@ -31,7 +31,7 @@ var styles = _reactnative.StyleSheet.create({
   container: { flex: 1 }
 });
 function PortalHost({ children, ...props }) {
-  const [styleProps] = _chunkPUER6Y4Mcjs.useStyleProps.call(void 0, props);
+  const [styleProps] = _chunk5SU7FXWHcjs.useStyleProps.call(void 0, props);
   const [portals, setPortals] = _react.useState.call(void 0, /* @__PURE__ */ new Map());
   const addPortal = _react.useCallback.call(void 0, (key, element) => {
     setPortals((current) => new Map(current).set(key, element));

package/dist/{chunk-4O3PXFQ7.js → chunk-XQE5PXOD.js}

@@ -47,6 +47,7 @@ function deriveColors(s) {
 }
 
 // src/theme/scales.ts
+import { Platform } from "react-native";
 var SPACING_UNIT = 4;
 var RADIUS_BASE = 12;
 function buildRadius(base) {
@@ -98,7 +99,10 @@ var fontWeights = {
 var fontFamilies = {
   body: "System",
   heading: "System",
-  mono: "monospace"
+  // `'monospace'` is an Android family name, not a generic one: iOS does not resolve it and
+  // silently falls back to the system face, so code set with it is not monospaced there.
+  // Menlo is the face iOS ships, and it is what HeroUI Native selects for the same reason.
+  mono: Platform.OS === "ios" ? "Menlo" : "monospace"
 };
 var borderWidth = { default: 1, field: 1 };
 var opacity = { disabled: 0.5 };
@@ -163,7 +167,7 @@ var tokens = {
     overlayForeground: "#18181b",
     backdrop: "rgba(0, 0, 0, 0.2)",
     muted: "#71717a",
-    default: "#f4f4f5",
+    default: "#e4e4e7",
     defaultForeground: "#18181b",
     accent: "#9333ea",
     accentForeground: "#faf5ff",
@@ -187,11 +191,11 @@ var tokens = {
     successPressed: "#1b753a",
     warningPressed: "#a34d13",
     dangerPressed: "#c72927",
-    defaultPressed: "#eaeaeb",
+    defaultPressed: "#dbdbde",
     surfacePressed: "#eaeaea",
-    defaultSoft: "rgba(244, 244, 245, 0.5)",
+    defaultSoft: "rgba(228, 228, 231, 0.5)",
     defaultSoftForeground: "#18181b",
-    defaultSoftPressed: "rgba(244, 244, 245, 0.6)",
+    defaultSoftPressed: "rgba(228, 228, 231, 0.6)",
     accentSoft: "rgba(147, 51, 234, 0.15)",
     accentSoftForeground: "#7833bc",
     accentSoftPressed: "rgba(147, 51, 234, 0.2)",

package/dist/components/button/index.cjs

@@ -2,11 +2,12 @@
 
 
 
-var _chunkNLFE3CRMcjs = require('../../chunk-NLFE3CRM.cjs');
-require('../../chunk-PUER6Y4M.cjs');
+var _chunkIZYRU7S2cjs = require('../../chunk-IZYRU7S2.cjs');
+require('../../chunk-2UICXD3Q.cjs');
+require('../../chunk-5SU7FXWH.cjs');
 require('../../chunk-6N5JXRUZ.cjs');
 
 
 
 
-exports.Button = _chunkNLFE3CRMcjs.Button; exports.buttonRecipe = _chunkNLFE3CRMcjs.buttonRecipe; exports.useButton = _chunkNLFE3CRMcjs.useButton;
+exports.Button = _chunkIZYRU7S2cjs.Button; exports.buttonRecipe = _chunkIZYRU7S2cjs.buttonRecipe; exports.useButton = _chunkIZYRU7S2cjs.useButton;

package/dist/components/button/index.d.cts

@@ -2,8 +2,9 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { StyleProp, TextStyle, ViewStyle, TextProps, PressableStateCallbackType } from 'react-native';
-import { a as IconContextValue, b as IconProps, w as TextStyleProps, P as PressableFeedbackProps, x as ViewStyleProps, g as Recipe, o as SlotStyles, c as AnimationProp } from '../../create-recipe-BcUu9b2I.cjs';
-import { S as Size, R as RadiusKey, g as XAUITheme } from '../../theme.type-C9bFJKFm.cjs';
+import { o as TextStyleProps, V as ViewStyleProps, R as Recipe, g as SlotStyles } from '../../create-recipe-3_ElpCYt.cjs';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
+import { a as IconContextValue, b as IconProps, P as PressableFeedbackProps, c as AnimationProp } from '../../pressable-feedback.type-C9kjAuVQ.cjs';
 import 'react-native-reanimated';
 
 type ButtonSlot = 'root' | 'label' | 'icon' | 'spinner';

package/dist/components/button/index.d.ts

@@ -2,8 +2,9 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { StyleProp, TextStyle, ViewStyle, TextProps, PressableStateCallbackType } from 'react-native';
-import { a as IconContextValue, b as IconProps, w as TextStyleProps, P as PressableFeedbackProps, x as ViewStyleProps, g as Recipe, o as SlotStyles, c as AnimationProp } from '../../create-recipe-DD9W6m9b.js';
-import { S as Size, R as RadiusKey, g as XAUITheme } from '../../theme.type-C9bFJKFm.js';
+import { o as TextStyleProps, V as ViewStyleProps, R as Recipe, g as SlotStyles } from '../../create-recipe-DImq1AZA.js';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
+import { a as IconContextValue, b as IconProps, P as PressableFeedbackProps, c as AnimationProp } from '../../pressable-feedback.type-KcPvFf6f.js';
 import 'react-native-reanimated';
 
 type ButtonSlot = 'root' | 'label' | 'icon' | 'spinner';

package/dist/components/button/index.js

@@ -2,8 +2,9 @@ import {
   Button,
   buttonRecipe,
   useButton
-} from "../../chunk-E3756MJC.js";
-import "../../chunk-64L44HEI.js";
+} from "../../chunk-ASXK7XU4.js";
+import "../../chunk-F432IDIW.js";
+import "../../chunk-4K3LZS7M.js";
 import "../../chunk-XJARE6SC.js";
 export {
   Button,

package/dist/components/typography/index.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunk6VTBGBPPcjs = require('../../chunk-6VTBGBPP.cjs');
+require('../../chunk-5SU7FXWH.cjs');
+require('../../chunk-6N5JXRUZ.cjs');
+
+
+
+
+exports.TextSpan = _chunk6VTBGBPPcjs.TextSpan; exports.Typography = _chunk6VTBGBPPcjs.Typography; exports.typographyRecipe = _chunk6VTBGBPPcjs.typographyRecipe;

package/dist/components/typography/index.d.cts

@@ -0,0 +1,115 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { TextProps, StyleProp, TextStyle, Text } from 'react-native';
+import { o as TextStyleProps, R as Recipe } from '../../create-recipe-3_ElpCYt.cjs';
+import { X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
+
+/**
+ * The ten roles, aligned with HeroUI Native's `text` — six headings, three body steps and
+ * inline code. Each one fixes **size, line height, weight and family together**, which is
+ * what removes the separate `size` and `weight` props the legacy component carried, and
+ * with them the illegal combinations they allowed: a heading in `weight="light"`, a
+ * caption in `lg`.
+ *
+ * `h1`–`h6` name a level, not an HTML tag — React Native has no document outline, so the
+ * number is the step on the scale and nothing more. Announcing a heading to a screen
+ * reader stays explicit: `accessibilityRole="header"`.
+ */
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'body-sm' | 'body-xs' | 'code';
+type TypographySlot = 'root';
+type TypographyOwnProps = {
+    /** The role. It fixes size, line height, weight and family at once. */
+    variant?: TypographyVariant;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). In a text component there is only one
+     * thing to tint, so it lands on the text itself.
+     */
+    color?: string;
+    /** R12 — the child element becomes the text node, keeping this variant's style. */
+    asChild?: boolean;
+    style?: StyleProp<TextStyle>;
+    children?: ReactNode;
+};
+/**
+ * R14 — the role's own vocabulary, then every `TextStyle` key it does not already claim.
+ * `color` is the component's, so it keeps its R7 meaning here rather than becoming the
+ * style key of the same name; `fontSize` and `fontWeight` stay available, which is how a
+ * one-off deviation is written without inventing a prop for it.
+ */
+type TypographyProps = Omit<TextProps, 'style'> & TypographyOwnProps & Omit<TextStyleProps, keyof TypographyOwnProps | keyof TextProps>;
+type TextSpanOwnProps = {
+    /** R12 — the child element becomes the span. */
+    asChild?: boolean;
+    style?: StyleProp<TextStyle>;
+    children?: ReactNode;
+};
+type TextSpanProps = Omit<TextProps, 'style'> & TextSpanOwnProps & Omit<TextStyleProps, keyof TextSpanOwnProps | keyof TextProps>;
+
+/**
+ * Text, by the role it plays.
+ *
+ * ```tsx
+ * <Typography variant="heading-lg">Projets</Typography>
+ * <Typography>Trois en cours, un archivé.</Typography>
+ * <Typography variant="caption">Mis à jour il y a deux minutes</Typography>
+ * ```
+ *
+ * **One node, and no slots.** A paragraph is a `Text`; there is nothing inside it for the
+ * component to publish. Styling a fragment of it is `TextSpan`'s job, not a slot of this
+ * one — React Native already makes a nested `Text` inherit from its parent, so a span
+ * needs no context, no resolved style and nothing from here. This component would only be
+ * duplicating a mechanism the platform ships.
+ *
+ * **The role fixes size, line height, weight and family together**, which is why there is
+ * no `size` and no `weight` prop: those axes are not free to combine. A one-off deviation
+ * is a style prop — `fontSize={17}` — said plainly rather than dressed as vocabulary.
+ *
+ * Alignment likewise has no prop of its own: `textAlign` is a `TextStyle` key, so R14
+ * already exposes it, and the caller writes the value React Native understands instead of
+ * a translation layer this component would have to keep honest.
+ */
+declare const Typography: react.ForwardRefExoticComponent<Omit<react_native.TextProps, "style"> & {
+    variant?: TypographyVariant;
+    color?: string;
+    asChild?: boolean;
+    style?: react_native.StyleProp<react_native.TextStyle>;
+    children?: react.ReactNode;
+} & Omit<TextStyleProps, "color" | "pointerEvents" | "children" | "style" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "disabled" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "pressRetentionOffset" | "asChild" | "variant" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "maxFontSizeMultiplier" | "minimumFontScale" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency"> & react.RefAttributes<Text>>;
+
+/**
+ * A fragment of text, styled apart from the text around it.
+ *
+ * ```tsx
+ * <Typography>
+ *   Supprimer <TextSpan fontWeight="600">trois projets</TextSpan> définitivement.
+ * </Typography>
+ * ```
+ *
+ * **It is a bare React Native `Text`, and that is the whole design.** Nesting a `Text`
+ * inside a `Text` already inherits the parent's font, size, weight and colour on both
+ * platforms — so a span needs no context to read, no role to resolve and no provider
+ * above it. The legacy component published a `TextSpanContext` to carry that inheritance
+ * by hand; it was reimplementing the platform, and it is gone.
+ *
+ * What is left is R14 and nothing else: every `TextStyle` key as a prop, and `style` after
+ * them. There is no `variant` here on purpose — a span that names a role would be a
+ * `Typography`, and nesting one of those is how you change role mid-sentence.
+ */
+declare const TextSpan: react.ForwardRefExoticComponent<Omit<react_native.TextProps, "style"> & {
+    asChild?: boolean;
+    style?: react_native.StyleProp<react_native.TextStyle>;
+    children?: react.ReactNode;
+} & Omit<TextStyleProps, "pointerEvents" | "children" | "style" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "disabled" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "pressRetentionOffset" | "asChild" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "maxFontSizeMultiplier" | "minimumFontScale" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency"> & react.RefAttributes<Text>>;
+
+/** Every role produces the same one slot, so the recipe's style functions share a shape. */
+type StyleFn = (theme: XAUITheme) => Record<TypographySlot, TextStyle>;
+/**
+ * There is no `base`. A text node's defaults are React Native's own, and restating them
+ * here would only give them a second place to drift from.
+ */
+declare const typographyRecipe: Recipe<"root", TypographyVariant, {
+    readonly variant: Record<TypographyVariant, StyleFn>;
+}>;
+
+export { TextSpan, type TextSpanProps, Typography, type TypographyProps, type TypographySlot, type TypographyVariant, typographyRecipe };

package/dist/components/typography/index.d.ts

@@ -0,0 +1,115 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { TextProps, StyleProp, TextStyle, Text } from 'react-native';
+import { o as TextStyleProps, R as Recipe } from '../../create-recipe-DImq1AZA.js';
+import { X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
+
+/**
+ * The ten roles, aligned with HeroUI Native's `text` — six headings, three body steps and
+ * inline code. Each one fixes **size, line height, weight and family together**, which is
+ * what removes the separate `size` and `weight` props the legacy component carried, and
+ * with them the illegal combinations they allowed: a heading in `weight="light"`, a
+ * caption in `lg`.
+ *
+ * `h1`–`h6` name a level, not an HTML tag — React Native has no document outline, so the
+ * number is the step on the scale and nothing more. Announcing a heading to a screen
+ * reader stays explicit: `accessibilityRole="header"`.
+ */
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'body-sm' | 'body-xs' | 'code';
+type TypographySlot = 'root';
+type TypographyOwnProps = {
+    /** The role. It fixes size, line height, weight and family at once. */
+    variant?: TypographyVariant;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). In a text component there is only one
+     * thing to tint, so it lands on the text itself.
+     */
+    color?: string;
+    /** R12 — the child element becomes the text node, keeping this variant's style. */
+    asChild?: boolean;
+    style?: StyleProp<TextStyle>;
+    children?: ReactNode;
+};
+/**
+ * R14 — the role's own vocabulary, then every `TextStyle` key it does not already claim.
+ * `color` is the component's, so it keeps its R7 meaning here rather than becoming the
+ * style key of the same name; `fontSize` and `fontWeight` stay available, which is how a
+ * one-off deviation is written without inventing a prop for it.
+ */
+type TypographyProps = Omit<TextProps, 'style'> & TypographyOwnProps & Omit<TextStyleProps, keyof TypographyOwnProps | keyof TextProps>;
+type TextSpanOwnProps = {
+    /** R12 — the child element becomes the span. */
+    asChild?: boolean;
+    style?: StyleProp<TextStyle>;
+    children?: ReactNode;
+};
+type TextSpanProps = Omit<TextProps, 'style'> & TextSpanOwnProps & Omit<TextStyleProps, keyof TextSpanOwnProps | keyof TextProps>;
+
+/**
+ * Text, by the role it plays.
+ *
+ * ```tsx
+ * <Typography variant="heading-lg">Projets</Typography>
+ * <Typography>Trois en cours, un archivé.</Typography>
+ * <Typography variant="caption">Mis à jour il y a deux minutes</Typography>
+ * ```
+ *
+ * **One node, and no slots.** A paragraph is a `Text`; there is nothing inside it for the
+ * component to publish. Styling a fragment of it is `TextSpan`'s job, not a slot of this
+ * one — React Native already makes a nested `Text` inherit from its parent, so a span
+ * needs no context, no resolved style and nothing from here. This component would only be
+ * duplicating a mechanism the platform ships.
+ *
+ * **The role fixes size, line height, weight and family together**, which is why there is
+ * no `size` and no `weight` prop: those axes are not free to combine. A one-off deviation
+ * is a style prop — `fontSize={17}` — said plainly rather than dressed as vocabulary.
+ *
+ * Alignment likewise has no prop of its own: `textAlign` is a `TextStyle` key, so R14
+ * already exposes it, and the caller writes the value React Native understands instead of
+ * a translation layer this component would have to keep honest.
+ */
+declare const Typography: react.ForwardRefExoticComponent<Omit<react_native.TextProps, "style"> & {
+    variant?: TypographyVariant;
+    color?: string;
+    asChild?: boolean;
+    style?: react_native.StyleProp<react_native.TextStyle>;
+    children?: react.ReactNode;
+} & Omit<TextStyleProps, "color" | "pointerEvents" | "children" | "style" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "disabled" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "pressRetentionOffset" | "asChild" | "variant" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "maxFontSizeMultiplier" | "minimumFontScale" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency"> & react.RefAttributes<Text>>;
+
+/**
+ * A fragment of text, styled apart from the text around it.
+ *
+ * ```tsx
+ * <Typography>
+ *   Supprimer <TextSpan fontWeight="600">trois projets</TextSpan> définitivement.
+ * </Typography>
+ * ```
+ *
+ * **It is a bare React Native `Text`, and that is the whole design.** Nesting a `Text`
+ * inside a `Text` already inherits the parent's font, size, weight and colour on both
+ * platforms — so a span needs no context to read, no role to resolve and no provider
+ * above it. The legacy component published a `TextSpanContext` to carry that inheritance
+ * by hand; it was reimplementing the platform, and it is gone.
+ *
+ * What is left is R14 and nothing else: every `TextStyle` key as a prop, and `style` after
+ * them. There is no `variant` here on purpose — a span that names a role would be a
+ * `Typography`, and nesting one of those is how you change role mid-sentence.
+ */
+declare const TextSpan: react.ForwardRefExoticComponent<Omit<react_native.TextProps, "style"> & {
+    asChild?: boolean;
+    style?: react_native.StyleProp<react_native.TextStyle>;
+    children?: react.ReactNode;
+} & Omit<TextStyleProps, "pointerEvents" | "children" | "style" | "id" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "disabled" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "pressRetentionOffset" | "asChild" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onTextLayout" | "maxFontSizeMultiplier" | "minimumFontScale" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency"> & react.RefAttributes<Text>>;
+
+/** Every role produces the same one slot, so the recipe's style functions share a shape. */
+type StyleFn = (theme: XAUITheme) => Record<TypographySlot, TextStyle>;
+/**
+ * There is no `base`. A text node's defaults are React Native's own, and restating them
+ * here would only give them a second place to drift from.
+ */
+declare const typographyRecipe: Recipe<"root", TypographyVariant, {
+    readonly variant: Record<TypographyVariant, StyleFn>;
+}>;
+
+export { TextSpan, type TextSpanProps, Typography, type TypographyProps, type TypographySlot, type TypographyVariant, typographyRecipe };

package/dist/components/typography/index.js

@@ -0,0 +1,12 @@
+import {
+  TextSpan,
+  Typography,
+  typographyRecipe
+} from "../../chunk-6PZF4PI7.js";
+import "../../chunk-4K3LZS7M.js";
+import "../../chunk-XJARE6SC.js";
+export {
+  TextSpan,
+  Typography,
+  typographyRecipe
+};

package/dist/create-recipe-3_ElpCYt.d.cts

@@ -0,0 +1,117 @@
+import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import { X as XAUITheme, a as XAUIColors } from './theme.type-C2gNHpEx.cjs';
+
+/**
+ * R13 — React Native mirrors a layout under RTL through the Start/End properties and only
+ * those. A props API is exactly where someone writes `paddingLeft` without thinking, so
+ * the type removes the temptation instead of leaving it to a review.
+ */
+type DirectionalStyleKey = 'left' | 'right' | 'paddingLeft' | 'paddingRight' | 'marginLeft' | 'marginRight' | 'borderLeftWidth' | 'borderRightWidth' | 'borderLeftColor' | 'borderRightColor' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderBottomLeftRadius' | 'borderBottomRightRadius';
+/**
+ * `pointerEvents` is a style key *and* a `View` prop. R14 says the component's own prop
+ * wins, so it stays the prop it has always been and is not exposed twice — the one name
+ * where the two vocabularies collide.
+ */
+type ComponentOwnedStyleKey = 'pointerEvents';
+/**
+ * The style keys of a node, exposed as props (R14). Not a maintained list: it derives
+ * from the React Native type, minus what R13 forbids.
+ *
+ * ```ts
+ * type CardProps = ViewStyleProps & { variant?: CardVariant }
+ * ```
+ */
+type StyleProps<Style> = Omit<Style, DirectionalStyleKey | ComponentOwnedStyleKey>;
+/** A root, or any slot that renders a view. */
+type ViewStyleProps = StyleProps<ViewStyle>;
+/** A text slot — `color`, `fontSize`, `letterSpacing`… */
+type TextStyleProps = StyleProps<TextStyle>;
+/** An image slot — `resizeMode`, `tintColor`… */
+type ImageStyleProps = StyleProps<ImageStyle>;
+
+/**
+ * A slot is a view or a text node, and a recipe writes one object per slot, so the two
+ * RN style shapes are merged rather than discriminated per slot.
+ */
+type SlotStyle = ViewStyle & TextStyle;
+type SlotStyles<Slot extends string> = Partial<Record<Slot, SlotStyle>>;
+/** The roles a variant consumes. The variant names tokens; `paint` says where they land. */
+type VariantRole = 'bg' | 'bgPressed' | 'fg' | 'border';
+/** Token names per role — no colour value ever appears in a recipe. */
+type VariantTokens = Partial<Record<VariantRole, keyof XAUIColors>>;
+/** The same roles resolved: theme colours, or the slices of a raw `color`. */
+type VariantColors = Partial<Record<VariantRole, string>>;
+/**
+ * `disabled` is applied last of the three: a control that is both pressed and disabled
+ * has to read disabled.
+ */
+type StateName = 'focused' | 'pressed' | 'disabled';
+type States = Partial<Record<StateName, boolean>>;
+/** Reads the theme and the variant's resolved colours; returns one style per slot. */
+type StyleFn<Slot extends string> = (theme: XAUITheme, colors: VariantColors) => SlotStyles<Slot>;
+/** Named axes of finite token values — `{ size: { sm: fn, md: fn } }`. */
+type Axes<Slot extends string> = Record<string, Record<string, StyleFn<Slot>>>;
+/** One value per axis, plus the variant. Missing keys fall back to `defaultVariants`. */
+type Selection<Variant extends string, A extends Axes<string>> = {
+    variant?: Variant;
+} & {
+    [Axis in keyof A]?: Extract<keyof A[Axis], string>;
+};
+type CompoundVariant<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
+    when: Selection<Variant, A>;
+    style: StyleFn<Slot>;
+};
+type RecipeConfig<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
+    /** Every slot the component publishes. Slots a recipe never styles resolve to `{}`. */
+    slots: readonly Slot[];
+    base?: StyleFn<Slot>;
+    variantTokens?: Record<Variant, VariantTokens>;
+    /** Where the variant's colours land — written once, and it holds for every variant. */
+    paint?: StyleFn<Slot>;
+    variants?: A;
+    compoundVariants?: ReadonlyArray<CompoundVariant<Slot, Variant, A>>;
+    states?: Partial<Record<StateName, StyleFn<Slot>>>;
+    /**
+     * `NoInfer`, because this is the one place a single variant name appears on its own:
+     * without it, inference reads `Variant` off `{ variant: 'primary' }` and narrows the
+     * whole recipe to that one value, so every other variant becomes a type error at the
+     * call site. `variantTokens` is the declaration; this only picks a default from it.
+     */
+    defaultVariants?: Selection<NoInfer<Variant>, A>;
+};
+/** Stable references: the same object for the same tokens, for the app's lifetime. */
+type ResolvedStyles<Slot extends string> = Readonly<Record<Slot, SlotStyle>>;
+/** A selection with `defaultVariants` already folded in, keyed by axis name. */
+type ResolvedSelection = Readonly<Record<string, string | undefined>>;
+
+type ResolveArgs<Variant extends string, A extends Axes<string>> = {
+    theme: XAUITheme;
+    selection?: Selection<Variant, A>;
+    states?: States;
+};
+type TintArgs<Variant extends string, A extends Axes<string>> = ResolveArgs<Variant, A> & {
+    color: string;
+};
+type Recipe<Slot extends string, Variant extends string, A extends Axes<Slot>> = {
+    readonly slots: readonly Slot[];
+    /** The cached pass: stable `StyleSheet` references, keyed by tokens alone. */
+    resolve(args: ResolveArgs<Variant, A>): ResolvedStyles<Slot>;
+    /**
+     * The tint pass: the same functions run again with `color`'s slices in place of the
+     * theme's tokens. Uncached and allocating, and only ever called when `color` is set.
+     */
+    tint(args: TintArgs<Variant, A>): SlotStyles<Slot>;
+};
+/**
+ * A component's style, declared once. Resolution splits in two because the two halves
+ * have different lifetimes: everything keyed by a finite token is cached forever, and
+ * an arbitrary `color` is recomputed per render — which is what keeps the cache bounded
+ * by the number of token combinations rather than by the palette users invent.
+ *
+ *     const styles = buttonRecipe.resolve({ theme, selection: { variant, size }, states })
+ *     const tint = color ? buttonRecipe.tint({ theme, color, selection, states }) : undefined
+ *     <View style={[styles.root, tint?.root, style]} />
+ */
+declare function createRecipe<Slot extends string, Variant extends string, const A extends Axes<Slot>>(config: RecipeConfig<Slot, Variant, A>): Recipe<Slot, Variant, A>;
+
+export { type Axes as A, type CompoundVariant as C, type DirectionalStyleKey as D, type ImageStyleProps as I, type Recipe as R, type Selection as S, type TintArgs as T, type ViewStyleProps as V, type ResolveArgs as a, type RecipeConfig as b, createRecipe as c, type ResolvedSelection as d, type ResolvedStyles as e, type SlotStyle as f, type SlotStyles as g, type StateName as h, type States as i, type StyleFn as j, type VariantColors as k, type VariantRole as l, type VariantTokens as m, type StyleProps as n, type TextStyleProps as o };