@fluentui-react-native/experimental-shimmer 0.14.0 → 0.14.3

package/lib/Shimmer.types.shared.d.ts

@@ -1,145 +1,145 @@
 import type { ColorValue, ViewProps } from 'react-native';
 import type { IBackgroundColorTokens } from '@fluentui-react-native/tokens';
 import type { SvgProps } from 'react-native-svg';
-export declare const shimmerName = 'Shimmer';
+export declare const shimmerName = "Shimmer";
 /**
  * Properties necessary to define a circular Shimmer element.
  */
 export interface ShimmerCircleElement {
-  /**
-   * Shimmer element type.
-   */
-  type: 'circle';
-  /**
-   * Radius of the circle element.
-   * @defaultValue 12
-   */
-  radius?: number;
-  /**
-   * Note: cx and cy should be optional properties [or removed], with relative positioning being the default [or only] positioning mechanism.
-   * Note: The behavior of element intersections is undefined.  https://www.github.com/Microsoft/fluentui-react-native Issue #866
-   */
-  /**
-   * The x-axis center of the circle element in the Shimmer relative to the origin [top-left, (0,0)].
-   */
-  cx: number;
-  /**
-   * The y-axis center of the circle element in the Shimmer relative to the origin [top-left, (0,0)].
-   */
-  cy: number;
+    /**
+     * Shimmer element type.
+     */
+    type: 'circle';
+    /**
+     * Radius of the circle element.
+     * @defaultValue 12
+     */
+    radius?: number;
+    /**
+     * Note: cx and cy should be optional properties [or removed], with relative positioning being the default [or only] positioning mechanism.
+     * Note: The behavior of element intersections is undefined.  https://www.github.com/Microsoft/fluentui-react-native Issue #866
+     */
+    /**
+     * The x-axis center of the circle element in the Shimmer relative to the origin [top-left, (0,0)].
+     */
+    cx: number;
+    /**
+     * The y-axis center of the circle element in the Shimmer relative to the origin [top-left, (0,0)].
+     */
+    cy: number;
 }
 /**
  * Properties necessary to define a rectangular Shimmer element.
  */
 export interface ShimmerRectElement {
-  /**
-   * Shimmer element type.
-   */
-  type: 'rect';
-  /**
-   * Width of the rect.
-   * @defaultValue 100%
-   */
-  width?: number;
-  /**
-   * Height of the rect.
-   * @defaultValue 16
-   */
-  height?: number;
-  /**
-   * Border radius for the x-axis of a rounded rect.
-   * @defaultValue 0
-   */
-  borderRadiusX?: number;
-  /**
-   * Border radius for the y-axis of a rounded rect.
-   * @defaultValue 0
-   */
-  borderRadiusY?: number;
-  /**
-   * Note: x and y should be optional properties [or removed], with relative positioning being the default [or only] positioning mechanism.
-   * Note: The behavior of element intersections is undefined.  https://www.github.com/Microsoft/fluentui-react-native Issue #866
-   */
-  /**
-   * The x-axis position of the rect element's top-left corner in the Shimmer relative to the origin [top-left, (0,0)].
-   */
-  x: number;
-  /**
-   * The y-axis position of the rect element's top-left corner in the Shimmer relative to the origin [top-left, (0,0)].
-   */
-  y: number;
+    /**
+     * Shimmer element type.
+     */
+    type: 'rect';
+    /**
+     * Width of the rect.
+     * @defaultValue 100%
+     */
+    width?: number;
+    /**
+     * Height of the rect.
+     * @defaultValue 16
+     */
+    height?: number;
+    /**
+     * Border radius for the x-axis of a rounded rect.
+     * @defaultValue 0
+     */
+    borderRadiusX?: number;
+    /**
+     * Border radius for the y-axis of a rounded rect.
+     * @defaultValue 0
+     */
+    borderRadiusY?: number;
+    /**
+     * Note: x and y should be optional properties [or removed], with relative positioning being the default [or only] positioning mechanism.
+     * Note: The behavior of element intersections is undefined.  https://www.github.com/Microsoft/fluentui-react-native Issue #866
+     */
+    /**
+     * The x-axis position of the rect element's top-left corner in the Shimmer relative to the origin [top-left, (0,0)].
+     */
+    x: number;
+    /**
+     * The y-axis position of the rect element's top-left corner in the Shimmer relative to the origin [top-left, (0,0)].
+     */
+    y: number;
 }
 export type ShimmerElementTypes = ShimmerCircleElement | ShimmerRectElement;
 export interface ShimmerTokens extends IBackgroundColorTokens {
-  /**
-   * Specifies the Shimmer effect angle in degrees (produced by a gradient).
-   *
-   * @defaultValue 45 on @platform Android
-   * @defaultValue 0 on other platforms.
-   */
-  angle?: number;
-  /**
-   * Specifies the animation delay time in milliseconds.
-   *
-   * @defaultValue 500 on @platform win32
-   * @defaultValue 0 on other platforms.
-   */
-  delay?: number;
-  /**
-   * Specifies the time required to traverse the control in milliseconds.
-   *
-   * @defaultValue 1000 on @platform Android
-   * @defaultValue 2000 on @platform win32
-   * @defaultValue 7000 on other platforms.
-   */
-  duration?: number;
-  /**
-   * Specifies the opacity of the shimmer color.
-   * @defaultValue 1
-   */
-  shimmerColorOpacity?: number;
-  /**
-   * Specifies the opacity of the wave color.
-   * @defaultValue 1
-   */
-  shimmerWaveColorOpacity?: number;
-  /**
-   * Color you see when the shimmer wave is not animating.
-   *
-   * @defaultValue theme.colors.neutralStencil1 on @platform Android
-   * @defaultValue theme.colors.bodyFrameDivider on @platform win32
-   * @defaultValue #E1E1E1/#404040 for light/dark theme on other platforms.
-   */
-  shimmerColor?: ColorValue;
-  /**
-   * Defines the tip color of the wave which has a linear gradient.
-   * from shimmerColor to shimmerWaveColor to shimmerColor.
-   *
-   * @defaultValue theme.colors.neutralStencil2 on @platform Android
-   * @defaultValue #E1E1E1 on @platform win32
-   * @defaultValue white/black for light/dark theme on other platforms.
-   */
-  shimmerWaveColor?: ColorValue;
-  /**
-   * Width of the Shimmer wave.
-   *
-   * @defaultValue '100%' of the 'width' property
-   * @platform win32
-   */
-  shimmerWaveWidth?: number | string;
+    /**
+     * Specifies the Shimmer effect angle in degrees (produced by a gradient).
+     *
+     * @defaultValue 45 on @platform Android
+     * @defaultValue 0 on other platforms.
+     */
+    angle?: number;
+    /**
+     * Specifies the animation delay time in milliseconds.
+     *
+     * @defaultValue 500 on @platform win32
+     * @defaultValue 0 on other platforms.
+     */
+    delay?: number;
+    /**
+     * Specifies the time required to traverse the control in milliseconds.
+     *
+     * @defaultValue 1000 on @platform Android
+     * @defaultValue 2000 on @platform win32
+     * @defaultValue 7000 on other platforms.
+     */
+    duration?: number;
+    /**
+     * Specifies the opacity of the shimmer color.
+     * @defaultValue 1
+     */
+    shimmerColorOpacity?: number;
+    /**
+     * Specifies the opacity of the wave color.
+     * @defaultValue 1
+     */
+    shimmerWaveColorOpacity?: number;
+    /**
+     * Color you see when the shimmer wave is not animating.
+     *
+     * @defaultValue theme.colors.neutralStencil1 on @platform Android
+     * @defaultValue theme.colors.bodyFrameDivider on @platform win32
+     * @defaultValue #E1E1E1/#404040 for light/dark theme on other platforms.
+     */
+    shimmerColor?: ColorValue;
+    /**
+     * Defines the tip color of the wave which has a linear gradient.
+     * from shimmerColor to shimmerWaveColor to shimmerColor.
+     *
+     * @defaultValue theme.colors.neutralStencil2 on @platform Android
+     * @defaultValue #E1E1E1 on @platform win32
+     * @defaultValue white/black for light/dark theme on other platforms.
+     */
+    shimmerWaveColor?: ColorValue;
+    /**
+     * Width of the Shimmer wave.
+     *
+     * @defaultValue '100%' of the 'width' property
+     * @platform win32
+     */
+    shimmerWaveWidth?: number | string;
 }
 export interface ShimmerSlotProps {
-  root: SvgProps;
+    root: SvgProps;
 }
 export interface ShimmerProps extends ViewProps, ShimmerTokens {
-  /**
-   * Shimmer shapes that define the masking effect of the Shimmer control.
-   */
-  elements: Array<ShimmerElementTypes>;
+    /**
+     * Shimmer shapes that define the masking effect of the Shimmer control.
+     */
+    elements: ShimmerElementTypes[];
 }
 export interface ShimmerType {
-  props: ShimmerProps;
-  slotProps: ShimmerSlotProps;
-  tokens: ShimmerTokens;
+    props: ShimmerProps;
+    slotProps: ShimmerSlotProps;
+    tokens: ShimmerTokens;
 }
