@soybeanjs/headless 0.18.0 → 0.19.0

package/dist/components/checkbox/checkbox-card-compact.js

@@ -1 +1 @@
-import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"../_icon/icon.js";import{useCheckboxCardUi as n}from"./context.js";import r from"./checkbox-root.js";import i from"./checkbox-control.js";import a from"./checkbox-indicator.js";import o from"./checkbox-label.js";import{computed as s,createBlock as c,createCommentVNode as l,createElementBlock as u,createElementVNode as d,createTextVNode as f,createVNode as p,defineComponent as m,guardReactiveProps as h,mergeProps as g,normalizeClass as _,normalizeProps as v,openBlock as y,renderSlot as b,toDisplayString as x,unref as S,useId as C,useSlots as w,withCtx as T}from"vue";const E=m({name:`CheckboxCardCompact`,__name:`checkbox-card-compact`,props:{icon:{},description:{},label:{},controlProps:{},indicatorProps:{},labelProps:{},id:{},modelValue:{type:[Boolean,String,null],default:void 0},defaultValue:{type:[Boolean,String]},value:{},disabled:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(m,{emit:E}){let D=m,O=E,k=w(),A=e(D,[`label`,`icon`,`description`,`controlProps`,`indicatorProps`,`labelProps`]),j=n(),M=C(),N=s(()=>D.id||`checkbox-${M}`),P=s(()=>D.modelValue===`indeterminate`);return(e,n)=>(y(),c(r,g(S(A),{"onUpdate:modelValue":n[0]||(n[0]=e=>O(`update:modelValue`,e))}),{default:T(()=>[d(`div`,{class:_(S(j).content)},[p(t,{icon:m.icon,class:_(S(j).icon)},null,8,[`icon`,`class`]),d(`div`,{class:_(S(j).textContent)},[p(o,g(m.labelProps,{for:N.value}),{default:T(()=>[b(e.$slots,`default`,{id:N.value},()=>[f(x(m.label),1)])]),_:3},16,[`for`]),S(k).description||m.description?(y(),u(`p`,{key:0,class:_(S(j).description)},[b(e.$slots,`description`,{},()=>[f(x(m.description),1)])],2)):l(`v-if`,!0)],2)],2),p(i,g(m.controlProps,{id:N.value,class:`checkbox-control`}),{default:T(()=>[p(a,v(h(m.indicatorProps)),{default:T(n=>[b(e.$slots,`indicator`,v(h(n)),()=>[p(t,{icon:P.value?`lucide:minus`:`lucide:check`,class:_(S(j)[`indicator-icon`])},null,8,[`icon`,`class`])])]),_:3},16)]),_:3},16,[`id`])]),_:3},16))}});export{E as default};
+import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"../_icon/icon.js";import{useCheckboxCardUi as n}from"./context.js";import r from"./checkbox-root.js";import i from"./checkbox-control.js";import a from"./checkbox-indicator.js";import o from"./checkbox-label.js";import{computed as s,createBlock as c,createCommentVNode as l,createElementBlock as u,createElementVNode as d,createTextVNode as f,createVNode as p,defineComponent as m,guardReactiveProps as h,mergeProps as g,normalizeClass as _,normalizeProps as v,openBlock as y,renderSlot as b,toDisplayString as x,unref as S,useId as C,useSlots as w,withCtx as T}from"vue";const E=m({name:`CheckboxCardCompact`,__name:`checkbox-card-compact`,props:{icon:{},description:{},label:{},controlProps:{},indicatorProps:{},labelProps:{},id:{},modelValue:{type:[Boolean,String,null],default:void 0},defaultValue:{type:[Boolean,String]},value:{},disabled:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(m,{emit:E}){let D=m,O=E,k=w(),A=e(D,[`label`,`icon`,`description`,`controlProps`,`indicatorProps`,`labelProps`]),j=n(),M=C(),N=s(()=>D.id||`checkbox-${M}`),P=s(()=>D.modelValue===`indeterminate`);return(e,n)=>(y(),c(r,g(S(A),{"onUpdate:modelValue":n[0]||(n[0]=e=>O(`update:modelValue`,e))}),{default:T(()=>[d(`div`,{class:_(S(j).content)},[p(t,{icon:m.icon,class:_(S(j).icon)},null,8,[`icon`,`class`]),d(`div`,{class:_(S(j).textContent)},[p(o,g(m.labelProps,{for:N.value}),{default:T(()=>[b(e.$slots,`default`,{id:N.value},()=>[f(x(m.label),1)])]),_:3},16,[`for`]),S(k).description||m.description?(y(),u(`p`,{key:0,class:_(S(j).description)},[b(e.$slots,`description`,{},()=>[f(x(m.description),1)])],2)):l(`v-if`,!0)],2)],2),p(i,g(m.controlProps,{id:N.value}),{default:T(()=>[p(a,v(h(m.indicatorProps)),{default:T(n=>[b(e.$slots,`indicator`,v(h(n)),()=>[p(t,{icon:P.value?`lucide:minus`:`lucide:check`,class:_(S(j)[`indicator-icon`])},null,8,[`icon`,`class`])])]),_:3},16)]),_:3},16,[`id`])]),_:3},16))}});export{E as default};

package/dist/components/checkbox/checkbox-card-group-compact.js

@@ -1 +1 @@
-import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"./checkbox-card-compact.js";import n from"./checkbox-group-root.js";import{Fragment as r,createBlock as i,createElementBlock as a,defineComponent as o,mergeProps as s,openBlock as c,renderList as l,unref as u,withCtx as d}from"vue";const f=o({name:`CheckboxCardGroupCompact`,__name:`checkbox-card-group-compact`,props:{items:{},rootProps:{},controlProps:{},indicatorProps:{},labelProps:{},modelValue:{},defaultValue:{},rovingFocus:{type:Boolean},disabled:{type:Boolean},orientation:{},dir:{},loop:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(o,{emit:f}){let p=o,m=f,h=e(p,[`items`,`rootProps`,`controlProps`,`indicatorProps`,`labelProps`]);return(e,f)=>(c(),i(n,s(u(h),{"onUpdate:modelValue":f[0]||(f[0]=e=>m(`update:modelValue`,e))}),{default:d(()=>[(c(!0),a(r,null,l(o.items,e=>(c(),i(t,{key:e.value,label:e.label,icon:e.icon,description:e.description,value:e.value,disabled:o.disabled||e.disabled,"control-props":o.controlProps,"indicator-props":o.indicatorProps,"label-props":o.labelProps},null,8,[`label`,`icon`,`description`,`value`,`disabled`,`control-props`,`indicator-props`,`label-props`]))),128))]),_:1},16))}});export{f as default};
+import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"./checkbox-card-compact.js";import n from"./checkbox-group-root.js";import{Fragment as r,createBlock as i,createElementBlock as a,defineComponent as o,mergeProps as s,openBlock as c,renderList as l,unref as u,withCtx as d}from"vue";const f=o({name:`CheckboxCardGroupCompact`,__name:`checkbox-card-group-compact`,props:{items:{},rootProps:{},controlProps:{},indicatorProps:{},labelProps:{},modelValue:{},defaultValue:{},rovingFocus:{type:Boolean,default:!0},disabled:{type:Boolean},orientation:{},dir:{},loop:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(o,{emit:f}){let p=o,m=f,h=e(p,[`items`,`rootProps`,`controlProps`,`indicatorProps`,`labelProps`]);return(e,f)=>(c(),i(n,s(u(h),{"onUpdate:modelValue":f[0]||(f[0]=e=>m(`update:modelValue`,e))}),{default:d(()=>[(c(!0),a(r,null,l(o.items,e=>(c(),i(t,{key:e.value,label:e.label,icon:e.icon,description:e.description,value:e.value,disabled:o.disabled||e.disabled,"control-props":o.controlProps,"indicator-props":o.indicatorProps,"label-props":o.labelProps},null,8,[`label`,`icon`,`description`,`value`,`disabled`,`control-props`,`indicator-props`,`label-props`]))),128))]),_:1},16))}});export{f as default};

package/dist/components/checkbox/checkbox-compact.vue.d.ts

@@ -4,11 +4,11 @@ import * as _$vue from "vue";
 
 //#region src/components/checkbox/checkbox-compact.vue.d.ts
 declare var __VLS_22: {
-    modelValue: CheckedState | null | undefined;
+    modelValue: CheckedState | null;
     state: CheckedState;
   }, __VLS_35: {
     id: string;
-    modelValue: CheckedState | null | undefined;
+    modelValue: CheckedState | null;
     state: CheckedState;
   };
 type __VLS_Slots = {} & {

package/dist/components/checkbox/checkbox-control.js

@@ -1 +1 @@
-import{isNullish as e}from"../../shared/guard.js";import{isValueEqualOrExist as t}from"../../shared/comparison.js";import{isIndeterminate as n}from"../../shared/value.js";import{getAriaLabel as r}from"../../shared/dom.js";import"../../shared/index.js";import{useForwardElement as i}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{useCheckboxGroupRootContext as a,useCheckboxRootContext as o,useCheckboxUi as s}from"./context.js";import c from"../roving-focus/roving-focus-item.js";import"../roving-focus/index.js";import{computed as l,createBlock as u,defineComponent as d,normalizeClass as f,openBlock as p,renderSlot as m,resolveDynamicComponent as h,unref as g,useAttrs as _,watchEffect as v,withCtx as y,withKeys as b,withModifiers as x}from"vue";const S=d({name:`CheckboxControl`,__name:`checkbox-control`,props:{id:{}},setup(d){let S=d,C=_(),w=s(`control`),T=a(),{modelValue:E,value:D,disabled:O,state:k,ariaChecked:A,dataDisabled:j,dataState:M,required:N,initControlId:P}=o(`CheckboxControl`),[F,I]=i(),L=l(()=>T?.rovingFocus?.value),R=l(()=>r(F.value,S.id,C[`aria-label`])),z=l(()=>L.value?!O.value:void 0),B=()=>{if(T){let n=[...T.modelValue.value||[]];if(t(n,D.value)){let e=n.findIndex(e=>e===D.value);n.splice(e,1)}else e(D.value)||n.push(D.value);T.modelValue.value=n}else E.value=n(E.value)?!0:!E.value};return v(()=>{S.id&&P(S.id)}),(e,t)=>(p(),u(h(L.value?g(c):`button`),{id:d.id,ref:g(I),class:f(g(w)),as:`button`,role:`checkbox`,type:`button`,disabled:g(O),"aria-checked":g(A),"data-disabled":g(j),"aria-label":R.value,"aria-required":g(N),"data-state":g(M),focusable:z.value,onClick:B,onKeydown:b(x(B,[`prevent`]),[`enter`])},{default:y(()=>[m(e.$slots,`default`,{modelValue:g(E),state:g(k)})]),_:3},40,[`id`,`class`,`disabled`,`aria-checked`,`data-disabled`,`aria-label`,`aria-required`,`data-state`,`focusable`,`onKeydown`]))}});export{S as default};
+import{isNullish as e}from"../../shared/guard.js";import{isValueEqualOrExist as t}from"../../shared/comparison.js";import{isIndeterminate as n}from"../../shared/value.js";import{getAriaLabel as r}from"../../shared/dom.js";import"../../shared/index.js";import{useForwardElement as i}from"../../composables/use-forward-element.js";import"../../composables/index.js";import a from"../button/button.js";import{useCheckboxGroupRootContext as o,useCheckboxRootContext as s,useCheckboxUi as c}from"./context.js";import l from"../roving-focus/roving-focus-item.js";import"../roving-focus/index.js";import{computed as u,createBlock as d,defineComponent as f,mergeProps as p,openBlock as m,renderSlot as h,resolveDynamicComponent as g,unref as _,useAttrs as v,watchEffect as y,withCtx as b,withKeys as x,withModifiers as S}from"vue";const C=f({name:`CheckboxControl`,__name:`checkbox-control`,props:{id:{},type:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(f){let C=f,w=v(),T=c(`control`),E=o(),{modelValue:D,value:O,disabled:k,state:A,ariaChecked:j,dataState:M,required:N,initControlId:P}=s(`CheckboxControl`),[F,I]=i(),L=u(()=>E?.rovingFocus?.value),R=u(()=>r(F.value,C.id,w[`aria-label`])),z=u(()=>L.value?!k.value:void 0),B=()=>{if(E){let n=[...E.modelValue.value||[]];if(t(n,O.value)){let e=n.findIndex(e=>e===O.value);n.splice(e,1)}else e(O.value)||n.push(O.value);E.modelValue.value=n}else D.value=n(D.value)?!0:!D.value};return y(()=>{C.id&&P(C.id)}),(e,t)=>(m(),d(g(L.value?_(l):a),p({ref:_(I)},C,{as:L.value?a:C.as,"data-soybean-checkbox-control":``,class:_(T),focusable:z.value,role:`checkbox`,disabled:_(k),"aria-checked":_(j),"aria-label":R.value,"aria-required":_(N),"data-state":_(M),onClick:B,onKeydown:x(S(B,[`prevent`]),[`enter`])}),{default:b(()=>[h(e.$slots,`default`,{modelValue:_(D),state:_(A)})]),_:3},16,[`as`,`class`,`focusable`,`disabled`,`aria-checked`,`aria-label`,`aria-required`,`data-state`,`onKeydown`]))}});export{C as default};

package/dist/components/checkbox/checkbox-group-compact.js

@@ -1 +1 @@
-import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"./checkbox-compact.js";import n from"./checkbox-group-root.js";import{Fragment as r,createBlock as i,createElementBlock as a,defineComponent as o,mergeProps as s,openBlock as c,renderList as l,unref as u,withCtx as d}from"vue";const f=o({name:`CheckboxGroupCompact`,__name:`checkbox-group-compact`,props:{items:{},rootProps:{},controlProps:{},indicatorProps:{},labelProps:{},modelValue:{},defaultValue:{},rovingFocus:{type:Boolean},disabled:{type:Boolean},orientation:{},dir:{},loop:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(o,{emit:f}){let p=o,m=f,h=e(p,[`items`,`rootProps`,`controlProps`,`indicatorProps`,`labelProps`]);return(e,f)=>(c(),i(n,s(u(h),{"onUpdate:modelValue":f[0]||(f[0]=e=>m(`update:modelValue`,e))}),{default:d(()=>[(c(!0),a(r,null,l(o.items,e=>(c(),i(t,s({ref_for:!0},o.rootProps,{key:e.value,value:e.value,label:e.label,disabled:o.disabled||e.disabled,"control-props":o.controlProps,"indicator-props":o.indicatorProps,"label-props":o.labelProps}),null,16,[`value`,`label`,`disabled`,`control-props`,`indicator-props`,`label-props`]))),128))]),_:1},16))}});export{f as default};
+import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"./checkbox-compact.js";import n from"./checkbox-group-root.js";import{Fragment as r,createBlock as i,createElementBlock as a,defineComponent as o,mergeProps as s,openBlock as c,renderList as l,unref as u,withCtx as d}from"vue";const f=o({name:`CheckboxGroupCompact`,__name:`checkbox-group-compact`,props:{items:{},rootProps:{},controlProps:{},indicatorProps:{},labelProps:{},modelValue:{},defaultValue:{},rovingFocus:{type:Boolean,default:!0},disabled:{type:Boolean},orientation:{},dir:{},loop:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(o,{emit:f}){let p=o,m=f,h=e(p,[`items`,`rootProps`,`controlProps`,`indicatorProps`,`labelProps`]);return(e,f)=>(c(),i(n,s(u(h),{"onUpdate:modelValue":f[0]||(f[0]=e=>m(`update:modelValue`,e))}),{default:d(()=>[(c(!0),a(r,null,l(o.items,e=>(c(),i(t,s({ref_for:!0},o.rootProps,{key:e.value,value:e.value,label:e.label,disabled:o.disabled||e.disabled,"control-props":o.controlProps,"indicator-props":o.indicatorProps,"label-props":o.labelProps}),null,16,[`value`,`label`,`disabled`,`control-props`,`indicator-props`,`label-props`]))),128))]),_:1},16))}});export{f as default};

package/dist/components/checkbox/checkbox-group-root.js

@@ -1 +1 @@
-import{isFormControl as e,transformPropsToContext as t}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as n}from"../../composables/use-controllable-state.js";import{useForwardElement as r}from"../../composables/use-forward-element.js";import"../../composables/index.js";import i from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import{provideCheckboxGroupRootContext as a,useCheckboxUi as o}from"./context.js";import s from"../roving-focus/roving-focus-group.js";import"../roving-focus/index.js";import{computed as c,createBlock as l,createCommentVNode as u,defineComponent as d,mergeProps as f,openBlock as p,renderSlot as m,resolveDynamicComponent as h,unref as g,withCtx as _}from"vue";const v=d({name:`CheckboxGroupRoot`,__name:`checkbox-group-root`,props:{modelValue:{default:void 0},defaultValue:{},rovingFocus:{type:Boolean,default:!0},disabled:{type:Boolean},orientation:{},dir:{},loop:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(d,{emit:v}){let y=d,b=v,x=o(`groupRoot`),S=c(()=>{let{rovingFocus:e,loop:t,dir:n,orientation:r}=y;return e?{loop:t,dir:n,orientation:r}:{}}),C=n(()=>y.modelValue,e=>{b(`update:modelValue`,e??[])},y.defaultValue);a({...t(y,[`modelValue`,`defaultValue`,`rovingFocus`,`disabled`]),modelValue:C});let[w,T]=r(),E=c(()=>e(w.value));return(e,t)=>(p(),l(h(d.rovingFocus?g(s):`div`),f(S.value,{ref:g(T),class:g(x),as:`div`}),{default:_(()=>[m(e.$slots,`default`),E.value&&d.name?(p(),l(g(i),{key:0,name:d.name,value:g(C),required:d.required},null,8,[`name`,`value`,`required`])):u(`v-if`,!0)]),_:3},16,[`class`]))}});export{v as default};
+import{isFormControl as e,transformPropsToContext as t}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as n}from"../../composables/use-controllable-state.js";import{useForwardElement as r}from"../../composables/use-forward-element.js";import"../../composables/index.js";import i from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import{provideCheckboxGroupRootContext as a,useCheckboxUi as o}from"./context.js";import s from"../roving-focus/roving-focus-group.js";import"../roving-focus/index.js";import{computed as c,createBlock as l,createCommentVNode as u,defineComponent as d,mergeProps as f,openBlock as p,renderSlot as m,resolveDynamicComponent as h,unref as g,withCtx as _}from"vue";const v=d({name:`CheckboxGroupRoot`,__name:`checkbox-group-root`,props:{modelValue:{default:void 0},defaultValue:{},rovingFocus:{type:Boolean,default:!0},disabled:{type:Boolean},orientation:{},dir:{},loop:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(d,{emit:v}){let y=d,b=v,x=o(`groupRoot`),S=c(()=>{let{rovingFocus:e,loop:t,dir:n,orientation:r}=y;return e?{loop:t,dir:n,orientation:r}:{}}),C=n(()=>y.modelValue,e=>{b(`update:modelValue`,e)},y.defaultValue??[]);a({...t(y,[`modelValue`,`defaultValue`,`rovingFocus`,`disabled`]),modelValue:C});let[w,T]=r(),E=c(()=>e(w.value));return(e,t)=>(p(),l(h(d.rovingFocus?g(s):`div`),f(S.value,{ref:g(T),"data-soybean-checkbox-group-root":``,class:g(x),as:`div`}),{default:_(()=>[m(e.$slots,`default`),E.value&&d.name?(p(),l(g(i),{key:0,name:d.name,value:g(C),required:d.required},null,8,[`name`,`value`,`required`])):u(`v-if`,!0)]),_:3},16,[`class`]))}});export{v as default};

package/dist/components/checkbox/checkbox-indicator.js

@@ -1 +1 @@
-import{isIndeterminate as e}from"../../shared/value.js";import"../../shared/index.js";import{useForwardElement as t}from"../../composables/use-forward-element.js";import{usePresence as n}from"../../composables/use-presence.js";import"../../composables/index.js";import{Primitive as r}from"../primitive/primitive.js";import"../primitive/index.js";import{useCheckboxRootContext as i,useCheckboxUi as a}from"./context.js";import{createBlock as o,createCommentVNode as s,defineComponent as c,normalizeClass as l,openBlock as u,renderSlot as d,shallowRef as f,unref as p,withCtx as m}from"vue";const h=c({name:`CheckboxIndicator`,__name:`checkbox-indicator`,props:{asChild:{type:Boolean},as:{default:`span`},forceMount:{type:Boolean}},setup(c){let h=c,g=a(`indicator`),[_,v]=t(),{state:y,dataDisabled:b,dataState:x}=i(`CheckboxIndicator`),S=h.forceMount?f(!0):n(_,()=>e(y.value)||y.value===!0);return(e,t)=>p(S)?(u(),o(p(r),{key:0,ref:p(v),as:c.as,"as-child":c.asChild,class:l(p(g)),"data-disabled":p(b),"data-state":p(x),style:{"pointer-events":`none`}},{default:m(()=>[d(e.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-state`])):s(`v-if`,!0)}});export{h as default};
+import{isIndeterminate as e}from"../../shared/value.js";import"../../shared/index.js";import{useForwardElement as t}from"../../composables/use-forward-element.js";import{usePresence as n}from"../../composables/use-presence.js";import"../../composables/index.js";import{Primitive as r}from"../primitive/primitive.js";import"../primitive/index.js";import{useCheckboxRootContext as i,useCheckboxUi as a}from"./context.js";import{createBlock as o,createCommentVNode as s,defineComponent as c,normalizeClass as l,openBlock as u,renderSlot as d,shallowRef as f,unref as p,withCtx as m}from"vue";const h=c({name:`CheckboxIndicator`,__name:`checkbox-indicator`,props:{forceMount:{type:Boolean},asChild:{type:Boolean},as:{default:`span`}},setup(c){let h=c,g=a(`indicator`),[_,v]=t(),{state:y,dataDisabled:b,dataState:x}=i(`CheckboxIndicator`),S=h.forceMount?f(!0):n(_,()=>e(y.value)||y.value===!0);return(e,t)=>p(S)?(u(),o(p(r),{key:0,ref:p(v),as:c.as,"as-child":c.asChild,"data-soybean-checkbox-indicator":``,class:l(p(g)),"data-disabled":p(b),"data-state":p(x),style:{"pointer-events":`none`}},{default:m(()=>[d(e.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-state`])):s(`v-if`,!0)}});export{h as default};

package/dist/components/checkbox/checkbox-label.js

@@ -1 +1 @@
-import{useCheckboxRootContext as e,useCheckboxUi as t}from"./context.js";import n from"../label/label.js";import"../label/index.js";import{computed as r,createBlock as i,defineComponent as a,normalizeClass as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=a({name:`CheckboxLabel`,__name:`checkbox-label`,props:{for:{}},setup(a){let d=a,f=t(`label`),{controlId:p}=e(`CheckboxLabel`),m=r(()=>d.for||p.value);return(e,t)=>(s(),i(l(n),{for:m.value,class:o(l(f))},{default:u(()=>[c(e.$slots,`default`)]),_:3},8,[`for`,`class`]))}});export{d as default};
+import{useCheckboxRootContext as e,useCheckboxUi as t}from"./context.js";import n from"../label/label.js";import"../label/index.js";import{computed as r,createBlock as i,defineComponent as a,normalizeClass as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=a({name:`CheckboxLabel`,__name:`checkbox-label`,props:{for:{}},setup(a){let d=a,f=t(`label`),{controlId:p}=e(`CheckboxLabel`),m=r(()=>d.for||p.value);return(e,t)=>(s(),i(l(n),{"data-soybean-checkbox-label":``,for:m.value,class:o(l(f))},{default:u(()=>[c(e.$slots,`default`)]),_:3},8,[`for`,`class`]))}});export{d as default};

package/dist/components/checkbox/checkbox-root.js

@@ -1 +1 @@
-import{isNullish as e}from"../../shared/guard.js";import{isValueEqualOrExist as t}from"../../shared/comparison.js";import{isFormControl as n,transformPropsToContext as r}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as i}from"../../composables/use-controllable-state.js";import"../../composables/index.js";import a from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import{provideCheckboxRootContext as o,useCheckboxGroupRootContext as s,useCheckboxUi as c}from"./context.js";import{computed as l,createBlock as u,createCommentVNode as d,createElementBlock as f,defineComponent as p,normalizeClass as m,openBlock as h,renderSlot as g,unref as _,useTemplateRef as v}from"vue";const y=[`data-state`],b=p({name:`CheckboxRoot`,__name:`checkbox-root`,props:{id:{},modelValue:{type:[Boolean,String,null],default:void 0},defaultValue:{type:[Boolean,String]},value:{default:`on`},disabled:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(p,{emit:b}){let x=p,S=b,C=c(`root`),w=v(`rootElement`),T=s(),E=i(()=>x.modelValue,e=>{e!==void 0&&S(`update:modelValue`,e)},x.defaultValue),D=l(()=>n(w.value)),O=l(()=>T?.disabled?.value||x.disabled),k=l(()=>e(T?.modelValue?.value)?e(E.value)?!1:E.value===`indeterminate`?`indeterminate`:E.value:t(T?.modelValue.value,x.value)),{dataState:A}=o({...r(x,[`value`,`name`,`required`]),modelValue:E,disabled:O,state:k});return(e,t)=>(h(),f(`div`,{ref_key:`rootElement`,ref:w,class:m(_(C)),"data-state":_(A)},[g(e.$slots,`default`,{modelValue:_(E),state:k.value}),D.value&&p.name&&!_(T)?(h(),u(_(a),{key:0,type:`checkbox`,checked:!!k.value,name:p.name,value:p.value,disabled:O.value,required:p.required},null,8,[`checked`,`name`,`value`,`disabled`,`required`])):d(`v-if`,!0)],10,y))}});export{b as default};
+import{isNullish as e}from"../../shared/guard.js";import{isValueEqualOrExist as t}from"../../shared/comparison.js";import{isFormControl as n,transformPropsToContext as r}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as i}from"../../composables/use-controllable-state.js";import"../../composables/index.js";import a from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import{provideCheckboxRootContext as o,useCheckboxGroupRootContext as s,useCheckboxUi as c}from"./context.js";import{computed as l,createBlock as u,createCommentVNode as d,createElementBlock as f,defineComponent as p,normalizeClass as m,openBlock as h,renderSlot as g,unref as _,useTemplateRef as v}from"vue";const y=[`data-state`],b=p({name:`CheckboxRoot`,__name:`checkbox-root`,props:{id:{},modelValue:{type:[Boolean,String,null],default:void 0},defaultValue:{type:[Boolean,String]},value:{default:`on`},disabled:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(p,{emit:b}){let x=p,S=b,C=c(`root`),w=v(`rootElement`),T=s(),E=i(()=>x.modelValue,e=>{S(`update:modelValue`,e)},x.defaultValue??null),D=l(()=>n(w.value)),O=l(()=>T?.disabled?.value||x.disabled),k=l(()=>e(T?.modelValue?.value)?e(E.value)?!1:E.value===`indeterminate`?`indeterminate`:E.value:t(T?.modelValue.value,x.value)),{dataState:A}=o({...r(x,[`value`,`name`,`required`]),modelValue:E,disabled:O,state:k});return(e,t)=>(h(),f(`div`,{ref_key:`rootElement`,ref:w,"data-soybean-checkbox-root":``,class:m(_(C)),"data-state":_(A)},[g(e.$slots,`default`,{modelValue:_(E),state:k.value}),D.value&&p.name&&!_(T)?(h(),u(_(a),{key:0,type:`checkbox`,checked:!!k.value,name:p.name,value:p.value,disabled:O.value,required:p.required},null,8,[`checked`,`name`,`value`,`disabled`,`required`])):d(`v-if`,!0)],10,y))}});export{b as default};

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

@@ -4,7 +4,7 @@ import * as _$vue from "vue";
 
 //#region src/components/checkbox/checkbox-root.vue.d.ts
 declare var __VLS_1: {
-  modelValue: CheckedState | null | undefined;
+  modelValue: CheckedState | null;
   state: CheckedState;
 };
 type __VLS_Slots = {} & {

package/dist/components/checkbox/context.js

@@ -1 +1 @@
-import{getCheckedState as e,isIndeterminate as t}from"../../shared/value.js";import"../../shared/index.js";import{useContext as n}from"../../composables/use-context.js";import{useUiContext as r}from"../../composables/use-ui-context.js";import"../../composables/index.js";import{computed as i,shallowRef as a}from"vue";const[o,s]=n(`CheckboxGroupRoot`,e=>e),[c,l]=n(`CheckboxRoot`,n=>{let{modelValue:r,state:o}=n,s=i(()=>t(o.value)?`mixed`:o.value),c=i(()=>n.disabled.value?``:void 0),l=i(()=>e(o.value)),u=a(``),d=e=>{u.value=e};return{...n,modelValue:r,state:o,ariaChecked:s,dataDisabled:c,dataState:l,controlId:u,initControlId:d}}),[u,d]=r(`CheckboxUi`),[f,p]=r(`CheckboxCardUi`,e=>(u(e),e));export{f as provideCheckboxCardUi,o as provideCheckboxGroupRootContext,c as provideCheckboxRootContext,u as provideCheckboxUi,p as useCheckboxCardUi,s as useCheckboxGroupRootContext,l as useCheckboxRootContext,d as useCheckboxUi};
+import{getCheckedState as e,isIndeterminate as t}from"../../shared/value.js";import{useContext as n}from"../../composables/use-context.js";import"../../shared/index.js";import{useUiContext as r}from"../../composables/use-ui-context.js";import"../../composables/index.js";import{computed as i,shallowRef as a}from"vue";const[o,s]=n(`CheckboxGroupRoot`,e=>e),[c,l]=n(`CheckboxRoot`,n=>{let{modelValue:r,state:o}=n,s=i(()=>t(o.value)?`mixed`:o.value),c=i(()=>n.disabled.value?``:void 0),l=i(()=>e(o.value)),u=a(``),d=e=>{u.value=e};return{...n,modelValue:r,state:o,ariaChecked:s,dataDisabled:c,dataState:l,controlId:u,initControlId:d}}),[u,d]=r(`CheckboxUi`),[f,p]=r(`CheckboxCardUi`,e=>(u(e),e));export{f as provideCheckboxCardUi,o as provideCheckboxGroupRootContext,c as provideCheckboxRootContext,u as provideCheckboxUi,p as useCheckboxCardUi,s as useCheckboxGroupRootContext,l as useCheckboxRootContext,d as useCheckboxUi};

package/dist/components/checkbox/types.d.ts

@@ -1,16 +1,18 @@
-import { IconValue } from "../_icon/types.js";
 import { CheckedState, DefinedValue, UiClass } from "../../types/common.js";
 import { ForceMountProps, FormFieldCommonProps } from "../../types/component.js";
-import { PrimitiveProps } from "../primitive/types.js";
+import { BaseProps } from "../../types/vue.js";
+import { PrimitiveWithBaseProps } from "../primitive/types.js";
+import { ButtonProps } from "../button/types.js";
+import { IconValue } from "../_icon/types.js";
 import { LabelProps } from "../label/types.js";
 import { RovingFocusGroupProps } from "../roving-focus/types.js";
-import { ButtonHTMLAttributes, ComputedRef, HTMLAttributes, ShallowRef } from "vue";
+import { ComputedRef, ShallowRef } from "vue";
 
 //#region src/components/checkbox/types.d.ts
 /**
  * Properties for the CheckboxRoot component.
  */
-interface CheckboxRootProps extends FormFieldCommonProps, /** @vue-ignore */HTMLAttributes {
+interface CheckboxRootProps extends FormFieldCommonProps, BaseProps {
   /**
    * Id.
    */
@@ -41,14 +43,14 @@ type CheckboxRootEmits = {
 /**
  * Properties for the CheckboxControl component.
  */
-interface CheckboxControlProps extends /** @vue-ignore */ButtonHTMLAttributes {
+interface CheckboxControlProps extends ButtonProps {
   /** Id of the element */
   id?: string;
 }
 /**
  * Properties for the CheckboxIndicator component.
  */
-interface CheckboxIndicatorProps extends PrimitiveProps, ForceMountProps, /** @vue-ignore */HTMLAttributes {}
+interface CheckboxIndicatorProps extends ForceMountProps, PrimitiveWithBaseProps {}
 /**
  * Option data for the CheckboxGroup component.
  */

package/dist/components/clipboard/clipboard.js

@@ -1 +1 @@
-import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"../_icon/icon.js";import n from"../button/button.js";import"../button/index.js";import{computed as r,createBlock as i,createElementVNode as a,createTextVNode as o,createVNode as s,defineComponent as c,guardReactiveProps as l,mergeProps as u,normalizeProps as d,openBlock as f,renderSlot as p,toDisplayString as m,unref as h,withCtx as g}from"vue";import{useClipboard as _}from"@vueuse/core";const v={"aria-hidden":`true`},y=c({name:`Clipboard`,__name:`clipboard`,props:{value:{},copiedDuration:{default:2e3},legacy:{type:Boolean,default:!0},copyIcon:{default:`lucide:copy`},copiedIcon:{default:`lucide:check`},copyText:{default:`Copy`},copiedText:{default:`Copied`},type:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`click`,`copied`,`copyError`],setup(c,{emit:y}){let b=c,x=y,{copied:S,copy:C,isSupported:w}=_({copiedDuring:b.copiedDuration,legacy:b.legacy}),T=r(()=>b.disabled||!w.value),E=r(()=>w.value?S.value?`copied`:`ready`:`unsupported`),D=e(b,[`value`,`copiedDuration`,`legacy`,`disabled`,`copyIcon`,`copiedIcon`,`copyText`,`copiedText`]),O=r(()=>S.value?b.copiedIcon:b.copyIcon),k=r(()=>S.value?b.copiedText:b.copyText),A=async()=>{if(!T.value)try{await C(b.value),x(`copied`,b.value)}catch(e){x(`copyError`,e)}},j=r(()=>({copied:S.value,disabled:T.value,icon:O.value,supported:w.value,state:E.value,text:k.value,copy:A})),M=async e=>{x(`click`,e),await A()};return(e,r)=>(f(),i(h(n),u(h(D),{disabled:T.value,"data-state":E.value,onClick:M}),{default:g(()=>[p(e.$slots,`leading`,d(l(j.value)),()=>[a(`span`,v,[s(t,{icon:O.value},null,8,[`icon`])])]),p(e.$slots,`default`,d(l(j.value)),()=>[o(m(k.value),1)]),p(e.$slots,`trailing`,d(l(j.value)))]),_:3},16,[`disabled`,`data-state`]))}});export{y as default};
+import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"../_icon/icon.js";import n from"../button/button.js";import"../button/index.js";import{computed as r,createBlock as i,createElementVNode as a,createTextVNode as o,createVNode as s,defineComponent as c,guardReactiveProps as l,mergeProps as u,normalizeProps as d,openBlock as f,renderSlot as p,toDisplayString as m,unref as h,withCtx as g}from"vue";import{useClipboard as _}from"@vueuse/core";const v={"aria-hidden":`true`},y=c({name:`Clipboard`,__name:`clipboard`,props:{value:{},copiedDuration:{default:2e3},legacy:{type:Boolean,default:!0},copyIcon:{default:`lucide:copy`},copiedIcon:{default:`lucide:check`},copyText:{default:`Copy`},copiedText:{default:`Copied`},type:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`click`,`copied`,`copyError`],setup(c,{emit:y}){let b=c,x=y,{copied:S,copy:C,isSupported:w}=_({copiedDuring:b.copiedDuration,legacy:b.legacy}),T=r(()=>b.disabled||!w.value),E=r(()=>w.value?S.value?`copied`:`ready`:`unsupported`),D=e(b,[`value`,`copiedDuration`,`legacy`,`disabled`,`copyIcon`,`copiedIcon`,`copyText`,`copiedText`]),O=r(()=>S.value?b.copiedIcon:b.copyIcon),k=r(()=>S.value?b.copiedText:b.copyText),A=async()=>{if(!T.value)try{await C(b.value),x(`copied`,b.value)}catch(e){x(`copyError`,e)}},j=r(()=>({copied:S.value,disabled:T.value,icon:O.value,supported:w.value,state:E.value,text:k.value,copy:A})),M=async e=>{x(`click`,e),await A()};return(e,r)=>(f(),i(h(n),u(h(D),{"data-soybean-clipboard":``,disabled:T.value,"data-state":E.value,onClick:M}),{default:g(()=>[p(e.$slots,`leading`,d(l(j.value)),()=>[a(`span`,v,[s(t,{icon:O.value},null,8,[`icon`])])]),p(e.$slots,`default`,d(l(j.value)),()=>[o(m(k.value),1)]),p(e.$slots,`trailing`,d(l(j.value)))]),_:3},16,[`disabled`,`data-state`]))}});export{y as default};

package/dist/components/clipboard/types.d.ts

@@ -1,5 +1,5 @@
-import { IconValue } from "../_icon/types.js";
 import { ButtonProps } from "../button/types.js";
+import { IconValue } from "../_icon/types.js";
 
 //#region src/components/clipboard/types.d.ts
 /**

package/dist/components/collapsible/collapsible-content.js

@@ -1 +1 @@
-import{useForwardElement as e}from"../../composables/use-forward-element.js";import{usePresence as t}from"../../composables/use-presence.js";import"../../composables/index.js";import{useCollapsibleRootContext as n,useCollapsibleUi as r}from"./context.js";import{Primitive as i}from"../primitive/primitive.js";import"../primitive/index.js";import{collapsibleContentCssVars as a}from"./shared.js";import{computed as o,createBlock as s,createCommentVNode as c,defineComponent as l,nextTick as u,normalizeClass as d,onMounted as f,openBlock as p,renderSlot as m,shallowRef as h,unref as g,watch as _,withCtx as v}from"vue";const y=l({name:`CollapsibleContent`,__name:`collapsible-content`,props:{asChild:{type:Boolean},as:{},forceMount:{type:Boolean}},setup(l){let y=l,[b,x]=e(),{contentId:S,initContentId:C,open:w,dataDisabled:T,dataState:E,unmountOnHide:D}=n(`CollapsibleContent`),O=r(`content`),k=y.forceMount?h(!0):t(b,w,F),A={[a.width]:`0px`,[a.height]:`0px`},j=o(()=>k.value||w.value),M=w.value,N,P=o(()=>{if(!j.value)return D.value?``:`until-found`});function F(){let e=b.value;if(!e)return;let t=e.style;N||(N={transitionDuration:t.transitionDuration,animationName:t.animationName}),t.transitionDuration=`0s`,t.animationName=`none`;let n=e.getBoundingClientRect();t.setProperty(a.width,`${n.width}px`),t.setProperty(a.height,`${n.height}px`),M||(t.transitionDuration=N.transitionDuration,t.animationName=N.animationName)}return _(j,async()=>{await u(),F()},{immediate:!0,flush:`post`}),C(),f(()=>{requestAnimationFrame(()=>{M=!1})}),(e,t)=>(p(),s(g(i),{id:g(S),ref:g(x),as:l.as,"as-child":l.asChild,class:d(g(O)),"data-disabled":g(T),"data-state":g(E),hidden:P.value,style:A},{default:v(()=>[!g(D)||j.value?m(e.$slots,`default`,{key:0}):c(`v-if`,!0)]),_:3},8,[`id`,`as`,`as-child`,`class`,`data-disabled`,`data-state`,`hidden`]))}});export{y as default};
+import{useForwardElement as e}from"../../composables/use-forward-element.js";import{usePresence as t}from"../../composables/use-presence.js";import"../../composables/index.js";import{useCollapsibleRootContext as n,useCollapsibleUi as r}from"./context.js";import{Primitive as i}from"../primitive/primitive.js";import"../primitive/index.js";import{collapsibleContentCssVars as a}from"./shared.js";import{computed as o,createBlock as s,createCommentVNode as c,defineComponent as l,nextTick as u,normalizeClass as d,onMounted as f,openBlock as p,renderSlot as m,shallowRef as h,unref as g,watch as _,withCtx as v}from"vue";const y=l({name:`CollapsibleContent`,__name:`collapsible-content`,props:{forceMount:{type:Boolean},asChild:{type:Boolean},as:{}},setup(l){let y=l,[b,x]=e(),{contentId:S,initContentId:C,open:w,dataDisabled:T,dataState:E,unmountOnHide:D}=n(`CollapsibleContent`),O=r(`content`),k=y.forceMount?h(!0):t(b,w,F),A={[a.width]:`0px`,[a.height]:`0px`},j=o(()=>k.value||w.value),M=w.value,N,P=o(()=>{if(!j.value)return D.value?``:`until-found`});function F(){let e=b.value;if(!e)return;let t=e.style;N||(N={transitionDuration:t.transitionDuration,animationName:t.animationName}),t.transitionDuration=`0s`,t.animationName=`none`;let n=e.getBoundingClientRect();t.setProperty(a.width,`${n.width}px`),t.setProperty(a.height,`${n.height}px`),M||(t.transitionDuration=N.transitionDuration,t.animationName=N.animationName)}return _(j,async()=>{await u(),F()},{immediate:!0,flush:`post`}),C(),f(()=>{requestAnimationFrame(()=>{M=!1})}),(e,t)=>(p(),s(g(i),{id:g(S),ref:g(x),as:l.as,"as-child":l.asChild,"data-soybean-collapsible-content":``,class:d(g(O)),"data-disabled":g(T),"data-state":g(E),hidden:P.value,style:A},{default:v(()=>[!g(D)||j.value?m(e.$slots,`default`,{key:0}):c(`v-if`,!0)]),_:3},8,[`id`,`as`,`as-child`,`class`,`data-disabled`,`data-state`,`hidden`]))}});export{y as default};

package/dist/components/collapsible/collapsible-root.js

@@ -1 +1 @@
-import{transformPropsToContext as e}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as t}from"../../composables/use-controllable-state.js";import{useOmitProps as n}from"../../composables/use-props.js";import"../../composables/index.js";import{provideCollapsibleRootContext as r,useCollapsibleUi as i}from"./context.js";import{Primitive as a}from"../primitive/primitive.js";import"../primitive/index.js";import{createBlock as o,defineComponent as s,mergeProps as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=s({name:`CollapsibleRoot`,__name:`collapsible-root`,props:{defaultOpen:{type:Boolean,default:!1},open:{type:Boolean,default:void 0},disabled:{type:Boolean},unmountOnHide:{type:Boolean,default:!0},asChild:{type:Boolean},as:{}},emits:[`update:open`],setup(s,{expose:p,emit:m}){let h=s,g=m,_=n(h,[`open`,`defaultOpen`,`disabled`,`unmountOnHide`]),v=i(`root`),y=t(()=>h.open,e=>{e!==void 0&&g(`update:open`,e)},h.defaultOpen||!1),{dataDisabled:b,dataState:x}=r({open:y,...e(h,[`disabled`,`unmountOnHide`])});return p({open:y}),(e,t)=>(l(),o(d(a),c(d(_),{class:d(v),"data-disabled":d(b),"data-state":d(x)}),{default:f(()=>[u(e.$slots,`default`,{open:d(y)})]),_:3},16,[`class`,`data-disabled`,`data-state`]))}});export{p as default};
+import{transformPropsToContext as e}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as t}from"../../composables/use-controllable-state.js";import{useOmitProps as n}from"../../composables/use-props.js";import"../../composables/index.js";import{provideCollapsibleRootContext as r,useCollapsibleUi as i}from"./context.js";import{Primitive as a}from"../primitive/primitive.js";import"../primitive/index.js";import{createBlock as o,defineComponent as s,mergeProps as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=s({name:`CollapsibleRoot`,__name:`collapsible-root`,props:{defaultOpen:{type:Boolean,default:!1},open:{type:Boolean,default:void 0},disabled:{type:Boolean},unmountOnHide:{type:Boolean,default:!0},asChild:{type:Boolean},as:{}},emits:[`update:open`],setup(s,{expose:p,emit:m}){let h=s,g=m,_=n(h,[`open`,`defaultOpen`,`disabled`,`unmountOnHide`]),v=i(`root`),y=t(()=>h.open,e=>{g(`update:open`,e)},h.defaultOpen),{dataDisabled:b,dataState:x}=r({open:y,...e(h,[`disabled`,`unmountOnHide`])});return p({open:y}),(e,t)=>(l(),o(d(a),c(d(_),{"data-soybean-collapsible-root":``,class:d(v),"data-disabled":d(b),"data-state":d(x)}),{default:f(()=>[u(e.$slots,`default`,{open:d(y)})]),_:3},16,[`class`,`data-disabled`,`data-state`]))}});export{p as default};

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

@@ -3,13 +3,13 @@ import * as _$vue from "vue";
 
 //#region src/components/collapsible/collapsible-root.vue.d.ts
 declare var __VLS_8: {
-  open: boolean | undefined;
+  open: boolean;
 };
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<CollapsibleRootProps, {
-  open: _$vue.ShallowRef<boolean | undefined>;
+  open: _$vue.ShallowRef<boolean>;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:open": (value: boolean) => any;
 }, string, _$vue.PublicProps, Readonly<CollapsibleRootProps> & Readonly<{

package/dist/components/collapsible/collapsible-trigger.js

@@ -1 +1 @@
-import{useCollapsibleRootContext as e,useCollapsibleUi as t}from"./context.js";import{Primitive as n}from"../primitive/primitive.js";import"../primitive/index.js";import{computed as r,createBlock as i,defineComponent as a,normalizeClass as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=a({name:`CollapsibleTrigger`,__name:`collapsible-trigger`,props:{disabledCollapsible:{type:Boolean},asChild:{type:Boolean},as:{default:`button`}},setup(a){let d=a,{open:f,onOpenToggle:p,contentId:m,disabled:h,dataDisabled:g,dataState:_}=e(`CollapsibleTrigger`),v=t(`trigger`),y=r(()=>d.as===`button`?`button`:void 0),b=()=>{d.disabledCollapsible||p()};return(e,t)=>(s(),i(l(n),{as:a.as,"as-child":a.asChild,class:o(l(v)),type:y.value,"aria-controls":l(m),"aria-expanded":l(f),"data-disabled":l(g),"data-state":l(_),disabled:l(h),onClick:b},{default:u(()=>[c(e.$slots,`default`,{open:l(f)})]),_:3},8,[`as`,`as-child`,`class`,`type`,`aria-controls`,`aria-expanded`,`data-disabled`,`data-state`,`disabled`]))}});export{d as default};
+import{useCollapsibleRootContext as e,useCollapsibleUi as t}from"./context.js";import n from"../button/button.js";import{createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";const u=i({name:`CollapsibleTrigger`,__name:`collapsible-trigger`,props:{disabledCollapsible:{type:Boolean},type:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(i){let u=i,{open:d,onOpenToggle:f,contentId:p,disabled:m,dataState:h}=e(`CollapsibleTrigger`),g=t(`trigger`),_=()=>{f()};return(e,t)=>(o(),r(n,a(u,{"data-soybean-collapsible-trigger":``,class:c(g),disabled:c(m)||i.disabledCollapsible,"aria-controls":c(p),"aria-expanded":c(d),"data-state":c(h),onClick:_}),{default:l(()=>[s(e.$slots,`default`,{open:c(d)})]),_:3},16,[`class`,`disabled`,`aria-controls`,`aria-expanded`,`data-state`]))}});export{u as default};

package/dist/components/collapsible/collapsible-trigger.vue.d.ts

@@ -1,4 +1,3 @@
-import { AsTag } from "../primitive/types.js";
 import { CollapsibleTriggerProps } from "./types.js";
 import * as _$vue from "vue";
 
@@ -9,9 +8,7 @@ declare var __VLS_10: {
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_base: _$vue.DefineComponent<CollapsibleTriggerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<CollapsibleTriggerProps> & Readonly<{}>, {
-  as: AsTag | _$vue.Component;
-}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: _$vue.DefineComponent<CollapsibleTriggerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<CollapsibleTriggerProps> & 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 & {

package/dist/components/collapsible/context.js

@@ -1 +1 @@
-import{getDisclosureState as e}from"../../shared/value.js";import"../../shared/index.js";import{useContext as t}from"../../composables/use-context.js";import{useUiContext as n}from"../../composables/use-ui-context.js";import"../../composables/index.js";import{computed as r,shallowRef as i,useId as a}from"vue";const[o,s]=t(`CollapsibleRoot`,t=>{let{open:n,disabled:o,unmountOnHide:s}=t,c=()=>{o.value||(n.value=!n.value)},l=i(``);return{open:n,disabled:o,unmountOnHide:s,onOpenToggle:c,contentId:l,initContentId:()=>{l.value||(l.value=`soybean-collapsible-content-${a()}`)},dataDisabled:r(()=>o.value?``:void 0),dataState:r(()=>e(n.value))}}),[c,l]=n(`CollapsibleUi`);export{o as provideCollapsibleRootContext,c as provideCollapsibleUi,s as useCollapsibleRootContext,l as useCollapsibleUi};
+import{getDisclosureState as e}from"../../shared/value.js";import{useContext as t}from"../../composables/use-context.js";import"../../shared/index.js";import{useUiContext as n}from"../../composables/use-ui-context.js";import"../../composables/index.js";import{computed as r,shallowRef as i,useId as a}from"vue";const[o,s]=t(`CollapsibleRoot`,t=>{let{open:n,disabled:o,unmountOnHide:s}=t,c=()=>{o.value||(n.value=!n.value)},l=i(``);return{open:n,disabled:o,unmountOnHide:s,onOpenToggle:c,contentId:l,initContentId:()=>{l.value||(l.value=`soybean-collapsible-content-${a()}`)},dataDisabled:r(()=>o.value?``:void 0),dataState:r(()=>e(n.value))}}),[c,l]=n(`CollapsibleUi`);export{o as provideCollapsibleRootContext,c as provideCollapsibleUi,s as useCollapsibleRootContext,l as useCollapsibleUi};

package/dist/components/collapsible/types.d.ts

@@ -1,13 +1,14 @@
 import { UiClass } from "../../types/common.js";
 import { ForceMountProps } from "../../types/component.js";
-import { PrimitiveProps } from "../primitive/types.js";
-import { ButtonHTMLAttributes, HTMLAttributes, Ref } from "vue";
+import { PrimitiveWithBaseProps } from "../primitive/types.js";
+import { ButtonProps } from "../button/types.js";
+import { Ref } from "vue";
 
 //#region src/components/collapsible/types.d.ts
 /**
  * Properties for the CollapsibleRoot component.
  */
-interface CollapsibleRootProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {
+interface CollapsibleRootProps extends PrimitiveWithBaseProps {
   /**
    * The open state of the collapsible when it is initially rendered.
    *
@@ -30,11 +31,11 @@ type CollapsibleRootEmits = {
 /**
  * Properties for the CollapsibleContent component.
  */
-interface CollapsibleContentProps extends PrimitiveProps, ForceMountProps, /** @vue-ignore */HTMLAttributes {}
+interface CollapsibleContentProps extends ForceMountProps, PrimitiveWithBaseProps {}
 /**
  * Properties for the CollapsibleTrigger component.
  */
-interface CollapsibleTriggerProps extends PrimitiveProps, /** @vue-ignore */ButtonHTMLAttributes {
+interface CollapsibleTriggerProps extends ButtonProps {
   /** When `true`, prevents the user from toggling the collapsible. */
   disabledCollapsible?: boolean;
 }

package/dist/components/color-area/color-area-area.js

@@ -1 +1 @@
-import{useForwardElement as e}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as t}from"../primitive/primitive.js";import"../primitive/index.js";import{useColorAreaRootContext as n,useColorAreaUi as r}from"./context.js";import{createLinearScale as i}from"./shared.js";import{createBlock as a,defineComponent as o,normalizeClass as s,normalizeStyle as c,openBlock as l,renderSlot as u,shallowRef as d,unref as f,withCtx as p}from"vue";const m=o({name:`ColorAreaArea`,__name:`color-area-area`,props:{asChild:{type:Boolean},as:{default:`div`}},setup(o){let[m,h]=e(),g=r(`area`),{xRange:_,yRange:v,xValue:y,yValue:b,areaStyle:x,thumbElement:S,updateValues:C,commitValues:w,disabled:T}=n(`ColorAreaArea`),E=d(!1),D=d({x:0,y:0});function O(e){let t=m.value?.getBoundingClientRect();if(!t)return null;let n=i([0,t.width],[_.value.min,_.value.max]),r=i([0,t.height],[v.value.max,v.value.min]);return{x:n(e.clientX-t.left-D.value.x),y:r(e.clientY-t.top-D.value.y)}}function k(e){let t=S.value?.getBoundingClientRect(),n=e.target;return!t||!(n instanceof Node)||!S.value?.contains(n)?(D.value={x:0,y:0},!1):(D.value={x:e.clientX-(t.left+t.width/2),y:e.clientY-(t.top+t.height/2)},!0)}function A(e){if(T.value)return;if(e.currentTarget.setPointerCapture(e.pointerId),e.preventDefault(),E.value=!0,k(e)){S.value?.focus();return}let t=O(e);t&&(C(t.x,t.y),S.value?.focus())}function j(e){if(!E.value||T.value||!e.currentTarget.hasPointerCapture(e.pointerId))return;let t=O(e);t&&C(t.x,t.y)}function M(e){if(!E.value)return;let t=e.currentTarget;t.hasPointerCapture(e.pointerId)&&t.releasePointerCapture(e.pointerId),E.value=!1,D.value={x:0,y:0},w()}function N(e){if(T.value)return;let t=e.shiftKey?10:1,n=_.value.step*t,r=v.value.step*t,i=0,a=0;switch(e.key){case`ArrowLeft`:i=-n;break;case`ArrowRight`:i=n;break;case`ArrowUp`:a=r;break;case`ArrowDown`:a=-r;break;case`PageUp`:a=r*10;break;case`PageDown`:a=-r*10;break;case`Home`:i=-n*10;break;case`End`:i=n*10;break;default:return}e.preventDefault(),C(y.value+i,b.value+a),w()}return(e,n)=>(l(),a(f(t),{ref:f(h),as:o.as,"as-child":o.asChild,class:s(f(g)),role:`application`,"aria-roledescription":`Color picker area`,"aria-disabled":f(T)?`true`:void 0,"data-disabled":f(T)?``:void 0,style:c({...f(x),touchAction:`none`}),onKeydown:N,onPointerdown:A,onPointermove:j,onPointerup:M,onPointercancel:M},{default:p(()=>[u(e.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`aria-disabled`,`data-disabled`,`style`]))}});export{m as default};
+import{useForwardElement as e}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as t}from"../primitive/primitive.js";import"../primitive/index.js";import{useColorAreaRootContext as n,useColorAreaUi as r}from"./context.js";import{createLinearScale as i}from"./shared.js";import{createBlock as a,defineComponent as o,normalizeClass as s,normalizeStyle as c,openBlock as l,renderSlot as u,shallowRef as d,unref as f,withCtx as p}from"vue";const m=o({name:`ColorAreaArea`,__name:`color-area-area`,props:{asChild:{type:Boolean},as:{}},setup(o){let[m,h]=e(),g=r(`area`),{xRange:_,yRange:v,xValue:y,yValue:b,areaStyle:x,thumbElement:S,updateValues:C,commitValues:w,disabled:T}=n(`ColorAreaArea`),E=d(!1),D=d({x:0,y:0});function O(e){let t=m.value?.getBoundingClientRect();if(!t)return null;let n=i([0,t.width],[_.value.min,_.value.max]),r=i([0,t.height],[v.value.max,v.value.min]);return{x:n(e.clientX-t.left-D.value.x),y:r(e.clientY-t.top-D.value.y)}}function k(e){let t=S.value?.getBoundingClientRect(),n=e.target;return!t||!(n instanceof Node)||!S.value?.contains(n)?(D.value={x:0,y:0},!1):(D.value={x:e.clientX-(t.left+t.width/2),y:e.clientY-(t.top+t.height/2)},!0)}function A(e){if(T.value)return;if(e.currentTarget.setPointerCapture(e.pointerId),e.preventDefault(),E.value=!0,k(e)){S.value?.focus();return}let t=O(e);t&&(C(t.x,t.y),S.value?.focus())}function j(e){if(!E.value||T.value||!e.currentTarget.hasPointerCapture(e.pointerId))return;let t=O(e);t&&C(t.x,t.y)}function M(e){if(!E.value)return;let t=e.currentTarget;t.hasPointerCapture(e.pointerId)&&t.releasePointerCapture(e.pointerId),E.value=!1,D.value={x:0,y:0},w()}function N(e){if(T.value)return;let t=e.shiftKey?10:1,n=_.value.step*t,r=v.value.step*t,i=0,a=0;switch(e.key){case`ArrowLeft`:i=-n;break;case`ArrowRight`:i=n;break;case`ArrowUp`:a=r;break;case`ArrowDown`:a=-r;break;case`PageUp`:a=r*10;break;case`PageDown`:a=-r*10;break;case`Home`:i=-n*10;break;case`End`:i=n*10;break;default:return}e.preventDefault(),C(y.value+i,b.value+a),w()}return(e,n)=>(l(),a(f(t),{ref:f(h),as:o.as,"as-child":o.asChild,"data-soybean-color-area-area":``,class:s(f(g)),role:`application`,"aria-roledescription":`Color picker area`,"aria-disabled":f(T)?`true`:void 0,"data-disabled":f(T)?``:void 0,style:c({...f(x),touchAction:`none`}),onKeydown:N,onPointerdown:A,onPointermove:j,onPointerup:M,onPointercancel:M},{default:p(()=>[u(e.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`aria-disabled`,`data-disabled`,`style`]))}});export{m as default};

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

@@ -1,4 +1,3 @@
-import { AsTag } from "../primitive/types.js";
 import { ColorAreaAreaProps } from "./types.js";
 import * as _$vue from "vue";
 
@@ -7,9 +6,7 @@ declare var __VLS_14: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_14) => any;
 };
-declare const __VLS_base: _$vue.DefineComponent<ColorAreaAreaProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColorAreaAreaProps> & Readonly<{}>, {
-  as: AsTag | _$vue.Component;
-}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: _$vue.DefineComponent<ColorAreaAreaProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColorAreaAreaProps> & 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 & {

package/dist/components/color-area/color-area-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-area-area.js";import r from"./color-area-root.js";import i from"./color-area-thumb.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:`ColorAreaCompact`,__name:`color-area-compact`,props:{areaProps:{},thumbProps:{},modelValue:{},defaultValue:{},colorSpace:{},format:{},xChannel:{},yChannel:{},disabled:{type:Boolean},xName:{},yName:{},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,[`areaProps`,`thumbProps`]),y=e(_);return(e,t)=>(d(),a(r,l(p(v),f(p(y))),{default:m(()=>[o(n,u(c(s.areaProps)),{default:m(()=>[o(i,u(c(s.thumbProps)),null,16)]),_:1},16)]),_:1},16))}});export{h as default};

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

@@ -0,0 +1,19 @@
+import { NormalizedColor } from "../../types/color.js";
+import { ColorAreaCompactProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-area/color-area-compact.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<ColorAreaCompactProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  change: (value: string) => any;
+  "update:modelValue": (value: string) => any;
+  "update:color": (value: NormalizedColor) => any;
+  changeEnd: (value: string) => any;
+}, string, _$vue.PublicProps, Readonly<ColorAreaCompactProps> & Readonly<{
+  onChange?: ((value: string) => any) | undefined;
+  "onUpdate:modelValue"?: ((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-area/color-area-root.js

@@ -1 +1 @@
-import{formatColor as e,getAreaBackgroundStyle as t,getChannelRange as n,getChannelValue as r,hasVisibleChromaticity as i,setChannelValues 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{provideColorAreaRootContext as p,useColorAreaUi 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:`ColorAreaRoot`,__name:`color-area-root`,props:{modelValue:{default:void 0},defaultValue:{default:`#ff0000`},colorSpace:{default:`hsl`},format:{default:`hex`},xChannel:{default:`saturation`},yChannel:{default:`lightness`},disabled:{type:Boolean,default:!1},xName:{},yName:{},asChild:{type:Boolean},as:{default:`div`},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:color`,`change`,`changeEnd`],setup(v,{emit:E}){let D=v,O=E,[k,A]=u(),j=m(`root`),M=l(()=>D.modelValue,t=>{O(`update:modelValue`,typeof t==`string`?t:e(t,D.format))},D.defaultValue),N=h(()=>o(M.value,D.colorSpace)),P=h(()=>n(D.xChannel)),F=h(()=>n(D.yChannel)),I=S(r(N.value,D.xChannel,D.colorSpace)),L=S(r(N.value,D.yChannel,D.colorSpace)),R=S(r(N.value,`hue`,D.colorSpace)),z=h(()=>s(k.value)),B=h(()=>t(N.value,D.xChannel,D.yChannel,D.colorSpace)),V=S();function H(){I.value=r(N.value,D.xChannel,D.colorSpace),L.value=r(N.value,D.yChannel,D.colorSpace),i(N.value,D.colorSpace)&&(R.value=r(N.value,`hue`,D.colorSpace))}function U(t){let n=e(t,D.format);M.value=n,O(`update:color`,o(t,D.colorSpace)),O(`change`,n)}function W(e,t){let n=Math.min(P.value.max,Math.max(P.value.min,e)),r=Math.min(F.value.max,Math.max(F.value.min,t));I.value=n,L.value=r;let i=[{channel:D.xChannel,value:n},{channel:D.yChannel,value:r}];D.xChannel!==`hue`&&D.yChannel!==`hue`&&i.push({channel:`hue`,value:R.value}),U(a(N.value,i,D.colorSpace))}function G(){O(`changeEnd`,e(N.value,D.format))}return w(N,H,{immediate:!0}),p({color:N,xValue:I,yValue:L,xRange:P,yRange:F,areaStyle:B,thumbElement:V,setThumbElement(e){V.value!==e&&(V.value=e)},updateValues:W,commitValues:G,...c(D,[`colorSpace`,`format`,`xChannel`,`yChannel`,`disabled`])}),(e,t)=>(b(),g(C(d),{ref:C(A),as:v.as,"as-child":v.asChild,class:y(C(j)),role:`group`,"aria-disabled":v.disabled?`true`:void 0,"data-disabled":v.disabled?``:void 0},{default:T(()=>[x(e.$slots,`default`),z.value&&v.xName?(b(),g(C(f),{key:0,type:`text`,value:I.value,name:v.xName,disabled:v.disabled},null,8,[`value`,`name`,`disabled`])):_(`v-if`,!0),z.value&&v.yName?(b(),g(C(f),{key:1,type:`text`,value:L.value,name:v.yName,disabled:v.disabled},null,8,[`value`,`name`,`disabled`])):_(`v-if`,!0)]),_:3},8,[`as`,`as-child`,`class`,`aria-disabled`,`data-disabled`]))}});export{E as default};
+import{formatColor as e,getAreaBackgroundStyle as t,getChannelRange as n,getChannelValue as r,hasVisibleChromaticity as i,setChannelValues 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{provideColorAreaRootContext as p,useColorAreaUi 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:`ColorAreaRoot`,__name:`color-area-root`,props:{modelValue:{default:void 0},defaultValue:{default:`#ff0000`},colorSpace:{default:`hsl`},format:{default:`hex`},xChannel:{default:`saturation`},yChannel:{default:`lightness`},disabled:{type:Boolean,default:!1},xName:{},yName:{},name:{},required:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:color`,`change`,`changeEnd`],setup(v,{emit:E}){let D=v,O=E,[k,A]=u(),j=m(`root`),M=l(()=>D.modelValue,t=>{O(`update:modelValue`,typeof t==`string`?t:e(t,D.format))},D.defaultValue),N=h(()=>o(M.value,D.colorSpace)),P=h(()=>n(D.xChannel)),F=h(()=>n(D.yChannel)),I=S(r(N.value,D.xChannel,D.colorSpace)),L=S(r(N.value,D.yChannel,D.colorSpace)),R=S(r(N.value,`hue`,D.colorSpace)),z=h(()=>s(k.value)),B=h(()=>t(N.value,D.xChannel,D.yChannel,D.colorSpace)),V=S();function H(){I.value=r(N.value,D.xChannel,D.colorSpace),L.value=r(N.value,D.yChannel,D.colorSpace),i(N.value,D.colorSpace)&&(R.value=r(N.value,`hue`,D.colorSpace))}function U(t){let n=e(t,D.format);M.value=n,O(`update:color`,o(t,D.colorSpace)),O(`change`,n)}function W(e,t){let n=Math.min(P.value.max,Math.max(P.value.min,e)),r=Math.min(F.value.max,Math.max(F.value.min,t));I.value=n,L.value=r;let i=[{channel:D.xChannel,value:n},{channel:D.yChannel,value:r}];D.xChannel!==`hue`&&D.yChannel!==`hue`&&i.push({channel:`hue`,value:R.value}),U(a(N.value,i,D.colorSpace))}function G(){O(`changeEnd`,e(N.value,D.format))}return w(N,H,{immediate:!0}),p({color:N,xValue:I,yValue:L,xRange:P,yRange:F,areaStyle:B,thumbElement:V,setThumbElement(e){V.value!==e&&(V.value=e)},updateValues:W,commitValues:G,...c(D,[`colorSpace`,`format`,`xChannel`,`yChannel`,`disabled`])}),(e,t)=>(b(),g(C(d),{ref:C(A),as:v.as,"as-child":v.asChild,"data-soybean-color-area-root":``,class:y(C(j)),role:`group`,"aria-disabled":v.disabled?`true`:void 0,"data-disabled":v.disabled?``:void 0},{default:T(()=>[x(e.$slots,`default`),z.value&&v.xName?(b(),g(C(f),{key:0,type:`text`,value:I.value,name:v.xName,disabled:v.disabled},null,8,[`value`,`name`,`disabled`])):_(`v-if`,!0),z.value&&v.yName?(b(),g(C(f),{key:1,type:`text`,value:L.value,name:v.yName,disabled:v.disabled},null,8,[`value`,`name`,`disabled`])):_(`v-if`,!0)]),_:3},8,[`as`,`as-child`,`class`,`aria-disabled`,`data-disabled`]))}});export{E as default};

package/dist/components/color-area/color-area-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 { ColorAreaAxisChannel, ColorAreaRootProps } from "./types.js";
 import * as _$vue from "vue";
 
@@ -21,10 +20,9 @@ declare const __VLS_base: _$vue.DefineComponent<ColorAreaRootProps, {}, {}, {},
 }>, {
   disabled: boolean;
   format: ColorFormat;
-  as: AsTag | _$vue.Component;
-  colorSpace: ColorSpace;
   modelValue: string | ColorValue;
   defaultValue: string | ColorValue;
+  colorSpace: ColorSpace;
   xChannel: ColorAreaAxisChannel;
   yChannel: ColorAreaAxisChannel;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

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

@@ -1 +1 @@
-import{formatChannelValue as e,getChannelName as t}from"../../shared/color.js";import"../../shared/index.js";import{useForwardElement as n}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as r}from"../primitive/primitive.js";import"../primitive/index.js";import{useColorAreaRootContext as i,useColorAreaUi as a}from"./context.js";import{convertValueToPercentage as o}from"./shared.js";import{computed as s,createBlock as c,defineComponent as l,normalizeClass as u,normalizeStyle as d,openBlock as f,renderSlot as p,unref as m,withCtx as h}from"vue";const g=l({name:`ColorAreaThumb`,__name:`color-area-thumb`,props:{asChild:{type:Boolean},as:{default:`span`}},setup(l){let{setThumbElement:g,xChannel:_,yChannel:v,xValue:y,yValue:b,xRange:x,yRange:S,disabled:C}=i(`ColorAreaThumb`),[w,T]=n(e=>{g(e)}),E=a(`thumb`),D=s(()=>_.value??`saturation`),O=s(()=>v.value??`lightness`),k=s(()=>o(y.value,x.value.min,x.value.max)),A=s(()=>o(b.value,S.value.min,S.value.max)),j=s(()=>`${t(D.value)}, ${t(O.value)}`),M=s(()=>`${t(D.value)} ${e(D.value,y.value)}, ${t(O.value)} ${e(O.value,b.value)}`);return(e,t)=>(f(),c(m(r),{ref:m(T),as:l.as,"as-child":l.asChild,class:u(m(E)),role:`slider`,tabindex:m(C)?void 0:0,"aria-label":j.value,"aria-roledescription":`Color thumb`,"aria-valuemin":m(x).min,"aria-valuemax":m(x).max,"aria-valuenow":m(y),"aria-valuetext":M.value,"aria-orientation":`horizontal`,"data-disabled":m(C)?``:void 0,style:d({position:`absolute`,left:`${k.value}%`,top:`${100-A.value}%`,transform:`translate(-50%, -50%)`,touchAction:`none`})},{default:h(()=>[p(e.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`tabindex`,`aria-label`,`aria-valuemin`,`aria-valuemax`,`aria-valuenow`,`aria-valuetext`,`data-disabled`,`style`]))}});export{g as default};
+import{formatChannelValue as e,getChannelName as t}from"../../shared/color.js";import"../../shared/index.js";import{useForwardElement as n}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as r}from"../primitive/primitive.js";import"../primitive/index.js";import{useColorAreaRootContext as i,useColorAreaUi as a}from"./context.js";import{convertValueToPercentage as o}from"./shared.js";import{computed as s,createBlock as c,defineComponent as l,normalizeClass as u,normalizeStyle as d,openBlock as f,renderSlot as p,unref as m,withCtx as h}from"vue";const g=l({name:`ColorAreaThumb`,__name:`color-area-thumb`,props:{asChild:{type:Boolean},as:{default:`span`}},setup(l){let{setThumbElement:g,xChannel:_,yChannel:v,xValue:y,yValue:b,xRange:x,yRange:S,disabled:C}=i(`ColorAreaThumb`),[w,T]=n(e=>{g(e)}),E=a(`thumb`),D=s(()=>_.value??`saturation`),O=s(()=>v.value??`lightness`),k=s(()=>o(y.value,x.value.min,x.value.max)),A=s(()=>o(b.value,S.value.min,S.value.max)),j=s(()=>`${t(D.value)}, ${t(O.value)}`),M=s(()=>`${t(D.value)} ${e(D.value,y.value)}, ${t(O.value)} ${e(O.value,b.value)}`);return(e,t)=>(f(),c(m(r),{ref:m(T),as:l.as,"as-child":l.asChild,"data-soybean-color-area-thumb":``,class:u(m(E)),role:`slider`,tabindex:m(C)?void 0:0,"aria-label":j.value,"aria-roledescription":`Color thumb`,"aria-valuemin":m(x).min,"aria-valuemax":m(x).max,"aria-valuenow":m(y),"aria-valuetext":M.value,"aria-orientation":`horizontal`,"data-disabled":m(C)?``:void 0,style:d({position:`absolute`,left:`${k.value}%`,top:`${100-A.value}%`,transform:`translate(-50%, -50%)`,touchAction:`none`})},{default:h(()=>[p(e.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`tabindex`,`aria-label`,`aria-valuemin`,`aria-valuemax`,`aria-valuenow`,`aria-valuetext`,`data-disabled`,`style`]))}});export{g as default};

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

@@ -1,6 +1,7 @@
-import { ColorAreaAreaProps, ColorAreaAxisChannel, ColorAreaRootEmits, ColorAreaRootProps, ColorAreaThumbProps, ColorAreaUi, ColorAreaUiSlot } from "./types.js";
-import { _default as _default$1 } from "./color-area-root.vue.js";
+import { ColorAreaAreaProps, ColorAreaAxisChannel, ColorAreaCompactEmits, ColorAreaCompactProps, ColorAreaRootEmits, ColorAreaRootProps, ColorAreaThumbProps, ColorAreaUi, ColorAreaUiSlot } from "./types.js";
+import { _default as _default$1 } from "./color-area-compact.vue.js";
+import { _default as _default$2 } from "./color-area-root.vue.js";
 import { _default } from "./color-area-area.vue.js";
-import { _default as _default$2 } from "./color-area-thumb.vue.js";
+import { _default as _default$3 } from "./color-area-thumb.vue.js";
 import { provideColorAreaUi } from "./context.js";
-export { _default as ColorAreaArea, type ColorAreaAreaProps, type ColorAreaAxisChannel, _default$1 as ColorAreaRoot, type ColorAreaRootEmits, type ColorAreaRootProps, _default$2 as ColorAreaThumb, type ColorAreaThumbProps, type ColorAreaUi, type ColorAreaUiSlot, provideColorAreaUi };
+export { _default as ColorAreaArea, type ColorAreaAreaProps, type ColorAreaAxisChannel, _default$1 as ColorAreaCompact, type ColorAreaCompactEmits, type ColorAreaCompactProps, _default$2 as ColorAreaRoot, type ColorAreaRootEmits, type ColorAreaRootProps, _default$3 as ColorAreaThumb, type ColorAreaThumbProps, type ColorAreaUi, type ColorAreaUiSlot, provideColorAreaUi };

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

@@ -1 +1 @@
-import{provideColorAreaUi as e}from"./context.js";import t from"./color-area-root.js";import n from"./color-area-area.js";import r from"./color-area-thumb.js";export{n as ColorAreaArea,t as ColorAreaRoot,r as ColorAreaThumb,e as provideColorAreaUi};
+import{provideColorAreaUi as e}from"./context.js";import t from"./color-area-area.js";import n from"./color-area-root.js";import r from"./color-area-thumb.js";import i from"./color-area-compact.js";export{t as ColorAreaArea,i as ColorAreaCompact,n as ColorAreaRoot,r as ColorAreaThumb,e as provideColorAreaUi};

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

@@ -1,8 +1,8 @@
+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 { CSSProperties, ComputedRef, HTMLAttributes, ShallowRef } from "vue";
+import { PrimitiveWithBaseProps } from "../primitive/types.js";
+import { CSSProperties, ComputedRef, ShallowRef } from "vue";
 
 //#region src/components/color-area/types.d.ts
 /**
@@ -12,7 +12,7 @@ type ColorAreaAxisChannel = Extract<ColorChannel, 'hue' | 'saturation' | 'lightn
 /**
  * Properties for the ColorAreaRoot component.
  */
-interface ColorAreaRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */HTMLAttributes {
+interface ColorAreaRootProps extends FormFieldCommonProps, Omit<PrimitiveWithBaseProps, 'onChange'> {
   /**
    * Current model value.
    */
@@ -74,11 +74,28 @@ type ColorAreaRootEmits = {
 /**
  * Properties for the ColorAreaArea component.
  */
-interface ColorAreaAreaProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+interface ColorAreaAreaProps extends PrimitiveWithBaseProps {}
 /**
  * Properties for the ColorAreaThumb component.
  */
-interface ColorAreaThumbProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+interface ColorAreaThumbProps extends PrimitiveWithBaseProps {}
+/**
+ * Properties for the ColorAreaCompact component.
+ */
+interface ColorAreaCompactProps extends ColorAreaRootProps {
+  /**
+   * Properties forwarded to the area element.
+   */
+  areaProps?: ColorAreaAreaProps;
+  /**
+   * Properties forwarded to the thumb element.
+   */
+  thumbProps?: ColorAreaThumbProps;
+}
+/**
+ * Events for the ColorAreaCompact component.
+ */
+type ColorAreaCompactEmits = ColorAreaRootEmits;
 /**
  * Available UI slots for the ColorArea component.
  */
@@ -88,4 +105,4 @@ type ColorAreaUiSlot = 'root' | 'area' | 'thumb';
  */
 type ColorAreaUi = UiClass<ColorAreaUiSlot>;
 //#endregion
-export { ColorAreaAreaProps, ColorAreaAxisChannel, ColorAreaRootEmits, ColorAreaRootProps, ColorAreaThumbProps, ColorAreaUi, ColorAreaUiSlot };
+export { ColorAreaAreaProps, ColorAreaAxisChannel, ColorAreaCompactEmits, ColorAreaCompactProps, ColorAreaRootEmits, ColorAreaRootProps, ColorAreaThumbProps, ColorAreaUi, ColorAreaUiSlot };

package/dist/components/color-field/color-field-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-field-input.js";import r from"./color-field-root.js";import{createBlock as i,createVNode as a,defineComponent as o,guardReactiveProps as s,mergeProps as c,normalizeProps as l,openBlock as u,toHandlers as d,unref as f,withCtx as p}from"vue";const m=o({name:`ColorFieldCompact`,inheritAttrs:!1,__name:`color-field-compact`,props:{inputProps:{},modelValue:{},defaultValue:{},colorSpace:{},channel:{},format:{},placeholder:{},disabled:{type:Boolean},readonly:{type:Boolean},disableWheelChange:{type:Boolean},step:{},name:{},required:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:color`],setup(o,{emit:m}){let h=o,g=m,_=t(h,[`inputProps`]),v=e(g);return(e,t)=>(u(),i(r,c(f(_),d(f(v))),{default:p(()=>[a(n,l(s(o.inputProps)),null,16)]),_:1},16))}});export{m as default};

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

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

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,12 +16,11 @@ 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;
+  colorSpace: ColorSpace;
   disableWheelChange: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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};