{"version":3,"file":"AnimatedCheckbox.CUKvZFam.mjs","names":["useState","useId","useMemo"],"sources":["https:/framerusercontent.com/modules/ncFzRK5w8lh6fP3s4QAN/ktG68hlDUnjQDC8TZIVA/AnimatedCheckbox.js"],"sourcesContent":["// Animated Checkbox component with animated SVG checkmark, property controls for label font, color, border, and more\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,startTransition,useMemo,useId,useEffect}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion}from\"framer-motion\";/**\n * Animated Checkbox\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function AnimatedCheckbox(props){const{label,checked:checkedProp,onChange,labelFont,labelColor,boxColor,checkedBoxColor,iconColor,borderColor,focusBorderColor,borderRadius,borderWidth,gap,required,errorColor,name,value,style}=props;const isStatic=useIsStaticRenderer();const[checked,setChecked]=useState(checkedProp);const[validationError,setValidationError]=useState(false);const[isFocused,setIsFocused]=useState(false);const id=useId();// SVG checkmark path\nconst checkPath=\"M 0 2.75 L 2.75 5.5 L 8.25 0\";const pathLength=11.667261123657227;// Sync with prop changes\nuseEffect(()=>{startTransition(()=>setChecked(checkedProp));},[checkedProp]);function handleToggle(){const newChecked=!checked;startTransition(()=>setChecked(newChecked));if(onChange)onChange(newChecked);// Clear validation error when checked\nif(newChecked&&validationError){startTransition(()=>setValidationError(false));}}function handleInvalid(e){e.preventDefault();startTransition(()=>setValidationError(true));}function handleFocus(){startTransition(()=>setIsFocused(true));}function handleBlur(){startTransition(()=>setIsFocused(false));}// Determine border color based on required state\nconst activeBorderColor=useMemo(()=>{if(isFocused)return focusBorderColor;if(validationError)return errorColor;return borderColor;},[isFocused,focusBorderColor,validationError,errorColor,borderColor]);const boxHeight=useMemo(()=>{const fontSize=parseFloat(labelFont.fontSize);const lineHeight=parseFloat(labelFont.lineHeight);return fontSize*lineHeight;},[labelFont.fontSize,labelFont.lineHeight]);const boxStyles={height:boxHeight,aspectRatio:\"1 / 1\",border:`${borderWidth}px solid ${activeBorderColor}`,borderRadius,background:checked?checkedBoxColor:boxColor,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",transition:\"border-color 0.15s, background 0.15s\",boxSizing:\"border-box\",flexShrink:0,cursor:\"pointer\",position:\"relative\"};const labelStyles={color:labelColor,...labelFont,userSelect:\"none\",minWidth:0,width:\"max-content\",whiteSpace:\"pre-line\",overflow:\"hidden\",textOverflow:\"ellipsis\"};return /*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",flexDirection:\"column\",width:\"100%\",...style},children:/*#__PURE__*/_jsxs(\"label\",{htmlFor:id,style:{display:\"flex\",gap,width:\"100%\",position:\"relative\",cursor:\"pointer\"},children:[/*#__PURE__*/_jsx(\"input\",{id:id,type:\"checkbox\",checked:checked,onChange:()=>handleToggle(),onInvalid:handleInvalid,onFocus:handleFocus,onBlur:handleBlur,required:required,name:name,value:value,style:{position:\"absolute\",opacity:0}}),/*#__PURE__*/_jsx(\"span\",{style:boxStyles,\"aria-hidden\":\"true\",children:(!isStatic||checked)&&/*#__PURE__*/_jsx(motion.svg,{width:\"50%\",height:\"100%\",viewBox:\"0 0 8.25 5.5\",fill:\"none\",stroke:iconColor,strokeLinecap:\"square\",strokeLinejoin:\"square\",strokeWidth:1,style:{display:\"block\",overflow:\"visible\"},children:/*#__PURE__*/_jsx(motion.path,{d:checkPath,strokeDasharray:pathLength,animate:{strokeDashoffset:checked?0:pathLength,opacity:checked?1:0},transition:{duration:.3,delay:.1,ease:[.12,.23,.5,1],opacity:{duration:checked?.15:0,delay:.1}}})})}),label&&/*#__PURE__*/_jsx(\"span\",{style:labelStyles,children:label})]})});}addPropertyControls(AnimatedCheckbox,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Checkbox label\"},name:{type:ControlType.String,title:\"Name\",defaultValue:\"\",placeholder:\"checkbox-name\"},value:{type:ControlType.String,title:\"Value\",defaultValue:\"\",placeholder:\"checkbox-value\"},checked:{type:ControlType.Boolean,title:\"Checked\",defaultValue:false},required:{type:ControlType.Boolean,title:\"Required\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"},labelFont:{type:ControlType.Font,title:\"Label Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},labelColor:{type:ControlType.Color,title:\"Label Color\",defaultValue:\"#fff\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:4,min:0},borderWidth:{type:ControlType.Number,title:\"Border Width\",defaultValue:0,min:0},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:8,min:4},boxColor:{type:ControlType.Color,title:\"Box Color\",defaultValue:\"rgba(187, 187, 187, 0.15)\"},checkedBoxColor:{type:ControlType.Color,title:\"Checked Box Color\",defaultValue:\"#fff\"},iconColor:{type:ControlType.Color,title:\"Icon Color\",defaultValue:\"#000\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"rgba(204, 204, 204, 0)\"},focusBorderColor:{type:ControlType.Color,title:\"Focus Border Color\",defaultValue:\"#fff\"},errorColor:{type:ControlType.Color,title:\"Error Border Color\",defaultValue:\"#FF5588\"}});AnimatedCheckbox.displayName=\"013 Checkbox\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AnimatedCheckbox\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AnimatedCheckbox.map"],"mappings":"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"}