-//# sourceMappingURL=Shimmer.types.shared.d.ts.map
+//# sourceMappingURL=Shimmer.types.shared.d.ts.map

package/lib/Shimmer.types.shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shimmer.types.shared.d.ts","sourceRoot":"","sources":["../src/Shimmer.types.shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IAEH;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEH;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IAEV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAE5E,MAAM,WAAW,aAAc,SAAQ,sBAAsB;IAC3D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAE9B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,SAAS,EAAE,aAAa;IAC5D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,MAAM,EAAE,aAAa,CAAC;CACvB"}
+{"version":3,"file":"Shimmer.types.shared.d.ts","sourceRoot":"","sources":["../src/Shimmer.types.shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IAEH;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEH;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IAEV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAE5E,MAAM,WAAW,aAAc,SAAQ,sBAAsB;IAC3D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAE9B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,SAAS,EAAE,aAAa;IAC5D;;OAEG;IACH,QAAQ,EAAE,mBAAmB,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,MAAM,EAAE,aAAa,CAAC;CACvB"}

package/lib/Shimmer.types.shared.js

@@ -1,2 +1,2 @@
 export const shimmerName = 'Shimmer';
-//# sourceMappingURL=Shimmer.types.shared.js.map
+//# sourceMappingURL=Shimmer.types.shared.js.map

package/lib/Shimmer.types.win32.d.ts

@@ -4,36 +4,36 @@ export type { ShimmerProps, ShimmerTokens };
 export type { ShimmerRectElement, ShimmerElementTypes, ShimmerCircleElement } from './Shimmer.types.shared';
 export { shimmerName } from './Shimmer.types.shared';
 export interface ClippingMaskProps extends ShimmerTokens {
-  /**
-   * Extra parameter necessary to provide the mask effect generated from the provided ShimmerElements.
-   *
-   * @defaultValue null
-   */
-  clipPath?: string;
-  /**
-   * The height and width of the viewBox are internal props used by the SVG to size themselves and
-   * set up their viewBox to establish coordinate space for DPI scaling purposes.
-   */
-  viewBoxHeight: number;
-  viewBoxWidth: number;
+    /**
+     * Extra parameter necessary to provide the mask effect generated from the provided ShimmerElements.
+     *
+     * @defaultValue null
+     */
+    clipPath?: string;
+    /**
+     * The height and width of the viewBox are internal props used by the SVG to size themselves and
+     * set up their viewBox to establish coordinate space for DPI scaling purposes.
+     */
+    viewBoxHeight: number;
+    viewBoxWidth: number;
 }
 export interface ShimmerWaveProps extends ShimmerTokens {
-  /**
-   * The height and width of the viewBox are internal props used by the SVG to size themselves and
-   * set up their viewBox to establish coordinate space for DPI scaling purposes.
-   */
-  viewBoxHeight: number;
-  viewBoxWidth: number;
+    /**
+     * The height and width of the viewBox are internal props used by the SVG to size themselves and
+     * set up their viewBox to establish coordinate space for DPI scaling purposes.
+     */
+    viewBoxHeight: number;
+    viewBoxWidth: number;
 }
 export interface ShimmerSlotProps {
-  root: ViewProps;
-  clippingMask: ClippingMaskProps;
-  shimmerWave: ShimmerWaveProps;
-  shimmerWaveContainer: React.PropsWithChildren<ShimmerWaveProps>;
+    root: ViewProps;
+    clippingMask: ClippingMaskProps;
+    shimmerWave: ShimmerWaveProps;
+    shimmerWaveContainer: React.PropsWithChildren<ShimmerWaveProps>;
 }
 export interface ShimmerType {
-  props: ShimmerProps;
-  slotProps: ShimmerSlotProps;
-  tokens: ShimmerTokens;
+    props: ShimmerProps;
+    slotProps: ShimmerSlotProps;
+    tokens: ShimmerTokens;
 }
-//# sourceMappingURL=Shimmer.types.win32.d.ts.map
+//# sourceMappingURL=Shimmer.types.win32.d.ts.map

package/lib/Shimmer.types.win32.js

@@ -1,2 +1,2 @@
 export { shimmerName } from './Shimmer.types.shared';
-//# sourceMappingURL=Shimmer.types.win32.js.map
+//# sourceMappingURL=Shimmer.types.win32.js.map

package/lib/Shimmer.win32.d.ts

@@ -5,10 +5,5 @@
  */
 import type { ShimmerProps, ShimmerCircleElement, ShimmerRectElement } from './Shimmer.types.shared';
 export type { ShimmerCircleElement, ShimmerRectElement };
-export declare const Shimmer: import('@fluentui-react-native/framework').ComposableComponent<
-  ShimmerProps,
-  import('./Shimmer.types.win32').ShimmerSlotProps,
-  import('./Shimmer.types.shared').ShimmerTokens,
-  import('@fluentui-react-native/framework-base').ObjectBase
->;
-//# sourceMappingURL=Shimmer.win32.d.ts.map
+export declare const Shimmer: import("@fluentui-react-native/framework").ComposableComponent<ShimmerProps, import("./Shimmer.types.win32").ShimmerSlotProps, import("./Shimmer.types.shared").ShimmerTokens, import("@fluentui-react-native/framework-base").ObjectBase>;
+//# sourceMappingURL=Shimmer.win32.d.ts.map

package/lib/Shimmer.win32.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from '@fluentui-react-native/framework-base/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui-react-native/framework-base/jsx-runtime";
 /**
  * Copyright (c) Microsoft Corporation.
  * Licensed under the MIT License.
@@ -14,146 +14,116 @@ import { shimmerName } from './Shimmer.types.shared';
 import { convertRectToSvgPath, convertCircleToSvgPath } from './SvgShapeToPath';
 import RCTNativeAnimatedShimmer from './Win32ShimmerNativeComponent';
 const clippingMask = (props) => {
-  /**
-   * Absolute positioning is used to overlay the clipping mask on top of the shimmer wave.
-   *
-   * preserveAspectRatio = 'xMinYMin slice' asks the SVG to scale the viewBox up to fit the
-   * viewPort, starting from the origin of the viewPort and minimum coordinates of the viewBox.
-   * 'slice' removes the unnecessary remainder.
-   */
-  const { backgroundColor, viewBoxHeight, viewBoxWidth } = props;
-  const svgProps = {
-    style: { position: 'absolute', height: viewBoxHeight, width: viewBoxWidth },
-    viewBox: '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight,
-    preserveAspectRatio: 'xMinYMin slice',
-  };
-  return _jsxs(Svg, {
-    ...svgProps,
-    children: [
-      _jsx(Defs, { children: _jsx(ClipPath, { id: 'shimmerCuts', children: _jsx(Path, { d: props.clipPath, clipRule: 'evenodd' }) }) }),
-      _jsx(Rect, { width: '100%', height: '100%', fill: backgroundColor, clipPath: 'url(#shimmerCuts)' }),
-    ],
-  });
+    /**
+     * Absolute positioning is used to overlay the clipping mask on top of the shimmer wave.
+     *
+     * preserveAspectRatio = 'xMinYMin slice' asks the SVG to scale the viewBox up to fit the
+     * viewPort, starting from the origin of the viewPort and minimum coordinates of the viewBox.
+     * 'slice' removes the unnecessary remainder.
+     */
+    const { backgroundColor, viewBoxHeight, viewBoxWidth } = props;
+    const svgProps = {
+        style: { position: 'absolute', height: viewBoxHeight, width: viewBoxWidth },
+        viewBox: '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight,
+        preserveAspectRatio: 'xMinYMin slice',
+    };
+    return (_jsxs(Svg, { ...svgProps, children: [
+            _jsx(Defs, { children: _jsx(ClipPath, { id: "shimmerCuts", children: _jsx(Path, { d: props.clipPath, clipRule: "evenodd" }) }) }), _jsx(Rect, { width: "100%", height: "100%", fill: backgroundColor, clipPath: "url(#shimmerCuts)" })
+        ] }));
 };
 const wave = (props) => {
-  const { shimmerColor, shimmerColorOpacity, shimmerWaveColor, shimmerWaveColorOpacity, viewBoxHeight, viewBoxWidth } = props;
-  /**
-   * See the comment above for an explanation of preserveAspectRatio.
-   */
-  const svgProps = {
-    style: { height: viewBoxHeight, width: viewBoxWidth },
-    viewBox: '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight,
-    preserveAspectRatio: 'xMinYMin slice',
-  };
-  /**
-   * React-Native-SVG doesn't process opaque color values correctly for gradients, directly invoking `processColor`
-   * and squashing in the opacity value of the color stop.  This handling scheme is incompatible with OpaqueColorValue type
-   * colors e.g. PlatformColor, and will show nothing.  As a short-term solution, provide alternate non-gradient handling
-   * of the wave color as a solid color.
-   */
-  if (typeof processColor(shimmerWaveColor) !== 'object' && typeof processColor(shimmerColor) !== 'object') {
-    // The typical path where the provided shimmer colors are not OpaqueColorValues.
-    return _jsxs(Svg, {
-      ...svgProps,
-      children: [
-        _jsxs(LinearGradient, {
-          id: 'gradient',
-          children: [
-            _jsx(Stop, { stopColor: shimmerColor, stopOpacity: shimmerColorOpacity }),
-            _jsx(Stop, { offset: '20%', stopColor: shimmerWaveColor, stopOpacity: shimmerWaveColorOpacity }),
-            _jsx(Stop, { offset: '40%', stopColor: shimmerColor, stopOpacity: shimmerColorOpacity }),
-          ],
-        }),
-        _jsx(Rect, { width: props.shimmerWaveWidth, height: '100%', fill: 'url(#gradient)' }),
-      ],
-    });
-  } else {
-    // The unexpected path where either of the provided shimmer colors are OpaqueColorValues.
-    // scaleX is used to mimic the gradient occupying 40% of the fill since we don't know the provided width of the
-    // shimmer wave.
-    return _jsx(Svg, {
-      ...svgProps,
-      children: _jsx(Rect, {
-        width: props.shimmerWaveWidth,
-        height: '100%',
-        fill: shimmerWaveColor,
-        fillOpacity: shimmerWaveColorOpacity,
-        scaleX: '0.4',
-      }),
-    });
-  }
+    const { shimmerColor, shimmerColorOpacity, shimmerWaveColor, shimmerWaveColorOpacity, viewBoxHeight, viewBoxWidth } = props;
+    /**
+     * See the comment above for an explanation of preserveAspectRatio.
+     */
+    const svgProps = {
+        style: { height: viewBoxHeight, width: viewBoxWidth },
+        viewBox: '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight,
+        preserveAspectRatio: 'xMinYMin slice',
+    };
+    /**
+     * React-Native-SVG doesn't process opaque color values correctly for gradients, directly invoking `processColor`
+     * and squashing in the opacity value of the color stop.  This handling scheme is incompatible with OpaqueColorValue type
+     * colors e.g. PlatformColor, and will show nothing.  As a short-term solution, provide alternate non-gradient handling
+     * of the wave color as a solid color.
+     */
+    if (typeof processColor(shimmerWaveColor) !== 'object' && typeof processColor(shimmerColor) !== 'object') {
+        // The typical path where the provided shimmer colors are not OpaqueColorValues.
+        return (_jsxs(Svg, { ...svgProps, children: [
+                _jsxs(LinearGradient, { id: "gradient", children: [
+                        _jsx(Stop, { stopColor: shimmerColor, stopOpacity: shimmerColorOpacity }), _jsx(Stop, { offset: "20%", stopColor: shimmerWaveColor, stopOpacity: shimmerWaveColorOpacity }), _jsx(Stop, { offset: "40%", stopColor: shimmerColor, stopOpacity: shimmerColorOpacity })
+                    ] }), _jsx(Rect, { width: props.shimmerWaveWidth, height: "100%", fill: "url(#gradient)" })
+            ] }));
+    }
+    else {
+        // The unexpected path where either of the provided shimmer colors are OpaqueColorValues.
+        // scaleX is used to mimic the gradient occupying 40% of the fill since we don't know the provided width of the
+        // shimmer wave.
+        return (_jsx(Svg, { ...svgProps, children: _jsx(Rect, { width: props.shimmerWaveWidth, height: "100%", fill: shimmerWaveColor, fillOpacity: shimmerWaveColorOpacity, scaleX: "0.4" }) }));
+    }
 };
 const waveContainer = (props) => {
-  const { shimmerColor, viewBoxHeight, viewBoxWidth } = props;
-  return _jsx(RCTNativeAnimatedShimmer, {
-    ...props,
-    style: { backgroundColor: shimmerColor, height: viewBoxHeight, width: viewBoxWidth, overflow: 'hidden' },
-  });
+    const { shimmerColor, viewBoxHeight, viewBoxWidth } = props;
+    return (_jsx(RCTNativeAnimatedShimmer, { ...props, style: { backgroundColor: shimmerColor, height: viewBoxHeight, width: viewBoxWidth, overflow: 'hidden' } }));
 };
 export const Shimmer = compose({
-  displayName: shimmerName,
-  ...stylingSettings,
-  slots: {
-    root: View,
-    clippingMask: clippingMask,
-    shimmerWave: wave,
-    shimmerWaveContainer: waveContainer,
-  },
-  useRender: (props, useSlots) => {
-    const Slots = useSlots(props);
-    return (rest) => {
-      const { elements, ...mergedProps } = mergeProps(props, rest);
-      /**
-       * Generate a clip path from the provided element shapes, with their path parameter strings generated from their corresponding properties.
-       * Ideally this would be better possible with functions from the shape elements themselves and not to rely on our own calculations.
-       *
-       * One nuanced consideration is scaling the SVG with DPI.  Without specifying a viewBox, points are considered to be pixels on an SVG canvas.
-       * When the native control is scaled the SVG canvas will scale up -- but pixel coordinates will not, changing the visual for different pixel densities.
-       * By providing a viewBox appropriate for our SVG the viewBox containing the graphics will be scaled up to fit the viewPort.
-       * Since we're programmatically generating the visual, we can assert our viewBox is `0 0 xMax yMax` where xMax and yMax are the greatest
-       * X and Y points used by a shape.
-       */
-      let clipPathsAsMask = [];
-      let xMax = 0;
-      let yMax = 0;
-      if (elements) {
-        elements.forEach((element) => {
-          if (element.type == 'circle') {
-            clipPathsAsMask = clipPathsAsMask.concat(convertCircleToSvgPath(element));
-            const xMaxCandidate = element.cx + element.radius;
-            const yMaxCandidate = element.cy + element.radius;
-            xMax = xMax >= xMaxCandidate ? xMax : xMaxCandidate;
-            yMax = yMax >= yMaxCandidate ? yMax : yMaxCandidate;
-          } else if (element.type == 'rect') {
-            clipPathsAsMask = clipPathsAsMask.concat(convertRectToSvgPath(element));
-            const xMaxCandidate = element.x + element.width;
-            const yMaxCandidate = element.y + element.height;
-            xMax = xMax >= xMaxCandidate ? xMax : xMaxCandidate;
-            yMax = yMax >= yMaxCandidate ? yMax : yMaxCandidate;
-          } else {
-            assertNever(element);
-          }
-        });
-      }
-      /**
-       * Win32 D2D1 doesn't directly support SVG mask elements, so we're going to generate a mask
-       * by manipulating our clip path for the same effect.  We do so utilizing the clip-rule='evenodd'
-       * and drawing a rectangle around the entire svg viewBox, causing all inner elements to be "clipped out"
-       * instead of "clipped around," generating the visual we desire with the linear gradient below the mask.
-       */
-      const mergedClipPath = clipPathsAsMask.join(' ').concat('M  0 0 h ' + xMax + ' v ' + yMax + ' h -' + xMax + ' z ');
-      return _jsxs(Slots.root, {
-        ...mergedProps,
-        children: [
-          _jsx(Slots.shimmerWaveContainer, {
-            viewBoxHeight: yMax,
-            viewBoxWidth: xMax,
-            children: _jsx(Slots.shimmerWave, { viewBoxHeight: yMax, viewBoxWidth: xMax }),
-          }),
-          _jsx(Slots.clippingMask, { clipPath: mergedClipPath, viewBoxHeight: yMax, viewBoxWidth: xMax }),
-        ],
-      });
-    };
-  },
+    displayName: shimmerName,
+    ...stylingSettings,
+    slots: {
+        root: View,
+        clippingMask: clippingMask,
+        shimmerWave: wave,
+        shimmerWaveContainer: waveContainer,
+    },
+    useRender: (props, useSlots) => {
+        const Slots = useSlots(props);
+        return (rest) => {
+            const { elements, ...mergedProps } = mergeProps(props, rest);
+            /**
+             * Generate a clip path from the provided element shapes, with their path parameter strings generated from their corresponding properties.
+             * Ideally this would be better possible with functions from the shape elements themselves and not to rely on our own calculations.
+             *
+             * One nuanced consideration is scaling the SVG with DPI.  Without specifying a viewBox, points are considered to be pixels on an SVG canvas.
+             * When the native control is scaled the SVG canvas will scale up -- but pixel coordinates will not, changing the visual for different pixel densities.
+             * By providing a viewBox appropriate for our SVG the viewBox containing the graphics will be scaled up to fit the viewPort.
+             * Since we're programmatically generating the visual, we can assert our viewBox is `0 0 xMax yMax` where xMax and yMax are the greatest
+             * X and Y points used by a shape.
+             */
+            let clipPathsAsMask = [];
+            let xMax = 0;
+            let yMax = 0;
+            if (elements) {
+                elements.forEach((element) => {
+                    if (element.type == 'circle') {
+                        clipPathsAsMask = clipPathsAsMask.concat(convertCircleToSvgPath(element));
+                        const xMaxCandidate = element.cx + element.radius;
+                        const yMaxCandidate = element.cy + element.radius;
+                        xMax = xMax >= xMaxCandidate ? xMax : xMaxCandidate;
+                        yMax = yMax >= yMaxCandidate ? yMax : yMaxCandidate;
+                    }
+                    else if (element.type == 'rect') {
+                        clipPathsAsMask = clipPathsAsMask.concat(convertRectToSvgPath(element));
+                        const xMaxCandidate = element.x + element.width;
+                        const yMaxCandidate = element.y + element.height;
+                        xMax = xMax >= xMaxCandidate ? xMax : xMaxCandidate;
+                        yMax = yMax >= yMaxCandidate ? yMax : yMaxCandidate;
+                    }
+                    else {
+                        assertNever(element);
+                    }
+                });
+            }
+            /**
+             * Win32 D2D1 doesn't directly support SVG mask elements, so we're going to generate a mask
+             * by manipulating our clip path for the same effect.  We do so utilizing the clip-rule='evenodd'
+             * and drawing a rectangle around the entire svg viewBox, causing all inner elements to be "clipped out"
+             * instead of "clipped around," generating the visual we desire with the linear gradient below the mask.
+             */
+            const mergedClipPath = clipPathsAsMask.join(' ').concat('M  0 0 h ' + xMax + ' v ' + yMax + ' h -' + xMax + ' z ');
+            return (_jsxs(Slots.root, { ...mergedProps, children: [
+                    _jsx(Slots.shimmerWaveContainer, { viewBoxHeight: yMax, viewBoxWidth: xMax, children: _jsx(Slots.shimmerWave, { viewBoxHeight: yMax, viewBoxWidth: xMax }) }), _jsx(Slots.clippingMask, { clipPath: mergedClipPath, viewBoxHeight: yMax, viewBoxWidth: xMax })
+                ] }));
+        };
+    },
 });
-//# sourceMappingURL=Shimmer.win32.js.map
+//# sourceMappingURL=Shimmer.win32.js.map

package/lib/ShimmerTokens.android.d.ts

@@ -2,4 +2,4 @@ import type { Theme } from '@fluentui-react-native/framework';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 import type { ShimmerTokens } from './Shimmer.types';
 export declare const defaultShimmerTokens: TokenSettings<ShimmerTokens, Theme>;
-//# sourceMappingURL=ShimmerTokens.android.d.ts.map
+//# sourceMappingURL=ShimmerTokens.android.d.ts.map