Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
+14
View File
@@ -0,0 +1,14 @@
import * as React from 'react';
import { useSwitch_unstable } from './useSwitch';
import { renderSwitch_unstable } from './renderSwitch';
import { useSwitchStyles_unstable } from './useSwitchStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Switches enable users to trigger an option on or off through pressing the component.
*/ export const Switch = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useSwitch_unstable(props, ref);
useSwitchStyles_unstable(state);
useCustomStyleHook_unstable('useSwitchStyles_unstable')(state);
return renderSwitch_unstable(state);
});
Switch.displayName = 'Switch';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles.styles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Switches enable users to trigger an option on or off through pressing the component.\n */\nexport const Switch: ForwardRefComponent<SwitchProps> = React.forwardRef((props, ref) => {\n const state = useSwitch_unstable(props, ref);\n\n useSwitchStyles_unstable(state);\n\n useCustomStyleHook_unstable('useSwitchStyles_unstable')(state);\n\n return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"names":["React","useSwitch_unstable","renderSwitch_unstable","useSwitchStyles_unstable","useCustomStyleHook_unstable","Switch","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
@@ -0,0 +1 @@
import * as React from 'react';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Switch/Switch.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n /**\n * The root element of the Switch.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.\n * All other native props will be applied to the primary slot: `input`.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The track and the thumb sliding over it indicating the on and off status of the Switch.\n */\n indicator: NonNullable<Slot<'div'>>;\n\n /**\n * Hidden input that handles the Switch's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this\n * slot, except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * The Switch's label.\n */\n label?: Slot<typeof Label>;\n};\n\nexport type SwitchOnChangeData = {\n checked: boolean;\n};\n\n/**\n * Switch Props\n */\nexport type SwitchProps = Omit<\n ComponentProps<Partial<SwitchSlots>, 'input'>,\n 'checked' | 'defaultChecked' | 'onChange'\n> & {\n /**\n * Defines the controlled checked state of the Switch.\n * If passed, Switch ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onChange` events and re-rendering.\n *\n * @default false\n */\n checked?: boolean;\n\n /**\n * Defines whether the Switch is initially in a checked state or not when rendered.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * The position of the label relative to the Switch.\n *\n * @default after\n */\n labelPosition?: 'above' | 'after' | 'before';\n\n /**\n * Callback to be called when the checked state value changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;\n};\n\n/**\n * State used in rendering Switch\n */\nexport type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'labelPosition'>>;\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+5
View File
@@ -0,0 +1,5 @@
export { Switch } from './Switch';
export { renderSwitch_unstable } from './renderSwitch';
export { useSwitch_unstable } from './useSwitch';
export { // eslint-disable-next-line @typescript-eslint/no-deprecated
switchClassName, switchClassNames, useSwitchStyles_unstable } from './useSwitchStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Switch/index.ts"],"sourcesContent":["export { Switch } from './Switch';\nexport type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch.types';\nexport { renderSwitch_unstable } from './renderSwitch';\nexport { useSwitch_unstable } from './useSwitch';\nexport {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n switchClassName,\n switchClassNames,\n useSwitchStyles_unstable,\n} from './useSwitchStyles.styles';\n"],"names":["Switch","renderSwitch_unstable","useSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAElC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SACE,4DAA4D;AAC5DC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,QACnB,2BAA2B"}
@@ -0,0 +1,16 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render a Switch component by passing the state defined props to the appropriate slots.
*/ export const renderSwitch_unstable = (state)=>{
assertSlots(state);
const { labelPosition } = state;
return /*#__PURE__*/ _jsxs(state.root, {
children: [
/*#__PURE__*/ _jsx(state.input, {}),
labelPosition !== 'after' && state.label && /*#__PURE__*/ _jsx(state.label, {}),
/*#__PURE__*/ _jsx(state.indicator, {}),
labelPosition === 'after' && state.label && /*#__PURE__*/ _jsx(state.label, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Switch/renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchState) => {\n assertSlots<SwitchSlots>(state);\n const { labelPosition } = state;\n\n return (\n <state.root>\n <state.input />\n {labelPosition !== 'after' && state.label && <state.label />}\n <state.indicator />\n {labelPosition === 'after' && state.label && <state.label />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSwitch_unstable","state","labelPosition","root","input","label","indicator"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,qBACE,MAACA,MAAME,IAAI;;0BACT,KAACF,MAAMG,KAAK;YACXF,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;0BACzD,KAACJ,MAAMK,SAAS;YACfJ,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAG/D,EAAE"}
+83
View File
@@ -0,0 +1,83 @@
import * as React from 'react';
import { useFieldControlProps_unstable } from '@fluentui/react-field';
import { CircleFilled } from '@fluentui/react-icons';
import { Label } from '@fluentui/react-label';
import { useFocusWithin } from '@fluentui/react-tabster';
import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
/**
* Create the state required to render Switch.
*
* The returned state can be modified with hooks such as useSwitchStyles_unstable,
* before being passed to renderSwitch_unstable.
*
* @param props - props from this instance of Switch
* @param ref - reference to `<input>` element of Switch
*/ export const useSwitch_unstable = (props, ref)=>{
// Merge props from surrounding <Field>, if any
props = useFieldControlProps_unstable(props, {
supportsLabelFor: true,
supportsRequired: true
});
const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;
const nativeProps = getPartitionedNativeProps({
props,
primarySlotTagName: 'input',
excludedPropNames: [
'checked',
'defaultChecked',
'onChange'
]
});
const id = useId('switch-', nativeProps.primary.id);
const root = slot.always(props.root, {
defaultProps: {
ref: useFocusWithin(),
...nativeProps.root
},
elementType: 'div'
});
const indicator = slot.always(props.indicator, {
defaultProps: {
'aria-hidden': true,
children: /*#__PURE__*/ React.createElement(CircleFilled, null)
},
elementType: 'div'
});
const input = slot.always(props.input, {
defaultProps: {
checked,
defaultChecked,
id,
ref,
role: 'switch',
type: 'checkbox',
...nativeProps.primary
},
elementType: 'input'
});
input.onChange = mergeCallbacks(input.onChange, (ev)=>onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
checked: ev.currentTarget.checked
}));
const label = slot.optional(props.label, {
defaultProps: {
disabled,
htmlFor: id,
required,
size: 'medium'
},
elementType: Label
});
return {
labelPosition,
components: {
root: 'div',
indicator: 'div',
input: 'input',
label: Label
},
root,
indicator,
input,
label
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Switch/useSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const id = useId('switch-', nativeProps.primary.id);\n\n const root = slot.always(props.root, {\n defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n elementType: 'div',\n });\n const indicator = slot.always(props.indicator, {\n defaultProps: { 'aria-hidden': true, children: <CircleFilled /> },\n elementType: 'div',\n });\n const input = slot.always(props.input, {\n defaultProps: { checked, defaultChecked, id, ref, role: 'switch', type: 'checkbox', ...nativeProps.primary },\n elementType: 'input',\n });\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n const label = slot.optional(props.label, {\n defaultProps: { disabled, htmlFor: id, required, size: 'medium' },\n elementType: Label,\n });\n return {\n labelPosition, //Slots definition\n components: { root: 'div', indicator: 'div', input: 'input', label: Label },\n\n root,\n indicator,\n input,\n label,\n };\n};\n"],"names":["React","useFieldControlProps_unstable","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","useId","slot","useSwitch_unstable","props","ref","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","always","defaultProps","elementType","indicator","children","input","role","type","ev","currentTarget","label","optional","htmlFor","size","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGnG;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQT,8BAA8BS,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGT;IAE3F,MAAMU,cAAcf,0BAA0B;QAC5CK;QACAW,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,KAAKhB,MAAM,WAAWa,YAAYI,OAAO,CAACD,EAAE;IAElD,MAAME,OAAOjB,KAAKkB,MAAM,CAAChB,MAAMe,IAAI,EAAE;QACnCE,cAAc;YAAEhB,KAAKP;YAAkC,GAAGgB,YAAYK,IAAI;QAAC;QAC3EG,aAAa;IACf;IACA,MAAMC,YAAYrB,KAAKkB,MAAM,CAAChB,MAAMmB,SAAS,EAAE;QAC7CF,cAAc;YAAE,eAAe;YAAMG,wBAAU,oBAAC5B;QAAgB;QAChE0B,aAAa;IACf;IACA,MAAMG,QAAQvB,KAAKkB,MAAM,CAAChB,MAAMqB,KAAK,EAAE;QACrCJ,cAAc;YAAEb;YAASC;YAAgBQ;YAAIZ;YAAKqB,MAAM;YAAUC,MAAM;YAAY,GAAGb,YAAYI,OAAO;QAAC;QAC3GI,aAAa;IACf;IACAG,MAAMb,QAAQ,GAAGZ,eAAeyB,MAAMb,QAAQ,EAAEgB,CAAAA,KAAMhB,qBAAAA,+BAAAA,SAAWgB,IAAI;YAAEpB,SAASoB,GAAGC,aAAa,CAACrB,OAAO;QAAC;IACzG,MAAMsB,QAAQ5B,KAAK6B,QAAQ,CAAC3B,MAAM0B,KAAK,EAAE;QACvCT,cAAc;YAAEX;YAAUsB,SAASf;YAAIJ;YAAUoB,MAAM;QAAS;QAChEX,aAAazB;IACf;IACA,OAAO;QACLc;QACAuB,YAAY;YAAEf,MAAM;YAAOI,WAAW;YAAOE,OAAO;YAASK,OAAOjC;QAAM;QAE1EsB;QACAI;QACAE;QACAK;IACF;AACF,EAAE"}
@@ -0,0 +1,114 @@
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
import { tokens } from '@fluentui/react-theme';
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
export const switchClassNames = {
root: 'fui-Switch',
indicator: 'fui-Switch__indicator',
input: 'fui-Switch__input',
label: 'fui-Switch__label'
};
/**
* @deprecated Use `switchClassNames.root` instead.
*/
export const switchClassName = switchClassNames.root;
// Thumb and track sizes used by the component.
const spaceBetweenThumbAndTrack = 2;
const trackHeight = 20;
const trackWidth = 40;
const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r2i81i2", "rofhmb8", {
r: [".r2i81i2{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}", ".r2i81i2:focus{outline-style:none;}", ".r2i81i2:focus-visible{outline-style:none;}", ".r2i81i2[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r2i81i2[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".rofhmb8{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}", ".rofhmb8:focus{outline-style:none;}", ".rofhmb8:focus-visible{outline-style:none;}", ".rofhmb8[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rofhmb8[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
s: ["@media (forced-colors: active){.r2i81i2[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.rofhmb8[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
});
const useRootStyles = /*#__PURE__*/__styles({
vertical: {
Beiy3e4: "f1vx9l62"
}
}, {
d: [".f1vx9l62{flex-direction:column;}"]
});
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r1c3hft5", null, {
r: [".r1c3hft5{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;}", ".r1c3hft5>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}"],
s: ["@media screen and (prefers-reduced-motion: reduce){.r1c3hft5{transition-duration:0.01ms;}}", "@media (forced-colors: active){.r1c3hft5{color:CanvasText;}.r1c3hft5>i{forced-color-adjust:none;}}", "@media screen and (prefers-reduced-motion: reduce){.r1c3hft5>*{transition-duration:0.01ms;}}"]
});
const useIndicatorStyles = /*#__PURE__*/__styles({
labelAbove: {
B6of3ja: "f1hu3pq6"
}
}, {
d: [".f1hu3pq6{margin-top:0;}"]
});
const useInputBaseClassName = /*#__PURE__*/__resetStyles("rsji9ng", "r15xih98", {
r: [".rsji9ng{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".rsji9ng:checked~.fui-Switch__indicator>*{transform:translateX(20px);}", ".rsji9ng:disabled{cursor:default;}", ".rsji9ng:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".rsji9ng:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".rsji9ng:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".rsji9ng:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".rsji9ng:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rsji9ng:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rsji9ng:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".rsji9ng:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".rsji9ng:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".rsji9ng:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".rsji9ng:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", ".r15xih98{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".r15xih98:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}", ".r15xih98:disabled{cursor:default;}", ".r15xih98:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".r15xih98:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".r15xih98:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".r15xih98:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".r15xih98:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r15xih98:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r15xih98:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".r15xih98:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".r15xih98:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".r15xih98:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".r15xih98:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}"],
s: ["@media (forced-colors: active){.rsji9ng:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rsji9ng:disabled~.fui-Switch__label{color:GrayText;}.rsji9ng:hover{color:CanvasText;}.rsji9ng:hover:active{color:CanvasText;}.rsji9ng:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rsji9ng:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rsji9ng:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}", "@media (forced-colors: active){.r15xih98:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r15xih98:disabled~.fui-Switch__label{color:GrayText;}.r15xih98:hover{color:CanvasText;}.r15xih98:hover:active{color:CanvasText;}.r15xih98:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r15xih98:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r15xih98:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"]
});
const useInputStyles = /*#__PURE__*/__styles({
before: {
j35jbq: ["f1e31b4d", "f1vgc2s3"],
Bhzewxz: "f15twtuk"
},
after: {
oyh7mz: ["f1vgc2s3", "f1e31b4d"],
Bhzewxz: "f15twtuk"
},
above: {
B5kzvoi: "f1yab3r1",
Bqenvij: "f1aar7gd",
a9b677: "fly5x3f"
}
}, {
d: [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}", ".fly5x3f{width:100%;}"]
});
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
const useLabelStyles = /*#__PURE__*/__styles({
base: {
Bceei9c: "f1k6fduh",
jrapky: "f49ad5g",
B6of3ja: "f1xlvstr",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1f5q0n8"
},
above: {
z8tnut: "f1ywm7hm",
Byoj8tv: "f14wxoun",
a9b677: "fly5x3f"
},
after: {
uwmqm3: ["fruq291", "f7x41pl"]
},
before: {
z189sj: ["f7x41pl", "fruq291"]
}
}, {
d: [".f1k6fduh{cursor:pointer;}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
p: -1
}], ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".fly5x3f{width:100%;}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}"]
});
/**
* Apply styling to the Switch slots based on the state
*/
export const useSwitchStyles_unstable = state => {
'use no memo';
const rootBaseClassName = useRootBaseClassName();
const rootStyles = useRootStyles();
const indicatorBaseClassName = useIndicatorBaseClassName();
const indicatorStyles = useIndicatorStyles();
const inputBaseClassName = useInputBaseClassName();
const inputStyles = useInputStyles();
const labelStyles = useLabelStyles();
const {
label,
labelPosition
} = state;
state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);
if (state.label) {
state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
}
return state;
};
File diff suppressed because one or more lines are too long