@nild/components 0.0.54 → 0.0.55

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

@@ -0,0 +1,11 @@
+import { ColorAreaController } from './hooks/useColorArea';
+interface AreaProps {
+    controller: ColorAreaController;
+    disabled?: boolean;
+    formattedValue: string;
+}
+declare const Area: {
+    ({ controller, disabled, formattedValue }: AreaProps): JSX.Element;
+    displayName: string;
+};
+export default Area;

package/dist/color-picker/Area.js

@@ -0,0 +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};

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

@@ -0,0 +1,6 @@
+import { ColorPickerProps } from './interfaces';
+/**
+ * @category Components
+ */
+declare const ColorPicker: import('react').ForwardRefExoticComponent<ColorPickerProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default ColorPicker;

package/dist/color-picker/ColorPicker.js

@@ -0,0 +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};

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

@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes, ReactElement, RefAttributes, RefObject } from 'react';
+import { ColorPickerSize } from './interfaces';
+interface DefaultTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    colorCss: string;
+    customTrigger?: ReactElement<{
+        children?: ReactElement;
+    }> | null;
+    disabled?: boolean;
+    open?: boolean;
+    size?: ColorPickerSize;
+    triggerRef: RefObject<HTMLElement | null>;
+}
+declare const DefaultTrigger: import('react').ForwardRefExoticComponent<DefaultTriggerProps & RefAttributes<HTMLButtonElement>>;
+export default DefaultTrigger;

package/dist/color-picker/DefaultTrigger.js

@@ -0,0 +1 @@
+import{jsx as m}from"react/jsx-runtime";import{mergeRefs as c,cnMerge as f}from"@nild/shared";import{forwardRef as w,Children as D,isValidElement as N,cloneElement as v}from"react";import C from"../_shared/utils/merge-handlers/index.js";import b from"./style/index.js";import K from"./Swatch.js";const g=w((u,o)=>{const{className:s,colorCss:y,customTrigger:i,disabled:a=!1,open:r=!1,size:x="medium",triggerRef:l,"aria-label":p,onKeyDown:t,...d}=u,h=p??"Select color";if(i){const e=D.toArray(i.props.children).find(N);if(e){const n=e.type==="button";return v(e,{...d,...e.props,"aria-disabled":a||void 0,"aria-expanded":r,"aria-haspopup":"dialog","aria-label":p??e.props["aria-label"],className:f(b.customTrigger({open:r}),s,e.props.className),...n?{disabled:a}:{},"data-disabled":a||void 0,onKeyDown:C(e.props.onKeyDown,t),ref:c(o,e.ref,l),role:n?e.props.role:e.props.role??"button",tabIndex:a?-1:e.props.tabIndex??0})}}return m("button",{...d,"aria-expanded":r,"aria-haspopup":"dialog","aria-label":h,className:f(b.trigger({size:x,disabled:a,open:r}),s),"data-disabled":a||void 0,disabled:a,onKeyDown:t,ref:c(o,l),type:"button",children:m(K,{css:y})})});g.displayName="ColorPicker.DefaultTrigger";export{g as default};

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

@@ -0,0 +1,28 @@
+import { KeyboardEventHandler } from 'react';
+import { HslaColor } from './_shared/color';
+import { ColorFormat, ColorPickerMeta, ColorPickerPreset } from './interfaces';
+import { ColorAreaController } from './hooks/useColorArea';
+import { CommitColor } from './hooks/useColorPickerState';
+interface PanelProps {
+    area: ColorAreaController;
+    color: HslaColor;
+    draftValue: string;
+    format: ColorFormat;
+    formattedValue: string;
+    meta: ColorPickerMeta;
+    presets: ColorPickerPreset[];
+    selectedHex: string;
+    className?: string;
+    disabled?: boolean;
+    inputInvalid?: boolean;
+    onCommitColor: CommitColor;
+    onFormatChange: (format: ColorFormat) => 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;
+    displayName: string;
+};
+export default Panel;

package/dist/color-picker/Panel.js

@@ -0,0 +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};

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

@@ -0,0 +1,13 @@
+import { ColorPickerPreset } from './interfaces';
+import { CommitColor } from './hooks/useColorPickerState';
+interface PresetGridProps {
+    presets: ColorPickerPreset[];
+    selectedHex: string;
+    disabled?: boolean;
+    onCommitColor: CommitColor;
+}
+declare const PresetGrid: {
+    ({ disabled, onCommitColor, presets, selectedHex }: PresetGridProps): JSX.Element;
+    displayName: string;
+};
+export default PresetGrid;

package/dist/color-picker/PresetGrid.js

@@ -0,0 +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};

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

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+interface SliderControlProps {
+    label: string;
+    max: number;
+    min: number;
+    step: number;
+    trackClassName: string;
+    value: number;
+    disabled?: boolean;
+    style?: CSSProperties;
+    trackStyle?: CSSProperties;
+    thumbStyle?: CSSProperties;
+    onChange: (value: number) => void;
+}
+declare const SliderControl: {
+    ({ disabled, label, max, min, onChange, step, style, trackClassName, trackStyle, thumbStyle, value, }: SliderControlProps): JSX.Element;
+    displayName: string;
+};
+export default SliderControl;

package/dist/color-picker/SliderControl.js

@@ -0,0 +1 @@
+import{jsx as a,jsxs as u}from"react/jsx-runtime";import e from"../slider/index.js";import l from"./style/index.js";const s=({disabled:r=!1,label:t,max:o,min:m,onChange:n,step:i,style:c,trackClassName:d,trackStyle:h,thumbStyle:b,value:p})=>a("div",{className:l.controlRow(),style:c,children:u(e,{"aria-label":t,block:!0,className:l.controlSlider(),disabled:r,max:o,min:m,size:"medium",step:i,value:p,variant:"contained",onChange:n,children:[a(e.Track,{className:d,style:h,children:a(e.Range,{className:l.transparentRange()})}),a(e.Thumb,{className:l.controlThumb(),style:b})]})});s.displayName="ColorPicker.SliderControl";export{s as default};

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

@@ -0,0 +1,8 @@
+interface SwatchProps {
+    css: string;
+}
+declare const Swatch: {
+    ({ css }: SwatchProps): JSX.Element;
+    displayName: string;
+};
+export default Swatch;

package/dist/color-picker/Swatch.js

@@ -0,0 +1 @@
+import{jsx as a}from"react/jsx-runtime";import{CHECKERBOARD_STYLE as t}from"./_shared/checkerboard.js";import s from"./style/index.js";const r=({css:o})=>a("span",{"aria-hidden":"true",className:s.swatch(),style:t,children:a("span",{className:s.swatchColor(),style:{backgroundColor:o}})});r.displayName="ColorPicker.Swatch";export{r as default};

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

@@ -0,0 +1,5 @@
+import { FC, ReactNode } from 'react';
+import { TriggerProps } from './interfaces';
+export declare const isTriggerElement: (child: ReactNode) => boolean;
+declare const Trigger: FC<TriggerProps>;
+export default Trigger;

package/dist/color-picker/Trigger.js

@@ -0,0 +1 @@
+import{isValidElement as l}from"react";const i=e=>l(e)&&e.type===r,r=({children:e})=>e??null;r.displayName="ColorPicker.Trigger";export{r as default,i as isTriggerElement};

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

@@ -0,0 +1,15 @@
+import { ColorFormat } from './interfaces';
+interface ValueControlsProps {
+    draftValue: string;
+    format: ColorFormat;
+    inputInvalid?: boolean;
+    disabled?: boolean;
+    onFormatChange: (format: ColorFormat) => void;
+    onInputBlur: () => void;
+    onInputChange: (value: string | number) => void;
+}
+declare const ValueControls: {
+    ({ disabled, draftValue, format, inputInvalid, onFormatChange, onInputBlur, onInputChange, }: ValueControlsProps): JSX.Element;
+    displayName: string;
+};
+export default ValueControls;

package/dist/color-picker/ValueControls.js

@@ -0,0 +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};

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

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

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

@@ -0,0 +1 @@
+const r="conic-gradient(var(--nd-color-picker-checker-color) 25%,transparent 0 50%,var(--nd-color-picker-checker-color) 0 75%,transparent 0)",o="0 0",c="0.5rem 0.5rem",e={"--nd-color-picker-checker-base":"var(--background-color-canvas)","--nd-color-picker-checker-color":"color-mix(in oklch,var(--background-color-muted) 72%,var(--background-color-canvas))",backgroundColor:"var(--nd-color-picker-checker-base)",backgroundImage:r,backgroundPosition:o,backgroundRepeat:"repeat",backgroundSize:c},n=a=>({...e,backgroundImage:`${a},${r}`,backgroundPosition:`0 0,${o}`,backgroundRepeat:"no-repeat,repeat",backgroundSize:`100% 100%,${c}`});export{e as CHECKERBOARD_STYLE,n as getCheckerboardStyle};

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

@@ -0,0 +1,24 @@
+import { ColorFormat, ColorPickerMeta } from '../interfaces';
+export interface HslaColor {
+    h: number;
+    s: number;
+    l: number;
+    alpha: number;
+}
+export interface ColorState {
+    formattedValue: string;
+    hex: string;
+    meta: ColorPickerMeta;
+}
+export declare const normalizeHue: (hue: number | undefined) => number;
+export declare const createHexColor: (r: number, g: number, b: number, alpha?: number) => string;
+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 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;

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

@@ -0,0 +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};

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

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

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

@@ -0,0 +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};

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

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

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

@@ -0,0 +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};

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

@@ -0,0 +1,8 @@
+/**
+ * @category Components
+ */
+declare const ColorPicker: import('react').ForwardRefExoticComponent<import('./interfaces').ColorPickerProps & import('react').RefAttributes<HTMLButtonElement>> & {
+    Trigger: import('react').FC<import('./interfaces').TriggerProps>;
+};
+export type * from './interfaces';
+export default ColorPicker;

package/dist/color-picker/index.js

