@multiplatform.one/forms 7.34.4 → 7.35.0

package/dist/jsx/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/jsx/MediaPicker/useMediaPicker.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","useMediaPicker_exports","useMediaPicker","module","exports","import_react","require","import_pickMedia","import_types","active","useRef","mounted","pending","setPending","useState"],"sources":["../../../src/MediaPicker/useMediaPicker.ts"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AACT,IAAAA,SAAS,GAAAC,MAAA,CAAAC,cAAiB;AAC1B,IAAAC,gBAAS,GAAAF,MAAA,CAAAG,wBAAiE;AAEnE,IAAAC,iBAAS,GAAAJ,MAAiB,CAAAK,mBAAA;AAC/B,IAAAC,YAAM,GAASN,MAA+B,CAAAO,SAAI,CAAAC,cAAA;AAClD,IAAAC,QAAM,GAAAA,CAAAC,MAAU,EAAAC,GAAO,KAAI;EAC3B,SAAOC,IAAA,IAASD,GAAA,EAChBZ,SAAU,CAAAW,MAAM,EAAAE,IAAA;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AACd;AACA,IAAAC,WAAO,GAAMA,CAAAC,EAAA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,IAAA;EACX,IAAAF,IAAA,IAAQ,OAAAA,IAAU,wBAAAA,IAAA;IAClB,SAAOG,GAAA,IAAAhB,iBAAe,CAAAa,IAAA,GACxB,KAAAX,YAAA,CAAAe,IAAA,CAAAL,EAAA,EAAAI,GAAA,KAAAA,GAAA,KAAAF,MAAA,EACGnB,SAAA,CAAAiB,EAAA,EAAAI,GAAA;MAAAP,GAAA,EAAAA,CAAA,KAAAI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EAEL;EACE,OAAKE,EAAA;AACL;AACE,IAAAM,YAAO,GAAAC,GAAQ,IAAAR,WAAA,CAAAhB,SAAA;EAAAyB,KAAA;AAAA,IAAAD,GAAA;AAAA,IAAAE,sBACT,GAAiB;AAA0DhB,QACjF,CAAAgB,sBAAA;EACFC,cAAM,EAAAA,CAAA,KAAaA;AACnB;AACAC,MAAA,CAAAC,OAAA,GAAWN,YAAI,CAAAG,sBAAA;AACf,IAAAI,YAAO,GAAAC,OAAU,QAAS;AACxB,IAAAC,gBAAO,GAAUD,OAAA;AACjB,IAAAE,YAAI,GAAQF,OAAS;AAAgB,SACtCJ,eAAA;EACH,IAAIO,MAAC,OAAAJ,YAAA,CAAAK,MAAA;EAEL,IAAAC,OAAS,IAAM,GAAAN,YAAQ,CAAAK,MAAA;EACzB,KAAAE,OAAA,EAAAC,UAAA,QAAAR,YAAA,CAAAS,QAAA","ignoreList":[]}

package/dist/jsx/Skeleton/index.mjs

