@soybeanjs/headless 0.18.0 → 0.20.0

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

@@ -1 +1 @@
-import{useColorFieldRootContext as e,useColorFieldUi as t}from"./context.js";import{createElementBlock as n,defineComponent as r,normalizeClass as i,openBlock as a,shallowRef as o,unref as s}from"vue";const c=[`inputmode`,`value`,`placeholder`,`disabled`,`readonly`,`data-disabled`,`data-readonly`],l=r({name:`ColorFieldInput`,__name:`color-field-input`,setup(r){let l=t(`input`),{updateValue:u,commit:d,handleWheel:f,increment:p,decrement:m,incrementPage:h,decrementPage:g,incrementToMax:_,decrementToMin:v,channel:y,inputValue:b,placeholder:x,disabled:S,readonly:C}=e(`ColorFieldInput`),w=o(!1);function T(e){u(e.target.value)}function E(){w.value=!1,d()}function D(){w.value=!0}function O(e){w.value&&f(e)}function k(e){switch(e.key){case`ArrowUp`:e.preventDefault(),p();break;case`ArrowDown`:e.preventDefault(),m();break;case`PageUp`:e.preventDefault(),h();break;case`PageDown`:e.preventDefault(),g();break;case`Home`:e.preventDefault(),v();break;case`End`:e.preventDefault(),_();break;case`Enter`:e.preventDefault(),d();break}}function A(e){if(!y.value)return;let t=e.data;t&&!/[\d.-]/.test(t)&&e.preventDefault()}return(e,t)=>(a(),n(`input`,{class:i(s(l)),type:`text`,inputmode:s(y)?`decimal`:`text`,value:s(b),placeholder:s(x),disabled:s(S),readonly:s(C),"data-disabled":s(S)?``:void 0,"data-readonly":s(C)?``:void 0,onInput:T,onBlur:E,onFocus:D,onKeydown:k,onWheel:O,onBeforeinput:A},null,42,c))}});export{l as default};
+import{useColorFieldRootContext as e,useColorFieldUi as t}from"./context.js";import{createElementBlock as n,defineComponent as r,normalizeClass as i,openBlock as a,shallowRef as o,unref as s}from"vue";const c=[`inputmode`,`value`,`placeholder`,`disabled`,`readonly`,`data-disabled`,`data-readonly`],l=r({name:`ColorFieldInput`,__name:`color-field-input`,setup(r){let l=t(`input`),{updateValue:u,commit:d,handleWheel:f,increment:p,decrement:m,incrementPage:h,decrementPage:g,incrementToMax:_,decrementToMin:v,channel:y,inputValue:b,placeholder:x,disabled:S,readonly:C}=e(`ColorFieldInput`),w=o(!1);function T(e){u(e.target.value)}function E(){w.value=!1,d()}function D(){w.value=!0}function O(e){w.value&&f(e)}function k(e){switch(e.key){case`ArrowUp`:e.preventDefault(),p();break;case`ArrowDown`:e.preventDefault(),m();break;case`PageUp`:e.preventDefault(),h();break;case`PageDown`:e.preventDefault(),g();break;case`Home`:e.preventDefault(),v();break;case`End`:e.preventDefault(),_();break;case`Enter`:e.preventDefault(),d();break}}function A(e){if(!y.value)return;let t=e.data;t&&!/[\d.-]/.test(t)&&e.preventDefault()}return(e,t)=>(a(),n(`input`,{"data-soybean-color-field-input":``,class:i(s(l)),type:`text`,inputmode:s(y)?`decimal`:`text`,value:s(b),placeholder:s(x),disabled:s(S),readonly:s(C),"data-disabled":s(S)?``:void 0,"data-readonly":s(C)?``:void 0,onInput:T,onBlur:E,onFocus:D,onKeydown:k,onWheel:O,onBeforeinput:A},null,42,c))}});export{l as default};

package/dist/components/color-field/color-field-root.js

