@xaui/native 0.9.1-alpha.91 → 0.9.1-alpha.93

package/dist/components/rating/index.js

@@ -0,0 +1,30 @@
+import {
+  Rating,
+  RatingIcon,
+  RatingItem,
+  RatingRoot,
+  ratingRecipe,
+  useRating,
+  useRatingLayer
+} from "../../chunk-7NQL5DXY.js";
+import "../../chunk-F6W3JQ7K.js";
+import "../../chunk-2AFA5HA2.js";
+import "../../chunk-423RQBOX.js";
+import "../../chunk-JN6IRT2M.js";
+import "../../chunk-WFZDAXDI.js";
+import "../../chunk-DKVXTMIJ.js";
+import "../../chunk-3Q42X6EQ.js";
+import "../../chunk-TTZOIXKE.js";
+import "../../chunk-36PRYGAM.js";
+import "../../chunk-EGLLDKN6.js";
+import "../../chunk-Z6JBWRPL.js";
+import "../../chunk-M63GFNKV.js";
+export {
+  Rating,
+  RatingIcon,
+  RatingItem,
+  RatingRoot,
+  ratingRecipe,
+  useRating,
+  useRatingLayer
+};

package/dist/components/rating/rating-icon.d.cts

@@ -0,0 +1,16 @@
+import type { RatingIconProps } from './rating.type';
+/**
+ * The mark, as a glyph of your own — a heart, a flame, a paw.
+ *
+ * Written **once** and drawn twice, because a mark is the same glyph in two layers: the
+ * neutral ground, and the filled colour clipped to the fraction given. Which of the two this
+ * instance is in comes from the layer rather than from a prop, so the caller never has to
+ * keep two copies in step.
+ *
+ * An explicit `color` wins, as it does everywhere `Icon` appears — which is also how a
+ * caller opts out of the two-layer colouring entirely.
+ */
+export declare function RatingIcon({ size, color, ...rest }: RatingIconProps): import("react").JSX.Element;
+export declare namespace RatingIcon {
+    var displayName: string;
+}

package/dist/components/rating/rating-icon.d.ts

@@ -0,0 +1,16 @@
+import type { RatingIconProps } from './rating.type';
+/**
+ * The mark, as a glyph of your own — a heart, a flame, a paw.
+ *
+ * Written **once** and drawn twice, because a mark is the same glyph in two layers: the
+ * neutral ground, and the filled colour clipped to the fraction given. Which of the two this
+ * instance is in comes from the layer rather than from a prop, so the caller never has to
+ * keep two copies in step.
+ *
+ * An explicit `color` wins, as it does everywhere `Icon` appears — which is also how a
+ * caller opts out of the two-layer colouring entirely.
+ */
+export declare function RatingIcon({ size, color, ...rest }: RatingIconProps): import("react").JSX.Element;
+export declare namespace RatingIcon {
+    var displayName: string;
+}

package/dist/components/rating/rating-item.d.cts

