@hueycolor/vue 0.0.1-beta.3

package/LICENSE.md

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2025 Eihab Khan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/dist/App.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/components/alpha-input.vue.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'vue';
+export interface AlphaInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+}
+declare const _default: import('vue').DefineComponent<AlphaInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AlphaInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/components/alpha-slider.vue.d.ts

@@ -0,0 +1,5 @@
+import { ColorSliderProps } from './internal/channel-slider.vue';
+export interface AlphaSliderProps extends /* @vue-ignore */ ColorSliderProps {
+}
+declare const _default: import('vue').DefineComponent<AlphaSliderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AlphaSliderProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/blue-input.vue.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'vue';
+export interface RedInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+}
+declare const _default: import('vue').DefineComponent<RedInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<RedInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/components/color-dropper.vue.d.ts

@@ -0,0 +1,16 @@
+import { ButtonHTMLAttributes } from 'vue';
+interface ColorDropperProps extends /* @vue-ignore */ ButtonHTMLAttributes {
+}
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<ColorDropperProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (error: Error) => any;
+}, string, import('vue').PublicProps, Readonly<ColorDropperProps> & Readonly<{
+    onError?: ((error: Error) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/color-preview.vue.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'vue';
+export interface ColorPreviewProps {
+    class?: HTMLAttributes['class'];
+    splitPreview?: boolean;
+}
+declare const _default: import('vue').DefineComponent<ColorPreviewProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ColorPreviewProps> & Readonly<{}>, {
+    splitPreview: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/color-swatch.vue.d.ts

@@ -0,0 +1,6 @@
+import { AriaAttributes } from 'vue';
+export interface ColorSwatchProps extends /* @vue-ignore */ AriaAttributes {
+    swatch: Array<string>;
+}
+declare const _default: import('vue').DefineComponent<ColorSwatchProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ColorSwatchProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/green-input.vue.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'vue';
+export interface RedInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+}
+declare const _default: import('vue').DefineComponent<RedInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<RedInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/components/hex-input.vue.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'vue';
+export interface ChannelInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+}
+declare const _default: import('vue').DefineComponent<ChannelInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ChannelInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/components/hue-input.vue.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'vue';
+export interface HueInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+}
+declare const _default: import('vue').DefineComponent<HueInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<HueInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/components/hue-slider.vue.d.ts

@@ -0,0 +1,5 @@
+import { ColorSliderProps } from './internal/channel-slider.vue';
+export interface HueSliderProps extends /* @vue-ignore */ ColorSliderProps {
+}
+declare const _default: import('vue').DefineComponent<HueSliderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<HueSliderProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/huey-root.vue.d.ts

@@ -0,0 +1,18 @@
+import { HueyColor } from '@hueycolor/core';
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
+    modelValue: HueyColor;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: HueyColor) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    modelValue: HueyColor;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: HueyColor) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/index.d.ts

@@ -0,0 +1,18 @@
+export { default as AlphaInput } from './alpha-input.vue';
+export { default as AlphaSlider } from './alpha-slider.vue';
+export { default as BlueInput } from './blue-input.vue';
+export { default as ColorDropper } from './color-dropper.vue';
+export { default as ColorPreview } from './color-preview.vue';
+export { default as ColorSwatch } from './color-swatch.vue';
+export { default as GreenInput } from './green-input.vue';
+export { default as HexInput } from './hex-input.vue';
+export { default as HueInput } from './hue-input.vue';
+export { default as HueSlider } from './hue-slider.vue';
+export { default as HueyRoot } from './huey-root.vue';
+export { default as ColorThumb } from './internal/color-thumb.vue';
+export { default as LightnessInput } from './lightness-input.vue';
+export { default as LightnessSlider } from './lightness-slider.vue';
+export { default as RedInput } from './red-input.vue';
+export { default as SaturationArea } from './saturation-area.vue';
+export { default as SaturationInput } from './saturation-input.vue';
+export { default as SaturationSlider } from './saturation-slider.vue';

package/dist/components/internal/channel-input.vue.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'vue';
+export interface ChannelInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+}
+declare const _default: import('vue').DefineComponent<ChannelInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ChannelInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/components/internal/channel-slider.vue.d.ts

@@ -0,0 +1,22 @@
+import { AriaAttributes } from 'vue';
+export interface ColorSliderProps extends /* @vue-ignore */ AriaAttributes {
+    min?: number;
+    max?: number;
+    step?: number;
+}
+declare const _default: import('vue').DefineComponent<{
+    modelValue?: number;
+} & ColorSliderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    modelValue?: number;
+} & ColorSliderProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    max: number;
+    min: number;
+    step: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    'slider-track': HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/internal/color-thumb.vue.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'vue';
+export interface ColorThumbProps extends /* @vue-ignore */ HTMLAttributes {
+    class?: HTMLAttributes['class'];
+}
+declare const _default: import('vue').DefineComponent<ColorThumbProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ColorThumbProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/lightness-input.vue.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'vue';
+export interface LightnessInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+}
+declare const _default: import('vue').DefineComponent<LightnessInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<LightnessInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/components/lightness-slider.vue.d.ts

@@ -0,0 +1,5 @@
+import { ColorSliderProps } from './internal/channel-slider.vue';
+export interface LightnessSliderProps extends /* @vue-ignore */ ColorSliderProps {
+}
+declare const _default: import('vue').DefineComponent<LightnessSliderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<LightnessSliderProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/red-input.vue.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'vue';
+export interface RedInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+}
+declare const _default: import('vue').DefineComponent<RedInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<RedInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/components/saturation-area.vue.d.ts

@@ -0,0 +1,11 @@
+import { ColorFormat } from '@hueycolor/core';
+import { HTMLAttributes } from 'vue';
+export interface SaturationAreaProps extends /* @vue-ignore */ HTMLAttributes {
+    colorFormat?: Exclude<ColorFormat, 'oklch'>;
+}
+declare const _default: import('vue').DefineComponent<SaturationAreaProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SaturationAreaProps> & Readonly<{}>, {
+    colorFormat: Exclude<ColorFormat, "oklch">;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    area: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/saturation-input.vue.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'vue';
+export interface SaturationInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+}
+declare const _default: import('vue').DefineComponent<SaturationInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SaturationInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/components/saturation-slider.vue.d.ts

@@ -0,0 +1,5 @@
+import { ColorSliderProps } from './internal/channel-slider.vue';
+export interface SaturationSliderProps extends /* @vue-ignore */ ColorSliderProps {
+}
+declare const _default: import('vue').DefineComponent<SaturationSliderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SaturationSliderProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/composables/use-huey-context.d.ts

@@ -0,0 +1,12 @@
+import { HueyColor } from '@hueycolor/core';
+import { InjectionKey, Ref } from 'vue';
+export interface HueyContext {
+    hue: Ref<number>;
+    saturation: Ref<number>;
+    lightness: Ref<number>;
+    alpha: Ref<number>;
+    setColor: (color: string | HueyColor) => void;
+    colorValue: Ref<HueyColor>;
+}
+export declare const HUEY_CONTEXT: InjectionKey<HueyContext>;
+export declare function useHueyContext(): HueyContext;

