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

package/lib-commonjs/SvgShapeToPath.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 /**
  * These functions are necessary to deal with the win32 platform issue of d2d1 not supporting SVG <Mask> elements.
  * We can support them indirectly by inverting a <ClipPath> element, with the troublesome issue of there being
@@ -13,7 +13,7 @@
  * This solution is far from ideal and may have incompatibilities with <ClipPath> features; for Shimmer, it's sufficient,
  * as we only support rounded rects and circles, with a circle being a rounded rect of borderRadius=length/2=width/2.
  */
-Object.defineProperty(exports, '__esModule', { value: true });
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertRectToSvgPath = convertRectToSvgPath;
 exports.convertCircleToSvgPath = convertCircleToSvgPath;
 // Note for explicit clarity: length and width represent the full length and width of the rect, and not
@@ -21,142 +21,128 @@ exports.convertCircleToSvgPath = convertCircleToSvgPath;
 // borderRadius[X|Y] cannot be larger than [length/2 or width]/2; it would not be able to connect to the edge
 // segments of the rect if so, and will be reduced to the maximum values accordingly.
 function convertRoundedRectToSvgPath(x, y, borderRadiusX, borderRadiusY, width, height) {
-  // Reduce borderRadii to maximum usable size.
-  if (borderRadiusX * 2 > width) {
-    borderRadiusX = width / 2;
-  }
-  if (borderRadiusY * 2 > height) {
-    borderRadiusY = height / 2;
-  }
-  const horizontalEdgeLength = width - borderRadiusX * 2;
-  const verticalEdgeLength = height - borderRadiusY * 2;
-  const xAxisRotation = 0;
-  const largeArcFlag = 0;
-  const sweepArcFlag = 1;
-  /**
-   * The general manner in which we will draw our rounded rect is in the following
-   * order of points.
-   *
-   *  - Forward (/) and back (\) slashes represent borderRadiusY and borderRadiusX, respectively.
-   *  - The un-rounded rect points are represented by center dots (and steal 1 unit from the borderRadii).
-   *  - x and y parameters are left out as path arguments use relative coordinates (vs absolute coordinates).
-   *  - Coordinate axis aids are present to avoid counting for any necessary clarification.
-   *
-   *  x: arbitrary
-   *  y: arbitrary
-   *  width: 24
-   *  height: 12
-   *  borderRadiusX: 5
-   *  borderRadiusY: 3
-   *
-   *            0123456789012345678901234
-   *
-   *               (1+9)         (2)
-   *                 ⬇            ⬇
-   * 0          •\\\\--------------\\\\•
-   * 1          /                      /
-   * 2          /                      /
-   * 3   (8) ➡ |                      | ⬅ (3)
-   * 4          |                      |
-   * 5          |                      |
-   * 6          |                      |
-   * 7          |                      |
-   * 8          |                      |
-   * 9   (7) ➡ |                      | ⬅ (4)
-   * 0          /                      /
-   * 1          /                      /
-   * 2          •\\\\--------------\\\\•
-   *             ⬆                ⬆
-   *            (6)              (5)
-   *
-   * Which would generate the following path:
-   * const path = 'M {x+5} ${y+3} ' +
-   *              'h 14 ' +
-   *              'a 5 3 0 0 1 5 3' +
-   *              'v 6 ' +
-   *              'a 5 3 0 0 1 -5 3' +
-   *              'h -14 ' +
-   *              'a 5 3 0 0 1 -5 -3' +
-   *              'v -6 ' +
-   *              'a 5 3 0 0 1 5 -3 Z';
-   */
-  // We start at the left-most point of the top edge.
-  // M: lift and move the pen to [x] [y] coordinates -- does not draw.
-  let path = ['M', x + borderRadiusX, y];
-  // draw to the right-most point of the top edge.
-  // h: horizontally draw a line [n] units relative to the current pen position.
-  path = path.concat(['h', horizontalEdgeLength]);
-  /**
-   * draw the arc for the top-right corner.  If the rect is not rounded, the arc will be 0 length.
-   *  a: draw an arc relative to the current pen position with the following parameters:
-   *  rx: X-axis ellipse radius
-   *  ry: Y-axis ellipse radius
-   *  x-axis-rotation: rotation of the ellipse relative to the current coordinate system
-   *  large-arc-flag: See https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
-   *  sweep-arc-flag: See https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
-   *  (dx, dy): relative end coordinate
-   *
-   * 'a rx ry x-axis-rotation large-arc-flag sweep-arc-flag dx dy'
-   *
-   * We will use x-axis-rotation = 0, large-arc-flag = 0, and sweep-arc-flag = 1 for our path generation.
-   *  */
-  path = path.concat(['a', borderRadiusX, borderRadiusY, xAxisRotation, largeArcFlag, sweepArcFlag, borderRadiusX, borderRadiusY]);
-  /**
-   * Draw to the bottom-most point of the right edge.
-   * v: vertically draw a line [n] units relative to the current pen position.
-   */
-  path = path.concat(['v', verticalEdgeLength]);
-  /**
-   * Draw the arc for the bottom-right corner.
-   */
-  path = path.concat(['a', borderRadiusX, borderRadiusY, xAxisRotation, largeArcFlag, sweepArcFlag, -borderRadiusX, borderRadiusY]);
-  /**
-   * Draw to the left-most point of the bottom edge.
-   */
-  path = path.concat(['h', -horizontalEdgeLength]);
-  /**
-   * Draw the bottom-left corner.
-   */
-  path = path.concat(['a', borderRadiusX, borderRadiusY, xAxisRotation, largeArcFlag, sweepArcFlag, -borderRadiusX, -borderRadiusY]);
-  /**
-   * Draw to the top-most point of the left edge.
-   */
-  path = path.concat(['v', -verticalEdgeLength]);
-  /**
-   * Draw the top-left corner.
-   */
-  path = path.concat(['a', borderRadiusX, borderRadiusY, xAxisRotation, largeArcFlag, sweepArcFlag, borderRadiusX, -borderRadiusY]);
-  /**
-   * Finally, close the shape.  While we have manually returned to the same coordinate we started with, closing and not-closing the shape
-   * can have different behavior depending on other properties.
-   * z or Z: close the shape.
-   */
-  path = path.concat('z');
-  /**
-   * Join all arguments with spaces and return the completed path.
-   */
-  return path.join(' ');
+    // Reduce borderRadii to maximum usable size.
+    if (borderRadiusX * 2 > width) {
+        borderRadiusX = width / 2;
+    }
+    if (borderRadiusY * 2 > height) {
+        borderRadiusY = height / 2;
+    }
+    const horizontalEdgeLength = width - borderRadiusX * 2;
+    const verticalEdgeLength = height - borderRadiusY * 2;
+    const xAxisRotation = 0;
+    const largeArcFlag = 0;
+    const sweepArcFlag = 1;
+    /**
+     * The general manner in which we will draw our rounded rect is in the following
+     * order of points.
+     *
+     *  - Forward (/) and back (\) slashes represent borderRadiusY and borderRadiusX, respectively.
+     *  - The un-rounded rect points are represented by center dots (and steal 1 unit from the borderRadii).
+     *  - x and y parameters are left out as path arguments use relative coordinates (vs absolute coordinates).
+     *  - Coordinate axis aids are present to avoid counting for any necessary clarification.
+     *
+     *  x: arbitrary
+     *  y: arbitrary
+     *  width: 24
+     *  height: 12
+     *  borderRadiusX: 5
+     *  borderRadiusY: 3
+     *
+     *            0123456789012345678901234
+     *
+     *               (1+9)         (2)
+     *                 ⬇            ⬇
+     * 0          •\\\\--------------\\\\•
+     * 1          /                      /
+     * 2          /                      /
+     * 3   (8) ➡ |                      | ⬅ (3)
+     * 4          |                      |
+     * 5          |                      |
+     * 6          |                      |
+     * 7          |                      |
+     * 8          |                      |
+     * 9   (7) ➡ |                      | ⬅ (4)
+     * 0          /                      /
+     * 1          /                      /
+     * 2          •\\\\--------------\\\\•
+     *             ⬆                ⬆
+     *            (6)              (5)
+     *
+     * Which would generate the following path:
+     * const path = 'M {x+5} ${y+3} ' +
+     *              'h 14 ' +
+     *              'a 5 3 0 0 1 5 3' +
+     *              'v 6 ' +
+     *              'a 5 3 0 0 1 -5 3' +
+     *              'h -14 ' +
+     *              'a 5 3 0 0 1 -5 -3' +
+     *              'v -6 ' +
+     *              'a 5 3 0 0 1 5 -3 Z';
+     */
+    // We start at the left-most point of the top edge.
+    // M: lift and move the pen to [x] [y] coordinates -- does not draw.
+    let path = ['M', x + borderRadiusX, y];
+    // draw to the right-most point of the top edge.
+    // h: horizontally draw a line [n] units relative to the current pen position.
+    path = path.concat(['h', horizontalEdgeLength]);
+    /**
+     * draw the arc for the top-right corner.  If the rect is not rounded, the arc will be 0 length.
+     *  a: draw an arc relative to the current pen position with the following parameters:
+     *  rx: X-axis ellipse radius
+     *  ry: Y-axis ellipse radius
+     *  x-axis-rotation: rotation of the ellipse relative to the current coordinate system
+     *  large-arc-flag: See https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
+     *  sweep-arc-flag: See https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
+     *  (dx, dy): relative end coordinate
+     *
+     * 'a rx ry x-axis-rotation large-arc-flag sweep-arc-flag dx dy'
+     *
+     * We will use x-axis-rotation = 0, large-arc-flag = 0, and sweep-arc-flag = 1 for our path generation.
+     *  */
+    path = path.concat(['a', borderRadiusX, borderRadiusY, xAxisRotation, largeArcFlag, sweepArcFlag, borderRadiusX, borderRadiusY]);
+    /**
+     * Draw to the bottom-most point of the right edge.
+     * v: vertically draw a line [n] units relative to the current pen position.
+     */
+    path = path.concat(['v', verticalEdgeLength]);
+    /**
+     * Draw the arc for the bottom-right corner.
+     */
+    path = path.concat(['a', borderRadiusX, borderRadiusY, xAxisRotation, largeArcFlag, sweepArcFlag, -borderRadiusX, borderRadiusY]);
+    /**
+     * Draw to the left-most point of the bottom edge.
+     */
+    path = path.concat(['h', -horizontalEdgeLength]);
+    /**
+     * Draw the bottom-left corner.
+     */
+    path = path.concat(['a', borderRadiusX, borderRadiusY, xAxisRotation, largeArcFlag, sweepArcFlag, -borderRadiusX, -borderRadiusY]);
+    /**
+     * Draw to the top-most point of the left edge.
+     */
+    path = path.concat(['v', -verticalEdgeLength]);
+    /**
+     * Draw the top-left corner.
+     */
+    path = path.concat(['a', borderRadiusX, borderRadiusY, xAxisRotation, largeArcFlag, sweepArcFlag, borderRadiusX, -borderRadiusY]);
+    /**
+     * Finally, close the shape.  While we have manually returned to the same coordinate we started with, closing and not-closing the shape
+     * can have different behavior depending on other properties.
+     * z or Z: close the shape.
+     */
+    path = path.concat('z');
+    /**
+     * Join all arguments with spaces and return the completed path.
+     */
+    return path.join(' ');
 }
 function convertRectToSvgPath(rectShape) {
-  // Extract necessary args and generate the corresponding path for the shape.
-  return convertRoundedRectToSvgPath(
-    rectShape.x ? rectShape.x : 0,
-    rectShape.y ? rectShape.y : 0,
-    rectShape.borderRadiusX ? rectShape.borderRadiusX : 0,
-    rectShape.borderRadiusX ? rectShape.borderRadiusY : 0,
-    rectShape.width ? rectShape.width : 100,
-    rectShape.height ? rectShape.height : 16,
-  );
+    // Extract necessary args and generate the corresponding path for the shape.
+    return convertRoundedRectToSvgPath(rectShape.x ? rectShape.x : 0, rectShape.y ? rectShape.y : 0, rectShape.borderRadiusX ? rectShape.borderRadiusX : 0, rectShape.borderRadiusX ? rectShape.borderRadiusY : 0, rectShape.width ? rectShape.width : 100, rectShape.height ? rectShape.height : 16);
 }
 function convertCircleToSvgPath(circleShape) {
-  const radius = circleShape.radius ? circleShape.radius : 12;
-  return convertRoundedRectToSvgPath(
-    circleShape.cx ? circleShape.cx - circleShape.radius : 12,
-    circleShape.cy ? circleShape.cy - circleShape.radius : 12,
-    radius,
-    radius,
-    radius * 2,
-    radius * 2,
-  );
+    const radius = circleShape.radius ? circleShape.radius : 12;
+    return convertRoundedRectToSvgPath(circleShape.cx ? circleShape.cx - circleShape.radius : 12, circleShape.cy ? circleShape.cy - circleShape.radius : 12, radius, radius, radius * 2, radius * 2);
 }