@@ -0,0 +1 @@
+import r from"./ColorPicker.js";import o from"./Trigger.js";const t=Object.assign(r,{Trigger:o});export{t as default};

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

@@ -0,0 +1,40 @@
+import { OffsetOptions, Placement } from '@floating-ui/dom';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode } from 'react';
+export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+export type ColorPickerSize = 'small' | 'medium' | 'large';
+
+export type ColorPickerMeta<T extends ColorFormat = ColorFormat> = T extends ColorFormat
+    ? {
+          alpha: number;
+          css: string;
+          format: T;
+          valid: boolean;
+      } & (T extends 'hex'
+          ? { hex: string }
+          : T extends 'rgb'
+            ? { r: number; g: number; b: number }
+            : { h: number; s: number; l: number })
+    : never;
+
+export type ColorPickerPreset = string | { label?: string; value: string };
+
+export interface ColorPickerProps
+    extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> {
+    children?: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    format?: ColorFormat;
+    defaultFormat?: ColorFormat;
+    onChange?: (value: string, meta: ColorPickerMeta) => void;
+    onFormatChange?: (format: ColorFormat) => void;
+    presets?: ColorPickerPreset[];
+    size?: ColorPickerSize;
+    disabled?: boolean;
+    placement?: Placement;
+    offset?: OffsetOptions;
+    portalClassName?: string;
+}
+
+export interface TriggerProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactElement;
+}

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

@@ -0,0 +1,39 @@
+import { ColorPickerSize } from '../interfaces';
+declare const _default: {
+    trigger: (props?: {
+        size?: ColorPickerSize;
+        disabled?: boolean;
+        open?: boolean;
+    } | undefined) => string;
+    customTrigger: (props?: {
+        open?: boolean;
+    } | undefined) => string;
+    swatch: (props?: object | undefined) => string;
+    swatchColor: (props?: object | undefined) => string;
+    panel: (props?: object | undefined) => string;
+    stack: (props?: object | undefined) => string;
+    area: (props?: {
+        disabled?: boolean;
+    } | undefined) => string;
+    areaLayer: (props?: object | undefined) => string;
+    areaThumb: (props?: object | undefined) => string;
+    sliderPreviewRow: (props?: object | undefined) => string;
+    sliderStack: (props?: object | undefined) => string;
+    controlRow: (props?: object | undefined) => string;
+    controlSlider: (props?: object | undefined) => string;
+    controlThumb: (props?: object | undefined) => string;
+    previewSwatch: (props?: object | undefined) => string;
+    hueTrack: (props?: object | undefined) => string;
+    alphaTrack: (props?: object | undefined) => string;
+    transparentRange: (props?: object | undefined) => string;
+    inputStack: (props?: object | undefined) => string;
+    formatSegment: (props?: object | undefined) => string;
+    valueInput: (props?: {
+        invalid?: boolean;
+    } | undefined) => string;
+    presets: (props?: object | undefined) => string;
+    preset: (props?: object | undefined) => string;
+    presetCheck: (props?: object | undefined) => string;
+    presetCheckIcon: (props?: object | undefined) => string;
+};
+export default _default;

package/dist/color-picker/style/index.js

@@ -0,0 +1 @@
+import{cva as e}from"@nild/shared";import r from"../../_shared/style/index.js";const o=e(["nd-color-picker-trigger","inline-flex","items-center","justify-center","box-border","border","border-main","bg-transparent","p-1","outline-none","transition-[border-color,box-shadow]","enabled:hover:border-brand-hover","enabled:focus-visible:ring-focused",r.disabled],{variants:{size:{small:["size-6","rounded-sm"],medium:["size-8","rounded-md"],large:["size-10","rounded-md"]},disabled:{true:"",false:"cursor-pointer"},open:{true:["border-brand","ring-focused"],false:""}}}),n=e(["nd-color-picker-custom-trigger","outline-none","focus-visible:ring-focused",r.disabled],{variants:{open:{true:["ring-focused"],false:""}}}),i=e(["nd-color-picker-swatch","relative","block","size-full","box-border","overflow-hidden","rounded-sm"]),t=e(["nd-color-picker-swatch-color","absolute","inset-0"]),a=e(["nd-color-picker-panel","w-64","p-3","font-nd","text-main","outline-none"]),l=e(["flex","flex-col","gap-3"]),s=e(["nd-color-picker-area","relative","h-36","w-full","overflow-hidden","rounded-md","border","border-subtle","outline-none","touch-none","select-none","focus-visible:ring-focused",r.disabled],{variants:{disabled:{true:"",false:"cursor-crosshair"}}}),d=e(["absolute","inset-0","pointer-events-none"]),c=e(["nd-color-picker-area-thumb","absolute","size-3","-translate-x-1/2","-translate-y-1/2","rounded-full","border-2","border-canvas","shadow-md","pointer-events-none"]),u=e(["flex","items-stretch","gap-4"]),b=e(["flex","h-9","min-w-0","flex-auto","flex-col","justify-between"]),f=e(["flex","h-3","items-center"]),p=e(["h-3","min-w-0","flex-auto"]),h=e(["group-enabled:group-hover:![box-shadow:var(--tw-shadow,0_0_#00000000)]"]),m=e(["nd-color-picker-preview","block","size-9","shrink-0","overflow-hidden","rounded-md","border","border-main"]),g=e(["h-3","bg-[linear-gradient(to_right,red,yellow,lime,cyan,blue,magenta,red)]"]),v=e(["h-3","border border-main"]),w=e(["bg-transparent"]),k=e(["flex","flex-col","gap-3"]),x=e(["w-full"]),z=e(["w-full"],{variants:{invalid:{true:["border-error","enabled:focus-within:border-error"],false:""}}}),y=e(["grid","grid-cols-8","gap-1.5"]),S=e(["nd-color-picker-preset","relative","size-5","overflow-hidden","rounded-sm","p-0","outline-none","transition-[box-shadow]","focus-visible:ring-focused","enabled:hover:shadow-md"]),T=e(["nd-color-picker-preset-check","absolute","inset-0","z-10","grid","place-items-center","pointer-events-none","leading-none"]),_=e(["inline-flex","items-center","justify-center","text-base","leading-none","[&_svg]:block"]),R={trigger:o,customTrigger:n,swatch:i,swatchColor:t,panel:a,stack:l,area:s,areaLayer:d,areaThumb:c,sliderPreviewRow:u,sliderStack:b,controlRow:f,controlSlider:p,controlThumb:h,previewSwatch:m,hueTrack:g,alphaTrack:v,transparentRange:w,inputStack:k,formatSegment:x,valueInput:z,presets:y,preset:S,presetCheck:T,presetCheckIcon:_};export{R as default};

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { default as Alert } from './alert';
 import { default as Button } from './button';
 import { default as Checkbox } from './checkbox';
+import { default as ColorPicker } from './color-picker';
 import { default as Divider } from './divider';
 import { default as Field } from './field';
 import { default as Form } from './form';
@@ -10,10 +11,11 @@ import { default as Popover } from './popover';
 import { default as Radio } from './radio';
 import { default as Segment } from './segment';
 import { default as Select } from './select';
+import { default as Slider } from './slider';
 import { default as Switch } from './switch';
 import { default as Tabs } from './tabs';
 import { default as Tooltip } from './tooltip';
 import { default as Transition, TransitionStatus } from './transition';
 import { default as Typography } from './typography';
 import { default as Watermark } from './watermark';
-export { Alert, Button, Checkbox, Divider, Field, Form, Input, Modal, Popover, Radio, Segment, Select, Switch, Tabs, Tooltip, Transition, TransitionStatus, Typography, Watermark, };
+export { Alert, Button, Checkbox, ColorPicker, Divider, Field, Form, Input, Modal, Popover, Radio, Segment, Select, Slider, Switch, Tabs, Tooltip, Transition, TransitionStatus, Typography, Watermark, };

package/dist/index.js

@@ -1 +1 @@
-import{default as a}from"./alert/index.js";import{default as t}from"./button/index.js";import{default as o}from"./checkbox/index.js";import{default as r}from"./divider/Divider.js";import{default as s}from"./field/index.js";import{default as m}from"./form/index.js";import{default as f}from"./input/index.js";import{default as i}from"./modal/index.js";import{default as e}from"./popover/index.js";import{default as p}from"./radio/index.js";import{default as l}from"./segment/index.js";import{default as d}from"./select/index.js";import{default as u}from"./switch/index.js";import{default as n}from"./tabs/index.js";import{default as T}from"./tooltip/index.js";import{default as S}from"./transition/Transition.js";import{TransitionStatus as c}from"./transition/interfaces/index.js";import{default as b}from"./typography/index.js";import{default as h}from"./watermark/Watermark.js";/* empty css            */export{a as Alert,t as Button,o as Checkbox,r as Divider,s as Field,m as Form,f as Input,i as Modal,e as Popover,p as Radio,l as Segment,d as Select,u as Switch,n as Tabs,T as Tooltip,S as Transition,c as TransitionStatus,b as Typography,h as Watermark};
+import{default as a}from"./alert/index.js";import{default as o}from"./button/index.js";import{default as t}from"./checkbox/index.js";import{default as r}from"./color-picker/index.js";import{default as s}from"./divider/Divider.js";import{default as m}from"./field/index.js";import{default as f}from"./form/index.js";import{default as i}from"./input/index.js";import{default as e}from"./modal/index.js";import{default as p}from"./popover/index.js";import{default as l}from"./radio/index.js";import{default as d}from"./segment/index.js";import{default as u}from"./select/index.js";import{default as n}from"./slider/index.js";import{default as S}from"./switch/index.js";import{default as T}from"./tabs/index.js";import{default as c}from"./tooltip/index.js";import{default as k}from"./transition/Transition.js";import{TransitionStatus as g}from"./transition/interfaces/index.js";import{default as h}from"./typography/index.js";import{default as y}from"./watermark/Watermark.js";/* empty css            */export{a as Alert,o as Button,t as Checkbox,r as ColorPicker,s as Divider,m as Field,f as Form,i as Input,e as Modal,p as Popover,l as Radio,d as Segment,u as Select,n as Slider,S as Switch,T as Tabs,c as Tooltip,k as Transition,g as TransitionStatus,h as Typography,y as Watermark};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/_prepare.js

