@soybeanjs/ui 0.17.0 → 0.19.0

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

@@ -1,17 +1,17 @@
 import { ColorAreaProps } from "./types.js";
 import * as _$vue from "vue";
-import * as _$_soybeanjs_headless_shared0 from "@soybeanjs/headless/shared";
+import * as _$_soybeanjs_headless_types0 from "@soybeanjs/headless/types";
 
 //#region src/components/color-area/color-area.vue.d.ts
 declare const __VLS_export: _$vue.DefineComponent<ColorAreaProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  "update:modelValue": (value: string) => any;
   change: (value: string) => any;
-  "update:color": (value: _$_soybeanjs_headless_shared0.NormalizedColor) => any;
+  "update:modelValue": (value: string) => any;
+  "update:color": (value: _$_soybeanjs_headless_types0.NormalizedColor) => any;
   changeEnd: (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<ColorAreaProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onChange?: ((value: string) => any) | undefined;
-  "onUpdate:color"?: ((value: _$_soybeanjs_headless_shared0.NormalizedColor) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  "onUpdate:color"?: ((value: _$_soybeanjs_headless_types0.NormalizedColor) => any) | undefined;
   onChangeEnd?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,12 +1,12 @@
 import { ThemeSize } from "../../theme/types.js";
-import { ColorAreaAreaProps, ColorAreaRootEmits, ColorAreaRootProps, ColorAreaThumbProps, ColorAreaUi } from "@soybeanjs/headless/color-area";
+import { ColorAreaCompactEmits, ColorAreaCompactProps, ColorAreaUi } from "@soybeanjs/headless/color-area";
 import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/color-area/types.d.ts
 /**
- * Props for the color area component.
+ * Properties for the ColorArea component.
  */
-interface ColorAreaProps extends ColorAreaRootProps {
+interface ColorAreaProps extends ColorAreaCompactProps {
   /**
    * Additional class names applied to the root element.
    */
@@ -19,18 +19,10 @@ interface ColorAreaProps extends ColorAreaRootProps {
    * Per-slot class overrides for the component.
    */
   ui?: Partial<ColorAreaUi>;
-  /**
-   * Props forwarded to the area element.
-   */
-  areaProps?: ColorAreaAreaProps;
-  /**
-   * Props forwarded to the thumb element.
-   */
-  thumbProps?: ColorAreaThumbProps;
 }
 /**
- * Emits for the color area component.
+ * Events for the ColorArea component.
  */
-type ColorAreaEmits = ColorAreaRootEmits;
+type ColorAreaEmits = ColorAreaCompactEmits;
 //#endregion
 export { ColorAreaEmits, ColorAreaProps };

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

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{colorFieldVariants as t}from"./variants.js";import{computed as n,createBlock as r,createVNode as i,defineComponent as a,guardReactiveProps as o,mergeProps as s,normalizeProps as c,openBlock as l,toHandlers as u,unref as d,useAttrs as f,withCtx as p}from"vue";import{useForwardListeners as m,useOmitProps as h}from"@soybeanjs/headless/composables";import{ColorFieldInput as g,ColorFieldRoot as _,provideColorFieldUi as v}from"@soybeanjs/headless/color-field";const y=a({name:`SColorField`,inheritAttrs:!1,__name:`color-field`,props:{class:{},size:{},ui:{},inputProps:{},modelValue:{},defaultValue:{},colorSpace:{},channel:{},format:{},placeholder:{},disabled:{type:Boolean},readonly:{type:Boolean},disableWheelChange:{type:Boolean},step:{},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:color`],setup(a,{emit:y}){let b=a,x=y,S=f(),C=m(x),w=h(b,[`class`,`size`,`ui`,`inputProps`]);return v(n(()=>e(t({size:b.size}),b.ui,{root:b.class}))),(e,t)=>(l(),r(d(_),s(d(w),u(d(C))),{default:p(()=>[i(d(g),c(o({...a.inputProps,...d(S)})),null,16)]),_:1},16))}});export{y as default};
+import{mergeVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{colorFieldVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,toHandlers as s,unref as c}from"vue";import{useForwardListeners as l,useOmitProps as u}from"@soybeanjs/headless/composables";import{ColorFieldCompact as d,provideColorFieldUi as f}from"@soybeanjs/headless/color-field";const p=i({name:`SColorField`,__name:`color-field`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},ui:{},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(i,{emit:p}){let m=i,h=l(p),g=u(m,[`class`,`size`,`ui`]);return f(n(()=>e(t({size:m.size}),m.ui,{root:m.class}))),(e,t)=>(o(),r(c(d),a(c(g),s(c(h))),null,16))}});export{p as default};

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

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

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

@@ -1,12 +1,12 @@
 import { ThemeSize } from "../../theme/types.js";
-import { ColorFieldInputProps, ColorFieldRootEmits, ColorFieldRootProps, ColorFieldUi } from "@soybeanjs/headless/color-field";
+import { ColorFieldCompactEmits, ColorFieldCompactProps, ColorFieldUi } from "@soybeanjs/headless/color-field";
 import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/color-field/types.d.ts
 /**
- * Props for the color field component.
+ * Properties for the ColorField component.
  */
-interface ColorFieldProps extends ColorFieldRootProps {
+interface ColorFieldProps extends ColorFieldCompactProps {
   /**
    * Additional class names applied to the root element.
    */
@@ -19,14 +19,10 @@ interface ColorFieldProps extends ColorFieldRootProps {
    * Per-slot class overrides for the component.
    */
   ui?: Partial<ColorFieldUi>;
-  /**
-   * Props forwarded to the input element.
-   */
-  inputProps?: ColorFieldInputProps;
 }
 /**
- * Emits for the color field component.
+ * Events for the ColorField component.
  */
-type ColorFieldEmits = ColorFieldRootEmits;
+type ColorFieldEmits = ColorFieldCompactEmits;
 //#endregion
 export { ColorFieldEmits, ColorFieldProps };

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

@@ -1 +1 @@
-import{tv as e}from"tailwind-variants";const t=e({slots:{root:[`group flex items-center rounded-md border border-input bg-background transition-all-150`,`outline-none focus-within:ring-3 focus-within:ring-offset-background focus-within:ring-primary/30`,`data-[disabled]:opacity-60 data-[readonly]:bg-muted/40`],input:[`flex-1 min-w-0 bg-transparent outline-none`,`placeholder:text-muted-foreground`,`disabled:cursor-not-allowed disabled:opacity-50`]},variants:{size:{xs:{root:`h-6 px-1.5 text-2xs gap-1`},sm:{root:`h-7 px-2 text-xs gap-1.5`},md:{root:`h-8 px-2.5 text-sm gap-2`},lg:{root:`h-9 px-3 text-base gap-2.5`},xl:{root:`h-10 px-3.5 text-lg gap-3`},"2xl":{root:`h-12 px-4 text-xl gap-3.5`}}},defaultVariants:{size:`md`}});export{t as colorFieldVariants};
+import{tv as e}from"tailwind-variants";const t=e({slots:{root:[`group flex items-center min-w-0 rounded-md border border-input bg-background transition-all-150`,`outline-none focus-within:ring-3 focus-within:ring-offset-background focus-within:ring-primary/30`,`data-[disabled]:opacity-60 data-[readonly]:bg-muted/40`],input:[`flex-1 min-w-0 bg-transparent outline-none`,`placeholder:text-muted-foreground`,`disabled:cursor-not-allowed disabled:opacity-50`]},variants:{size:{xs:{root:`h-6 px-1.5 text-2xs gap-1`},sm:{root:`h-7 px-2 text-xs gap-1.5`},md:{root:`h-8 px-2.5 text-sm gap-2`},lg:{root:`h-9 px-3 text-base gap-2.5`},xl:{root:`h-10 px-3.5 text-lg gap-3`},"2xl":{root:`h-12 px-4 text-xl gap-3.5`}}},defaultVariants:{size:`md`}});export{t as colorFieldVariants};

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

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import{miniSizeMap as t}from"../../theme/config.js";import"../../theme/index.js";import n from"../button/button.js";import r from"../color-area/color-area.js";import i from"../color-field/color-field.js";import a from"../color-slider/color-slider.js";import o from"../color-swatch-picker/color-swatch-picker.js";import s from"../color-swatch/color-swatch.js";import c from"../popover/popover.js";import l from"../segment/segment.js";import{COLOR_PICKER_FORMATS as u,DEFAULT_COLOR_PICKER_SWATCHES as d,resolveColorPickerFormat as f}from"./shared.js";import{colorPickerVariants as p}from"./variants.js";import{computed as m,createBlock as h,createCommentVNode as g,createElementBlock as _,createElementVNode as v,createVNode as y,defineComponent as b,mergeProps as x,normalizeClass as S,openBlock as C,renderSlot as w,shallowRef as T,toDisplayString as E,unref as D,watch as O,withCtx as k}from"vue";import{useControllableState as A,usePickProps as j}from"@soybeanjs/headless/composables";import{areColorsEqual as M,formatColor as N,toColorObject as P}from"@soybeanjs/headless/shared";const F=b({name:`SColorPicker`,__name:`color-picker`,props:{class:{},size:{},ui:{},modelValue:{default:void 0},defaultValue:{default:`#7f007f`},format:{default:void 0},defaultFormat:{default:void 0},disabled:{type:Boolean,default:!1},colorSpace:{default:`hsl`},showAlpha:{type:Boolean,default:!0},showFields:{type:Boolean,default:!0},showSwatches:{type:Boolean,default:!0},swatches:{default:()=>d},triggerButtonProps:{},areaProps:{},hueSliderProps:{},alphaSliderProps:{},alphaFieldProps:{},hexFieldProps:{},fieldProps:{},swatchPickerProps:{},swatchProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},modal:{type:Boolean,default:!1},placement:{default:`bottom`},showArrow:{type:Boolean,default:!0},positionerProps:{},popupProps:{},triggerProps:{},closeProps:{},portalProps:{},arrowProps:{}},emits:[`update:modelValue`,`update:color`,`update:format`,`update:open`,`change`],setup(d,{emit:b}){let F=d,I=b,L=A(()=>F.format,e=>{I(`update:format`,e)},f(F.defaultFormat,F.modelValue??F.defaultValue)),R=T(F.modelValue??F.defaultValue),z=T(),B=m(()=>e(p({size:F.size}),F.ui,{popup:F.class})),V=m(()=>t[F.size??`md`]),H=m(()=>N(R.value,`hex`)),U=m(()=>f(L.value,R.value)),W=m(()=>N(R.value,U.value)),G=m(()=>U.value.toUpperCase()),K=m(()=>U.value===`hex`?F.hexFieldProps:F.fieldProps),q=m(()=>F.alphaFieldProps??F.fieldProps),J=m(()=>u.map(e=>({value:e,label:e.toUpperCase()}))),Y=m(()=>F.colorSpace===`oklch`?`chroma`:`saturation`),X=m(()=>F.colorSpace===`hsv`?`brightness`:`lightness`),Z=j(F,[`open`,`defaultOpen`,`modal`,`placement`,`showArrow`,`positionerProps`,`popupProps`,`triggerProps`,`closeProps`,`portalProps`,`arrowProps`]);O(()=>F.modelValue,e=>{e!=null&&(typeof e==`string`&&e===z.value||M(e,R.value)||(R.value=e))},{immediate:!0});function Q(e){let t=F.colorSpace;return P(e,t)}function $(e){let t=N(e,U.value);R.value=e,z.value=t,I(`update:modelValue`,t),I(`update:color`,Q(e)),I(`change`,t)}function ee(e){U.value!==e&&(L.value=e)}function te(e){$(e)}function ne(e){typeof e==`string`&&$(e)}return(e,t)=>(C(),h(c,x(D(Z),{class:B.value.popup,size:d.size,"onUpdate:open":t[0]||=e=>I(`update:open`,e)}),{trigger:k(()=>[w(e.$slots,`trigger`,{color:R.value,hex:H.value,value:W.value,format:U.value},()=>[y(n,x(d.triggerButtonProps,{size:d.size,disabled:d.disabled,color:`accent`,variant:`pure`}),{default:k(()=>[y(s,x(d.swatchProps,{class:B.value.triggerSwatch,color:H.value,size:V.value,shape:`circle`}),null,16,[`class`,`color`,`size`]),v(`span`,{class:S(B.value.triggerValue)},E(W.value),3)]),_:1},16,[`size`,`disabled`])])]),default:k(()=>[v(`div`,{class:S(B.value.content)},[y(l,{class:S(B.value.segment),"model-value":U.value,items:J.value,size:d.size,fill:`full`,disabled:d.disabled,"onUpdate:modelValue":ee},null,8,[`class`,`model-value`,`items`,`size`,`disabled`]),y(r,x(d.areaProps,{class:B.value.area,"model-value":R.value,"color-space":d.colorSpace,"x-channel":Y.value,"y-channel":X.value,disabled:d.disabled,"onUpdate:color":$}),null,16,[`class`,`model-value`,`color-space`,`x-channel`,`y-channel`,`disabled`]),v(`div`,{class:S(B.value.sliderSwatch)},[v(`div`,{class:S(B.value.sliderRoot)},[y(a,x(d.hueSliderProps,{size:d.size,"model-value":R.value,channel:`hue`,"color-space":d.colorSpace,disabled:d.disabled,"onUpdate:color":$}),null,16,[`size`,`model-value`,`color-space`,`disabled`]),d.showAlpha?(C(),h(a,x({key:0},d.alphaSliderProps,{size:d.size,"model-value":R.value,channel:`alpha`,"color-space":d.colorSpace,disabled:d.disabled,"onUpdate:color":$}),null,16,[`size`,`model-value`,`color-space`,`disabled`])):g(`v-if`,!0)],2),y(s,x(d.swatchProps,{size:d.size,color:H.value,class:B.value.swatch}),null,16,[`size`,`color`,`class`])],2),d.showFields?(C(),_(`div`,{key:0,class:S(B.value.fields)},[y(i,x(K.value,{size:d.size,class:B.value.field,"model-value":H.value,format:U.value,placeholder:G.value,disabled:d.disabled,"onUpdate:modelValue":te}),null,16,[`size`,`class`,`model-value`,`format`,`placeholder`,`disabled`]),d.showAlpha?(C(),h(i,x({key:0},q.value,{size:d.size,class:B.value.alphaField,"model-value":R.value,channel:`alpha`,"color-space":d.colorSpace,disabled:d.disabled,"onUpdate:color":$}),null,16,[`size`,`class`,`model-value`,`color-space`,`disabled`])):g(`v-if`,!0)],2)):g(`v-if`,!0),d.showSwatches&&d.swatches.length?(C(),h(o,x({key:1},d.swatchPickerProps,{size:d.size,class:B.value.swatches,colors:d.swatches,"model-value":H.value,disabled:d.disabled,"onUpdate:modelValue":ne}),null,16,[`size`,`class`,`colors`,`model-value`,`disabled`])):g(`v-if`,!0)],2)]),_:3},16,[`class`,`size`]))}});export{F as default};
+import{mergeVariants as e}from"../../theme/shared.js";import{miniSizeMap as t}from"../../theme/config.js";import"../../theme/index.js";import{buttonIconVariants as n,buttonVariants as r}from"../button/variants.js";import{colorAreaVariants as i}from"../color-area/variants.js";import{colorFieldVariants as a}from"../color-field/variants.js";import{popoverVariants as o}from"../popover/variants.js";import{colorSwatchVariants as s}from"../color-swatch/variants.js";import{colorSwatchPickerVariants as c}from"../color-swatch-picker/variants.js";import{sliderVariants as l}from"../slider/variants.js";import{tabsVariants as u}from"../tabs/variants.js";import{colorPickerVariants as d}from"./variants.js";import{computed as f,createBlock as p,defineComponent as m,mergeProps as h,openBlock as g,toHandlers as _,unref as v}from"vue";import{useForwardListeners as y,useOmitProps as b}from"@soybeanjs/headless/composables";import{provideColorAreaUi as x}from"@soybeanjs/headless/color-area";import{provideColorFieldUi as S}from"@soybeanjs/headless/color-field";import{ColorPickerCompact as C,provideColorPickerUi as w}from"@soybeanjs/headless/color-picker";import{provideColorSwatchUi as T}from"@soybeanjs/headless/color-swatch";import{provideColorSwatchPickerUi as E}from"@soybeanjs/headless/color-swatch-picker";import{provideColorSliderUi as D}from"@soybeanjs/headless/color-slider";import{providePopoverUi as O}from"@soybeanjs/headless/popover";import{provideTabsUi as k}from"@soybeanjs/headless/tabs";const A=m({name:`SColorPicker`,__name:`color-picker`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},ui:{},showAlpha:{type:Boolean,default:!0},showFields:{type:Boolean,default:!0},showSwatches:{type:Boolean,default:!0},swatches:{},swatchProps:{},segmentProps:{},areaProps:{},hueSliderProps:{},alphaSliderProps:{},alphaFieldProps:{},fieldProps:{},swatchPickerProps:{},modelValue:{},defaultValue:{},format:{},defaultFormat:{},colorSpace:{},disabled:{type:Boolean},name:{},required:{type:Boolean},placement:{},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(m,{emit:A}){let j=m,M=A,N=b(j,[`class`,`size`,`ui`]),P=y(M),F=f(()=>t[j.size??`md`]),I=f(()=>{let t=d({size:j.size});return e(Object.assign(t,{$base:{trigger:r({size:j.size,variant:`pure`}),close:n({size:F.value})}}),j.ui,{trigger:j.class})}),L=f(()=>e(Object.assign(o({size:j.size}),{$base:{close:n({size:F.value})}}),j.ui)),R=f(()=>e(i({size:j.size}))),z=f(()=>e(a({size:j.size}))),B=f(()=>e(s({size:j.size,shape:`square`}))),V=f(()=>e(c({size:j.size,shape:`square`}))),H=f(()=>e(l({size:j.size}))),U=f(()=>e(u({size:j.size,orientation:`horizontal`,shape:`square`,fill:`auto`,enableIndicator:!0})));return w(I),O(L),x(R),S(z),E(V),D(H),T(B),k(U),(e,t)=>(g(),p(v(C),h(v(N),_(v(P))),null,16))}});export{A as default};

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

@@ -1,55 +1,40 @@
 import { ColorPickerProps } from "./types.js";
 import * as _$vue from "vue";
-import * as _$_soybeanjs_headless_shared0 from "@soybeanjs/headless/shared";
-import { ColorFormat, ColorSpace, ColorValue } from "@soybeanjs/headless/shared";
 import * as _$_soybeanjs_headless0 from "@soybeanjs/headless";
-import * as _$_soybeanjs_colord0 from "@soybeanjs/colord";
+import * as _$_soybeanjs_headless_types0 from "@soybeanjs/headless/types";
 
 //#region src/components/color-picker/color-picker.vue.d.ts
-declare var __VLS_11: {
-  color: _$_soybeanjs_colord0.AnyColor;
-  hex: string;
-  value: string;
-  format: ColorFormat;
-};
-type __VLS_Slots = {} & {
-  trigger?: (props: typeof __VLS_11) => any;
-};
-declare const __VLS_base: _$vue.DefineComponent<ColorPickerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+declare const __VLS_export: _$vue.DefineComponent<ColorPickerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:open": (value: boolean) => any;
-  "update:modelValue": (value: string) => any;
+  escapeKeyDown: (event: KeyboardEvent) => any;
+  pointerDownOutside: (event: _$_soybeanjs_headless0.PointerDownOutsideEvent) => any;
+  focusOutside: (event: _$_soybeanjs_headless0.FocusOutsideEvent) => any;
+  interactOutside: (event: _$_soybeanjs_headless0.PointerDownOutsideEvent | _$_soybeanjs_headless0.FocusOutsideEvent) => any;
+  openAutoFocus: (event: Event) => any;
+  closeAutoFocus: (event: Event) => any;
   change: (value: string) => any;
-  "update:color": (value: _$_soybeanjs_headless_shared0.NormalizedColor) => any;
-  "update:format": (value: ColorFormat) => any;
+  "update:modelValue": (value: string) => any;
+  "update:color": (value: _$_soybeanjs_headless_types0.NormalizedColor) => any;
+  "update:format": (value: _$_soybeanjs_headless_types0.ColorFormat) => any;
 }, string, _$vue.PublicProps, Readonly<ColorPickerProps> & Readonly<{
   "onUpdate:open"?: ((value: boolean) => any) | undefined;
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+  onPointerDownOutside?: ((event: _$_soybeanjs_headless0.PointerDownOutsideEvent) => any) | undefined;
+  onFocusOutside?: ((event: _$_soybeanjs_headless0.FocusOutsideEvent) => any) | undefined;
+  onInteractOutside?: ((event: _$_soybeanjs_headless0.PointerDownOutsideEvent | _$_soybeanjs_headless0.FocusOutsideEvent) => any) | undefined;
+  onOpenAutoFocus?: ((event: Event) => any) | undefined;
+  onCloseAutoFocus?: ((event: Event) => any) | undefined;
   onChange?: ((value: string) => any) | undefined;
-  "onUpdate:color"?: ((value: _$_soybeanjs_headless_shared0.NormalizedColor) => any) | undefined;
-  "onUpdate:format"?: ((value: ColorFormat) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  "onUpdate:color"?: ((value: _$_soybeanjs_headless_types0.NormalizedColor) => any) | undefined;
+  "onUpdate:format"?: ((value: _$_soybeanjs_headless_types0.ColorFormat) => any) | undefined;
 }>, {
-  disabled: boolean;
   open: boolean;
-  defaultOpen: boolean;
-  modal: boolean;
-  defaultValue: string | ColorValue;
-  modelValue: string | ColorValue;
-  colorSpace: ColorSpace;
-  format: ColorFormat;
-  placement: _$_soybeanjs_headless0.Placement;
-  showArrow: boolean;
-  defaultFormat: ColorFormat;
   showAlpha: boolean;
   showFields: boolean;
   showSwatches: boolean;
-  swatches: string[];
+  showArrow: boolean;
 }, {}, {}, {}, 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/index.d.ts

@@ -1,3 +1,3 @@
-import { ColorPickerEmits, ColorPickerProps, ColorPickerUi, ColorPickerUiSlot } from "./types.js";
+import { ColorPickerEmits, ColorPickerProps } from "./types.js";
 import { _default } from "./color-picker.vue.js";
 export * from "@soybeanjs/headless/color-picker";

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

@@ -1,29 +1,14 @@
 import { ThemeSize } from "../../theme/types.js";
-import { ButtonProps } from "../button/types.js";
-import { ColorAreaProps } from "../color-area/types.js";
-import { ColorFieldProps } from "../color-field/types.js";
-import { ColorSliderProps } from "../color-slider/types.js";
-import { ColorSwatchProps } from "../color-swatch/types.js";
-import { ColorSwatchPickerProps } from "../color-swatch-picker/types.js";
-import { PopoverProps } from "../popover/types.js";
-import { ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "@soybeanjs/headless/shared";
-import { ClassValue, UiClass } from "@soybeanjs/headless/types";
+import { ColorPickerCompactEmits, ColorPickerCompactProps, ColorPickerUi } from "@soybeanjs/headless/color-picker";
+import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/color-picker/types.d.ts
 /**
- * Available UI slots for the color picker component.
+ * Properties for the ColorPicker component.
  */
-type ColorPickerUiSlot = 'popup' | 'content' | 'trigger' | 'triggerSwatch' | 'triggerValue' | 'formatSelect' | 'area' | 'slider' | 'alphaRow' | 'alphaSwatch' | 'fields' | 'hexField' | 'field' | 'alphaField' | 'swatches';
-/**
- * UI class overrides for the color picker component.
- */
-type ColorPickerUi = UiClass<ColorPickerUiSlot>;
-/**
- * Props for the color picker component.
- */
-interface ColorPickerProps extends Pick<PopoverProps, 'open' | 'defaultOpen' | 'modal' | 'placement' | 'showArrow' | 'positionerProps' | 'popupProps' | 'triggerProps' | 'closeProps' | 'portalProps' | 'arrowProps'> {
+interface ColorPickerProps extends ColorPickerCompactProps {
   /**
-   * Additional class names applied to the root element.
+   * Additional class names applied to the trigger element.
    */
   class?: ClassValue;
   /**
@@ -34,107 +19,10 @@ interface ColorPickerProps extends Pick<PopoverProps, 'open' | 'defaultOpen' | '
    * Per-slot class overrides for the component.
    */
   ui?: Partial<ColorPickerUi>;
-  /**
-   * Current model value.
-   */
-  modelValue?: string | ColorValue;
-  /**
-   * Default value.
-   */
-  defaultValue?: string | ColorValue;
-  /**
-   * Format.
-   */
-  format?: ColorFormat;
-  /**
-   * Default format.
-   */
-  defaultFormat?: ColorFormat;
-  /**
-   * Whether the component is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Color space.
-   */
-  colorSpace?: ColorSpace;
-  /**
-   * Whether to show an alpha.
-   */
-  showAlpha?: boolean;
-  /**
-   * Whether to show a fields.
-   */
-  showFields?: boolean;
-  /**
-   * Whether to show a swatches.
-   */
-  showSwatches?: boolean;
-  /**
-   * Swatches.
-   */
-  swatches?: string[];
-  /**
-   * Props forwarded to the trigger button element.
-   */
-  triggerButtonProps?: ButtonProps;
-  /**
-   * Props forwarded to the area element.
-   */
-  areaProps?: Omit<ColorAreaProps, 'modelValue' | 'defaultValue' | 'disabled' | 'colorSpace' | 'format' | 'xChannel' | 'yChannel' | 'onChange' | 'onChangeEnd'>;
-  /**
-   * Props forwarded to the hue slider element.
-   */
-  hueSliderProps?: Omit<ColorSliderProps, 'modelValue' | 'defaultValue' | 'channel' | 'colorSpace' | 'disabled' | 'format' | 'onChange' | 'onChangeEnd'>;
-  /**
-   * Props forwarded to the alpha slider element.
-   */
-  alphaSliderProps?: Omit<ColorSliderProps, 'modelValue' | 'defaultValue' | 'channel' | 'colorSpace' | 'disabled' | 'format' | 'onChange' | 'onChangeEnd'>;
-  /**
-   * Props forwarded to the alpha field element.
-   */
-  alphaFieldProps?: Omit<ColorFieldProps, 'modelValue' | 'defaultValue' | 'disabled' | 'channel' | 'colorSpace' | 'format'>;
-  /**
-   * Props forwarded to the hex field element.
-   */
-  hexFieldProps?: Omit<ColorFieldProps, 'modelValue' | 'defaultValue' | 'disabled' | 'channel' | 'colorSpace' | 'format'>;
-  /**
-   * Props forwarded to the field element.
-   */
-  fieldProps?: Omit<ColorFieldProps, 'modelValue' | 'defaultValue' | 'disabled' | 'channel' | 'colorSpace' | 'format'>;
-  /**
-   * Props forwarded to the swatch picker element.
-   */
-  swatchPickerProps?: Omit<ColorSwatchPickerProps, 'modelValue' | 'defaultValue' | 'colors' | 'disabled'>;
-  /**
-   * Props forwarded to the swatch element.
-   */
-  swatchProps?: Omit<ColorSwatchProps, 'class' | 'color' | 'size'>;
 }
 /**
- * Emits for the color picker component.
+ * Events for the ColorPicker component.
  */
-type ColorPickerEmits = {
-  /**
-   * Emitted when the model value changes.
-   */
-  'update:modelValue': [value: string];
-  /**
-   * Emitted when the color value changes.
-   */
-  'update:color': [value: NormalizedColor];
-  /**
-   * Emitted when the format value changes.
-   */
-  'update:format': [value: ColorFormat];
-  /**
-   * Emitted when the open state changes.
-   */
-  'update:open': [value: boolean];
-  /**
-   * Emitted when change occurs.
-   */
-  change: [value: string];
-};
+type ColorPickerEmits = ColorPickerCompactEmits;
 //#endregion
-export { ColorPickerEmits, ColorPickerProps, ColorPickerUi, ColorPickerUiSlot };
+export { ColorPickerEmits, ColorPickerProps };

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

@@ -1 +1 @@
-import{tv as e}from"tailwind-variants";const t=e({slots:{popup:``,content:`flex flex-col`,triggerButton:``,triggerSwatch:`shrink-0`,triggerValue:`min-w-0 flex-1 truncate text-left font-mono text-xs`,segment:``,area:`w-full`,sliderSwatch:`flex items-center`,sliderRoot:`flex-1`,swatch:`shrink-0`,fields:`flex items-center`,field:`min-w-0 flex-1 truncate`,alphaField:`shrink-0`,swatches:``},variants:{size:{xs:{popup:`p-1.5`,content:`w-45 gap-1.5`,area:`h-30`,sliderSwatch:`gap-1.5`,fields:`gap-1.5`,alphaField:`w-12`},sm:{popup:`p-1.75`,content:`w-52.5 gap-1.75`,area:`h-35`,sliderSwatch:`gap-1.75`,fields:`gap-1.75`,alphaField:`w-15`},md:{popup:`p-2`,content:`w-60 gap-2`,area:`h-40`,sliderSwatch:`gap-2`,fields:`gap-2`,alphaField:`w-16`},lg:{popup:`p-2.5`,content:`w-63.75 gap-2.5`,area:`h-42.5`,sliderSwatch:`gap-2.5`,fields:`gap-2.5`,alphaField:`w-18`},xl:{popup:`p-3`,content:`w-67.5 gap-3`,area:`h-45`,sliderSwatch:`gap-3`,fields:`gap-3`,alphaField:`w-20`},"2xl":{popup:`p-4`,content:`w-80 gap-4`,area:`h-50`,sliderSwatch:`gap-4`,fields:`gap-4`,alphaField:`w-25`}}},defaultVariants:{size:`md`}});export{t as colorPickerVariants};
+import{tv as e}from"tailwind-variants";const t=e({slots:{popup:``,content:`flex flex-col`,trigger:``,triggerSwatch:``,triggerValue:`min-w-0 flex-1 truncate text-left font-mono text-xs`,segment:``,area:``,sliderSwatch:`flex items-center`,sliderRoot:`flex-1`,swatch:``,fields:`grid grid-cols-[2fr_1fr]`,field:``,alphaField:``,swatchPicker:``},variants:{size:{xs:{popup:`p-1.5`,content:`w-45 gap-1.5`,area:`h-30`,sliderSwatch:`gap-1.5`,fields:`gap-1.5`,alphaField:`w-12`},sm:{popup:`p-1.75`,content:`w-52.5 gap-1.75`,area:`h-35`,sliderSwatch:`gap-1.75`,fields:`gap-1.75`,alphaField:`w-15`},md:{popup:`p-2`,content:`w-60 gap-2`,area:`h-40`,sliderSwatch:`gap-2`,fields:`gap-2`,alphaField:`w-16`},lg:{popup:`p-2.5`,content:`w-63.75 gap-2.5`,area:`h-42.5`,sliderSwatch:`gap-2.5`,fields:`gap-2.5`,alphaField:`w-18`},xl:{popup:`p-3`,content:`w-67.5 gap-3`,area:`h-45`,sliderSwatch:`gap-3`,fields:`gap-3`,alphaField:`w-20`},"2xl":{popup:`p-4`,content:`w-80 gap-4`,area:`h-50`,sliderSwatch:`gap-4`,fields:`gap-4`,alphaField:`w-25`}}},defaultVariants:{size:`md`}});export{t as colorPickerVariants};

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

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{sliderVariants as t}from"../slider/variants.js";import{computed as n,createBlock as r,createVNode as i,defineComponent as a,guardReactiveProps as o,mergeProps as s,normalizeProps as c,openBlock as l,toHandlers as u,unref as d,withCtx as f}from"vue";import{useForwardListeners as p,useOmitProps as m}from"@soybeanjs/headless/composables";import{ColorSliderRoot as h,ColorSliderThumb as g,ColorSliderTrack as _,provideColorSliderUi as v}from"@soybeanjs/headless/color-slider";const y=a({name:`SColorSlider`,__name:`color-slider`,props:{class:{},color:{default:`accent`},size:{default:`md`},ui:{},trackProps:{},thumbProps:{},modelValue:{},defaultValue:{},colorSpace:{},channel:{},format:{},orientation:{},dir:{},inverted:{type:Boolean},disabled:{type:Boolean},step:{},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:color`,`change`,`changeEnd`],setup(a,{emit:y}){let b=a,x=p(y),S=m(b,[`class`,`size`,`ui`,`trackProps`,`thumbProps`,`onChange`]);return v(n(()=>e(t({color:b.color,size:b.size}),b.ui,{root:b.class}))),(e,t)=>(l(),r(d(h),s(d(S),u(d(x))),{default:f(()=>[i(d(_),c(o(a.trackProps)),null,16),i(d(g),c(o(a.thumbProps)),null,16)]),_:1},16))}});export{y as default};
+import{mergeVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{sliderVariants as t}from"../slider/variants.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,toHandlers as s,unref as c}from"vue";import{useForwardListeners as l,useOmitProps as u}from"@soybeanjs/headless/composables";import{ColorSliderCompact as d,provideColorSliderUi as f}from"@soybeanjs/headless/color-slider";const p=i({name:`SColorSlider`,__name:`color-slider`,props:{class:{type:[Boolean,null,String,Object,Array]},color:{default:`accent`},size:{default:`md`},ui:{},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(i,{emit:p}){let m=i,h=l(p),g=u(m,[`class`,`size`,`ui`]);return f(n(()=>e(t({color:m.color,size:m.size}),m.ui,{root:m.class}))),(e,t)=>(o(),r(c(d),a(c(g),s(c(h))),null,16))}});export{p as default};

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

@@ -1,18 +1,18 @@
 import { ThemeColor, ThemeSize } from "../../theme/types.js";
 import { ColorSliderProps } from "./types.js";
 import * as _$vue from "vue";
-import * as _$_soybeanjs_headless_shared0 from "@soybeanjs/headless/shared";
+import * as _$_soybeanjs_headless_types0 from "@soybeanjs/headless/types";
 
 //#region src/components/color-slider/color-slider.vue.d.ts
 declare const __VLS_export: _$vue.DefineComponent<ColorSliderProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  "update:modelValue": (value: string) => any;
   change: (value: string) => any;
-  "update:color": (value: _$_soybeanjs_headless_shared0.NormalizedColor) => any;
+  "update:modelValue": (value: string) => any;
+  "update:color": (value: _$_soybeanjs_headless_types0.NormalizedColor) => any;
   changeEnd: (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<ColorSliderProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onChange?: ((value: string) => any) | undefined;
-  "onUpdate:color"?: ((value: _$_soybeanjs_headless_shared0.NormalizedColor) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  "onUpdate:color"?: ((value: _$_soybeanjs_headless_types0.NormalizedColor) => any) | undefined;
   onChangeEnd?: ((value: string) => any) | undefined;
 }>, {
   color: ThemeColor;

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

@@ -1,12 +1,12 @@
 import { ThemeColor, ThemeSize } from "../../theme/types.js";
-import { ColorSliderRootEmits, ColorSliderRootProps, ColorSliderThumbProps, ColorSliderTrackProps, ColorSliderUi } from "@soybeanjs/headless/color-slider";
+import { ColorSliderCompactEmits, ColorSliderCompactProps, ColorSliderUi } from "@soybeanjs/headless/color-slider";
 import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/color-slider/types.d.ts
 /**
- * Props for the color slider component.
+ * Properties for the ColorSlider component.
  */
-interface ColorSliderProps extends ColorSliderRootProps {
+interface ColorSliderProps extends ColorSliderCompactProps {
   /**
    * Additional class names applied to the root element.
    */
@@ -23,18 +23,10 @@ interface ColorSliderProps extends ColorSliderRootProps {
    * Per-slot class overrides for the component.
    */
   ui?: Partial<ColorSliderUi>;
-  /**
-   * Props forwarded to the track element.
-   */
-  trackProps?: ColorSliderTrackProps;
-  /**
-   * Props forwarded to the thumb element.
-   */
-  thumbProps?: ColorSliderThumbProps;
 }
 /**
- * Emits for the color slider component.
+ * Events for the ColorSlider component.
  */
-type ColorSliderEmits = ColorSliderRootEmits;
+type ColorSliderEmits = ColorSliderCompactEmits;
 //#endregion
 export { ColorSliderEmits, ColorSliderProps };

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

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{colorSwatchVariants as t}from"./variants.js";import{computed as n,createBlock as r,createElementVNode as i,defineComponent as a,normalizeClass as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";import{ColorSwatch as d}from"@soybeanjs/headless/color-swatch";const f=a({name:`SColorSwatch`,__name:`color-swatch`,props:{class:{},size:{},ui:{},shape:{},color:{},label:{},asChild:{type:Boolean},as:{}},setup(a){let f=a,p=n(()=>e(t({size:f.size,shape:f.shape}),f.ui,{root:f.class}));return(e,t)=>(s(),r(l(d),{as:a.as,"as-child":a.asChild,class:o(p.value.root),color:a.color,label:a.label},{default:u(()=>[i(`span`,{class:o(p.value.checker)},null,2),i(`span`,{class:o(p.value.fill)},null,2),c(e.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`color`,`label`]))}});export{f as default};
+import{mergeVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{colorSwatchVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,guardReactiveProps as a,normalizeProps as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";import{useOmitProps as d}from"@soybeanjs/headless/composables";import{ColorSwatchCompact as f,provideColorSwatchUi as p}from"@soybeanjs/headless/color-swatch";const m=i({name:`SColorSwatch`,__name:`color-swatch`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},ui:{},shape:{},checkerProps:{},fillProps:{},color:{},label:{},asChild:{type:Boolean},as:{}},setup(i){let m=i,h=d(m,[`class`,`ui`,`size`,`shape`]);return p(n(()=>e(t({size:m.size,shape:m.shape}),m.ui,{root:m.class}))),(e,t)=>(s(),r(l(f),o(a(l(h))),{default:u(t=>[c(e.$slots,`default`,o(a(t)))]),_:3},16))}});export{m as default};

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

@@ -1,11 +1,8 @@
-import { ColorSwatchProps } from "./types.js";
+import { ColorSwatchProps, ColorSwatchSlots } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/color-swatch/color-swatch.vue.d.ts
-declare var __VLS_8: {};
-type __VLS_Slots = {} & {
-  default?: (props: typeof __VLS_8) => any;
-};
+type __VLS_Slots = ColorSwatchSlots;
 declare const __VLS_base: _$vue.DefineComponent<ColorSwatchProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColorSwatchProps> & Readonly<{}>, {}, {}, {}, {}, 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-swatch/index.d.ts

@@ -1,3 +1,4 @@
 import { ColorSwatchShape } from "./variants.js";
-import { ColorExtraUiSlot, ColorSwatchExtendedUi, ColorSwatchProps } from "./types.js";
-import { _default } from "./color-swatch.vue.js";
+import { ColorSwatchProps, ColorSwatchSlots } from "./types.js";
+import { _default } from "./color-swatch.vue.js";
+export * from "@soybeanjs/headless/color-swatch";

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

@@ -1,21 +1,13 @@
 import { ThemeSize } from "../../theme/types.js";
 import { ColorSwatchShape } from "./variants.js";
-import { ColorSwatchProps } from "@soybeanjs/headless/color-swatch";
-import { ClassValue, UiClass } from "@soybeanjs/headless/types";
+import { ColorSwatchCompactProps, ColorSwatchCompactSlots, ColorSwatchUi } from "@soybeanjs/headless/color-swatch";
+import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/color-swatch/types.d.ts
 /**
- * Additional UI slots for the color swatch component.
+ * Properties for the ColorSwatch component.
  */
-type ColorExtraUiSlot = 'checker' | 'fill';
-/**
- * Extended UI class overrides for the color swatch component.
- */
-type ColorSwatchExtendedUi = UiClass<ColorExtraUiSlot>;
-/**
- * Props for the color swatch component.
- */
-interface ColorSwatchProps$1 extends ColorSwatchProps {
+interface ColorSwatchProps extends ColorSwatchCompactProps {
   /**
    * Additional class names applied to the root element.
    */
@@ -27,11 +19,15 @@ interface ColorSwatchProps$1 extends ColorSwatchProps {
   /**
    * Per-slot class overrides for the component.
    */
-  ui?: Partial<ColorSwatchExtendedUi>;
+  ui?: Partial<ColorSwatchUi>;
   /**
    * Shape of the component.
    */
   shape?: ColorSwatchShape;
 }
+/**
+ * Slots for the ColorSwatch component.
+ */
+type ColorSwatchSlots = ColorSwatchCompactSlots;
 //#endregion
-export { ColorExtraUiSlot, ColorSwatchExtendedUi, ColorSwatchProps$1 as ColorSwatchProps };
+export { ColorSwatchProps, ColorSwatchSlots };

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

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import t from"../icon/icon.js";import{colorSwatchPickerVariants as n}from"./variants.js";import{Fragment as r,computed as i,createBlock as a,createElementBlock as o,createElementVNode as s,createVNode as c,defineComponent as l,mergeProps as u,normalizeClass as d,openBlock as f,renderList as p,renderSlot as m,toHandlers as h,unref as g,withCtx as _}from"vue";import{useForwardListeners as v,useOmitProps as y}from"@soybeanjs/headless/composables";import{ColorSwatchPickerItem as b,ColorSwatchPickerItemIndicator as x,ColorSwatchPickerItemSwatch as S,ColorSwatchPickerRoot as C,provideColorSwatchPickerUi as w}from"@soybeanjs/headless/color-swatch-picker";const T=l({name:`SColorSwatchPicker`,__name:`color-swatch-picker`,props:{class:{},size:{},ui:{},colors:{},shape:{default:`square`},itemProps:{},indicatorProps:{},swatchProps:{},asChild:{type:Boolean},as:{},orientation:{},dir:{},disabled:{type:Boolean},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},clearable:{type:Boolean},selectionBehavior:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`entryFocus`,`leave`,`select`],setup(l,{emit:T}){let E=l,D=v(T),O=y(E,[`class`,`size`,`ui`,`colors`,`shape`,`itemProps`,`indicatorProps`,`swatchProps`]),k=i(()=>e(n({size:E.size,shape:E.shape}),E.ui,{root:E.class}));return w(k),(e,n)=>(f(),a(g(C),u(g(O),h(g(D))),{default:_(()=>[l.colors?.length?(f(!0),o(r,{key:0},p(l.colors,n=>(f(),a(g(b),u({key:n,value:n},{ref_for:!0},l.itemProps),{default:_(()=>[c(g(S),u({ref_for:!0},l.swatchProps),{default:_(()=>[s(`span`,{class:d(k.value.checker)},null,2),s(`span`,{class:d(k.value.fill)},null,2)]),_:1},16),c(g(x),u({ref_for:!0},l.indicatorProps),{default:_(()=>[m(e.$slots,`indicator`,{color:n},()=>[c(t,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`]))),128)):m(e.$slots,`default`,{key:1})]),_:3},16))}});export{T as default};
+import{mergeVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{colorSwatchVariants as t}from"../color-swatch/variants.js";import{colorSwatchPickerVariants as n}from"./variants.js";import{computed as r,createBlock as i,createSlots as a,defineComponent as o,guardReactiveProps as s,mergeProps as c,normalizeProps as l,openBlock as u,renderSlot as d,toHandlers as f,unref as p,useSlots as m,withCtx as h}from"vue";import{useForwardListeners as g,useOmitProps as _}from"@soybeanjs/headless/composables";import{ColorSwatchPickerCompact as v,provideColorSwatchPickerUi as y}from"@soybeanjs/headless/color-swatch-picker";const b=o({name:`SColorSwatchPicker`,__name:`color-swatch-picker`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},ui:{},shape:{default:`square`},colors:{},itemProps:{},indicatorProps:{},swatchProps:{},orientation:{},dir:{},disabled:{type:Boolean},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},clearable:{type:Boolean},selectionBehavior:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`entryFocus`,`leave`,`select`],setup(o,{emit:b}){let x=o,S=b,C=m(),w=g(S),T=_(x,[`class`,`size`,`ui`,`shape`]);return y(r(()=>e(Object.assign(n({size:x.size,shape:x.shape}),{$alias:{variants:t({size:x.size}),map:{root:`swatchRoot`,checker:`swatchChecker`,fill:`swatchFill`}}}),x.ui,{root:x.class}))),(e,t)=>(u(),i(p(v),c(p(T),f(p(w))),a({_:2},[C.indicator?{name:`indicator`,fn:h(t=>[d(e.$slots,`indicator`,l(s(t)))]),key:`0`}:void 0,C.default?{name:`default`,fn:h(t=>[d(e.$slots,`default`,l(s(t)))]),key:`1`}:void 0]),1040))}});export{b as default};

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

@@ -5,13 +5,13 @@ import * as _$_soybeanjs_headless_composables0 from "@soybeanjs/headless/composa
 import * as _$_soybeanjs_headless0 from "@soybeanjs/headless";
 
 //#region src/components/color-swatch-picker/color-swatch-picker.vue.d.ts
-declare var __VLS_26: {
+type __VLS_Slots = {
+  default?: (props: {
+    modelValue: string | string[];
+  }) => any;
+  indicator?: (props: {
     color: string;
-  }, __VLS_33: {};
-type __VLS_Slots = {} & {
-  indicator?: (props: typeof __VLS_26) => any;
-} & {
-  default?: (props: typeof __VLS_33) => any;
+  }) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ColorSwatchPickerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   select: (event: _$_soybeanjs_headless0.SelectEvent<string>) => any;