@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/commonjs/components/Skeleton/SkeletonContent.js

@@ -1,309 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SkeletonContent = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _Skeleton = require("./Skeleton.js");
-var _SkeletonProvider = require("./SkeletonProvider.js");
-var _SkeletonSkip = require("./SkeletonSkip.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * SkeletonContent — show placeholder shapes while data is loading, then
- * cross-fade to the real children once it arrives.
- *
- * Three usage patterns, listed in order of preference:
- *
- *   1. **Explicit placeholder** (recommended):
- *
- *        <SkeletonContent loading={isLoading} placeholder={<Card.Skeleton />}>
- *          <Card>{realChildren}</Card>
- *        </SkeletonContent>
- *
- *      Renders `placeholder` verbatim while loading and `children` once loaded.
- *      Most precise and predictable — what you write is exactly what shimmers.
- *      Prefer this for any non-trivial layout.
- *
- *   2. **Self-describing components inside an auto-walked tree**:
- *
- *        <SkeletonContent loading={isLoading}>
- *          <Stepper steps={steps} />
- *          <Card>...</Card>
- *        </SkeletonContent>
- *
- *      With no `placeholder` prop, the walker substitutes each element. For
- *      library components, the walker checks for a `Component.Skeleton` static
- *      and replaces the element wholesale with it (the component author knows
- *      its shape best). For plain `<Text>`, `<Image>`, and sized `<View>`
- *      leaves the walker substitutes shape-matched `<Skeleton>` blocks based
- *      on the element's own style. Good for screen-level wrappers.
- *
- *   3. **Hand-authored primitive trees** (legacy / quick prototyping):
- *
- *        <SkeletonContent loading={isLoading}>
- *          <View>
- *            <Text style={{ fontSize: 20 }}>Title</Text>
- *            <Text>Subtitle</Text>
- *          </View>
- *        </SkeletonContent>
- *
- *      Same walker as (2) — the Text/Image/View introspection handles
- *      primitive trees that mirror the loaded layout.
- *
- * Cross-fade: when `loading` flips from true to false, real children fade in
- * over `fadeDuration` ms. The first render is guarded — content that was
- * never in a loading state does NOT fade on mount, only the actual
- * loading→loaded transition does. Matches Chakra UI's `isLoaded` feel.
- */
-
-/**
- * Components that ship their own placeholder shape declare this static. The
- * walker looks for it before falling back to primitive introspection. The
- * function receives the original component's props so consumer-customizable
- * dimensions (size, count, etc.) carry through to the placeholder.
- */
-
-const flattenStyle = style => {
-  if (!style) {
-    return {};
-  }
-  const flat = _reactNative.StyleSheet.flatten(style);
-  return flat ?? {};
-};
-const resolveWidth = (raw, fallback) => {
-  if (typeof raw === 'number') {
-    return raw;
-  }
-  if (typeof raw === 'string') {
-    if (raw === 'auto' || raw === '100%' || /^\d+(\.\d+)?%$/.test(raw)) {
-      return raw;
-    }
-  }
-  return fallback;
-};
-const resolveRadius = (raw, fallback) => {
-  if (typeof raw === 'number') {
-    return raw;
-  }
-  return fallback;
-};
-const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
-  if (node == null || typeof node === 'boolean') {
-    return null;
-  }
-  if (typeof node === 'string' || typeof node === 'number') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
-      shape: "text",
-      width: "60%",
-      height: 14,
-      variant: variant,
-      speed: speed,
-      colors: colors
-    }, `${keyHint}-text`);
-  }
-  if (Array.isArray(node)) {
-    return _react.Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, colors, `${keyHint}-${index}`));
-  }
-  if (! /*#__PURE__*/(0, _react.isValidElement)(node)) {
-    return null;
-  }
-  const element = node;
-  const props = element.props ?? {};
-  const elementType = element.type;
-
-  // <SkeletonSkip /> → opt-out marker; render its children unchanged.
-  if (elementType === _SkeletonSkip.SkeletonSkip) {
-    return /*#__PURE__*/(0, _react.cloneElement)(element, {
-      key: `${keyHint}-skip`
-    });
-  }
-
-  // Self-describing component path. If a custom component (Stepper, Card,
-  // Banner, etc.) ships a `Skeleton` static, prefer it over the primitive
-  // walker — the component author knows the shape better than we can guess.
-  // Forwards the original props so consumer-tunable params (size, count,
-  // tone) flow through. Crucially this short-circuits the walker BEFORE
-  // it tries to recurse into custom-component children, so we never end up
-  // rendering half-real / half-placeholder UI.
-  if (typeof elementType === 'function' || typeof elementType === 'object') {
-    const SkeletonStatic = elementType.Skeleton;
-    if (SkeletonStatic) {
-      const Sk = SkeletonStatic;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Sk, {
-        ...props
-      }, `${keyHint}-self`);
-    }
-  }
-
-  // <Image /> → fixed-size skeleton block matching style.width/height/borderRadius.
-  if (elementType === _reactNative.Image) {
-    const elementStyle = flattenStyle(props.style);
-    const width = resolveWidth(elementStyle.width, '100%');
-    const height = typeof elementStyle.height === 'number' ? elementStyle.height : 120;
-    const radius = resolveRadius(elementStyle.borderRadius, 'sm');
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
-      width: width,
-      height: height,
-      radius: radius,
-      variant: variant,
-      speed: speed,
-      colors: colors,
-      style: {
-        margin: typeof elementStyle.margin === 'number' ? elementStyle.margin : undefined
-      }
-    }, `${keyHint}-img`);
-  }
-
-  // <Text /> → text-line skeleton matching font size.
-  if (elementType === _reactNative.Text) {
-    const elementStyle = flattenStyle(props.style);
-    const fontSize = typeof elementStyle.fontSize === 'number' ? elementStyle.fontSize : 14;
-    const width = resolveWidth(elementStyle.width, '85%');
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
-      shape: "text",
-      width: width,
-      height: Math.round(fontSize * 1.15),
-      variant: variant,
-      speed: speed,
-      colors: colors,
-      style: {
-        marginVertical: 2
-      }
-    }, `${keyHint}-txt`);
-  }
-
-  // Element with children → recurse, preserving the wrapper (View, Pressable,
-  // custom layouts). Runs AFTER the self-describing check so any component
-  // with `.Skeleton` is replaced wholesale.
-  if (props.children != null) {
-    return /*#__PURE__*/(0, _react.cloneElement)(element, {
-      key: `${keyHint}-w`
-    }, skeletonizeNode(props.children, variant, speed, colors, `${keyHint}-c`));
-  }
-
-  // Leaf <View /> with explicit dimensions → skeleton block.
-  if (elementType === _reactNative.View) {
-    const elementStyle = flattenStyle(props.style);
-    if (elementStyle.width != null || elementStyle.height != null) {
-      const width = resolveWidth(elementStyle.width, '100%');
-      const height = typeof elementStyle.height === 'number' ? elementStyle.height : 20;
-      const radius = resolveRadius(elementStyle.borderRadius, 'sm');
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
-        width: width,
-        height: height,
-        radius: radius,
-        variant: variant,
-        speed: speed,
-        colors: colors
-      }, `${keyHint}-vw`);
-    }
-  }
-
-  // Opaque leaf (custom component without inspectable children and without a
-  // `.Skeleton` static) → leave as-is. Consumers should provide an explicit
-  // `placeholder` or author a `.Skeleton` static to handle these.
-  return /*#__PURE__*/(0, _react.cloneElement)(element, {
-    key: `${keyHint}-leaf`
-  });
-};
-const SkeletonContent = ({
-  loading,
-  children,
-  placeholder,
-  variant,
-  speed,
-  count = 1,
-  colors,
-  fadeDuration,
-  style,
-  testID
-}) => {
-  const defaults = (0, _SkeletonProvider.useSkeletonDefaults)();
-  const resolvedFadeDuration = fadeDuration ?? defaults.fadeDuration ?? 300;
-
-  // Cross-fade: opacity goes 0 → 1 when loading just flipped off. First
-  // render is guarded with `wasLoadingRef` so already-loaded content
-  // doesn't fade in on mount.
-  const wasLoadingRef = (0, _react.useRef)(loading);
-  const fadeAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(loading ? 0 : 1)).current;
-  (0, _react.useEffect)(() => {
-    let anim;
-    if (wasLoadingRef.current && !loading) {
-      fadeAnim.setValue(0);
-      anim = _reactNative.Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: resolvedFadeDuration,
-        useNativeDriver: true
-      });
-      anim.start();
-    } else if (!wasLoadingRef.current && loading) {
-      // Going back into loading from loaded — snap opacity so the
-      // placeholder appears instantly when data invalidates.
-      fadeAnim.setValue(1);
-    }
-    wasLoadingRef.current = loading;
-    return () => anim?.stop();
-  }, [loading, fadeAnim, resolvedFadeDuration]);
-  if (!loading) {
-    if (resolvedFadeDuration <= 0) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: children
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [style, {
-        opacity: fadeAnim
-      }],
-      testID: testID,
-      children: children
-    });
-  }
-
-  // Explicit placeholder path — no walker, no introspection.
-  if (placeholder !== undefined) {
-    const slots = count > 1 ? Array.from({
-      length: count
-    }, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
-      children: placeholder
-    }, `sk-ph-${i}`)) : placeholder;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: style,
-      testID: testID,
-      accessible: true,
-      accessibilityLabel: "Loading",
-      accessibilityRole: "progressbar",
-      accessibilityState: {
-        busy: true
-      },
-      accessibilityLiveRegion: "polite",
-      children: slots
-    });
-  }
-
-  // Walker path — auto-substitute primitives and self-describing components.
-  const repeated = count > 1 ? Array.from({
-    length: count
-  }, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
-    children: children
-  }, `sk-rep-${i}`)) : children;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: style,
-    testID: testID,
-    accessible: true,
-    accessibilityLabel: "Loading",
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    accessibilityLiveRegion: "polite",
-    children: skeletonizeNode(repeated, variant, speed, colors)
-  });
-};
-exports.SkeletonContent = SkeletonContent;
-SkeletonContent.displayName = 'SkeletonContent';
-var _default = exports.default = SkeletonContent;
-//# sourceMappingURL=SkeletonContent.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.SkeletonContent=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_Skeleton=require("./Skeleton.js"),_SkeletonProvider=require("./SkeletonProvider.js"),_SkeletonSkip=require("./SkeletonSkip.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,o,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(n=t?i:r){if(n.has(e))return n.get(e);n.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?n(s,t,o):s[t]=e[t]);return s})(e,t)}const flattenStyle=e=>{if(!e)return{};return _reactNative.StyleSheet.flatten(e)??{}},resolveWidth=(e,t)=>"number"==typeof e?e:"string"!=typeof e||"auto"!==e&&"100%"!==e&&!/^\d+(\.\d+)?%$/.test(e)?t:e,resolveRadius=(e,t)=>"number"==typeof e?e:t,skeletonizeNode=(e,t,r,i,n="r")=>{if(null==e||"boolean"==typeof e)return null;if("string"==typeof e||"number"==typeof e)return(0,_jsxRuntime.jsx)(_Skeleton.Skeleton,{shape:"text",width:"60%",height:14,variant:t,speed:r,colors:i},`${n}-text`);if(Array.isArray(e))return _react.Children.map(e,(e,o)=>skeletonizeNode(e,t,r,i,`${n}-${o}`));if(!(0,_react.isValidElement)(e))return null;const o=e,s=o.props??{},l=o.type;if(l===_SkeletonSkip.SkeletonSkip)return(0,_react.cloneElement)(o,{key:`${n}-skip`});if("function"==typeof l||"object"==typeof l){const e=l.Skeleton;if(e){const t=e;return(0,_jsxRuntime.jsx)(t,{...s},`${n}-self`)}}if(l===_reactNative.Image){const e=flattenStyle(s.style),o=resolveWidth(e.width,"100%"),l="number"==typeof e.height?e.height:120,a=resolveRadius(e.borderRadius,"sm");return(0,_jsxRuntime.jsx)(_Skeleton.Skeleton,{width:o,height:l,radius:a,variant:t,speed:r,colors:i,style:{margin:"number"==typeof e.margin?e.margin:void 0}},`${n}-img`)}if(l===_reactNative.Text){const e=flattenStyle(s.style),o="number"==typeof e.fontSize?e.fontSize:14,l=resolveWidth(e.width,"85%");return(0,_jsxRuntime.jsx)(_Skeleton.Skeleton,{shape:"text",width:l,height:Math.round(1.15*o),variant:t,speed:r,colors:i,style:{marginVertical:2}},`${n}-txt`)}if(null!=s.children)return(0,_react.cloneElement)(o,{key:`${n}-w`},skeletonizeNode(s.children,t,r,i,`${n}-c`));if(l===_reactNative.View){const e=flattenStyle(s.style);if(null!=e.width||null!=e.height){const o=resolveWidth(e.width,"100%"),s="number"==typeof e.height?e.height:20,l=resolveRadius(e.borderRadius,"sm");return(0,_jsxRuntime.jsx)(_Skeleton.Skeleton,{width:o,height:s,radius:l,variant:t,speed:r,colors:i},`${n}-vw`)}}return(0,_react.cloneElement)(o,{key:`${n}-leaf`})},SkeletonContent=({loading:e,children:t,placeholder:r,variant:i,speed:n,count:o=1,colors:s,fadeDuration:l,style:a,testID:u})=>{const c=(0,_SkeletonProvider.useSkeletonDefaults)(),d=l??c.fadeDuration??300,f=(0,_react.useRef)(e),p=(0,_react.useRef)((0,_index.createAnimatedValue)(e?0:1)).current;if((0,_react.useEffect)(()=>{let t;return f.current&&!e?(p.setValue(0),t=_reactNative.Animated.timing(p,{toValue:1,duration:d,useNativeDriver:!0}),t.start()):!f.current&&e&&p.setValue(1),f.current=e,()=>t?.stop()},[e,p,d]),!e)return d<=0?(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:t}):(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[a,{opacity:p}],testID:u,children:t});if(void 0!==r){const e=o>1?Array.from({length:o},(e,t)=>(0,_jsxRuntime.jsx)(_react.default.Fragment,{children:r},`sk-ph-${t}`)):r;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:a,testID:u,accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},accessibilityLiveRegion:"polite",children:e})}const _=o>1?Array.from({length:o},(e,r)=>(0,_jsxRuntime.jsx)(_react.default.Fragment,{children:t},`sk-rep-${r}`)):t;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:a,testID:u,accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},accessibilityLiveRegion:"polite",children:skeletonizeNode(_,i,n,s)})};exports.SkeletonContent=SkeletonContent,SkeletonContent.displayName="SkeletonContent";var _default=exports.default=SkeletonContent;

