koval-ui/dist/src/lib/InputColor/InputColor.cjs

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),v=require("classnames"),z=require("css-vars-hook"),A=require("../../internal/Icons/IconSwatches.cjs"),D=require("../../internal/inputs/useValidation.cjs"),G=require("../../internal/inputs/useRevalidateOnFormChange.cjs"),J=require("../../internal/inputs/useExternalValidation.cjs"),K=require("../../internal/inputs/useValidationIcon.cjs"),Q=require("../../internal/hooks/useInternalId.cjs"),U=require("../../internal/hooks/useInternalRef.cjs"),l=require("./InputColor.module.css.cjs"),u=require("./invertColor.cjs"),g=r.forwardRef(({className:q,placeholder:x="#??????",disabled:V,value:j,onChange:d=()=>{},onFocus:h=()=>{},onBlur:m=()=>{},onKeyDown:R=()=>{},onKeyUp:y=()=>{},defaultValue:N,id:b,predefinedColors:f=[],errorMessage:w,revalidateOnFormChange:T,validation:n,displayIcon:k=!0,...F},L)=>{const S=!!n,{validity:p,setValidity:O,validateTextual:B}=D.useValidation({validation:n,hasValidators:S}),c=Q.useInternalId(b),i=U.useInternalRef(L);J.useExternalValidation({errorMessage:w,inputRef:i,setValidity:O,validation:n}),G.useRevalidateOnFormChange(i,B,T);const E=K.useValidationIcon(p),{LocalRoot:M,setTheme:o}=z.useLocalTheme(),s=j??N,P=r.useMemo(()=>({"selected-color":s,"inverted-color":u.invertColor(s)}),[s]),_=r.useCallback(e=>{h(e),o({"selected-color":e.target.value,"inverted-color":u.invertColor(e.target.value)})},[h,o]),a=r.useRef(null),H=r.useCallback(e=>{o({"inverted-color":u.invertColor(e.target.value)}),a!=null&&a.current&&(a.current.innerText=e.target.value),m(e),d(e)},[o,m,d]),$=r.useCallback(e=>{o({"selected-color":e.target.value,"inverted-color":"transparent"})},[o]),C=f.length>0,I=`${c}_predefinedColors`;return t.jsxs(M,{theme:P,className:v(l.default.wrapper,q),children:[t.jsxs("div",{className:l.default.toggle,children:[t.jsx("input",{...F,id:c,ref:i,type:"color",disabled:V,defaultValue:s,className:l.default.input,onBlur:H,onKeyUp:y,onKeyDown:R,onFocus:_,onChange:$,list:C?I:void 0}),t.jsx(A.IconSwatches,{className:v(l.default.icon)})]}),t.jsx("label",{htmlFor:c,className:l.default.label,ref:a,children:s.toLowerCase()||x}),k&&p&&t.jsx(E,{}),C&&t.jsx("datalist",{id:I,children:f.map(e=>t.jsx("option",{value:e},e))})]})});g.displayName="InputColor";exports.InputColor=g;
//# sourceMappingURL=InputColor.cjs.map