{"version":3,"file":"index71.cjs","sources":["../src/atoms/segmented-control/index.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode, useEffect, useState } from \"react\";\nimport SingleChoiceStyles from \"./SegmentedControlSingleChoice.module.css\";\nimport MultiChoiceStyles from \"./SegmentedControlMultiChoice.module.css\";\nimport { useFocusHandling } from \"../../../src/hooks/useFocusHandling\";\n\nexport type SegmentedControlAtomType = {\n  className?: string;\n  label?: string;\n\n  /** Variant props */\n  size?: \"sm\" | \"md\" | \"lg\";\n  state?: \"default\" | \"selected\" | \"disabled\";\n\n  /** Custom props */\n  icon?: ReactNode;\n  type?: \"single\" | \"multi\";\n  isSelected?: boolean;\n  value?: string;\n  onClick?: (e: string) => void;\n};\n\nconst SegmentedControlSyles = {\n  single: SingleChoiceStyles,\n  multi: MultiChoiceStyles,\n};\n\nconst SegmentedControlAtom: FunctionComponent<SegmentedControlAtomType> = ({\n  className = \"\",\n  size = \"sm\",\n  state: externalState = \"default\",\n  label = \"Label\",\n  icon,\n  type = \"single\",\n  value = \"\",\n  isSelected = false,\n  onClick,\n}) => {\n  const styles = SegmentedControlSyles[type];\n  const [state, setState] = useState(externalState);\n  const [originalState] = useState(externalState);\n  const segmentedControlId = `segmented-control-${size}-${state}-${type}`;\n  const [focus, setFocus] = useState(false);\n  const { handleFocus, handleBlur } = useFocusHandling({\n    setHighlight: setFocus,\n    isDisabled: state === \"disabled\",\n  });\n\n  const handleClick = () => {\n    if (state === \"disabled\") return;\n\n    if (onClick) {\n      onClick(value);\n    }\n\n    setState(\"selected\");\n  };\n\n  useEffect(() => {\n    setState(externalState);\n  }, [externalState]);\n\n  useEffect(() => {\n    setState(\n      isSelected\n        ? \"selected\"\n        : originalState === \"disabled\"\n        ? \"disabled\"\n        : \"default\"\n    );\n  }, [isSelected]);\n\n  return (\n    <div\n      className={[\n        styles.root,\n        className,\n        \"quill-ui-next-atom\",\n        \"quill-ui-next-no-select\",\n        label === \"\" && \"quill-ui-next-fit-content\",\n        state !== \"disabled\" && \"quill-ui-next-pointer\",\n      ].join(\" \")}\n      data-id={segmentedControlId}\n      data-size={size}\n      data-state={state}\n      tabIndex={state === \"disabled\" ? -1 : 0}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onClick={handleClick}\n    >\n      {icon && <div className={styles.customIcon}>{icon}</div>}\n      {label && <div className={styles.label}>{label}</div>}\n      {focus && <div className={styles.bgFocus} />}\n      {/* This element is important to have a reference icon color */}\n      <span className={`quill-ui-next-hide ${styles.label}`}></span>\n    </div>\n  );\n};\n\nexport default SegmentedControlAtom;\n"],"names":["SingleChoiceStyles","MultiChoiceStyles","useState","useFocusHandling","useEffect","jsxs","jsx"],"mappings":";;;;;;AAqBA,MAAM,wBAAwB;AAAA,EAC5B,QAAQA,oCAAA;AAAA,EACR,OAAOC,mCAAAA;AACT;AAEA,MAAM,uBAAoE,CAAC;AAAA,EACzE,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,OAAO,gBAAgB;AAAA,EACvB,QAAQ;AAAA,EACR;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AACF,MAAM;AACE,QAAA,SAAS,sBAAsB,IAAI;AACzC,QAAM,CAAC,OAAO,QAAQ,IAAIC,MAAAA,SAAS,aAAa;AAChD,QAAM,CAAC,aAAa,IAAIA,MAAA,SAAS,aAAa;AAC9C,QAAM,qBAAqB,qBAAqB,IAAI,IAAI,KAAK,IAAI,IAAI;AACrE,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,KAAK;AACxC,QAAM,EAAE,aAAa,WAAW,IAAIC,kCAAiB;AAAA,IACnD,cAAc;AAAA,IACd,YAAY,UAAU;AAAA,EAAA,CACvB;AAED,QAAM,cAAc,MAAM;AACxB,QAAI,UAAU,WAAY;AAE1B,QAAI,SAAS;AACX,cAAQ,KAAK;AAAA,IAAA;AAGf,aAAS,UAAU;AAAA,EACrB;AAEAC,QAAAA,UAAU,MAAM;AACd,aAAS,aAAa;AAAA,EAAA,GACrB,CAAC,aAAa,CAAC;AAElBA,QAAAA,UAAU,MAAM;AACd;AAAA,MACE,aACI,aACA,kBAAkB,aAClB,aACA;AAAA,IACN;AAAA,EAAA,GACC,CAAC,UAAU,CAAC;AAGb,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,MAAM;AAAA,QAChB,UAAU,cAAc;AAAA,MAAA,EACxB,KAAK,GAAG;AAAA,MACV,WAAS;AAAA,MACT,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,UAAU,UAAU,aAAa,KAAK;AAAA,MACtC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MAER,UAAA;AAAA,QAAA,QAASC,2BAAAA,IAAA,OAAA,EAAI,WAAW,OAAO,YAAa,UAAK,MAAA;AAAA,QACjD,SAAUA,2BAAAA,IAAA,OAAA,EAAI,WAAW,OAAO,OAAQ,UAAM,OAAA;AAAA,QAC9C,SAASA,2BAAA,IAAC,OAAI,EAAA,WAAW,OAAO,SAAS;AAAA,uCAEzC,QAAK,EAAA,WAAW,sBAAsB,OAAO,KAAK,GAAI,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACzD;AAEJ;;"}