pxd 0.0.44 → 0.0.46

package/dist/components/time-picker/index.vue

@@ -1,9 +1,8 @@
 <script setup>
 import CalendarIcon from "@gdsicon/vue/calendar";
-import { computed, ref, shallowRef, watch } from "vue";
+import { computed, shallowRef, watch } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { dayjs } from "../../utils/date";
-import { sleep } from "../../utils/event";
 import { clampValue } from "../../utils/format";
 import PInput from "../input/index.vue";
 import PPopover from "../popover/index.vue";
@@ -16,31 +15,34 @@ defineOptions({
   }
 });
 const props = defineProps({
+  size: { type: String, required: false },
+  error: { type: [Boolean, String], required: false },
   allowClear: { type: Boolean, required: false },
   presets: { type: Array, required: false, default: () => [] },
   disabled: { type: Boolean, required: false },
   modelValue: { type: [Date, String, Number], required: false, default: "" },
   prefixIcon: { type: Boolean, required: false, default: true },
   placeholder: { type: String, required: false },
-  closeOnPressEscape: { type: Boolean, required: false, default: true }
+  closeOnPressEscape: { type: Boolean, required: false, default: true },
+  formatter: { type: String, required: false, default: "HH:mm:ss" },
+  valueFormatter: { type: String, required: false, default: "HH:mm:ss" }
 });
 const emits = defineEmits(["change", "select", "update:modelValue"]);
 const HEIGHT = 32;
 const VALUE_POSITION_MAP = {
-  hours: 0,
-  minutes: 1,
-  seconds: 2
+  hour: 0,
+  minute: 1,
+  second: 2
 };
 const config = useConfigProvider();
-const inputRef = shallowRef();
 const timeHoursRef = shallowRef();
 const timeMinutesRef = shallowRef();
 const timeSecondsRef = shallowRef();
 const popoverVisible = shallowRef(false);