-//# sourceMappingURL=SvgShapeToPath.js.map
+//# sourceMappingURL=SvgShapeToPath.js.map

package/lib-commonjs/Win32ShimmerNativeComponent.d.ts

@@ -6,9 +6,9 @@
 import type { ViewProps } from 'react-native';
 import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
 export interface NativeProps extends ViewProps {
-  delay?: Double;
-  duration?: Double;
+    delay?: Double;
+    duration?: Double;
 }
-declare const _default: import('react-native').HostComponent<NativeProps>;
+declare const _default: import("react-native").HostComponent<NativeProps>;
 export default _default;
-//# sourceMappingURL=Win32ShimmerNativeComponent.d.ts.map
+//# sourceMappingURL=Win32ShimmerNativeComponent.d.ts.map

package/lib-commonjs/Win32ShimmerNativeComponent.js

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 /**
  * Copyright (c) Microsoft Corporation.
  * Licensed under the MIT License.
  * @format
  */
-Object.defineProperty(exports, '__esModule', { value: true });
-const react_native_1 = require('react-native');
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_1 = require("react-native");
 exports.default = (0, react_native_1.requireNativeComponent)('RCTNativeAnimatedShimmer');
-//# sourceMappingURL=Win32ShimmerNativeComponent.js.map
+//# sourceMappingURL=Win32ShimmerNativeComponent.js.map

