@soybeanjs/ui 0.13.8 → 0.15.0-beta.1

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

@@ -1,5 +1,5 @@
 import { CollapsibleProps } from "./types.js";
-import * as vue from "vue";
+import * as _$vue from "vue";
 
 //#region src/components/collapsible/collapsible.vue.d.ts
 declare var __VLS_10: {
@@ -8,15 +8,15 @@ declare var __VLS_10: {
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_base: vue.DefineComponent<CollapsibleProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+declare const __VLS_base: _$vue.DefineComponent<CollapsibleProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:open": (value: boolean) => any;
-}, string, vue.PublicProps, Readonly<CollapsibleProps> & Readonly<{
+}, string, _$vue.PublicProps, Readonly<CollapsibleProps> & Readonly<{
   "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
   open: boolean;
   defaultOpen: boolean;
   unmountOnHide: boolean;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -0,0 +1 @@
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{colorAreaVariants as t}from"./variants.js";import{computed as n,createBlock as r,createVNode as i,defineComponent as a,guardReactiveProps as o,mergeProps as s,normalizeProps as c,openBlock as l,toHandlers as u,unref as d,withCtx as f}from"vue";import{useForwardListeners as p,useOmitProps as m}from"@soybeanjs/headless/composables";import{ColorAreaArea as h,ColorAreaRoot as g,ColorAreaThumb as _,provideColorAreaUi as v}from"@soybeanjs/headless/color-area";const y=a({name:`SColorArea`,__name:`color-area`,props:{class:{},size:{},ui:{},areaProps:{},thumbProps:{},modelValue:{},defaultValue:{},colorSpace:{},format:{},xChannel:{},yChannel:{},disabled:{type:Boolean},xName:{},yName:{},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:color`,`change`,`changeEnd`],setup(a,{emit:y}){let b=a,x=p(y),S=m(b,[`class`,`size`,`ui`,`areaProps`,`thumbProps`,`onChange`]);return v(n(()=>e(t({size:b.size}),b.ui,{root:b.class}))),(e,t)=>(l(),r(d(g),s(d(S),u(d(x))),{default:f(()=>[i(d(h),c(o(a.areaProps)),{default:f(()=>[i(d(_),c(o(a.thumbProps)),null,16)]),_:1},16)]),_:1},16))}});export{y as default};

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

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

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

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

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

@@ -0,0 +1 @@
+import"./color-area.js";

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

@@ -0,0 +1,14 @@
+import { ThemeSize } from "../../theme/types.js";
+import { ClassValue, ColorAreaAreaProps, ColorAreaRootEmits, ColorAreaRootProps, ColorAreaThumbProps, ColorAreaUi } from "@soybeanjs/headless";
+
+//#region src/components/color-area/types.d.ts
+interface ColorAreaProps extends ColorAreaRootProps {
+  class?: ClassValue;
+  size?: ThemeSize;
+  ui?: Partial<ColorAreaUi>;
+  areaProps?: ColorAreaAreaProps;
+  thumbProps?: ColorAreaThumbProps;
+}
+type ColorAreaEmits = ColorAreaRootEmits;
+//#endregion
+export { ColorAreaEmits, ColorAreaProps };

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

@@ -0,0 +1 @@
+import{tv as e}from"tailwind-variants";const t=e({slots:{root:`relative select-none`,area:[`relative overflow-hidden min-w-25 min-h-25 w-full h-full rounded-xl border border-input shadow-inner outline-none`,`focus-visible:ring-3 focus-visible:ring-primary/20 data-[disabled]:opacity-60`],thumb:[`absolute block rounded-full border-2 border-white bg-transparent shadow-lg`,`ring-1 ring-black/20 transition-[transform,box-shadow] duration-150`,`hover:scale-105 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/25`]},variants:{size:{xs:{root:`text-2xs`,thumb:`size-3`},sm:{root:`text-xs`,thumb:`size-3.5`},md:{root:`text-sm`,thumb:`size-4`},lg:{root:`text-base`,thumb:`size-4.5`},xl:{root:`text-lg`,thumb:`size-5`},"2xl":{root:`text-xl`,thumb:`size-6`}}},defaultVariants:{size:`md`}});export{t as colorAreaVariants};

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+import"./color-field.js";

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

@@ -0,0 +1,13 @@
+import { ThemeSize } from "../../theme/types.js";
+import { ClassValue, ColorFieldInputProps, ColorFieldRootEmits, ColorFieldRootProps, ColorFieldUi } from "@soybeanjs/headless";
+
+//#region src/components/color-field/types.d.ts
+interface ColorFieldProps extends ColorFieldRootProps {
+  class?: ClassValue;
+  size?: ThemeSize;
+  ui?: Partial<ColorFieldUi>;
+  inputProps?: ColorFieldInputProps;
+}
+type ColorFieldEmits = ColorFieldRootEmits;
+//#endregion
+export { ColorFieldEmits, ColorFieldProps };

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

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

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

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

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

@@ -0,0 +1,55 @@
+import { ColorPickerProps } from "./types.js";
+import * as _$vue from "vue";
+import * as _$_soybeanjs_headless0 from "@soybeanjs/headless";
+import * as _$_soybeanjs_headless_shared0 from "@soybeanjs/headless/shared";
+import { ColorFormat, ColorSpace, ColorValue } from "@soybeanjs/headless/shared";
+import * as _$_soybeanjs_colord0 from "@soybeanjs/colord";
+
+//#region src/components/color-picker/color-picker.vue.d.ts
+declare var __VLS_11: {
+  color: _$_soybeanjs_colord0.AnyColor;
+  hex: string;
+  value: string;
+  format: ColorFormat;
+};
+type __VLS_Slots = {} & {
+  trigger?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<ColorPickerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:open": (value: boolean) => any;
+  "update:modelValue": (value: string) => any;
+  "update:color": (value: _$_soybeanjs_headless_shared0.NormalizedColor) => any;
+  "update:format": (value: ColorFormat) => any;
+  change: (value: string) => any;
+}, string, _$vue.PublicProps, Readonly<ColorPickerProps> & Readonly<{
+  "onUpdate:open"?: ((value: boolean) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  "onUpdate:color"?: ((value: _$_soybeanjs_headless_shared0.NormalizedColor) => any) | undefined;
+  "onUpdate:format"?: ((value: ColorFormat) => any) | undefined;
+  onChange?: ((value: string) => any) | undefined;
+}>, {
+  open: boolean;
+  defaultOpen: boolean;
+  modal: boolean;
+  disabled: boolean;
+  placement: _$_soybeanjs_headless0.Placement;
+  showArrow: boolean;
+  modelValue: string | ColorValue;
+  defaultValue: string | ColorValue;
+  format: ColorFormat;
+  defaultFormat: ColorFormat;
+  colorSpace: ColorSpace;
+  showAlpha: boolean;
+  showFields: boolean;
+  showSwatches: boolean;
+  swatches: string[];
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

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

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

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

@@ -0,0 +1 @@
+import"./color-picker.js";

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

@@ -0,0 +1 @@
+import{resolveColorFormat as e}from"@soybeanjs/headless/shared";const t=[`#ef4444`,`#f97316`,`#eab308`,`#22c55e`,`#06b6d4`,`#3b82f6`,`#8b5cf6`],n=[`hex`,`rgb`,`hsl`,`oklch`];function r(t,n){return t||e(n,`hex`)}export{n as COLOR_PICKER_FORMATS,t as DEFAULT_COLOR_PICKER_SWATCHES,r as resolveColorPickerFormat};

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

@@ -0,0 +1,47 @@
+import { ThemeSize } from "../../theme/types.js";
+import { ButtonProps as ButtonProps$1 } from "../button/types.js";
+import { ColorAreaProps } from "../color-area/types.js";
+import { ColorFieldProps } from "../color-field/types.js";
+import { ColorSliderProps } from "../color-slider/types.js";
+import { ColorSwatchProps } from "../color-swatch/types.js";
+import { ColorSwatchPickerProps } from "../color-swatch-picker/types.js";
+import { PopoverProps } from "../popover/types.js";
+import { ClassValue, UiClass } from "@soybeanjs/headless";
+import { ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "@soybeanjs/headless/shared";
+
+//#region src/components/color-picker/types.d.ts
+type ColorPickerUiSlot = 'popup' | 'content' | 'trigger' | 'triggerSwatch' | 'triggerValue' | 'formatSelect' | 'area' | 'slider' | 'alphaRow' | 'alphaSwatch' | 'fields' | 'hexField' | 'field' | 'alphaField' | 'swatches';
+type ColorPickerUi = UiClass<ColorPickerUiSlot>;
+interface ColorPickerProps extends Pick<PopoverProps, 'open' | 'defaultOpen' | 'modal' | 'placement' | 'showArrow' | 'positionerProps' | 'popupProps' | 'triggerProps' | 'closeProps' | 'portalProps' | 'arrowProps'> {
+  class?: ClassValue;
+  size?: ThemeSize;
+  ui?: Partial<ColorPickerUi>;
+  modelValue?: string | ColorValue;
+  defaultValue?: string | ColorValue;
+  format?: ColorFormat;
+  defaultFormat?: ColorFormat;
+  disabled?: boolean;
+  colorSpace?: ColorSpace;
+  showAlpha?: boolean;
+  showFields?: boolean;
+  showSwatches?: boolean;
+  swatches?: string[];
+  triggerButtonProps?: ButtonProps$1;
+  areaProps?: Omit<ColorAreaProps, 'modelValue' | 'defaultValue' | 'disabled' | 'colorSpace' | 'format' | 'xChannel' | 'yChannel' | 'onChange' | 'onChangeEnd'>;
+  hueSliderProps?: Omit<ColorSliderProps, 'modelValue' | 'defaultValue' | 'channel' | 'colorSpace' | 'disabled' | 'format' | 'onChange' | 'onChangeEnd'>;
+  alphaSliderProps?: Omit<ColorSliderProps, 'modelValue' | 'defaultValue' | 'channel' | 'colorSpace' | 'disabled' | 'format' | 'onChange' | 'onChangeEnd'>;
+  alphaFieldProps?: Omit<ColorFieldProps, 'modelValue' | 'defaultValue' | 'disabled' | 'channel' | 'colorSpace' | 'format'>;
+  hexFieldProps?: Omit<ColorFieldProps, 'modelValue' | 'defaultValue' | 'disabled' | 'channel' | 'colorSpace' | 'format'>;
+  fieldProps?: Omit<ColorFieldProps, 'modelValue' | 'defaultValue' | 'disabled' | 'channel' | 'colorSpace' | 'format'>;
+  swatchPickerProps?: Omit<ColorSwatchPickerProps, 'modelValue' | 'defaultValue' | 'colors' | 'disabled'>;
+  swatchProps?: Omit<ColorSwatchProps, 'class' | 'color' | 'size'>;
+}
+type ColorPickerEmits = {
+  'update:modelValue': [value: string];
+  'update:color': [value: NormalizedColor];
+  'update:format': [value: ColorFormat];
+  'update:open': [value: boolean];
+  change: [value: string];
+};
+//#endregion
+export { ColorPickerEmits, ColorPickerProps, ColorPickerUi, ColorPickerUiSlot };

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+import { ColorSliderEmits, ColorSliderProps } from "./types.js";
+import { _default } from "./color-slider.vue.js";
+import { ColorSliderRootEmits as ColorSliderRootEmits$1, ColorSliderRootProps as ColorSliderRootProps$1, ColorSliderThumbProps as ColorSliderThumbProps$1, ColorSliderTrackProps as ColorSliderTrackProps$1, ColorSliderUi as ColorSliderUi$1, ColorSliderUiSlot } from "@soybeanjs/headless/color-slider";
+export { type ColorSliderRootEmits$1 as ColorSliderRootEmits, type ColorSliderRootProps$1 as ColorSliderRootProps, type ColorSliderThumbProps$1 as ColorSliderThumbProps, type ColorSliderTrackProps$1 as ColorSliderTrackProps, type ColorSliderUi$1 as ColorSliderUi, type ColorSliderUiSlot };

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

@@ -0,0 +1 @@
+import"./color-slider.js";

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

@@ -0,0 +1,16 @@
+import { ThemeColor, ThemeSize } from "../../theme/types.js";
+import { ClassValue } from "@soybeanjs/headless";
+import { ColorSliderRootEmits, ColorSliderRootProps, ColorSliderThumbProps, ColorSliderTrackProps, ColorSliderUi } from "@soybeanjs/headless/color-slider";
+
+//#region src/components/color-slider/types.d.ts
+interface ColorSliderProps extends ColorSliderRootProps {
+  class?: ClassValue;
+  color?: ThemeColor;
+  size?: ThemeSize;
+  ui?: Partial<ColorSliderUi>;
+  trackProps?: ColorSliderTrackProps;
+  thumbProps?: ColorSliderThumbProps;
+}
+type ColorSliderEmits = ColorSliderRootEmits;
+//#endregion
+export { ColorSliderEmits, ColorSliderProps };

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { ColorSwatchShape } from "./variants.js";
+import { ColorExtraUiSlot, ColorSwatchExtendedUi, ColorSwatchProps as ColorSwatchProps$1 } from "./types.js";
+import { _default } from "./color-swatch.vue.js";
+import { ColorSwatchProps as HeadlessColorSwatchProps } from "@soybeanjs/headless/color-swatch";
+export { type HeadlessColorSwatchProps };

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

@@ -0,0 +1 @@
+import"./color-swatch.js";

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

@@ -0,0 +1,16 @@
+import { ThemeSize } from "../../theme/types.js";
+import { ColorSwatchShape } from "./variants.js";
+import { ClassValue, UiClass } from "@soybeanjs/headless";
+import { ColorSwatchProps } from "@soybeanjs/headless/color-swatch";
+
+//#region src/components/color-swatch/types.d.ts
+type ColorExtraUiSlot = 'checker' | 'fill';
+type ColorSwatchExtendedUi = UiClass<ColorExtraUiSlot>;
+interface ColorSwatchProps$1 extends ColorSwatchProps {
+  class?: ClassValue;
+  size?: ThemeSize;
+  ui?: Partial<ColorSwatchExtendedUi>;
+  shape?: ColorSwatchShape;
+}
+//#endregion
+export { ColorExtraUiSlot, ColorSwatchExtendedUi, ColorSwatchProps$1 as ColorSwatchProps };

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

@@ -0,0 +1,108 @@
+import * as _$tailwind_variants0 from "tailwind-variants";
+import { VariantProps } from "tailwind-variants";
+
+//#region src/components/color-swatch/variants.d.ts
+declare const colorSwatchVariants: _$tailwind_variants0.TVReturnType<{
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+    xl: {
+      root: string;
+    };
+    '2xl': {
+      root: string;
+    };
+  };
+  shape: {
+    square: {
+      root: string;
+    };
+    circle: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  checker: string;
+  fill: string;
+}, undefined, {
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+    xl: {
+      root: string;
+    };
+    '2xl': {
+      root: string;
+    };
+  };
+  shape: {
+    square: {
+      root: string;
+    };
+    circle: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  checker: string;
+  fill: string;
+}, _$tailwind_variants0.TVReturnType<{
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+    xl: {
+      root: string;
+    };
+    '2xl': {
+      root: string;
+    };
+  };
+  shape: {
+    square: {
+      root: string;
+    };
+    circle: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  checker: string;
+  fill: string;
+}, undefined, unknown, unknown, undefined>>;
+type ColorSwatchVariants = VariantProps<typeof colorSwatchVariants>;
+type ColorSwatchShape = NonNullable<ColorSwatchVariants['shape']>;
+//#endregion
+export { ColorSwatchShape };

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

@@ -0,0 +1 @@
+import{tv as e}from"tailwind-variants";const t=e({slots:{root:[`relative isolate inline-flex shrink-0 overflow-hidden border border-input bg-background shadow-sm`,`data-[no-color]:bg-muted/40`],checker:`absolute inset-0 bg-[linear-gradient(45deg,rgba(0,0,0,0.08)_25%,transparent_25%,transparent_75%,rgba(0,0,0,0.08)_75%),linear-gradient(45deg,rgba(0,0,0,0.08)_25%,transparent_25%,transparent_75%,rgba(0,0,0,0.08)_75%)] bg-[length:8px_8px] bg-[position:0_0,4px_4px]`,fill:`absolute inset-0 bg-[var(--soybean-color-swatch-color)]`},variants:{size:{xs:{root:`size-5 text-2xs`},sm:{root:`size-5.5 text-xs`},md:{root:`size-6 text-sm`},lg:{root:`size-6.5 text-base`},xl:{root:`size-7 text-lg`},"2xl":{root:`size-8 text-xl`}},shape:{square:{root:`rounded-md`},circle:{root:`rounded-full`}}},defaultVariants:{size:`md`,shape:`square`}});export{t as colorSwatchVariants};

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

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

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

@@ -0,0 +1,39 @@
+import { ColorSwatchPickerShape } from "./variants.js";
+import { ColorSwatchPickerProps } from "./types.js";
+import * as _$vue from "vue";
+import * as _$_soybeanjs_headless_composables0 from "@soybeanjs/headless/composables";
+import * as _$_soybeanjs_headless0 from "@soybeanjs/headless";
+
+//#region src/components/color-swatch-picker/color-swatch-picker.vue.d.ts
+declare var __VLS_26: {
+    color: string;
+  }, __VLS_33: {};
+type __VLS_Slots = {} & {
+  indicator?: (props: typeof __VLS_26) => any;
+} & {
+  default?: (props: typeof __VLS_33) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<ColorSwatchPickerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  select: (event: _$_soybeanjs_headless0.SelectEvent<string>) => any;
+  "update:modelValue": (value: string | string[]) => any;
+  highlight: (payload?: _$_soybeanjs_headless_composables0.CollectionItemData<_$_soybeanjs_headless0.ListboxCollectionItemData> | undefined) => any;
+  entryFocus: (event: CustomEvent<any>) => any;
+  leave: (event: Event) => any;
+}, string, _$vue.PublicProps, Readonly<ColorSwatchPickerProps> & Readonly<{
+  onSelect?: ((event: _$_soybeanjs_headless0.SelectEvent<string>) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+  onHighlight?: ((payload?: _$_soybeanjs_headless_composables0.CollectionItemData<_$_soybeanjs_headless0.ListboxCollectionItemData> | undefined) => any) | undefined;
+  onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+  onLeave?: ((event: Event) => any) | undefined;
+}>, {
+  shape: ColorSwatchPickerShape;
+}, {}, {}, {}, 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-picker/index.d.ts

@@ -0,0 +1,5 @@
+import { ColorSwatchPickerShape } from "./variants.js";
+import { ColorSwatchPickerEmits, ColorSwatchPickerExtendedUi, ColorSwatchPickerExtraUiSlot, ColorSwatchPickerProps } from "./types.js";
+import { _default } from "./color-swatch-picker.vue.js";
+import { ColorSwatchPickerItemEmits, ColorSwatchPickerItemIndicatorProps, ColorSwatchPickerItemProps, ColorSwatchPickerItemSwatchProps, ColorSwatchPickerRootEmits, ColorSwatchPickerRootProps, ColorSwatchPickerUi, ColorSwatchPickerUiSlot } from "@soybeanjs/headless/color-swatch-picker";
+export { type ColorSwatchPickerItemEmits, type ColorSwatchPickerItemIndicatorProps, type ColorSwatchPickerItemProps, type ColorSwatchPickerItemSwatchProps, type ColorSwatchPickerRootEmits, type ColorSwatchPickerRootProps, type ColorSwatchPickerUi, type ColorSwatchPickerUiSlot };

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

@@ -0,0 +1 @@
+import"./color-swatch-picker.js";

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

@@ -0,0 +1,20 @@
+import { ThemeSize } from "../../theme/types.js";
+import { ColorSwatchPickerShape } from "./variants.js";
+import { ClassValue, ColorSwatchPickerItemEmits, ColorSwatchPickerItemIndicatorProps, ColorSwatchPickerItemProps, ColorSwatchPickerItemSwatchProps, ColorSwatchPickerRootEmits, ColorSwatchPickerRootProps, ColorSwatchPickerUiSlot, UiClass } from "@soybeanjs/headless";
+
+//#region src/components/color-swatch-picker/types.d.ts
+type ColorSwatchPickerExtraUiSlot = 'checker' | 'fill';
+type ColorSwatchPickerExtendedUi = UiClass<ColorSwatchPickerUiSlot | ColorSwatchPickerExtraUiSlot>;
+interface ColorSwatchPickerProps extends ColorSwatchPickerRootProps<boolean> {
+  class?: ClassValue;
+  size?: ThemeSize;
+  ui?: Partial<ColorSwatchPickerExtendedUi>;
+  colors?: string[];
+  shape?: ColorSwatchPickerShape;
+  itemProps?: Omit<ColorSwatchPickerItemProps, 'value'>;
+  indicatorProps?: ColorSwatchPickerItemIndicatorProps;
+  swatchProps?: ColorSwatchPickerItemSwatchProps;
+}
+type ColorSwatchPickerEmits = ColorSwatchPickerRootEmits<boolean> & ColorSwatchPickerItemEmits;
+//#endregion
+export { ColorSwatchPickerEmits, ColorSwatchPickerExtendedUi, ColorSwatchPickerExtraUiSlot, ColorSwatchPickerProps };