@fluentui-react-native/composition 0.12.0 → 0.12.3

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Change Log - @fluentui-react-native/composition
 
+## 0.12.3
+
+### Patch Changes
+
+- 9cf4444: Migrate from ESLint to oxlint
+- Updated dependencies [9cf4444]
+  - @fluentui-react-native/use-styling@0.14.3
+  - @fluentui-react-native/use-slots@0.11.3
+  - @fluentui-react-native/framework-base@0.3.3
+
+## 0.12.2
+
+### Patch Changes
+
+- 8a7b549: Update to the latest rnx-kit versions, fix some typing issues, and correct the vscode settings
+- Updated dependencies [8a7b549]
+  - @fluentui-react-native/use-styling@0.14.2
+  - @fluentui-react-native/use-slots@0.11.2
+  - @fluentui-react-native/framework-base@0.3.2
+
+## 0.12.1
+
+### Patch Changes
+
+- 0d6e9c1: chore: migrate to `oxfmt`
+- ac6e7af: Ensure packages have a default export that references the typescript entrypoint and clean up build dependency ordering
+- Updated dependencies [0d6e9c1]
+- Updated dependencies [ac6e7af]
+  - @fluentui-react-native/use-styling@0.14.1
+  - @fluentui-react-native/use-slots@0.11.1
+  - @fluentui-react-native/framework-base@0.3.1
+
 ## 0.12.0
 
 ### Minor Changes

package/lib/composeFactory.d.ts

@@ -2,13 +2,7 @@ import type { ComposableFunction, FinalRender } from '@fluentui-react-native/fra
 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:
      *
@@ -22,17 +16,11 @@ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics
      * 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<TOverrideSlotProps = TSlotProps>(
-    options: Partial<ComposeFactoryOptions<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>>,
-  ): ComposeFactoryComponent<TProps, TOverrideSlotProps, 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.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,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"}
+{"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,CAAC,CAAC,EAAE,CAAe,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,69 +1,66 @@
-import { jsx as _jsx } from '@fluentui-react-native/framework-base/jsx-runtime';
+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 * 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) => _jsx(Slots.outer, { ...mergeProps(props, extra), children: _jsx(Slots.content, { children: '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', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(Base, { style: mixinStyle }));
+    it('Base component render', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(Base, { style: mixinStyle }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
     });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Customized component render', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(Customized, { style: mixinStyle }));
+    it('Customized component render', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(Customized, { style: mixinStyle }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
     });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
 });
-//# sourceMappingURL=composeFactory.test.js.map
+//# sourceMappingURL=composeFactory.test.js.map

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

@@ -2,13 +2,7 @@ import type { ComposableFunction, FinalRender } from '@fluentui-react-native/fra
 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:
      *
@@ -22,17 +16,11 @@ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics
      * 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<TOverrideSlotProps = TSlotProps>(
-    options: Partial<ComposeFactoryOptions<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>>,
-  ): ComposeFactoryComponent<TProps, TOverrideSlotProps, 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.js

@@ -1,38 +1,36 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"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');
+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;
 }
-//# 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,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"}
+{"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,CAAC,CAAC,EAAE,CAAe,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,122 +1,101 @@
-'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;
+"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 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;
+        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');
+})();
+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 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) =>
-        jsx_runtime_1.jsx(Slots.outer, { ...mergeProps(props, extra), children: jsx_runtime_1.jsx(Slots.content, { children: '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', () => {
-    let component;
-    (0, react_1.act)(() => {
-      component = renderer.create(jsx_runtime_1.jsx(Base, { style: mixinStyle }));
+    it('Base component render', () => {
+        let component;
+        (0, react_1.act)(() => {
+            component = renderer.create(jsx_runtime_1.jsx(Base, { style: mixinStyle }));
+        });
+        expect(component.toJSON()).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 }));
+    it('Customized component render', () => {
+        let component;
+        (0, react_1.act)(() => {
+            component = renderer.create(jsx_runtime_1.jsx(Customized, { style: mixinStyle }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
     });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
 });
-//# sourceMappingURL=composeFactory.test.js.map
+//# sourceMappingURL=composeFactory.test.js.map

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,11 +1,6 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.composeFactory = void 0;
-const 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/package.json

@@ -1,61 +1,62 @@
 {
   "name": "@fluentui-react-native/composition",
-  "version": "0.12.0",
+  "version": "0.12.3",
   "description": "Composition factories for building HOCs",
   "keywords": [],
+  "license": "MIT",
+  "author": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui-react-native",
     "directory": "packages/framework/composition"
   },
-  "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",
     "start": "fluentui-scripts dev",
     "start-test": "fluentui-scripts jest-watch",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui-react-native/framework-base": "0.3.0",
-    "@fluentui-react-native/use-slots": "0.11.0",
-    "@fluentui-react-native/use-styling": "0.14.0"
+    "@fluentui-react-native/framework-base": "0.3.3",
+    "@fluentui-react-native/use-slots": "0.11.3",
+    "@fluentui-react-native/use-styling": "0.14.3"
   },
   "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/jest-config": "0.1.1",
+    "@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/babel-preset": "^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-test-renderer": "19.1.0"
+    "react": "19.1.4",
+    "react-native": "^0.81.6",
+    "react-test-renderer": "19.1.4"
   },
   "peerDependencies": {
-    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.0",
-    "react": "18.2.0 || 19.0.0 || 19.1.0"
+    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4",
+    "react": "18.2.0 || 19.0.0 || 19.1.4"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/src/composeFactory.ts

@@ -62,7 +62,7 @@ export function composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics ext
   options = baseOptions ? immutableMergeCore<LocalOptions>(mergeOptions, baseOptions, options) : { ...options };
 
   // build styling if styling options are specified
-  options.useStyling = options.slotProps || options.tokens ? buildUseStyling(options, themeHelper) : () => ({} as TSlotProps);
+  options.useStyling = options.slotProps || options.tokens ? buildUseStyling(options, themeHelper) : () => ({}) as TSlotProps;
 
   // build the slots hook, which will use the styling hook if it has been built
   const useSlots = buildUseSlots(options) as UseStyledSlots<TProps, TSlotProps>;

package/eslint.config.js

@@ -1,3 +0,0 @@
-const baseConfig = require('@fluentui-react-native/eslint-config-rules');
-
-module.exports = baseConfig;