first commit

node_modules/@fluentui/react/lib-commonjs/components/Slider/Slider.base.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { ISliderProps } from './Slider.types';
+export declare const SliderBase: React.FunctionComponent<ISliderProps>;

node_modules/@fluentui/react/lib-commonjs/components/Slider/Slider.base.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderBase = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var react_hooks_1 = require("@fluentui/react-hooks");
+var utilities_1 = require("@fluentui/utilities");
+var Label_1 = require("../Label/Label");
+var useSlider_1 = require("./useSlider");
+var COMPONENT_NAME = 'SliderBase';
+exports.SliderBase = React.forwardRef(function (props, ref) {
+    var slotProps = (0, useSlider_1.useSlider)(props, ref);
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional
+        (0, react_hooks_1.useWarnings)({
+            name: COMPONENT_NAME,
+            props: props,
+            mutuallyExclusive: { value: 'defaultValue' },
+        });
+    }
+    return (React.createElement("div", tslib_1.__assign({}, slotProps.root),
+        slotProps && React.createElement(Label_1.Label, tslib_1.__assign({}, slotProps.label)),
+        React.createElement("div", tslib_1.__assign({}, slotProps.container),
+            props.ranged &&
+                (props.vertical
+                    ? slotProps.valueLabel && React.createElement(Label_1.Label, tslib_1.__assign({}, slotProps.valueLabel))
+                    : slotProps.lowerValueLabel && React.createElement(Label_1.Label, tslib_1.__assign({}, slotProps.lowerValueLabel))),
+            React.createElement("div", tslib_1.__assign({}, slotProps.sliderBox),
+                React.createElement("div", tslib_1.__assign({}, slotProps.sliderLine),
+                    props.ranged && React.createElement("span", tslib_1.__assign({}, slotProps.lowerValueThumb)),
+                    React.createElement("span", tslib_1.__assign({}, slotProps.thumb)),
+                    slotProps.zeroTick && React.createElement("span", tslib_1.__assign({}, slotProps.zeroTick)),
+                    React.createElement("span", tslib_1.__assign({}, slotProps.bottomInactiveTrack)),
+                    React.createElement("span", tslib_1.__assign({}, slotProps.activeTrack)),
+                    React.createElement("span", tslib_1.__assign({}, slotProps.topInactiveTrack)))),
+            props.ranged && props.vertical
+                ? slotProps.lowerValueLabel && React.createElement(Label_1.Label, tslib_1.__assign({}, slotProps.lowerValueLabel))
+                : slotProps.valueLabel && React.createElement(Label_1.Label, tslib_1.__assign({}, slotProps.valueLabel))),
+        React.createElement(utilities_1.FocusRects, null)));
+});
+exports.SliderBase.displayName = COMPONENT_NAME;
+//# sourceMappingURL=Slider.base.js.map

node_modules/@fluentui/react/lib-commonjs/components/Slider/Slider.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.base.js","sourceRoot":"../src/","sources":["components/Slider/Slider.base.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,qDAAoD;AACpD,iDAAiD;AACjD,wCAAuC;AACvC,yCAAwC;AAGxC,IAAM,cAAc,GAAG,YAAY,CAAC;AAEvB,QAAA,UAAU,GAA0C,KAAK,CAAC,UAAU,CAC/E,UAAC,KAAK,EAAE,GAAG;IACT,IAAM,SAAS,GAAG,IAAA,qBAAS,EAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAExC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QAC1C,gFAAgF;QAChF,IAAA,yBAAW,EAAC;YACV,IAAI,EAAE,cAAc;YACpB,KAAK,OAAA;YACL,iBAAiB,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE;SAC7C,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CACL,gDAAS,SAAS,CAAC,IAAI;QACpB,SAAS,IAAI,oBAAC,aAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;QAC5C,gDAAS,SAAS,CAAC,SAAS;YACzB,KAAK,CAAC,MAAM;gBACX,CAAC,KAAK,CAAC,QAAQ;oBACb,CAAC,CAAC,SAAS,CAAC,UAAU,IAAI,oBAAC,aAAK,uBAAK,SAAS,CAAC,UAAU,EAAI;oBAC7D,CAAC,CAAC,SAAS,CAAC,eAAe,IAAI,oBAAC,aAAK,uBAAK,SAAS,CAAC,eAAe,EAAI,CAAC;YAC5E,gDAAS,SAAS,CAAC,SAAS;gBAC1B,gDAAS,SAAS,CAAC,UAAU;oBAC1B,KAAK,CAAC,MAAM,IAAI,iDAAU,SAAS,CAAC,eAAe,EAAI;oBACxD,iDAAU,SAAS,CAAC,KAAK,EAAI;oBAC5B,SAAS,CAAC,QAAQ,IAAI,iDAAU,SAAS,CAAC,QAAQ,EAAI;oBACvD,iDAAU,SAAS,CAAC,mBAAmB,EAAI;oBAC3C,iDAAU,SAAS,CAAC,WAAW,EAAI;oBACnC,iDAAU,SAAS,CAAC,gBAAgB,EAAI,CACpC,CACF;YACL,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,QAAQ;gBAC7B,CAAC,CAAC,SAAS,CAAC,eAAe,IAAI,oBAAC,aAAK,uBAAK,SAAS,CAAC,eAAe,EAAI;gBACvE,CAAC,CAAC,SAAS,CAAC,UAAU,IAAI,oBAAC,aAAK,uBAAK,SAAS,CAAC,UAAU,EAAI,CAC3D;QACN,oBAAC,sBAAU,OAAG,CACV,CACmB,CAAC;AAC9B,CAAC,CACF,CAAC;AACF,kBAAU,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import * as React from 'react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport { FocusRects } from '@fluentui/utilities';\nimport { Label } from '../Label/Label';\nimport { useSlider } from './useSlider';\nimport type { ISliderProps } from './Slider.types';\n\nconst COMPONENT_NAME = 'SliderBase';\n\nexport const SliderBase: React.FunctionComponent<ISliderProps> = React.forwardRef<HTMLDivElement, ISliderProps>(\n  (props, ref) => {\n    const slotProps = useSlider(props, ref);\n\n    if (process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n      useWarnings({\n        name: COMPONENT_NAME,\n        props,\n        mutuallyExclusive: { value: 'defaultValue' },\n      });\n    }\n\n    return (\n      <div {...slotProps.root}>\n        {slotProps && <Label {...slotProps.label} />}\n        <div {...slotProps.container}>\n          {props.ranged &&\n            (props.vertical\n              ? slotProps.valueLabel && <Label {...slotProps.valueLabel} />\n              : slotProps.lowerValueLabel && <Label {...slotProps.lowerValueLabel} />)}\n          <div {...slotProps.sliderBox}>\n            <div {...slotProps.sliderLine}>\n              {props.ranged && <span {...slotProps.lowerValueThumb} />}\n              <span {...slotProps.thumb} />\n              {slotProps.zeroTick && <span {...slotProps.zeroTick} />}\n              <span {...slotProps.bottomInactiveTrack} />\n              <span {...slotProps.activeTrack} />\n              <span {...slotProps.topInactiveTrack} />\n            </div>\n          </div>\n          {props.ranged && props.vertical\n            ? slotProps.lowerValueLabel && <Label {...slotProps.lowerValueLabel} />\n            : slotProps.valueLabel && <Label {...slotProps.valueLabel} />}\n        </div>\n        <FocusRects />\n      </div>\n    ) as React.ReactElement<{}>;\n  },\n);\nSliderBase.displayName = COMPONENT_NAME;\n"]}

