primereact/floatlabel/floatlabel.esm.min.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

import*as e from"react";import{PrimeReactContext as l}from"primereact/api";import{ComponentBase as a,useHandleStyle as t}from"primereact/componentbase";import{useMergeProps as n}from"primereact/hooks";import{ObjectUtils as o,classNames as p}from"primereact/utils";var r=a.extend({defaultProps:{__TYPE:"FloatLabel",children:void 0},css:{classes:{root:"p-float-label"},styles:"\n@layer primereact {\n    .p-float-label {\n        display: block;\n        position: relative;\n    }\n    \n    .p-float-label label {\n        position: absolute;\n        pointer-events: none;\n        top: 50%;\n        margin-top: -.5rem;\n        transition-property: all;\n        transition-timing-function: ease;\n        line-height: 1;\n    }\n    \n    .p-float-label:has(textarea) label {\n        top: 1rem;\n    }\n    \n    .p-float-label:has(input:focus) label,\n    .p-float-label:has(input.p-filled) label,\n    .p-float-label:has(input:-webkit-autofill) label,\n    .p-float-label:has(textarea:focus) label,\n    .p-float-label:has(textarea.p-filled) label,\n    .p-float-label:has(.p-inputwrapper-focus) label,\n    .p-float-label:has(.p-inputwrapper-filled) label {\n        top: -.75rem;\n        font-size: 12px;\n    }\n    \n    .p-float-label .p-placeholder,\n    .p-float-label input::placeholder,\n    .p-float-label .p-inputtext::placeholder {\n        opacity: 0;\n        transition-property: all;\n        transition-timing-function: ease;\n    }\n    \n    .p-float-label .p-focus .p-placeholder,\n    .p-float-label input:focus::placeholder,\n    .p-float-label .p-inputtext:focus::placeholder {\n        opacity: 1;\n        transition-property: all;\n        transition-timing-function: ease;\n    }\n}"}}),i=e.memo(e.forwardRef((function(a,i){var s=n(),f=e.useContext(l),c=r.getProps(a,f),b=e.useRef(i),m=r.setMetaData({props:c}),u=m.ptm,h=m.cx;t(r.css.styles,m.isUnstyled,{name:"floatlabel"}),e.useEffect((function(){o.combinedRefs(b,i)}),[b,i]);var d=s({ref:b,className:p(h("root"))},r.getOtherProps(c),u("root"));return e.createElement("span",d,c.children)})));i.displayName="FloatLabel";export{i as FloatLabel};