pxd 0.0.60 → 0.0.62

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Libon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/_internal/dismiss-container.d.vue.ts

@@ -0,0 +1,28 @@
+import type { ComponentPosition } from '../../types/shared';
+interface Props {
+    disabled?: boolean;
+    position?: ComponentPosition;
+    modelValue?: boolean;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: () => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onChange?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    position: ComponentPosition;
+}, {}, {}, {}, 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/_internal/dismiss-container.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { shallowRef, computed } from "vue";
+import { useModelValue } from "../../composables/use-model-value";
+import { useSwipeGesture } from "../../composables/use-swipe-gesture";
+import { caf, raf } from "../../utils/event";
+defineOptions({
+  name: "PDismissContainer",
+  inheritAttrs: false
+});
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  position: { type: null, required: false, default: "bottom" },
+  modelValue: { type: Boolean, required: false }
+});
+const emits = defineEmits(["change", "update:modelValue"]);
+const modelValue = useModelValue(props, emits);
+const containerRef = shallowRef();
+const gestureMoveOffset = shallowRef(0);
+const isHorizontal = computed(() => ["left", "right"].find((d) => props.position.startsWith(d)));
+const gestureDirection = computed(() => isHorizontal.value ? "horizontal" : "vertical");
+const computedStyle = computed(() => {
+  return {
+    transform: gestureMoveOffset.value ? `translate${isHorizontal.value ? "X" : "Y"}(${gestureMoveOffset.value}px) !important` : ""
+  };
+});
+const dampingFactor = 9;
+let maxSwipedDamped = 0;
+let hasDraggedInDismissDirection = false;
+let releaseAnimationId = 0;
+function animateRelease(from, decayRate = 0.88) {
+  caf(releaseAnimationId);
+  const step = () => {
+    const next = from * decayRate;
+    if (Math.abs(next) < 0.5) {
+      gestureMoveOffset.value = 0;
+      return;
+    }
+    from = next;
+    gestureMoveOffset.value = from;
+    releaseAnimationId = raf(step);
+  };
+  releaseAnimationId = raf(step);
+}
+useSwipeGesture(containerRef, {
+  handleSelector: ".pxd-dismiss-container--handle",
+  swipeThreshold: 0,
+  disabled: () => props.disabled,
+  direction: gestureDirection,
+  onPress: ({ size }) => {
+    caf(releaseAnimationId);
+    maxSwipedDamped = size / dampingFactor;
+    hasDraggedInDismissDirection = false;
+    gestureMoveOffset.value = 0;
+  },
+  onFollow: ({ displacement }) => {
+    const pos = props.position;
+    const dismissDirection = pos.startsWith("bottom") || pos.startsWith("right");
+    const isDismissDirection = dismissDirection ? displacement > 0 : displacement < 0;
+    if (isDismissDirection) {
+      hasDraggedInDismissDirection = true;
+      gestureMoveOffset.value = displacement;
+    } else if (hasDraggedInDismissDirection) {
+      const rubberBand = maxSwipedDamped * Math.sign(displacement);
+      const damping = 1 - Math.exp(-Math.abs(displacement) / maxSwipedDamped);
+      gestureMoveOffset.value = rubberBand * damping;
+    }
+  },
+  onRelease: async ({ swiped, direction }) => {
+    if (swiped && direction === props.position) {
+      modelValue.value = false;
+      gestureMoveOffset.value = 0;
+      return;
+    }
+    animateRelease(gestureMoveOffset.value);
+  }
+});
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="pxd-dismiss-container relative"
+    :data-disabled="disabled"
+    :data-position="position"
+    :style="computedStyle"
+    v-bind="$attrs"
+  >
+    <div
+      v-if="!disabled"
+      class="pxd-dismiss-container--handle absolute rounded-full bg-gray-200"
+    ></div>
+
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss">
+.pxd-dismiss-container {
+  --dismiss-handle-x: 3rem;
+  --dismiss-handle-y: 0.4rem;
+
+  &::after {
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: #fff;
+    z-index: -1;
+  }
+
+  &[data-position^='top'][data-disabled='false'] {
+    padding-bottom: 1rem;
+
+    &::after {
+      top: -50%;
+    }
+  }
+  &[data-position^='bottom'][data-disabled='false'] {
+    padding-top: 1rem;
+
+    &::after {
+      bottom: -50%;
+    }
+  }
+  &[data-position^='left'][data-disabled='false'] {
+    padding-right: 1rem;
+
+    &::after {
+      left: -50%;
+    }
+  }
+  &[data-position^='right'][data-disabled='false'] {
+    padding-left: 1rem;
+
+    &::after {
+      right: -50%;
+    }
+  }
+
+  &[data-position^='top'],
+  &[data-position^='bottom'] {
+    .pxd-dismiss-container--handle {
+      left: 50%;
+      top: 0.3rem;
+      transform: translateX(-50%);
+      width: var(--dismiss-handle-x);
+      height: var(--dismiss-handle-y);
+    }
+  }
+
+  &[data-position^='left'],
+  &[data-position^='right'] {
+    .pxd-dismiss-container--handle {
+      left: 0.3rem;
+      top: 50%;
+      transform: translateY(-50%);
+      width: var(--dismiss-handle-y);
+      height: var(--dismiss-handle-x);
+    }
+  }
+}
+</style>

