pxd 0.0.13 → 0.0.15

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

@@ -0,0 +1,163 @@
+<script setup>
+import { computed } from "vue";
+import { useConfigProvider } from "../../composables/useConfigProviderContext";
+import { getStateColor } from "../../utils/colors";
+import { getAllDatesBetween } from "../../utils/date";
+defineOptions({
+  name: "PActiveGraph"
+});
+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: "var(--color-gray-alpha-200)",
+    5: "var(--color-green-300)",
+    10: "var(--color-green-500)",
+    15: "var(--color-green-700)",
+    20: "var(--color-green-900)"
+  }) }
+});
+const emits = defineEmits(["cellClick"]);
+const config = useConfigProvider();
+const allDates = computed(() => getAllDatesBetween(props.startDate, props.endDate));
+const dataCountsMap = computed(() => {
+  const map = props.data.reduce((acc, cur) => {
+    acc[cur.date] = (acc[cur.date] || 0) + cur.count;
+    return acc;
+  }, {});
+  return map;
+});
+const formatData = computed(() => {
+  const dataMap = dataCountsMap.value;
+  const dateList = allDates.value.dates;
+  const dateListLength = dateList.length;
+  const result = [];
+  const firstDayOfWeek = new Date(dateList[0]).getDay();
+  for (let i = 0; i < 7; i++) {
+    const row = [];
+    if (i < firstDayOfWeek) {
+      row.push({
+        hidden: true,
+        date: void 0,
+        count: 0,
+        color: void 0
+      });
+    }
+    result.push(row);
+  }
+  for (let i = 0; i < dateListLength; i++) {
+    const date = dateList[i];
+    const dateCount = dataMap[date] || 0;
+    const dayOfWeek = new Date(date).getDay();
+    result[dayOfWeek].push({
+      hidden: false,
+      date,
+      count: dateCount,
+      color: getStateColor(dateCount, props.colors)
+    });
+  }
+  return result;
+});
+const tableMonths = computed(() => {
+  const dates = allDates.value.dates;
+  const result = [];
+  const colCount = Math.ceil(allDates.value.dates.length / 7);
+  for (let i = 0; i < colCount; i++) {
+    result.push("");
+  }
+  const firstDate = new Date(dates[0]);
+  result[0] = config.locale.date.month[firstDate.getMonth()];
+  const firstDayOfWeek = firstDate.getDay();
+  let currentMonth = firstDate.getMonth();
+  for (let i = 1; i < dates.length; i++) {
+    const date = new Date(dates[i]);
+    const month = date.getMonth();
+    const day = date.getDate();
+    if (month !== currentMonth && day === 1) {
+      const colIndex = Math.floor((i + 7 - firstDayOfWeek) / 7);
+      if (colIndex < colCount) {
+        result[colIndex] = config.locale.date.month[month];
+        currentMonth = month;
+      }
+    }
+  }
+  return result;
+});
+function onCellClick(event) {
+  const target = event.target;
+  const date = target.dataset.date;
+  if (!date) {
+    return;
+  }
+  emits("cellClick", event, date);
+}
+</script>
+
+<template>
+  <div class="pxd-active-graph">
+    <table
+      role="grid"
+      aria-readonly="true"
+      class="pr-5 overflow-hidden"
+      style="border-spacing: 3px; border-collapse: separate"
+    >
+      <thead class="text-xs">
+        <tr class="h-3">
+          <th style="width: 30px;min-width: 30px;" />
+
+          <th
+            v-for="col in tableMonths"
+            :key="col"
+            class="relative font-normal text-gray-900"
+          >
+            <span class="absolute -top-1 left-0 whitespace-nowrap">{{ col }}</span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody class="text-xs" @click="onCellClick">
+        <tr v-for="(row, i) of formatData" :key="i" class="h-3">
+          <td class="relative leading-none text-gray-900">
+            <span class="absolute top-0 right-1">{{ [1, 3, 5].includes(i) ? config.locale.date.day[i] : ' ' }}</span>
+          </td>
+
+          <td
+            v-for="col of row"
+            :key="col.date"
+            class="rounded-xs w-3 min-w-3 motion-safe:transition-colors"
+            :data-date="col.date"
+            :class="{ 'pointer-events-none opacity-0': col.hidden }"
+            :style="`background: ${col.color}`"
+          />
+        </tr>
+
+        <template v-if="props.legend">
+          <tr class="h-0.5" />
+          <tr class="pxd-active-graph--legend select-none">
+            <td class="relative h-3 text-gray-700">
+              <span class="absolute top-1/2 right-1 -translate-y-1/2">{{ config.locale.compare.less }}</span>
+            </td>
+
+            <td
+              v-for="color in props.colors"
+              :key="color" class="w-3 h-3 rounded-xs motion-safe:transition-colors" :style="`background-color: ${color}`"
+            />
+
+            <td class="relative h-3 text-gray-700 w-3">
+              <span class="absolute top-1/2 left-px -translate-y-1/2" style="width: 30px;min-width: 30px;">{{ config.locale.compare.more }}</span>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+interface Props {
+    data?: any[];
+    legend?: boolean;
+    startDate?: string | Date;
+    endDate?: string | Date;
+    colors?: Record<string, string>;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cellClick: (args_0: MouseEvent, args_1: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onCellClick?: (args_0: MouseEvent, args_1: string) => any;
+}>, {
+    data: any[];
+    legend: boolean;
+    startDate: string | Date;
+    endDate: string | Date;
+    colors: Record<string, string>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/avatar/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, inject, ref } from "vue";
+import { computed, inject, shallowRef } from "vue";
 import { getCssUnitValue } from "../../utils/format";
 defineOptions({
   name: "PAvatar"
@@ -9,11 +9,29 @@ const props = defineProps({
   size: { type: [Number, String], required: false },
   loading: { type: Boolean, required: false }
 });
-defineEmits(["error"]);
-const isLoadFailed = ref(false);
+const emits = defineEmits(["load", "error", "loadstart"]);
+const loadingStatus = shallowRef("idle");
 const groupSize = inject("groupSize", 32);
 const computedSize = computed(() => getCssUnitValue(props.size || groupSize));
-const computedLoading = computed(() => props.loading || isLoadFailed.value);
+const computedLoading = computed(() => props.loading || loadingStatus.value === "error");
+function onLoadError(event) {
+  loadingStatus.value = "error";
+  emits("error", event);
+}
+function onLoadSuccess(event) {
+  loadingStatus.value = "loaded";
+  emits("load", event);
+}
+function onLoadStart(event) {
+  loadingStatus.value = "loading";
+  emits("loadstart", event);
+}
+function getLoadingStatus() {
+  return loadingStatus.value;
+}
+defineExpose({
+  getLoadingStatus
+});
 </script>
 
 <template>
@@ -32,7 +50,10 @@ const computedLoading = computed(() => props.loading || isLoadFailed.value);
         fetchpriority="low"
         crossorigin="anonymous"
         class="relative block rounded-inherit overflow-hidden w-full h-full"
-        @error="$emit('error', $event)"
+        @load="onLoadSuccess"
+        @loadstart="onLoadStart"
+        @abort="onLoadError"
+        @error="onLoadError"
       >
     </slot>
 
@@ -58,12 +79,12 @@ const computedLoading = computed(() => props.loading || isLoadFailed.value);
   }
 
   &::before {
-    background-image: linear-gradient(270deg, var(--gray-alpha-100), var(--gray-alpha-300), var(--gray-alpha-300), var(--gray-alpha-100));
+    background-image: linear-gradient(270deg, var(--color-gray-alpha-100), var(--color-gray-alpha-400), var(--color-gray-alpha-400), var(--color-gray-alpha-100));
     background-size: 400% 100%;
   }
 
   &::after {
-    border: 1px solid var(--gray-alpha-400)
+    border: 1px solid var(--color-gray-alpha-400)
   }
 }
 

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

@@ -3,16 +3,24 @@ interface Props {
     size?: number | string;
     loading?: boolean;
 }
+type LoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+declare function getLoadingStatus(): LoadingStatus;
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
     badge?: (props: typeof __VLS_3) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<Props, {
+    getLoadingStatus: typeof getLoadingStatus;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (args_0: Event) => any;
+    load: (args_0: Event) => any;
+    loadstart: (args_0: Event) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onError?: (args_0: Event) => any;
+    onLoad?: (args_0: Event) => any;
+    onLoadstart?: (args_0: Event) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/button/index.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   loading: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });
-const emits = defineEmits(["click"]);
+const emits = defineEmits(["click", "dblclick"]);
 const SIZES = {
   xs: "h-6 px-1 rounded-md",
   sm: "h-7.5 px-1.5 rounded-md",
@@ -32,10 +32,10 @@ const VARIANTS = {
   simple: "",
   default: "bg-background text-foreground hover:bg-background-hover active:bg-background-active border-input",
   ghost: "bg-transparent text-foreground hover:bg-gray-alpha-200 active:bg-gray-alpha-300 border-transparent",
-  primary: "bg-primary text-gray-100 hover:bg-primary/80 active:bg-primary border-transparent",
-  error: "bg-red-800 text-white  hover:bg-red-700 active:bg-red-800 border-transparent",
-  warning: "bg-amber-800 text-black hover:bg-amber-700 active:bg-amber-800 border-transparent",
-  success: "bg-green-800 text-white hover:bg-green-700 active:bg-green-800 border-transparent"
+  primary: "bg-primary text-gray-100 hover:bg-primary/80 active:bg-gray-900 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 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 = useComputedSize(props.size, SIZES);
@@ -63,6 +63,9 @@ const computedClasses = computed(() => {
 function onButtonClick(event) {
   emits("click", event);
 }
+function onButtonDblClick(event) {
+  emits("dblclick", event);
+}
 </script>
 
 <template>
@@ -72,6 +75,7 @@ function onButtonClick(event) {
     :class="computedClasses"
     :disabled="computedDisabled"
     @click="onButtonClick"
+    @dblclick.prevent="onButtonDblClick"
   >
     <Spinner v-if="loading" />
 

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

@@ -1,16 +1,18 @@
 import type { ButtonProps } from '../../types/components';
-declare var __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
+declare var __VLS_14: {}, __VLS_16: {}, __VLS_18: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_13) => any;
+    prefix?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_15) => any;
+    default?: (props: typeof __VLS_16) => any;
 } & {
-    suffix?: (props: typeof __VLS_17) => any;
+    suffix?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_component: 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;
+    onDblclick?: (args_0: MouseEvent) => any;
 }>, {
     variant: import("../../types/components").ComponentVariantWithDefault | "ghost" | "simple";
     as: import("../../types/components").ComponentAs;

package/dist/components/checkbox/index.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { CheckIcon, MinusIcon } from "gdsi/vue";
+import CheckIcon from "@gdsicon/vue/check";
+import MinusIcon from "@gdsicon/vue/minus";
 import { twMerge } from "tailwind-merge";
 import { computed, inject } from "vue";
 import { useModelValue } from "../../composables/useModelValue";
-import { getRandomId } from "../../utils/random";
+import { getUniqueId } from "../../utils/uid";
 defineOptions({
   name: "PCheckbox",
   model: {
@@ -20,7 +21,7 @@ const props = defineProps({
   indeterminate: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:modelValue"]);
-const randomId = getRandomId();
+const randomId = getUniqueId();
 const modelValue = useModelValue(props, emits);
 const checkboxGroupProps = inject("checkboxGroupProps", {
   disabled: false,

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

@@ -15,9 +15,9 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<Props, {
     getCheckedState: typeof getCheckedState;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: ValueType | ValueType[]) => any;
+    "update:modelValue": (args_0: NonNullable<ValueType | ValueType[]>) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: (args_0: ValueType | ValueType[]) => any;
+    "onUpdate:modelValue"?: (args_0: NonNullable<ValueType | ValueType[]>) => any;
 }>, {
     value: ValueType;
     modelValue: ValueType | ValueType[];

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

@@ -4,7 +4,11 @@ import { useModelValue } from "../../composables/useModelValue";
 import Checkbox from "../checkbox/index.vue";
 import Stack from "../stack/index.vue";
 defineOptions({
-  name: "PCheckboxGroup"
+  name: "PCheckboxGroup",
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
 });
 const props = defineProps({
   disabled: { type: Boolean, required: false },

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

@@ -1,11 +1,13 @@
 <script setup>
 import { provideConfigProvider } from "../../composables/useConfigProviderContext";
+import enUS from "../../locales/en-US";
 defineOptions({
   name: "PConfigProvider"
 });
 const props = defineProps({
   as: { type: null, required: false, default: "div" },
-  size: { type: String, required: false, default: "md" }
+  size: { type: String, required: false, default: "md" },
+  locale: { type: Object, required: false, default: () => enUS }
 });
 provideConfigProvider(props);
 </script>

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

@@ -10,6 +10,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: import("../../types/components").ComponentSize;
     as: ComponentAs;
+    locale: Record<string, any>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/description/index.vue

@@ -0,0 +1,31 @@
+<script setup>
+import InformationIcon from "@gdsicon/vue/information-fill-small";
+import Tooltip from "../tooltip/index.vue";
+defineOptions({
+  name: "PDescription"
+});
+defineProps({
+  title: { type: String, required: false },
+  content: { type: String, required: false },
+  tooltip: { type: String, required: false }
+});
+</script>
+
+<template>
+  <dl class="pxd-description">
+    <dt data-pxd-description-title class="flex items-center text-sm text-foreground-secondary leading-none mb-2 min-h-3.5 capitalize text-nowrap">
+      <slot name="title">
+        {{ title }}
+      </slot>
+
+      <Tooltip v-if="tooltip" :content="tooltip">
+        <InformationIcon class="ml-1" />
+      </Tooltip>
+    </dt>
+    <dd data-pxd-description-content class="text-sm text-foreground font-medium leading-4">
+      <slot name="content">
+        {{ content }}
+      </slot>
+    </dd>
+  </dl>
+</template>

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

@@ -0,0 +1,19 @@
+interface Props {
+    title?: string;
+    content?: string;
+    tooltip?: string;
+}
+declare var __VLS_1: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    content?: (props: typeof __VLS_10) => 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/error/index.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ExternalIcon, StopIcon } from "gdsi/vue";
+import ExternalIcon from "@gdsicon/vue/external";
+import StopIcon from "@gdsicon/vue/stop";
 import { useConfigProvider } from "../../composables/useConfigProviderContext";
 import { isExternalLink } from "../../utils/format";
 defineOptions({
@@ -20,20 +21,23 @@ const SIZES = {
 </script>
 
 <template>
-  <div class="pxd-error flex items-center gap-1.5 text-red-900" :class="SIZES[size || config.size]">
-    <StopIcon class="size-4" />
-    <b v-if="label || error?.label" class="font-medium">{{ label || error?.label }}:</b>
+  <div class="pxd-error flex text-red-900" :class="SIZES[size || config.size]">
+    <StopIcon class="size-4 min-w-4 mr-2 mt-0.5" :class="{ 'mt-1': size === 'lg' || config.size === 'lg' }" />
 
-    <slot>
-      {{ error?.message }}
+    <div class="flex-1">
+      <b v-if="label || error?.label" class="font-medium whitespace-nowrap">{{ label || error?.label }}:</b>
 
-      <span v-if="error?.action && error?.link">
-        <a :href="error.link" class="text-red-900 font-medium inline-flex items-center gap-1 underline" :target="isExternalLink(error.link) ? '_blank' : '_self'">
-          {{ error.action }}
+      <slot>
+        {{ error?.message }}
 
-          <ExternalIcon v-if="isExternalLink(error.link)" class="text-sm" />
-        </a>
-      </span>
-    </slot>
+        <span v-if="error?.action && error?.link">
+          <a :href="error.link" class="text-red-900 font-medium inline-flex items-center gap-1 underline" :target="isExternalLink(error.link) ? '_blank' : '_self'">
+            {{ error.action }}
+
+            <ExternalIcon v-if="isExternalLink(error.link)" class="text-sm" />
+          </a>
+        </span>
+      </slot>
+    </div>
   </div>
 </template>

package/dist/components/gauge/index.vue

@@ -1,12 +1,17 @@
 <script setup>
-import { ChartActivityIcon } from "gdsi/vue";
+import ChartActivityIcon from "@gdsicon/vue/chart-activity";
 import { computed } from "vue";
 import { useComputedSize } from "../../composables/useComputedSize";
+import { getStateColor } from "../../utils/colors";
 defineOptions({
-  name: "PGauge"
+  name: "PGauge",
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
 });
 const props = defineProps({
-  modelValue: { type: Number, required: false, default: 60 },
+  modelValue: { type: [Number, null], required: false, default: 60 },
   showValue: { type: Boolean, required: false, default: false },
   indeterminate: { type: Boolean, required: false },
   size: { type: String, required: false },
@@ -69,25 +74,15 @@ const trackOffset = computed(() => {
     return 0;
   return -progressArc.value - GAP_LENGTH;
 });
-const sortedColorKeys = computed(() => Object.keys(props.colors || defaultColors).map(Number).sort((a, b) => a - b));
 const progressColors = computed(() => {
   const colors = props.colors || defaultColors;
   let primaryColor = colors.primary;
-  let secondaryColor = colors.secondary || "hsl(var(--gray-200-value))";
+  let secondaryColor = colors.secondary || "hsl(var(--color-gray-200-value))";
   if (props.indeterminate) {
-    primaryColor = "hsl(var(--gray-200-value))";
-    secondaryColor = "hsl(var(--gray-200-value))";
+    primaryColor = "hsl(var(--color-gray-200-value))";
+    secondaryColor = "hsl(var(--color-gray-200-value))";
   } else if (!primaryColor) {
-    const sortedKeys = sortedColorKeys.value;
-    for (let i = 0; i < sortedKeys.length; i++) {
-      if (progress.value < sortedKeys[i]) {
-        primaryColor = colors[sortedKeys[i - 1]];
-        break;
-      }
-    }
-    if (!primaryColor && sortedKeys.length > 0) {
-      primaryColor = colors[sortedKeys.at(-1)];
-    }
+    primaryColor = getStateColor(progress.value, colors) || colors.primary;
   }
   return {
     primary: primaryColor,

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

@@ -1,13 +1,13 @@
 import type { ComponentSizeWithXs } from '../../types/components';
 interface Props {
-    modelValue?: number;
+    modelValue?: number | null;
     showValue?: boolean;
     indeterminate?: boolean;
     size?: ComponentSizeWithXs;
     colors?: Record<string, string>;
 }
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    modelValue: number;
+    modelValue: number | null;
     showValue: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/hold-button/index.vue

@@ -7,7 +7,7 @@ defineOptions({
 const props = defineProps({
   scalable: { type: Boolean, required: false, default: true },
   durations: { type: [Number, String], required: false, default: 2 },
-  maskColor: { type: String, required: false, default: "var(--gray-alpha-600)" },
+  maskColor: { type: String, required: false, default: "var(--color-gray-alpha-600)" },
   cancelable: { type: Boolean, required: false },
   variant: { type: String, required: false },
   size: { type: String, required: false },

package/dist/components/index.d.ts

@@ -1,11 +1,12 @@
+export { default as ActiveGraph } from './active-graph/index.vue';
 export { default as Avatar } from './avatar/index.vue';
 export { default as AvatarGroup } from './avatar-group/index.vue';
 export { default as Badge } from './badge/index.vue';
 export { default as Button } from './button/index.vue';
 export { default as Checkbox } from './checkbox/index.vue';
 export { default as CheckboxGroup } from './checkbox-group/index.vue';
-export { default as ColorScheme } from './color-scheme/index.vue';
 export { default as ConfigProvider } from './config-provider/index.vue';
+export { default as Description } from './description/index.vue';
 export { default as Error } from './error/index.vue';
 export { default as Gauge } from './gauge/index.vue';
 export { default as HoldButton } from './hold-button/index.vue';
@@ -25,4 +26,6 @@ export { default as Spinner } from './spinner/index.vue';
 export { default as Stack } from './stack/index.vue';
 export { default as StatusDot } from './status-dot/index.vue';
 export { default as Textarea } from './textarea/index.vue';
+export { default as ThemeSwitcher } from './theme-switcher/index.vue';
 export { default as Toggle } from './toggle/index.vue';
+export { default as Tooltip } from './tooltip/index.vue';

package/dist/components/index.js

@@ -1,11 +1,12 @@
+export { default as ActiveGraph } from "./active-graph/index.vue";
 export { default as Avatar } from "./avatar/index.vue";
 export { default as AvatarGroup } from "./avatar-group/index.vue";
 export { default as Badge } from "./badge/index.vue";
 export { default as Button } from "./button/index.vue";
 export { default as Checkbox } from "./checkbox/index.vue";
 export { default as CheckboxGroup } from "./checkbox-group/index.vue";
-export { default as ColorScheme } from "./color-scheme/index.vue";
 export { default as ConfigProvider } from "./config-provider/index.vue";
+export { default as Description } from "./description/index.vue";
 export { default as Error } from "./error/index.vue";
 export { default as Gauge } from "./gauge/index.vue";
 export { default as HoldButton } from "./hold-button/index.vue";
@@ -25,4 +26,6 @@ export { default as Spinner } from "./spinner/index.vue";
 export { default as Stack } from "./stack/index.vue";
 export { default as StatusDot } from "./status-dot/index.vue";
 export { default as Textarea } from "./textarea/index.vue";
+export { default as ThemeSwitcher } from "./theme-switcher/index.vue";
 export { default as Toggle } from "./toggle/index.vue";
+export { default as Tooltip } from "./tooltip/index.vue";