@soybeanjs/ui 0.16.0 → 0.18.0

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

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{checkboxCardVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";import{useOmitProps as u}from"@soybeanjs/headless/composables";import{CheckboxCardCompact as d,provideCheckboxCardUi as f}from"@soybeanjs/headless";const p=i({name:`SCheckboxCard`,__name:`checkbox-card`,props:{class:{},ui:{},color:{},size:{},shape:{},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(i,{emit:p}){let m=i,h=p,g=u(m,[`class`,`ui`,`color`,`size`,`shape`]);return f(n(()=>e(t({color:m.color,size:m.size,shape:m.shape}),m.ui,{root:m.class}))),(e,t)=>(o(),r(c(d),a(c(g),{"onUpdate:modelValue":t[0]||=e=>h(`update:modelValue`,e)}),{description:l(()=>[s(e.$slots,`description`)]),default:l(()=>[s(e.$slots,`default`)]),_:3},16))}});export{p as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{checkboxCardVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";import{useOmitProps as u}from"@soybeanjs/headless/composables";import{CheckboxCardCompact as d,provideCheckboxCardUi as f}from"@soybeanjs/headless/checkbox";const p=i({name:`SCheckboxCard`,__name:`checkbox-card`,props:{class:{type:[Boolean,null,String,Object,Array]},ui:{},color:{},size:{},shape:{},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(i,{emit:p}){let m=i,h=p,g=u(m,[`class`,`ui`,`color`,`size`,`shape`]);return f(n(()=>e(t({color:m.color,size:m.size,shape:m.shape}),m.ui,{root:m.class}))),(e,t)=>(o(),r(c(d),a(c(g),{"onUpdate:modelValue":t[0]||=e=>h(`update:modelValue`,e)}),{description:l(()=>[s(e.$slots,`description`)]),default:l(()=>[s(e.$slots,`default`)]),_:3},16))}});export{p as default};

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

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{checkboxVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,unref as s}from"vue";import{useOmitProps as c}from"@soybeanjs/headless/composables";import{CheckboxGroupCompact as l,provideCheckboxUi as u}from"@soybeanjs/headless";const d=i({name:`SCheckboxGroup`,__name:`checkbox-group`,props:{class:{},ui:{},color:{},size:{},shape:{},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(i,{emit:d}){let f=i,p=d,m=c(f,[`class`,`ui`,`color`,`size`,`shape`]);return u(n(()=>e(t({color:f.color,size:f.size,shape:f.shape,orientation:f.orientation}),f.ui,{groupRoot:f.class}))),(e,t)=>(o(),r(s(l),a(s(m),{"onUpdate:modelValue":t[0]||=e=>p(`update:modelValue`,e)}),null,16))}});export{d as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{checkboxVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,unref as s}from"vue";import{useOmitProps as c}from"@soybeanjs/headless/composables";import{CheckboxGroupCompact as l,provideCheckboxUi as u}from"@soybeanjs/headless/checkbox";const d=i({name:`SCheckboxGroup`,__name:`checkbox-group`,props:{class:{type:[Boolean,null,String,Object,Array]},ui:{},color:{},size:{},shape:{},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(i,{emit:d}){let f=i,p=d,m=c(f,[`class`,`ui`,`color`,`size`,`shape`]);return u(n(()=>e(t({color:f.color,size:f.size,shape:f.shape,orientation:f.orientation}),f.ui,{groupRoot:f.class}))),(e,t)=>(o(),r(s(l),a(s(m),{"onUpdate:modelValue":t[0]||=e=>p(`update:modelValue`,e)}),null,16))}});export{d as default};

package/dist/components/checkbox/checkbox.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{checkboxVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";import{useOmitProps as u}from"@soybeanjs/headless/composables";import{CheckboxCompact as d,provideCheckboxUi as f}from"@soybeanjs/headless";const p=i({name:`SCheckbox`,__name:`checkbox`,props:{class:{},ui:{},color:{},size:{},shape:{},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(i,{emit:p}){let m=i,h=p,g=u(m,[`class`,`ui`,`color`,`size`,`shape`]);return f(n(()=>e(t({color:m.color,size:m.size,shape:m.shape}),m.ui,{root:m.class}))),(e,t)=>(o(),r(c(d),a(c(g),{"onUpdate:modelValue":t[0]||=e=>h(`update:modelValue`,e)}),{default:l(()=>[s(e.$slots,`default`)]),_:3},16))}});export{p as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{checkboxVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";import{useOmitProps as u}from"@soybeanjs/headless/composables";import{CheckboxCompact as d,provideCheckboxUi as f}from"@soybeanjs/headless/checkbox";const p=i({name:`SCheckbox`,__name:`checkbox`,props:{class:{type:[Boolean,null,String,Object,Array]},ui:{},color:{},size:{},shape:{},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(i,{emit:p}){let m=i,h=p,g=u(m,[`class`,`ui`,`color`,`size`,`shape`]);return f(n(()=>e(t({color:m.color,size:m.size,shape:m.shape}),m.ui,{root:m.class}))),(e,t)=>(o(),r(c(d),a(c(g),{"onUpdate:modelValue":t[0]||=e=>h(`update:modelValue`,e)}),{default:l(()=>[s(e.$slots,`default`)]),_:3},16))}});export{p as default};

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

@@ -2,4 +2,5 @@ import { CheckboxCardEmits, CheckboxCardGroupEmits, CheckboxCardGroupOptionData,
 import { _default } from "./checkbox-group.vue.js";
 import { _default as _default$1 } from "./checkbox.vue.js";
 import { _default as _default$2 } from "./checkbox-card-group.vue.js";
-import { _default as _default$3 } from "./checkbox-card.vue.js";
+import { _default as _default$3 } from "./checkbox-card.vue.js";
+export * from "@soybeanjs/headless/checkbox";

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

@@ -1,53 +1,132 @@
 import { ThemeColor, ThemeSize } from "../../theme/types.js";
 import { CheckboxShape } from "./variants.js";
-import { CheckboxCardCompactEmits, CheckboxCardCompactProps, CheckboxCardGroupCompactEmits, CheckboxCardGroupCompactProps, CheckboxCardGroupOptionData, CheckboxCardUi, CheckboxCompactEmits, CheckboxCompactProps, CheckboxGroupCompactEmits, CheckboxGroupCompactProps, CheckboxGroupOptionData, CheckboxUi, ClassValue, DefinedValue } from "@soybeanjs/headless";
+import { CheckboxCardCompactEmits, CheckboxCardCompactProps, CheckboxCardGroupCompactEmits, CheckboxCardGroupCompactProps, CheckboxCardGroupOptionData, CheckboxCardUi, CheckboxCompactEmits, CheckboxCompactProps, CheckboxGroupCompactEmits, CheckboxGroupCompactProps, CheckboxGroupOptionData, CheckboxUi } from "@soybeanjs/headless/checkbox";
+import { ClassValue, DefinedValue } from "@soybeanjs/headless/types";
 
 //#region src/components/checkbox/types.d.ts
+/**
+ * Properties for the Checkbox component.
+ */
 interface CheckboxProps extends CheckboxCompactProps {
   /**
    * the class of root element
    */
   class?: ClassValue;
+  /**
+   * Per-slot class overrides for the component.
+   */
   ui?: Partial<CheckboxUi>;
+  /**
+   * Theme color of the component.
+   */
   color?: ThemeColor;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * Shape of the component.
+   */
   shape?: CheckboxShape;
 }
+/**
+ * Events for the Checkbox component.
+ */
 type CheckboxEmits = CheckboxCompactEmits;
+/**
+ * Properties for the CheckboxCard component.
+ */
 interface CheckboxCardProps extends CheckboxCardCompactProps {
   /**
    * the class of root element
    */
   class?: ClassValue;
+  /**
+   * Per-slot class overrides for the component.
+   */
   ui?: Partial<CheckboxCardUi>;
+  /**
+   * Theme color of the component.
+   */
   color?: ThemeColor;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * Shape of the component.
+   */
   shape?: CheckboxShape;
+  /**
+   * Icon rendered by the component.
+   */
   icon?: string;
+  /**
+   * Description text rendered by the component.
+   */
   description?: string;
 }
+/**
+ * Events for the CheckboxCard component.
+ */
 type CheckboxCardEmits = CheckboxCardCompactEmits;
+/**
+ * Properties for the CheckboxGroup component.
+ */
 interface CheckboxGroupProps<T extends CheckboxGroupOptionData = CheckboxGroupOptionData> extends CheckboxGroupCompactProps<T> {
   /**
    * the class of group root element
    */
   class?: ClassValue;
+  /**
+   * Per-slot class overrides for the component.
+   */
   ui?: Partial<CheckboxUi>;
+  /**
+   * Theme color of the component.
+   */
   color?: ThemeColor;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * Shape of the component.
+   */
   shape?: CheckboxShape;
 }
+/**
+ * Events for the CheckboxGroup component.
+ */
 type CheckboxGroupEmits<T extends DefinedValue = DefinedValue> = CheckboxGroupCompactEmits<T>;
+/**
+ * Properties for the CheckboxCardGroup component.
+ */
 interface CheckboxCardGroupProps<T extends CheckboxCardGroupOptionData = CheckboxCardGroupOptionData> extends CheckboxCardGroupCompactProps<T> {
   /**
    * the class of group root element
    */
   class?: ClassValue;
+  /**
+   * Per-slot class overrides for the component.
+   */
   ui?: Partial<CheckboxCardUi>;
+  /**
+   * Theme color of the component.
+   */
   color?: ThemeColor;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * Shape of the component.
+   */
   shape?: CheckboxShape;
 }
+/**
+ * Events for the CheckboxCardGroup component.
+ */
 type CheckboxCardGroupEmits<T extends DefinedValue = DefinedValue> = CheckboxCardGroupCompactEmits<T>;
 //#endregion
 export { CheckboxCardEmits, CheckboxCardGroupEmits, type CheckboxCardGroupOptionData, CheckboxCardGroupProps, CheckboxCardProps, CheckboxEmits, CheckboxGroupEmits, type CheckboxGroupOptionData, CheckboxGroupProps, CheckboxProps };

package/dist/components/clipboard/clipboard.js

@@ -1 +1 @@
-import{cn as e}from"../../theme/merge.js";import"../../theme/index.js";import{buttonVariants as t}from"../button/variants.js";import{computed as n,createBlock as r,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,renderSlot 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{Clipboard as h}from"@soybeanjs/headless";const g=i({name:`SClipboard`,__name:`clipboard`,props:{class:{},color:{},size:{},variant:{},shape:{},fitContent:{type:Boolean},value:{},copiedDuration:{},legacy:{type:Boolean},copyIcon:{},copiedIcon:{},copyText:{},copiedText:{},type:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`click`,`copied`,`copyError`],setup(i,{emit:g}){let _=i,v=p(g),y=m(_,[`class`,`color`,`size`,`variant`,`shape`,`fitContent`]),b=n(()=>e(t({color:_.color,size:_.size,variant:_.variant,shape:_.shape,fitContent:_.fitContent}),_.class));return(e,t)=>(c(),r(d(h),o(d(y),{class:b.value},u(d(v))),{leading:f(t=>[l(e.$slots,`leading`,s(a(t)))]),default:f(t=>[l(e.$slots,`default`,s(a(t)))]),trailing:f(t=>[l(e.$slots,`trailing`,s(a(t)))]),_:3},16,[`class`]))}});export{g as default};
+import{cn as e}from"../../theme/merge.js";import"../../theme/index.js";import{buttonVariants as t}from"../button/variants.js";import{computed as n,createBlock as r,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,renderSlot 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{Clipboard as h}from"@soybeanjs/headless/clipboard";const g=i({name:`SClipboard`,__name:`clipboard`,props:{class:{type:[Boolean,null,String,Object,Array]},color:{},size:{},variant:{},shape:{},fitContent:{type:Boolean},value:{},copiedDuration:{},legacy:{type:Boolean},copyIcon:{},copiedIcon:{},copyText:{},copiedText:{},type:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`click`,`copied`,`copyError`],setup(i,{emit:g}){let _=i,v=p(g),y=m(_,[`class`,`color`,`size`,`variant`,`shape`,`fitContent`]),b=n(()=>e(t({color:_.color,size:_.size,variant:_.variant,shape:_.shape,fitContent:_.fitContent}),_.class));return(e,t)=>(c(),r(d(h),o(d(y),{class:b.value},u(d(v))),{leading:f(t=>[l(e.$slots,`leading`,s(a(t)))]),default:f(t=>[l(e.$slots,`default`,s(a(t)))]),trailing:f(t=>[l(e.$slots,`trailing`,s(a(t)))]),_:3},16,[`class`]))}});export{g as default};

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

@@ -36,11 +36,11 @@ type __VLS_Slots = {} & {
   trailing?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ClipboardProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  click: (event: MouseEvent) => any;
+  click: (event: PointerEvent) => any;
   copied: (value: string) => any;
   copyError: (error: unknown) => any;
 }, string, _$vue.PublicProps, Readonly<ClipboardProps> & Readonly<{
-  onClick?: ((event: MouseEvent) => any) | undefined;
+  onClick?: ((event: PointerEvent) => any) | undefined;
   onCopied?: ((value: string) => any) | undefined;
   onCopyError?: ((error: unknown) => any) | undefined;
 }>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

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

@@ -1,3 +1,4 @@
 import { ButtonShape, ButtonVariant } from "../button/variants.js";
 import { ClipboardEmits, ClipboardProps, ClipboardSlotProps } from "./types.js";
-import { _default } from "./clipboard.vue.js";
+import { _default } from "./clipboard.vue.js";
+export * from "@soybeanjs/headless/clipboard";

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

@@ -1,15 +1,36 @@
 import { ThemeColor, ThemeSize } from "../../theme/types.js";
 import { ButtonShape, ButtonVariant } from "../button/variants.js";
-import { ClassValue } from "@soybeanjs/headless";
 import { ClipboardEmits, ClipboardProps, ClipboardSlotProps } from "@soybeanjs/headless/clipboard";
+import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/clipboard/types.d.ts
+/**
+ * Properties for the Clipboard component.
+ */
 interface ClipboardProps$1 extends ClipboardProps {
+  /**
+   * Additional class names applied to the root element.
+   */
   class?: ClassValue;
+  /**
+   * Theme color of the component.
+   */
   color?: ThemeColor;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * Visual variant of the component.
+   */
   variant?: ButtonVariant;
+  /**
+   * Shape of the component.
+   */
   shape?: ButtonShape;
+  /**
+   * Whether the component should fit its content width.
+   */
   fitContent?: boolean;
 }
 //#endregion

package/dist/components/collapsible/collapsible.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{collapsibleVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,renderSlot as l,unref as u,withCtx as d}from"vue";import{useOmitProps as f}from"@soybeanjs/headless/composables";import{CollapsibleRoot as p,provideCollapsibleUi as m}from"@soybeanjs/headless";const h=i({name:`SCollapsible`,__name:`collapsible`,props:{size:{},ui:{},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(i,{emit:h}){let g=i,_=h,v=f(g,[`class`,`size`,`ui`]);return m(n(()=>e(t({size:g.size}),g.ui))),(e,t)=>(c(),r(u(p),o(u(v),{"onUpdate:open":t[0]||=e=>_(`update:open`,e)}),{default:d(t=>[l(e.$slots,`default`,s(a(t)))]),_:3},16))}});export{h as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{collapsibleVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,renderSlot as l,unref as u,withCtx as d}from"vue";import{useOmitProps as f}from"@soybeanjs/headless/composables";import{CollapsibleRoot as p,provideCollapsibleUi as m}from"@soybeanjs/headless/collapsible";const h=i({name:`SCollapsible`,__name:`collapsible`,props:{size:{},ui:{},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(i,{emit:h}){let g=i,_=h,v=f(g,[`class`,`size`,`ui`]);return m(n(()=>e(t({size:g.size}),g.ui))),(e,t)=>(c(),r(u(p),o(u(v),{"onUpdate:open":t[0]||=e=>_(`update:open`,e)}),{default:d(t=>[l(e.$slots,`default`,s(a(t)))]),_:3},16))}});export{h as default};

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

@@ -1,4 +1,5 @@
 import { CollapsibleEmits, CollapsibleProps } from "./types.js";
 import { _default } from "./collapsible.vue.js";
-import { CollapsibleContent as SCollapsibleContent, CollapsibleContentProps, CollapsibleRootEmits, CollapsibleRootProps, CollapsibleTrigger as SCollapsibleTrigger, CollapsibleTriggerProps } from "@soybeanjs/headless/collapsible";
-export { type CollapsibleContentProps, type CollapsibleRootEmits, type CollapsibleRootProps, type CollapsibleTriggerProps, SCollapsibleContent, SCollapsibleTrigger };
+import { CollapsibleContent as SCollapsibleContent, CollapsibleTrigger as SCollapsibleTrigger } from "@soybeanjs/headless/collapsible";
+export * from "@soybeanjs/headless/collapsible";
+export { SCollapsibleContent, SCollapsibleTrigger };

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

@@ -1,11 +1,23 @@
 import { ThemeSize } from "../../theme/types.js";
-import { CollapsibleRootEmits, CollapsibleRootProps, CollapsibleUi } from "@soybeanjs/headless";
+import { CollapsibleRootEmits, CollapsibleRootProps, CollapsibleUi } from "@soybeanjs/headless/collapsible";
 
 //#region src/components/collapsible/types.d.ts
+/**
+ * Properties for the Collapsible component.
+ */
 interface CollapsibleProps extends CollapsibleRootProps {
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * Per-slot class overrides for the component.
+   */
   ui?: Partial<CollapsibleUi>;
 }
+/**
+ * Events for the Collapsible component.
+ */
 type CollapsibleEmits = CollapsibleRootEmits;
 //#endregion
 export { CollapsibleEmits, CollapsibleProps };

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

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{colorAreaVariants 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,withCtx as f}from"vue";import{useForwardListeners as p,useOmitProps as m}from"@soybeanjs/headless/composables";import{ColorAreaArea as h,ColorAreaRoot as g,ColorAreaThumb as _,provideColorAreaUi as v}from"@soybeanjs/headless/color-area";const y=a({name:`SColorArea`,__name:`color-area`,props:{class:{},size:{},ui:{},areaProps:{},thumbProps:{},modelValue:{},defaultValue:{},colorSpace:{},format:{},xChannel:{},yChannel:{},disabled:{type:Boolean},xName:{},yName:{},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`,`areaProps`,`thumbProps`,`onChange`]);return v(n(()=>e(t({size:b.size}),b.ui,{root:b.class}))),(e,t)=>(l(),r(d(g),s(d(S),u(d(x))),{default:f(()=>[i(d(h),c(o(a.areaProps)),{default:f(()=>[i(d(_),c(o(a.thumbProps)),null,16)]),_:1},16)]),_:1},16))}});export{y as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{colorAreaVariants 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,withCtx as f}from"vue";import{useForwardListeners as p,useOmitProps as m}from"@soybeanjs/headless/composables";import{ColorAreaArea as h,ColorAreaRoot as g,ColorAreaThumb as _,provideColorAreaUi as v}from"@soybeanjs/headless/color-area";const y=a({name:`SColorArea`,__name:`color-area`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},ui:{},areaProps:{},thumbProps:{},modelValue:{},defaultValue:{},colorSpace:{},format:{},xChannel:{},yChannel:{},disabled:{type:Boolean},xName:{},yName:{},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`,`areaProps`,`thumbProps`,`onChange`]);return v(n(()=>e(t({size:b.size}),b.ui,{root:b.class}))),(e,t)=>(l(),r(d(g),s(d(S),u(d(x))),{default:f(()=>[i(d(h),c(o(a.areaProps)),{default:f(()=>[i(d(_),c(o(a.thumbProps)),null,16)]),_:1},16)]),_:1},16))}});export{y as default};

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

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

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

@@ -1,4 +1,3 @@
 import { ColorAreaEmits, ColorAreaProps } from "./types.js";
 import { _default } from "./color-area.vue.js";
-import { ColorAreaAreaProps, ColorAreaRootEmits, ColorAreaRootProps, ColorAreaThumbProps, ColorAreaUi, ColorAreaUiSlot } from "@soybeanjs/headless/color-area";
-export { type ColorAreaAreaProps, type ColorAreaRootEmits, type ColorAreaRootProps, type ColorAreaThumbProps, type ColorAreaUi, type ColorAreaUiSlot };
+export * from "@soybeanjs/headless/color-area";

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

@@ -1,14 +1,36 @@
 import { ThemeSize } from "../../theme/types.js";
-import { ClassValue, ColorAreaAreaProps, ColorAreaRootEmits, ColorAreaRootProps, ColorAreaThumbProps, ColorAreaUi } from "@soybeanjs/headless";
+import { ColorAreaAreaProps, ColorAreaRootEmits, ColorAreaRootProps, ColorAreaThumbProps, ColorAreaUi } from "@soybeanjs/headless/color-area";
+import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/color-area/types.d.ts
+/**
+ * Properties for the ColorArea component.
+ */
 interface ColorAreaProps extends ColorAreaRootProps {
+  /**
+   * Additional class names applied to the root element.
+   */
   class?: ClassValue;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * Per-slot class overrides for the component.
+   */
   ui?: Partial<ColorAreaUi>;
+  /**
+   * Properties forwarded to the area element.
+   */
   areaProps?: ColorAreaAreaProps;
+  /**
+   * Properties forwarded to the thumb element.
+   */
   thumbProps?: ColorAreaThumbProps;
 }
+/**
+ * Events for the ColorArea component.
+ */
 type ColorAreaEmits = ColorAreaRootEmits;
 //#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";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{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:{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:{},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};

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

@@ -1,4 +1,3 @@
 import { ColorFieldEmits, ColorFieldProps } from "./types.js";
 import { _default } from "./color-field.vue.js";
-import { ColorFieldInputProps, ColorFieldRootEmits, ColorFieldRootProps, ColorFieldUi, ColorFieldUiSlot } from "@soybeanjs/headless/color-field";
-export { type ColorFieldInputProps, type ColorFieldRootEmits, type ColorFieldRootProps, type ColorFieldUi, type ColorFieldUiSlot };
+export * from "@soybeanjs/headless/color-field";

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

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

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{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:{type:[Boolean,null,String,Object,Array]},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};

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

@@ -1,8 +1,8 @@
 import { ColorPickerProps } from "./types.js";
 import * as _$vue from "vue";
-import * as _$_soybeanjs_headless0 from "@soybeanjs/headless";
 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";
 
 //#region src/components/color-picker/color-picker.vue.d.ts
@@ -16,29 +16,29 @@ type __VLS_Slots = {} & {
   trigger?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ColorPickerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  change: (value: string) => any;
   "update:open": (value: boolean) => any;
   "update:modelValue": (value: string) => any;
+  change: (value: string) => any;
   "update:color": (value: _$_soybeanjs_headless_shared0.NormalizedColor) => any;
   "update:format": (value: ColorFormat) => any;
 }, string, _$vue.PublicProps, Readonly<ColorPickerProps> & Readonly<{
-  onChange?: ((value: string) => any) | undefined;
   "onUpdate:open"?: ((value: boolean) => any) | undefined;
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onChange?: ((value: string) => any) | undefined;
   "onUpdate:color"?: ((value: _$_soybeanjs_headless_shared0.NormalizedColor) => any) | undefined;
   "onUpdate:format"?: ((value: ColorFormat) => any) | undefined;
 }>, {
+  disabled: boolean;
   open: boolean;
   defaultOpen: boolean;
   modal: boolean;
-  disabled: boolean;
-  placement: _$_soybeanjs_headless0.Placement;
-  showArrow: boolean;
-  modelValue: string | ColorValue;
   defaultValue: string | ColorValue;
+  modelValue: string | ColorValue;
+  colorSpace: ColorSpace;
   format: ColorFormat;
+  placement: _$_soybeanjs_headless0.Placement;
+  showArrow: boolean;
   defaultFormat: ColorFormat;
-  colorSpace: ColorSpace;
   showAlpha: boolean;
   showFields: boolean;
   showSwatches: boolean;

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

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

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

@@ -1,46 +1,139 @@
 import { ThemeSize } from "../../theme/types.js";
-import { ButtonProps as ButtonProps$1 } from "../button/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 { ClassValue, UiClass } from "@soybeanjs/headless";
 import { ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "@soybeanjs/headless/shared";
+import { ClassValue, UiClass } from "@soybeanjs/headless/types";
 
 //#region src/components/color-picker/types.d.ts
+/**
+ * Available UI slots 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 ColorPicker component.
+ */
 type ColorPickerUi = UiClass<ColorPickerUiSlot>;
+/**
+ * Properties for the ColorPicker component.
+ */
 interface ColorPickerProps extends Pick<PopoverProps, 'open' | 'defaultOpen' | 'modal' | 'placement' | 'showArrow' | 'positionerProps' | 'popupProps' | 'triggerProps' | 'closeProps' | 'portalProps' | 'arrowProps'> {
+  /**
+   * Additional class names applied to the root element.
+   */
   class?: ClassValue;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * 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[];
-  triggerButtonProps?: ButtonProps$1;
+  /**
+   * Properties forwarded to the trigger button element.
+   */
+  triggerButtonProps?: ButtonProps;
+  /**
+   * Properties forwarded to the area element.
+   */
   areaProps?: Omit<ColorAreaProps, 'modelValue' | 'defaultValue' | 'disabled' | 'colorSpace' | 'format' | 'xChannel' | 'yChannel' | 'onChange' | 'onChangeEnd'>;
+  /**
+   * Properties forwarded to the hue slider element.
+   */
   hueSliderProps?: Omit<ColorSliderProps, 'modelValue' | 'defaultValue' | 'channel' | 'colorSpace' | 'disabled' | 'format' | 'onChange' | 'onChangeEnd'>;
+  /**
+   * Properties forwarded to the alpha slider element.
+   */
   alphaSliderProps?: Omit<ColorSliderProps, 'modelValue' | 'defaultValue' | 'channel' | 'colorSpace' | 'disabled' | 'format' | 'onChange' | 'onChangeEnd'>;
+  /**
+   * Properties forwarded to the alpha field element.
+   */
   alphaFieldProps?: Omit<ColorFieldProps, 'modelValue' | 'defaultValue' | 'disabled' | 'channel' | 'colorSpace' | 'format'>;
+  /**
+   * Properties forwarded to the hex field element.
+   */
   hexFieldProps?: Omit<ColorFieldProps, 'modelValue' | 'defaultValue' | 'disabled' | 'channel' | 'colorSpace' | 'format'>;
+  /**
+   * Properties forwarded to the field element.
+   */
   fieldProps?: Omit<ColorFieldProps, 'modelValue' | 'defaultValue' | 'disabled' | 'channel' | 'colorSpace' | 'format'>;
+  /**
+   * Properties forwarded to the swatch picker element.
+   */
   swatchPickerProps?: Omit<ColorSwatchPickerProps, 'modelValue' | 'defaultValue' | 'colors' | 'disabled'>;
+  /**
+   * Properties forwarded to the swatch element.
+   */
   swatchProps?: Omit<ColorSwatchProps, 'class' | 'color' | 'size'>;
 }
+/**
+ * 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];
 };
 //#endregion

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{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:{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:{},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};