package/dist/components/_internal/popover-arrow.d.vue.ts

@@ -0,0 +1,9 @@
+import type { ComponentPosition } from '../../types/shared';
+interface Props {
+    position?: ComponentPosition;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    position: ComponentPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/_internal/popover-arrow.vue

@@ -0,0 +1,38 @@
+<script setup>
+defineOptions({
+  name: "PPopoverArrow",
+  inheritAttrs: false
+});
+defineProps({
+  position: { type: null, required: false, default: "bottom" }
+});
+</script>
+
+<template>
+  <svg
+    width="14"
+    height="7"
+    viewBox="0 0 14 7"
+    xmlns="http://www.w3.org/2000/svg"
+    class="pxd-popover-arrow"
+    :data-position="position"
+    v-bind="$attrs"
+  >
+    <g clip-path="url(#popover_arrow_clip)">
+      <path
+        d="M15 -0.5V0.5H12.9834L12.8184 0.508789C12.4377 0.550822 12.0853 0.738056 11.8359 1.03418L8.53027 4.95996C7.73114 5.90893 6.26886 5.90892 5.46973 4.95996L2.16406 1.03418C1.87905 0.695733 1.45907 0.5 1.0166 0.5H-1V-0.5H15Z"
+        fill="inherit"
+        stroke="inherit"
+      />
+    </g>
+    <defs>
+      <clipPath id="popover_arrow_clip">
+        <rect width="14" height="7" fill="inherit" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<style>
+.pxd-popover-arrow[data-position^=bottom]{transform:rotate(180deg)}.pxd-popover-arrow[data-position^=left]{transform:translateX(4px) rotate(-90deg)}.pxd-popover-arrow[data-position^=right]{transform:translateX(-4px) rotate(90deg)}
+</style>

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

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, onBeforeUnmount, shallowRef } from "vue";
-import { useConfigProvider } from "../../contexts/config-provider";
 import { useDelayChange } from "../../composables/use-delay-change";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { getAllDatesBetween } from "../../utils/date";
 import { getCssUnitValue } from "../../utils/format";
 import { getColorByThreshold } from "../../utils/get";
