pxd 0.0.52 → 0.0.53

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

@@ -53,20 +53,24 @@ function translateItems() {
     carousel.translateItem(index, virtualIndex.value);
   });
 }
-const onToggleClick = throttle((delta) => {
-  const length = carousels.value.length;
-  if (length === 0) {
-    return;
-  }
-  if (props.loop) {
-    virtualIndex.value += delta;
-    translateItems();
-  } else {
-    virtualIndex.value = Math.max(0, Math.min(virtualIndex.value + delta, length - 1));
-  }
-  emits("change", correctIndex.value);
-  nextTick(onPointerLeave);
-}, THROTTLE_INTERVALS, { edges: ["leading"] });
+const onToggleClick = throttle(
+  (delta) => {
+    const length = carousels.value.length;
+    if (length === 0) {
+      return;
+    }
+    if (props.loop) {
+      virtualIndex.value += delta;
+      translateItems();
+    } else {
+      virtualIndex.value = Math.max(0, Math.min(virtualIndex.value + delta, length - 1));
+    }
+    emits("change", correctIndex.value);
+    nextTick(onPointerLeave);
+  },
+  THROTTLE_INTERVALS,
+  { edges: ["leading"] }
+);
 function onWheelToggle(ev) {
   if (!props.toggleOnWheel) {
     return;
@@ -269,26 +273,26 @@ onBeforeUnmount(() => {
 
 <style lang="postcss">
 .pxd-carousel-group {
-  &[data-indicator-type="dot"] {
+  &[data-indicator-type='dot'] {
     --carousel-dot-width: 8px;
     --carousel-dot-height: 8px;
   }
 
-  &[data-indicator-type="line"] {
-    &[data-indicator-position="top"],
-    &[data-indicator-position="bottom"] {
+  &[data-indicator-type='line'] {
+    &[data-indicator-position='top'],
+    &[data-indicator-position='bottom'] {
       --carousel-dot-width: 16px;
       --carousel-dot-height: 4px;
     }
 
-    &[data-indicator-position="left"],
-    &[data-indicator-position="right"] {
+    &[data-indicator-position='left'],
+    &[data-indicator-position='right'] {
       --carousel-dot-width: 4px;
       --carousel-dot-height: 16px;
     }
   }
 
-  &[data-indicator-position="top"] {
+  &[data-indicator-position='top'] {
     .pxd-carousel-group--indicator {
       left: 12px;
       top: 8px;
@@ -300,7 +304,7 @@ onBeforeUnmount(() => {
     }
   }
 
-  &[data-indicator-position="bottom"] {
+  &[data-indicator-position='bottom'] {
     .pxd-carousel-group--indicator {
       left: 12px;
       bottom: 8px;
@@ -312,7 +316,7 @@ onBeforeUnmount(() => {
     }
   }
 
-  &[data-indicator-position="left"] {
+  &[data-indicator-position='left'] {
     .pxd-carousel-group--indicator {
       left: 8px;
       top: 12px;
@@ -324,7 +328,7 @@ onBeforeUnmount(() => {
     }
   }
 
-  &[data-indicator-position="right"] {
+  &[data-indicator-position='right'] {
     .pxd-carousel-group--indicator {
       right: 8px;
       top: 12px;
@@ -336,19 +340,19 @@ onBeforeUnmount(() => {
     }
   }
 
-  &[data-direction="horizontal"] .pxd-carousel-group--slider {
+  &[data-direction='horizontal'] .pxd-carousel-group--slider {
     display: flex;
   }
 
-  &[data-direction="vertical"] {
+  &[data-direction='vertical'] {
     .pxd-carousel-group--prev-btn,
     .pxd-carousel-group--next-btn {
       transform: rotate(90deg);
     }
   }
 
-  &[data-indicator-position="left"],
-  &[data-indicator-position="right"] {
+  &[data-indicator-position='left'],
+  &[data-indicator-position='right'] {
     .pxd-carousel-group--indicator,
     .pxd-carousel-group--toggler {
       flex-direction: column;

package/dist/components/checkbox/cn.d.ts

@@ -0,0 +1,67 @@
+export declare const checkboxVariant: import("tailwind-variants").TVReturnType<{
+    checked: {
+        true: {
+            inner: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+    disabled: {
+        true: {
+            wrapper: string;
+            inner: string;
+        };
+        false: {
+            wrapper: string;
+            inner: string;
+        };
+    };
+}, {
+    wrapper: string;
+    inner: string;
+}, undefined, {
+    checked: {
+        true: {
+            inner: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+    disabled: {
+        true: {
+            wrapper: string;
+            inner: string;
+        };
+        false: {
+            wrapper: string;
+            inner: string;
+        };
+    };
+}, {
+    wrapper: string;
+    inner: string;
+}, import("tailwind-variants").TVReturnType<{
+    checked: {
+        true: {
+            inner: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+    disabled: {
+        true: {
+            wrapper: string;
+            inner: string;
+        };
+        false: {
+            wrapper: string;
+            inner: string;
+        };
+    };
+}, {
+    wrapper: string;
+    inner: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/checkbox/cn.js

@@ -0,0 +1,31 @@
+import { tv } from "tailwind-variants";
+export const checkboxVariant = tv({
+  slots: {
+    wrapper: "pxd-checkbox group/checkbox gap-2 inline-flex max-w-full cursor-pointer touch-manipulation items-center data-[disabled=true]:cursor-not-allowed",
+    inner: "pxd-checkbox--inner size-4 inline-flex shrink-0 transform-gpu items-center justify-center overflow-hidden rounded-sm border peer-focus-ring motion-safe:transition-colors"
+  },
+  variants: {
+    checked: {
+      true: {
+        inner: "border-primary bg-primary"
+      },
+      false: {
+        inner: "border-gray-alpha-400 bg-background-100 group-hover/checkbox:bg-gray-200"
+      }
+    },
+    disabled: {
+      true: {
+        wrapper: "is-disabled text-gray-500",
+        inner: ""
+      },
+      false: {
+        wrapper: "",
+        inner: ""
+      }
+    }
+  },
+  compoundVariants: [
+    { checked: true, disabled: true, inner: "border-gray-600 bg-gray-600" },
+    { checked: false, disabled: true, inner: "border-gray-500 bg-gray-100" }
+  ]
+});

package/dist/components/checkbox/index.vue

@@ -5,6 +5,7 @@ import { computed } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
 import { useCheckboxGroupContext } from "../../contexts/checkbox";
 import { getUniqueId } from "../../utils/uid";
+import { checkboxVariant } from "./cn";
 defineOptions({
   name: "PCheckbox",
   model: {
@@ -35,21 +36,11 @@ const isChecked = computed(() => {
 });
 const computedDisabled = computed(() => props.disabled || checkboxGroupContext?.disabled);
 const computedRequired = computed(() => props.required || checkboxGroupContext?.required);
-const computedClass = computed(() => {
-  const classes = [
-    "pxd-checkbox--inner size-4 inline-flex shrink-0 items-center justify-center peer-focus-ring",
-    "transform-gpu overflow-hidden rounded-sm border motion-safe:transition-colors"
-  ];
-  if (isChecked.value) {
-    classes.push(
-      computedDisabled.value ? "bg-gray-600 border-gray-600" : "bg-primary border-primary"
-    );
-  } else {
-    classes.push(
-      computedDisabled.value ? "bg-gray-100 border-gray-500" : "bg-background-100 border-gray-alpha-400 group-hover/checkbox:bg-gray-200"
-    );
-  }
-  return classes.join(" ");
+const computedClasses = computed(() => {
+  return checkboxVariant({
+    checked: isChecked.value,
+    disabled: computedDisabled.value
+  });
 });
 function toggleChecked(isChecked2) {
   if (Array.isArray(modelValue.value)) {
@@ -78,8 +69,7 @@ defineExpose({
     role="checkbox"
     :aria-checked="isChecked"
     :data-disabled="computedDisabled"
-    class="pxd-checkbox group/checkbox gap-2 inline-flex max-w-full cursor-pointer touch-manipulation items-center data-[disabled=true]:cursor-not-allowed"
-    :class="{ 'is-disabled text-gray-500': computedDisabled }"
+    :class="computedClasses.wrapper()"
     :for="uniqueId"
   >
     <input
@@ -91,9 +81,9 @@ defineExpose({
       :required="computedRequired"
       :disabled="computedDisabled"
       @change="onInputChange"
-    >
+    />
 
-    <span aria-hidden="true" :class="computedClass">
+    <span aria-hidden="true" :class="computedClasses.inner()">
       <CheckIcon v-if="isChecked" class="size-3 text-gray-100" />
       <MinusIcon v-else-if="indeterminate" class="size-3" />
       <span v-else class="size-3" />

package/dist/components/chip/cn.d.ts

@@ -0,0 +1,49 @@
+export declare const chipVariant: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        error: string;
+        warning: string;
+        success: string;
+        secondary: string;
+    };
+    inset: {
+        true: {};
+        false: string;
+    };
+    hasLabel: {
+        true: {};
+        false: string;
+    };
+}, undefined, "pxd-chip--label text-xs top-0 right-0 absolute rounded-full border border-background-100 motion-safe:transition-all", {
+    variant: {
+        primary: string;
+        error: string;
+        warning: string;
+        success: string;
+        secondary: string;
+    };
+    inset: {
+        true: {};
+        false: string;
+    };
+    hasLabel: {
+        true: {};
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        error: string;
+        warning: string;
+        success: string;
+        secondary: string;
+    };
+    inset: {
+        true: {};
+        false: string;
+    };
+    hasLabel: {
+        true: {};
+        false: string;
+    };
+}, undefined, "pxd-chip--label text-xs top-0 right-0 absolute rounded-full border border-background-100 motion-safe:transition-all", unknown, unknown, undefined>>;

package/dist/components/chip/cn.js

@@ -0,0 +1,26 @@
+import { tv } from "tailwind-variants";
+export const chipVariant = tv({
+  base: "pxd-chip--label text-xs top-0 right-0 absolute rounded-full border border-background-100 motion-safe:transition-all",
+  variants: {
+    variant: {
+      primary: "bg-primary text-background-100",
+      error: "bg-red-700 text-background-100 dark:text-gray-1000",
+      warning: "bg-amber-700 text-gray-1000 dark:text-gray-100",
+      success: "bg-green-700 text-background-100 dark:text-gray-1000",
+      secondary: "bg-gray-700 text-background-100 dark:text-gray-1000"
+    },
+    inset: {
+      true: {},
+      false: "translate-x-1/2 -translate-y-1/3"
+    },
+    hasLabel: {
+      true: {},
+      false: "size-(--chip-size)"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    inset: false,
+    hasLabel: false
+  }
+});

package/dist/components/chip/index.vue

@@ -1,31 +1,19 @@
 <script setup>
 import { computed } from "vue";
-import { getCssUnitValue } from "../../utils/format";
-import { getFallbackValue } from "../../utils/get";
+import { getCssUnitValue, isTruthyProp } from "../../utils/format";
+import { chipVariant } from "./cn";
 const props = defineProps({
   size: { type: [Number, String], required: false, default: 10 },
   inset: { type: Boolean, required: false },
   label: { type: [String, Number, Array, null], required: false, default: "" },
   variant: { type: String, required: false, default: "primary" }
 });
-const variantPresets = {
-  primary: "bg-primary text-background-100",
-  error: "bg-red-700 text-background-100 dark:text-gray-1000",
-  warning: "bg-amber-700 text-gray-1000 dark:text-gray-100",
-  success: "bg-green-700 text-background-100 dark:text-gray-1000",
-  secondary: "bg-gray-700 text-background-100 dark:text-gray-1000"
-};
-const computedClass = computed(() => {
-  const classes = ["pxd-chip--label text-xs top-0 right-0 absolute rounded-full border border-background-100 motion-safe:transition-all"];
-  const { variant, inset, label } = props;
-  if (!label) {
-    classes.push("size-(--chip-size)");
-  }
-  if (!inset) {
-    classes.push("translate-x-1/2 -translate-y-1/3");
-  }
-  classes.push(getFallbackValue(variant, variantPresets, "primary"));
-  return classes.join(" ");
+const computedClasses = computed(() => {
+  return chipVariant({
+    inset: props.inset,
+    variant: props.variant,
+    hasLabel: isTruthyProp(props.label)
+  });
 });
 </script>
 
@@ -33,7 +21,11 @@ const computedClass = computed(() => {
   <div class="pxd-chip relative inline-flex shrink-0">
     <slot />
 
-    <span :data-label="label" :class="computedClass" :style="{ '--chip-size': getCssUnitValue(size) }" />
+    <span
+      :data-label="label"
+      :class="computedClasses"
+      :style="{ '--chip-size': getCssUnitValue(size) }"
+    />
   </div>
 </template>
 

package/dist/components/choicebox/index.vue

@@ -45,7 +45,7 @@ const computedAttrs = computed(() => {
 </template>
 
 <style lang="postcss">
-.pxd-choicebox[aria-checked="true"] {
+.pxd-choicebox[aria-checked='true'] {
   border-color: var(--color-primary);
   background-color: hsla(var(--primary), 0.08);
 

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

@@ -1,7 +1,10 @@
 <script setup>
 import { computed, markRaw, useAttrs } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
-import { provideChoiceboxGroupContext, provideChoiceboxGroupModelValue } from "../../contexts/choicebox";
+import {
+  provideChoiceboxGroupContext,
+  provideChoiceboxGroupModelValue
+} from "../../contexts/choicebox";
 import PCheckboxGroup from "../checkbox-group/index.vue";
 import PChoicebox from "../choicebox/index.vue";
 import PRadioGroup from "../radio-group/index.vue";
@@ -29,10 +32,10 @@ const computedAttrs = computed(() => {
   const { disabled, multiple, required, options } = props;
   const { class: classes, ...rest } = attrs;
   return {
-    "role": multiple ? "group" : "radiogroup",
+    role: multiple ? "group" : "radiogroup",
     "aria-required": required,
     "aria-multiselectable": multiple,
-    "gap": attrs.gap || "3",
+    gap: attrs.gap || "3",
     disabled,
     required,
     options,

package/dist/components/collapse/index.vue

@@ -37,6 +37,7 @@ function onTriggerClick() {
   localExpand.value = newState;
 }
 function beforeEnter(el) {
+  ;
   el.style.height = "0";
   el.style.overflow = "hidden";
 }
@@ -45,15 +46,18 @@ function enter(el) {
   el.style.height = `${el.scrollHeight}px`;
 }
 function afterEnter(el) {
+  ;
   el.style.height = "";
   el.style.overflow = "";
 }
 function beforeLeave(el) {
+  ;
   el.style.height = `${el.scrollHeight}px`;
   el.style.overflow = "hidden";
   void el.offsetHeight;
 }
 function leave(el) {
+  ;
   el.style.height = "0";
 }
 onMounted(() => {
@@ -75,7 +79,9 @@ onMounted(() => {
           {{ title }}
         </slot>
 
-        <ChevronDownIcon class="size-4 shrink-0 group-data-[state=open]/collapse:-rotate-180 motion-safe:transition-transform" />
+        <ChevronDownIcon
+          class="size-4 shrink-0 group-data-[state=open]/collapse:-rotate-180 motion-safe:transition-transform"
+        />
       </button>
     </h3>
 

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

@@ -27,10 +27,10 @@ const SIZES = {
     fontWeight: "600"
   }
 };
-const config = useConfigProvider();
-const expandedItems = ref([]);
+const configProvider = useConfigProvider();
+const expandedItemIds = ref([]);
 const computedStyle = computed(() => {
-  const { padding, fontSize, fontWeight } = getFallbackValue(props.size, SIZES, config.size);
+  const { padding, fontSize, fontWeight } = getFallbackValue(props.size, SIZES, configProvider.size);
   return {
     "--collapse-padding": padding,
     "--collapse-font-size": fontSize,
@@ -40,15 +40,15 @@ const computedStyle = computed(() => {
 function toggleItem(id, expanded) {
   if (expanded) {
     if (props.multiple) {
-      expandedItems.value.push(id);
+      expandedItemIds.value.push(id);
     } else {
-      expandedItems.value = [id];
+      expandedItemIds.value = [id];
     }
     return;
   }
-  expandedItems.value = expandedItems.value.filter((item) => item !== id);
+  expandedItemIds.value = expandedItemIds.value.filter((item) => item !== id);
 }
-const isExpanded = (id) => expandedItems.value.includes(id);
+const isExpanded = (id) => expandedItemIds.value.includes(id);
 provideCollapseGroupContext({
   multiple: computed(() => props.multiple),
   isExpanded,

package/dist/components/command-menu/index.vue

@@ -27,16 +27,13 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "select", "change", "show", "hide"]);
 const uniqueId = getUniqueId();
-const config = useConfigProvider();
+const configProvider = useConfigProvider();
 const modelValue = useModelValue(props, emits);
 const isDesktop = useMediaQuery(PRESET_MEDIA_QUERIES.SM_UP);
 const modalInitialFocus = computed(() => isDesktop.value ? `#${uniqueId}` : false);
 const listRef = shallowRef();
 const isEmptyResult = shallowRef(false);
-const {
-  value: filterKeyword,
-  deferred: deferredFilterKeyword
-} = useDeferredValue("", {
+const { value: filterKeyword, deferred: deferredFilterKeyword } = useDeferredValue("", {
   async valueChange(v) {
     if (!v) {
       return;
@@ -80,7 +77,10 @@ provideListFilterValue(deferredFilterKeyword);
     @hide="hideModal"
   >
     <template #header>
-      <label :for="uniqueId" class="py-3 px-4 -mx-6 -mt-4 sm:-mt-6 gap-3 flex items-center border-b bg-background-100">
+      <label
+        :for="uniqueId"
+        class="py-3 px-4 -mx-6 -mt-4 sm:-mt-6 gap-3 flex items-center border-b bg-background-100"
+      >
         <input
           :id="uniqueId"
           v-model="filterKeyword"
@@ -96,7 +96,7 @@ provideListFilterValue(deferredFilterKeyword);
           type="text"
           name="command-menu-filter-input"
           class="h-7 flex-1 shrink-0 appearance-none border-none bg-transparent font-inherit text-foreground outline-none"
-        >
+        />
 
         <PButton
           v-if="closeOnPressEscape"
@@ -120,7 +120,8 @@ provideListFilterValue(deferredFilterKeyword);
       <slot />
 
       <p v-if="isEmptyResult" class="py-7.5 text-sm text-center text-foreground-secondary">
-        {{ config.locale.empty.search }} <span class="text-foreground">"{{ filterKeyword }}"</span>
+        {{ configProvider.locale.empty.search }}
+        <span class="text-foreground">"{{ filterKeyword }}"</span>
       </p>
     </PList>
 

package/dist/components/command-menu-group/index.vue

@@ -9,7 +9,10 @@ defineProps({
 
 <template>
   <div class="pxd-command-menu-group" role="presentation">
-    <div aria-hidden="true" class="h-10 px-2 flex items-center text-13px text-foreground-secondary only:hidden empty:hidden">
+    <div
+      aria-hidden="true"
+      class="h-10 px-2 flex items-center text-13px text-foreground-secondary only:hidden empty:hidden"
+    >
       {{ label }}
     </div>
 

package/dist/components/config-provider/index.d.vue.ts

@@ -10,6 +10,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: import("../../types/shared").ComponentSize;
     locale: Record<string, any>;
+    popoverShowTransition: boolean;
     as: ComponentAs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/config-provider/index.vue

@@ -7,7 +7,8 @@ defineOptions({
 const props = defineProps({
   as: { type: null, required: false, default: "div" },
   size: { type: String, required: false, default: "md" },
-  locale: { type: Object, required: false, default: () => enUS }
+  locale: { type: Object, required: false, default: () => enUS },
+  popoverShowTransition: { type: Boolean, required: false, default: true }
 });
 provideConfigProvider(props);
 </script>

package/dist/components/countdown/index.vue

@@ -1,11 +1,7 @@
 <script setup>
 import { computed, onBeforeUnmount } from "vue";
 import { useCountdown } from "../../composables/use-countdown";
-import {
-  dayjs,
-  dayjsDurationPlugin,
-  dayjsMillisecondTokenPlugin
-} from "../../utils/date";
+import { dayjs, dayjsDurationPlugin, dayjsMillisecondTokenPlugin } from "../../utils/date";
 defineOptions({
   name: "PCountDown"
 });
@@ -24,11 +20,7 @@ const props = defineProps({
 const emits = defineEmits(["change", "reset", "finish"]);
 dayjs.extend(dayjsDurationPlugin);
 dayjs.extend(dayjsMillisecondTokenPlugin);
-const {
-  stop,
-  reset,
-  timestamp
-} = useCountdown(props, emits);
+const { stop, reset, timestamp } = useCountdown(props, emits);
 const times = computed(() => {
   const t = dayjs.duration(timestamp.value);
   return {