package/lib/commonjs/components/Skeleton/SkeletonList.js

@@ -1,92 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SkeletonList = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _SkeletonContent = require("./SkeletonContent.js");
-var _SkeletonProvider = require("./SkeletonProvider.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Drop-in FlatList replacement that renders `placeholderCount` skeleton rows while
- * `loading` is true, then transitions to a real `<FlatList>` of `data` once loaded.
- *
- * Solves the "FlatList with empty data renders nothing" problem so consumer screens
- * don't have to maintain a separate placeholder branch.
- *
- * Inside a vertical ScrollView, pass `scrollEnabled={false}` and let the outer
- * view scroll: once `loading` flips false a real VirtualizedList mounts, and RN
- * logs a nesting error for a same-orientation list — which only shows up after
- * the data arrives, never on first render.
- *
- * @example
- * <SkeletonList
- *   loading={isLoading}
- *   data={sites}
- *   renderItem={({ item }) => <SiteCard item={item} />}
- *   renderPlaceholder={() => <SiteCard loading />}
- *   placeholderCount={3}
- *   horizontal
- * />
- */
-function SkeletonListInner(props) {
-  const {
-    loading,
-    data,
-    renderItem,
-    renderPlaceholder,
-    placeholderCount,
-    variant,
-    speed,
-    colors,
-    placeholderContainerStyle,
-    horizontal,
-    contentContainerStyle,
-    style,
-    testID,
-    ...rest
-  } = props;
-  const defaults = (0, _SkeletonProvider.useSkeletonDefaults)();
-  const resolvedCount = placeholderCount ?? defaults.placeholderCount ?? 3;
-  if (loading) {
-    const slots = Array.from({
-      length: Math.max(0, resolvedCount)
-    }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
-      children: renderPlaceholder ? renderPlaceholder(index) : null
-    }, `sk-list-${index}`));
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonContent.SkeletonContent, {
-      loading: true,
-      variant: variant,
-      speed: speed,
-      colors: colors,
-      style: style,
-      testID: testID,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [horizontal ? styles.row : styles.column, placeholderContainerStyle],
-        children: slots
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-    data: data ?? [],
-    renderItem: renderItem,
-    horizontal: horizontal,
-    contentContainerStyle: contentContainerStyle,
-    style: style,
-    testID: testID,
-    ...rest
-  });
-}
-const styles = {
-  row: {
-    flexDirection: 'row'
-  },
-  column: {
-    flexDirection: 'column'
-  }
-};
-const SkeletonList = exports.SkeletonList = SkeletonListInner;
-//# sourceMappingURL=SkeletonList.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SkeletonList=void 0;var _react=_interopRequireDefault(require("react")),_reactNative=require("react-native"),_SkeletonContent=require("./SkeletonContent.js"),_SkeletonProvider=require("./SkeletonProvider.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function SkeletonListInner(e){const{loading:t,data:n,renderItem:r,renderPlaceholder:o,placeholderCount:l,variant:i,speed:s,colors:a,placeholderContainerStyle:u,horizontal:c,contentContainerStyle:d,style:_,testID:x,...S}=e,k=(0,_SkeletonProvider.useSkeletonDefaults)(),m=l??k.placeholderCount??3;if(t){const e=Array.from({length:Math.max(0,m)},(e,t)=>(0,_jsxRuntime.jsx)(_react.default.Fragment,{children:o?o(t):null},`sk-list-${t}`));return(0,_jsxRuntime.jsx)(_SkeletonContent.SkeletonContent,{loading:!0,variant:i,speed:s,colors:a,style:_,testID:x,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[c?styles.row:styles.column,u],children:e})})}return(0,_jsxRuntime.jsx)(_reactNative.FlatList,{data:n??[],renderItem:r,horizontal:c,contentContainerStyle:d,style:_,testID:x,...S})}const styles={row:{flexDirection:"row"},column:{flexDirection:"column"}},SkeletonList=exports.SkeletonList=SkeletonListInner;

