amotify/dist/fn/Input/Label.js

UI Component for React,NextJS,esbuild

import{b as n,c as d}from"../../chunk-C5N2D3ZX.js";import{jsx as m,jsxs as I}from"react/jsx-runtime";import{useState as h,useEffect as g}from"react";import a from"jmini";import{Box as S,Span as x}from"../../atoms";import{Row as y}from"../../mols";const L=t=>{let{val_status:r}=t;if(!t.label)return null;let[s,f]=h({});return g(()=>{let p=a('[data-input-origin="'+t.componentId+'"]'),i=a('[data-input-label="'+t.componentId+'"]'),u=a('[data-input-value-shallow="'+t.componentId+'"]');if(!p[0]||!i[0]||!u[0])return;let o=p.position(),e=u.position(),c=r.eventType!="init"&&!r.isValidated;if(t.isActive){let l=e.left-o.left;f({opacity:"max",backgroundColor:"layer.0.opa.high",fontColor:c?"nega":"theme",xcss:{fontSize:"12px",backdropFilter:"blur(1px)",lineHeight:1,transform:`translate(${l}px,-6px)`}})}else{let l=e.left-o.left,b=e.top-o.top;f({fontSize:t.fontSize||"inherit",opacity:"middle",backgroundColor:"trans",xcss:{lineHeight:"inherit",height:e.height,transform:`translate(${l}px,${b}px)`}})}i.getAttribute("data-label-init")=="true"&&i.setAttribute("data-label-init","false").await(10).css({transition:".25s"})},[t.isActive,t.val_status]),m(S,d(n({htmlTag:"label","data-input-label":t.componentId,"data-label-init":"true",position:"absolute",ssZIndex:2,left:0,top:0,fontColor:"4.thin",backgroundColor:"trans",flexCenter:!0,borderRadius:"1/3",opacity:"min",fontHeight:"inherit"},s),{xcss:n({transformOrigin:"top left",pointerEvents:"none"},s.xcss),children:I(y.Left,{gap:"1/3",children:[t.label,t.required&&m(x,{fontColor:"nega",children:" * "})]})}))};export{L as InputLabel};