package/lib-commonjs/consts.android.d.ts

@@ -1,4 +1,4 @@
 export declare const shimmerDefaultAngle = 45;
 export declare const shimmerDefaultDelay = 0;
 export declare const shimmerDefaultDuration = 1000;
-//# sourceMappingURL=consts.android.d.ts.map
+//# sourceMappingURL=consts.android.d.ts.map

package/lib-commonjs/consts.android.js

@@ -1,7 +1,7 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.shimmerDefaultDuration = exports.shimmerDefaultDelay = exports.shimmerDefaultAngle = void 0;
 exports.shimmerDefaultAngle = 45;
 exports.shimmerDefaultDelay = 0;
 exports.shimmerDefaultDuration = 1000;
-//# sourceMappingURL=consts.android.js.map
+//# sourceMappingURL=consts.android.js.map

package/lib-commonjs/consts.d.ts

@@ -1,4 +1,4 @@
 export declare const shimmerDefaultAngle = 0;
 export declare const shimmerDefaultDelay = 0;
 export declare const shimmerDefaultDuration = 7000;
-//# sourceMappingURL=consts.d.ts.map
+//# sourceMappingURL=consts.d.ts.map

package/lib-commonjs/consts.ios.d.ts

@@ -1,4 +1,4 @@
 export declare const shimmerDefaultAngle = 0;
 export declare const shimmerDefaultDelay = 0;
 export declare const shimmerDefaultDuration = 1000;
