@webority/mobile-ui 0.0.39 → 0.2.0

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

@@ -1,285 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SkeletonText = exports.SkeletonCircle = exports.Skeleton = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _Gradient = require("../../theme/Gradient.js");
-var _index2 = require("../../utils/index.js");
-var _corners = require("../../utils/corners.js");
-var _SkeletonClock = require("./SkeletonClock.js");
-var _SkeletonProvider = require("./SkeletonProvider.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); }
-/**
- * Skeleton — the leaf placeholder primitive.
- *
- * Every Skeleton on screen reads the shared shimmer/pulse clock from
- * `SkeletonProvider` (see SkeletonClock.tsx). One native-driver loop per
- * provider drives every instance, so 50 placeholders on a list don't spawn
- * 50 timers and the shimmer bands never drift out of phase.
- *
- * Visual:
- *   - A View with the base color and `overflow: hidden` + radius gives the
- *     placeholder its shape.
- *   - For `animation: 'shimmer'`, an Animated.View carrying a 3-stop
- *     linear gradient (transparent → highlight → transparent) translates
- *     across the box. The radius clips it to the right outline automatically.
- *   - For `animation: 'pulse'`, a full-fill Animated.View fades its opacity
- *     between 0 and 0.6. Cheap and useful for tiny shapes where a sweep
- *     would barely be visible.
- *   - For `animation: 'none'` (or when the OS Reduce Motion preference is
- *     on), just the base color renders.
- *
- * `variant` describes the SHAPE: rect (default), rounded (theme.radius.md),
- * circle (50%), or text (small radius, slightly inset height). Set width /
- * height directly for full control.
- */
-
-/** Animation pattern. */
-
-/** Sweep speed for the shimmer band. Ignored for pulse / none. */
-
-/** Pre-defined shape archetype. Plays nicely with `width`/`height` overrides. */
-
-/** `theme.radius` token name or a literal pixel value. */
-
-const resolveRadius = (theme, radius) => {
-  if (typeof radius === 'number') {
-    return radius;
-  }
-  return theme.radius[radius];
-};
-const resolveWidth = width => {
-  if (width === undefined) {
-    return '100%';
-  }
-  if (typeof width === 'number') {
-    return width;
-  }
-  return width;
-};
-const radiusForShape = (theme, shape, width, height, explicit) => {
-  if (explicit !== undefined) {
-    return resolveRadius(theme, explicit);
-  }
-  switch (shape) {
-    case 'circle':
-      // Half the smallest known dimension. If width is a percentage we cannot
-      // resolve here, fall back to height/2, which is the typical caller intent
-      // (square avatars). NOT floored: an odd diameter needs the half pixel or
-      // the shape stops being a circle.
-      return typeof width === 'number' ? Math.min(width, height) / 2 : height / 2;
-    case 'rounded':
-      return theme.radius.md;
-    case 'text':
-      return theme.radius.sm;
-    case 'rect':
-    default:
-      return theme.radius.sm;
-  }
-};
-const Skeleton = ({
-  shape = 'rect',
-  width = '100%',
-  height = 16,
-  radius,
-  variant,
-  speed: _speedProp,
-  colors,
-  style,
-  testID
-}) => {
-  const theme = (0, _index.useTheme)();
-  const defaults = (0, _SkeletonProvider.useSkeletonDefaults)();
-  const clock = (0, _SkeletonClock.useSkeletonClock)();
-  const resolvedVariant = variant ?? defaults.variant ?? 'shimmer';
-  const effectiveVariant = clock.enabled ? resolvedVariant : 'none';
-  const backgroundColor = colors?.background ?? defaults.colors?.background ?? theme.colors.skeleton.background;
-  const highlightColor = colors?.highlight ?? defaults.colors?.highlight ?? theme.colors.skeleton.highlight;
-  const {
-    responsive
-  } = (0, _index2.useScreenDimensions)();
-  const styles = (0, _react.useMemo)(() => buildStyles(), []);
-  const resolvedWidth = resolveWidth(width);
-  const resolvedHeight = responsive.size(height);
-  const borderRadius = radiusForShape(theme, shape, resolvedWidth, resolvedHeight, radius);
-  const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
-  const handleLayout = event => {
-    const next = event.nativeEvent.layout.width;
-    if (next !== containerWidth) {
-      setContainerWidth(next);
-    }
-  };
-
-  // The shimmer band is wider than the box so the gradient feathers off the
-  // edges instead of popping at them. Width = 70% of container, capped to a
-  // sensible minimum so tiny placeholders still get a visible sweep.
-  const bandWidth = (0, _react.useMemo)(() => {
-    if (containerWidth <= 0) {
-      return 0;
-    }
-    return Math.max(48, containerWidth * 0.7);
-  }, [containerWidth]);
-
-  // Interpolate the shared 0→1 clock into translateX. The band starts fully
-  // off the left edge and ends fully off the right edge, so each loop sweeps
-  // the full width regardless of how wide the placeholder is.
-  const translateX = (0, _react.useMemo)(() => {
-    if (containerWidth <= 0) {
-      return 0;
-    }
-    return clock.shimmer.interpolate({
-      inputRange: [0, 1],
-      outputRange: [-bandWidth, containerWidth]
-    });
-  }, [clock.shimmer, bandWidth, containerWidth]);
-  const overlay = (0, _react.useMemo)(() => {
-    if (effectiveVariant === 'none') {
-      return null;
-    }
-    if (effectiveVariant === 'pulse') {
-      // Pulse fades a full-fill highlight overlay in and out. Cheaper than
-      // shimmer and visible at any size.
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        pointerEvents: "none",
-        style: [_reactNative.StyleSheet.absoluteFill, {
-          backgroundColor: highlightColor,
-          opacity: clock.pulse.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, 0.55]
-          })
-        }]
-      });
-    }
-    if (containerWidth <= 0) {
-      return null;
-    }
-
-    // 3-stop gradient: transparent → highlight → transparent. Feathered
-    // edges feel premium; a solid band looks like a bug.
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      pointerEvents: "none",
-      style: [styles.shimmerBand, {
-        width: bandWidth,
-        transform: [{
-          translateX
-        }],
-        experimental_backgroundImage: [(0, _Gradient.toBackgroundImage)({
-          colors: ['transparent', highlightColor, 'transparent'],
-          locations: [0, 0.5, 1],
-          start: {
-            x: 0,
-            y: 0.5
-          },
-          end: {
-            x: 1,
-            y: 0.5
-          }
-        })]
-      }]
-    });
-  }, [effectiveVariant, highlightColor, clock.pulse, containerWidth, styles.shimmerBand, bandWidth, translateX]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    onLayout: handleLayout,
-    accessible: true,
-    accessibilityLabel: "Loading",
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    accessibilityLiveRegion: "polite",
-    testID: testID,
-    style: [styles.base, {
-      width: resolvedWidth,
-      height: resolvedHeight,
-      borderRadius,
-      ..._corners.smoothCorners,
-      backgroundColor
-    }, style],
-    children: overlay
-  });
-};
-exports.Skeleton = Skeleton;
-Skeleton.displayName = 'Skeleton';
-const SkeletonCircle = ({
-  size,
-  style,
-  ...rest
-}) => {
-  // Only the WIDTH is pre-scaled: Skeleton scales the height it is given but
-  // takes a width as written, so the two would disagree and the circle would
-  // render as an ellipse. Height, border radius and the corner smoothing are
-  // left to Skeleton, which computes exactly these from the same numbers.
-  const {
-    responsive
-  } = (0, _index2.useScreenDimensions)();
-  const diameter = responsive.size(size);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
-    ...rest,
-    shape: "circle",
-    width: diameter,
-    height: size,
-    style: style
-  });
-};
-exports.SkeletonCircle = SkeletonCircle;
-SkeletonCircle.displayName = 'SkeletonCircle';
-const SkeletonText = ({
-  lines = 3,
-  lastLineWidth = '60%',
-  spacing,
-  fontSize = 14,
-  variant,
-  speed,
-  radius = 'sm',
-  width = '100%',
-  style,
-  testID
-}) => {
-  const theme = (0, _index.useTheme)();
-  const gap = spacing ?? theme.spacing.xs;
-  // Passed through raw: Skeleton scales the height it is given, so scaling here
-  // too applied the factor twice and left every line short of the text it
-  // stands in for on any screen but the 390-wide reference.
-  const safeLines = Math.max(1, lines);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: style,
-    testID: testID,
-    children: Array.from({
-      length: safeLines
-    }).map((_, index) => {
-      const isLast = index === safeLines - 1;
-      const lineWidth = isLast && safeLines > 1 ? lastLineWidth : width;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
-        shape: "text",
-        width: lineWidth,
-        height: fontSize,
-        radius: radius,
-        variant: variant,
-        speed: speed,
-        style: index < safeLines - 1 ? {
-          marginBottom: gap
-        } : undefined
-      }, index);
-    })
-  });
-};
-exports.SkeletonText = SkeletonText;
-SkeletonText.displayName = 'SkeletonText';
-const buildStyles = () => _reactNative.StyleSheet.create({
-  base: {
-    overflow: 'hidden'
-  },
-  shimmerBand: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0
-  }
-});
-var _default = exports.default = Skeleton;
-//# sourceMappingURL=Skeleton.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.SkeletonText=exports.SkeletonCircle=exports.Skeleton=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_Gradient=require("../../theme/Gradient.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_SkeletonClock=require("./SkeletonClock.js"),_SkeletonProvider=require("./SkeletonProvider.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,s,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(n=t?i:r){if(n.has(e))return n.get(e);n.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?n(o,t,s):o[t]=e[t]);return o})(e,t)}const resolveRadius=(e,t)=>"number"==typeof t?t:e.radius[t],resolveWidth=e=>void 0===e?"100%":e,radiusForShape=(e,t,r,i,n)=>{if(void 0!==n)return resolveRadius(e,n);switch(t){case"circle":return"number"==typeof r?Math.min(r,i)/2:i/2;case"rounded":return e.radius.md;default:return e.radius.sm}},Skeleton=({shape:e="rect",width:t="100%",height:r=16,radius:i,variant:n,speed:s,colors:o,style:a,testID:l})=>{const u=(0,_index.useTheme)(),c=(0,_SkeletonProvider.useSkeletonDefaults)(),d=(0,_SkeletonClock.useSkeletonClock)(),p=n??c.variant??"shimmer",h=d.enabled?p:"none",m=o?.background??c.colors?.background??u.colors.skeleton.background,_=o?.highlight??c.colors?.highlight??u.colors.skeleton.highlight,{responsive:k}=(0,_index2.useScreenDimensions)(),x=(0,_react.useMemo)(()=>buildStyles(),[]),S=resolveWidth(t),v=k.size(r),y=radiusForShape(u,e,S,v,i),[g,f]=(0,_react.useState)(0),b=(0,_react.useMemo)(()=>g<=0?0:Math.max(48,.7*g),[g]),j=(0,_react.useMemo)(()=>g<=0?0:d.shimmer.interpolate({inputRange:[0,1],outputRange:[-b,g]}),[d.shimmer,b,g]),R=(0,_react.useMemo)(()=>"none"===h?null:"pulse"===h?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[_reactNative.StyleSheet.absoluteFill,{backgroundColor:_,opacity:d.pulse.interpolate({inputRange:[0,1],outputRange:[0,.55]})}]}):g<=0?null:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[x.shimmerBand,{width:b,transform:[{translateX:j}],experimental_backgroundImage:[(0,_Gradient.toBackgroundImage)({colors:["transparent",_,"transparent"],locations:[0,.5,1],start:{x:0,y:.5},end:{x:1,y:.5}})]}]}),[h,_,d.pulse,g,x.shimmerBand,b,j]);return(0,_jsxRuntime.jsx)(_reactNative.View,{onLayout:e=>{const t=e.nativeEvent.layout.width;t!==g&&f(t)},accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},accessibilityLiveRegion:"polite",testID:l,style:[x.base,{width:S,height:v,borderRadius:y,..._corners.smoothCorners,backgroundColor:m},a],children:R})};exports.Skeleton=Skeleton,Skeleton.displayName="Skeleton";const SkeletonCircle=({size:e,style:t,...r})=>{const{responsive:i}=(0,_index2.useScreenDimensions)(),n=i.size(e);return(0,_jsxRuntime.jsx)(Skeleton,{...r,shape:"circle",width:n,height:e,style:t})};exports.SkeletonCircle=SkeletonCircle,SkeletonCircle.displayName="SkeletonCircle";const SkeletonText=({lines:e=3,lastLineWidth:t="60%",spacing:r,fontSize:i=14,variant:n,speed:s,radius:o="sm",width:a="100%",style:l,testID:u})=>{const c=(0,_index.useTheme)(),d=r??c.spacing.xs,p=Math.max(1,e);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:l,testID:u,children:Array.from({length:p}).map((e,r)=>{const l=r===p-1&&p>1?t:a;return(0,_jsxRuntime.jsx)(Skeleton,{shape:"text",width:l,height:i,radius:o,variant:n,speed:s,style:r<p-1?{marginBottom:d}:void 0},r)})})};exports.SkeletonText=SkeletonText,SkeletonText.displayName="SkeletonText";const buildStyles=()=>_reactNative.StyleSheet.create({base:{overflow:"hidden"},shimmerBand:{position:"absolute",top:0,bottom:0,left:0}});var _default=exports.default=Skeleton;

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

