origam 2.5.0 → 2.6.2

package/dist/src/composables/Commons/audio.composable.d.ts

@@ -3,17 +3,17 @@ import type { IUseAudioProps } from '../../interfaces';
  * useAudio
  ********************************************************/
 export declare function useAudio(props: IUseAudioProps): {
-    audioData: import("vue").ShallowRef<Uint8Array<ArrayBufferLike> | null, Uint8Array<ArrayBufferLike> | null>;
+    audioData: import("vue").ShallowRef<Uint8Array<ArrayBuffer> | null, Uint8Array<ArrayBuffer> | null>;
     analyser: import("vue").Ref<{
         fftSize: number;
         readonly frequencyBinCount: number;
         maxDecibels: number;
         minDecibels: number;
         smoothingTimeConstant: number;
-        getByteFrequencyData: (array: Uint8Array) => void;
-        getByteTimeDomainData: (array: Uint8Array) => void;
-        getFloatFrequencyData: (array: Float32Array) => void;
-        getFloatTimeDomainData: (array: Float32Array) => void;
+        getByteFrequencyData: (array: Uint8Array<ArrayBuffer>) => void;
+        getByteTimeDomainData: (array: Uint8Array<ArrayBuffer>) => void;
+        getFloatFrequencyData: (array: Float32Array<ArrayBuffer>) => void;
+        getFloatTimeDomainData: (array: Float32Array<ArrayBuffer>) => void;
         channelCount: number;
         channelCountMode: ChannelCountMode;
         channelInterpretation: ChannelInterpretation;
@@ -60,7 +60,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly forwardY: {
                     automationRate: AutomationRate;
@@ -74,7 +77,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly forwardZ: {
                     automationRate: AutomationRate;
@@ -88,7 +94,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly positionX: {
                     automationRate: AutomationRate;
@@ -102,7 +111,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly positionY: {
                     automationRate: AutomationRate;
@@ -116,7 +128,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly positionZ: {
                     automationRate: AutomationRate;
@@ -130,7 +145,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly upX: {
                     automationRate: AutomationRate;
@@ -144,7 +162,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly upY: {
                     automationRate: AutomationRate;
@@ -158,7 +179,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly upZ: {
                     automationRate: AutomationRate;
@@ -172,7 +196,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 setOrientation: (x: number, y: number, z: number, xUp: number, yUp: number, zUp: number) => void;
                 setPosition: (x: number, y: number, z: number) => void;
@@ -191,10 +218,16 @@ export declare function useAudio(props: IUseAudioProps): {
             createDelay: (maxDelayTime?: number) => DelayNode;
             createDynamicsCompressor: () => DynamicsCompressorNode;
             createGain: () => GainNode;
-            createIIRFilter: (feedforward: number[], feedback: number[]) => IIRFilterNode;
+            createIIRFilter: {
+                (feedforward: number[], feedback: number[]): IIRFilterNode;
+                (feedforward: Iterable<number>, feedback: Iterable<number>): IIRFilterNode;
+            };
             createOscillator: () => OscillatorNode;
             createPanner: () => PannerNode;
-            createPeriodicWave: (real: number[] | Float32Array, imag: number[] | Float32Array, constraints?: PeriodicWaveConstraints) => PeriodicWave;
+            createPeriodicWave: {
+                (real: number[] | Float32Array, imag: number[] | Float32Array, constraints?: PeriodicWaveConstraints): PeriodicWave;
+                (real: Iterable<number>, imag: Iterable<number>, constraints?: PeriodicWaveConstraints): PeriodicWave;
+            };
             createScriptProcessor: (bufferSize?: number, numberOfInputChannels?: number, numberOfOutputChannels?: number) => ScriptProcessorNode;
             createStereoPanner: () => StereoPannerNode;
             createWaveShaper: () => WaveShaperNode;
@@ -233,10 +266,10 @@ export declare function useAudio(props: IUseAudioProps): {
         maxDecibels: number;
         minDecibels: number;
         smoothingTimeConstant: number;
-        getByteFrequencyData: (array: Uint8Array) => void;
-        getByteTimeDomainData: (array: Uint8Array) => void;
-        getFloatFrequencyData: (array: Float32Array) => void;
-        getFloatTimeDomainData: (array: Float32Array) => void;
+        getByteFrequencyData: (array: Uint8Array<ArrayBuffer>) => void;
+        getByteTimeDomainData: (array: Uint8Array<ArrayBuffer>) => void;
+        getFloatFrequencyData: (array: Float32Array<ArrayBuffer>) => void;
+        getFloatTimeDomainData: (array: Float32Array<ArrayBuffer>) => void;
         channelCount: number;
         channelCountMode: ChannelCountMode;
         channelInterpretation: ChannelInterpretation;
@@ -283,7 +316,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly forwardY: {
                     automationRate: AutomationRate;
@@ -297,7 +333,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly forwardZ: {
                     automationRate: AutomationRate;
@@ -311,7 +350,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly positionX: {
                     automationRate: AutomationRate;
@@ -325,7 +367,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly positionY: {
                     automationRate: AutomationRate;
@@ -339,7 +384,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly positionZ: {
                     automationRate: AutomationRate;
@@ -353,7 +401,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly upX: {
                     automationRate: AutomationRate;
@@ -367,7 +418,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly upY: {
                     automationRate: AutomationRate;
@@ -381,7 +435,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 readonly upZ: {
                     automationRate: AutomationRate;
@@ -395,7 +452,10 @@ export declare function useAudio(props: IUseAudioProps): {
                     linearRampToValueAtTime: (value: number, endTime: number) => AudioParam;
                     setTargetAtTime: (target: number, startTime: number, timeConstant: number) => AudioParam;
                     setValueAtTime: (value: number, startTime: number) => AudioParam;
-                    setValueCurveAtTime: (values: number[] | Float32Array, startTime: number, duration: number) => AudioParam;
+                    setValueCurveAtTime: {
+                        (values: number[] | Float32Array, startTime: number, duration: number): AudioParam;
+                        (values: Iterable<number>, startTime: number, duration: number): AudioParam;
+                    };
                 };
                 setOrientation: (x: number, y: number, z: number, xUp: number, yUp: number, zUp: number) => void;
                 setPosition: (x: number, y: number, z: number) => void;
@@ -414,10 +474,16 @@ export declare function useAudio(props: IUseAudioProps): {
             createDelay: (maxDelayTime?: number) => DelayNode;
             createDynamicsCompressor: () => DynamicsCompressorNode;
             createGain: () => GainNode;
-            createIIRFilter: (feedforward: number[], feedback: number[]) => IIRFilterNode;
+            createIIRFilter: {
+                (feedforward: number[], feedback: number[]): IIRFilterNode;
+                (feedforward: Iterable<number>, feedback: Iterable<number>): IIRFilterNode;
+            };
             createOscillator: () => OscillatorNode;
             createPanner: () => PannerNode;
-            createPeriodicWave: (real: number[] | Float32Array, imag: number[] | Float32Array, constraints?: PeriodicWaveConstraints) => PeriodicWave;
+            createPeriodicWave: {
+                (real: number[] | Float32Array, imag: number[] | Float32Array, constraints?: PeriodicWaveConstraints): PeriodicWave;
+                (real: Iterable<number>, imag: Iterable<number>, constraints?: PeriodicWaveConstraints): PeriodicWave;
+            };
             createScriptProcessor: (bufferSize?: number, numberOfInputChannels?: number, numberOfOutputChannels?: number) => ScriptProcessorNode;
             createStereoPanner: () => StereoPannerNode;
             createWaveShaper: () => WaveShaperNode;

package/dist/src/composables/Commons/border.composable.cjs

@@ -43,6 +43,16 @@ function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
       }
     } else if (typeof border === "number") {
       styles.push(`border-width: ${(0, _utils.convertToUnit)(border)}`);
+      styles.push("border-style: solid");
+      styles.push("border-color: currentColor");
+    }
+    if (!(0, _vue.isRef)(props)) {
+      const {
+        borderColor,
+        borderStyle
+      } = props;
+      if (!(0, _utils.isEmpty)(borderColor)) styles.push(`border-color: ${borderColor}`);
+      if (!(0, _utils.isEmpty)(borderStyle)) styles.push(`border-style: ${borderStyle}`);
     }
     return styles;
   });

package/dist/src/composables/Commons/border.composable.js

@@ -41,6 +41,13 @@ export function useBorder(props, name = getCurrentInstanceName()) {
       }
     } else if (typeof border === "number") {
       styles.push(`border-width: ${convertToUnit(border)}`);
+      styles.push("border-style: solid");
+      styles.push("border-color: currentColor");
+    }
+    if (!isRef(props)) {
+      const { borderColor, borderStyle } = props;
+      if (!isEmpty(borderColor)) styles.push(`border-color: ${borderColor}`);
+      if (!isEmpty(borderStyle)) styles.push(`border-style: ${borderStyle}`);
     }
     return styles;
   });

package/dist/src/composables/Commons/color.composable.cjs

@@ -9,15 +9,15 @@ exports.useColor = useColor;
 exports.useColorEffect = useColorEffect;
 exports.useTextColor = useTextColor;
 var _vue = require("vue");
-var _colorUtil = require("../../utils/Commons/color.util.ts");
-var _gradientUtil = require("../../utils/Commons/gradient.util.ts");
+var _color = require("../../utils/Commons/color.util.cjs");
+var _gradient = require("../../utils/Commons/gradient.util.cjs");
 function useColor(colors) {
   const colorClasses = (0, _vue.computed)(() => {
     const classes = [];
-    if (colors.value.background && !(0, _gradientUtil.isGradient)(colors.value.background) && (0, _colorUtil.isUtilityIntent)(colors.value.background)) {
+    if (colors.value.background && !(0, _gradient.isGradient)(colors.value.background) && (0, _color.isUtilityIntent)(colors.value.background)) {
       classes.push(`origam--bg-${colors.value.background}`);
     }
-    if (colors.value.text && !(0, _gradientUtil.isGradient)(colors.value.text) && (0, _colorUtil.isUtilityIntent)(colors.value.text)) {
+    if (colors.value.text && !(0, _gradient.isGradient)(colors.value.text) && (0, _color.isUtilityIntent)(colors.value.text)) {
       classes.push(`origam--color-${colors.value.text}`);
     }
     return classes;
@@ -28,47 +28,47 @@ function useColor(colors) {
     let bgDecl = null;
     let bgIsGradient = false;
     if (colors.value.background) {
-      if ((0, _gradientUtil.isGradient)(colors.value.background)) {
-        const grad = (0, _gradientUtil.resolveGradient)(colors.value.background);
+      if ((0, _gradient.isGradient)(colors.value.background)) {
+        const grad = (0, _gradient.resolveGradient)(colors.value.background);
         if (grad) {
           bgDecl = `background-image: ${grad}`;
           bgIsGradient = true;
         }
-      } else if ((0, _colorUtil.isIntent)(colors.value.background)) {
-        const m = (0, _colorUtil.tokenStylesForIntent)(colors.value.background, "default");
+      } else if ((0, _color.isIntent)(colors.value.background)) {
+        const m = (0, _color.tokenStylesForIntent)(colors.value.background, "default");
         bgDecl = `background-color: ${m["background-color"]}`;
         bgIntentFg = m.color;
       } else if (colors.value.background === "transparent") {
         bgDecl = `background-color: ${colors.value.background}`;
-      } else if (typeof colors.value.background === "string" && (0, _colorUtil.isCssColor)(colors.value.background)) {
+      } else if (typeof colors.value.background === "string" && (0, _color.isCssColor)(colors.value.background)) {
         bgDecl = `background-color: ${colors.value.background}`;
       }
     }
     let fgDecl = null;
     if (colors.value.text) {
-      if ((0, _gradientUtil.isGradient)(colors.value.text)) {
-        const grad = (0, _gradientUtil.resolveGradient)(colors.value.text);
+      if ((0, _gradient.isGradient)(colors.value.text)) {
+        const grad = (0, _gradient.resolveGradient)(colors.value.text);
         if (grad) {
           fgDecl = "color: transparent";
           styles.push(`background-image: ${grad}`);
           styles.push("background-clip: text");
           styles.push("-webkit-background-clip: text");
         }
-      } else if ((0, _colorUtil.isIntent)(colors.value.text)) {
-        if (bgIntentFg && (0, _colorUtil.isIntent)(colors.value.background) && colors.value.text === colors.value.background) {
+      } else if ((0, _color.isIntent)(colors.value.text)) {
+        if (bgIntentFg && (0, _color.isIntent)(colors.value.background) && colors.value.text === colors.value.background) {
           fgDecl = `color: ${bgIntentFg}`;
         } else {
-          fgDecl = `color: ${(0, _colorUtil.tokenForegroundForIntent)(colors.value.text)}`;
+          fgDecl = `color: ${(0, _color.tokenForegroundForIntent)(colors.value.text)}`;
         }
-      } else if (typeof colors.value.text === "string" && (0, _colorUtil.isCssColor)(colors.value.text)) {
+      } else if (typeof colors.value.text === "string" && (0, _color.isCssColor)(colors.value.text)) {
         fgDecl = `color: ${colors.value.text}`;
       }
     } else if (bgIntentFg && !bgIsGradient) {
       fgDecl = `color: ${bgIntentFg}`;
-    } else if (bgDecl && !bgIsGradient && colors.value.background && typeof colors.value.background === "string" && colors.value.background !== "transparent" && (0, _colorUtil.isParsableColor)(colors.value.background)) {
-      const parsed = (0, _colorUtil.parseColor)(colors.value.background);
+    } else if (bgDecl && !bgIsGradient && colors.value.background && typeof colors.value.background === "string" && colors.value.background !== "transparent" && (0, _color.isParsableColor)(colors.value.background)) {
+      const parsed = (0, _color.parseColor)(colors.value.background);
       if (parsed.a == null || parsed.a === 1) {
-        fgDecl = `color: ${(0, _colorUtil.getForeground)(parsed)}`;
+        fgDecl = `color: ${(0, _color.getForeground)(parsed)}`;
       }
     }
     if (bgDecl) styles.push(bgDecl);
@@ -131,21 +131,21 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
     const classes = [];
     const bgVal = bgColor.value;
     const fgVal = color.value;
-    if (bgVal && (0, _colorUtil.isUtilityIntent)(bgVal)) {
+    if (bgVal && (0, _color.isUtilityIntent)(bgVal)) {
       classes.push(`origam--bg-${bgVal}`);
     }
-    if (fgVal && (0, _colorUtil.isUtilityIntent)(fgVal)) {
+    if (fgVal && (0, _color.isUtilityIntent)(fgVal)) {
       classes.push(`origam--color-${fgVal}`);
-    } else if (!fgVal && bgVal && (0, _colorUtil.isUtilityIntent)(bgVal)) {}
+    } else if (!fgVal && bgVal && (0, _color.isUtilityIntent)(bgVal)) {}
     return classes;
   });
   const colorStyles = (0, _vue.computed)(() => {
     void isDisabled.value;
     const sameIntentBg = (a, b) => {
-      return !!a && !!b && a === b && (0, _colorUtil.isIntent)(a);
+      return !!a && !!b && a === b && (0, _color.isIntent)(a);
     };
     const sameIntentFg = (a, b) => {
-      return !!a && !!b && a === b && (0, _colorUtil.isIntent)(a);
+      return !!a && !!b && a === b && (0, _color.isIntent)(a);
     };
     const bgRole = isHover.value && (!props.hoverBgColor || sameIntentBg(props.hoverBgColor, props.bgColor)) ? "hover" : isActive.value && (!props.activeBgColor || sameIntentBg(props.activeBgColor, props.bgColor)) ? "active" : "default";
     const _fgRole = isHover.value && (!props.hoverColor || sameIntentFg(props.hoverColor, props.color)) ? "hover" : isActive.value && (!props.activeColor || sameIntentFg(props.activeColor, props.color)) ? "active" : "default";
@@ -155,44 +155,44 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
     let bgIntentFg = null;
     let bgIsGradient = false;
     let clipText = false;
-    if (bgColor.value && (0, _gradientUtil.isGradient)(bgColor.value)) {
-      const grad = (0, _gradientUtil.resolveGradient)(bgColor.value);
+    if (bgColor.value && (0, _gradient.isGradient)(bgColor.value)) {
+      const grad = (0, _gradient.resolveGradient)(bgColor.value);
       if (grad) {
         bgDecl = `background-image: ${grad}`;
         bgIsGradient = true;
       }
-    } else if (bgColor.value && (0, _colorUtil.isIntent)(bgColor.value)) {
-      const m = (0, _colorUtil.tokenStylesForIntent)(bgColor.value, bgRole);
+    } else if (bgColor.value && (0, _color.isIntent)(bgColor.value)) {
+      const m = (0, _color.tokenStylesForIntent)(bgColor.value, bgRole);
       bgDecl = `background-color: ${m["background-color"]}`;
-      bgIntentFg = (0, _colorUtil.tokenStylesForIntent)(bgColor.value, "default").color;
+      bgIntentFg = (0, _color.tokenStylesForIntent)(bgColor.value, "default").color;
     } else if (bgColor.value === "transparent") {
-      bgDecl = `background-color: ${(0, _colorUtil.rawBgExprWithState)("transparent", bgRole)}`;
-    } else if (bgColor.value && typeof bgColor.value === "string" && (0, _colorUtil.isCssColor)(bgColor.value)) {
-      (0, _colorUtil.warnLegacyColor)("bgColor", bgColor.value);
-      bgDecl = `background-color: ${(0, _colorUtil.rawBgExprWithState)(bgColor.value, bgRole)}`;
+      bgDecl = `background-color: ${(0, _color.rawBgExprWithState)("transparent", bgRole)}`;
+    } else if (bgColor.value && typeof bgColor.value === "string" && (0, _color.isCssColor)(bgColor.value)) {
+      (0, _color.warnLegacyColor)("bgColor", bgColor.value);
+      bgDecl = `background-color: ${(0, _color.rawBgExprWithState)(bgColor.value, bgRole)}`;
     }
-    if (color.value && (0, _gradientUtil.isGradient)(color.value)) {
-      const grad = (0, _gradientUtil.resolveGradient)(color.value);
+    if (color.value && (0, _gradient.isGradient)(color.value)) {
+      const grad = (0, _gradient.resolveGradient)(color.value);
       if (grad) {
         fgDecl = "color: transparent";
         bgDecl = `background-image: ${grad}`;
         clipText = true;
       }
-    } else if (color.value && (0, _colorUtil.isIntent)(color.value)) {
-      if (bgIntentFg && bgColor.value && (0, _colorUtil.isIntent)(bgColor.value) && color.value === bgColor.value) {
+    } else if (color.value && (0, _color.isIntent)(color.value)) {
+      if (bgIntentFg && bgColor.value && (0, _color.isIntent)(bgColor.value) && color.value === bgColor.value) {
         fgDecl = `color: ${bgIntentFg}`;
       } else {
-        fgDecl = `color: ${(0, _colorUtil.tokenForegroundForIntent)(color.value)}`;
+        fgDecl = `color: ${(0, _color.tokenForegroundForIntent)(color.value)}`;
       }
-    } else if (color.value && typeof color.value === "string" && (0, _colorUtil.isCssColor)(color.value)) {
-      if (color.value !== "transparent") (0, _colorUtil.warnLegacyColor)("color", color.value);
+    } else if (color.value && typeof color.value === "string" && (0, _color.isCssColor)(color.value)) {
+      if (color.value !== "transparent") (0, _color.warnLegacyColor)("color", color.value);
       fgDecl = `color: ${color.value}`;
     } else if (!color.value && bgIntentFg && !bgIsGradient) {
       fgDecl = `color: ${bgIntentFg}`;
-    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _colorUtil.isParsableColor)(bgColor.value)) {
-      const parsed = (0, _colorUtil.parseColor)(bgColor.value);
+    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _color.isParsableColor)(bgColor.value)) {
+      const parsed = (0, _color.parseColor)(bgColor.value);
       if (parsed.a == null || parsed.a === 1) {
-        fgDecl = `color: ${(0, _colorUtil.getForeground)(parsed)}`;
+        fgDecl = `color: ${(0, _color.getForeground)(parsed)}`;
       }
     }
     const styles = [];

package/dist/src/composables/Commons/color.composable.d.ts

@@ -35,9 +35,14 @@ export declare function useBackgroundColor<T extends Record<K, TColor>, K extend
 /*********************************************************
  * useColorEffect
  ********************************************************/
-export declare function useColorEffect(props: IColorProps & IBgColorProps, isHover?: Ref<boolean> | ComputedRef<boolean>, isActive?: Ref<boolean> | ComputedRef<boolean>, isDisabled?: Ref<boolean> | ComputedRef<boolean>): {
+export declare function useColorEffect(props: IColorProps & IBgColorProps & {
+    hoverColor?: TColor;
+    activeColor?: TColor;
+    hoverBgColor?: TColor;
+    activeBgColor?: TColor;
+}, isHover?: Ref<boolean> | ComputedRef<boolean>, isActive?: Ref<boolean> | ComputedRef<boolean>, isDisabled?: Ref<boolean> | ComputedRef<boolean>): {
     colorClasses: ComputedRef<string[]>;
     colorStyles: ComputedRef<string[]>;
-    color: ComputedRef<any>;
-    bgColor: ComputedRef<any>;
+    color: ComputedRef<TColor>;
+    bgColor: ComputedRef<TColor>;
 };

package/dist/src/composables/Commons/color.composable.js

@@ -10,8 +10,8 @@ import {
   tokenForegroundForIntent,
   tokenStylesForIntent,
   warnLegacyColor
-} from "../../utils/Commons/color.util.ts";
-import { isGradient, resolveGradient } from "../../utils/Commons/gradient.util.ts";
+} from "../../utils/Commons/color.util.js";
+import { isGradient, resolveGradient } from "../../utils/Commons/gradient.util.js";
 export function useColor(colors) {
   const colorClasses = computed(() => {
     const classes = [];

package/dist/src/composables/Commons/date-picker-calendar.composable.cjs

@@ -88,7 +88,7 @@ function useDatePickerCalendar(props) {
         isAdjacent,
         isHidden: isAdjacent && !props.showAdjacentMonths,
         isStart,
-        isSelected: model.value.some(value => adapter.isSameDay(date, value)),
+        isSelected: model.value.some(value => adapter.isSameDay(date, adapter.date(value))),
         isEnd,
         isSame,
         localized: adapter.format(date, "dayOfMonth")

package/dist/src/composables/Commons/date-picker-calendar.composable.d.ts

@@ -7,7 +7,7 @@ export declare function useDatePickerCalendar(props: ICalendarProps): {
     daysInMonth: import("vue").ComputedRef<IDay[]>;
     daysInWeek: import("vue").ComputedRef<IDay[]>;
     genDays: (days: unknown[], today: unknown) => Array<IDay>;
-    model: import("../../types").TVModel<ICalendarProps, "date", unknown[]>;
+    model: import("../../types").TVModel<ICalendarProps, "date", readonly unknown[] | unknown[]>;
     weeksInMonth: import("vue").ComputedRef<unknown[][]>;
     weekDays: import("vue").ComputedRef<number[] | undefined>;
     weekNumbers: import("vue").ComputedRef<(number | null)[]>;

package/dist/src/composables/Commons/date-picker-calendar.composable.js

@@ -99,7 +99,7 @@ export function useDatePickerCalendar(props) {
         isAdjacent,
         isHidden: isAdjacent && !props.showAdjacentMonths,
         isStart,
-        isSelected: model.value.some((value) => adapter.isSameDay(date, value)),
+        isSelected: model.value.some((value) => adapter.isSameDay(date, adapter.date(value))),
         isEnd,
         isSame,
         localized: adapter.format(date, "dayOfMonth")

package/dist/src/composables/Commons/defaults.composable.cjs

@@ -17,22 +17,23 @@ function useDefaults(props, name = (0, _utils.getCurrentInstanceName)()) {
   const vm = (0, _utils.getCurrentInstance)("useDefaults");
   const propNames = Object.keys(props);
   if (!propNames.length) return props;
-  const vnodeProps = vm.vnode.props || {};
-  const passedKeys = /* @__PURE__ */new Set();
-  for (const k of Object.keys(vnodeProps)) {
-    passedKeys.add(k);
-    passedKeys.add(camelize(k));
-  }
+  const wasPropPassed = key => {
+    const vnodeProps = vm.vnode.props || {};
+    for (const k in vnodeProps) {
+      if (k === key || camelize(k) === key) return true;
+    }
+    return false;
+  };
   const result = {};
   for (const key of propNames) {
-    const wasPassed = passedKeys.has(key);
     const c = (0, _vue.computed)(() => {
-      if (wasPassed) return props[key];
+      const ownValue = props[key];
+      if (wasPropPassed(key)) return ownValue;
       const componentDefs = defaults.value?.[name];
       if (componentDefs?.[key] !== void 0) return componentDefs[key];
       const globalDefs = defaults.value?.global;
       if (globalDefs?.[key] !== void 0) return globalDefs[key];
-      return props[key];
+      return ownValue;
     });
     Object.defineProperty(result, key, {
       get: () => c.value,

package/dist/src/composables/Commons/defaults.composable.js

@@ -9,22 +9,23 @@ export function useDefaults(props, name = getCurrentInstanceName()) {
   const vm = getCurrentInstance("useDefaults");
   const propNames = Object.keys(props);
   if (!propNames.length) return props;
-  const vnodeProps = vm.vnode.props || {};
-  const passedKeys = /* @__PURE__ */ new Set();
-  for (const k of Object.keys(vnodeProps)) {
-    passedKeys.add(k);
-    passedKeys.add(camelize(k));
-  }
+  const wasPropPassed = (key) => {
+    const vnodeProps = vm.vnode.props || {};
+    for (const k in vnodeProps) {
+      if (k === key || camelize(k) === key) return true;
+    }
+    return false;
+  };
   const result = {};
   for (const key of propNames) {
-    const wasPassed = passedKeys.has(key);
     const c = computed(() => {
-      if (wasPassed) return props[key];
+      const ownValue = props[key];
+      if (wasPropPassed(key)) return ownValue;
       const componentDefs = defaults.value?.[name];
       if (componentDefs?.[key] !== void 0) return componentDefs[key];
       const globalDefs = defaults.value?.global;
       if (globalDefs?.[key] !== void 0) return globalDefs[key];
-      return props[key];
+      return ownValue;
     });
     Object.defineProperty(result, key, {
       get: () => c.value,