-//# sourceMappingURL=consts.ios.d.ts.map
+//# sourceMappingURL=consts.ios.d.ts.map

package/lib-commonjs/consts.ios.js

@@ -1,7 +1,7 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.shimmerDefaultDuration = exports.shimmerDefaultDelay = exports.shimmerDefaultAngle = void 0;
 exports.shimmerDefaultAngle = 0;
 exports.shimmerDefaultDelay = 0;
 exports.shimmerDefaultDuration = 1000;
-//# sourceMappingURL=consts.ios.js.map
+//# sourceMappingURL=consts.ios.js.map

package/lib-commonjs/consts.js

@@ -1,7 +1,7 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.shimmerDefaultDuration = exports.shimmerDefaultDelay = exports.shimmerDefaultAngle = void 0;
 exports.shimmerDefaultAngle = 0;
 exports.shimmerDefaultDelay = 0;
 exports.shimmerDefaultDuration = 7000;
-//# sourceMappingURL=consts.js.map
+//# sourceMappingURL=consts.js.map

package/lib-commonjs/consts.win32.d.ts

@@ -1,4 +1,4 @@
 export declare const shimmerDefaultAngle = 0;
 export declare const shimmerDefaultDelay = 500;
 export declare const shimmerDefaultDuration = 2000;
