@eventuras/ratio-ui-native 0.0.0-stage → 0.1.0

package/dist/Card.js

@@ -0,0 +1,51 @@
+import { useTheme } from "./RatioProvider.js";
+import "react";
+import { Pressable, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/Card.tsx
+/**
+* A card on the theme's card surface, with its border, corner and shadow.
+* With `onPress` it is one pressable target and lifts while pressed — the
+* web card's hover lift, where touch has no hover.
+*
+* @beta This component is experimental — prop shape may change before release.
+*/
+var Card = ({ children, elevation = "xs", padding = "m", style, ...rest }) => {
+	const theme = useTheme();
+	const { card } = theme.components;
+	const resting = elevation === "none" ? null : card.shadow[elevation];
+	const base = {
+		backgroundColor: theme.colors.card,
+		borderWidth: 1,
+		borderColor: theme.colors.border1,
+		borderRadius: theme.radius.xl,
+		padding: theme.space[padding]
+	};
+	if (rest.onPress) return /* @__PURE__ */ jsx(Pressable, {
+		role: "button",
+		...rest,
+		style: ({ pressed }) => [
+			base,
+			{
+				backgroundColor: pressed ? theme.colors.cardHover : theme.colors.card,
+				borderColor: pressed ? theme.colors.primary : theme.colors.border1,
+				boxShadow: theme.shadow(pressed ? card.hoverShadow : resting)
+			},
+			style
+		],
+		children
+	});
+	return /* @__PURE__ */ jsx(View, {
+		...rest,
+		style: [
+			base,
+			{ boxShadow: theme.shadow(resting) },
+			style
+		],
+		children
+	});
+};
+//#endregion
+export { Card };
+
+//# sourceMappingURL=Card.js.map

package/dist/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":[],"sources":["../src/Card.tsx"],"sourcesContent":["// ratio-ui · design system for knowledge sharing\n// SPDX-FileCopyrightText: 2026 Losol AS\n// SPDX-License-Identifier: MPL-2.0\n\nimport React from 'react';\nimport {\n  Pressable,\n  View,\n  type PressableProps,\n  type StyleProp,\n  type ViewProps,\n  type ViewStyle,\n} from 'react-native';\nimport type { SpaceStep } from '@eventuras/ratio-ui-core';\nimport { useTheme } from './RatioProvider';\n\nexport type CardElevation = 'none' | 'xs' | 'sm' | 'md';\n\ninterface CardOwnProps {\n  children?: React.ReactNode;\n  /** The resting shadow's tier; `none` is flat. @default 'xs' */\n  elevation?: CardElevation;\n  /** A step of the space scale. @default 'm' */\n  padding?: SpaceStep;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** @beta Prop shape may change before release. */\nexport type CardProps = CardOwnProps &\n  (\n    | ({ onPress?: undefined } & Omit<ViewProps, 'style' | 'children'>)\n    | ({ onPress: PressableProps['onPress'] } & Omit<PressableProps, 'style' | 'children'>)\n  );\n\n/**\n * A card on the theme's card surface, with its border, corner and shadow.\n * With `onPress` it is one pressable target and lifts while pressed — the\n * web card's hover lift, where touch has no hover.\n *\n * @beta This component is experimental — prop shape may change before release.\n */\nexport const Card: React.FC<CardProps> = ({\n  children,\n  elevation = 'xs',\n  padding = 'm',\n  style,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const { card } = theme.components;\n  const resting = elevation === 'none' ? null : card.shadow[elevation];\n\n  const base: ViewStyle = {\n    backgroundColor: theme.colors.card,\n    borderWidth: 1,\n    borderColor: theme.colors.border1,\n    borderRadius: theme.radius.xl,\n    padding: theme.space[padding],\n  };\n\n  if (rest.onPress) {\n    return (\n      <Pressable\n        role=\"button\"\n        {...(rest as PressableProps)}\n        style={({ pressed }) => [\n          base,\n          {\n            backgroundColor: pressed ? theme.colors.cardHover : theme.colors.card,\n            borderColor: pressed ? theme.colors.primary : theme.colors.border1,\n            boxShadow: theme.shadow(pressed ? card.hoverShadow : resting),\n          },\n          style,\n        ]}\n      >\n        {children}\n      </Pressable>\n    );\n  }\n\n  return (\n    <View {...(rest as ViewProps)} style={[base, { boxShadow: theme.shadow(resting) }, style]}>\n      {children}\n    </View>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAyCA,IAAa,QAA6B,EACxC,UACA,YAAY,MACZ,UAAU,KACV,OACA,GAAG,WACC;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,EAAE,SAAS,MAAM;CACvB,MAAM,UAAU,cAAc,SAAS,OAAO,KAAK,OAAO;CAE1D,MAAM,OAAkB;EACtB,iBAAiB,MAAM,OAAO;EAC9B,aAAa;EACb,aAAa,MAAM,OAAO;EAC1B,cAAc,MAAM,OAAO;EAC3B,SAAS,MAAM,MAAM;CACvB;CAEA,IAAI,KAAK,SACP,OACE,oBAAC,WAAD;EACE,MAAK;EACL,GAAK;EACL,QAAQ,EAAE,cAAc;GACtB;GACA;IACE,iBAAiB,UAAU,MAAM,OAAO,YAAY,MAAM,OAAO;IACjE,aAAa,UAAU,MAAM,OAAO,UAAU,MAAM,OAAO;IAC3D,WAAW,MAAM,OAAO,UAAU,KAAK,cAAc,OAAO;GAC9D;GACA;EACF;EAEC;CACQ,CAAA;CAIf,OACE,oBAAC,MAAD;EAAM,GAAK;EAAoB,OAAO;GAAC;GAAM,EAAE,WAAW,MAAM,OAAO,OAAO,EAAE;GAAG;EAAK;EACrF;CACG,CAAA;AAEV"}

package/dist/RatioProvider.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+import { ResolvedMode, ResolvedTheme, ShadowKey, Theme } from '@eventuras/ratio-ui-core';
+export type ColorScheme = 'light' | 'dark';
+/** The theme as a component reads it: one mode's colours, and the rest of the theme. @beta */
+export interface RatioTheme extends Omit<ResolvedTheme, 'light' | 'dark'> {
+    scheme: ColorScheme;
+    /** The colours of the mode in use. */
+    colors: ResolvedMode;
+    /**
+     * A shadow of the mode in use, as a `boxShadow` value (React Native 0.76
+     * and up). `undefined` for `null`, so it can go straight into a style.
+     */
+    shadow: (key: ShadowKey | null) => string | undefined;
+}
+/** @beta Prop shape may change before release. */
+export interface RatioProviderProps {
+    /** The theme, as `@eventuras/ratio-ui-core` authors it. @default bureau */
+    theme?: Theme;
+    /** Force light or dark. @default the device's setting */
+    colorScheme?: ColorScheme;
+    children?: React.ReactNode;
+}
+/**
+ * Puts a theme in reach of every Ratio component below it, in the device's
+ * light or dark mode unless `colorScheme` says otherwise.
+ *
+ * @beta This component is experimental — prop shape may change before release.
+ */
+export declare const RatioProvider: React.FC<RatioProviderProps>;
+/**
+ * The theme in use. Without a `RatioProvider` above, Bureau in the device's
+ * mode — so a component works on its own, and a provider is only needed to
+ * choose.
+ *
+ * @beta The shape of the theme it returns may change before release.
+ */
+export declare function useTheme(): RatioTheme;
+//# sourceMappingURL=RatioProvider.d.ts.map

package/dist/RatioProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatioProvider.d.ts","sourceRoot":"","sources":["../src/RatioProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,KAAK,EACX,MAAM,0BAA0B,CAAC;AAGlC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,8FAA8F;AAC9F,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC;IACvE,MAAM,EAAE,WAAW,CAAC;IACpB,sCAAsC;IACtC,MAAM,EAAE,YAAY,CAAC;IACrB;;;OAGG;IACH,MAAM,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,IAAI,KAAK,MAAM,GAAG,SAAS,CAAC;CACvD;AAsBD,kDAAkD;AAClD,MAAM,WAAW,kBAAkB;IACjC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,yDAAyD;IACzD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAMtD,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,QAAQ,IAAI,UAAU,CAQrC"}

package/dist/RatioProvider.js

@@ -0,0 +1,55 @@
+import { createContext, useContext, useMemo } from "react";
+import { useColorScheme } from "react-native";
+import { resolveTheme } from "@eventuras/ratio-ui-core";
+import { bureau } from "@eventuras/ratio-ui-core/themes/bureau";
+import { jsx } from "react/jsx-runtime";
+//#region src/RatioProvider.tsx
+var toRatioTheme = (resolved, scheme) => {
+	const { light, dark, ...rest } = resolved;
+	const colors = scheme === "dark" ? dark : light;
+	return {
+		...rest,
+		scheme,
+		colors,
+		shadow: (key) => {
+			if (!key) return void 0;
+			const { x, y, blur, color } = colors[key];
+			return `${x}px ${y}px ${blur}px ${color}`;
+		}
+	};
+};
+var RatioContext = createContext(null);
+var defaultResolved = resolveTheme(bureau);
+/**
+* Puts a theme in reach of every Ratio component below it, in the device's
+* light or dark mode unless `colorScheme` says otherwise.
+*
+* @beta This component is experimental — prop shape may change before release.
+*/
+var RatioProvider = ({ theme, colorScheme, children }) => {
+	const system = useColorScheme();
+	const scheme = colorScheme ?? (system === "dark" ? "dark" : "light");
+	const resolved = useMemo(() => theme ? resolveTheme(theme) : defaultResolved, [theme]);
+	const value = useMemo(() => toRatioTheme(resolved, scheme), [resolved, scheme]);
+	return /* @__PURE__ */ jsx(RatioContext.Provider, {
+		value,
+		children
+	});
+};
+/**
+* The theme in use. Without a `RatioProvider` above, Bureau in the device's
+* mode — so a component works on its own, and a provider is only needed to
+* choose.
+*
+* @beta The shape of the theme it returns may change before release.
+*/
+function useTheme() {
+	const fromProvider = useContext(RatioContext);
+	const system = useColorScheme();
+	const fallback = useMemo(() => toRatioTheme(defaultResolved, system === "dark" ? "dark" : "light"), [system]);
+	return fromProvider ?? fallback;
+}
+//#endregion
+export { RatioProvider, useTheme };
+
+//# sourceMappingURL=RatioProvider.js.map

package/dist/RatioProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatioProvider.js","names":[],"sources":["../src/RatioProvider.tsx"],"sourcesContent":["// ratio-ui · design system for knowledge sharing\n// SPDX-FileCopyrightText: 2026 Losol AS\n// SPDX-License-Identifier: MPL-2.0\n\nimport React, { createContext, useContext, useMemo } from 'react';\nimport { useColorScheme } from 'react-native';\nimport {\n  resolveTheme,\n  type ResolvedMode,\n  type ResolvedTheme,\n  type ShadowKey,\n  type Theme,\n} from '@eventuras/ratio-ui-core';\nimport { bureau } from '@eventuras/ratio-ui-core/themes/bureau';\n\nexport type ColorScheme = 'light' | 'dark';\n\n/** The theme as a component reads it: one mode's colours, and the rest of the theme. @beta */\nexport interface RatioTheme extends Omit<ResolvedTheme, 'light' | 'dark'> {\n  scheme: ColorScheme;\n  /** The colours of the mode in use. */\n  colors: ResolvedMode;\n  /**\n   * A shadow of the mode in use, as a `boxShadow` value (React Native 0.76\n   * and up). `undefined` for `null`, so it can go straight into a style.\n   */\n  shadow: (key: ShadowKey | null) => string | undefined;\n}\n\nconst toRatioTheme = (resolved: ResolvedTheme, scheme: ColorScheme): RatioTheme => {\n  const { light, dark, ...rest } = resolved;\n  const colors = scheme === 'dark' ? dark : light;\n  return {\n    ...rest,\n    scheme,\n    colors,\n    shadow: key => {\n      if (!key) return undefined;\n      const { x, y, blur, color } = colors[key];\n      return `${x}px ${y}px ${blur}px ${color}`;\n    },\n  };\n};\n\nconst RatioContext = createContext<RatioTheme | null>(null);\n\n// Bureau is the default theme, resolved once for every app that sets none.\nconst defaultResolved = resolveTheme(bureau);\n\n/** @beta Prop shape may change before release. */\nexport interface RatioProviderProps {\n  /** The theme, as `@eventuras/ratio-ui-core` authors it. @default bureau */\n  theme?: Theme;\n  /** Force light or dark. @default the device's setting */\n  colorScheme?: ColorScheme;\n  children?: React.ReactNode;\n}\n\n/**\n * Puts a theme in reach of every Ratio component below it, in the device's\n * light or dark mode unless `colorScheme` says otherwise.\n *\n * @beta This component is experimental — prop shape may change before release.\n */\nexport const RatioProvider: React.FC<RatioProviderProps> = ({ theme, colorScheme, children }) => {\n  const system = useColorScheme();\n  const scheme: ColorScheme = colorScheme ?? (system === 'dark' ? 'dark' : 'light');\n  const resolved = useMemo(() => (theme ? resolveTheme(theme) : defaultResolved), [theme]);\n  const value = useMemo(() => toRatioTheme(resolved, scheme), [resolved, scheme]);\n  return <RatioContext.Provider value={value}>{children}</RatioContext.Provider>;\n};\n\n/**\n * The theme in use. Without a `RatioProvider` above, Bureau in the device's\n * mode — so a component works on its own, and a provider is only needed to\n * choose.\n *\n * @beta The shape of the theme it returns may change before release.\n */\nexport function useTheme(): RatioTheme {\n  const fromProvider = useContext(RatioContext);\n  const system = useColorScheme();\n  const fallback = useMemo(\n    () => toRatioTheme(defaultResolved, system === 'dark' ? 'dark' : 'light'),\n    [system],\n  );\n  return fromProvider ?? fallback;\n}\n"],"mappings":";;;;;;AA6BA,IAAM,gBAAgB,UAAyB,WAAoC;CACjF,MAAM,EAAE,OAAO,MAAM,GAAG,SAAS;CACjC,MAAM,SAAS,WAAW,SAAS,OAAO;CAC1C,OAAO;EACL,GAAG;EACH;EACA;EACA,SAAQ,QAAO;GACb,IAAI,CAAC,KAAK,OAAO,KAAA;GACjB,MAAM,EAAE,GAAG,GAAG,MAAM,UAAU,OAAO;GACrC,OAAO,GAAG,EAAE,KAAK,EAAE,KAAK,KAAK,KAAK;EACpC;CACF;AACF;AAEA,IAAM,eAAe,cAAiC,IAAI;AAG1D,IAAM,kBAAkB,aAAa,MAAM;;;;;;;AAiB3C,IAAa,iBAA+C,EAAE,OAAO,aAAa,eAAe;CAC/F,MAAM,SAAS,eAAe;CAC9B,MAAM,SAAsB,gBAAgB,WAAW,SAAS,SAAS;CACzE,MAAM,WAAW,cAAe,QAAQ,aAAa,KAAK,IAAI,iBAAkB,CAAC,KAAK,CAAC;CACvF,MAAM,QAAQ,cAAc,aAAa,UAAU,MAAM,GAAG,CAAC,UAAU,MAAM,CAAC;CAC9E,OAAO,oBAAC,aAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAC/E;;;;;;;;AASA,SAAgB,WAAuB;CACrC,MAAM,eAAe,WAAW,YAAY;CAC5C,MAAM,SAAS,eAAe;CAC9B,MAAM,WAAW,cACT,aAAa,iBAAiB,WAAW,SAAS,SAAS,OAAO,GACxE,CAAC,MAAM,CACT;CACA,OAAO,gBAAgB;AACzB"}

package/dist/Text.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { TextProps as RNTextProps } from 'react-native';
+import { FontSizeStep } from '@eventuras/ratio-ui-core';
+/** How loud the text is: the theme's text, muted or subtle colour. */
+export type TextTone = 'default' | 'muted' | 'subtle';
+/** @beta Prop shape may change before release. */
+export interface TextProps extends RNTextProps {
+    /** A step of the type scale. @default 'base' */
+    size?: FontSizeStep;
+    /** @default 'default' */
+    tone?: TextTone;
+    /** @default 'regular' */
+    weight?: 'regular' | 'medium' | 'semibold' | 'bold';
+    /** The theme's font for the role. @default 'body' */
+    family?: 'body' | 'display' | 'mono';
+}
+/**
+ * Body text in the theme's font, size and colour.
+ *
+ * @beta This component is experimental — prop shape may change before release.
+ */
+export declare const Text: React.FC<TextProps>;
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** @beta Prop shape may change before release. */
+export interface HeadingProps extends Omit<TextProps, 'family' | 'size'> {
+    /** The heading's level, for screen readers and the default size. @default 2 */
+    level?: HeadingLevel;
+    /** Overrides the level's size. */
+    size?: FontSizeStep;
+}
+/**
+ * A heading in the theme's display font, announced as one with its level.
+ *
+ * @beta This component is experimental — prop shape may change before release.
+ */
+export declare const Heading: React.FC<HeadingProps>;
+//# sourceMappingURL=Text.d.ts.map

package/dist/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,KAAK,SAAS,IAAI,WAAW,EAAkB,MAAM,cAAc,CAAC;AAC7F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,sEAAsE;AACtE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEtD,kDAAkD;AAClD,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,gDAAgD;IAChD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yBAAyB;IACzB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,yBAAyB;IACzB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACpD,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;CACtC;AAWD;;;;GAIG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAyBpC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,kDAAkD;AAClD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,QAAQ,GAAG,MAAM,CAAC;IACtE,+EAA+E;IAC/E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,kCAAkC;IAClC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAYD;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAa1C,CAAC"}

package/dist/Text.js

@@ -0,0 +1,66 @@
+import { useTheme } from "./RatioProvider.js";
+import "react";
+import { Text } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/Text.tsx
+var WEIGHT = {
+	regular: "400",
+	medium: "500",
+	semibold: "600",
+	bold: "700"
+};
+var TONE = {
+	default: "text",
+	muted: "textMuted",
+	subtle: "textSubtle"
+};
+/**
+* Body text in the theme's font, size and colour.
+*
+* @beta This component is experimental — prop shape may change before release.
+*/
+var Text$1 = ({ size = "base", tone = "default", weight = "regular", family = "body", style, ...rest }) => {
+	const theme = useTheme();
+	const fontSize = theme.fontSize[size];
+	return /* @__PURE__ */ jsx(Text, {
+		...rest,
+		style: [{
+			fontFamily: theme.font[family],
+			fontSize,
+			lineHeight: Math.round(fontSize * 1.5),
+			fontWeight: WEIGHT[weight],
+			color: theme.colors[TONE[tone]]
+		}, style]
+	});
+};
+var HEADING_SIZE = {
+	1: "4xl",
+	2: "3xl",
+	3: "2xl",
+	4: "xl",
+	5: "lg",
+	6: "base"
+};
+/**
+* A heading in the theme's display font, announced as one with its level.
+*
+* @beta This component is experimental — prop shape may change before release.
+*/
+var Heading = ({ level = 2, size, weight = "bold", style, ...rest }) => {
+	const fontSize = useTheme().fontSize[size ?? HEADING_SIZE[level]];
+	return /* @__PURE__ */ jsx(Text$1, {
+		role: "heading",
+		"aria-level": level,
+		family: "display",
+		weight,
+		...rest,
+		style: [{
+			fontSize,
+			lineHeight: Math.round(fontSize * 1.2)
+		}, style]
+	});
+};
+//#endregion
+export { Heading, Text$1 as Text };
+
+//# sourceMappingURL=Text.js.map

package/dist/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","names":[],"sources":["../src/Text.tsx"],"sourcesContent":["// ratio-ui · design system for knowledge sharing\n// SPDX-FileCopyrightText: 2026 Losol AS\n// SPDX-License-Identifier: MPL-2.0\n\nimport React from 'react';\nimport { Text as RNText, type TextProps as RNTextProps, type TextStyle } from 'react-native';\nimport type { FontSizeStep } from '@eventuras/ratio-ui-core';\nimport { useTheme } from './RatioProvider';\n\n/** How loud the text is: the theme's text, muted or subtle colour. */\nexport type TextTone = 'default' | 'muted' | 'subtle';\n\n/** @beta Prop shape may change before release. */\nexport interface TextProps extends RNTextProps {\n  /** A step of the type scale. @default 'base' */\n  size?: FontSizeStep;\n  /** @default 'default' */\n  tone?: TextTone;\n  /** @default 'regular' */\n  weight?: 'regular' | 'medium' | 'semibold' | 'bold';\n  /** The theme's font for the role. @default 'body' */\n  family?: 'body' | 'display' | 'mono';\n}\n\nconst WEIGHT: Record<NonNullable<TextProps['weight']>, TextStyle['fontWeight']> = {\n  regular: '400',\n  medium: '500',\n  semibold: '600',\n  bold: '700',\n};\n\nconst TONE = { default: 'text', muted: 'textMuted', subtle: 'textSubtle' } as const;\n\n/**\n * Body text in the theme's font, size and colour.\n *\n * @beta This component is experimental — prop shape may change before release.\n */\nexport const Text: React.FC<TextProps> = ({\n  size = 'base',\n  tone = 'default',\n  weight = 'regular',\n  family = 'body',\n  style,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const fontSize = theme.fontSize[size];\n  return (\n    <RNText\n      {...rest}\n      style={[\n        {\n          fontFamily: theme.font[family],\n          fontSize,\n          lineHeight: Math.round(fontSize * 1.5),\n          fontWeight: WEIGHT[weight],\n          color: theme.colors[TONE[tone]],\n        },\n        style,\n      ]}\n    />\n  );\n};\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/** @beta Prop shape may change before release. */\nexport interface HeadingProps extends Omit<TextProps, 'family' | 'size'> {\n  /** The heading's level, for screen readers and the default size. @default 2 */\n  level?: HeadingLevel;\n  /** Overrides the level's size. */\n  size?: FontSizeStep;\n}\n\n// The web's Heading scale, one step per level.\nconst HEADING_SIZE: Record<HeadingLevel, FontSizeStep> = {\n  1: '4xl',\n  2: '3xl',\n  3: '2xl',\n  4: 'xl',\n  5: 'lg',\n  6: 'base',\n};\n\n/**\n * A heading in the theme's display font, announced as one with its level.\n *\n * @beta This component is experimental — prop shape may change before release.\n */\nexport const Heading: React.FC<HeadingProps> = ({ level = 2, size, weight = 'bold', style, ...rest }) => {\n  const theme = useTheme();\n  const fontSize = theme.fontSize[size ?? HEADING_SIZE[level]];\n  return (\n    <Text\n      role=\"heading\"\n      aria-level={level}\n      family=\"display\"\n      weight={weight}\n      {...rest}\n      style={[{ fontSize, lineHeight: Math.round(fontSize * 1.2) }, style]}\n    />\n  );\n};\n"],"mappings":";;;;;AAwBA,IAAM,SAA4E;CAChF,SAAS;CACT,QAAQ;CACR,UAAU;CACV,MAAM;AACR;AAEA,IAAM,OAAO;CAAE,SAAS;CAAQ,OAAO;CAAa,QAAQ;AAAa;;;;;;AAOzE,IAAa,UAA6B,EACxC,OAAO,QACP,OAAO,WACP,SAAS,WACT,SAAS,QACT,OACA,GAAG,WACC;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,WAAW,MAAM,SAAS;CAChC,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,OAAO,CACL;GACE,YAAY,MAAM,KAAK;GACvB;GACA,YAAY,KAAK,MAAM,WAAW,GAAG;GACrC,YAAY,OAAO;GACnB,OAAO,MAAM,OAAO,KAAK;EAC3B,GACA,KACF;CACD,CAAA;AAEL;AAaA,IAAM,eAAmD;CACvD,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;;;;;;AAOA,IAAa,WAAmC,EAAE,QAAQ,GAAG,MAAM,SAAS,QAAQ,OAAO,GAAG,WAAW;CAEvG,MAAM,WADQ,SACG,CAAA,CAAM,SAAS,QAAQ,aAAa;CACrD,OACE,oBAAC,QAAD;EACE,MAAK;EACL,cAAY;EACZ,QAAO;EACC;EACR,GAAI;EACJ,OAAO,CAAC;GAAE;GAAU,YAAY,KAAK,MAAM,WAAW,GAAG;EAAE,GAAG,KAAK;CACpE,CAAA;AAEL"}

package/dist/chat/ChatLinkPreviewCard.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { ChatLinkPreview } from '@eventuras/ratio-ui-core/chat';
+interface ChatLinkPreviewCardProps {
+    preview: ChatLinkPreview;
+    onOpenLink: (url: string) => void;
+}
+/**
+ * The card under a message: site name, title, description and a square
+ * thumbnail. One pressable target, named by the title.
+ */
+export declare const ChatLinkPreviewCard: React.FC<ChatLinkPreviewCardProps>;
+export {};
+//# sourceMappingURL=ChatLinkPreviewCard.d.ts.map

package/dist/chat/ChatLinkPreviewCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatLinkPreviewCard.d.ts","sourceRoot":"","sources":["../../src/chat/ChatLinkPreviewCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAgB,KAAK,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAInF,UAAU,wBAAwB;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAMD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAwDlE,CAAC"}

package/dist/chat/ChatLinkPreviewCard.js

@@ -0,0 +1,78 @@
+import { useTheme } from "../RatioProvider.js";
+import { Text as Text$1 } from "../Text.js";
+import "react";
+import { Image, Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { previewLabel } from "@eventuras/ratio-ui-core/chat";
+//#region src/chat/ChatLinkPreviewCard.tsx
+var THUMB = 64;
+/**
+* The card under a message: site name, title, description and a square
+* thumbnail. One pressable target, named by the title.
+*/
+var ChatLinkPreviewCard = ({ preview, onOpenLink }) => {
+	const theme = useTheme();
+	const { colors } = theme;
+	const { url, title, description, image } = preview;
+	return /* @__PURE__ */ jsxs(Pressable, {
+		role: "link",
+		"aria-label": title ?? description,
+		onPress: () => onOpenLink(url),
+		style: ({ pressed }) => ({
+			flexDirection: "row",
+			gap: 12,
+			padding: 10,
+			borderWidth: 1,
+			borderColor: pressed ? colors.border2 : colors.border1,
+			borderRadius: theme.radius.md,
+			backgroundColor: pressed ? colors.cardHover : colors.card
+		}),
+		children: [image && /* @__PURE__ */ jsx(Image, {
+			source: { uri: image.src },
+			accessibilityIgnoresInvertColors: true,
+			style: {
+				width: THUMB,
+				height: THUMB,
+				borderRadius: theme.radius.sm,
+				backgroundColor: colors.cardHover
+			},
+			resizeMode: "cover"
+		}), /* @__PURE__ */ jsxs(View, {
+			style: {
+				flex: 1,
+				minWidth: 0,
+				gap: 2,
+				justifyContent: "center"
+			},
+			children: [
+				/* @__PURE__ */ jsx(Text$1, {
+					size: "xs",
+					tone: "subtle",
+					weight: "semibold",
+					numberOfLines: 1,
+					style: {
+						textTransform: "uppercase",
+						letterSpacing: .6
+					},
+					children: previewLabel(preview)
+				}),
+				title && /* @__PURE__ */ jsx(Text$1, {
+					weight: "semibold",
+					numberOfLines: 2,
+					style: { lineHeight: theme.fontSize.base * 1.3 },
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					tone: "muted",
+					numberOfLines: 2,
+					children: description
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { ChatLinkPreviewCard };
+
+//# sourceMappingURL=ChatLinkPreviewCard.js.map

package/dist/chat/ChatLinkPreviewCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatLinkPreviewCard.js","names":[],"sources":["../../src/chat/ChatLinkPreviewCard.tsx"],"sourcesContent":["// ratio-ui · design system for knowledge sharing\n// SPDX-FileCopyrightText: 2026 Losol AS\n// SPDX-License-Identifier: MPL-2.0\n\nimport React from 'react';\nimport { Image, Pressable, View } from 'react-native';\nimport { previewLabel, type ChatLinkPreview } from '@eventuras/ratio-ui-core/chat';\nimport { useTheme } from '../RatioProvider';\nimport { Text } from '../Text';\n\ninterface ChatLinkPreviewCardProps {\n  preview: ChatLinkPreview;\n  onOpenLink: (url: string) => void;\n}\n\n// Fixed, so a row is its final height before the image arrives and a late\n// load never moves the rows below it.\nconst THUMB = 64;\n\n/**\n * The card under a message: site name, title, description and a square\n * thumbnail. One pressable target, named by the title.\n */\nexport const ChatLinkPreviewCard: React.FC<ChatLinkPreviewCardProps> = ({ preview, onOpenLink }) => {\n  const theme = useTheme();\n  const { colors } = theme;\n  const { url, title, description, image } = preview;\n\n  return (\n    <Pressable\n      role=\"link\"\n      aria-label={title ?? description}\n      onPress={() => onOpenLink(url)}\n      style={({ pressed }) => ({\n        flexDirection: 'row',\n        gap: 12,\n        padding: 10,\n        borderWidth: 1,\n        borderColor: pressed ? colors.border2 : colors.border1,\n        borderRadius: theme.radius.md,\n        backgroundColor: pressed ? colors.cardHover : colors.card,\n      })}\n    >\n      {image && (\n        <Image\n          source={{ uri: image.src }}\n          accessibilityIgnoresInvertColors\n          style={{\n            width: THUMB,\n            height: THUMB,\n            borderRadius: theme.radius.sm,\n            backgroundColor: colors.cardHover,\n          }}\n          resizeMode=\"cover\"\n        />\n      )}\n      <View style={{ flex: 1, minWidth: 0, gap: 2, justifyContent: 'center' }}>\n        <Text\n          size=\"xs\"\n          tone=\"subtle\"\n          weight=\"semibold\"\n          numberOfLines={1}\n          style={{ textTransform: 'uppercase', letterSpacing: 0.6 }}\n        >\n          {previewLabel(preview)}\n        </Text>\n        {title && (\n          <Text weight=\"semibold\" numberOfLines={2} style={{ lineHeight: theme.fontSize.base * 1.3 }}>\n            {title}\n          </Text>\n        )}\n        {description && (\n          <Text size=\"sm\" tone=\"muted\" numberOfLines={2}>\n            {description}\n          </Text>\n        )}\n      </View>\n    </Pressable>\n  );\n};\n"],"mappings":";;;;;;;AAiBA,IAAM,QAAQ;;;;;AAMd,IAAa,uBAA2D,EAAE,SAAS,iBAAiB;CAClG,MAAM,QAAQ,SAAS;CACvB,MAAM,EAAE,WAAW;CACnB,MAAM,EAAE,KAAK,OAAO,aAAa,UAAU;CAE3C,OACE,qBAAC,WAAD;EACE,MAAK;EACL,cAAY,SAAS;EACrB,eAAe,WAAW,GAAG;EAC7B,QAAQ,EAAE,eAAe;GACvB,eAAe;GACf,KAAK;GACL,SAAS;GACT,aAAa;GACb,aAAa,UAAU,OAAO,UAAU,OAAO;GAC/C,cAAc,MAAM,OAAO;GAC3B,iBAAiB,UAAU,OAAO,YAAY,OAAO;EACvD;EAZF,UAAA,CAcG,SACC,oBAAC,OAAD;GACE,QAAQ,EAAE,KAAK,MAAM,IAAI;GACzB,kCAAA;GACA,OAAO;IACL,OAAO;IACP,QAAQ;IACR,cAAc,MAAM,OAAO;IAC3B,iBAAiB,OAAO;GAC1B;GACA,YAAW;EACZ,CAAA,GAEH,qBAAC,MAAD;GAAM,OAAO;IAAE,MAAM;IAAG,UAAU;IAAG,KAAK;IAAG,gBAAgB;GAAS;GAAtE,UAAA;IACE,oBAAC,QAAD;KACE,MAAK;KACL,MAAK;KACL,QAAO;KACP,eAAe;KACf,OAAO;MAAE,eAAe;MAAa,eAAe;KAAI;KAEvD,UAAA,aAAa,OAAO;IACjB,CAAA;IACL,SACC,oBAAC,QAAD;KAAM,QAAO;KAAW,eAAe;KAAG,OAAO,EAAE,YAAY,MAAM,SAAS,OAAO,IAAI;KACtF,UAAA;IACG,CAAA;IAEP,eACC,oBAAC,QAAD;KAAM,MAAK;KAAK,MAAK;KAAQ,eAAe;KACzC,UAAA;IACG,CAAA;GAEJ;EACG,CAAA,CAAA;;AAEf"}

package/dist/chat/ChatLog.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+import { FlatList, FlatListProps } from 'react-native';
+import { ChatLogMessage } from '@eventuras/ratio-ui-core/chat';
+/** Built-in text of `ChatLog`. Each entry falls back to English. @beta */
+export interface ChatLogLabels {
+    /** Name of each message's reaction row. @default 'Reactions' */
+    reactions?: string;
+    /** Read after the author and time of a message that mentions you. @default 'mentions you' */
+    mentionsYou?: string;
+    /** Spoken name of the `@` role. @default 'op' */
+    op?: string;
+    /** Spoken name of the `+` role. @default 'voice' */
+    voice?: string;
+}
+/** @beta Prop shape may change before release. */
+export interface ChatLogProps extends Omit<FlatListProps<ChatLogMessage>, 'data' | 'renderItem' | 'keyExtractor'> {
+    /** Oldest first, as the web's `Chat.Log` takes them. */
+    messages: ChatLogMessage[];
+    /** Your own nick: tinted in the log, and messages that mention it get the band. */
+    me?: string;
+    /** Called with the message and the emoji when you tap a reaction. Without it reactions are read-only. */
+    onToggleReaction?: (messageId: string, emoji: string) => void;
+    /** Opens a link or a preview the reader taps. @default Linking.openURL */
+    onOpenLink?: (url: string) => void;
+    /** Built-in text. Each entry falls back to English. */
+    labels?: ChatLogLabels;
+}
+/**
+ * ChatLog — the channel log for React Native: one message per row, the nick
+ * and time on a line above the text, as the web's `Chat.Log` lays out a
+ * narrow log. Links and mentions are read by `@eventuras/ratio-ui-core/chat`,
+ * so the app and the web agree on them. Joins and topic changes are `event`
+ * rows, `/me` is an `action`, and a `divider` marks a day or "new messages".
+ *
+ * A `FlatList` underneath, and like the web's log it does not scroll
+ * itself: the ref is the list, so the caller decides when to follow new
+ * messages. Other `FlatList` props pass through.
+ *
+ * @beta This component is experimental — prop shape may change before release.
+ */
+export declare const ChatLog: React.ForwardRefExoticComponent<ChatLogProps & React.RefAttributes<FlatList<ChatLogMessage>>>;
+//# sourceMappingURL=ChatLog.d.ts.map

package/dist/chat/ChatLog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatLog.d.ts","sourceRoot":"","sources":["../../src/chat/ChatLog.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAiB,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,EAKL,KAAK,cAAc,EAEpB,MAAM,+BAA+B,CAAC;AAOvC,0EAA0E;AAC1E,MAAM,WAAW,aAAa;IAC5B,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,kDAAkD;AAClD,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,cAAc,CAAC;IACnF,wDAAwD;IACxD,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,mFAAmF;IACnF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,0EAA0E;IAC1E,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uDAAuD;IACvD,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAQD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO,+FAwClB,CAAC"}

package/dist/chat/ChatLog.js

@@ -0,0 +1,198 @@
+import { useTheme } from "../RatioProvider.js";
+import { Text as Text$1 } from "../Text.js";
+import { ChatLinkPreviewCard } from "./ChatLinkPreviewCard.js";
+import { ChatReactions } from "./ChatReactions.js";
+import { ChatText } from "./ChatText.js";
+import React, { useCallback, useMemo } from "react";
+import { FlatList, Linking, View } from "react-native";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { hasPreviewContent, mentionsNick, sameNick, segmentChatText } from "@eventuras/ratio-ui-core/chat";
+//#region src/chat/ChatLog.tsx
+var ROLE_GLYPH = {
+	op: "@",
+	voice: "+"
+};
+var openUrl = (url) => {
+	Linking.openURL(url);
+};
+/**
+* ChatLog — the channel log for React Native: one message per row, the nick
+* and time on a line above the text, as the web's `Chat.Log` lays out a
+* narrow log. Links and mentions are read by `@eventuras/ratio-ui-core/chat`,
+* so the app and the web agree on them. Joins and topic changes are `event`
+* rows, `/me` is an `action`, and a `divider` marks a day or "new messages".
+*
+* A `FlatList` underneath, and like the web's log it does not scroll
+* itself: the ref is the list, so the caller decides when to follow new
+* messages. Other `FlatList` props pass through.
+*
+* @beta This component is experimental — prop shape may change before release.
+*/
+var ChatLog = React.forwardRef(function ChatLog({ messages, me, onToggleReaction, onOpenLink = openUrl, labels, contentContainerStyle, ...listProps }, ref) {
+	const theme = useTheme();
+	const { reactions, mentionsYou, op, voice } = labels ?? {};
+	const rowLabels = useMemo(() => ({
+		reactions: reactions ?? "Reactions",
+		mentionsYou: mentionsYou ?? "mentions you",
+		op: op ?? "op",
+		voice: voice ?? "voice"
+	}), [
+		reactions,
+		mentionsYou,
+		op,
+		voice
+	]);
+	const renderItem = useCallback(({ item }) => /* @__PURE__ */ jsx(ChatLogRow, {
+		message: item,
+		me,
+		onToggleReaction,
+		onOpenLink,
+		labels: rowLabels
+	}), [
+		me,
+		onToggleReaction,
+		onOpenLink,
+		rowLabels
+	]);
+	return /* @__PURE__ */ jsx(FlatList, {
+		ref,
+		data: messages,
+		keyExtractor: (message) => message.id,
+		renderItem,
+		contentContainerStyle: [{
+			paddingVertical: theme.space.xs,
+			gap: 2
+		}, contentContainerStyle],
+		style: { backgroundColor: theme.colors.surface },
+		...listProps
+	});
+});
+ChatLog.displayName = "ChatLog";
+var PX = 16;
+var ChatLogRow = ({ message, me, onToggleReaction, onOpenLink, labels }) => {
+	const theme = useTheme();
+	const { colors } = theme;
+	const { id, type = "msg", time, nick, role, text, preview, reactions } = message;
+	if (type === "divider") {
+		const rule = {
+			flex: 1,
+			height: 1,
+			backgroundColor: colors.border2,
+			opacity: .5
+		};
+		return /* @__PURE__ */ jsxs(View, {
+			style: {
+				flexDirection: "row",
+				alignItems: "center",
+				gap: 12,
+				paddingHorizontal: PX,
+				marginVertical: 8
+			},
+			children: [
+				/* @__PURE__ */ jsx(View, { style: rule }),
+				/* @__PURE__ */ jsx(Text$1, {
+					size: "xs",
+					tone: "subtle",
+					weight: "semibold",
+					style: {
+						textTransform: "uppercase",
+						letterSpacing: 1.2
+					},
+					children: text
+				}),
+				/* @__PURE__ */ jsx(View, { style: rule })
+			]
+		});
+	}
+	if (type === "event" || type === "action") return /* @__PURE__ */ jsxs(View, {
+		style: {
+			flexDirection: "row",
+			gap: 8,
+			paddingHorizontal: PX,
+			paddingVertical: 2
+		},
+		children: [/* @__PURE__ */ jsx(Text$1, {
+			size: "xs",
+			family: "mono",
+			tone: "subtle",
+			style: { lineHeight: theme.fontSize.sm * 1.5 },
+			children: time
+		}), /* @__PURE__ */ jsx(Text$1, {
+			size: "sm",
+			tone: type === "event" ? "subtle" : "muted",
+			style: {
+				flex: 1,
+				fontStyle: "italic"
+			},
+			children: type === "event" ? `— ${text}` : /* @__PURE__ */ jsxs(Fragment, { children: [
+				["*", nick].filter(Boolean).join(" "),
+				" ",
+				/* @__PURE__ */ jsx(ChatText, {
+					segments: segmentChatText(text, { mentions: false }),
+					onOpenLink
+				})
+			] })
+		})]
+	});
+	const segments = segmentChatText(text);
+	const mentionsMe = mentionsNick(segments, me);
+	const nickColor = sameNick(nick, me) ? colors.chatNickVoice : role === "op" ? colors.chatNickOp : role === "voice" ? colors.chatNickVoice : colors.chatNick;
+	const spoken = [
+		role ? `${nick} (${labels[role]})` : nick,
+		time,
+		mentionsMe ? labels.mentionsYou : void 0
+	].filter(Boolean).join(", ");
+	return /* @__PURE__ */ jsxs(View, {
+		style: {
+			gap: 4,
+			paddingVertical: 6,
+			paddingRight: PX,
+			paddingLeft: 13,
+			borderLeftWidth: 3,
+			borderLeftColor: mentionsMe ? colors.accent : "transparent",
+			backgroundColor: mentionsMe ? colors.chatMentionBg : "transparent"
+		},
+		children: [
+			/* @__PURE__ */ jsxs(View, {
+				accessible: true,
+				"aria-label": spoken,
+				style: {
+					flexDirection: "row",
+					alignItems: "baseline",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ jsxs(Text$1, {
+					weight: "semibold",
+					numberOfLines: 1,
+					style: {
+						color: nickColor,
+						flexShrink: 1
+					},
+					children: [role ? ROLE_GLYPH[role] : "", nick]
+				}), /* @__PURE__ */ jsx(Text$1, {
+					size: "xs",
+					family: "mono",
+					tone: "subtle",
+					children: time
+				})]
+			}),
+			/* @__PURE__ */ jsx(Text$1, { children: /* @__PURE__ */ jsx(ChatText, {
+				segments,
+				onOpenLink
+			}) }),
+			preview && hasPreviewContent(preview) && /* @__PURE__ */ jsx(ChatLinkPreviewCard, {
+				preview,
+				onOpenLink
+			}),
+			reactions && reactions.length > 0 && /* @__PURE__ */ jsx(ChatReactions, {
+				reactions,
+				onToggle: onToggleReaction ? (emoji) => onToggleReaction(id, emoji) : void 0,
+				"aria-label": labels.reactions
+			})
+		]
+	});
+};
+//#endregion
+export { ChatLog };
+
+//# sourceMappingURL=ChatLog.js.map