@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/cjs/fields/Rating/StarInk.native.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var StarInk_native_exports = {};
+__export(StarInk_native_exports, {
+  StarInk: () => StarInk,
+  inkMotionProps: () => inkMotionProps
+});
+module.exports = __toCommonJS(StarInk_native_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_tamagui = require("tamagui");
+function inkMotionProps(transition) {
+  return transition ? {
+    transition: {
+      opacity: transition
+    }
+  } : {};
+}
+function StarInk(param) {
+  var {
+    StarIcon,
+    size,
+    filled,
+    filledColor,
+    emptyColor,
+    transition
+  } = param;
+  var motion = inkMotionProps(transition);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    width: size,
+    height: size,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      "data-rating-ink": "empty",
+      opacity: filled ? 0 : 1,
+      ...motion,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(StarIcon, {
+        size,
+        weight: "regular",
+        color: emptyColor
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      "data-rating-ink": "filled",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      opacity: filled ? 1 : 0,
+      ...motion,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(StarIcon, {
+        size,
+        weight: "fill",
+        color: filledColor
+      })
+    })]
+  });
+}
+//# sourceMappingURL=StarInk.native.js.map

package/dist/cjs/fields/Rating/StarInk.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StarInk_native_exports","__export","StarInk","inkMotionProps","module","exports","__toCommonJS","import_jsx_runtime","require","import_tamagui","transition","opacity","param","StarIcon","size","filled","filledColor","emptyColor","motion","jsxs","View","width","height","children","jsx","weight","color","position","top","left"],"sources":["../../../../src/fields/Rating/StarInk.native.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,sBAAA;AAAAC,QAAA,CAAAD,sBAAA;EAAAE,OAAA,EAAAA,CAAA,KAAAA,OAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAC,YAAA,CAAAN,sBAAA;AAAA,IAAAO,kBAAA,GAA2CC,OAAA;AAC3C,IAAAC,cAAA,GAAqBD,OAAA;AAaV,SAASL,eAAeO,UAAA,EAAY;EAK3C,OAAOA,UAAA,GAAa;IAChBA,UAAA,EAAY;MACRC,OAAA,EAASD;IACb;EACJ,IAAI,CAAC;AACT;AAyBW,SAASR,QAAQU,KAAA,EAAO;EAC/B,IAAI;IAAEC,QAAA;IAAUC,IAAA;IAAMC,MAAA;IAAQC,WAAA;IAAaC,UAAA;IAAYP;EAAW,IAAIE,KAAA;EACtE,IAAIM,MAAA,GAASf,cAAA,CAAeO,UAAU;EACtC,OAAqB,mBAAAH,kBAAA,CAAAY,IAAA,EAAMV,cAAA,CAAAW,IAAA,EAAM;IAC7BC,KAAA,EAAOP,IAAA;IACPQ,MAAA,EAAQR,IAAA;IACRS,QAAA,EAAU,CACQ,mBAAAhB,kBAAA,CAAAiB,GAAA,EAAKf,cAAA,CAAAW,IAAA,EAAM;MACrB,mBAAmB;MACnBT,OAAA,EAASI,MAAA,GAAS,IAAI;MACtB,GAAGG,MAAA;MACHK,QAAA,EAAwB,mBAAAhB,kBAAA,CAAAiB,GAAA,EAAKX,QAAA,EAAU;QACnCC,IAAA;QACAW,MAAA,EAAQ;QACRC,KAAA,EAAOT;MACX,CAAC;IACL,CAAC,GACa,mBAAAV,kBAAA,CAAAiB,GAAA,EAAKf,cAAA,CAAAW,IAAA,EAAM;MACrB,mBAAmB;MACnBO,QAAA,EAAU;MACVC,GAAA,EAAK;MACLC,IAAA,EAAM;MACNlB,OAAA,EAASI,MAAA,GAAS,IAAI;MACtB,GAAGG,MAAA;MACHK,QAAA,EAAwB,mBAAAhB,kBAAA,CAAAiB,GAAA,EAAKX,QAAA,EAAU;QACnCC,IAAA;QACAW,MAAA,EAAQ;QACRC,KAAA,EAAOV;MACX,CAAC;IACL,CAAC;EAET,CAAC;AACL","ignoreList":[]}