node_modules/@fluentui/react/lib-commonjs/components/Slider/Slider.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { ISliderProps } from './Slider.types';
+export declare const Slider: React.FunctionComponent<ISliderProps>;

node_modules/@fluentui/react/lib-commonjs/components/Slider/Slider.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+var utilities_1 = require("@fluentui/utilities");
+var Slider_base_1 = require("./Slider.base");
+var Slider_styles_1 = require("./Slider.styles");
+exports.Slider = (0, utilities_1.styled)(Slider_base_1.SliderBase, Slider_styles_1.getStyles, undefined, {
+    scope: 'Slider',
+});
+//# sourceMappingURL=Slider.js.map

node_modules/@fluentui/react/lib-commonjs/components/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sourceRoot":"../src/","sources":["components/Slider/Slider.tsx"],"names":[],"mappings":";;;AACA,iDAA6C;AAC7C,6CAA2C;AAC3C,iDAA4C;AAG/B,QAAA,MAAM,GAA0C,IAAA,kBAAM,EACjE,wBAAU,EACV,yBAAS,EACT,SAAS,EACT;IACE,KAAK,EAAE,QAAQ;CAChB,CACF,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/utilities';\nimport { SliderBase } from './Slider.base';\nimport { getStyles } from './Slider.styles';\nimport type { ISliderProps, ISliderStyleProps, ISliderStyles } from './Slider.types';\n\nexport const Slider: React.FunctionComponent<ISliderProps> = styled<ISliderProps, ISliderStyleProps, ISliderStyles>(\n  SliderBase,\n  getStyles,\n  undefined,\n  {\n    scope: 'Slider',\n  },\n);\n"]}

node_modules/@fluentui/react/lib-commonjs/components/Slider/Slider.styles.d.ts

@@ -0,0 +1,2 @@
+import type { ISliderStyleProps, ISliderStyles } from './Slider.types';
+export declare const getStyles: (props: ISliderStyleProps) => ISliderStyles;

node_modules/@fluentui/react/lib-commonjs/components/Slider/Slider.styles.js