-//# sourceMappingURL=consts.win32.d.ts.map
+//# sourceMappingURL=consts.win32.d.ts.map

package/lib-commonjs/consts.win32.js

@@ -1,7 +1,7 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.shimmerDefaultDuration = exports.shimmerDefaultDelay = exports.shimmerDefaultAngle = void 0;
 exports.shimmerDefaultAngle = 0;
 exports.shimmerDefaultDelay = 500;
 exports.shimmerDefaultDuration = 2000;
-//# sourceMappingURL=consts.win32.js.map
+//# sourceMappingURL=consts.win32.js.map

package/lib-commonjs/index.d.ts

@@ -1,13 +1,5 @@
 export { Shimmer } from './Shimmer';
 export { shimmerName } from './Shimmer.types';
-export type {
-  ShimmerCircleElement,
-  ShimmerElementTypes,
-  ShimmerProps,
-  ShimmerRectElement,
-  ShimmerSlotProps,
-  ShimmerTokens,
-  ShimmerType,
-} from './Shimmer.types';
+export type { ShimmerCircleElement, ShimmerElementTypes, ShimmerProps, ShimmerRectElement, ShimmerSlotProps, ShimmerTokens, ShimmerType, } from './Shimmer.types';
 export { shimmerDefaultAngle, shimmerDefaultDelay, shimmerDefaultDuration } from './consts';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.js

@@ -1,37 +1,12 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.shimmerDefaultDuration = exports.shimmerDefaultDelay = exports.shimmerDefaultAngle = exports.shimmerName = exports.Shimmer = void 0;
-const Shimmer_1 = require('./Shimmer');
-Object.defineProperty(exports, 'Shimmer', {
-  enumerable: true,
-  get: function () {
-    return Shimmer_1.Shimmer;
-  },
-});
-const Shimmer_types_1 = require('./Shimmer.types');
-Object.defineProperty(exports, 'shimmerName', {
-  enumerable: true,
-  get: function () {
-    return Shimmer_types_1.shimmerName;
-  },
-});
-const consts_1 = require('./consts');
-Object.defineProperty(exports, 'shimmerDefaultAngle', {
-  enumerable: true,
-  get: function () {
-    return consts_1.shimmerDefaultAngle;
-  },
-});
-Object.defineProperty(exports, 'shimmerDefaultDelay', {
-  enumerable: true,
-  get: function () {
-    return consts_1.shimmerDefaultDelay;
-  },
-});
-Object.defineProperty(exports, 'shimmerDefaultDuration', {
-  enumerable: true,
-  get: function () {
-    return consts_1.shimmerDefaultDuration;
-  },
-});
-//# sourceMappingURL=index.js.map
+const Shimmer_1 = require("./Shimmer");
+Object.defineProperty(exports, "Shimmer", { enumerable: true, get: function () { return Shimmer_1.Shimmer; } });
+const Shimmer_types_1 = require("./Shimmer.types");
+Object.defineProperty(exports, "shimmerName", { enumerable: true, get: function () { return Shimmer_types_1.shimmerName; } });
+const consts_1 = require("./consts");
+Object.defineProperty(exports, "shimmerDefaultAngle", { enumerable: true, get: function () { return consts_1.shimmerDefaultAngle; } });
+Object.defineProperty(exports, "shimmerDefaultDelay", { enumerable: true, get: function () { return consts_1.shimmerDefaultDelay; } });
+Object.defineProperty(exports, "shimmerDefaultDuration", { enumerable: true, get: function () { return consts_1.shimmerDefaultDuration; } });
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,70 +1,71 @@
 {
   "name": "@fluentui-react-native/experimental-shimmer",
-  "version": "0.14.0",
+  "version": "0.14.3",
   "description": "A cross-platform Fluent Shimmer component",
+  "license": "MIT",
+  "author": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui-react-native.git",
     "directory": "packages/experimental/Shimmer"
   },
