@multiplatform.one/forms 7.34.3 → 7.35.0

package/dist/cjs/MediaPicker/useMediaPicker.cjs

@@ -0,0 +1,57 @@
+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 useMediaPicker_exports = {};
+__export(useMediaPicker_exports, {
+  useMediaPicker: () => useMediaPicker
+});
+module.exports = __toCommonJS(useMediaPicker_exports);
+var import_react = require("react");
+var import_pickMedia = require("./pickMedia.cjs");
+var import_types = require("./types.cjs");
+function useMediaPicker() {
+  const active = (0, import_react.useRef)(null);
+  const mounted = (0, import_react.useRef)(true);
+  const [pending, setPending] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      active.current?.abort();
+    };
+  }, []);
+  const pick = (0, import_react.useCallback)(options => {
+    if (!mounted.current) return Promise.resolve(null);
+    if (active.current) return Promise.reject(new import_types.MediaPickerError("busy", "An image picker is already open.", options.source));
+    const controller = new AbortController();
+    active.current = controller;
+    setPending(true);
+    return (0, import_pickMedia.pickMedia)(options, controller.signal).finally(() => {
+      active.current = null;
+      if (mounted.current) setPending(false);
+    });
+  }, []);
+  return {
+    pick,
+    pending
+  };
+}

package/dist/cjs/MediaPicker/useMediaPicker.native.js

@@ -0,0 +1,61 @@
+"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 useMediaPicker_exports = {};
+__export(useMediaPicker_exports, {
+  useMediaPicker: () => useMediaPicker
+});
+module.exports = __toCommonJS(useMediaPicker_exports);
+var import_react = require("react");
+var import_pickMedia = require("./pickMedia.native.js");
+var import_types = require("./types.native.js");
+function useMediaPicker() {
+  var active = (0, import_react.useRef)(null);
+  var mounted = (0, import_react.useRef)(true);
+  var [pending, setPending] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(function () {
+    mounted.current = true;
+    return function () {
+      var _active_current;
+      mounted.current = false;
+      (_active_current = active.current) === null || _active_current === void 0 ? void 0 : _active_current.abort();
+    };
+  }, []);
+  var pick = (0, import_react.useCallback)(function (options) {
+    if (!mounted.current) return Promise.resolve(null);
+    if (active.current) return Promise.reject(new import_types.MediaPickerError("busy", "An image picker is already open.", options.source));
+    var controller = new AbortController();
+    active.current = controller;
+    setPending(true);
+    return (0, import_pickMedia.pickMedia)(options, controller.signal).finally(function () {
+      active.current = null;
+      if (mounted.current) setPending(false);
+    });
+  }, []);
+  return {
+    pick,
+    pending
+  };
+}
+//# sourceMappingURL=useMediaPicker.native.js.map

package/dist/cjs/MediaPicker/useMediaPicker.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","useMediaPicker_exports","__export","useMediaPicker","module","exports","import_react","require","import_pickMedia","import_types","active","useRef","mounted","pending","setPending","useState","useEffect","current","_active_current","abort","pick","useCallback","options","Promise","resolve","reject","MediaPickerError","source","controller","AbortController","pickMedia","signal","finally"],"sources":["../../../src/MediaPicker/useMediaPicker.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,sBAAA;AAAAC,QAAA,CAAAD,sBAAA;EAAAE,cAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAyD,CAAAK,sBAAA;AACzD,IAAAK,YAAA,GAAAC,OAA0B;AAC1B,IAAAC,gBAA0E,GAAAD,OAAA;AAEnE,IAAAE,YAAS,GAAAF,OAAiB;AAC/B,SAAMJ,cAASA,CAAA;EACf,IAAAO,MAAM,OAAAJ,YAAU,CAAAK,MAAA,MAAO;EACvB,IAAAC,OAAO,KAAS,EAAAN,YAAU,CAAAK,MAAI;EAC9B,KAAAE,OAAA,EAAAC,UAAA,IAAU,IAAAR,YAAM,CAAAS,QAAA;EACd,IAAAT,YAAQ,CAAAU,SAAU;IAClBJ,OAAO,CAAAK,OAAM;IACX,mBAAQ;MACR,IAAAC,eAAgB;MAClBN,OAAA,CAAAK,OAAA;MACE,CAACC,eAAA,GAAAR,MAAA,CAAAO,OAAA,cAAAC,eAAA,uBAAAA,eAAA,CAAAC,KAAA;IAEL;EACE,MAAI;EACJ,IAAAC,IAAI,KAAO,EAAAd,YAAA,CAAAe,WAAA,YAAAC,OAAA;IACT,KAAAV,OAAO,CAAAK,OAAQ,SAAAM,OAAA,CAAAC,OAAA;IAAA,IACbd,MAAI,CAAAO,OAAA,SAAAM,OAAA,CAAAE,MAAiB,KAAQhB,YAAA,CAAAiB,gBAAA,OAAoC,oCAAc,EAAAJ,OAAA,CAAAK,MAAA;IAAA,IACjFC,UAAA,OAAAC,eAAA;IACFnB,MAAM,CAAAO,OAAA,GAAAW,UAAiB;IACvBd,UAAO;IACP,WAAWN,gBAAI,CAAAsB,SAAA,EAAAR,OAAA,EAAAM,UAAA,CAAAG,MAAA,EAAAC,OAAA;MACftB,MAAA,CAAAO,OAAO;MACL,IAAAL,OAAO,CAAAK,OAAU,EAAAH,UAAA;IACjB;EAAqC,GACtC;EACH,OAAK;IAELM,IAAA;IACFP","ignoreList":[]}