@@ -0,0 +1,318 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = void 0;
+var tslib_1 = require("tslib");
+var style_utilities_1 = require("@fluentui/style-utilities");
+var utilities_1 = require("@fluentui/utilities");
+var GlobalClassNames = {
+    root: 'ms-Slider',
+    enabled: 'ms-Slider-enabled',
+    disabled: 'ms-Slider-disabled',
+    row: 'ms-Slider-row',
+    column: 'ms-Slider-column',
+    container: 'ms-Slider-container',
+    slideBox: 'ms-Slider-slideBox',
+    line: 'ms-Slider-line',
+    thumb: 'ms-Slider-thumb',
+    activeSection: 'ms-Slider-active',
+    inactiveSection: 'ms-Slider-inactive',
+    valueLabel: 'ms-Slider-value',
+    showValue: 'ms-Slider-showValue',
+    showTransitions: 'ms-Slider-showTransitions',
+    zeroTick: 'ms-Slider-zeroTick',
+};
+var getStyles = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var className = props.className, titleLabelClassName = props.titleLabelClassName, theme = props.theme, vertical = props.vertical, disabled = props.disabled, showTransitions = props.showTransitions, showValue = props.showValue, ranged = props.ranged;
+    var semanticColors = theme.semanticColors, palette = theme.palette;
+    var classNames = (0, style_utilities_1.getGlobalClassNames)(GlobalClassNames, theme);
+    /** Tokens:
+     *   The word "active" in the token refers to the selected section of the slider
+     *   The word "inactive" in the token refers to the unselected section of the slider */
+    var pressedActiveSectionColor = semanticColors.inputBackgroundCheckedHovered;
+    var hoveredActiveSectionColor = semanticColors.inputBackgroundChecked;
+    var hoveredPressedinactiveSectionColor = palette.neutralSecondaryAlt;
+    var restActiveSectionColor = palette.neutralPrimary;
+    var restInactiveSectionColor = palette.neutralSecondaryAlt;
+    var disabledActiveSectionColor = semanticColors.disabledText;
+    var disabledInactiveSectionColor = semanticColors.disabledBackground;
+    var thumbBackgroundColor = semanticColors.inputBackground;
+    var thumbBorderColor = semanticColors.smallInputBorder;
+    var thumbDisabledBorderColor = semanticColors.disabledBorder;
+    var slideBoxActiveSectionStyles = !disabled && {
+        backgroundColor: pressedActiveSectionColor,
+        selectors: (_a = {},
+            _a[style_utilities_1.HighContrastSelector] = {
+                backgroundColor: 'Highlight',
+            },
+            _a),
+    };
+    var slideBoxInactiveSectionStyles = !disabled && {
+        backgroundColor: hoveredPressedinactiveSectionColor,
+        selectors: (_b = {},
+            _b[style_utilities_1.HighContrastSelector] = {
+                borderColor: 'Highlight',
+            },
+            _b),
+    };
+    var slideHoverSectionStyles = !disabled && {
+        backgroundColor: hoveredActiveSectionColor,
+        selectors: (_c = {},
+            _c[style_utilities_1.HighContrastSelector] = {
+                backgroundColor: 'Highlight',
+            },
+            _c),
+    };
+    var slideBoxActiveThumbStyles = !disabled && {
+        border: "2px solid ".concat(pressedActiveSectionColor),
+        selectors: (_d = {},
+            _d[style_utilities_1.HighContrastSelector] = {
+                borderColor: 'Highlight',
+            },
+            _d),
+    };
+    var slideBoxActiveZeroTickStyles = !props.disabled && {
+        backgroundColor: semanticColors.inputPlaceholderBackgroundChecked,
+        selectors: (_e = {},
+            _e[style_utilities_1.HighContrastSelector] = {
+                backgroundColor: 'Highlight',
+            },
+            _e),
+    };
+    return {
+        root: tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([
+            classNames.root,
+            theme.fonts.medium,
+            {
+                userSelect: 'none',
+            },
+            vertical && {
+                marginRight: 8,
+            }
+        ], [!disabled ? classNames.enabled : undefined], false), [disabled ? classNames.disabled : undefined], false), [!vertical ? classNames.row : undefined], false), [vertical ? classNames.column : undefined], false), [
+            className,
+        ], false),
+        titleLabel: [
+            {
+                padding: 0,
+            },
+            titleLabelClassName,
+        ],
+        container: [
+            classNames.container,
+            {
+                display: 'flex',
+                flexWrap: 'nowrap',
+                alignItems: 'center',
+            },
+            vertical && {
+                flexDirection: 'column',
+                height: '100%',
+                textAlign: 'center',
+                margin: '8px 0',
+            },
+        ],
+        slideBox: tslib_1.__spreadArray(tslib_1.__spreadArray([
+            classNames.slideBox,
+            !ranged && (0, style_utilities_1.getFocusStyle)(theme),
+            {
+                background: 'transparent',
+                border: 'none',
+                flexGrow: 1,
+                lineHeight: 28,
+                display: 'flex',
+                alignItems: 'center',
+                selectors: (_f = {},
+                    _f[":active .".concat(classNames.activeSection)] = slideBoxActiveSectionStyles,
+                    _f[":hover .".concat(classNames.activeSection)] = slideHoverSectionStyles,
+                    _f[":active .".concat(classNames.inactiveSection)] = slideBoxInactiveSectionStyles,
+                    _f[":hover .".concat(classNames.inactiveSection)] = slideBoxInactiveSectionStyles,
+                    _f[":active .".concat(classNames.thumb)] = slideBoxActiveThumbStyles,
+                    _f[":hover .".concat(classNames.thumb)] = slideBoxActiveThumbStyles,
+                    _f[":active .".concat(classNames.zeroTick)] = slideBoxActiveZeroTickStyles,
+                    _f[":hover .".concat(classNames.zeroTick)] = slideBoxActiveZeroTickStyles,
+                    _f[style_utilities_1.HighContrastSelector] = {
+                        forcedColorAdjust: 'none',
+                    },
+                    _f),
+            },
+            vertical
+                ? {
+                    height: '100%',
+                    width: 28,
+                    padding: '8px 0', // Make room for thumb at bottom of line
+                }
+                : {
+                    height: 28,
+                    width: 'auto',
+                    padding: '0 8px', // Make room for thumb at ends of line
+                }
+        ], [showValue ? classNames.showValue : undefined], false), [showTransitions ? classNames.showTransitions : undefined], false),
+        thumb: [
+            classNames.thumb,
+            ranged && (0, style_utilities_1.getFocusStyle)(theme, { inset: -4 }),
+            {
+                borderWidth: 2,
+                borderStyle: 'solid',
+                borderColor: thumbBorderColor,
+                borderRadius: 10,
+                boxSizing: 'border-box',
+                background: thumbBackgroundColor,
+                display: 'block',
+                width: 16,
+                height: 16,
+                position: 'absolute',
+            },
+            vertical
+                ? {
+                    left: -6,
+                    margin: '0 auto',
+                    transform: 'translateY(8px)',
+                }
+                : {
+                    top: -6,
+                    transform: (0, utilities_1.getRTL)(theme) ? 'translateX(50%)' : 'translateX(-50%)',
+                },
+            showTransitions && {
+                transition: "left ".concat(style_utilities_1.AnimationVariables.durationValue3, " ").concat(style_utilities_1.AnimationVariables.easeFunction1),
+            },
+            disabled && {
+                borderColor: thumbDisabledBorderColor,
+                selectors: (_g = {},
+                    _g[style_utilities_1.HighContrastSelector] = {
+                        borderColor: 'GrayText',
+                    },
+                    _g),
+            },
+        ],
+        line: [
+            classNames.line,
+            {
+                display: 'flex',
+                position: 'relative',
+            },
+            vertical
+                ? {
+                    height: '100%',
+                    width: 4,
+                    margin: '0 auto',
+                    flexDirection: 'column-reverse',
+                }
+                : {
+                    width: '100%',
+                },
+        ],
+        lineContainer: [
+            {
+                borderRadius: 4,
+                boxSizing: 'border-box',
+            },
+            vertical
+                ? {
+                    width: 4,
+                    height: '100%',
+                }
+                : {
+                    height: 4,
+                    width: '100%',
+                },
+        ],
+        activeSection: [
+            classNames.activeSection,
+            {
+                background: restActiveSectionColor,
+                selectors: (_h = {},
+                    _h[style_utilities_1.HighContrastSelector] = {
+                        backgroundColor: 'WindowText',
+                    },
+                    _h),
+            },
+            showTransitions && {
+                transition: "width ".concat(style_utilities_1.AnimationVariables.durationValue3, " ").concat(style_utilities_1.AnimationVariables.easeFunction1),
+            },
+            disabled && {
+                background: disabledActiveSectionColor,
+                selectors: (_j = {},
+                    _j[style_utilities_1.HighContrastSelector] = {
+                        backgroundColor: 'GrayText',
+                        borderColor: 'GrayText',
+                    },
+                    _j),
+            },
+        ],
+        inactiveSection: [
+            classNames.inactiveSection,
+            {
+                background: restInactiveSectionColor,
+                selectors: (_k = {},
+                    _k[style_utilities_1.HighContrastSelector] = {
+                        border: '1px solid WindowText',
+                    },
+                    _k),
+            },
+            showTransitions && {
+                transition: "width ".concat(style_utilities_1.AnimationVariables.durationValue3, " ").concat(style_utilities_1.AnimationVariables.easeFunction1),
+            },
+            disabled && {
+                background: disabledInactiveSectionColor,
+                selectors: (_l = {},
+                    _l[style_utilities_1.HighContrastSelector] = {
+                        borderColor: 'GrayText',
+                    },
+                    _l),
+            },
+        ],
+        zeroTick: [
+            classNames.zeroTick,
+            {
+                position: 'absolute',
+                background: semanticColors.disabledBorder,
+                selectors: (_m = {},
+                    _m[style_utilities_1.HighContrastSelector] = {
+                        backgroundColor: 'WindowText',
+                    },
+                    _m),
+            },
+            props.disabled && {
+                background: semanticColors.disabledBackground,
+                selectors: (_o = {},
+                    _o[style_utilities_1.HighContrastSelector] = {
+                        backgroundColor: 'GrayText',
+                    },
+                    _o),
+            },
+            props.vertical
+                ? {
+                    width: '16px',
+                    height: '1px',
+                    transform: (0, utilities_1.getRTL)(theme) ? 'translateX(6px)' : 'translateX(-6px)',
+                }
+                : {
+                    width: '1px',
+                    height: '16px',
+                    transform: 'translateY(-6px)',
+                },
+        ],
+        valueLabel: [
+            classNames.valueLabel,
+            {
+                flexShrink: 1,
+                width: 30,
+                lineHeight: '1', // using a string here meaning it's relative to the size of the font
+            },
+            vertical
+                ? {
+                    margin: '0 auto',
+                    whiteSpace: 'nowrap',
+                    width: 40,
+                }
+                : {
+                    margin: '0 8px',
+                    whiteSpace: 'nowrap',
+                    width: 40,
+                },
+        ],
+    };
+};
+exports.getStyles = getStyles;
+//# sourceMappingURL=Slider.styles.js.map