-  "license": "MIT",
-  "author": "",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js"
+      "require": "./lib-commonjs/index.js",
+      "default": "./src/index.ts"
     }
   },
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
-  "types": "lib/index.d.ts",
   "scripts": {
     "build": "fluentui-scripts build",
     "build-cjs": "tsgo --outDir lib-commonjs",
-    "build-esm": "tsgo --outDir lib --module esnext --moduleResolution bundler",
+    "build-core": "tsgo --outDir lib --module esnext --moduleResolution bundler",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
-    "lint": "fluentui-scripts eslint",
+    "format": "fluentui-scripts format",
+    "lint": "fluentui-scripts lint",
     "lint-package": "fluentui-scripts lint-package",
-    "prettier": "fluentui-scripts prettier",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui-react-native/framework": "0.15.0",
-    "@fluentui-react-native/theming-utils": "0.27.0",
-    "@fluentui-react-native/tokens": "0.24.0",
-    "@fluentui-react-native/use-styling": "0.14.0",
+    "@fluentui-react-native/framework": "0.15.3",
+    "@fluentui-react-native/theming-utils": "0.27.3",
+    "@fluentui-react-native/tokens": "0.24.3",
+    "@fluentui-react-native/use-styling": "0.14.3",
     "assert-never": "^1.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@fluentui-react-native/babel-config": "0.1.1",
-    "@fluentui-react-native/eslint-config-rules": "0.1.1",
-    "@fluentui-react-native/framework-base": "0.3.0",
-    "@fluentui-react-native/jest-config": "0.1.1",
+    "@fluentui-react-native/framework-base": "0.3.3",
+    "@fluentui-react-native/jest-config": "0.1.0",
     "@fluentui-react-native/kit-config": "0.1.2",
-    "@fluentui-react-native/scripts": "0.1.2",
+    "@fluentui-react-native/lint-config-rules": "0.1.3",
+    "@fluentui-react-native/scripts": "0.1.0",
     "@react-native-community/cli": "^20.0.0",
     "@react-native-community/cli-platform-android": "^20.0.0",
     "@react-native-community/cli-platform-ios": "^20.0.0",
     "@react-native/babel-preset": "^0.81.0",
     "@react-native/metro-config": "^0.81.0",
-    "@types/react": "~19.1.0",
+    "@types/react": "~19.1.4",
     "@types/react-test-renderer": "^19.1.0",
-    "react": "19.1.0",
-    "react-native": "^0.81.0",
+    "react": "19.1.4",
+    "react-native": "^0.81.6",
     "react-native-macos": "^0.81.0",
     "react-native-svg": "^15.12.1",
     "react-native-windows": "^0.81.0",
-    "react-test-renderer": "19.1.0"
+    "react-test-renderer": "19.1.4"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.74.0",
-    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.0",
-    "react": "18.2.0 || 19.0.0 || 19.1.0",
-    "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4",
+    "react": "18.2.0 || 19.0.0 || 19.1.4",
+    "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6",
     "react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
     "react-native-svg": ">=15.0.0 <15.13.0 || >=15.4.0 <15.13.0 || ^15.11.2 || ^15.12.1",
     "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"

package/src/Shimmer.test.tsx

@@ -5,7 +5,7 @@ import * as renderer from 'react-test-renderer';
 import { Shimmer } from './Shimmer';
 import type { ShimmerCircleElement, ShimmerRectElement } from './Shimmer.types';
 
-function shimmerRects(): Array<ShimmerRectElement | ShimmerCircleElement> {
+function shimmerRects(): (ShimmerRectElement | ShimmerCircleElement)[] {
   return [
     {
       type: 'rect',

package/src/Shimmer.tsx

@@ -27,7 +27,7 @@ export const Shimmer = compose<ShimmerType>({
     const memoizedShimmerData = useMemo(
       () => ({
         angle: props.angle ? props.angle : tokens['angle'],
-        backgroundColor: props?.style?.['backgroundColor'] ? props?.style['backgroundColor'] : tokens['backgroundColor'] ?? 'transparent',
+        backgroundColor: props?.style?.['backgroundColor'] ? props?.style['backgroundColor'] : (tokens['backgroundColor'] ?? 'transparent'),
         containerBorderRadius: props?.style?.['borderRadius'] ? props?.style['borderRadius'] : 0,
         containerWidth: props?.style?.['width'] ? props?.style['width'] : '100%',
         containerHeight: props?.style?.['height'] ? props?.style['height'] : '100%',
@@ -38,17 +38,7 @@ export const Shimmer = compose<ShimmerType>({
         shimmerWaveColor: props.shimmerWaveColor ? props.shimmerWaveColor : tokens['shimmerWaveColor'],
         shimmerWaveColorOpacity: tokens['shimmerWaveColorOpacity'],
       }),
-      [
-        props.angle,
-        props.backgroundColor,
-        props.delay,
-        props.duration,
-        props.shimmerColor,
-        props.shimmerColorOpacity,
-        props.shimmerWaveColor,
-        props.shimmerWaveColorOpacity,
-        props.style,
-      ],
+      [props.angle, props.delay, props.duration, props.shimmerColor, props.shimmerWaveColor, props.style, tokens],
     );
 
     /* The shimmer animation is implemented using a LinearGradient which travels from left to right.
@@ -69,11 +59,11 @@ export const Shimmer = compose<ShimmerType>({
           useNativeDriver: true,
         }),
       ).start();
-    }, [memoizedShimmerData.delay, memoizedShimmerData.duration]);
+    }, [endValue, memoizedShimmerData.delay, memoizedShimmerData.duration, x1]);
 
     useEffect(() => {
       shimmerAnimation();
-    });
+    }, [shimmerAnimation]);
 
     return (rest: ShimmerProps) => {
       const { elements, ...mergedProps } = mergeProps(props, rest);

package/src/Shimmer.types.shared.ts

@@ -161,7 +161,7 @@ export interface ShimmerProps extends ViewProps, ShimmerTokens {
   /**
    * Shimmer shapes that define the masking effect of the Shimmer control.
    */
-  elements: Array<ShimmerElementTypes>;
+  elements: ShimmerElementTypes[];
 }
 
 export interface ShimmerType {

package/src/ShimmerTokens.android.ts

@@ -13,4 +13,4 @@ export const defaultShimmerTokens: TokenSettings<ShimmerTokens, Theme> = (theme:
     shimmerColorOpacity: 1,
     shimmerWaveColor: theme.colors.neutralStencil2,
     shimmerWaveColorOpacity: 1,
-  } as ShimmerTokens);
+  }) as ShimmerTokens;

package/src/ShimmerTokens.ios.ts

@@ -13,4 +13,4 @@ export const defaultShimmerTokens: TokenSettings<ShimmerTokens, Theme> = (theme:
     shimmerColorOpacity: 1,
     shimmerWaveColor: theme.colors.neutralStencil2,
     shimmerWaveColorOpacity: 1,
-  } as ShimmerTokens);
+  }) as ShimmerTokens;

package/src/ShimmerTokens.ts

@@ -15,4 +15,4 @@ export const defaultShimmerTokens: TokenSettings<ShimmerTokens, Theme> = (theme:
     shimmerColorOpacity: 1,
     shimmerWaveColor: getCurrentAppearance(theme.host.appearance, 'light') === 'light' ? 'white' : 'black',
     shimmerWaveColorOpacity: 1,
-  } as ShimmerTokens);
+  }) as ShimmerTokens;