@nild/components 0.0.55 → 0.0.56

package/dist/color-picker/Area.js

@@ -1 +1 @@
-import{jsxs as p,jsx as r}from"react/jsx-runtime";import a from"./style/index.js";const s=({controller:t,disabled:e=!1,formattedValue:l})=>{const{areaLightnessStyle:o,areaRef:n,areaSaturationStyle:i,areaStyle:d,areaThumbStyle:y,onKeyDown:m,onPointerDown:c}=t;return p("div",{"aria-label":"Saturation and lightness","aria-valuetext":l,className:a.area({disabled:e}),"data-disabled":e||void 0,onKeyDown:m,onPointerDown:c,ref:n,role:"application",style:d,tabIndex:e?-1:0,children:[r("span",{className:a.areaLayer(),style:i}),r("span",{className:a.areaLayer(),style:o}),r("span",{className:a.areaThumb(),style:y})]})};s.displayName="ColorPicker.Area";export{s as default};
+import{jsxs as u,jsx as r}from"react/jsx-runtime";import a from"./style/index.js";const l=({controller:t,disabled:e=!1,formattedValue:o})=>{const{areaRef:s,areaSaturationStyle:n,areaStyle:i,areaThumbStyle:d,areaValueStyle:y,onKeyDown:m,onPointerDown:c}=t;return u("div",{"aria-label":"Saturation and value","aria-valuetext":o,className:a.area({disabled:e}),"data-disabled":e||void 0,onKeyDown:m,onPointerDown:c,ref:s,role:"application",style:i,tabIndex:e?-1:0,children:[r("span",{className:a.areaLayer(),style:n}),r("span",{className:a.areaLayer(),style:y}),r("span",{className:a.areaThumb(),style:d})]})};l.displayName="ColorPicker.Area";export{l as default};

package/dist/color-picker/ColorPicker.js

@@ -1 +1 @@
-import{jsxs as q,jsx as r}from"react/jsx-runtime";import{useEffectCallback as t}from"@nild/hooks";import{forwardRef as G,useMemo as J,useRef as Q,useState as W}from"react";import"@nild/shared";import X from"../_shared/utils/register-slots/index.js";import n from"../popup/index.js";import{DEFAULT_PRESET_COLORS as Y}from"./_shared/color.js";import Z from"./DefaultTrigger.js";import $ from"./hooks/useColorArea.js";import ee from"./hooks/useColorPickerState.js";import oe from"./Panel.js";import{isTriggerElement as ae}from"./Trigger.js";const re=X({trigger:{isMatched:ae}}),g=G((C,h)=>{const{className:b,children:i,value:v,defaultValue:E,format:k,defaultFormat:D="hex",onChange:F,onFormatChange:w,presets:x=Y,size:y="medium",disabled:o=!1,placement:I="bottom-start",offset:V=8,portalClassName:N,onKeyDown:f,...R}=C,{slots:T}=J(()=>re(i),[i]),u=Q(null),[P,l]=W(!1),s=P&&!o,{color:p,commitColor:c,draftValue:K,format:O,formattedValue:S,hex:j,inputInvalid:z,meta:d,completeInput:L,updateFormat:M,updateInput:_}=ee({defaultFormat:D,defaultValue:E,format:k,onChange:F,onFormatChange:w,value:v}),A=$({color:p,disabled:o,onCommitColor:c}),m=t((e=!1)=>{var a;l(!1),e&&((a=u.current)==null||a.focus())}),B=t(()=>{o||l(!0)}),H=t(e=>{e.key==="Escape"&&(e.preventDefault(),m(!0))}),U=t(e=>{if(f?.(e),!(e.defaultPrevented||o))switch(e.key){case"Enter":case" ":e.preventDefault(),l(a=>!a);break;case"Escape":s&&(e.preventDefault(),m(!0));break}});return q(n,{action:"click",arrowed:!1,disabled:o,offset:V,open:s,placement:I,onClose:()=>m(),onOpen:B,children:[r(n.Trigger,{children:r(Z,{...R,className:b,colorCss:d.css,customTrigger:T.trigger.el,disabled:o,open:s,ref:h,size:y,triggerRef:u,onKeyDown:U})}),r(n.Portal,{className:N,children:r(oe,{area:A,color:p,disabled:o,draftValue:K,format:O,formattedValue:S,inputInvalid:z,meta:d,presets:x,selectedHex:j,onCommitColor:c,onFormatChange:M,onInputBlur:L,onInputChange:_,onKeyDown:H})})]})});g.displayName="ColorPicker";export{g as default};
+import{jsxs as Q,jsx as r}from"react/jsx-runtime";import{useEffectCallback as t}from"@nild/hooks";import{forwardRef as W,useMemo as X,useRef as Y,useState as Z}from"react";import"@nild/shared";import $ from"../_shared/utils/register-slots/index.js";import i from"../popup/index.js";import{DEFAULT_PRESET_COLORS as ee}from"./_shared/color.js";import oe from"./DefaultTrigger.js";import ae from"./hooks/useColorArea.js";import re from"./hooks/useColorPickerState.js";import te from"./Panel.js";import{isTriggerElement as se}from"./Trigger.js";const le=$({trigger:{isMatched:se}}),C=W((g,h)=>{const{className:b,children:u,value:v,defaultValue:E,format:k,defaultFormat:D="hex",onChange:F,onFormatChange:w,presets:x=ee,size:y="medium",disabled:o=!1,placement:I="bottom-start",offset:V=8,portalClassName:N,onKeyDown:f,...R}=g,{slots:T}=X(()=>le(u),[u]),p=Y(null),[P,s]=Z(!1),l=P&&!o,{color:c,commitColor:d,css:n,draftValue:H,format:K,formattedValue:O,hex:S,hue:j,inputInvalid:q,opaqueCss:z,completeInput:L,updateFormat:M,updateHue:_,updateInput:A}=re({defaultFormat:D,defaultValue:E,format:k,onChange:F,onFormatChange:w,value:v}),B=ae({color:c,colorCss:n,disabled:o,onCommitColor:d}),m=t((e=!1)=>{var a;s(!1),e&&((a=p.current)==null||a.focus())}),U=t(()=>{o||s(!0)}),G=t(e=>{e.key==="Escape"&&(e.preventDefault(),m(!0))}),J=t(e=>{if(f?.(e),!(e.defaultPrevented||o))switch(e.key){case"Enter":case" ":e.preventDefault(),s(a=>!a);break;case"Escape":l&&(e.preventDefault(),m(!0));break}});return Q(i,{action:"click",arrowed:!1,disabled:o,offset:V,open:l,placement:I,onClose:()=>m(),onOpen:U,children:[r(i.Trigger,{children:r(oe,{...R,className:b,colorCss:n,customTrigger:T.trigger.el,disabled:o,open:l,ref:h,size:y,triggerRef:p,onKeyDown:J})}),r(i.Portal,{className:N,children:r(te,{area:B,color:c,colorCss:n,disabled:o,draftValue:H,format:K,formattedValue:O,hue:j,inputInvalid:q,opaqueColorCss:z,presets:x,selectedHex:S,onCommitColor:d,onFormatChange:M,onHueChange:_,onInputBlur:L,onInputChange:A,onKeyDown:G})})]})});C.displayName="ColorPicker";export{C as default};