node_modules/@fluentui/react/lib-commonjs/components/Slider/Slider.types.d.ts

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import type { IStyle, ITheme } from '@fluentui/style-utilities';
+import type { IStyleFunctionOrObject, IRefObject } from '@fluentui/utilities';
+/**
+ * {@docCategory Slider}
+ */
+export interface ISlider {
+    value: number | undefined;
+    focus: () => void;
+    range?: [number, number];
+}
+/**
+ * {@docCategory Slider}
+ */
+export interface ISliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'>, React.RefAttributes<HTMLDivElement> {
+    /**
+     * Optional callback to access the ISlider interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<ISlider>;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<ISliderStyleProps, ISliderStyles>;
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme?: ITheme;
+    /**
+     * Description label of the Slider
+     */
+    label?: string;
+    /**
+     * The initial value of the Slider. Use this if you intend for the Slider to be an uncontrolled component.
+     * This value is mutually exclusive to value. Use one or the other.
+     */
+    defaultValue?: number;
+    /**
+     * The initial value of the Slider. Use this if you intend to pass in a new value as a result of onChange events.
+     * This value is mutually exclusive to defaultValue. Use one or the other.
+     */
+    value?: number;
+    /**
+     * The initial lower value of the Slider is ranged is true. Use this if you intend for the Slider to be an
+     * uncontrolled component. This value is mutually exclusive to lowerValue. Use one or the other.
+     */
+    defaultLowerValue?: number;
+    /**
+     * The initial lower value of the Slider is ranged is true. Use this if you intend to pass in a new value as a
+     * result of onChange events. This value is mutually exclusive to defaultLowerValue. Use one or the other.
+     */
+    lowerValue?: number;
+    /**
+     * The min value of the Slider
+     * @defaultvalue 0
+     */
+    min?: number;
+    /**
+     * The max value of the Slider
+     * @defaultvalue 10
+     */
+    max?: number;
+    /**
+     * The difference between the two adjacent values of the Slider
+     * @defaultvalue 1
+     */
+    step?: number;
+    /**
+     * Whether to show the value on the right of the Slider.
+     * @defaultvalue true
+     */
+    showValue?: boolean;
+    /**
+     * Callback when the value has been changed. This will be called on every individual step;
+     * to only be notified after changes have stopped, use `onChanged` instead.
+     * If `ranged` is true, `value` is the upper value, and `range` contains the lower and upper bounds of the range.
+     */
+    onChange?: (value: number, range?: [number, number], event?: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent | React.KeyboardEvent) => void;
+    /**
+     * Callback on mouse up, touch end, or after key presses have stopped.
+     * To be notified on every individual step, use `onChange` instead.
+     * @param event - Type is `React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent | React.KeyboardEvent`
+     * (may be corrected in a future major version)
+     */
+    onChanged?: (event: any, value: number, range?: [number, number]) => void;
+    /**
+     * A description of the Slider for the benefit of screen readers.
+     */
+    ariaLabel?: string;
+    /**
+     * If `ranged` is true, display two thumbs that allow the lower and upper bounds of a range to be selected.
+     * The lower bound is defined by `lowerValue`, and the upper bound is defined by `value`.
+     */
+    ranged?: boolean;
+    /**
+     * A text description of the Slider number value for the benefit of screen readers.
+     * This should be used when the Slider number value is not accurately represented by a number.
+     */
+    ariaValueText?: (value: number) => string;
+    /**
+     * Whether to render the slider vertically.
+     * @default `false` (render horizontally)
+     */
+    vertical?: boolean;
+    /**
+     * Whether to render the Slider as disabled.
+     * @defaultvalue false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to decide that thumb will snap to closest value while moving the slider
+     * @defaultvalue false
+     */
+    snapToStep?: boolean;
+    /**
+     * Class name to attach to the slider root element.
+     */
+    className?: string;
+    /**
+     * Additional props for the actual `role="slider"` (slider box) element.
+     * (Note that this element is not actually a button in the current implementation.)
+     */
+    buttonProps?: React.HTMLAttributes<HTMLButtonElement>;
+    /**
+     * Custom formatter for the slider value.
+     */
+    valueFormat?: (value: number) => string;
+    /**
+     * Whether to attach the origin of slider to zero. Helpful when the range include negatives.
+     * @defaultvalue false
+     */
+    originFromZero?: boolean;
+}
+/**
+ * {@docCategory Slider}
+ */
+export type ISliderStyleProps = Required<Pick<ISliderProps, 'theme'>> & Pick<ISliderProps, 'className' | 'disabled' | 'vertical' | 'ranged'> & {
+    showTransitions?: boolean;
+    showValue?: boolean;
+    titleLabelClassName?: string;
+};
+/**
+ * {@docCategory Slider}
+ */
+export interface ISliderStyles {
+    /**
+     * Style set for the root element.
+     */
+    root: IStyle;
+    /**
+     * Style set for the title label above the slider.
+     */
+    titleLabel: IStyle;
+    /**
+     * Style set for the container of the slider.
+     */
+    container: IStyle;
+    /**
+     * Style set for the actual box containting interactive elements of the slider.
+     */
+    slideBox: IStyle;
+    /**
+     * Style set for element that contains all the lines.
+     */
+    line: IStyle;
+    /**
+     * Style set for thumb of the slider.
+     */
+    thumb: IStyle;
+    /**
+     * Style set for both active and inactive sections of the line.
+     */
+    lineContainer: IStyle;
+    /**
+     * Style set for active portion of the line.
+     */
+    activeSection: IStyle;
+    /**
+     * Style set for inactive portion of the line.
+     */
+    inactiveSection: IStyle;
+    /**
+     * Style set for value label on right/below of the slider.
+     */
+    valueLabel: IStyle;
+    /**
+     * Style set for tick on 0 on number line. This element only shows up when originFromZero prop is true.
+     */
+    zeroTick: IStyle;
+}