package/dist/cjs/fields/Rating/index.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all) __defProp(target, name, {
@@ -19,15 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
@@ -37,16 +26,30 @@ __export(Rating_exports, {
 });
 module.exports = __toCommonJS(Rating_exports);
 var import_theme = require("@multiplatform.one/theme");
+var import_get_token = require("@tamagui/get-token");
 var import_react = require("@phosphor-icons/react");
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
-var import_react_native_svg = __toESM(require("react-native-svg"));
+var import_react_native_svg = require("react-native-svg");
 var import_Skeleton = require("../../Skeleton/index.cjs");
+var import_StarInk = require("./StarInk.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+function starGlyphSize(sizeToken) {
+  const token = sizeToken ?? "$4";
+  const control = Number((0, import_tamagui.getVariableValue)((0, import_get_token.getSize)(token)));
+  if (!Number.isFinite(control) || control <= 0) return 24;
+  return Math.max(16, Math.round(control * 0.55));
+}
+function filledCount(value, maxStars) {
+  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, innerRatio = 0.382) {
   const cx = size / 2;
   const cy = size / 2;
@@ -66,7 +69,7 @@ function PointyStar({
   color
 }) {
   const d = starPath(size);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native_svg.default, {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native_svg.Svg, {
     width: size,
     height: size,
     viewBox: `0 0 ${size} ${size}`,
@@ -108,20 +111,30 @@ function ensureRatingInkStyles() {
   document.head.appendChild(style);
 }
 const StarWrapper = (0, import_tamagui.styled)(import_tamagui.View, {
+  alignItems: "center",
+  justifyContent: "center",
+  outlineWidth: 0,
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0
+  },
   variants: {
-    filled: {
+    // Material iconActive: only the hovered/focused star scales — never a
+    // spin on every filled star.
+    active: {
       true: {
-        scale: 1.1,
-        rotate: "72deg"
+        scale: 1.12
       },
       false: {
-        scale: 1,
-        rotate: "0deg"
+        scale: 1
       }
     }
   }
 });
 function StarRow({
+  id,
   filledStars,
   maxStars,
   disabled,
@@ -132,60 +145,105 @@ function StarRow({
   filledColor,
   emptyColor,
   required,
-  hasError
+  hasError,
+  starSize,
+  pointy
 }) {
   const {
-    disabledState,
-    control
+    disabledState
   } = (0, import_theme.useResolvedKnobs)();
+  const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  const fieldA11y = (0, import_fieldLayout.useFieldA11y)();
   const [scrubFilled, setScrubFilled] = (0, import_react2.useState)(null);
   const scrubbing = scrubFilled != null;
   const displayFilled = scrubFilled ?? filledStars;
   const motionTransition = knobProps.transition;
   const live = scrubbing;
+  const allowMotion = Boolean(motionTransition);
   ensureRatingInkStyles();
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
   const inkToken = import_tamagui.isWeb && !live && motionTransition ? motionTransition in cssTimings ? motionTransition : "quick" : void 0;
   const starRefs = (0, import_react2.useRef)([]);
   const [focusedStar, setFocusedStar] = (0, import_react2.useState)(null);
-  const tabStopStar = focusedStar ?? Math.min(Math.max(filledStars, 1), maxStars);
+  const [kbFocusStar, setKbFocusStar] = (0, import_react2.useState)(null);
+  const tabStopStar = focusedStar ?? Math.min(Math.max(filledStars, 1), Math.max(maxStars, 1));
+  const starOutset = Math.max(0, (import_theme.MIN_PRESS_TARGET - starSize) / 2);
+  const itemRadius = pointy ? 0 : 1e3;
+  const valueLabel = (0, import_t.t)("{{star}} of {{max}} stars", {
+    star: displayFilled,
+    max: maxStars
+  });
   const focusStar = starNumber => {
     starRefs.current[starNumber - 1]?.focus?.();
   };
+  const commitStar = starNumber => {
+    if (!readOnly) onStarPress(starNumber);
+  };
   const handleStarKeyDown = (event, starNumber) => {
     const key = event.key;
     if (key === "Enter" || key === " " || event.code === "Space") {
       event.preventDefault();
       event.stopPropagation();
-      if (!readOnly) onStarPress(starNumber);
+      commitStar(starNumber);
     } else if (key === "ArrowRight" || key === "ArrowUp") {
       event.preventDefault();
-      focusStar(Math.min(starNumber + 1, maxStars));
+      const next = Math.min(starNumber + 1, maxStars);
+      focusStar(next);
+      commitStar(next);
     } else if (key === "ArrowLeft" || key === "ArrowDown") {
       event.preventDefault();
-      focusStar(Math.max(starNumber - 1, 1));
+      const next = Math.max(starNumber - 1, 1);
+      focusStar(next);
+      commitStar(next);
     } else if (key === "Home") {
       event.preventDefault();
       focusStar(1);
+      commitStar(1);
     } else if (key === "End") {
       event.preventDefault();
       focusStar(maxStars);
+      commitStar(maxStars);
     }
   };
   const starFromPointer = (clientX, row) => {
     if (!row) return null;
-    const rect = row.getBoundingClientRect();
-    if (rect.width <= 0) return null;
-    const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+    const stars = row.querySelectorAll("[data-rating-star]");
+    if (stars.length === 0) return null;
+    const first = stars[0]?.getBoundingClientRect();
+    const last = stars[stars.length - 1]?.getBoundingClientRect();
+    if (!first || !last) return null;
+    const width = last.right - first.left;
+    if (width <= 0) return null;
+    const ratio = Math.min(1, Math.max(0, (clientX - first.left) / width));
     return Math.max(1, Math.ceil(ratio * maxStars));
   };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+  const glyph = isFilled => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_StarInk.StarInk, {
+    StarIcon,
+    size: starSize,
+    filled: isFilled,
+    filledColor,
+    emptyColor,
+    transition: live ? void 0 : motionTransition
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    id,
     ...knobProps.gap,
     alignItems: "center",
-    "aria-required": required || void 0,
-    "aria-invalid": hasError || void 0,
+    role: readOnly ? "img" : "radiogroup",
+    "aria-label": readOnly ? valueLabel : void 0,
+    "aria-required": !readOnly && required ? true : void 0,
+    "aria-invalid": !readOnly && hasError ? true : void 0,
+    "aria-disabled": disabled || void 0,
     "aria-readonly": readOnly || void 0,
+    "aria-describedby": describedBy,
+    ...(!import_tamagui.isWeb ? {
+      accessible: true,
+      accessibilityLabel: fieldA11y?.label ?? valueLabel,
+      accessibilityHint: fieldA11y?.description
+    } : {}),
     "data-rating-row": true,
     "data-rating-live": live ? "true" : void 0,
+    "data-rating-glyph": starSize,
     ...(import_tamagui.isWeb && !disabled && !readOnly ? {
       onPointerMove: e => {
         const row = e.currentTarget;
@@ -197,33 +255,55 @@ function StarRow({
         setScrubFilled(null);
       }
     } : {}),
-    children: Array.from({
-      length: maxStars
+    children: [Array.from({
+      length: Math.max(0, maxStars)
     }, (_, i) => {
       const starNumber = i + 1;
       const isFilled = starNumber <= displayFilled;
+      const isChecked = filledStars > 0 && starNumber === filledStars;
+      const isActive = allowMotion && (scrubbing ? starNumber === displayFilled : starNumber === focusedStar);
+      const showRing = kbFocusStar === starNumber;
+      if (readOnly) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          width: starSize,
+          height: starSize,
+          "data-rating-star": isFilled ? "filled" : "empty",
+          "data-rating-index": starNumber,
+          children: glyph(isFilled)
+        }, starNumber);
+      }
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(StarWrapper, {
         ref: node => {
           starRefs.current[i] = node;
         },
-        onPress: () => !readOnly && onStarPress(starNumber),
-        cursor: readOnly ? "default" : "pointer",
+        onPress: () => onStarPress(starNumber),
+        cursor: disabled ? "default" : "pointer",
         ...(disabled ? disabledState.chromeKnobProps : void 0),
-        filled: isFilled,
-        role: "button",
+        active: isActive,
+        role: "radio",
         "aria-label": (0, import_t.t)("{{star}} of {{max}} stars", {
           star: starNumber,
           max: maxStars
         }),
         "aria-disabled": disabled || void 0,
-        "aria-pressed": isFilled,
+        "aria-checked": isChecked,
+        borderRadius: itemRadius,
+        ...(0, import_theme.pressTargetStyle)(),
+        marginHorizontal: -starOutset,
+        marginVertical: -starOutset,
+        hitSlop: (0, import_theme.pressTargetHitSlop)(starSize),
         ...(import_tamagui.isWeb && !disabled ? {
           tabIndex: starNumber === tabStopStar ? 0 : -1,
-          onFocus: () => setFocusedStar(starNumber),
-          onBlur: () => setFocusedStar(null),
+          onFocus: () => {
+            setFocusedStar(starNumber);
+            if ((0, import_theme.wasKeyboardFocus)()) setKbFocusStar(starNumber);
+          },
+          onBlur: () => {
+            setFocusedStar(prev => prev === starNumber ? null : prev);
+            setKbFocusStar(prev => prev === starNumber ? null : prev);
+          },
           onKeyDown: e => handleStarKeyDown(e, starNumber)
         } : {}),
-        focusVisibleStyle: control.focusVisibleKnobProps,
         ...(!import_tamagui.isWeb ? {
           accessible: true
         } : {}),
@@ -236,13 +316,24 @@ function StarRow({
           className: inkClassName(inkToken)
         } : void 0),
         style: getTransitionStyle(live ? void 0 : motionTransition, live),
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(StarIcon, {
-          size: 24,
-          weight: isFilled ? "fill" : "regular",
-          color: isFilled ? filledColor : emptyColor
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          borderRadius: itemRadius,
+          ...(showRing ? {
+            ...import_theme.keyboardFocusRingProps,
+            outlineOffset: 2,
+            "data-rating-ring": "true"
+          } : {}),
+          children: glyph(isFilled)
         })
       }, starNumber);
-    })
+    }), maxStars > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+      ...knobProps.label,
+      ...knobProps.body,
+      "aria-hidden": true,
+      userSelect: "none",
+      "data-rating-value": true,
+      children: valueLabel
+    }) : null]
   });
 }
 function Rating({
@@ -280,7 +371,9 @@ function Rating({
   const resolvedPointy = pointy ?? knobProps.pointy;
   const ResolvedStarIcon = resolvedPointy ? PointyStar : starIcon ?? import_react.StarIcon;
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
-  const filledStars = (0, import_react2.useMemo)(() => Math.round(value * maxStars), [value, maxStars]);
+  const sizeToken = size ?? knobProps.sizeToken;
+  const starSize = starGlyphSize(sizeToken);
+  const filledStars = (0, import_react2.useMemo)(() => filledCount(value, maxStars), [value, maxStars]);
   const theme = (0, import_tamagui.useTheme)();
   const markToken = import_colorRamps.formSelectedColors.mark.slice(1);
   const filledColor = (0, import_tamagui.getVariable)(theme[markToken]?.get("web") ?? theme.color10?.get("web") ?? theme.color?.get("web"));
@@ -302,9 +395,10 @@ function Rating({
         children: Array.from({
           length: maxStars
         }, (_, i) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-          variant: "rounded",
-          width: 24,
-          height: 24
+          variant: resolvedPointy ? "rounded" : "circular",
+          width: starSize,
+          height: starSize,
+          borderRadius: resolvedPointy ? 0 : void 0
         }, i))
       })
     });
@@ -322,6 +416,7 @@ function Rating({
       onBlur,
       disabled,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(StarRow, {
+        id,
         knobProps,
         filledStars,
         maxStars,
@@ -332,7 +427,9 @@ function Rating({
         filledColor,
         emptyColor,
         required,
-        hasError: !!error
+        hasError: !!error,
+        starSize,
+        pointy: !!resolvedPointy
       })
     });
   }
@@ -344,7 +441,7 @@ function Rating({
     children: field => {
       const resolvedError = (0, import_utils.getFieldError)(field, error);
       const fieldValue = field.state.value ?? 0;
-      const fieldFilledStars = Math.round(fieldValue * maxStars);
+      const fieldFilledStars = filledCount(fieldValue, maxStars);
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
         id,
         label,
@@ -357,10 +454,12 @@ function Rating({
         onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
         disabled,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(StarRow, {
+          id,
           knobProps,
           filledStars: fieldFilledStars,
           maxStars,
           disabled: !!disabled,
+          readOnly,
           onStarPress: i => handleStarPress(i, fieldFilledStars, v => {
             field.handleChange(v);
             onChange?.(v);
@@ -369,7 +468,9 @@ function Rating({
           filledColor,
           emptyColor,
           required,
-          hasError: !!resolvedError
+          hasError: !!resolvedError,
+          starSize,
+          pointy: !!resolvedPointy
         })
       });
     }