@@ -302,7 +302,7 @@ onBeforeUnmount(() => {
       <tbody
         ref="tbodyRef"
         class="text-xs"
-        :style="{ '--item-radius': getCssUnitValue(itemRadius, '2px') }"
+        :style="{ '--active-graph-item-radius': getCssUnitValue(itemRadius) }"
         @click="onCellClick"
         @pointerover.capture="onPointerOver"
       >
@@ -318,7 +318,7 @@ onBeforeUnmount(() => {
           <td
             v-for="col of row"
             :key="col.date"
-            class="pxd-active-graph--item w-3 min-w-3 rounded-(--item-radius) border border-transparent bg-gray-alpha-100 hover:border-primary motion-safe:transition-all"
+            class="pxd-active-graph--item w-3 min-w-3 rounded-(--active-graph-item-radius) border border-transparent bg-gray-alpha-100 hover:border-primary motion-safe:transition-appearance"
             :data-date="col.date"
             :class="{
   'pointer-events-none invisible': col.hidden,
@@ -341,7 +341,7 @@ onBeforeUnmount(() => {
             <td
               v-for="color in computedColors"
               :key="color"
-              class="w-3 h-3 rounded-(--item-radius) bg-gray-alpha-100 motion-safe:transition-colors"
+              class="w-3 h-3 rounded-(--active-graph-item-radius) bg-gray-alpha-100 motion-safe:transition-colors"
               :style="`background-color: ${color}`"
             />
 
@@ -358,7 +358,7 @@ onBeforeUnmount(() => {
     <Transition v-if="tooltip" name="pxd-transition--fade" mode="out-in" appear>
       <div
         v-if="showTooltip"
-        class="pxd-active-graph--tooltip left-0 top-0 px-2 py-1 pointer-events-none absolute z-1 w-max rounded-sm bg-gray-1000 text-13px text-gray-100 duration-50 will-change-transform motion-safe:transition-transform"
+        class="pxd-active-graph--tooltip left-0 top-0 px-2 py-1 pointer-events-none absolute z-1 w-max rounded-sm bg-gray-1000 text-13 text-gray-100 duration-50 will-change-transform motion-safe:transition-transform"
         :style="`transform: translate(${tooltipInfo.left}px, ${tooltipInfo.top}px);`"
       >
         <slot name="tooltip" :data="tooltipInfo"

package/dist/components/avatar/index.vue

@@ -16,9 +16,7 @@ const props = defineProps({
 const emits = defineEmits(["load", "error", "loadstart"]);
 const loadingStatus = shallowRef("idle");
 const avatarGroupContext = useAvatarGroupContext();
-const computedSize = computed(
-  () => getCssUnitValue(props.size || avatarGroupContext?.props.size, "32px")
-);
+const computedSize = computed(() => getCssUnitValue(props.size || avatarGroupContext?.props.size));
 const isHideAvatar = computed(
   () => !props.src || props.placeholder || loadingStatus.value === "error"
 );
@@ -44,7 +42,7 @@ defineExpose({
 
 <template>
   <div
-    class="pxd-avatar relative inline-flex size-(--avatar-size) items-center justify-center rounded-full border border-background-100 bg-background-100 text-13px select-none before:default-animation-timing-function! motion-safe:before:[animation-duration:8s]"
+    class="pxd-avatar relative inline-flex size-(--avatar-size) items-center justify-center rounded-full border border-background-100 bg-background-100 text-13 select-none before:default-animation-timing-function! motion-safe:before:[animation-duration:8s]"
     :style="{ '--avatar-size': computedSize }"
     :data-placeholder="placeholder"
     v-bind="$attrs"
@@ -52,9 +50,9 @@ defineExpose({
     <slot>
       <span
         v-if="isHideAvatar"
-        class="font-medium px-1 relative flex size-full items-center justify-center overflow-hidden rounded-inherit"
+        class="font-medium px-1 relative flex size-full items-center justify-center overflow-hidden rounded-inherit uppercase"
       >
-        {{ alt }}
+        {{ alt?.slice(0, 2) }}
       </span>
       <img
         v-else
@@ -111,7 +109,7 @@ defineExpose({
   }
 
   &::after {
-    border: 1px solid var(--color-gray-alpha-400);
+    border: 1px solid var(--color-gray-alpha-300);
   }
 }
 

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

@@ -1,6 +1,5 @@
 import type { AvatarGroupProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
-    size: number | string;
     max: number;
     options: import("./types").AvatarOptions[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -8,7 +8,7 @@ defineOptions({
 });
 const props = defineProps({
   max: { type: Number, required: false, default: 5 },
-  size: { type: [Number, String], required: false, default: 32 },
+  size: { type: [Number, String], required: false },
   options: { type: Array, required: false, default: () => [] }
 });
 const slicedOptions = computed(() => {

package/dist/components/backtop/index.vue

@@ -56,7 +56,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Transition name="pxd-transition--fade-scale" appear>
+  <Transition name="pxd-transition--fade-scale" mode="out-in" appear>
     <div
       v-show="scrollTop >= visibleThreshold"
       ref="wrapperRef"

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

@@ -3,9 +3,13 @@ declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
-    as: import("../../types/shared").ComponentAs;
+declare const __VLS_base: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (args_0: Event) => any;
+}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{
+    onClose?: ((args_0: Event) => any) | undefined;
+}>, {
     variant: import("./types").BadgeVariant;
+    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/badge/index.vue

@@ -1,7 +1,8 @@
 <script setup>
+import CrossIcon from "@gdsicon/vue/cross";
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
 import { useConfigProvider } from "../../contexts/config-provider";
-import { tv } from "tailwind-variants";
 defineOptions({
   name: "PBadge",
   inheritAttrs: false
@@ -10,10 +11,12 @@ const props = defineProps({
   as: { type: [String, Object], required: false, default: "span" },
   href: { type: String, required: false },
   size: { type: String, required: false },
-  variant: { type: String, required: false, default: "gray" }
+  variant: { type: String, required: false, default: "pill" },
+  closeable: { type: Boolean, required: false }
 });
+const emits = defineEmits(["close"]);
 const badgeVariant = tv({
-  base: "pxd-badge font-medium gap-1 inline-flex items-center justify-center rounded-full font-sans text-nowrap whitespace-nowrap no-underline! motion-safe:transition-all",
+  base: "pxd-badge font-medium gap-1 inline-flex items-center justify-center rounded-full font-sans leading-none text-nowrap whitespace-nowrap no-underline! motion-safe:transition-appearance",
   variants: {
     variant: {
       pill: "bg-background-100",
@@ -40,9 +43,9 @@ const badgeVariant = tv({
       turborepo: "text-gray-100 dark:text-gray-1000"
     },
     size: {
-      sm: "px-2 h-5 text-xs",
+      sm: "px-1.5 h-5 text-xs",
       md: "px-2.5 h-6 text-xs",
-      lg: "px-3 h-7.5 text-sm"
+      lg: "px-3 h-8 text-sm"
     }
   },
   compoundVariants: [
@@ -61,11 +64,22 @@ const computedClasses = computed(() => {
   const { variant, size = configProvider.size } = props;
   return badgeVariant({ variant, size });
 });
+function onClose(ev) {
+  emits("close", ev);
+}
 </script>
 
 <template>
   <Component :is="as" :class="computedClasses" v-bind="$attrs">
     <slot />
+
+    <button
+      v-if="closeable"
+      class="pxd-badge--close p-1 -mr-1 relative cursor-pointer appearance-none rounded-full text-[.75em] self-focus-ring hover:bg-gray-alpha-200 active:bg-gray-alpha-300 motion-safe:transition-colors"
+      @click.stop="onClose"
+    >
+      <CrossIcon class="pointer-events-none" />
+    </button>
   </Component>
 </template>
 

package/dist/components/badge/types.d.ts

@@ -29,4 +29,9 @@ export interface BadgeProps {
   href?: string
   size?: ComponentSize
   variant?: BadgeVariant
+  closeable?: boolean
+}
+
+export interface BadgeEmits {
+  close: [Event]
 }

package/dist/components/book/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from "vue";
-import { getResponsiveValue } from "../../utils/responsive";
+import { getResponsiveValue } from "../../utils/get";
 defineOptions({
   name: "PBook",
   inheritAttrs: false

package/dist/components/browser/index.vue

@@ -48,7 +48,7 @@ const renderIcon = computed(() => isCopied.value ? CheckIcon : CopyIcon);
         >
           <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">
+          <div class="pl-1.5 min-w-0 flex-1 truncate text-center text-13 text-gray-1000">
             {{ address }}
           </div>
 

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

@@ -0,0 +1,22 @@
+import type { BubbleProps } from './types';
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_15: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    avatar?: (props: typeof __VLS_1) => any;
+} & {
+    header?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+} & {
+    footer?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BubbleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BubbleProps> & Readonly<{}>, {
+    role: "user" | "assistant";
+}, {}, {}, {}, 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/bubble/index.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed } from "vue";
+import PAvatar from "../avatar/index.vue";
+defineOptions({
+  name: "PBubble",
+  inheritAttrs: false
+});
+const props = defineProps({
+  role: { type: String, required: false, default: "assistant" },
+  header: { type: String, required: false },
+  avatar: { type: String, required: false },
+  loading: { type: Boolean, required: false }
+});
+const ariaLabel = computed(() => props.role === "user" ? "User message" : "Assistant message");
+</script>
+
+<template>
+  <article
+    class="pxd-bubble group/bubble [&+&]:mt-2 gap-2 flex max-w-full data-[role='user']:flex-row-reverse"
+    :aria-busy="loading"
+    :aria-label="ariaLabel"
+    :data-role="role"
+    role="article"
+    v-bind="$attrs"
+  >
+    <div v-if="avatar" data-bubble-avatar class="pxd-bubble--avatar shrink-0" aria-hidden="true">
+      <slot name="avatar">
+        <PAvatar :src="avatar" :alt="`${role} avatar`" size="32" />
+      </slot>
+    </div>
+
+    <div
+      class="pxd-bubble--wrapper text-sm gap-1 flex w-max max-w-[calc(100%-2.5rem)] flex-col [[data-bubble-avatar]+&]:max-w-[calc(100%-5rem)]"
+    >
+      <header
+        v-if="header || $slots.header"
+        class="pxd-bubble--header flex cursor-default items-center text-13 text-foreground-secondary group-data-[role='user']/bubble:justify-end"
+      >
+        <slot name="header">
+          {{ header }}
+        </slot>
+      </header>
+
+      <div
+        class="pxd-bubble--content py-2 px-3 overflow-hidden rounded-md border border-gray-alpha-100 bg-background-100 bg-gray-100 break-all whitespace-pre-wrap group-data-[role='assistant']/bubble:rounded-tl-none group-data-[role='user']/bubble:rounded-tr-none"
+      >
+        <PSpinner v-if="loading" class="translate-y-0.5" />
+        <slot v-else />
+      </div>
+
+      <footer
+        v-if="$slots.footer"
+        class="pxd-bubble--footer flex items-center group-data-[role='user']/bubble:justify-end"
+      >
+        <slot name="footer" />
+      </footer>
+    </div>
+  </article>
+</template>

package/dist/components/bubble/types.d.ts

@@ -0,0 +1,6 @@
+export interface BubbleProps {
+  role?: 'user' | 'assistant'
+  header?: string
+  avatar?: string
+  loading?: boolean
+}

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

@@ -10,8 +10,6 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     icon: boolean;
     as: import("../../types/shared").ComponentAs;
-    variant: import("./types").ButtonVariant;
-    align: "left" | "center" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;