-const modelValueList = ref([]);
+const dayjsDateTime = shallowRef(null);
 const modelValue = computed({
   get() {
-    return modelValueList.value.join(":");
+    return dayjsDateTime.value ? dayjsDateTime.value.format(props.formatter) : "";
   },
   set(value) {
     emits("update:modelValue", value);
@@ -52,14 +54,14 @@ function onTimeListScroll(ev) {
   const value = Math.round(target.scrollTop / HEIGHT);
   const type = target.dataset.type;
   const index = VALUE_POSITION_MAP[type];
-  const clampedValue = clampValue(value, 0, type === "hours" ? 23 : 59);
+  const clampedValue = clampValue(value, 0, type === "hour" ? 23 : 59);
   clearTimeout(scrollTimers[index]);
   scrollTimers[index] = setTimeout(() => {
     target.scrollTo({
       top: clampedValue * HEIGHT,
       behavior: "smooth"
     });
-    modelValueList.value[index] = padStringZero(clampedValue);
+    dayjsDateTime.value = dayjsDateTime.value ? dayjsDateTime.value.set(type, clampedValue) : null;
   }, 100);
 }
 function padStringZero(value) {
@@ -68,26 +70,15 @@ function padStringZero(value) {
 function onVisibleChange(visible) {
   popoverVisible.value = visible;
 }
-function showPopover() {
-  onVisibleChange(true);
-  setTimesScrollTop();
-}
 function hidePopover() {
   onVisibleChange(false);
 }
-function parseTimeValue(value, max) {
-  const numberValue = value ? Number.parseInt(value.slice(0, 2)) : 0;
-  if (!numberValue) {
-    return "00";
-  }
-  return clampValue(numberValue, 0, max).toString();
-}
 function updateValueList(value) {
-  modelValueList.value = getFormattedValue(value).split(":");
+  dayjsDateTime.value = getFormattedValue(value);
 }
 function getFormattedValue(value) {
   if (value == null || value === "") {
-    return "";
+    return dayjs();
   }
   let _value;
   if (typeof value === "string") {
@@ -98,13 +89,16 @@ function getFormattedValue(value) {
   } else {
     _value = new Date(value);
   }
-  return dayjs(_value).format("HH:mm:ss");
+  return dayjs(_value);
 }
 async function setTimesScrollTop() {
-  await sleep(10);
+  if (!dayjsDateTime.value) {
+    return;
+  }
   const elList = [timeHoursRef.value, timeMinutesRef.value, timeSecondsRef.value];
+  const modelValueList = [dayjsDateTime.value.hour(), dayjsDateTime.value.minute(), dayjsDateTime.value.second()];
   elList.forEach((el, i) => {
-    const scrollTop = Number(modelValueList.value[i] || 0) * HEIGHT;
+    const scrollTop = modelValueList[i] * HEIGHT;
     el?.scrollTo({ top: scrollTop });
   });
 }
@@ -133,35 +127,27 @@ function onCancelClick() {
   hidePopover();
 }
 function onConfirmClick() {
-  updateValueList(modelValueList.value.join(":"));
-  modelValue.value = modelValueList.value.join(":");
-  hidePopover();
+  modelValue.value = dayjsDateTime.value ? dayjsDateTime.value.format(props.valueFormatter) : "";
 }
-function onNowBtnClick(date) {
-  const newValue = getFormattedValue(date ?? /* @__PURE__ */ new Date());
-  modelValue.value = newValue;
-  modelValueList.value = newValue.split(":");
+function onPresetTimeClick(date) {
+  onInputValueChange(date ?? /* @__PURE__ */ new Date());
   hidePopover();
 }
 function onInputValueChange(value) {
   if (!value) {
     modelValue.value = "";
-    modelValueList.value = [];
+    dayjsDateTime.value = null;
     return;
   }
-  const [h, m, s] = value.split(":");
-  const hh = parseTimeValue(h, 23);
-  const mm = parseTimeValue(m, 59);
-  const ss = parseTimeValue(s, 59);
-  modelValue.value = getFormattedValue(`${hh}:${mm}:${ss}`);
-  modelValueList.value = [padStringZero(hh), padStringZero(mm), padStringZero(ss)];
+  dayjsDateTime.value = getFormattedValue(value);
+  modelValue.value = dayjsDateTime.value.format(props.valueFormatter);
 }
 function onUpdateModelValue(value) {
   if (value) {
     return;
   }
   modelValue.value = "";
-  modelValueList.value = [];
+  dayjsDateTime.value = null;
 }
 function onPresetClick(ev) {
   const target = ev.target;
@@ -176,7 +162,7 @@ function onPresetClick(ev) {
   if (!presetValue) {
     return;
   }
-  onNowBtnClick(presetValue);
+  onPresetTimeClick(presetValue);
 }
 watch(() => props.modelValue, updateValueList, { immediate: true });
 </script>
@@ -184,89 +170,86 @@ watch(() => props.modelValue, updateValueList, { immediate: true });
 <template>
   <PPopover
     enterable
-    close-on-scroll
-    trigger="manual"
+    trigger="click"
     :show-delay="0"
-    :hide-delay="100"
+    :hide-delay="0"
     :disabled="disabled"
     :class="$attrs.class"
     :style="$attrs.style"
-    :show-transition="false"
     :visible="popoverVisible"
     :close-on-press-escape="closeOnPressEscape"
+    content-class="bg-background-100 shadow-border-menu rounded-xl"
     class="pxd-time-picker w-full"
     @escape="onCancelClick"
-    @trigger-click="showPopover"
+    @show="setTimesScrollTop"
     @outside-click="onConfirmClick"
     @visible-change="onVisibleChange"
   >
     <PInput
-      ref="inputRef"
+      :size="size"
+      :error="error"
       :disabled="disabled"
       :allow-clear="allowClear"
       :model-value="modelValue"
       :placeholder="placeholder"
       :prefix-style="false"
       v-bind="$attrs"
-      @click.stop="showPopover"
       @change="onInputValueChange"
       @keydown.enter="onConfirmClick"
       @update:model-value="onUpdateModelValue"
     >
       <template v-if="prefixIcon" #prefix>
-        <CalendarIcon class="ml-3 pointer-events-none" />
+        <CalendarIcon class="pointer-events-none" />
       </template>
     </PInput>
 
     <template #content>
-      <div class="rounded-xl bg-background-100 shadow-border-menu">
-        <div class="text-sm flex max-w-full transform-gpu tabular-nums outline-none select-none" @click.stop="onTimeListClick">
-          <div class="p-2 gap-1 relative flex items-center">
-            <div class="pxd-time-picker--list relative">
-              <ul ref="timeHoursRef" data-type="hours" class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none" @scroll.stop="onTimeListScroll">
-                <li v-for="_, i of 24" :key="i" class="h-8 leading-8 cursor-pointer">
-                  {{ padStringZero(i) }}
-                </li>
-              </ul>
-            </div>
-            <div class="pxd-time-picker--list relative">
-              <ul ref="timeMinutesRef" data-type="minutes" class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none" @scroll.stop="onTimeListScroll">
-                <li v-for="_, i of 60" :key="i" class="h-8 leading-8 cursor-pointer">
-                  {{ padStringZero(i) }}
-                </li>
-              </ul>
-            </div>
-            <div class="pxd-time-picker--list relative">
-              <ul ref="timeSecondsRef" data-type="seconds" class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none" @scroll.stop="onTimeListScroll">
-                <li v-for="_, i of 60" :key="i" class="h-8 leading-8 cursor-pointer">
-                  {{ padStringZero(i) }}
-                </li>
-              </ul>
-            </div>
+      <div class="text-sm flex max-w-full transform-gpu tabular-nums outline-none select-none" @click.stop="onTimeListClick">
+        <div class="p-2 gap-1 relative flex items-center">
+          <div class="pxd-time-picker--list relative">
+            <ul ref="timeHoursRef" data-type="hour" class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none" @scroll.stop="onTimeListScroll">
+              <li v-for="_, i of 24" :key="i" class="h-8 leading-8 cursor-pointer">
+                {{ padStringZero(i) }}
+              </li>
+            </ul>
           </div>
-
-          <div v-if="presets?.length" class="w-26 p-2 h-44 gap-1 scrollbar-hidden flex flex-wrap content-start overflow-auto border-l outline-none" @click="onPresetClick">
-            <button
-              v-for="preset, i in presets"
-              :key="preset.label"
-              :data-index="i"
-              class="h-5 px-1.5 cursor-pointer appearance-none rounded-sm bg-gray-300 text-13px whitespace-nowrap text-foreground self-focus-ring outline-none motion-safe:transition-all"
-            >
-              {{ preset.label }}
-            </button>
+          <div class="pxd-time-picker--list relative">
+            <ul ref="timeMinutesRef" data-type="minute" class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none" @scroll.stop="onTimeListScroll">
+              <li v-for="_, i of 60" :key="i" class="h-8 leading-8 cursor-pointer">
+                {{ padStringZero(i) }}
+              </li>
+            </ul>
+          </div>
+          <div class="pxd-time-picker--list relative">
+            <ul ref="timeSecondsRef" data-type="second" class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none" @scroll.stop="onTimeListScroll">
+              <li v-for="_, i of 60" :key="i" class="h-8 leading-8 cursor-pointer">
+                {{ padStringZero(i) }}
+              </li>
+            </ul>
           </div>
         </div>
 
-        <div class="p-2 gap-1 flex items-center justify-between border-t" @click.stop>
-          <PButton size="xs" variant="ghost" class="!px-0 text-13px" @click="onNowBtnClick()">
-            {{ config.locale.date.now }}
-          </PButton>
-
-          <PButton size="xs" variant="ghost" class="!px-0 text-13px" @click="onCancelClick">
-            {{ config.locale.confirm.cancel }}
-          </PButton>
+        <div v-if="presets?.length" class="w-26 p-2 h-44 gap-1 scrollbar-hidden flex flex-wrap content-start overflow-auto border-l outline-none" @click="onPresetClick">
+          <button
+            v-for="preset, i in presets"
+            :key="preset.label"
+            :data-index="i"
+            class="h-5 px-1.5 cursor-pointer appearance-none rounded-sm bg-gray-300 text-13px whitespace-nowrap text-foreground self-focus-ring outline-none motion-safe:transition-all"
+          >
+            {{ preset.label }}
+          </button>
         </div>
       </div>
+
+      <div class="p-2 gap-1 flex items-center justify-between border-t" @click.stop>
+        <PButton size="xs" variant="ghost" class="px-0! text-13px" @click="onPresetTimeClick()">
+          {{ config.locale.date.now }}
+        </PButton>
+
+        <PButton size="xs" variant="ghost" class="px-0! text-13px" @click="onCancelClick">
+          {{ config.locale.confirm.cancel }}
+        </PButton>
+      </div>
     </template>
   </PPopover>
 </template>

package/dist/components/time-picker/index.vue.d.ts

@@ -1,5 +1,8 @@
 import type { DateTimePreset } from '../../types/components/time-picker';
+import type { ComponentSize } from '../../types/shared/props';
 interface Props {
+    size?: ComponentSize;
+    error?: boolean | string;
     allowClear?: boolean;
     presets?: DateTimePreset[];
     disabled?: boolean;
@@ -7,20 +10,24 @@ interface Props {
     prefixIcon?: boolean;
     placeholder?: string;
     closeOnPressEscape?: boolean;
+    formatter?: string;
+    valueFormatter?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: MouseEvent) => any;
-    "update:modelValue": (args_0: string) => any;
     change: (args_0: boolean) => any;
+    "update:modelValue": (args_0: string) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onSelect?: ((args_0: MouseEvent) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
     onChange?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
 }>, {
     modelValue: Date | string | number;
     closeOnPressEscape: boolean;
+    formatter: string;
     presets: DateTimePreset[];
     prefixIcon: boolean;
+    valueFormatter: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,8 +1,7 @@
-import type { ComponentBeforeChange, ComponentLabel, ComponentSize } from '../../types/shared';
+import type { ComponentBeforeChange, ComponentSize } from '../../types/shared';
 type ValueType = boolean | number | string;
 interface Props {
     size?: ComponentSize;
-    label?: ComponentLabel;
     loading?: boolean;
     disabled?: boolean;
     modelValue?: ValueType;
@@ -14,20 +13,18 @@ interface Props {
     activeLabel?: string;
     inactiveLabel?: string;
 }
-declare var __VLS_1: {}, __VLS_13: {}, __VLS_15: {};
+declare var __VLS_12: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
+    checked?: (props: typeof __VLS_12) => any;
 } & {
-    checked?: (props: typeof __VLS_13) => any;
-} & {
-    unchecked?: (props: typeof __VLS_15) => any;
+    unchecked?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: NonNullable<ValueType | undefined>) => any;
     change: (args_0: NonNullable<ValueType | undefined>) => any;
+    "update:modelValue": (args_0: NonNullable<ValueType | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: ((args_0: NonNullable<ValueType | undefined>) => any) | undefined;
     onChange?: ((args_0: NonNullable<ValueType | undefined>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<ValueType | undefined>) => any) | undefined;
 }>, {
     activeValue: ValueType;
     inactiveValue: ValueType;

package/dist/components/toggle/index.vue

@@ -14,7 +14,6 @@ defineOptions({
 });
 const props = defineProps({
   size: { type: String, required: false },
-  label: { type: [String, Number, Array, null], required: false },
   loading: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   modelValue: { type: [Boolean, Number, String], required: false },
@@ -59,58 +58,50 @@ async function onCheckboxChange(e) {
 <template>
   <label
     role="switch"
-    class="pxd-toggle group/toggle inline-flex cursor-pointer touch-manipulation flex-col select-none"
+    :for="uniqueId"
+    class="pxd-toggle group/toggle inline-flex cursor-pointer touch-manipulation items-center select-none"
     :aria-label="modelValue ? activeLabel : inactiveLabel"
     :style="{
   '--ac': activeColor,
   '--ic': inactiveColor
 }"
-    :for="uniqueId"
   >
-    <div v-if="label || $slots.label" class="pxd-form--label">
-      <slot name="label">{{ label }}</slot>
-    </div>
-
-    <div class="flex items-center">
-      <input
-        :id="uniqueId"
-        type="checkbox"
-        :disabled="disabled || loading"
-        :checked="isChecked"
-        class="pxd-toggle--input peer smallest"
-        @change.prevent="onCheckboxChange"
-      >
+    <input
+      :id="uniqueId"
+      type="checkbox"
+      :disabled="disabled || loading"
+      :checked="isChecked"
+      class="pxd-toggle--input peer smallest"
+      @change.prevent="onCheckboxChange"
+    >
 
-      <span
-        v-if="inactiveLabel"
-        class="pxd-toggle--label text-sm mr-1.5 pl-0.5 opacity-100 peer-checked:opacity-50 motion-safe:transition-opacity"
-      >{{ inactiveLabel }}</span>
+    <span
+      v-if="inactiveLabel"
+      class="pxd-toggle--label text-sm mr-1.5 pl-0.5 opacity-100 peer-checked:opacity-50 motion-safe:transition-opacity"
+    >{{ inactiveLabel }}</span>
 
-      <div
-        class="pxd-toggle--handle rounded-full border border-input bg-(--ic) p-px peer-focus-ring [--tx:0] peer-checked:bg-(--ac) peer-checked:[--tx:100%] peer-disabled:cursor-not-allowed motion-safe:transition-all"
-        :class="computedSize"
-      >
-        <div class="pxd-toggle--handle-icon text-xs shadow-sm relative flex aspect-square h-full translate-x-(--tx) transform-gpu items-center justify-center overflow-hidden rounded-full bg-background-100 text-foreground-secondary motion-safe:transition-transform">
-          <div class="inset-0 absolute flex items-center justify-center">
-            <Transition name="pxd-transition--fade" mode="out-in">
-              <LoaderCircleIcon v-if="loading" class="motion-safe:animate-spin" />
-              <slot v-else-if="modelValue" name="checked" />
-              <slot v-else name="unchecked" />
-            </Transition>
-          </div>
+    <div
+      class="pxd-toggle--handle rounded-full border border-input bg-(--ic) p-px peer-focus-ring [--tx:0] peer-checked:bg-(--ac) peer-checked:[--tx:100%] peer-disabled:cursor-not-allowed motion-safe:transition-all"
+      :class="computedSize"
+    >
+      <div class="pxd-toggle--handle-icon text-xs shadow-sm relative flex aspect-square h-full translate-x-(--tx) transform-gpu items-center justify-center overflow-hidden rounded-full bg-background-100 text-foreground-secondary motion-safe:transition-transform">
+        <div class="inset-0 absolute flex items-center justify-center">
+          <Transition name="pxd-transition--fade" mode="out-in">
+            <LoaderCircleIcon v-if="loading" class="motion-safe:animate-spin" />
+            <slot v-else-if="modelValue" name="checked" />
+            <slot v-else name="unchecked" />
+          </Transition>
         </div>
       </div>
-
-      <span
-        v-if="activeLabel"
-        class="pxd-toggle--label text-sm ml-1.5 pr-0.5 opacity-50 peer-checked:opacity-100 motion-safe:transition-opacity"
-      >{{ activeLabel }}</span>
     </div>
+
+    <span
+      v-if="activeLabel"
+      class="pxd-toggle--label text-sm ml-1.5 pr-0.5 opacity-50 peer-checked:opacity-100 motion-safe:transition-opacity"
+    >{{ activeLabel }}</span>
   </label>
 </template>
 
-<style lang="postcss">
-.pxd-toggle--input:checked:disabled + .pxd-toggle--handle {
-  background-color: var(--color-gray-300)
-}
+<style>
+.pxd-toggle--input:checked:disabled+.pxd-toggle--handle{background-color:var(--color-gray-300)}
 </style>

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

@@ -1,8 +1,7 @@
-import type { ComponentBeforeChange, ComponentLabel, ComponentSize } from '../../types/shared';
+import type { ComponentBeforeChange, ComponentSize } from '../../types/shared';
 type ValueType = boolean | number | string;
 interface Props {
     size?: ComponentSize;
-    label?: ComponentLabel;
     loading?: boolean;
     disabled?: boolean;
     modelValue?: ValueType;
@@ -14,20 +13,18 @@ interface Props {
     activeLabel?: string;
     inactiveLabel?: string;
 }
-declare var __VLS_1: {}, __VLS_13: {}, __VLS_15: {};
+declare var __VLS_12: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
+    checked?: (props: typeof __VLS_12) => any;
 } & {
-    checked?: (props: typeof __VLS_13) => any;
-} & {
-    unchecked?: (props: typeof __VLS_15) => any;
+    unchecked?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: NonNullable<ValueType | undefined>) => any;
     change: (args_0: NonNullable<ValueType | undefined>) => any;
+    "update:modelValue": (args_0: NonNullable<ValueType | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: ((args_0: NonNullable<ValueType | undefined>) => any) | undefined;
     onChange?: ((args_0: NonNullable<ValueType | undefined>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<ValueType | undefined>) => any) | undefined;
 }>, {
     activeValue: ValueType;
     inactiveValue: ValueType;

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

@@ -11,11 +11,11 @@ interface Props {
     contentClass?: ComponentClass;
     contentStyle?: CSSProperties | string;
 }
-declare var __VLS_6: {}, __VLS_9: {};
+declare var __VLS_8: {}, __VLS_11: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_8) => any;
 } & {
-    content?: (props: typeof __VLS_9) => any;
+    content?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: ComponentVariant;

package/dist/components/tooltip/index.vue

@@ -42,7 +42,7 @@ const computedDisabled = computed(() => {
 });
 const mergedClasses = computed(() => {
   return [
-    "px-3 py-2 rounded-md text-13px break-words whitespace-pre-line shadow-border-tooltip bg-(--popover-bg)",
+    "px-3 py-2 rounded-md text-13px break-words whitespace-pre-line shadow-border-tooltip max-sm:px-1 bg-(--popover-bg)",
     computedVariant.value.text,
     props.contentClass
   ].join(" ");

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

@@ -11,11 +11,11 @@ interface Props {
     contentClass?: ComponentClass;
     contentStyle?: CSSProperties | string;
 }
-declare var __VLS_6: {}, __VLS_9: {};
+declare var __VLS_8: {}, __VLS_11: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_8) => any;
 } & {
-    content?: (props: typeof __VLS_9) => any;
+    content?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: ComponentVariant;

package/dist/composables/index.d.ts

@@ -8,6 +8,7 @@ export * from './use-delay-change.js';
 export * from './use-delay-destroy.js';
 export * from './use-focus-trap.js';
 export * from './use-loading-bar.js';
+export * from './use-lock-scroll.js';
 export * from './use-media-query.js';
 export * from './use-message.js';
 export * from './use-model-value.js';

package/dist/composables/index.js

@@ -8,6 +8,7 @@ export * from "./use-delay-change.js";
 export * from "./use-delay-destroy.js";
 export * from "./use-focus-trap.js";
 export * from "./use-loading-bar.js";
+export * from "./use-lock-scroll.js";
 export * from "./use-media-query.js";
 export * from "./use-message.js";
 export * from "./use-model-value.js";

package/dist/composables/use-focus-trap.d.ts

@@ -1,4 +1,12 @@
+import type { Options as FocusTrapOptions } from 'focus-trap';
 import type { MaybeElementRef } from '../types/shared/utils';
-export declare function useFocusTrap(container: MaybeElementRef<HTMLElement>): {
+/**
+ * Best-practice defaults for dialogs (Modal/Drawer):
+ * - Keep trap active unless component decides to close (avoid implicit deactivation).
+ * - Always provide a fallback focus target to avoid runtime errors when no tabbables exist.
+ * - Prevent scroll jumps caused by focusing.
+ * - Share a trap stack among PXD traps so nested dialogs coordinate pause/unpause.
+ */
+export declare function useFocusTrap(container: MaybeElementRef<HTMLElement>, userOptions?: FocusTrapOptions): {
     stop: import("vue").WatchHandle;
 };