@multiplatform.one/forms 7.4.0 → 7.5.0

package/src/fields/RadioGroup/RadioGroup.stories.tsx

@@ -1,8 +1,10 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { Label, Paragraph, RadioGroup as TamaguiRadioGroup, Text, XStack, YStack } from "tamagui";
+import { Preset } from "@multiplatform.one/theme";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { RadioGroup } from "./index";
@@ -215,21 +217,27 @@ export const WithChildren: Story = {
   ),
 };
 
+/**
+ * Radio disc is R-IDENTITY: `pointy` and `borderRadius:none` leave it round
+ * (Clay 2026-08-28; checkbox is the inverse).
+ */
 export const Pointy: Story = {
+  name: "Identity (always round)",
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <RadioGroup
-        label="Pointy (hard angles)"
+        label="pointy prop (ignored — disc stays round)"
         pointy
         options={sampleOptions}
         defaultValue="option1"
       />
-      <RadioGroup
-        label="Regular (default)"
-        pointy={false}
-        options={sampleOptions}
-        defaultValue="option1"
-      />
+      <Preset overrides={{ borderRadius: "none" }}>
+        <RadioGroup
+          label="borderRadius none (disc stays round)"
+          options={sampleOptions}
+          defaultValue="option1"
+        />
+      </Preset>
     </YStack>
   ),
 };