package/dist/cjs/Skeleton/index.cjs

@@ -24,20 +24,25 @@ var Skeleton_exports = {};
 __export(Skeleton_exports, {
   Skeleton: () => Skeleton,
   SkeletonCircle: () => SkeletonCircle,
+  SkeletonGroup: () => SkeletonGroup,
   SkeletonText: () => SkeletonText
 });
 module.exports = __toCommonJS(Skeleton_exports);
+var import_react = require("react");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
+var import_i18n = require("../shared/i18n.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const SkeletonFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "Skeleton",
   backgroundColor: "$color5",
+  overflow: "hidden",
+  pointerEvents: "none",
+  flexShrink: 0,
   variants: {
     variant: {
       text: {
-        borderRadius: "$2",
-        height: 16
+        borderRadius: "$2"
       },
       circular: {
         borderRadius: 1e3
@@ -54,106 +59,183 @@ const SkeletonFrame = (0, import_tamagui.styled)(import_tamagui.View, {
     variant: "text"
   }
 });
-const SKELETON_SIZE_TOKENS = ["$3", "$4", "$5"];
+const SKELETON_SIZE_TOKENS = ["$3", "$4", "$true", "$5"];
 const skeletonCircleTokenUp = {
   $3: "$4",
   $4: "$5",
   $5: "$6"
 };
-function skeletonTextHeight(sizeToken) {
-  if (!SKELETON_SIZE_TOKENS.includes(sizeToken)) return void 0;
-  return (0, import_theme.sizeRecipeForToken)(sizeToken).fontSize + 2;
+function skeletonTextHeight(sizeToken, textSize = "body") {
+  const known = SKELETON_SIZE_TOKENS.includes(sizeToken) ? sizeToken : "$4";
+  const body = (0, import_theme.sizeRecipeForToken)(known).fontSize + 2;
+  return textSize === "display" ? body * 2 : body;
 }
 function skeletonCircleSize(sizeToken) {
   return (0, import_theme.sizeRecipeForToken)(skeletonCircleTokenUp[sizeToken] ?? "$5").height;
 }
-const skeletonGapMap = {
-  small: "$1",
-  medium: "$2",
-  large: "$3"
-};
 const PULSE_STYLE_ID = "__mp-skeleton-pulse";
+const PULSE_ANIMATION = "mp-skeleton-pulse 1.5s ease-in-out infinite";
 function ensurePulseKeyframes() {
   if (!import_tamagui.isWeb || typeof document === "undefined") return;
   if (document.getElementById(PULSE_STYLE_ID)) return;
   const style = document.createElement("style");
   style.id = PULSE_STYLE_ID;
-  style.textContent = "@keyframes skeleton-pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}";
+  style.textContent = ["@keyframes mp-skeleton-pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}", "@media (prefers-reduced-motion:reduce){.mp-skeleton-bone{animation:none!important}}", "@media (forced-colors:active){.mp-skeleton-bone{outline:1px solid transparent;outline-offset:-1px}}"].join("");
   document.head.appendChild(style);
 }
+const AnnounceCtx = (0, import_react.createContext)(true);
 function Skeleton({
   variant = "text",
   width,
   height,
   animate = true,
   style,
+  label,
+  className,
   ...props
 }) {
+  const {
+    t
+  } = (0, import_i18n.useTranslation)();
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  const pulsing = animate && knobProps.transition !== void 0;
-  if (pulsing) ensurePulseKeyframes();
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Skeleton"
+  });
+  const shouldAnnounce = (0, import_react.useContext)(AnnounceCtx);
+  const pulsing = Boolean(animate && knobProps.motion.control.transition);
+  if (import_tamagui.isWeb) ensurePulseKeyframes();
+  const decorative = props["aria-hidden"] === true || !shouldAnnounce;
+  const smoothingClass = variant === "text" || variant === "rounded" ? knobProps.borderRadius.className : void 0;
+  const boneClass = ["mp-skeleton-bone", pulsing ? "mp-skeleton-pulse" : "mp-skeleton-static", smoothingClass, className].filter(Boolean).join(" ");
   const mergedStyle = import_tamagui.isWeb && pulsing ? {
     ...style,
-    animation: "skeleton-pulse 1.5s ease-in-out infinite"
+    animation: PULSE_ANIMATION
   } : style;
+  const textHeight = variant === "text" ? skeletonTextHeight(knobProps.sizeToken) : void 0;
+  const resolvedHeight = height ?? textHeight;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SkeletonFrame, {
     variant,
     width,
-    height: height ?? (variant === "text" ? skeletonTextHeight(knobProps.sizeToken) : void 0),
+    height: resolvedHeight,
     ...(variant === "rounded" || variant === "text" ? {
       borderRadius: knobProps.borderRadius.borderRadius
     } : void 0),
     ...(variant === "circular" ? (0, import_theme.radiusClassProps)("R-PILL", "SkeletonCircle") : void 0),
     ...props,
+    ...(import_tamagui.isWeb ? {
+      className: boneClass
+    } : void 0),
     ...(mergedStyle ? {
       style: mergedStyle
-    } : void 0)
+    } : void 0),
+    pointerEvents: "none",
+    "data-skeleton": "",
+    "data-skeleton-variant": variant,
+    "data-animate": pulsing ? "true" : "false",
+    "data-width": width != null ? String(width) : void 0,
+    "data-height": resolvedHeight != null ? String(resolvedHeight) : void 0,
+    "aria-hidden": decorative ? true : void 0,
+    role: decorative ? void 0 : "status",
+    "aria-busy": decorative ? void 0 : true,
+    "aria-live": decorative ? void 0 : "polite",
+    "aria-label": decorative ? void 0 : label ?? t("Loading"),
+    accessibilityElementsHidden: decorative
   });
 }
 function SkeletonText({
   lines = 1,
   gap: gapProp,
   lastLineWidth = "70%",
+  size: textSize = "body",
+  label,
+  width,
+  height,
+  animate,
+  style,
+  variant: _variant,
   ...props
 }) {
+  const {
+    t
+  } = (0, import_i18n.useTranslation)();
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  const gap = gapProp ?? skeletonGapMap[knobProps.space] ?? "$2";
-  if (lines === 1) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Skeleton, {
-      variant: "text",
-      width: lastLineWidth,
-      ...props
-    });
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    gap,
-    children: Array.from({
-      length: lines
-    }).map((_, i) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(Skeleton, {
-      variant: "text",
-      width: i === lines - 1 ? lastLineWidth : "100%",
-      ...props
-    }, i))
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Skeleton"
+  });
+  const shouldAnnounce = (0, import_react.useContext)(AnnounceCtx);
+  const count = Math.max(0, Math.floor(Number(lines) || 0));
+  const lineHeight = height ?? skeletonTextHeight(knobProps.sizeToken, textSize);
+  const gap = gapProp ?? knobProps.gapSm.gap;
+  const decorative = !shouldAnnounce;
+  if (count === 0) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnnounceCtx.Provider, {
+    value: false,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...props,
+      width: width ?? "100%",
+      gap,
+      "data-skeleton-text": "",
+      "data-lines": String(count),
+      "aria-hidden": decorative ? true : void 0,
+      role: decorative ? void 0 : "status",
+      "aria-busy": decorative ? void 0 : true,
+      "aria-live": decorative ? void 0 : "polite",
+      "aria-label": decorative ? void 0 : label ?? t("Loading"),
+      children: Array.from({
+        length: count
+      }, (_, i) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(Skeleton, {
+        variant: "text",
+        animate,
+        style,
+        height: lineHeight,
+        width: count === 1 ? width ?? lastLineWidth : i === count - 1 ? lastLineWidth : "100%"
+      }, i))
+    })
   });
 }
 function SkeletonCircle({
   size: sizeProp,
+  label,
   ...props
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  const size = sizeProp ?? skeletonCircleSize(knobProps.sizeToken);
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Skeleton"
+  });
+  const diameter = Math.max(0, sizeProp ?? skeletonCircleSize(knobProps.sizeToken));
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Skeleton, {
     variant: "circular",
-    width: size,
-    height: size,
-    ...props
+    label,
+    width: diameter,
+    height: diameter,
+    ...props,
+    "data-diameter": String(diameter)
+  });
+}
+function SkeletonGroup({
+  children,
+  label,
+  ...props
+}) {
+  const {
+    t
+  } = (0, import_i18n.useTranslation)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnnounceCtx.Provider, {
+    value: false,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...props,
+      role: "status",
+      "aria-busy": true,
+      "aria-live": "polite",
+      "aria-label": label ?? t("Loading"),
+      "data-skeleton-group": "",
+      children
+    })
   });
 }
 Skeleton.Text = SkeletonText;