@@ -0,0 +1 @@
+import t from"./parse.js";const i=(o,d)=>o===void 0?void 0:typeof o!="object"?t(o):o.mode!==void 0?o:d?{...o,mode:d}:void 0;export{i as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/average.js

@@ -0,0 +1 @@
+const c=r=>{let s=r.reduce((n,t)=>{if(t!==void 0){let a=t*Math.PI/180;n.sin+=Math.sin(a),n.cos+=Math.cos(a)}return n},{sin:0,cos:0}),e=Math.atan2(s.sin,s.cos)*180/Math.PI;return e<0?360+e:e};export{c as averageAngle};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/colors/named.js

@@ -0,0 +1 @@
+const e={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,rebeccapurple:6697881,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074};export{e as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/converter.js

@@ -0,0 +1 @@
+import{converters as d}from"./modes.js";import m from"./_prepare.js";const b=(r="rgb")=>o=>(o=m(o,r))!==void 0?o.mode===r?o:d[o.mode][r]?d[o.mode][r](o):r==="rgb"?d[o.mode].rgb(o):d.rgb[r](d[o.mode].rgb(o)):void 0;export{b as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/difference.js

@@ -0,0 +1 @@
+import h from"./util/normalizeHue.js";const n=(r,t)=>{if(r.h===void 0||t.h===void 0||!r.s||!t.s)return 0;let i=h(r.h),s=h(t.h),a=Math.sin((s-i+360)/2*Math.PI/180);return 2*Math.sqrt(r.s*t.s)*a};export{n as differenceHueSaturation};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/fixup/alpha.js

@@ -0,0 +1 @@
+const o=t=>{let p=!1,a=t.map(r=>r!==void 0?(p=!0,r):1);return p?a:t};export{o as fixupAlpha};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/fixup/hue.js

@@ -0,0 +1 @@
+import u from"../util/normalizeHue.js";const s=(t,r)=>t.map((o,i,p)=>{if(o===void 0)return o;let h=u(o);return i===0||t[i-1]===void 0?h:r(h-u(p[i-1]))}).reduce((o,i)=>!o.length||i===void 0||o[o.length-1]===void 0?(o.push(i),o):(o.push(i+o[o.length-1]),o),[]),a=t=>s(t,r=>Math.abs(r)<=180?r:r-360*Math.sign(r));export{a as fixupHueShorter};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/formatter.js

@@ -0,0 +1 @@
+import l from"./converter.js";const x=r=>Math.max(0,Math.min(1,r||0)),t=r=>Math.round(x(r)*255),o=l("rgb"),i=r=>{if(r===void 0)return;let a=t(r.r),n=t(r.g),s=t(r.b);return"#"+(1<<24|a<<16|n<<8|s).toString(16).slice(1)},e=r=>{if(r===void 0)return;let a=t(r.alpha!==void 0?r.alpha:1);return i(r)+(256|a).toString(16).slice(1)},f=r=>i(o(r)),m=r=>e(o(r));export{f as formatHex,m as formatHex8,i as serializeHex,e as serializeHex8};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/hsl/convertHslToRgb.js

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

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/hsl/convertRgbToHsl.js

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

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

@@ -0,0 +1 @@
+import a from"./convertHslToRgb.js";import e from"./convertRgbToHsl.js";import i from"./parseHslLegacy.js";import p from"./parseHsl.js";import{fixupHueShorter as t}from"../fixup/hue.js";import{fixupAlpha as m}from"../fixup/alpha.js";import{interpolatorLinear as o}from"../interpolate/linear.js";import{differenceHueSaturation as f}from"../difference.js";import{averageAngle as s}from"../average.js";const l={mode:"hsl",toMode:{rgb:a},fromMode:{rgb:e},channels:["h","s","l","alpha"],ranges:{h:[0,360]},gamut:"rgb",parse:[p,i],serialize:r=>`hsl(${r.h!==void 0?r.h:"none"} ${r.s!==void 0?r.s*100+"%":"none"} ${r.l!==void 0?r.l*100+"%":"none"}${r.alpha<1?` / ${r.alpha}`:""})`,interpolate:{h:{use:o,fixup:t},s:o,l:o,alpha:{use:o,fixup:m}},difference:{h:f},average:{h:s}};export{l as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/hsl/parseHsl.js

@@ -0,0 +1 @@
+import{Tok as e}from"../parse.js";function o(f,r){if(!r||r[0]!=="hsl"&&r[0]!=="hsla")return;const t={mode:"hsl"},[,a,n,l,u]=r;if(a.type!==e.None){if(a.type===e.Percentage)return;t.h=a.value}if(n.type!==e.None){if(n.type===e.Hue)return;t.s=n.value/100}if(l.type!==e.None){if(l.type===e.Hue)return;t.l=l.value/100}return u.type!==e.None&&(t.alpha=Math.min(1,Math.max(0,u.type===e.Number?u.value:u.value/100))),t}export{o as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/hsl/parseHslLegacy.js

@@ -0,0 +1 @@
+import o from"../util/hue.js";import{hue as e,c as h,per as m,num_per as s}from"../util/regex.js";const r=new RegExp(`^hsla?\\(\\s*${e}${h}${m}${h}${m}\\s*(?:,\\s*${s}\\s*)?\\)$`),d=i=>{let a=i.match(r);if(!a)return;let t={mode:"hsl"};return a[3]!==void 0?t.h=+a[3]:a[1]!==void 0&&a[2]!==void 0&&(t.h=o(a[1],a[2])),a[4]!==void 0&&(t.s=Math.min(Math.max(0,a[4]/100),1)),a[5]!==void 0&&(t.l=Math.min(Math.max(0,a[5]/100),1)),a[6]!==void 0?t.alpha=Math.max(0,Math.min(1,a[6]/100)):a[7]!==void 0&&(t.alpha=Math.max(0,Math.min(1,+a[7]))),t};export{d as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/interpolate/lerp.js

@@ -0,0 +1 @@
+const s=(r,o,p)=>r+p*(o-r);export{s as lerp};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/interpolate/linear.js

@@ -0,0 +1 @@
+import{lerp as r}from"./lerp.js";import{interpolatorPiecewise as o}from"./piecewise.js";const e=o(r);export{e as interpolatorLinear};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/interpolate/piecewise.js

@@ -0,0 +1 @@
+const d=l=>{let i=[];for(let e=0;e<l.length-1;e++){let t=l[e],o=l[e+1];t===void 0&&o===void 0?i.push(void 0):t!==void 0&&o!==void 0?i.push([t,o]):i.push(t!==void 0?[t,t]:[o,o])}return i},h=l=>i=>{let e=d(i);return t=>{let o=t*e.length,n=t>=1?e.length-1:Math.max(Math.floor(o),0),r=e[n];return r===void 0?void 0:l(r[0],r[1],o-n)}};export{h as interpolatorPiecewise};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/modes.js

@@ -0,0 +1 @@
+import f from"./converter.js";const s={},n={},t=[],a={},p=e=>e,r=e=>(s[e.mode]={...s[e.mode],...e.toMode},Object.keys(e.fromMode||{}).forEach(o=>{s[o]||(s[o]={}),s[o][e.mode]=e.fromMode[o]}),e.ranges||(e.ranges={}),e.difference||(e.difference={}),e.channels.forEach(o=>{if(e.ranges[o]===void 0&&(e.ranges[o]=[0,1]),!e.interpolate[o])throw new Error(`Missing interpolator for: ${o}`);typeof e.interpolate[o]=="function"&&(e.interpolate[o]={use:e.interpolate[o]}),e.interpolate[o].fixup||(e.interpolate[o].fixup=p)}),n[e.mode]=e,(e.parse||[]).forEach(o=>{i(o,e.mode)}),f(e.mode)),d=e=>n[e],i=(e,o)=>{if(typeof e=="string"){if(!o)throw new Error("'mode' required when 'parser' is a string");a[e]=o}else typeof e=="function"&&t.indexOf(e)<0&&t.push(e)};export{a as colorProfiles,s as converters,d as getMode,t as parsers,r as useMode,i as useParser};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/parse.js

@@ -0,0 +1,4 @@
+import{parsers as g,colorProfiles as P,getMode as A}from"./modes.js";const y=/[^\x00-\x7F]|[a-zA-Z_]/,b=/[^\x00-\x7F]|[-\w]/,i={Function:"function",Ident:"ident",Number:"number",Percentage:"percentage",ParenClose:")",None:"none",Hue:"hue",Alpha:"alpha"};let u=0;function c(t){let e=t[u],r=t[u+1];return e==="-"||e==="+"?/\d/.test(r)||r==="."&&/\d/.test(t[u+2]):e==="."?/\d/.test(r):/\d/.test(e)}function v(t){if(u>=t.length)return!1;let e=t[u];if(y.test(e))return!0;if(e==="-"){if(t.length-u<2)return!1;let r=t[u+1];return!!(r==="-"||y.test(r))}return!1}const F={deg:1,rad:180/Math.PI,grad:9/10,turn:360};function f(t){let e="";if((t[u]==="-"||t[u]==="+")&&(e+=t[u++]),e+=h(t),t[u]==="."&&/\d/.test(t[u+1])&&(e+=t[u++]+h(t)),(t[u]==="e"||t[u]==="E")&&((t[u+1]==="-"||t[u+1]==="+")&&/\d/.test(t[u+2])?e+=t[u++]+t[u++]+h(t):/\d/.test(t[u+1])&&(e+=t[u++]+h(t))),v(t)){let r=d(t);return r==="deg"||r==="rad"||r==="turn"||r==="grad"?{type:i.Hue,value:e*F[r]}:void 0}return t[u]==="%"?(u++,{type:i.Percentage,value:+e}):{type:i.Number,value:+e}}function h(t){let e="";for(;/\d/.test(t[u]);)e+=t[u++];return e}function d(t){let e="";for(;u<t.length&&b.test(t[u]);)e+=t[u++];return e}function I(t){let e=d(t);return t[u]==="("?(u++,{type:i.Function,value:e}):e==="none"?{type:i.None,value:void 0}:{type:i.Ident,value:e}}function m(t=""){let e=t.trim(),r=[],n;for(u=0;u<e.length;){if(n=e[u++],n===`
+`||n==="	"||n===" "){for(;u<e.length&&(e[u]===`
+`||e[u]==="	"||e[u]===" ");)u++;continue}if(n===",")return;if(n===")"){r.push({type:i.ParenClose});continue}if(n==="+"){if(u--,c(e)){r.push(f(e));continue}return}if(n==="-"){if(u--,c(e)){r.push(f(e));continue}if(v(e)){r.push({type:i.Ident,value:d(e)});continue}return}if(n==="."){if(u--,c(e)){r.push(f(e));continue}return}if(n==="/"){for(;u<e.length&&(e[u]===`
+`||e[u]==="	"||e[u]===" ");)u++;let o;if(c(e)&&(o=f(e),o.type!==i.Hue)){r.push({type:i.Alpha,value:o});continue}if(v(e)&&d(e)==="none"){r.push({type:i.Alpha,value:{type:i.None,value:void 0}});continue}return}if(/\d/.test(n)){u--,r.push(f(e));continue}if(y.test(n)){u--,r.push(I(e));continue}return}return r}function N(t){t._i=0;let e=t[t._i++];if(!e||e.type!==i.Function||e.value!=="color"||(e=t[t._i++],e.type!==i.Ident))return;const r=P[e.value];if(!r)return;const n={mode:r},o=_(t,!1);if(!o)return;const p=A(r).channels;for(let s=0,l,a;s<p.length;s++)l=o[s],a=p[s],l.type!==i.None&&(n[a]=l.type===i.Number?l.value:l.value/100,a==="alpha"&&(n[a]=Math.max(0,Math.min(1,n[a]))));return n}function _(t,e){const r=[];let n;for(;t._i<t.length;){if(n=t[t._i++],n.type===i.None||n.type===i.Number||n.type===i.Alpha||n.type===i.Percentage||e&&n.type===i.Hue){r.push(n);continue}if(n.type===i.ParenClose){if(t._i<t.length)return;continue}return}if(!(r.length<3||r.length>4)){if(r.length===4){if(r[3].type!==i.Alpha)return;r[3]=r[3].value}return r.length===3&&r.push({type:i.None,value:void 0}),r.every(o=>o.type!==i.Alpha)?r:void 0}}function x(t,e){t._i=0;let r=t[t._i++];if(!r||r.type!==i.Function)return;let n=_(t,e);if(n)return n.unshift(r.value),n}const C=t=>{if(typeof t!="string")return;const e=m(t),r=e?x(e,!0):void 0;let n,o=0,p=g.length;for(;o<p;)if((n=g[o++](t,r))!==void 0)return n;return e?N(e):void 0};export{i as Tok,C as default,N as parseColorSyntax,x as parseModernSyntax,m as tokenize};

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

@@ -0,0 +1 @@
+import o from"./parseNamed.js";import a from"./parseHex.js";import p from"./parseRgbLegacy.js";import t from"./parseRgb.js";import i from"./parseTransparent.js";import{interpolatorLinear as r}from"../interpolate/linear.js";import{fixupAlpha as m}from"../fixup/alpha.js";const e={mode:"rgb",channels:["r","g","b","alpha"],parse:[t,a,p,o,i,"srgb"],serialize:"srgb",interpolate:{r,g:r,b:r,alpha:{use:r,fixup:m}},gamut:!0,white:{r:1,g:1,b:1},black:{r:0,g:0,b:0}};export{e as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/rgb/parseHex.js

@@ -0,0 +1 @@
+import e from"./parseNumber.js";const r=/^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i,f=a=>{let t;return(t=a.match(r))?e(parseInt(t[1],16),t[1].length):void 0};export{f as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/rgb/parseNamed.js

@@ -0,0 +1 @@
+import t from"./parseNumber.js";import r from"../colors/named.js";const e=o=>t(r[o.toLowerCase()],6);export{e as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/rgb/parseNumber.js

@@ -0,0 +1 @@
+const b=(r,e)=>{if(typeof r=="number"){if(e===3)return{mode:"rgb",r:(r>>8&15|r>>4&240)/255,g:(r>>4&15|r&240)/255,b:(r&15|r<<4&240)/255};if(e===4)return{mode:"rgb",r:(r>>12&15|r>>8&240)/255,g:(r>>8&15|r>>4&240)/255,b:(r>>4&15|r&240)/255,alpha:(r&15|r<<4&240)/255};if(e===6)return{mode:"rgb",r:(r>>16&255)/255,g:(r>>8&255)/255,b:(r&255)/255};if(e===8)return{mode:"rgb",r:(r>>24&255)/255,g:(r>>16&255)/255,b:(r>>8&255)/255,alpha:(r&255)/255}}};export{b as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/rgb/parseRgb.js

@@ -0,0 +1 @@
+import{Tok as e}from"../parse.js";function y(l,p){if(!p||p[0]!=="rgb"&&p[0]!=="rgba")return;const t={mode:"rgb"},[,u,a,r,o]=p;if(!(u.type===e.Hue||a.type===e.Hue||r.type===e.Hue))return u.type!==e.None&&(t.r=u.type===e.Number?u.value/255:u.value/100),a.type!==e.None&&(t.g=a.type===e.Number?a.value/255:a.value/100),r.type!==e.None&&(t.b=r.type===e.Number?r.value/255:r.value/100),o.type!==e.None&&(t.alpha=Math.min(1,Math.max(0,o.type===e.Number?o.value:o.value/100))),t}export{y as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/rgb/parseRgbLegacy.js

@@ -0,0 +1 @@
+import{num as r,c as s,num_per as t,per as $}from"../util/regex.js";const o=new RegExp(`^rgba?\\(\\s*${r}${s}${r}${s}${r}\\s*(?:,\\s*${t}\\s*)?\\)$`),d=new RegExp(`^rgba?\\(\\s*${$}${s}${$}${s}${$}\\s*(?:,\\s*${t}\\s*)?\\)$`),m=i=>{let e={mode:"rgb"},a;if(a=i.match(o))a[1]!==void 0&&(e.r=a[1]/255),a[2]!==void 0&&(e.g=a[2]/255),a[3]!==void 0&&(e.b=a[3]/255);else if(a=i.match(d))a[1]!==void 0&&(e.r=a[1]/100),a[2]!==void 0&&(e.g=a[2]/100),a[3]!==void 0&&(e.b=a[3]/100);else return;return a[4]!==void 0?e.alpha=Math.max(0,Math.min(1,a[4]/100)):a[5]!==void 0&&(e.alpha=Math.max(0,Math.min(1,+a[5]))),e};export{m as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/rgb/parseTransparent.js

@@ -0,0 +1 @@
+const e=a=>a==="transparent"?{mode:"rgb",r:0,g:0,b:0,alpha:0}:void 0;export{e as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/util/hue.js

@@ -0,0 +1 @@
+const a=(r,t)=>{switch(t){case"deg":return+r;case"rad":return r/Math.PI*180;case"grad":return r/10*9;case"turn":return r*360}};export{a as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/util/normalizeHue.js

@@ -0,0 +1 @@
+const t=o=>(o=o%360)<0?o+360:o;export{t as default};

package/dist/node_modules/.pnpm/culori@4.0.2/node_modules/culori/src/util/regex.js

@@ -0,0 +1 @@
+const s="([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)",a=`${s}%`,d=`(?:${s}%|${s})`,e=`(?:${s}(deg|grad|rad|turn)|${s})`,r="\\s*,\\s*";export{r as c,e as hue,s as num,d as num_per,a as per};

package/dist/select/style/index.js

@@ -1 +1 @@
-import{cva as e}from"@nild/shared";import t from"../../_shared/style/index.js";const l=e(["nd-select-trigger","group",["inline-flex","items-center"],"box-border","font-nd","overflow-hidden","text-left","appearance-none","border","transition-colors","outline-none",t.disabled],{variants:{variant:{outlined:["bg-transparent","border-main","enabled:hover:border-brand-hover"],filled:["bg-muted","border-subtle"],underlined:["bg-transparent","border-transparent","border-b-main","enabled:hover:border-b-brand-hover","enabled:focus-visible:border-b-brand"]},size:{small:["h-6","text-sm"],medium:["h-8","text-md"],large:["h-10","text-lg"]},block:{true:["flex","w-full"],false:""},disabled:{true:"",false:"cursor-pointer"},open:{true:["z-1"],false:""}},compoundVariants:[{variant:["outlined","filled"],size:"small",className:["rounded-sm"]},{variant:["outlined","filled"],size:["medium","large"],className:["rounded-md"]},{variant:["outlined","filled"],open:!0,className:["border-brand","ring-focused"]},{variant:"underlined",open:!0,className:["border-b-brand"]},{variant:"filled",disabled:!1,open:!1,className:["enabled:hover:bg-muted-hover","enabled:hover:border-muted"]},{variant:"filled",open:!0,className:["bg-muted-hover"]}]}),n=e(["nd-select-trigger-content","min-w-0","flex-auto","truncate"],{variants:{size:{small:["text-sm"],medium:["text-md"],large:["text-lg"]},placeholder:{true:["text-subtle"],false:["text-main"]}},compoundVariants:[{variant:["outlined","filled"],size:"small",className:["pl-2"]},{variant:["outlined","filled"],size:"medium",className:["pl-3"]},{variant:["outlined","filled"],size:"large",className:["pl-4"]}]}),a=e(["nd-select-trigger-icon","shrink-0","inline-flex","items-center","text-muted","transition-transform"],{variants:{size:{small:["text-sm"],medium:["text-md"],large:["text-lg"]},open:{true:["rotate-180"],false:""}},compoundVariants:[{variant:["outlined","filled"],size:"small",className:["px-2"]},{variant:["outlined","filled"],size:"medium",className:["px-3"]},{variant:["outlined","filled"],size:"large",className:["px-4"]}]}),r=e(["nd-select-listbox","max-h-60","overflow-auto","overscroll-contain","px-1","py-1","outline-none"]),i=e(["nd-select-option","w-full","flex","items-center","gap-2","rounded-sm","text-left","text-main","select-none","transition-colors",t.disabled],{variants:{size:{small:["min-h-8","px-2","text-sm"],medium:["min-h-9","px-3","text-md"],large:["min-h-10","px-4","text-lg"]},disabled:{true:["text-subtle"],false:["cursor-pointer"]},active:{true:["bg-surface-muted"],false:""}}}),s=e(["nd-select-option-content","min-w-0","flex-auto"]),o=e(["nd-select-option-label","block","truncate"]),d=e(["nd-select-option-indicator","shrink-0","inline-flex","items-center","justify-center"],{variants:{size:{small:["size-3.5","text-sm"],medium:["size-4","text-md"],large:["size-4.5","text-lg"]}}}),m={trigger:l,triggerContent:n,triggerIcon:a,listbox:r,option:i,optionContent:s,optionLabel:o,optionIndicator:d};export{m as default};
+import{cva as e}from"@nild/shared";import t from"../../_shared/style/index.js";const l=e(["nd-select-trigger","group",["inline-flex","items-center"],"box-border","font-nd","overflow-hidden","text-left","appearance-none","border","transition-colors","outline-none",t.disabled],{variants:{variant:{outlined:["bg-transparent","border-main","enabled:hover:border-brand-hover"],filled:["bg-muted","border-subtle"],underlined:["bg-transparent","border-transparent","border-b-main","enabled:hover:border-b-brand-hover","enabled:focus-visible:border-b-brand"]},size:{small:["h-6","text-sm"],medium:["h-8","text-md"],large:["h-10","text-lg"]},block:{true:["flex","w-full"],false:""},disabled:{true:"",false:"cursor-pointer"},open:{true:["z-1"],false:""}},compoundVariants:[{variant:["outlined","filled"],size:"small",className:["rounded-sm"]},{variant:["outlined","filled"],size:["medium","large"],className:["rounded-md"]},{variant:["outlined","filled"],open:!0,className:["border-brand","ring-focused"]},{variant:"underlined",open:!0,className:["border-b-brand"]},{variant:"filled",disabled:!1,open:!1,className:["enabled:hover:bg-muted-hover","enabled:hover:border-muted"]},{variant:"filled",open:!0,className:["bg-muted-hover"]}]}),n=e(["nd-select-trigger-content","min-w-0","flex-auto","truncate"],{variants:{size:{small:["text-sm"],medium:["text-md"],large:["text-lg"]},placeholder:{true:["text-subtle"],false:["text-main"]}},compoundVariants:[{variant:["outlined","filled"],size:"small",className:["pl-2"]},{variant:["outlined","filled"],size:"medium",className:["pl-3"]},{variant:["outlined","filled"],size:"large",className:["pl-4"]}]}),a=e(["nd-select-trigger-icon","shrink-0","inline-flex","items-center","text-muted","transition-transform"],{variants:{size:{small:["text-sm"],medium:["text-md"],large:["text-lg"]},open:{true:["rotate-180"],false:""}},compoundVariants:[{variant:["outlined","filled"],size:"small",className:["px-2"]},{variant:["outlined","filled"],size:"medium",className:["px-3"]},{variant:["outlined","filled"],size:"large",className:["px-4"]}]}),i=e(["nd-select-listbox","max-h-60","overflow-auto","overscroll-contain","px-1","py-1","outline-none"]),r=e(["nd-select-option","w-full","flex","items-center","gap-2","rounded-sm","text-left","text-main","select-none","transition-colors",t.disabled],{variants:{size:{small:["min-h-8","px-2","text-sm"],medium:["min-h-9","px-3","text-md"],large:["min-h-10","px-4","text-lg"]},disabled:{true:["text-subtle"],false:["cursor-pointer"]},active:{true:["bg-muted"],false:""}}}),o=e(["nd-select-option-content","min-w-0","flex-auto"]),s=e(["nd-select-option-label","block","truncate"]),d=e(["nd-select-option-indicator","shrink-0","inline-flex","items-center","justify-center"],{variants:{size:{small:["size-3.5","text-sm"],medium:["size-4","text-md"],large:["size-4.5","text-lg"]}}}),m={trigger:l,triggerContent:n,triggerIcon:a,listbox:i,option:r,optionContent:o,optionLabel:s,optionIndicator:d};export{m as default};

package/dist/slider/Range.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { RangeProps } from './interfaces';
+declare const Range: import('react').ForwardRefExoticComponent<RangeProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const isRangeElement: (child: ReactNode) => child is ReactElement<RangeProps>;
+export default Range;

package/dist/slider/Range.js

@@ -0,0 +1 @@
+import{jsx as m}from"react/jsx-runtime";import{cnMerge as l}from"@nild/shared";import{forwardRef as f,isValidElement as p}from"react";import{useSliderContext as d}from"./contexts/index.js";import c from"./style/index.js";const e=f(({className:a,style:t,...s},o)=>{const{orientation:n,rangeStyle:r,variant:i}=d();return m("span",{...s,className:l(c.range({orientation:n,variant:i}),a),ref:o,style:t?{...r,...t}:r})});e.displayName="Slider.Range";const g=a=>p(a)&&a.type===e;export{e as default,g as isRangeElement};

package/dist/slider/Slider.d.ts

@@ -0,0 +1,6 @@
+import { SliderProps } from './interfaces';
+/**
+ * @category Components
+ */
+declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Slider;

package/dist/slider/Slider.js

@@ -0,0 +1 @@
+import{jsx as C,jsxs as re}from"react/jsx-runtime";import{useControllableState as ne,useEffectCallback as d,useEventListener as S}from"@nild/hooks";import{mergeRefs as oe,cnMerge as ie}from"@nild/shared";import{forwardRef as le,useMemo as g,useRef as se,useState as ue}from"react";import ce from"../_shared/utils/register-slots/index.js";import{SliderProvider as me}from"./contexts/index.js";import de from"./style/index.js";import fe,{isThumbElement as ve}from"./Thumb.js";import be,{isTrackElement as he}from"./Track.js";const pe=0,we=100,H=1,O=10,ge=ce({track:{isMatched:he},thumb:{isMatched:ve}}),X=(r,a,n)=>Math.min(Math.max(r,a),n),Y=r=>{var a;return((a=`${r}`.split(".")[1])==null?void 0:a.length)??0},q=(r,a,n,o,f)=>{const s=a+Math.round((r-a)/o)*o;return X(Number(s.toFixed(f)),a,n)},ke=(r,a,n)=>{const o=n-a;return o<=0?0:(r-a)/o*100},xe=(r,a,n,o,f)=>{const s=a.getBoundingClientRect(),h=n==="vertical"?s.height:s.width;if(h<=0)return o;const p=n==="vertical"?s.bottom-r.clientY:r.clientX-s.left,w=X(p/h,0,1);return o+(f-o)*w},G=le((r,a)=>{var n;const{className:o,children:f,value:s,defaultValue:h,min:p=pe,max:w=we,step:E=H,orientation:i="horizontal",size:k="medium",variant:x="floating",block:J=!1,disabled:c=!1,onChange:R,onComplete:$,onKeyDown:z,onPointerDown:A,...N}=r,{slots:T}=g(()=>ge(f),[f]),u=Math.min(p,w),v=Math.max(p,w),m=E>0?E:H,j=Math.max(Y(m),Y(u)),D=se(null),[M,I]=ue(!1),[Q,W]=ne(s,h??u),l=q(Q,u,v,m,j),b=ke(l,u,v),K=d(e=>{const t=q(e,u,v,m,j);return Object.is(t,l)||(W(t),R?.(t)),t}),P=d(e=>{const t=D.current;return!t||c?l:K(xe(e,t,i,u,v))}),L=d((e=l)=>{I(!1),$?.(e)}),Z=d(e=>{var t,F;A?.(e),!(e.defaultPrevented||c||e.button!==void 0&&e.button!==0)&&(e.preventDefault(),e.currentTarget.focus(),(F=(t=e.currentTarget).setPointerCapture)==null||F.call(t,e.pointerId),I(!0),P(e))}),_=d(e=>{M&&(e.preventDefault(),P(e))}),U=d(e=>{M&&(e.preventDefault(),L(P(e)))}),ee=d(e=>{if(z?.(e),e.defaultPrevented||c)return;let t;switch(e.key){case"ArrowRight":case"ArrowUp":t=l+m;break;case"ArrowLeft":case"ArrowDown":t=l-m;break;case"PageUp":t=l+m*O;break;case"PageDown":t=l-m*O;break;case"Home":t=u;break;case"End":t=v;break}t!==void 0&&(e.preventDefault(),L(K(t)))}),te=((n=D.current)==null?void 0:n.ownerDocument.defaultView)??null,y=M?te:null;S(y,"pointermove",_),S(y,"pointerup",U),S(y,"pointercancel",U);const V=g(()=>i==="vertical"?{height:`${b}%`}:{width:`${b}%`},[i,b]),B=g(()=>i==="vertical"?{bottom:`${b}%`}:{left:`${b}%`},[i,b]),ae=g(()=>({orientation:i,rangeStyle:V,size:k,thumbStyle:B,variant:x}),[i,V,k,B,x]);return C(me,{value:ae,children:re("div",{...N,"aria-disabled":c,"aria-orientation":i,"aria-valuemax":v,"aria-valuemin":u,"aria-valuenow":l,className:ie(de.slider({orientation:i,size:k,variant:x,block:J,disabled:c}),o),"data-disabled":c||void 0,onKeyDown:ee,onPointerDown:Z,ref:oe(a,D),role:"slider",tabIndex:c?-1:N.tabIndex??0,children:[T.track.el??C(be,{}),T.thumb.el??C(fe,{})]})})});G.displayName="Slider";export{G as default};

package/dist/slider/Thumb.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { ThumbProps } from './interfaces';
+declare const Thumb: import('react').ForwardRefExoticComponent<ThumbProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const isThumbElement: (child: ReactNode) => child is ReactElement<ThumbProps>;
+export default Thumb;

package/dist/slider/Thumb.js

@@ -0,0 +1 @@
+import{jsx as d}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as p,isValidElement as u}from"react";import{useSliderContext as c}from"./contexts/index.js";import h from"./style/index.js";const t=p(({className:e,children:s,style:r,...i},m)=>{const{orientation:o,size:n,thumbStyle:a,variant:l}=c();return d("span",{...i,"aria-hidden":"true",className:f(h.thumb({orientation:o,size:n,variant:l}),e),ref:m,style:r?{...a,...r}:a,children:s})});t.displayName="Slider.Thumb";const b=e=>u(e)&&e.type===t;export{t as default,b as isThumbElement};

package/dist/slider/Track.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { TrackProps } from './interfaces';
+declare const Track: import('react').ForwardRefExoticComponent<TrackProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const isTrackElement: (child: ReactNode) => child is ReactElement<TrackProps>;
+export default Track;

package/dist/slider/Track.js

@@ -0,0 +1 @@
+import{jsxs as l,jsx as c}from"react/jsx-runtime";import{cnMerge as d}from"@nild/shared";import{forwardRef as f,isValidElement as p}from"react";import h from"../_shared/utils/register-slots/index.js";import{useSliderContext as g}from"./contexts/index.js";import u,{isRangeElement as x}from"./Range.js";import k from"./style/index.js";const E=h({range:{isMatched:x}}),e=f(({className:r,children:a,...s},t)=>{const{orientation:i,variant:o}=g(),{slots:n,restChildren:m}=E(a);return l("span",{...s,"aria-hidden":"true",className:d(k.track({orientation:i,variant:o}),r),ref:t,children:[n.range.el??c(u,{}),m]})});e.displayName="Slider.Track";const M=r=>p(r)&&r.type===e;export{e as default,M as isTrackElement};

package/dist/slider/contexts/index.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { SliderOrientation, SliderSize, SliderVariant } from '../interfaces';
+export interface SliderContextValue {
+    orientation: SliderOrientation;
+    size: SliderSize;
+    variant: SliderVariant;
+    rangeStyle: CSSProperties;
+    thumbStyle: CSSProperties;
+}
+declare const SliderProvider: import('react').Provider<SliderContextValue>, useSliderContext: () => SliderContextValue;
+export { SliderProvider, useSliderContext };

package/dist/slider/contexts/index.js

@@ -0,0 +1 @@
+import{createContextSuite as t}from"@nild/shared";const[e,i]=t({defaultValue:{orientation:"horizontal",size:"medium",variant:"floating",rangeStyle:{width:"0%"},thumbStyle:{left:"0%"}}});export{e as SliderProvider,i as useSliderContext};

package/dist/slider/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @category Components
+ */
+declare const Slider: import('react').ForwardRefExoticComponent<import('./interfaces').SliderProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Track: import('react').ForwardRefExoticComponent<import('./interfaces').TrackProps & import('react').RefAttributes<HTMLSpanElement>>;
+    Range: import('react').ForwardRefExoticComponent<import('./interfaces').RangeProps & import('react').RefAttributes<HTMLSpanElement>>;
+    Thumb: import('react').ForwardRefExoticComponent<import('./interfaces').ThumbProps & import('react').RefAttributes<HTMLSpanElement>>;
+};
+export type * from './interfaces';
+export default Slider;

package/dist/slider/index.js

@@ -0,0 +1 @@
+import o from"./Range.js";import r from"./Slider.js";import m from"./Thumb.js";import t from"./Track.js";const p=Object.assign(r,{Track:t,Range:o,Thumb:m});export{p as default};

package/dist/slider/interfaces/index.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type SliderOrientation = 'horizontal' | 'vertical';
+export type SliderSize = 'small' | 'medium' | 'large';
+export type SliderVariant = 'floating' | 'contained';
+
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    children?: ReactNode;
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    orientation?: SliderOrientation;
+    size?: SliderSize;
+    variant?: SliderVariant;
+    block?: boolean;
+    disabled?: boolean;
+    onChange?: (value: number) => void;
+    onComplete?: (value: number) => void;
+}
+
+export type TrackProps = HTMLAttributes<HTMLSpanElement>;
+
+export type RangeProps = HTMLAttributes<HTMLSpanElement>;
+
+export type ThumbProps = HTMLAttributes<HTMLSpanElement>;

package/dist/slider/style/index.d.ts

@@ -0,0 +1,24 @@
+import { SliderOrientation, SliderSize, SliderVariant } from '../interfaces';
+declare const _default: {
+    slider: (props?: {
+        orientation?: SliderOrientation;
+        size?: SliderSize;
+        variant?: SliderVariant;
+        block?: boolean;
+        disabled?: boolean;
+    } | undefined) => string;
+    track: (props?: {
+        orientation?: SliderOrientation;
+        variant?: SliderVariant;
+    } | undefined) => string;
+    range: (props?: {
+        orientation?: SliderOrientation;
+        variant?: SliderVariant;
+    } | undefined) => string;
+    thumb: (props?: {
+        orientation?: SliderOrientation;
+        size?: SliderSize;
+        variant?: SliderVariant;
+    } | undefined) => string;
+};
+export default _default;

package/dist/slider/style/index.js

@@ -0,0 +1 @@
+import{cva as a}from"@nild/shared";import n from"../../_shared/style/index.js";const e=["group-enabled:group-hover:ring-focused","group-enabled:group-focus-visible:ring-focused"],t=a(["nd-slider","group","relative","inline-flex","box-border","font-nd","touch-none","select-none","outline-none",n.disabled],{variants:{orientation:{horizontal:["w-48","items-center"],vertical:["h-40","justify-center"]},size:{small:["[--nd-slider-size:1rem]","[--nd-slider-track-size:0.125rem]","[--nd-slider-thumb-size:0.75rem]"],medium:["[--nd-slider-size:1.25rem]","[--nd-slider-track-size:0.25rem]","[--nd-slider-thumb-size:0.875rem]"],large:["[--nd-slider-size:1.5rem]","[--nd-slider-track-size:0.375rem]","[--nd-slider-thumb-size:1rem]"]},variant:{floating:"",contained:""},block:{true:"",false:""},disabled:{true:"",false:"cursor-pointer"}},defaultVariants:{orientation:"horizontal",size:"medium",variant:"floating"},compoundVariants:[{orientation:"horizontal",className:"h-[var(--nd-slider-size)]"},{orientation:"vertical",className:"w-[var(--nd-slider-size)]"},{size:"small",variant:"contained",className:"[--nd-slider-size:0.625rem]"},{size:"medium",variant:"contained",className:"[--nd-slider-size:0.75rem]"},{size:"large",variant:"contained",className:"[--nd-slider-size:0.875rem]"},{orientation:"horizontal",block:!0,className:"w-full"},{orientation:"vertical",block:!0,className:"h-full"}]}),i=a(["nd-slider-track","absolute","rounded-full","bg-muted"],{variants:{orientation:{horizontal:["left-0","right-0","h-[var(--nd-slider-track-size)]"],vertical:["top-0","bottom-0","w-[var(--nd-slider-track-size)]"]},variant:{floating:"",contained:""}},defaultVariants:{orientation:"horizontal",variant:"floating"},compoundVariants:[{orientation:"horizontal",variant:"contained",className:"h-full"},{orientation:"vertical",variant:"contained",className:"w-full"}]}),r=a(["nd-slider-range","absolute","rounded-full","bg-brand","pointer-events-none"],{variants:{orientation:{horizontal:["left-0","h-[var(--nd-slider-track-size)]"],vertical:["bottom-0","w-[var(--nd-slider-track-size)]"]},variant:{floating:"",contained:""}},defaultVariants:{orientation:"horizontal",variant:"floating"},compoundVariants:[{orientation:"horizontal",variant:"contained",className:"h-full"},{orientation:"vertical",variant:"contained",className:"w-full"}]}),o=a(["nd-slider-thumb","absolute","inline-flex","items-center","justify-center","rounded-full","text-[0.625rem]","leading-none","pointer-events-none","transition-[box-shadow]"],{variants:{orientation:{horizontal:["top-1/2","-translate-x-1/2","-translate-y-1/2"],vertical:["left-1/2","-translate-x-1/2","translate-y-1/2"]},size:{small:"",medium:"",large:""},variant:{floating:"",contained:""}},defaultVariants:{variant:"floating"},compoundVariants:[{variant:"floating",className:["size-[var(--nd-slider-thumb-size)]","box-border","border-2","border-brand","bg-brand-contrast","text-brand",e]},{variant:"contained",className:["box-content","aspect-square","border-2","border-canvas","bg-brand","text-brand-contrast",e]},{orientation:"horizontal",variant:"contained",className:"h-full"},{orientation:"vertical",variant:"contained",className:"w-full"}]}),l={slider:t,track:i,range:r,thumb:o};export{l as default};

package/dist/tailwind.css

@@ -1 +1 @@
-@theme static{ --nd-brand-h: 255; --nd-brand-c: .14; --nd-neutral-c: .001; --nd-shadow-l: 15%; --nd-shadow-c: .008; --nd-color-brand-0: light-dark( oklch(99% calc(var(--nd-brand-c) * .08) var(--nd-brand-h)), oklch(14% calc(var(--nd-brand-c) * .08) var(--nd-brand-h)) ); --nd-color-brand-5: light-dark( oklch(97% calc(var(--nd-brand-c) * .12) var(--nd-brand-h)), oklch(17% calc(var(--nd-brand-c) * .12) var(--nd-brand-h)) ); --nd-color-brand-10: light-dark( oklch(95% calc(var(--nd-brand-c) * .18) var(--nd-brand-h)), oklch(20% calc(var(--nd-brand-c) * .18) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(92% calc(var(--nd-brand-c) * .24) var(--nd-brand-h)), oklch(25% calc(var(--nd-brand-c) * .24) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(88% calc(var(--nd-brand-c) * .34) var(--nd-brand-h)), oklch(30% calc(var(--nd-brand-c) * .34) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(80% calc(var(--nd-brand-c) * .5) var(--nd-brand-h)), oklch(38% calc(var(--nd-brand-c) * .5) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(72% calc(var(--nd-brand-c) * .68) var(--nd-brand-h)), oklch(46% calc(var(--nd-brand-c) * .68) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(64% calc(var(--nd-brand-c) * .86) var(--nd-brand-h)), oklch(52% calc(var(--nd-brand-c) * .86) var(--nd-brand-h)) ); --nd-color-brand-60: oklch(58% var(--nd-brand-c) var(--nd-brand-h)); --nd-color-brand-70: light-dark( oklch(50% calc(var(--nd-brand-c) * .94) var(--nd-brand-h)), oklch(66% calc(var(--nd-brand-c) * .94) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(40% calc(var(--nd-brand-c) * .78) var(--nd-brand-h)), oklch(76% calc(var(--nd-brand-c) * .78) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(30% calc(var(--nd-brand-c) * .55) var(--nd-brand-h)), oklch(88% calc(var(--nd-brand-c) * .55) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(20% calc(var(--nd-brand-c) * .36) var(--nd-brand-h)), oklch(96% calc(var(--nd-brand-c) * .36) var(--nd-brand-h)) ); --nd-color-neutral-0: light-dark( oklch(99% var(--nd-neutral-c) var(--nd-brand-h)), oklch(14% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-5: light-dark( oklch(97.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(17% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-10: light-dark( oklch(95.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(21% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-15: light-dark( oklch(92.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(26% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-20: light-dark( oklch(89% var(--nd-neutral-c) var(--nd-brand-h)), oklch(32% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-30: light-dark( oklch(81% var(--nd-neutral-c) var(--nd-brand-h)), oklch(42% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-40: light-dark( oklch(72% var(--nd-neutral-c) var(--nd-brand-h)), oklch(50% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-50: light-dark( oklch(60% var(--nd-neutral-c) var(--nd-brand-h)), oklch(58% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-60: light-dark( oklch(50% var(--nd-neutral-c) var(--nd-brand-h)), oklch(67% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-70: light-dark( oklch(40% var(--nd-neutral-c) var(--nd-brand-h)), oklch(76% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-80: light-dark( oklch(32% var(--nd-neutral-c) var(--nd-brand-h)), oklch(85% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-90: light-dark( oklch(22% var(--nd-neutral-c) var(--nd-brand-h)), oklch(93% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-100: light-dark( oklch(15% var(--nd-neutral-c) var(--nd-brand-h)), oklch(98% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-success-base: oklch(60% .14 140deg); --nd-color-warning-base: oklch(76% .15 80deg); --nd-color-error-base: oklch(58% .16 28deg); --nd-color-shadow-key: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 16%), oklch(0% 0 0deg / 65%) ); --nd-color-shadow-ambient: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 4%), oklch(0% 0 0deg / 30%) ); --nd-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }@theme{ --color-brand: var(--nd-color-brand-60); --color-brand-hover: light-dark(var(--nd-color-brand-50), var(--nd-color-brand-70)); --color-brand-active: var(--nd-color-brand-60); --color-brand-muted: light-dark(var(--nd-color-brand-30), var(--nd-color-brand-40)); --color-brand-subtle: var(--nd-color-brand-10); --color-brand-subtle-hover: var(--nd-color-brand-15); --color-brand-subtle-active: var(--nd-color-brand-20); --color-brand-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-success: color-mix(in oklch, var(--nd-color-success-base) 90%, var(--nd-color-brand-60) 10%); --color-success-hover: light-dark( oklch(from var(--color-success) calc(l + .06) calc(c*.86) h), oklch(from var(--color-success) calc(l + .08) calc(c*.94) h) ); --color-success-muted: light-dark( oklch(from var(--color-success) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-success) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-success-subtle: light-dark( oklch(from var(--color-success) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-success) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-success-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-warning: color-mix(in oklch, var(--nd-color-warning-base) 95%, var(--nd-color-brand-60) 5%); --color-warning-hover: light-dark( oklch(from var(--color-warning) calc(l + .06) calc(c*.86) h), oklch(from var(--color-warning) calc(l + .08) calc(c*.94) h) ); --color-warning-muted: light-dark( oklch(from var(--color-warning) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-warning) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-warning-subtle: light-dark( oklch(from var(--color-warning) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-warning) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-warning-contrast: light-dark(var(--nd-color-neutral-100), var(--nd-color-neutral-0)); --color-error: color-mix(in oklch, var(--nd-color-error-base) 92%, var(--nd-color-brand-60) 8%); --color-error-hover: light-dark( oklch(from var(--color-error) calc(l + .06) calc(c*.86) h), oklch(from var(--color-error) calc(l + .08) calc(c*.94) h) ); --color-error-muted: light-dark( oklch(from var(--color-error) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-error) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-error-subtle: light-dark( oklch(from var(--color-error) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-error) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-error-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --border-color-main: var(--nd-color-neutral-20); --border-color-muted: var(--nd-color-neutral-15); --border-color-subtle: var(--nd-color-neutral-10); --outline-color-main: var(--border-color-main); --outline-color-muted: var(--border-color-muted); --outline-color-subtle: var(--border-color-subtle); --background-color-canvas: var(--nd-color-neutral-0); --background-color-canvas-inverse: var(--nd-color-neutral-100); --background-color-subtle: var(--nd-color-neutral-5); --background-color-subtle-hover: var(--nd-color-neutral-10); --background-color-muted: var(--nd-color-neutral-10); --background-color-muted-hover: var(--nd-color-neutral-15); --background-color-muted-active: var(--nd-color-neutral-20); --background-color-emphasized: var(--nd-color-neutral-20); --background-color-emphasized-hover: var(--nd-color-neutral-30); --background-color-surface: light-dark( var(--nd-color-neutral-0), var(--nd-color-neutral-10) ); --background-color-surface-subtle: light-dark(var(--nd-color-neutral-5), var(--nd-color-neutral-15)); --background-color-surface-muted: light-dark(var(--nd-color-neutral-10), var(--nd-color-neutral-20)); --text-color-main: var(--nd-color-neutral-100); --text-color-main-inverse: var(--nd-color-neutral-0); --text-color-muted: var(--nd-color-neutral-70); --text-color-subtle: var(--nd-color-neutral-50); --text-sm: .75rem; --text-sm--line-height: 1.25rem; --text-md: .875rem; --text-md--line-height: 1.375rem; --text-lg: 1rem; --text-lg--line-height: 1.5rem; --text-xl: 1.125rem; --text-xl--line-height: 1.625rem; --text-2xl: 1.25rem; --text-2xl--line-height: 1.75rem; --text-3xl: 1.5rem; --text-3xl--line-height: 2rem; --text-4xl: 1.875rem; --text-4xl--line-height: 2.375rem; --text-5xl: 2.375rem; --text-5xl--line-height: 2.875rem; --text-6xl: 2.875rem; --text-6xl--line-height: 3.375rem; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --z-index-popup: 1000; --z-index-modal: 1300; --z-index-toast: 1500; --shadow-sm: 0 0 0 .8px var(--border-color-muted), 0 1px 2px 0 var(--nd-color-shadow-key); --shadow-md: 0 0 0 .8px var(--border-color-muted), 0 4px 6px -1px var(--nd-color-shadow-key), 0 2px 4px -2px var(--nd-color-shadow-ambient); --shadow-lg: 0 0 0 .8px var(--border-color-muted), 0 10px 15px -3px var(--nd-color-shadow-key), 0 4px 6px -4px var(--nd-color-shadow-ambient); --shadow-xl: 0 0 0 .8px var(--border-color-muted), 0 20px 25px -5px var(--nd-color-shadow-key), 0 8px 10px -6px var(--nd-color-shadow-ambient); --shadow-2xl: 0 0 0 .8px var(--border-color-muted), 0 25px 50px -12px var(--nd-color-shadow-key), 0 12px 24px -12px var(--nd-color-shadow-ambient); --font-nd: var(--nd-font-family); --default-transition-duration: .2s; }@utility stroke-main{stroke: var(--border-color-main);}@utility stroke-muted{stroke: var(--border-color-muted);}@utility stroke-subtle{stroke: var(--border-color-subtle);}@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@utility ring-focused{outline: none; box-shadow: 0 0 0 .2rem var(--color-brand-muted),var(--tw-shadow, 0 0 #00000000);}@utility ring-focused-with-outline{box-shadow: 0 0 0 .2rem var(--color-brand-muted),var(--tw-shadow, 0 0 #00000000);}@utility r-*{r: --value(number);}@custom-variant focus-visible-within{&:has(:focus-visible) {@slot;}}@custom-variant disabled{&:where(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}@custom-variant disabled-visual{&:where(:disabled,[aria-disabled="true"],[data-disabled]):not(:where(.nd-disabled-carrier:where(:disabled,[aria-disabled="true"],[data-disabled])) :where(:disabled,[aria-disabled="true"],[data-disabled])) {@slot;}}@custom-variant enabled{&:not(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}
+@theme static{ --nd-brand-h: 255; --nd-brand-c: .14; --nd-neutral-c: .001; --nd-shadow-l: 15%; --nd-shadow-c: .008; --nd-color-brand-0: light-dark( oklch(99% calc(var(--nd-brand-c) * .08) var(--nd-brand-h)), oklch(14% calc(var(--nd-brand-c) * .08) var(--nd-brand-h)) ); --nd-color-brand-5: light-dark( oklch(97% calc(var(--nd-brand-c) * .12) var(--nd-brand-h)), oklch(17% calc(var(--nd-brand-c) * .12) var(--nd-brand-h)) ); --nd-color-brand-10: light-dark( oklch(95% calc(var(--nd-brand-c) * .18) var(--nd-brand-h)), oklch(20% calc(var(--nd-brand-c) * .18) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(92% calc(var(--nd-brand-c) * .24) var(--nd-brand-h)), oklch(25% calc(var(--nd-brand-c) * .24) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(88% calc(var(--nd-brand-c) * .34) var(--nd-brand-h)), oklch(30% calc(var(--nd-brand-c) * .34) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(80% calc(var(--nd-brand-c) * .5) var(--nd-brand-h)), oklch(38% calc(var(--nd-brand-c) * .5) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(72% calc(var(--nd-brand-c) * .68) var(--nd-brand-h)), oklch(46% calc(var(--nd-brand-c) * .68) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(64% calc(var(--nd-brand-c) * .86) var(--nd-brand-h)), oklch(52% calc(var(--nd-brand-c) * .86) var(--nd-brand-h)) ); --nd-color-brand-60: oklch(58% var(--nd-brand-c) var(--nd-brand-h)); --nd-color-brand-70: light-dark( oklch(50% calc(var(--nd-brand-c) * .94) var(--nd-brand-h)), oklch(66% calc(var(--nd-brand-c) * .94) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(40% calc(var(--nd-brand-c) * .78) var(--nd-brand-h)), oklch(76% calc(var(--nd-brand-c) * .78) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(30% calc(var(--nd-brand-c) * .55) var(--nd-brand-h)), oklch(88% calc(var(--nd-brand-c) * .55) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(20% calc(var(--nd-brand-c) * .36) var(--nd-brand-h)), oklch(96% calc(var(--nd-brand-c) * .36) var(--nd-brand-h)) ); --nd-color-neutral-0: light-dark( oklch(99% var(--nd-neutral-c) var(--nd-brand-h)), oklch(14% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-5: light-dark( oklch(97.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(17% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-10: light-dark( oklch(95.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(21% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-15: light-dark( oklch(92.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(26% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-20: light-dark( oklch(89% var(--nd-neutral-c) var(--nd-brand-h)), oklch(32% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-30: light-dark( oklch(81% var(--nd-neutral-c) var(--nd-brand-h)), oklch(42% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-40: light-dark( oklch(72% var(--nd-neutral-c) var(--nd-brand-h)), oklch(50% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-50: light-dark( oklch(60% var(--nd-neutral-c) var(--nd-brand-h)), oklch(58% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-60: light-dark( oklch(50% var(--nd-neutral-c) var(--nd-brand-h)), oklch(67% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-70: light-dark( oklch(40% var(--nd-neutral-c) var(--nd-brand-h)), oklch(76% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-80: light-dark( oklch(32% var(--nd-neutral-c) var(--nd-brand-h)), oklch(85% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-90: light-dark( oklch(22% var(--nd-neutral-c) var(--nd-brand-h)), oklch(93% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-100: light-dark( oklch(15% var(--nd-neutral-c) var(--nd-brand-h)), oklch(98% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-success-base: oklch(60% .14 140deg); --nd-color-warning-base: oklch(76% .15 80deg); --nd-color-error-base: oklch(58% .16 28deg); --nd-color-shadow-key: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 16%), oklch(0% 0 0deg / 65%) ); --nd-color-shadow-ambient: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 4%), oklch(0% 0 0deg / 30%) ); --nd-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }@theme{ --color-brand: var(--nd-color-brand-60); --color-brand-hover: light-dark(var(--nd-color-brand-50), var(--nd-color-brand-70)); --color-brand-active: var(--nd-color-brand-60); --color-brand-muted: light-dark(var(--nd-color-brand-30), var(--nd-color-brand-40)); --color-brand-subtle: var(--nd-color-brand-10); --color-brand-subtle-hover: var(--nd-color-brand-15); --color-brand-subtle-active: var(--nd-color-brand-20); --color-brand-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-success: color-mix(in oklch, var(--nd-color-success-base) 90%, var(--nd-color-brand-60) 10%); --color-success-hover: light-dark( oklch(from var(--color-success) calc(l + .06) calc(c*.86) h), oklch(from var(--color-success) calc(l + .08) calc(c*.94) h) ); --color-success-muted: light-dark( oklch(from var(--color-success) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-success) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-success-subtle: light-dark( oklch(from var(--color-success) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-success) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-success-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-warning: color-mix(in oklch, var(--nd-color-warning-base) 95%, var(--nd-color-brand-60) 5%); --color-warning-hover: light-dark( oklch(from var(--color-warning) calc(l + .06) calc(c*.86) h), oklch(from var(--color-warning) calc(l + .08) calc(c*.94) h) ); --color-warning-muted: light-dark( oklch(from var(--color-warning) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-warning) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-warning-subtle: light-dark( oklch(from var(--color-warning) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-warning) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-warning-contrast: light-dark(var(--nd-color-neutral-100), var(--nd-color-neutral-0)); --color-error: color-mix(in oklch, var(--nd-color-error-base) 92%, var(--nd-color-brand-60) 8%); --color-error-hover: light-dark( oklch(from var(--color-error) calc(l + .06) calc(c*.86) h), oklch(from var(--color-error) calc(l + .08) calc(c*.94) h) ); --color-error-muted: light-dark( oklch(from var(--color-error) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-error) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-error-subtle: light-dark( oklch(from var(--color-error) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-error) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-error-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --border-color-main: var(--nd-color-neutral-20); --border-color-muted: var(--nd-color-neutral-15); --border-color-subtle: var(--nd-color-neutral-10); --border-color-canvas: var(--nd-color-neutral-0); --outline-color-main: var(--border-color-main); --outline-color-muted: var(--border-color-muted); --outline-color-subtle: var(--border-color-subtle); --background-color-canvas: var(--nd-color-neutral-0); --background-color-canvas-inverse: var(--nd-color-neutral-100); --background-color-subtle: var(--nd-color-neutral-5); --background-color-subtle-hover: var(--nd-color-neutral-10); --background-color-muted: var(--nd-color-neutral-10); --background-color-muted-hover: var(--nd-color-neutral-15); --background-color-muted-active: var(--nd-color-neutral-20); --background-color-emphasized: var(--nd-color-neutral-20); --background-color-emphasized-hover: var(--nd-color-neutral-30); --background-color-surface: light-dark( var(--nd-color-neutral-0), var(--nd-color-neutral-5) ); --text-color-main: var(--nd-color-neutral-100); --text-color-main-inverse: var(--nd-color-neutral-0); --text-color-muted: var(--nd-color-neutral-70); --text-color-subtle: var(--nd-color-neutral-50); --text-sm: .75rem; --text-sm--line-height: 1.25rem; --text-md: .875rem; --text-md--line-height: 1.375rem; --text-lg: 1rem; --text-lg--line-height: 1.5rem; --text-xl: 1.125rem; --text-xl--line-height: 1.625rem; --text-2xl: 1.25rem; --text-2xl--line-height: 1.75rem; --text-3xl: 1.5rem; --text-3xl--line-height: 2rem; --text-4xl: 1.875rem; --text-4xl--line-height: 2.375rem; --text-5xl: 2.375rem; --text-5xl--line-height: 2.875rem; --text-6xl: 2.875rem; --text-6xl--line-height: 3.375rem; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --z-index-popup: 1000; --z-index-modal: 1300; --z-index-toast: 1500; --shadow-sm: 0 0 0 .8px var(--border-color-muted), 0 1px 2px 0 var(--nd-color-shadow-key); --shadow-md: 0 0 0 .8px var(--border-color-muted), 0 4px 6px -1px var(--nd-color-shadow-key), 0 2px 4px -2px var(--nd-color-shadow-ambient); --shadow-lg: 0 0 0 .8px var(--border-color-muted), 0 10px 15px -3px var(--nd-color-shadow-key), 0 4px 6px -4px var(--nd-color-shadow-ambient); --shadow-xl: 0 0 0 .8px var(--border-color-muted), 0 20px 25px -5px var(--nd-color-shadow-key), 0 8px 10px -6px var(--nd-color-shadow-ambient); --shadow-2xl: 0 0 0 .8px var(--border-color-muted), 0 25px 50px -12px var(--nd-color-shadow-key), 0 12px 24px -12px var(--nd-color-shadow-ambient); --font-nd: var(--nd-font-family); --default-transition-duration: .2s; }@utility stroke-main{stroke: var(--border-color-main);}@utility stroke-muted{stroke: var(--border-color-muted);}@utility stroke-subtle{stroke: var(--border-color-subtle);}@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@utility ring-focused{outline: none; box-shadow: 0 0 0 .2rem var(--color-brand-muted),var(--tw-shadow, 0 0 #00000000);}@utility ring-focused-with-outline{box-shadow: 0 0 0 .2rem var(--color-brand-muted),var(--tw-shadow, 0 0 #00000000);}@utility r-*{r: --value(number);}@custom-variant focus-visible-within{&:has(:focus-visible) {@slot;}}@custom-variant disabled{&:where(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}@custom-variant disabled-visual{&:where(:disabled,[aria-disabled="true"],[data-disabled]):not(:where(.nd-disabled-carrier:where(:disabled,[aria-disabled="true"],[data-disabled])) :where(:disabled,[aria-disabled="true"],[data-disabled])) {@slot;}}@custom-variant enabled{&:not(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.54",
+  "version": "0.0.55",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -26,14 +26,15 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@floating-ui/dom": "1.7.1"
+    "@floating-ui/dom": "1.7.1",
+    "culori": "^4.0.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@nild/shared": "^0.0.18",
-    "@nild/icons": "^0.0.21",
-    "@nild/hooks": "^0.0.21"
+    "@nild/hooks": "^0.0.21",
+    "@nild/icons": "^0.0.21"
   },
   "scripts": {
     "build": "vite build --mode PROD",