@@ -1,14 +1,18 @@
+import { createContext, useContext } from "react";
 import { radiusClassProps, sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
 import { View, styled, isWeb } from "tamagui";
+import { useTranslation } from "../shared/i18n.mjs";
 import { jsx } from "react/jsx-runtime";
 const SkeletonFrame = styled(View, {
   name: "Skeleton",
   backgroundColor: "$color5",
+  overflow: "hidden",
+  pointerEvents: "none",
+  flexShrink: 0,
   variants: {
     variant: {
       text: {
-        borderRadius: "$2",
-        height: 16
+        borderRadius: "$2"
       },
       circular: {
         borderRadius: 1e3
@@ -25,108 +29,185 @@ const SkeletonFrame = styled(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 sizeRecipeForToken(sizeToken).fontSize + 2;
+function skeletonTextHeight(sizeToken, textSize = "body") {
+  const known = SKELETON_SIZE_TOKENS.includes(sizeToken) ? sizeToken : "$4";
+  const body = sizeRecipeForToken(known).fontSize + 2;
+  return textSize === "display" ? body * 2 : body;
 }
 function skeletonCircleSize(sizeToken) {
   return 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 (!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 = createContext(true);
 function Skeleton({
   variant = "text",
   width,
   height,
   animate = true,
   style,
+  label,
+  className,
   ...props
 }) {
+  const {
+    t
+  } = useTranslation();
   const {
     knobProps
-  } = useResolvedKnobs();
-  const pulsing = animate && knobProps.transition !== void 0;
-  if (pulsing) ensurePulseKeyframes();
+  } = useResolvedKnobs({
+    component: "Skeleton"
+  });
+  const shouldAnnounce = useContext(AnnounceCtx);
+  const pulsing = Boolean(animate && knobProps.motion.control.transition);
+  if (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 = 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__ */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" ? radiusClassProps("R-PILL", "SkeletonCircle") : void 0),
     ...props,
+    ...(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
+  } = useTranslation();
   const {
     knobProps
-  } = useResolvedKnobs();
-  const gap = gapProp ?? skeletonGapMap[knobProps.space] ?? "$2";
-  if (lines === 1) {
-    return /* @__PURE__ */jsx(Skeleton, {
-      variant: "text",
-      width: lastLineWidth,
-      ...props
-    });
-  }
-  return /* @__PURE__ */jsx(View, {
-    gap,
-    children: Array.from({
-      length: lines
-    }).map((_, i) => /* @__PURE__ */jsx(Skeleton, {
-      variant: "text",
-      width: i === lines - 1 ? lastLineWidth : "100%",
-      ...props
-    }, i))
+  } = useResolvedKnobs({
+    component: "Skeleton"
+  });
+  const shouldAnnounce = 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__ */jsx(AnnounceCtx.Provider, {
+    value: false,
+    children: /* @__PURE__ */jsx(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__ */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
-  } = useResolvedKnobs();
-  const size = sizeProp ?? skeletonCircleSize(knobProps.sizeToken);
+  } = useResolvedKnobs({
+    component: "Skeleton"
+  });
+  const diameter = Math.max(0, sizeProp ?? skeletonCircleSize(knobProps.sizeToken));
   return /* @__PURE__ */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
+  } = useTranslation();
+  return /* @__PURE__ */jsx(AnnounceCtx.Provider, {
+    value: false,
+    children: /* @__PURE__ */jsx(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;
-export { Skeleton, SkeletonCircle, SkeletonText };
+Skeleton.Group = SkeletonGroup;
+export { Skeleton, SkeletonCircle, SkeletonGroup, SkeletonText };
 //# sourceMappingURL=index.mjs.map

package/dist/jsx/Skeleton/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["radiusClassProps","sizeRecipeForToken","useResolvedKnobs","View","styled","isWeb","jsx","SkeletonFrame","name","backgroundColor","variants","variant","text","borderRadius","height","circular","rectangular","rounded","defaultVariants","SKELETON_SIZE_TOKENS","skeletonCircleTokenUp","$3","$4","$5","skeletonTextHeight","sizeToken","includes","fontSize","skeletonCircleSize","skeletonGapMap","small","medium","large","PULSE_STYLE_ID","ensurePulseKeyframes","document","getElementById","style","createElement","id","textContent","head","appendChild","Skeleton","width","animate","props","knobProps","pulsing","transition","mergedStyle","animation","SkeletonText","lines","gap","gapProp","lastLineWidth","space","children","Array","from","length","map","_","i","SkeletonCircle","size","sizeProp","Text","Circle"],"sources":["../../../src/Skeleton/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createContext","useContext","radiusClassProps","sizeRecipeForToken","useResolvedKnobs","View","styled","isWeb","useTranslation","jsx","SkeletonFrame","name","backgroundColor","overflow","pointerEvents","flexShrink","variants","variant","text","borderRadius","circular","rectangular","rounded","defaultVariants","SKELETON_SIZE_TOKENS","skeletonCircleTokenUp","$3","$4","$5","skeletonTextHeight","sizeToken","textSize","known","includes","body","fontSize","skeletonCircleSize","height","PULSE_STYLE_ID","PULSE_ANIMATION","ensurePulseKeyframes","document","getElementById","style","createElement","id","textContent","join","head","appendChild","AnnounceCtx","Skeleton","width","animate","label","className","props","t","knobProps","component","shouldAnnounce","pulsing","Boolean","motion","control","transition","decorative","smoothingClass","boneClass","filter","mergedStyle","animation","textHeight","resolvedHeight","String","role","accessibilityElementsHidden","SkeletonText","lines","gap","gapProp","lastLineWidth","size","_variant","count","Math","max","floor","Number","lineHeight","gapSm","Provider","value","children","Array","from","length","_","i","SkeletonCircle","sizeProp","diameter","SkeletonGroup","Text","Circle","Group"],"sources":["../../../src/Skeleton/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/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