pxd 0.0.55 → 0.0.60

package/dist/components/radio-group/index.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { useModelValue } from "../../composables/use-model-value";
-import { provideUniqueId } from "../../composables/use-unique-id-context";
 import { provideRadioGroupContext } from "../../contexts/radio";
 import PRadio from "../radio/index.vue";
 import PStack from "../stack/index.vue";
+import { getUniqueId } from "../../utils/uid";
 defineOptions({
   name: "PRadioGroup",
   inheritAttrs: false,
@@ -14,27 +13,23 @@ defineOptions({
 });
 const props = defineProps({
   disabled: { type: Boolean, required: false },
-  required: { type: Boolean, required: false },
   modelValue: { type: [String, Number, Boolean], required: false },
-  options: { type: Array, required: false, default: () => [] }
+  options: { type: Array, required: false }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const modelValue = useModelValue(props, emits);
-provideUniqueId("RadioGroupName");
-provideRadioGroupContext(props);
+provideRadioGroupContext({ props, emits, name: getUniqueId() });
 </script>
 
 <template>
-  <PStack class="pxd-radio-group" role="radiogroup" aria-label="Radio Group" v-bind="$attrs">
+  <PStack
+    class="pxd-radio-group"
+    role="radiogroup"
+    aria-label="Radio Group"
+    aria-multiselectable="false"
+    v-bind="$attrs"
+  >
     <slot>
-      <PRadio
-        v-for="option in options"
-        :key="option.value"
-        v-model="modelValue"
-        :label="option.label"
-        :value="option.value"
-        :disabled="option.disabled"
-      />
+      <PRadio v-for="option in options" :key="option.value" v-bind="option" />
     </slot>
   </PStack>
 </template>

package/dist/components/radio-group/types.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentOption, ComponentValue } from '../../types/shared'
+
+export interface RadioGroupProps {
+  disabled?: boolean
+  modelValue?: ComponentValue
+  options?: ComponentOption[]
+}
+
+export interface RadioGroupEmits {
+  change: [NonNullable<RadioGroupProps['modelValue']>]
+  'update:modelValue': [NonNullable<RadioGroupProps['modelValue']>]
+}

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

@@ -1,13 +1,4 @@
-import type { ComponentDirection } from '../../types/shared/props'
-
-export interface ResizableProps {
-  direction?: ComponentDirection
-}
-
-export interface ResizablePanelProps {
-  size?: number | null
-  minSize?: number
-}
+import type { ComponentDirection } from '../../types/shared'
 
 export interface PanelConfig {
   id: string
@@ -21,3 +12,7 @@ export interface HandleConfig {
   order: number
   onDrag: (delta: { deltaX: number; deltaY: number }) => void
 }
+
+export interface ResizableProps {
+  direction?: ComponentDirection
+}

package/dist/components/resizable-handle/index.vue

@@ -6,8 +6,8 @@ defineOptions({
   name: "PResizableHandle",
   inheritAttrs: false
 });
-const resizableContext = useResizableContext();
 const uniqueId = getUniqueId();
+const resizableContext = useResizableContext();
 let isDragging = false;
 let startPosition = { x: 0, y: 0 };
 function onDrag(delta) {

package/dist/components/resizable-panel/index.d.vue.ts

@@ -1,4 +1,4 @@
-import type { ResizablePanelProps } from '../resizable/types';
+import type { ResizablePanelProps } from './types';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

package/dist/components/resizable-panel/index.vue

@@ -3,7 +3,8 @@ import { computed, onBeforeUnmount, onMounted, watch } from "vue";
 import { useResizableContext } from "../../contexts/resizable";
 import { getUniqueId } from "../../utils/uid";
 defineOptions({
-  name: "PResizablePanel"
+  name: "PResizablePanel",
+  inheritAttrs: false
 });
 const props = defineProps({
   size: { type: [Number, null], required: false, default: null },
@@ -50,7 +51,11 @@ watch(
 </script>
 
 <template>
-  <div class="pxd-resizable-panel min-w-0 min-h-0 overflow-hidden" :style="computedStyle">
+  <div
+    class="pxd-resizable-panel min-w-0 min-h-0 overflow-hidden"
+    :style="computedStyle"
+    v-bind="$attrs"
+  >
     <slot />
   </div>
 </template>

package/dist/components/resizable-panel/types.d.ts

@@ -0,0 +1,4 @@
+export interface ResizablePanelProps {
+  size?: number | null
+  minSize?: number
+}

package/dist/components/scrollable/index.d.vue.ts

@@ -0,0 +1,29 @@
+import type { ScrollableProps } from './types';
+declare function scrollTo(top: number, left: number): void;
+declare function forceUpdate(): void;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ScrollableProps, {
+    scrollTo: typeof scrollTo;
+    forceUpdate: typeof forceUpdate;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    scroll: (args_0: Event) => any;
+    bottom: (args_0: import("../../types/shared").ComponentDirection, args_1: Event) => any;
+}, string, import("vue").PublicProps, Readonly<ScrollableProps> & Readonly<{
+    onScroll?: ((args_0: Event) => any) | undefined;
+    onBottom?: ((args_0: import("../../types/shared").ComponentDirection, args_1: Event) => any) | undefined;
+}>, {
+    fader: boolean;
+    scrollbar: boolean;
+    bottomThreshold: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/scrollable/index.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
-import { useResizeObserver } from "../../composables/use-browser-observer";
+import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { useMutationObserver, useResizeObserver } from "../../composables/use-browser-observer";
 import { getStyle } from "../../utils/dom";
-import { cachedOff, cachedOn, once } from "../../utils/event";
+import { cachedOff, cachedOn, off, once } from "../../utils/event";
 import { isServer } from "../../utils/is";
 import { throttleByRaf } from "../../utils/throttle";
 import PFader from "../fader/index.vue";
@@ -12,37 +12,43 @@ defineOptions({
 });
 const props = defineProps({
   fader: { type: Boolean, required: false, default: true },
+  loading: { type: Boolean, required: false },
+  scrollbar: { type: Boolean, required: false, default: true },
   faderSize: { type: Number, required: false },
   faderColor: { type: String, required: false },
   faderDirection: { type: String, required: false },
-  scrollbar: { type: Boolean, required: false, default: true },
   wrapperClass: { type: [String, Array, Object], required: false },
   contentClass: { type: [String, Array, Object], required: false },
   contentStyle: { type: [Object, String], required: false },
   scrollbarSize: { type: Number, required: false },
   scrollbarColor: { type: String, required: false },
   scrollbarHoverColor: { type: String, required: false },
-  loading: { type: Boolean, required: false },
-  endThreshold: { type: Number, required: false, default: 10 }
+  bottomThreshold: { type: Number, required: false, default: 10 }
 });
-const emits = defineEmits(["scroll", "end"]);
+const emits = defineEmits(["scroll", "bottom"]);
 const wrapperRef = shallowRef();
 const contentRef = shallowRef();
+const isScrollableX = shallowRef(false);
+const isScrollableY = shallowRef(false);
+const verticalThumbTop = shallowRef(0);
+const horizontalThumbLeft = shallowRef(0);
+const verticalThumbHeight = shallowRef(0);
+const horizontalThumbWidth = shallowRef(0);
 const MIN_THUMB = 30;
+let triggerRightFired = false;
+let triggerBottomFired = false;
 let dragState = {
   isDragging: false,
   direction: null,
   startClientPos: 0,
   startThumbPos: 0
 };
-const scrollInfo = ref({
-  isScrollableX: false,
-  isScrollableY: false,
-  verticalThumbHeight: 0,
-  horizontalThumbWidth: 0,
-  verticalThumbTop: 0,
-  horizontalThumbLeft: 0
-});
+let cachedPadding = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+};
 const computedStyle = computed(() => {
   return {
     "--scrollbar-size": props.scrollbarSize,
@@ -51,23 +57,22 @@ const computedStyle = computed(() => {
   };
 });
 const verticalThumbStyle = computed(() => ({
-  height: `${scrollInfo.value.verticalThumbHeight}px`,
-  transform: `translateY(${scrollInfo.value.verticalThumbTop}px)`
+  height: `${verticalThumbHeight.value}px`,
+  transform: `translateY(${verticalThumbTop.value}px)`
 }));
 const horizontalThumbStyle = computed(() => ({
-  width: `${scrollInfo.value.horizontalThumbWidth}px`,
-  transform: `translateX(${scrollInfo.value.horizontalThumbLeft}px)`
+  width: `${horizontalThumbWidth.value}px`,
+  transform: `translateX(${horizontalThumbLeft.value}px)`
 }));
 function updateScrollbarMetrics() {
+  if (!props.scrollbar) {
+    return;
+  }
   const contentEl = contentRef.value;
-  if (!contentEl || !props.scrollbar) {
+  if (!contentEl || !contentEl.isConnected) {
     return;
   }
-  const { paddingTop, paddingRight, paddingBottom, paddingLeft } = getStyle(contentEl);
-  const pt = Number.parseFloat(paddingTop) || 0;
-  const pb = Number.parseFloat(paddingBottom) || 0;
-  const pl = Number.parseFloat(paddingLeft) || 0;
-  const pr = Number.parseFloat(paddingRight) || 0;
+  const { top: pt, bottom: pb, left: pl, right: pr } = cachedPadding;
   const {
     clientWidth: clientW,
     clientHeight: clientH,
@@ -80,28 +85,26 @@ function updateScrollbarMetrics() {
   const effClientH = Math.max(0, clientH - pt - pb);
   const effScrollW = Math.max(effClientW, scrollW - pl - pr);
   const effScrollH = Math.max(effClientH, scrollH - pt - pb);
-  const isScrollableX = effScrollW > effClientW;
-  const isScrollableY = effScrollH > effClientH;
+  const _isScrollableX = effScrollW > effClientW;
+  const _isScrollableY = effScrollH > effClientH;
   const verticalRatio = effScrollH > 0 ? effClientH / effScrollH : 0;
   const horizontalRatio = effScrollW > 0 ? effClientW / effScrollW : 0;
-  const verticalThumbHeight = Math.max(Math.round(trackH * verticalRatio), MIN_THUMB);
-  const horizontalThumbWidth = Math.max(Math.round(trackW * horizontalRatio), MIN_THUMB);
-  const scrollableWidth = Math.max(0, trackW - horizontalThumbWidth);
-  const scrollableHeight = Math.max(0, trackH - verticalThumbHeight);
+  const _verticalThumbHeight = Math.max(Math.round(trackH * verticalRatio), MIN_THUMB);
+  const _horizontalThumbWidth = Math.max(Math.round(trackW * horizontalRatio), MIN_THUMB);
+  const scrollableWidth = Math.max(0, trackW - _horizontalThumbWidth);
+  const scrollableHeight = Math.max(0, trackH - _verticalThumbHeight);
   const maxScrollX = Math.max(1, scrollW - clientW);
   const maxScrollY = Math.max(1, scrollH - clientH);
   const verticalScrollPercentage = Math.min(1, Math.max(0, contentEl.scrollTop / maxScrollY));
   const horizontalScrollPercentage = Math.min(1, Math.max(0, contentEl.scrollLeft / maxScrollX));
-  const verticalThumbTop = verticalScrollPercentage * scrollableHeight;
-  const horizontalThumbLeft = horizontalScrollPercentage * scrollableWidth;
-  scrollInfo.value = {
-    isScrollableX,
-    isScrollableY,
-    verticalThumbHeight,
-    horizontalThumbWidth,
-    verticalThumbTop,
-    horizontalThumbLeft
-  };
+  const _verticalThumbTop = verticalScrollPercentage * scrollableHeight;
+  const _horizontalThumbLeft = horizontalScrollPercentage * scrollableWidth;
+  isScrollableX.value = _isScrollableX;
+  isScrollableY.value = _isScrollableY;
+  verticalThumbHeight.value = _verticalThumbHeight;
+  horizontalThumbWidth.value = _horizontalThumbWidth;
+  verticalThumbTop.value = _verticalThumbTop;
+  horizontalThumbLeft.value = _horizontalThumbLeft;
 }
 const throttledUpdate = throttleByRaf(updateScrollbarMetrics);
 let lastScrollTop = 0;
@@ -134,17 +137,26 @@ function onContainerScroll(ev) {
     movedY = currTop !== lastScrollTop;
     movedX = currLeft !== lastScrollLeft;
   }
-  const endDistance = props.endThreshold ?? 0;
+  const threshold = props.bottomThreshold ?? 0;
   if (movedY) {
-    const distanceToBottom = el.scrollHeight - (currTop + el.clientHeight);
-    if (distanceToBottom <= endDistance) {
-      emits("end", ev, "vertical");
+    const scrollBottom = Math.floor(currTop + el.clientHeight);
+    if (scrollBottom >= el.scrollHeight - threshold) {
+      if (!triggerBottomFired) {
+        triggerBottomFired = true;
+        emits("bottom", "vertical", ev);
+      }
+    } else {
+      triggerBottomFired = false;
     }
-  }
-  if (movedX) {
-    const distanceToRight = el.scrollWidth - (currLeft + el.clientWidth);
-    if (distanceToRight <= endDistance) {
-      emits("end", ev, "horizontal");
+  } else if (movedX) {
+    const scrollRight = Math.floor(currLeft + el.clientWidth);
+    if (scrollRight >= el.scrollWidth - threshold) {
+      if (!triggerRightFired) {
+        triggerRightFired = true;
+        emits("bottom", "horizontal", ev);
+      }
+    } else {
+      triggerRightFired = false;
     }
   }
   lastScrollTop = currTop;
@@ -160,7 +172,7 @@ function startDragVertical(e) {
     isDragging: true,
     direction: "vertical",
     startClientPos: e.clientY,
-    startThumbPos: scrollInfo.value.verticalThumbTop
+    startThumbPos: verticalThumbTop.value
   };
   cachedOn(document, "mousemove", onDragMove);
   once(document, "mouseup", onEndDrag);
@@ -175,7 +187,7 @@ function startDragHorizontal(e) {
     isDragging: true,
     direction: "horizontal",
     startClientPos: e.clientX,
-    startThumbPos: scrollInfo.value.horizontalThumbLeft
+    startThumbPos: horizontalThumbLeft.value
   };
   cachedOn(document, "mousemove", onDragMove);
   once(document, "mouseup", onEndDrag);
@@ -190,23 +202,23 @@ function onDragMove(e) {
   }
   if (dragState.direction === "vertical") {
     const trackH = wrapperRef.value.clientHeight ?? contentEl.clientHeight;
-    const thumbH = scrollInfo.value.verticalThumbHeight;
+    const thumbH = verticalThumbHeight.value;
     const scrollableH = Math.max(0, trackH - thumbH);
     const delta2 = e.clientY - dragState.startClientPos;
     const newThumbTop = Math.max(0, Math.min(scrollableH, dragState.startThumbPos + delta2));
     const maxScroll2 = Math.max(0, contentEl.scrollHeight - contentEl.clientHeight);
     contentEl.scrollTop = scrollableH > 0 ? newThumbTop / scrollableH * maxScroll2 : 0;
-    scrollInfo.value.verticalThumbTop = newThumbTop;
+    verticalThumbTop.value = newThumbTop;
     return;
   }
   const trackW = wrapperRef.value.clientWidth ?? contentEl.clientWidth;
-  const thumbW = scrollInfo.value.horizontalThumbWidth;
+  const thumbW = horizontalThumbWidth.value;
   const scrollableW = Math.max(0, trackW - thumbW);
   const delta = e.clientX - dragState.startClientPos;
   const newThumbLeft = Math.max(0, Math.min(scrollableW, dragState.startThumbPos + delta));
   const maxScroll = Math.max(0, contentEl.scrollWidth - contentEl.clientWidth);
   contentEl.scrollLeft = scrollableW > 0 ? newThumbLeft / scrollableW * maxScroll : 0;
-  scrollInfo.value.horizontalThumbLeft = newThumbLeft;
+  horizontalThumbLeft.value = newThumbLeft;
 }
 function onEndDrag(ev) {
   ev.stopPropagation();
@@ -223,7 +235,26 @@ function scrollTo(top, left) {
   contentRef.value.scrollTo({ top, left });
 }
 if (props.scrollbar) {
-  useResizeObserver(contentRef, throttledUpdate);
+  useResizeObserver(wrapperRef, throttledUpdate);
+  useMutationObserver(contentRef, throttledUpdate, { childList: true, subtree: true });
+}
+function getContainerPadding() {
+  const contentEl = contentRef.value;
+  if (!contentEl) {
+    return;
+  }
+  const { paddingTop, paddingRight, paddingBottom, paddingLeft } = getStyle(contentEl);
+  cachedPadding = {
+    top: Number.parseFloat(paddingTop) || 0,
+    bottom: Number.parseFloat(paddingBottom) || 0,
+    left: Number.parseFloat(paddingLeft) || 0,
+    right: Number.parseFloat(paddingRight) || 0
+  };
+}
+function forceUpdate() {
+  throttledUpdate.cancel();
+  getContainerPadding();
+  updateScrollbarMetrics();
 }
 onMounted(async () => {
   if (isServer()) {
@@ -232,25 +263,24 @@ onMounted(async () => {
   if (!props.scrollbar && !props.fader) {
     return;
   }
-  cachedOn(window, "resize", updateScrollbarMetrics, { passive: true });
+  getContainerPadding();
   requestAnimationFrame(updateScrollbarMetrics);
 });
 onBeforeUnmount(() => {
-  cachedOff(window, "resize", updateScrollbarMetrics);
-  cachedOff(document, "mousemove", onDragMove);
-  cachedOff(document, "mouseup", onEndDrag);
   throttledUpdate.cancel();
+  cachedOff(document, "mousemove", onDragMove);
+  off(document, "mouseup", onEndDrag);
 });
 defineExpose({
   scrollTo,
-  forceUpdate: throttledUpdate
+  forceUpdate
 });
 </script>
 
 <template>
   <div
     ref="wrapperRef"
-    class="pxd-scrollable group/scrollable relative flex overflow-hidden hover:[--o:1] pointer-fine:[--o:0]"
+    class="pxd-scrollable group/scrollable relative flex flex-col overflow-hidden hover:[--o:1] pointer-fine:[--o:0]"
     :class="wrapperClass"
     :style="computedStyle"
     v-bind="$attrs"
@@ -259,7 +289,7 @@ defineExpose({
       ref="contentRef"
       :class="contentClass"
       :style="contentStyle"
-      class="pxd-scrollable--content relative scrollbar-hidden max-h-full flex-1 shrink-0 overflow-scroll"
+      class="pxd-scrollable--content relative scrollbar-none h-full max-h-inherit max-w-full flex-1 shrink-0 overflow-scroll intrinsic-size-auto"
       @scroll.passive="onContainerScroll"
     >
       <slot />
@@ -275,7 +305,7 @@ defineExpose({
 
     <template v-if="scrollbar">
       <div
-        v-if="scrollInfo.isScrollableX"
+        v-if="isScrollableX"
         aria-hidden="true"
         class="pxd-scrollable--scrollbar-x left-0 right-0 bottom-0 absolute touch-none opacity-(--o) delay-1000 select-none group-hover/scrollable:delay-0 active:opacity-100 motion-safe:transition-opacity"
       >
@@ -287,7 +317,7 @@ defineExpose({
       </div>
 
       <div
-        v-if="scrollInfo.isScrollableY"
+        v-if="isScrollableY"
         aria-hidden="true"
         class="pxd-scrollable--scrollbar-y top-0 right-0 bottom-0 absolute touch-none opacity-(--o) delay-1000 select-none group-hover/scrollable:delay-0 active:opacity-100 motion-safe:transition-opacity"
       >
@@ -301,21 +331,6 @@ defineExpose({
   </div>
 </template>
 
-<style lang="postcss">
-.pxd-scrollable--scrollbar-x {
-  height: calc(var(--scrollbar-size, 6) * 1px);
-}
-
-.pxd-scrollable--scrollbar-y {
-  width: calc(var(--scrollbar-size, 6) * 1px);
-}
-
-.pxd-scrollable--thumb {
-  background-color: var(--scrollbar-color, var(--color-gray-alpha-300));
-
-  &:hover,
-  &:active {
-    background-color: var(--scrollbar-hover-color, var(--color-gray-alpha-500));
-  }
-}
+<style>
+.pxd-scrollable--scrollbar-x{height:calc(var(--scrollbar-size, 6)*1px)}.pxd-scrollable--scrollbar-y{width:calc(var(--scrollbar-size, 6)*1px)}.pxd-scrollable--thumb{background-color:var(--scrollbar-color,var(--color-gray-alpha-300))}.pxd-scrollable--thumb:active,.pxd-scrollable--thumb:hover{background-color:var(--scrollbar-hover-color,var(--color-gray-alpha-500))}
 </style>

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

@@ -1,24 +1,38 @@
 import type { CSSProperties } from 'vue'
 
-import type { ComponentClass, ComponentDirection } from '../../types/shared'
+import type { ComponentClass, ComponentDirection, Nullable } from '../../types/shared'
 
 export interface ScrollableProps {
   fader?: boolean
+  loading?: boolean
+  scrollbar?: boolean
   faderSize?: number
   faderColor?: string
   faderDirection?: ComponentDirection | 'both'
-  scrollbar?: boolean
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
   contentStyle?: CSSProperties | string
   scrollbarSize?: number
   scrollbarColor?: string
   scrollbarHoverColor?: string
-  loading?: boolean
-  endThreshold?: number
+  bottomThreshold?: number
 }
 
 export interface ScrollableEmits {
   scroll: [Event]
-  end: [Event, ComponentDirection]
+  bottom: [ComponentDirection, Event]
+}
+
+export interface ScrollableDragState {
+  isDragging: boolean
+  direction: Nullable<ComponentDirection>
+  startClientPos: number
+  startThumbPos: number
+}
+
+export interface ScrollableCachedPadding {
+  top: number
+  bottom: number
+  left: number
+  right: number
 }

package/dist/components/skeleton/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { getCssUnitValue, increaseWithUnit } from "../../utils/format";
-import { skeletonVariant } from "./cn";
+import { tv } from "tailwind-variants";
 defineOptions({
   name: "PSkeleton",
   inheritAttrs: false
@@ -14,6 +14,29 @@ const props = defineProps({
   boxHeight: { type: [String, Number], required: false },
   shape: { type: String, required: false, default: "default" }
 });
+const skeletonVariant = tv({
+  base: "pxd-skeleton relative block shrink-0 overflow-hidden",
+  variants: {
+    loading: {
+      true: "loading invisible content-visibility-auto intrinsic-size-auto",
+      false: ""
+    },
+    shape: {
+      default: "rounded-md",
+      square: "rounded-none",
+      rounded: "rounded-full"
+    },
+    animated: {
+      true: "animated after:default-animation-timing-function!",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    loading: true,
+    shape: "default",
+    animated: true
+  }
+});
 const computedStyle = computed(() => {
   const { width, height, boxHeight } = props;
   const styles = {

package/dist/components/slider/index.d.vue.ts

@@ -1,14 +1,14 @@
 import type { SliderProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<SliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: NonNullable<number | [number, number] | null | undefined>) => any;
-    "update:modelValue": (args_0: NonNullable<number | [number, number] | null | undefined>) => any;
+    change: (args_0: NonNullable<number | number[] | null | undefined>) => any;
+    "update:modelValue": (args_0: NonNullable<number | number[] | null | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<SliderProps> & Readonly<{
-    onChange?: ((args_0: NonNullable<number | [number, number] | null | undefined>) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: NonNullable<number | [number, number] | null | undefined>) => any) | undefined;
+    onChange?: ((args_0: NonNullable<number | number[] | null | undefined>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<number | number[] | null | undefined>) => any) | undefined;
 }>, {
-    variant: import("../../types/shared").ComponentVariant | "secondary";
     max: number;
-    modelValue: number | [number, number] | null;
+    variant: import("../../types/shared").ComponentVariant | "secondary";
+    modelValue: number | number[] | null;
     min: number;
     step: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;