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