package/lib/commonjs/components/Skeleton/SkeletonProvider.js

@@ -1,114 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useSkeletonDefaults = exports.useReduceMotion = exports.SkeletonProvider = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _SkeletonClock = require("./SkeletonClock.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * SkeletonProvider — app-level defaults for every <Skeleton> below it.
- *
- * Two responsibilities:
- *   1. Broadcasts the default variant / speed / colors / radius /
- *      placeholderCount so consumers don't repeat them per call site.
- *   2. Mounts the shared `SkeletonClockProvider` (see SkeletonClock.tsx) so
- *      every primitive shares a single Animated.Value — synchronized shimmer
- *      across the whole subtree, one native-driver loop per provider.
- *
- * Also honors the OS "Reduce Motion" preference: when enabled, the clock is
- * paused and skeletons render as static dim blocks. The detection is live —
- * if the user toggles the setting while the app is open the skeletons stop
- * shimmering immediately.
- */
-
-/**
- * Per-instance color override for a skeleton. `background` is the resting
- * tone of the placeholder; `highlight` is the moving shimmer band (or pulse
- * fade). Either can be omitted — missing keys fall back to the active theme.
- */
-
-const SkeletonDefaultsContext = /*#__PURE__*/(0, _react.createContext)({});
-const SkeletonProvider = ({
-  children,
-  variant,
-  speed,
-  placeholderCount,
-  radius,
-  colors,
-  fadeDuration,
-  animation = 'auto'
-}) => {
-  const reduceMotion = useReduceMotion();
-  // Resolve whether the clock should actually tick. `'never'` forces off,
-  // `'always'` forces on, `'auto'` follows the OS preference.
-  const animationsEnabled = animation === 'always' ? true : animation === 'never' ? false : !reduceMotion;
-  const resolvedSpeed = speed ?? 'normal';
-  const resolvedVariant = variant ?? 'shimmer';
-  const value = (0, _react.useMemo)(() => ({
-    variant,
-    speed,
-    placeholderCount,
-    radius,
-    colors,
-    fadeDuration,
-    animation
-  }), [variant, speed, placeholderCount, radius, colors, fadeDuration, animation]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonDefaultsContext.Provider, {
-    value: value,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonClock.SkeletonClockProvider, {
-      speed: resolvedSpeed,
-      variant: resolvedVariant,
-      enabled: animationsEnabled,
-      children: children
-    })
-  });
-};
-exports.SkeletonProvider = SkeletonProvider;
-SkeletonProvider.displayName = 'SkeletonProvider';
-
-/**
- * Read the current SkeletonProvider defaults. Returns an empty object when
- * no provider is mounted, so the skeleton primitives still work outside of
- * one — but without a shared clock or theme-coordinated colors.
- */
-const useSkeletonDefaults = () => {
-  return (0, _react.useContext)(SkeletonDefaultsContext);
-};
-
-/**
- * Subscribes to the OS "Reduce Motion" preference. Live — updates when the
- * user toggles the setting while the app is open. Used internally by
- * `SkeletonProvider`; exposed so consumer screens can branch on it too.
- */
-exports.useSkeletonDefaults = useSkeletonDefaults;
-const useReduceMotion = () => {
-  const [reduce, setReduce] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    let mounted = true;
-    _reactNative.AccessibilityInfo.isReduceMotionEnabled().then(value => {
-      if (mounted) {
-        setReduce(value);
-      }
-    }).catch(() => {
-      // Some platforms / older RN versions throw if the native module is
-      // missing. Treat as "motion allowed" — degrade quietly to shimmer.
-      if (mounted) {
-        setReduce(false);
-      }
-    });
-    const sub = _reactNative.AccessibilityInfo.addEventListener('reduceMotionChanged', value => {
-      setReduce(value);
-    });
-    return () => {
-      mounted = false;
-      sub.remove();
-    };
-  }, []);
-  return reduce;
-};
-exports.useReduceMotion = useReduceMotion;
-//# sourceMappingURL=SkeletonProvider.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useSkeletonDefaults=exports.useReduceMotion=exports.SkeletonProvider=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_SkeletonClock=require("./SkeletonClock.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,i,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(n=t?o:r){if(n.has(e))return n.get(e);n.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?n(a,t,i):a[t]=e[t]);return a})(e,t)}const SkeletonDefaultsContext=(0,_react.createContext)({}),SkeletonProvider=({children:e,variant:t,speed:r,placeholderCount:o,radius:n,colors:i,fadeDuration:a,animation:s="auto"})=>{const u=useReduceMotion(),l="always"===s||"never"!==s&&!u,c=r??"normal",d=t??"shimmer",f=(0,_react.useMemo)(()=>({variant:t,speed:r,placeholderCount:o,radius:n,colors:i,fadeDuration:a,animation:s}),[t,r,o,n,i,a,s]);return(0,_jsxRuntime.jsx)(SkeletonDefaultsContext.Provider,{value:f,children:(0,_jsxRuntime.jsx)(_SkeletonClock.SkeletonClockProvider,{speed:c,variant:d,enabled:l,children:e})})};exports.SkeletonProvider=SkeletonProvider,SkeletonProvider.displayName="SkeletonProvider";const useSkeletonDefaults=()=>(0,_react.useContext)(SkeletonDefaultsContext);exports.useSkeletonDefaults=useSkeletonDefaults;const useReduceMotion=()=>{const[e,t]=(0,_react.useState)(!1);return(0,_react.useEffect)(()=>{let e=!0;_reactNative.AccessibilityInfo.isReduceMotionEnabled().then(r=>{e&&t(r)}).catch(()=>{e&&t(!1)});const r=_reactNative.AccessibilityInfo.addEventListener("reduceMotionChanged",e=>{t(e)});return()=>{e=!1,r.remove()}},[]),e};exports.useReduceMotion=useReduceMotion;

