@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/Select/Select.js

@@ -1,273 +1 @@
-"use strict";
-
-/**
- * Select — single + multi select with bottom-sheet picker.
- *
- * The trigger is a FieldBase row; the picker itself is the shared OptionSheet
- * primitive (also behind InlineSelect), so the sheet look + behaviour never
- * drift between the two. Supports optional client-side search, theme-aware
- * styling, full a11y, and dark-mode auto.
- */
-
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { renderSlotIcon } from "../AppIcon/slotIcon.js";
-import { Chevron } from "../FieldBase/Chevron.js";
-import { FieldBase, FieldLabel, FieldMessage, RequiredMark, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
-import { OptionSheet } from "../OptionSheet/OptionSheet.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// `unknown` here keeps the forwardRef signature non-generic — consumers who
-// pass non-`SelectOption` shapes use the accessor props; type inference is
-// preserved at the call site via the `SelectProps<T>` union.
-const Select = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    options,
-    getOptionLabel,
-    getOptionValue,
-    getOptionDisabled,
-    getOptionDescription,
-    getOptionIcon,
-    placeholder,
-    searchable = false,
-    haptic,
-    label,
-    title,
-    required = false,
-    error,
-    disabled = false,
-    size = 'md',
-    variant: variantProp,
-    leftIcon,
-    rightIcon,
-    chevronColor,
-    chevronSize,
-    borderRadius: borderRadiusProp,
-    accessibilityLabel,
-    style,
-    triggerStyle,
-    textStyle,
-    optionStyle,
-    selectedOptionStyle,
-    optionTextStyle,
-    selectedOptionTextStyle,
-    testID
-  } = props;
-  const multi = props.multi === true;
-
-  // Accessors — fall back to SelectOption-shaped reads when unset so the
-  // default/typed call site keeps zero boilerplate.
-  const labelOf = useCallback(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
-  const valueOf = useCallback(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
-  const disabledOf = useCallback(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
-  const descriptionOf = useCallback(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
-  const iconOf = useCallback(o => getOptionIcon ? getOptionIcon(o) : o.icon, [getOptionIcon]);
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeTokens = resolveFieldSize(theme, size);
-  const fieldText = resolveFieldTextStyle(theme, {
-    disabled
-  });
-
-  // Variant resolution mirrors Input: caller prop → component-specific token →
-  // shared field-family token → library default. Lets a brand flip every
-  // input-style control in one place while keeping a Select-specific override.
-  const variant = variantProp ?? theme.components.select?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'outlined';
-
-  // Bridge the legacy fill-colour API (components.select.fillColors[variant])
-  // onto FieldBase's FieldVariantTokens shape — same mapping Input uses.
-  const fillOverrides = useMemo(() => {
-    const legacy = theme.components.select?.fillColors?.[variant];
-    if (!legacy) {
-      return undefined;
-    }
-    const overrides = {};
-    if (legacy.idleEmpty !== undefined) {
-      overrides.backgroundIdleEmpty = legacy.idleEmpty;
-    }
-    if (legacy.idleFilled !== undefined) {
-      overrides.backgroundIdleFilled = legacy.idleFilled;
-    }
-    if (legacy.focus !== undefined) {
-      overrides.backgroundFocused = legacy.focus;
-    }
-    if (legacy.error !== undefined) {
-      overrides.backgroundError = legacy.error;
-    }
-    if (legacy.disabled !== undefined) {
-      overrides.backgroundDisabled = legacy.disabled;
-    }
-    return Object.keys(overrides).length > 0 ? overrides : undefined;
-  }, [theme.components.select?.fillColors, variant]);
-  const borderRadiusOverride = borderRadiusProp ?? theme.components.select?.borderRadius;
-  const [open, setOpen] = useState(false);
-
-  // Selection helpers — typed to keep callbacks fully type-safe.
-  const isSelected = useCallback(optValue => {
-    if (multi) {
-      const arr = props.value ?? [];
-      return arr.includes(optValue);
-    }
-    return props.value === optValue;
-  }, [multi, props.value]);
-  const selectedOptions = useMemo(() => {
-    if (multi) {
-      const arr = props.value ?? [];
-      return options.filter(o => arr.includes(valueOf(o)));
-    }
-    const v = props.value;
-    if (v === undefined || v === null) {
-      return [];
-    }
-    const found = options.find(o => valueOf(o) === v);
-    return found ? [found] : [];
-  }, [multi, options, props.value, valueOf]);
-  const handleOpen = useCallback(() => {
-    if (disabled) {
-      return;
-    }
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    setOpen(true);
-  }, [disabled, haptic]);
-  const handleClose = useCallback(() => {
-    setOpen(false);
-  }, []);
-  const handleSelect = useCallback(option => {
-    if (disabledOf(option)) {
-      return;
-    }
-    const optValue = valueOf(option);
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    if (multi) {
-      const current = props.value ?? [];
-      const next = current.includes(optValue) ? current.filter(v => v !== optValue) : [...current, optValue];
-      props.onChange(next);
-      return;
-    }
-    props.onChange(optValue);
-    handleClose();
-  }, [multi, props, handleClose, disabledOf, valueOf, haptic]);
-
-  // Trigger label / placeholder text.
-  const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => labelOf(o)).join(', ');
-  const showingPlaceholder = selectedOptions.length === 0;
-  const hasError = typeof error === 'string' && error.length > 0;
-
-  // Named slot icons follow the field palette the way Input's do: grey at
-  // rest, dark while the sheet is open, dimmed while disabled.
-  const slotState = {
-    color: disabled ? theme.colors.field.iconDisabled : open ? theme.colors.field.iconFocused : theme.colors.field.icon,
-    size: sizeTokens.iconSize,
-    disabled,
-    focused: open,
-    error: hasError
-  };
-  const a11ySummary = selectedOptions.length === 0 ? placeholder ?? 'No selection' : `Selected: ${selectedOptions.map(o => labelOf(o)).join(', ')}`;
-  const a11yLabel = accessibilityLabel ?? `${label ?? 'Select'}. ${a11ySummary}`;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, style],
-    testID: testID,
-    children: [label ? /*#__PURE__*/_jsx(FieldLabel, {
-      size: size,
-      required: required,
-      children: label
-    }) : null, /*#__PURE__*/_jsx(View, {
-      ref: ref,
-      collapsable: false,
-      children: /*#__PURE__*/_jsx(FieldBase, {
-        size: size,
-        variant: variant,
-        disabled: disabled,
-        error: hasError,
-        filled: selectedOptions.length > 0,
-        onPress: handleOpen,
-        borderRadius: borderRadiusOverride,
-        fillOverrides: fillOverrides
-        // The underline row has no box: its text and chevron sit flush with
-        // the rule's ends, the same as Input's underline text.
-        ,
-        paddingHorizontal: variant === 'underline' ? 0 : undefined,
-        accessibilityRole: "button",
-        accessibilityLabel: a11yLabel,
-        accessibilityState: {
-          disabled,
-          expanded: open
-        },
-        style: triggerStyle,
-        leading: leftIcon ? /*#__PURE__*/_jsx(View, {
-          children: renderSlotIcon(leftIcon, slotState)
-        }) : null,
-        trailing: rightIcon ? /*#__PURE__*/_jsx(View, {
-          children: renderSlotIcon(rightIcon, slotState)
-        }) : /*#__PURE__*/_jsx(Chevron, {
-          color: chevronColor ?? (disabled ? theme.colors.text.disabled : theme.colors.text.tertiary),
-          size: chevronSize ?? sizeTokens.iconSize,
-          open: open,
-          style: styles.chevron
-        }),
-        children: /*#__PURE__*/_jsxs(Text, {
-          style: [styles.triggerText, {
-            color: showingPlaceholder ? fieldText.placeholderColor : fieldText.color,
-            fontSize: sizeTokens.fontSize,
-            ...fieldText.weightStyle
-          }, textStyle],
-          numberOfLines: 1,
-          children: [triggerText, showingPlaceholder && required && !label ? /*#__PURE__*/_jsx(RequiredMark, {}) : null]
-        })
-      })
-    }), /*#__PURE__*/_jsx(FieldMessage, {
-      size: size,
-      error: true,
-      text: hasError ? error : undefined
-    }), /*#__PURE__*/_jsx(OptionSheet, {
-      open: open,
-      onClose: handleClose,
-      title: title,
-      accessibilityLabel: label ?? placeholder ?? 'Options',
-      options: options,
-      labelOf: labelOf,
-      getValue: valueOf,
-      disabledOf: disabledOf,
-      descriptionOf: descriptionOf,
-      iconOf: iconOf,
-      isSelected: isSelected,
-      onSelect: handleSelect,
-      multi: multi,
-      searchable: searchable,
-      optionStyle: optionStyle,
-      selectedOptionStyle: selectedOptionStyle,
-      optionTextStyle: optionTextStyle,
-      selectedOptionTextStyle: selectedOptionTextStyle,
-      searchSelectionColor: resolveVariantColors(theme, variant, fillOverrides).borderFocusedRepresentative
-    })]
-  });
-});
-Select.displayName = 'Select';
-const buildStyles = _theme => StyleSheet.create({
-  container: {
-    width: '100%'
-  },
-  label: {
-    includeFontPadding: false
-  },
-  triggerText: {
-    flex: 1,
-    includeFontPadding: false
-  },
-  errorText: {
-    includeFontPadding: false
-  },
-  chevron: {
-    marginLeft: 8
-  }
-});
-export { Select };
-export default Select;
-//# sourceMappingURL=Select.js.map
+"use strict";import React,{forwardRef,useCallback,useMemo,useState}from"react";import{StyleSheet,Text,View}from"react-native";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Chevron}from"../FieldBase/Chevron.js";import{FieldBase,FieldLabel,FieldMessage,fieldTextAsString,hasFieldText,RequiredMark,resolveFieldSize,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sameSelectValue=(e,l)=>String(e)===String(l),containsValue=(e,l)=>e.some(e=>sameSelectValue(e,l)),Select=forwardRef((e,l)=>{const{options:t,getOptionLabel:i,getOptionValue:o,getOptionDisabled:r,getOptionDescription:s,getOptionIcon:n,placeholder:a,searchable:c=!1,haptic:d,label:u,help:p,title:f,required:S=!1,error:b,helperText:g,prefix:h,numberOfLines:x=1,disabled:m=!1,size:v="md",variant:y,leftIcon:j,rightIcon:F,chevronColor:C,chevronSize:O,borderRadius:T,accessibilityLabel:V,labelStyle:k,style:z,triggerStyle:_,textStyle:I,optionStyle:R,selectedOptionStyle:H,optionTextStyle:w,selectedOptionTextStyle:L,testID:M}=e,D=!0===e.multi,B=useCallback(e=>i?i(e):e.label??"",[i]),P=useCallback(e=>o?o(e):e.value,[o]),q=useCallback(e=>r?r(e):!0===e.disabled,[r]),A=useCallback(e=>s?s(e):e.description,[s]),E=useCallback(e=>n?n(e):e.icon,[n]),N=useTheme(),$=useMemo(()=>buildStyles(N),[N]),G=resolveFieldSize(N,v),J=resolveFieldTextStyle(N,{disabled:m}),K=y??N.components.select?.defaultVariant??N.components.field?.defaultVariant??"outlined",Q=useMemo(()=>{const e=N.components.select?.fillColors?.[K];if(!e)return;const l={};return void 0!==e.idleEmpty&&(l.backgroundIdleEmpty=e.idleEmpty),void 0!==e.idleFilled&&(l.backgroundIdleFilled=e.idleFilled),void 0!==e.focus&&(l.backgroundFocused=e.focus),void 0!==e.error&&(l.backgroundError=e.error),void 0!==e.disabled&&(l.backgroundDisabled=e.disabled),Object.keys(l).length>0?l:void 0},[N.components.select?.fillColors,K]),U=T??N.components.select?.borderRadius,[W,X]=useState(!1),Y=useCallback(l=>{if(D){const t=e.value??[];return containsValue(t,l)}return null!=e.value&&sameSelectValue(e.value,l)},[D,e.value]),Z=useMemo(()=>{if(D){const l=e.value??[];return t.filter(e=>containsValue(l,P(e)))}const l=e.value;if(null==l)return[];const i=t.find(e=>sameSelectValue(P(e),l));return i?[i]:[]},[D,t,e.value,P]),ee=useCallback(()=>{if(m)return;const e=resolveHaptic(d,"selection");e&&triggerHaptic(e),X(!0)},[m,d]),le=useCallback(()=>{X(!1)},[]),te=useCallback(l=>{if(q(l))return;const t=P(l),i=resolveHaptic(d,"selection");if(i&&triggerHaptic(i),D){const l=e.value??[],i=containsValue(l,t)?l.filter(e=>!sameSelectValue(e,t)):[...l,t];return void e.onChange(i)}e.onChange(t),le()},[D,e,le,q,P,d]),ie=0===Z.length?a??"Select…":Z.map(e=>B(e)).join(", "),oe=0===Z.length,re=hasFieldText(b),se=hasFieldText(u),ne=fieldTextAsString(u),ae=Math.round(1.4*G.fontSize),ce={color:m?N.colors.field.iconDisabled:W?N.colors.field.iconFocused:N.colors.field.icon,size:G.iconSize,disabled:m,focused:W,error:re},de=0===Z.length?a??"No selection":`Selected: ${Z.map(e=>B(e)).join(", ")}`,ue=V??`${ne??"Select"}. ${de}`;return _jsxs(View,{style:[$.container,z],testID:M,children:[se?_jsx(FieldLabel,{size:v,required:S,help:p,style:k,children:u}):null,_jsx(View,{ref:l,collapsable:!1,children:_jsxs(FieldBase,{size:v,variant:K,disabled:m,error:re,filled:Z.length>0,onPress:ee,borderRadius:U,fillOverrides:Q,paddingHorizontal:"underline"===K?0:void 0,accessibilityRole:"button",accessibilityLabel:ue,accessibilityState:{disabled:m,expanded:W},style:_,slotAlign:1===x?"center":"top",slotLineHeight:1===x?void 0:ae,leading:j?_jsx(View,{children:renderSlotIcon(j,ce)}):null,trailing:F?_jsx(View,{children:renderSlotIcon(F,ce)}):_jsx(Chevron,{color:C??(m?N.colors.text.disabled:N.colors.text.tertiary),size:O??G.iconSize,open:W,style:$.chevron}),children:[hasFieldText(h)?"string"==typeof h||"number"==typeof h?_jsx(Text,{style:[$.prefix,{color:J.placeholderColor,fontSize:G.fontSize,lineHeight:1===x?void 0:ae,marginRight:N.spacing.xs}],children:h}):_jsx(View,{style:[$.prefixNode,{minHeight:1===x?void 0:ae,justifyContent:"center",marginRight:N.spacing.xs}],children:h}):null,_jsxs(Text,{style:[$.triggerText,{color:oe?J.placeholderColor:J.color,fontSize:G.fontSize,lineHeight:1===x?void 0:ae,...J.weightStyle},I],numberOfLines:x,children:[ie,oe&&S&&!se?_jsx(RequiredMark,{}):null]})]})}),_jsx(FieldMessage,{size:v,error:re,text:re?b:g}),_jsx(OptionSheet,{open:W,onClose:le,title:f??ne,accessibilityLabel:ne??(se?f:void 0)??a??"Options",options:t,labelOf:B,getValue:P,disabledOf:q,descriptionOf:A,iconOf:E,isSelected:Y,onSelect:te,multi:D,searchable:c,optionStyle:R,selectedOptionStyle:H,optionTextStyle:w,selectedOptionTextStyle:L,searchSelectionColor:resolveVariantColors(N,K,Q).borderFocusedRepresentative})]})});Select.displayName="Select";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},label:{includeFontPadding:!1},triggerText:{flex:1,includeFontPadding:!1},errorText:{includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},chevron:{marginLeft:8}});export{Select};export default Select;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { default, Select } from "./Select.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{default,Select}from"./Select.js";

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

