@fluentui-react-native/use-styling 0.13.12 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/CHANGELOG.json +1 -1
  2. package/CHANGELOG.md +39 -2
  3. package/README.md +1 -1
  4. package/lib/buildProps.d.ts +14 -6
  5. package/lib/buildProps.js +28 -24
  6. package/lib/buildProps.js.map +1 -1
  7. package/lib/buildProps.test.d.ts +1 -1
  8. package/lib/buildProps.test.js +28 -28
  9. package/lib/buildProps.test.js.map +1 -1
  10. package/lib/buildUseStyling.d.ts +30 -27
  11. package/lib/buildUseStyling.js +30 -31
  12. package/lib/buildUseStyling.js.map +1 -1
  13. package/lib/buildUseStyling.test.d.ts +1 -1
  14. package/lib/buildUseStyling.test.js +67 -64
  15. package/lib/buildUseStyling.test.js.map +1 -1
  16. package/lib/index.d.ts +1 -1
  17. package/lib/index.js +1 -1
  18. package/lib/useStyling.samples.test.d.ts +1 -1
  19. package/lib/useStyling.samples.test.js +171 -148
  20. package/lib/useStyling.samples.test.js.map +1 -1
  21. package/lib-commonjs/buildProps.d.ts +14 -6
  22. package/lib-commonjs/buildProps.js +32 -29
  23. package/lib-commonjs/buildProps.js.map +1 -1
  24. package/lib-commonjs/buildProps.test.d.ts +1 -1
  25. package/lib-commonjs/buildProps.test.js +32 -32
  26. package/lib-commonjs/buildProps.test.js.map +1 -1
  27. package/lib-commonjs/buildUseStyling.d.ts +30 -27
  28. package/lib-commonjs/buildUseStyling.js +35 -37
  29. package/lib-commonjs/buildUseStyling.js.map +1 -1
  30. package/lib-commonjs/buildUseStyling.test.d.ts +1 -1
  31. package/lib-commonjs/buildUseStyling.test.js +72 -69
  32. package/lib-commonjs/buildUseStyling.test.js.map +1 -1
  33. package/lib-commonjs/index.d.ts +1 -1
  34. package/lib-commonjs/index.js +30 -10
  35. package/lib-commonjs/index.js.map +1 -1
  36. package/lib-commonjs/useStyling.samples.test.d.ts +1 -1
  37. package/lib-commonjs/useStyling.samples.test.js +227 -177
  38. package/lib-commonjs/useStyling.samples.test.js.map +1 -1
  39. package/package.json +46 -46
  40. package/src/buildProps.ts +2 -2
  41. package/src/useStyling.samples.test.tsx +23 -14
package/CHANGELOG.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@fluentui-react-native/use-styling",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 05 Aug 2025 18:46:03 GMT",
5
+ "date": "Tue, 05 Aug 2025 18:50:39 GMT",
6
6
  "version": "0.13.12",
7
7
  "tag": "@fluentui-react-native/use-styling_v0.13.12",
8
8
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,49 @@
1
1
  # Change Log - @fluentui-react-native/use-styling
2
2
 
3
- <!-- This log was last generated on Tue, 05 Aug 2025 18:46:03 GMT and should not be manually modified. -->
3
+ ## 0.14.0
4
+
5
+ ### Minor Changes
6
+
7
+ - d7adbdd: # Migration from Beachball to Changesets
8
+
9
+ 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.
10
+
11
+ All 75 affected packages receive a minor version bump to acknowledge the accumulated changes from the beachball era.
12
+
13
+ ## What Changed
14
+
15
+ Going forward, all version management uses Changesets via `yarn changeset`. The following beachball infrastructure has been removed:
16
+
17
+ - ❌ 440+ beachball change files from `change/` directory
18
+ - ❌ `beachball` package dependency
19
+ - ❌ Beachball scripts from `package.json`
20
+ - ❌ `beachball.config.js` configuration file
21
+ - ❌ Beachball publish steps from Azure Pipelines
22
+
23
+ ## New Workflow
24
+
25
+ ✅ **Create changes**: Run `yarn changeset` to document changes
26
+ ✅ **Version bump PRs**: Automatically created by GitHub Actions
27
+ ✅ **Publishing**: Handled by Azure Pipelines using `changeset publish`
28
+ ✅ **Validation**: CI validates changesets and blocks major version bumps
29
+
30
+ For details, see `CHANGESETS_SETUP.md` and `CONTRIBUTING.md`.
31
+
32
+ ### Patch Changes
33
+
34
+ - 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.
35
+ - Updated dependencies [d7adbdd]
36
+ - Updated dependencies [d1d8c26]
37
+ - @fluentui-react-native/framework-base@0.3.0
38
+ - @fluentui-react-native/use-tokens@0.7.0
39
+
40
+ <!-- This log was last generated on Tue, 05 Aug 2025 18:50:39 GMT and should not be manually modified. -->
4
41
 
5
42
  <!-- Start content -->
6
43
 
7
44
  ## 0.13.12
8
45
 