package/lib/commonjs/components/Skeleton/SkeletonSkip.js

@@ -1,37 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SkeletonSkip = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Pass-through marker that opts a subtree out of `SkeletonContent`'s auto walker.
- *
- * The walker recognizes this element type and returns its children unchanged
- * even while `loading` is true. Use it to keep a specific Text/Image/View
- * visible inside a skeleton block — e.g., a brand mark, a status icon, or a
- * decorative element that should never shimmer.
- *
- * @example
- *   <SkeletonContent loading>
- *     <View style={styles.card}>
- *       <SkeletonSkip>
- *         <Image source={Logo} style={styles.brandMark} />
- *       </SkeletonSkip>
- *       <Text>Loading…</Text>
- *     </View>
- *   </SkeletonContent>
- */
-const SkeletonSkip = ({
-  children
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: children
-  });
-};
-exports.SkeletonSkip = SkeletonSkip;
-SkeletonSkip.displayName = 'SkeletonSkip';
-//# sourceMappingURL=SkeletonSkip.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SkeletonSkip=void 0;var _react=_interopRequireDefault(require("react")),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const SkeletonSkip=({children:e})=>(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:e});exports.SkeletonSkip=SkeletonSkip,SkeletonSkip.displayName="SkeletonSkip";

package/lib/commonjs/components/Skeleton/index.js