@@ -0,0 +1,23 @@
+import { View } from 'react-native';
+/**
+ * One mark.
+ *
+ * **It is the same glyph twice.** The neutral one sits in the flow and decides how wide the
+ * mark is; the filled one is pinned over it inside a clip whose width is the fraction given,
+ * so a value of 4.3 shows three tenths of the fifth mark. That fraction is what lets one
+ * component be both an input and a display of an average — a boolean per mark would have to
+ * round 4.3 to 4 and lose the thing the average was for.
+ *
+ * **The press reads where it landed.** `locationX` over the mark's width is the fraction the
+ * finger meant, and `snapValue` rounds it up to the nearest `precision` step: a tap anywhere
+ * in the first mark is one star rather than zero, and with `precision={0.5}` the left half of
+ * the third is 2.5 while the right half is 3.
+ *
+ * A mark owns its own press state, which is why the root publishes resolved styles and not
+ * the recipe (R5).
+ */
+export declare const RatingItem: import("react").ForwardRefExoticComponent<Omit<import("../..").PressableFeedbackProps, "isPressed" | "style" | "children" | "layout"> & {
+    index: number;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle> | ((state: import("react-native").PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").ViewStyle>);
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<View>>;

package/dist/components/rating/rating-item.d.ts

@@ -0,0 +1,23 @@
+import { View } from 'react-native';
+/**
+ * One mark.
+ *
+ * **It is the same glyph twice.** The neutral one sits in the flow and decides how wide the
+ * mark is; the filled one is pinned over it inside a clip whose width is the fraction given,
+ * so a value of 4.3 shows three tenths of the fifth mark. That fraction is what lets one
+ * component be both an input and a display of an average — a boolean per mark would have to
+ * round 4.3 to 4 and lose the thing the average was for.
+ *
+ * **The press reads where it landed.** `locationX` over the mark's width is the fraction the
+ * finger meant, and `snapValue` rounds it up to the nearest `precision` step: a tap anywhere
+ * in the first mark is one star rather than zero, and with `precision={0.5}` the left half of
+ * the third is 2.5 while the right half is 3.
+ *
+ * A mark owns its own press state, which is why the root publishes resolved styles and not
+ * the recipe (R5).
+ */
+export declare const RatingItem: import("react").ForwardRefExoticComponent<Omit<import("../..").PressableFeedbackProps, "isPressed" | "style" | "children" | "layout"> & {
+    index: number;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle> | ((state: import("react-native").PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").ViewStyle>);
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<View>>;

package/dist/components/rating/rating-star.d.cts

@@ -0,0 +1,19 @@
+/**
+ * The mark a `Rating` draws when the caller composes nothing.
+ *
+ * **`★` in both layers**, one in the neutral ground and one in the filled colour — never a
+ * hollow `☆` under a solid one. Two reasons, and the second is the load-bearing one: a solid
+ * pair is what every store's rating looks like, and `☆` (U+2606) is not in Android's system
+ * face, so the empty half of the row would render as a box on the platform where most of it
+ * is read. `★` (U+2605) is present on both.
+ *
+ * A character rather than an SVG, so the component needs no `react-native-svg` for the one
+ * glyph it draws itself. `Rating.Icon` replaces it with anything.
+ *
+ * **Internal** — the two layers are the `Rating.Item`'s arrangement, and a caller reaching
+ * for this directly would be reaching past the thing that positions it.
+ */
+export declare function RatingStar(): import("react").JSX.Element;
+export declare namespace RatingStar {
+    var displayName: string;
+}

package/dist/components/rating/rating-star.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The mark a `Rating` draws when the caller composes nothing.
+ *
+ * **`★` in both layers**, one in the neutral ground and one in the filled colour — never a
+ * hollow `☆` under a solid one. Two reasons, and the second is the load-bearing one: a solid
+ * pair is what every store's rating looks like, and `☆` (U+2606) is not in Android's system
+ * face, so the empty half of the row would render as a box on the platform where most of it
+ * is read. `★` (U+2605) is present on both.
+ *
+ * A character rather than an SVG, so the component needs no `react-native-svg` for the one
+ * glyph it draws itself. `Rating.Icon` replaces it with anything.
+ *
+ * **Internal** — the two layers are the `Rating.Item`'s arrangement, and a caller reaching
+ * for this directly would be reaching past the thing that positions it.
+ */
+export declare function RatingStar(): import("react").JSX.Element;
+export declare namespace RatingStar {
+    var displayName: string;
+}

package/dist/components/rating/rating.context.d.cts

@@ -0,0 +1,16 @@
+import type { RatingContextValue, RatingLayerContextValue } from './rating.type';
+/**
+ * R10 — `useRating` is exported so a control beside the row can read or set the value, and
+ * so a caller can write their own mark against the same `select` the built-in ones call.
+ * Outside a `<Rating>` it throws by name.
+ */
+export declare const RatingProvider: import("react").Provider<RatingContextValue | null>, useRating: () => RatingContextValue;
+/**
+ * Which of a mark's two layers a glyph is drawn in.
+ *
+ * It exists so `Rating.Icon` needs no prop to know its colour: a mark is the same glyph
+ * twice, once in the neutral ground and once in the filled colour clipped to the fraction
+ * given, and the caller writes that glyph **once**. A `tone` prop would have made them write
+ * it twice and keep the two in step.
+ */
+export declare const RatingLayerProvider: import("react").Provider<RatingLayerContextValue | null>, useRatingLayer: () => RatingLayerContextValue;

package/dist/components/rating/rating.context.d.ts

@@ -0,0 +1,16 @@
+import type { RatingContextValue, RatingLayerContextValue } from './rating.type';
+/**
+ * R10 — `useRating` is exported so a control beside the row can read or set the value, and
+ * so a caller can write their own mark against the same `select` the built-in ones call.
+ * Outside a `<Rating>` it throws by name.
+ */
+export declare const RatingProvider: import("react").Provider<RatingContextValue | null>, useRating: () => RatingContextValue;
+/**
+ * Which of a mark's two layers a glyph is drawn in.
+ *
+ * It exists so `Rating.Icon` needs no prop to know its colour: a mark is the same glyph
+ * twice, once in the neutral ground and once in the filled colour clipped to the fraction
+ * given, and the caller writes that glyph **once**. A `tone` prop would have made them write
+ * it twice and keep the two in step.
+ */
+export declare const RatingLayerProvider: import("react").Provider<RatingLayerContextValue | null>, useRatingLayer: () => RatingLayerContextValue;

package/dist/components/rating/rating.d.cts

@@ -0,0 +1,59 @@
+import { View } from 'react-native';
+/**
+ * A row of marks, given or shown.
+ *
+ * ```tsx
+ * <Rating value={score} onValueChange={setScore} />
+ *
+ * <Rating value={4.3} isReadOnly />
+ *
+ * <Rating value={score} onValueChange={setScore} precision={0.5}>
+ *   <Rating.Icon as={HeartIcon} />
+ * </Rating>
+ * ```
+ *
+ * **One component for the input and the average.** The fill of each mark is a *fraction*,
+ * so 4.3 shows three tenths of the fifth mark — a boolean per mark would have had to round
+ * it, and rounding is exactly what an average must not do. `precision` governs input only.
+ *
+ * **The row is data, not markup.** `max` says how many marks there are, so the root renders
+ * them; five hand-written marks is a row that disagrees with the prop the moment either
+ * changes. `children` is therefore the **glyph**, written once and drawn once per mark.
+ *
+ * **There is no label.** A "4,3 sur 5" beside the row is a `Typography` in a `Row` — the
+ * screen's, not the rating's (R1), and the moment it were a slot it would need an alignment,
+ * a format and a language.
+ *
+ * **There is no `isClearable`**, deliberately. Tapping the mark you already chose to go back
+ * to nothing is a gesture half the world's rating inputs have and half do not, so it is not
+ * a default either way; a caller who wants it holds the value and compares
+ * (`onValueChange={next => setScore(next === score ? 0 : next)}`), which is three words and
+ * says which behaviour they picked.
+ */
+export declare const RatingRoot: import("react").ForwardRefExoticComponent<{
+    variant?: import("./rating.type").RatingVariant;
+    size?: import("./rating.type").RatingSize;
+    color?: string;
+    max?: number;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    precision?: number;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    children?: import("react").ReactNode;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+} & Omit<import("react-native").ViewProps, "style" | "children"> & Omit<import("../..").ViewStyleProps, keyof {
+    variant?: import("./rating.type").RatingVariant;
+    size?: import("./rating.type").RatingSize;
+    color?: string;
+    max?: number;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    precision?: number;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    children?: import("react").ReactNode;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+}> & import("react").RefAttributes<View>>;

package/dist/components/rating/rating.d.ts

@@ -0,0 +1,59 @@
+import { View } from 'react-native';
+/**
+ * A row of marks, given or shown.
+ *
+ * ```tsx
+ * <Rating value={score} onValueChange={setScore} />
+ *
+ * <Rating value={4.3} isReadOnly />
+ *
+ * <Rating value={score} onValueChange={setScore} precision={0.5}>
+ *   <Rating.Icon as={HeartIcon} />
+ * </Rating>
+ * ```
+ *
+ * **One component for the input and the average.** The fill of each mark is a *fraction*,
+ * so 4.3 shows three tenths of the fifth mark — a boolean per mark would have had to round
+ * it, and rounding is exactly what an average must not do. `precision` governs input only.
+ *
+ * **The row is data, not markup.** `max` says how many marks there are, so the root renders
+ * them; five hand-written marks is a row that disagrees with the prop the moment either
+ * changes. `children` is therefore the **glyph**, written once and drawn once per mark.
+ *
+ * **There is no label.** A "4,3 sur 5" beside the row is a `Typography` in a `Row` — the
+ * screen's, not the rating's (R1), and the moment it were a slot it would need an alignment,
+ * a format and a language.
+ *
+ * **There is no `isClearable`**, deliberately. Tapping the mark you already chose to go back
+ * to nothing is a gesture half the world's rating inputs have and half do not, so it is not
+ * a default either way; a caller who wants it holds the value and compares
+ * (`onValueChange={next => setScore(next === score ? 0 : next)}`), which is three words and
+ * says which behaviour they picked.
+ */
+export declare const RatingRoot: import("react").ForwardRefExoticComponent<{
+    variant?: import("./rating.type").RatingVariant;
+    size?: import("./rating.type").RatingSize;
+    color?: string;
+    max?: number;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    precision?: number;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    children?: import("react").ReactNode;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+} & Omit<import("react-native").ViewProps, "style" | "children"> & Omit<import("../..").ViewStyleProps, keyof {
+    variant?: import("./rating.type").RatingVariant;
+    size?: import("./rating.type").RatingSize;
+    color?: string;
+    max?: number;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    precision?: number;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    children?: import("react").ReactNode;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+}> & import("react").RefAttributes<View>>;

package/dist/components/rating/rating.recipe.d.cts

@@ -0,0 +1,11 @@
+import type { SlotStyles } from '../../system/recipe';
+import type { XAUITheme } from '../../theme/theme.type';
+import type { RatingSlot, RatingVariant } from './rating.type';
+export declare const ratingRecipe: import("../..").Recipe<"root" | "glyph" | "item" | "glyphFill", RatingVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<RatingSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<RatingSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<RatingSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<RatingSlot>;
+    };
+}>;

package/dist/components/rating/rating.recipe.d.ts

@@ -0,0 +1,11 @@
+import type { SlotStyles } from '../../system/recipe';
+import type { XAUITheme } from '../../theme/theme.type';
+import type { RatingSlot, RatingVariant } from './rating.type';
+export declare const ratingRecipe: import("../..").Recipe<"root" | "glyph" | "item" | "glyphFill", RatingVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<RatingSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<RatingSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<RatingSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<RatingSlot>;
+    };
+}>;

package/dist/components/rating/rating.style.d.cts

@@ -0,0 +1,24 @@
+/**
+ * The clip the filled layer is drawn inside.
+ *
+ * **No token in it**, which is why it is here rather than in the recipe: this is geometry.
+ * The layer is pinned to the mark's leading edge and its width is the fraction that is
+ * filled, so `overflow: 'hidden'` cuts the glyph part-way through and a value of 4.3 shows
+ * three tenths of the fifth mark.
+ *
+ * `start` and `top` rather than `left` (R13): a right-to-left layout fills from the other
+ * edge, and the logical key is what makes that happen with no second branch.
+ *
+ * The glyph inside it must **not** be allowed to shrink to the clip's width, or the
+ * character would re-wrap instead of being cut — which is what the mark's own width on the
+ * inner node is for.
+ */
+export declare const ratingSheet: {
+    clip: {
+        position: "absolute";
+        top: number;
+        start: number;
+        bottom: number;
+        overflow: "hidden";
+    };
+};

package/dist/components/rating/rating.style.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The clip the filled layer is drawn inside.
+ *
+ * **No token in it**, which is why it is here rather than in the recipe: this is geometry.
+ * The layer is pinned to the mark's leading edge and its width is the fraction that is
+ * filled, so `overflow: 'hidden'` cuts the glyph part-way through and a value of 4.3 shows
+ * three tenths of the fifth mark.
+ *
+ * `start` and `top` rather than `left` (R13): a right-to-left layout fills from the other
+ * edge, and the logical key is what makes that happen with no second branch.
+ *
+ * The glyph inside it must **not** be allowed to shrink to the clip's width, or the
+ * character would re-wrap instead of being cut — which is what the mark's own width on the
+ * inner node is for.
+ */
+export declare const ratingSheet: {
+    clip: {
+        position: "absolute";
+        top: number;
+        start: number;
+        bottom: number;
+        overflow: "hidden";
+    };
+};

package/dist/components/rating/rating.type.d.cts

@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react';
+import type { PressableStateCallbackType, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { IconContextValue, IconProps } from '../../system/icon';
+import type { PressableFeedbackProps } from '../../system/pressable-feedback';
+import type { ViewStyleProps } from '../../system/style-props';
+import type { Size } from '../../theme/theme.type';
+export type RatingSlot = 'root' | 'item' | 'glyph' | 'glyphFill';
+/**
+ * Three, naming **which colour a filled mark takes** — the only thing this component paints
+ * that is a decision. The unfilled marks keep a neutral fill, which is the ground the filled
+ * ones are read against.
+ *
+ * - `primary` — the accent.
+ * - `secondary` — the neutral foreground.
+ * - `tertiary` — the page's own foreground, for a rating on a coloured card.
+ *
+ * The amber every store uses is not a token here, because it is not a role the theme has an
+ * opinion about — it is `color="#f59e0b"`, which is what a raw tint is for (R7). `warning`
+ * is deliberately not offered in its place: it is a status, and a four-star review is not a
+ * warning.
+ */
+export type RatingVariant = 'primary' | 'secondary' | 'tertiary';
+export type RatingSize = Size;
+/** Which layer of a mark a glyph is drawn in. */
+export type RatingTone = 'empty' | 'fill';
+type RatingOwnProps = {
+    variant?: RatingVariant;
+    /** The mark's size and the gap between marks. */
+    size?: RatingSize;
+    /** A raw tint (R7) for the filled marks. The unfilled ones keep their neutral ground. */
+    color?: string;
+    /** How many marks. @default 5 */
+    max?: number;
+    /** Controlled. Leave it out and the rating keeps the value itself. */
+    value?: number;
+    /** The starting value when uncontrolled. @default 0 */
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /**
+     * The step a press lands on. `1` is whole marks, `0.5` halves.
+     *
+     * It governs **input only** — a `value` of any precision displays as it is, so an average
+     * of 4.3 fills the fifth mark three tenths of the way whatever this says.
+     *
+     * @default 1
+     */
+    precision?: number;
+    /**
+     * A display rather than a control: the marks stop responding and announce themselves as
+     * an image showing a value, not as buttons.
+     */
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    /**
+     * **The glyph**, drawn once per mark, in each of the two layers a mark has:
+     *
+     * ```tsx
+     * <Rating max={5} value={value} onValueChange={setValue}>
+     *   <Rating.Icon as={HeartIcon} />
+     * </Rating>
+     * ```
+     *
+     * One element rather than a row of them, because the number of marks is `max` — data, not
+     * markup — and five hand-written marks is a row that disagrees with the prop the moment
+     * either changes. Left out, the mark is a star.
+     *
+     * A label beside the row is **not** in here: that is a `Typography` in a `Row`, and it is
+     * the screen's rather than the rating's (R1).
+     */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+/** R14 — it renders a `View`, so it carries that node's style keys. */
+export type RatingProps = RatingOwnProps & Omit<ViewProps, 'style' | 'children'> & Omit<ViewStyleProps, keyof RatingOwnProps>;
+export type RatingItemProps = Omit<PressableFeedbackProps, 'isPressed' | 'layout' | 'style' | 'children'> & {
+    /** Which mark this is, counted from zero. */
+    index: number;
+    /** R9 — `Pressable`'s function form as much as an object or an array. */
+    style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+    children?: ReactNode;
+};
+export type RatingIconProps = IconProps;
+/** R5 — resolved styles, not props for a slot to resolve a second time. */
+export type RatingContextValue = {
+    itemStyle: StyleProp<ViewStyle>;
+    glyphStyle: StyleProp<TextStyle>;
+    glyphFillStyle: StyleProp<TextStyle>;
+    /**
+     * Values, not a style: `Icon` hands `size` and `color` to a third-party component, so the
+     * root flattens each layer once here rather than in every glyph it contains.
+     */
+    icon: IconContextValue;
+    iconFill: IconContextValue;
+    /** How wide one mark is, which is what the fill layer is clipped against. */
+    markSize: number;
+    value: number;
+    max: number;
+    precision: number;
+    /** What a mark calls with the fraction of itself that was pressed. */
+    select: (index: number, ratio: number) => void;
+    isReadOnly: boolean;
+    isDisabled: boolean;
+};
+/** Which layer a glyph is in, so it needs no prop to know which colour it takes. */
+export type RatingLayerContextValue = {
+    tone: RatingTone;
+};
+export {};

package/dist/components/rating/rating.type.d.ts

@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react';
+import type { PressableStateCallbackType, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { IconContextValue, IconProps } from '../../system/icon';
+import type { PressableFeedbackProps } from '../../system/pressable-feedback';
+import type { ViewStyleProps } from '../../system/style-props';
+import type { Size } from '../../theme/theme.type';
+export type RatingSlot = 'root' | 'item' | 'glyph' | 'glyphFill';
+/**
+ * Three, naming **which colour a filled mark takes** — the only thing this component paints
+ * that is a decision. The unfilled marks keep a neutral fill, which is the ground the filled
+ * ones are read against.
+ *
+ * - `primary` — the accent.
+ * - `secondary` — the neutral foreground.
+ * - `tertiary` — the page's own foreground, for a rating on a coloured card.
+ *
+ * The amber every store uses is not a token here, because it is not a role the theme has an
+ * opinion about — it is `color="#f59e0b"`, which is what a raw tint is for (R7). `warning`
+ * is deliberately not offered in its place: it is a status, and a four-star review is not a
+ * warning.
+ */
+export type RatingVariant = 'primary' | 'secondary' | 'tertiary';
+export type RatingSize = Size;
+/** Which layer of a mark a glyph is drawn in. */
+export type RatingTone = 'empty' | 'fill';
+type RatingOwnProps = {
+    variant?: RatingVariant;
+    /** The mark's size and the gap between marks. */
+    size?: RatingSize;
+    /** A raw tint (R7) for the filled marks. The unfilled ones keep their neutral ground. */
+    color?: string;
+    /** How many marks. @default 5 */
+    max?: number;
+    /** Controlled. Leave it out and the rating keeps the value itself. */
+    value?: number;
+    /** The starting value when uncontrolled. @default 0 */
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /**
+     * The step a press lands on. `1` is whole marks, `0.5` halves.
+     *
+     * It governs **input only** — a `value` of any precision displays as it is, so an average
+     * of 4.3 fills the fifth mark three tenths of the way whatever this says.
+     *
+     * @default 1
+     */
+    precision?: number;
+    /**
+     * A display rather than a control: the marks stop responding and announce themselves as
+     * an image showing a value, not as buttons.
+     */
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    /**
+     * **The glyph**, drawn once per mark, in each of the two layers a mark has:
+     *
+     * ```tsx
+     * <Rating max={5} value={value} onValueChange={setValue}>
+     *   <Rating.Icon as={HeartIcon} />
+     * </Rating>
+     * ```
+     *
+     * One element rather than a row of them, because the number of marks is `max` — data, not
+     * markup — and five hand-written marks is a row that disagrees with the prop the moment
+     * either changes. Left out, the mark is a star.
+     *
+     * A label beside the row is **not** in here: that is a `Typography` in a `Row`, and it is
+     * the screen's rather than the rating's (R1).
+     */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+/** R14 — it renders a `View`, so it carries that node's style keys. */
+export type RatingProps = RatingOwnProps & Omit<ViewProps, 'style' | 'children'> & Omit<ViewStyleProps, keyof RatingOwnProps>;
+export type RatingItemProps = Omit<PressableFeedbackProps, 'isPressed' | 'layout' | 'style' | 'children'> & {
+    /** Which mark this is, counted from zero. */
+    index: number;
+    /** R9 — `Pressable`'s function form as much as an object or an array. */
+    style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+    children?: ReactNode;
+};
+export type RatingIconProps = IconProps;
+/** R5 — resolved styles, not props for a slot to resolve a second time. */
+export type RatingContextValue = {
+    itemStyle: StyleProp<ViewStyle>;
+    glyphStyle: StyleProp<TextStyle>;
+    glyphFillStyle: StyleProp<TextStyle>;
+    /**
+     * Values, not a style: `Icon` hands `size` and `color` to a third-party component, so the
+     * root flattens each layer once here rather than in every glyph it contains.
+     */
+    icon: IconContextValue;
+    iconFill: IconContextValue;
+    /** How wide one mark is, which is what the fill layer is clipped against. */
+    markSize: number;
+    value: number;
+    max: number;
+    precision: number;
+    /** What a mark calls with the fraction of itself that was pressed. */
+    select: (index: number, ratio: number) => void;
+    isReadOnly: boolean;
+    isDisabled: boolean;
+};
+/** Which layer a glyph is in, so it needs no prop to know which colour it takes. */
+export type RatingLayerContextValue = {
+    tone: RatingTone;
+};
+export {};

package/dist/components/rating/rating.utils.d.cts

@@ -0,0 +1,28 @@
+/**
+ * How much of the mark at `index` is filled, from 0 to 1.
+ *
+ * A fraction rather than a boolean, and that is what lets one component be both halves of
+ * the job: an average of 4.3 fills the fifth mark three tenths of the way, where a boolean
+ * would have to round it to 4 and lose the thing the average was for.
+ */
+export declare function fillFor(value: number, index: number): number;
+export type SnapOptions = {
+    /** Where the press landed, in marks — `2.34` is a third of the way into the third. */
+    raw: number;
+    /** The step a press lands on. `1` is whole marks, `0.5` halves. */
+    precision: number;
+    max: number;
+};
+/**
+ * The value a press at `raw` marks means.
+ *
+ * It rounds **up**, which is the only rounding that matches what a finger meant: a tap
+ * anywhere in the first mark is one star, not zero, and with `precision={0.5}` a tap on the
+ * left half of the third is 2.5 while the right half is 3. Rounding to nearest would make
+ * the first sliver of every mark select the one before it, so the leftmost strip of the row
+ * would silently rate zero.
+ *
+ * Clamped into `[precision, max]`: the smallest thing a press can express is one step, and
+ * no press can exceed the row it landed in.
+ */
+export declare function snapValue({ raw, precision, max }: SnapOptions): number;