9
- Tue, 05 Aug 2025 18:46:03 GMT
46
+ Tue, 05 Aug 2025 18:50:39 GMT
10
47
 
11
48
  ### Patches
12
49
 
package/README.md CHANGED
@@ -105,7 +105,7 @@ A token is simply a setting that informs the styling of the component. These can
105
105
  interface Tokens {
106
106
  backgroundColor?: ColorValue;
107
107
  borderWidth?: number;
108
- borderRadius?: number;
108
+ borderRadius?: AnimatableNumericValue | string;
109
109
  }
110
110
 
111
111
  /** Build the styling hook */
@@ -21,18 +21,20 @@ export type BuildPropsBase<TProps, TTokens, TTheme> = (tokens: TTokens, theme: T
21
21
  * A refine function allows style functions to be updated based on tokens that are also props. Only those tokens that are also
22
22
  * props need to be considered as a key for caching
23
23
  */
24
- export type RefineFunctionBase<TProps, TTokens, TTheme> = (mask?: TokensThatAreAlsoProps<TTokens>) => BuildPropsBase<TProps, TTokens, TTheme>;
24
+ export type RefineFunctionBase<TProps, TTokens, TTheme> = (
25
+ mask?: TokensThatAreAlsoProps<TTokens>,
26
+ ) => BuildPropsBase<TProps, TTokens, TTheme>;
25
27
  /**
26
28
  * Signature for a style function which can be optionally refined by the styling hook if prop masks are provided
27
29
  */
28
30
  export type RefinableBuildPropsBase<TProps, TTokens, TTheme> = BuildPropsBase<TProps, TTokens, TTheme> & {
29
- refine?: RefineFunctionBase<TProps, TTokens, TTheme>;
31
+ refine?: RefineFunctionBase<TProps, TTokens, TTheme>;
30
32
  };
31
33
  /**
32
34
  * Style functions can be plain functions, refinable functions, or just raw props
33
35
  */
34
36
  export type BuildSlotProps<TSlotProps, TTokens, TTheme> = {
35
- [K in keyof TSlotProps]?: RefinableBuildPropsBase<TSlotProps[K], TTokens, TTheme> | TSlotProps[K];
37
+ [K in keyof TSlotProps]?: RefinableBuildPropsBase<TSlotProps[K], TTokens, TTheme> | TSlotProps[K];
36
38
  };
37
39
  /**
38
40
  * Standard wrapper for a function that provides props for a component based on tokens and theme.
@@ -40,12 +42,18 @@ export type BuildSlotProps<TSlotProps, TTokens, TTheme> = {
40
42
  * @param fn - function which does the work of producing props for the tokens and theme provided
41
43
  * @param keys - which token properties are used by this style, this determines the keys to use for caching
42
44
  */
43
- export declare function buildProps<TProps, TTokens, TTheme>(fn: (tokens: TTokens, theme: TTheme) => TProps, keys?: (keyof TTokens)[]): RefinableBuildPropsBase<TProps, TTokens, TTheme>;
45
+ export declare function buildProps<TProps, TTokens, TTheme>(
46
+ fn: (tokens: TTokens, theme: TTheme) => TProps,
47
+ keys?: (keyof TTokens)[],
48
+ ): RefinableBuildPropsBase<TProps, TTokens, TTheme>;
44
49
  /**
45
50
  * Utility function to check the type and refinement capabilities of a styleFunction and refine it if appropriate
46
51
  *
47
52
  * @param fn - function or props to potentially refine
48
53
  * @param mask - prop mask to use for refinement
49
54
  */
50
- export declare function refinePropsFunctions<TSlotProps, TTokens, TTheme>(styles: BuildSlotProps<TSlotProps, TTokens, TTheme>, mask: TokensThatAreAlsoProps<TTokens>): BuildSlotProps<TSlotProps, TTokens, TTheme>;
51
- //# sourceMappingURL=buildProps.d.ts.map
55
+ export declare function refinePropsFunctions<TSlotProps, TTokens, TTheme>(
56
+ styles: BuildSlotProps<TSlotProps, TTokens, TTheme>,
57
+ mask: TokensThatAreAlsoProps<TTokens>,
58
+ ): BuildSlotProps<TSlotProps, TTokens, TTheme>;
59
+ //# sourceMappingURL=buildProps.d.ts.map
package/lib/buildProps.js CHANGED
@@ -1,12 +1,16 @@
1
1
  function cacheStyleClosure(fn, keys) {
2
- return (tokens, theme, cache) => cache(() => fn(tokens, theme), (keys || []).map((key) => tokens[key]))[0];
2
+ return (tokens, theme, cache) =>
3
+ cache(
4
+ () => fn(tokens, theme),
5
+ (keys || []).map((key) => tokens[key]),
6
+ )[0];
3
7
  }
4
8
  function refineKeys(keys, mask) {
5
- return typeof mask === 'object' && Array.isArray(mask)
6
- ? keys.filter((key) => mask.findIndex((val) => val === key) !== -1)
7
- : mask
8
- ? keys
9
- : [];
9
+ return typeof mask === 'object' && Array.isArray(mask)
10
+ ? keys.filter((key) => mask.findIndex((val) => val === key) !== -1)
11
+ : mask
12
+ ? keys
13
+ : [];
10
14
  }
11
15
  /**
12
16
  * Standard wrapper for a function that provides props for a component based on tokens and theme.
@@ -15,17 +19,17 @@ function refineKeys(keys, mask) {
15
19
  * @param keys - which token properties are used by this style, this determines the keys to use for caching
16
20
  */
17
21
  export function buildProps(fn, keys) {
18
- // wrap the provided function in the standard caching layer, basing it upon the provided keys
19
- const result = cacheStyleClosure(fn, keys);
20
- // if results are being cached on keys, provide the ability to refine the function if a prop mask is specified
21
- result.refine =
22
- keys && keys.length > 0
23
- ? (mask) => {
24
- return cacheStyleClosure(fn, refineKeys(keys, mask));
25
- }
26
- : undefined;
27
- // return the style function decorated with the refine function
28
- return result;
22
+ // wrap the provided function in the standard caching layer, basing it upon the provided keys
23
+ const result = cacheStyleClosure(fn, keys);
24
+ // if results are being cached on keys, provide the ability to refine the function if a prop mask is specified
25
+ result.refine =
26
+ keys && keys.length > 0
27
+ ? (mask) => {
28
+ return cacheStyleClosure(fn, refineKeys(keys, mask));
29
+ }
30
+ : undefined;
31
+ // return the style function decorated with the refine function
32
+ return result;
29
33
  }
30
34
  /**
31
35
  * Utility function to check the type and refinement capabilities of a styleFunction and refine it if appropriate
@@ -34,11 +38,11 @@ export function buildProps(fn, keys) {
34
38
  * @param mask - prop mask to use for refinement
35
39
  */
36
40
  export function refinePropsFunctions(styles, mask) {
37
- const result = {};
38
- Object.keys(styles).forEach((key) => {
39
- const refine = typeof styles[key] === 'function' && styles[key].refine;
40
- result[key] = refine ? refine(mask) : styles[key];
41
- });
42
- return result;
41
+ const result = {};
42
+ for (const key of Object.keys(styles)) {
43
+ const refine = typeof styles[key] === 'function' && styles[key].refine;
44
+ result[key] = refine ? refine(mask) : styles[key];
45
+ }
46
+ return result;
43
47
  }
44
- //# sourceMappingURL=buildProps.js.map
48
+ //# sourceMappingURL=buildProps.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"buildProps.js","sourceRoot":"","sources":["../src/buildProps.ts"],"names":[],"mappings":"AA4CA,SAAS,iBAAiB,CACxB,EAA8C,EAC9C,IAAwB;IAExB,OAAO,CAAC,MAAe,EAAE,KAAa,EAAE,KAAmB,EAAE,EAAE,CAC7D,KAAK,CACH,GAAG,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,EACvB,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CACvC,CAAC,CAAC,CAAC,CAAC;AACT,CAAC;AAED,SAAS,UAAU,CAAU,IAAuB,EAAE,IAAsC;IAC1F,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACpD,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;QACnE,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,EAAE,CAAC;AACT,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CACxB,EAA8C,EAC9C,IAAwB;IAExB,6FAA6F;IAC7F,MAAM,MAAM,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IAE3C,8GAA8G;IAC9G,MAAM,CAAC,MAAM;QACX,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YACrB,CAAC,CAAC,CAAC,IAAsC,EAAE,EAAE;gBACzC,OAAO,iBAAiB,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;YACvD,CAAC;YACH,CAAC,CAAC,SAAS,CAAC;IAEhB,+DAA+D;IAC/D,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAClC,MAAmD,EACnD,IAAqC;IAErC,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAClC,MAAM,MAAM,GACV,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,UAAU,IAAK,MAAM,CAAC,GAAG,CAA4E,CAAC,MAAM,CAAC;QACtI,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC"}
1
+ {"version":3,"file":"buildProps.js","sourceRoot":"","sources":["../src/buildProps.ts"],"names":[],"mappings":"AA4CA,SAAS,iBAAiB,CACxB,EAA8C,EAC9C,IAAwB,EAC0B;IAClD,OAAO,CAAC,MAAe,EAAE,KAAa,EAAE,KAAmB,EAAE,EAAE,CAC7D,KAAK,CACH,GAAG,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,EACvB,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CACvC,CAAC,CAAC,CAAC,CAAC;AAAA,CACR;AAED,SAAS,UAAU,CAAU,IAAuB,EAAE,IAAsC,EAAqB;IAC/G,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACpD,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;QACnE,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,EAAE,CAAC;AAAA,CACR;AAED;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CACxB,EAA8C,EAC9C,IAAwB,EAC0B;IAClD,6FAA6F;IAC7F,MAAM,MAAM,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IAE3C,8GAA8G;IAC9G,MAAM,CAAC,MAAM;QACX,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YACrB,CAAC,CAAC,CAAC,IAAsC,EAAE,EAAE,CAAC;gBAC1C,OAAO,iBAAiB,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;YAAA,CACtD;YACH,CAAC,CAAC,SAAS,CAAC;IAEhB,+DAA+D;IAC/D,OAAO,MAAM,CAAC;AAAA,CACf;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAClC,MAAmD,EACnD,IAAqC,EACQ;IAC7C,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QACtC,MAAM,MAAM,GACV,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,UAAU,IAAK,MAAM,CAAC,GAAG,CAA4E,CAAC,MAAM,CAAC;QACtI,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACpD,CAAC;IACD,OAAO,MAAM,CAAC;AAAA,CACf"}
@@ -1,2 +1,2 @@
1
1
  export {};
2
- //# sourceMappingURL=buildProps.test.d.ts.map
2
+ //# sourceMappingURL=buildProps.test.d.ts.map
@@ -3,34 +3,34 @@ import { buildProps } from './buildProps';
3
3
  const theme = { foo: 'foo', bar: 'bar' };
4
4
  let instanceCount = 0;
5
5
  function munge(tokens, theme) {
6
- return {
7
- ...theme,
8
- ...tokens,
9
- instance: instanceCount++,
10
- };
6
+ return {
7
+ ...theme,
8
+ ...tokens,
9
+ instance: instanceCount++,
10
+ };
11
11
  }
12
12
  describe('props function tests', () => {
13
- test('basic build props function caches as expected', () => {
14
- const cache = getMemoCache();
15
- const styleFn = buildProps(munge, ['a', 'b']);
16
- const p1 = styleFn({ a: 'a', b: 'b', c: 'c' }, theme, cache);
17
- expect(styleFn({ a: 'a', b: 'b', c: 'foo' }, theme, cache)).toBe(p1);
18
- const p2 = styleFn({ a: 'b', b: 'b' }, theme, cache);
19
- expect(p2).not.toBe(p1);
20
- expect(styleFn({ a: 'b', b: 'b', c: 'bar' }, theme, cache)).toBe(p2);
21
- });
22
- test('build props function refinement works with explicit keys', () => {
23
- const cache = getMemoCache();
24
- const styleFn = buildProps(munge, ['a', 'b', 'c', 'd']);
25
- const refinedFn = styleFn.refine(['a', 'b']);
26
- const t1 = { a: 'a', b: 'b', c: 'c', d: 'd' };
27
- const t2 = { a: 'a', b: 'b', c: 'foo', d: 'bar' };
28
- const p1 = styleFn(t1, theme, cache);
29
- const p2 = styleFn(t2, theme, cache);
30
- expect(p2).not.toBe(p1);
31
- const rp1 = refinedFn(t1, theme, cache);
32
- const rp2 = refinedFn(t2, theme, cache);
33
- expect(rp2).toBe(rp1);
34
- });
13
+ test('basic build props function caches as expected', () => {
14
+ const cache = getMemoCache();
15
+ const styleFn = buildProps(munge, ['a', 'b']);
16
+ const p1 = styleFn({ a: 'a', b: 'b', c: 'c' }, theme, cache);
17
+ expect(styleFn({ a: 'a', b: 'b', c: 'foo' }, theme, cache)).toBe(p1);
18
+ const p2 = styleFn({ a: 'b', b: 'b' }, theme, cache);
19
+ expect(p2).not.toBe(p1);
20
+ expect(styleFn({ a: 'b', b: 'b', c: 'bar' }, theme, cache)).toBe(p2);
21
+ });
22
+ test('build props function refinement works with explicit keys', () => {
23
+ const cache = getMemoCache();
24
+ const styleFn = buildProps(munge, ['a', 'b', 'c', 'd']);
25
+ const refinedFn = styleFn.refine(['a', 'b']);
26
+ const t1 = { a: 'a', b: 'b', c: 'c', d: 'd' };
27
+ const t2 = { a: 'a', b: 'b', c: 'foo', d: 'bar' };
28
+ const p1 = styleFn(t1, theme, cache);
29
+ const p2 = styleFn(t2, theme, cache);
30
+ expect(p2).not.toBe(p1);
31
+ const rp1 = refinedFn(t1, theme, cache);
32
+ const rp2 = refinedFn(t2, theme, cache);
33
+ expect(rp2).toBe(rp1);
34
+ });
35
35
  });
36
- //# sourceMappingURL=buildProps.test.js.map
36
+ //# sourceMappingURL=buildProps.test.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"buildProps.test.js","sourceRoot":"","sources":["../src/buildProps.test.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"buildProps.test.js","sourceRoot":"","sources":["../src/buildProps.test.ts"],"names":[],"mappings":"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"}
@@ -4,27 +4,27 @@ import type { TokensThatAreAlsoProps, BuildSlotProps } from './buildProps';
4
4
  * Options used to build up a useStyling hook
5
5
  */
6
6
  export type UseStylingOptions<TProps, TSlotProps, TTokens, TTheme> = {
7
- /**
8
- * Baseline tokens for this component
9
- */
10
- tokens?: TokenSettings<TTokens, TTheme>[];
11
- /**
12
- * States that might be applied for the component like disabled or hovered, these should be listed
13
- * in the order that they should be applied
14
- */
15
- states?: (keyof TTokens)[];
16
- /**
17
- * Functions which build up the props for each slot
18
- */
19
- slotProps?: BuildSlotProps<TSlotProps, TTokens, TTheme>;
20
- /**
21
- * Which props should be considered to be tokens.
22
- * - If an array of keys this will ensure these props are promoted to tokens
23
- * - If true all props will be added to tokens, if false or not specified no props will be treated as tokens
24
- */
25
- tokensThatAreAlsoProps?: TokensThatAreAlsoProps<TTokens>;
26
- /** purely used to make type inferencing work correctly so the hook builder can pick up TProps from this type */
27
- _propsType?: TProps;
7
+ /**
8
+ * Baseline tokens for this component
9
+ */
10
+ tokens?: TokenSettings<TTokens, TTheme>[];
11
+ /**
12
+ * States that might be applied for the component like disabled or hovered, these should be listed
13
+ * in the order that they should be applied
14
+ */
15
+ states?: (keyof TTokens)[];
16
+ /**
17
+ * Functions which build up the props for each slot
18
+ */
19
+ slotProps?: BuildSlotProps<TSlotProps, TTokens, TTheme>;
20
+ /**
21
+ * Which props should be considered to be tokens.
22
+ * - If an array of keys this will ensure these props are promoted to tokens
23
+ * - If true all props will be added to tokens, if false or not specified no props will be treated as tokens
24
+ */
25
+ tokensThatAreAlsoProps?: TokensThatAreAlsoProps<TTokens>;
26
+ /** purely used to make type inferencing work correctly so the hook builder can pick up TProps from this type */
27
+ _propsType?: TProps;
28
28
  };
29
29
  /**
30
30
  * Signature for the use styling hook
@@ -34,10 +34,10 @@ export type UseStyling<TProps, TSlotProps> = (props: TProps, lookup?: HasLayer)
34
34
  * Helper object which injects theme specific functionality
35
35
  */
36
36
  export type ThemeHelper<TTheme> = {
37
- /** query the theme from the context, or from a global if your system doesn't use theming */
38
- useTheme: () => TTheme;
39
- /** lookup info for the component in the theme */
40
- getComponentInfo: (theme: TTheme, name: string) => any;
37
+ /** query the theme from the context, or from a global if your system doesn't use theming */
38
+ useTheme: () => TTheme;
39
+ /** lookup info for the component in the theme */
40
+ getComponentInfo: (theme: TTheme, name: string) => any;
41
41
  };
42
42
  /**
43
43
  * Construct a useStyling hook which returns styled slot props based on props and tokens defined in options and in the theme
@@ -45,5 +45,8 @@ export type ThemeHelper<TTheme> = {
45
45
  * @param options - options which drive behavior for the generated styling hook
46
46
  * @param themeHelper - injected theme functionality
47
47
  */
48
- export declare function buildUseStyling<TProps, TSlotProps, TTokens, TTheme>(options: UseStylingOptions<TProps, TSlotProps, TTokens, TTheme>, themeHelper: ThemeHelper<TTheme>): UseStyling<TProps, TSlotProps>;
49
- //# sourceMappingURL=buildUseStyling.d.ts.map
48
+ export declare function buildUseStyling<TProps, TSlotProps, TTokens, TTheme>(
49
+ options: UseStylingOptions<TProps, TSlotProps, TTokens, TTheme>,
50
+ themeHelper: ThemeHelper<TTheme>,
51
+ ): UseStyling<TProps, TSlotProps>;
52
+ //# sourceMappingURL=buildUseStyling.d.ts.map
@@ -9,12 +9,12 @@ import { refinePropsFunctions } from './buildProps';
9
9
  * @param cache - cache to use for the base of slot caching
10
10
  */
11
11
  function resolveToSlotProps(styles, tokens, theme, cache) {
12
- const slotProps = {};
13
- Object.keys(styles).forEach((key) => {
14
- const style = styles[key];
15
- slotProps[key] = typeof style === 'function' ? style(tokens, theme, cache(null, [key])[1]) : style;
16
- });
17
- return slotProps;
12
+ const slotProps = {};
13
+ Object.keys(styles).forEach((key) => {
14
+ const style = styles[key];
15
+ slotProps[key] = typeof style === 'function' ? style(tokens, theme, cache(null, [key])[1]) : style;
16
+ });
17
+ return slotProps;
18
18
  }
19
19
  /**
20
20
  * Construct a useStyling hook which returns styled slot props based on props and tokens defined in options and in the theme
@@ -23,29 +23,28 @@ function resolveToSlotProps(styles, tokens, theme, cache) {
23
23
  * @param themeHelper - injected theme functionality
24
24
  */
25
25
  export function buildUseStyling(options, themeHelper) {
26
- // create a cache instance for this use styling implementation
27
- const { useTheme, getComponentInfo } = themeHelper;
28
- const { tokens, tokensThatAreAlsoProps: tokenProps } = options;
29
- const styles = refinePropsFunctions(options.slotProps || {}, tokenProps);
30
- const useTokens = buildUseTokens(getComponentInfo, ...tokens);
31
- return (props, lookup) => {
32
- // query the theme
33
- const theme = useTheme();
34
- // get the merged tokens from the theme
35
- let [mergedTokens, cache] = useTokens(theme);
36
- // resolve overrides as appropriate
37
- if (options.states) {
38
- [mergedTokens, cache] = applyTokenLayers(mergedTokens, options.states, cache, lookup || ((val) => props[val]));
39
- }
40
- // now resolve tokens
41
- if (typeof tokenProps === 'object' && Array.isArray(tokenProps)) {
42
- [mergedTokens, cache] = applyPropsToTokens(props, mergedTokens, cache, tokenProps);
43
- }
44
- else if (tokenProps === 'all') {
45
- mergedTokens = { ...mergedTokens, ...props };
46
- }
47
- // finally produce slotProps from calling the style functions on each entry
48
- return resolveToSlotProps(styles, mergedTokens, theme, cache);
49
- };
26
+ // create a cache instance for this use styling implementation
27
+ const { useTheme, getComponentInfo } = themeHelper;
28
+ const { tokens, tokensThatAreAlsoProps: tokenProps } = options;
29
+ const styles = refinePropsFunctions(options.slotProps || {}, tokenProps);
30
+ const useTokens = buildUseTokens(getComponentInfo, ...tokens);
31
+ return (props, lookup) => {
32
+ // query the theme
33
+ const theme = useTheme();
34
+ // get the merged tokens from the theme
35
+ let [mergedTokens, cache] = useTokens(theme);
36
+ // resolve overrides as appropriate
37
+ if (options.states) {
38
+ [mergedTokens, cache] = applyTokenLayers(mergedTokens, options.states, cache, lookup || ((val) => props[val]));
39
+ }
40
+ // now resolve tokens
41
+ if (typeof tokenProps === 'object' && Array.isArray(tokenProps)) {
42
+ [mergedTokens, cache] = applyPropsToTokens(props, mergedTokens, cache, tokenProps);
43
+ } else if (tokenProps === 'all') {
44
+ mergedTokens = { ...mergedTokens, ...props };
45
+ }
46
+ // finally produce slotProps from calling the style functions on each entry
47
+ return resolveToSlotProps(styles, mergedTokens, theme, cache);
48
+ };
50
49
  }
51
- //# sourceMappingURL=buildUseStyling.js.map
50
+ //# sourceMappingURL=buildUseStyling.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"buildUseStyling.js","sourceRoot":"","sources":["../src/buildUseStyling.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGzG,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAiDpD;;;;;;;GAOG;AACH,SAAS,kBAAkB,CACzB,MAAmD,EACnD,MAAe,EACf,KAAa,EACb,KAAiC;IAEjC,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC1B,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACrG,CAAC,CAAC,CAAC;IACH,OAAO,SAAuB,CAAC;AACjC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAC7B,OAA+D,EAC/D,WAAgC;IAEhC,8DAA8D;IAC9D,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,WAAW,CAAC;IACnD,MAAM,EAAE,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAC/D,MAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,CAAC,SAAS,IAAI,EAAE,EAAE,UAAU,CAAC,CAAC;IACzE,MAAM,SAAS,GAAG,cAAc,CAAkB,gBAAgB,EAAE,GAAG,MAAM,CAAC,CAAC;IAE/E,OAAO,CAAC,KAAa,EAAE,MAAiB,EAAE,EAAE;QAC1C,kBAAkB;QAClB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QAEzB,uCAAuC;QACvC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAE7C,mCAAmC;QACnC,IAAI,OAAO,CAAC,MAAM,EAAE;YAClB,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,gBAAgB,CAAC,YAAY,EAAE,OAAO,CAAC,MAAkB,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SAC5H;QAED,qBAAqB;QACrB,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC/D,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,kBAAkB,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;SACpF;aAAM,IAAI,UAAU,KAAK,KAAK,EAAE;YAC/B,YAAY,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,CAAC;SAC9C;QAED,2EAA2E;QAC3E,OAAO,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"buildUseStyling.js","sourceRoot":"","sources":["../src/buildUseStyling.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGzG,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAiDpD;;;;;;;GAOG;AACH,SAAS,kBAAkB,CACzB,MAAmD,EACnD,MAAe,EACf,KAAa,EACb,KAAiC,EACrB;IACZ,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC;QACnC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC1B,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAAA,CACpG,CAAC,CAAC;IACH,OAAO,SAAuB,CAAC;AAAA,CAChC;AAED;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAC7B,OAA+D,EAC/D,WAAgC,EACA;IAChC,8DAA8D;IAC9D,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,WAAW,CAAC;IACnD,MAAM,EAAE,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAC/D,MAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,CAAC,SAAS,IAAI,EAAE,EAAE,UAAU,CAAC,CAAC;IACzE,MAAM,SAAS,GAAG,cAAc,CAAkB,gBAAgB,EAAE,GAAG,MAAM,CAAC,CAAC;IAE/E,OAAO,CAAC,KAAa,EAAE,MAAiB,EAAE,EAAE,CAAC;QAC3C,kBAAkB;QAClB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QAEzB,uCAAuC;QACvC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAE7C,mCAAmC;QACnC,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YACnB,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,gBAAgB,CAAC,YAAY,EAAE,OAAO,CAAC,MAAkB,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAC7H,CAAC;QAED,qBAAqB;QACrB,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;YAChE,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,kBAAkB,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;QACrF,CAAC;aAAM,IAAI,UAAU,KAAK,KAAK,EAAE,CAAC;YAChC,YAAY,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,CAAC;QAC/C,CAAC;QAED,2EAA2E;QAC3E,OAAO,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAAA,CAC/D,CAAC;AAAA,CACH"}
@@ -1,2 +1,2 @@
1
1
  export {};
2
- //# sourceMappingURL=buildUseStyling.test.d.ts.map
2
+ //# sourceMappingURL=buildUseStyling.test.d.ts.map
@@ -3,85 +3,88 @@ import { buildProps } from './buildProps';
3
3
  import { buildUseStyling } from './buildUseStyling';
4
4
  let lastInstance = 0;
5
5
  const baseTokens = {
6
- a: 'a-base',
7
- b: 'b-base',
8
- c: 'c-base',
9
- hover: {
10
- c: 'c-base-hover',
11
- },
12
- press: {
13
- c: 'c-base-press',
14
- },
6
+ a: 'a-base',
7
+ b: 'b-base',
8
+ c: 'c-base',
9
+ hover: {
10
+ c: 'c-base-hover',
11
+ },
12
+ press: {
13
+ c: 'c-base-press',
14
+ },
15
15
  };
16
16
  const defaultTheme = {
17
- vals: {
18
- foo: 'foo',
19
- bar: 'bar',
17
+ vals: {
18
+ foo: 'foo',
19
+ bar: 'bar',
20
+ },
21
+ components: {
22
+ uno: {
23
+ a: 'uno-a',
24
+ c: 'uno-c',
20
25
  },
21
- components: {
22
- uno: {
23
- a: 'uno-a',
24
- c: 'uno-c',
25
- },
26
- dos: {
27
- b: 'dos-b',
28
- c: 'dos-c',
29
- },
26
+ dos: {
27
+ b: 'dos-b',
28
+ c: 'dos-c',
30
29
  },
30
+ },
31
31
  };
32
32
  const themeHelper = {
33
- useTheme: () => defaultTheme,
34
- getComponentInfo: (theme, name) => theme.components[name],
33
+ useTheme: () => defaultTheme,
34
+ getComponentInfo: (theme, name) => theme.components[name],
35
35
  };
36
36
  const slotFn1 = (tokens, theme) => {
37
- return {
38
- style: {
39
- a: tokens.a,
40
- b: tokens.b,
41
- c: tokens.c,
42
- ...theme.vals,
43
- instance: lastInstance++,
44
- },
45
- };
37
+ return {
38
+ style: {
39
+ a: tokens.a,
40
+ b: tokens.b,
41
+ c: tokens.c,
42
+ ...theme.vals,
43
+ instance: lastInstance++,
44
+ },
45
+ };
46
46
  };
47
47
  const extraCache = getMemoCache();
48
48
  const slotFn2 = (tokens) => {
49
- return extraCache(() => ({
50
- style: {
51
- a: tokens.a,
52
- b: tokens.b,
53
- instance: lastInstance++,
54
- },
55
- }), [tokens.a, tokens.b])[0];
49
+ return extraCache(
50
+ () => ({
51
+ style: {
52
+ a: tokens.a,
53
+ b: tokens.b,
54
+ instance: lastInstance++,
55
+ },
56
+ }),
57
+ [tokens.a, tokens.b],
58
+ )[0];
56
59
  };
57
60
  const baseOptions = {
58
- tokens: [
59
- baseTokens,
60
- 'uno',
61
- (theme) => ({
62
- b: theme.vals.foo,
63
- }),
64
- ],
65
- states: ['hover', 'press'],
66
- slotProps: {
67
- slot1: {
68
- style: {
69
- instance: lastInstance++,
70
- },
71
- },
72
- slot2: buildProps(slotFn1, ['a', 'b', 'c']),
73
- slot3: slotFn2,
61
+ tokens: [
62
+ baseTokens,
63
+ 'uno',
64
+ (theme) => ({
65
+ b: theme.vals.foo,
66
+ }),
67
+ ],
68
+ states: ['hover', 'press'],
69
+ slotProps: {
70
+ slot1: {
71
+ style: {
72
+ instance: lastInstance++,
73
+ },
74
74
  },
75
- tokensThatAreAlsoProps: ['b'],
75
+ slot2: buildProps(slotFn1, ['a', 'b', 'c']),
76
+ slot3: slotFn2,
77
+ },
78
+ tokensThatAreAlsoProps: ['b'],
76
79
  };
77
80
  describe('useStyling test suite', () => {
78
- test('basic built hook', () => {
79
- const useStyling = buildUseStyling(baseOptions, themeHelper);
80
- const slotProps = useStyling({});
81
- const slotProps2 = useStyling({ p1: 2, p2: 'bar' });
82
- Object.keys(slotProps).forEach((key) => {
83
- expect(slotProps[key]).toBe(slotProps2[key]);
84
- });
81
+ test('basic built hook', () => {
82
+ const useStyling = buildUseStyling(baseOptions, themeHelper);
83
+ const slotProps = useStyling({});
84
+ const slotProps2 = useStyling({ p1: 2, p2: 'bar' });
85
+ Object.keys(slotProps).forEach((key) => {
86
+ expect(slotProps[key]).toBe(slotProps2[key]);
85
87
  });
88
+ });
86
89
  });
87
- //# sourceMappingURL=buildUseStyling.test.js.map
90
+ //# sourceMappingURL=buildUseStyling.test.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"buildUseStyling.test.js","sourceRoot":"","sources":["../src/buildUseStyling.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAErE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,IAAI,YAAY,GAAG,CAAC,CAAC;AAUrB,MAAM,UAAU,GAAW;IACzB,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,QAAQ;IACX,KAAK,EAAE;QACL,CAAC,EAAE,cAAc;KAClB;IACD,KAAK,EAAE;QACL,CAAC,EAAE,cAAc;KAClB;CACF,CAAC;AAYF,MAAM,YAAY,GAAU;IAC1B,IAAI,EAAE;QACJ,GAAG,EAAE,KAAK;QACV,GAAG,EAAE,KAAK;KACX;IACD,UAAU,EAAE;QACV,GAAG,EAAE;YACH,CAAC,EAAE,OAAO;YACV,CAAC,EAAE,OAAO;SACX;QACD,GAAG,EAAE;YACH,CAAC,EAAE,OAAO;YACV,CAAC,EAAE,OAAO;SACX;KACF;CACF,CAAC;AAEF,MAAM,WAAW,GAAuB;IACtC,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY;IAC5B,gBAAgB,EAAE,CAAC,KAAY,EAAE,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;CACzE,CAAC;AAcF,MAAM,OAAO,GAAG,CAAC,MAAc,EAAE,KAAY,EAAE,EAAE;IAC/C,OAAO;QACL,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,GAAG,KAAK,CAAC,IAAI;YACb,QAAQ,EAAE,YAAY,EAAE;SACzB;KACO,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,YAAY,EAAE,CAAC;AAElC,MAAM,OAAO,GAAG,CAAC,MAAc,EAAE,EAAE;IACjC,OAAO,UAAU,CACf,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,QAAQ,EAAE,YAAY,EAAE;SACzB;KACF,CAAC,EACF,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CACrB,CAAC,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAQF,MAAM,WAAW,GAA2D;IAC1E,MAAM,EAAE;QACN,UAAU;QACV,KAAK;QACL,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC;YACjB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;KACH;IACD,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE;QACT,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY,EAAE;aACzB;SACF;QACD,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAC3C,KAAK,EAAE,OAAO;KACf;IACD,sBAAsB,EAAE,CAAC,GAAG,CAAC;CAC9B,CAAC;AAEF,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE;QAC5B,MAAM,UAAU,GAAG,eAAe,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAC7D,MAAM,SAAS,GAAG,UAAU,CAAC,EAAE,CAAC,CAAC;QACjC,MAAM,UAAU,GAAG,UAAU,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QACpD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACrC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
1
+ {"version":3,"file":"buildUseStyling.test.js","sourceRoot":"","sources":["../src/buildUseStyling.test.ts"],"names":[],"mappings":"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"}
package/lib/index.d.ts CHANGED
@@ -4,4 +4,4 @@ export { buildProps, refinePropsFunctions } from './buildProps';
4
4
  export type { BuildPropsBase, BuildSlotProps, RefinableBuildPropsBase, RefineFunctionBase, TokensThatAreAlsoProps } from './buildProps';
5
5
  export type { HasLayer, TokenSettings, TokensFromTheme } from '@fluentui-react-native/use-tokens';
6
6
  export { applyTokenLayers } from '@fluentui-react-native/use-tokens';
7
- //# sourceMappingURL=index.d.ts.map
7
+ //# sourceMappingURL=index.d.ts.map
package/lib/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export { buildUseStyling } from './buildUseStyling';
2
2
  export { buildProps, refinePropsFunctions } from './buildProps';
3
3
  export { applyTokenLayers } from '@fluentui-react-native/use-tokens';
4
- //# sourceMappingURL=index.js.map
4
+ //# sourceMappingURL=index.js.map
@@ -1,2 +1,2 @@
1
1
  export {};
2
- //# sourceMappingURL=useStyling.samples.test.d.ts.map
2
+ //# sourceMappingURL=useStyling.samples.test.d.ts.map