@webority/mobile-ui 0.0.38 → 0.1.0

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

@@ -1,304 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import React, { Children, cloneElement, isValidElement, useEffect, useRef } from 'react';
-import { Animated, Image, StyleSheet, Text, View } from 'react-native';
-import { createAnimatedValue } from "../../theme/index.js";
-import { Skeleton } from "./Skeleton.js";
-import { useSkeletonDefaults } from "./SkeletonProvider.js";
-import { SkeletonSkip } from "./SkeletonSkip.js";
-
-/**
- * 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.
- */
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const flattenStyle = style => {
-  if (!style) {
-    return {};
-  }
-  const flat = 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__*/_jsx(Skeleton, {
-      shape: "text",
-      width: "60%",
-      height: 14,
-      variant: variant,
-      speed: speed,
-      colors: colors
-    }, `${keyHint}-text`);
-  }
-  if (Array.isArray(node)) {
-    return Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, colors, `${keyHint}-${index}`));
-  }
-  if (! /*#__PURE__*/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) {
-    return /*#__PURE__*/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__*/_jsx(Sk, {
-        ...props
-      }, `${keyHint}-self`);
-    }
-  }
-
-  // <Image /> → fixed-size skeleton block matching style.width/height/borderRadius.
-  if (elementType === 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__*/_jsx(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 === Text) {
-    const elementStyle = flattenStyle(props.style);
-    const fontSize = typeof elementStyle.fontSize === 'number' ? elementStyle.fontSize : 14;
-    const width = resolveWidth(elementStyle.width, '85%');
-    return /*#__PURE__*/_jsx(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__*/cloneElement(element, {
-      key: `${keyHint}-w`
-    }, skeletonizeNode(props.children, variant, speed, colors, `${keyHint}-c`));
-  }
-
-  // Leaf <View /> with explicit dimensions → skeleton block.
-  if (elementType === 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__*/_jsx(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__*/cloneElement(element, {
-    key: `${keyHint}-leaf`
-  });
-};
-const SkeletonContent = ({
-  loading,
-  children,
-  placeholder,
-  variant,
-  speed,
-  count = 1,
-  colors,
-  fadeDuration,
-  style,
-  testID
-}) => {
-  const defaults = 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 = useRef(loading);
-  const fadeAnim = useRef(createAnimatedValue(loading ? 0 : 1)).current;
-  useEffect(() => {
-    let anim;
-    if (wasLoadingRef.current && !loading) {
-      fadeAnim.setValue(0);
-      anim = 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__*/_jsx(_Fragment, {
-        children: children
-      });
-    }
-    return /*#__PURE__*/_jsx(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__*/_jsx(React.Fragment, {
-      children: placeholder
-    }, `sk-ph-${i}`)) : placeholder;
-    return /*#__PURE__*/_jsx(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__*/_jsx(React.Fragment, {
-    children: children
-  }, `sk-rep-${i}`)) : children;
-  return /*#__PURE__*/_jsx(View, {
-    style: style,
-    testID: testID,
-    accessible: true,
-    accessibilityLabel: "Loading",
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    accessibilityLiveRegion: "polite",
-    children: skeletonizeNode(repeated, variant, speed, colors)
-  });
-};
-SkeletonContent.displayName = 'SkeletonContent';
-export { SkeletonContent };
-export default SkeletonContent;
-//# sourceMappingURL=SkeletonContent.js.map
+import e,{Children as t,cloneElement as r,isValidElement as i,useEffect as n,useRef as s}from"react";import{Animated as o,Image as a,StyleSheet as l,Text as c,View as u}from"react-native";import{createAnimatedValue as f}from"../../theme/index.js";import{Skeleton as d}from"./Skeleton.js";import{useSkeletonDefaults as p}from"./SkeletonProvider.js";import{SkeletonSkip as h}from"./SkeletonSkip.js";import{jsx as y,Fragment as m}from"react/jsx-runtime";const flattenStyle=e=>{if(!e)return{};return l.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,n,s,o,l="r")=>{if(null==e||"boolean"==typeof e)return null;if("string"==typeof e||"number"==typeof e)return y(d,{shape:"text",width:"60%",height:14,variant:n,speed:s,colors:o},`${l}-text`);if(Array.isArray(e))return t.map(e,(e,t)=>skeletonizeNode(e,n,s,o,`${l}-${t}`));if(!i(e))return null;const f=e,p=f.props??{},m=f.type;if(m===h)return r(f,{key:`${l}-skip`});if("function"==typeof m||"object"==typeof m){const e=m.Skeleton;if(e){return y(e,{...p},`${l}-self`)}}if(m===a){const e=flattenStyle(p.style),t=resolveWidth(e.width,"100%"),r="number"==typeof e.height?e.height:120,i=resolveRadius(e.borderRadius,"sm");return y(d,{width:t,height:r,radius:i,variant:n,speed:s,colors:o,style:{margin:"number"==typeof e.margin?e.margin:void 0}},`${l}-img`)}if(m===c){const e=flattenStyle(p.style),t="number"==typeof e.fontSize?e.fontSize:14,r=resolveWidth(e.width,"85%");return y(d,{shape:"text",width:r,height:Math.round(1.15*t),variant:n,speed:s,colors:o,style:{marginVertical:2}},`${l}-txt`)}if(null!=p.children)return r(f,{key:`${l}-w`},skeletonizeNode(p.children,n,s,o,`${l}-c`));if(m===u){const e=flattenStyle(p.style);if(null!=e.width||null!=e.height){const t=resolveWidth(e.width,"100%"),r="number"==typeof e.height?e.height:20,i=resolveRadius(e.borderRadius,"sm");return y(d,{width:t,height:r,radius:i,variant:n,speed:s,colors:o},`${l}-vw`)}}return r(f,{key:`${l}-leaf`})},SkeletonContent=({loading:t,children:r,placeholder:i,variant:a,speed:l,count:c=1,colors:d,fadeDuration:h,style:g,testID:b})=>{const v=p(),$=h??v.fadeDuration??300,k=s(t),w=s(f(t?0:1)).current;if(n(()=>{let e;return k.current&&!t?(w.setValue(0),e=o.timing(w,{toValue:1,duration:$,useNativeDriver:!0}),e.start()):!k.current&&t&&w.setValue(1),k.current=t,()=>e?.stop()},[t,w,$]),!t)return $<=0?y(m,{children:r}):y(o.View,{style:[g,{opacity:w}],testID:b,children:r});if(void 0!==i){const t=c>1?Array.from({length:c},(t,r)=>y(e.Fragment,{children:i},`sk-ph-${r}`)):i;return y(u,{style:g,testID:b,accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},accessibilityLiveRegion:"polite",children:t})}const S=c>1?Array.from({length:c},(t,i)=>y(e.Fragment,{children:r},`sk-rep-${i}`)):r;return y(u,{style:g,testID:b,accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},accessibilityLiveRegion:"polite",children:skeletonizeNode(S,a,l,d)})};SkeletonContent.displayName="SkeletonContent";export{SkeletonContent};export default SkeletonContent;

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

@@ -1,87 +1 @@
-"use strict";
-
-import React from 'react';
-import { FlatList, View } from 'react-native';
-import { SkeletonContent } from "./SkeletonContent.js";
-import { useSkeletonDefaults } from "./SkeletonProvider.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * 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 = useSkeletonDefaults();
-  const resolvedCount = placeholderCount ?? defaults.placeholderCount ?? 3;
-  if (loading) {
-    const slots = Array.from({
-      length: Math.max(0, resolvedCount)
-    }, (_, index) => /*#__PURE__*/_jsx(React.Fragment, {
-      children: renderPlaceholder ? renderPlaceholder(index) : null
-    }, `sk-list-${index}`));
-    return /*#__PURE__*/_jsx(SkeletonContent, {
-      loading: true,
-      variant: variant,
-      speed: speed,
-      colors: colors,
-      style: style,
-      testID: testID,
-      children: /*#__PURE__*/_jsx(View, {
-        style: [horizontal ? styles.row : styles.column, placeholderContainerStyle],
-        children: slots
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(FlatList, {
-    data: data ?? [],
-    renderItem: renderItem,
-    horizontal: horizontal,
-    contentContainerStyle: contentContainerStyle,
-    style: style,
-    testID: testID,
-    ...rest
-  });
-}
-const styles = {
-  row: {
-    flexDirection: 'row'
-  },
-  column: {
-    flexDirection: 'column'
-  }
-};
-export const SkeletonList = SkeletonListInner;
-//# sourceMappingURL=SkeletonList.js.map
+import e from"react";import{FlatList as t,View as r}from"react-native";import{SkeletonContent as o}from"./SkeletonContent.js";import{useSkeletonDefaults as n}from"./SkeletonProvider.js";import{jsx as l}from"react/jsx-runtime";const i={row:{flexDirection:"row"},column:{flexDirection:"column"}};export const SkeletonList=function SkeletonListInner(a){const{loading:c,data:s,renderItem:m,renderPlaceholder:d,placeholderCount:h,variant:p,speed:f,colors:u,placeholderContainerStyle:y,horizontal:S,contentContainerStyle:x,style:C,testID:I,...k}=a,D=n(),g=h??D.placeholderCount??3;if(c){const t=Array.from({length:Math.max(0,g)},(t,r)=>l(e.Fragment,{children:d?d(r):null},`sk-list-${r}`));return l(o,{loading:!0,variant:p,speed:f,colors:u,style:C,testID:I,children:l(r,{style:[S?i.row:i.column,y],children:t})})}return l(t,{data:s??[],renderItem:m,horizontal:S,contentContainerStyle:x,style:C,testID:I,...k})};

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

@@ -1,106 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
-import { AccessibilityInfo } from 'react-native';
-import { SkeletonClockProvider } from "./SkeletonClock.js";
-
-/**
- * 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.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const SkeletonDefaultsContext = /*#__PURE__*/createContext({});
-export 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 = useMemo(() => ({
-    variant,
-    speed,
-    placeholderCount,
-    radius,
-    colors,
-    fadeDuration,
-    animation
-  }), [variant, speed, placeholderCount, radius, colors, fadeDuration, animation]);
-  return /*#__PURE__*/_jsx(SkeletonDefaultsContext.Provider, {
-    value: value,
-    children: /*#__PURE__*/_jsx(SkeletonClockProvider, {
-      speed: resolvedSpeed,
-      variant: resolvedVariant,
-      enabled: animationsEnabled,
-      children: children
-    })
-  });
-};
-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.
- */
-export const useSkeletonDefaults = () => {
-  return 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.
- */
-export const useReduceMotion = () => {
-  const [reduce, setReduce] = useState(false);
-  useEffect(() => {
-    let mounted = true;
-    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 = AccessibilityInfo.addEventListener('reduceMotionChanged', value => {
-      setReduce(value);
-    });
-    return () => {
-      mounted = false;
-      sub.remove();
-    };
-  }, []);
-  return reduce;
-};
-//# sourceMappingURL=SkeletonProvider.js.map
+import e,{createContext as o,useContext as r,useEffect as t,useMemo as n,useState as a}from"react";import{AccessibilityInfo as i}from"react-native";import{SkeletonClockProvider as s}from"./SkeletonClock.js";import{jsx as d}from"react/jsx-runtime";const c=o({});export const SkeletonProvider=({children:e,variant:o,speed:r,placeholderCount:t,radius:a,colors:i,fadeDuration:l,animation:u="auto"})=>{const m=useReduceMotion(),p="always"===u||"never"!==u&&!m,v=r??"normal",h=o??"shimmer",f=n(()=>({variant:o,speed:r,placeholderCount:t,radius:a,colors:i,fadeDuration:l,animation:u}),[o,r,t,a,i,l,u]);return d(c.Provider,{value:f,children:d(s,{speed:v,variant:h,enabled:p,children:e})})};SkeletonProvider.displayName="SkeletonProvider";export const useSkeletonDefaults=()=>r(c);export const useReduceMotion=()=>{const[e,o]=a(!1);return t(()=>{let e=!0;i.isReduceMotionEnabled().then(r=>{e&&o(r)}).catch(()=>{e&&o(!1)});const r=i.addEventListener("reduceMotionChanged",e=>{o(e)});return()=>{e=!1,r.remove()}},[]),e};

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

@@ -1,31 +1 @@
-"use strict";
-
-import React from 'react';
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-/**
- * 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>
- */
-export const SkeletonSkip = ({
-  children
-}) => {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: children
-  });
-};
-SkeletonSkip.displayName = 'SkeletonSkip';
-//# sourceMappingURL=SkeletonSkip.js.map
+import e from"react";import{Fragment as r,jsx as t}from"react/jsx-runtime";export const SkeletonSkip=({children:e})=>t(r,{children:e});SkeletonSkip.displayName="SkeletonSkip";

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

@@ -1,9 +1 @@
-"use strict";
-
-export { default, Skeleton, SkeletonCircle, SkeletonText } from "./Skeleton.js";
-export { SkeletonClockProvider, useSkeletonClock } from "./SkeletonClock.js";
-export { SkeletonContent } from "./SkeletonContent.js";
-export { SkeletonList } from "./SkeletonList.js";
-export { SkeletonProvider, useReduceMotion, useSkeletonDefaults } from "./SkeletonProvider.js";
-export { SkeletonSkip } from "./SkeletonSkip.js";
-//# sourceMappingURL=index.js.map
+export{default,Skeleton,SkeletonCircle,SkeletonText}from"./Skeleton.js";export{SkeletonClockProvider,useSkeletonClock}from"./SkeletonClock.js";export{SkeletonContent}from"./SkeletonContent.js";export{SkeletonList}from"./SkeletonList.js";export{SkeletonProvider,useReduceMotion,useSkeletonDefaults}from"./SkeletonProvider.js";export{SkeletonSkip}from"./SkeletonSkip.js";