@@ -1,278 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import React, { useMemo, useState } from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
-import { toBackgroundImage } from "../../theme/Gradient.js";
-import { useScreenDimensions } from "../../utils/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { useSkeletonClock } from "./SkeletonClock.js";
-import { useSkeletonDefaults } from "./SkeletonProvider.js";
-
-/** 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. */
-import { jsx as _jsx } from "react/jsx-runtime";
-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 = useTheme();
-  const defaults = useSkeletonDefaults();
-  const clock = 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
-  } = useScreenDimensions();
-  const styles = useMemo(() => buildStyles(), []);
-  const resolvedWidth = resolveWidth(width);
-  const resolvedHeight = responsive.size(height);
-  const borderRadius = radiusForShape(theme, shape, resolvedWidth, resolvedHeight, radius);
-  const [containerWidth, setContainerWidth] = 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 = 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 = useMemo(() => {
-    if (containerWidth <= 0) {
-      return 0;
-    }
-    return clock.shimmer.interpolate({
-      inputRange: [0, 1],
-      outputRange: [-bandWidth, containerWidth]
-    });
-  }, [clock.shimmer, bandWidth, containerWidth]);
-  const overlay = 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__*/_jsx(Animated.View, {
-        pointerEvents: "none",
-        style: [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__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [styles.shimmerBand, {
-        width: bandWidth,
-        transform: [{
-          translateX
-        }],
-        experimental_backgroundImage: [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__*/_jsx(View, {
-    onLayout: handleLayout,
-    accessible: true,
-    accessibilityLabel: "Loading",
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    accessibilityLiveRegion: "polite",
-    testID: testID,
-    style: [styles.base, {
-      width: resolvedWidth,
-      height: resolvedHeight,
-      borderRadius,
-      ...smoothCorners,
-      backgroundColor
-    }, style],
-    children: overlay
-  });
-};
-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
-  } = useScreenDimensions();
-  const diameter = responsive.size(size);
-  return /*#__PURE__*/_jsx(Skeleton, {
-    ...rest,
-    shape: "circle",
-    width: diameter,
-    height: size,
-    style: style
-  });
-};
-SkeletonCircle.displayName = 'SkeletonCircle';
-const SkeletonText = ({
-  lines = 3,
-  lastLineWidth = '60%',
-  spacing,
-  fontSize = 14,
-  variant,
-  speed,
-  radius = 'sm',
-  width = '100%',
-  style,
-  testID
-}) => {
-  const theme = 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__*/_jsx(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__*/_jsx(Skeleton, {
-        shape: "text",
-        width: lineWidth,
-        height: fontSize,
-        radius: radius,
-        variant: variant,
-        speed: speed,
-        style: index < safeLines - 1 ? {
-          marginBottom: gap
-        } : undefined
-      }, index);
-    })
-  });
-};
-SkeletonText.displayName = 'SkeletonText';
-const buildStyles = () => StyleSheet.create({
-  base: {
-    overflow: 'hidden'
-  },
-  shimmerBand: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0
-  }
-});
-export { Skeleton, SkeletonCircle, SkeletonText };
-export default Skeleton;
-//# sourceMappingURL=Skeleton.js.map
+"use strict";import React,{useMemo,useState}from"react";import{Animated,StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{toBackgroundImage}from"../../theme/Gradient.js";import{useScreenDimensions}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{useSkeletonClock}from"./SkeletonClock.js";import{useSkeletonDefaults}from"./SkeletonProvider.js";import{jsx as _jsx}from"react/jsx-runtime";const resolveRadius=(e,t)=>"number"==typeof t?t:e.radius[t],resolveWidth=e=>void 0===e?"100%":e,radiusForShape=(e,t,s,o,i)=>{if(void 0!==i)return resolveRadius(e,i);switch(t){case"circle":return"number"==typeof s?Math.min(s,o)/2:o/2;case"rounded":return e.radius.md;default:return e.radius.sm}},Skeleton=({shape:e="rect",width:t="100%",height:s=16,radius:o,variant:i,speed:r,colors:n,style:a,testID:l})=>{const u=useTheme(),m=useSkeletonDefaults(),c=useSkeletonClock(),d=i??m.variant??"shimmer",h=c.enabled?d:"none",p=n?.background??m.colors?.background??u.colors.skeleton.background,S=n?.highlight??m.colors?.highlight??u.colors.skeleton.highlight,{responsive:k}=useScreenDimensions(),g=useMemo(()=>buildStyles(),[]),y=resolveWidth(t),b=k.size(s),x=radiusForShape(u,e,y,b,o),[f,v]=useState(0),j=useMemo(()=>f<=0?0:Math.max(48,.7*f),[f]),w=useMemo(()=>f<=0?0:c.shimmer.interpolate({inputRange:[0,1],outputRange:[-j,f]}),[c.shimmer,j,f]),C=useMemo(()=>"none"===h?null:"pulse"===h?_jsx(Animated.View,{pointerEvents:"none",style:[StyleSheet.absoluteFill,{backgroundColor:S,opacity:c.pulse.interpolate({inputRange:[0,1],outputRange:[0,.55]})}]}):f<=0?null:_jsx(Animated.View,{pointerEvents:"none",style:[g.shimmerBand,{width:j,transform:[{translateX:w}],experimental_backgroundImage:[toBackgroundImage({colors:["transparent",S,"transparent"],locations:[0,.5,1],start:{x:0,y:.5},end:{x:1,y:.5}})]}]}),[h,S,c.pulse,f,g.shimmerBand,j,w]);return _jsx(View,{onLayout:e=>{const t=e.nativeEvent.layout.width;t!==f&&v(t)},accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},accessibilityLiveRegion:"polite",testID:l,style:[g.base,{width:y,height:b,borderRadius:x,...smoothCorners,backgroundColor:p},a],children:C})};Skeleton.displayName="Skeleton";const SkeletonCircle=({size:e,style:t,...s})=>{const{responsive:o}=useScreenDimensions(),i=o.size(e);return _jsx(Skeleton,{...s,shape:"circle",width:i,height:e,style:t})};SkeletonCircle.displayName="SkeletonCircle";const SkeletonText=({lines:e=3,lastLineWidth:t="60%",spacing:s,fontSize:o=14,variant:i,speed:r,radius:n="sm",width:a="100%",style:l,testID:u})=>{const m=useTheme(),c=s??m.spacing.xs,d=Math.max(1,e);return _jsx(View,{style:l,testID:u,children:Array.from({length:d}).map((e,s)=>_jsx(Skeleton,{shape:"text",width:s===d-1&&d>1?t:a,height:o,radius:n,variant:i,speed:r,style:s<d-1?{marginBottom:c}:void 0},s))})};SkeletonText.displayName="SkeletonText";const buildStyles=()=>StyleSheet.create({base:{overflow:"hidden"},shimmerBand:{position:"absolute",top:0,bottom:0,left:0}});export{Skeleton,SkeletonCircle,SkeletonText};export default Skeleton;

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