package/dist/color-picker/Panel.d.ts

@@ -1,15 +1,17 @@
 import { KeyboardEventHandler } from 'react';
-import { HslaColor } from './_shared/color';
-import { ColorFormat, ColorPickerMeta, ColorPickerPreset } from './interfaces';
+import { ColorFormat, ColorPickerPreset } from './interfaces';
+import { HsvaColor } from './_shared/color';
 import { ColorAreaController } from './hooks/useColorArea';
 import { CommitColor } from './hooks/useColorPickerState';
 interface PanelProps {
     area: ColorAreaController;
-    color: HslaColor;
+    color: HsvaColor;
+    colorCss: string;
     draftValue: string;
     format: ColorFormat;
     formattedValue: string;
-    meta: ColorPickerMeta;
+    hue: number;
+    opaqueColorCss: string;
     presets: ColorPickerPreset[];
     selectedHex: string;
     className?: string;
@@ -17,12 +19,13 @@ interface PanelProps {
     inputInvalid?: boolean;
     onCommitColor: CommitColor;
     onFormatChange: (format: ColorFormat) => void;
+    onHueChange: (hue: number) => void;
     onInputBlur: () => void;
     onInputChange: (value: string | number) => void;
     onKeyDown: KeyboardEventHandler<HTMLDivElement>;
 }
 declare const Panel: {
-    ({ area, className, color, disabled, draftValue, format, formattedValue, inputInvalid, meta, onCommitColor, onFormatChange, onInputBlur, onInputChange, onKeyDown, presets, selectedHex, }: PanelProps): JSX.Element;
+    ({ area, className, color, colorCss, disabled, draftValue, format, formattedValue, hue, inputInvalid, onCommitColor, onFormatChange, onHueChange, onInputBlur, onInputChange, onKeyDown, opaqueColorCss, presets, selectedHex, }: PanelProps): JSX.Element;
     displayName: string;
 };
 export default Panel;

package/dist/color-picker/Panel.js

@@ -1 +1 @@
-import{jsx as o,jsxs as n}from"react/jsx-runtime";import{useIsomorphicLayoutEffect as P}from"@nild/hooks";import{cnMerge as V}from"@nild/shared";import{useState as j,useMemo as M}from"react";import{getCheckerboardStyle as T}from"./_shared/checkerboard.js";import{getColorCss as m,normalizeHue as c,getHueCss as z}from"./_shared/color.js";import A from"./Area.js";import B from"./PresetGrid.js";import d from"./SliderControl.js";import r from"./style/index.js";import D from"./Swatch.js";import E from"./ValueControls.js";const F=T("linear-gradient(to right, transparent, var(--nd-color-picker-alpha-color))"),p=({area:h,className:u,color:a,disabled:e=!1,draftValue:f,format:C,formattedValue:b,inputInvalid:g=!1,meta:k,onCommitColor:t,onFormatChange:v,onInputBlur:y,onInputChange:I,onKeyDown:N,presets:x,selectedHex:w})=>{const[l,i]=j(a.h),S=M(()=>({"--nd-color-picker-alpha-color":m({h:a.h,s:a.s,l:a.l,alpha:1})}),[a.h,a.l,a.s]);P(()=>{c(l)!==c(a.h)&&i(a.h)},[a.h,l]);const H=s=>{i(s),t({...a,h:s})};return o("div",{"aria-label":"Color picker",className:V(u,r.panel()),onKeyDown:N,role:"dialog",tabIndex:-1,children:n("div",{className:r.stack(),children:[o(A,{controller:h,disabled:e,formattedValue:b}),n("div",{className:r.sliderPreviewRow(),children:[n("div",{className:r.sliderStack(),children:[o(d,{disabled:e,label:"Hue",max:360,min:0,step:1,trackClassName:r.hueTrack(),thumbStyle:{backgroundColor:z(l)},value:l,onChange:H}),o(d,{disabled:e,label:"Alpha",max:1,min:0,step:.01,style:S,trackClassName:r.alphaTrack(),trackStyle:F,thumbStyle:{backgroundColor:m(a)},value:a.alpha,onChange:s=>t({...a,alpha:s})})]}),o("span",{className:r.previewSwatch(),children:o(D,{css:k.css})})]}),o(E,{disabled:e,draftValue:f,format:C,inputInvalid:g,onFormatChange:v,onInputBlur:y,onInputChange:I}),o(B,{disabled:e,presets:x,selectedHex:w,onCommitColor:t})]})})};p.displayName="ColorPicker.Panel";export{p as default};
+import{jsx as a,jsxs as o}from"react/jsx-runtime";import{cnMerge as H}from"@nild/shared";import{useMemo as S}from"react";import{getCheckerboardStyle as V}from"./_shared/checkerboard.js";import{getHueCss as j}from"./_shared/color.js";import M from"./Area.js";import P from"./PresetGrid.js";import m from"./SliderControl.js";import e from"./style/index.js";import T from"./Swatch.js";import A from"./ValueControls.js";const B=V("linear-gradient(to right, transparent, var(--nd-color-picker-alpha-color))"),d=({area:c,className:p,color:l,colorCss:t,disabled:r=!1,draftValue:u,format:h,formattedValue:C,hue:s,inputInvalid:f=!1,onCommitColor:n,onFormatChange:b,onHueChange:g,onInputBlur:k,onInputChange:v,onKeyDown:x,opaqueColorCss:i,presets:N,selectedHex:y})=>{const w=S(()=>({"--nd-color-picker-alpha-color":i}),[i]);return a("div",{"aria-label":"Color picker",className:H(p,e.panel()),onKeyDown:x,role:"dialog",tabIndex:-1,children:o("div",{className:e.stack(),children:[a(M,{controller:c,disabled:r,formattedValue:C}),o("div",{className:e.sliderPreviewRow(),children:[o("div",{className:e.sliderStack(),children:[a(m,{disabled:r,label:"Hue",max:360,min:0,step:1,trackClassName:e.hueTrack(),thumbStyle:{backgroundColor:j(s)},value:s,onChange:g}),a(m,{disabled:r,label:"Alpha",max:1,min:0,step:.01,style:w,trackClassName:e.alphaTrack(),trackStyle:B,thumbStyle:{backgroundColor:t},value:l.alpha,onChange:I=>n({...l,alpha:I})})]}),a("span",{className:e.previewSwatch(),children:a(T,{css:t})})]}),a(A,{disabled:r,draftValue:u,format:h,inputInvalid:f,onFormatChange:b,onInputBlur:k,onInputChange:v}),a(P,{disabled:r,presets:N,selectedHex:y,onCommitColor:n})]})})};d.displayName="ColorPicker.Panel";export{d as default};

package/dist/color-picker/PresetGrid.js

@@ -1 +1 @@
-import{jsx as s,jsxs as u}from"react/jsx-runtime";import{Icon as C}from"@nild/icons";import f from"@nild/icons/CheckSmall";import{useMemo as h}from"react";import{parseColorValue as b,getColorState as x,getReadableTextColor as k}from"./_shared/color.js";import a from"./style/index.js";import v from"./Swatch.js";const c=({disabled:i=!1,onCommitColor:m,presets:t,selectedHex:n})=>{const p=h(()=>t.flatMap(e=>{const o=typeof e=="string"?e:e.value,r=b(o);if(!r)return[];const l=x(r,"hex");return{checkColor:k(r),color:r,css:l.meta.css,hex:l.hex.toLowerCase(),label:typeof e=="string"?e:e.label??o,value:o}}),[t]),d=n.toLowerCase();return s("div",{"aria-label":"Preset colors",className:a.presets(),children:p.map(e=>{const o=e.hex===d;return u("button",{"aria-label":e.label,"aria-pressed":o,className:a.preset(),disabled:i,onClick:()=>m(e.color),type:"button",children:[s(v,{css:e.css}),o&&s("span",{"aria-hidden":"true",className:a.presetCheck(),style:{color:e.checkColor},children:s(C,{className:a.presetCheckIcon(),component:f})})]},e.value)})})};c.displayName="ColorPicker.PresetGrid";export{c as default};
+import{jsx as a,jsxs as u}from"react/jsx-runtime";import{Icon as C}from"@nild/icons";import f from"@nild/icons/CheckSmall";import{useMemo as h}from"react";import{parseColorValue as b,getColorState as x,getReadableTextColor as k}from"./_shared/color.js";import o from"./style/index.js";import v from"./Swatch.js";const c=({disabled:i=!1,onCommitColor:m,presets:t,selectedHex:n})=>{const p=h(()=>t.flatMap(e=>{const r=typeof e=="string"?e:e.value,s=b(r);if(!s)return[];const l=x(s,"hex");return{checkColor:k(s),color:s,css:l.css,hex:l.hex.toLowerCase(),label:typeof e=="string"?e:e.label??r,value:r}}),[t]),d=n.toLowerCase();return a("div",{"aria-label":"Preset colors",className:o.presets(),children:p.map(e=>{const r=e.hex===d;return u("button",{"aria-label":e.label,"aria-pressed":r,className:o.preset(),disabled:i,onClick:()=>m(e.color),type:"button",children:[a(v,{css:e.css}),r&&a("span",{"aria-hidden":"true",className:o.presetCheck(),style:{color:e.checkColor},children:a(C,{className:o.presetCheckIcon(),component:f})})]},e.value)})})};c.displayName="ColorPicker.PresetGrid";export{c as default};

package/dist/color-picker/ValueControls.js

@@ -1 +1 @@
-import{jsxs as r,jsx as a}from"react/jsx-runtime";import c from"../input/index.js";import l from"../segment/index.js";import e from"./style/index.js";const n=({disabled:i=!1,draftValue:s,format:t,inputInvalid:o=!1,onFormatChange:m,onInputBlur:d,onInputChange:u})=>r("div",{className:e.inputStack(),children:[r(l,{"aria-label":"Color format",block:!0,className:e.formatSegment(),disabled:i,size:"small",value:t,onChange:m,children:[a(l.Item,{value:"hex",children:"HEX"}),a(l.Item,{value:"rgb",children:"RGB"}),a(l.Item,{value:"hsl",children:"HSL"})]}),a(c,{"aria-invalid":o||void 0,"aria-label":"Color value",className:e.valueInput({invalid:o}),disabled:i,size:"small",value:s,onBlur:d,onChange:u})]});n.displayName="ColorPicker.ValueControls";export{n as default};
+import{jsxs as o,jsx as a}from"react/jsx-runtime";import v from"../input/index.js";import l from"../segment/index.js";import e from"./style/index.js";const n=({disabled:i=!1,draftValue:s,format:t,inputInvalid:r=!1,onFormatChange:m,onInputBlur:d,onInputChange:u})=>o("div",{className:e.inputStack(),children:[o(l,{"aria-label":"Color format",block:!0,className:e.formatSegment(),disabled:i,size:"small",value:t,onChange:m,children:[a(l.Item,{value:"hex",children:"HEX"}),a(l.Item,{value:"rgb",children:"RGB"}),a(l.Item,{value:"hsv",children:"HSV"}),a(l.Item,{value:"hsl",children:"HSL"})]}),a(v,{"aria-invalid":r||void 0,"aria-label":"Color value",className:e.valueInput({invalid:r}),disabled:i,size:"small",value:s,onBlur:d,onChange:u})]});n.displayName="ColorPicker.ValueControls";export{n as default};

package/dist/color-picker/_shared/checkerboard.d.ts

@@ -1,7 +1,4 @@
-import { CSSProperties } from 'react';
-export type CheckerboardStyle = CSSProperties & {
-    '--nd-color-picker-checker-base'?: string;
-    '--nd-color-picker-checker-color'?: string;
-};
+import { CSSPropertiesWithVars } from '@nild/shared';
+export type CheckerboardStyle = CSSPropertiesWithVars;
 export declare const CHECKERBOARD_STYLE: CheckerboardStyle;
 export declare const getCheckerboardStyle: (overlayImage?: string) => CheckerboardStyle;

package/dist/color-picker/_shared/color.d.ts

@@ -1,14 +1,16 @@
 import { ColorFormat, ColorPickerMeta } from '../interfaces';
-export interface HslaColor {
+export interface HsvaColor {
     h: number;
     s: number;
-    l: number;
+    v: number;
     alpha: number;
 }
 export interface ColorState {
+    css: string;
     formattedValue: string;
     hex: string;
     meta: ColorPickerMeta;
+    opaqueCss: string;
 }
 export declare const normalizeHue: (hue: number | undefined) => number;
 export declare const createHexColor: (r: number, g: number, b: number, alpha?: number) => string;
@@ -16,9 +18,8 @@ export declare const DEFAULT_COLOR: string;
 export declare const DEFAULT_PRESET_COLORS: string[];
 export declare const BLACK_COLOR: string;
 export declare const WHITE_COLOR: string;
-export declare const parseColorValue: (value: string | undefined) => HslaColor | undefined;
-export declare const normalizeColor: (color: HslaColor) => HslaColor;
+export declare const parseColorValue: (value: string | undefined) => HsvaColor | undefined;
+export declare const normalizeColor: (color: HsvaColor) => HsvaColor;
 export declare const getHueCss: (hue: number) => string;
-export declare const getColorCss: (color: HslaColor) => string;
-export declare const getReadableTextColor: (color: HslaColor) => string;
-export declare const getColorState: (color: HslaColor, format: ColorFormat) => ColorState;
+export declare const getReadableTextColor: (color: HsvaColor) => string;
+export declare const getColorState: (color: HsvaColor, format: ColorFormat) => ColorState;

package/dist/color-picker/_shared/color.js

@@ -1 +1 @@
-import{useMode as S}from"../../node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/modes.js";import T from"../../node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/converter.js";import{formatHex8 as F,formatHex as v}from"../../node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/formatter.js";import z from"../../node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/rgb/definition.js";import D from"../../node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/hsl/definition.js";const U="#";S(z),S(D);const c=T("rgb"),V=T("hsl"),B=160,m=(a,r,s)=>Math.min(Math.max(a,r),s),e=(a,r=0)=>m(a??r,0,1),g=a=>a===void 0||Number.isNaN(a)?0:(a%360+360)%360,i=a=>m(Math.round(a),0,255).toString(16).padStart(2,"0"),n=(a,r=2)=>Number(a.toFixed(r)),t=(a,r=2)=>`${n(a,r)}`,_=a=>({r:m(Math.round(a.r*255),0,255),g:m(Math.round(a.g*255),0,255),b:m(Math.round(a.b*255),0,255)}),$=(a,r,s,l=1)=>{const h=`${U}${i(a)}${i(r)}${i(s)}`;return l<1?`${h}${i(l*255)}`:h},I=$(22,119,255),W=[[22,119,255],[19,194,194],[82,196,26],[250,173,20],[245,34,45],[114,46,209],[0,0,0],[255,255,255]].map(([a,r,s])=>$(a,r,s)),x=$(0,0,0),N=$(255,255,255),j=a=>{const r=a?.trim();if(!r)return;const s=c(r),l=V(r);if(!(!s||!l))return{h:g(l.h),s:e(l.s),l:e(l.l),alpha:e(l.alpha??s.alpha,1)}},b=a=>({h:g(a.h),s:e(a.s),l:e(a.l),alpha:e(a.alpha,1)}),k=a=>`hsl(${t(g(a))} 100% 50%)`,w=a=>{const r=b(a),s=t(r.h),l=t(r.s*100),h=t(r.l*100);return`hsl(${s} ${l}% ${h}% / ${t(r.alpha)})`},K=a=>{const r=b(a),s=c({mode:"hsl",h:r.h,s:r.s,l:r.l,alpha:1});if(!s)return x;const{r:l,g:h,b:o}=_(s);return(l*299+h*587+o*114)/1e3>=B?x:N},P=(a,r)=>{const s=b(a),l={mode:"hsl",h:s.h,s:s.s,l:s.l,alpha:s.alpha},h=c(l),{r:o,g:p,b:u}=_(h),O={mode:"rgb",r:o/255,g:p/255,b:u/255,alpha:s.alpha},d=s.alpha<1,L=t(s.alpha),f=d?F(O):v(O),M=t(s.h),H=t(s.s*100),R=t(s.l*100),E={hex:f,rgb:d?`rgba(${o}, ${p}, ${u}, ${L})`:`rgb(${o}, ${p}, ${u})`,hsl:d?`hsla(${M}, ${H}%, ${R}%, ${L})`:`hsl(${M}, ${H}%, ${R}%)`},C={alpha:n(s.alpha),css:E.rgb,valid:!0},A=r==="rgb"?{...C,b:u,format:r,g:p,r:o}:r==="hsl"?{...C,format:r,h:n(s.h),l:n(s.l*100),s:n(s.s*100)}:{...C,format:r,hex:f};return{formattedValue:E[r],hex:f,meta:A}};export{x as BLACK_COLOR,I as DEFAULT_COLOR,W as DEFAULT_PRESET_COLORS,N as WHITE_COLOR,$ as createHexColor,w as getColorCss,P as getColorState,k as getHueCss,K as getReadableTextColor,b as normalizeColor,g as normalizeHue,j as parseColorValue};
+import{useMode as M}from"../../node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/modes.js";import O from"../../node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/converter.js";import{formatHex8 as z,formatHex as A}from"../../node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/formatter.js";import F from"../../node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/rgb/definition.js";import B from"../../node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/hsl/definition.js";import D from"../../node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/hsv/definition.js";const U="#";M(F),M(B),M(D);const E=O("rgb"),W=O("hsv"),q=O("hsl"),I=160,v=(a,r,o)=>Math.min(Math.max(a,r),o),t=(a,r=0)=>v(a??r,0,1),c=a=>a===void 0||Number.isNaN(a)?0:(a%360+360)%360,C=a=>v(Math.round(a),0,255).toString(16).padStart(2,"0"),m=(a,r=2)=>Number(a.toFixed(r)),l=(a,r=2)=>`${m(a,r)}`,K=a=>({r:v(Math.round(a.r*255),0,255),g:v(Math.round(a.g*255),0,255),b:v(Math.round(a.b*255),0,255)}),H=a=>{const r=a?.trim();if(!r)return;const o=r.endsWith("%"),s=Number(o?r.slice(0,-1):r);if(!Number.isNaN(s))return o||Math.abs(s)>1?s/100:s},P=a=>H(a)??1,k=a=>a.includes(",")?a.split(",").map(r=>r.trim()):a.split(/\s+/u).filter(Boolean),y=a=>{const r=/^hsva?\((.*)\)$/iu.exec(a);if(!r)return;const[o,s]=r[1].split("/").map(p=>p.trim()),[e,N,x,g]=k(o),$=Number(e?.replace(/deg$/iu,"")),n=H(N),i=H(x),u=P(s??g);if(!(Number.isNaN($)||n===void 0||i===void 0))return L({alpha:u,h:$,s:n,v:i})},Q=a=>E({mode:"hsv",h:a.h,s:a.s,v:a.v,alpha:a.alpha}),b=(a,r,o,s=1)=>{const e=`${U}${C(a)}${C(r)}${C(o)}`;return s<1?`${e}${C(s*255)}`:e},X=b(22,119,255),j=[[22,119,255],[19,194,194],[82,196,26],[250,173,20],[245,34,45],[114,46,209],[0,0,0],[255,255,255]].map(([a,r,o])=>b(a,r,o)),S=b(0,0,0),T=b(255,255,255),w=a=>{const r=a?.trim();if(!r)return;const o=y(r);if(o)return o;const s=E(r),e=W(r);if(!(!s||!e))return{h:c(e.h),s:t(e.s),v:t(e.v),alpha:t(e.alpha??s.alpha,1)}},L=a=>({h:c(a.h),s:t(a.s),v:t(a.v),alpha:t(a.alpha,1)}),V=a=>{const r=L(a);return{...K(Q(r)),normalizedColor:r}},_=({r:a,g:r,b:o},s=1)=>s<1?`rgba(${a}, ${r}, ${o}, ${l(s)})`:`rgb(${a}, ${r}, ${o})`,G=({r:a,g:r,b:o},s)=>{const e={mode:"rgb",r:a/255,g:r/255,b:o/255,alpha:s};return s<1?z(e):A(e)},J=a=>`hsl(${l(c(a))} 100% 50%)`,Y=a=>{const{r,g:o,b:s}=V({...a,alpha:1});return(r*299+o*587+s*114)/1e3>=I?S:T},Z=(a,r)=>{const{normalizedColor:o,...s}=V(a),{r:e,g:N,b:x}=s,g=o.alpha<1,$=l(o.alpha),n=_(s,o.alpha),i=G(s,o.alpha),u={css:n,hex:i,opaqueCss:_(s)},p={alpha:m(o.alpha),css:n,valid:!0};if(r==="rgb")return{...u,formattedValue:n,meta:{...p,b:x,format:r,g:N,r:e}};if(r==="hsv"){const h=l(o.h),d=l(o.s*100),f=l(o.v*100);return{...u,formattedValue:g?`hsva(${h}, ${d}%, ${f}%, ${$})`:`hsv(${h}, ${d}%, ${f}%)`,meta:{...p,format:r,h:m(o.h),s:m(o.s*100),v:m(o.v*100)}}}if(r==="hsl"){const h=q({mode:"hsv",h:o.h,s:o.s,v:o.v,alpha:o.alpha}),d=l(c(h.h??o.h)),f=l(t(h.s)*100),R=l(t(h.l)*100);return{...u,formattedValue:g?`hsla(${d}, ${f}%, ${R}%, ${$})`:`hsl(${d}, ${f}%, ${R}%)`,meta:{...p,format:r,h:m(o.h),l:m(t(h.l)*100),s:m(t(h.s)*100)}}}return{...u,formattedValue:i,meta:{...p,format:r,hex:i}}};export{S as BLACK_COLOR,X as DEFAULT_COLOR,j as DEFAULT_PRESET_COLORS,T as WHITE_COLOR,b as createHexColor,Z as getColorState,J as getHueCss,Y as getReadableTextColor,L as normalizeColor,c as normalizeHue,w as parseColorValue};

package/dist/color-picker/hooks/useColorArea.d.ts

@@ -1,19 +1,20 @@
 import { CSSProperties, KeyboardEvent, PointerEvent as ReactPointerEvent, RefObject } from 'react';
-import { HslaColor } from '../_shared/color';
+import { HsvaColor } from '../_shared/color';
 import { CommitColor } from './useColorPickerState';
 interface UseColorAreaOptions {
-    color: HslaColor;
+    color: HsvaColor;
+    colorCss: string;
     disabled?: boolean;
     onCommitColor: CommitColor;
 }
 export interface ColorAreaController {
-    areaLightnessStyle: CSSProperties;
     areaRef: RefObject<HTMLDivElement>;
     areaSaturationStyle: CSSProperties;
     areaStyle: CSSProperties;
     areaThumbStyle: CSSProperties;
+    areaValueStyle: CSSProperties;
     onKeyDown: (evt: KeyboardEvent<HTMLDivElement>) => void;
     onPointerDown: (evt: ReactPointerEvent<HTMLDivElement>) => void;
 }
-declare const useColorArea: ({ color, disabled, onCommitColor }: UseColorAreaOptions) => ColorAreaController;
+declare const useColorArea: ({ color, colorCss, disabled, onCommitColor, }: UseColorAreaOptions) => ColorAreaController;
 export default useColorArea;

package/dist/color-picker/hooks/useColorArea.js

@@ -1 +1 @@
-import{useEffectCallback as u,useEventListener as g}from"@nild/hooks";import{useRef as L,useState as R,useMemo as m}from"react";import{normalizeColor as b,getHueCss as S,getColorCss as A,WHITE_COLOR as h,BLACK_COLOR as E}from"../_shared/color.js";const I=(e,o,i)=>{const n=o.getBoundingClientRect(),l=n.width<=0?0:(e.clientX-n.left)/n.width,s=n.height<=0?0:(e.clientY-n.top)/n.height;return b({...i,s:l,l:1-s})},T={backgroundImage:`linear-gradient(to bottom, ${h}, transparent 50%, ${E})`},$={backgroundImage:`linear-gradient(to right, ${h}, transparent)`},H=({color:e,disabled:o=!1,onCommitColor:i})=>{var n;const l=L(null),[s,p]=R(!1),c=u(r=>{const a=l.current;if(!a||o)return e;const t=I(r,a,e);return i(t),t}),C=u(r=>{var a,t;o||r.button!==void 0&&r.button!==0||(r.preventDefault(),r.currentTarget.focus(),(t=(a=r.currentTarget).setPointerCapture)==null||t.call(a,r.pointerId),p(!0),c(r))}),k=u(r=>{s&&(r.preventDefault(),c(r))}),d=u(r=>{s&&(r.preventDefault(),c(r),p(!1))}),w=u(r=>{if(o)return;const a=r.shiftKey?.1:.01;let t;switch(r.key){case"ArrowRight":t={...e,s:e.s+a};break;case"ArrowLeft":t={...e,s:e.s-a};break;case"ArrowUp":t={...e,l:e.l+a};break;case"ArrowDown":t={...e,l:e.l-a};break;case"Home":t={...e,s:0};break;case"End":t={...e,s:1};break}t&&(r.preventDefault(),i(b(t)))}),v=m(()=>({backgroundColor:S(e.h)}),[e.h]),D=m(()=>({backgroundColor:A(e),left:`${e.s*100}%`,top:`${(1-e.l)*100}%`}),[e]),y=((n=l.current)==null?void 0:n.ownerDocument.defaultView)??null,f=s?y:null;return g(f,"pointermove",k),g(f,"pointerup",d),g(f,"pointercancel",d),{areaLightnessStyle:T,areaRef:l,areaSaturationStyle:$,areaStyle:v,areaThumbStyle:D,onKeyDown:w,onPointerDown:C}};export{H as default};
+import{useEffectCallback as l,useEventListener as d}from"@nild/hooks";import{useRef as R,useState as S,useMemo as m}from"react";import{normalizeColor as b,getHueCss as A,BLACK_COLOR as L,WHITE_COLOR as E}from"../_shared/color.js";const T=(r,u,o)=>{const n=u.getBoundingClientRect(),i=n.width<=0?0:(r.clientX-n.left)/n.width,s=n.height<=0?0:(r.clientY-n.top)/n.height;return b({...o,s:i,v:1-s})},I={backgroundImage:`linear-gradient(to top, ${L}, transparent)`},O={backgroundImage:`linear-gradient(to right, ${E}, transparent)`},$=({color:r,colorCss:u,disabled:o=!1,onCommitColor:n})=>{var i;const s=R(null),[c,g]=S(!1),f=l(e=>{const a=s.current;if(!a||o)return r;const t=T(e,a,r);return n(t),t}),h=l(e=>{var a,t;o||e.button!==void 0&&e.button!==0||(e.preventDefault(),e.currentTarget.focus(),(t=(a=e.currentTarget).setPointerCapture)==null||t.call(a,e.pointerId),g(!0),f(e))}),C=l(e=>{c&&(e.preventDefault(),f(e))}),v=l(e=>{c&&(e.preventDefault(),f(e),g(!1))}),k=l(e=>{if(o)return;const a=e.shiftKey?.1:.01;let t;switch(e.key){case"ArrowRight":t={...r,s:r.s+a};break;case"ArrowLeft":t={...r,s:r.s-a};break;case"ArrowUp":t={...r,v:r.v+a};break;case"ArrowDown":t={...r,v:r.v-a};break;case"Home":t={...r,s:0};break;case"End":t={...r,s:1};break}t&&(e.preventDefault(),n(b(t)))}),w=m(()=>({backgroundColor:A(r.h)}),[r.h]),D=m(()=>({backgroundColor:u,left:`${r.s*100}%`,top:`${(1-r.v)*100}%`}),[r.s,r.v,u]),y=((i=s.current)==null?void 0:i.ownerDocument.defaultView)??null,p=c?y:null;return d(p,"pointermove",C),d(p,"pointerup",v),d(p,"pointercancel",v),{areaRef:s,areaSaturationStyle:O,areaStyle:w,areaThumbStyle:D,areaValueStyle:I,onKeyDown:k,onPointerDown:h}};export{$ as default};

package/dist/color-picker/hooks/useColorPickerState.d.ts

@@ -1,6 +1,6 @@
-import { ColorState, HslaColor } from '../_shared/color';
-import { ColorFormat, ColorPickerMeta, ColorPickerProps } from '../interfaces';
-export type CommitColor = (nextColor: HslaColor, nextFormat?: ColorFormat) => ColorState;
+import { ColorState, HsvaColor } from '../_shared/color';
+import { ColorFormat, ColorPickerProps } from '../interfaces';
+export type CommitColor = (nextColor: HsvaColor, nextFormat?: ColorFormat) => ColorState;
 interface UseColorPickerStateOptions {
     value?: string;
     defaultValue?: string;
@@ -9,17 +9,20 @@ interface UseColorPickerStateOptions {
     onChange?: ColorPickerProps['onChange'];
     onFormatChange?: ColorPickerProps['onFormatChange'];
 }
-export interface ColorPickerStateController {
-    color: HslaColor;
+interface ColorPickerStateController {
+    color: HsvaColor;
     commitColor: CommitColor;
+    css: string;
     draftValue: string;
     format: ColorFormat;
     formattedValue: string;
     hex: string;
+    hue: number;
     inputInvalid: boolean;
-    meta: ColorPickerMeta;
+    opaqueCss: string;
     completeInput: () => void;
     updateFormat: (format: ColorFormat) => void;
+    updateHue: (hue: number) => void;
     updateInput: (value: string | number) => void;
 }
 declare const useColorPickerState: ({ value: externalValue, defaultValue, format: externalFormat, defaultFormat, onChange, onFormatChange, }: UseColorPickerStateOptions) => ColorPickerStateController;

package/dist/color-picker/hooks/useColorPickerState.js

@@ -1 +1 @@
-import{useControllableState as h,useEffectCallback as f,useIsomorphicLayoutEffect as A}from"@nild/hooks";import{useMemo as x,useState as I,useRef as D}from"react";import{parseColorValue as c,getColorState as O,DEFAULT_COLOR as M}from"../_shared/color.js";const T=c(M),_=d=>c(d)??T,w=({value:d,defaultValue:b,format:E,defaultFormat:F="hex",onChange:p,onFormatChange:V})=>{const[o,L]=h(E,F),[i,S]=h(d,b),n=x(()=>_(i),[i]),{formattedValue:a,hex:g,meta:j}=x(()=>O(n,o),[n,o]),[C,s]=I(a),[R,u]=I(!1),l=D(null),m=f((e,r=o)=>{const t=O(e,r);return Object.is(i,t.formattedValue)||(S(t.formattedValue),p?.(t.formattedValue,t.meta)),t}),k=f(e=>{Object.is(o,e)||(L(e),V?.(e),l.current=null,m(n,e))}),v=f(e=>{const r=`${e}`,t=c(r);if(s(r),!t){u(!0);return}u(!1),l.current=m(t).formattedValue}),y=f(()=>{l.current=null;const e=c(C);if(!e){s(a),u(!1);return}const r=m(e);s(r.formattedValue),u(!1)});return A(()=>{if(l.current===a){l.current=null;return}s(a),u(!1)},[a]),{color:n,commitColor:m,draftValue:C,format:o,formattedValue:a,hex:g,inputInvalid:R,meta:j,completeInput:y,updateFormat:k,updateInput:v}};export{w as default};
+import{useControllableState as O,useEffectCallback as f,useIsomorphicLayoutEffect as b}from"@nild/hooks";import{useState as h,useMemo as G,useRef as S}from"react";import{parseColorValue as C,getColorState as g,normalizeColor as J,normalizeHue as q,DEFAULT_COLOR as K}from"../_shared/color.js";const N=C(K),z=i=>C(i)??N,P=({value:i,defaultValue:R,format:v,defaultFormat:y="hex",onChange:x,onFormatChange:I})=>{const[l,A]=O(v,y),[n,D]=O(i,R),H=i!==void 0,[t,j]=h(()=>z(n)),{css:M,formattedValue:a,hex:T,opaqueCss:U}=G(()=>g(t,l),[t,l]),[V,E]=h(t.h),[F,d]=h(a),[_,s]=h(!1),c=S(null),p=S(null),m=f((e,r=l)=>{const u=J(e),o=g(u,r),L=!Object.is(n,o.formattedValue);return(!H||!L)&&j(u),L?(p.current=[o.formattedValue,u],D(o.formattedValue),x?.(o.formattedValue,o.meta)):p.current=null,o}),$=f(e=>{Object.is(l,e)||(A(e),I?.(e),c.current=null,m(t,e))}),k=f(e=>{E(e),m({...t,h:e})}),w=f(e=>{const r=`${e}`,u=C(r);if(d(r),!u){s(!0);return}s(!1),c.current=m(u).formattedValue}),B=f(()=>{c.current=null;const e=C(F);if(!e){d(a),s(!1);return}const r=m(e);d(r.formattedValue),s(!1)});return b(()=>{const e=p.current;p.current=null,j(e&&Object.is(n,e[0])?e[1]:z(n))},[n]),b(()=>{q(V)!==q(t.h)&&E(t.h)},[t.h,V]),b(()=>{if(c.current===a){c.current=null;return}d(a),s(!1)},[a]),{color:t,commitColor:m,css:M,draftValue:F,format:l,formattedValue:a,hex:T,hue:V,inputInvalid:_,opaqueCss:U,completeInput:B,updateFormat:$,updateHue:k,updateInput:w}};export{P as default};

package/dist/color-picker/interfaces/index.d.ts

@@ -1,6 +1,6 @@
 import { OffsetOptions, Placement } from '@floating-ui/dom';
 import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode } from 'react';
-export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+export type ColorFormat = 'hex' | 'rgb' | 'hsv' | 'hsl';
 export type ColorPickerSize = 'small' | 'medium' | 'large';
 
 export type ColorPickerMeta<T extends ColorFormat = ColorFormat> = T extends ColorFormat
@@ -13,7 +13,9 @@ export type ColorPickerMeta<T extends ColorFormat = ColorFormat> = T extends Col
           ? { hex: string }
           : T extends 'rgb'
             ? { r: number; g: number; b: number }
-            : { h: number; s: number; l: number })
+            : T extends 'hsv'
+              ? { h: number; s: number; v: number }
+              : { h: number; s: number; l: number })
     : never;
 
 export type ColorPickerPreset = string | { label?: string; value: string };

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/hsv/convertHsvToRgb.js

@@ -0,0 +1 @@
+import g from"../util/normalizeHue.js";function i({h:s,s:b,v:a,alpha:c}){s=g(s!==void 0?s:0),b===void 0&&(b=0),a===void 0&&(a=0);let t=Math.abs(s/60%2-1),o;switch(Math.floor(s/60)){case 0:o={r:a,g:a*(1-b*t),b:a*(1-b)};break;case 1:o={r:a*(1-b*t),g:a,b:a*(1-b)};break;case 2:o={r:a*(1-b),g:a,b:a*(1-b*t)};break;case 3:o={r:a*(1-b),g:a*(1-b*t),b:a};break;case 4:o={r:a*(1-b*t),g:a*(1-b),b:a};break;case 5:o={r:a,g:a*(1-b),b:a*(1-b*t)};break;default:o={r:a*(1-b),g:a*(1-b),b:a*(1-b)}}return o.mode="rgb",c!==void 0&&(o.alpha=c),o}export{i as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/hsv/convertRgbToHsv.js

@@ -0,0 +1 @@
+function l({r:d,g:t,b:o,alpha:v}){d===void 0&&(d=0),t===void 0&&(t=0),o===void 0&&(o=0);let a=Math.max(d,t,o),e=Math.min(d,t,o),h={mode:"hsv",s:a===0?0:1-e/a,v:a};return a-e!==0&&(h.h=(a===d?(t-o)/(a-e)+(t<o)*6:a===t?(o-d)/(a-e)+2:(d-t)/(a-e)+4)*60),v!==void 0&&(h.alpha=v),h}export{l as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/hsv/definition.js

@@ -0,0 +1 @@
+import e from"./convertHsvToRgb.js";import a from"./convertRgbToHsv.js";import{fixupHueShorter as o}from"../fixup/hue.js";import{fixupAlpha as i}from"../fixup/alpha.js";import{interpolatorLinear as r}from"../interpolate/linear.js";import{differenceHueSaturation as t}from"../difference.js";import{averageAngle as f}from"../average.js";const p={mode:"hsv",toMode:{rgb:e},parse:["--hsv"],serialize:"--hsv",fromMode:{rgb:a},channels:["h","s","v","alpha"],ranges:{h:[0,360]},gamut:"rgb",interpolate:{h:{use:r,fixup:o},s:r,v:r,alpha:{use:r,fixup:i}},difference:{h:t},average:{h:f}};export{p as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.55",
+  "version": "0.0.56",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -33,8 +33,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@nild/shared": "^0.0.18",
-    "@nild/hooks": "^0.0.21",
-    "@nild/icons": "^0.0.21"
+    "@nild/icons": "^0.0.21",
+    "@nild/hooks": "^0.0.21"
   },
   "scripts": {
     "build": "vite build --mode PROD",