pxd 0.0.45 → 0.0.47

package/dist/components/text/index.vue

@@ -68,5 +68,5 @@ const computedClass = computed(() => {
 <template>
   <Component :is="as" :class="computedClass" :style="computedStyle">
     <slot />
-  </component>
+  </Component>
 </template>

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

@@ -1,8 +1,7 @@
 import type { ComponentLabel, ComponentSizeWithXs } from '../../types/shared';
 interface Props {
     size?: ComponentSizeWithXs;
-    error?: string;
-    label?: ComponentLabel;
+    error?: boolean | string;
     readonly?: boolean;
     disabled?: boolean;
     required?: boolean;
@@ -12,11 +11,7 @@ interface Props {
     modelValue?: ComponentLabel;
     placeholder?: string;
 }
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: 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;
@@ -29,11 +24,5 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }>, {
     modelValue: ComponentLabel;
 }, {}, {}, {}, 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/textarea/index.vue

@@ -4,7 +4,6 @@ import { useConfigProvider } from "../../composables/use-config-provider-context
 import { useModelValue } from "../../composables/use-model-value";
 import { getFallbackValue } from "../../utils/get";
 import { getUniqueId } from "../../utils/uid";
-import PError from "../error/index.vue";
 defineOptions({
   name: "PTextarea",
   model: {
@@ -14,8 +13,7 @@ defineOptions({
 });
 const props = defineProps({
   size: { type: String, required: false },
-  error: { type: String, required: false },
-  label: { type: [String, Number, Array, null], required: false },
+  error: { type: [Boolean, String], required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
@@ -36,7 +34,7 @@ const SIZES = {
 const modelValue = useModelValue(props, emits);
 const config = useConfigProvider();
 const computedClass = computed(() => {
-  const classes = ["pxd-input--border flex h-full min-h-[inherit] items-center justify-center overflow-hidden rounded-md bg-background-100 motion-safe:transition-all"];
+  const classes = [];
   classes.push(getFallbackValue(props.size, SIZES, config.size));
   if (props.disabled) {
     classes.push("is-disabled");
@@ -61,34 +59,28 @@ function onInputChange(event) {
 </script>
 
 <template>
-  <label class="pxd-textarea block w-full max-w-full" :for="uniqueId">
-    <div v-if="label || $slots.label" class="pxd-form--label">
-      <slot name="label">{{ label }}</slot>
-    </div>
-
-    <div :class="computedClass">
-      <textarea
-        :id="uniqueId"
-        v-model="modelValue"
-        class="py-2.5 px-3 size-full min-h-[inherit] resize-none appearance-none rounded-inherit border-none bg-transparent font-inherit outline-none placeholder:text-gray-600 placeholder:select-none disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 disabled:placeholder:text-gray-400"
-        autocorrect="off"
-        autocomplete="off"
-        autocapitalize="off"
-        :readonly="readonly"
-        :disabled="disabled"
-        :required="required"
-        :autofocus="autofocus"
-        :minlength="minlength"
-        :maxlength="maxlength"
-        :placeholder="placeholder"
-        @change="onInputChange"
-        @focus="onInputFocus"
-        @blur="onInputBlur"
-      />
-    </div>
-
-    <PError v-if="error" class="mt-1.5" :size="size">
-      {{ error }}
-    </PError>
+  <label
+    :for="uniqueId"
+    class="pxd-textarea pxd-input--border flex size-full min-h-[inherit] max-w-full items-center justify-center overflow-hidden rounded-md bg-background-100 motion-safe:transition-all"
+    :class="computedClass"
+  >
+    <textarea
+      :id="uniqueId"
+      v-model="modelValue"
+      class="py-2.5 px-3 size-full min-h-[inherit] resize-none appearance-none rounded-inherit border-none bg-transparent font-inherit outline-none placeholder:text-gray-600 placeholder:select-none disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 disabled:placeholder:text-gray-400"
+      autocorrect="off"
+      autocomplete="off"
+      autocapitalize="off"
+      :readonly="readonly"
+      :disabled="disabled"
+      :required="required"
+      :autofocus="autofocus"
+      :minlength="minlength"
+      :maxlength="maxlength"
+      :placeholder="placeholder"
+      @change="onInputChange"
+      @focus="onInputFocus"
+      @blur="onInputBlur"
+    />
   </label>
 </template>

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

@@ -1,8 +1,7 @@
 import type { ComponentLabel, ComponentSizeWithXs } from '../../types/shared';
 interface Props {
     size?: ComponentSizeWithXs;
-    error?: string;
-    label?: ComponentLabel;
+    error?: boolean | string;
     readonly?: boolean;
     disabled?: boolean;
     required?: boolean;
@@ -12,11 +11,7 @@ interface Props {
     modelValue?: ComponentLabel;
     placeholder?: string;
 }
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: 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;
@@ -29,11 +24,5 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }>, {
     modelValue: ComponentLabel;
 }, {}, {}, {}, 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/time-picker/index.d.vue.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,6 +10,8 @@ interface Props {
     prefixIcon?: boolean;
     placeholder?: string;
     closeOnPressEscape?: boolean;
+    format?: string;
+    valueFormat?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: MouseEvent) => any;
@@ -19,8 +24,10 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
 }>, {
     modelValue: Date | string | number;
     closeOnPressEscape: boolean;
+    format: string;
     presets: DateTimePreset[];
     prefixIcon: boolean;
+    valueFormat: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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 },
+  format: { type: String, required: false, default: "HH:mm:ss" },
+  valueFormat: { 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.format) : "";
   },
   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.valueFormat) : "";
 }
-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);
+  onConfirmClick();
 }
 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,6 +10,8 @@ interface Props {
     prefixIcon?: boolean;
     placeholder?: string;
     closeOnPressEscape?: boolean;
+    format?: string;
+    valueFormat?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: MouseEvent) => any;
@@ -19,8 +24,10 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
 }>, {
     modelValue: Date | string | number;
     closeOnPressEscape: boolean;
+    format: string;
     presets: DateTimePreset[];
     prefixIcon: boolean;
+    valueFormat: 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,13 +13,11 @@ interface Props {
     activeLabel?: string;
     inactiveLabel?: string;
 }
-declare var __VLS_1: {}, __VLS_14: {}, __VLS_16: {};
+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_14) => any;
-} & {
-    unchecked?: (props: typeof __VLS_16) => any;
+    unchecked?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: NonNullable<ValueType | undefined>) => any;

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>