@fluentui-react-native/use-tokens 0.1.6

package/CHANGELOG.json

@@ -0,0 +1,200 @@
+{
+  "name": "@fluentui-react-native/use-tokens",
+  "entries": [
+    {
+      "date": "Tue, 28 Sep 2021 21:06:18 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.6",
+      "version": "0.1.6",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Delete NativeButton",
+            "author": "67026167+chiuam@users.noreply.github.com",
+            "commit": "335503904094894a91e53c6de328bf13e13bcc1c",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 21 Sep 2021 19:08:16 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.5",
+      "version": "0.1.5",
+      "comments": {
+        "none": [
+          {
+            "comment": "Run prettier",
+            "author": "ruaraki@microsoft.com",
+            "commit": "e52c9b3d031599af4f43c261cb0a0327bc68a5ab",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 14 Sep 2021 19:31:04 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.5",
+      "version": "0.1.5",
+      "comments": {
+        "none": [
+          {
+            "comment": "Revert \"Bump Prettier and run it (#997)\"",
+            "author": "ruaraki@microsoft.com",
+            "commit": "c3eefc2cd6e8e23d64ca72460586f33120edc336",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 10 Sep 2021 21:30:12 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.5",
+      "version": "0.1.5",
+      "comments": {
+        "none": [
+          {
+            "comment": "Run the prettier",
+            "author": "ruaraki@microsoft.com",
+            "commit": "7ac71c6add6f05230c649dad60b5f7442f08cbb3",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sat, 07 Aug 2021 00:40:04 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.5",
+      "version": "0.1.5",
+      "comments": {
+        "none": [
+          {
+            "comment": "enable usePressableState with stock Pressable component",
+            "author": "jasonmo@microsoft.com",
+            "commit": "e506337e109ef24e675c2ac794179db86fcb7e86",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 06 Aug 2021 00:36:02 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.5",
+      "version": "0.1.5",
+      "comments": {
+        "none": [
+          {
+            "comment": "Remove api-extractor related files",
+            "author": "ruaraki@microsoft.com",
+            "commit": "56ccce452d0dbbd5c24f53ebdd467f2d01dda694",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 Aug 2021 16:54:20 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.5",
+      "version": "0.1.5",
+      "comments": {
+        "patch": [
+          {
+            "comment": "add patchTokens helper to make conversion easier",
+            "author": "jasonmo@microsoft.com",
+            "commit": "4136f64930de10457a984863998c4a553b0b0efc",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 Aug 2021 06:26:25 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.4",
+      "version": "0.1.4",
+      "comments": {
+        "patch": [
+          {
+            "comment": "add comment back",
+            "author": "67026167+chiuam@users.noreply.github.com",
+            "commit": "68dd61bd45ca8ffacc1580e468f3c01810e3093e",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 03 Aug 2021 22:33:17 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.3",
+      "version": "0.1.3",
+      "comments": {
+        "patch": [
+          {
+            "comment": "add patchTokens utility to use-tokens package",
+            "author": "jasonmo@microsoft.com",
+            "commit": "317097b2f51d04d33bfc2b14b2850a2774e0acbc",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 30 Jul 2021 06:26:34 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.2",
+      "version": "0.1.2",
+      "comments": {
+        "none": [
+          {
+            "comment": "Bumped Jest to 27.0.6",
+            "author": "4123478+tido64@users.noreply.github.com",
+            "commit": "925cf4eb5fe6bfadf20208b5b3d3a4454fc5c9fa",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 27 Jul 2021 22:17:20 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.2",
+      "version": "0.1.2",
+      "comments": {
+        "patch": [
+          {
+            "comment": "add compressible utility and a snapshot test / demo to framework",
+            "author": "jasonmo@microsoft.com",
+            "commit": "1cd8611e1e88848ab66f7c0e9113c946f968260c",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 27 Jul 2021 18:55:58 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.1",
+      "version": "0.1.1",
+      "comments": {
+        "none": [
+          {
+            "comment": "Bump @fluentui-react-native/immutable-merge to v1.1.2",
+            "author": "4123478+tido64@users.noreply.github.com",
+            "commit": "07d04d166b13ff79e07a8c4cbc2e06afb1e4c3e6",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 21 Jul 2021 22:55:40 GMT",
+      "tag": "@fluentui-react-native/use-tokens_v0.1.1",
+      "version": "0.1.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "expose use-tokens in framework package",
+            "author": "jasonmo@microsoft.com",
+            "commit": "af44164cf47abb856e567e9976043aafe414ade6",
+            "package": "@fluentui-react-native/use-tokens"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,53 @@
+# Change Log - @fluentui-react-native/use-tokens
+
+This log was last generated on Tue, 28 Sep 2021 21:06:18 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 0.1.6
+
+Tue, 28 Sep 2021 21:06:18 GMT
+
+### Patches
+
+- Delete NativeButton (67026167+chiuam@users.noreply.github.com)
+
+## 0.1.5
+
+Wed, 04 Aug 2021 16:54:20 GMT
+
+### Patches
+
+- add patchTokens helper to make conversion easier (jasonmo@microsoft.com)
+
+## 0.1.4
+
+Wed, 04 Aug 2021 06:26:25 GMT
+
+### Patches
+
+- add comment back (67026167+chiuam@users.noreply.github.com)
+
+## 0.1.3
+
+Tue, 03 Aug 2021 22:33:17 GMT
+
+### Patches
+
+- add patchTokens utility to use-tokens package (jasonmo@microsoft.com)
+
+## 0.1.2
+
+Tue, 27 Jul 2021 22:17:20 GMT
+
+### Patches
+
+- add compressible utility and a snapshot test / demo to framework (jasonmo@microsoft.com)
+
+## 0.1.1
+
+Wed, 21 Jul 2021 22:55:40 GMT
+
+### Patches
+
+- expose use-tokens in framework package (jasonmo@microsoft.com)

package/README.md

@@ -0,0 +1,85 @@
+# @fluentui-react-native/use-tokens
+
+This package provides the means to create a hook function to build a set of tokens from a passed in theme as well as a cache object unique to the pairing of the given hook function and theme. These resolved tokens should then be used to build the styles for your component. This way the look and feel of a component can be built up from constants, theme globals, and even component specific overrides.
+
+## Tokens
+
+A token is simply a setting that informs the styling of the component. These can be thought of as an additional set of component props that are automatically built-up by the framework. Typically these are set at component creation time or overriden by a theme but can can come from a variety of sources:
+
+- **Objects** - this is a set of values contained within an object. These values are assumed to be unchanging over the lifetime of the object.
+- **Theme Functions** - this allows values to be set in relation to values in a theme. An example would be a color being set to a particular entry in a color palette in the theme.
+- **Name Lookup** - this will query the theme for a token object or theme function for this component.
+
+## Examples
+
+At the core of this system is the idea that: **`Tokens + Theme ==> Styles`**. This can be thought of as:
+
+- Your styles are produced via a recipe, ideally memoized via the returned cache or by the use of a `useMemo` hook or its equivalent
+- The tokens are the ingredients for your recipe
+- Some of those tokens come from constants
+- Some of those tokens come from the theme
+
+The overall signature of the method is as follows:
+
+```ts
+export type StyledTextTokens = Pick<TextProps[style], 'color', 'fontFamily', 'fontWeight', 'fontSize'>;
+
+const useTokens = buildUseTokens<StyledTextTokens, Theme>(
+  /* function for looking up a component in a theme, allows this to be used independently of the shape of the theme */
+  getComponentInfoFromTheme,
+
+  /* Start of tokens, these are applied in order */
+  /* object, these are effectively constants to be used as defaults */
+  { token1: 'foo', token2: 400 },
+  /* theme function */
+  (theme: Theme) => ({ token3: theme.colors.backgroundColor }),
+  /* name to lookup */
+  'NameToLookup',
+);
+```
+
+This `useTokens` hook can then be used to build styles for the component as follows:
+
+```tsx
+const StyledText: React.FunctionComponent<TextProps> = (props) => {
+  // split the props
+  const { style, children, ...rest } = props;
+
+  // left out of the hook to allow theme to be obtained in whatever way is appropriate. Generally from a context.
+  const theme = useTheme();
+
+  // get a set of tokens from the theme
+  const [tokens, cache] = useTokens(theme);
+
+  // create a style object from the tokens using the cache. Note that if all the tokens are actually directly styles the tokens could be used
+  // directly. This is just to illustrate the pattern for a more complex component
+  const [tokenStyle] = cache(() => ({ ...tokens }), []);
+
+  // now merge any styles coming from the props in on top as they should override
+  const mergedStyles = mergeStyles(tokenStyle, style);
+
+  // now just render the text element
+  return (
+    <Text {...rest} style={mergedStyles}>
+      {children}
+    </Text>
+  );
+};
+```
+
+### Layering
+
+These tokens will be deeply merged in the order they appear in the array.
+
+```js
+const mergedTokens = merge(
+  ...options.tokens.map(entry => {
+    // string gets converted to object or function (or empty object)
+    if (typeof entry === 'string') {
+      entry = themeHelper.getComponentInfo(entry) || {};
+    }
+    // return either the function call (which will produce an object) or the object
+    return typeof entry === 'function' ? entry(theme) : entry;
+  });
+);
+```

package/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@uifabricshared/build-native/babel.config');

package/just.config.js

@@ -0,0 +1,3 @@
+const { preset } = require('@uifabricshared/build-native');
+
+preset();

package/lib/applyPropsToTokens.d.ts

@@ -0,0 +1,3 @@
+import { GetMemoValue } from '@fluentui-react-native/memo-cache';
+export declare function applyPropsToTokens<TProps, TTokens>(props: TProps, tokens: TTokens, cache: GetMemoValue<TTokens>, keys: (keyof TTokens)[]): [TTokens, GetMemoValue<TTokens>];
+//# sourceMappingURL=applyPropsToTokens.d.ts.map

package/lib/applyPropsToTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyPropsToTokens.d.ts","sourceRoot":"","sources":["../src/applyPropsToTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,OAAO,EAChD,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,EAC5B,IAAI,EAAE,CAAC,MAAM,OAAO,CAAC,EAAE,GACtB,CAAC,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,CAOlC"}

package/lib/applyPropsToTokens.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+export function applyPropsToTokens(props, tokens, cache, keys) {
+    var _loop_1 = function (key) {
+        var _a;
+        var sourceValue = props[key];
+        var setValue = sourceValue === tokens[key] ? undefined : sourceValue;
+        _a = cache(function () {
+            var _a;
+            return (setValue === undefined ? tokens : __assign(__assign({}, tokens), (_a = {}, _a[key] = setValue, _a)));
+        }, [setValue]), tokens = _a[0], cache = _a[1];
+    };
+    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+        var key = keys_1[_i];
+        _loop_1(key);
+    }
+    return [tokens, cache];
+}
+//# sourceMappingURL=applyPropsToTokens.js.map

package/lib/applyPropsToTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyPropsToTokens.js","sourceRoot":"","sources":["../src/applyPropsToTokens.ts"],"names":[],"mappings":";;;;;;;;;;;AAEA,MAAM,UAAU,kBAAkB,CAChC,KAAa,EACb,MAAe,EACf,KAA4B,EAC5B,IAAuB;4BAEZ,GAAG;;QACZ,IAAM,WAAW,GAAG,KAAK,CAAC,GAAa,CAAC,CAAC;QACzC,IAAM,QAAQ,GAAG,WAAW,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QACvE;;;sBAA6G,EAA5G,cAAM,EAAE,aAAK,CAAgG;;IAHhH,KAAkB,UAAI,EAAJ,aAAI,EAAJ,kBAAI,EAAJ,IAAI;QAAjB,IAAM,GAAG,aAAA;gBAAH,GAAG;KAIb;IACD,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzB,CAAC"}

package/lib/applyPropsToTokens.test.d.ts

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

package/lib/applyPropsToTokens.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyPropsToTokens.test.d.ts","sourceRoot":"","sources":["../src/applyPropsToTokens.test.ts"],"names":[],"mappings":""}

package/lib/applyPropsToTokens.test.js

@@ -0,0 +1,30 @@
+import { applyPropsToTokens } from './applyPropsToTokens';
+import { getMemoCache } from '@fluentui-react-native/memo-cache';
+var tokenProps = ['dos', 'quatro', 'cinco'];
+var themeTokens = {
+    uno: 'uno',
+    dos: 'dos',
+    tres: 3,
+    quatro: 4,
+    cinco: true,
+};
+var props1 = { dos: 'two', quatro: 'four', cinco: false, foo: 'foo', bar: 'bar' };
+// const props2: Props = { dos: 'two' };
+// const props3: Props = { foo: 'foo', bar: 'bar' };
+describe('applyPropsToTokens tests', function () {
+    test('props get copied', function () {
+        var cache = getMemoCache();
+        var tokens = applyPropsToTokens(props1, themeTokens, cache, tokenProps)[0];
+        expect(tokens).not.toBe(themeTokens);
+        for (var _i = 0, tokenProps_1 = tokenProps; _i < tokenProps_1.length; _i++) {
+            var key = tokenProps_1[_i];
+            expect(tokens[key]).toEqual(props1[key]);
+        }
+    });
+    test('no copied props does not change tokens', function () {
+        var cache = getMemoCache();
+        var tokens = applyPropsToTokens({}, themeTokens, cache, tokenProps)[0];
+        expect(tokens).toBe(themeTokens);
+    });
+});
+//# sourceMappingURL=applyPropsToTokens.test.js.map

package/lib/applyPropsToTokens.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyPropsToTokens.test.js","sourceRoot":"","sources":["../src/applyPropsToTokens.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAWjE,IAAM,UAAU,GAAyB,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAOpE,IAAM,WAAW,GAAW;IAC1B,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,IAAM,MAAM,GAAU,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AAC3F,wCAAwC;AACxC,oDAAoD;AAEpD,QAAQ,CAAC,0BAA0B,EAAE;IACnC,IAAI,CAAC,kBAAkB,EAAE;QACvB,IAAM,KAAK,GAAG,YAAY,EAAE,CAAC;QACtB,IAAA,sEAAM,CAA+D;QAC5E,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrC,KAAkB,UAAU,EAAV,yBAAU,EAAV,wBAAU,EAAV,IAAU,EAAE;YAAzB,IAAM,GAAG,mBAAA;YACZ,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;SAC1C;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,wCAAwC,EAAE;QAC7C,IAAM,KAAK,GAAG,YAAY,EAAE,CAAC;QACtB,IAAA,kEAAM,CAA2D;QACxE,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/applyTokenLayers.d.ts

@@ -0,0 +1,16 @@
+import { GetMemoValue } from '@fluentui-react-native/memo-cache';
+/**
+ * alternatively look them up with a passed in function
+ */
+export declare type HasLayer = (name: string) => boolean;
+/**
+ * Apply token layers, building them up applied layer by applied layer, using the cache to store intermediate
+ * values
+ *
+ * @param tokens - input tokens which may have layers to apply
+ * @param states - array of states to check for, ordered by precedence
+ * @param subCache - cache scoped to the root object with no layers applied
+ * @param hasLayer - a function which returns whether a given layer should be applied
+ */
+export declare function applyTokenLayers<TTokens>(tokens: TTokens, states: string[], subCache: GetMemoValue<TTokens>, hasLayer: HasLayer): [TTokens, GetMemoValue<TTokens>];
+//# sourceMappingURL=applyTokenLayers.d.ts.map

package/lib/applyTokenLayers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyTokenLayers.d.ts","sourceRoot":"","sources":["../src/applyTokenLayers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE;;GAEG;AACH,oBAAY,QAAQ,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;AAEjD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EACtC,MAAM,EAAE,OAAO,EACf,MAAM,EAAE,MAAM,EAAE,EAChB,QAAQ,EAAE,YAAY,CAAC,OAAO,CAAC,EAC/B,QAAQ,EAAE,QAAQ,GACjB,CAAC,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,CAiBlC"}

package/lib/applyTokenLayers.js

@@ -0,0 +1,25 @@
+import { immutableMerge } from '@fluentui-react-native/immutable-merge';
+/**
+ * Apply token layers, building them up applied layer by applied layer, using the cache to store intermediate
+ * values
+ *
+ * @param tokens - input tokens which may have layers to apply
+ * @param states - array of states to check for, ordered by precedence
+ * @param subCache - cache scoped to the root object with no layers applied
+ * @param hasLayer - a function which returns whether a given layer should be applied
+ */
+export function applyTokenLayers(tokens, states, subCache, hasLayer) {
+    var final = { tokens: tokens, subCache: subCache };
+    if (states && states.length > 0) {
+        // now walk the overrides that are set, merging in props, caching results, and getting a new sub cache
+        final = states
+            .filter(function (val) { return hasLayer(val); })
+            .reduce(function (previous, layerName) {
+            var layer = previous.tokens[layerName];
+            var _a = previous.subCache(function () { return (layer && typeof layer === 'object' ? immutableMerge(previous.tokens, layer) : previous.tokens); }, [layer]), tokens = _a[0], subCache = _a[1];
+            return { tokens: tokens, subCache: subCache };
+        }, final);
+    }
+    return [final.tokens, final.subCache];
+}
+//# sourceMappingURL=applyTokenLayers.js.map

package/lib/applyTokenLayers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyTokenLayers.js","sourceRoot":"","sources":["../src/applyTokenLayers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAOxE;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAC9B,MAAe,EACf,MAAgB,EAChB,QAA+B,EAC/B,QAAkB;IAGlB,IAAI,KAAK,GAAmB,EAAE,MAAM,QAAA,EAAE,QAAQ,UAAA,EAAE,CAAC;IACjD,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;QAC/B,sGAAsG;QACtG,KAAK,GAAG,MAAM;aACX,MAAM,CAAC,UAAC,GAAG,IAAK,OAAA,QAAQ,CAAC,GAAG,CAAC,EAAb,CAAa,CAAC;aAC9B,MAAM,CAAC,UAAC,QAAwB,EAAE,SAAiB;YAClD,IAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;YACnC,IAAA,wJAGL,EAHM,cAAM,EAAE,gBAGd,CAAC;YACF,OAAO,EAAE,MAAM,QAAA,EAAE,QAAQ,UAAA,EAAE,CAAC;QAC9B,CAAC,EAAE,KAAK,CAAC,CAAC;KACb;IACD,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;AACxC,CAAC"}

package/lib/applyTokenLayers.test.d.ts

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

package/lib/applyTokenLayers.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyTokenLayers.test.d.ts","sourceRoot":"","sources":["../src/applyTokenLayers.test.ts"],"names":[],"mappings":""}

package/lib/applyTokenLayers.test.js

@@ -0,0 +1,64 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { applyTokenLayers } from './applyTokenLayers';
+import { getMemoCache } from '@fluentui-react-native/memo-cache';
+var stateOrder = ['hover', 'press', 'disabled'];
+var tokens1 = {
+    a: 'a',
+    b: 'b',
+    c: 'c',
+    hover: {
+        a: 'a-hover',
+        b: 'b-hover',
+        press: {
+            a: 'a-hover-press',
+        },
+    },
+    press: {
+        a: 'a-press',
+        b: 'b-press',
+    },
+    disabled: {
+        a: 'disabled',
+        b: 'disabled',
+        c: 'disabled',
+    },
+};
+function stripLayers(tokens) {
+    var t = __assign({}, tokens);
+    delete t.hover;
+    delete t.press;
+    delete t.disabled;
+    return t;
+}
+describe('applyLayers tests', function () {
+    test('no layers returns tokens', function () {
+        var cache = getMemoCache();
+        var tokens = applyTokenLayers(tokens1, stateOrder, cache, function () { return false; })[0];
+        expect(tokens).toBe(tokens1);
+    });
+    test('apply hover works', function () {
+        var cache = getMemoCache();
+        var lookup = function (layer) { return layer === 'hover'; };
+        var result1 = applyTokenLayers(tokens1, stateOrder, cache, lookup)[0];
+        expect(applyTokenLayers(tokens1, stateOrder, cache, lookup)[0]).toBe(result1);
+        expect(stripLayers(result1)).toEqual({ a: 'a-hover', b: 'b-hover', c: 'c' });
+    });
+    test('apply hover and press layer correctly', function () {
+        var cache = getMemoCache();
+        var lookup = function (layer) { return layer === 'hover' || layer === 'press'; };
+        var result1 = applyTokenLayers(tokens1, stateOrder, cache, lookup)[0];
+        expect(applyTokenLayers(tokens1, stateOrder, cache, lookup)[0]).toBe(result1);
+        expect(stripLayers(result1)).toEqual({ a: 'a-hover-press', b: 'b-press', c: 'c' });
+    });
+});
+//# sourceMappingURL=applyTokenLayers.test.js.map

package/lib/applyTokenLayers.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyTokenLayers.test.js","sourceRoot":"","sources":["../src/applyTokenLayers.test.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAWjE,IAAM,UAAU,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;AAElD,IAAM,OAAO,GAAW;IACtB,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,KAAK,EAAE;QACL,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;QACZ,KAAK,EAAE;YACL,CAAC,EAAE,eAAe;SACnB;KACF;IACD,KAAK,EAAE;QACL,CAAC,EAAE,SAAS;QACZ,CAAC,EAAE,SAAS;KACb;IACD,QAAQ,EAAE;QACR,CAAC,EAAE,UAAU;QACb,CAAC,EAAE,UAAU;QACb,CAAC,EAAE,UAAU;KACd;CACF,CAAC;AAEF,SAAS,WAAW,CAAC,MAAc;IACjC,IAAM,CAAC,gBAAQ,MAAM,CAAE,CAAC;IACxB,OAAO,CAAC,CAAC,KAAK,CAAC;IACf,OAAO,CAAC,CAAC,KAAK,CAAC;IACf,OAAO,CAAC,CAAC,QAAQ,CAAC;IAClB,OAAO,CAAC,CAAC;AACX,CAAC;AAED,QAAQ,CAAC,mBAAmB,EAAE;IAC5B,IAAI,CAAC,0BAA0B,EAAE;QAC/B,IAAM,KAAK,GAAG,YAAY,EAAE,CAAC;QAC7B,IAAM,MAAM,GAAG,gBAAgB,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5E,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,mBAAmB,EAAE;QACxB,IAAM,KAAK,GAAG,YAAY,EAAE,CAAC;QAC7B,IAAM,MAAM,GAAG,UAAC,KAAK,IAAK,OAAA,KAAK,KAAK,OAAO,EAAjB,CAAiB,CAAC;QAC5C,IAAM,OAAO,GAAG,gBAAgB,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACxE,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9E,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAC/E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uCAAuC,EAAE;QAC5C,IAAM,KAAK,GAAG,YAAY,EAAE,CAAC;QAC7B,IAAM,MAAM,GAAG,UAAC,KAAK,IAAK,OAAA,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,OAAO,EAAtC,CAAsC,CAAC;QACjE,IAAM,OAAO,GAAG,gBAAgB,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACxE,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9E,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IACrF,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/buildUseTokens.d.ts

@@ -0,0 +1,35 @@
+import { GetMemoValue } from '@fluentui-react-native/memo-cache';
+/** A function to generate tokens based on a theme */
+export declare type TokensFromTheme<TTokens, TTheme> = (theme: TTheme) => TTokens;
+/**
+ * Types of tokens, can be:
+ * - string - will lookup the name in the theme
+ * - Tokens - will merge the tokens in directly
+ * - Function - will run against the theme once for each unique theme encountered
+ */
+export declare type TokenSettings<TTokens, TTheme> = string | TTokens | TokensFromTheme<TTokens, TTheme>;
+/**
+ * The main signature of a useTokens hook is to take the theme and produce a set of resolved tokens,
+ * as well as a sub-cache, specific to this particular theme, that can be used for caching various styles
+ * or values that are theme specific
+ */
+export declare type UseTokensCore<TTokens, TTheme> = (theme: TTheme) => [TTokens, GetMemoValue<TTokens>];
+/**
+ * The full signature also includes a customize function that returns an updated version of useTokens
+ * that captures both the previous values, and layers in the new values specified
+ */
+export declare type UseTokens<TTokens, TTheme> = UseTokensCore<TTokens, TTheme> & {
+    customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => UseTokens<TTokens, TTheme>;
+};
+/**
+ * Helper function that knows how to try to look up token information from the theme
+ */
+export declare type GetComponentInfo<TTokens, TTheme> = (theme: TTheme, name: string) => TTokens | TokensFromTheme<TTokens, TTheme>;
+/**
+ * Construct a useStyling hook which returns styled slot props based on props and tokens defined in options and in the theme
+ *
+ * @param options - options which drive behavior for the generated styling hook
+ * @param themeHelper - injected theme functionality
+ */
+export declare function buildUseTokens<TTokens, TTheme>(getComponentInfo: GetComponentInfo<TTokens, TTheme> | undefined, ...tokens: TokenSettings<TTokens, TTheme>[]): UseTokens<TTokens, TTheme>;
+//# sourceMappingURL=buildUseTokens.d.ts.map

package/lib/buildUseTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildUseTokens.d.ts","sourceRoot":"","sources":["../src/buildUseTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAG/E,qDAAqD;AACrD,oBAAY,eAAe,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;AAE1E;;;;;GAKG;AACH,oBAAY,aAAa,CAAC,OAAO,EAAE,MAAM,IAAI,MAAM,GAAG,OAAO,GAAG,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAEjG;;;;GAIG;AACH,oBAAY,aAAa,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;AAEjG;;;GAGG;AACH,oBAAY,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG;IACxE,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,KAAK,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;CACxF,CAAC;AAEF;;GAEG;AACH,oBAAY,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,GAAG,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AA6B5H;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAC5C,gBAAgB,EAAE,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,SAAS,EAC/D,GAAG,MAAM,EAAE,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,GAC1C,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,CAkB5B"}