@soybeanjs/headless 0.17.0 → 0.19.0

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

@@ -1,14 +1,14 @@
+import { ColorChannel, ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "../../types/color.js";
 import { DataOrientation, Direction, UiClass } from "../../types/common.js";
 import { FormFieldCommonProps } from "../../types/component.js";
-import { PrimitiveProps } from "../primitive/types.js";
-import { ColorChannel, ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "../../shared/color.js";
-import { ComputedRef, HTMLAttributes } from "vue";
+import { PrimitiveWithBaseProps } from "../primitive/types.js";
+import { ComputedRef } from "vue";
 
 //#region src/components/color-slider/types.d.ts
 /**
- * Props for the color slider root component.
+ * Properties for the ColorSliderRoot component.
  */
-interface ColorSliderRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */HTMLAttributes {
+interface ColorSliderRootProps extends FormFieldCommonProps, Omit<PrimitiveWithBaseProps, 'onChange'> {
   /**
    * Current model value.
    */
@@ -51,7 +51,7 @@ interface ColorSliderRootProps extends PrimitiveProps, FormFieldCommonProps, /**
   step?: number;
 }
 /**
- * Emits for the color slider root component.
+ * Events for the ColorSliderRoot component.
  */
 type ColorSliderRootEmits = {
   /**
@@ -72,20 +72,37 @@ type ColorSliderRootEmits = {
   changeEnd: [value: string];
 };
 /**
- * Props for the color slider track component.
+ * Properties for the ColorSliderTrack component.
  */
-interface ColorSliderTrackProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+interface ColorSliderTrackProps extends PrimitiveWithBaseProps {}
 /**
- * Props for the color slider thumb component.
+ * Properties for the ColorSliderThumb component.
  */
-interface ColorSliderThumbProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+interface ColorSliderThumbProps extends PrimitiveWithBaseProps {}
 /**
- * Available UI slots for the color slider component.
+ * Properties for the ColorSliderCompact component.
+ */
+interface ColorSliderCompactProps extends ColorSliderRootProps {
+  /**
+   * Properties forwarded to the track element.
+   */
+  trackProps?: ColorSliderTrackProps;
+  /**
+   * Properties forwarded to the thumb element.
+   */
+  thumbProps?: ColorSliderThumbProps;
+}
+/**
+ * Events for the ColorSliderCompact component.
+ */
+type ColorSliderCompactEmits = ColorSliderRootEmits;
+/**
+ * Available UI slots for the ColorSlider component.
  */
 type ColorSliderUiSlot = 'root' | 'track' | 'thumb';
 /**
- * UI class overrides for the color slider component.
+ * UI class overrides for the ColorSlider component.
  */
 type ColorSliderUi = UiClass<ColorSliderUiSlot>;
 //#endregion
-export { ColorSliderRootEmits, ColorSliderRootProps, ColorSliderThumbProps, ColorSliderTrackProps, ColorSliderUi, ColorSliderUiSlot };
+export { ColorSliderCompactEmits, ColorSliderCompactProps, ColorSliderRootEmits, ColorSliderRootProps, ColorSliderThumbProps, ColorSliderTrackProps, ColorSliderUi, ColorSliderUiSlot };

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

@@ -0,0 +1 @@
+import{useColorSwatchUi as e}from"./context.js";import{createElementBlock as t,defineComponent as n,normalizeClass as r,openBlock as i,unref as a}from"vue";const o=n({name:`ColorSwatchChecker`,__name:`color-swatch-checker`,setup(n){let o=e(`checker`);return(e,n)=>(i(),t(`span`,{"data-soybean-color-swatch-checker":``,class:r(a(o))},null,2))}});export{o as default};

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

@@ -0,0 +1,8 @@
+import { ColorSwatchCheckerProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-swatch/color-swatch-checker.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<ColorSwatchCheckerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColorSwatchCheckerProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };

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

@@ -0,0 +1 @@
+import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"./color-swatch-root.js";import n from"./color-swatch-checker.js";import r from"./color-swatch-fill.js";import{createBlock as i,createVNode as a,defineComponent as o,guardReactiveProps as s,normalizeProps as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=o({name:`ColorSwatchCompact`,__name:`color-swatch-compact`,props:{checkerProps:{},fillProps:{},color:{},label:{},asChild:{type:Boolean},as:{}},setup(o){let p=e(o,[`checkerProps`,`fillProps`]);return(e,m)=>(l(),i(t,c(s(d(p))),{default:f(t=>[a(n,c(s(o.checkerProps)),null,16),a(r,c(s(o.fillProps)),null,16),u(e.$slots,`default`,c(s(t)))]),_:3},16))}});export{p as default};

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

@@ -0,0 +1,15 @@
+import { ColorSwatchCompactProps, ColorSwatchCompactSlots } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-swatch/color-swatch-compact.vue.d.ts
+type __VLS_Slots = ColorSwatchCompactSlots;
+declare const __VLS_base: _$vue.DefineComponent<ColorSwatchCompactProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColorSwatchCompactProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

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

@@ -0,0 +1 @@
+import{useColorSwatchUi as e}from"./context.js";import{createElementBlock as t,defineComponent as n,normalizeClass as r,openBlock as i,unref as a}from"vue";const o=n({name:`ColorSwatchFill`,__name:`color-swatch-fill`,setup(n){let o=e(`fill`);return(e,n)=>(i(),t(`span`,{"data-soybean-color-swatch-fill":``,class:r(a(o))},null,2))}});export{o as default};

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

@@ -0,0 +1,8 @@
+import { ColorSwatchFillProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-swatch/color-swatch-fill.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<ColorSwatchFillProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColorSwatchFillProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };

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

@@ -0,0 +1 @@
+import{formatColor as e,getColorContrast as t,getColorLabel as n,toColorObject as r}from"../../shared/color.js";import"../../shared/index.js";import{Primitive as i}from"../primitive/primitive.js";import"../primitive/index.js";import{useColorSwatchUi as a}from"./context.js";import{computed as o,createBlock as s,defineComponent as c,normalizeClass as l,normalizeStyle as u,openBlock as d,renderSlot as f,unref as p,withCtx as m}from"vue";const h=c({name:`ColorSwatchRoot`,__name:`color-swatch-root`,props:{color:{},label:{},asChild:{type:Boolean},as:{}},setup(c){let h=c,g=a(`root`),_=o(()=>h.color?e(h.color,`rgb`):`transparent`),v=o(()=>r(h.color,`rgb`)),y=o(()=>v.value.alpha),b=o(()=>!h.color||y.value<=0),x=o(()=>n(h.color,h.label)),S=o(()=>t(h.color));return(e,t)=>(d(),s(p(i),{as:c.as,"as-child":c.asChild,"data-soybean-color-swatch-root":``,class:l(p(g)),role:`img`,"aria-label":x.value,"aria-roledescription":`color swatch`,"data-color-contrast":S.value,"data-no-color":b.value?``:void 0,style:u({"--soybean-color-swatch-color":_.value,"--soybean-color-swatch-alpha":String(y.value)})},{default:m(()=>[f(e.$slots,`default`,{color:_.value,alpha:y.value})]),_:3},8,[`as`,`as-child`,`class`,`aria-label`,`data-color-contrast`,`data-no-color`,`style`]))}});export{h as default};

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

@@ -0,0 +1,15 @@
+import { ColorSwatchRootProps, ColorSwatchRootSlots } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-swatch/color-swatch-root.vue.d.ts
+type __VLS_Slots = ColorSwatchRootSlots;
+declare const __VLS_base: _$vue.DefineComponent<ColorSwatchRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColorSwatchRootProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

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

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

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

@@ -0,0 +1 @@
+import{useUiContext as e}from"../../composables/use-ui-context.js";import"../../composables/index.js";const[t,n]=e(`ColorSwatch`);export{t as provideColorSwatchUi,n as useColorSwatchUi};

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

@@ -1,3 +1,7 @@
-import { ColorSwatchProps } from "./types.js";
-import { _default } from "./color-swatch.vue.js";
-export { _default as ColorSwatch, type ColorSwatchProps };
+import { ColorSwatchCheckerProps, ColorSwatchCompactProps, ColorSwatchCompactSlots, ColorSwatchFillProps, ColorSwatchRootProps, ColorSwatchRootSlots, ColorSwatchUi, ColorSwatchUiSlot } from "./types.js";
+import { _default as _default$1 } from "./color-swatch-compact.vue.js";
+import { _default as _default$3 } from "./color-swatch-root.vue.js";
+import { _default } from "./color-swatch-checker.vue.js";
+import { _default as _default$2 } from "./color-swatch-fill.vue.js";
+import { provideColorSwatchUi } from "./context.js";
+export { _default as ColorSwatchChecker, type ColorSwatchCheckerProps, _default$1 as ColorSwatchCompact, type ColorSwatchCompactProps, type ColorSwatchCompactSlots, _default$2 as ColorSwatchFill, type ColorSwatchFillProps, _default$3 as ColorSwatchRoot, type ColorSwatchRootProps, type ColorSwatchRootSlots, type ColorSwatchUi, type ColorSwatchUiSlot, provideColorSwatchUi };

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

@@ -1 +1 @@
-import e from"./color-swatch.js";export{e as ColorSwatch};
+import{provideColorSwatchUi as e}from"./context.js";import t from"./color-swatch-root.js";import n from"./color-swatch-checker.js";import r from"./color-swatch-fill.js";import i from"./color-swatch-compact.js";export{n as ColorSwatchChecker,i as ColorSwatchCompact,r as ColorSwatchFill,t as ColorSwatchRoot,e as provideColorSwatchUi};

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

@@ -1,12 +1,13 @@
-import { PrimitiveProps } from "../primitive/types.js";
-import { ColorValue } from "../../shared/color.js";
-import { HTMLAttributes } from "vue";
+import { ColorValue } from "../../types/color.js";
+import { UiClass } from "../../types/common.js";
+import { BaseProps } from "../../types/vue.js";
+import { PrimitiveWithBaseProps } from "../primitive/types.js";
 
 //#region src/components/color-swatch/types.d.ts
 /**
- * Props for the color swatch component.
+ * Properties for the ColorSwatch component.
  */
-interface ColorSwatchProps extends PrimitiveProps, /** @vue-ignore */Omit<HTMLAttributes, 'color'> {
+interface ColorSwatchRootProps extends Omit<PrimitiveWithBaseProps, 'color'> {
   /**
    * Theme color of the component.
    */
@@ -16,5 +17,57 @@ interface ColorSwatchProps extends PrimitiveProps, /** @vue-ignore */Omit<HTMLAt
    */
   label?: string;
 }
+/**
+ * Properties for the ColorSwatch component slots.
+ */
+interface ColorSwatchSlotProps {
+  /**
+   * Color value in RGB format, e.g., "rgb(255, 0, 0)".
+   */
+  color: string;
+  /**
+   * Alpha value of the color, ranging from 0 to 1.
+   */
+  alpha: number;
+}
+/**
+ * Slots for the ColorSwatch component.
+ */
+type ColorSwatchRootSlots = {
+  default?: (props: ColorSwatchSlotProps) => any;
+};
+/**
+ * Events for the ColorSwatch component.
+ */
+interface ColorSwatchCheckerProps extends BaseProps {}
+/**
+ * Events for the ColorSwatch component.
+ */
+interface ColorSwatchFillProps extends BaseProps {}
+/**
+ * Properties for the ColorSwatch component in compact mode.
+ */
+interface ColorSwatchCompactProps extends ColorSwatchRootProps {
+  /**
+   * Props for the checker element of the ColorSwatch component.
+   */
+  checkerProps?: ColorSwatchCheckerProps;
+  /**
+   * Props for the fill element of the ColorSwatch component.
+   */
+  fillProps?: ColorSwatchFillProps;
+}
+/**
+ * Slots for the ColorSwatch component in compact mode.
+ */
+type ColorSwatchCompactSlots = ColorSwatchRootSlots;
+/**
+ * Slots for the ColorSwatch component.
+ */
+type ColorSwatchUiSlot = 'root' | 'checker' | 'fill';
+/**
+ * UI classes for the ColorSwatch component.
+ */
+type ColorSwatchUi = UiClass<ColorSwatchUiSlot>;
 //#endregion
-export { ColorSwatchProps };
+export { ColorSwatchCheckerProps, ColorSwatchCompactProps, ColorSwatchCompactSlots, ColorSwatchFillProps, ColorSwatchRootProps, ColorSwatchRootSlots, ColorSwatchUi, ColorSwatchUiSlot };

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

@@ -0,0 +1 @@
+import{useForwardListeners as e}from"../../composables/use-forward-listeners.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import n from"../_icon/icon.js";import r from"./color-swatch-picker-item.js";import i from"./color-swatch-picker-item-indicator.js";import a from"./color-swatch-picker-item-swatch.js";import o from"./color-swatch-picker-root.js";import{Fragment as s,createBlock as c,createElementBlock as l,createVNode as u,defineComponent as d,mergeProps as f,normalizeProps as p,openBlock as m,renderList as h,renderSlot as g,toHandlers as _,unref as v,withCtx as y}from"vue";const b=d({name:`ColorSwatchPickerCompact`,__name:`color-swatch-picker-compact`,props:{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(d,{emit:b}){let x=d,S=b,C=t(x,[`colors`,`itemProps`,`indicatorProps`,`swatchProps`]),w=e(S);return(e,t)=>(m(),c(o,f(v(C),_(v(w))),{default:y(o=>[d.colors?.length?(m(!0),l(s,{key:0},h(d.colors,o=>(m(),c(r,f({key:o,value:o},{ref_for:!0},d.itemProps,{onSelect:t[0]||(t[0]=e=>S(`select`,e))}),{default:y(()=>[u(a,f({ref_for:!0},d.swatchProps),{default:y(()=>[g(e.$slots,`swatch`,{color:o})]),_:2},1040),u(i,f({ref_for:!0},d.indicatorProps),{default:y(()=>[g(e.$slots,`indicator`,{color:o},()=>[u(n,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`]))),128)):g(e.$slots,`default`,p(f({key:1},o)))]),_:3},16))}});export{b as default};

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

@@ -0,0 +1,28 @@
+import { SelectEvent } from "../../types/event.js";
+import { CollectionItemData } from "../../composables/use-collection.js";
+import { ListboxCollectionItemData } from "../listbox/types.js";
+import { ColorSwatchPickerCompactProps, ColorSwatchPickerCompactSlots } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-swatch-picker/color-swatch-picker-compact.vue.d.ts
+declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: _$vue.PublicProps & __VLS_PrettifyLocal<ColorSwatchPickerCompactProps<M> & {
+    onSelect?: ((event: SelectEvent<string>) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
+    onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+    onHighlight?: ((payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => any) | undefined;
+    onLeave?: ((event: Event) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: ColorSwatchPickerCompactSlots<M>;
+  emit: ((evt: "select", event: SelectEvent<string>) => void) & ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "leave", event: Event) => void);
+}>) => _$vue.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+//#endregion
+export { _default };

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

@@ -1 +1 @@
-import e from"../listbox/listbox-item-indicator.js";import"../listbox/index.js";import{createBlock as t,defineComponent as n,openBlock as r,renderSlot as i,unref as a,withCtx as o}from"vue";const s=n({name:`ColorSwatchPickerItemIndicator`,__name:`color-swatch-picker-item-indicator`,props:{asChild:{type:Boolean},as:{}},setup(n){return(s,c)=>(r(),t(a(e),{as:n.as,"as-child":n.asChild},{default:o(()=>[i(s.$slots,`default`)]),_:3},8,[`as`,`as-child`]))}});export{s as default};
+import e from"../listbox/listbox-item-indicator.js";import"../listbox/index.js";import{createBlock as t,defineComponent as n,openBlock as r,renderSlot as i,unref as a,withCtx as o}from"vue";const s=n({name:`ColorSwatchPickerItemIndicator`,__name:`color-swatch-picker-item-indicator`,props:{asChild:{type:Boolean},as:{}},setup(n){return(s,c)=>(r(),t(a(e),{as:n.as,"as-child":n.asChild,"data-soybean-color-swatch-picker-item-indicator":``},{default:o(()=>[i(s.$slots,`default`)]),_:3},8,[`as`,`as-child`]))}});export{s as default};

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

@@ -1 +1 @@
-import e from"../color-swatch/color-swatch.js";import"../color-swatch/index.js";import{useColorSwatchPickerItemContext as t,useColorSwatchPickerUi as n}from"./context.js";import{createBlock as r,defineComponent as i,normalizeClass as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";const u=i({name:`ColorSwatchPickerItemSwatch`,__name:`color-swatch-picker-item-swatch`,props:{label:{},asChild:{type:Boolean},as:{}},setup(i){let u=n(`swatch`),{color:d}=t(`ColorSwatchPickerItemSwatch`);return(t,n)=>(o(),r(c(e),{as:i.as,"as-child":i.asChild,class:a(c(u)),color:c(d),label:i.label},{default:l(()=>[s(t.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`color`,`label`]))}});export{u as default};
+import e from"../color-swatch/color-swatch-compact.js";import{useColorSwatchPickerItemContext as t}from"./context.js";import{createBlock as n,defineComponent as r,mergeProps as i,openBlock as a,renderSlot as o,unref as s,withCtx as c}from"vue";const l=r({name:`ColorSwatchPickerItemSwatch`,__name:`color-swatch-picker-item-swatch`,props:{checkerProps:{},fillProps:{},color:{},label:{},asChild:{type:Boolean},as:{}},setup(r){let l=r,{color:u}=t(`ColorSwatchPickerItemSwatch`);return(t,r)=>(a(),n(e,i(l,{"data-soybean-color-swatch-picker-item-swatch":``,color:s(u)}),{default:c(()=>[o(t.$slots,`default`)]),_:3},16,[`color`]))}});export{l as default};

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

@@ -1 +1 @@
-import{getColorLabel as e}from"../../shared/color.js";import"../../shared/index.js";import t from"../listbox/listbox-item.js";import"../listbox/index.js";import{provideColorSwatchPickerItemContext as n}from"./context.js";import{computed as r,createBlock as i,defineComponent as a,normalizeStyle as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=a({name:`ColorSwatchPickerItem`,__name:`color-swatch-picker-item`,props:{value:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`select`],setup(a,{emit:d}){let f=a,p=d,m=r(()=>f.value),h=r(()=>e(m.value));return n({color:m}),(e,n)=>(s(),i(l(t),{value:a.value,"aria-label":h.value,"data-color":a.value,style:o({"--soybean-color-swatch-picker-item-color":a.value}),onSelect:n[0]||(n[0]=e=>p(`select`,e))},{default:u(()=>[c(e.$slots,`default`)]),_:3},8,[`value`,`aria-label`,`data-color`,`style`]))}});export{d as default};
+import{getColorLabel as e}from"../../shared/color.js";import"../../shared/index.js";import t from"../listbox/listbox-item.js";import"../listbox/index.js";import{provideColorSwatchPickerItemContext as n}from"./context.js";import{computed as r,createBlock as i,defineComponent as a,normalizeStyle as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=a({name:`ColorSwatchPickerItem`,__name:`color-swatch-picker-item`,props:{value:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`select`],setup(a,{emit:d}){let f=a,p=d,m=r(()=>f.value),h=r(()=>e(m.value));return n({color:m}),(e,n)=>(s(),i(l(t),{"data-soybean-color-swatch-picker-item":``,value:a.value,"aria-label":h.value,"data-color":a.value,style:o({"--soybean-color-swatch-picker-item-color":a.value}),onSelect:n[0]||(n[0]=e=>p(`select`,e))},{default:u(()=>[c(e.$slots,`default`)]),_:3},8,[`value`,`aria-label`,`data-color`,`style`]))}});export{d as default};

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

@@ -1 +1 @@
-import{useControllableState as e}from"../../composables/use-controllable-state.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import n from"../listbox/listbox-root.js";import r from"../listbox/listbox-content.js";import"../listbox/index.js";import{createBlock as i,createVNode as a,defineComponent as o,isRef as s,mergeProps as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=o({name:`ColorSwatchPickerRoot`,__name:`color-swatch-picker-root`,props:{asChild:{type:Boolean},as:{default:`div`},orientation:{default:`horizontal`},dir:{default:`ltr`},disabled:{type:Boolean,default:!1},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{default:void 0},multiple:{},clearable:{type:Boolean},selectionBehavior:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`entryFocus`,`leave`],setup(o,{emit:p}){let m=o,h=p,g=e(()=>m.modelValue,e=>{h(`update:modelValue`,e)},m.defaultValue??(m.multiple?[]:void 0)),_=t(m,[`modelValue`,`defaultValue`,`class`]);return(e,t)=>(l(),i(d(n),c(d(_),{modelValue:d(g),"onUpdate:modelValue":t[0]||(t[0]=e=>s(g)?g.value=e:null),onHighlight:t[1]||(t[1]=e=>h(`highlight`,e)),onEntryFocus:t[2]||(t[2]=e=>h(`entryFocus`,e)),onLeave:t[3]||(t[3]=e=>h(`leave`,e))}),{default:f(()=>[a(d(r),{as:o.as,"as-child":o.asChild},{default:f(()=>[u(e.$slots,`default`,{modelValue:d(g)})]),_:3},8,[`as`,`as-child`])]),_:3},16,[`modelValue`]))}});export{p as default};
+import{useControllableState as e}from"../../composables/use-controllable-state.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import n from"../listbox/listbox-root.js";import r from"../listbox/listbox-content.js";import"../listbox/index.js";import{createBlock as i,createVNode as a,defineComponent as o,isRef as s,mergeProps as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=o({name:`ColorSwatchPickerRoot`,__name:`color-swatch-picker-root`,props:{orientation:{default:`horizontal`},dir:{default:`ltr`},disabled:{type:Boolean,default:!1},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{default:void 0},multiple:{},clearable:{type:Boolean},selectionBehavior:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`entryFocus`,`leave`],setup(o,{emit:p}){let m=o,h=p,g=e(()=>m.modelValue,e=>{h(`update:modelValue`,e)},m.defaultValue??(m.multiple?[]:``)),_=t(m,[`modelValue`,`defaultValue`,`class`]);return(e,t)=>(l(),i(d(n),c(d(_),{modelValue:d(g),"onUpdate:modelValue":t[0]||(t[0]=e=>s(g)?g.value=e:null),"data-soybean-color-swatch-picker-root":``,onHighlight:t[1]||(t[1]=e=>h(`highlight`,e)),onEntryFocus:t[2]||(t[2]=e=>h(`entryFocus`,e)),onLeave:t[3]||(t[3]=e=>h(`leave`,e))}),{default:f(()=>[a(d(r),null,{default:f(()=>[u(e.$slots,`default`,{modelValue:d(g)})]),_:3})]),_:3},16,[`modelValue`]))}});export{p as default};

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

@@ -7,8 +7,8 @@ import * as _$vue from "vue";
 declare const __VLS_export: <M extends boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: _$vue.PublicProps & __VLS_PrettifyLocal<ColorSwatchPickerRootProps<M> & {
     "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
-    onHighlight?: ((payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => any) | undefined;
     onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+    onHighlight?: ((payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => any) | undefined;
     onLeave?: ((event: Event) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -17,10 +17,10 @@ declare const __VLS_export: <M extends boolean>(__VLS_props: NonNullable<Awaited
   attrs: any;
   slots: {
     default?: (props: {
-      modelValue: ((M extends true ? string[] : string) | undefined) & (M extends true ? string[] | undefined : string | undefined);
+      modelValue: ((M extends true ? string[] : string) | undefined) & Exclude<M extends true ? string[] : string, undefined>;
     }) => any;
   };
-  emit: ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void);
+  emit: ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "leave", event: Event) => void);
 }>) => _$vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1 +1 @@
-import{useContext as e}from"../../composables/use-context.js";import{useUiContext as t}from"../../composables/use-ui-context.js";import"../../composables/index.js";import{provideListboxUi as n}from"../listbox/context.js";import{computed as r}from"vue";const[i,a]=e(`ColorSwatchPickerItem`),[o,s]=t(`ColorSwatchPickerUi`,e=>(n(r(()=>({content:e.value.root,item:e.value.item,itemIndicator:e.value.itemIndicator}))),e));export{i as provideColorSwatchPickerItemContext,o as provideColorSwatchPickerUi,a as useColorSwatchPickerItemContext,s as useColorSwatchPickerUi};
+import{useContext as e}from"../../composables/use-context.js";import{useUiContext as t}from"../../composables/use-ui-context.js";import"../../composables/index.js";import{provideListboxUi as n}from"../listbox/context.js";import{provideColorSwatchUi as r}from"../color-swatch/context.js";import{computed as i}from"vue";const[a,o]=e(`ColorSwatchPickerItem`),[s,c]=t(`ColorSwatchPickerUi`,e=>{let t=i(()=>({content:e.value.root,item:e.value.item,itemIndicator:e.value.itemIndicator})),a=i(()=>({root:e.value.swatchRoot,checker:e.value.swatchChecker,fill:e.value.swatchFill}));return n(t),r(a),e});export{a as provideColorSwatchPickerItemContext,s as provideColorSwatchPickerUi,o as useColorSwatchPickerItemContext};

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

@@ -1,7 +1,8 @@
-import { ColorSwatchPickerItemEmits, ColorSwatchPickerItemIndicatorProps, ColorSwatchPickerItemProps, ColorSwatchPickerItemSwatchProps, ColorSwatchPickerRootEmits, ColorSwatchPickerRootProps, ColorSwatchPickerUi, ColorSwatchPickerUiSlot } from "./types.js";
-import { _default as _default$3 } from "./color-swatch-picker-root.vue.js";
-import { _default } from "./color-swatch-picker-item.vue.js";
-import { _default as _default$1 } from "./color-swatch-picker-item-indicator.vue.js";
-import { _default as _default$2 } from "./color-swatch-picker-item-swatch.vue.js";
+import { ColorSwatchPickerCompactColorSlotProps, ColorSwatchPickerCompactEmits, ColorSwatchPickerCompactProps, ColorSwatchPickerCompactSlotProps, ColorSwatchPickerCompactSlots, ColorSwatchPickerItemEmits, ColorSwatchPickerItemIndicatorProps, ColorSwatchPickerItemProps, ColorSwatchPickerItemSwatchProps, ColorSwatchPickerRootEmits, ColorSwatchPickerRootProps, ColorSwatchPickerUi, ColorSwatchPickerUiSlot } from "./types.js";
+import { _default } from "./color-swatch-picker-compact.vue.js";
+import { _default as _default$4 } from "./color-swatch-picker-root.vue.js";
+import { _default as _default$1 } from "./color-swatch-picker-item.vue.js";
+import { _default as _default$2 } from "./color-swatch-picker-item-indicator.vue.js";
+import { _default as _default$3 } from "./color-swatch-picker-item-swatch.vue.js";
 import { provideColorSwatchPickerUi } from "./context.js";
-export { _default as ColorSwatchPickerItem, type ColorSwatchPickerItemEmits, _default$1 as ColorSwatchPickerItemIndicator, type ColorSwatchPickerItemIndicatorProps, type ColorSwatchPickerItemProps, _default$2 as ColorSwatchPickerItemSwatch, type ColorSwatchPickerItemSwatchProps, _default$3 as ColorSwatchPickerRoot, type ColorSwatchPickerRootEmits, type ColorSwatchPickerRootProps, type ColorSwatchPickerUi, type ColorSwatchPickerUiSlot, provideColorSwatchPickerUi };
+export { _default as ColorSwatchPickerCompact, type ColorSwatchPickerCompactColorSlotProps, type ColorSwatchPickerCompactEmits, type ColorSwatchPickerCompactProps, type ColorSwatchPickerCompactSlotProps, type ColorSwatchPickerCompactSlots, _default$1 as ColorSwatchPickerItem, type ColorSwatchPickerItemEmits, _default$2 as ColorSwatchPickerItemIndicator, type ColorSwatchPickerItemIndicatorProps, type ColorSwatchPickerItemProps, _default$3 as ColorSwatchPickerItemSwatch, type ColorSwatchPickerItemSwatchProps, _default$4 as ColorSwatchPickerRoot, type ColorSwatchPickerRootEmits, type ColorSwatchPickerRootProps, type ColorSwatchPickerUi, type ColorSwatchPickerUiSlot, provideColorSwatchPickerUi };

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

@@ -1 +1 @@
-import e from"./color-swatch-picker-root.js";import{provideColorSwatchPickerUi as t}from"./context.js";import n from"./color-swatch-picker-item.js";import r from"./color-swatch-picker-item-indicator.js";import i from"./color-swatch-picker-item-swatch.js";export{n as ColorSwatchPickerItem,r as ColorSwatchPickerItemIndicator,i as ColorSwatchPickerItemSwatch,e as ColorSwatchPickerRoot,t as provideColorSwatchPickerUi};
+import{provideColorSwatchPickerUi as e}from"./context.js";import t from"./color-swatch-picker-item.js";import n from"./color-swatch-picker-item-indicator.js";import r from"./color-swatch-picker-item-swatch.js";import i from"./color-swatch-picker-root.js";import a from"./color-swatch-picker-compact.js";export{a as ColorSwatchPickerCompact,t as ColorSwatchPickerItem,n as ColorSwatchPickerItemIndicator,r as ColorSwatchPickerItemSwatch,i as ColorSwatchPickerRoot,e as provideColorSwatchPickerUi};

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

@@ -1,45 +1,100 @@
 import { UiClass } from "../../types/common.js";
-import { PrimitiveProps } from "../primitive/types.js";
 import { ListboxItemEmits, ListboxItemIndicatorProps, ListboxItemProps, ListboxRootEmits, ListboxRootProps } from "../listbox/types.js";
-import { ComputedRef, HTMLAttributes } from "vue";
+import { ColorSwatchCompactProps } from "../color-swatch/types.js";
+import { ComputedRef } from "vue";
 
 //#region src/components/color-swatch-picker/types.d.ts
 /**
- * Props for the color swatch picker root component.
+ * Properties for the ColorSwatchPickerRoot component.
  */
-interface ColorSwatchPickerRootProps<M extends boolean = false> extends PrimitiveProps, ListboxRootProps<M> {}
+interface ColorSwatchPickerRootProps<M extends boolean = false> extends ListboxRootProps<M> {}
 /**
- * Emits for the color swatch picker root component.
+ * Events for the ColorSwatchPickerRoot component.
  */
 type ColorSwatchPickerRootEmits<M extends boolean = false> = ListboxRootEmits<M>;
 /**
- * Props for the color swatch picker item component.
+ * Properties for the ColorSwatchPickerItem component.
  */
 interface ColorSwatchPickerItemProps extends ListboxItemProps {}
 /**
- * Emits for the color swatch picker item component.
+ * Events for the ColorSwatchPickerItem component.
  */
 type ColorSwatchPickerItemEmits = ListboxItemEmits;
 /**
- * Props for the color swatch picker item indicator component.
+ * Properties for the ColorSwatchPickerItemIndicator component.
  */
 interface ColorSwatchPickerItemIndicatorProps extends ListboxItemIndicatorProps {}
 /**
- * Props for the color swatch picker item swatch component.
+ * Properties for the ColorSwatchPickerItemSwatch component.
  */
-interface ColorSwatchPickerItemSwatchProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {
+interface ColorSwatchPickerItemSwatchProps extends ColorSwatchCompactProps {}
+/**
+ * Slot properties for the ColorSwatchPickerCompact component.
+ */
+interface ColorSwatchPickerCompactSlotProps<M extends boolean = false> {
+  /**
+   * Current model value.
+   */
+  modelValue: M extends true ? string[] : string;
+}
+/**
+ * Slot properties for color-specific ColorSwatchPickerCompact slots.
+ */
+interface ColorSwatchPickerCompactColorSlotProps {
+  /**
+   * Current swatch color.
+   */
+  color: string;
+}
+/**
+ * Properties for the ColorSwatchPickerCompact component.
+ */
+interface ColorSwatchPickerCompactProps<M extends boolean = false> extends ColorSwatchPickerRootProps<M> {
+  /**
+   * Colors.
+   */
+  colors?: string[];
+  /**
+   * Properties forwarded to the item element.
+   */
+  itemProps?: Omit<ColorSwatchPickerItemProps, 'value'>;
+  /**
+   * Properties forwarded to the indicator element.
+   */
+  indicatorProps?: ColorSwatchPickerItemIndicatorProps;
+  /**
+   * Properties forwarded to the swatch element.
+   */
+  swatchProps?: ColorSwatchPickerItemSwatchProps;
+}
+/**
+ * Events for the ColorSwatchPickerCompact component.
+ */
+type ColorSwatchPickerCompactEmits<M extends boolean = false> = ColorSwatchPickerRootEmits<M> & ColorSwatchPickerItemEmits;
+/**
+ * Slots for the ColorSwatchPickerCompact component.
+ */
+interface ColorSwatchPickerCompactSlots<M extends boolean = false> {
+  /**
+   * Custom content rendered when colors are not provided.
+   */
+  default?: (props: ColorSwatchPickerCompactSlotProps<M>) => any;
+  /**
+   * Custom content rendered inside each swatch.
+   */
+  swatch?: (props: ColorSwatchPickerCompactColorSlotProps) => any;
   /**
-   * Label text rendered by the component.
+   * Custom content rendered inside each indicator.
    */
-  label?: string;
+  indicator?: (props: ColorSwatchPickerCompactColorSlotProps) => any;
 }
 /**
- * Available UI slots for the color swatch picker component.
+ * Available UI slots for the ColorSwatchPicker component.
  */
-type ColorSwatchPickerUiSlot = 'root' | 'item' | 'itemIndicator' | 'swatch';
+type ColorSwatchPickerUiSlot = 'root' | 'item' | 'itemIndicator' | 'swatchRoot' | 'swatchChecker' | 'swatchFill';
 /**
- * UI class overrides for the color swatch picker component.
+ * UI class overrides for the ColorSwatchPicker component.
  */
 type ColorSwatchPickerUi = UiClass<ColorSwatchPickerUiSlot>;
 //#endregion
-export { ColorSwatchPickerItemEmits, ColorSwatchPickerItemIndicatorProps, ColorSwatchPickerItemProps, ColorSwatchPickerItemSwatchProps, ColorSwatchPickerRootEmits, ColorSwatchPickerRootProps, ColorSwatchPickerUi, ColorSwatchPickerUiSlot };
+export { ColorSwatchPickerCompactColorSlotProps, ColorSwatchPickerCompactEmits, ColorSwatchPickerCompactProps, ColorSwatchPickerCompactSlotProps, ColorSwatchPickerCompactSlots, ColorSwatchPickerItemEmits, ColorSwatchPickerItemIndicatorProps, ColorSwatchPickerItemProps, ColorSwatchPickerItemSwatchProps, ColorSwatchPickerRootEmits, ColorSwatchPickerRootProps, ColorSwatchPickerUi, ColorSwatchPickerUiSlot };

package/dist/components/combobox/combobox-arrow.js

@@ -1 +1 @@
-import{useComboboxContentContext as e,useComboboxRootContext as t,useComboboxUi as n}from"./context.js";import r from"../popper/popper-arrow.js";import"../popper/index.js";import{computed as i,createBlock as a,createCommentVNode as o,defineComponent as s,normalizeClass as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=s({name:`ComboboxArrow`,__name:`combobox-arrow`,setup(s){let p=n(`arrow`),{open:m}=t(`ComboboxArrow`),{position:h}=e(`ComboboxArrow`),g=i(()=>m.value&&h.value===`popper`);return(e,t)=>g.value?(l(),a(d(r),{key:0,class:c(d(p)),"data-slot":`arrow`},{default:f(()=>[u(e.$slots,`default`)]),_:3},8,[`class`])):o(`v-if`,!0)}});export{p as default};
+import{useComboboxContentContext as e,useComboboxRootContext as t,useComboboxUi as n}from"./context.js";import r from"../popper/popper-arrow.js";import"../popper/index.js";import{computed as i,createBlock as a,createCommentVNode as o,defineComponent as s,normalizeClass as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=s({name:`ComboboxArrow`,__name:`combobox-arrow`,setup(s){let p=n(`arrow`),{open:m}=t(`ComboboxArrow`),{position:h}=e(`ComboboxArrow`),g=i(()=>m.value&&h.value===`popper`);return(e,t)=>g.value?(l(),a(d(r),{key:0,"data-soybean-combobox-arrow":``,class:c(d(p))},{default:f(()=>[u(e.$slots,`default`)]),_:3},8,[`class`])):o(`v-if`,!0)}});export{p as default};

package/dist/components/combobox/combobox-cancel.js

@@ -1 +1 @@
-import{Primitive as e}from"../primitive/primitive.js";import"../primitive/index.js";import{useComboboxRootContext as t,useComboboxUi as n}from"./context.js";import{computed as r,createBlock as i,defineComponent as a,normalizeClass as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=a({name:`ComboboxCancel`,__name:`combobox-cancel`,props:{disabled:{type:Boolean},asChild:{type:Boolean},as:{default:`button`}},setup(a){let d=a,f=n(`cancel`),{disabled:p,inputElement:m,filterSearch:h,resetModelValueOnClear:g,resetModelValue:_}=t(`ComboboxCancel`),v=r(()=>d.disabled||p.value||!1),y=r(()=>d.as===`button`?`button`:void 0),b=r(()=>v.value?-1:d.as===`button`?void 0:0),x=()=>{if(v.value)return;h.value=``;let e=m.value;e&&(e.value=``,e.dispatchEvent(new Event(`input`,{bubbles:!0})),e.dispatchEvent(new Event(`change`,{bubbles:!0})),e.focus()),g.value&&_()};return(t,n)=>(s(),i(l(e),{as:a.as,"as-child":a.asChild,class:o(l(f)),type:y.value,"aria-disabled":v.value||void 0,"data-disabled":v.value?``:void 0,disabled:v.value,tabindex:b.value,"data-slot":`cancel`,onClick:x},{default:u(()=>[c(t.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`type`,`aria-disabled`,`data-disabled`,`disabled`,`tabindex`]))}});export{d as default};
+import{Primitive as e}from"../primitive/primitive.js";import"../primitive/index.js";import{useComboboxRootContext as t,useComboboxUi as n}from"./context.js";import{computed as r,createBlock as i,defineComponent as a,normalizeClass as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=a({name:`ComboboxCancel`,__name:`combobox-cancel`,props:{disabled:{type:Boolean},asChild:{type:Boolean},as:{default:`button`}},setup(a){let d=a,f=n(`cancel`),{disabled:p,inputElement:m,filterSearch:h,resetModelValueOnClear:g,resetModelValue:_}=t(`ComboboxCancel`),v=r(()=>d.disabled||p.value||!1),y=r(()=>d.as===`button`?`button`:void 0),b=r(()=>v.value?-1:d.as===`button`?void 0:0),x=()=>{if(v.value)return;h.value=``;let e=m.value;e&&(e.value=``,e.dispatchEvent(new Event(`input`,{bubbles:!0})),e.dispatchEvent(new Event(`change`,{bubbles:!0})),e.focus()),g.value&&_()};return(t,n)=>(s(),i(l(e),{as:a.as,"as-child":a.asChild,"data-soybean-combobox-cancel":``,class:o(l(f)),type:y.value,"aria-disabled":v.value||void 0,"data-disabled":v.value?``:void 0,disabled:v.value,tabindex:b.value,onClick:x},{default:u(()=>[c(t.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`type`,`aria-disabled`,`data-disabled`,`disabled`,`tabindex`]))}});export{d as default};

package/dist/components/combobox/combobox-compact.js

@@ -1 +1 @@
-import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"../_icon/icon.js";import n from"../popper/popper-anchor.js";import r from"../portal/portal.js";import i from"../listbox/listbox-group-label.js";import a from"../listbox/listbox-item-indicator.js";import o from"./combobox-cancel.js";import s from"./combobox-content.js";import c from"./combobox-empty.js";import l from"./combobox-group.js";import u from"./combobox-input.js";import d from"./combobox-item.js";import f from"./combobox-root.js";import p from"./combobox-separator.js";import m from"./combobox-trigger.js";import h from"./combobox-viewport.js";import{getDisplayValue as g,getSelectedLabels as _,isGroupOption as v}from"./shared.js";import{Fragment as y,computed as b,createBlock as x,createCommentVNode as S,createElementBlock as C,createTextVNode as w,createVNode as T,defineComponent as E,guardReactiveProps as D,mergeProps as O,normalizeClass as k,normalizeProps as A,openBlock as j,renderList as M,renderSlot as N,toDisplayString as P,unref as F,withCtx as I}from"vue";const L=E({name:`ComboboxCompact`,__name:`combobox-compact`,props:{items:{},placeholder:{},searchPlaceholder:{},clearLabel:{default:`Clear input`},emptyLabel:{default:`No results found.`},anchorProps:{},triggerProps:{},cancelProps:{},portalProps:{},contentProps:{},viewportProps:{},inputProps:{},emptyProps:{},groupProps:{},groupLabelProps:{},itemProps:{},itemIndicatorProps:{},separatorProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},resetSearchTermOnBlur:{type:Boolean},resetSearchTermOnSelect:{type:Boolean},openOnFocus:{type:Boolean},openOnClick:{type:Boolean},ignoreFilter:{type:Boolean},resetModelValueOnClear:{type:Boolean},dir:{},disabled:{type:Boolean},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},clearable:{type:Boolean,default:!0},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`update:open`,`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`placed`,`select`],setup(E,{emit:L}){let R=E,z=L,B=e(R,[`items`,`placeholder`,`searchPlaceholder`,`clearLabel`,`emptyLabel`,`anchorProps`,`triggerProps`,`cancelProps`,`portalProps`,`contentProps`,`viewportProps`,`inputProps`,`emptyProps`,`groupProps`,`groupLabelProps`,`itemProps`,`itemIndicatorProps`,`separatorProps`]),V=e=>R.multiple?``:g(e,R.items),H=b(()=>R.inputProps?.controlProps?.[`aria-label`]??R.searchPlaceholder??R.placeholder??`Search`),U=b(()=>({...R.inputProps,displayValue:R.inputProps?.displayValue??V,controlProps:{...R.inputProps?.controlProps,"aria-label":H.value},placeholder:R.searchPlaceholder??R.inputProps?.placeholder,autofocus:R.inputProps?.autofocus??!0})),W=b(()=>({...R.viewportProps,"aria-label":R.viewportProps?.[`aria-label`]??R.placeholder??`Options`})),G=b(()=>({...R.anchorProps,asChild:R.anchorProps?.asChild??!0})),K=(e,t)=>v(e)?`group-${e.label}-${t}`:e.value,q=e=>_(e,R.items),J=e=>{let t=q(e);return t.length?t.join(`, `):R.placeholder},Y=e=>({...R.triggerProps,"aria-label":R.triggerProps?.[`aria-label`]??J(e),"data-placeholder":q(e).length?void 0:``});return(e,g)=>(j(),x(f,O(F(B),{onHighlight:g[7]||(g[7]=e=>z(`highlight`,e)),"onUpdate:modelValue":g[8]||(g[8]=e=>z(`update:modelValue`,e)),"onUpdate:open":g[9]||(g[9]=e=>z(`update:open`,e))}),{default:I(({modelValue:f})=>[T(n,A(D(G.value)),{default:I(()=>[T(m,A(D(Y(f))),{default:I(({triggerIconClass:n})=>[N(e.$slots,`trigger-leading`),N(e.$slots,`trigger-value`,{modelValue:f,selectedLabels:q(f),slotText:J(f)},()=>[w(P(J(f)),1)]),N(e.$slots,`trigger-trailing`),N(e.$slots,`trigger-icon`,{},()=>[T(t,{icon:`lucide:chevrons-up-down`,class:k(n)},null,8,[`class`])])]),_:2},1040)]),_:2},1040),T(r,A(D(E.portalProps)),{default:I(()=>[T(s,O(E.contentProps,{onCloseAutoFocus:g[2]||(g[2]=e=>z(`closeAutoFocus`,e)),onEscapeKeyDown:g[3]||(g[3]=e=>z(`escapeKeyDown`,e)),onPointerDownOutside:g[4]||(g[4]=e=>z(`pointerDownOutside`,e)),onFocusOutside:g[5]||(g[5]=e=>z(`focusOutside`,e)),onInteractOutside:g[6]||(g[6]=e=>z(`interactOutside`,e))}),{default:I(()=>[T(u,A(D(U.value)),{leading:I(n=>[N(e.$slots,`input-leading`,A(D(n)),()=>[T(t,{icon:`lucide:search`})])]),trailing:I(n=>[E.clearable?(j(),x(o,O({key:0},E.cancelProps,{"aria-label":E.clearLabel}),{default:I(()=>[T(t,{icon:`lucide:x`})]),_:1},16,[`aria-label`])):S(`v-if`,!0),N(e.$slots,`input-trailing`,A(D(n)))]),_:3},16),T(c,A(D(E.emptyProps)),{default:I(()=>[N(e.$slots,`empty`,{},()=>[w(P(E.emptyLabel),1)])]),_:3},16),T(h,A(D(W.value)),{default:I(()=>[(j(!0),C(y,null,M(E.items,(n,r)=>(j(),C(y,{key:K(n,r)},[F(v)(n)?(j(),C(y,{key:0},[n.separator?(j(),x(p,O({key:0,ref_for:!0},E.separatorProps),null,16)):S(`v-if`,!0),T(l,O({ref_for:!0},E.groupProps),{default:I(()=>[T(i,O({ref_for:!0},E.groupLabelProps),{default:I(()=>[N(e.$slots,`group-label`,{item:n},()=>[w(P(n.label),1)])]),_:2},1040),(j(!0),C(y,null,M(n.items,n=>(j(),C(y,{key:n.value},[n.separator?(j(),x(p,O({key:0,ref_for:!0},E.separatorProps),null,16)):S(`v-if`,!0),T(d,O({ref_for:!0},E.itemProps,{value:n.value,"text-value":n.textValue??n.label,disabled:n.disabled,onSelect:g[0]||(g[0]=e=>z(`select`,e))}),{default:I(()=>[N(e.$slots,`item-leading`,{item:n},()=>[n.icon?(j(),x(t,{key:0,icon:n.icon},null,8,[`icon`])):S(`v-if`,!0)]),N(e.$slots,`item-text`,{item:n},()=>[w(P(n.label),1)]),N(e.$slots,`item-trailing`,{item:n}),T(a,O({ref_for:!0},E.itemIndicatorProps),{default:I(()=>[N(e.$slots,`item-indicator`,{item:n},()=>[T(t,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`,`text-value`,`disabled`])],64))),128))]),_:2},1040)],64)):(j(),C(y,{key:1},[n.separator?(j(),x(p,O({key:0,ref_for:!0},E.separatorProps),null,16)):S(`v-if`,!0),T(d,O({ref_for:!0},E.itemProps,{value:n.value,"text-value":n.textValue??n.label,disabled:n.disabled,onSelect:g[1]||(g[1]=e=>z(`select`,e))}),{default:I(()=>[N(e.$slots,`item-leading`,{item:n},()=>[n.icon?(j(),x(t,{key:0,icon:n.icon},null,8,[`icon`])):S(`v-if`,!0)]),N(e.$slots,`item-text`,{item:n},()=>[w(P(n.label),1)]),N(e.$slots,`item-trailing`,{item:n}),T(a,O({ref_for:!0},E.itemIndicatorProps),{default:I(()=>[N(e.$slots,`item-indicator`,{item:n},()=>[T(t,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`,`text-value`,`disabled`])],64))],64))),128))]),_:3},16)]),_:3},16)]),_:3},16)]),_:3},16))}});export{L as default};
+import{useLocaleMessages as e}from"../../locale/hooks.js";import"../../locale/index.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import n from"../_icon/icon.js";import r from"../popper/popper-anchor.js";import i from"../portal/portal.js";import a from"../listbox/listbox-group-label.js";import o from"../listbox/listbox-item-indicator.js";import s from"./combobox-cancel.js";import c from"./combobox-content.js";import l from"./combobox-empty.js";import u from"./combobox-group.js";import d from"./combobox-input.js";import f from"./combobox-item.js";import p from"./combobox-root.js";import m from"./combobox-separator.js";import h from"./combobox-trigger.js";import g from"./combobox-viewport.js";import{getDisplayValue as _,getSelectedLabels as v,isGroupOption as y}from"./shared.js";import{Fragment as b,computed as x,createBlock as S,createCommentVNode as C,createElementBlock as w,createTextVNode as T,createVNode as E,defineComponent as D,guardReactiveProps as O,mergeProps as k,normalizeClass as A,normalizeProps as j,openBlock as M,renderList as N,renderSlot as P,toDisplayString as F,unref as I,withCtx as L}from"vue";const R=D({name:`ComboboxCompact`,__name:`combobox-compact`,props:{items:{},placeholder:{},searchPlaceholder:{},clearLabel:{},emptyLabel:{},anchorProps:{},triggerProps:{},cancelProps:{},portalProps:{},contentProps:{},viewportProps:{},inputProps:{},emptyProps:{},groupProps:{},groupLabelProps:{},itemProps:{},itemIndicatorProps:{},separatorProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},resetSearchTermOnBlur:{type:Boolean},resetSearchTermOnSelect:{type:Boolean},openOnFocus:{type:Boolean},openOnClick:{type:Boolean},ignoreFilter:{type:Boolean},resetModelValueOnClear:{type:Boolean},dir:{},disabled:{type:Boolean},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},clearable:{type:Boolean,default:!0},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`update:open`,`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`placed`,`select`],setup(D,{emit:R}){let z=D,B=R,V=t(z,[`items`,`placeholder`,`searchPlaceholder`,`clearLabel`,`emptyLabel`,`anchorProps`,`triggerProps`,`cancelProps`,`portalProps`,`contentProps`,`viewportProps`,`inputProps`,`emptyProps`,`groupProps`,`groupLabelProps`,`itemProps`,`itemIndicatorProps`,`separatorProps`]),H=e=>z.multiple?``:_(e,z.items),U=e(),W=x(()=>z.inputProps?.controlProps?.[`aria-label`]??z.searchPlaceholder??z.placeholder??U.value.combobox.search),G=x(()=>({...z.inputProps,displayValue:z.inputProps?.displayValue??H,controlProps:{...z.inputProps?.controlProps,"aria-label":W.value},placeholder:z.searchPlaceholder??z.inputProps?.placeholder,autofocus:z.inputProps?.autofocus??!0})),K=x(()=>({...z.viewportProps,"aria-label":z.viewportProps?.[`aria-label`]??z.placeholder??U.value.combobox.options})),q=x(()=>({...z.anchorProps,asChild:z.anchorProps?.asChild??!0})),J=(e,t)=>y(e)?`group-${e.label}-${t}`:e.value,Y=e=>v(e,z.items),X=e=>{let t=Y(e);return t.length?t.join(`, `):z.placeholder},Z=e=>({...z.triggerProps,"aria-label":z.triggerProps?.[`aria-label`]??X(e),"data-placeholder":Y(e).length?void 0:``});return(e,t)=>(M(),S(p,k(I(V),{onHighlight:t[7]||(t[7]=e=>B(`highlight`,e)),"onUpdate:modelValue":t[8]||(t[8]=e=>B(`update:modelValue`,e)),"onUpdate:open":t[9]||(t[9]=e=>B(`update:open`,e))}),{default:L(({modelValue:p})=>[E(r,j(O(q.value)),{default:L(()=>[E(h,j(O(Z(p))),{default:L(({triggerIconClass:t})=>[P(e.$slots,`trigger-leading`),P(e.$slots,`trigger-value`,{modelValue:p,selectedLabels:Y(p),slotText:X(p)},()=>[T(F(X(p)),1)]),P(e.$slots,`trigger-trailing`),P(e.$slots,`trigger-icon`,{},()=>[E(n,{icon:`lucide:chevrons-up-down`,class:A(t)},null,8,[`class`])])]),_:2},1040)]),_:2},1040),E(i,j(O(D.portalProps)),{default:L(()=>[E(c,k(D.contentProps,{onCloseAutoFocus:t[2]||(t[2]=e=>B(`closeAutoFocus`,e)),onEscapeKeyDown:t[3]||(t[3]=e=>B(`escapeKeyDown`,e)),onPointerDownOutside:t[4]||(t[4]=e=>B(`pointerDownOutside`,e)),onFocusOutside:t[5]||(t[5]=e=>B(`focusOutside`,e)),onInteractOutside:t[6]||(t[6]=e=>B(`interactOutside`,e))}),{default:L(()=>[E(d,j(O(G.value)),{leading:L(t=>[P(e.$slots,`input-leading`,j(O(t)),()=>[E(n,{icon:`lucide:search`})])]),trailing:L(t=>[D.clearable?(M(),S(s,k({key:0},D.cancelProps,{"aria-label":z.clearLabel??I(U).combobox.clearInput}),{default:L(()=>[E(n,{icon:`lucide:x`})]),_:1},16,[`aria-label`])):C(`v-if`,!0),P(e.$slots,`input-trailing`,j(O(t)))]),_:3},16),E(l,j(O(D.emptyProps)),{default:L(()=>[P(e.$slots,`empty`,{},()=>[T(F(z.emptyLabel??I(U).combobox.noResults),1)])]),_:3},16),E(g,j(O(K.value)),{default:L(()=>[(M(!0),w(b,null,N(D.items,(r,i)=>(M(),w(b,{key:J(r,i)},[I(y)(r)?(M(),w(b,{key:0},[r.separator?(M(),S(m,k({key:0,ref_for:!0},D.separatorProps),null,16)):C(`v-if`,!0),E(u,k({ref_for:!0},D.groupProps),{default:L(()=>[E(a,k({ref_for:!0},D.groupLabelProps),{default:L(()=>[P(e.$slots,`group-label`,{item:r},()=>[T(F(r.label),1)])]),_:2},1040),(M(!0),w(b,null,N(r.items,r=>(M(),w(b,{key:r.value},[r.separator?(M(),S(m,k({key:0,ref_for:!0},D.separatorProps),null,16)):C(`v-if`,!0),E(f,k({ref_for:!0},D.itemProps,{value:r.value,"text-value":r.textValue??r.label,disabled:r.disabled,onSelect:t[0]||(t[0]=e=>B(`select`,e))}),{default:L(()=>[P(e.$slots,`item-leading`,{item:r},()=>[r.icon?(M(),S(n,{key:0,icon:r.icon},null,8,[`icon`])):C(`v-if`,!0)]),P(e.$slots,`item-text`,{item:r},()=>[T(F(r.label),1)]),P(e.$slots,`item-trailing`,{item:r}),E(o,k({ref_for:!0},D.itemIndicatorProps),{default:L(()=>[P(e.$slots,`item-indicator`,{item:r},()=>[E(n,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`,`text-value`,`disabled`])],64))),128))]),_:2},1040)],64)):(M(),w(b,{key:1},[r.separator?(M(),S(m,k({key:0,ref_for:!0},D.separatorProps),null,16)):C(`v-if`,!0),E(f,k({ref_for:!0},D.itemProps,{value:r.value,"text-value":r.textValue??r.label,disabled:r.disabled,onSelect:t[1]||(t[1]=e=>B(`select`,e))}),{default:L(()=>[P(e.$slots,`item-leading`,{item:r},()=>[r.icon?(M(),S(n,{key:0,icon:r.icon},null,8,[`icon`])):C(`v-if`,!0)]),P(e.$slots,`item-text`,{item:r},()=>[T(F(r.label),1)]),P(e.$slots,`item-trailing`,{item:r}),E(o,k({ref_for:!0},D.itemIndicatorProps),{default:L(()=>[P(e.$slots,`item-indicator`,{item:r},()=>[E(n,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`,`text-value`,`disabled`])],64))],64))),128))]),_:3},16)]),_:3},16)]),_:3},16)]),_:3},16))}});export{R as default};

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

@@ -8,12 +8,12 @@ import * as _$vue from "vue";
 declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: _$vue.PublicProps & __VLS_PrettifyLocal<ComboboxCompactProps<M> & {
     onSelect?: ((event: SelectEvent<string>) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
-    onHighlight?: ((payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: FocusOutsideEvent) => any) | undefined;
+    onHighlight?: ((payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => any) | undefined;
     onInteractOutside?: ((event: PointerDownOutsideEvent | FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
@@ -24,7 +24,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
   expose: (exposed: {}) => void;
   attrs: any;
   slots: ComboboxCompactSlots<M>;
-  emit: ((evt: "select", event: SelectEvent<string>) => void) & ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: FocusOutsideEvent) => void) & ((evt: "interactOutside", event: PointerDownOutsideEvent | FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "placed") => void);
+  emit: ((evt: "select", event: SelectEvent<string>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: FocusOutsideEvent) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "interactOutside", event: PointerDownOutsideEvent | FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "placed") => void);
 }>) => _$vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };