@infinityfx/fluid/dist/components/input/color-field.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o}from"react";import a from"./field.js";import{Animatable as i}from"@infinityfx/lively";import l from"../layout/popover/index.js";import{createStyles as t}from"../../core/style.js";import{combineClasses as n,rgbToHex as d,hexToRgb as c}from"../../core/utils.js";import s from"./color-picker.js";import m from"../display/swatch.js";const p=t("color-field",(e=>({".picker":{padding:"var(--f-spacing-sml)"},".swatch":{marginLeft:".4em"},[`@media(min-width: ${e.breakpoints.mob+1}px)`]:{".picker":{boxShadow:"var(--f-shadow-med)",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-med)"}}})));function u({cc:t={},value:u,defaultValue:f,onChange:b,disabled:g,...h}){const v=n(p,t),[x,y]=void 0!==u?[u,b]:o(f||""),[j,w]=o(null);return e(l.Root,{position:"center",mobileContainer:"modal",children:[r(l.Trigger,{disabled:g,children:r(a,{...h,cc:t,inputMode:"none",left:r(m,{size:h.size,round:h.round,color:x,cc:{swatch:v.swatch,...t}}),role:"combobox","aria-haspopup":"listbox",type:"text",disabled:g,"aria-disabled":h.readOnly||g,value:null!==j?j:x,onChange:e=>{const r=(o=e.target.value,`#${d(c(o.replace(/[^\da-f]/g,"").slice(0,6)))}`);var o;w(e.target.value),y?.(r)},onBlur:()=>w(null)})}),r(l.Content,{role:"listbox","aria-multiselectable":!1,children:r(i,{id:"date-field-calendar",animate:{opacity:[0,.2,1],scale:[.9,1],duration:.2},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r("div",{className:v.picker,children:r(s,{value:x,onChange:e=>y?.(`#${e}`),disabled:h.readOnly||g})})})})]})}export{u as default};
//# sourceMappingURL=color-field.js.map