node_modules/@fluentui/react/lib-commonjs/components/Slider/Slider.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Slider.types.js.map

node_modules/@fluentui/react/lib-commonjs/components/Slider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Slider';
+export * from './Slider.base';
+export * from './Slider.types';

node_modules/@fluentui/react/lib-commonjs/components/Slider/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Slider"), exports);
+tslib_1.__exportStar(require("./Slider.base"), exports);
+tslib_1.__exportStar(require("./Slider.types"), exports);
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib-commonjs/components/Slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Slider/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB;AACzB,wDAA8B;AAC9B,yDAA+B","sourcesContent":["export * from './Slider';\nexport * from './Slider.base';\nexport * from './Slider.types';\n"]}

node_modules/@fluentui/react/lib-commonjs/components/Slider/useSlider.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { ISliderProps } from './Slider.types';
+import type { ILabelProps } from '../Label/index';
+export declare const ONKEYDOWN_TIMEOUT_DURATION = 1000;
+export declare const useSlider: (props: ISliderProps, ref: React.ForwardedRef<HTMLDivElement>) => {
+    root: React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>;
+    label: ILabelProps | undefined;
+    sliderBox: React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>;
+    container: React.HTMLAttributes<HTMLDivElement>;
+    valueLabel: ILabelProps | undefined;
+    lowerValueLabel: ILabelProps | undefined;
+    thumb: React.HTMLAttributes<HTMLSpanElement>;
+    lowerValueThumb: React.HTMLAttributes<HTMLSpanElement> | undefined;
+    zeroTick: React.HTMLAttributes<HTMLSpanElement> | undefined;
+    activeTrack: React.HTMLAttributes<HTMLSpanElement>;
+    topInactiveTrack: React.HTMLAttributes<HTMLSpanElement>;
+    bottomInactiveTrack: React.HTMLAttributes<HTMLSpanElement>;
+    sliderLine: React.HTMLAttributes<HTMLDivElement>;
+};

