pxd 0.0.25 → 0.0.27

package/dist/components/active-graph/index.vue.d.ts

@@ -12,7 +12,6 @@ interface Props {
     transpose?: boolean;
     tooltipText?: string;
 }
-/** 提示框信息 */
 interface TooltipInfo {
     date: string;
     count: number;

package/dist/components/avatar/index.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, inject, shallowRef } from "vue";
+import { computed, shallowRef } from "vue";
+import { useAvatarGroupContext } from "../../contexts/avatar";
 import { getCssUnitValue } from "../../utils/format";
 defineOptions({
   name: "PAvatar"
@@ -13,8 +14,8 @@ const props = defineProps({
 });
 const emits = defineEmits(["load", "error", "loadstart"]);
 const loadingStatus = shallowRef("idle");
-const groupSize = inject("pxdAvatarGroupSize", 32);
-const computedSize = computed(() => getCssUnitValue(props.size || groupSize));
+const avatarGroupContext = useAvatarGroupContext();
+const computedSize = computed(() => getCssUnitValue(props.size || avatarGroupContext?.size, "32px"));
 const hideAvatar = computed(() => !props.src || props.placeholder || loadingStatus.value === "error");
 function onLoadError(event) {
   loadingStatus.value = "error";

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

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, provide } from "vue";
+import { computed } from "vue";
+import { provideAvatarGroupContext } from "../../contexts/avatar";
 import PAvatar from "../avatar/index.vue";
 defineOptions({
   name: "PAvatarGroup"
@@ -9,8 +10,12 @@ const props = defineProps({
   size: { type: [Number, String], required: false, default: 32 },
   options: { type: Array, required: false, default: () => [] }
 });
-const slicedOptions = computed(() => props.options?.slice(0, props.max));
-provide("pxdAvatarGroupSize", props.size);
+const slicedOptions = computed(() => {
+  const { max, options = [] } = props;
+  const maxCount = Math.max(Math.min(max, options.length), 1);
+  return options.slice(0, maxCount);
+});
+provideAvatarGroupContext(props);
 </script>
 
 <template>
@@ -22,7 +27,7 @@ provide("pxdAvatarGroupSize", props.size);
       :src="option.src"
       :alt="option.alt"
       :loading="option.loading"
-      class="[&:nth-child(n+2)]:-ml-3"
+      class="[&:nth-child(n+2)]:-ml-3 hover:z-10"
     />
 
     <PAvatar v-if="slicedOptions.length < options.length" class="text-xs bg-gray-1000 text-gray-100 -ml-3">

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

@@ -1,16 +1,7 @@
-interface AvatarGroupOptions {
-    src?: string;
-    alt?: string;
-    loading?: boolean;
-}
-interface Props {
-    max?: number;
-    size?: number | string;
-    options?: AvatarGroupOptions[];
-}
-declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+import type { AvatarGroupProps } from '../../types/components/avatar';
+declare const _default: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
     max: number;
-    options: AvatarGroupOptions[];
+    options: import("../../types/components/avatar").Options[];
     size: number | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/badge/index.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { twMerge } from "tailwind-merge";
 import { computed } from "vue";
-import { useConfigProviderSize } from "../../composables/useConfigProviderContext";
+import { useConfigProvider } from "../../composables/useConfigProviderContext";
 import { getFallbackValue } from "../../utils/value";
 defineOptions({
   name: "PBadge"
@@ -40,15 +39,16 @@ const VARIANTS = {
   "trial": "text-gray-100 dark:text-gray-1000",
   "turborepo": "text-gray-100 dark:text-gray-1000"
 };
-const computedSize = useConfigProviderSize(props.size, SIZES);
-const computedClass = computed(
-  () => twMerge(
-    "pxd-badge inline-flex items-center justify-center px-2.5 font-medium h-6 text-xs rounded-full font-sans gap-1 !no-underline motion-safe:transition-all",
+const config = useConfigProvider();
+const computedClass = computed(() => {
+  const classes = [
+    "pxd-badge inline-flex items-center justify-center px-2.5 font-medium h-6 rounded-full font-sans gap-1 !no-underline motion-safe:transition-all",
     getFallbackValue(props.variant, VARIANTS, "gray"),
-    computedSize.value,
+    getFallbackValue(props.size, SIZES, config.size),
     props.variant
-  )
-);
+  ];
+  return classes.join(" ");
+});
 const badgeAttrs = computed(() => {
   if (props.as === "router-link" || props.as === "RouterLink") {
     return {

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

@@ -1,4 +1,4 @@
-import type { ComponentAs } from '../../types/components';
+import type { ComponentAs } from '../../types/shared';
 interface Props {
     as?: ComponentAs;
     variant?: keyof typeof VARIANTS;

package/dist/components/book/index.vue

@@ -38,20 +38,17 @@ const computedStyle = computed(() => {
   };
 });
 const computedClass = computed(() => {
-  const basic = ["pxd-book--container w-fit relative transform-3d duration-300 motion-safe:transition-transform"];
-  basic.push(
+  const classes = ["pxd-book--container w-fit relative transform-3d duration-300 motion-safe:transition-transform"];
+  classes.push(
     ...Object.keys(formattedWidth.value).map((bp) => presetWidthClasses[bp])
   );
-  return basic;
+  return classes.join(" ");
 });
 </script>
 
 <template>
   <div class="pxd-book inline-flex w-fit">
-    <div
-      :class="computedClass"
-      :style="computedStyle"
-    >
+    <div :class="computedClass" :style="computedStyle">
       <div class="pxd-book--content absolute w-full min-w-full flex flex-col h-full overflow-hidden translate-z-0 bg-background-secondary">
         <div
           v-if="variant === 'stripe'"

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

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ResponsiveValue } from '../../types/components';
+import type { ComponentLabel, ResponsiveValue } from '../../types/shared';
 interface Props {
     color?: string;
     title?: ComponentLabel;

package/dist/components/browser/index.vue

@@ -0,0 +1,54 @@
+<script setup>
+import ArrowLeftIcon from "@gdsicon/vue/arrow-left";
+import LockClosedIcon from "@gdsicon/vue/lock-closed";
+import RefreshClockwiseIcon from "@gdsicon/vue/refresh-clockwise";
+import { useCopyClick } from "../../composables/useCopyClick";
+import PButton from "../button/index.vue";
+defineOptions({
+  name: "PBrowser"
+});
+defineProps({
+  address: { type: String, required: false }
+});
+const { renderAs, onCopyClick } = useCopyClick();
+</script>
+
+<template>
+  <div class="pxd-browser shadow-border-small rounded-md overflow-hidden bg-background-secondary">
+    <div class="bg-background py-2.5 px-5 flex justify-between gap-4 md:gap-6">
+      <div class="flex items-center flex-1 justify-center gap-4 min-w-0 first:justify-start md:first:max-w-[140px] max-md:first:flex-none last:justify-end md:last:max-w-[140px]">
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 rounded-full bg-[#FE5F57]" />
+          <div class="w-3 h-3 rounded-full bg-[#FEBB2E]" />
+          <div class="w-3 h-3 rounded-full bg-[#26C941]" />
+        </div>
+
+        <div class="flex items-center gap-4 max-md:hidden text-sm text-gray-900">
+          <ArrowLeftIcon />
+          <ArrowLeftIcon class="rotate-180" />
+          <RefreshClockwiseIcon />
+        </div>
+      </div>
+
+      <div class="flex items-center flex-1 justify-center gap-4 min-w-0 first:justify-start md:first:max-w-[140px] max-md:first:flex-none last:justify-end md:last:max-w-[140px]">
+        <div class="lg:max-w-xs bg-background-secondary border border-gray-400 w-full rounded-full pl-2.5 pr-1 py-1 flex items-center justify-between">
+          <LockClosedIcon class="text-gray-900 text-sm" />
+
+          <div class="pl-1.5 text-[13px] text-gray-1000 truncate flex-1 min-w-0 text-center truncate">
+            {{ address }}
+          </div>
+
+          <PButton variant="ghost" size="xs" shape="rounded" class="size-6" icon @click="onCopyClick(address)">
+            <Transition name="pxd-transition--fade-scale" mode="out-in">
+              <component :is="renderAs" class="text-sm" />
+            </Transition>
+          </PButton>
+        </div>
+      </div>
+
+      <div class="flex items-center flex-1 justify-center gap-4 min-w-0 first:justify-start md:first:max-w-[140px] max-md:first:flex-none last:justify-end md:last:max-w-[140px] max-lg:hidden" />
+    </div>
+
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,15 @@
+interface Props {
+    address?: string;
+}
+declare var __VLS_38: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_38) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/button/index.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { twMerge } from "tailwind-merge";
 import { computed } from "vue";
-import { useConfigProviderSize } from "../../composables/useConfigProviderContext";
+import { useConfigProvider } from "../../composables/useConfigProviderContext";
 import { isTruthyProp } from "../../utils/format";
 import { getFallbackValue } from "../../utils/value";
 import PSpinner from "../spinner/index.vue";
@@ -21,10 +20,19 @@ const props = defineProps({
 });
 const emits = defineEmits(["click", "dblclick"]);
 const SIZES = {
-  xs: "h-6 px-1 rounded-md",
-  sm: "h-7.5 px-1.5 rounded-md",
-  md: "h-9 px-2.5 rounded-md",
-  lg: "h-10 px-3.5 rounded-lg"
+  xs: "h-6 px-1",
+  sm: "h-7.5 px-1.5",
+  md: "h-9 px-2.5",
+  lg: "h-10 px-3.5"
+};
+const ROUNDED = {
+  xs: "rounded-md",
+  sm: "rounded-md",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  square: "rounded-none",
+  rounded: "rounded-full"
 };
 const FONT_SIZES = {
   xs: "text-sm",
@@ -47,31 +55,30 @@ const ALIGNMENTS = {
   right: "justify-end"
 };
 const DISABLED_CLASS_NAMES = "is-disabled bg-gray-100 hover:bg-gray-100 active:bg-gray-100 cursor-not-allowed text-gray-700 border-gray-300";
-const computedSize = useConfigProviderSize(props.size, SIZES);
-const computedFontSize = useConfigProviderSize(props.size, FONT_SIZES);
+const config = useConfigProvider();
 const computedDisabled = computed(() => props.disabled || props.loading);
 const computedClass = computed(() => {
-  const classNames = ["pxd-button cursor-pointer select-none items-center motion-safe:transition-all", ALIGNMENTS[props.align]];
+  const classes = ["pxd-button cursor-pointer select-none shrink-0 items-center motion-safe:transition-all", ALIGNMENTS[props.align]];
   const { variant, block, shape, icon } = props;
-  classNames.push(computedFontSize.value);
+  classes.push(
+    isTruthyProp(block) ? "flex w-full" : "inline-flex",
+    getFallbackValue(props.size, FONT_SIZES, config.size),
+    shape ? ROUNDED[shape] : getFallbackValue(props.size, ROUNDED, config.size)
+  );
   if (icon) {
-    classNames.push("aspect-square !p-0");
+    classes.push("aspect-square !p-0");
   }
   if (variant !== "simple") {
-    classNames.push("border outline-none self-focus-ring");
-    classNames.push(getFallbackValue(variant, VARIANTS));
-    classNames.push(computedSize.value);
+    classes.push(
+      "border outline-none self-focus-ring",
+      getFallbackValue(variant, VARIANTS),
+      getFallbackValue(props.size, SIZES, config.size)
+    );
   }
-  classNames.push(isTruthyProp(block) ? "flex w-full" : "inline-flex");
   if (computedDisabled.value) {
-    classNames.push(DISABLED_CLASS_NAMES);
-  }
-  if (shape) {
-    classNames.push(
-      shape === "square" ? "rounded-none" : "rounded-full"
-    );
+    classes.push(DISABLED_CLASS_NAMES);
   }
-  return twMerge(classNames);
+  return classes.join(" ");
 });
 function onButtonClick(event) {
   emits("click", event);
@@ -94,7 +101,7 @@ function onButtonDblClick(event) {
 
     <slot name="prefix" />
 
-    <span class="px-1.5 inline-flex truncate">
+    <span class="inline-flex items-center truncate" :class="{ 'px-1.5': !icon }">
       <slot />
     </span>
 

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

@@ -1,4 +1,4 @@
-import type { ButtonProps } from '../../types/components';
+import type { ButtonProps } from '../../types/components/button';
 declare var __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
     prefix?: (props: typeof __VLS_15) => any;
@@ -14,9 +14,9 @@ declare const __VLS_component: import("vue").DefineComponent<ButtonProps, {}, {}
     onClick?: (args_0: MouseEvent) => any;
     onDblclick?: (args_0: MouseEvent) => any;
 }>, {
-    variant: import("../../types").ComponentVariantWithDefault | "ghost" | "simple" | "icon";
+    variant: import("../../types/shared").ComponentVariantWithDefault | "ghost" | "simple" | "icon";
     icon: boolean;
-    as: import("../../types").ComponentAs;
+    as: import("../../types/shared").ComponentAs;
     align: "left" | "center" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/components/carousel/index.vue

@@ -1,30 +1,21 @@
 <script setup>
-import { inject, onBeforeUnmount, shallowRef } from "vue";
-import { useUniqueId } from "../../composables/useUniqueIdContext";
-import { carouselGroupContextKey } from "../carousel-group/constants";
+import { onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { useCarouselGroupContext } from "../../contexts/carousel";
+import { getUniqueId } from "../../utils/uid";
 defineOptions({
   name: "PCarousel"
 });
-const carouselGroupContext = inject(carouselGroupContextKey);
-if (!carouselGroupContext) {
-  throw new Error("CarouselGroupContext is not provided");
-}
-const {
-  props,
-  carousels,
-  registerCarousel,
-  unregisterCarousel
-} = carouselGroupContext;
-const uniqueId = useUniqueId();
+const carouselGroupContext = useCarouselGroupContext();
+const uniqueId = getUniqueId();
 const transformStyle = shallowRef("");
 function resetPosition() {
   transformStyle.value = "";
 }
 function getTranslateStyle(translate) {
-  return props.direction === "horizontal" ? `translateX(${translate}%)` : `translateY(${translate}%)`;
+  return carouselGroupContext.props.direction === "horizontal" ? `translateX(${translate}%)` : `translateY(${translate}%)`;
 }
 function translateItem(index, activeIndex) {
-  const maxLength = carousels.value.length;
+  const maxLength = carouselGroupContext.carousels.value.length;
   const lastIndex = maxLength - 1;
   if (index === 0 && activeIndex === maxLength) {
     transformStyle.value = getTranslateStyle(maxLength * 100);
@@ -34,12 +25,14 @@ function translateItem(index, activeIndex) {
     resetPosition();
   }
 }
-registerCarousel({
-  uid: uniqueId,
-  translateItem
+onMounted(() => {
+  carouselGroupContext?.registerCarousel({
+    uid: uniqueId,
+    translateItem
+  });
 });
 onBeforeUnmount(() => {
-  unregisterCarousel(uniqueId);
+  carouselGroupContext?.unregisterCarousel(uniqueId);
 });
 </script>
 

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

@@ -1,9 +1,9 @@
 <script setup>
 import ChevronRightIcon from "@gdsicon/vue/chevron-right";
-import { computed, onBeforeUnmount, onMounted, provide, ref, shallowRef } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { provideCarouselGroupContext } from "../../contexts/carousel";
 import { throttle } from "../../utils/fn";
 import { getCssUnitValue } from "../../utils/format";
-import { carouselGroupContextKey, THROTTLE_DELAY, TRANSITION_CLASSES } from "./constants";
 defineOptions({
   name: "PCarouselGroup"
 });
@@ -11,16 +11,21 @@ const props = defineProps({
   index: { type: Number, required: false, default: 0 },
   loop: { type: Boolean, required: false, default: true },
   arrow: { type: Boolean, required: false, default: true },
-  height: { type: [Number, String], required: false, default: 150 },
+  height: { type: [Number, String], required: false, default: 180 },
   autoplay: { type: Boolean, required: false, default: true },
   interval: { type: Number, required: false, default: 3e3 },
+  indicator: { type: Boolean, required: false, default: true },
+  direction: { type: String, required: false, default: "horizontal" },
+  indicatorType: { type: String, required: false, default: "line" },
+  indicatorPosition: { type: String, required: false, default: "bottom" },
   pauseOnHover: { type: Boolean, required: false, default: true },
-  toggleOnWheel: { type: Boolean, required: false, default: true },
-  direction: { type: String, required: false, default: "horizontal" }
+  toggleOnWheel: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["change"]);
+const THROTTLE_INTERVALS = 550;
+const TRANSITION_CLASSES = ["transition-transform", "duration-500"];
 let autoPlayTimer;
-const containerRef = shallowRef();
+const sliderRef = shallowRef();
 const carousels = ref([]);
 const virtualIndex = shallowRef(props.index);
 const correctIndex = computed(() => {
@@ -50,14 +55,16 @@ const onToggleClick = throttle((delta) => {
   if (length === 0) {
     return;
   }
+  onPointerEnter();
   if (props.loop) {
     virtualIndex.value += delta;
     translateItems();
   } else {
     virtualIndex.value = Math.max(0, Math.min(virtualIndex.value + delta, length - 1));
   }
+  nextTick(onPointerLeave);
   emits("change", correctIndex.value);
-}, THROTTLE_DELAY, { leading: true, trailing: false });
+}, THROTTLE_INTERVALS, { leading: true, trailing: false });
 function onWheelToggle(ev) {
   if (!props.toggleOnWheel) {
     return;
@@ -70,7 +77,7 @@ function onWheelToggle(ev) {
   }
 }
 function resetContainerPosition(resetIndex) {
-  const containerClassList = containerRef.value.classList;
+  const containerClassList = sliderRef.value.classList;
   containerClassList.remove(...TRANSITION_CLASSES);
   virtualIndex.value = resetIndex;
   translateItems();
@@ -111,58 +118,166 @@ function onPointerLeave() {
   }
   setAutoPlayTimer();
 }
+function onIndicatorClick(ev) {
+  onPointerEnter();
+  const target = ev.target;
+  const targetIndex = Number(target.dataset.index);
+  virtualIndex.value = targetIndex;
+  nextTick(onPointerLeave);
+}
 function registerCarousel(state) {
   carousels.value.push(state);
 }
 function unregisterCarousel(id) {
   carousels.value = carousels.value.filter(({ uid }) => uid !== id);
 }
+provideCarouselGroupContext({
+  props,
+  carousels,
+  registerCarousel,
+  unregisterCarousel
+});
 onMounted(() => {
   onPointerLeave();
 });
 onBeforeUnmount(() => {
   carousels.value = [];
 });
-provide(carouselGroupContextKey, {
-  props,
-  carousels,
-  registerCarousel,
-  unregisterCarousel
-});
 </script>
 
 <template>
   <div
-    class="pxd-carousel-group group/carousel w-full relative overflow-hidden"
+    tabindex="-1"
+    :data-direction="direction"
+    :data-indicator-type="indicatorType"
+    :data-indicator-position="indicatorPosition"
+    class="pxd-carousel-group group w-full relative overflow-hidden touch-manipulation"
     :style="{ height: getCssUnitValue(height) }"
     @pointerenter="onPointerEnter"
     @pointerleave="onPointerLeave"
     @wheel="onWheelToggle"
   >
+    <div class="pxd-carousel-group--container w-full h-full">
+      <div
+        ref="sliderRef"
+        class="pxd-carousel-group--slider w-full h-full translate-z-0 group-data-[direction=horizontal]:flex group-hover:will-change-transform"
+        :style="computedStyle"
+        :class="TRANSITION_CLASSES"
+        @transitionend="onTransitionsEnd"
+      >
+        <slot />
+      </div>
+    </div>
+
     <div
-      ref="containerRef"
-      :data-direction="direction"
-      class="pxd-carousel-group--container w-full h-full translate-z-0 data-[direction=horizontal]:flex group-hover/carousel:will-change-transform"
-      :style="computedStyle"
-      :class="TRANSITION_CLASSES"
-      @transitionend="onTransitionsEnd"
+      v-if="indicator"
+      class="pxd-carousel-group--indicator absolute w-max flex items-center gap-2 group-data-[indicator-position=left]:flex-col group-data-[indicator-position=right]:flex-col"
+      @click="onIndicatorClick"
     >
-      <slot />
+      <button
+        v-for="(_, i) in carousels.length"
+        :key="i"
+        :data-index="i"
+        class="pxd-carousel-group--indicator-item w-(--w) h-(--h) self-focus-ring relative rounded-full appearance-none cursor-pointer outline-none bg-gray-alpha-200 motion-safe:transition-colors hover:bg-gray-alpha-400"
+        :class="{ '!bg-primary': i === correctIndex }"
+      />
     </div>
 
-    <template v-if="arrow">
+    <div v-if="arrow" class="pxd-carousel-group--toggle-buttons flex gap-2 absolute group-data-[indicator-position=left]:flex-col group-data-[indicator-position=right]:flex-col">
       <button
-        class="pxd-carousel-group--prev-button z-10 appearance-none absolute top-1/2 p-2 rounded-full bg-gray-alpha-200 -translate-y-1/2 opacity-0 cursor-pointer left-0 -translate-x-full disabled:pointer-events-none group-hover/carousel:translate-x-1/2 group-hover/carousel:opacity-30 hover:opacity-90 active:opacity-100 motion-safe:transition-all"
+        type="button"
+        aria-label="Carousel arrow left"
+        class="pxd-carousel-group--prev-button outline-none self-focus-ring group-data-[direction=vertical]:rotate-90 appearance-none p-1.5 rounded-md cursor-pointer bg-gray-alpha-100 hover:bg-gray-alpha-200 active:bg-gray-alpha-300 disabled:pointer-events-none motion-safe:transition-colors"
         @click="onToggleClick(-1)"
       >
         <ChevronRightIcon class="rotate-180" />
       </button>
+
       <button
-        class="pxd-carousel-group--next-button z-10 appearance-none absolute top-1/2 p-2 rounded-full bg-gray-alpha-200 -translate-y-1/2 opacity-0 cursor-pointer right-0 translate-x-full disabled:pointer-events-none group-hover/carousel:-translate-x-1/2 group-hover/carousel:opacity-30 hover:opacity-90 active:opacity-100 motion-safe:transition-all"
+        type="button"
+        aria-label="Carousel arrow right"
+        class="pxd-carousel-group--next-button outline-none self-focus-ring group-data-[direction=vertical]:rotate-90 appearance-none p-1.5 rounded-md cursor-pointer bg-gray-alpha-100 hover:bg-gray-alpha-200 active:bg-gray-alpha-300 disabled:pointer-events-none motion-safe:transition-colors"
         @click="onToggleClick(1)"
       >
         <ChevronRightIcon />
       </button>
-    </template>
+    </div>
   </div>
 </template>
+
+<style lang="postcss">
+.pxd-carousel-group {
+  &[data-indicator-type="dot"] {
+    --w: 8px;
+    --h: 8px;
+  }
+
+  &[data-indicator-type="line"] {
+    &[data-indicator-position="top"],
+    &[data-indicator-position="bottom"] {
+      --w: 16px;
+      --h: 4px;
+    }
+
+    &[data-indicator-position="left"],
+    &[data-indicator-position="right"] {
+      --w: 4px;
+      --h: 16px;
+    }
+  }
+
+  &[data-indicator-position="top"] {
+    .pxd-carousel-group--indicator {
+      left: 12px;
+      top: 8px;
+    }
+
+    .pxd-carousel-group--toggle-buttons {
+      right: 8px;
+      top: 8px;
+    }
+  }
+
+  &[data-indicator-position="bottom"] {
+    .pxd-carousel-group--indicator {
+      left: 12px;
+      bottom: 8px;
+    }
+
+    .pxd-carousel-group--toggle-buttons {
+      right: 8px;
+      bottom: 8px;
+    }
+  }
+
+  &[data-indicator-position="left"] {
+    .pxd-carousel-group--indicator {
+      left: 8px;
+      top: 12px;
+    }
+
+    .pxd-carousel-group--toggle-buttons {
+      left: 8px;
+      bottom: 8px;
+    }
+  }
+
+  &[data-indicator-position="right"] {
+    .pxd-carousel-group--indicator {
+      right: 8px;
+      top: 12px;
+    }
+
+    .pxd-carousel-group--toggle-buttons {
+      right: 8px;
+      bottom: 8px;
+    }
+  }
+}
+
+.pxd-carousel-group--indicator-item::before {
+  content: '';
+  position: absolute;
+  inset: -4px;
+}
+</style>

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

@@ -1,4 +1,4 @@
-import type { CarouselGroupProps } from './constants';
+import type { CarouselGroupProps } from '../../types/components/carousel';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
@@ -15,6 +15,9 @@ declare const __VLS_component: import("vue").DefineComponent<CarouselGroupProps,
     autoplay: boolean;
     loop: boolean;
     arrow: boolean;
+    indicator: boolean;
+    indicatorType: "dot" | "line";
+    indicatorPosition: import("../../types/shared").BasePosition;
     pauseOnHover: boolean;
     toggleOnWheel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;