@webority/mobile-ui 0.0.38 → 0.1.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
+import e,{forwardRef as t,useCallback as i,useMemo as o,useState as l}from"react";import{StyleSheet as n,Text as r,View as s}from"react-native";import{useTheme as d}from"../../theme/index.js";import{resolveHaptic as c,triggerHaptic as a}from"../../utils/index.js";import{renderSlotIcon as p}from"../AppIcon/slotIcon.js";import{Chevron as u}from"../FieldBase/Chevron.js";import{FieldBase as f,FieldLabel as g,FieldMessage as h,fieldTextAsString as b,hasFieldText as m,RequiredMark as y,resolveFieldSize as S,resolveFieldTextStyle as v,resolveVariantColors as x}from"../FieldBase/FieldBase.js";import{OptionSheet as O}from"../OptionSheet/OptionSheet.js";import{jsx as z,jsxs as j}from"react/jsx-runtime";const sameSelectValue=(e,t)=>String(e)===String(t),containsValue=(e,t)=>e.some(e=>sameSelectValue(e,t)),F=t((e,t)=>{const{options:n,getOptionLabel:F,getOptionValue:C,getOptionDisabled:I,getOptionDescription:k,getOptionIcon:L,placeholder:T,searchable:R=!1,haptic:D,label:H,help:P,title:E,required:N=!1,error:V,helperText:B,prefix:$,numberOfLines:q=1,disabled:w=!1,size:A="md",variant:M,leftIcon:G,rightIcon:J,chevronColor:K,chevronSize:Q,borderRadius:U,accessibilityLabel:W,labelStyle:X,style:Y,triggerStyle:Z,textStyle:_,optionStyle:ee,selectedOptionStyle:te,optionTextStyle:ie,selectedOptionTextStyle:oe,testID:le}=e,ne=!0===e.multi,re=i(e=>F?F(e):e.label??"",[F]),se=i(e=>C?C(e):e.value,[C]),de=i(e=>I?I(e):!0===e.disabled,[I]),ce=i(e=>k?k(e):e.description,[k]),ae=i(e=>L?L(e):e.icon,[L]),pe=d(),ue=o(()=>buildStyles(pe),[pe]),fe=S(pe,A),ge=v(pe,{disabled:w}),he=M??pe.components.select?.defaultVariant??pe.components.field?.defaultVariant??"outlined",be=o(()=>{const e=pe.components.select?.fillColors?.[he];if(!e)return;const t={};return void 0!==e.idleEmpty&&(t.backgroundIdleEmpty=e.idleEmpty),void 0!==e.idleFilled&&(t.backgroundIdleFilled=e.idleFilled),void 0!==e.focus&&(t.backgroundFocused=e.focus),void 0!==e.error&&(t.backgroundError=e.error),void 0!==e.disabled&&(t.backgroundDisabled=e.disabled),Object.keys(t).length>0?t:void 0},[pe.components.select?.fillColors,he]),me=U??pe.components.select?.borderRadius,[ye,Se]=l(!1),ve=i(t=>{if(ne){const i=e.value??[];return containsValue(i,t)}return null!=e.value&&sameSelectValue(e.value,t)},[ne,e.value]),xe=o(()=>{if(ne){const t=e.value??[];return n.filter(e=>containsValue(t,se(e)))}const t=e.value;if(null==t)return[];const i=n.find(e=>sameSelectValue(se(e),t));return i?[i]:[]},[ne,n,e.value,se]),Oe=i(()=>{if(w)return;const e=c(D,"selection");e&&a(e),Se(!0)},[w,D]),ze=i(()=>{Se(!1)},[]),je=i(t=>{if(de(t))return;const i=se(t),o=c(D,"selection");if(o&&a(o),ne){const t=e.value??[],o=containsValue(t,i)?t.filter(e=>!sameSelectValue(e,i)):[...t,i];return void e.onChange(o)}e.onChange(i),ze()},[ne,e,ze,de,se,D]),Fe=0===xe.length?T??"Select…":xe.map(e=>re(e)).join(", "),Ce=0===xe.length,Ie=m(V),ke=m(H),Le=b(H),Te=Math.round(1.4*fe.fontSize),Re={color:w?pe.colors.field.iconDisabled:ye?pe.colors.field.iconFocused:pe.colors.field.icon,size:fe.iconSize,disabled:w,focused:ye,error:Ie},De=0===xe.length?T??"No selection":`Selected: ${xe.map(e=>re(e)).join(", ")}`,He=W??`${Le??"Select"}. ${De}`;return j(s,{style:[ue.container,Y],testID:le,children:[ke?z(g,{size:A,required:N,help:P,style:X,children:H}):null,z(s,{ref:t,collapsable:!1,children:j(f,{size:A,variant:he,disabled:w,error:Ie,filled:xe.length>0,onPress:Oe,borderRadius:me,fillOverrides:be,paddingHorizontal:"underline"===he?0:void 0,accessibilityRole:"button",accessibilityLabel:He,accessibilityState:{disabled:w,expanded:ye},style:Z,slotAlign:1===q?"center":"top",slotLineHeight:1===q?void 0:Te,leading:G?z(s,{children:p(G,Re)}):null,trailing:J?z(s,{children:p(J,Re)}):z(u,{color:K??(w?pe.colors.text.disabled:pe.colors.text.tertiary),size:Q??fe.iconSize,open:ye,style:ue.chevron}),children:[m($)?"string"==typeof $||"number"==typeof $?z(r,{style:[ue.prefix,{color:ge.placeholderColor,fontSize:fe.fontSize,lineHeight:1===q?void 0:Te,marginRight:pe.spacing.xs}],children:$}):z(s,{style:[ue.prefixNode,{minHeight:1===q?void 0:Te,justifyContent:"center",marginRight:pe.spacing.xs}],children:$}):null,j(r,{style:[ue.triggerText,{color:Ce?ge.placeholderColor:ge.color,fontSize:fe.fontSize,lineHeight:1===q?void 0:Te,...ge.weightStyle},_],numberOfLines:q,children:[Fe,Ce&&N&&!ke?z(y,{}):null]})]})}),z(h,{size:A,error:Ie,text:Ie?V:B}),z(O,{open:ye,onClose:ze,title:E??Le,accessibilityLabel:Le??(ke?E:void 0)??T??"Options",options:n,labelOf:re,getValue:se,disabledOf:de,descriptionOf:ce,iconOf:ae,isSelected:ve,onSelect:je,multi:ne,searchable:R,optionStyle:ee,selectedOptionStyle:te,optionTextStyle:ie,selectedOptionTextStyle:oe,searchSelectionColor:x(pe,he,be).borderFocusedRepresentative})]})});F.displayName="Select";const buildStyles=e=>n.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{F as Select};export default F;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { default, Select } from "./Select.js";
-//# sourceMappingURL=index.js.map
+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
+import e,{useMemo as t,useState as i}from"react";import{Animated as s,StyleSheet as r,View as o}from"react-native";import{useTheme as n}from"../../theme/index.js";import{toBackgroundImage as a}from"../../theme/Gradient.js";import{useScreenDimensions as l}from"../../utils/index.js";import{smoothCorners as m}from"../../utils/corners.js";import{useSkeletonClock as c}from"./SkeletonClock.js";import{useSkeletonDefaults as d}from"./SkeletonProvider.js";import{jsx as p}from"react/jsx-runtime";const Skeleton=({shape:e="rect",width:h="100%",height:u=16,radius:g,variant:y,speed:b,colors:f,style:v,testID:k})=>{const x=n(),w=d(),j=c(),R=y??w.variant??"shimmer",S=j.enabled?R:"none",I=f?.background??w.colors?.background??x.colors.skeleton.background,L=f?.highlight??w.colors?.highlight??x.colors.skeleton.highlight,{responsive:z}=l(),B=t(()=>buildStyles(),[]),C=(e=>void 0===e?"100%":e)(h),D=z.size(u),E=((e,t,i,s,r)=>{if(void 0!==r)return((e,t)=>"number"==typeof t?t:e.radius[t])(e,r);switch(t){case"circle":return"number"==typeof i?Math.min(i,s)/2:s/2;case"rounded":return e.radius.md;default:return e.radius.sm}})(x,e,C,D,g),[M,N]=i(0),V=t(()=>M<=0?0:Math.max(48,.7*M),[M]),A=t(()=>M<=0?0:j.shimmer.interpolate({inputRange:[0,1],outputRange:[-V,M]}),[j.shimmer,V,M]),F=t(()=>"none"===S?null:"pulse"===S?p(s.View,{pointerEvents:"none",style:[r.absoluteFill,{backgroundColor:L,opacity:j.pulse.interpolate({inputRange:[0,1],outputRange:[0,.55]})}]}):M<=0?null:p(s.View,{pointerEvents:"none",style:[B.shimmerBand,{width:V,transform:[{translateX:A}],experimental_backgroundImage:[a({colors:["transparent",L,"transparent"],locations:[0,.5,1],start:{x:0,y:.5},end:{x:1,y:.5}})]}]}),[S,L,j.pulse,M,B.shimmerBand,V,A]);return p(o,{onLayout:e=>{const t=e.nativeEvent.layout.width;t!==M&&N(t)},accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},accessibilityLiveRegion:"polite",testID:k,style:[B.base,{width:C,height:D,borderRadius:E,...m,backgroundColor:I},v],children:F})};Skeleton.displayName="Skeleton";const SkeletonCircle=({size:e,style:t,...i})=>{const{responsive:s}=l(),r=s.size(e);return p(Skeleton,{...i,shape:"circle",width:r,height:e,style:t})};SkeletonCircle.displayName="SkeletonCircle";const SkeletonText=({lines:e=3,lastLineWidth:t="60%",spacing:i,fontSize:s=14,variant:r,speed:a,radius:l="sm",width:m="100%",style:c,testID:d})=>{const h=n(),u=i??h.spacing.xs,g=Math.max(1,e);return p(o,{style:c,testID:d,children:Array.from({length:g}).map((e,i)=>p(Skeleton,{shape:"text",width:i===g-1&&g>1?t:m,height:s,radius:l,variant:r,speed:a,style:i<g-1?{marginBottom:u}:void 0},i))})};SkeletonText.displayName="SkeletonText";const buildStyles=()=>r.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
+import e,{createContext as t,useContext as r,useEffect as o,useMemo as n,useRef as i}from"react";import{Animated as s,Easing as a}from"react-native";import{createAnimatedValue as l}from"../../theme/index.js";import{jsx as u}from"react/jsx-runtime";const c={slow:1800,normal:1200,fast:800},m=t(null);export const SkeletonClockProvider=({speed:e,enabled:t,variant:r,children:d})=>{const p=i(l(0)).current,v=i(l(0)).current;o(()=>{if(!t)return p.setValue(0),void v.setValue(.5);const r=s.loop(s.timing(p,{toValue:1,duration:c[e],easing:a.linear,useNativeDriver:!0})),o=s.loop(s.sequence([s.timing(v,{toValue:1,duration:500,easing:a.inOut(a.ease),useNativeDriver:!0}),s.timing(v,{toValue:0,duration:500,easing:a.inOut(a.ease),useNativeDriver:!0})]));return r.start(),o.start(),()=>{r.stop(),o.stop()}},[e,t,p,v]);const k=n(()=>({shimmer:p,pulse:v,enabled:t}),[p,v,t]);return u(m.Provider,{value:k,children:d})};SkeletonClockProvider.displayName="SkeletonClockProvider";export const useSkeletonClock=()=>{const e=r(m);return e||d};const d={shimmer:l(0),pulse:l(.5),enabled:!1};