pxd 0.0.13 → 0.0.15

package/dist/components/input/index.vue

@@ -1,13 +1,14 @@
 <script setup>
-import { EyeIcon, EyeOffIcon } from "gdsi/vue";
+import EyeIcon from "@gdsicon/vue/eye";
+import EyeOffIcon from "@gdsicon/vue/eye-off";
 import { twMerge } from "tailwind-merge";
 import { computed, shallowRef } from "vue";
 import { useComputedSize } from "../../composables/useComputedSize";
 import { useModelValue } from "../../composables/useModelValue";
+import { getUniqueId } from "../../utils/uid";
 import PError from "../error/index.vue";
 defineOptions({
   name: "PInput",
-  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -16,17 +17,19 @@ defineOptions({
 const props = defineProps({
   size: { type: String, required: false },
   error: { type: String, required: false },
+  label: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   password: { type: Boolean, required: false },
-  modelValue: { type: String, required: false, default: "" },
+  minlength: { type: [Number, String], required: false },
+  maxlength: { type: [Number, String], required: false },
+  modelValue: { type: [String, Number, Array, null], required: false, default: "" },
   placeholder: { type: String, required: false },
   prefixStyle: { type: Boolean, required: false, default: true },
-  suffixStyle: { type: Boolean, required: false, default: true },
-  minlength: { type: [Number, String], required: false },
-  maxlength: { type: [Number, String], required: false }
+  suffixStyle: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["update:modelValue", "focus", "blur", "change"]);
+const randomId = getUniqueId();
 const SIZES = {
   xs: "h-6 text-xs",
   sm: "h-7.5 text-sm",
@@ -37,7 +40,7 @@ const modelValue = useModelValue(props, emits);
 const internalInputType = shallowRef(props.password ? "password" : "text");
 const computedSize = useComputedSize(props.size, SIZES);
 const computedClasses = computed(() => {
-  const basic = ["pxd-input--container relative flex items-center justify-center rounded-inherit h-full motion-safe:transition-all overflow-hidden rounded-md bg-background"];
+  const basic = ["pxd-input--container flex items-center relative rounded-inherit h-full motion-safe:transition-all overflow-hidden rounded-md bg-background"];
   basic.push(computedSize.value);
   if (props.disabled) {
     basic.push("is-disabled bg-gray-100");
@@ -65,18 +68,23 @@ function togglePasswordType() {
 </script>
 
 <template>
-  <div class="pxd-input max-w-full">
-    <label :class="computedClasses">
+  <label class="pxd-input w-full max-w-full" :for="randomId">
+    <div v-if="label || $slots.label" class="pxd-input--label text-sm text-gray-900 mb-2 max-w-full">
+      <slot name="label">{{ label }}</slot>
+    </div>
+
+    <div :class="computedClasses">
       <div
         v-if="$slots.prefix"
         aria-hidden="true"
-        class="pl-3 h-full flex items-center text-sm text-gray-700 "
+        class="pxd-input--prefix pl-3 h-full flex items-center text-sm text-gray-700 "
         :class="{ 'bg-background-secondary rounded-tl-inherit rounded-bl-inherit border-r pr-3': prefixStyle }"
       >
         <slot name="prefix" />
       </div>
 
       <input
+        :id="randomId"
         v-model="modelValue"
         class="w-full h-full px-3 rounded-inherit outline-none bg-transparent disabled:text-gray-700 disabled:cursor-not-allowed placeholder:select-none file:border-0 file:bg-transparent file:font-medium"
         :class="{ 'pr-10': password }"
@@ -103,38 +111,38 @@ function togglePasswordType() {
       <div
         v-if="$slots.suffix"
         aria-hidden="true"
-        class="pr-3 h-full flex items-center text-sm text-gray-700"
+        class="pxd-input--suffix pr-3 h-full flex items-center text-sm text-gray-700"
         :class="{ 'bg-background-secondary rounded-tr-inherit rounded-br-inherit border-l pl-3': suffixStyle }"
       >
         <slot name="suffix" />
       </div>
-    </label>
+    </div>
 
-    <PError v-if="error" class="mt-1.5" :size="size">
+    <PError v-if="error" class="mt-2" :size="size">
       {{ error }}
     </PError>
-  </div>
+  </label>
 </template>
 
 <style lang="postcss">
 .pxd-input--container {
-  box-shadow: 0 0 0 1px var(--border-color, var(--gray-alpha-300));
+  box-shadow: 0 0 0 1px var(--border-color, var(--color-gray-alpha-300));
 
   &:not(.is-disabled, .is-readonly):hover {
-    --border-color: var(--gray-alpha-600);
+    --border-color: var(--color-gray-alpha-600);
   }
 
   &:not(.is-disabled, .is-readonly):focus-within {
-    box-shadow: 0 0 0 1px var(--gray-alpha-600), 0 0 0 4px var(--gray-alpha-300);
+    box-shadow: 0 0 0 1px var(--color-gray-alpha-600), 0 0 0 4px var(--color-gray-alpha-300);
   }
 
   &.is-error {
     &, &:focus-within {
-      box-shadow: 0 0 0 1px hsl(var(--red-900-value)), 0 0 0 4px hsl(var(--red-300-value));
+      box-shadow: 0 0 0 1px hsl(var(--color-red-900-value)), 0 0 0 4px hsl(var(--color-red-300-value));
     }
 
     &:not(.is-disabled, .is-readonly, :focus):hover {
-      box-shadow: 0 0 0 1px hsl(var(--red-900-value)), 0 0 0 4px hsl(var(--red-500-value));
+      box-shadow: 0 0 0 1px hsl(var(--color-red-900-value)), 0 0 0 4px hsl(var(--color-red-500-value));
     }
   }
 }

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

@@ -2,34 +2,37 @@ import type { ComponentSizeWithXs } from '../../types/components';
 interface Props {
     size?: ComponentSizeWithXs;
     error?: string;
+    label?: string;
     readonly?: boolean;
     disabled?: boolean;
     password?: boolean;
-    modelValue?: string;
+    minlength?: number | string;
+    maxlength?: number | string;
+    modelValue?: string | number | readonly string[] | null;
     placeholder?: string;
     prefixStyle?: boolean;
     suffixStyle?: boolean;
-    minlength?: number | string;
-    maxlength?: number | string;
 }
-declare var __VLS_1: {}, __VLS_11: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_13: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_1) => any;
+    label?: (props: typeof __VLS_1) => any;
+} & {
+    prefix?: (props: typeof __VLS_3) => any;
 } & {
-    suffix?: (props: typeof __VLS_11) => any;
+    suffix?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     blur: (args_0: FocusEvent) => any;
     change: (args_0: Event) => any;
     focus: (args_0: FocusEvent) => any;
-    "update:modelValue": (args_0: string) => any;
+    "update:modelValue": (args_0: NonNullable<string | number | readonly string[]>) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onBlur?: (args_0: FocusEvent) => any;
     onChange?: (args_0: Event) => any;
     onFocus?: (args_0: FocusEvent) => any;
-    "onUpdate:modelValue"?: (args_0: string) => any;
+    "onUpdate:modelValue"?: (args_0: NonNullable<string | number | readonly string[]>) => any;
 }>, {
-    modelValue: string;
+    modelValue: string | number | readonly string[] | null;
     prefixStyle: boolean;
     suffixStyle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/kbd/index.vue

@@ -26,7 +26,7 @@ const internalKey = computed(() => {
 
 <template>
   <kbd
-    class="pxd-keyboard-input border border-input inline-flex px-1.5 items-center bg-background text-gray-1000 text-center rounded-md font-sans ml-1"
+    class="pxd-keyboard border border-input inline-flex px-1.5 items-center bg-background text-gray-1000 text-center rounded-md font-sans ml-1"
     :class="[small ? 'h-5 text-xs' : 'h-6 text-sm']"
   >
     {{ internalKey }}

package/dist/components/link-button/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ExternalIcon } from "gdsi/vue";
+import ExternalIcon from "@gdsicon/vue/external";
 import { computed, useAttrs } from "vue";
 import { isExternalLink } from "../../utils/format";
 import Button from "../button/index.vue";

package/dist/components/more-button/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ChevronDownIcon } from "gdsi/vue";
+import ChevronDownIcon from "@gdsicon/vue/chevron-down";
 import { useModelValue } from "../../composables/useModelValue";
 import Button from "../button/index.vue";
 defineOptions({
@@ -46,6 +46,6 @@ function onToggleExpand() {
   content: '';
   display: block;
   width: 100%;
-  border-top: 1px solid var(--gray-alpha-300);
+  border-top: 1px solid var(--color-gray-alpha-300);
 }
 </style>

package/dist/components/note/index.vue

@@ -1,5 +1,8 @@
 <script setup>
-import { CheckCircleIcon, InformationIcon, StopIcon, WarningIcon } from "gdsi/vue";
+import CheckCircleIcon from "@gdsicon/vue/check-circle";
+import InformationIcon from "@gdsicon/vue/information";
+import StopIcon from "@gdsicon/vue/stop";
+import WarningIcon from "@gdsicon/vue/warning";
 import { twMerge } from "tailwind-merge";
 import { computed, h } from "vue";
 import { useComputedSize } from "../../composables/useComputedSize";
@@ -66,7 +69,7 @@ const computedLabel = computed(() => {
 });
 const computedSize = useComputedSize(props.size, SIZES);
 const computedClasses = computed(() => {
-  const basic = ["pxd-note flex items-center gap-3 border rounded-md w-max"];
+  const basic = ["pxd-note flex flex-col sm:flex-row sm:items-center gap-2 border rounded-md w-max max-w-full"];
   basic.push(computedSize.value);
   if (props.fill) {
     basic.push((VARIANTS[props.variant] || VARIANTS.default)?.fill);
@@ -79,13 +82,17 @@ const computedClasses = computed(() => {
 
 <template>
   <div :class="computedClasses">
-    <slot v-if="computedLabel" name="label">
-      <component :is="computedLabel" class="font-medium" />
-    </slot>
+    <div class="flex items-center gap-3">
+      <slot v-if="computedLabel" name="label">
+        <component :is="computedLabel" class="font-medium flex-shrink-0" />
+      </slot>
 
-    <slot />
+      <span class="flex-1">
+        <slot />
+      </span>
+    </div>
 
-    <div v-if="$slots.action" class="pxd-note--action ml-2">
+    <div v-if="$slots.action" class="pxd-note--action">
       <slot name="action" />
     </div>
   </div>

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

@@ -7,37 +7,65 @@ interface Props {
 }
 declare const VARIANTS: {
     success: {
-        icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        icon: DefineComponent<{
+            width?: string;
+            height?: string;
+            fill?: string;
+        }>;
         fill: string;
         classes: string;
     };
     error: {
-        icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        icon: DefineComponent<{
+            width?: string;
+            height?: string;
+            fill?: string;
+        }>;
         fill: string;
         classes: string;
     };
     warning: {
-        icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        icon: DefineComponent<{
+            width?: string;
+            height?: string;
+            fill?: string;
+        }>;
         fill: string;
         classes: string;
     };
     default: {
-        icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        icon: DefineComponent<{
+            width?: string;
+            height?: string;
+            fill?: string;
+        }>;
         fill: string;
         classes: string;
     };
     primary: {
-        icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        icon: DefineComponent<{
+            width?: string;
+            height?: string;
+            fill?: string;
+        }>;
         fill: string;
         classes: string;
     };
     violet: {
-        icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        icon: DefineComponent<{
+            width?: string;
+            height?: string;
+            fill?: string;
+        }>;
         fill: string;
         classes: string;
     };
     cyan: {
-        icon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        icon: DefineComponent<{
+            width?: string;
+            height?: string;
+            fill?: string;
+        }>;
         fill: string;
         classes: string;
     };

package/dist/components/progress/index.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { useConfigProvider } from "../../composables/useConfigProviderContext";
 import { useModelValue } from "../../composables/useModelValue";
+import { getStateColor } from "../../utils/colors";
 defineOptions({
   name: "PProgress",
   model: {
@@ -16,7 +17,7 @@ const props = defineProps({
   label: { type: [String, Number, Boolean], required: false, default: false },
   variant: { type: String, required: false, default: "primary" },
   colors: { type: Object, required: false },
-  modelValue: { type: Number, required: true }
+  modelValue: { type: [Number, null], required: false }
 });
 const emits = defineEmits(["update:modelValue"]);
 const config = useConfigProvider();
@@ -27,14 +28,13 @@ const SIZES = {
 };
 const VARIANTS_COLORS = {
   primary: "var(--color-primary)",
-  success: "hsl(var(--blue-700-value))",
-  warning: "hsl(var(--amber-700-value))",
-  secondary: "hsl(var(--gray-700-value))",
-  error: "hsl(var(--red-700-value))"
+  success: "hsl(var(--color-blue-700-value))",
+  warning: "hsl(var(--color-amber-700-value))",
+  secondary: "hsl(var(--color-gray-700-value))",
+  error: "hsl(var(--color-red-700-value))"
 };
-const progress = useModelValue(props, emits);
-const sortedColorKeys = computed(() => {
-  return props.colors ? Object.keys(props.colors).map(Number).sort((a, b) => a - b) : [];
+const progress = useModelValue(props, emits, {
+  get: () => props.modelValue || 0
 });
 const computedLabel = computed(() => {
   const { label } = props;
@@ -49,13 +49,7 @@ const computedLabel = computed(() => {
 const computedColors = computed(() => {
   const { colors, variant } = props;
   if (colors) {
-    const sortedKeys = sortedColorKeys.value;
-    for (let i = 0; i < sortedKeys.length; i++) {
-      if (progress.value < sortedKeys[i]) {
-        return colors[sortedKeys[i - 1]];
-      }
-    }
-    return colors[sortedKeys.at(-1)];
+    return getStateColor(progress.value, colors) || VARIANTS_COLORS[variant];
   }
   return VARIANTS_COLORS[variant];
 });

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

@@ -6,7 +6,7 @@ interface Props {
     label?: string | number | boolean;
     variant?: ComponentVariant | 'secondary';
     colors?: Record<string, string>;
-    modelValue: number;
+    modelValue?: number | null;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -21,7 +21,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     max: number;
     min: number;
     label: string | number | boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/radio/index.vue

@@ -3,7 +3,7 @@ import { twMerge } from "tailwind-merge";
 import { computed, inject } from "vue";
 import { useModelValue } from "../../composables/useModelValue";
 import { useRandomValue } from "../../composables/useRandomValueContext";
-import { getRandomId } from "../../utils/random";
+import { getUniqueId } from "../../utils/uid";
 defineOptions({
   name: "PRadio",
   model: {
@@ -19,7 +19,7 @@ const props = defineProps({
   modelValue: { type: [String, Number], required: false }
 });
 const emits = defineEmits(["update:modelValue"]);
-const randomId = getRandomId();
+const randomId = getUniqueId();
 const modelValue = useModelValue(props, emits);
 const radioGroupName = useRandomValue("radioGroupName");
 const radioGroupProps = inject("radioGroupProps", {

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

@@ -10,9 +10,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: string | number) => any;
+    "update:modelValue": (args_0: NonNullable<string | number>) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: (args_0: string | number) => any;
+    "onUpdate:modelValue"?: (args_0: NonNullable<string | number>) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -14,9 +14,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: string | number) => any;
+    "update:modelValue": (args_0: NonNullable<string | number>) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: (args_0: string | number) => any;
+    "onUpdate:modelValue"?: (args_0: NonNullable<string | number>) => any;
 }>, {
     options: RadioGroupOptions[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/scrollable/index.vue

@@ -11,8 +11,8 @@ const props = defineProps({
   scrollbar: { type: Boolean, required: false, default: true },
   scrollbarSize: { type: Number, required: false, default: 6 },
   staticContent: { type: Boolean, required: false },
-  scrollbarColor: { type: String, required: false, default: "var(--gray-alpha-300)" },
-  scrollbarHoverColor: { type: String, required: false, default: "var(--gray-alpha-500)" }
+  scrollbarColor: { type: String, required: false, default: "var(--color-gray-alpha-300)" },
+  scrollbarHoverColor: { type: String, required: false, default: "var(--color-gray-alpha-500)" }
 });
 const emits = defineEmits(["scroll"]);
 const PADDING = 4;
@@ -283,7 +283,6 @@ defineExpose({
   &::after {
     content: '';
     position: absolute;
-    backdrop-filter: blur(30px);
     background: linear-gradient(var(--dir), transparent, var(--c, var(--background-100)));
     mask-image: linear-gradient(var(--dir-revert), var(--c, var(--background-100)) 50%, transparent);
     opacity: 0;

package/dist/components/slider/index.vue

@@ -3,16 +3,21 @@ import { computed, onBeforeUnmount, shallowRef } from "vue";
 import { useComputedSize } from "../../composables/useComputedSize";
 import { useModelValue } from "../../composables/useModelValue";
 defineOptions({
-  name: "PSlider"
+  name: "PSlider",
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
 });
 const props = defineProps({
   min: { type: Number, required: false, default: 0 },
   max: { type: Number, required: false, default: 100 },
   step: { type: Number, required: false, default: 1 },
   range: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
   size: { type: String, required: false },
   variant: { type: String, required: false, default: "primary" },
-  modelValue: { type: [Number, Array], required: false, default: 0 }
+  modelValue: { type: [Number, Array, null], required: false, default: 0 }
 });
 const emits = defineEmits(["update:modelValue"]);
 const SIZES = {
@@ -31,10 +36,10 @@ const SIZES = {
 };
 const VARIANTS = {
   primary: "var(--color-primary)",
-  success: "hsl(var(--blue-700-value))",
-  warning: "hsl(var(--amber-700-value))",
-  secondary: "hsl(var(--gray-700-value))",
-  error: "hsl(var(--red-700-value))"
+  success: "hsl(var(--color-blue-700-value))",
+  warning: "hsl(var(--color-amber-700-value))",
+  secondary: "hsl(var(--color-gray-700-value))",
+  error: "hsl(var(--color-red-700-value))"
 };
 let isDragging = false;
 let lastClientX;
@@ -61,12 +66,12 @@ const trackStyle = computed(() => {
     return {
       left: `${startPercentage.value}%`,
       width: `${endPercentage.value - startPercentage.value}%`,
-      backgroundColor: VARIANTS[props.variant] || VARIANTS.primary
+      backgroundColor: props.disabled ? "var(--color-gray-alpha-400)" : VARIANTS[props.variant] || VARIANTS.primary
     };
   }
   return {
     width: `${endPercentage.value}%`,
-    backgroundColor: VARIANTS[props.variant] || VARIANTS.primary
+    backgroundColor: props.disabled ? "var(--color-gray-alpha-400)" : VARIANTS[props.variant] || VARIANTS.primary
   };
 });
 function updateValueFromPosition(clientX) {
@@ -109,29 +114,29 @@ function scheduleUpdate() {
   if (animationFrameId)
     return;
   animationFrameId = requestAnimationFrame(() => {
+    animationFrameId = null;
     if (lastClientX !== null) {
       updateValueFromPosition(lastClientX);
     }
-    animationFrameId = null;
     if (isDragging) {
       scheduleUpdate();
     }
   });
 }
-function startDragging(e, thumb) {
+function startDragging(ev, thumb) {
   isDragging = true;
   activeThumb.value = thumb;
-  lastClientX = e.clientX;
-  updateValueFromPosition(e.clientX);
+  lastClientX = ev.clientX;
+  updateValueFromPosition(ev.clientX);
   document.addEventListener("pointermove", handleMove, { passive: false });
   document.addEventListener("pointerup", endDragging, { once: true });
   document.addEventListener("pointercancel", endDragging, { once: true });
 }
-function handleMove(e) {
-  if (!isDragging)
+function handleMove(ev) {
+  if (!isDragging || props.disabled)
     return;
-  e.preventDefault();
-  lastClientX = e.clientX;
+  ev.preventDefault();
+  lastClientX = ev.clientX;
   scheduleUpdate();
 }
 function endDragging() {
@@ -145,19 +150,22 @@ function endDragging() {
   document.removeEventListener("pointermove", handleMove);
   document.removeEventListener("pointercancel", endDragging);
 }
-function handleSliderClick(e) {
-  if (isDragging || !props.range)
+function handleSliderClick(ev) {
+  if (isDragging || !props.range || props.disabled)
     return;
   const rect = sliderRef.value?.getBoundingClientRect();
   if (!rect)
     return;
-  const clickPosition = (e.clientX - rect.left) / rect.width;
+  const clickPosition = (ev.clientX - rect.left) / rect.width;
   const startPos = startPercentage.value / 100;
   const endPos = endPercentage.value / 100;
   const thumb = Math.abs(clickPosition - startPos) < Math.abs(clickPosition - endPos) ? "start" : "end";
-  startDragging(e, thumb);
+  startDragging(ev, thumb);
 }
 function onWrapperPointerdown(ev) {
+  if (props.disabled) {
+    return;
+  }
   if (props.range) {
     handleSliderClick(ev);
     return;
@@ -186,26 +194,26 @@ onBeforeUnmount(() => {
   <div
     ref="sliderRef"
     :role="range ? 'group' : 'slider'"
-    :class="computedSize.track"
     class="pxd-slider group/slider relative bg-gray-200 flex items-center rounded-full select-none touch-none"
+    :class="[{ 'cursor-not-allowed': disabled }, computedSize.track]"
     @pointerdown.prevent="onWrapperPointerdown"
   >
     <div
-      class="pxd-slider--track absolute h-full bg-primary rounded-full group-hover/slider:will-change-[width,left]"
+      class="pxd-slider--track absolute h-full rounded-full touch-none group-active/slider:will-change-[width,left]"
       :style="trackStyle"
     />
 
     <div
       v-if="props.range"
-      class="pxd-slider--thumb absolute bg-background rounded-xs hover:scale-130 active:scale-130 active:z-10 -translate-x-1/2"
-      :class="[{ 'scale-130': activeThumb === 'start' }, computedSize.thumb]"
+      class="pxd-slider--thumb absolute bg-background rounded-xs touch-none hover:scale-130 group-active/slider:will-change-[width,left] active:scale-130 active:z-10 -translate-x-1/2"
+      :class="[{ 'scale-130': activeThumb === 'start', 'pointer-events-none': disabled }, computedSize.thumb]"
       :style="{ left: `${startPercentage}%` }"
       @pointerdown.prevent.stop="startDragging($event, 'start')"
     />
 
     <div
-      class="pxd-slider--thumb absolute bg-background rounded-xs hover:scale-130 active:scale-130 active:z-10 -translate-x-1/2"
-      :class="[{ 'scale-130': activeThumb === 'end' }, computedSize.thumb]"
+      class="pxd-slider--thumb absolute bg-background rounded-xs touch-none hover:scale-130 group-active/slider:will-change-[width,left] active:scale-130 active:z-10 -translate-x-1/2"
+      :class="[{ 'scale-130': activeThumb === 'end', 'pointer-events-none': disabled }, computedSize.thumb]"
       :style="{ left: `${endPercentage}%` }"
       @pointerdown.prevent.stop="startDragging($event, 'end')"
     />
@@ -214,7 +222,7 @@ onBeforeUnmount(() => {
 
 <style>
 .pxd-slider--thumb {
-  box-shadow: 0 0 0 1px var(--gray-alpha-500), 0 1px 2px var(--gray-alpha-100);
+  box-shadow: 0 0 0 1px var(--color-gray-alpha-500), 0 1px 2px var(--color-gray-alpha-100);
 }
 
 .pxd-slider--thumb::after {

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

@@ -4,19 +4,20 @@ interface Props {
     max?: number;
     step?: number;
     range?: boolean;
+    disabled?: boolean;
     size?: ComponentSize;
     variant?: ComponentVariant | 'secondary';
-    modelValue?: number | [number, number];
+    modelValue?: number | [number, number] | null;
 }
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: number | [number, number]) => any;
+    "update:modelValue": (args_0: NonNullable<number | [number, number]>) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: (args_0: number | [number, number]) => any;
+    "onUpdate:modelValue"?: (args_0: NonNullable<number | [number, number]>) => any;
 }>, {
     variant: ComponentVariant | "secondary";
     max: number;
     min: number;
     step: number;
-    modelValue: number | [number, number];
+    modelValue: number | [number, number] | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;