@soybeanjs/headless 0.30.0 → 0.40.0-beta.1

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

@@ -6,13 +6,14 @@ import { IconValue } from "../_icon/types.js";
 import { PrimitiveWithBaseProps } from "../primitive/types.js";
 import { ButtonProps } from "../button/types.js";
 import { LabelProps } from "../label/types.js";
-import { RovingFocusGroupProps } from "../roving-focus/types.js";
+import { RovingFocusGroupOptions } from "../../composables/use-roving-focus.js";
+import "../../composables/index.js";
 import { ComputedRef, ShallowRef } from "vue";
 //#region src/components/checkbox/types.d.ts
 /**
  * Properties for the CheckboxRoot component.
  */
-interface CheckboxRootProps extends FormFieldCommonProps, BaseProps {
+export interface CheckboxRootProps extends FormFieldCommonProps, BaseProps {
   /**
    * Id.
    */
@@ -37,25 +38,25 @@ interface CheckboxRootProps extends FormFieldCommonProps, BaseProps {
 /**
  * Events for the CheckboxRoot component.
  */
-type CheckboxRootEmits = {
+export type CheckboxRootEmits = {
   /** Event handler called when the value of the checkbox changes. */
   'update:modelValue': [value: CheckedState | null];
 };
 /**
  * Properties for the CheckboxControl component.
  */
-interface CheckboxControlProps extends ButtonProps {
+export interface CheckboxControlProps extends ButtonProps {
   /** Id of the element */
   id?: string;
 }
 /**
  * Properties for the CheckboxIndicator component.
  */
-interface CheckboxIndicatorProps extends ForceMountProps, PrimitiveWithBaseProps {}
+export interface CheckboxIndicatorProps extends ForceMountProps, PrimitiveWithBaseProps {}
 /**
  * Option data for the CheckboxGroup component.
  */
-type CheckboxGroupOptionData<T extends DefinedValue = DefinedValue> = {
+export type CheckboxGroupOptionData<T extends DefinedValue = DefinedValue> = {
   /**
    * Value associated with the current item.
    */
@@ -72,7 +73,7 @@ type CheckboxGroupOptionData<T extends DefinedValue = DefinedValue> = {
 /**
  * Option data for the CheckboxCardGroup component.
  */
-type CheckboxCardGroupOptionData<T extends DefinedValue = DefinedValue> = CheckboxGroupOptionData<T> & {
+export type CheckboxCardGroupOptionData<T extends DefinedValue = DefinedValue> = CheckboxGroupOptionData<T> & {
   /**
    * Icon rendered by the component.
    */
@@ -85,7 +86,7 @@ type CheckboxCardGroupOptionData<T extends DefinedValue = DefinedValue> = Checkb
 /**
  * Properties for the CheckboxGroupRoot component.
  */
-interface CheckboxGroupRootProps<T extends DefinedValue = DefinedValue> extends Omit<RovingFocusGroupProps, 'currentTabStopId' | 'defaultCurrentTabStopId' | 'preventScrollOnEntryFocus' | 'as' | 'asChild'>, FormFieldCommonProps {
+export interface CheckboxGroupRootProps<T extends DefinedValue = DefinedValue> extends Omit<RovingFocusGroupOptions, 'currentTabStopId' | 'defaultCurrentTabStopId' | 'preventScrollOnEntryFocus'>, FormFieldCommonProps {
   /** The controlled value of the checkbox. Can be bound with v-model. */
   modelValue?: T[];
   /** The value of the checkbox when it is initially rendered. Use when you do not need to control its value. */
@@ -106,14 +107,14 @@ interface CheckboxGroupRootProps<T extends DefinedValue = DefinedValue> extends
 /**
  * Events for the CheckboxGroupRoot component.
  */
-type CheckboxGroupRootEmits<T extends DefinedValue = DefinedValue> = {
+export type CheckboxGroupRootEmits<T extends DefinedValue = DefinedValue> = {
   /** Event handler called when the value of the checkbox group changes. */
   'update:modelValue': [value: T[]];
 };
 /**
  * Properties for the CheckboxCompact component.
  */
-interface CheckboxCompactProps extends CheckboxRootProps {
+export interface CheckboxCompactProps extends CheckboxRootProps {
   /**
    * Label text rendered by the component.
    */
@@ -134,11 +135,11 @@ interface CheckboxCompactProps extends CheckboxRootProps {
 /**
  * Events for the CheckboxCompact component.
  */
-type CheckboxCompactEmits = CheckboxRootEmits;
+export type CheckboxCompactEmits = CheckboxRootEmits;
 /**
  * Properties for the CheckboxCardCompact component.
  */
-interface CheckboxCardCompactProps extends CheckboxCompactProps {
+export interface CheckboxCardCompactProps extends CheckboxCompactProps {
   /**
    * Icon rendered by the component.
    */
@@ -151,11 +152,11 @@ interface CheckboxCardCompactProps extends CheckboxCompactProps {
 /**
  * Events for the CheckboxCardCompact component.
  */
-type CheckboxCardCompactEmits = CheckboxCompactEmits;
+export type CheckboxCardCompactEmits = CheckboxCompactEmits;
 /**
  * Properties for the CheckboxGroupCompact component.
  */
-interface CheckboxGroupCompactProps<T extends CheckboxGroupOptionData = CheckboxGroupOptionData> extends CheckboxGroupRootProps<T['value']> {
+export interface CheckboxGroupCompactProps<T extends CheckboxGroupOptionData = CheckboxGroupOptionData> extends CheckboxGroupRootProps<T['value']> {
   /**
    * Items rendered by the component.
    */
@@ -180,30 +181,30 @@ interface CheckboxGroupCompactProps<T extends CheckboxGroupOptionData = Checkbox
 /**
  * Properties for the CheckboxCardGroupCompact component.
  */
-interface CheckboxCardGroupCompactProps<T extends CheckboxCardGroupOptionData = CheckboxCardGroupOptionData> extends CheckboxGroupCompactProps<T> {}
+export interface CheckboxCardGroupCompactProps<T extends CheckboxCardGroupOptionData = CheckboxCardGroupOptionData> extends CheckboxGroupCompactProps<T> {}
 /**
  * Events for the CheckboxGroupCompact component.
  */
-type CheckboxGroupCompactEmits<T extends DefinedValue = DefinedValue> = CheckboxGroupRootEmits<T>;
+export type CheckboxGroupCompactEmits<T extends DefinedValue = DefinedValue> = CheckboxGroupRootEmits<T>;
 /**
  * Events for the CheckboxCardGroupCompact component.
  */
-type CheckboxCardGroupCompactEmits<T extends DefinedValue = DefinedValue> = CheckboxGroupRootEmits<T>;
+export type CheckboxCardGroupCompactEmits<T extends DefinedValue = DefinedValue> = CheckboxGroupRootEmits<T>;
 /**
  * Available UI slots for the Checkbox component.
  */
-type CheckboxUiSlot = 'groupRoot' | 'root' | 'indicator' | 'indicator-icon' | 'label' | 'control';
+export type CheckboxUiSlot = 'groupRoot' | 'root' | 'indicator' | 'indicator-icon' | 'label' | 'control';
 /**
  * Available UI slots for the CheckboxCard component.
  */
-type CheckboxCardUiSlot = CheckboxUiSlot | 'content' | 'icon' | 'textContent' | 'description';
+export type CheckboxCardUiSlot = CheckboxUiSlot | 'content' | 'icon' | 'textContent' | 'description';
 /**
  * UI class overrides for the Checkbox component.
  */
-type CheckboxUi = UiClass<CheckboxUiSlot>;
+export type CheckboxUi = UiClass<CheckboxUiSlot>;
 /**
  * UI class overrides for the CheckboxCard component.
  */
-type CheckboxCardUi = UiClass<CheckboxCardUiSlot>;
+export type CheckboxCardUi = UiClass<CheckboxCardUiSlot>;
 //#endregion
-export { CheckboxCardCompactEmits, CheckboxCardCompactProps, CheckboxCardGroupCompactEmits, CheckboxCardGroupCompactProps, CheckboxCardGroupOptionData, CheckboxCardUi, CheckboxCardUiSlot, CheckboxCompactEmits, CheckboxCompactProps, CheckboxControlProps, CheckboxGroupCompactEmits, CheckboxGroupCompactProps, CheckboxGroupOptionData, CheckboxGroupRootEmits, CheckboxGroupRootProps, CheckboxIndicatorProps, type LabelProps as CheckboxLabelProps, CheckboxRootEmits, CheckboxRootProps, CheckboxUi, CheckboxUiSlot };
+export type { LabelProps as CheckboxLabelProps };

package/dist/components/clipboard/clipboard.js

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

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

@@ -4,11 +4,11 @@ import { ButtonProps } from "../button/types.js";
 /**
  * State values for ClipboardState.
  */
-type ClipboardState = 'ready' | 'copied' | 'unsupported';
+export type ClipboardState = 'ready' | 'copied' | 'unsupported';
 /**
  * Properties for the Clipboard component.
  */
-interface ClipboardProps extends ButtonProps {
+export interface ClipboardProps extends ButtonProps {
   /**
    * The text value to copy.
    */
@@ -49,11 +49,17 @@ interface ClipboardProps extends ButtonProps {
    * Defaults to the localized `clipboard.copied` message from `ConfigProvider`.
    */
   copiedText?: string;
+  /**
+   * Whether to only render the icon without any text.
+   *
+   * @defaultValue false
+   */
+  onlyIcon?: boolean;
 }
 /**
  * Events for the Clipboard component.
  */
-type ClipboardEmits = {
+export type ClipboardEmits = {
   /**
    * Emitted when click occurs.
    */
@@ -70,7 +76,7 @@ type ClipboardEmits = {
 /**
  * Slot properties for the Clipboard component.
  */
-interface ClipboardSlotProps {
+export interface ClipboardSlotProps {
   /**
    * Whether copied.
    */
@@ -103,10 +109,9 @@ interface ClipboardSlotProps {
 /**
  * Slots for the Clipboard component.
  */
-type ClipboardSlots = {
+export type ClipboardSlots = {
   leading?: (props: ClipboardSlotProps) => any;
   default?: (props: ClipboardSlotProps) => any;
   trailing?: (props: ClipboardSlotProps) => any;
 };
-//#endregion
-export { ClipboardEmits, ClipboardProps, ClipboardSlotProps, ClipboardSlots, ClipboardState };
+//#endregion

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

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

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

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

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

@@ -14,8 +14,8 @@ declare const __VLS_base: import("vue").DefineComponent<CollapsibleRootProps, {
   "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
   open: boolean;
-  unmountOnHide: boolean;
   defaultOpen: boolean;
+  unmountOnHide: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

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

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

@@ -1,9 +1,9 @@
 import { UiClass } from "../../types/common.js";
 import "../../types/index.js";
 import { CollapsibleUiSlot } from "./types.js";
+import "../../index.js";
 import { UseUiConsumer } from "../../composables/use-ui-context.js";
 import "../../composables/index.js";
-import "../../index.js";
 //#region src/components/collapsible/context.d.ts
 declare const provideCollapsibleUi: (ui: import("vue").ComputedRef<Partial<UiClass<CollapsibleUiSlot>>>) => import("vue").ComputedRef<Partial<UiClass<CollapsibleUiSlot>>>, useCollapsibleUi: UseUiConsumer<CollapsibleUiSlot>;
 //#endregion

package/dist/components/collapsible/context.js

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

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

@@ -8,7 +8,7 @@ import { Ref } from "vue";
 /**
  * Properties for the CollapsibleRoot component.
  */
-interface CollapsibleRootProps extends PrimitiveWithBaseProps {
+export interface CollapsibleRootProps extends PrimitiveWithBaseProps {
   /**
    * The open state of the collapsible when it is initially rendered.
    *
@@ -25,28 +25,27 @@ interface CollapsibleRootProps extends PrimitiveWithBaseProps {
 /**
  * Events for the CollapsibleRoot component.
  */
-type CollapsibleRootEmits = {
+export type CollapsibleRootEmits = {
   /** Event handler called when the open state of the collapsible changes. */
   'update:open': [value: boolean];
 };
 /**
  * Properties for the CollapsibleContent component.
  */
-interface CollapsibleContentProps extends ForceMountProps, PrimitiveWithBaseProps {}
+export interface CollapsibleContentProps extends ForceMountProps, PrimitiveWithBaseProps {}
 /**
  * Properties for the CollapsibleTrigger component.
  */
-interface CollapsibleTriggerProps extends ButtonProps {
+export interface CollapsibleTriggerProps extends ButtonProps {
   /** When `true`, prevents the user from toggling the collapsible. */
   disabledCollapsible?: boolean;
 }
 /**
  * Available UI slots for the Collapsible component.
  */
-type CollapsibleUiSlot = 'root' | 'trigger' | 'content';
+export type CollapsibleUiSlot = 'root' | 'trigger' | 'content';
 /**
  * UI class overrides for the Collapsible component.
  */
-type CollapsibleUi = UiClass<CollapsibleUiSlot>;
-//#endregion
-export { CollapsibleContentProps, CollapsibleRootEmits, CollapsibleRootProps, CollapsibleTriggerProps, CollapsibleUi, CollapsibleUiSlot };
+export type CollapsibleUi = UiClass<CollapsibleUiSlot>;
+//#endregion

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

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

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

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

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

@@ -1 +1 @@
-import{formatColor as e,getAreaBackgroundStyle as t,getChannelRange as n,getChannelValue as r,hasVisibleChromaticity as i,setChannelValues as a,toColorObject as o}from"../../shared/color.js";import{isFormControl as s,transformPropsToContext as c}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as l}from"../../composables/use-controllable-state.js";import{useForwardElement as u}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as d}from"../primitive/primitive.js";import"../primitive/index.js";import f from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import{provideColorAreaRootContext as p,useColorAreaUi as m}from"./context.js";import{computed as h,createBlock as g,createCommentVNode as _,defineComponent as v,normalizeClass as y,openBlock as b,renderSlot as x,shallowRef as S,unref as C,watch as w,withCtx as T}from"vue";const E=v({name:`ColorAreaRoot`,__name:`color-area-root`,props:{modelValue:{default:void 0},defaultValue:{default:`#ff0000`},colorSpace:{default:`hsl`},format:{default:`hex`},xChannel:{default:`saturation`},yChannel:{default:`lightness`},disabled:{type:Boolean,default:!1},xName:{},yName:{},name:{},required:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:color`,`change`,`changeEnd`],setup(v,{emit:E}){let D=v,O=E,[k,A]=u(),j=m(`root`),M=l(()=>D.modelValue,t=>{O(`update:modelValue`,typeof t==`string`?t:e(t,D.format))},D.defaultValue),N=h(()=>o(M.value,D.colorSpace)),P=h(()=>n(D.xChannel)),F=h(()=>n(D.yChannel)),I=S(r(N.value,D.xChannel,D.colorSpace)),L=S(r(N.value,D.yChannel,D.colorSpace)),R=S(r(N.value,`hue`,D.colorSpace)),z=h(()=>s(k.value)),B=h(()=>t(N.value,D.xChannel,D.yChannel,D.colorSpace)),V=S();function H(){I.value=r(N.value,D.xChannel,D.colorSpace),L.value=r(N.value,D.yChannel,D.colorSpace),i(N.value,D.colorSpace)&&(R.value=r(N.value,`hue`,D.colorSpace))}function U(t){let n=e(t,D.format);M.value=n,O(`update:color`,o(t,D.colorSpace)),O(`change`,n)}function W(e,t){let n=Math.min(P.value.max,Math.max(P.value.min,e)),r=Math.min(F.value.max,Math.max(F.value.min,t));I.value=n,L.value=r;let i=[{channel:D.xChannel,value:n},{channel:D.yChannel,value:r}];D.xChannel!==`hue`&&D.yChannel!==`hue`&&i.push({channel:`hue`,value:R.value}),U(a(N.value,i,D.colorSpace))}function G(){O(`changeEnd`,e(N.value,D.format))}return w(N,H,{immediate:!0}),p({color:N,xValue:I,yValue:L,xRange:P,yRange:F,areaStyle:B,thumbElement:V,setThumbElement(e){V.value!==e&&(V.value=e)},updateValues:W,commitValues:G,...c(D,[`colorSpace`,`format`,`xChannel`,`yChannel`,`disabled`])}),(e,t)=>(b(),g(C(d),{ref:C(A),as:v.as,"as-child":v.asChild,"data-soybean-color-area-root":``,class:y(C(j)),role:`group`,"aria-disabled":v.disabled?`true`:void 0,"data-disabled":v.disabled?``:void 0},{default:T(()=>[x(e.$slots,`default`),z.value&&v.xName?(b(),g(C(f),{key:0,type:`text`,value:I.value,name:v.xName,disabled:v.disabled},null,8,[`value`,`name`,`disabled`])):_(`v-if`,!0),z.value&&v.yName?(b(),g(C(f),{key:1,type:`text`,value:L.value,name:v.yName,disabled:v.disabled},null,8,[`value`,`name`,`disabled`])):_(`v-if`,!0)]),_:3},8,[`as`,`as-child`,`class`,`aria-disabled`,`data-disabled`]))}});export{E as default};
+import{formatColor as e,getAreaBackgroundStyle as t,getChannelRange as n,getChannelValue as r,hasVisibleChromaticity as i,setChannelValues as a,toColorObject as o}from"../../shared/color.js";import{isFormControl as s,toContext as c}from"../../shared/vue.js";import{useControllableState as l}from"../../composables/use-controllable-state.js";import{useForwardElement as u}from"../../composables/use-forward-element.js";import{Primitive as d}from"../primitive/primitive.js";import f from"../visually-hidden/visually-hidden-input.js";import{provideColorAreaRootContext as p,useColorAreaUi as m}from"./context.js";import{computed as h,createBlock as g,createCommentVNode as _,defineComponent as v,normalizeClass as y,openBlock as b,renderSlot as x,shallowRef as S,unref as C,watch as w,withCtx as T}from"vue";const E=v({name:`ColorAreaRoot`,__name:`color-area-root`,props:{modelValue:{default:void 0},defaultValue:{default:`#ff0000`},colorSpace:{default:`hsl`},format:{default:`hex`},xChannel:{default:`saturation`},yChannel:{default:`lightness`},disabled:{type:Boolean,default:!1},xName:{},yName:{},name:{},required:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:color`,`change`,`changeEnd`],setup(v,{emit:E}){let D=v,O=E,[k,A]=u(),j=m(`root`),M=l(()=>D.modelValue,t=>{O(`update:modelValue`,typeof t==`string`?t:e(t,D.format))},D.defaultValue),N=h(()=>o(M.value,D.colorSpace)),P=h(()=>n(D.xChannel)),F=h(()=>n(D.yChannel)),I=S(r(N.value,D.xChannel,D.colorSpace)),L=S(r(N.value,D.yChannel,D.colorSpace)),R=S(r(N.value,`hue`,D.colorSpace)),z=h(()=>s(k.value)),B=h(()=>t(N.value,D.xChannel,D.yChannel,D.colorSpace)),V=S();function H(){I.value=r(N.value,D.xChannel,D.colorSpace),L.value=r(N.value,D.yChannel,D.colorSpace),i(N.value,D.colorSpace)&&(R.value=r(N.value,`hue`,D.colorSpace))}function U(t){let n=e(t,D.format);M.value=n,O(`update:color`,o(t,D.colorSpace)),O(`change`,n)}function W(e,t){let n=Math.min(P.value.max,Math.max(P.value.min,e)),r=Math.min(F.value.max,Math.max(F.value.min,t));I.value=n,L.value=r;let i=[{channel:D.xChannel,value:n},{channel:D.yChannel,value:r}];D.xChannel!==`hue`&&D.yChannel!==`hue`&&i.push({channel:`hue`,value:R.value}),U(a(N.value,i,D.colorSpace))}function G(){O(`changeEnd`,e(N.value,D.format))}return w(N,H,{immediate:!0}),p({color:N,xValue:I,yValue:L,xRange:P,yRange:F,areaStyle:B,thumbElement:V,setThumbElement(e){V.value!==e&&(V.value=e)},updateValues:W,commitValues:G,...c(D,[`colorSpace`,`format`,`xChannel`,`yChannel`,`disabled`])}),(e,t)=>(b(),g(C(d),{ref:C(A),as:v.as,"as-child":v.asChild,"data-soybean-color-area-root":``,class:y(C(j)),role:`group`,"aria-disabled":v.disabled?`true`:void 0,"data-disabled":v.disabled?``:void 0},{default:T(()=>[x(e.$slots,`default`),z.value&&v.xName?(b(),g(C(f),{key:0,type:`text`,value:I.value,name:v.xName,disabled:v.disabled},null,8,[`value`,`name`,`disabled`])):_(`v-if`,!0),z.value&&v.yName?(b(),g(C(f),{key:1,type:`text`,value:L.value,name:v.yName,disabled:v.disabled},null,8,[`value`,`name`,`disabled`])):_(`v-if`,!0)]),_:3},8,[`as`,`as-child`,`class`,`aria-disabled`,`data-disabled`]))}});export{E as default};

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

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

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

@@ -1,8 +1,8 @@
 import { UiClass } from "../../types/common.js";
-import { UseUiConsumer } from "../../composables/use-ui-context.js";
-import "../../composables/index.js";
 import { ColorAreaUiSlot } from "./types.js";
 import "../../index.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
+import "../../composables/index.js";
 //#region src/components/color-area/context.d.ts
 declare const provideColorAreaUi: (ui: import("vue").ComputedRef<Partial<UiClass<ColorAreaUiSlot>>>) => import("vue").ComputedRef<Partial<UiClass<ColorAreaUiSlot>>>, useColorAreaUi: UseUiConsumer<ColorAreaUiSlot>;
 //#endregion

package/dist/components/color-area/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";const[n,r]=e(`ColorAreaRoot`),[i,a]=t(`ColorAreaUi`);export{n as provideColorAreaRootContext,i as provideColorAreaUi,r as useColorAreaRootContext,a as useColorAreaUi};
+import{useContext as e}from"../../composables/use-context.js";import{useUiContext as t}from"../../composables/use-ui-context.js";const[n,r]=e(`ColorAreaRoot`),[i,a]=t(`ColorAreaUi`);export{n as provideColorAreaRootContext,i as provideColorAreaUi,r as useColorAreaRootContext,a as useColorAreaUi};

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

@@ -8,11 +8,11 @@ import { CSSProperties, ComputedRef, ShallowRef } from "vue";
 /**
  * Type information for ColorAreaAxisChannel.
  */
-type ColorAreaAxisChannel = Extract<ColorChannel, 'hue' | 'saturation' | 'lightness' | 'brightness' | 'chroma'>;
+export type ColorAreaAxisChannel = Extract<ColorChannel, 'hue' | 'saturation' | 'lightness' | 'brightness' | 'chroma'>;
 /**
  * Properties for the ColorAreaRoot component.
  */
-interface ColorAreaRootProps extends FormFieldCommonProps, Omit<PrimitiveWithBaseProps, 'onChange'> {
+export interface ColorAreaRootProps extends FormFieldCommonProps, Omit<PrimitiveWithBaseProps, 'onChange'> {
   /**
    * Current model value.
    */
@@ -53,7 +53,7 @@ interface ColorAreaRootProps extends FormFieldCommonProps, Omit<PrimitiveWithBas
 /**
  * Events for the ColorAreaRoot component.
  */
-type ColorAreaRootEmits = {
+export type ColorAreaRootEmits = {
   /**
    * Emitted when the model value changes.
    */
@@ -74,15 +74,15 @@ type ColorAreaRootEmits = {
 /**
  * Properties for the ColorAreaArea component.
  */
-interface ColorAreaAreaProps extends PrimitiveWithBaseProps {}
+export interface ColorAreaAreaProps extends PrimitiveWithBaseProps {}
 /**
  * Properties for the ColorAreaThumb component.
  */
-interface ColorAreaThumbProps extends PrimitiveWithBaseProps {}
+export interface ColorAreaThumbProps extends PrimitiveWithBaseProps {}
 /**
  * Properties for the ColorAreaCompact component.
  */
-interface ColorAreaCompactProps extends ColorAreaRootProps {
+export interface ColorAreaCompactProps extends ColorAreaRootProps {
   /**
    * Properties forwarded to the area element.
    */
@@ -95,14 +95,13 @@ interface ColorAreaCompactProps extends ColorAreaRootProps {
 /**
  * Events for the ColorAreaCompact component.
  */
-type ColorAreaCompactEmits = ColorAreaRootEmits;
+export type ColorAreaCompactEmits = ColorAreaRootEmits;
 /**
  * Available UI slots for the ColorArea component.
  */
-type ColorAreaUiSlot = 'root' | 'area' | 'thumb';
+export type ColorAreaUiSlot = 'root' | 'area' | 'thumb';
 /**
  * UI class overrides for the ColorArea component.
  */
-type ColorAreaUi = UiClass<ColorAreaUiSlot>;
-//#endregion
-export { ColorAreaAreaProps, ColorAreaAxisChannel, ColorAreaCompactEmits, ColorAreaCompactProps, ColorAreaRootEmits, ColorAreaRootProps, ColorAreaThumbProps, ColorAreaUi, ColorAreaUiSlot };
+export type ColorAreaUi = UiClass<ColorAreaUiSlot>;
+//#endregion

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

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

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

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

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

@@ -1,8 +1,8 @@
 import { UiClass } from "../../types/common.js";
-import { UseUiConsumer } from "../../composables/use-ui-context.js";
-import "../../composables/index.js";
 import { ColorFieldUiSlot } from "./types.js";
 import "../../index.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
+import "../../composables/index.js";
 //#region src/components/color-field/context.d.ts
 declare const provideColorFieldUi: (ui: import("vue").ComputedRef<Partial<UiClass<ColorFieldUiSlot>>>) => import("vue").ComputedRef<Partial<UiClass<ColorFieldUiSlot>>>, useColorFieldUi: UseUiConsumer<ColorFieldUiSlot>;
 //#endregion

package/dist/components/color-field/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";const[n,r]=e(`ColorFieldRoot`),[i,a]=t(`ColorFieldUi`);export{n as provideColorFieldRootContext,i as provideColorFieldUi,r as useColorFieldRootContext,a as useColorFieldUi};
+import{useContext as e}from"../../composables/use-context.js";import{useUiContext as t}from"../../composables/use-ui-context.js";const[n,r]=e(`ColorFieldRoot`),[i,a]=t(`ColorFieldUi`);export{n as provideColorFieldRootContext,i as provideColorFieldUi,r as useColorFieldRootContext,a as useColorFieldUi};

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

@@ -9,7 +9,7 @@ import { InputHTMLAttributes, ShallowRef } from "vue";
 /**
  * Properties for the ColorFieldRoot component.
  */
-interface ColorFieldRootProps extends FormFieldCommonProps, PrimitiveWithBaseProps {
+export interface ColorFieldRootProps extends FormFieldCommonProps, PrimitiveWithBaseProps {
   /**
    * Current model value.
    */
@@ -54,7 +54,7 @@ interface ColorFieldRootProps extends FormFieldCommonProps, PrimitiveWithBasePro
 /**
  * Events for the ColorFieldRoot component.
  */
-type ColorFieldRootEmits = {
+export type ColorFieldRootEmits = {
   /**
    * Emitted when the model value changes.
    */
@@ -67,11 +67,11 @@ type ColorFieldRootEmits = {
 /**
  * Properties for the ColorFieldInput component.
  */
-interface ColorFieldInputProps extends BaseProps<InputHTMLAttributes> {}
+export interface ColorFieldInputProps extends BaseProps<InputHTMLAttributes> {}
 /**
  * Properties for the ColorFieldCompact component.
  */
-interface ColorFieldCompactProps extends ColorFieldRootProps {
+export interface ColorFieldCompactProps extends ColorFieldRootProps {
   /**
    * Properties forwarded to the input element.
    */
@@ -80,14 +80,13 @@ interface ColorFieldCompactProps extends ColorFieldRootProps {
 /**
  * Events for the ColorFieldCompact component.
  */
-type ColorFieldCompactEmits = ColorFieldRootEmits;
+export type ColorFieldCompactEmits = ColorFieldRootEmits;
 /**
  * Available UI slots for the ColorField component.
  */
-type ColorFieldUiSlot = 'root' | 'input';
+export type ColorFieldUiSlot = 'root' | 'input';
 /**
  * UI class overrides for the ColorField component.
  */
-type ColorFieldUi = UiClass<ColorFieldUiSlot>;
-//#endregion
-export { ColorFieldCompactEmits, ColorFieldCompactProps, ColorFieldInputProps, ColorFieldRootEmits, ColorFieldRootProps, ColorFieldUi, ColorFieldUiSlot };
+export type ColorFieldUi = UiClass<ColorFieldUiSlot>;
+//#endregion

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

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

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

@@ -24,6 +24,7 @@ declare const __VLS_base: import("vue").DefineComponent<ColorPickerCompactProps,
   interactOutside: (event: PointerDownOutsideEvent | FocusOutsideEvent) => any;
   openAutoFocus: (event: Event) => any;
   closeAutoFocus: (event: Event) => any;
+  placed: () => any;
   "update:color": (value: NormalizedColor) => any;
   "update:format": (value: ColorFormat) => any;
 }, string, import("vue").PublicProps, Readonly<ColorPickerCompactProps> & Readonly<{
@@ -36,17 +37,18 @@ declare const __VLS_base: import("vue").DefineComponent<ColorPickerCompactProps,
   onInteractOutside?: ((event: PointerDownOutsideEvent | FocusOutsideEvent) => any) | undefined;
   onOpenAutoFocus?: ((event: Event) => any) | undefined;
   onCloseAutoFocus?: ((event: Event) => any) | undefined;
+  onPlaced?: (() => any) | undefined;
   "onUpdate:color"?: ((value: NormalizedColor) => any) | undefined;
   "onUpdate:format"?: ((value: ColorFormat) => any) | undefined;
 }>, {
   open: boolean;
   placement: Placement;
   showArrow: boolean;
-  colorSpace: ColorSpace;
   showAlpha: boolean;
   showFields: boolean;
   showSwatches: boolean;
   swatches: string[];
+  colorSpace: ColorSpace;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;