node_modules/@fluentui/react/lib-commonjs/components/Slider/useSlider.js

@@ -0,0 +1,330 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSlider = exports.ONKEYDOWN_TIMEOUT_DURATION = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var react_hooks_1 = require("@fluentui/react-hooks");
+var utilities_1 = require("@fluentui/utilities");
+var dom_1 = require("../../utilities/dom");
+exports.ONKEYDOWN_TIMEOUT_DURATION = 1000;
+var getClassNames = (0, utilities_1.classNamesFunction)();
+var getSlotStyleFn = function (sty) {
+    return function (value) {
+        var _a;
+        return _a = {},
+            _a[sty] = "".concat(value, "%"),
+            _a;
+    };
+};
+var getPercent = function (value, sliderMin, sliderMax) {
+    return sliderMax === sliderMin ? 0 : ((value - sliderMin) / (sliderMax - sliderMin)) * 100;
+};
+var useComponentRef = function (props, sliderBoxRef, value, range) {
+    React.useImperativeHandle(props.componentRef, function () { return ({
+        get value() {
+            return value;
+        },
+        get range() {
+            return range;
+        },
+        focus: function () {
+            var _a;
+            (_a = sliderBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        },
+    }); }, [range, sliderBoxRef, value]);
+};
+var useSlider = function (props, ref) {
+    var _a = props.step, step = _a === void 0 ? 1 : _a, className = props.className, _b = props.disabled, disabled = _b === void 0 ? false : _b, label = props.label, _c = props.max, max = _c === void 0 ? 10 : _c, _d = props.min, min = _d === void 0 ? 0 : _d, _e = props.showValue, showValue = _e === void 0 ? true : _e, _f = props.buttonProps, buttonProps = _f === void 0 ? {} : _f, _g = props.vertical, vertical = _g === void 0 ? false : _g, snapToStep = props.snapToStep, valueFormat = props.valueFormat, styles = props.styles, theme = props.theme, originFromZero = props.originFromZero, ariaLabelledBy = props["aria-labelledby"], _h = props.ariaLabel, ariaLabel = _h === void 0 ? props['aria-label'] : _h, ranged = props.ranged, onChange = props.onChange, onChanged = props.onChanged;
+    var disposables = React.useRef([]);
+    var _j = (0, react_hooks_1.useSetTimeout)(), setTimeout = _j.setTimeout, clearTimeout = _j.clearTimeout;
+    var sliderLine = React.useRef(null);
+    var win = (0, dom_1.useWindowEx)();
+    // Casting here is necessary because useControllableValue expects the event for the change callback
+    // to extend React.SyntheticEvent, when in fact for Slider, the event could be either a React event
+    // or a native browser event depending on the context.
+    var _k = (0, react_hooks_1.useControllableValue)(props.value, props.defaultValue, function (ev, v) {
+        return onChange === null || onChange === void 0 ? void 0 : onChange(v, ranged ? [internalState.latestLowerValue, v] : undefined, ev);
+    }), unclampedValue = _k[0], setValue = _k[1];
+    var _l = (0, react_hooks_1.useControllableValue)(props.lowerValue, props.defaultLowerValue, function (ev, lv) { return onChange === null || onChange === void 0 ? void 0 : onChange(internalState.latestValue, [lv, internalState.latestValue], ev); }), unclampedLowerValue = _l[0], setLowerValue = _l[1];
+    // Ensure that value is always a number and is clamped by min/max.
+    var value = Math.max(min, Math.min(max, unclampedValue || 0));
+    var lowerValue = Math.max(min, Math.min(value, unclampedLowerValue || 0));
+    var internalState = (0, react_hooks_1.useConst)({
+        onKeyDownTimer: -1,
+        isAdjustingLowerValue: false,
+        latestValue: value,
+        latestLowerValue: lowerValue,
+    });
+    // On each render, update this saved value used by callbacks. (This should be safe even if render
+    // is called multiple times, because an event handler or timeout callback will only run once.)
+    internalState.latestValue = value;
+    internalState.latestLowerValue = lowerValue;
+    var id = (0, react_hooks_1.useId)('Slider', props.id || (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id));
+    var classNames = getClassNames(styles, {
+        className: className,
+        disabled: disabled,
+        vertical: vertical,
+        showTransitions: !snapToStep && !internalState.isBetweenSteps,
+        showValue: showValue,
+        ranged: ranged,
+        theme: theme,
+    });
+    var steps = (max - min) / step;
+    var clearOnKeyDownTimer = function () {
+        clearTimeout(internalState.onKeyDownTimer);
+        internalState.onKeyDownTimer = -1;
+    };
+    var setOnKeyDownTimer = function (event) {
+        clearOnKeyDownTimer();
+        if (onChanged) {
+            internalState.onKeyDownTimer = setTimeout(function () {
+                onChanged(event, internalState.latestValue, ranged ? [internalState.latestLowerValue, internalState.latestValue] : undefined);
+            }, exports.ONKEYDOWN_TIMEOUT_DURATION);
+        }
+    };
+    var getAriaValueText = function (valueProps) {
+        var ariaValueText = props.ariaValueText;
+        if (valueProps !== undefined) {
+            return ariaValueText ? ariaValueText(valueProps) : valueProps.toString();
+        }
+        return undefined;
+    };
+    /**
+     * Update `value` or `lowerValue`, including clamping between min/max and rounding to
+     * appropriate precision.
+     * @param newValue - New current value of the slider, possibly rounded to a whole step.
+     * @param newUnroundedValue - Like `newValue` but without the rounding to a step. If this is
+     * provided and not equal to `newValue`, `internalState.isBetweenSteps` will be set, which
+     * may cause thumb movement animations to be disabled.
+     */
+    var updateValue = function (ev, newValue, newUnroundedValue) {
+        newValue = Math.min(max, Math.max(min, newValue));
+        newUnroundedValue = newUnroundedValue !== undefined ? Math.min(max, Math.max(min, newUnroundedValue)) : undefined;
+        var numDec = 0;
+        if (isFinite(step)) {
+            while (Math.round(step * Math.pow(10, numDec)) / Math.pow(10, numDec) !== step) {
+                numDec++;
+            }
+        }
+        // Make sure value has correct number of decimal places based on number of decimals in step
+        var roundedValue = parseFloat(newValue.toFixed(numDec));
+        internalState.isBetweenSteps = newUnroundedValue !== undefined && newUnroundedValue !== roundedValue;
+        if (ranged) {
+            // decided which thumb value to change
+            if (internalState.isAdjustingLowerValue &&
+                (originFromZero ? roundedValue <= 0 : roundedValue <= internalState.latestValue)) {
+                setLowerValue(roundedValue, ev);
+            }
+            else if (!internalState.isAdjustingLowerValue &&
+                (originFromZero ? roundedValue >= 0 : roundedValue >= internalState.latestLowerValue)) {
+                setValue(roundedValue, ev);
+            }
+        }
+        else {
+            setValue(roundedValue, ev);
+        }
+    };
+    var onKeyDown = function (event) {
+        var newCurrentValue = internalState.isAdjustingLowerValue
+            ? internalState.latestLowerValue
+            : internalState.latestValue;
+        var diff = 0;
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        switch (event.which) {
+            case (0, utilities_1.getRTLSafeKeyCode)(utilities_1.KeyCodes.left, props.theme):
+            case utilities_1.KeyCodes.down:
+                diff = -step;
+                clearOnKeyDownTimer();
+                setOnKeyDownTimer(event);
+                break;
+            case (0, utilities_1.getRTLSafeKeyCode)(utilities_1.KeyCodes.right, props.theme):
+            case utilities_1.KeyCodes.up:
+                diff = step;
+                clearOnKeyDownTimer();
+                setOnKeyDownTimer(event);
+                break;
+            case utilities_1.KeyCodes.home:
+                newCurrentValue = min;
+                clearOnKeyDownTimer();
+                setOnKeyDownTimer(event);
+                break;
+            case utilities_1.KeyCodes.end:
+                newCurrentValue = max;
+                clearOnKeyDownTimer();
+                setOnKeyDownTimer(event);
+                break;
+            default:
+                return;
+        }
+        updateValue(event, newCurrentValue + diff);
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    var getPosition = function (event, verticalProp) {
+        var currentPosition = 0;
+        switch (event.type) {
+            case 'mousedown':
+            case 'mousemove':
+                currentPosition = !verticalProp ? event.clientX : event.clientY;
+                break;
+            case 'touchstart':
+            case 'touchmove':
+                currentPosition = !verticalProp
+                    ? event.touches[0].clientX
+                    : event.touches[0].clientY;
+                break;
+        }
+        return currentPosition;
+    };
+    var calculateCurrentSteps = function (event) {
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        var sliderPositionRect = sliderLine.current.getBoundingClientRect();
+        var sliderLength = !props.vertical ? sliderPositionRect.width : sliderPositionRect.height;
+        var stepLength = sliderLength / steps;
+        var currentSteps;
+        var distance;
+        if (!props.vertical) {
+            var left = getPosition(event, props.vertical);
+            distance = (0, utilities_1.getRTL)(props.theme) ? sliderPositionRect.right - left : left - sliderPositionRect.left;
+            currentSteps = distance / stepLength;
+        }
+        else {
+            var bottom = getPosition(event, props.vertical);
+            distance = sliderPositionRect.bottom - bottom;
+            currentSteps = distance / stepLength;
+        }
+        return currentSteps;
+    };
+    var onMouseMoveOrTouchMove = function (event, suppressEventCancelation) {
+        var currentSteps = calculateCurrentSteps(event);
+        var newUnroundedValue = min + step * currentSteps;
+        var newCurrentValue = min + step * Math.round(currentSteps);
+        updateValue(event, newCurrentValue, newUnroundedValue);
+        if (!suppressEventCancelation) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    var onMouseDownOrTouchStart = function (event) {
+        if (ranged) {
+            var currentSteps = calculateCurrentSteps(event);
+            var newValue = min + step * currentSteps;
+            internalState.isAdjustingLowerValue =
+                newValue <= internalState.latestLowerValue ||
+                    newValue - internalState.latestLowerValue <= internalState.latestValue - newValue;
+        }
+        // safe to use `win!` since it can only be called on the client
+        if (event.type === 'mousedown') {
+            disposables.current.push((0, utilities_1.on)(win, 'mousemove', onMouseMoveOrTouchMove, true), (0, utilities_1.on)(win, 'mouseup', onMouseUpOrTouchEnd, true));
+        }
+        else if (event.type === 'touchstart') {
+            disposables.current.push((0, utilities_1.on)(win, 'touchmove', onMouseMoveOrTouchMove, true), (0, utilities_1.on)(win, 'touchend', onMouseUpOrTouchEnd, true));
+        }
+        onMouseMoveOrTouchMove(event, true);
+    };
+    var onMouseUpOrTouchEnd = function (event) {
+        // Done adjusting, so clear this value
+        internalState.isBetweenSteps = undefined;
+        onChanged === null || onChanged === void 0 ? void 0 : onChanged(event, internalState.latestValue, ranged ? [internalState.latestLowerValue, internalState.latestValue] : undefined);
+        disposeListeners();
+    };
+    var onThumbFocus = function (event) {
+        internalState.isAdjustingLowerValue = event.target === lowerValueThumbRef.current;
+    };
+    var disposeListeners = React.useCallback(function () {
+        disposables.current.forEach(function (dispose) { return dispose(); });
+        disposables.current = [];
+    }, []);
+    React.useEffect(function () { return disposeListeners; }, [disposeListeners]);
+    var lowerValueThumbRef = React.useRef(null);
+    var thumbRef = React.useRef(null);
+    var sliderBoxRef = React.useRef(null);
+    useComponentRef(props, sliderBoxRef, value, ranged ? [lowerValue, value] : undefined);
+    var getPositionStyles = getSlotStyleFn(vertical ? 'bottom' : (0, utilities_1.getRTL)(props.theme) ? 'right' : 'left');
+    var getTrackStyles = getSlotStyleFn(vertical ? 'height' : 'width');
+    var originValue = originFromZero ? 0 : min;
+    var valuePercent = getPercent(value, min, max);
+    var lowerValuePercent = getPercent(lowerValue, min, max);
+    var originPercentOfLine = getPercent(originValue, min, max);
+    var activeSectionWidth = ranged ? valuePercent - lowerValuePercent : Math.abs(originPercentOfLine - valuePercent);
+    var topSectionWidth = Math.min(100 - valuePercent, 100 - originPercentOfLine);
+    var bottomSectionWidth = ranged ? lowerValuePercent : Math.min(valuePercent, originPercentOfLine);
+    var rootProps = {
+        className: classNames.root,
+        ref: ref,
+    };
+    var labelProps = {
+        className: classNames.titleLabel,
+        children: label,
+        disabled: disabled,
+        htmlFor: ariaLabel ? undefined : id,
+    };
+    var valueLabelProps = showValue
+        ? {
+            className: classNames.valueLabel,
+            children: valueFormat ? valueFormat(value) : value,
+            disabled: disabled,
+            htmlFor: disabled ? id : undefined,
+        }
+        : undefined;
+    var lowerValueLabelProps = ranged && showValue
+        ? {
+            className: classNames.valueLabel,
+            children: valueFormat ? valueFormat(lowerValue) : lowerValue,
+            disabled: disabled,
+        }
+        : undefined;
+    var zeroTickProps = originFromZero
+        ? {
+            className: classNames.zeroTick,
+            style: getPositionStyles(originPercentOfLine),
+        }
+        : undefined;
+    var trackActiveProps = {
+        className: (0, utilities_1.css)(classNames.lineContainer, classNames.activeSection),
+        style: getTrackStyles(activeSectionWidth),
+    };
+    var trackTopInactiveProps = {
+        className: (0, utilities_1.css)(classNames.lineContainer, classNames.inactiveSection),
+        style: getTrackStyles(topSectionWidth),
+    };
+    var trackBottomInactiveProps = {
+        className: (0, utilities_1.css)(classNames.lineContainer, classNames.inactiveSection),
+        style: getTrackStyles(bottomSectionWidth),
+    };
+    var sliderProps = tslib_1.__assign({ 'aria-disabled': disabled, role: 'slider', tabIndex: disabled ? undefined : 0 }, { 'data-is-focusable': !disabled });
+    var sliderBoxProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ id: id, className: (0, utilities_1.css)(classNames.slideBox, buttonProps.className), ref: sliderBoxRef }, (!disabled && {
+        onMouseDown: onMouseDownOrTouchStart,
+        onTouchStart: onMouseDownOrTouchStart,
+        onKeyDown: onKeyDown,
+    })), (buttonProps &&
+        (0, utilities_1.getNativeProps)(buttonProps, utilities_1.divProperties, ['id', 'className']))), (!ranged && tslib_1.__assign(tslib_1.__assign({}, sliderProps), { 'aria-valuemin': min, 'aria-valuemax': max, 'aria-valuenow': value, 'aria-valuetext': getAriaValueText(value), 'aria-label': ariaLabel || label, 'aria-labelledby': ariaLabelledBy })));
+    var onFocusProp = disabled ? {} : { onFocus: onThumbFocus };
+    var thumbProps = tslib_1.__assign({ ref: thumbRef, className: classNames.thumb, style: getPositionStyles(valuePercent) }, (ranged && tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, sliderProps), onFocusProp), { id: "max-".concat(id), 'aria-valuemin': lowerValue, 'aria-valuemax': max, 'aria-valuenow': value, 'aria-valuetext': getAriaValueText(value), 'aria-label': "max ".concat(ariaLabel || label) })));
+    var lowerValueThumbProps = ranged
+        ? tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ ref: lowerValueThumbRef, className: classNames.thumb, style: getPositionStyles(lowerValuePercent) }, sliderProps), onFocusProp), { id: "min-".concat(id), 'aria-valuemin': min, 'aria-valuemax': value, 'aria-valuenow': lowerValue, 'aria-valuetext': getAriaValueText(lowerValue), 'aria-label': "min ".concat(ariaLabel || label) }) : undefined;
+    var containerProps = {
+        className: classNames.container,
+    };
+    var sliderLineProps = {
+        ref: sliderLine,
+        className: classNames.line,
+    };
+    return {
+        root: rootProps,
+        label: labelProps,
+        sliderBox: sliderBoxProps,
+        container: containerProps,
+        valueLabel: valueLabelProps,
+        lowerValueLabel: lowerValueLabelProps,
+        thumb: thumbProps,
+        lowerValueThumb: lowerValueThumbProps,
+        zeroTick: zeroTickProps,
+        activeTrack: trackActiveProps,
+        topInactiveTrack: trackTopInactiveProps,
+        bottomInactiveTrack: trackBottomInactiveProps,
+        sliderLine: sliderLineProps,
+    };
+};
+exports.useSlider = useSlider;
+//# sourceMappingURL=useSlider.js.map