{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/CFPuEo9ynIELyzzdSY23/NNi2c6p9McQNnB4IwYKU/SegmentControl.js"],
  "sourcesContent": ["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport * as React from \"react\";\nimport { addPropertyControls, ControlType } from \"framer\";\nimport { motion, useAnimationControls } from \"framer-motion\";\nimport { useMeasuredSize } from \"https://framer.com/m/framer/useMeasuredSize.js\"; /**\n                                                                                  * @framerSupportedLayoutWidth any-prefer-fixed\n                                                                                  * @framerSupportedLayoutHeight any-prefer-fixed\n                                                                                  */\nexport default function SegmentControl(props) {\n  const {\n    options,\n    fontsize,\n    fontfamily,\n    fontweight,\n    color,\n    coloron,\n    bgcolor,\n    trackbg,\n    index,\n    upper,\n    padding,\n    initialwidth,\n    onChange,\n    outerradius,\n    innerradius,\n    ...rest\n  } = props; // set state variables\n  const [items, setItems] = React.useState(options) // list of items\n  ;\n  const [selected, setSelected] = React.useState(index) // item sleected\n  ;\n  const [widths, setWidths] = React.useState([]) // array with width if list items\n  ;\n  const [lefts, setLefts] = React.useState([]) // arry with lefts of the list items\n  ; // get size of the container and listen for resize\n  const ref = React.useRef();\n  const size = useMeasuredSize(ref);\n  const containerWidth = (size === null || size === void 0 ? void 0 : size.width) ? size.width : props.width; // item refs\n  const itemRefs = React.useRef(items.map(() => /*#__PURE__*/React.createRef())) // refs to item elements\n  ; // update state on prop change and set widths of child elements\n  React.useEffect(() => setItems(options), [options]);\n  React.useEffect(() => {\n    setSelected(index);\n  }, [index]); // update items width on resize\n  React.useEffect(() => {\n    const widths = itemRefs.current.map(ref => ref.current.getBoundingClientRect().width);\n    setWidths(widths);\n  }, [size]); // update items lefts on resize\n  React.useEffect(() => {\n    const lefts = itemRefs.current.map(ref => ref.current.offsetLeft);\n    setLefts(lefts);\n  }, [size]); // animation control for line\n  const controls = useAnimationControls();\n  const transtion = {\n    duration: .35,\n    ease: \"easeInOut\"\n  }; //styles\n  const wrapperStyle = {\n    display: \"block\",\n    width: \"100%\",\n    height: \"100%\",\n    backgroundColor: bgcolor,\n    borderRadius: outerradius\n  };\n  const optionsWarpperStyle = {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexDirection: \"row\",\n    gap: 0\n  };\n  const optionStyle = {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"100%\",\n    flexGrow: 1,\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    textTransform: upper ? \"uppercase\" : null,\n    flexBasis: 0,\n    whiteSpace: \"nowrap\",\n    padding: 0\n  };\n  const trackStyle = {\n    display: \"block\",\n    position: \"absolute\",\n    top: padding,\n    bottom: padding,\n    left: lefts[selected] + padding,\n    width: initialwidth,\n    backgroundColor: trackbg,\n    borderRadius: innerradius\n  };\n  const fontStyle = {\n    fontFamily: fontfamily,\n    fontSize: fontsize,\n    fontWeight: fontweight,\n    lineHeight: \"1.2em\"\n  }; // process click event\n  const didClick = async (index, name) => {\n    await controls.start({\n      width: widths[index] - padding * 2,\n      left: lefts[index] + padding,\n      transition: transtion\n    }) // animate underline to that left\n    ;\n    setSelected(index) // set the state to the selected items\n    ;\n    onChange(index, name) // advertise the item selected\n    ;\n  }; // process click event\n  const setKnob = async index => {\n    await controls.start({\n      width: widths[index] - padding * 2,\n      left: lefts[index] + padding,\n      transition: transtion\n    });\n  }; // set color based on of item is selected\n  const setColor = i => {\n    return i == selected ? coloron : color;\n  }; // render the component\n  const renderNavOptions = () => {\n    return items.map((item, i) => {\n      return /*#__PURE__*/_jsx(\"div\", {\n        ref: itemRefs.current[i],\n        style: {\n          ...optionStyle,\n          ...fontStyle,\n          color: setColor(i)\n        },\n        onClick: () => didClick(i, item),\n        children: item\n      });\n    });\n  };\n  return /*#__PURE__*/_jsxs(\"div\", {\n    style: wrapperStyle,\n    ref: ref,\n    children: [/*#__PURE__*/_jsx(motion.div, {\n      style: trackStyle,\n      animate: controls\n    }), /*#__PURE__*/_jsx(\"div\", {\n      style: optionsWarpperStyle,\n      children: renderNavOptions()\n    })]\n  });\n}\n;\nSegmentControl.defaultProps = {\n  width: 200,\n  options: [\"Option 1\", \"Option 2\"],\n  fontsize: 14,\n  fontfamily: \"Inter\",\n  color: \"rgba(0,0,0,1)\",\n  coloron: \"rgba(0,0,0,1)\",\n  trackbg: \"rgba(0,0,0,1)\",\n  index: 0,\n  fontweight: 400,\n  bgcolor: \"rgba(255,255,255,1)\",\n  upper: false,\n  tight: true,\n  gap: 8,\n  padding: 3,\n  outerradius: 5,\n  innerradius: 3,\n  initialwidth: 10,\n  onChange: () => null\n};\naddPropertyControls(SegmentControl, {\n  options: {\n    type: ControlType.Array,\n    title: \"Options\",\n    control: {\n      type: ControlType.String,\n      title: \"Option\"\n    },\n    defaultValue: [\"Option 1\", \"Option 2\"]\n  },\n  index: {\n    type: ControlType.Number,\n    title: \"Selected Option\",\n    defaultValue: 0\n  },\n  tight: {\n    type: ControlType.Boolean,\n    title: \"Tight Layout\",\n    defaultValue: true\n  },\n  gap: {\n    type: ControlType.Number,\n    title: \"Tight Layout Gap\",\n    defaultValue: 8\n  },\n  padding: {\n    type: ControlType.Number,\n    title: \"Padding\",\n    defaultValue: 3\n  },\n  fontfamily: {\n    type: ControlType.String,\n    title: \"Font Name\",\n    defaultValue: \"Inter\"\n  },\n  fontsize: {\n    type: ControlType.Number,\n    title: \"Font Size\",\n    defaultValue: 14,\n    step: 1,\n    displayStepper: true,\n    max: 100,\n    min: 1\n  },\n  fontweight: {\n    type: ControlType.Enum,\n    title: \"Font Weight\",\n    options: [100, 200, 300, 400, 500, 600, 700, 800, 900],\n    optionTitles: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"],\n    defaultValue: 400\n  },\n  bgcolor: {\n    type: ControlType.Color,\n    title: \"BG Color\",\n    defaultValue: \"rgba(255,255,255,1)\"\n  },\n  color: {\n    type: ControlType.Color,\n    title: \"Font Color\",\n    defaultValue: \"rgba(0,0,0,1)\"\n  },\n  coloron: {\n    type: ControlType.Color,\n    title: \"Font Color On\",\n    defaultValue: \"rgba(0,0,0,1)\"\n  },\n  upper: {\n    type: ControlType.Boolean,\n    title: \"Upper Case\",\n    defaultValue: false\n  },\n  initialwidth: {\n    type: ControlType.Number,\n    title: \"Line Canvas Width\",\n    defaultValue: 10,\n    step: 1,\n    displayStepper: true\n  },\n  trackbg: {\n    type: ControlType.Color,\n    title: \"Knob Color\",\n    defaultValue: \"rgba(0,0,0,1)\"\n  },\n  innerradius: {\n    type: ControlType.Number,\n    title: \"Knob Radius\",\n    defaultValue: 3\n  },\n  outerradius: {\n    type: ControlType.Number,\n    title: \"Outer Radius\",\n    defaultValue: 5\n  }\n});\nexport const __FramerMetadata__ = {\n  \"exports\": {\n    \"default\": {\n      \"type\": \"reactComponent\",\n      \"name\": \"SegmentControl\",\n      \"slots\": [],\n      \"annotations\": {\n        \"framerSupportedLayoutWidth\": \"any-prefer-fixed\",\n        \"framerSupportedLayoutHeight\": \"any-prefer-fixed\",\n        \"framerContractVersion\": \"1\"\n      }\n    },\n    \"__FramerMetadata__\": {\n      \"type\": \"variable\"\n    }\n  }\n};\n//# sourceMappingURL=./SegmentControl.map"],
  "mappings": "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",
  "names": ["SegmentControl", "props", "options", "fontsize", "fontfamily", "fontweight", "color", "coloron", "bgcolor", "trackbg", "index", "upper", "padding", "initialwidth", "onChange", "outerradius", "innerradius", "rest", "items", "setItems", "ye", "selected", "setSelected", "widths", "setWidths", "lefts", "setLefts", "ref", "pe", "size", "useMeasuredSize", "containerWidth", "itemRefs", "W", "ue", "controls", "useAnimationControls", "transtion", "wrapperStyle", "optionsWarpperStyle", "optionStyle", "trackStyle", "fontStyle", "didClick", "name", "setKnob", "setColor", "i", "renderNavOptions", "item", "p", "u", "motion", "addPropertyControls", "ControlType"]
}