@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,266 @@
+"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 { Chevron } from "../FieldBase/Chevron.js";
+import { FieldBase, 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;
+  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__*/_jsxs(Text, {
+      style: [styles.label, {
+        color: hasError ? theme.colors.error : theme.colors.text.secondary,
+        fontSize: theme.typography.fontSize.sm,
+        fontWeight: theme.typography.fontWeight.medium,
+        marginBottom: theme.spacing.xxs
+      }],
+      children: [label, required ? /*#__PURE__*/_jsx(RequiredMark, {}) : null]
+    }) : 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,
+        accessibilityRole: "button",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: {
+          disabled,
+          expanded: open
+        },
+        style: triggerStyle,
+        leading: leftIcon ? /*#__PURE__*/_jsx(View, {
+          children: leftIcon
+        }) : null,
+        trailing: rightIcon ? /*#__PURE__*/_jsx(View, {
+          children: rightIcon
+        }) : /*#__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__*/_jsx(Text, {
+          style: [styles.triggerText, {
+            color: showingPlaceholder ? fieldText.placeholderColor : fieldText.color,
+            fontSize: sizeTokens.fontSize,
+            ...fieldText.weightStyle
+          }, textStyle],
+          numberOfLines: 1,
+          children: triggerText
+        })
+      })
+    }), hasError ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.errorText, {
+        color: theme.colors.error,
+        fontSize: theme.typography.fontSize.xs,
+        marginTop: theme.spacing.xxs
+      }],
+      accessibilityLiveRegion: "polite",
+      children: error
+    }) : null, /*#__PURE__*/_jsx(OptionSheet, {
+      open: open,
+      onClose: handleClose,
+      title: title,
+      accessibilityLabel: label ?? placeholder ?? 'Options',
+      options: options,
+      labelOf: labelOf,
+      valueOf: 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

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

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

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

@@ -0,0 +1,286 @@
+"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
+ *     `LinearGradient` (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";
+
+// `react-native-linear-gradient` is an OPTIONAL peer dep. When it's installed
+// we sweep a real gradient band across the shimmer. When it isn't, we fall
+// back to a solid-color band — still works, just less polished. This keeps
+// the library deployable in apps that don't need gradients elsewhere.
+let LinearGradientImpl = null;
+try {
+  LinearGradientImpl = require('react-native-linear-gradient').default;
+} catch {
+  // Optional peer; resolved lazily by consumers that need shimmer polish.
+}
+import { Responsive } from "../../utils/index.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 can't
+      // resolve here — fall back to height/2 which is the typical caller
+      // intent (square avatars).
+      return Math.floor(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 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. When the optional
+    // gradient package isn't installed we render the band as a solid
+    // highlight rectangle — visibly different but still recognizably a
+    // shimmer effect.
+    return /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [styles.shimmerBand, {
+        width: bandWidth,
+        transform: [{
+          translateX
+        }]
+      }],
+      children: LinearGradientImpl ? /*#__PURE__*/_jsx(LinearGradientImpl, {
+        colors: ['transparent', highlightColor, 'transparent'],
+        locations: [0, 0.5, 1],
+        start: {
+          x: 0,
+          y: 0.5
+        },
+        end: {
+          x: 1,
+          y: 0.5
+        },
+        style: StyleSheet.absoluteFill
+      }) : /*#__PURE__*/_jsx(View, {
+        style: [StyleSheet.absoluteFill, {
+          backgroundColor: highlightColor,
+          opacity: 0.55
+        }]
+      })
+    });
+  }, [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,
+      backgroundColor
+    }, style],
+    children: overlay
+  });
+};
+Skeleton.displayName = 'Skeleton';
+const SkeletonCircle = ({
+  size,
+  style,
+  ...rest
+}) => {
+  const diameter = Responsive.size(size);
+  return /*#__PURE__*/_jsx(Skeleton, {
+    ...rest,
+    shape: "circle",
+    width: diameter,
+    height: size,
+    style: [{
+      width: diameter,
+      height: diameter,
+      borderRadius: diameter / 2
+    }, 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;
+  const lineHeight = Responsive.font(fontSize);
+  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: lineHeight,
+        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

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

@@ -0,0 +1,111 @@
+"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