pxd 0.0.54 → 0.0.60

package/README.md

@@ -1,17 +1,23 @@
 # PXD
 
-A universal UI component library for Vue@2.7+ & Vue@3.2+
+A Vue 2.7 & 3.2 universal component library. Built-in light/dark theme. PC & mobile ready. Animation-free mode supported.
+
+[简体中文](README-CN.md) | [Online Preview](https://pxd-ui.netlify.app/)
 
-[Online Preview](https://pxd-ui.netlify.app/)
 
 > [!WARNING]
 > The project is under active development and is not ready for production.
 
 ## Features
 
-- Vue 3 Composition API
-- 100% compatible with Vue2.7+ & Vue3.2+
+- Universal: One codebase for Vue 2.7+ and Vue 3.2+
+- Responsive: Seamlessly works on both PC and mobile devices
+- Built-in light & dark theme, no extra configuration needed
+- Motion-safe: Supports fully disabling all animations
+- Written in TypeScript with full type definitions
+- Vue 3 Composition API with `<script setup>`
 - Complete tree-shaking support
+- Inspired by the [Geist Design System](https://vercel.com/geist/introduction)
 
 ## Contribution
 
@@ -43,6 +49,14 @@ pnpm build:docs
 pnpm build
 ```
 
+## Contribution Guidelines
+
+### Component Naming Rules
+
+- Components that can be used independently do not need to add -group/-item suffix, such as: `Checkbox`, `Radio`, `Toggle`, `ToggleButton`
+- Components that are used to manage a group of sub-components need to add -group suffix, such as: `CheckboxGroup`, `RadioGroup`, `ToggleGroup`, `ToggleButtonGroup`
+- Components that can only be used as a sub-component of another component need to add -item suffix, such as: `ListItem`, `GridItem`, `MessageItem`
+
 ## Reference
 
 - [Geist Design System](https://vercel.com/geist/introduction)

package/dist/components/_internal/fragment-container.vue

@@ -1,11 +1,12 @@
 <script setup>
 defineOptions({
-  name: "PFragmentContainer"
+  name: "PFragmentContainer",
+  inheritAttrs: false
 });
 </script>
 
 <template>
-  <div class="pxd-fragment-container">
+  <div class="pxd-fragment-container" v-bind="$attrs">
     <slot />
   </div>
 </template>

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

@@ -1,42 +1,17 @@
-interface FieldNames {
-    date: string;
-    count: string;
-}
-interface Props {
-    data?: Record<string, any>[];
-    legend?: boolean;
-    startDate?: string | Date;
-    endDate?: string | Date;
-    colors?: Record<string, string>;
-    graphOnly?: boolean;
-    transpose?: boolean;
-    tooltip?: boolean;
-    fieldNames?: FieldNames;
-    itemRadius?: string | number;
-}
-interface TooltipInfo {
-    date: string;
-    count: number;
-    left: number;
-    top: number;
-}
+import type { ActiveGraphProps, ActiveGraphTooltipInfo } from './types';
 declare var __VLS_7: {
-    data: TooltipInfo;
+    data: ActiveGraphTooltipInfo;
 };
 type __VLS_Slots = {} & {
     tooltip?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "cell-click": (args_0: MouseEvent, args_1: string) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onCell-click"?: ((args_0: MouseEvent, args_1: string) => any) | undefined;
+declare const __VLS_base: import("vue").DefineComponent<ActiveGraphProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (args_0: string, args_1: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<ActiveGraphProps> & Readonly<{
+    onSelect?: ((args_0: string, args_1: MouseEvent) => any) | undefined;
 }>, {
     data: Record<string, any>[];
     legend: boolean;
-    startDate: string | Date;
-    endDate: string | Date;
-    colors: Record<string, string>;
-    graphOnly: boolean;
     tooltip: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,43 +1,61 @@
 <script setup>
 import { computed, onBeforeUnmount, shallowRef } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { useDelayChange } from "../../composables/use-delay-change";
 import { getAllDatesBetween } from "../../utils/date";
 import { getCssUnitValue } from "../../utils/format";
 import { getColorByThreshold } from "../../utils/get";
 defineOptions({
-  name: "PActiveGraph"
+  name: "PActiveGraph",
+  inheritAttrs: false
 });
 const props = defineProps({
   data: { type: Array, required: false, default: () => [] },
   legend: { type: Boolean, required: false, default: true },
-  startDate: { type: [String, Date], required: false, default: () => {
-    const date = /* @__PURE__ */ new Date();
-    date.setFullYear(date.getFullYear() - 1);
-    while (date.getDay() !== 0) {
-      date.setDate(date.getDate() - 1);
-    }
-    return date;
-  } },
-  endDate: { type: [String, Date], required: false, default: () => /* @__PURE__ */ new Date() },
-  colors: { type: Object, required: false, default: () => ({
-    0: "",
-    5: "var(--color-green-300)",
-    10: "var(--color-green-500)",
-    15: "var(--color-green-700)",
-    20: "var(--color-green-900)"
-  }) },
-  graphOnly: { type: Boolean, required: false, default: false },
-  transpose: { type: Boolean, required: false },
+  colors: { type: Object, required: false },
+  startDate: { type: [String, Date], required: false },
+  endDate: { type: [String, Date], required: false },
   tooltip: { type: Boolean, required: false, default: true },
+  graphOnly: { type: Boolean, required: false },
+  transpose: { type: Boolean, required: false },
   fieldNames: { type: Object, required: false },
-  itemRadius: { type: [String, Number], required: false }
+  itemRadius: { type: [String, Number], required: false },
+  defaultSelect: { type: String, required: false }
 });
-const emits = defineEmits(["cell-click"]);
+const emits = defineEmits(["select"]);
 const configProvider = useConfigProvider();
 const CELL_GAP = 3;
 const CELL_SIZE = 12;
-const rangedDates = computed(() => getAllDatesBetween(props.startDate, props.endDate));
+const selectedDate = shallowRef(props.defaultSelect);
+const getDefaultStartDate = () => {
+  const date = /* @__PURE__ */ new Date();
+  date.setFullYear(date.getFullYear() - 1);
+  while (date.getDay() !== 0) {
+    date.setDate(date.getDate() - 1);
+  }
+  return date;
+};
+const getDefaultEndDate = () => {
+  return /* @__PURE__ */ new Date();
+};
+const computedColors = computed(() => {
+  if (props.colors) {
+    return props.colors;
+  }
+  return {
+    0: "",
+    5: "var(--color-green-300)",
+    10: "var(--color-green-500)",
+    15: "var(--color-green-700)",
+    20: "var(--color-green-900)"
+  };
+});
+const rangedDates = computed(
+  () => getAllDatesBetween(
+    props.startDate || getDefaultStartDate(),
+    props.endDate || getDefaultEndDate()
+  )
+);
 const dateCountMap = computed(() => {
   const { date, count } = props.fieldNames || { date: "date", count: "count" };
   return props.data.reduce(
@@ -123,7 +141,7 @@ function createTransposedTableData() {
       hidden: false,
       date: dateStr,
       count,
-      color: getColorByThreshold(count, props.colors)
+      color: getColorByThreshold(count, computedColors.value)
     });
     if (month !== currentMonth || year !== currentYear) {
       currentMonth = month;
@@ -175,7 +193,7 @@ function createStandardTableData() {
       hidden: false,
       date: dateStr,
       count,
-      color: getColorByThreshold(count, props.colors)
+      color: getColorByThreshold(count, computedColors.value)
     });
   }
   return result;
@@ -207,7 +225,8 @@ function onCellClick(event) {
   if (!date) {
     return;
   }
-  emits("cell-click", event, date);
+  selectedDate.value = selectedDate.value === date ? "" : date;
+  emits("select", date, event);
 }
 let tbodyRect;
 const tbodyRef = shallowRef();
@@ -254,7 +273,11 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="pxd-active-graph relative" :class="[graphOnly ? 'py-0.75 pr-0.75' : 'pr-5']">
+  <div
+    class="pxd-active-graph relative"
+    :class="[graphOnly ? 'py-0.75 pr-0.75' : 'pr-5']"
+    v-bind="$attrs"
+  >
     <table
       role="grid"
       aria-readonly="true"
@@ -295,33 +318,37 @@ onBeforeUnmount(() => {
           <td
             v-for="col of row"
             :key="col.date"
-            class="pxd-active-graph--item w-3 min-w-3 rounded-(--item-radius) bg-gray-alpha-200 motion-safe:transition-colors"
+            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"
             :data-date="col.date"
-            :class="{ 'pointer-events-none opacity-0': col.hidden }"
+            :class="{
+  'pointer-events-none invisible': col.hidden,
+  'opacity-30': selectedDate && col.date !== selectedDate,
+  'border-primary!': selectedDate && col.date === selectedDate
+}"
             :style="`background: ${col.color}`"
           />
         </tr>
 
-        <template v-if="props.legend">
+        <template v-if="legend">
           <tr class="pxd-active-graph--placeholder h-0.5 pointer-events-none" />
           <tr class="pxd-active-graph--legend pointer-events-none">
             <td class="h-3 relative text-foreground-secondary">
-              <span class="right-1 absolute top-1/2 -translate-y-1/2">{{
-                configProvider.locale.compare.less
-              }}</span>
+              <span class="right-1 absolute top-1/2 -translate-y-1/2">
+                {{ configProvider.locale.compare.less }}
+              </span>
             </td>
 
             <td
-              v-for="color in props.colors"
+              v-for="color in computedColors"
               :key="color"
-              class="w-3 h-3 rounded-(--item-radius) bg-gray-alpha-200 motion-safe:transition-colors"
+              class="w-3 h-3 rounded-(--item-radius) bg-gray-alpha-100 motion-safe:transition-colors"
               :style="`background-color: ${color}`"
             />
 
             <td class="h-3 w-3 relative text-foreground-secondary">
-              <span class="absolute top-1/2 left-px -translate-y-1/2">{{
-                configProvider.locale.compare.more
-              }}</span>
+              <span class="absolute top-1/2 left-px -translate-y-1/2">
+                {{ configProvider.locale.compare.more }}
+              </span>
             </td>
           </tr>
         </template>

package/dist/components/active-graph/types.d.ts

@@ -0,0 +1,42 @@
+interface FieldNames {
+  date: string
+  count: string
+}
+
+export interface ActiveGraphProps {
+  data?: Record<string, any>[]
+  legend?: boolean
+  colors?: Record<string, string>
+  startDate?: string | Date
+  endDate?: string | Date
+  tooltip?: boolean
+  graphOnly?: boolean
+  transpose?: boolean
+  fieldNames?: FieldNames
+  itemRadius?: string | number
+  defaultSelect?: string
+}
+
+export interface ActiveGraphEmits {
+  select: [string, MouseEvent]
+}
+
+export interface ActiveGraphCellData {
+  hidden?: boolean
+  count: number
+  color?: string
+  date?: string
+}
+
+export interface ActiveGraphRowData extends Array<ActiveGraphCellData> {
+  isMonthFirstRow?: boolean
+  monthName?: string
+  headerText: string
+}
+
+export interface ActiveGraphTooltipInfo {
+  date: string
+  count: number
+  left: number
+  top: number
+}

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

@@ -1,25 +1,18 @@
-interface Props {
-    src?: string;
-    alt?: string;
-    size?: number | string;
-    loading?: boolean;
-    placeholder?: boolean;
-}
-type LoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
-declare function getLoadingStatus(): LoadingStatus;
+import type { AvatarStatus, AvatarProps } from './types';
+declare function getLoadingStatus(): AvatarStatus;
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
     icon?: (props: typeof __VLS_3) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {
+declare const __VLS_base: import("vue").DefineComponent<AvatarProps, {
     getLoadingStatus: typeof getLoadingStatus;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     load: (args_0: Event) => any;
     error: (args_0: Event) => any;
     loadstart: (args_0: Event) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{
     onLoad?: ((args_0: Event) => any) | undefined;
     onError?: ((args_0: Event) => any) | undefined;
     onLoadstart?: ((args_0: Event) => any) | undefined;

package/dist/components/avatar/index.vue

@@ -3,7 +3,8 @@ import { computed, shallowRef } from "vue";
 import { useAvatarGroupContext } from "../../contexts/avatar";
 import { getCssUnitValue } from "../../utils/format";
 defineOptions({
-  name: "PAvatar"
+  name: "PAvatar",
+  inheritAttrs: false
 });
 const props = defineProps({
   src: { type: String, required: false },
@@ -15,8 +16,10 @@ const props = defineProps({
 const emits = defineEmits(["load", "error", "loadstart"]);
 const loadingStatus = shallowRef("idle");
 const avatarGroupContext = useAvatarGroupContext();
-const computedSize = computed(() => getCssUnitValue(props.size || avatarGroupContext?.size, "32px"));
-const hideAvatar = computed(
+const computedSize = computed(
+  () => getCssUnitValue(props.size || avatarGroupContext?.props.size, "32px")
+);
+const isHideAvatar = computed(
   () => !props.src || props.placeholder || loadingStatus.value === "error"
 );
 function onLoadError(event) {
@@ -41,12 +44,20 @@ defineExpose({
 
 <template>
   <div
-    class="pxd-avatar relative inline-flex size-(--avatar-size) items-center justify-center rounded-full border border-background-100 select-none before:default-animation-timing-function! motion-safe:before:animate-[placeholder_8s_infinite]"
+    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]"
     :style="{ '--avatar-size': computedSize }"
+    :data-placeholder="placeholder"
+    v-bind="$attrs"
   >
     <slot>
+      <span
+        v-if="isHideAvatar"
+        class="font-medium px-1 relative flex size-full items-center justify-center overflow-hidden rounded-inherit"
+      >
+        {{ alt }}
+      </span>
       <img
-        v-if="!hideAvatar"
+        v-else
         :src="src"
         :alt="alt"
         loading="lazy"
@@ -54,7 +65,7 @@ defineExpose({
         aria-hidden="true"
         fetchpriority="low"
         crossorigin="anonymous"
-        class="relative block size-full overflow-hidden rounded-inherit"
+        class="relative block size-full overflow-hidden rounded-inherit bg-gray-100"
         @load="onLoadSuccess"
         @loadstart="onLoadStart"
         @abort="onLoadError"
@@ -78,17 +89,15 @@ defineExpose({
 
 <style lang="postcss">
 .pxd-avatar {
-  &::before,
-  &::after {
+  &::after,
+  &[data-placeholder='true']::before {
     content: '';
-    width: 100%;
-    height: 100%;
     position: absolute;
     inset: 0;
     border-radius: inherit;
   }
 
-  &::before {
+  &[data-placeholder='true']::before {
     background-image: linear-gradient(
       270deg,
       var(--color-gray-alpha-100),
@@ -97,6 +106,8 @@ defineExpose({
       var(--color-gray-alpha-100)
     );
     background-size: 400% 100%;
+    animation-name: placeholder;
+    animation-iteration-count: infinite;
   }
 
   &::after {

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

@@ -0,0 +1,15 @@
+export type AvatarStatus = 'idle' | 'loading' | 'loaded' | 'error'
+
+export interface AvatarProps {
+  src?: string
+  alt?: string
+  size?: number | string
+  loading?: boolean
+  placeholder?: boolean
+}
+
+export interface AvatarEmits {
+  load: [Event]
+  error: [Event]
+  loadstart: [Event]
+}

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

@@ -1,8 +1,8 @@
-import type { AvatarGroupProps } from '../../types/components/avatar';
+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/components/avatar").AvatarOptions[];
+    options: import("./types").AvatarOptions[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -3,7 +3,8 @@ import { computed } from "vue";
 import { provideAvatarGroupContext } from "../../contexts/avatar";
 import PAvatar from "../avatar/index.vue";
 defineOptions({
-  name: "PAvatarGroup"
+  name: "PAvatarGroup",
+  inheritAttrs: false
 });
 const props = defineProps({
   max: { type: Number, required: false, default: 5 },
@@ -15,11 +16,11 @@ const slicedOptions = computed(() => {
   const maxCount = Math.max(Math.min(max, options.length), 1);
   return options.slice(0, maxCount);
 });
-provideAvatarGroupContext(props);
+provideAvatarGroupContext({ props });
 </script>
 
 <template>
-  <div class="pxd-avatar-group flex flex-wrap items-center">
+  <div class="pxd-avatar-group flex flex-wrap items-center" v-bind="$attrs">
     <PAvatar
       v-for="(option, index) in slicedOptions"
       :key="index"
@@ -27,7 +28,7 @@ provideAvatarGroupContext(props);
       :src="option.src"
       :alt="option.alt"
       :loading="option.loading"
-      class="[&:nth-child(n+2)]:-ml-2.5 hover:z-1"
+      class="nth-[n+2]:-ml-2.5 hover:z-1"
     />
 
     <PAvatar

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

@@ -1,14 +1,9 @@
-interface Props {
-    right?: string | number;
-    bottom?: string | number;
-    zIndex?: string | number;
-    visibleThreshold?: number;
-}
+import type { BacktopProps } from './types';
 declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<BacktopProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BacktopProps> & Readonly<{}>, {
     visibleThreshold: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -0,0 +1,6 @@
+export interface BacktopProps {
+  right?: string | number
+  bottom?: string | number
+  zIndex?: string | number
+  visibleThreshold?: number
+}

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

@@ -1,18 +1,11 @@
-import type { ComponentAs, ComponentSize } from '../../types/shared';
-import type { BadgeVariant } from './cn';
-interface Props {
-    as?: ComponentAs;
-    href?: string;
-    size?: ComponentSize;
-    variant?: BadgeVariant;
-}
+import type { BadgeProps } from './types';
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    variant: BadgeVariant;
-    as: ComponentAs;
+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;
+    variant: import("./types").BadgeVariant;
 }, {}, {}, {}, 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,17 +1,61 @@
 <script setup>
 import { computed } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
-import { badgeVariant } from "./cn";
+import { useConfigProvider } from "../../contexts/config-provider";
+import { tv } from "tailwind-variants";
 defineOptions({
   name: "PBadge",
   inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: null, required: false, default: "span" },
+  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" }
 });
+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",
+  variants: {
+    variant: {
+      pill: "bg-background-100",
+      primary: "bg-primary text-gray-100",
+      gray: "text-white bg-gray-600",
+      blue: "bg-blue-700 text-gray-100 dark:text-gray-1000",
+      purple: "bg-purple-700 text-gray-100 dark:text-gray-1000",
+      amber: "bg-amber-700 text-gray-1000 dark:text-gray-100",
+      red: "bg-red-700 text-gray-100 dark:text-gray-1000",
+      pink: "bg-pink-700 text-gray-100 dark:text-gray-1000",
+      green: "bg-green-700 text-gray-100 dark:text-gray-1000",
+      teal: "bg-teal-700 text-gray-100 dark:text-gray-1000",
+      "gray-subtle": "bg-gray-200 text-gray-1000",
+      "blue-subtle": "bg-blue-200 text-blue-900",
+      "purple-subtle": "bg-purple-200 text-purple-900",
+      "amber-subtle": "bg-amber-200 text-amber-900",
+      "red-subtle": "bg-red-200 text-red-900",
+      "pink-subtle": "bg-pink-200 text-pink-900",
+      "green-subtle": "bg-green-200 text-green-900",
+      "teal-subtle": "bg-teal-200 text-teal-900",
+      inverted: "bg-gray-1000 text-gray-100",
+      vue: "text-gray-100 dark:text-gray-1000",
+      trial: "text-gray-100 dark:text-gray-1000",
+      turborepo: "text-gray-100 dark:text-gray-1000"
+    },
+    size: {
+      sm: "px-2 h-5 text-xs",
+      md: "px-2.5 h-6 text-xs",
+      lg: "px-3 h-7.5 text-sm"
+    }
+  },
+  compoundVariants: [
+    { variant: "pill", class: "pill" },
+    { variant: "vue", class: "vue" },
+    { variant: "trial", class: "trial" },
+    { variant: "turborepo", class: "turborepo" }
+  ],
+  defaultVariants: {
+    variant: "gray",
+    size: "md"
+  }
+});
 const configProvider = useConfigProvider();
 const computedClasses = computed(() => {
   const { variant, size = configProvider.size } = props;

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

@@ -0,0 +1,32 @@
+import type { ComponentAs, ComponentSize } from '../../types/shared'
+
+export type BadgeVariant =
+  | 'pill'
+  | 'primary'
+  | 'gray'
+  | 'blue'
+  | 'purple'
+  | 'amber'
+  | 'red'
+  | 'pink'
+  | 'green'
+  | 'teal'
+  | 'gray-subtle'
+  | 'blue-subtle'
+  | 'purple-subtle'
+  | 'amber-subtle'
+  | 'red-subtle'
+  | 'pink-subtle'
+  | 'green-subtle'
+  | 'teal-subtle'
+  | 'inverted'
+  | 'vue'
+  | 'trial'
+  | 'turborepo'
+
+export interface BadgeProps {
+  as?: ComponentAs
+  href?: string
+  size?: ComponentSize
+  variant?: BadgeVariant
+}