react-dynamic-inputs
Version:
Lightweight component for creating dynamic inputs
1 lines • 2.92 kB
Source Map (JSON)
{"version":3,"sources":["index.css"],"names":[],"mappings":"AACA,WACI,UACJ,CAEA,cAGI,QAEJ,CAEA,mCANI,YAAa,CACb,qBAAsB,CAEtB,UAQJ,CALA,qBAGI,UAEJ,CAEA,WACI,UACJ,CAEA,kBAEI,kBAAmB,CADnB,YAAa,CAEb,SAAW,CACX,UACJ,CAEA,YAGI,wBAAyB,CACzB,qBAAuB,CAHvB,MAAO,CAIP,cAAe,CACf,eAAgB,CAJhB,oBAAuB,CAKvB,8BACJ,CAEA,kBAEI,wBAAyB,CACzB,4BAA6B,CAF7B,YAGJ,CAEA,iBAEI,kBAAmB,CAGnB,wBAAyB,CACzB,WAAY,CACZ,oBAAqB,CACrB,cAAe,CAPf,YAAa,CAEb,sBAAuB,CACvB,cAAgB,CAKhB,8BACJ,CAEA,uBACI,wBAAyB,CACzB,aACJ,CAEA,0BACI,UAAY,CACZ,mBACJ,CAEA,cAEI,wBAAyB,CAEzB,WAAY,CACZ,qBAAuB,CAFvB,UAAY,CAIZ,cAAe,CADf,cAAe,CALf,kBAAoB,CAOpB,2CACJ,CAEA,oBACI,wBACJ,CAQA,sCACI,UAAY,CACZ,mBACJ,CAEA,wBACI,oBACJ,CAEA,8BACI,4BACJ,CAEA,0BACI,oBACJ,CAEA,gCACI,4BACJ","file":"index.esm.css","sourcesContent":["/* Dynamic Input React Component Styles */\r\n.dir__main {\r\n width: 100%;\r\n}\r\n\r\n.dir__wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n width: 100%;\r\n}\r\n\r\n.dir__inputs-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n width: 100%;\r\n}\r\n\r\n.dir__item {\r\n width: 100%;\r\n}\r\n\r\n.dir__input-group {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n width: 100%;\r\n}\r\n\r\n.dir__input {\r\n flex: 1;\r\n padding: 0.5rem 0.75rem;\r\n border: 1px solid #d1d5db;\r\n border-radius: 0.375rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n transition: all 0.2s ease-in-out;\r\n}\r\n\r\n.dir__input:focus {\r\n outline: none;\r\n border-color: transparent;\r\n box-shadow: 0 0 0 2px #3b82f6;\r\n}\r\n\r\n.dir__remove-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.25rem;\r\n background-color: #e2e8f0;\r\n border: none;\r\n border-radius: 9999px;\r\n cursor: pointer;\r\n transition: all 0.2s ease-in-out;\r\n}\r\n\r\n.dir__remove-btn:hover {\r\n background-color: #cbd5e1;\r\n color: #dc2626;\r\n}\r\n\r\n.dir__remove-btn:disabled {\r\n opacity: 0.5;\r\n pointer-events: none;\r\n}\r\n\r\n.dir__add-btn {\r\n padding: 0.5rem 1rem;\r\n background-color: #3b82f6;\r\n color: white;\r\n border: none;\r\n border-radius: 0.375rem;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n transition: background-color 0.2s ease-in-out;\r\n}\r\n\r\n.dir__add-btn:hover {\r\n background-color: #2563eb;\r\n}\r\n\r\n.dir__add-btn:disabled {\r\n opacity: 0.5;\r\n pointer-events: none;\r\n}\r\n\r\n/* Utility classes */\r\n.dir--disabled {\r\n opacity: 0.5;\r\n pointer-events: none;\r\n}\r\n\r\n.dir--error .dir__input {\r\n border-color: #ef4444;\r\n}\r\n\r\n.dir--error .dir__input:focus {\r\n box-shadow: 0 0 0 2px #ef4444;\r\n}\r\n\r\n.dir--success .dir__input {\r\n border-color: #22c55e;\r\n}\r\n\r\n.dir--success .dir__input:focus {\r\n box-shadow: 0 0 0 2px #22c55e;\r\n}\r\n"]}