pxd 0.0.52 → 0.0.53

package/dist/components/book/index.vue

@@ -11,7 +11,7 @@ const props = defineProps({
   variant: { type: String, required: false, default: "stripe" },
   textured: { type: Boolean, required: false, default: false }
 });
-const presetWidthClasses = {
+const presetWidth = {
   "--xs": "[--bw:var(--xs)]",
   "--sm": "sm:[--bw:var(--sm)]",
   "--md": "md:[--bw:var(--md)]",
@@ -33,10 +33,12 @@ const computedStyle = computed(() => {
     "--book-background-color": color
   };
 });
-const computedClass = computed(() => {
-  const classes = ["pxd-book--container relative w-fit duration-300 transform-3d motion-safe:transition-transform"];
+const computedClasses = computed(() => {
+  const classes = [
+    "pxd-book--container relative w-fit duration-300 transform-3d motion-safe:transition-transform"
+  ];
   classes.push(
-    ...Object.keys(formattedWidth.value).map((bp) => presetWidthClasses[bp])
+    ...Object.keys(formattedWidth.value).map((bp) => presetWidth[bp])
   );
   return classes.join(" ");
 });
@@ -44,8 +46,10 @@ const computedClass = computed(() => {
 
 <template>
   <div class="pxd-book inline-flex w-fit">
-    <div :class="computedClass" :style="computedStyle">
-      <div class="pxd-book--content translate-z-0 absolute flex size-full min-w-full flex-col overflow-hidden bg-background-200">
+    <div :class="computedClasses" :style="computedStyle">
+      <div
+        class="pxd-book--content translate-z-0 absolute flex size-full min-w-full flex-col overflow-hidden bg-background-200"
+      >
         <div
           v-if="variant === 'stripe'"
           class="translate-z-0 relative flex w-full flex-1 shrink-0 overflow-hidden"
@@ -55,7 +59,10 @@ const computedClass = computed(() => {
             <slot name="icon" />
           </div>
 
-          <div aria-hidden="true" class="pxd-book--spine left-0 absolute h-full mix-blend-overlay" />
+          <div
+            aria-hidden="true"
+            class="pxd-book--spine left-0 absolute h-full mix-blend-overlay"
+          />
         </div>
 
         <div
@@ -73,13 +80,41 @@ const computedClass = computed(() => {
 
             <div v-if="variant === 'simple'" class="pxd-book--icon">
               <slot name="icon">
-                <svg fill="none" height="56" viewBox="0 0 36 56" width="36" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M3.03113 28.0005C6.26017 23.1765 11.7592 20.0005 18 20.0005C24.2409 20.0005 29.7399 23.1765 32.9689 28.0005C29.7399 32.8244 24.2409 36.0005 18 36.0005C11.7592 36.0005 6.26017 32.8244 3.03113 28.0005Z" fill="#0070F3" fill-rule="evenodd" /><path clip-rule="evenodd" d="M32.9691 28.0012C34.8835 25.1411 36 21.7017 36 18.0015C36 8.06034 27.9411 0.00146484 18 0.00146484C8.05887 0.00146484 0 8.06034 0 18.0015C0 21.7017 1.11648 25.1411 3.03094 28.0012C6.25996 23.1771 11.7591 20.001 18 20.001C24.2409 20.001 29.74 23.1771 32.9691 28.0012Z" fill="#45DEC4" fill-rule="evenodd" /><path clip-rule="evenodd" d="M32.9692 28.0005C29.7402 32.8247 24.241 36.001 18 36.001C11.759 36.001 6.25977 32.8247 3.03077 28.0005C1.11642 30.8606 0 34.2999 0 38C0 47.9411 8.05887 56 18 56C27.9411 56 36 47.9411 36 38C36 34.2999 34.8836 30.8606 32.9692 28.0005Z" fill="#E5484D" fill-rule="evenodd" /></svg>
+                <svg
+                  fill="none"
+                  height="56"
+                  viewBox="0 0 36 56"
+                  width="36"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M3.03113 28.0005C6.26017 23.1765 11.7592 20.0005 18 20.0005C24.2409 20.0005 29.7399 23.1765 32.9689 28.0005C29.7399 32.8244 24.2409 36.0005 18 36.0005C11.7592 36.0005 6.26017 32.8244 3.03113 28.0005Z"
+                    fill="#0070F3"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M32.9691 28.0012C34.8835 25.1411 36 21.7017 36 18.0015C36 8.06034 27.9411 0.00146484 18 0.00146484C8.05887 0.00146484 0 8.06034 0 18.0015C0 21.7017 1.11648 25.1411 3.03094 28.0012C6.25996 23.1771 11.7591 20.001 18 20.001C24.2409 20.001 29.74 23.1771 32.9691 28.0012Z"
+                    fill="#45DEC4"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M32.9692 28.0005C29.7402 32.8247 24.241 36.001 18 36.001C11.759 36.001 6.25977 32.8247 3.03077 28.0005C1.11642 30.8606 0 34.2999 0 38C0 47.9411 8.05887 56 18 56C27.9411 56 36 47.9411 36 38C36 34.2999 34.8836 30.8606 32.9692 28.0005Z"
+                    fill="#E5484D"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </slot>
             </div>
           </div>
         </div>
 
-        <div v-if="textured" class="pxd-book--textured inset-0 pointer-events-none absolute bg-cover opacity-50" />
+        <div
+          v-if="textured"
+          class="pxd-book--textured inset-0 pointer-events-none absolute bg-cover opacity-50"
+        />
       </div>
 
       <div aria-hidden="true" class="pxd-book--pages absolute" />
@@ -97,7 +132,28 @@ const computedClass = computed(() => {
   --hover-scale: 1.066;
   --hover-translate-x: -8px;
   --aspect-ratio: 49 / 60;
-  --bg-shadow: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0) 12%,rgba(255,255,255,0.25) 29.25%,rgba(255,255,255,0) 50.5%,rgba(255,255,255,0) 75.25%,rgba(255,255,255,0.25) 91%,rgba(255,255,255,0)),linear-gradient(90deg,rgba(0,0,0,0.03),rgba(0,0,0,0.1) 12%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.02) 50%,rgba(0,0,0,0.2) 73.5%,rgba(0,0,0,0.5) 75.25%,rgba(0,0,0,0.15) 85.25%,rgba(0,0,0,0));
+  --bg-shadow:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0) 12%,
+      rgba(255, 255, 255, 0.25) 29.25%,
+      rgba(255, 255, 255, 0) 50.5%,
+      rgba(255, 255, 255, 0) 75.25%,
+      rgba(255, 255, 255, 0.25) 91%,
+      rgba(255, 255, 255, 0)
+    ),
+    linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.03),
+      rgba(0, 0, 0, 0.1) 12%,
+      rgba(0, 0, 0, 0) 30%,
+      rgba(0, 0, 0, 0.02) 50%,
+      rgba(0, 0, 0, 0.2) 73.5%,
+      rgba(0, 0, 0, 0.5) 75.25%,
+      rgba(0, 0, 0, 0.15) 85.25%,
+      rgba(0, 0, 0, 0)
+    );
 
   perspective: 900px;
 }
@@ -111,7 +167,10 @@ const computedClass = computed(() => {
 
 .pxd-book--content {
   border-radius: var(--book-border-radius);
-  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .02), 0 4px 8px -4px rgba(0, 0, 0, .1), 0 16px 24px -8px rgba(0, 0, 0, .03);
+  box-shadow:
+    0 1px 1px 0 rgba(0, 0, 0, 0.02),
+    0 4px 8px -4px rgba(0, 0, 0, 0.1),
+    0 16px 24px -8px rgba(0, 0, 0, 0.03);
 
   &::after {
     content: '';
@@ -126,9 +185,21 @@ const computedClass = computed(() => {
   }
 }
 
-.dark .pxd-book--content{
-  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)), hsla(0, 0%, 12%, 1);
-  box-shadow: 0 1.8px 3.6px rgba(0, 0, 0, .05), 0 10.8px 21.6px rgba(0, 0, 0, .08), inset 0 -.9px 0 rgba(0, 0, 0, .1), inset 0 1.8px 1.8px rgba(255, 255, 255, .1), inset 3.6px 0 3.6px rgba(0, 0, 0, .1);
+.dark .pxd-book--content {
+  background:
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.1),
+      rgba(255, 255, 255, 0) 50%,
+      rgba(255, 255, 255, 0)
+    ),
+    hsla(0, 0%, 12%, 1);
+  box-shadow:
+    0 1.8px 3.6px rgba(0, 0, 0, 0.05),
+    0 10.8px 21.6px rgba(0, 0, 0, 0.08),
+    inset 0 -0.9px 0 rgba(0, 0, 0, 0.1),
+    inset 0 1.8px 1.8px rgba(255, 255, 255, 0.1),
+    inset 3.6px 0 3.6px rgba(0, 0, 0, 0.1);
 }
 
 .pxd-book--content-inner {
@@ -158,14 +229,15 @@ const computedClass = computed(() => {
 .pxd-book--title {
   line-height: 1.25em;
   font-size: 12cqw;
-  letter-spacing: -.02em;
+  letter-spacing: -0.02em;
 }
 
 .pxd-book--pages {
   top: 3px;
   height: calc(100% - 2 * 3px);
   width: calc(var(--book-depth) - 2px);
-  transform: translateX(calc(var(--bw) * 1px - var(--book-depth) / 2 - 3px)) rotateY(90deg) translateX(calc(var(--book-depth) / 2));
+  transform: translateX(calc(var(--bw) * 1px - var(--book-depth) / 2 - 3px)) rotateY(90deg)
+    translateX(calc(var(--book-depth) / 2));
   background: linear-gradient(90deg, #eaeaea, transparent 70%), linear-gradient(#fff, #fafafa);
 }
 
@@ -176,6 +248,7 @@ const computedClass = computed(() => {
 
 .pxd-book:hover .pxd-book--container {
   will-change: transform;
-  transform: rotateY(var(--hover-rotate)) scale(var(--hover-scale)) translateX(var(--hover-translate-x));
+  transform: rotateY(var(--hover-rotate)) scale(var(--hover-scale))
+    translateX(var(--hover-translate-x));
 }
 </style>

package/dist/components/browser/index.vue

@@ -20,29 +20,42 @@ const renderIcon = computed(() => isCopied.value ? CheckIcon : CopyIcon);
 <template>
   <div class="pxd-browser overflow-hidden rounded-md bg-background-200 shadow-border-small">
     <div class="py-2.5 px-5 gap-4 md:gap-6 flex justify-between bg-background-100">
-      <div class="gap-4 min-w-0 md:first:max-w-[140px] md:last:max-w-[140px] flex flex-1 items-center justify-center max-md:first:flex-none first:justify-start last:justify-end">
+      <div
+        class="gap-4 min-w-0 md:first:max-w-35 md:last:max-w-35 max-md:first:flex-none flex flex-1 items-center justify-center first:justify-start last:justify-end"
+      >
         <div class="gap-2 flex items-center">
           <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="gap-4 text-sm flex items-center text-gray-900 max-md:hidden">
+        <div class="gap-4 text-sm max-md:hidden flex items-center text-gray-900">
           <ArrowLeftIcon />
           <ArrowLeftIcon class="rotate-180" />
           <RefreshClockwiseIcon />
         </div>
       </div>
 
-      <div class="gap-4 min-w-0 md:first:max-w-[140px] md:last:max-w-[140px] flex flex-1 shrink-0 items-center justify-center max-md:first:flex-none first:justify-start last:justify-end">
-        <div class="lg:max-w-xs pl-2.5 pr-1 py-1 flex w-full items-center justify-between rounded-full border border-gray-400 bg-background-200">
+      <div
+        class="gap-4 min-w-0 md:first:max-w-35 md:last:max-w-35 max-md:first:flex-none flex flex-1 shrink-0 items-center justify-center first:justify-start last:justify-end"
+      >
+        <div
+          class="lg:max-w-xs pl-2.5 pr-1 py-1 flex w-full items-center justify-between rounded-full border border-gray-400 bg-background-200"
+        >
           <LockClosedIcon class="text-sm text-foreground-secondary" />
 
           <div class="pl-1.5 min-w-0 flex-1 truncate text-center text-13px text-gray-1000">
             {{ address }}
           </div>
 
-          <PButton variant="ghost" size="xs" shape="rounded" class="size-6" icon @click="copyText(address)">
+          <PButton
+            variant="ghost"
+            size="xs"
+            shape="rounded"
+            class="size-6"
+            icon
+            @click="copyText(address)"
+          >
             <Transition name="pxd-transition--fade-scale" mode="out-in">
               <Component :is="renderIcon" class="text-sm text-foreground-secondary" />
             </Transition>
@@ -50,7 +63,9 @@ const renderIcon = computed(() => isCopied.value ? CheckIcon : CopyIcon);
         </div>
       </div>
 
-      <div class="gap-4 min-w-0 md:first:max-w-[140px] md:last:max-w-[140px] flex flex-1 items-center justify-center max-md:first:flex-none max-lg:hidden first:justify-start last:justify-end" />
+      <div
+        class="gap-4 min-w-0 md:first:max-w-35 md:last:max-w-35 max-md:first:flex-none max-lg:hidden flex flex-1 items-center justify-center first:justify-start last:justify-end"
+      />
     </div>
 
     <slot />

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

@@ -0,0 +1,121 @@
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    shape: {
+        square: string;
+        rounded: string;
+        default: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    variant: {
+        simple: string;
+        icon: string;
+        link: string;
+        default: string;
+        ghost: string;
+        primary: string;
+        error: string;
+        warning: string;
+        success: string;
+    };
+    disabled: {
+        true: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+}, undefined, "pxd-button inline-flex shrink-0 cursor-pointer touch-manipulation items-center font-inherit select-none motion-safe:transition-all", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    shape: {
+        square: string;
+        rounded: string;
+        default: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    variant: {
+        simple: string;
+        icon: string;
+        link: string;
+        default: string;
+        ghost: string;
+        primary: string;
+        error: string;
+        warning: string;
+        success: string;
+    };
+    disabled: {
+        true: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    shape: {
+        square: string;
+        rounded: string;
+        default: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    variant: {
+        simple: string;
+        icon: string;
+        link: string;
+        default: string;
+        ghost: string;
+        primary: string;
+        error: string;
+        warning: string;
+        success: string;
+    };
+    disabled: {
+        true: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+}, undefined, "pxd-button inline-flex shrink-0 cursor-pointer touch-manipulation items-center font-inherit select-none motion-safe:transition-all", unknown, unknown, undefined>>;

package/dist/components/button/cn.js

@@ -0,0 +1,55 @@
+import { tv } from "tailwind-variants";
+export const buttonVariants = tv({
+  base: "pxd-button inline-flex shrink-0 cursor-pointer touch-manipulation items-center font-inherit select-none motion-safe:transition-all",
+  variants: {
+    size: {
+      xs: "h-6 px-1 text-sm rounded-sm",
+      sm: "h-7.5 px-1.5 text-sm rounded-md",
+      md: "h-9 px-2.5 text-sm rounded-md",
+      lg: "h-10 px-3.5 text-base rounded-lg"
+    },
+    shape: {
+      square: "rounded-none",
+      rounded: "rounded-full",
+      default: ""
+    },
+    align: {
+      left: "justify-start",
+      center: "justify-center",
+      right: "justify-end"
+    },
+    variant: {
+      simple: "",
+      icon: "p-0! aspect-square",
+      link: "font-medium hover:underline hover:opacity-70 active:opacity-90 motion-safe:transition-opacity",
+      default: "border-input bg-background-100 text-foreground hover:bg-background-hover active:bg-background-active",
+      ghost: "border-transparent bg-transparent text-foreground hover:bg-background-hover active:bg-background-active",
+      primary: "border-transparent bg-primary text-gray-100 hover:bg-primary-hover active:bg-primary-active",
+      error: "text-white border-transparent bg-red-800 hover:bg-red-700 active:bg-red-900",
+      warning: "text-black border-transparent bg-amber-800 hover:bg-amber-700 active:bg-amber-900",
+      success: "text-white border-transparent bg-green-800 hover:bg-green-700 active:bg-green-900"
+    },
+    disabled: {
+      true: "is-disabled hover:bg-gray-100 active:bg-gray-100 disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-100 disabled:text-gray-700"
+    },
+    fullWidth: {
+      true: "w-full"
+    },
+    icon: {
+      true: "p-0! aspect-square"
+    },
+    loading: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: ["default", "ghost", "primary", "error", "warning", "success"],
+      class: "border self-focus-ring outline-none"
+    },
+    {
+      icon: true,
+      class: "p-0! aspect-square"
+    }
+  ]
+});

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

@@ -1,23 +1,17 @@
 import type { ButtonProps } from '../../types/components/button';
-declare var __VLS_16: {}, __VLS_18: {}, __VLS_20: {};
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_16) => any;
+    prefix?: (props: typeof __VLS_13) => any;
 } & {
-    default?: (props: typeof __VLS_18) => any;
+    default?: (props: typeof __VLS_15) => any;
 } & {
-    suffix?: (props: typeof __VLS_20) => any;
+    suffix?: (props: typeof __VLS_17) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (args_0: MouseEvent) => any;
-    dblclick: (args_0: MouseEvent) => any;
-}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{
-    onClick?: ((args_0: MouseEvent) => any) | undefined;
-    onDblclick?: ((args_0: MouseEvent) => any) | undefined;
-}>, {
-    as: import("../../types/shared").ComponentAs;
-    variant: import("../../types/shared").ComponentVariantWithDefault | "ghost" | "simple" | "icon";
-    align: "left" | "center" | "right";
+declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     icon: boolean;
+    variant: import("../../types/components/button").ButtonVariant;
+    align: "left" | "center" | "right";
+    as: import("../../types/shared").ComponentAs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/button/index.vue

@@ -2,10 +2,11 @@
 import { computed } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { isTruthyProp } from "../../utils/format";
-import { getFallbackValue } from "../../utils/get";
 import PSpinner from "../spinner/index.vue";
+import { buttonVariants } from "./cn";
 defineOptions({
-  name: "PButton"
+  name: "PButton",
+  inheritAttrs: false
 });
 const props = defineProps({
   as: { type: null, required: false, default: "button" },
@@ -14,88 +15,35 @@ const props = defineProps({
   shape: { type: String, required: false },
   align: { type: String, required: false, default: "center" },
   icon: { type: Boolean, required: false, default: false },
-  block: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false }
+  disabled: { type: Boolean, required: false },
+  fullWidth: { type: Boolean, required: false }
 });
-const emits = defineEmits(["click", "dblclick"]);
-const SIZES = {
-  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-sm",
-  sm: "rounded-md",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
-  square: "rounded-none",
-  rounded: "rounded-full"
-};
-const FONT_SIZES = {
-  xs: "text-sm",
-  sm: "text-sm",
-  md: "text-sm",
-  lg: "text-base"
-};
-const VARIANTS = {
-  simple: "",
-  default: "bg-background-100 text-foreground hover:bg-background-hover active:bg-background-active border-input",
-  ghost: "bg-transparent text-foreground hover:bg-background-hover active:bg-background-active border-transparent",
-  primary: "bg-primary text-gray-100 hover:bg-primary-hover active:bg-primary-active border-transparent",
-  error: "bg-red-800 text-white hover:bg-red-700 active:bg-red-900 border-transparent",
-  warning: "bg-amber-800 text-black hover:bg-amber-700 active:bg-amber-900 border-transparent",
-  success: "bg-green-800 text-white hover:bg-green-700 active:bg-green-900 border-transparent"
-};
-const ALIGNMENTS = {
-  left: "justify-start",
-  center: "justify-center",
-  right: "justify-end"
-};
-const DISABLED_CLASS_NAMES = "is-disabled disabled:bg-gray-100 hover:bg-gray-100 active:bg-gray-100 disabled:cursor-not-allowed disabled:text-gray-700 disabled:border-gray-300";
-const config = useConfigProvider();
-const computedDisabled = computed(() => isTruthyProp(props.disabled) || isTruthyProp(props.loading));
-const computedClass = computed(() => {
-  const classes = ["pxd-button shrink-0 cursor-pointer touch-manipulation items-center font-inherit select-none motion-safe:transition-all", ALIGNMENTS[props.align]];
-  const { variant, block, shape, icon } = props;
-  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 (isTruthyProp(icon)) {
-    classes.push("aspect-square !p-0");
-  }
-  if (variant !== "simple") {
-    classes.push(
-      "border outline-none self-focus-ring",
-      getFallbackValue(variant, VARIANTS),
-      getFallbackValue(props.size, SIZES, config.size)
-    );
-  }
-  if (computedDisabled.value) {
-    classes.push(DISABLED_CLASS_NAMES);
-  }
-  return classes.join(" ");
+const configProvider = useConfigProvider();
+const computedDisabled = computed(
+  () => isTruthyProp(props.disabled) || isTruthyProp(props.loading)
+);
+const computedClasses = computed(() => {
+  const { size = configProvider.size, shape, align, variant, fullWidth, icon } = props;
+  return buttonVariants({
+    icon,
+    size,
+    shape,
+    align,
+    variant,
+    fullWidth,
+    disabled: computedDisabled.value
+  });
 });
-function onButtonClick(event) {
-  emits("click", event);
-}
-function onButtonDblClick(event) {
-  emits("dblclick", event);
-}
 </script>
 
 <template>
   <Component
     :is="as"
     role="button"
-    :class="computedClass"
+    :class="computedClasses"
     :disabled="computedDisabled"
-    @click="onButtonClick"
-    @dblclick.prevent="onButtonDblClick"
+    v-bind="$attrs"
   >
     <PSpinner v-if="loading" />
 

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

@@ -13,8 +13,8 @@ declare const __VLS_base: import("vue").DefineComponent<CarouselGroupProps, {},
 }, string, import("vue").PublicProps, Readonly<CarouselGroupProps> & Readonly<{
     onChange?: ((index: number) => any) | undefined;
 }>, {
-    height: number | string;
     index: number;
+    height: number | string;
     loop: boolean;
     arrow: boolean;
     autoplay: boolean;