@@ -1,85 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Skeleton", {
-  enumerable: true,
-  get: function () {
-    return _Skeleton.Skeleton;
-  }
-});
-Object.defineProperty(exports, "SkeletonCircle", {
-  enumerable: true,
-  get: function () {
-    return _Skeleton.SkeletonCircle;
-  }
-});
-Object.defineProperty(exports, "SkeletonClockProvider", {
-  enumerable: true,
-  get: function () {
-    return _SkeletonClock.SkeletonClockProvider;
-  }
-});
-Object.defineProperty(exports, "SkeletonContent", {
-  enumerable: true,
-  get: function () {
-    return _SkeletonContent.SkeletonContent;
-  }
-});
-Object.defineProperty(exports, "SkeletonList", {
-  enumerable: true,
-  get: function () {
-    return _SkeletonList.SkeletonList;
-  }
-});
-Object.defineProperty(exports, "SkeletonProvider", {
-  enumerable: true,
-  get: function () {
-    return _SkeletonProvider.SkeletonProvider;
-  }
-});
-Object.defineProperty(exports, "SkeletonSkip", {
-  enumerable: true,
-  get: function () {
-    return _SkeletonSkip.SkeletonSkip;
-  }
-});
-Object.defineProperty(exports, "SkeletonText", {
-  enumerable: true,
-  get: function () {
-    return _Skeleton.SkeletonText;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Skeleton.default;
-  }
-});
-Object.defineProperty(exports, "useReduceMotion", {
-  enumerable: true,
-  get: function () {
-    return _SkeletonProvider.useReduceMotion;
-  }
-});
-Object.defineProperty(exports, "useSkeletonClock", {
-  enumerable: true,
-  get: function () {
-    return _SkeletonClock.useSkeletonClock;
-  }
-});
-Object.defineProperty(exports, "useSkeletonDefaults", {
-  enumerable: true,
-  get: function () {
-    return _SkeletonProvider.useSkeletonDefaults;
-  }
-});
-var _Skeleton = _interopRequireWildcard(require("./Skeleton.js"));
-var _SkeletonClock = require("./SkeletonClock.js");
-var _SkeletonContent = require("./SkeletonContent.js");
-var _SkeletonList = require("./SkeletonList.js");
-var _SkeletonProvider = require("./SkeletonProvider.js");
-var _SkeletonSkip = require("./SkeletonSkip.js");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Skeleton",{enumerable:!0,get:function(){return _Skeleton.Skeleton}}),Object.defineProperty(exports,"SkeletonCircle",{enumerable:!0,get:function(){return _Skeleton.SkeletonCircle}}),Object.defineProperty(exports,"SkeletonClockProvider",{enumerable:!0,get:function(){return _SkeletonClock.SkeletonClockProvider}}),Object.defineProperty(exports,"SkeletonContent",{enumerable:!0,get:function(){return _SkeletonContent.SkeletonContent}}),Object.defineProperty(exports,"SkeletonList",{enumerable:!0,get:function(){return _SkeletonList.SkeletonList}}),Object.defineProperty(exports,"SkeletonProvider",{enumerable:!0,get:function(){return _SkeletonProvider.SkeletonProvider}}),Object.defineProperty(exports,"SkeletonSkip",{enumerable:!0,get:function(){return _SkeletonSkip.SkeletonSkip}}),Object.defineProperty(exports,"SkeletonText",{enumerable:!0,get:function(){return _Skeleton.SkeletonText}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Skeleton.default}}),Object.defineProperty(exports,"useReduceMotion",{enumerable:!0,get:function(){return _SkeletonProvider.useReduceMotion}}),Object.defineProperty(exports,"useSkeletonClock",{enumerable:!0,get:function(){return _SkeletonClock.useSkeletonClock}}),Object.defineProperty(exports,"useSkeletonDefaults",{enumerable:!0,get:function(){return _SkeletonProvider.useSkeletonDefaults}});var _Skeleton=_interopRequireWildcard(require("./Skeleton.js")),_SkeletonClock=require("./SkeletonClock.js"),_SkeletonContent=require("./SkeletonContent.js"),_SkeletonList=require("./SkeletonList.js"),_SkeletonProvider=require("./SkeletonProvider.js"),_SkeletonSkip=require("./SkeletonSkip.js");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var n=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,l,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(o=t?r:n){if(o.has(e))return o.get(e);o.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((l=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(l.get||l.set)?o(i,t,l):i[t]=e[t]);return i})(e,t)}