pxd 0.0.55 → 0.0.61

package/dist/components/number-input/types.d.ts

@@ -5,6 +5,8 @@ export interface NumberInputProps {
   readonly?: boolean
   disabled?: boolean
   precision?: number
+  thousands?: boolean
+  thousandsSeparator?: string
   scientific?: boolean
   clearValue?: number | null
   modelValue?: number | null

package/dist/components/overlay/index.vue

@@ -23,7 +23,7 @@ const props = defineProps({
   appendToBody: { type: Boolean, required: false, default: true },
   closeOnPressEscape: { type: Boolean, required: false, default: true },
   closeOnClickOverlay: { type: Boolean, required: false },
-  shownElement: { type: null, required: false }
+  shownElement: { type: [String, Object], required: false }
 });
 const emits = defineEmits(["click", "escape", "update:modelValue"]);
 const { lockScroll, unlockScroll } = useLockScroll();

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

@@ -6,7 +6,7 @@ export interface OverlayProps {
   appendToBody?: boolean
   closeOnPressEscape?: boolean
   closeOnClickOverlay?: boolean
-  shownElement?: string | HTMLElement
+  shownElement?: string | object
 }
 
 export interface OverlayEmits {

package/dist/components/pagination/index.vue

@@ -1,8 +1,9 @@
 <script setup>
 import ChevronRightIcon from "@gdsicon/vue/chevron-right";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 defineOptions({
-  name: "PPagination"
+  name: "PPagination",
+  inheritAttrs: false
 });
 defineProps({
   prev: { type: Object, required: false },
@@ -15,6 +16,7 @@ const configProvider = useConfigProvider();
   <nav
     aria-label="pagination"
     class="pxd-pagination relative flex w-full flex-wrap items-start justify-between"
+    v-bind="$attrs"
   >
     <RouterLink
       v-if="prev"
@@ -41,7 +43,7 @@ const configProvider = useConfigProvider();
     <RouterLink
       v-if="next"
       :to="next.href"
-      class="pxd-pagination--next min-h-13 group py-1 pl-2 pr-6 rounded-md no-underline! self-focus-ring outline-none"
+      class="pxd-pagination--next min-h-13 group py-1 pl-2 pr-6 rounded-md text-right no-underline! self-focus-ring outline-none"
     >
       <span
         secondary

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

@@ -1,5 +1,10 @@
 import type { PinInputProps } from './types';
-declare const __VLS_export: import("vue").DefineComponent<PinInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare function focus(): void;
+declare function blur(): void;
+declare const __VLS_export: import("vue").DefineComponent<PinInputProps, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: string) => any;
     "update:modelValue": (args_0: string) => any;
 }, string, import("vue").PublicProps, Readonly<PinInputProps> & Readonly<{

package/dist/components/pin-input/index.vue

@@ -1,11 +1,12 @@
 <script setup>
-import { computed, ref, shallowRef } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { tv } from "tailwind-variants";
+import { computed, shallowRef, watch } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { isTruthyProp } from "../../utils/format";
-import { pinInputVariant } from "./cn";
 defineOptions({
   name: "PPinInput",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -17,32 +18,45 @@ const props = defineProps({
   length: { type: Number, required: false, default: 4 },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  required: { type: Boolean, required: false },
   modelValue: { type: String, required: false, default: "" },
   placeholder: { type: String, required: false, default: "\u25CB" },
-  inputMode: { type: null, required: false },
   type: { type: String, required: false, default: "numeric" }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
+const pinInputVariant = tv({
+  base: "pxd-input--border rounded-md motion-safe:transition-all",
+  variants: {
+    size: {
+      xs: "w-6 text-xs",
+      sm: "w-7.5 text-sm",
+      md: "w-9 text-sm",
+      lg: "w-10 text-base"
+    },
+    error: {
+      true: "is-error",
+      false: ""
+    },
+    disabled: {
+      true: "is-disabled",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    error: false,
+    disabled: false
+  }
+});
 const configProvider = useConfigProvider();
 const inputsRef = shallowRef([]);
 const modelValue = useModelValue(props, emits);
-const modelValueLocal = ref(
-  (() => {
-    if (typeof props.modelValue === "string") {
-      return props.modelValue.split("");
-    } else if (Array.isArray(props.modelValue)) {
-      return props.modelValue;
-    }
-    return Array.from({ length: props.length }, () => "");
-  })()
-);
+let localValue = modelValue.value;
 const computedInputType = computed(() => {
   const { type } = props;
   if (type.includes("password")) {
     return "password";
   } else if (type === "numeric") {
-    return "tel";
+    return "numeric";
   }
   return "text";
 });
@@ -56,14 +70,17 @@ const computedClasses = computed(() => {
     disabled: isTruthyProp(props.disabled)
   });
 });
+function replaceCharAt(str, index, char) {
+  return str.substring(0, index) + char + str.substring(index + 1);
+}
 function setInputValue(value, index) {
   if (index !== void 0) {
     inputsRef.value[index].value = value;
-    modelValueLocal.value[index] = value;
+    localValue = replaceCharAt(localValue, index, value);
   } else {
-    modelValueLocal.value = value.split("");
+    localValue = value;
   }
-  modelValue.value = modelValueLocal.value.join("");
+  modelValue.value = localValue;
 }
 function focusInputField(dir, index) {
   let correctIndex = -1;
@@ -82,9 +99,9 @@ function focusInputField(dir, index) {
   inputsRef.value[correctIndex].select();
 }
 function getFirstEmptyIndex() {
-  const length = modelValueLocal.value.length;
+  const length = localValue.length;
   if (length === props.length) {
-    return modelValueLocal.value.findIndex((value) => !value);
+    return localValue.split("").findIndex((value) => !value);
   }
   return length;
 }
@@ -180,10 +197,30 @@ function onInputPastedValue(ev) {
     setInputValue(slicedText);
   }
 }
+function focus() {
+  focusInputField("first");
+}
+function blur() {
+  inputsRef.value.forEach((input) => input.blur());
+}
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue === localValue) {
+      return;
+    }
+    localValue = newValue;
+  }
+);
+defineExpose({
+  focus,
+  blur
+});
 </script>
 
 <template>
   <label
+    v-bind="$attrs"
     class="pxd-pin-input gap-1.5 flex size-max items-center"
     @keydown="onContainerKeydown"
     @compositionend="onCompositionEnd"
@@ -193,11 +230,12 @@ function onInputPastedValue(ev) {
     <div v-for="(n, i) of length" :key="n" :class="computedClasses">
       <input
         ref="inputsRef"
-        :value="modelValueLocal[i]"
+        :value="modelValue[i]"
         :aria-label="`pin code ${n} of ${length}`"
         :type="computedInputType"
         :data-index="i"
         class="aspect-square size-full appearance-none rounded-inherit border-none bg-transparent text-center font-inherit outline-none placeholder:text-gray-600 placeholder:select-none focus:placeholder:opacity-0 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 disabled:placeholder:text-gray-400 motion-safe:transition-all"
+        name="pin-input"
         minlength="1"
         maxlength="1"
         autocorrect="off"
@@ -205,7 +243,6 @@ function onInputPastedValue(ev) {
         autocapitalize="off"
         :readonly="readonly"
         :disabled="disabled"
-        :required="required"
         :placeholder="placeholder"
         :inputmode="computedInputMode"
         @paste="onInputPastedValue"

package/dist/components/pin-input/types.d.ts

@@ -1,5 +1,3 @@
-import type { HTMLAttributes } from 'vue'
-
 import type { ComponentSizeWithXs } from '../../types/shared'
 
 export interface PinInputProps {
@@ -8,10 +6,8 @@ export interface PinInputProps {
   length?: number
   readonly?: boolean
   disabled?: boolean
-  required?: boolean
   modelValue?: string
   placeholder?: string
-  inputMode?: HTMLAttributes['inputmode']
   type?:
     | 'numeric'
     | 'alphabetic'

package/dist/components/placeholder/index.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { invert } from "es-toolkit";
 import { computed } from "vue";
 import { getCssUnitValue } from "../../utils/format";
 defineOptions({
@@ -36,16 +37,18 @@ const computedStyle = computed(() => {
   }
 
   --placeholder-deg: -45deg;
-  background: linear-gradient(
-      var(--placeholder-deg),
-      var(--placeholder-color) 12.5%,
-      #0000 12.5%,
-      #0000 50%,
-      var(--placeholder-color) 50%,
-      var(--placeholder-color) 62.5%,
-      #0000 62.5%,
-      #0000 100%
-    )
-    0 0 / var(--placeholder-gap, 12px) var(--placeholder-gap, 12px) padding-box fixed;
+  background-image: linear-gradient(
+    var(--placeholder-deg),
+    var(--placeholder-color) 12.5%,
+    #0000 12.5%,
+    #0000 50%,
+    var(--placeholder-color) 50%,
+    var(--placeholder-color) 62.5%,
+    #0000 62.5%,
+    #0000 100%
+  );
+  background-clip: padding-box;
+  background-position: 0 0;
+  background-size: var(--placeholder-gap, 12px) var(--placeholder-gap, 12px);
 }
 </style>

package/dist/components/popover/index.vue

@@ -1,14 +1,13 @@
 <script setup>
-import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
-import { computed, shallowRef, watch } from "vue";
-import { useIntersectionObserver } from "../../composables/use-browser-observer";
+import { arrow, autoUpdate, computePosition, flip, shift, hide } from "@floating-ui/dom";
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
 import { useDelayDestroy } from "../../composables/use-delay-destroy";
 import { useLockScroll } from "../../composables/use-lock-scroll";
 import { useOutsideClick } from "../../composables/use-outside-click";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { debounce } from "../../utils/debounce";
 import { cachedOff, cachedOn, sleep } from "../../utils/event";
 import { getCssUnitValue, toArray } from "../../utils/format";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
 import PTeleport from "../teleport/index.vue";
 defineOptions({
   name: "PPopover",
@@ -30,7 +29,7 @@ const props = defineProps({
   autoPosition: { type: Boolean, required: false, default: true },
   wrapperClass: { type: [String, Array, Object], required: false },
   contentClass: { type: [String, Array, Object], required: false },
-  contentStyle: { type: null, required: false },
+  contentStyle: { type: [Object, String], required: false },
   unsetPosition: { type: Boolean, required: false, default: false },
   transitionType: { type: String, required: false, default: "fade-scale" },
   toggleOnTrigger: { type: Boolean, required: false, default: true },
@@ -39,8 +38,10 @@ const props = defineProps({
   lockScrollOnVisible: { type: Boolean, required: false }
 });
 const emits = defineEmits(["show", "hide", "escape", "outside-click", "trigger-click", "visible-change"]);
+let isLockedScroll = false;
 let showPopoverTimer;
 let hidePopoverTimer;
+let cleanupAutoUpdate = null;
 const allowedMethods = ["click", "manual", "contextmenu"];
 const arrayRef = shallowRef(null);
 const triggerRef = shallowRef(null);
@@ -49,6 +50,7 @@ const localPosition = shallowRef(props.position);
 const triggerMethods = computed(() => toArray(props.trigger));
 const wrapperStyle = computed(() => ({
   "z-index": props.zIndex,
+  "--popover-offset": props.offset,
   "--popover-arrow-bg": props.arrowColor,
   "--popover-max-width": getCssUnitValue(props.maxWidth)
 }));
@@ -68,11 +70,13 @@ const {
     emits("visible-change", v);
     if (v) {
       if (props.lockScrollOnVisible) {
+        isLockedScroll = true;
         lockScroll();
       }
       emits("show");
     } else {
-      if (props.lockScrollOnVisible) {
+      if (isLockedScroll) {
+        isLockedScroll = false;
         unlockScroll();
       }
       emits("hide");
@@ -99,11 +103,44 @@ useOutsideClick(wrapperRef, {
     { edges: ["leading"] }
   )
 });
-useIntersectionObserver(triggerRef, ([entry]) => {
-  if (props.closeOnInvisible && isVisible.value && entry.intersectionRatio === 0) {
+function disposeAutoUpdate() {
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+    cleanupAutoUpdate = null;
+  }
+}
+async function updatePosition() {
+  const { x, y, placement, middlewareData } = await computePosition(
+    triggerRef.value,
+    wrapperRef.value,
+    {
+      placement: props.position,
+      middleware: [
+        shift(),
+        props.autoPosition && flip(),
+        props.showArrow && arrow({ element: arrayRef.value }),
+        props.closeOnInvisible && hide({ strategy: "referenceHidden" }),
+        props.closeOnInvisible && hide({ strategy: "escaped" })
+      ]
+    }
+  );
+  localPosition.value = placement;
+  if (middlewareData.hide?.referenceHidden || middlewareData.hide?.escaped) {
     handlePopoverHide(true);
+    return;
   }
-});
+  Object.assign(wrapperRef.value.style, {
+    left: `${x}px`,
+    top: `${y}px`
+  });
+  if (middlewareData.arrow) {
+    const { x: arrowX, y: arrowY } = middlewareData.arrow;
+    Object.assign(arrayRef.value.style, {
+      left: arrowX != null ? `${Math.max(arrowX, 5)}px` : "",
+      top: arrowY != null ? `${Math.max(arrowY, 5)}px` : ""
+    });
+  }
+}
 async function handlePopoverShow() {
   if (showPopoverTimer || props.disabled) {
     return;
@@ -126,30 +163,11 @@ async function handlePopoverShow() {
     Object.assign(wrapperRef.value.style, { left: "0", top: "0" });
     return;
   }
-  const { x, y, placement, middlewareData } = await computePosition(
-    triggerRef.value,
-    wrapperRef.value,
-    {
-      placement: localPosition.value,
-      middleware: [
-        shift(),
-        offset(props.offset),
-        props.autoPosition && flip(),
-        props.showArrow && arrow({ element: arrayRef.value })
-      ]
-    }
-  );
-  localPosition.value = placement;
-  Object.assign(wrapperRef.value.style, {
-    left: `${x}px`,
-    top: `${y}px`
-  });
-  if (middlewareData.arrow) {
-    const { x: x2, y: y2 } = middlewareData.arrow;
-    Object.assign(arrayRef.value.style, {
-      left: x2 != null ? `${Math.max(x2, 5)}px` : "",
-      top: y2 != null ? `${Math.max(y2, 5)}px` : ""
-    });
+  disposeAutoUpdate();
+  if (props.autoPosition) {
+    cleanupAutoUpdate = autoUpdate(triggerRef.value, wrapperRef.value, updatePosition);
+  } else {
+    await updatePosition();
   }
 }
 async function handlePopoverHide(immediate = false) {
@@ -169,6 +187,7 @@ async function handlePopoverHide(immediate = false) {
       immediate ? 0 : props.hideDelay
     );
   });
+  disposeAutoUpdate();
   await hidePopover();
   if (props.closeOnPressEscape) {
     cachedOff(document, "keydown", onPopoverKeystroke);
@@ -264,6 +283,13 @@ watch(
     }
   }
 );
+onBeforeUnmount(() => {
+  if (isLockedScroll) {
+    isLockedScroll = false;
+    unlockScroll();
+  }
+  disposeAutoUpdate();
+});
 defineExpose({
   show: handlePopoverShow,
   hide: handlePopoverHide
@@ -273,7 +299,9 @@ defineExpose({
 <template>
   <div
     ref="triggerRef"
-    class="pxd-popover inline-flex max-w-full active:select-none"
+    class="pxd-popover inline-flex max-w-full active:select-none data-[disabled=true]:pointer-events-none data-[visible=true]:pointer-events-auto"
+    :data-visible="isVisible"
+    :data-disabled="disabled"
     v-bind="$attrs"
     @click="onTriggerClick"
     @focusin="onTriggerFocusin"
@@ -292,19 +320,28 @@ defineExpose({
         :class="wrapperClass"
         :style="wrapperStyle"
         :data-visible="isVisible"
+        :data-position="localPosition"
         :data-interactive="interactive"
-        class="pxd-popover--wrapper sm:max-w-(--popover-max-width) absolute isolate z-10 flex max-w-full outline-none data-[interactive=false]:pointer-events-none data-[visible=false]:pointer-events-none motion-reduce:data-[visible=false]:hidden"
+        :data-unset-position="unsetPosition"
+        class="pxd-popover--wrapper sm:max-w-(--popover-max-width) absolute isolate z-10 flex max-h-full max-w-full outline-none data-[interactive=false]:pointer-events-none data-[visible=false]:pointer-events-none motion-reduce:data-[visible=false]:hidden"
         @pointerenter="onContentPointerEnter"
         @pointerleave="onContentPointerLeave"
       >
         <div
-          class="pxd-popover--container pointer-events-auto relative z-1 w-inherit transform-gpu default-animation-duration default-animation-timing-function"
-          :data-position="localPosition"
+          class="pxd-popover--container pointer-events-auto relative z-1 max-h-[80dvh] max-h-[80vh] w-inherit transform-gpu default-animation-duration default-animation-timing-function"
           :data-transition-type="transitionType"
           :data-show-transition="configProvider.popoverShowTransition"
         >
-          <i v-if="showArrow" ref="arrayRef" class="pxd-popover--arrow absolute z-1 border-solid" />
-          <div class="pxd-popover--content" :class="contentClass" :style="contentStyle">
+          <i
+            v-if="showArrow"
+            ref="arrayRef"
+            class="pxd-popover--arrow absolute z-1 rotate-45 border-5 border-(--popover-arrow-bg)"
+          />
+          <div
+            class="pxd-popover--content h-full max-h-inherit overflow-auto"
+            :class="contentClass"
+            :style="contentStyle"
+          >
             <slot name="content" />
           </div>
         </div>
@@ -389,6 +426,7 @@ defineExpose({
 }
 
 .pxd-popover--container {
+  --popover-padding: calc(var(--popover-offset, 8) * 1px);
   animation-name: popover-fade-show;
   animation-fill-mode: forwards;
 
@@ -424,84 +462,84 @@ defineExpose({
     animation-name: popover-fade-slide-hide;
   }
 
-  &[data-position='top'] {
-    transform-origin: bottom center;
+  [data-position='top'] & {
+    transform-origin: 50% 100%;
   }
 
-  &[data-position='top-start'] {
-    transform-origin: bottom left;
+  [data-position='top-start'] & {
+    transform-origin: 0% 100%;
   }
 
-  &[data-position='top-end'] {
-    transform-origin: bottom right;
+  [data-position='top-end'] & {
+    transform-origin: 100% 100%;
   }
 
-  &[data-position='bottom'] {
+  [data-position='bottom'] & {
     transform-origin: top center;
   }
 
-  &[data-position='bottom-start'] {
+  [data-position='bottom-start'] & {
     transform-origin: top left;
   }
 
-  &[data-position='bottom-end'] {
+  [data-position='bottom-end'] & {
     transform-origin: top right;
   }
 
-  &[data-position='left'] {
+  [data-position='left'] & {
     transform-origin: right center;
   }
 
-  &[data-position='left-start'] {
+  [data-position='left-start'] & {
     transform-origin: right top;
   }
 
-  &[data-position='left-end'] {
+  [data-position='left-end'] & {
     transform-origin: right bottom;
   }
 
-  &[data-position='right'] {
+  [data-position='right'] & {
     transform-origin: left center;
   }
 
-  &[data-position='right-start'] {
+  [data-position='right-start'] & {
     transform-origin: left top;
   }
 
-  &[data-position='right-end'] {
+  [data-position='right-end'] & {
     transform-origin: left bottom;
   }
 
-  &[data-position='top'] .pxd-popover--arrow,
-  &[data-position='top-start'] .pxd-popover--arrow,
-  &[data-position='top-end'] .pxd-popover--arrow {
-    bottom: -5px;
-    border-width: 6px 6px 0;
-    border-color: var(--popover-arrow-bg) transparent transparent;
+  [data-position^='top'][data-unset-position='false'] & {
+    padding-bottom: var(--popover-padding);
   }
 
-  &[data-position='bottom'] .pxd-popover--arrow,
-  &[data-position='bottom-start'] .pxd-popover--arrow,
-  &[data-position='bottom-end'] .pxd-popover--arrow {
-    top: -5px;
-    border-width: 0 6px 6px;
-    border-color: transparent transparent var(--popover-arrow-bg);
+  [data-position^='bottom'][data-unset-position='false'] & {
+    padding-top: var(--popover-padding);
   }
 
-  &[data-position='left'] .pxd-popover--arrow,
-  &[data-position='left-start'] .pxd-popover--arrow,
-  &[data-position='left-end'] .pxd-popover--arrow {
-    right: -5px;
-    border-width: 6px 0 6px 6px;
-    border-color: transparent transparent transparent var(--popover-arrow-bg);
+  [data-position^='left'][data-unset-position='false'] & {
+    padding-right: var(--popover-padding);
   }
 
-  &[data-position='right'] .pxd-popover--arrow,
-  &[data-position='right-start'] .pxd-popover--arrow,
-  &[data-position='right-end'] .pxd-popover--arrow {
-    left: -5px;
-    border-width: 6px 6px 6px 0;
-    border-color: transparent var(--popover-arrow-bg) transparent transparent;
+  [data-position^='right'][data-unset-position='false'] & {
+    padding-left: var(--popover-padding);
   }
 }
+
+.pxd-popover--wrapper[data-position^='top'] .pxd-popover--arrow {
+  bottom: 4px;
+}
+
+.pxd-popover--wrapper[data-position^='bottom'] .pxd-popover--arrow {
+  top: 4px;
+}
+
+.pxd-popover--wrapper[data-position^='left'] .pxd-popover--arrow {
+  right: 4px;
+}
+
+.pxd-popover--wrapper[data-position^='right'] .pxd-popover--arrow {
+  left: 4px;
+}
 </style>

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

@@ -1,4 +1,5 @@
 import type { ComponentClass, ComponentPosition } from '../../types/shared'
+import type { CSSProperties } from 'vue'
 
 export type PopoverTrigger = 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual'
 

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

@@ -11,8 +11,8 @@ declare const __VLS_base: import("vue").DefineComponent<ProgressProps, {}, {}, {
     "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
 }>, {
     label: boolean | string | number;
-    variant: import("../../types/shared").ComponentVariant | "secondary";
     max: number;
+    variant: import("../../types/shared").ComponentVariant | "secondary";
     min: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/progress/index.vue

@@ -1,10 +1,10 @@
 <script setup>
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useModelValue } from "../../composables/use-model-value";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { isTruthyProp } from "../../utils/format";
 import { getColorByThreshold } from "../../utils/get";
-import { progressVariant } from "./cn";
 defineOptions({
   name: "PProgress",
   inheritAttrs: false,
@@ -23,6 +23,19 @@ const props = defineProps({
   modelValue: { type: [Number, null], required: false }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
+const progressVariant = tv({
+  base: "pxd-progress-bar flex-1 shrink-0 overflow-hidden rounded-full bg-gray-200",
+  variants: {
+    size: {
+      sm: "h-2",
+      md: "h-2.5",
+      lg: "h-3.5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 const configProvider = useConfigProvider();
 const VARIANTS_COLORS = {
   primary: "var(--color-primary)",