@fluentui-react-native/separator 0.13.9 → 0.14.0

package/CHANGELOG.json

@@ -2,7 +2,34 @@
   "name": "@fluentui-react-native/separator",
   "entries": [
     {
-      "date": "Thu, 15 Dec 2022 14:47:33 GMT",
+      "date": "Tue, 27 Dec 2022 10:15:40 GMT",
+      "tag": "@fluentui-react-native/separator_v0.14.0",
+      "version": "0.14.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "rohanpd.work@gmail.com",
+            "package": "@fluentui-react-native/separator",
+            "commit": "e34a93726a72d32cf3886a4027ddade9cab099ff",
+            "comment": "android seperator implem , tester app changes"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/separator",
+            "comment": "Bump @fluentui-react-native/framework to v0.8.27",
+            "commit": "19c7982576e025a7601af0fb727ae6850b8d4aea"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/separator",
+            "comment": "Bump @fluentui-react-native/theme-tokens to v0.22.3",
+            "commit": "19c7982576e025a7601af0fb727ae6850b8d4aea"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 15 Dec 2022 14:50:50 GMT",
       "tag": "@fluentui-react-native/separator_v0.13.9",
       "version": "0.13.9",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui-react-native/separator
 
-This log was last generated on Thu, 15 Dec 2022 14:47:33 GMT and should not be manually modified.
+This log was last generated on Tue, 27 Dec 2022 10:15:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.14.0
+
+Tue, 27 Dec 2022 10:15:40 GMT
+
+### Minor changes
+
+- android seperator implem , tester app changes (rohanpd.work@gmail.com)
+- Bump @fluentui-react-native/framework to v0.8.27
+- Bump @fluentui-react-native/theme-tokens to v0.22.3
+
 ## 0.13.9
 
-Thu, 15 Dec 2022 14:47:33 GMT
+Thu, 15 Dec 2022 14:50:50 GMT
 
 ### Patches
 

package/lib/Separator.d.ts

@@ -1,7 +1,4 @@
-import { SeparatorProps, SeparatorTokens } from './Separator.types';
-export declare const separatorName = "Separator";
-export declare const Separator: import("@fluentui-react-native/framework").ComposableComponent<SeparatorProps, {
-    root: import("react-native").ViewProps;
-}, SeparatorTokens, object>;
+import { SeparatorProps } from './Separator.types';
+export declare const Separator: import("@fluentui-react-native/framework").ComposableComponent<SeparatorProps, import("./Separator.types").SeperatorSlotProps, import("./Separator.types").SeparatorTokens, object>;
 export default Separator;
 //# sourceMappingURL=Separator.d.ts.map

package/lib/Separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAiB,MAAM,mBAAmB,CAAC;AAGnF,eAAO,MAAM,aAAa,cAAc,CAAC;AAGzC,eAAO,MAAM,SAAS;;2BAoBpB,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,cAAc,EAAiB,MAAM,mBAAmB,CAAC;AAMjF,eAAO,MAAM,SAAS,qLAQpB,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/Separator.js

@@ -11,23 +11,13 @@ var __assign = (this && this.__assign) || function () {
 };
 /** @jsx withSlots */
 import { View } from 'react-native';
-import { compose, buildProps, withSlots, mergeProps } from '@fluentui-react-native/framework';
-export var separatorName = 'Separator';
+import { separatorName } from './Separator.types';
+import { compose, withSlots, mergeProps } from '@fluentui-react-native/framework';
+import { stylingSettings } from './Separator.styling';
 var propMask = { vertical: undefined };
-export var Separator = compose({
-    displayName: separatorName,
-    tokens: [{ separatorWidth: 1 }, separatorName],
-    tokensThatAreAlsoProps: ['vertical'],
-    slotProps: {
-        root: buildProps(function (tokens) { return ({
-            style: __assign(__assign({}, (tokens.vertical ? { borderLeftWidth: tokens.separatorWidth } : { borderTopWidth: tokens.separatorWidth })), (tokens.color && { borderColor: tokens.color })),
-        }); }, ['color', 'vertical', 'separatorWidth']),
-    },
-    slots: { root: View },
-    useRender: function (props, useSlots) {
+export var Separator = compose(__assign(__assign({ displayName: separatorName }, stylingSettings), { slots: { root: View }, useRender: function (props, useSlots) {
         var Root = useSlots(props).root;
         return function (rest, children) { return withSlots(Root, __assign({}, mergeProps(props, rest, propMask)), children); };
-    },
-});
+    } }));
 export default Separator;
 //# sourceMappingURL=Separator.js.map

package/lib/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAY,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAExG,MAAM,CAAC,IAAM,aAAa,GAAG,WAAW,CAAC;AACzC,IAAM,QAAQ,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAEzC,MAAM,CAAC,IAAM,SAAS,GAAG,OAAO,CAAgB;IAC9C,WAAW,EAAE,aAAa;IAC1B,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC;IAC9C,sBAAsB,EAAE,CAAC,UAAU,CAAC;IACpC,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,UAAC,MAAuB,IAAK,OAAA,CAAC;YAC5B,KAAK,wBACA,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC,GAC1G,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CACnD;SACF,CAAC,EAL2B,CAK3B,EACF,CAAC,OAAO,EAAE,UAAU,EAAE,gBAAgB,CAAC,CACxC;KACF;IACD,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;IACrB,SAAS,EAAE,UAAC,KAAqB,EAAE,QAAiC;QAClE,IAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAClC,OAAO,UAAC,IAAoB,EAAE,QAAyB,IAAK,OAAA,UAAC,IAAI,eAAK,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,EAA9D,CAA8D,CAAC;IAC7H,CAAC;CACF,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,aAAa,EAAiC,MAAM,mBAAmB,CAAC;AACjF,OAAO,EAAE,OAAO,EAAY,SAAS,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,IAAM,QAAQ,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAEzC,MAAM,CAAC,IAAM,SAAS,GAAG,OAAO,qBAC9B,WAAW,EAAE,aAAa,IACvB,eAAe,KAClB,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EACrB,SAAS,EAAE,UAAC,KAAqB,EAAE,QAAiC;QAClE,IAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAClC,OAAO,UAAC,IAAoB,EAAE,QAAyB,IAAK,OAAA,UAAC,IAAI,eAAK,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,EAA9D,CAA8D,CAAC;IAC7H,CAAC,IACD,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/Separator.styling.d.ts

@@ -0,0 +1,4 @@
+import { SeparatorProps, SeparatorTokens, SeperatorSlotProps } from './Separator.types';
+import { UseStylingOptions } from '@fluentui-react-native/framework';
+export declare const stylingSettings: UseStylingOptions<SeparatorProps, SeperatorSlotProps, SeparatorTokens>;
+//# sourceMappingURL=Separator.styling.d.ts.map

package/lib/Separator.styling.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.styling.d.ts","sourceRoot":"","sources":["../src/Separator.styling.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAuB,eAAe,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5H,OAAO,EAAE,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAMjF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,cAAc,EAAE,kBAAkB,EAAE,eAAe,CAiBlG,CAAC"}

package/lib/Separator.styling.js

@@ -0,0 +1,29 @@
+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 { separatorName } from './Separator.types';
+import { buildProps } from '@fluentui-react-native/framework';
+import { defaultSeparatorTokens } from './SeparatorTokens';
+import { Platform } from 'react-native';
+var isMobile = Platform.OS === 'android' || Platform.OS === 'ios';
+var tokensThatAreAlsoProps = ['vertical', 'insetSpacing'];
+export var stylingSettings = {
+    tokens: [defaultSeparatorTokens, separatorName],
+    tokensThatAreAlsoProps: tokensThatAreAlsoProps,
+    slotProps: {
+        root: buildProps(function (tokens) {
+            return {
+                style: __assign(__assign(__assign({}, (tokens.vertical ? { borderLeftWidth: tokens.separatorWidth } : { borderTopWidth: tokens.separatorWidth })), (tokens.color && { borderColor: tokens.color })), (isMobile && { marginStart: tokens.insetSpacing })),
+            };
+        }, ['color', 'vertical', 'separatorWidth', 'insetSpacing']),
+    },
+};
+//# sourceMappingURL=Separator.styling.js.map

package/lib/Separator.styling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.styling.js","sourceRoot":"","sources":["../src/Separator.styling.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAA4E,MAAM,mBAAmB,CAAC;AAC5H,OAAO,EAAqB,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,IAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC;AACpE,IAAM,sBAAsB,GAAkC,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAC3F,MAAM,CAAC,IAAM,eAAe,GAA2E;IACrG,MAAM,EAAE,CAAC,sBAAsB,EAAE,aAAa,CAAC;IAC/C,sBAAsB,wBAAA;IACtB,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,UAAC,MAAuB;YACtB,OAAO;gBACL,KAAK,iCACA,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC,GAC1G,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,GAC/C,CAAC,QAAQ,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC,CACtD;aACF,CAAC;QACJ,CAAC,EACD,CAAC,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC,CACxD;KACF;CACF,CAAC"}

package/lib/Separator.types.d.ts

@@ -1,10 +1,22 @@
 import { ViewProps, ColorValue } from 'react-native';
-interface SeparatorPropTokens {
+export declare const separatorName = "Separator";
+export declare const SeparatorInsetSpacings: readonly [0, 16, 56, 68, 72, 108];
+export declare type SeparatorInsetSpacing = typeof SeparatorInsetSpacings[number];
+export interface SeparatorPropTokens {
     /**
      * Specifies whether the separator is vertical or horizontal. If true, then it's vertical.
      * @defaultValue 'false'
      */
     vertical?: boolean;
+    /**
+     * Inset Spacing in 'dp' (density-independent pixels) on Android and 'points' on iOS.
+     *
+     * Inset Spacing is restricted to a limited set of supported values recommended for most uses (see `SeparatorInsetSpacing`) and
+     * based on design guidelines for the Separator control.
+     * @platform Android iOS
+     * @defaultvalue 0
+     */
+    insetSpacing?: SeparatorInsetSpacing;
 }
 export interface SeparatorTokens extends SeparatorPropTokens {
     /**
@@ -19,12 +31,12 @@ export interface SeparatorTokens extends SeparatorPropTokens {
 }
 export interface SeparatorProps extends ViewProps, SeparatorPropTokens {
 }
+export interface SeperatorSlotProps {
+    root: ViewProps;
+}
 export interface SeparatorType {
     props: SeparatorProps;
-    slotProps: {
-        root: ViewProps;
-    };
+    slotProps: SeperatorSlotProps;
     tokens: SeparatorTokens;
 }
-export {};
 //# sourceMappingURL=Separator.types.d.ts.map

package/lib/Separator.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.types.d.ts","sourceRoot":"","sources":["../src/Separator.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,UAAU,mBAAmB;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,mBAAmB;CAOrE;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,cAAc,CAAC;IACtB,SAAS,EAAE;QACT,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF,MAAM,EAAE,eAAe,CAAC;CACzB"}
+{"version":3,"file":"Separator.types.d.ts","sourceRoot":"","sources":["../src/Separator.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,aAAa,cAAc,CAAC;AAEzC,eAAO,MAAM,sBAAsB,mCAAoC,CAAC;AAExE,oBAAY,qBAAqB,GAAG,OAAO,sBAAsB,CAAC,MAAM,CAAC,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,mBAAmB;CAOrE;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,cAAc,CAAC;IACtB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,MAAM,EAAE,eAAe,CAAC;CACzB"}

package/lib/Separator.types.js

@@ -1,2 +1,3 @@
-export {};
+export var separatorName = 'Separator';
+export var SeparatorInsetSpacings = [0, 16, 56, 68, 72, 108];
 //# sourceMappingURL=Separator.types.js.map

package/lib/Separator.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.types.js","sourceRoot":"","sources":["../src/Separator.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Separator.types.js","sourceRoot":"","sources":["../src/Separator.types.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,aAAa,GAAG,WAAW,CAAC;AAEzC,MAAM,CAAC,IAAM,sBAAsB,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAU,CAAC"}

package/lib/SeparatorTokens.android.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { SeparatorTokens } from './Separator.types';
+export declare const defaultSeparatorTokens: TokenSettings<SeparatorTokens, Theme>;
+//# sourceMappingURL=SeparatorTokens.android.d.ts.map

package/lib/SeparatorTokens.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTokens.android.d.ts","sourceRoot":"","sources":["../src/SeparatorTokens.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,eAAO,MAAM,sBAAsB,EAAE,aAAa,CAAC,eAAe,EAAE,KAAK,CAKlD,CAAC"}

package/lib/SeparatorTokens.android.js

@@ -0,0 +1,9 @@
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+export var defaultSeparatorTokens = function (t) {
+    return ({
+        color: t.colors.neutralStroke2,
+        separatorWidth: globalTokens.stroke.width10,
+        insetSpacing: 0,
+    });
+};
+//# sourceMappingURL=SeparatorTokens.android.js.map

package/lib/SeparatorTokens.android.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTokens.android.js","sourceRoot":"","sources":["../src/SeparatorTokens.android.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAInE,MAAM,CAAC,IAAM,sBAAsB,GAA0C,UAAC,CAAQ;IACpF,OAAA,CAAC;QACC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc;QAC9B,cAAc,EAAE,YAAY,CAAC,MAAM,CAAC,OAAO;QAC3C,YAAY,EAAE,CAAC;KACI,CAAA;AAJrB,CAIqB,CAAC"}

package/lib/SeparatorTokens.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { SeparatorTokens } from './Separator.types';
+export declare const defaultSeparatorTokens: TokenSettings<SeparatorTokens, Theme>;
+//# sourceMappingURL=SeparatorTokens.d.ts.map

package/lib/SeparatorTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTokens.d.ts","sourceRoot":"","sources":["../src/SeparatorTokens.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,eAAO,MAAM,sBAAsB,EAAE,aAAa,CAAC,eAAe,EAAE,KAAK,CAGlD,CAAC"}

package/lib/SeparatorTokens.js

@@ -0,0 +1,7 @@
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+export var defaultSeparatorTokens = function () {
+    return ({
+        separatorWidth: globalTokens.stroke.width10,
+    });
+};
+//# sourceMappingURL=SeparatorTokens.js.map

package/lib/SeparatorTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTokens.js","sourceRoot":"","sources":["../src/SeparatorTokens.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE,MAAM,CAAC,IAAM,sBAAsB,GAA0C;IAC3E,OAAA,CAAC;QACC,cAAc,EAAE,YAAY,CAAC,MAAM,CAAC,OAAO;KACxB,CAAA;AAFrB,CAEqB,CAAC"}

package/lib/index.d.ts

@@ -1,3 +1,3 @@
-export type { SeparatorProps, SeparatorTokens, SeparatorType } from './Separator.types';
-export { Separator, separatorName } from './Separator';
+export type { SeparatorProps, SeparatorTokens, SeparatorType, separatorName } from './Separator.types';
+export { Separator } from './Separator';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvG,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/lib/index.js

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

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/lib-commonjs/Separator.d.ts

@@ -1,7 +1,4 @@
-import { SeparatorProps, SeparatorTokens } from './Separator.types';
-export declare const separatorName = "Separator";
-export declare const Separator: import("@fluentui-react-native/framework").ComposableComponent<SeparatorProps, {
-    root: import("react-native").ViewProps;
-}, SeparatorTokens, object>;
+import { SeparatorProps } from './Separator.types';
+export declare const Separator: import("@fluentui-react-native/framework").ComposableComponent<SeparatorProps, import("./Separator.types").SeperatorSlotProps, import("./Separator.types").SeparatorTokens, object>;
 export default Separator;
 //# sourceMappingURL=Separator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAiB,MAAM,mBAAmB,CAAC;AAGnF,eAAO,MAAM,aAAa,cAAc,CAAC;AAGzC,eAAO,MAAM,SAAS;;2BAoBpB,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,cAAc,EAAiB,MAAM,mBAAmB,CAAC;AAMjF,eAAO,MAAM,SAAS,qLAQpB,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib-commonjs/Separator.js

@@ -11,26 +11,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Separator = exports.separatorName = void 0;
+exports.Separator = void 0;
 /** @jsx withSlots */
 var react_native_1 = require("react-native");
+var Separator_types_1 = require("./Separator.types");
 var framework_1 = require("@fluentui-react-native/framework");
-exports.separatorName = 'Separator';
+var Separator_styling_1 = require("./Separator.styling");
 var propMask = { vertical: undefined };
-exports.Separator = (0, framework_1.compose)({
-    displayName: exports.separatorName,
-    tokens: [{ separatorWidth: 1 }, exports.separatorName],
-    tokensThatAreAlsoProps: ['vertical'],
-    slotProps: {
-        root: (0, framework_1.buildProps)(function (tokens) { return ({
-            style: __assign(__assign({}, (tokens.vertical ? { borderLeftWidth: tokens.separatorWidth } : { borderTopWidth: tokens.separatorWidth })), (tokens.color && { borderColor: tokens.color })),
-        }); }, ['color', 'vertical', 'separatorWidth']),
-    },
-    slots: { root: react_native_1.View },
-    useRender: function (props, useSlots) {
+exports.Separator = (0, framework_1.compose)(__assign(__assign({ displayName: Separator_types_1.separatorName }, Separator_styling_1.stylingSettings), { slots: { root: react_native_1.View }, useRender: function (props, useSlots) {
         var Root = useSlots(props).root;
         return function (rest, children) { return (0, framework_1.withSlots)(Root, __assign({}, (0, framework_1.mergeProps)(props, rest, propMask)), children); };
-    },
-});
+    } }));
 exports.default = exports.Separator;
 //# sourceMappingURL=Separator.js.map

package/lib-commonjs/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,6CAAoC;AAEpC,8DAAwG;AAE3F,QAAA,aAAa,GAAG,WAAW,CAAC;AACzC,IAAM,QAAQ,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAE5B,QAAA,SAAS,GAAG,IAAA,mBAAO,EAAgB;IAC9C,WAAW,EAAE,qBAAa;IAC1B,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE,EAAE,qBAAa,CAAC;IAC9C,sBAAsB,EAAE,CAAC,UAAU,CAAC;IACpC,SAAS,EAAE;QACT,IAAI,EAAE,IAAA,sBAAU,EACd,UAAC,MAAuB,IAAK,OAAA,CAAC;YAC5B,KAAK,wBACA,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC,GAC1G,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CACnD;SACF,CAAC,EAL2B,CAK3B,EACF,CAAC,OAAO,EAAE,UAAU,EAAE,gBAAgB,CAAC,CACxC;KACF;IACD,KAAK,EAAE,EAAE,IAAI,EAAE,mBAAI,EAAE;IACrB,SAAS,EAAE,UAAC,KAAqB,EAAE,QAAiC;QAClE,IAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAClC,OAAO,UAAC,IAAoB,EAAE,QAAyB,IAAK,OAAA,2BAAC,IAAI,eAAK,IAAA,sBAAU,EAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,EAA9D,CAA8D,CAAC;IAC7H,CAAC;CACF,CAAC,CAAC;AAEH,kBAAe,iBAAS,CAAC"}
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,6CAAoC;AACpC,qDAAiF;AACjF,8DAA4F;AAC5F,yDAAsD;AAEtD,IAAM,QAAQ,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAE5B,QAAA,SAAS,GAAG,IAAA,mBAAO,sBAC9B,WAAW,EAAE,+BAAa,IACvB,mCAAe,KAClB,KAAK,EAAE,EAAE,IAAI,EAAE,mBAAI,EAAE,EACrB,SAAS,EAAE,UAAC,KAAqB,EAAE,QAAiC;QAClE,IAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAClC,OAAO,UAAC,IAAoB,EAAE,QAAyB,IAAK,OAAA,2BAAC,IAAI,eAAK,IAAA,sBAAU,EAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,EAA9D,CAA8D,CAAC;IAC7H,CAAC,IACD,CAAC;AAEH,kBAAe,iBAAS,CAAC"}

package/lib-commonjs/Separator.styling.d.ts

@@ -0,0 +1,4 @@
+import { SeparatorProps, SeparatorTokens, SeperatorSlotProps } from './Separator.types';
+import { UseStylingOptions } from '@fluentui-react-native/framework';
+export declare const stylingSettings: UseStylingOptions<SeparatorProps, SeperatorSlotProps, SeparatorTokens>;
+//# sourceMappingURL=Separator.styling.d.ts.map

package/lib-commonjs/Separator.styling.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.styling.d.ts","sourceRoot":"","sources":["../src/Separator.styling.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAuB,eAAe,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5H,OAAO,EAAE,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAMjF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,cAAc,EAAE,kBAAkB,EAAE,eAAe,CAiBlG,CAAC"}

package/lib-commonjs/Separator.styling.js

@@ -0,0 +1,32 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stylingSettings = void 0;
+var Separator_types_1 = require("./Separator.types");
+var framework_1 = require("@fluentui-react-native/framework");
+var SeparatorTokens_1 = require("./SeparatorTokens");
+var react_native_1 = require("react-native");
+var isMobile = react_native_1.Platform.OS === 'android' || react_native_1.Platform.OS === 'ios';
+var tokensThatAreAlsoProps = ['vertical', 'insetSpacing'];
+exports.stylingSettings = {
+    tokens: [SeparatorTokens_1.defaultSeparatorTokens, Separator_types_1.separatorName],
+    tokensThatAreAlsoProps: tokensThatAreAlsoProps,
+    slotProps: {
+        root: (0, framework_1.buildProps)(function (tokens) {
+            return {
+                style: __assign(__assign(__assign({}, (tokens.vertical ? { borderLeftWidth: tokens.separatorWidth } : { borderTopWidth: tokens.separatorWidth })), (tokens.color && { borderColor: tokens.color })), (isMobile && { marginStart: tokens.insetSpacing })),
+            };
+        }, ['color', 'vertical', 'separatorWidth', 'insetSpacing']),
+    },
+};
+//# sourceMappingURL=Separator.styling.js.map

package/lib-commonjs/Separator.styling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.styling.js","sourceRoot":"","sources":["../src/Separator.styling.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,qDAA4H;AAC5H,8DAAiF;AACjF,qDAA2D;AAC3D,6CAAwC;AAExC,IAAM,QAAQ,GAAG,uBAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,CAAC;AACpE,IAAM,sBAAsB,GAAkC,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAC9E,QAAA,eAAe,GAA2E;IACrG,MAAM,EAAE,CAAC,wCAAsB,EAAE,+BAAa,CAAC;IAC/C,sBAAsB,wBAAA;IACtB,SAAS,EAAE;QACT,IAAI,EAAE,IAAA,sBAAU,EACd,UAAC,MAAuB;YACtB,OAAO;gBACL,KAAK,iCACA,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC,GAC1G,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,GAC/C,CAAC,QAAQ,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC,CACtD;aACF,CAAC;QACJ,CAAC,EACD,CAAC,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC,CACxD;KACF;CACF,CAAC"}

package/lib-commonjs/Separator.types.d.ts

@@ -1,10 +1,22 @@
 import { ViewProps, ColorValue } from 'react-native';
-interface SeparatorPropTokens {
+export declare const separatorName = "Separator";
+export declare const SeparatorInsetSpacings: readonly [0, 16, 56, 68, 72, 108];
+export declare type SeparatorInsetSpacing = typeof SeparatorInsetSpacings[number];
+export interface SeparatorPropTokens {
     /**
      * Specifies whether the separator is vertical or horizontal. If true, then it's vertical.
      * @defaultValue 'false'
      */
     vertical?: boolean;
+    /**
+     * Inset Spacing in 'dp' (density-independent pixels) on Android and 'points' on iOS.
+     *
+     * Inset Spacing is restricted to a limited set of supported values recommended for most uses (see `SeparatorInsetSpacing`) and
+     * based on design guidelines for the Separator control.
+     * @platform Android iOS
+     * @defaultvalue 0
+     */
+    insetSpacing?: SeparatorInsetSpacing;
 }
 export interface SeparatorTokens extends SeparatorPropTokens {
     /**
@@ -19,12 +31,12 @@ export interface SeparatorTokens extends SeparatorPropTokens {
 }
 export interface SeparatorProps extends ViewProps, SeparatorPropTokens {
 }
+export interface SeperatorSlotProps {
+    root: ViewProps;
+}
 export interface SeparatorType {
     props: SeparatorProps;
-    slotProps: {
-        root: ViewProps;
-    };
+    slotProps: SeperatorSlotProps;
     tokens: SeparatorTokens;
 }
-export {};
 //# sourceMappingURL=Separator.types.d.ts.map

package/lib-commonjs/Separator.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.types.d.ts","sourceRoot":"","sources":["../src/Separator.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,UAAU,mBAAmB;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,mBAAmB;CAOrE;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,cAAc,CAAC;IACtB,SAAS,EAAE;QACT,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF,MAAM,EAAE,eAAe,CAAC;CACzB"}
+{"version":3,"file":"Separator.types.d.ts","sourceRoot":"","sources":["../src/Separator.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,aAAa,cAAc,CAAC;AAEzC,eAAO,MAAM,sBAAsB,mCAAoC,CAAC;AAExE,oBAAY,qBAAqB,GAAG,OAAO,sBAAsB,CAAC,MAAM,CAAC,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,mBAAmB;CAOrE;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,cAAc,CAAC;IACtB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,MAAM,EAAE,eAAe,CAAC;CACzB"}

package/lib-commonjs/Separator.types.js

@@ -1,3 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeparatorInsetSpacings = exports.separatorName = void 0;
+exports.separatorName = 'Separator';
+exports.SeparatorInsetSpacings = [0, 16, 56, 68, 72, 108];
 //# sourceMappingURL=Separator.types.js.map

package/lib-commonjs/Separator.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.types.js","sourceRoot":"","sources":["../src/Separator.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Separator.types.js","sourceRoot":"","sources":["../src/Separator.types.ts"],"names":[],"mappings":";;;AAEa,QAAA,aAAa,GAAG,WAAW,CAAC;AAE5B,QAAA,sBAAsB,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAU,CAAC"}

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

@@ -0,0 +1,5 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { SeparatorTokens } from './Separator.types';
+export declare const defaultSeparatorTokens: TokenSettings<SeparatorTokens, Theme>;
+//# sourceMappingURL=SeparatorTokens.android.d.ts.map

package/lib-commonjs/SeparatorTokens.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTokens.android.d.ts","sourceRoot":"","sources":["../src/SeparatorTokens.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,eAAO,MAAM,sBAAsB,EAAE,aAAa,CAAC,eAAe,EAAE,KAAK,CAKlD,CAAC"}

package/lib-commonjs/SeparatorTokens.android.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultSeparatorTokens = void 0;
+var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
+var defaultSeparatorTokens = function (t) {
+    return ({
+        color: t.colors.neutralStroke2,
+        separatorWidth: theme_tokens_1.globalTokens.stroke.width10,
+        insetSpacing: 0,
+    });
+};
+exports.defaultSeparatorTokens = defaultSeparatorTokens;
+//# sourceMappingURL=SeparatorTokens.android.js.map

package/lib-commonjs/SeparatorTokens.android.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTokens.android.js","sourceRoot":"","sources":["../src/SeparatorTokens.android.tsx"],"names":[],"mappings":";;;AACA,oEAAmE;AAI5D,IAAM,sBAAsB,GAA0C,UAAC,CAAQ;IACpF,OAAA,CAAC;QACC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc;QAC9B,cAAc,EAAE,2BAAY,CAAC,MAAM,CAAC,OAAO;QAC3C,YAAY,EAAE,CAAC;KACI,CAAA;AAJrB,CAIqB,CAAC;AALX,QAAA,sBAAsB,0BAKX"}

package/lib-commonjs/SeparatorTokens.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { SeparatorTokens } from './Separator.types';
+export declare const defaultSeparatorTokens: TokenSettings<SeparatorTokens, Theme>;
+//# sourceMappingURL=SeparatorTokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTokens.d.ts","sourceRoot":"","sources":["../src/SeparatorTokens.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,eAAO,MAAM,sBAAsB,EAAE,aAAa,CAAC,eAAe,EAAE,KAAK,CAGlD,CAAC"}

package/lib-commonjs/SeparatorTokens.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultSeparatorTokens = void 0;
+var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
+var defaultSeparatorTokens = function () {
+    return ({
+        separatorWidth: theme_tokens_1.globalTokens.stroke.width10,
+    });
+};
+exports.defaultSeparatorTokens = defaultSeparatorTokens;
+//# sourceMappingURL=SeparatorTokens.js.map

package/lib-commonjs/SeparatorTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTokens.js","sourceRoot":"","sources":["../src/SeparatorTokens.tsx"],"names":[],"mappings":";;;AAGA,oEAAmE;AAE5D,IAAM,sBAAsB,GAA0C;IAC3E,OAAA,CAAC;QACC,cAAc,EAAE,2BAAY,CAAC,MAAM,CAAC,OAAO;KACxB,CAAA;AAFrB,CAEqB,CAAC;AAHX,QAAA,sBAAsB,0BAGX"}

package/lib-commonjs/index.d.ts

@@ -1,3 +1,3 @@
-export type { SeparatorProps, SeparatorTokens, SeparatorType } from './Separator.types';
-export { Separator, separatorName } from './Separator';
+export type { SeparatorProps, SeparatorTokens, SeparatorType, separatorName } from './Separator.types';
+export { Separator } from './Separator';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvG,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/lib-commonjs/index.js

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

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AACA,yCAAuD;AAA9C,sGAAA,SAAS,OAAA;AAAE,0GAAA,aAAa,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AACA,yCAAwC;AAA/B,sGAAA,SAAS,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/separator",
-  "version": "0.13.9",
+  "version": "0.14.0",
   "description": "A cross-platform Separator component using the Fluent Design System",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,7 +22,9 @@
     "directory": "packages/components/Separator"
   },
   "dependencies": {
-    "@fluentui-react-native/framework": ">=0.8.26 <1.0.0"
+    "@fluentui-react-native/framework": ">=0.8.27 <1.0.0",
+    "@fluentui-react-native/theme-tokens": "^0.22.3",
+    "@fluentui-react-native/use-styling": "^0.9.1"
   },
   "devDependencies": {
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",

package/src/Separator.styling.tsx

@@ -0,0 +1,25 @@
+import { separatorName, SeparatorProps, SeparatorPropTokens, SeparatorTokens, SeperatorSlotProps } from './Separator.types';
+import { UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
+import { defaultSeparatorTokens } from './SeparatorTokens';
+import { Platform } from 'react-native';
+
+const isMobile = Platform.OS === 'android' || Platform.OS === 'ios';
+const tokensThatAreAlsoProps: (keyof SeparatorPropTokens)[] = ['vertical', 'insetSpacing'];
+export const stylingSettings: UseStylingOptions<SeparatorProps, SeperatorSlotProps, SeparatorTokens> = {
+  tokens: [defaultSeparatorTokens, separatorName],
+  tokensThatAreAlsoProps,
+  slotProps: {
+    root: buildProps(
+      (tokens: SeparatorTokens) => {
+        return {
+          style: {
+            ...(tokens.vertical ? { borderLeftWidth: tokens.separatorWidth } : { borderTopWidth: tokens.separatorWidth }),
+            ...(tokens.color && { borderColor: tokens.color }),
+            ...(isMobile && { marginStart: tokens.insetSpacing }),
+          },
+        };
+      },
+      ['color', 'vertical', 'separatorWidth', 'insetSpacing'],
+    ),
+  },
+};

package/src/Separator.tsx

@@ -1,26 +1,14 @@
 /** @jsx withSlots */
 import { View } from 'react-native';
-import { SeparatorProps, SeparatorTokens, SeparatorType } from './Separator.types';
-import { compose, UseSlots, buildProps, withSlots, mergeProps } from '@fluentui-react-native/framework';
+import { separatorName, SeparatorProps, SeparatorType } from './Separator.types';
+import { compose, UseSlots, withSlots, mergeProps } from '@fluentui-react-native/framework';
+import { stylingSettings } from './Separator.styling';
 
-export const separatorName = 'Separator';
 const propMask = { vertical: undefined };
 
 export const Separator = compose<SeparatorType>({
   displayName: separatorName,
-  tokens: [{ separatorWidth: 1 }, separatorName],
-  tokensThatAreAlsoProps: ['vertical'],
-  slotProps: {
-    root: buildProps(
-      (tokens: SeparatorTokens) => ({
-        style: {
-          ...(tokens.vertical ? { borderLeftWidth: tokens.separatorWidth } : { borderTopWidth: tokens.separatorWidth }),
-          ...(tokens.color && { borderColor: tokens.color }),
-        },
-      }),
-      ['color', 'vertical', 'separatorWidth'],
-    ),
-  },
+  ...stylingSettings,
   slots: { root: View },
   useRender: (props: SeparatorProps, useSlots: UseSlots<SeparatorType>) => {
     const Root = useSlots(props).root;

package/src/Separator.types.ts

@@ -1,11 +1,27 @@
 import { ViewProps, ColorValue } from 'react-native';
 
-interface SeparatorPropTokens {
+export const separatorName = 'Separator';
+
+export const SeparatorInsetSpacings = [0, 16, 56, 68, 72, 108] as const;
+
+export type SeparatorInsetSpacing = typeof SeparatorInsetSpacings[number];
+
+export interface SeparatorPropTokens {
   /**
    * Specifies whether the separator is vertical or horizontal. If true, then it's vertical.
    * @defaultValue 'false'
    */
   vertical?: boolean;
+
+  /**
+   * Inset Spacing in 'dp' (density-independent pixels) on Android and 'points' on iOS.
+   *
+   * Inset Spacing is restricted to a limited set of supported values recommended for most uses (see `SeparatorInsetSpacing`) and
+   * based on design guidelines for the Separator control.
+   * @platform Android iOS
+   * @defaultvalue 0
+   */
+  insetSpacing?: SeparatorInsetSpacing;
 }
 
 export interface SeparatorTokens extends SeparatorPropTokens {
@@ -30,10 +46,12 @@ export interface SeparatorProps extends ViewProps, SeparatorPropTokens {
   // alignContent?: 'start' | 'center' | 'end';
 }
 
+export interface SeperatorSlotProps {
+  root: ViewProps;
+}
+
 export interface SeparatorType {
   props: SeparatorProps;
-  slotProps: {
-    root: ViewProps;
-  };
+  slotProps: SeperatorSlotProps;
   tokens: SeparatorTokens;
 }

package/src/SeparatorTokens.android.tsx

@@ -0,0 +1,11 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { SeparatorTokens } from './Separator.types';
+
+export const defaultSeparatorTokens: TokenSettings<SeparatorTokens, Theme> = (t: Theme) =>
+  ({
+    color: t.colors.neutralStroke2,
+    separatorWidth: globalTokens.stroke.width10,
+    insetSpacing: 0,
+  } as SeparatorTokens);

package/src/SeparatorTokens.tsx

@@ -0,0 +1,9 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { SeparatorTokens } from './Separator.types';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+
+export const defaultSeparatorTokens: TokenSettings<SeparatorTokens, Theme> = () =>
+  ({
+    separatorWidth: globalTokens.stroke.width10,
+  } as SeparatorTokens);

package/src/index.ts

@@ -1,2 +1,2 @@
-export type { SeparatorProps, SeparatorTokens, SeparatorType } from './Separator.types';
-export { Separator, separatorName } from './Separator';
+export type { SeparatorProps, SeparatorTokens, SeparatorType, separatorName } from './Separator.types';
+export { Separator } from './Separator';