@@ -1 +1 @@
-import{formatChannelValue as e,formatColor as t,getChannelRange as n,getChannelValue as r,isValidColor as i,setChannelValue as a,toColorObject as o}from"../../shared/color.js";import{isFormControl as s,transformPropsToContext as c}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as l}from"../../composables/use-controllable-state.js";import{useForwardElement as u}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as d}from"../primitive/primitive.js";import"../primitive/index.js";import f from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import{provideColorFieldRootContext as p,useColorFieldUi as m}from"./context.js";import{computed as h,createBlock as g,createCommentVNode as _,defineComponent as v,normalizeClass as y,openBlock as b,renderSlot as x,shallowRef as S,unref as C,watch as w,withCtx as T}from"vue";const E=v({name:`ColorFieldRoot`,__name:`color-field-root`,props:{modelValue:{default:void 0},defaultValue:{default:`#000000`},colorSpace:{default:`hsl`},channel:{},format:{default:`hex`},placeholder:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},disableWheelChange:{type:Boolean,default:!1},step:{default:void 0},asChild:{type:Boolean},as:{default:`div`},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:color`],setup(v,{emit:E}){let D=v,O=E,[k,A]=u(),j=m(`root`);function M(e){return D.channel?o(e,D.colorSpace):o(e,`rgb`)}let N=l(()=>D.modelValue,e=>{O(`update:modelValue`,typeof e==`string`?e:t(e,D.format))},D.defaultValue),P=S(M(N.value)),F=S(``),I=S(!1),L=h(()=>s(k.value));function R(){if(P.value=M(N.value),!I.value){if(D.channel){F.value=e(D.channel,r(P.value,D.channel,D.colorSpace));return}F.value=t(P.value,D.format)}}function z(e){let n=t(e,D.format);P.value=M(e),N.value=n,O(`update:color`,M(e))}function B(){return D.step==null?D.channel?n(D.channel).step:1:D.step}function V(e){I.value=!0,F.value=e}function H(e){let t=o(P.value,`rgb`),n=Math.round(t.r)<<16|Math.round(t.g)<<8|Math.round(t.b);z(`#${Math.min(16777215,Math.max(0,n+Math.trunc(e))).toString(16).padStart(6,`0`)}`)}function U(){if(I.value=!1,D.channel){let t=Number.parseFloat(F.value);Number.isNaN(t)||z(a(P.value,D.channel,t,D.colorSpace)),F.value=e(D.channel,r(P.value,D.channel,D.colorSpace));return}let n=F.value.trim();i(n)&&z(n),F.value=t(P.value,D.format)}function W(n){if(!(D.disabled||D.readonly)){if(D.channel){let t=r(P.value,D.channel,D.colorSpace);z(a(P.value,D.channel,t+n,D.colorSpace)),F.value=e(D.channel,r(P.value,D.channel,D.colorSpace));return}H(n),F.value=t(P.value,D.format)}}function G(){W(B())}function K(){W(-B())}function q(){W(B()*10)}function J(){W(-B()*10)}function Y(){if(!D.channel){H(16777215),F.value=t(P.value,D.format);return}z(a(P.value,D.channel,n(D.channel).max,D.colorSpace)),F.value=e(D.channel,r(P.value,D.channel,D.colorSpace))}function X(){if(!D.channel){H(-16777215),F.value=t(P.value,D.format);return}z(a(P.value,D.channel,n(D.channel).min,D.colorSpace)),F.value=e(D.channel,r(P.value,D.channel,D.colorSpace))}function Z(e){if(!(D.disableWheelChange||D.disabled||D.readonly)){if(e.preventDefault(),e.deltaY>0){K();return}G()}}return w(()=>[D.modelValue,D.channel,D.colorSpace,D.format],R,{immediate:!0}),p({color:P,inputValue:F,updateValue:V,commit:U,increment:G,decrement:K,incrementPage:q,decrementPage:J,incrementToMax:Y,decrementToMin:X,handleWheel:Z,...c(D,[`channel`,`colorSpace`,`format`,`disabled`,`readonly`,`disableWheelChange`,`placeholder`])}),(e,n)=>(b(),g(C(d),{ref:C(A),as:v.as,"as-child":v.asChild,class:y(C(j)),role:`group`,"data-disabled":v.disabled?``:void 0,"data-readonly":v.readonly?``:void 0},{default:T(()=>[x(e.$slots,`default`),L.value&&v.name?(b(),g(C(f),{key:0,type:`text`,value:C(t)(P.value,v.format),name:v.name,disabled:v.disabled,readonly:v.readonly,required:v.required},null,8,[`value`,`name`,`disabled`,`readonly`,`required`])):_(`v-if`,!0)]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-readonly`]))}});export{E as default};
+import{formatChannelValue as e,formatColor as t,getChannelRange as n,getChannelValue as r,isValidColor as i,setChannelValue as a,toColorObject as o}from"../../shared/color.js";import{isFormControl as s,transformPropsToContext as c}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as l}from"../../composables/use-controllable-state.js";import{useForwardElement as u}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as d}from"../primitive/primitive.js";import"../primitive/index.js";import f from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import{provideColorFieldRootContext as p,useColorFieldUi as m}from"./context.js";import{computed as h,createBlock as g,createCommentVNode as _,defineComponent as v,normalizeClass as y,openBlock as b,renderSlot as x,shallowRef as S,unref as C,watch as w,withCtx as T}from"vue";const E=v({name:`ColorFieldRoot`,__name:`color-field-root`,props:{modelValue:{default:void 0},defaultValue:{default:`#000000`},colorSpace:{default:`hsl`},channel:{},format:{default:`hex`},placeholder:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},disableWheelChange:{type:Boolean,default:!1},step:{default:void 0},name:{},required:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:color`],setup(v,{emit:E}){let D=v,O=E,[k,A]=u(),j=m(`root`);function M(e){return D.channel?o(e,D.colorSpace):o(e,`rgb`)}let N=l(()=>D.modelValue,e=>{O(`update:modelValue`,typeof e==`string`?e:t(e,D.format))},D.defaultValue),P=S(M(N.value)),F=S(``),I=S(!1),L=h(()=>s(k.value));function R(){if(P.value=M(N.value),!I.value){if(D.channel){F.value=e(D.channel,r(P.value,D.channel,D.colorSpace));return}F.value=t(P.value,D.format)}}function z(e){let n=t(e,D.format);P.value=M(e),N.value=n,O(`update:color`,M(e))}function B(){return D.step==null?D.channel?n(D.channel).step:1:D.step}function V(e){I.value=!0,F.value=e}function H(e){let t=o(P.value,`rgb`),n=Math.round(t.r)<<16|Math.round(t.g)<<8|Math.round(t.b);z(`#${Math.min(16777215,Math.max(0,n+Math.trunc(e))).toString(16).padStart(6,`0`)}`)}function U(){if(I.value=!1,D.channel){let t=Number.parseFloat(F.value);Number.isNaN(t)||z(a(P.value,D.channel,t,D.colorSpace)),F.value=e(D.channel,r(P.value,D.channel,D.colorSpace));return}let n=F.value.trim();i(n)&&z(n),F.value=t(P.value,D.format)}function W(n){if(!(D.disabled||D.readonly)){if(D.channel){let t=r(P.value,D.channel,D.colorSpace);z(a(P.value,D.channel,t+n,D.colorSpace)),F.value=e(D.channel,r(P.value,D.channel,D.colorSpace));return}H(n),F.value=t(P.value,D.format)}}function G(){W(B())}function K(){W(-B())}function q(){W(B()*10)}function J(){W(-B()*10)}function Y(){if(!D.channel){H(16777215),F.value=t(P.value,D.format);return}z(a(P.value,D.channel,n(D.channel).max,D.colorSpace)),F.value=e(D.channel,r(P.value,D.channel,D.colorSpace))}function X(){if(!D.channel){H(-16777215),F.value=t(P.value,D.format);return}z(a(P.value,D.channel,n(D.channel).min,D.colorSpace)),F.value=e(D.channel,r(P.value,D.channel,D.colorSpace))}function Z(e){if(!(D.disableWheelChange||D.disabled||D.readonly)){if(e.preventDefault(),e.deltaY>0){K();return}G()}}return w(()=>[D.modelValue,D.channel,D.colorSpace,D.format],R,{immediate:!0}),p({color:P,inputValue:F,updateValue:V,commit:U,increment:G,decrement:K,incrementPage:q,decrementPage:J,incrementToMax:Y,decrementToMin:X,handleWheel:Z,...c(D,[`channel`,`colorSpace`,`format`,`disabled`,`readonly`,`disableWheelChange`,`placeholder`])}),(e,n)=>(b(),g(C(d),{ref:C(A),as:v.as,"as-child":v.asChild,"data-soybean-color-field-root":``,class:y(C(j)),role:`group`,"data-disabled":v.disabled?``:void 0,"data-readonly":v.readonly?``:void 0},{default:T(()=>[x(e.$slots,`default`),L.value&&v.name?(b(),g(C(f),{key:0,type:`text`,value:C(t)(P.value,v.format),name:v.name,disabled:v.disabled,readonly:v.readonly,required:v.required},null,8,[`value`,`name`,`disabled`,`readonly`,`required`])):_(`v-if`,!0)]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-readonly`]))}});export{E as default};

package/dist/components/color-field/color-field-root.vue.d.ts

@@ -1,5 +1,4 @@
-import { AsTag } from "../primitive/types.js";
-import { ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "../../shared/color.js";
+import { ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "../../types/color.js";
 import { ColorFieldRootProps } from "./types.js";
 import * as _$vue from "vue";
 
@@ -17,13 +16,12 @@ declare const __VLS_base: _$vue.DefineComponent<ColorFieldRootProps, {}, {}, {},
 }>, {
   disabled: boolean;
   format: ColorFormat;
-  as: AsTag | _$vue.Component;
   step: number;
-  colorSpace: ColorSpace;
   modelValue: string | ColorValue;
   defaultValue: string | ColorValue;
   readonly: boolean;
   disableWheelChange: boolean;
+  colorSpace: ColorSpace;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/color-field/index.d.ts

@@ -1,5 +1,6 @@
-import { ColorFieldInputProps, ColorFieldRootEmits, ColorFieldRootProps, ColorFieldUi, ColorFieldUiSlot } from "./types.js";
-import { _default as _default$1 } from "./color-field-root.vue.js";
-import { _default } from "./color-field-input.vue.js";
+import { ColorFieldCompactEmits, ColorFieldCompactProps, ColorFieldInputProps, ColorFieldRootEmits, ColorFieldRootProps, ColorFieldUi, ColorFieldUiSlot } from "./types.js";
+import { _default } from "./color-field-compact.vue.js";
+import { _default as _default$2 } from "./color-field-root.vue.js";
+import { _default as _default$1 } from "./color-field-input.vue.js";
 import { provideColorFieldUi } from "./context.js";
-export { _default as ColorFieldInput, type ColorFieldInputProps, _default$1 as ColorFieldRoot, type ColorFieldRootEmits, type ColorFieldRootProps, type ColorFieldUi, type ColorFieldUiSlot, provideColorFieldUi };
+export { _default as ColorFieldCompact, type ColorFieldCompactEmits, type ColorFieldCompactProps, _default$1 as ColorFieldInput, type ColorFieldInputProps, _default$2 as ColorFieldRoot, type ColorFieldRootEmits, type ColorFieldRootProps, type ColorFieldUi, type ColorFieldUiSlot, provideColorFieldUi };

package/dist/components/color-field/index.js

@@ -1 +1 @@
-import{provideColorFieldUi as e}from"./context.js";import t from"./color-field-root.js";import n from"./color-field-input.js";export{n as ColorFieldInput,t as ColorFieldRoot,e as provideColorFieldUi};
+import{provideColorFieldUi as e}from"./context.js";import t from"./color-field-input.js";import n from"./color-field-root.js";import r from"./color-field-compact.js";export{r as ColorFieldCompact,t as ColorFieldInput,n as ColorFieldRoot,e as provideColorFieldUi};

package/dist/components/color-field/types.d.ts

@@ -1,14 +1,15 @@
+import { ColorChannel, ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "../../types/color.js";
 import { UiClass } from "../../types/common.js";
 import { FormFieldCommonProps } from "../../types/component.js";
-import { PrimitiveProps } from "../primitive/types.js";
-import { ColorChannel, ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "../../shared/color.js";
-import { HTMLAttributes, InputHTMLAttributes, ShallowRef } from "vue";
+import { BaseProps } from "../../types/vue.js";
+import { PrimitiveWithBaseProps } from "../primitive/types.js";
+import { InputHTMLAttributes, ShallowRef } from "vue";
 
 //#region src/components/color-field/types.d.ts
 /**
  * Properties for the ColorFieldRoot component.
  */
-interface ColorFieldRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */HTMLAttributes {
+interface ColorFieldRootProps extends FormFieldCommonProps, PrimitiveWithBaseProps {
   /**
    * Current model value.
    */
@@ -66,7 +67,20 @@ type ColorFieldRootEmits = {
 /**
  * Properties for the ColorFieldInput component.
  */
-interface ColorFieldInputProps extends /** @vue-ignore */InputHTMLAttributes {}
+interface ColorFieldInputProps extends BaseProps<InputHTMLAttributes> {}
+/**
+ * Properties for the ColorFieldCompact component.
+ */
+interface ColorFieldCompactProps extends ColorFieldRootProps {
+  /**
+   * Properties forwarded to the input element.
+   */
+  inputProps?: ColorFieldInputProps;
+}
+/**
+ * Events for the ColorFieldCompact component.
+ */
+type ColorFieldCompactEmits = ColorFieldRootEmits;
 /**
  * Available UI slots for the ColorField component.
  */
@@ -76,4 +90,4 @@ type ColorFieldUiSlot = 'root' | 'input';
  */
 type ColorFieldUi = UiClass<ColorFieldUiSlot>;
 //#endregion
-export { ColorFieldInputProps, ColorFieldRootEmits, ColorFieldRootProps, ColorFieldUi, ColorFieldUiSlot };
+export { ColorFieldCompactEmits, ColorFieldCompactProps, ColorFieldInputProps, ColorFieldRootEmits, ColorFieldRootProps, ColorFieldUi, ColorFieldUiSlot };

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

@@ -0,0 +1 @@
+import{useForwardListeners as e}from"../../composables/use-forward-listeners.js";import{usePickProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import n from"../color-area/color-area-compact.js";import r from"../color-field/color-field-compact.js";import{useColorPickerUi as i}from"./context.js";import a from"./color-picker-root.js";import o from"../color-slider/color-slider-compact.js";import s from"../color-swatch/color-swatch-compact.js";import c from"../color-swatch-picker/color-swatch-picker-compact.js";import l from"../popover/popover-compact.js";import u from"../segment/segment-compact.js";import{colorFormats as d}from"./shared.js";import f from"./color-picker-trigger.js";import{createBlock as p,createCommentVNode as m,createElementBlock as h,createElementVNode as g,createVNode as _,defineComponent as v,guardReactiveProps as y,mergeProps as b,normalizeClass as x,normalizeProps as S,openBlock as C,renderSlot as w,toHandlers as T,unref as E,withCtx as D}from"vue";const O=v({name:`ColorPickerCompact`,__name:`color-picker-compact`,props:{showAlpha:{type:Boolean,default:!0},showFields:{type:Boolean,default:!0},showSwatches:{type:Boolean,default:!0},swatches:{default:()=>[]},swatchProps:{},segmentProps:{},areaProps:{},hueSliderProps:{},alphaSliderProps:{},alphaFieldProps:{},fieldProps:{},swatchPickerProps:{},modelValue:{},defaultValue:{},format:{},defaultFormat:{},colorSpace:{default:`hsl`},disabled:{type:Boolean},name:{},required:{type:Boolean},placement:{default:`bottom`},showArrow:{type:Boolean,default:!0},triggerProps:{},portalProps:{},positionerProps:{},popupProps:{},arrowProps:{},closeProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},modal:{type:Boolean}},emits:[`update:modelValue`,`update:color`,`update:format`,`change`,`update:open`,`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`],setup(v,{emit:O}){let k=v,A=O,j=i(),M=e(A),N=t(k,[`name`,`required`,`modelValue`,`defaultValue`,`format`,`defaultFormat`,`disabled`,`colorSpace`]),P=t(k,[`open`,`defaultOpen`,`modal`,`disabled`,`placement`,`showArrow`,`triggerProps`,`positionerProps`,`popupProps`,`closeProps`,`portalProps`,`arrowProps`]);return(e,t)=>(C(),p(a,b(E(N),T(E(M))),{default:D(({color:t,hexValue:i,displayFormat:a,displayFormatLabel:O,areaChannel:k,setColor:A,setFormat:N})=>[_(l,b(E(P),T(E(M))),{trigger:D(()=>[_(f,null,{default:D(t=>[w(e.$slots,`trigger`,S(y(t)))]),_:3})]),default:D(()=>[g(`div`,{class:x(E(j).content),"data-soybean-color-picker-content":``},[_(u,b(v.segmentProps,{"data-soybean-color-picker-segment":``,class:E(j).segment,"model-value":a,items:E(d),disabled:v.disabled,"onUpdate:modelValue":N}),null,16,[`class`,`model-value`,`items`,`disabled`,`onUpdate:modelValue`]),_(n,b(v.areaProps,{"data-soybean-color-picker-area":``,class:E(j).area,"model-value":t,"color-space":v.colorSpace,"x-channel":k.x,"y-channel":k.y,disabled:v.disabled,"onUpdate:color":A}),null,16,[`class`,`model-value`,`color-space`,`x-channel`,`y-channel`,`disabled`,`onUpdate:color`]),g(`div`,{class:x(E(j).sliderSwatch),"data-soybean-color-picker-slider-swatch":``},[g(`div`,{class:x(E(j).sliderRoot),"data-soybean-color-picker-slider-root":``},[_(o,b(v.hueSliderProps,{"data-soybean-color-picker-hue-slider":``,class:E(j).slider,"model-value":t,channel:`hue`,"color-space":v.colorSpace,disabled:v.disabled,"onUpdate:color":A}),null,16,[`class`,`model-value`,`color-space`,`disabled`,`onUpdate:color`]),v.showAlpha?(C(),p(o,b({key:0},v.alphaSliderProps,{"data-soybean-color-picker-alpha-slider":``,class:E(j).alphaSlider,"model-value":t,channel:`alpha`,"color-space":v.colorSpace,disabled:v.disabled,"onUpdate:color":A}),null,16,[`class`,`model-value`,`color-space`,`disabled`,`onUpdate:color`])):m(`v-if`,!0)],2),_(s,b(v.swatchProps,{"data-soybean-color-picker-swatch":``,class:E(j).swatch,color:i}),null,16,[`class`,`color`])],2),v.showFields?(C(),h(`div`,{key:0,class:x(E(j).fields),"data-soybean-color-picker-fields":``},[_(r,b(v.fieldProps,{"data-soybean-color-picker-field":``,class:E(j).field,"model-value":i,format:a,placeholder:O,disabled:v.disabled,"onUpdate:modelValue":A}),null,16,[`class`,`model-value`,`format`,`placeholder`,`disabled`,`onUpdate:modelValue`]),v.showAlpha?(C(),p(r,b({key:0},v.alphaFieldProps,{"data-soybean-color-picker-alpha-field":``,class:E(j).alphaField,"model-value":t,channel:`alpha`,"color-space":v.colorSpace,disabled:v.disabled,"onUpdate:color":A}),null,16,[`class`,`model-value`,`color-space`,`disabled`,`onUpdate:color`])):m(`v-if`,!0)],2)):m(`v-if`,!0),v.showSwatches&&v.swatches.length?(C(),p(c,b({key:1},v.swatchPickerProps,{"data-soybean-color-picker-swatch-picker":``,class:E(j).swatchPicker,colors:v.swatches,"model-value":i,disabled:v.disabled,multiple:!1,"onUpdate:modelValue":A}),null,16,[`class`,`colors`,`model-value`,`disabled`,`onUpdate:modelValue`])):m(`v-if`,!0)],2)]),_:2},1040)]),_:3},16))}});export{O as default};

package/dist/components/color-picker/color-picker-compact.vue.d.ts

@@ -0,0 +1,60 @@
+import { ColorFormat, ColorSpace, NormalizedColor } from "../../types/color.js";
+import { Placement } from "../../types/common.js";
+import { FocusOutsideEvent, PointerDownOutsideEvent } from "../../types/event.js";
+import { ColorPickerCompactProps } from "./types.js";
+import * as _$vue from "vue";
+import * as _$_soybeanjs_colord0 from "@soybeanjs/colord";
+
+//#region src/components/color-picker/color-picker-compact.vue.d.ts
+declare var __VLS_21: {
+  color: _$_soybeanjs_colord0.AnyColor;
+  hexValue: string;
+  formattedValue: string;
+  displayFormat: ColorFormat;
+};
+type __VLS_Slots = {} & {
+  trigger?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<ColorPickerCompactProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:open": (value: boolean) => any;
+  escapeKeyDown: (event: KeyboardEvent) => any;
+  pointerDownOutside: (event: PointerDownOutsideEvent) => any;
+  focusOutside: (event: FocusOutsideEvent) => any;
+  interactOutside: (event: PointerDownOutsideEvent | FocusOutsideEvent) => any;
+  openAutoFocus: (event: Event) => any;
+  closeAutoFocus: (event: Event) => any;
+  "update:modelValue": (value: string) => any;
+  change: (value: string) => any;
+  "update:color": (value: NormalizedColor) => any;
+  "update:format": (value: ColorFormat) => any;
+}, string, _$vue.PublicProps, Readonly<ColorPickerCompactProps> & Readonly<{
+  "onUpdate:open"?: ((value: boolean) => any) | undefined;
+  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+  onPointerDownOutside?: ((event: PointerDownOutsideEvent) => any) | undefined;
+  onFocusOutside?: ((event: FocusOutsideEvent) => any) | undefined;
+  onInteractOutside?: ((event: PointerDownOutsideEvent | FocusOutsideEvent) => any) | undefined;
+  onOpenAutoFocus?: ((event: Event) => any) | undefined;
+  onCloseAutoFocus?: ((event: Event) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onChange?: ((value: string) => any) | undefined;
+  "onUpdate:color"?: ((value: NormalizedColor) => any) | undefined;
+  "onUpdate:format"?: ((value: ColorFormat) => any) | undefined;
+}>, {
+  open: boolean;
+  placement: Placement;
+  showArrow: boolean;
+  colorSpace: ColorSpace;
+  showAlpha: boolean;
+  showFields: boolean;
+  showSwatches: boolean;
+  swatches: string[];
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

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

@@ -1 +1 @@
-import{formatColor as e,toColorObject as t}from"../../shared/color.js";import{isFormControl as n}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as r}from"../../composables/use-controllable-state.js";import{useForwardElement as i}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as a}from"../primitive/primitive.js";import"../primitive/index.js";import o from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import{computed as s,createBlock as c,createCommentVNode as l,defineComponent as u,openBlock as d,renderSlot as f,shallowRef as p,unref as m,watch as h,withCtx as g}from"vue";const _=u({name:`ColorPickerRoot`,__name:`color-picker-root`,props:{modelValue:{default:void 0},defaultValue:{default:`#000000`},format:{default:`hex`},disabled:{type:Boolean,default:!1},asChild:{type:Boolean},as:{default:`div`},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:color`,`change`],setup(u,{emit:_}){let v=u,y=_,[b,x]=i(),S=r(()=>v.modelValue,t=>{y(`update:modelValue`,typeof t==`string`?t:e(t,v.format))},v.defaultValue),C=p(),w=p(v.modelValue??v.defaultValue),T=s(()=>w.value),E=s(()=>e(w.value,v.format)),D=s(()=>n(b.value));h(()=>v.modelValue,e=>{e!=null&&(typeof e==`string`&&e===C.value||(w.value=e))},{immediate:!0});function O(n){let r=e(n,v.format);w.value=n,C.value=r,S.value=r,y(`update:color`,t(n,`rgb`)),y(`change`,r)}return(e,t)=>(d(),c(m(a),{ref:m(x),as:u.as,"as-child":u.asChild,role:`group`,"data-disabled":u.disabled?``:void 0},{default:g(()=>[f(e.$slots,`default`,{color:T.value,formattedValue:E.value,setColor:O}),D.value&&u.name?(d(),c(m(o),{key:0,type:`text`,value:E.value,name:u.name,disabled:u.disabled,required:u.required},null,8,[`value`,`name`,`disabled`,`required`])):l(`v-if`,!0)]),_:3},8,[`as`,`as-child`,`data-disabled`]))}});export{_ as default};
+import{areColorsEqual as e,formatColor as t,resolveColorFormat as n,toColorObject as r}from"../../shared/color.js";import{transformPropsToContext as i}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as a}from"../../composables/use-controllable-state.js";import"../../composables/index.js";import{provideColorPickerRootContext as o}from"./context.js";import{computed as s,defineComponent as c,renderSlot as l,shallowRef as u,watch as d}from"vue";const f=c({name:`ColorPickerRoot`,inheritAttrs:!1,__name:`color-picker-root`,props:{modelValue:{default:void 0},defaultValue:{default:`#000000`},format:{default:void 0},defaultFormat:{default:void 0},colorSpace:{default:void 0},disabled:{type:Boolean,default:!1},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:color`,`update:format`,`change`],setup(c,{emit:f}){let p=c,m=f;function h(e,t){return e||n(t,`hex`)}let g=a(()=>p.format,e=>{m(`update:format`,e)},h(p.defaultFormat,p.modelValue??p.defaultValue)),_=a(()=>p.modelValue,e=>{m(`update:modelValue`,typeof e==`string`?e:t(e,h(g.value,e)))},p.defaultValue),v=u(),y=u(p.modelValue??p.defaultValue),b=s(()=>y.value),x=s(()=>t(y.value,`hex`)),S=s(()=>h(g.value,y.value)),C=s(()=>t(y.value,S.value)),w=s(()=>S.value.toUpperCase()),T=s(()=>p.colorSpace===`oklch`?`chroma`:`saturation`),E=s(()=>p.colorSpace===`hsv`?`brightness`:`lightness`),D=s(()=>({x:T.value,y:E.value}));d(()=>p.modelValue,t=>{t!=null&&(typeof t==`string`&&t===v.value||e(t,y.value)||(y.value=t))},{immediate:!0});function O(e){let n=t(e,S.value),i=p.colorSpace??`hsl`;y.value=e,v.value=n,_.value=n,m(`update:color`,r(e,i)),m(`change`,n)}function k(e){S.value!==e&&(g.value=e)}return o({...i(p,[`name`,`required`,`disabled`]),color:b,formattedValue:C,hexValue:x,displayFormat:S}),(e,t)=>l(e.$slots,`default`,{color:b.value,formattedValue:C.value,hexValue:x.value,displayFormat:S.value,displayFormatLabel:w.value,areaChannel:D.value,setColor:O,setFormat:k})}});export{f as default};

package/dist/components/color-picker/color-picker-root.vue.d.ts

@@ -1,33 +1,44 @@
-import { AsTag } from "../primitive/types.js";
-import { ColorFormat, ColorValue, NormalizedColor } from "../../shared/color.js";
+import { ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "../../types/color.js";
 import { ColorPickerRootProps } from "./types.js";
 import * as _$vue from "vue";
 import * as _$_soybeanjs_colord0 from "@soybeanjs/colord";
 
 //#region src/components/color-picker/color-picker-root.vue.d.ts
 declare function setColor(nextColor: ColorValue): void;
-declare var __VLS_8: {
+declare function setFormat(nextFormat: ColorFormat): void;
+declare var __VLS_1: {
   color: _$_soybeanjs_colord0.AnyColor;
   formattedValue: string;
+  hexValue: string;
+  displayFormat: ColorFormat;
+  displayFormatLabel: string;
+  areaChannel: {
+    readonly x: "saturation" | "chroma";
+    readonly y: "lightness" | "brightness";
+  };
   setColor: typeof setColor;
+  setFormat: typeof setFormat;
 };
 type __VLS_Slots = {} & {
-  default?: (props: typeof __VLS_8) => any;
+  default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ColorPickerRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  change: (value: string) => any;
   "update:modelValue": (value: string) => any;
+  change: (value: string) => any;
   "update:color": (value: NormalizedColor) => any;
+  "update:format": (value: ColorFormat) => any;
 }, string, _$vue.PublicProps, Readonly<ColorPickerRootProps> & Readonly<{
-  onChange?: ((value: string) => any) | undefined;
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onChange?: ((value: string) => any) | undefined;
   "onUpdate:color"?: ((value: NormalizedColor) => any) | undefined;
+  "onUpdate:format"?: ((value: ColorFormat) => any) | undefined;
 }>, {
   disabled: boolean;
   format: ColorFormat;
-  as: AsTag | _$vue.Component;
   modelValue: string | ColorValue;
   defaultValue: string | ColorValue;
+  colorSpace: ColorSpace;
+  defaultFormat: ColorFormat;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -0,0 +1 @@
+import{isFormControl as e}from"../../shared/vue.js";import"../../shared/index.js";import{useForwardElement as t}from"../../composables/use-forward-element.js";import"../../composables/index.js";import n from"../button/button.js";import r from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import{useColorPickerRootContext as i,useColorPickerUi as a}from"./context.js";import o from"../color-swatch/color-swatch-compact.js";import{computed as s,createBlock as c,createCommentVNode as l,createElementVNode as u,createVNode as d,defineComponent as f,mergeProps as p,normalizeClass as m,openBlock as h,renderSlot as g,toDisplayString as _,unref as v,withCtx as y}from"vue";const b=f({name:`ColorPickerTrigger`,__name:`color-picker-trigger`,props:{type:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(f){let b=f,[x,S]=t(),{color:C,hexValue:w,formattedValue:T,displayFormat:E,name:D,disabled:O,required:k}=i(`ColorPickerTrigger`),A=a(),j=s(()=>e(x.value)),M=s(()=>O.value||b.disabled);return(e,t)=>(h(),c(n,p(b,{ref:v(S),"data-soybean-color-picker-trigger":``,class:v(A).trigger,disabled:M.value}),{default:y(()=>[g(e.$slots,`default`,{color:v(C),hexValue:v(w),formattedValue:v(T),displayFormat:v(E)},()=>[d(o,{color:v(w),class:m(v(A).triggerSwatch)},null,8,[`color`,`class`]),u(`span`,{class:m(v(A).triggerValue)},_(v(T)),3)]),j.value&&v(D)?(h(),c(v(r),{key:0,type:`text`,value:v(T),name:v(D),disabled:M.value,required:v(k)},null,8,[`value`,`name`,`disabled`,`required`])):l(`v-if`,!0)]),_:3},16,[`class`,`disabled`]))}});export{b as default};

package/dist/components/color-picker/color-picker-trigger.vue.d.ts

@@ -0,0 +1,25 @@
+import { ColorFormat } from "../../types/color.js";
+import { ColorPickerTriggerProps } from "./types.js";
+import * as _$vue from "vue";
+import * as _$_soybeanjs_colord0 from "@soybeanjs/colord";
+
+//#region src/components/color-picker/color-picker-trigger.vue.d.ts
+declare var __VLS_8: {
+  color: _$_soybeanjs_colord0.AnyColor;
+  hexValue: string;
+  formattedValue: string;
+  displayFormat: ColorFormat;
+};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<ColorPickerTriggerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColorPickerTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/color-picker/context.d.ts

@@ -0,0 +1,9 @@
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
+import { ColorPickerUiSlot } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-picker/context.d.ts
+declare const provideColorPickerUi: (ui: _$vue.ComputedRef<Partial<UiClass<ColorPickerUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<ColorPickerUiSlot>>>, useColorPickerUi: UseUiConsumer<ColorPickerUiSlot>;
+//#endregion
+export { provideColorPickerUi };

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

@@ -0,0 +1 @@
+import{useContext as e}from"../../composables/use-context.js";import{useUiContext as t}from"../../composables/use-ui-context.js";import"../../composables/index.js";const[n,r]=e(`ColorPickerRootContext`),[i,a]=t(`ColorPickerUi`);export{n as provideColorPickerRootContext,i as provideColorPickerUi,r as useColorPickerRootContext,a as useColorPickerUi};

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

@@ -1,3 +1,6 @@
-import { ColorPickerRootEmits, ColorPickerRootProps, ColorPickerRootSlotProps } from "./types.js";
-import { _default } from "./color-picker-root.vue.js";
-export { _default as ColorPickerRoot, type ColorPickerRootEmits, type ColorPickerRootProps, type ColorPickerRootSlotProps };
+import { ColorPickerCompactEmits, ColorPickerCompactProps, ColorPickerFormatOptionData, ColorPickerRootEmits, ColorPickerRootProps, ColorPickerRootSlotProps, ColorPickerTriggerProps, ColorPickerUi, ColorPickerUiSlot } from "./types.js";
+import { _default } from "./color-picker-compact.vue.js";
+import { _default as _default$1 } from "./color-picker-root.vue.js";
+import { _default as _default$2 } from "./color-picker-trigger.vue.js";
+import { provideColorPickerUi } from "./context.js";
+export { _default as ColorPickerCompact, type ColorPickerCompactEmits, type ColorPickerCompactProps, type ColorPickerFormatOptionData, _default$1 as ColorPickerRoot, type ColorPickerRootEmits, type ColorPickerRootProps, type ColorPickerRootSlotProps, _default$2 as ColorPickerTrigger, type ColorPickerTriggerProps, type ColorPickerUi, type ColorPickerUiSlot, provideColorPickerUi };

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

@@ -1 +1 @@
-import e from"./color-picker-root.js";export{e as ColorPickerRoot};
+import{provideColorPickerUi as e}from"./context.js";import t from"./color-picker-root.js";import n from"./color-picker-trigger.js";import r from"./color-picker-compact.js";export{r as ColorPickerCompact,t as ColorPickerRoot,n as ColorPickerTrigger,e as provideColorPickerUi};

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

@@ -0,0 +1 @@
+const e=[`hex`,`rgb`,`hsl`,`oklch`].map(e=>({value:e,label:e.toUpperCase()}));export{e as colorFormats};

package/dist/components/color-picker/types.d.ts

@@ -1,13 +1,22 @@
+import { ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "../../types/color.js";
+import { UiClass } from "../../types/common.js";
 import { FormFieldCommonProps } from "../../types/component.js";
-import { PrimitiveProps } from "../primitive/types.js";
-import { ColorFormat, ColorValue, NormalizedColor } from "../../shared/color.js";
-import { ComputedRef, HTMLAttributes } from "vue";
+import { ButtonProps } from "../button/types.js";
+import { ColorAreaCompactProps } from "../color-area/types.js";
+import { ColorFieldCompactProps } from "../color-field/types.js";
+import { ColorSliderCompactProps } from "../color-slider/types.js";
+import { ColorSwatchCompactProps } from "../color-swatch/types.js";
+import { ColorSwatchPickerCompactProps } from "../color-swatch-picker/types.js";
+import { PopoverCompactEmits, PopoverCompactProps } from "../popover/types.js";
+import { TabsOptionData } from "../tabs/types.js";
+import { SegmentCompactProps } from "../segment/types.js";
+import { ComputedRef } from "vue";
 
 //#region src/components/color-picker/types.d.ts
 /**
  * Properties for the ColorPickerRoot component.
  */
-interface ColorPickerRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */HTMLAttributes {
+interface ColorPickerRootProps extends FormFieldCommonProps {
   /**
    * Current model value.
    */
@@ -20,6 +29,14 @@ interface ColorPickerRootProps extends PrimitiveProps, FormFieldCommonProps, /**
    * Format.
    */
   format?: ColorFormat;
+  /**
+   * Default format.
+   */
+  defaultFormat?: ColorFormat;
+  /**
+   * Color space.
+   */
+  colorSpace?: ColorSpace;
   /**
    * Whether the component is disabled.
    */
@@ -37,6 +54,10 @@ type ColorPickerRootEmits = {
    * Emitted when the color value changes.
    */
   'update:color': [value: NormalizedColor];
+  /**
+   * Emitted when the format value changes.
+   */
+  'update:format': [value: ColorFormat];
   /**
    * Emitted when change occurs.
    */
@@ -54,10 +75,116 @@ interface ColorPickerRootSlotProps {
    * Formatted value exposed in the slot scope.
    */
   formattedValue: ComputedRef<string>;
+  /**
+   * Hex value exposed in the slot scope.
+   */
+  hexValue: ComputedRef<string>;
+  /**
+   * Display format exposed in the slot scope.
+   */
+  displayFormat: ComputedRef<ColorFormat>;
+  /**
+   * Display format label exposed in the slot scope.
+   */
+  displayFormatLabel: ComputedRef<string>;
+  /**
+   * X channel exposed in the slot scope.
+   */
+  areaXChannel: ComputedRef<'chroma' | 'saturation'>;
+  /**
+   * Y channel exposed in the slot scope.
+   */
+  areaYChannel: ComputedRef<'brightness' | 'lightness'>;
   /**
    * Set color exposed in the slot scope.
    */
   setColor: (color: ColorValue) => void;
+  /**
+   * Set format exposed in the slot scope.
+   */
+  setFormat: (format: ColorFormat) => void;
+}
+/**
+ * Properties for the ColorPickerTrigger component.
+ */
+interface ColorPickerTriggerProps extends ButtonProps {}
+/**
+ * Option data for the ColorPicker format segment.
+ */
+interface ColorPickerFormatOptionData extends TabsOptionData<ColorFormat> {
+  /**
+   * Color format value of the option.
+   */
+  value: ColorFormat;
+  /**
+   * Label of the option.
+   */
+  label: string;
+}
+/**
+ * Properties for the ColorPickerCompact component.
+ */
+interface ColorPickerCompactProps extends ColorPickerRootProps, PopoverCompactProps {
+  /**
+   * Whether to show an alpha.
+   */
+  showAlpha?: boolean;
+  /**
+   * Whether to show a fields.
+   */
+  showFields?: boolean;
+  /**
+   * Whether to show a swatches.
+   */
+  showSwatches?: boolean;
+  /**
+   * Swatches.
+   */
+  swatches?: string[];
+  /**
+   * Properties forwarded to the swatch element.
+   */
+  swatchProps?: ColorSwatchCompactProps;
+  /**
+   * Properties forwarded to the segment element.
+   */
+  segmentProps?: SegmentCompactProps<ColorPickerFormatOptionData>;
+  /**
+   * Properties forwarded to the area element.
+   */
+  areaProps?: ColorAreaCompactProps;
+  /**
+   * Properties forwarded to the hue slider element.
+   */
+  hueSliderProps?: ColorSliderCompactProps;
+  /**
+   * Properties forwarded to the alpha slider element.
+   */
+  alphaSliderProps?: ColorSliderCompactProps;
+  /**
+   * Properties forwarded to the alpha field element.
+   */
+  alphaFieldProps?: ColorFieldCompactProps;
+  /**
+   * Properties forwarded to the field element.
+   */
+  fieldProps?: ColorFieldCompactProps;
+  /**
+   * Properties forwarded to the swatch picker element.
+   */
+  swatchPickerProps?: ColorSwatchPickerCompactProps;
 }
+/**
+ * Events for the ColorPickerCompact component.
+ */
+type ColorPickerCompactEmits = ColorPickerRootEmits & PopoverCompactEmits;
+/**
+ * Available UI slots for the ColorPicker component.
+ */
+type ColorPickerUiSlot = 'popup' | 'content' | 'trigger' | 'triggerSwatch' | 'triggerValue' | 'segment' | 'area' | 'sliderSwatch' | 'sliderRoot' | 'slider' | 'alphaSlider' | 'swatch' | 'fields' | 'field' | 'alphaField' | 'swatchPicker';
+/**
+ * UI class overrides for the ColorPicker component.
+ */
+type ColorPickerUi = UiClass<ColorPickerUiSlot>;
 //#endregion
-export { ColorPickerRootEmits, ColorPickerRootProps, ColorPickerRootSlotProps };
+export { ColorPickerCompactEmits, ColorPickerCompactProps, ColorPickerFormatOptionData, ColorPickerRootEmits, ColorPickerRootProps, ColorPickerRootSlotProps, ColorPickerTriggerProps, ColorPickerUi, ColorPickerUiSlot };

package/dist/components/color-slider/color-slider-compact.js

@@ -0,0 +1 @@
+import{useForwardListeners as e}from"../../composables/use-forward-listeners.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import n from"./color-slider-root.js";import r from"./color-slider-thumb.js";import i from"./color-slider-track.js";import{createBlock as a,createVNode as o,defineComponent as s,guardReactiveProps as c,mergeProps as l,normalizeProps as u,openBlock as d,toHandlers as f,unref as p,withCtx as m}from"vue";const h=s({name:`ColorSliderCompact`,__name:`color-slider-compact`,props:{trackProps:{},thumbProps:{},modelValue:{},defaultValue:{},colorSpace:{},channel:{},format:{},orientation:{},dir:{},inverted:{type:Boolean},disabled:{type:Boolean},step:{},name:{},required:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:color`,`change`,`changeEnd`],setup(s,{emit:h}){let g=s,_=h,v=t(g,[`trackProps`,`thumbProps`]),y=e(_);return(e,t)=>(d(),a(n,l(p(v),f(p(y))),{default:m(()=>[o(i,u(c(s.trackProps)),null,16),o(r,u(c(s.thumbProps)),null,16)]),_:1},16))}});export{h as default};

package/dist/components/color-slider/color-slider-compact.vue.d.ts

@@ -0,0 +1,19 @@
+import { NormalizedColor } from "../../types/color.js";
+import { ColorSliderCompactProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-slider/color-slider-compact.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<ColorSliderCompactProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: string) => any;
+  change: (value: string) => any;
+  "update:color": (value: NormalizedColor) => any;
+  changeEnd: (value: string) => any;
+}, string, _$vue.PublicProps, Readonly<ColorSliderCompactProps> & Readonly<{
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onChange?: ((value: string) => any) | undefined;
+  "onUpdate:color"?: ((value: NormalizedColor) => any) | undefined;
+  onChangeEnd?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };

package/dist/components/color-slider/color-slider-root.js

@@ -1 +1 @@
-import{areColorsEqual as e,formatColor as t,getChannelObjectSpace as n,getChannelRange as r,getChannelValue as i,hasVisibleChromaticity as a,setChannelValue as o,toColorObject as s}from"../../shared/color.js";import{snapValueToStep as c}from"../../shared/value.js";import{transformPropsToContext as l}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as u}from"../../composables/use-controllable-state.js";import"../../composables/index.js";import{useDirection as d}from"../config-provider/context.js";import f from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import p from"../slider/slider-root.js";import"../slider/index.js";import{provideColorSliderRootContext as m,useColorSliderUi as h}from"./context.js";import{computed as g,createBlock as _,createCommentVNode as v,defineComponent as y,normalizeClass as b,openBlock as x,renderSlot as S,shallowRef as C,unref as w,watch as T,withCtx as E}from"vue";const D=y({name:`ColorSliderRoot`,__name:`color-slider-root`,props:{modelValue:{default:void 0},defaultValue:{default:`#000000`},colorSpace:{default:`hsl`},channel:{},format:{default:`hex`},orientation:{default:`horizontal`},dir:{},inverted:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},step:{default:void 0},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:color`,`change`,`changeEnd`],setup(y,{emit:D}){let O=y,k=D,A=h(`root`),j=u(()=>O.modelValue,e=>{k(`update:modelValue`,typeof e==`string`?e:t(e,O.format))},O.defaultValue),M=d(()=>O.dir),N=g(()=>n(O.channel,O.colorSpace)),P=C(),F=C(O.modelValue??O.defaultValue),I=C(H(F.value)),L=g(()=>r(O.channel)),R=g(()=>O.step??L.value.step),z=g(()=>i(I.value,O.channel,O.colorSpace)),B=g({get:()=>I.value,set:e=>{let n=s(e,N.value),r=t(e,O.format);I.value=n,F.value=e,P.value=r,j.value=r,k(`update:color`,n)}}),V=g({get:()=>[c(z.value,L.value.min,L.value.max,R.value)],set:e=>{let n=o(B.value,O.channel,e[0]??L.value.min,O.colorSpace),r=t(n,O.format);B.value=n,k(`change`,r)}});function H(e){return s(e,N.value)}function U(){let t=H(F.value);if(!e(t,I.value)){if(O.channel===`hue`&&!a(t,O.colorSpace)){I.value=o(t,O.channel,z.value,O.colorSpace);return}I.value=t}}function W(){k(`changeEnd`,t(B.value,O.format))}return T(()=>O.modelValue,e=>{e!=null&&(typeof e==`string`&&e===P.value||(F.value=e,U()))},{immediate:!0}),T(()=>[O.channel,O.colorSpace,O.format],U,{immediate:!0}),m({color:B,channelValue:z,range:L,...l(O,[`channel`,`colorSpace`,`format`,`orientation`,`disabled`,`inverted`])}),(e,n)=>(x(),_(w(p),{modelValue:V.value,"onUpdate:modelValue":n[0]||(n[0]=e=>V.value=e),as:y.as,"as-child":y.asChild,class:b(w(A)),orientation:y.orientation,dir:w(M),disabled:y.disabled,inverted:y.inverted,min:L.value.min,max:L.value.max,step:R.value,onValueCommit:W},{default:E(()=>[S(e.$slots,`default`),y.name?(x(),_(w(f),{key:0,type:`text`,value:w(t)(B.value,y.format),name:y.name,disabled:y.disabled,required:y.required},null,8,[`value`,`name`,`disabled`,`required`])):v(`v-if`,!0)]),_:3},8,[`modelValue`,`as`,`as-child`,`class`,`orientation`,`dir`,`disabled`,`inverted`,`min`,`max`,`step`]))}});export{D as default};
+import{areColorsEqual as e,formatColor as t,getChannelObjectSpace as n,getChannelRange as r,getChannelValue as i,hasVisibleChromaticity as a,setChannelValue as o,toColorObject as s}from"../../shared/color.js";import{snapValueToStep as c}from"../../shared/value.js";import{transformPropsToContext as l}from"../../shared/vue.js";import{useDirection as u}from"../config-provider/context.js";import"../../shared/index.js";import{useControllableState as d}from"../../composables/use-controllable-state.js";import"../../composables/index.js";import f from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import p from"../slider/slider-root.js";import"../slider/index.js";import{provideColorSliderRootContext as m,useColorSliderUi as h}from"./context.js";import{computed as g,createBlock as _,createCommentVNode as v,defineComponent as y,normalizeClass as b,openBlock as x,renderSlot as S,shallowRef as C,unref as w,watch as T,withCtx as E}from"vue";const D=y({name:`ColorSliderRoot`,__name:`color-slider-root`,props:{modelValue:{default:void 0},defaultValue:{default:`#000000`},colorSpace:{default:`hsl`},channel:{},format:{default:`hex`},orientation:{default:`horizontal`},dir:{},inverted:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},step:{default:void 0},name:{},required:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:color`,`change`,`changeEnd`],setup(y,{emit:D}){let O=y,k=D,A=h(`root`),j=d(()=>O.modelValue,e=>{k(`update:modelValue`,typeof e==`string`?e:t(e,O.format))},O.defaultValue),M=u(()=>O.dir),N=g(()=>n(O.channel,O.colorSpace)),P=C(),F=C(O.modelValue??O.defaultValue),I=C(H(F.value)),L=g(()=>r(O.channel)),R=g(()=>O.step??L.value.step),z=g(()=>i(I.value,O.channel,O.colorSpace)),B=g({get:()=>I.value,set:e=>{let n=s(e,N.value),r=t(e,O.format);I.value=n,F.value=e,P.value=r,j.value=r,k(`update:color`,n)}}),V=g({get:()=>[c(z.value,L.value.min,L.value.max,R.value)],set:e=>{let n=o(B.value,O.channel,e[0]??L.value.min,O.colorSpace),r=t(n,O.format);B.value=n,k(`change`,r)}});function H(e){return s(e,N.value)}function U(){let t=H(F.value);if(!e(t,I.value)){if(O.channel===`hue`&&!a(t,O.colorSpace)){I.value=o(t,O.channel,z.value,O.colorSpace);return}I.value=t}}function W(){k(`changeEnd`,t(B.value,O.format))}return T(()=>O.modelValue,e=>{e!=null&&(typeof e==`string`&&e===P.value||(F.value=e,U()))},{immediate:!0}),T(()=>[O.channel,O.colorSpace,O.format],U,{immediate:!0}),m({color:B,channelValue:z,range:L,...l(O,[`channel`,`colorSpace`,`format`,`orientation`,`disabled`,`inverted`])}),(e,n)=>(x(),_(w(p),{modelValue:V.value,"onUpdate:modelValue":n[0]||(n[0]=e=>V.value=e),as:y.as,"as-child":y.asChild,"data-soybean-color-slider-root":``,class:b(w(A)),orientation:y.orientation,dir:w(M),disabled:y.disabled,inverted:y.inverted,min:L.value.min,max:L.value.max,step:R.value,onValueCommit:W},{default:E(()=>[S(e.$slots,`default`),y.name?(x(),_(w(f),{key:0,type:`text`,value:w(t)(B.value,y.format),name:y.name,disabled:y.disabled,required:y.required},null,8,[`value`,`name`,`disabled`,`required`])):v(`v-if`,!0)]),_:3},8,[`modelValue`,`as`,`as-child`,`class`,`orientation`,`dir`,`disabled`,`inverted`,`min`,`max`,`step`]))}});export{D as default};

package/dist/components/color-slider/color-slider-root.vue.d.ts

@@ -1,5 +1,5 @@
+import { ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "../../types/color.js";
 import { DataOrientation } from "../../types/common.js";
-import { ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "../../shared/color.js";
 import { ColorSliderRootProps } from "./types.js";
 import * as _$vue from "vue";
 
@@ -9,13 +9,13 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ColorSliderRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  change: (value: string) => any;
   "update:modelValue": (value: string) => any;
+  change: (value: string) => any;
   "update:color": (value: NormalizedColor) => any;
   changeEnd: (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<ColorSliderRootProps> & Readonly<{
-  onChange?: ((value: string) => any) | undefined;
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onChange?: ((value: string) => any) | undefined;
   "onUpdate:color"?: ((value: NormalizedColor) => any) | undefined;
   onChangeEnd?: ((value: string) => any) | undefined;
 }>, {
@@ -23,10 +23,10 @@ declare const __VLS_base: _$vue.DefineComponent<ColorSliderRootProps, {}, {}, {}
   format: ColorFormat;
   orientation: DataOrientation;
   step: number;
-  colorSpace: ColorSpace;
-  inverted: boolean;
   modelValue: string | ColorValue;
   defaultValue: string | ColorValue;
+  colorSpace: ColorSpace;
+  inverted: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/color-slider/color-slider-thumb.js

@@ -1 +1 @@
-import{formatChannelValue as e,getChannelName as t}from"../../shared/color.js";import"../../shared/index.js";import n from"../slider/slider-thumb.js";import"../slider/index.js";import{useColorSliderRootContext as r,useColorSliderUi as i}from"./context.js";import{computed as a,createBlock as o,defineComponent as s,normalizeClass as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=s({name:`ColorSliderThumb`,__name:`color-slider-thumb`,props:{asChild:{type:Boolean},as:{}},setup(s){let p=i(`thumb`),{channel:m,channelValue:h}=r(`ColorSliderThumb`),g=a(()=>t(m.value)),_=a(()=>e(m.value,h.value));return(e,t)=>(l(),o(d(n),{as:s.as,"as-child":s.asChild,class:c(d(p)),index:0,"aria-label":g.value,"aria-valuetext":_.value},{default:f(()=>[u(e.$slots,`default`,{channelName:g.value,channelValue:d(h)})]),_:3},8,[`as`,`as-child`,`class`,`aria-label`,`aria-valuetext`]))}});export{p as default};
+import{formatChannelValue as e,getChannelName as t}from"../../shared/color.js";import"../../shared/index.js";import n from"../slider/slider-thumb.js";import"../slider/index.js";import{useColorSliderRootContext as r,useColorSliderUi as i}from"./context.js";import{computed as a,createBlock as o,defineComponent as s,normalizeClass as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=s({name:`ColorSliderThumb`,__name:`color-slider-thumb`,props:{asChild:{type:Boolean},as:{}},setup(s){let p=i(`thumb`),{channel:m,channelValue:h}=r(`ColorSliderThumb`),g=a(()=>t(m.value)),_=a(()=>e(m.value,h.value));return(e,t)=>(l(),o(d(n),{as:s.as,"as-child":s.asChild,"data-soybean-color-slider-thumb":``,class:c(d(p)),index:0,"aria-label":g.value,"aria-valuetext":_.value},{default:f(()=>[u(e.$slots,`default`,{channelName:g.value,channelValue:d(h)})]),_:3},8,[`as`,`as-child`,`class`,`aria-label`,`aria-valuetext`]))}});export{p as default};

package/dist/components/color-slider/color-slider-track.js

@@ -1 +1 @@
-import{getSliderBackgroundStyle as e}from"../../shared/color.js";import"../../shared/index.js";import t from"../slider/slider-track.js";import"../slider/index.js";import{useColorSliderRootContext as n,useColorSliderUi as r}from"./context.js";import{computed as i,createBlock as a,defineComponent as o,normalizeClass as s,normalizeStyle as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=o({name:`ColorSliderTrack`,__name:`color-slider-track`,props:{asChild:{type:Boolean},as:{}},setup(o){let p=r(`track`),{color:m,channel:h,colorSpace:g}=n(`ColorSliderTrack`),_=i(()=>e(m.value,h.value,g.value));return(e,n)=>(l(),a(d(t),{as:o.as,"as-child":o.asChild,class:s(d(p)),style:c(_.value)},{default:f(()=>[u(e.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`style`]))}});export{p as default};
+import{getSliderBackgroundStyle as e}from"../../shared/color.js";import"../../shared/index.js";import t from"../slider/slider-track.js";import"../slider/index.js";import{useColorSliderRootContext as n,useColorSliderUi as r}from"./context.js";import{computed as i,createBlock as a,defineComponent as o,normalizeClass as s,normalizeStyle as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=o({name:`ColorSliderTrack`,__name:`color-slider-track`,props:{asChild:{type:Boolean},as:{}},setup(o){let p=r(`track`),{color:m,channel:h,colorSpace:g}=n(`ColorSliderTrack`),_=i(()=>e(m.value,h.value,g.value));return(e,n)=>(l(),a(d(t),{as:o.as,"as-child":o.asChild,"data-soybean-color-slider-track":``,class:s(d(p)),style:c(_.value)},{default:f(()=>[u(e.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`style`]))}});export{p as default};

package/dist/components/color-slider/index.d.ts

@@ -1,6 +1,7 @@
-import { ColorSliderRootEmits, ColorSliderRootProps, ColorSliderThumbProps, ColorSliderTrackProps, ColorSliderUi, ColorSliderUiSlot } from "./types.js";
-import { _default } from "./color-slider-root.vue.js";
-import { _default as _default$2 } from "./color-slider-track.vue.js";
-import { _default as _default$1 } from "./color-slider-thumb.vue.js";
+import { ColorSliderCompactEmits, ColorSliderCompactProps, ColorSliderRootEmits, ColorSliderRootProps, ColorSliderThumbProps, ColorSliderTrackProps, ColorSliderUi, ColorSliderUiSlot } from "./types.js";
+import { _default } from "./color-slider-compact.vue.js";
+import { _default as _default$1 } from "./color-slider-root.vue.js";
+import { _default as _default$3 } from "./color-slider-track.vue.js";
+import { _default as _default$2 } from "./color-slider-thumb.vue.js";
 import { provideColorSliderUi } from "./context.js";
-export { _default as ColorSliderRoot, type ColorSliderRootEmits, type ColorSliderRootProps, _default$1 as ColorSliderThumb, type ColorSliderThumbProps, _default$2 as ColorSliderTrack, type ColorSliderTrackProps, type ColorSliderUi, type ColorSliderUiSlot, provideColorSliderUi };
+export { _default as ColorSliderCompact, type ColorSliderCompactEmits, type ColorSliderCompactProps, _default$1 as ColorSliderRoot, type ColorSliderRootEmits, type ColorSliderRootProps, _default$2 as ColorSliderThumb, type ColorSliderThumbProps, _default$3 as ColorSliderTrack, type ColorSliderTrackProps, type ColorSliderUi, type ColorSliderUiSlot, provideColorSliderUi };

package/dist/components/color-slider/index.js

@@ -1 +1 @@
-import{provideColorSliderUi as e}from"./context.js";import t from"./color-slider-root.js";import n from"./color-slider-track.js";import r from"./color-slider-thumb.js";export{t as ColorSliderRoot,r as ColorSliderThumb,n as ColorSliderTrack,e as provideColorSliderUi};
+import{provideColorSliderUi as e}from"./context.js";import t from"./color-slider-root.js";import n from"./color-slider-thumb.js";import r from"./color-slider-track.js";import i from"./color-slider-compact.js";export{i as ColorSliderCompact,t as ColorSliderRoot,n as ColorSliderThumb,r as ColorSliderTrack,e as provideColorSliderUi};