@@ -1,111 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
-import { Animated, Easing } from 'react-native';
-import { createAnimatedValue } from "../../theme/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const SHIMMER_DURATION = {
-  slow: 1800,
-  normal: 1200,
-  fast: 800
-};
-const PULSE_DURATION = 1000;
-const SkeletonClockContext = /*#__PURE__*/createContext(null);
-/**
- * Owns the loops. Mount one of these inside `SkeletonProvider`; every
- * `<Skeleton>` below it shares the same animated values.
- */
-export const SkeletonClockProvider = ({
-  speed,
-  enabled,
-  variant: _variant,
-  children
-}) => {
-  const shimmer = useRef(createAnimatedValue(0)).current;
-  const pulse = useRef(createAnimatedValue(0)).current;
-  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 = Animated.loop(Animated.timing(shimmer, {
-      toValue: 1,
-      duration: SHIMMER_DURATION[speed],
-      easing: Easing.linear,
-      useNativeDriver: true
-    }));
-    const pulseLoop = Animated.loop(Animated.sequence([Animated.timing(pulse, {
-      toValue: 1,
-      duration: PULSE_DURATION / 2,
-      easing: Easing.inOut(Easing.ease),
-      useNativeDriver: true
-    }), Animated.timing(pulse, {
-      toValue: 0,
-      duration: PULSE_DURATION / 2,
-      easing: Easing.inOut(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 = useMemo(() => ({
-    shimmer,
-    pulse,
-    enabled
-  }), [shimmer, pulse, enabled]);
-  return /*#__PURE__*/_jsx(SkeletonClockContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-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.
- */
-export const useSkeletonClock = () => {
-  const ctx = useContext(SkeletonClockContext);
-  if (ctx) {
-    return ctx;
-  }
-  // Fallback: a permanently-stopped clock. Created once at module scope.
-  return fallbackClock;
-};
-const fallbackClock = {
-  shimmer: createAnimatedValue(0),
-  pulse: createAnimatedValue(0.5),
-  enabled: false
-};
-//# sourceMappingURL=SkeletonClock.js.map
+"use strict";import React,{createContext,useContext,useEffect,useMemo,useRef}from"react";import{Animated,Easing}from"react-native";import{createAnimatedValue}from"../../theme/index.js";import{jsx as _jsx}from"react/jsx-runtime";const SHIMMER_DURATION={slow:1800,normal:1200,fast:800},PULSE_DURATION=1e3,SkeletonClockContext=createContext(null);export const SkeletonClockProvider=({speed:e,enabled:t,variant:n,children:a})=>{const o=useRef(createAnimatedValue(0)).current,r=useRef(createAnimatedValue(0)).current;useEffect(()=>{if(!t)return o.setValue(0),void r.setValue(.5);const n=Animated.loop(Animated.timing(o,{toValue:1,duration:SHIMMER_DURATION[e],easing:Easing.linear,useNativeDriver:!0})),a=Animated.loop(Animated.sequence([Animated.timing(r,{toValue:1,duration:500,easing:Easing.inOut(Easing.ease),useNativeDriver:!0}),Animated.timing(r,{toValue:0,duration:500,easing:Easing.inOut(Easing.ease),useNativeDriver:!0})]));return n.start(),a.start(),()=>{n.stop(),a.stop()}},[e,t,o,r]);const i=useMemo(()=>({shimmer:o,pulse:r,enabled:t}),[o,r,t]);return _jsx(SkeletonClockContext.Provider,{value:i,children:a})};SkeletonClockProvider.displayName="SkeletonClockProvider";export const useSkeletonClock=()=>{const e=useContext(SkeletonClockContext);return e||fallbackClock};const fallbackClock={shimmer:createAnimatedValue(0),pulse:createAnimatedValue(.5),enabled:!1};