@fluentui-react-native/composition 0.11.11 → 0.12.0

package/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@fluentui-react-native/composition",
   "entries": [
+    {
+      "date": "Tue, 05 Aug 2025 18:50:42 GMT",
+      "version": "0.11.12",
+      "tag": "@fluentui-react-native/composition_v0.11.12",
+      "comments": {
+        "patch": [
+          {
+            "author": "jasonmo@microsoft.com",
+            "package": "@fluentui-react-native/composition",
+            "commit": "1ed213f1b48036479e39ace7f25f9a31f46042bf",
+            "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 22 Jul 2025 19:06:23 GMT",
       "version": "0.11.8",

package/CHANGELOG.md

@@ -1,9 +1,55 @@
 # Change Log - @fluentui-react-native/composition
 
-<!-- This log was last generated on Tue, 22 Jul 2025 19:06:23 GMT and should not be manually modified. -->
+## 0.12.0
+
+### Minor Changes
+
+- d7adbdd: # Migration from Beachball to Changesets
+
+  This changeset represents the migration from Beachball to Changesets for version management and consolidates all changes from 440+ beachball change files that were in the `change/` directory.
+
+  All 75 affected packages receive a minor version bump to acknowledge the accumulated changes from the beachball era.
+
+  ## What Changed
+
+  Going forward, all version management uses Changesets via `yarn changeset`. The following beachball infrastructure has been removed:
+
+  - ❌ 440+ beachball change files from `change/` directory
+  - ❌ `beachball` package dependency
+  - ❌ Beachball scripts from `package.json`
+  - ❌ `beachball.config.js` configuration file
+  - ❌ Beachball publish steps from Azure Pipelines
+
+  ## New Workflow
+
+  ✅ **Create changes**: Run `yarn changeset` to document changes
+  ✅ **Version bump PRs**: Automatically created by GitHub Actions
+  ✅ **Publishing**: Handled by Azure Pipelines using `changeset publish`
+  ✅ **Validation**: CI validates changesets and blocks major version bumps
+
+  For details, see `CHANGESETS_SETUP.md` and `CONTRIBUTING.md`.
+
+### Patch Changes
+
+- d1d8c26: We were pinning @types/react and react-native-macos via resolutions. This fixes that which uncovered a bunch of type inconsistencies that needed to be addressed.
+- Updated dependencies [d7adbdd]
+- Updated dependencies [d1d8c26]
+  - @fluentui-react-native/framework-base@0.3.0
+  - @fluentui-react-native/use-slots@0.11.0
+  - @fluentui-react-native/use-styling@0.14.0
+
+<!-- This log was last generated on Tue, 05 Aug 2025 18:50:42 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 0.11.12
+
+Tue, 05 Aug 2025 18:50:42 GMT
+
+### Patches
+
+- move repo to pnpm, create babel and jest config packages, fix dependencies (jasonmo@microsoft.com)
+
 ## 0.11.8
 
 Tue, 22 Jul 2025 19:06:23 GMT

package/babel.config.js

@@ -1 +1 @@
-module.exports = require('@fluentui-react-native/scripts/configs/babel.config');
+module.exports = require('@fluentui-react-native/babel-config');

package/lib/composeFactory.d.ts

@@ -1,8 +1,14 @@
-import type { ComposableFunction } from '@fluentui-react-native/framework-base';
+import type { ComposableFunction, FinalRender } from '@fluentui-react-native/framework-base';
 import type { UseSlotOptions, Slots } from '@fluentui-react-native/use-slots';
 import type { UseStylingOptions, TokenSettings, ThemeHelper, HasLayer } from '@fluentui-react-native/use-styling';
 export type UseStyledSlots<TProps, TSlotProps> = (props: TProps, lookup?: HasLayer) => Slots<TSlotProps>;
-export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = UseStylingOptions<TProps, TSlotProps, TTokens, TTheme> & UseSlotOptions<TSlotProps> & {
+export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = UseStylingOptions<
+  TProps,
+  TSlotProps,
+  TTokens,
+  TTheme
+> &
+  UseSlotOptions<TSlotProps> & {
     /**
      * Includes from UseStylingOptions:
      *
@@ -11,16 +17,22 @@ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics
     /**
      * staged render function that takes props and a useSlots hook as an input
      */
-    useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => React.FunctionComponent<TProps>;
+    useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => FinalRender<TProps>;
     /**
      * optional statics to attach to the component
      */
     statics?: TStatics;
-};
+  };
 export type ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = ComposableFunction<TProps> & {
-    __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
-    customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
-    compose: (options: Partial<ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>>) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+  __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+  customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+  compose<TOverrideSlotProps = TSlotProps>(
+    options: Partial<ComposeFactoryOptions<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>>,
+  ): ComposeFactoryComponent<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>;
 } & TStatics;
-export declare function composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object>(options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>, themeHelper: ThemeHelper<TTheme>, base?: ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>): ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
-//# sourceMappingURL=composeFactory.d.ts.map
+export declare function composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object>(
+  options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>,
+  themeHelper: ThemeHelper<TTheme>,
+  base?: ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>,
+): ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+//# sourceMappingURL=composeFactory.d.ts.map

package/lib/composeFactory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composeFactory.d.ts","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAG9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAElH,MAAM,MAAM,cAAc,CAAC,MAAM,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,UAAU,CAAC,CAAC;AAEzG,MAAM,MAAM,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,iBAAiB,CAC1H,MAAM,EACN,UAAU,EACV,OAAO,EACP,MAAM,CACP,GACC,cAAc,CAAC,UAAU,CAAC,GAAG;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAE5G;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACxI,SAAS,EAAE,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IAChF,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,KAAK,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IACnI,OAAO,EAAE,CACP,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,KACnF,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;CAC7E,GAAG,QAAQ,CAAC;AAUb,wBAAgB,cAAc,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,EAClG,OAAO,EAAE,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAC7E,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAChC,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,GAC5E,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAsCxE"}
+{"version":3,"file":"composeFactory.d.ts","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAE7F,OAAO,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAG9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAElH,MAAM,MAAM,cAAc,CAAC,MAAM,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,UAAU,CAAC,CAAC;AAEzG,MAAM,MAAM,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,iBAAiB,CAC1H,MAAM,EACN,UAAU,EACV,OAAO,EACP,MAAM,CACP,GACC,cAAc,CAAC,UAAU,CAAC,GAAG;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,WAAW,CAAC,MAAM,CAAC,CAAC;IAEhG;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACxI,SAAS,EAAE,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IAChF,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,KAAK,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IACnI,OAAO,CAAC,kBAAkB,GAAG,UAAU,EACrC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,GAC7F,uBAAuB,CAAC,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;CACnF,GAAG,QAAQ,CAAC;AAUb,wBAAgB,cAAc,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,EAClG,OAAO,EAAE,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAC7E,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAChC,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,GAC5E,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CA8CxE"}

package/lib/composeFactory.js

@@ -6,28 +6,28 @@ import { buildUseStyling } from '@fluentui-react-native/use-styling';
  * options get deep merged except the tokens array gets appended
  */
 const mergeOptions = {
-    tokens: 'appendArray',
-    object: true,
+  tokens: 'appendArray',
+  object: true,
 };
 export function composeFactory(options, themeHelper, base) {
-    // merge options together if a base is specified
-    const baseOptions = base?.__options;
-    options = baseOptions ? immutableMergeCore(mergeOptions, baseOptions, options) : { ...options };
-    // build styling if styling options are specified
-    options.useStyling = options.slotProps || options.tokens ? buildUseStyling(options, themeHelper) : () => ({});
-    // build the slots hook, which will use the styling hook if it has been built
-    const useSlots = buildUseSlots(options);
-    // build the staged component
-    const component = stagedComponent((props) => options.useRender(props, useSlots));
-    // attach additional props to the returned component
-    component.displayName = options.displayName;
-    component.__options = options;
-    component.customize = (...tokens) => composeFactory(immutableMergeCore(mergeOptions, options, { tokens: tokens }), themeHelper);
-    component.compose = (customOptions) => composeFactory(immutableMergeCore(mergeOptions, options, customOptions), themeHelper);
-    // attach statics if specified
-    if (options.statics) {
-        Object.assign(component, options.statics);
-    }
-    return component;
+  // merge options together if a base is specified
+  const baseOptions = base?.__options;
+  options = baseOptions ? immutableMergeCore(mergeOptions, baseOptions, options) : { ...options };
+  // build styling if styling options are specified
+  options.useStyling = options.slotProps || options.tokens ? buildUseStyling(options, themeHelper) : () => ({});
+  // build the slots hook, which will use the styling hook if it has been built
+  const useSlots = buildUseSlots(options);
+  // build the staged component
+  const component = stagedComponent((props) => options.useRender(props, useSlots));
+  // attach additional props to the returned component
+  component.displayName = options.displayName;
+  component.__options = options;
+  component.customize = (...tokens) => composeFactory(immutableMergeCore(mergeOptions, options, { tokens: tokens }), themeHelper);
+  component.compose = (customOptions) => composeFactory(immutableMergeCore(mergeOptions, options, customOptions), themeHelper);
+  // attach statics if specified
+  if (options.statics) {
+    Object.assign(component, options.statics);
+  }
+  return component;
 }
-//# sourceMappingURL=composeFactory.js.map
+//# sourceMappingURL=composeFactory.js.map

package/lib/composeFactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAE3E,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAqCrE;;GAEG;AACH,MAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,MAAM,UAAU,cAAc,CAC5B,OAA6E,EAC7E,WAAgC,EAChC,IAA6E;IAK7E,gDAAgD;IAChD,MAAM,WAAW,GAAiB,IAAI,EAAE,SAAyB,CAAC;IAClE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAe,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAE9G,iDAAiD;IACjD,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAiB,CAAA,CAAC;IAE5H,6EAA6E;IAC7E,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,CAAuC,CAAC;IAE9E,6BAA6B;IAC7B,MAAM,SAAS,GAAG,eAAe,CAAS,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAmB,CAAC;IAE3G,oDAAoD;IACpD,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,MAA8B,EAAE,EAAE,CAC1D,cAAc,CACZ,kBAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAkB,CAAC,EAC7E,WAAW,CACZ,CAAC;IAEJ,SAAS,CAAC,OAAO,GAAG,CAAC,aAAoC,EAAE,EAAE,CAC3D,cAAc,CACZ,kBAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,aAAa,CAAiB,EACxE,WAAW,CACZ,CAAC;IAEJ,8BAA8B;IAC9B,IAAI,OAAO,CAAC,OAAO,EAAE;QACnB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;KAC3C;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}
+{"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAE3E,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAqCrE;;GAEG;AACH,MAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,MAAM,UAAU,cAAc,CAC5B,OAA6E,EAC7E,WAAgC,EAChC,IAA6E,EACL;IAIxE,gDAAgD;IAChD,MAAM,WAAW,GAAiB,IAAI,EAAE,SAAyB,CAAC;IAClE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAe,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAE9G,iDAAiD;IACjD,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,EAAiB,CAAA,CAAC;IAE5H,6EAA6E;IAC7E,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,CAAuC,CAAC;IAE9E,6BAA6B;IAC7B,MAAM,SAAS,GAAG,eAAe,CAAS,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAmB,CAAC;IAE3G,oDAAoD;IACpD,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,MAA8B,EAAE,EAAE,CAC1D,cAAc,CACZ,kBAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAkB,CAAC,EAC7E,WAAW,CACZ,CAAC;IAEJ,SAAS,CAAC,OAAO,GAAG,CAClB,aAAoG,EACpG,EAAE,CACF,cAAc,CACZ,kBAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,aAAuB,CAMhE,EACD,WAAW,CACZ,CAAC;IAEJ,8BAA8B;IAC9B,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;QACpB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC;IAED,OAAO,SAAS,CAAC;AAAA,CAClB"}

package/lib/composeFactory.test.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=composeFactory.test.d.ts.map
+//# sourceMappingURL=composeFactory.test.d.ts.map

package/lib/composeFactory.test.js

@@ -1,59 +1,69 @@
+import { jsx as _jsx } from '@fluentui-react-native/framework-base/jsx-runtime';
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import { act } from 'react';
 import { View, Text } from 'react-native';
-import { withSlots } from '@fluentui-react-native/framework-base';
 import * as renderer from 'react-test-renderer';
 import { composeFactory } from './composeFactory';
 const theme = {
-    values: {
-        backgroundColor: 'black',
-        color: 'white',
-    },
-    components: {},
+  values: {
+    backgroundColor: 'black',
+    color: 'white',
+  },
+  components: {},
 };
 const themeHelper = {
-    useTheme: () => theme,
-    getComponentInfo: (theme, name) => {
-        return theme?.components ?? theme.components[name];
-    },
+  useTheme: () => theme,
+  getComponentInfo: (theme, name) => {
+    return theme?.components ?? theme.components[name];
+  },
 };
 function mergeProps(p1, p2) {
-    return { ...p1, ...p2 };
+  return { ...p1, ...p2 };
 }
-const Base = composeFactory({
+const Base = composeFactory(
+  {
     tokens: [
-        (t) => ({
-            backgroundColor: t.values.backgroundColor,
-            color: t.values.color,
-        }),
+      (t) => ({
+        backgroundColor: t.values.backgroundColor,
+        color: t.values.color,
+      }),
     ],
     slotProps: {
-        outer: (tokens) => ({ style: { backgroundColor: tokens.backgroundColor } }),
-        content: (tokens) => ({ style: { color: tokens.color } }),
+      outer: (tokens) => ({ style: { backgroundColor: tokens.backgroundColor } }),
+      content: (tokens) => ({ style: { color: tokens.color } }),
     },
     slots: {
-        outer: View,
-        content: Text,
+      outer: View,
+      content: Text,
     },
     useRender: (props, useSlots) => {
-        const Slots = useSlots(props);
-        return (extra) => (withSlots(Slots.outer, { ...mergeProps(props, extra) },
-            withSlots(Slots.content, null, "Hello")));
+      const Slots = useSlots(props);
+      return (extra) => _jsx(Slots.outer, { ...mergeProps(props, extra), children: _jsx(Slots.content, { children: 'Hello' }) });
     },
-}, themeHelper);
+  },
+  themeHelper,
+);
 const Customized = Base.customize({ backgroundColor: 'pink' });
 const mixinStyle = {
-    width: 30,
-    height: 20,
-    borderColor: 'green',
-    borderWidth: 1,
+  width: 30,
+  height: 20,
+  borderColor: 'green',
+  borderWidth: 1,
 };
 describe('composeFactory test suite', () => {
-    it('Base component render', () => {
-        const tree = renderer.create(withSlots(Base, { style: mixinStyle })).toJSON();
-        expect(tree).toMatchSnapshot();
+  it('Base component render', () => {
+    let component;
+    act(() => {
+      component = renderer.create(_jsx(Base, { style: mixinStyle }));
     });
-    it('Base component render', () => {
-        const tree = renderer.create(withSlots(Customized, { style: mixinStyle })).toJSON();
-        expect(tree).toMatchSnapshot();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Customized component render', () => {
+    let component;
+    act(() => {
+      component = renderer.create(_jsx(Customized, { style: mixinStyle }));
     });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });
-//# sourceMappingURL=composeFactory.test.js.map
+//# sourceMappingURL=composeFactory.test.js.map

package/lib/composeFactory.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAElE,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAGhD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYlD,MAAM,KAAK,GAAU;IACnB,MAAM,EAAE;QACN,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,OAAO;KACf;IACD,UAAU,EAAE,EAAE;CACf,CAAC;AAYF,MAAM,WAAW,GAAuB;IACtC,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK;IACrB,gBAAgB,EAAE,CAAC,KAAY,EAAE,IAAY,EAAE,EAAE;QAC/C,OAAO,KAAK,EAAE,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAC;AAEF,SAAS,UAAU,CAAI,EAAK,EAAE,EAAK;IACjC,OAAO,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC;AAC1B,CAAC;AAED,MAAM,IAAI,GAAG,cAAc,CACzB;IACE,MAAM,EAAE;QACN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACN,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,eAAe;YACzC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;SACtB,CAAC;KACH;IACD,SAAS,EAAE;QACT,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC;QAC3E,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;KAC1D;IACD,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,OAAO,EAAE,IAAI;KACd;IACD,SAAS,EAAE,CAAC,KAAgB,EAAE,QAA8C,EAAE,EAAE;QAC9E,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,OAAO,CAAC,KAAgB,EAAE,EAAE,CAAC,CAC3B,UAAC,KAAK,CAAC,KAAK,OAAK,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;YACvC,UAAC,KAAK,CAAC,OAAO,gBAAsB,CACxB,CACf,CAAC;IACJ,CAAC;CACF,EACD,WAAW,CACZ,CAAC;AAEF,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;AAE/D,MAAM,UAAU,GAAG;IACjB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACzC,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAC,IAAI,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACnE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAC,UAAU,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACzE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -1,3 +1,3 @@
 export { composeFactory } from './composeFactory';
 export type { ComposeFactoryComponent, ComposeFactoryOptions, UseStyledSlots } from './composeFactory';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/index.js

@@ -1,2 +1,2 @@
 export { composeFactory } from './composeFactory';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/lib-commonjs/composeFactory.d.ts

@@ -1,8 +1,14 @@
-import type { ComposableFunction } from '@fluentui-react-native/framework-base';
+import type { ComposableFunction, FinalRender } from '@fluentui-react-native/framework-base';
 import type { UseSlotOptions, Slots } from '@fluentui-react-native/use-slots';
 import type { UseStylingOptions, TokenSettings, ThemeHelper, HasLayer } from '@fluentui-react-native/use-styling';
 export type UseStyledSlots<TProps, TSlotProps> = (props: TProps, lookup?: HasLayer) => Slots<TSlotProps>;
-export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = UseStylingOptions<TProps, TSlotProps, TTokens, TTheme> & UseSlotOptions<TSlotProps> & {
+export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = UseStylingOptions<
+  TProps,
+  TSlotProps,
+  TTokens,
+  TTheme
+> &
+  UseSlotOptions<TSlotProps> & {
     /**
      * Includes from UseStylingOptions:
      *
@@ -11,16 +17,22 @@ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics
     /**
      * staged render function that takes props and a useSlots hook as an input
      */
-    useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => React.FunctionComponent<TProps>;
+    useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => FinalRender<TProps>;
     /**
      * optional statics to attach to the component
      */
     statics?: TStatics;
-};
+  };
 export type ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = ComposableFunction<TProps> & {
-    __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
-    customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
-    compose: (options: Partial<ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>>) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+  __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+  customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+  compose<TOverrideSlotProps = TSlotProps>(
+    options: Partial<ComposeFactoryOptions<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>>,
+  ): ComposeFactoryComponent<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>;
 } & TStatics;
-export declare function composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object>(options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>, themeHelper: ThemeHelper<TTheme>, base?: ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>): ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
-//# sourceMappingURL=composeFactory.d.ts.map
+export declare function composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object>(
+  options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>,
+  themeHelper: ThemeHelper<TTheme>,
+  base?: ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>,
+): ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+//# sourceMappingURL=composeFactory.d.ts.map

package/lib-commonjs/composeFactory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composeFactory.d.ts","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAG9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAElH,MAAM,MAAM,cAAc,CAAC,MAAM,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,UAAU,CAAC,CAAC;AAEzG,MAAM,MAAM,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,iBAAiB,CAC1H,MAAM,EACN,UAAU,EACV,OAAO,EACP,MAAM,CACP,GACC,cAAc,CAAC,UAAU,CAAC,GAAG;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAE5G;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACxI,SAAS,EAAE,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IAChF,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,KAAK,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IACnI,OAAO,EAAE,CACP,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,KACnF,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;CAC7E,GAAG,QAAQ,CAAC;AAUb,wBAAgB,cAAc,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,EAClG,OAAO,EAAE,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAC7E,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAChC,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,GAC5E,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAsCxE"}
+{"version":3,"file":"composeFactory.d.ts","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAE7F,OAAO,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAG9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAElH,MAAM,MAAM,cAAc,CAAC,MAAM,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,UAAU,CAAC,CAAC;AAEzG,MAAM,MAAM,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,iBAAiB,CAC1H,MAAM,EACN,UAAU,EACV,OAAO,EACP,MAAM,CACP,GACC,cAAc,CAAC,UAAU,CAAC,GAAG;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,WAAW,CAAC,MAAM,CAAC,CAAC;IAEhG;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACxI,SAAS,EAAE,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IAChF,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,KAAK,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IACnI,OAAO,CAAC,kBAAkB,GAAG,UAAU,EACrC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,GAC7F,uBAAuB,CAAC,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;CACnF,GAAG,QAAQ,CAAC;AAUb,wBAAgB,cAAc,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,EAClG,OAAO,EAAE,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAC7E,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAChC,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,GAC5E,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CA8CxE"}

package/lib-commonjs/composeFactory.js

@@ -1,37 +1,38 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.composeFactory = void 0;
-const framework_base_1 = require("@fluentui-react-native/framework-base");
-const framework_base_2 = require("@fluentui-react-native/framework-base");
-const use_slots_1 = require("@fluentui-react-native/use-slots");
-const use_styling_1 = require("@fluentui-react-native/use-styling");
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.composeFactory = composeFactory;
+const framework_base_1 = require('@fluentui-react-native/framework-base');
+const framework_base_2 = require('@fluentui-react-native/framework-base');
+const use_slots_1 = require('@fluentui-react-native/use-slots');
+const use_styling_1 = require('@fluentui-react-native/use-styling');
 /**
  * options get deep merged except the tokens array gets appended
  */
 const mergeOptions = {
-    tokens: 'appendArray',
-    object: true,
+  tokens: 'appendArray',
+  object: true,
 };
 function composeFactory(options, themeHelper, base) {
-    // merge options together if a base is specified
-    const baseOptions = base?.__options;
-    options = baseOptions ? (0, framework_base_1.immutableMergeCore)(mergeOptions, baseOptions, options) : { ...options };
-    // build styling if styling options are specified
-    options.useStyling = options.slotProps || options.tokens ? (0, use_styling_1.buildUseStyling)(options, themeHelper) : () => ({});
-    // build the slots hook, which will use the styling hook if it has been built
-    const useSlots = (0, use_slots_1.buildUseSlots)(options);
-    // build the staged component
-    const component = (0, framework_base_2.stagedComponent)((props) => options.useRender(props, useSlots));
-    // attach additional props to the returned component
-    component.displayName = options.displayName;
-    component.__options = options;
-    component.customize = (...tokens) => composeFactory((0, framework_base_1.immutableMergeCore)(mergeOptions, options, { tokens: tokens }), themeHelper);
-    component.compose = (customOptions) => composeFactory((0, framework_base_1.immutableMergeCore)(mergeOptions, options, customOptions), themeHelper);
-    // attach statics if specified
-    if (options.statics) {
-        Object.assign(component, options.statics);
-    }
-    return component;
+  // merge options together if a base is specified
+  const baseOptions = base?.__options;
+  options = baseOptions ? (0, framework_base_1.immutableMergeCore)(mergeOptions, baseOptions, options) : { ...options };
+  // build styling if styling options are specified
+  options.useStyling = options.slotProps || options.tokens ? (0, use_styling_1.buildUseStyling)(options, themeHelper) : () => ({});
+  // build the slots hook, which will use the styling hook if it has been built
+  const useSlots = (0, use_slots_1.buildUseSlots)(options);
+  // build the staged component
+  const component = (0, framework_base_2.stagedComponent)((props) => options.useRender(props, useSlots));
+  // attach additional props to the returned component
+  component.displayName = options.displayName;
+  component.__options = options;
+  component.customize = (...tokens) =>
+    composeFactory((0, framework_base_1.immutableMergeCore)(mergeOptions, options, { tokens: tokens }), themeHelper);
+  component.compose = (customOptions) =>
+    composeFactory((0, framework_base_1.immutableMergeCore)(mergeOptions, options, customOptions), themeHelper);
+  // attach statics if specified
+  if (options.statics) {
+    Object.assign(component, options.statics);
+  }
+  return component;
 }
-exports.composeFactory = composeFactory;
-//# sourceMappingURL=composeFactory.js.map
+//# sourceMappingURL=composeFactory.js.map

package/lib-commonjs/composeFactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":";;;AACA,0EAA2E;AAE3E,0EAAwE;AAExE,gEAAiE;AACjE,oEAAqE;AAqCrE;;GAEG;AACH,MAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,SAAgB,cAAc,CAC5B,OAA6E,EAC7E,WAAgC,EAChC,IAA6E;IAK7E,gDAAgD;IAChD,MAAM,WAAW,GAAiB,IAAI,EAAE,SAAyB,CAAC;IAClE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,IAAA,mCAAkB,EAAe,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAE9G,iDAAiD;IACjD,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,IAAA,6BAAe,EAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAiB,CAAA,CAAC;IAE5H,6EAA6E;IAC7E,MAAM,QAAQ,GAAG,IAAA,yBAAa,EAAC,OAAO,CAAuC,CAAC;IAE9E,6BAA6B;IAC7B,MAAM,SAAS,GAAG,IAAA,gCAAe,EAAS,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAmB,CAAC;IAE3G,oDAAoD;IACpD,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,MAA8B,EAAE,EAAE,CAC1D,cAAc,CACZ,IAAA,mCAAkB,EAAC,YAAY,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAkB,CAAC,EAC7E,WAAW,CACZ,CAAC;IAEJ,SAAS,CAAC,OAAO,GAAG,CAAC,aAAoC,EAAE,EAAE,CAC3D,cAAc,CACZ,IAAA,mCAAkB,EAAC,YAAY,EAAE,OAAO,EAAE,aAAa,CAAiB,EACxE,WAAW,CACZ,CAAC;IAEJ,8BAA8B;IAC9B,IAAI,OAAO,CAAC,OAAO,EAAE;QACnB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;KAC3C;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AA1CD,wCA0CC"}
+{"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":";;;AACA,0EAA2E;AAE3E,0EAAwE;AAExE,gEAAiE;AACjE,oEAAqE;AAqCrE;;GAEG;AACH,MAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,wBACE,OAA6E,EAC7E,WAAgC,EAChC,IAA6E,EACL;IAIxE,gDAAgD;IAChD,MAAM,WAAW,GAAiB,IAAI,EAAE,SAAyB,CAAC;IAClE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,IAAA,mCAAkB,EAAe,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAE9G,iDAAiD;IACjD,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,IAAA,6BAAe,EAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,EAAiB,CAAA,CAAC;IAE5H,6EAA6E;IAC7E,MAAM,QAAQ,GAAG,IAAA,yBAAa,EAAC,OAAO,CAAuC,CAAC;IAE9E,6BAA6B;IAC7B,MAAM,SAAS,GAAG,IAAA,gCAAe,EAAS,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAmB,CAAC;IAE3G,oDAAoD;IACpD,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,MAA8B,EAAE,EAAE,CAC1D,cAAc,CACZ,IAAA,mCAAkB,EAAC,YAAY,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAkB,CAAC,EAC7E,WAAW,CACZ,CAAC;IAEJ,SAAS,CAAC,OAAO,GAAG,CAClB,aAAoG,EACpG,EAAE,CACF,cAAc,CACZ,IAAA,mCAAkB,EAAC,YAAY,EAAE,OAAO,EAAE,aAAuB,CAMhE,EACD,WAAW,CACZ,CAAC;IAEJ,8BAA8B;IAC9B,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;QACpB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC;IAED,OAAO,SAAS,CAAC;AAAA,CAClB"}

package/lib-commonjs/composeFactory.test.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=composeFactory.test.d.ts.map
+//# sourceMappingURL=composeFactory.test.d.ts.map

package/lib-commonjs/composeFactory.test.js

@@ -1,84 +1,122 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_native_1 = require("react-native");
-const framework_base_1 = require("@fluentui-react-native/framework-base");
-const renderer = __importStar(require("react-test-renderer"));
-const composeFactory_1 = require("./composeFactory");
+'use strict';
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, 'default', { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o['default'] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== 'default') __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
+Object.defineProperty(exports, '__esModule', { value: true });
+const jsx_runtime_1 = require('@fluentui-react-native/framework-base/jsx-runtime');
+/** @jsxImportSource @fluentui-react-native/framework-base */
+const react_1 = require('react');
+const react_native_1 = require('react-native');
+const renderer = __importStar(require('react-test-renderer'));
+const composeFactory_1 = require('./composeFactory');
 const theme = {
-    values: {
-        backgroundColor: 'black',
-        color: 'white',
-    },
-    components: {},
+  values: {
+    backgroundColor: 'black',
+    color: 'white',
+  },
+  components: {},
 };
 const themeHelper = {
-    useTheme: () => theme,
-    getComponentInfo: (theme, name) => {
-        return theme?.components ?? theme.components[name];
-    },
+  useTheme: () => theme,
+  getComponentInfo: (theme, name) => {
+    return theme?.components ?? theme.components[name];
+  },
 };
 function mergeProps(p1, p2) {
-    return { ...p1, ...p2 };
+  return { ...p1, ...p2 };
 }
-const Base = (0, composeFactory_1.composeFactory)({
+const Base = (0, composeFactory_1.composeFactory)(
+  {
     tokens: [
-        (t) => ({
-            backgroundColor: t.values.backgroundColor,
-            color: t.values.color,
-        }),
+      (t) => ({
+        backgroundColor: t.values.backgroundColor,
+        color: t.values.color,
+      }),
     ],
     slotProps: {
-        outer: (tokens) => ({ style: { backgroundColor: tokens.backgroundColor } }),
-        content: (tokens) => ({ style: { color: tokens.color } }),
+      outer: (tokens) => ({ style: { backgroundColor: tokens.backgroundColor } }),
+      content: (tokens) => ({ style: { color: tokens.color } }),
     },
     slots: {
-        outer: react_native_1.View,
-        content: react_native_1.Text,
+      outer: react_native_1.View,
+      content: react_native_1.Text,
     },
     useRender: (props, useSlots) => {
-        const Slots = useSlots(props);
-        return (extra) => ((0, framework_base_1.withSlots)(Slots.outer, { ...mergeProps(props, extra) },
-            (0, framework_base_1.withSlots)(Slots.content, null, "Hello")));
+      const Slots = useSlots(props);
+      return (extra) =>
+        jsx_runtime_1.jsx(Slots.outer, { ...mergeProps(props, extra), children: jsx_runtime_1.jsx(Slots.content, { children: 'Hello' }) });
     },
-}, themeHelper);
+  },
+  themeHelper,
+);
 const Customized = Base.customize({ backgroundColor: 'pink' });
 const mixinStyle = {
-    width: 30,
-    height: 20,
-    borderColor: 'green',
-    borderWidth: 1,
+  width: 30,
+  height: 20,
+  borderColor: 'green',
+  borderWidth: 1,
 };
 describe('composeFactory test suite', () => {
-    it('Base component render', () => {
-        const tree = renderer.create((0, framework_base_1.withSlots)(Base, { style: mixinStyle })).toJSON();
-        expect(tree).toMatchSnapshot();
+  it('Base component render', () => {
+    let component;
+    (0, react_1.act)(() => {
+      component = renderer.create(jsx_runtime_1.jsx(Base, { style: mixinStyle }));
     });
-    it('Base component render', () => {
-        const tree = renderer.create((0, framework_base_1.withSlots)(Customized, { style: mixinStyle })).toJSON();
-        expect(tree).toMatchSnapshot();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Customized component render', () => {
+    let component;
+    (0, react_1.act)(() => {
+      component = renderer.create(jsx_runtime_1.jsx(Customized, { style: mixinStyle }));
     });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });
-//# sourceMappingURL=composeFactory.test.js.map
+//# sourceMappingURL=composeFactory.test.js.map

package/lib-commonjs/composeFactory.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAGA,+CAA0C;AAE1C,0EAAkE;AAElE,8DAAgD;AAGhD,qDAAkD;AAYlD,MAAM,KAAK,GAAU;IACnB,MAAM,EAAE;QACN,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,OAAO;KACf;IACD,UAAU,EAAE,EAAE;CACf,CAAC;AAYF,MAAM,WAAW,GAAuB;IACtC,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK;IACrB,gBAAgB,EAAE,CAAC,KAAY,EAAE,IAAY,EAAE,EAAE;QAC/C,OAAO,KAAK,EAAE,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAC;AAEF,SAAS,UAAU,CAAI,EAAK,EAAE,EAAK;IACjC,OAAO,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC;AAC1B,CAAC;AAED,MAAM,IAAI,GAAG,IAAA,+BAAc,EACzB;IACE,MAAM,EAAE;QACN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACN,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,eAAe;YACzC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;SACtB,CAAC;KACH;IACD,SAAS,EAAE;QACT,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC;QAC3E,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;KAC1D;IACD,KAAK,EAAE;QACL,KAAK,EAAE,mBAAI;QACX,OAAO,EAAE,mBAAI;KACd;IACD,SAAS,EAAE,CAAC,KAAgB,EAAE,QAA8C,EAAE,EAAE;QAC9E,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,OAAO,CAAC,KAAgB,EAAE,EAAE,CAAC,CAC3B,gCAAC,KAAK,CAAC,KAAK,OAAK,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;YACvC,gCAAC,KAAK,CAAC,OAAO,gBAAsB,CACxB,CACf,CAAC;IACJ,CAAC;CACF,EACD,WAAW,CACZ,CAAC;AAEF,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;AAE/D,MAAM,UAAU,GAAG;IACjB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACzC,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,gCAAC,IAAI,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACnE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,gCAAC,UAAU,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACzE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6DAA6D;AAC7D,iCAA4B;AAE5B,+CAA0C;AAG1C,MAAY,QAAQ,gDAA4B;AAGhD,qDAAkD;AAYlD,MAAM,KAAK,GAAU;IACnB,MAAM,EAAE;QACN,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,OAAO;KACf;IACD,UAAU,EAAE,EAAE;CACf,CAAC;AAYF,MAAM,WAAW,GAAuB;IACtC,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK;IACrB,gBAAgB,EAAE,CAAC,KAAY,EAAE,IAAY,EAAE,EAAE,CAAC;QAChD,OAAO,KAAK,EAAE,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAAA,CACpD;CACF,CAAC;AAEF,SAAS,UAAU,CAAI,EAAK,EAAE,EAAK,EAAK;IACtC,OAAO,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC;AAAA,CACzB;AAED,MAAM,IAAI,GAAG,IAAA,+BAAc,EACzB;IACE,MAAM,EAAE;QACN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACN,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,eAAe;YACzC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;SACtB,CAAC;KACH;IACD,SAAS,EAAE;QACT,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC;QAC3E,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;KAC1D;IACD,KAAK,EAAE;QACL,KAAK,EAAE,mBAAI;QACX,OAAO,EAAE,mBAAI;KACd;IACD,SAAS,EAAE,CAAC,KAAgB,EAAE,QAA8C,EAAE,EAAE,CAAC;QAC/E,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,OAAO,CAAC,KAAgB,EAAE,EAAE,CAAC,CAC3B,kBAAC,KAAK,CAAC,KAAK,OAAK,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,YACvC,kBAAC,KAAK,CAAC,OAAO,wBAAsB,GACxB,CACf,CAAC;IAAA,CACH;CACF,EACD,WAAW,CACZ,CAAC;AAEF,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;AAE/D,MAAM,UAAU,GAAG;IACjB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE,CAAC;IAC1C,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE,CAAC;QAChC,IAAI,SAAqC,CAAC;QAC1C,IAAA,WAAG,EAAC,GAAG,EAAE,CAAC;YACR,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,kBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC;QAAA,CAC1D,CAAC,CAAC;QACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;IAAA,CAC/C,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE,CAAC;QACtC,IAAI,SAAqC,CAAC;QAC1C,IAAA,WAAG,EAAC,GAAG,EAAE,CAAC;YACR,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,kBAAC,UAAU,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC;QAAA,CAChE,CAAC,CAAC;QACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;IAAA,CAC/C,CAAC,CAAC;AAAA,CACJ,CAAC,CAAC"}

package/lib-commonjs/index.d.ts

@@ -1,3 +1,3 @@
 export { composeFactory } from './composeFactory';
 export type { ComposeFactoryComponent, ComposeFactoryOptions, UseStyledSlots } from './composeFactory';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.js

@@ -1,6 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.composeFactory = void 0;
-var composeFactory_1 = require("./composeFactory");
-Object.defineProperty(exports, "composeFactory", { enumerable: true, get: function () { return composeFactory_1.composeFactory; } });
-//# sourceMappingURL=index.js.map
+const composeFactory_1 = require('./composeFactory');
+Object.defineProperty(exports, 'composeFactory', {
+  enumerable: true,
+  get: function () {
+    return composeFactory_1.composeFactory;
+  },
+});
+//# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,mDAAkD;AAAzC,gHAAA,cAAc,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,qDAAkD;AAAzC,gHAAA,cAAc,OAAA"}

package/package.json

@@ -1,76 +1,77 @@
 {
   "name": "@fluentui-react-native/composition",
-  "version": "0.11.11",
+  "version": "0.12.0",
   "description": "Composition factories for building HOCs",
+  "keywords": [],
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui-react-native",
     "directory": "packages/framework/composition"
   },
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
-  "react-native": "src/index.ts",
+  "license": "MIT",
+  "author": "",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js",
-      "types": "./lib/index.d.ts"
+      "require": "./lib-commonjs/index.js"
     }
   },
-  "typings": "lib/index.d.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",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
-    "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
+    "lint-package": "fluentui-scripts lint-package",
+    "prettier": "fluentui-scripts prettier",
     "start": "fluentui-scripts dev",
     "start-test": "fluentui-scripts jest-watch",
     "test": "fluentui-scripts jest",
-    "update-snapshots": "fluentui-scripts jest -u",
-    "prettier": "fluentui-scripts prettier",
-    "prettier-fix": "fluentui-scripts prettier --fix true"
+    "update-snapshots": "fluentui-scripts jest -u"
   },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
   "dependencies": {
-    "@fluentui-react-native/framework-base": "0.2.0",
-    "@fluentui-react-native/use-slots": "0.10.11",
-    "@fluentui-react-native/use-styling": "0.13.11"
+    "@fluentui-react-native/framework-base": "0.3.0",
+    "@fluentui-react-native/use-slots": "0.11.0",
+    "@fluentui-react-native/use-styling": "0.14.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@fluentui-react-native/scripts": "0.1.1",
-    "@react-native/babel-preset": "^0.74.0",
-    "@react-native/metro-config": "^0.74.0",
-    "react": "18.2.0",
-    "react-native": "^0.74.0"
+    "@fluentui-react-native/babel-config": "0.1.1",
+    "@fluentui-react-native/eslint-config-rules": "0.1.1",
+    "@fluentui-react-native/jest-config": "0.1.1",
+    "@fluentui-react-native/kit-config": "0.1.2",
+    "@fluentui-react-native/scripts": "0.1.2",
+    "@react-native/babel-preset": "^0.81.0",
+    "@types/react": "~19.1.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "react": "19.1.0",
+    "react-native": "^0.81.0",
+    "react-test-renderer": "19.1.0"
   },
   "peerDependencies": {
-    "react": "18.2.0",
-    "react-native": "^0.73.0 || ^0.74.0"
+    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.0",
+    "react": "18.2.0 || 19.0.0 || 19.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
   },
   "rnx-kit": {
     "kitType": "library",
     "alignDeps": {
-      "presets": [
-        "microsoft/react-native"
-      ],
-      "requirements": {
-        "development": [
-          "react-native@0.74"
-        ],
-        "production": [
-          "react-native@0.73 || 0.74"
-        ]
-      },
       "capabilities": [
-        "babel-preset-react-native",
-        "core",
-        "core-android",
-        "core-ios"
+        "core-dev-only",
+        "react-test-renderer",
+        "tools-core",
+        "tools-jest"
       ]
-    }
+    },
+    "extends": "@fluentui-react-native/kit-config"
   }
-}
+}

package/src/__snapshots__/composeFactory.test.tsx.snap

@@ -24,7 +24,7 @@ exports[`composeFactory test suite Base component render 1`] = `
 </View>
 `;
 
-exports[`composeFactory test suite Base component render 2`] = `
+exports[`composeFactory test suite Customized component render 1`] = `
 <View
   style={
     {

package/src/composeFactory.test.tsx

@@ -1,9 +1,8 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import { act } from 'react';
 import type { ViewProps, TextProps, ColorValue } from 'react-native';
 import { View, Text } from 'react-native';
 
-import { withSlots } from '@fluentui-react-native/framework-base';
 import type { ThemeHelper } from '@fluentui-react-native/use-styling';
 import * as renderer from 'react-test-renderer';
 
@@ -88,12 +87,18 @@ const mixinStyle = {
 
 describe('composeFactory test suite', () => {
   it('Base component render', () => {
-    const tree = renderer.create(<Base style={mixinStyle} />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<Base style={mixinStyle} />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
-  it('Base component render', () => {
-    const tree = renderer.create(<Customized style={mixinStyle} />).toJSON();
-    expect(tree).toMatchSnapshot();
+  it('Customized component render', () => {
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<Customized style={mixinStyle} />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 });

package/src/composeFactory.ts

@@ -1,6 +1,6 @@
 import type { MergeOptions } from '@fluentui-react-native/framework-base';
 import { immutableMergeCore } from '@fluentui-react-native/framework-base';
-import type { ComposableFunction } from '@fluentui-react-native/framework-base';
+import type { ComposableFunction, FinalRender } from '@fluentui-react-native/framework-base';
 import { stagedComponent } from '@fluentui-react-native/framework-base';
 import type { UseSlotOptions, Slots } from '@fluentui-react-native/use-slots';
 import { buildUseSlots } from '@fluentui-react-native/use-slots';
@@ -25,7 +25,7 @@ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics
     /**
      * staged render function that takes props and a useSlots hook as an input
      */
-    useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => React.FunctionComponent<TProps>;
+    useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => FinalRender<TProps>;
 
     /**
      * optional statics to attach to the component
@@ -36,9 +36,9 @@ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics
 export type ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = ComposableFunction<TProps> & {
   __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
   customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
-  compose: (
-    options: Partial<ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>>,
-  ) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+  compose<TOverrideSlotProps = TSlotProps>(
+    options: Partial<ComposeFactoryOptions<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>>,
+  ): ComposeFactoryComponent<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>;
 } & TStatics;
 
 /**
@@ -79,9 +79,17 @@ export function composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics ext
       themeHelper,
     );
 
-  component.compose = (customOptions: Partial<LocalOptions>) =>
-    composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics>(
-      immutableMergeCore(mergeOptions, options, customOptions) as LocalOptions,
+  component.compose = <TOverrideSlotProps = TSlotProps>(
+    customOptions: Partial<ComposeFactoryOptions<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>>,
+  ) =>
+    composeFactory<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>(
+      immutableMergeCore(mergeOptions, options, customOptions as object) as unknown as ComposeFactoryOptions<
+        TProps,
+        TOverrideSlotProps,
+        TTokens,
+        TTheme,
+        TStatics
+      >,
       themeHelper,
     );