@@ -337,3 +345,30 @@ export const Comparison: Story = {
 export const SkeletonState: Story = {
   render: () => <RadioGroup label="Notification Preference" options={sampleOptions} skeleton />,
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "option1" },
+      { id: "2", label: "Beta", value: "option2" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "RadioGroup",
+        field: "radiogroup",
+        fieldProps: { options: sampleOptions },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/RadioGroup/index.tsx

@@ -3,6 +3,7 @@ import { useCallback, useRef, useState } from "react";
 import {
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
+  radiusClassProps,
   useReadableTextOn,
   wasKeyboardFocus,
   type ControlStateProps,
@@ -47,6 +48,14 @@ import {
 /** Minimum pressable target for an individual radio control (WCAG 2.5.5 / SP-FIXED). */
 const radioTargetSize = 44;
 
+/**
+ * Radio disc is R-IDENTITY (Clay 2026-08-28): always a circle, including at
+ * `borderRadius:none`. Checkbox is the inverse (never circular). The 44px
+ * hit target stays transparent; this radius is the visible glyph + pip.
+ */
+const radioDiscRadius = 1000;
+const radioDiscIdentity = radiusClassProps("R-IDENTITY", "radio disc");
+
 // The pressable/focusable role=radio element is a 44px transparent target;
 // the visible circle is the inner RadioGlyph. Sizing the target (not the
 // glyph) keeps visual density while flooring the touch target.
@@ -81,6 +90,10 @@ const RadioGlyph = styled(View, {
   borderColor: formControlColors.boundary,
   alignItems: "center",
   justifyContent: "center",
+  // Paint-only: on RN the inner View / indicator steals the responder from
+  // the 44px role=radio frame (same steal as CheckboxGlyphBox). `none` lets
+  // the press reach RadioItemFrame.
+  pointerEvents: "none",
   variants: {
     size: {
       "...size": (val: SizeTokens) => {
@@ -102,6 +115,7 @@ const RadioGlyph = styled(View, {
 const radioRingWidth = (knobBorderWidth: number | undefined) => Math.max(knobBorderWidth ?? 1, 2);
 
 const RadioIndicatorFrame = styled(TamaguiRadioGroup.Indicator, {
+  pointerEvents: "none",
   borderRadius: 1000,
   // Primer / Spectrum inner mark on a FILLED disc (LC-71 selected=fill): the
   // inverse center is ~1/3 of the outer control (Primer radial-gradient 33%,
@@ -149,7 +163,10 @@ export interface RadioGroupProps {
     "value" | "defaultValue" | "id" | "onValueChange" | "children"
   >;
   children?: ReactNode;
-  /** Force hard-angled radio buttons. Defaults to `true` when the theme knob `borderRadius` is `"none"`. */
+  /**
+   * Ignored. The radio disc is R-IDENTITY (always round), including at
+   * `borderRadius:none`. Kept so existing callers do not type-error.
+   */
   pointy?: boolean;
   /** When true, renders a skeleton placeholder instead of the radio group */
   skeleton?: boolean;
@@ -170,8 +187,6 @@ interface RadioOptionItemProps {
   a11y?: { "aria-labelledby"?: string; "aria-describedby"?: string };
   selected: boolean;
   isTabStop?: boolean;
-  itemRadius: number;
-  indicatorRadius: number;
   knobProps: KnobProps;
   control: KnobRecipe<ControlStateProps>;
   disabledChrome?: DisabledChromeProps;
@@ -191,8 +206,6 @@ function RadioOptionItem({
   a11y,
   selected,
   isTabStop,
-  itemRadius,
-  indicatorRadius,
   knobProps,
   control,
   disabledChrome,
@@ -228,7 +241,8 @@ function RadioOptionItem({
     <RadioGlyph
       size={knobProps.sizeToken as SizeTokens}
       borderWidth={radioRingWidth(knobProps.borderRadius.borderWidth)}
-      borderRadius={itemRadius}
+      borderRadius={radioDiscRadius}
+      {...radioDiscIdentity}
       outlined={knobProps.outlined}
       // Direct props (not a selected variant): fill must win over hover/press
       // fragments the way ToggleGroup's selected fill does.
@@ -239,7 +253,7 @@ function RadioOptionItem({
       {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
     >
       <RadioIndicatorFrame
-        borderRadius={indicatorRadius}
+        borderRadius={radioDiscRadius}
         backgroundColor={onMark ?? "$color1"}
         {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
       />
@@ -255,7 +269,7 @@ function RadioOptionItem({
       // tab stops. Only the checked radio (or the first enabled one when
       // none is checked) stays in the page tab order; arrows move + select.
       {...(isWeb && isTabStop !== undefined ? { tabIndex: isTabStop ? 0 : -1 } : undefined)}
-      borderRadius={itemRadius === 0 ? 0 : 1000}
+      borderRadius={radioDiscRadius}
       transition={knobProps.transition}
       disabled={groupDisabled || option.disabled}
       // LC-40 DISABLED-VISIBLE: ring is text-free chrome — dim it while the
@@ -295,7 +309,7 @@ function RadioOptionItem({
       ref={isWeb ? frameRef : undefined}
     >
       {elevationWrapperProps.elevation ? (
-        <View {...elevationWrapperProps} borderRadius={itemRadius}>
+        <View {...elevationWrapperProps} borderRadius={radioDiscRadius} pointerEvents="none">
           {glyph}
         </View>
       ) : (
@@ -327,7 +341,6 @@ export function RadioGroup({
   orientation = "vertical",
   radioGroupProps,
   children,
-  pointy,
   skeleton,
   compact,
   card,
@@ -345,9 +358,6 @@ export function RadioGroup({
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
-  const resolvedPointy = pointy ?? knobProps.pointy;
-  const itemRadius = resolvedPointy ? 0 : 1000;
-  const indicatorRadius = resolvedPointy ? 0 : 1000;
   // Uncontrolled state for card-mode whole-card press (and standalone use) —
   // without this, card body presses only fire parent handlers while Tamagui's
   // defaultValue-driven group stays stale.
@@ -384,7 +394,7 @@ export function RadioGroup({
   // Render skeleton placeholder
   if (skeleton) {
     // Mirror the real anatomy (LC-20 SKELETON-MIRRORS-ANATOMY): each row is a
-    // 20px control at the same radius the real radio uses (pill / pointy-0),
+    // 20px circular disc (R-IDENTITY — never squares at none / pointy),
     // then a label bar separated by the real control↔label gap. Label widths
     // are DETERMINISTIC per index (never %, never random): a percentage width
     // inside an auto-width horizontal row resolves against a width computed
@@ -406,10 +416,10 @@ export function RadioGroup({
                 justifyContent="center"
               >
                 <Skeleton
-                  variant={itemRadius === 0 ? "rounded" : "circular"}
+                  variant="circular"
                   width={20}
                   height={20}
-                  borderRadius={itemRadius}
+                  borderRadius={radioDiscRadius}
                 />
               </View>
               <Skeleton variant="text" width={labelWidths[i % labelWidths.length]} height={14} />
@@ -433,8 +443,6 @@ export function RadioGroup({
       a11y={a11y}
       selected={!!selected}
       isTabStop={isTabStop}
-      itemRadius={itemRadius}
-      indicatorRadius={indicatorRadius}
       knobProps={knobProps}
       control={control}
       disabledChrome={disabledState.chromeKnobProps}

package/src/fields/Rating/Rating.spec.tsx

@@ -11,6 +11,7 @@ import { configWithoutAnimations } from "@tamagui/config";
 import { animationsCSS } from "@tamagui/config/v5-css";
 import { TamaguiProvider, createTamagui } from "tamagui";
 import { Form } from "../../Form";
+import { TableCellContext } from "../../shared/tableCellContext";
 import { Rating } from "./index";
 
 const MockStarIcon = ({ size, weight, color }: { size: number; weight: string; color: string }) => (
@@ -126,7 +127,7 @@ describe("Rating", () => {
     // resolves the shared accent mark token; the empty star stays neutral
     // chrome. Stock test themes carry no $accentBackground, so mount the
     // house builder themes for real resolution.
-    it("fills selected stars with the accent mark and empty stars with neutral chrome", () => {
+    it("fills selected stars with the accent mark and empty stars with boundary chrome", () => {
       const { container } = render(
         <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
           <Rating label="Rate" value={0.6} starIcon={MockStarIcon} />
@@ -138,6 +139,10 @@ describe("Rating", () => {
       expect(empty).toBeTruthy();
       expect(filled!.getAttribute("data-color")).toContain("accentBackground");
       expect(empty!.getAttribute("data-color")).not.toContain("accentBackground");
+      // DF-06 / WCAG 1.4.11: empty stars are graphical objects — $color7 is
+      // below the 3:1 boundary floor; the empty ring uses the same boundary
+      // token as Radio.
+      expect(empty!.getAttribute("data-color")).toContain("color10");
     });
 
     // Material Rating is a radio group: one checked value, stars 1..N fill as
@@ -229,6 +234,59 @@ describe("Rating", () => {
       fireEvent.keyDown(star2, { key: "ArrowRight" });
       expect(onChange).toHaveBeenCalledWith(0.6);
     });
+
+    it("Home and End commit the first and last star", () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Rating label="Kbd" value={0.4} starIcon={MockStarIcon} onChange={onChange} />,
+      );
+      const star2 = result.container.querySelector("[data-rating-index='2']") as HTMLElement;
+      fireEvent.keyDown(star2, { key: "Home" });
+      expect(onChange).toHaveBeenCalledWith(0.2);
+      fireEvent.keyDown(star2, { key: "End" });
+      expect(onChange).toHaveBeenCalledWith(1);
+    });
+
+    it("clamps a negative value to zero filled stars", () => {
+      const result = renderWithProviders(<Rating label="Neg" value={-2} starIcon={MockStarIcon} />);
+      expect(result.container.querySelectorAll("[data-rating-star='filled']").length).toBe(0);
+      expect(result.container.querySelectorAll("[data-rating-star='empty']").length).toBe(5);
+    });
+
+    it("renders no stars when maxStars is not positive", () => {
+      const result = renderWithProviders(
+        <Rating label="None" value={1} maxStars={0} starIcon={MockStarIcon} />,
+      );
+      expect(result.container.querySelectorAll("[data-rating-star]").length).toBe(0);
+    });
+
+    it("squares star wells when pointy and rounds them otherwise", () => {
+      const pointed = renderWithProviders(
+        <Rating label="Pointy" value={0.6} pointy starIcon={MockStarIcon} />,
+      );
+      expect(
+        pointed.container.querySelector("[data-rating-row]")?.getAttribute("data-rating-pointy"),
+      ).toBe("true");
+      const rounded = renderWithProviders(
+        <Rating label="Round" value={0.6} pointy={false} starIcon={MockStarIcon} />,
+      );
+      expect(
+        rounded.container.querySelector("[data-rating-row]")?.getAttribute("data-rating-pointy"),
+      ).toBeNull();
+    });
+
+    it("does not grow 44px wells or paint a live value inside a table cell", () => {
+      const result = renderWithProviders(
+        <TableCellContext.Provider value={{ inTableCell: true, isHeader: false, editable: true }}>
+          <Rating label="Score" value={0.6} starIcon={MockStarIcon} />
+        </TableCellContext.Provider>,
+      );
+      const row = result.container.querySelector("[data-rating-row]");
+      expect(row?.getAttribute("data-rating-cell")).toBe("true");
+      expect(result.container.querySelector("[data-rating-value]")).toBeNull();
+      expect(result.container.querySelector("[data-rating-grow]")).toBeNull();
+      expect(result.container.querySelector("label")).toBeNull();
+    });
   });
 
   describe("with form context", () => {
@@ -253,5 +311,17 @@ describe("Rating", () => {
       expect(onChange).not.toHaveBeenCalled();
       expect(result.container.querySelector("[data-rating-row]")?.getAttribute("role")).toBe("img");
     });
+
+    it("commits through the canonical onChange when a star is pressed", () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Form formOptions={{ defaultValues: { rating: 0.2 } }} submitText="Submit">
+          <Rating name="rating" label="Rate" starIcon={MockStarIcon} onChange={onChange} />
+        </Form>,
+      );
+      const star = result.container.querySelector("[data-rating-index='4']") as HTMLElement;
+      fireEvent.click(star);
+      expect(onChange).toHaveBeenCalledWith(0.8);
+    });
   });
 });

package/src/fields/Rating/Rating.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { StarIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
@@ -233,3 +234,30 @@ export const Interactive: Story = {
 export const SkeletonState: Story = {
   render: () => <Rating label="Rating" skeleton starIcon={StarIcon} />,
 };
+
+type InTableRow = { id: string; label: string; value: number };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: 4 },
+      { id: "2", label: "Beta", value: 3 },
+      { id: "3", label: "Gamma", value: 0 },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Rating",
+        field: "rating",
+        fieldProps: { maxRating: 5 },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/Rating/index.tsx

@@ -27,9 +27,11 @@ import {
 import { Path, Svg } from "react-native-svg";
 import { Skeleton } from "../../Skeleton";
 import { StarInk } from "./StarInk";
+import { filledCount } from "./ratingMath";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
-import { formSelectedColors } from "../../shared/colorRamps";
+import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
+import { useIsInTableCell } from "../../shared/tableCellContext";
 import {
   getFieldError,
   mergeFieldHandler,
@@ -38,6 +40,8 @@ import {
 } from "../../shared/utils";
 import type { AnyFormApi } from "../../types";
 
+export { filledCount } from "./ratingMath";
+
 /** Visual glyph follows the size token (Material small/medium/large). Floor 16. */
 function starGlyphSize(sizeToken: SizeTokens | string | undefined): number {
   const token = (sizeToken ?? "$4") as SizeTokens;
@@ -46,13 +50,6 @@ function starGlyphSize(sizeToken: SizeTokens | string | undefined): number {
   return Math.max(16, Math.round(control * 0.55));
 }
 
-function filledCount(value: number, maxStars: number): number {
-  if (!(maxStars > 0)) return 0;
-  const n = Math.round(value * maxStars);
-  if (!Number.isFinite(n)) return 0;
-  return Math.max(0, Math.min(maxStars, n));
-}
-
 function starPath(size: number, innerRatio = 0.382): string {
   const cx = size / 2;
   const cy = size / 2;
@@ -179,6 +176,7 @@ function StarRow({
   hasError,
   starSize,
   pointy,
+  inTableCell,
 }: {
   id?: string;
   filledStars: number;
@@ -194,6 +192,7 @@ function StarRow({
   hasError?: boolean;
   starSize: number;
   pointy: boolean;
+  inTableCell?: boolean;
 }) {
   const { disabledState } = useResolvedKnobs();
   const describedBy = useFieldDescribedBy();
@@ -225,6 +224,7 @@ function StarRow({
   const tabStopStar = focusedStar ?? Math.min(Math.max(filledStars, 1), Math.max(maxStars, 1));
   const starOutset = Math.max(0, (MIN_PRESS_TARGET - starSize) / 2);
   const itemRadius = pointy ? 0 : 1000;
+  const growPressTarget = !inTableCell;
   const valueLabel = t("{{star}} of {{max}} stars", { star: displayFilled, max: maxStars });
   const focusStar = (starNumber: number) => {
     starRefs.current[starNumber - 1]?.focus?.();
@@ -307,6 +307,8 @@ function StarRow({
       data-rating-row
       data-rating-live={live ? "true" : undefined}
       data-rating-glyph={starSize}
+      data-rating-cell={inTableCell ? "true" : undefined}
+      data-rating-pointy={pointy ? "true" : undefined}
       {...(isWeb && !disabled && !readOnly
         ? {
             onPointerMove: ((e: any) => {
@@ -360,9 +362,14 @@ function StarRow({
             aria-disabled={disabled || undefined}
             aria-checked={isChecked}
             borderRadius={itemRadius}
-            {...pressTargetStyle()}
-            marginHorizontal={-starOutset}
-            marginVertical={-starOutset}
+            {...(growPressTarget
+              ? {
+                  ...pressTargetStyle(),
+                  marginHorizontal: -starOutset,
+                  marginVertical: -starOutset,
+                  "data-rating-grow": "true" as const,
+                }
+              : {})}
             hitSlop={pressTargetHitSlop(starSize)}
             // Keyboard: roving tabindex + Enter/Space + arrows select (native
             // radio). Disabled drops out of the tab order.
@@ -400,14 +407,8 @@ function StarRow({
           </StarWrapper>
         );
       })}
-      {maxStars > 0 ? (
-        <SizableText
-          {...knobProps.label}
-          {...knobProps.body}
-          aria-hidden
-          userSelect="none"
-          data-rating-value
-        >
+      {!inTableCell && maxStars > 0 ? (
+        <SizableText {...knobProps.body} aria-hidden userSelect="none" data-rating-value>
           {valueLabel}
         </SizableText>
       ) : null}
@@ -472,6 +473,7 @@ export function Rating({
   compact,
 }: RatingProps) {
   const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const inTableCell = useIsInTableCell();
   const resolvedPointy = pointy ?? knobProps.pointy;
   // Sane bare default (UX-009): an omitted starIcon renders the package star
   // instead of an invalid element crash on rounded themes.
@@ -488,10 +490,15 @@ export function Rating({
   // (D-01). The empty star stays neutral: it marks nothing.
   const theme = useTheme();
   const markToken = formSelectedColors.mark.slice(1);
+  const emptyToken = formControlColors.boundary.slice(1);
   const filledColor = getVariable(
     (theme as any)[markToken]?.get("web") ?? theme.color10?.get("web") ?? theme.color?.get("web"),
   );
-  const emptyColor = getVariable(theme.color7?.get("web") ?? theme.color?.get("web"));
+  // DF-06 / WCAG 1.4.11: empty stars are graphical objects. $color7 is below
+  // the 3:1 boundary floor; Radio's empty ring uses the same boundary token.
+  const emptyColor = getVariable(
+    (theme as any)[emptyToken]?.get("web") ?? theme.color10?.get("web") ?? theme.color?.get("web"),
+  );
 
   const handleStarPress = (
     starIndex: number,
@@ -506,7 +513,12 @@ export function Rating({
   // Render skeleton placeholder
   if (skeleton) {
     return (
-      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
+      <FieldLayout
+        id={id}
+        label={inTableCell ? undefined : label}
+        size={size}
+        knobProps={knobProps}
+      >
         <XStack {...knobProps.gap} alignItems="center">
           {Array.from({ length: maxStars }, (_, i) => (
             <Skeleton
@@ -526,10 +538,10 @@ export function Rating({
     return (
       <FieldLayout
         id={id}
-        label={label}
+        label={inTableCell ? undefined : label}
         labelProps={labelProps}
         error={error}
-        helperText={helperText}
+        helperText={inTableCell ? undefined : helperText}
         required={required}
         size={size}
         knobProps={knobProps}
@@ -553,6 +565,7 @@ export function Rating({
           hasError={!!error}
           starSize={starSize}
           pointy={!!resolvedPointy}
+          inTableCell={inTableCell}
         />
       </FieldLayout>
     );
@@ -572,10 +585,10 @@ export function Rating({
         return (
           <FieldLayout
             id={id}
-            label={label}
+            label={inTableCell ? undefined : label}
             labelProps={labelProps}
             error={resolvedError}
-            helperText={helperText}
+            helperText={inTableCell ? undefined : helperText}
             required={required}
             size={size}
             knobProps={knobProps}
@@ -603,6 +616,7 @@ export function Rating({
               hasError={!!resolvedError}
               starSize={starSize}
               pointy={!!resolvedPointy}
+              inTableCell={inTableCell}
             />
           </FieldLayout>
         );

package/src/fields/Rating/ratingMath.spec.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { filledCount } from "./ratingMath";
+
+describe("filledCount", () => {
+  it("maps the 0–1 fraction onto discrete stars", () => {
+    expect(filledCount(0, 5)).toBe(0);
+    expect(filledCount(0.1, 5)).toBe(1);
+    expect(filledCount(0.5, 5)).toBe(3);
+    expect(filledCount(1, 5)).toBe(5);
+    expect(filledCount(0.5, 3)).toBe(2);
+  });
+
+  it("clamps overflow, negatives, and non-finite values", () => {
+    expect(filledCount(3, 5)).toBe(5);
+    expect(filledCount(-1, 5)).toBe(0);
+    expect(filledCount(Number.NaN, 5)).toBe(0);
+    expect(filledCount(Number.POSITIVE_INFINITY, 5)).toBe(5);
+  });
+
+  it("returns zero stars when maxStars is not positive", () => {
+    expect(filledCount(1, 0)).toBe(0);
+    expect(filledCount(1, -2)).toBe(0);
+  });
+});

package/src/fields/Rating/ratingMath.ts

@@ -0,0 +1,14 @@
+/**
+ * Map a 0–1 rating fraction onto a discrete filled-star count.
+ * Overflow, negatives, and non-finite values clamp; a non-positive
+ * `maxStars` is zero stars (no crash).
+ */
+export function filledCount(value: number, maxStars: number): number {
+  if (!(maxStars > 0)) return 0;
+  if (!Number.isFinite(value)) {
+    return value > 0 ? maxStars : 0;
+  }
+  const n = Math.round(value * maxStars);
+  if (!Number.isFinite(n)) return 0;
+  return Math.max(0, Math.min(maxStars, n));
+}