{"version":3,"file":"ToggleSliderInput.jsx","names":["stylex","memo","useCallback","useState","sliderConfig","switchConfig","interaction","controlColor","color","duration","timingFunction","switchStyle","create","base","position","display","width","height","sliderStyle","inset","borderRadius","transition","default","fast","content","size","left","offset","bottom","off","backgroundColor","gray400","gray000","on","toggleCheckedBackground","transform","translationOffset","toggleCheckedPillBackground","disabledOff","gray100","disabledOn","toggleCheckedDisabledBackground","toggleCheckedDisabledPillBackground","ToggleSliderInput","props","$","_c","t0","value","undefined","onChange","FakeUncontrolledToggleSliderInput","setValue","defaultChecked","InternalStateUncontrolledToggleSliderInput","disabled","name","title","t1","e","target","checked","onChangeEffective","t2","Symbol","for","t3","hideInput","t4","t5","t6","t7"],"sources":["../src/ToggleSliderInput.tsx"],"sourcesContent":["import * as stylex from \"@stylexjs/stylex\";\nimport { type ChangeEvent, memo, useCallback, useState } from \"react\";\n\nimport { sliderConfig, switchConfig } from \"./ToggleSliderInput.vars.stylex\";\nimport { interaction } from \"./mixins\";\nimport { controlColor } from \"./theme.stylex\";\nimport { color, duration, timingFunction } from \"./tokens.stylex\";\n\nexport interface ToggleSliderInputProps {\n\tname?: string;\n\tdisabled?: boolean;\n\ttitle?: string;\n\n\t/** `value` and `onChange` are optional because we want to be able to use the control in an uncontrolled manner as well (for example, in forms) */\n\tvalue?: boolean;\n\tonChange?: (value: boolean) => void;\n\n\tdefaultChecked?: boolean;\n}\n\n// Box around the slider\n// Loosely based on:\n// https://www.w3schools.com/howto/howto_css_switch.asp\n// https://kittygiraudel.com/2021/04/05/an-accessible-toggle/#focused-styles\nconst switchStyle = stylex.create({\n\tbase: {\n\t\tposition: \"relative\",\n\t\tdisplay: \"inline-block\",\n\t\twidth: switchConfig.width,\n\t\theight: switchConfig.height,\n\t},\n});\n\nconst sliderStyle = stylex.create({\n\tbase: {\n\t\tposition: \"absolute\",\n\t\tinset: 0,\n\n\t\tborderRadius: switchConfig.width,\n\n\t\ttransition: `background-color ${duration.default} ${timingFunction.fast}`,\n\n\t\t\"::before\": {\n\t\t\tposition: \"absolute\",\n\t\t\tcontent: \"''\",\n\n\t\t\theight: sliderConfig.size,\n\t\t\twidth: sliderConfig.size,\n\t\t\tleft: sliderConfig.offset,\n\t\t\tbottom: sliderConfig.offset,\n\n\t\t\tborderRadius: \"50%\",\n\n\t\t\ttransition: `\n\t\t\t\ttransform ${duration.default} ${timingFunction.fast},\n\t\t\t\tbackground-color ${duration.default} ${timingFunction.fast}\n\t\t\t`,\n\t\t},\n\t},\n\n\toff: {\n\t\tbackgroundColor: color.gray400,\n\t\t\"::before\": {\n\t\t\tbackgroundColor: color.gray000,\n\t\t},\n\t},\n\ton: {\n\t\tbackgroundColor: controlColor.toggleCheckedBackground,\n\t\t\"::before\": {\n\t\t\ttransform: `translateX(${sliderConfig.translationOffset})`,\n\t\t\tbackgroundColor: controlColor.toggleCheckedPillBackground,\n\t\t},\n\t},\n\tdisabledOff: {\n\t\tbackgroundColor: color.gray400,\n\t\t\"::before\": {\n\t\t\tbackgroundColor: color.gray100,\n\t\t},\n\t},\n\tdisabledOn: {\n\t\tbackgroundColor: controlColor.toggleCheckedDisabledBackground,\n\t\t\"::before\": {\n\t\t\ttransform: `translateX(${sliderConfig.translationOffset})`,\n\t\t\tbackgroundColor: controlColor.toggleCheckedDisabledPillBackground,\n\t\t},\n\t},\n});\n\n/** @remarks Exported for use in Drawer */\nexport default memo(function ToggleSliderInput(props: ToggleSliderInputProps) {\n\treturn props.value !== undefined && props.onChange !== undefined ? (\n\t\t<InternalStateUncontrolledToggleSliderInput\n\t\t\t{...(props as InternalStateUncontrolledToggleSliderInputProps)}\n\t\t/>\n\t) : (\n\t\t<FakeUncontrolledToggleSliderInput\n\t\t\t{...(props as FakeUncontrolledToggleSliderInputProps)}\n\t\t/>\n\t);\n});\n\ninterface FakeUncontrolledToggleSliderInputProps\n\textends ToggleSliderInputProps {\n\tvalue?: undefined;\n\tonChange?: undefined;\n}\nconst FakeUncontrolledToggleSliderInput = memo(\n\tfunction FakeUncontrolledToggleSliderInput(\n\t\tprops: FakeUncontrolledToggleSliderInputProps,\n\t) {\n\t\tconst [value, setValue] = useState(props.defaultChecked || false);\n\t\treturn (\n\t\t\t<InternalStateUncontrolledToggleSliderInput\n\t\t\t\t{...props}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={setValue}\n\t\t\t/>\n\t\t);\n\t},\n);\n\ninterface InternalStateUncontrolledToggleSliderInputProps\n\textends ToggleSliderInputProps {\n\tvalue: boolean;\n\tonChange: (value: boolean) => void;\n}\n\n// We need to split this up into a fake uncontrolled component because StyleX does not support styling using the input's `checked` state.\n// See: https://github.com/facebook/stylex/issues/536\nconst InternalStateUncontrolledToggleSliderInput = memo(\n\tfunction FakeUncontrolledToggleSliderInput({\n\t\tvalue,\n\t\tonChange,\n\t\tdefaultChecked,\n\t\tdisabled,\n\t\tname,\n\t\ttitle,\n\t}: InternalStateUncontrolledToggleSliderInputProps) {\n\t\tconst onChangeEffective = useCallback(\n\t\t\t(e: ChangeEvent<HTMLInputElement>) => {\n\t\t\t\tonChange(e.target.checked);\n\t\t\t},\n\t\t\t[onChange],\n\t\t);\n\n\t\treturn (\n\t\t\t<span {...stylex.props(switchStyle.base)}>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t{...stylex.props(interaction.hideInput)}\n\t\t\t\t\tname={name}\n\t\t\t\t\tchecked={value}\n\t\t\t\t\tonChange={onChangeEffective}\n\t\t\t\t\tdefaultChecked={defaultChecked}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\ttitle={title}\n\t\t\t\t/>\n\t\t\t\t<span\n\t\t\t\t\t{...stylex.props(\n\t\t\t\t\t\tsliderStyle.base,\n\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t? value\n\t\t\t\t\t\t\t\t? sliderStyle.disabledOn\n\t\t\t\t\t\t\t\t: sliderStyle.disabledOff\n\t\t\t\t\t\t\t: value\n\t\t\t\t\t\t\t\t? sliderStyle.on\n\t\t\t\t\t\t\t\t: sliderStyle.off,\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</span>\n\t\t);\n\t},\n);\n"],"mappings":"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","ignoreList":[]}