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
+31
View File
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Switch: function() {
return _index.Switch;
},
renderSwitch_unstable: function() {
return _index.renderSwitch_unstable;
},
switchClassName: function() {
return _index.switchClassName;
},
switchClassNames: function() {
return _index.switchClassNames;
},
useSwitchStyles_unstable: function() {
return _index.useSwitchStyles_unstable;
},
useSwitch_unstable: function() {
return _index.useSwitch_unstable;
}
});
const _index = require("./components/Switch/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Switch.ts"],"sourcesContent":["export type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './components/Switch/index';\nexport {\n Switch,\n renderSwitch_unstable,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n switchClassName,\n switchClassNames,\n useSwitchStyles_unstable,\n useSwitch_unstable,\n} from './components/Switch/index';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,MAAM;eAANA,aAAM;;IACNC,qBAAqB;eAArBA,4BAAqB;;IAErBC,eAAe;eAAfA,sBAAe;;IACfC,gBAAgB;eAAhBA,uBAAgB;;IAChBC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,kBAAkB;eAAlBA,yBAAkB;;;uBACb"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Switch", {
enumerable: true,
get: function() {
return Switch;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useSwitch = require("./useSwitch");
const _renderSwitch = require("./renderSwitch");
const _useSwitchStylesstyles = require("./useSwitchStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Switch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useSwitch.useSwitch_unstable)(props, ref);
(0, _useSwitchStylesstyles.useSwitchStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSwitchStyles_unstable')(state);
return (0, _renderSwitch.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":["Switch","React","forwardRef","props","ref","state","useSwitch_unstable","useSwitchStyles_unstable","useCustomStyleHook_unstable","renderSwitch_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;2BACY;8BACG;uCACG;qCAGG;AAKrC,MAAMA,SAAAA,WAAAA,GAA2CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQC,IAAAA,6BAAAA,EAAmBH,OAAOC;IAExCG,IAAAA,+CAAAA,EAAyBF;IAEzBG,IAAAA,gDAAAA,EAA4B,4BAA4BH;IAExD,OAAOI,IAAAA,mCAAAA,EAAsBJ;AAC/B;AAEAL,OAAOU,WAAW,GAAG"}
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("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":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Switch: function() {
return _Switch.Switch;
},
renderSwitch_unstable: function() {
return _renderSwitch.renderSwitch_unstable;
},
switchClassName: function() {
return _useSwitchStylesstyles.switchClassName;
},
switchClassNames: function() {
return _useSwitchStylesstyles.switchClassNames;
},
useSwitchStyles_unstable: function() {
return _useSwitchStylesstyles.useSwitchStyles_unstable;
},
useSwitch_unstable: function() {
return _useSwitch.useSwitch_unstable;
}
});
const _Switch = require("./Switch");
const _renderSwitch = require("./renderSwitch");
const _useSwitch = require("./useSwitch");
const _useSwitchStylesstyles = require("./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","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,MAAM;eAANA,cAAM;;IAENC,qBAAqB;eAArBA,mCAAqB;;IAI5BC,eAAe;eAAfA,sCAAe;;IACfC,gBAAgB;eAAhBA,uCAAgB;;IAChBC,wBAAwB;eAAxBA,+CAAwB;;IALjBC,kBAAkB;eAAlBA,6BAAkB;;;wBAHJ;8BAEe;2BACH;uCAM5B"}
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderSwitch_unstable", {
enumerable: true,
get: function() {
return renderSwitch_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderSwitch_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
const { labelPosition } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
labelPosition !== 'after' && state.label && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.label, {}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.indicator, {}),
labelPosition === 'after' && state.label && /*#__PURE__*/ (0, _jsxruntime.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":["renderSwitch_unstable","state","assertSlots","labelPosition","_jsxs","root","_jsx","input","label","indicator"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,wBAAwB,CAACC;IACpCC,IAAAA,2BAAAA,EAAyBD;IACzB,MAAM,EAAEE,aAAa,EAAE,GAAGF;IAE1B,OAAA,WAAA,GACEG,IAAAA,gBAAA,EAACH,MAAMI,IAAI,EAAA;;0BACTC,IAAAA,eAAA,EAACL,MAAMM,KAAK,EAAA,CAAA;YACXJ,kBAAkB,WAAWF,MAAMO,KAAK,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACL,MAAMO,KAAK,EAAA,CAAA;0BACzDF,IAAAA,eAAA,EAACL,MAAMQ,SAAS,EAAA,CAAA;YACfN,kBAAkB,WAAWF,MAAMO,KAAK,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACL,MAAMO,KAAK,EAAA,CAAA;;;AAG/D"}
@@ -0,0 +1,86 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useSwitch_unstable", {
enumerable: true,
get: function() {
return useSwitch_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactfield = require("@fluentui/react-field");
const _reacticons = require("@fluentui/react-icons");
const _reactlabel = require("@fluentui/react-label");
const _reacttabster = require("@fluentui/react-tabster");
const _reactutilities = require("@fluentui/react-utilities");
const useSwitch_unstable = (props, ref)=>{
// Merge props from surrounding <Field>, if any
props = (0, _reactfield.useFieldControlProps_unstable)(props, {
supportsLabelFor: true,
supportsRequired: true
});
const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;
const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
props,
primarySlotTagName: 'input',
excludedPropNames: [
'checked',
'defaultChecked',
'onChange'
]
});
const id = (0, _reactutilities.useId)('switch-', nativeProps.primary.id);
const root = _reactutilities.slot.always(props.root, {
defaultProps: {
ref: (0, _reacttabster.useFocusWithin)(),
...nativeProps.root
},
elementType: 'div'
});
const indicator = _reactutilities.slot.always(props.indicator, {
defaultProps: {
'aria-hidden': true,
children: /*#__PURE__*/ _react.createElement(_reacticons.CircleFilled, null)
},
elementType: 'div'
});
const input = _reactutilities.slot.always(props.input, {
defaultProps: {
checked,
defaultChecked,
id,
ref,
role: 'switch',
type: 'checkbox',
...nativeProps.primary
},
elementType: 'input'
});
input.onChange = (0, _reactutilities.mergeCallbacks)(input.onChange, (ev)=>onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
checked: ev.currentTarget.checked
}));
const label = _reactutilities.slot.optional(props.label, {
defaultProps: {
disabled,
htmlFor: id,
required,
size: 'medium'
},
elementType: _reactlabel.Label
});
return {
labelPosition,
components: {
root: 'div',
indicator: 'div',
input: 'input',
label: _reactlabel.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":["useSwitch_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","id","useId","primary","root","slot","always","defaultProps","useFocusWithin","elementType","indicator","children","React","createElement","CircleFilled","input","role","type","mergeCallbacks","ev","currentTarget","label","optional","htmlFor","size","Label","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;;iEAjBU;4BACuB;4BACjB;4BACP;8BACS;gCACwC;AAYhE,MAAMA,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQE,IAAAA,yCAAAA,EAA8BF,OAAO;QAAEG,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGV;IAE3F,MAAMW,cAAcC,IAAAA,yCAAAA,EAA0B;QAC5CZ;QACAa,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,KAAKC,IAAAA,qBAAAA,EAAM,WAAWL,YAAYM,OAAO,CAACF,EAAE;IAElD,MAAMG,OAAOC,oBAAAA,CAAKC,MAAM,CAACpB,MAAMkB,IAAI,EAAE;QACnCG,cAAc;YAAEpB,KAAKqB,IAAAA,4BAAAA;YAAkC,GAAGX,YAAYO,IAAI;QAAC;QAC3EK,aAAa;IACf;IACA,MAAMC,YAAYL,oBAAAA,CAAKC,MAAM,CAACpB,MAAMwB,SAAS,EAAE;QAC7CH,cAAc;YAAE,eAAe;YAAMI,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACC,wBAAAA,EAAAA;QAAgB;QAChEL,aAAa;IACf;IACA,MAAMM,QAAQV,oBAAAA,CAAKC,MAAM,CAACpB,MAAM6B,KAAK,EAAE;QACrCR,cAAc;YAAEhB;YAASC;YAAgBS;YAAId;YAAK6B,MAAM;YAAUC,MAAM;YAAY,GAAGpB,YAAYM,OAAO;QAAC;QAC3GM,aAAa;IACf;IACAM,MAAMpB,QAAQ,GAAGuB,IAAAA,8BAAAA,EAAeH,MAAMpB,QAAQ,EAAEwB,CAAAA,KAAMxB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWwB,IAAI;YAAE5B,SAAS4B,GAAGC,aAAa,CAAC7B,OAAO;QAAC;IACzG,MAAM8B,QAAQhB,oBAAAA,CAAKiB,QAAQ,CAACpC,MAAMmC,KAAK,EAAE;QACvCd,cAAc;YAAEd;YAAU8B,SAAStB;YAAIL;YAAU4B,MAAM;QAAS;QAChEf,aAAagB,iBAAAA;IACf;IACA,OAAO;QACL/B;QACAgC,YAAY;YAAEtB,MAAM;YAAOM,WAAW;YAAOK,OAAO;YAASM,OAAOI,iBAAAA;QAAM;QAE1ErB;QACAM;QACAK;QACAM;IACF;AACF"}
@@ -0,0 +1,212 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
switchClassName: function() {
return switchClassName;
},
switchClassNames: function() {
return switchClassNames;
},
useSwitchStyles_unstable: function() {
return useSwitchStyles_unstable;
}
});
const _react = require("@griffel/react");
const switchClassNames = {
root: 'fui-Switch',
indicator: 'fui-Switch__indicator',
input: 'fui-Switch__input',
label: 'fui-Switch__label'
};
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__*/ (0, _react.__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__*/ (0, _react.__styles)({
vertical: {
Beiy3e4: "f1vx9l62"
}
}, {
d: [
".f1vx9l62{flex-direction:column;}"
]
});
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__styles)({
labelAbove: {
B6of3ja: "f1hu3pq6"
}
}, {
d: [
".f1hu3pq6{margin-top:0;}"
]
});
const useInputBaseClassName = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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);}"
]
});
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 = (0, _react.mergeClasses)(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
state.indicator.className = (0, _react.mergeClasses)(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
state.input.className = (0, _react.mergeClasses)(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);
if (state.label) {
state.label.className = (0, _react.mergeClasses)(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
}
return state;
};
File diff suppressed because one or more lines are too long
+31
View File
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Switch: function() {
return _Switch.Switch;
},
renderSwitch_unstable: function() {
return _Switch.renderSwitch_unstable;
},
switchClassName: function() {
return _Switch.switchClassName;
},
switchClassNames: function() {
return _Switch.switchClassNames;
},
useSwitchStyles_unstable: function() {
return _Switch.useSwitchStyles_unstable;
},
useSwitch_unstable: function() {
return _Switch.useSwitch_unstable;
}
});
const _Switch = require("./Switch");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Switch,\n renderSwitch_unstable,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n switchClassName,\n switchClassNames,\n useSwitchStyles_unstable,\n useSwitch_unstable,\n} from './Switch';\nexport type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,MAAM;eAANA,cAAM;;IACNC,qBAAqB;eAArBA,6BAAqB;;IAErBC,eAAe;eAAfA,uBAAe;;IACfC,gBAAgB;eAAhBA,wBAAgB;;IAChBC,wBAAwB;eAAxBA,gCAAwB;;IACxBC,kBAAkB;eAAlBA,0BAAkB;;;wBACb"}