package/dist/index.cjs

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),c=require("@hueycolor/core"),K=e.defineComponent({__name:"channel-input",setup(g){return(p,i)=>(e.openBlock(),e.createElementBlock("input",e.mergeProps({"huey-input":""},p.$props,{autocomplete:"off",spellcheck:"false"}),null,16))}}),F=Symbol("huey");function x(){const g=e.inject(F);if(!g)throw new Error("Huey components must be used within <HueyRoot>");return g}const I=e.defineComponent({__name:"alpha-input",setup(g){const{min:p,max:i}=c.getChannelBounds("a"),{alpha:r}=x(),u=e.ref((r.value*100).toFixed(0));e.watch(r,n=>{const t=(n*100).toFixed(0);u.value!==t&&(u.value=t)});function m(n,t){n.value=String(t),u.value=n.value,r.value=t/100}function v(n){const t=n.target,o=Number(t.value);if(Number.isNaN(o)||o<p||o>i){t.value=u.value;return}m(t,o)}function d(n,t){const o=n.target,f=Number(o.value);let s=n.shiftKey?10:1;s*=t==="down"?-1:1;const l=Number.isNaN(f)?Number(u.value):f,a=Math.min(i,Math.max(p,l+s));m(o,a)}return(n,t)=>(e.openBlock(),e.createBlock(K,{value:u.value,onKeydown:[e.withKeys(e.withModifiers(v,["prevent"]),["enter"]),t[0]||(t[0]=e.withKeys(e.withModifiers(o=>d(o,"up"),["prevent"]),["up"])),t[1]||(t[1]=e.withKeys(e.withModifiers(o=>d(o,"down"),["prevent"]),["down"]))]},null,8,["value","onKeydown"]))}});function L(){document.body.style.userSelect="none"}function D(){document.body.style.userSelect="unset"}const A=["aria-valuemin","aria-valuemax","aria-valuenow"],T=e.defineComponent({__name:"channel-slider",props:e.mergeModels({min:{default:0},max:{default:100},step:{default:1}},{modelValue:{default:0},modelModifiers:{}}),emits:["update:modelValue"],setup(g){const p=g,i=e.useModel(g,"modelValue"),r=e.useTemplateRef("slider-track"),u=e.computed(()=>{const{min:o,max:f}=p;return`${c.normalize(i.value,o,f,0,100)}%`});e.onUnmounted(()=>{n()});function m(o){const f=r.value;if(!f)return;const{x:s}=c.getAbsolutePosition(f),{x:l}=c.getPageXYFromEvent(o),a=l-s,w=f.clientWidth,{max:h,min:b,step:y}=p,k=c.normalize(a/w,0,1,b,h),N=Math.round(k/y)*y;i.value=c.clamp(c.roundToStep(N,y),b,h)}function v(o){m(o),L(),window.addEventListener("mousemove",m),window.addEventListener("mouseup",t)}function d(o){const f=c.resolveArrowDirection(o);if(!f)return;const s=i.value,{min:l,max:a,step:w}=p,h=o.shiftKey?w*10:w;switch(f){case"left":case"down":i.value=c.clamp(c.roundToStep(s-h,h),l,a);break;case"right":case"up":i.value=c.clamp(c.roundToStep(s+h,h),l,a);break}}function n(){window.removeEventListener("mousemove",m),window.removeEventListener("mouseup",t)}function t(){D(),n()}return(o,f)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({ref:"slider-track"},{...p},{"huey-slider-track":"",role:"slider","aria-valuemin":o.$props.min,"aria-valuemax":o.$props.max,"aria-valuenow":g.modelValue,onMousedown:v,onTouchmovePassive:m,onTouchstartPassive:m}),[e.createVNode(e.unref(U),{tabindex:"0",style:e.normalizeStyle({left:u.value}),onKeydown:d},null,8,["style"])],16,A))}}),z=e.defineComponent({__name:"alpha-slider",setup(g){const{hue:p,saturation:i,lightness:r,alpha:u}=x(),m=e.computed(()=>`
+  linear-gradient(90deg, hsla(${p.value}, ${i.value}%, ${r.value}%, 0) 0 calc(var(--huey-slider-track-height) / 2), hsla(${p.value}, ${i.value}%, ${r.value}%, 1) calc(100% - calc(var(--huey-slider-track-height) / 2)) 100%), url('data:image/svg+xml;utf8,%3Csvg%20width%3D%222%22%20height%3D%222%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200h1v2h1V1H0%22%20fill-rule%3D%22nonzero%22%20fill%3D%22%23e1e1e1%22/%3E%3C/svg%3E') 0 0 / auto 66.67%, #fff
+  `),v=e.computed(()=>`color-mix(in srgb, white, hsl(${p.value}, ${i.value}%, ${r.value}%) ${u.value*100}%)`);return(d,n)=>(e.openBlock(),e.createBlock(T,e.mergeProps({...d.$props},{modelValue:e.unref(u),"onUpdate:modelValue":n[0]||(n[0]=t=>e.isRef(u)?u.value=t:null),"aria-label":d.$props["aria-label"]??"Alpha slider","huey-slider":"",max:1,min:0,step:.01,style:{"--huey-slider-bg":m.value,"--huey-thumb-color":v.value}}),null,16,["modelValue","aria-label","style"]))}}),O=e.defineComponent({__name:"blue-input",setup(g){const{min:p,max:i}=c.getChannelBounds("g"),{hue:r,saturation:u,lightness:m,colorValue:v}=x(),{b:d}=v.value.toRgb(),n=e.ref(d.toFixed(0));e.watch([r,u,m],([s,l,a])=>{const{b:w}=c.hslToRgb(s,l,a),h=w.toFixed(0);n.value!==h&&(n.value=h)});function t(s,l){s.value=String(l),n.value=s.value;const{r:a,g:w}=v.value.toRgb(),{h,s:b,l:y}=c.rgbToHsl(a/255,w/255,l/255);r.value=h,u.value=b,m.value=y}function o(s){const l=s.target,a=Number(l.value);if(Number.isNaN(a)||a<p||a>i){l.value=n.value;return}t(l,a)}function f(s,l){const a=s.target,w=Number(a.value);let h=s.shiftKey?10:1;h*=l==="down"?-1:1;const b=Number.isNaN(w)?Number(n.value):w,y=Math.min(i,Math.max(p,b+h));t(a,y)}return(s,l)=>(e.openBlock(),e.createBlock(K,{value:n.value,onKeydown:[e.withKeys(e.withModifiers(o,["prevent"]),["enter"]),l[0]||(l[0]=e.withKeys(e.withModifiers(a=>f(a,"up"),["prevent"]),["up"])),l[1]||(l[1]=e.withKeys(e.withModifiers(a=>f(a,"down"),["prevent"]),["down"]))],onBlur:o},null,8,["value","onKeydown"]))}}),X=["aria-label"],Y=e.defineComponent({__name:"color-dropper",emits:["error"],setup(g,{emit:p}){const i=g,r=p,{hue:u,saturation:m,lightness:v}=x(),d=e.ref();window.EyeDropper&&(d.value=new EyeDropper);function n(){d.value&&d.value.open().then(t=>{const o=c.hueyColor(t.sRGBHex),{h:f,s,l}=o.toHsl();u.value=c.clamp(f,0,360),m.value=c.clamp(s,0,100),v.value=c.clamp(l,0,100)}).catch(t=>{r("error",t)})}return(t,o)=>d.value?(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:0},{...i},{"aria-label":t.$props["aria-label"]??"Eye dropper button",onClick:n}),[e.renderSlot(t.$slots,"default")],16,X)):e.createCommentVNode("",!0)}}),q=["data-split-view","aria-label"],j=e.defineComponent({__name:"color-preview",props:{class:{},splitPreview:{type:Boolean,default:!0}},setup(g){e.useCssVars(d=>({v848a7ffe:m.value}));const{hue:p,saturation:i,lightness:r,alpha:u}=x(),m=e.computed(()=>`${Math.abs(u.value*100-100)/100}`),v=e.computed(()=>`hsl(${p.value}, ${i.value}%, ${r.value}%)`);return(d,n)=>(e.openBlock(),e.createElementBlock("div",{"data-split-view":g.splitPreview,"huey-preview":"",class:e.normalizeClass(d.$props.class),style:e.normalizeStyle({background:v.value}),"aria-label":`hsl(${e.unref(p)}, ${e.unref(i)}%, ${e.unref(r)}%, ${e.unref(u)})`,role:"img","aria-live":"polite"},null,14,q))}}),W=["aria-label"],G=["aria-label","aria-selected","onClick","onKeydown"],J=e.defineComponent({__name:"color-swatch",props:{swatch:{}},setup(g){const{setColor:p,colorValue:i}=x();function r(v,d){v.preventDefault(),p(d)}const u=e.computed(()=>i.value.toHexString());function m(v){const d=c.hueyColor(v).toHexString();return u.value===d}return(v,d)=>g.swatch?(e.openBlock(),e.createElementBlock("div",{key:0,role:"listbox","aria-label":v.$props["aria-label"]??"Color swatch","huey-swatch":""},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.swatch,n=>(e.openBlock(),e.createElementBlock("div",{key:n,tabindex:"0",role:"option","aria-label":n,"huey-swatch-color":"","aria-selected":m(n),style:e.normalizeStyle({"--swatch-color":n}),onClick:t=>r(t,n),onKeydown:e.withKeys(e.withModifiers(t=>r(t,n),["prevent"]),["enter","space"])},null,44,G))),128))],8,W)):e.createCommentVNode("",!0)}}),Q=e.defineComponent({__name:"green-input",setup(g){const{min:p,max:i}=c.getChannelBounds("g"),{hue:r,saturation:u,lightness:m,colorValue:v}=x(),{g:d}=v.value.toRgb(),n=e.ref(d.toFixed(0));e.watch([r,u,m],([s,l,a])=>{const{g:w}=c.hslToRgb(s,l,a),h=w.toFixed(0);n.value!==h&&(n.value=h)});function t(s,l){s.value=String(l),n.value=s.value;const{r:a,b:w}=v.value.toRgb(),{h,s:b,l:y}=c.rgbToHsl(a/255,l/255,w/255);r.value=h,u.value=b,m.value=y}function o(s){const l=s.target,a=Number(l.value);if(Number.isNaN(a)||a<p||a>i){l.value=n.value;return}t(l,a)}function f(s,l){const a=s.target,w=Number(a.value);let h=s.shiftKey?10:1;h*=l==="down"?-1:1;const b=Number.isNaN(w)?Number(n.value):w,y=Math.min(i,Math.max(p,b+h));t(a,y)}return(s,l)=>(e.openBlock(),e.createBlock(K,{value:n.value,onKeydown:[e.withKeys(e.withModifiers(o,["prevent"]),["enter"]),l[0]||(l[0]=e.withKeys(e.withModifiers(a=>f(a,"up"),["prevent"]),["up"])),l[1]||(l[1]=e.withKeys(e.withModifiers(a=>f(a,"down"),["prevent"]),["down"]))],onBlur:o},null,8,["value","onKeydown"]))}}),Z=["id","value","onKeydown"],ee=e.defineComponent({__name:"hex-input",setup(g){const{hue:p,saturation:i,lightness:r,colorValue:u,alpha:m}=x(),v=e.ref(u.value.toHex().toUpperCase());e.watch(u,s=>{v.value=s.toHex().toUpperCase()});function d(s){const l=s.target,a=l.value;if(!c.isHex(a)){l.value=v.value;return}o(l,a)}function n(s,l){const a=Number.parseInt(s,16);return a+l<0?"00":a+l>255?"FF":((a+l+256)%256).toString(16).toUpperCase().padStart(2,"0")}function t(s,l){const a=s.target,w=a.value,h=w.replace(/^#/,"").slice(0,6);if(!c.isHex(w)&&c.isHex(h)){a.value=h;return}if(!c.isHex(h)){a.value=v.value;return}const b=h.match(/.{2}/g);let y=s.shiftKey?10:1;y*=l==="down"?-1:1;const{selectionEnd:k,selectionStart:N}=a,$=N??0,_=k??0;if(_-$===a.value.length){let B="";b?.forEach(E=>{B=B.concat(n(E,y))}),o(a,B),a.setSelectionRange(0,a.value.length);return}let C,S;$===_?(C=Math.min(Math.floor($/2),2),S=C):(C=Math.floor($/2),S=Math.floor((_-1)/2));let M="";b?.forEach((B,E)=>{E>=C&&E<=S?M=M.concat(n(B,y)):M=M.concat(B)}),o(a,M);const H=C*2,R=(S+1)*2;a.setSelectionRange(H,R)}function o(s,l){s.value=String(l),v.value=s.value.toUpperCase();const a=c.hueyColor(v.value),{h:w,s:h,l:b}=a.toHsl();h>0&&(p.value=w),i.value=h,r.value=b,m.value=a.getAlpha()}function f(s){s.target.setSelectionRange(0,-1)}return(s,l)=>(e.openBlock(),e.createElementBlock("input",{id:s.$props.id,value:v.value,"huey-input":"",type:"text",autocomplete:"off",spellcheck:"false",onKeydown:[e.withKeys(e.withModifiers(d,["prevent"]),["enter"]),l[0]||(l[0]=e.withKeys(e.withModifiers(a=>t(a,"up"),["prevent"]),["up"])),l[1]||(l[1]=e.withKeys(e.withModifiers(a=>t(a,"down"),["prevent"]),["down"]))],onBlur:d,onFocus:f},null,40,Z))}}),te=e.defineComponent({__name:"hue-input",setup(g){const{min:p,max:i}=c.getChannelBounds("h"),{hue:r}=x(),u=e.ref(r.value.toFixed(0));e.watch(r,n=>{const t=n.toFixed(0);u.value!==t&&(u.value=t)});function m(n,t){n.value=String(t),u.value=n.value,r.value=t}function v(n){const t=n.target,o=Number(t.value);if(Number.isNaN(o)||o<p||o>i){t.value=u.value;return}m(t,o)}function d(n,t){const o=n.target,f=Number(o.value);let s=n.shiftKey?10:1;s*=t==="down"?-1:1;const l=Number.isNaN(f)?Number(u.value):f,a=Math.min(i,Math.max(p,l+s));m(o,a)}return(n,t)=>(e.openBlock(),e.createBlock(K,{value:u.value,onKeydown:[e.withKeys(e.withModifiers(v,["prevent"]),["enter"]),t[0]||(t[0]=e.withKeys(e.withModifiers(o=>d(o,"up"),["prevent"]),["up"])),t[1]||(t[1]=e.withKeys(e.withModifiers(o=>d(o,"down"),["prevent"]),["down"]))],onBlur:v},null,8,["value","onKeydown"]))}}),ne=e.defineComponent({__name:"hue-slider",setup(g){const{hue:p}=x(),i=e.computed(()=>`hsl(${p.value}, 100%, 50%)`);return(r,u)=>(e.openBlock(),e.createBlock(T,e.mergeProps({...r.$props},{modelValue:e.unref(p),"onUpdate:modelValue":u[0]||(u[0]=m=>e.isRef(p)?p.value=m:null),"aria-label":r.$props["aria-label"]??"Hue slider","huey-slider":"",max:360,min:0,step:1,style:{background:"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)","--huey-thumb-color":i.value}}),null,16,["modelValue","aria-label","style"]))}}),oe=e.defineComponent({__name:"huey-root",props:{modelValue:{required:!0},modelModifiers:{}},emits:["update:modelValue"],setup(g){const p=e.useModel(g,"modelValue");if(!p.value)throw new Error("<HueyRoot> is missing required v-model of type HueyColor");const i=e.ref(0),r=e.ref(0),u=e.ref(0),m=e.ref(1);let v=!1;e.watch(()=>p,n=>{if(v){v=!1;return}const o=c.hueyColor(n.value).toHsl();i.value=o.h,r.value=o.s,u.value=o.l,m.value=o.a},{immediate:!0}),e.watch([i,r,u,m],([n,t,o,f])=>{v=!0;const s=c.hueyColor(`hsla(${c.clamp(n,0,360)}, ${c.clamp(t,0,100)}%, ${c.clamp(o,0,100)}%, ${c.clamp(f,0,1)})`);p.value=s});function d(n){const o=c.hueyColor(n).toHsl();i.value=c.clamp(o.h,0,360),r.value=c.clamp(o.s,0,100),u.value=c.clamp(o.l,0,100),m.value=c.clamp(o.a,0,1)}return e.provide(F,{hue:i,saturation:r,lightness:u,alpha:m,colorValue:p,setColor:d}),(n,t)=>e.renderSlot(n.$slots,"default")}}),U=e.defineComponent({__name:"color-thumb",props:{class:{}},setup(g){const p=g;return(i,r)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({"huey-slider-thumb":""},{...p}),null,16))}}),ae=e.defineComponent({__name:"lightness-input",setup(g){const{min:p,max:i}=c.getChannelBounds("l"),{lightness:r}=x(),u=e.ref(r.value.toFixed(0));e.watch(r,n=>{const t=n.toFixed(0);u.value!==t&&(u.value=t)});function m(n,t){n.value=String(t),u.value=n.value,r.value=t}function v(n){const t=n.target,o=Number(t.value);if(Number.isNaN(o)||o<p||o>i){t.value=u.value;return}m(t,o)}function d(n,t){const o=n.target,f=Number(o.value);let s=n.shiftKey?10:1;s*=t==="down"?-1:1;const l=Number.isNaN(f)?Number(u.value):f,a=Math.min(i,Math.max(p,l+s));m(o,a)}return(n,t)=>(e.openBlock(),e.createBlock(K,{value:u.value,onKeydown:[e.withKeys(e.withModifiers(v,["prevent"]),["enter"]),t[0]||(t[0]=e.withKeys(e.withModifiers(o=>d(o,"up"),["prevent"]),["up"])),t[1]||(t[1]=e.withKeys(e.withModifiers(o=>d(o,"down"),["prevent"]),["down"]))],onBlur:v},null,8,["value","onKeydown"]))}}),le=e.defineComponent({__name:"lightness-slider",setup(g){const{hue:p,saturation:i,lightness:r}=x(),u=e.computed(()=>`hsl(${p.value}, ${i.value}%, ${r.value}%)`),m=e.computed(()=>`linear-gradient(to right, #000, hsl(${p.value}, ${i.value}%, 50%), #fff)`);return(v,d)=>(e.openBlock(),e.createBlock(T,e.mergeProps({...v.$props},{modelValue:e.unref(r),"onUpdate:modelValue":d[0]||(d[0]=n=>e.isRef(r)?r.value=n:null),"aria-label":v.$props["aria-label"]??"Lightness slider","huey-slider":"",max:100,min:0,step:1,style:{background:m.value,"--huey-thumb-color":u.value}}),null,16,["modelValue","aria-label","style"]))}}),ue=e.defineComponent({__name:"red-input",setup(g){const{min:p,max:i}=c.getChannelBounds("r"),{hue:r,saturation:u,lightness:m,colorValue:v}=x(),{r:d}=v.value.toRgb(),n=e.ref(d.toFixed(0));e.watch([r,u,m],([s,l,a])=>{const{r:w}=c.hslToRgb(s,l,a),h=w.toFixed(0);n.value!==h&&(n.value=h)});function t(s,l){s.value=String(l),n.value=s.value;const{g:a,b:w}=v.value.toRgb(),{h,s:b,l:y}=c.rgbToHsl(l/255,a/255,w/255);r.value=h,u.value=b,m.value=y}function o(s){const l=s.target,a=Number(l.value);if(Number.isNaN(a)||a<p||a>i){l.value=n.value;return}t(l,a)}function f(s,l){const a=s.target,w=Number(a.value);let h=s.shiftKey?10:1;h*=l==="down"?-1:1;const b=Number.isNaN(w)?Number(n.value):w,y=Math.min(i,Math.max(p,b+h));t(a,y)}return(s,l)=>(e.openBlock(),e.createBlock(K,{value:n.value,onKeydown:[e.withKeys(e.withModifiers(o,["prevent"]),["enter"]),l[0]||(l[0]=e.withKeys(e.withModifiers(a=>f(a,"up"),["prevent"]),["up"])),l[1]||(l[1]=e.withKeys(e.withModifiers(a=>f(a,"down"),["prevent"]),["down"]))],onBlur:o},null,8,["value","onKeydown"]))}}),re=e.defineComponent({__name:"saturation-area",props:{colorFormat:{default:"hsl"}},setup(g){const p=g,{hue:i,saturation:r,lightness:u}=x(),m=e.useTemplateRef("area"),v=e.ref(c.hslToHsv(i.value,r.value,u.value).s),d=e.ref(!1);e.watch([i,r,u],()=>{d.value||(v.value=c.hslToHsv(i.value,r.value,u.value).s)});const n=e.computed(()=>{const k=`hsl(${i.value}, 100%, 50%)`;return p.colorFormat==="hsl"?`linear-gradient(to top, black, transparent, white), linear-gradient(to right, hsl(0, 0%, 50%), transparent), ${k}`:`linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent),
+    ${k}`}),t=e.computed(()=>`hsl(${i.value}, ${r.value}%, ${u.value}%)`);function o(k){k.preventDefault();const N=m.value;if(!N)return;const $=N.clientWidth,_=N.clientHeight,{x:V,y:C}=c.getAbsolutePosition(N),{x:S,y:M}=c.getPageXYFromEvent(k),H=c.clamp(S-V,0,$),R=c.clamp(M-C,0,_);if(p.colorFormat==="hsl"){r.value=H/$*100,u.value=c.clamp(1-R/_,0,1)*100;return}const B=H/$*100,E=c.clamp(1-R/_,0,1)*100;v.value=B;const P=c.hsvToHsl(i.value,B,E);r.value=P.s,u.value=P.l}const f=e.computed(()=>p.colorFormat==="hsl"?`${r.value}%`:`${v.value}%`),s=e.computed(()=>p.colorFormat==="hsl"?`${100-u.value}%`:`${100-c.hslToHsv(i.value,r.value,u.value).v}%`);function l(){d.value=!0,L(),window.addEventListener("mousemove",o),window.addEventListener("mouseup",o),window.addEventListener("mouseup",y)}function a(k){d.value=!0,o(k),window.addEventListener("touchend",w)}function w(){d.value=!1,window.removeEventListener("touchend",w)}function h(k){const N=c.resolveArrowDirection(k),$=k.shiftKey?10:1;if(!N)return;if(d.value=!0,p.colorFormat==="hsl"){switch(N){case"left":r.value=c.clamp(r.value-$,0,100);break;case"down":u.value=c.clamp(u.value-$,0,100);break;case"right":r.value=c.clamp(r.value+$,0,100);break;case"up":u.value=c.clamp(u.value+$,0,100);break}d.value=!1;return}const _=c.hslToHsv(i.value,r.value,u.value);switch(_.s=v.value,N){case"left":_.s=c.clamp(_.s-$,0,100);break;case"down":_.v=c.clamp(_.v-$,0,100);break;case"right":_.s=c.clamp(_.s+$,0,100);break;case"up":_.v=c.clamp(_.v+$,0,100);break}v.value=_.s;const V=c.hsvToHsl(i.value,_.s,_.v);r.value=V.s,u.value=V.l,d.value=!1}function b(){window.removeEventListener("mousemove",o),window.removeEventListener("mouseup",o),window.removeEventListener("mouseup",y),window.removeEventListener("touchend",w)}function y(){d.value=!1,D(),b()}return e.onUnmounted(()=>{b()}),(k,N)=>(e.openBlock(),e.createElementBlock("div",{ref:"area",role:"group","huey-area":"",style:e.normalizeStyle({background:n.value,"--huey-thumb-color":t.value}),onMousedown:l,onTouchmovePassive:o,onTouchstartPassive:a},[e.createVNode(e.unref(U),{style:e.normalizeStyle({top:s.value,left:f.value}),tabindex:"0",role:"slider","aria-label":"Color thumb","aria-valuenow":Math.round(e.unref(r)),"aria-valuemin":0,"aria-valuemax":100,"aria-valuetext":`Saturation ${Math.round(e.unref(r))}%, Lightness ${Math.round(e.unref(u))}%`,onKeydown:h},null,8,["style","aria-valuenow","aria-valuetext"])],36))}}),se=e.defineComponent({__name:"saturation-input",setup(g){const{min:p,max:i}=c.getChannelBounds("s"),{saturation:r}=x(),u=e.ref(r.value.toFixed(0));e.watch(r,n=>{const t=n.toFixed(0);u.value!==t&&(u.value=t)});function m(n,t){n.value=String(t),u.value=n.value,r.value=t}function v(n){const t=n.target,o=Number(t.value);if(Number.isNaN(o)||o<p||o>i){t.value=u.value;return}m(t,o)}function d(n,t){const o=n.target,f=Number(o.value);let s=n.shiftKey?10:1;s*=t==="down"?-1:1;const l=Number.isNaN(f)?Number(u.value):f,a=Math.min(i,Math.max(p,l+s));m(o,a)}return(n,t)=>(e.openBlock(),e.createBlock(K,{value:u.value,onKeydown:[e.withKeys(e.withModifiers(v,["prevent"]),["enter"]),t[0]||(t[0]=e.withKeys(e.withModifiers(o=>d(o,"up"),["prevent"]),["up"])),t[1]||(t[1]=e.withKeys(e.withModifiers(o=>d(o,"down"),["prevent"]),["down"]))],onBlur:v},null,8,["value","onKeydown"]))}}),ie=e.defineComponent({__name:"saturation-slider",setup(g){const{hue:p,saturation:i}=x(),r=e.computed(()=>`hsl(${p.value}, ${i.value}%, 50%)`),u=e.computed(()=>`linear-gradient(to right, hsl(${p.value}, 0%, 50%), hsl(${p.value}, 100%, 50%))`);return(m,v)=>(e.openBlock(),e.createBlock(T,e.mergeProps({...m.$props},{modelValue:e.unref(i),"onUpdate:modelValue":v[0]||(v[0]=d=>e.isRef(i)?i.value=d:null),"aria-label":m.$props["aria-label"]??"Saturation slider","huey-slider":"",max:100,min:0,step:1,style:{background:u.value,"--huey-thumb-color":r.value}}),null,16,["modelValue","aria-label","style"]))}});exports.AlphaInput=I;exports.AlphaSlider=z;exports.BlueInput=O;exports.ColorDropper=Y;exports.ColorPreview=j;exports.ColorSwatch=J;exports.GreenInput=Q;exports.HUEY_CONTEXT=F;exports.HexInput=ee;exports.HueInput=te;exports.HueSlider=ne;exports.HueyRoot=oe;exports.LightnessInput=ae;exports.LightnessSlider=le;exports.RedInput=ue;exports.SaturationArea=re;exports.SaturationInput=se;exports.SaturationSlider=ie;exports.useHueyContext=x;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { AlphaInput, AlphaSlider, BlueInput, ColorDropper, ColorPreview, ColorSwatch, GreenInput, HexInput, HueInput, HueSlider, HueyRoot, LightnessInput, LightnessSlider, RedInput, SaturationArea, SaturationInput, SaturationSlider, } from './components';
+export { useHueyContext, HUEY_CONTEXT } from './composables/use-huey-context';
+export type { HueyContext } from './composables/use-huey-context';

package/dist/index.js

@@ -0,0 +1,755 @@
+import { defineComponent as N, createElementBlock as R, openBlock as $, mergeProps as L, inject as be, ref as k, watch as H, createBlock as F, withKeys as g, withModifiers as w, mergeModels as ge, useModel as ue, useTemplateRef as le, computed as M, onUnmounted as oe, createVNode as re, unref as K, normalizeStyle as X, isRef as G, createCommentVNode as se, renderSlot as ie, useCssVars as we, normalizeClass as _e, Fragment as ye, renderList as $e, provide as xe } from "vue";
+import { getChannelBounds as P, normalize as ne, getAbsolutePosition as ce, getPageXYFromEvent as ve, clamp as b, roundToStep as Q, resolveArrowDirection as pe, hslToRgb as Z, rgbToHsl as ee, hueyColor as O, isHex as j, hslToHsv as q, hsvToHsl as ae } from "@hueycolor/core";
+const U = /* @__PURE__ */ N({
+  __name: "channel-input",
+  setup(f) {
+    return (i, s) => ($(), R("input", L({ "huey-input": "" }, i.$props, {
+      autocomplete: "off",
+      spellcheck: "false"
+    }), null, 16));
+  }
+}), de = Symbol("huey");
+function E() {
+  const f = be(de);
+  if (!f)
+    throw new Error("Huey components must be used within <HueyRoot>");
+  return f;
+}
+const He = /* @__PURE__ */ N({
+  __name: "alpha-input",
+  setup(f) {
+    const { min: i, max: s } = P("a"), { alpha: o } = E(), l = k((o.value * 100).toFixed(0));
+    H(o, (t) => {
+      const e = (t * 100).toFixed(0);
+      l.value !== e && (l.value = e);
+    });
+    function p(t, e) {
+      t.value = String(e), l.value = t.value, o.value = e / 100;
+    }
+    function c(t) {
+      const e = t.target, n = Number(e.value);
+      if (Number.isNaN(n) || n < i || n > s) {
+        e.value = l.value;
+        return;
+      }
+      p(e, n);
+    }
+    function v(t, e) {
+      const n = t.target, m = Number(n.value);
+      let r = t.shiftKey ? 10 : 1;
+      r *= e === "down" ? -1 : 1;
+      const u = Number.isNaN(m) ? Number(l.value) : m, a = Math.min(s, Math.max(i, u + r));
+      p(n, a);
+    }
+    return (t, e) => ($(), F(U, {
+      value: l.value,
+      onKeydown: [
+        g(w(c, ["prevent"]), ["enter"]),
+        e[0] || (e[0] = g(w((n) => v(n, "up"), ["prevent"]), ["up"])),
+        e[1] || (e[1] = g(w((n) => v(n, "down"), ["prevent"]), ["down"]))
+      ]
+    }, null, 8, ["value", "onKeydown"]));
+  }
+});
+function me() {
+  document.body.style.userSelect = "none";
+}
+function he() {
+  document.body.style.userSelect = "unset";
+}
+const Ne = ["aria-valuemin", "aria-valuemax", "aria-valuenow"], J = /* @__PURE__ */ N({
+  __name: "channel-slider",
+  props: /* @__PURE__ */ ge({
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 }
+  }, {
+    modelValue: { default: 0 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(f) {
+    const i = f, s = ue(f, "modelValue"), o = le("slider-track"), l = M(() => {
+      const { min: n, max: m } = i;
+      return `${ne(s.value, n, m, 0, 100)}%`;
+    });
+    oe(() => {
+      t();
+    });
+    function p(n) {
+      const m = o.value;
+      if (!m)
+        return;
+      const { x: r } = ce(m), { x: u } = ve(n), a = u - r, h = m.clientWidth, { max: d, min: _, step: y } = i, S = ne(a / h, 0, 1, _, d), C = Math.round(S / y) * y;
+      s.value = b(Q(C, y), _, d);
+    }
+    function c(n) {
+      p(n), me(), window.addEventListener("mousemove", p), window.addEventListener("mouseup", e);
+    }
+    function v(n) {
+      const m = pe(n);
+      if (!m)
+        return;
+      const r = s.value, { min: u, max: a, step: h } = i, d = n.shiftKey ? h * 10 : h;
+      switch (m) {
+        case "left":
+        case "down":
+          s.value = b(Q(r - d, d), u, a);
+          break;
+        case "right":
+        case "up":
+          s.value = b(Q(r + d, d), u, a);
+          break;
+      }
+    }
+    function t() {
+      window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", e);
+    }
+    function e() {
+      he(), t();
+    }
+    return (n, m) => ($(), R("div", L({ ref: "slider-track" }, { ...i }, {
+      "huey-slider-track": "",
+      role: "slider",
+      "aria-valuemin": n.$props.min,
+      "aria-valuemax": n.$props.max,
+      "aria-valuenow": f.modelValue,
+      onMousedown: c,
+      onTouchmovePassive: p,
+      onTouchstartPassive: p
+    }), [
+      re(K(fe), {
+        tabindex: "0",
+        style: X({ left: l.value }),
+        onKeydown: v
+      }, null, 8, ["style"])
+    ], 16, Ne));
+  }
+}), Fe = /* @__PURE__ */ N({
+  __name: "alpha-slider",
+  setup(f) {
+    const { hue: i, saturation: s, lightness: o, alpha: l } = E(), p = M(() => `
+  linear-gradient(90deg, hsla(${i.value}, ${s.value}%, ${o.value}%, 0) 0 calc(var(--huey-slider-track-height) / 2), hsla(${i.value}, ${s.value}%, ${o.value}%, 1) calc(100% - calc(var(--huey-slider-track-height) / 2)) 100%), url('data:image/svg+xml;utf8,%3Csvg%20width%3D%222%22%20height%3D%222%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200h1v2h1V1H0%22%20fill-rule%3D%22nonzero%22%20fill%3D%22%23e1e1e1%22/%3E%3C/svg%3E') 0 0 / auto 66.67%, #fff
+  `), c = M(() => `color-mix(in srgb, white, hsl(${i.value}, ${s.value}%, ${o.value}%) ${l.value * 100}%)`);
+    return (v, t) => ($(), F(J, L({ ...v.$props }, {
+      modelValue: K(l),
+      "onUpdate:modelValue": t[0] || (t[0] = (e) => G(l) ? l.value = e : null),
+      "aria-label": v.$props["aria-label"] ?? "Alpha slider",
+      "huey-slider": "",
+      max: 1,
+      min: 0,
+      step: 0.01,
+      style: {
+        "--huey-slider-bg": p.value,
+        "--huey-thumb-color": c.value
+      }
+    }), null, 16, ["modelValue", "aria-label", "style"]));
+  }
+}), Re = /* @__PURE__ */ N({
+  __name: "blue-input",
+  setup(f) {
+    const { min: i, max: s } = P("g"), { hue: o, saturation: l, lightness: p, colorValue: c } = E(), { b: v } = c.value.toRgb(), t = k(v.toFixed(0));
+    H([o, l, p], ([r, u, a]) => {
+      const { b: h } = Z(r, u, a), d = h.toFixed(0);
+      t.value !== d && (t.value = d);
+    });
+    function e(r, u) {
+      r.value = String(u), t.value = r.value;
+      const { r: a, g: h } = c.value.toRgb(), { h: d, s: _, l: y } = ee(a / 255, h / 255, u / 255);
+      o.value = d, l.value = _, p.value = y;
+    }
+    function n(r) {
+      const u = r.target, a = Number(u.value);
+      if (Number.isNaN(a) || a < i || a > s) {
+        u.value = t.value;
+        return;
+      }
+      e(u, a);
+    }
+    function m(r, u) {
+      const a = r.target, h = Number(a.value);
+      let d = r.shiftKey ? 10 : 1;
+      d *= u === "down" ? -1 : 1;
+      const _ = Number.isNaN(h) ? Number(t.value) : h, y = Math.min(s, Math.max(i, _ + d));
+      e(a, y);
+    }
+    return (r, u) => ($(), F(U, {
+      value: t.value,
+      onKeydown: [
+        g(w(n, ["prevent"]), ["enter"]),
+        u[0] || (u[0] = g(w((a) => m(a, "up"), ["prevent"]), ["up"])),
+        u[1] || (u[1] = g(w((a) => m(a, "down"), ["prevent"]), ["down"]))
+      ],
+      onBlur: n
+    }, null, 8, ["value", "onKeydown"]));
+  }
+}), Ve = ["aria-label"], Be = /* @__PURE__ */ N({
+  __name: "color-dropper",
+  emits: ["error"],
+  setup(f, { emit: i }) {
+    const s = f, o = i, { hue: l, saturation: p, lightness: c } = E(), v = k();
+    window.EyeDropper && (v.value = new EyeDropper());
+    function t() {
+      v.value && v.value.open().then((e) => {
+        const n = O(e.sRGBHex), { h: m, s: r, l: u } = n.toHsl();
+        l.value = b(m, 0, 360), p.value = b(r, 0, 100), c.value = b(u, 0, 100);
+      }).catch((e) => {
+        o("error", e);
+      });
+    }
+    return (e, n) => v.value ? ($(), R("button", L({ key: 0 }, { ...s }, {
+      "aria-label": e.$props["aria-label"] ?? "Eye dropper button",
+      onClick: t
+    }), [
+      ie(e.$slots, "default")
+    ], 16, Ve)) : se("", !0);
+  }
+}), Se = ["data-split-view", "aria-label"], Le = /* @__PURE__ */ N({
+  __name: "color-preview",
+  props: {
+    class: {},
+    splitPreview: { type: Boolean, default: !0 }
+  },
+  setup(f) {
+    we((v) => ({
+      v848a7ffe: p.value
+    }));
+    const { hue: i, saturation: s, lightness: o, alpha: l } = E(), p = M(() => `${Math.abs(l.value * 100 - 100) / 100}`), c = M(() => `hsl(${i.value}, ${s.value}%, ${o.value}%)`);
+    return (v, t) => ($(), R("div", {
+      "data-split-view": f.splitPreview,
+      "huey-preview": "",
+      class: _e(v.$props.class),
+      style: X({ background: c.value }),
+      "aria-label": `hsl(${K(i)}, ${K(s)}%, ${K(o)}%, ${K(l)})`,
+      role: "img",
+      "aria-live": "polite"
+    }, null, 14, Se));
+  }
+}), Ee = ["aria-label"], ke = ["aria-label", "aria-selected", "onClick", "onKeydown"], Te = /* @__PURE__ */ N({
+  __name: "color-swatch",
+  props: {
+    swatch: {}
+  },
+  setup(f) {
+    const { setColor: i, colorValue: s } = E();
+    function o(c, v) {
+      c.preventDefault(), i(v);
+    }
+    const l = M(() => s.value.toHexString());
+    function p(c) {
+      const v = O(c).toHexString();
+      return l.value === v;
+    }
+    return (c, v) => f.swatch ? ($(), R("div", {
+      key: 0,
+      role: "listbox",
+      "aria-label": c.$props["aria-label"] ?? "Color swatch",
+      "huey-swatch": ""
+    }, [
+      ($(!0), R(ye, null, $e(f.swatch, (t) => ($(), R("div", {
+        key: t,
+        tabindex: "0",
+        role: "option",
+        "aria-label": t,
+        "huey-swatch-color": "",
+        "aria-selected": p(t),
+        style: X({ "--swatch-color": t }),
+        onClick: (e) => o(e, t),
+        onKeydown: g(w((e) => o(e, t), ["prevent"]), ["enter", "space"])
+      }, null, 44, ke))), 128))
+    ], 8, Ee)) : se("", !0);
+  }
+}), De = /* @__PURE__ */ N({
+  __name: "green-input",
+  setup(f) {
+    const { min: i, max: s } = P("g"), { hue: o, saturation: l, lightness: p, colorValue: c } = E(), { g: v } = c.value.toRgb(), t = k(v.toFixed(0));
+    H([o, l, p], ([r, u, a]) => {
+      const { g: h } = Z(r, u, a), d = h.toFixed(0);
+      t.value !== d && (t.value = d);
+    });
+    function e(r, u) {
+      r.value = String(u), t.value = r.value;
+      const { r: a, b: h } = c.value.toRgb(), { h: d, s: _, l: y } = ee(a / 255, u / 255, h / 255);
+      o.value = d, l.value = _, p.value = y;
+    }
+    function n(r) {
+      const u = r.target, a = Number(u.value);
+      if (Number.isNaN(a) || a < i || a > s) {
+        u.value = t.value;
+        return;
+      }
+      e(u, a);
+    }
+    function m(r, u) {
+      const a = r.target, h = Number(a.value);
+      let d = r.shiftKey ? 10 : 1;
+      d *= u === "down" ? -1 : 1;
+      const _ = Number.isNaN(h) ? Number(t.value) : h, y = Math.min(s, Math.max(i, _ + d));
+      e(a, y);
+    }
+    return (r, u) => ($(), F(U, {
+      value: t.value,
+      onKeydown: [
+        g(w(n, ["prevent"]), ["enter"]),
+        u[0] || (u[0] = g(w((a) => m(a, "up"), ["prevent"]), ["up"])),
+        u[1] || (u[1] = g(w((a) => m(a, "down"), ["prevent"]), ["down"]))
+      ],
+      onBlur: n
+    }, null, 8, ["value", "onKeydown"]));
+  }
+}), Me = ["id", "value", "onKeydown"], Pe = /* @__PURE__ */ N({
+  __name: "hex-input",
+  setup(f) {
+    const { hue: i, saturation: s, lightness: o, colorValue: l, alpha: p } = E(), c = k(l.value.toHex().toUpperCase());
+    H(l, (r) => {
+      c.value = r.toHex().toUpperCase();
+    });
+    function v(r) {
+      const u = r.target, a = u.value;
+      if (!j(a)) {
+        u.value = c.value;
+        return;
+      }
+      n(u, a);
+    }
+    function t(r, u) {
+      const a = Number.parseInt(r, 16);
+      return a + u < 0 ? "00" : a + u > 255 ? "FF" : ((a + u + 256) % 256).toString(16).toUpperCase().padStart(2, "0");
+    }
+    function e(r, u) {
+      const a = r.target, h = a.value, d = h.replace(/^#/, "").slice(0, 6);
+      if (!j(h) && j(d)) {
+        a.value = d;
+        return;
+      }
+      if (!j(d)) {
+        a.value = c.value;
+        return;
+      }
+      const _ = d.match(/.{2}/g);
+      let y = r.shiftKey ? 10 : 1;
+      y *= u === "down" ? -1 : 1;
+      const { selectionEnd: S, selectionStart: C } = a, V = C ?? 0, x = S ?? 0;
+      if (x - V === a.value.length) {
+        let B = "";
+        _?.forEach((A) => {
+          B = B.concat(t(A, y));
+        }), n(a, B), a.setSelectionRange(0, a.value.length);
+        return;
+      }
+      let T, I;
+      V === x ? (T = Math.min(Math.floor(V / 2), 2), I = T) : (T = Math.floor(V / 2), I = Math.floor((x - 1) / 2));
+      let D = "";
+      _?.forEach((B, A) => {
+        A >= T && A <= I ? D = D.concat(t(B, y)) : D = D.concat(B);
+      }), n(a, D);
+      const W = T * 2, Y = (I + 1) * 2;
+      a.setSelectionRange(W, Y);
+    }
+    function n(r, u) {
+      r.value = String(u), c.value = r.value.toUpperCase();
+      const a = O(c.value), { h, s: d, l: _ } = a.toHsl();
+      d > 0 && (i.value = h), s.value = d, o.value = _, p.value = a.getAlpha();
+    }
+    function m(r) {
+      r.target.setSelectionRange(0, -1);
+    }
+    return (r, u) => ($(), R("input", {
+      id: r.$props.id,
+      value: c.value,
+      "huey-input": "",
+      type: "text",
+      autocomplete: "off",
+      spellcheck: "false",
+      onKeydown: [
+        g(w(v, ["prevent"]), ["enter"]),
+        u[0] || (u[0] = g(w((a) => e(a, "up"), ["prevent"]), ["up"])),
+        u[1] || (u[1] = g(w((a) => e(a, "down"), ["prevent"]), ["down"]))
+      ],
+      onBlur: v,
+      onFocus: m
+    }, null, 40, Me));
+  }
+}), Ue = /* @__PURE__ */ N({
+  __name: "hue-input",
+  setup(f) {
+    const { min: i, max: s } = P("h"), { hue: o } = E(), l = k(o.value.toFixed(0));
+    H(o, (t) => {
+      const e = t.toFixed(0);
+      l.value !== e && (l.value = e);
+    });
+    function p(t, e) {
+      t.value = String(e), l.value = t.value, o.value = e;
+    }
+    function c(t) {
+      const e = t.target, n = Number(e.value);
+      if (Number.isNaN(n) || n < i || n > s) {
+        e.value = l.value;
+        return;
+      }
+      p(e, n);
+    }
+    function v(t, e) {
+      const n = t.target, m = Number(n.value);
+      let r = t.shiftKey ? 10 : 1;
+      r *= e === "down" ? -1 : 1;
+      const u = Number.isNaN(m) ? Number(l.value) : m, a = Math.min(s, Math.max(i, u + r));
+      p(n, a);
+    }
+    return (t, e) => ($(), F(U, {
+      value: l.value,
+      onKeydown: [
+        g(w(c, ["prevent"]), ["enter"]),
+        e[0] || (e[0] = g(w((n) => v(n, "up"), ["prevent"]), ["up"])),
+        e[1] || (e[1] = g(w((n) => v(n, "down"), ["prevent"]), ["down"]))
+      ],
+      onBlur: c
+    }, null, 8, ["value", "onKeydown"]));
+  }
+}), Ie = /* @__PURE__ */ N({
+  __name: "hue-slider",
+  setup(f) {
+    const { hue: i } = E(), s = M(() => `hsl(${i.value}, 100%, 50%)`);
+    return (o, l) => ($(), F(J, L({ ...o.$props }, {
+      modelValue: K(i),
+      "onUpdate:modelValue": l[0] || (l[0] = (p) => G(i) ? i.value = p : null),
+      "aria-label": o.$props["aria-label"] ?? "Hue slider",
+      "huey-slider": "",
+      max: 360,
+      min: 0,
+      step: 1,
+      style: {
+        background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+        "--huey-thumb-color": s.value
+      }
+    }), null, 16, ["modelValue", "aria-label", "style"]));
+  }
+}), Ae = /* @__PURE__ */ N({
+  __name: "huey-root",
+  props: {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(f) {
+    const i = ue(f, "modelValue");
+    if (!i.value)
+      throw new Error("<HueyRoot> is missing required v-model of type HueyColor");
+    const s = k(0), o = k(0), l = k(0), p = k(1);
+    let c = !1;
+    H(
+      () => i,
+      (t) => {
+        if (c) {
+          c = !1;
+          return;
+        }
+        const n = O(t.value).toHsl();
+        s.value = n.h, o.value = n.s, l.value = n.l, p.value = n.a;
+      },
+      { immediate: !0 }
+    ), H([s, o, l, p], ([t, e, n, m]) => {
+      c = !0;
+      const r = O(`hsla(${b(t, 0, 360)}, ${b(e, 0, 100)}%, ${b(n, 0, 100)}%, ${b(m, 0, 1)})`);
+      i.value = r;
+    });
+    function v(t) {
+      const n = O(t).toHsl();
+      s.value = b(n.h, 0, 360), o.value = b(n.s, 0, 100), l.value = b(n.l, 0, 100), p.value = b(n.a, 0, 1);
+    }
+    return xe(de, { hue: s, saturation: o, lightness: l, alpha: p, colorValue: i, setColor: v }), (t, e) => ie(t.$slots, "default");
+  }
+}), fe = /* @__PURE__ */ N({
+  __name: "color-thumb",
+  props: {
+    class: {}
+  },
+  setup(f) {
+    const i = f;
+    return (s, o) => ($(), R("div", L({ "huey-slider-thumb": "" }, { ...i }), null, 16));
+  }
+}), Oe = /* @__PURE__ */ N({
+  __name: "lightness-input",
+  setup(f) {
+    const { min: i, max: s } = P("l"), { lightness: o } = E(), l = k(o.value.toFixed(0));
+    H(o, (t) => {
+      const e = t.toFixed(0);
+      l.value !== e && (l.value = e);
+    });
+    function p(t, e) {
+      t.value = String(e), l.value = t.value, o.value = e;
+    }
+    function c(t) {
+      const e = t.target, n = Number(e.value);
+      if (Number.isNaN(n) || n < i || n > s) {
+        e.value = l.value;
+        return;
+      }
+      p(e, n);
+    }
+    function v(t, e) {
+      const n = t.target, m = Number(n.value);
+      let r = t.shiftKey ? 10 : 1;
+      r *= e === "down" ? -1 : 1;
+      const u = Number.isNaN(m) ? Number(l.value) : m, a = Math.min(s, Math.max(i, u + r));
+      p(n, a);
+    }
+    return (t, e) => ($(), F(U, {
+      value: l.value,
+      onKeydown: [
+        g(w(c, ["prevent"]), ["enter"]),
+        e[0] || (e[0] = g(w((n) => v(n, "up"), ["prevent"]), ["up"])),
+        e[1] || (e[1] = g(w((n) => v(n, "down"), ["prevent"]), ["down"]))
+      ],
+      onBlur: c
+    }, null, 8, ["value", "onKeydown"]));
+  }
+}), ze = /* @__PURE__ */ N({
+  __name: "lightness-slider",
+  setup(f) {
+    const { hue: i, saturation: s, lightness: o } = E(), l = M(() => `hsl(${i.value}, ${s.value}%, ${o.value}%)`), p = M(() => `linear-gradient(to right, #000, hsl(${i.value}, ${s.value}%, 50%), #fff)`);
+    return (c, v) => ($(), F(J, L({ ...c.$props }, {
+      modelValue: K(o),
+      "onUpdate:modelValue": v[0] || (v[0] = (t) => G(o) ? o.value = t : null),
+      "aria-label": c.$props["aria-label"] ?? "Lightness slider",
+      "huey-slider": "",
+      max: 100,
+      min: 0,
+      step: 1,
+      style: {
+        background: p.value,
+        "--huey-thumb-color": l.value
+      }
+    }), null, 16, ["modelValue", "aria-label", "style"]));
+  }
+}), Xe = /* @__PURE__ */ N({
+  __name: "red-input",
+  setup(f) {
+    const { min: i, max: s } = P("r"), { hue: o, saturation: l, lightness: p, colorValue: c } = E(), { r: v } = c.value.toRgb(), t = k(v.toFixed(0));
+    H([o, l, p], ([r, u, a]) => {
+      const { r: h } = Z(r, u, a), d = h.toFixed(0);
+      t.value !== d && (t.value = d);
+    });
+    function e(r, u) {
+      r.value = String(u), t.value = r.value;
+      const { g: a, b: h } = c.value.toRgb(), { h: d, s: _, l: y } = ee(u / 255, a / 255, h / 255);
+      o.value = d, l.value = _, p.value = y;
+    }
+    function n(r) {
+      const u = r.target, a = Number(u.value);
+      if (Number.isNaN(a) || a < i || a > s) {
+        u.value = t.value;
+        return;
+      }
+      e(u, a);
+    }
+    function m(r, u) {
+      const a = r.target, h = Number(a.value);
+      let d = r.shiftKey ? 10 : 1;
+      d *= u === "down" ? -1 : 1;
+      const _ = Number.isNaN(h) ? Number(t.value) : h, y = Math.min(s, Math.max(i, _ + d));
+      e(a, y);
+    }
+    return (r, u) => ($(), F(U, {
+      value: t.value,
+      onKeydown: [
+        g(w(n, ["prevent"]), ["enter"]),
+        u[0] || (u[0] = g(w((a) => m(a, "up"), ["prevent"]), ["up"])),
+        u[1] || (u[1] = g(w((a) => m(a, "down"), ["prevent"]), ["down"]))
+      ],
+      onBlur: n
+    }, null, 8, ["value", "onKeydown"]));
+  }
+}), We = /* @__PURE__ */ N({
+  __name: "saturation-area",
+  props: {
+    colorFormat: { default: "hsl" }
+  },
+  setup(f) {
+    const i = f, { hue: s, saturation: o, lightness: l } = E(), p = le("area"), c = k(q(s.value, o.value, l.value).s), v = k(!1);
+    H([s, o, l], () => {
+      v.value || (c.value = q(s.value, o.value, l.value).s);
+    });
+    const t = M(() => {
+      const S = `hsl(${s.value}, 100%, 50%)`;
+      return i.colorFormat === "hsl" ? `linear-gradient(to top, black, transparent, white), linear-gradient(to right, hsl(0, 0%, 50%), transparent), ${S}` : `linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent),
+    ${S}`;
+    }), e = M(() => `hsl(${s.value}, ${o.value}%, ${l.value}%)`);
+    function n(S) {
+      S.preventDefault();
+      const C = p.value;
+      if (!C)
+        return;
+      const V = C.clientWidth, x = C.clientHeight, { x: z, y: T } = ce(C), { x: I, y: D } = ve(S), W = b(I - z, 0, V), Y = b(D - T, 0, x);
+      if (i.colorFormat === "hsl") {
+        o.value = W / V * 100, l.value = b(1 - Y / x, 0, 1) * 100;
+        return;
+      }
+      const B = W / V * 100, A = b(1 - Y / x, 0, 1) * 100;
+      c.value = B;
+      const te = ae(s.value, B, A);
+      o.value = te.s, l.value = te.l;
+    }
+    const m = M(() => i.colorFormat === "hsl" ? `${o.value}%` : `${c.value}%`), r = M(() => i.colorFormat === "hsl" ? `${100 - l.value}%` : `${100 - q(s.value, o.value, l.value).v}%`);
+    function u() {
+      v.value = !0, me(), window.addEventListener("mousemove", n), window.addEventListener("mouseup", n), window.addEventListener("mouseup", y);
+    }
+    function a(S) {
+      v.value = !0, n(S), window.addEventListener("touchend", h);
+    }
+    function h() {
+      v.value = !1, window.removeEventListener("touchend", h);
+    }
+    function d(S) {
+      const C = pe(S), V = S.shiftKey ? 10 : 1;
+      if (!C)
+        return;
+      if (v.value = !0, i.colorFormat === "hsl") {
+        switch (C) {
+          case "left":
+            o.value = b(o.value - V, 0, 100);
+            break;
+          case "down":
+            l.value = b(l.value - V, 0, 100);
+            break;
+          case "right":
+            o.value = b(o.value + V, 0, 100);
+            break;
+          case "up":
+            l.value = b(l.value + V, 0, 100);
+            break;
+        }
+        v.value = !1;
+        return;
+      }
+      const x = q(s.value, o.value, l.value);
+      switch (x.s = c.value, C) {
+        case "left":
+          x.s = b(x.s - V, 0, 100);
+          break;
+        case "down":
+          x.v = b(x.v - V, 0, 100);
+          break;
+        case "right":
+          x.s = b(x.s + V, 0, 100);
+          break;
+        case "up":
+          x.v = b(x.v + V, 0, 100);
+          break;
+      }
+      c.value = x.s;
+      const z = ae(s.value, x.s, x.v);
+      o.value = z.s, l.value = z.l, v.value = !1;
+    }
+    function _() {
+      window.removeEventListener("mousemove", n), window.removeEventListener("mouseup", n), window.removeEventListener("mouseup", y), window.removeEventListener("touchend", h);
+    }
+    function y() {
+      v.value = !1, he(), _();
+    }
+    return oe(() => {
+      _();
+    }), (S, C) => ($(), R("div", {
+      ref: "area",
+      role: "group",
+      "huey-area": "",
+      style: X({
+        background: t.value,
+        "--huey-thumb-color": e.value
+      }),
+      onMousedown: u,
+      onTouchmovePassive: n,
+      onTouchstartPassive: a
+    }, [
+      re(K(fe), {
+        style: X({
+          top: r.value,
+          left: m.value
+        }),
+        tabindex: "0",
+        role: "slider",
+        "aria-label": "Color thumb",
+        "aria-valuenow": Math.round(K(o)),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuetext": `Saturation ${Math.round(K(o))}%, Lightness ${Math.round(K(l))}%`,
+        onKeydown: d
+      }, null, 8, ["style", "aria-valuenow", "aria-valuetext"])
+    ], 36));
+  }
+}), Ye = /* @__PURE__ */ N({
+  __name: "saturation-input",
+  setup(f) {
+    const { min: i, max: s } = P("s"), { saturation: o } = E(), l = k(o.value.toFixed(0));
+    H(o, (t) => {
+      const e = t.toFixed(0);
+      l.value !== e && (l.value = e);
+    });
+    function p(t, e) {
+      t.value = String(e), l.value = t.value, o.value = e;
+    }
+    function c(t) {
+      const e = t.target, n = Number(e.value);
+      if (Number.isNaN(n) || n < i || n > s) {
+        e.value = l.value;
+        return;
+      }
+      p(e, n);
+    }
+    function v(t, e) {
+      const n = t.target, m = Number(n.value);
+      let r = t.shiftKey ? 10 : 1;
+      r *= e === "down" ? -1 : 1;
+      const u = Number.isNaN(m) ? Number(l.value) : m, a = Math.min(s, Math.max(i, u + r));
+      p(n, a);
+    }
+    return (t, e) => ($(), F(U, {
+      value: l.value,
+      onKeydown: [
+        g(w(c, ["prevent"]), ["enter"]),
+        e[0] || (e[0] = g(w((n) => v(n, "up"), ["prevent"]), ["up"])),
+        e[1] || (e[1] = g(w((n) => v(n, "down"), ["prevent"]), ["down"]))
+      ],
+      onBlur: c
+    }, null, 8, ["value", "onKeydown"]));
+  }
+}), je = /* @__PURE__ */ N({
+  __name: "saturation-slider",
+  setup(f) {
+    const { hue: i, saturation: s } = E(), o = M(() => `hsl(${i.value}, ${s.value}%, 50%)`), l = M(() => `linear-gradient(to right, hsl(${i.value}, 0%, 50%), hsl(${i.value}, 100%, 50%))`);
+    return (p, c) => ($(), F(J, L({ ...p.$props }, {
+      modelValue: K(s),
+      "onUpdate:modelValue": c[0] || (c[0] = (v) => G(s) ? s.value = v : null),
+      "aria-label": p.$props["aria-label"] ?? "Saturation slider",
+      "huey-slider": "",
+      max: 100,
+      min: 0,
+      step: 1,
+      style: {
+        background: l.value,
+        "--huey-thumb-color": o.value
+      }
+    }), null, 16, ["modelValue", "aria-label", "style"]));
+  }
+});
+export {
+  He as AlphaInput,
+  Fe as AlphaSlider,
+  Re as BlueInput,
+  Be as ColorDropper,
+  Le as ColorPreview,
+  Te as ColorSwatch,
+  De as GreenInput,
+  de as HUEY_CONTEXT,
+  Pe as HexInput,
+  Ue as HueInput,
+  Ie as HueSlider,
+  Ae as HueyRoot,
+  Oe as LightnessInput,
+  ze as LightnessSlider,
+  Xe as RedInput,
+  We as SaturationArea,
+  Ye as SaturationInput,
+  je as SaturationSlider,
+  E as useHueyContext
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export declare function preventUserSelect(): void;
+export declare function allowUserSelect(): void;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/vue.css

@@ -0,0 +1 @@
+[huey-slider-track]{--huey-slider-track-height: 16px;--huey-slider-track-width: 129px;position:relative;width:var(--huey-slider-track-width);height:var(--huey-slider-track-height);border-radius:calc(1px * infinity)}[huey-slider-track] [huey-slider-thumb]{height:var(--huey-slider-track-height)}[huey-slider]{background:var(--huey-slider-bg)}[huey-preview]{--preview-tile: 20px;--opacity-tile: calc(var(--preview-tile) - 50%);overflow:hidden;position:relative;display:inline-block;width:var(--preview-tile);height:var(--preview-tile);border-radius:calc(var(--preview-tile) - 80%)}[huey-preview]:before{content:"";display:block;margin-left:auto;width:50%;height:100%;opacity:var(--v848a7ffe);background:url(data:image/svg+xml;utf8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200H3V3H0V0Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M3%200H6V3H3V0Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M3%203H6V6H3V3Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M0%203H3V6H0V3Z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A)}[huey-preview][data-split-view=false]:before{width:100%}[huey-swatch]{display:flex;align-items:center;justify-content:center;gap:8px}[huey-swatch-color]{cursor:pointer;width:24px;height:24px;background-color:var(--swatch-color);border-radius:4px}[huey-slider-thumb]{position:absolute;transform:translate(-50%,-50%);top:50%;height:16px;aspect-ratio:1 / 1;background-color:var(--huey-thumb-color, white);border-radius:calc(infinity * 1px);box-shadow:0 0 0 2px #fff}[huey-area]{position:relative;width:240px;height:230px;border-radius:12px}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@hueycolor/vue",
+  "type": "module",
+  "version": "0.0.1-beta.3",
+  "private": false,
+  "description": "Composable color picker components for Vue",
+  "author": "Eihab Khan <yo@eihab.me>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hueycolor/huey"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "color-picker",
+    "colorpicker",
+    "color",
+    "colour",
+    "hsl",
+    "rgb",
+    "hex",
+    "vue-component",
+    "huey"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "dependencies": {
+    "@hueycolor/core": "0.0.1-beta.3"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.24",
+    "vue-tsc": "^3.1.4"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  }
+}