@infinityfx/fluid 1.4.4 → 1.4.5

package/dist/components/input/color-picker.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as a,useState as o,useEffect as i}from"react";import{combineClasses as n,hexToRgb as t,rgbToHsv as l,classes as s,rgbToHex as c,hsvToRgb as d}from"../../core/utils.js";import u from"../display/swatch.js";import{createStyles as f}from"../../core/style.js";import m from"./slider.js";import h from"./field.js";import p from"./number-field.js";import g from"../layout/group.js";const b=f("color-picker",(e=>({".wrapper":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".row":{display:"flex",gap:"var(--f-spacing-sml)"},".column, .fields":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".column":{flexGrow:1},".space":{position:"relative",minWidth:"12em",height:"12em",borderRadius:"var(--f-radius-sml)",backgroundBlendMode:"multiply",border:"solid 1px var(--f-clr-fg-200)",flexGrow:1,userSelect:"none",cursor:"pointer",touchAction:"none"},".selection":{position:"absolute",width:"1.2em",height:"1.2em",borderRadius:"var(--f-radius-sml)",backgroundColor:"var(--color)",border:"solid 2px white",boxShadow:"var(--f-shadow-sml)",translate:"-50% -50%",cursor:"pointer",WebkitBackfaceVisibility:"hidden"},'.selection[aria-disabled="true"]':{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-300)"},".wrapper .swatch":{width:"auto",height:"auto",flexGrow:1},".wrapper .hex":{minWidth:"4.2em"},".wrapper .rgb > * ":{minWidth:"4.2em",flexGrow:1},".wrapper .hue__progress":{backgroundColor:"transparent"},".hue__track":{background:"linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",height:"100%",borderRadius:"var(--f-radius-sml)"},".wrapper .hue__handle":{borderRadius:"var(--f-radius-med)"},".hue__handle::after":{boxSizing:"border-box",border:"solid 2px white",borderRadius:"var(--f-radius-sml)"},'.hue__handle[aria-disabled="true"]::after':{borderColor:"var(--f-clr-grey-300)"},'.wrapper .hue__handle[aria-disabled="false"]::after':{backgroundColor:"var(--hue)"},[`@media (max-width: ${e.breakpoints.mob}px)`]:{".row":{flexDirection:"column"},".column":{flexDirection:"row-reverse"},".fields":{flexDirection:"column",flexGrow:1},".wrapper .swatch":{aspectRatio:1,maxHeight:"5.3em"}}})));function v({cc:f={},format:v,defaultValue:w,value:x,onChange:_,disabled:y,...k}){const C=n(b,f),j=a(!1),N=a(null),R=void 0===x?null:"string"==typeof x?t(x):x,D=void 0===w?[255,0,0]:"string"==typeof w?t(w):w,[E,G]=o(l(D)),[M,$]=o(null),[B,A]=R?[R]:o(D),L=function(e,r){const[a,o,i]=d(r);return a==e[0]&&o==e[1]&&i==e[2]}(B,E)?E:l(B),S=a(L);function W(e,r=!1){A?.(e),_?.("rgb"===v?e:c(e)),r&&(S.current=l(e)),G(S.current)}function z(e){if(!j.current||!N.current||y)return;const{clientX:r,clientY:a}="touches"in e?e.changedTouches[0]:e;let{x:o,y:i,width:n,height:t}=N.current.getBoundingClientRect();S.current[1]=100*Math.min(Math.max(r-o+.5,0)/n,1),S.current[2]=100*(1-Math.min(Math.max(a-i+.5,0)/t,1)),W(d(S.current))}return i((()=>{const e=new AbortController,r=e.signal,a=e=>{z(e),j.current=!1};return window.addEventListener("mouseup",a,{signal:r}),window.addEventListener("touchend",a,{signal:r}),window.addEventListener("mousemove",z,{signal:r}),window.addEventListener("touchmove",z,{signal:r}),()=>e.abort()}),[y]),e("div",{...k,style:{"--hue":`hsl(${L[0]}, 100%, 50%)`,"--color":`rgb(${B.join(",")})`},className:s(C.wrapper,k.className),children:[e("div",{className:C.row,children:[r("div",{ref:N,onMouseDown:e=>{j.current=!0,z(e.nativeEvent)},onTouchStart:e=>{j.current=!0,z(e.nativeEvent)},className:C.space,style:{background:`linear-gradient(90deg, transparent, hsl(${L[0]}, 100%, 50%)), linear-gradient(white, black)`},children:r("div",{"aria-disabled":y,className:C.selection,style:{left:`${L[1]}%`,top:100-L[2]+"%"}})}),e("div",{className:C.column,children:[r(u,{color:`rgb(${B.join(",")})`,cc:{swatch:C.swatch,...f}}),e("div",{className:C.fields,children:[r(h,{disabled:y,size:"sml",icon:"#",className:C.hex,value:null!==M?M:c(B),onChange:e=>{const r=e.target.value.replace(/[^\da-fA-F]/g,"").slice(0,6);$(r),W(t(r),!0)},onBlur:()=>$(null)}),r(g,{className:C.rgb,children:B.map(((e,a)=>r(p,{cc:f,disabled:y,max:255,precision:0,controls:!1,size:"sml",icon:"RGB".charAt(a),value:e,onChange:e=>{const r=B.slice();r[a]=parseInt(e.target.value)||0,W(r,!0)}},a)))})]})]})]}),r(m,{max:360,step:.25,tooltips:"never",disabled:y,value:[L[0]],onChange:e=>{S.current[0]=e[0],W(d(S.current))},cc:{progress:C.hue__progress,track:C.hue__track,handle:C.hue__handle,...f}})]})}export{v as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as a,useState as o,useEffect as i}from"react";import{combineClasses as n,hexToRgb as t,rgbToHsv as l,classes as s,rgbToHex as c,hsvToRgb as d}from"../../core/utils.js";import u from"../display/swatch.js";import{createStyles as f}from"../../core/style.js";import m from"./slider.js";import h from"./field.js";import p from"./number-field.js";import g from"../layout/group.js";const b=f("color-picker",(e=>({".wrapper":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".row":{display:"flex",gap:"var(--f-spacing-sml)"},".column, .fields":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".column":{flexGrow:1},".space":{position:"relative",minWidth:"12em",height:"12em",borderRadius:"var(--f-radius-sml)",backgroundBlendMode:"multiply",border:"solid 1px var(--f-clr-fg-200)",flexGrow:1,userSelect:"none",cursor:"pointer",touchAction:"none"},".selection":{position:"absolute",width:"1.2em",height:"1.2em",borderRadius:"var(--f-radius-sml)",backgroundColor:"var(--color)",border:"solid 2px white",boxShadow:"var(--f-shadow-sml)",translate:"-50% -50%",cursor:"pointer",WebkitBackfaceVisibility:"hidden"},'.selection[aria-disabled="true"]':{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-300)"},".wrapper .swatch":{width:"auto",height:"auto",flexGrow:1},".wrapper .hex":{minWidth:"4.2em"},".wrapper .rgb > * ":{minWidth:"4.2em",flexGrow:1},".wrapper .hue__progress":{backgroundColor:"transparent"},".hue__track":{background:"linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",height:"100%",borderRadius:"var(--f-radius-sml)"},".wrapper .hue__handle":{borderRadius:"var(--f-radius-med)"},".wrapper .hue__handle::after":{boxSizing:"border-box",border:"solid 2px white",borderRadius:"var(--f-radius-sml)"},'.hue__handle[aria-disabled="true"]::after':{borderColor:"var(--f-clr-grey-300)"},'.wrapper .hue__handle[aria-disabled="false"]::after':{backgroundColor:"var(--hue)"},[`@media (max-width: ${e.breakpoints.mob}px)`]:{".row":{flexDirection:"column"},".column":{flexDirection:"row-reverse"},".fields":{flexDirection:"column",flexGrow:1},".wrapper .swatch":{aspectRatio:1,maxHeight:"5.3em"}}})));function w({cc:f={},format:w,defaultValue:v,value:x,onChange:_,disabled:y,...k}){const C=n(b,f),j=a(!1),N=a(null),R=void 0===x?null:"string"==typeof x?t(x):x,D=void 0===v?[255,0,0]:"string"==typeof v?t(v):v,[E,G]=o(l(D)),[M,$]=o(null),[B,A]=R?[R]:o(D),L=function(e,r){const[a,o,i]=d(r);return a==e[0]&&o==e[1]&&i==e[2]}(B,E)?E:l(B),S=a(L);function W(e,r=!1){A?.(e),_?.("rgb"===w?e:c(e)),r&&(S.current=l(e)),G(S.current)}function z(e){if(!j.current||!N.current||y)return;const{clientX:r,clientY:a}="touches"in e?e.changedTouches[0]:e;let{x:o,y:i,width:n,height:t}=N.current.getBoundingClientRect();S.current[1]=100*Math.min(Math.max(r-o+.5,0)/n,1),S.current[2]=100*(1-Math.min(Math.max(a-i+.5,0)/t,1)),W(d(S.current))}return i((()=>{const e=new AbortController,r=e.signal,a=e=>{z(e),j.current=!1};return window.addEventListener("mouseup",a,{signal:r}),window.addEventListener("touchend",a,{signal:r}),window.addEventListener("mousemove",z,{signal:r}),window.addEventListener("touchmove",z,{signal:r}),()=>e.abort()}),[y]),e("div",{...k,style:{"--hue":`hsl(${L[0]}, 100%, 50%)`,"--color":`rgb(${B.join(",")})`},className:s(C.wrapper,k.className),children:[e("div",{className:C.row,children:[r("div",{ref:N,onMouseDown:e=>{j.current=!0,z(e.nativeEvent)},onTouchStart:e=>{j.current=!0,z(e.nativeEvent)},className:C.space,style:{background:`linear-gradient(90deg, transparent, hsl(${L[0]}, 100%, 50%)), linear-gradient(white, black)`},children:r("div",{"aria-disabled":y,className:C.selection,style:{left:`${L[1]}%`,top:100-L[2]+"%"}})}),e("div",{className:C.column,children:[r(u,{color:`rgb(${B.join(",")})`,cc:{swatch:C.swatch,...f}}),e("div",{className:C.fields,children:[r(h,{disabled:y,size:"sml",icon:"#",className:C.hex,value:null!==M?M:c(B),onChange:e=>{const r=e.target.value.replace(/[^\da-fA-F]/g,"").slice(0,6);$(r),W(t(r),!0)},onBlur:()=>$(null)}),r(g,{className:C.rgb,children:B.map(((e,a)=>r(p,{cc:f,disabled:y,max:255,precision:0,controls:!1,size:"sml",icon:"RGB".charAt(a),value:e,onChange:e=>{const r=B.slice();r[a]=parseInt(e.target.value)||0,W(r,!0)}},a)))})]})]})]}),r(m,{max:360,step:.25,tooltips:"never",disabled:y,value:[L[0]],onChange:e=>{S.current[0]=e[0],W(d(S.current))},cc:{progress:C.hue__progress,track:C.hue__track,handle:C.hue__handle,...f}})]})}export{w as default};
 //# sourceMappingURL=color-picker.js.map

package/dist/components/input/date-field.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o}from"react";import t from"./field.js";import{Animatable as i}from"@infinityfx/lively";import a from"./calendar.js";import n from"../layout/popover/index.js";import{createStyles as l}from"../../core/style.js";import{combineClasses as d}from"../../core/utils.js";import s from"./button.js";import{Icon as c}from"../../core/icons.js";const m=l("date-field",(e=>({[`@media(min-width: ${e.breakpoints.mob+1}px)`]:{".calendar":{boxShadow:"var(--f-shadow-med)",border:"solid 1px var(--f-clr-fg-200)"}}})));function u({cc:l={},value:u,defaultValue:p,onChange:f,disabled:g,clearable:b,...h}){const v=d(m,l),[x,y]=void 0!==u?[u,f]:o(p||null),[j,C]=o(null);return e(n.Root,{position:"center",mobileContainer:"modal",children:[r(n.Trigger,{disabled:!0===g||h.readOnly,children:r(t,{...h,cc:l,inputMode:"none",role:"combobox","aria-haspopup":"listbox","aria-disabled":h.readOnly||!0===g||!1,type:"text",disabled:!0===g,value:null!==j?j:(S=x,S?`${S.getFullYear()}-${(S.getMonth()+1).toString().padStart(2,"0")}-${S.getDate().toString().padStart(2,"0")}`:""),onChange:e=>{C(function(e){const r=e.replace(/\D/g,"");return[r.slice(0,4),r.slice(4,6),r.slice(6,8)].filter((e=>e.length)).join("-")}(e.target.value))},onBlur:()=>{if(j){const e=new Date(j);isNaN(e.getTime())||y?.(e)}C(null)},right:b&&r(s,{compact:!0,"aria-label":"Clear date",round:h.round,size:h.size,disabled:!0===g||h.readOnly,variant:"minimal",style:{marginRight:".2em"},onClick:()=>y?.(null),children:r(c,{type:"close"})})})}),r(n.Content,{role:"listbox",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(a,{className:v.calendar,round:h.round,size:h.size,disabled:g,value:x,onChange:e=>y?.(e)})})})]});var S}export{u as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as a}from"react";import o from"./field.js";import{Animatable as t}from"@infinityfx/lively";import i from"./calendar.js";import n from"../layout/popover/index.js";import{createStyles as l}from"../../core/style.js";import{combineClasses as d}from"../../core/utils.js";import c from"./button.js";import{Icon as s}from"../../core/icons.js";const m=l("date-field",(e=>({[`@media(min-width: ${e.breakpoints.mob+1}px)`]:{".calendar":{boxShadow:"var(--f-shadow-med)",border:"solid 1px var(--f-clr-fg-200)"}},[`@media(max-width: ${e.breakpoints.mob}px)`]:{".calendar":{background:"none !important",padding:"0 !important"},".years":{background:"var(--f-clr-bg-100) !important"}}})));function p({cc:l={},value:p,defaultValue:u,onChange:f,disabled:g,clearable:b,...h}){const y=d(m,l),[v,x]=void 0!==p?[p,f]:a(u||null),[j,C]=a(null);return e(n.Root,{position:"center",mobileContainer:"modal",children:[r(n.Trigger,{disabled:!0===g||h.readOnly,children:r(o,{...h,cc:l,inputMode:"none",role:"combobox","aria-haspopup":"listbox","aria-disabled":h.readOnly||!0===g||!1,type:"text",disabled:!0===g,value:null!==j?j:(k=v,k?`${k.getFullYear()}-${(k.getMonth()+1).toString().padStart(2,"0")}-${k.getDate().toString().padStart(2,"0")}`:""),onChange:e=>{C(function(e){const r=e.replace(/\D/g,"");return[r.slice(0,4),r.slice(4,6),r.slice(6,8)].filter((e=>e.length)).join("-")}(e.target.value))},onBlur:()=>{if(j){const e=new Date(j);isNaN(e.getTime())||x?.(e)}C(null)},right:b&&r(c,{compact:!0,"aria-label":"Clear date",round:h.round,size:h.size,disabled:!0===g||h.readOnly,variant:"minimal",style:{marginRight:".2em"},onClick:()=>x?.(null),children:r(s,{type:"close"})})})}),r(n.Content,{role:"listbox",children:r(t,{id:"date-field-calendar",animate:{opacity:[0,.2,1],scale:[.9,1],duration:.2},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r(i,{cc:{calendar:y.calendar,years:y.years},round:h.round,size:h.size,disabled:g,value:v,onChange:e=>x?.(e)})})})]});var k}export{p as default};
 //# sourceMappingURL=date-field.js.map

package/dist/types/src/components/input/drop-zone.d.ts

@@ -15,4 +15,5 @@ export default function DropZone({ cc, loading, error, text, annotation, icon, p
     icon?: React.ReactNode;
     previewImages?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
-} & Omit<React.InputHTMLAttributes<HTMLDivElement>, 'defaultValue' | 'children'>): import("react/jsx-runtime").JSX.Element;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+} & Omit<React.InputHTMLAttributes<HTMLDivElement>, 'defaultValue' | 'children' | 'onChange'>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@infinityfx/fluid",
-	"version": "1.4.4",
+	"version": "1.4.5",
 	"type": "module",
 	"description": "React UI library, using zero-runtime CSS-in-JS.",
 	"main": "dist/index.js",