-Skeleton.Circle = SkeletonCircle;
+Skeleton.Circle = SkeletonCircle;
+Skeleton.Group = SkeletonGroup;

package/dist/cjs/Skeleton/index.native.js

@@ -26,20 +26,25 @@ var Skeleton_exports = {};
 __export(Skeleton_exports, {
   Skeleton: () => Skeleton,
   SkeletonCircle: () => SkeletonCircle,
+  SkeletonGroup: () => SkeletonGroup,
   SkeletonText: () => SkeletonText
 });
 module.exports = __toCommonJS(Skeleton_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
+var import_i18n = require("../shared/i18n.native.js");
 var SkeletonFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "Skeleton",
   backgroundColor: "$color5",
+  overflow: "hidden",
+  pointerEvents: "none",
+  flexShrink: 0,
   variants: {
     variant: {
       text: {
-        borderRadius: "$2",
-        height: 16
+        borderRadius: "$2"
       },
       circular: {
         borderRadius: 1e3
@@ -56,34 +61,33 @@ var SkeletonFrame = (0, import_tamagui.styled)(import_tamagui.View, {
     variant: "text"
   }
 });
-var SKELETON_SIZE_TOKENS = ["$3", "$4", "$5"];
+var SKELETON_SIZE_TOKENS = ["$3", "$4", "$true", "$5"];
 var skeletonCircleTokenUp = {
   $3: "$4",
   $4: "$5",
   $5: "$6"
 };
 function skeletonTextHeight(sizeToken) {
-  if (!SKELETON_SIZE_TOKENS.includes(sizeToken)) return void 0;
-  return (0, import_theme.sizeRecipeForToken)(sizeToken).fontSize + 2;
+  var textSize = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "body";
+  var known = SKELETON_SIZE_TOKENS.includes(sizeToken) ? sizeToken : "$4";
+  var body = (0, import_theme.sizeRecipeForToken)(known).fontSize + 2;
+  return textSize === "display" ? body * 2 : body;
 }
 function skeletonCircleSize(sizeToken) {
   var _skeletonCircleTokenUp_sizeToken;
   return (0, import_theme.sizeRecipeForToken)((_skeletonCircleTokenUp_sizeToken = skeletonCircleTokenUp[sizeToken]) !== null && _skeletonCircleTokenUp_sizeToken !== void 0 ? _skeletonCircleTokenUp_sizeToken : "$5").height;
 }
-var skeletonGapMap = {
-  small: "$1",
-  medium: "$2",
-  large: "$3"
-};
 var PULSE_STYLE_ID = "__mp-skeleton-pulse";
+var PULSE_ANIMATION = "mp-skeleton-pulse 1.5s ease-in-out infinite";
 function ensurePulseKeyframes() {
   if (!import_tamagui.isWeb || typeof document === "undefined") return;
   if (document.getElementById(PULSE_STYLE_ID)) return;
   var style = document.createElement("style");
   style.id = PULSE_STYLE_ID;
-  style.textContent = "@keyframes skeleton-pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}";
+  style.textContent = ["@keyframes mp-skeleton-pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}", "@media (prefers-reduced-motion:reduce){.mp-skeleton-bone{animation:none!important}}", "@media (forced-colors:active){.mp-skeleton-bone{outline:1px solid transparent;outline-offset:-1px}}"].join("");
   document.head.appendChild(style);
 }
+var AnnounceCtx = /* @__PURE__ */(0, import_react.createContext)(true);
 function Skeleton(param) {
   var {
     variant = "text",
@@ -91,38 +95,61 @@ function Skeleton(param) {
     height,
     animate = true,
     style,
+    label,
+    className,
     ...props
   } = param;
+  var {
+    t
+  } = (0, import_i18n.useTranslation)();
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  var pulsing = animate && knobProps.transition !== void 0;
-  if (pulsing) ensurePulseKeyframes();
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Skeleton"
+  });
+  var shouldAnnounce = (0, import_react.useContext)(AnnounceCtx);
+  var pulsing = Boolean(animate && knobProps.motion.control.transition);
+  if (import_tamagui.isWeb) ensurePulseKeyframes();
+  var decorative = props["aria-hidden"] === true || !shouldAnnounce;
+  var smoothingClass = variant === "text" || variant === "rounded" ? knobProps.borderRadius.className : void 0;
+  var boneClass = ["mp-skeleton-bone", pulsing ? "mp-skeleton-pulse" : "mp-skeleton-static", smoothingClass, className].filter(Boolean).join(" ");
   var mergedStyle = import_tamagui.isWeb && pulsing ? {
     ...style,
-    animation: "skeleton-pulse 1.5s ease-in-out infinite"
+    animation: PULSE_ANIMATION
   } : style;
+  var textHeight = variant === "text" ? skeletonTextHeight(knobProps.sizeToken) : void 0;
+  var resolvedHeight = height !== null && height !== void 0 ? height : textHeight;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SkeletonFrame, {
     variant,
     width,
-    // Text lines follow the size knob; explicit height ejects.
-    height: height !== null && height !== void 0 ? height : variant === "text" ? skeletonTextHeight(knobProps.sizeToken) : void 0,
-    // Radius only — a skeleton is a flat blob, it never draws the knob's border.
-    // Consumers that clamp (Checkbox/Radio/Switch) pass an explicit borderRadius
-    // which wins via ...props below.
-    // Text lines and rounded blocks ride DEFAULT (knobs-enumerated Part 2b,
-    // MPO-56): the token at every stop, the paint capping at h/2.
+    height: resolvedHeight,
+    // Radius only — a skeleton is a flat blob, it never draws the knob's
+    // border. Text lines and rounded blocks ride DEFAULT (MPO-56): the token
+    // at every stop. Consumers that clamp pass borderRadius via ...props.
     ...(variant === "rounded" || variant === "text" ? {
       borderRadius: knobProps.borderRadius.borderRadius
     } : void 0),
-    // R-PILL (spec Skeleton "circle"): the circular variant stays 1:1 and
-    // round at every radius value, so it declares the class the
-    // `radius:none` sweep licenses it under (D-09 / LC-60).
+    // R-PILL (spec Skeleton "circle"): stays 1:1 and round at every radius.
     ...(variant === "circular" ? (0, import_theme.radiusClassProps)("R-PILL", "SkeletonCircle") : void 0),
     ...props,
+    ...(import_tamagui.isWeb ? {
+      className: boneClass
+    } : void 0),
     ...(mergedStyle ? {
       style: mergedStyle
-    } : void 0)
+    } : void 0),
+    pointerEvents: "none",
+    "data-skeleton": "",
+    "data-skeleton-variant": variant,
+    "data-animate": pulsing ? "true" : "false",
+    "data-width": width != null ? String(width) : void 0,
+    "data-height": resolvedHeight != null ? String(resolvedHeight) : void 0,
+    "aria-hidden": decorative ? true : void 0,
+    role: decorative ? void 0 : "status",
+    "aria-busy": decorative ? void 0 : true,
+    "aria-live": decorative ? void 0 : "polite",
+    "aria-label": decorative ? void 0 : label !== null && label !== void 0 ? label : t("Loading"),
+    accessibilityElementsHidden: decorative
   });
 }
 function SkeletonText(param) {
@@ -130,49 +157,100 @@ function SkeletonText(param) {
     lines = 1,
     gap: gapProp,
     lastLineWidth = "70%",
+    size: textSize = "body",
+    label,
+    width,
+    height,
+    animate,
+    style,
+    variant: _variant,
     ...props
   } = param;
-  var _ref;
+  var {
+    t
+  } = (0, import_i18n.useTranslation)();
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  var gap = (_ref = gapProp !== null && gapProp !== void 0 ? gapProp : skeletonGapMap[knobProps.space]) !== null && _ref !== void 0 ? _ref : "$2";
-  if (lines === 1) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Skeleton, {
-      variant: "text",
-      width: lastLineWidth,
-      ...props
-    });
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    gap,
-    children: Array.from({
-      length: lines
-    }).map(function (_, i) {
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Skeleton, {
-        variant: "text",
-        width: i === lines - 1 ? lastLineWidth : "100%",
-        ...props
-      }, i);
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Skeleton"
+  });
+  var shouldAnnounce = (0, import_react.useContext)(AnnounceCtx);
+  var count = Math.max(0, Math.floor(Number(lines) || 0));
+  var lineHeight = height !== null && height !== void 0 ? height : skeletonTextHeight(knobProps.sizeToken, textSize);
+  var gap = gapProp !== null && gapProp !== void 0 ? gapProp : knobProps.gapSm.gap;
+  var decorative = !shouldAnnounce;
+  if (count === 0) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnnounceCtx.Provider, {
+    value: false,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...props,
+      width: width !== null && width !== void 0 ? width : "100%",
+      gap,
+      "data-skeleton-text": "",
+      "data-lines": String(count),
+      "aria-hidden": decorative ? true : void 0,
+      role: decorative ? void 0 : "status",
+      "aria-busy": decorative ? void 0 : true,
+      "aria-live": decorative ? void 0 : "polite",
+      "aria-label": decorative ? void 0 : label !== null && label !== void 0 ? label : t("Loading"),
+      children: Array.from({
+        length: count
+      }, function (_, i) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Skeleton, {
+          variant: "text",
+          animate,
+          style,
+          height: lineHeight,
+          width: count === 1 ? width !== null && width !== void 0 ? width : lastLineWidth : i === count - 1 ? lastLineWidth : "100%"
+        }, i);
+      })
     })
   });
 }
 function SkeletonCircle(param) {
   var {
     size: sizeProp,
+    label,
     ...props
   } = param;
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : skeletonCircleSize(knobProps.sizeToken);
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Skeleton"
+  });
+  var diameter = Math.max(0, sizeProp !== null && sizeProp !== void 0 ? sizeProp : skeletonCircleSize(knobProps.sizeToken));
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Skeleton, {
     variant: "circular",
-    width: size,
-    height: size,
+    label,
+    width: diameter,
+    height: diameter,
+    ...props,
+    "data-diameter": String(diameter)
+  });
+}
+function SkeletonGroup(param) {
+  var {
+    children,
+    label,
     ...props
+  } = param;
+  var {
+    t
+  } = (0, import_i18n.useTranslation)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnnounceCtx.Provider, {
+    value: false,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...props,
+      role: "status",
+      "aria-busy": true,
+      "aria-live": "polite",
+      "aria-label": label !== null && label !== void 0 ? label : t("Loading"),
+      "data-skeleton-group": "",
+      children
+    })
   });
 }
 Skeleton.Text = SkeletonText;
 Skeleton.Circle = SkeletonCircle;
+Skeleton.Group = SkeletonGroup;
 //# sourceMappingURL=index.native.js.map