{"version":3,"file":"ToggleSwitch.jsx","names":["stylex","createElement","memo","ToggleSliderInput","switchConfig","a11y","interaction","color","fontSize","size","transition","styles","create","wrapper","white900","cursor","display","gridTemplateColumns","alignItems","gap","labelGap","a11yOutline","disabled","gray100","label","textAlign","description","sub","whiteSpace","gridColumn","stack","flexDirection","px4","ToggleSwitch","props","$","_c","t0","disableTapHighlight","defaultOutline","t1","t2","t3","Symbol","for","t4","t5","t6","ToggleSwitchStack","children"],"sources":["../src/ToggleSwitch.tsx"],"sourcesContent":["import * as stylex from \"@stylexjs/stylex\";\nimport { type PropsWithChildren, createElement, memo } from \"react\";\n\nimport ToggleSliderInput from \"./ToggleSliderInput\";\nimport { switchConfig } from \"./ToggleSliderInput.vars.stylex\";\nimport { a11y, interaction } from \"./mixins\";\nimport { color, fontSize, size, transition } from \"./tokens.stylex\";\n\n// TODO: ASK-UX maybe something like this?\n// https://alvarotrigo.com/blog/toggle-switch-css/\n\nexport interface ToggleSwitchProps {\n\tlabel: string;\n\n\tname?: string;\n\tdisabled?: boolean;\n\n\t/** HTML title attribute */\n\ttitle?: string;\n\n\t/** Maximum two lines of text. */\n\tdescription?: 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\nconst styles = stylex.create({\n\twrapper: {\n\t\tcolor: color.white900,\n\n\t\tcursor: \"pointer\",\n\n\t\tdisplay: \"grid\",\n\t\tgridTemplateColumns: \"auto 1fr\",\n\t\talignItems: \"center\",\n\t\tgap: `0 ${switchConfig.labelGap}`,\n\n\t\ttransition: `${transition.a11yOutline}`,\n\t},\n\n\tdisabled: {\n\t\tcursor: \"not-allowed\",\n\t\tcolor: color.gray100,\n\t},\n\n\tlabel: {\n\t\ttextAlign: \"left\",\n\t},\n\n\tdescription: {\n\t\tfontSize: fontSize.sub,\n\t\twhiteSpace: \"pre-line\",\n\t\ttextAlign: \"left\",\n\t\tcolor: color.gray100,\n\n\t\tgridColumn: \"2\",\n\t},\n\n\tstack: {\n\t\tdisplay: \"flex\",\n\t\tflexDirection: \"column\",\n\t\tgap: size.px4,\n\t},\n});\n\nexport default memo(function ToggleSwitch(props: ToggleSwitchProps) {\n\treturn (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: <input> is inside ToggleSliderInput\n\t\t<label\n\t\t\t{...stylex.props(\n\t\t\t\tinteraction.disableTapHighlight,\n\t\t\t\ta11y.defaultOutline,\n\t\t\t\tstyles.wrapper,\n\t\t\t\tprops.disabled && styles.disabled,\n\t\t\t)}\n\t\t\taria-disabled={props.disabled}\n\t\t>\n\t\t\t<ToggleSliderInput {...props} />\n\t\t\t<span {...stylex.props(styles.label)}>{props.label}</span>\n\n\t\t\t{props.description && (\n\t\t\t\t<span {...stylex.props(styles.description)}>\n\t\t\t\t\t{props.description}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</label>\n\t);\n});\n\nexport type ToggleSwitchStackProps = PropsWithChildren;\nexport const ToggleSwitchStack = memo(function ToggleSwitchStack({\n\tchildren,\n}: ToggleSwitchStackProps) {\n\treturn createElement(\"div\", stylex.props(styles.stack), children);\n});\n"],"mappings":"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","ignoreList":[]}