@@ -1,118 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useSkeletonClock = exports.SkeletonClockProvider = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.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); }
-/**
- * SkeletonClock — single shared animation tick for every <Skeleton> on screen.
- *
- * Why this exists: previously every Skeleton primitive ran its own
- * `Animated.loop` on its own `Animated.Value`. A list of 20 placeholders =
- * 20 independent native-driver timers, each starting at a slightly different
- * mount frame, so their shimmer bands drift out of phase within ~1s and the
- * surface feels noisy. CSS-driven web skeleton libs (react-loading-skeleton,
- * MUI) avoid this because the browser owns a single timeline. We emulate
- * that on RN by hoisting the loop into context.
- *
- * The clock produces a value in `[0, 1)` that wraps every `duration` ms. Each
- * Skeleton interpolates that value into its own translateX / opacity output.
- * One native-driver loop, no drift, ~zero JS cost.
- */
-
-const SHIMMER_DURATION = {
-  slow: 1800,
-  normal: 1200,
-  fast: 800
-};
-const PULSE_DURATION = 1000;
-const SkeletonClockContext = /*#__PURE__*/(0, _react.createContext)(null);
-/**
- * Owns the loops. Mount one of these inside `SkeletonProvider`; every
- * `<Skeleton>` below it shares the same animated values.
- */
-const SkeletonClockProvider = ({
-  speed,
-  enabled,
-  variant: _variant,
-  children
-}) => {
-  const shimmer = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const pulse = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  (0, _react.useEffect)(() => {
-    if (!enabled) {
-      // Park the values at a deterministic "off" state so any consumer that
-      // happens to be reading them still gets a visible (static) skeleton.
-      shimmer.setValue(0);
-      pulse.setValue(0.5);
-      return;
-    }
-
-    // Both loops use the native driver — the JS thread doesn't tick for
-    // either. Both run continuously; consumers read whichever they need.
-    // The negligible cost of running the *other* loop is worth keeping
-    // variant switching instant (no remount, no loop teardown).
-    const shimmerLoop = _reactNative.Animated.loop(_reactNative.Animated.timing(shimmer, {
-      toValue: 1,
-      duration: SHIMMER_DURATION[speed],
-      easing: _reactNative.Easing.linear,
-      useNativeDriver: true
-    }));
-    const pulseLoop = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(pulse, {
-      toValue: 1,
-      duration: PULSE_DURATION / 2,
-      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
-      useNativeDriver: true
-    }), _reactNative.Animated.timing(pulse, {
-      toValue: 0,
-      duration: PULSE_DURATION / 2,
-      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
-      useNativeDriver: true
-    })]));
-    shimmerLoop.start();
-    pulseLoop.start();
-    return () => {
-      shimmerLoop.stop();
-      pulseLoop.stop();
-    };
-    // `variant` is intentionally NOT a dependency — both loops always run
-    // so switching variants is a single render with no loop teardown.
-  }, [speed, enabled, shimmer, pulse]);
-  const value = (0, _react.useMemo)(() => ({
-    shimmer,
-    pulse,
-    enabled
-  }), [shimmer, pulse, enabled]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonClockContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-exports.SkeletonClockProvider = SkeletonClockProvider;
-SkeletonClockProvider.displayName = 'SkeletonClockProvider';
-
-/**
- * Read the active clock. Returns a fallback "always-still" clock when no
- * provider is mounted, so the primitives still render (statically) outside
- * one — keeps demo/storybook usage friction-free.
- */
-const useSkeletonClock = () => {
-  const ctx = (0, _react.useContext)(SkeletonClockContext);
-  if (ctx) {
-    return ctx;
-  }
-  // Fallback: a permanently-stopped clock. Created once at module scope.
-  return fallbackClock;
-};
-exports.useSkeletonClock = useSkeletonClock;
-const fallbackClock = {
-  shimmer: (0, _index.createAnimatedValue)(0),
-  pulse: (0, _index.createAnimatedValue)(0.5),
-  enabled: false
-};
-//# sourceMappingURL=SkeletonClock.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useSkeletonClock=exports.SkeletonClockProvider=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,i,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(n=t?a:r){if(n.has(e))return n.get(e);n.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?n(o,t,i):o[t]=e[t]);return o})(e,t)}const SHIMMER_DURATION={slow:1800,normal:1200,fast:800},PULSE_DURATION=1e3,SkeletonClockContext=(0,_react.createContext)(null),SkeletonClockProvider=({speed:e,enabled:t,variant:r,children:a})=>{const n=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,i=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current;(0,_react.useEffect)(()=>{if(!t)return n.setValue(0),void i.setValue(.5);const r=_reactNative.Animated.loop(_reactNative.Animated.timing(n,{toValue:1,duration:SHIMMER_DURATION[e],easing:_reactNative.Easing.linear,useNativeDriver:!0})),a=_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(i,{toValue:1,duration:500,easing:_reactNative.Easing.inOut(_reactNative.Easing.ease),useNativeDriver:!0}),_reactNative.Animated.timing(i,{toValue:0,duration:500,easing:_reactNative.Easing.inOut(_reactNative.Easing.ease),useNativeDriver:!0})]));return r.start(),a.start(),()=>{r.stop(),a.stop()}},[e,t,n,i]);const o=(0,_react.useMemo)(()=>({shimmer:n,pulse:i,enabled:t}),[n,i,t]);return(0,_jsxRuntime.jsx)(SkeletonClockContext.Provider,{value:o,children:a})};exports.SkeletonClockProvider=SkeletonClockProvider,SkeletonClockProvider.displayName="SkeletonClockProvider";const useSkeletonClock=()=>{const e=(0,_react.useContext)(SkeletonClockContext);return e||fallbackClock};exports.useSkeletonClock=useSkeletonClock;const fallbackClock={shimmer:(0,_index.createAnimatedValue)(0),pulse:(0,_index.createAnimatedValue)(.5),enabled:!1};