pxd 0.0.61 → 0.0.63

package/dist/components/ellipsis-text/index.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { prepareWithSegments, layoutWithLines } from "@chenglou/pretext";
+import { prepareRichInline, measureRichInlineStats } from "@chenglou/pretext/rich-inline";
 import { twMerge } from "tailwind-merge";
 import { shallowRef, computed, nextTick, watch } from "vue";
 import { useResizeObserver } from "../../composables/use-browser-observer";
@@ -16,15 +18,16 @@ const props = defineProps({
   position: { type: String, required: false, default: "end" },
   moreText: { type: String, required: false, default: "Expand" },
   lessText: { type: String, required: false, default: "Collapse" },
-  actionClass: { type: String, required: false }
+  moreActionClass: { type: String, required: false },
+  lessActionClass: { type: String, required: false }
 });
 const emits = defineEmits(["toggle"]);
 const isExpanded = shallowRef(false);
-const isTruncated = shallowRef(false);
+const isOverflow = shallowRef(false);
 const ellipsisText = shallowRef(props.text);
-const containerRef = shallowRef();
 const textRef = shallowRef();
 const actionRef = shallowRef();
+const containerRef = shallowRef();
 const maxRows = computed(() => {
   const rows = Number(props.rows ?? 1);
   return Number.isFinite(rows) && rows > 0 ? Math.floor(rows) : 1;
@@ -32,7 +35,7 @@ const maxRows = computed(() => {
 const computedActionClass = computed(() => {
   return twMerge(
     "pxd-ellipsis-text--action cursor-pointer whitespace-nowrap text-blue-900",
-    props.actionClass
+    isExpanded.value ? props.lessActionClass : props.moreActionClass
   );
 });
 const displayText = computed(() => {
@@ -55,18 +58,6 @@ function toggleAction() {
   emits("toggle", isExpanded.value);
   updateEllipsis();
 }
-const TEXT_STYLE_KEYS = [
-  "fontFamily",
-  "fontSize",
-  "fontWeight",
-  "fontStyle",
-  "fontVariant",
-  "letterSpacing",
-  "lineHeight",
-  "textTransform",
-  "textRendering",
-  "wordSpacing"
-];
 function parseSize(value) {
   const parsed = Number.parseFloat(value);
   return Number.isFinite(parsed) ? parsed : 0;
@@ -83,74 +74,39 @@ function getLineHeightPx(style) {
   }
   return parsed;
 }
-function applyTextStyles(style, target) {
-  TEXT_STYLE_KEYS.forEach((key) => {
-    target.style.setProperty(
-      key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`),
-      style[key]
-    );
-  });
-  target.style.display = "inline";
-  target.style.whiteSpace = "pre-wrap";
-  target.style.wordBreak = "break-word";
+function getFontShorthand(style) {
+  const fontStyle = style.fontStyle || "normal";
+  const fontWeight = style.fontWeight || "400";
+  const fontSize = style.fontSize || "16px";
+  const fontFamily = style.fontFamily || "sans-serif";
+  return `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
+}
+function getAvailableWidth(container) {
+  const containerStyle = getStyle(container);
+  const paddingLeft = parseSize(containerStyle.paddingLeft);
+  const paddingRight = parseSize(containerStyle.paddingRight);
+  return Math.max(0, container.clientWidth - paddingLeft - paddingRight);
+}
+function measureLineCount(text, textFont, maxWidth, actionText, actionFont) {
+  const items = [{ text, font: textFont }];
+  if (actionText) {
+    items.push({ text: actionText, font: actionFont || textFont, break: "never" });
+  }
+  return measureRichInlineStats(prepareRichInline(items), maxWidth).lineCount;
+}
+function joinChars(chars, start, end) {
+  return chars.slice(start, end).join("");
 }
 function buildCandidate(chars, keep, dots, position) {
   if (keep <= 0) {
     return dots;
   }
   if (position === "start") {
-    return `${dots}${chars.slice(chars.length - keep).join("")}`;
+    return `${dots}${joinChars(chars, chars.length - keep, chars.length)}`;
   }
-  if (position === "middle") {
-    const headLen = Math.ceil(keep / 2);
-    const tailLen = keep - headLen;
-    const head = chars.slice(0, headLen).join("");
-    const tail = chars.slice(chars.length - tailLen).join("");
-    return `${head}${dots}${tail}`;
-  }
-  return `${chars.slice(0, keep).join("")}${dots}`;
-}
-function createMeasureElements(parent) {
-  const mc = document.createElement("span");
-  const mt = document.createElement("span");
-  const ma = document.createElement("span");
-  mc.append(mt, ma);
-  mc.style.position = "absolute";
-  mc.style.visibility = "hidden";
-  mc.style.pointerEvents = "none";
-  mc.style.zIndex = "-1";
-  mc.style.left = "0";
-  mc.style.top = "0";
-  mc.style.overflow = "visible";
-  mc.style.whiteSpace = "pre-wrap";
-  mc.style.wordBreak = "break-word";
-  mc.style.display = "block";
-  mc.style.boxSizing = "border-box";
-  parent.appendChild(mc);
-  return { container: mc, text: mt, action: ma };
-}
-function syncMeasureStyles(elements, container, textEl, actionEl) {
-  const containerStyle = getStyle(container);
-  const paddingLeft = parseSize(containerStyle.paddingLeft);
-  const paddingRight = parseSize(containerStyle.paddingRight);
-  const availableWidth = Math.max(0, container.clientWidth - paddingLeft - paddingRight);
-  elements.container.style.width = `${availableWidth}px`;
-  const textStyle = getStyle(textEl ?? container);
-  applyTextStyles(textStyle, elements.text);
-  const actionStyle = actionEl ? getStyle(actionEl) : textStyle;
-  applyTextStyles(actionStyle, elements.action);
-}
-function fits(elements, text, actionText, maxHeight) {
-  elements.text.textContent = text;
-  if (actionText) {
-    elements.action.textContent = actionText;
-    elements.action.style.display = "inline";
-  } else {
-    elements.action.textContent = "";
-    elements.action.style.display = "none";
-  }
-  const height = elements.container.getBoundingClientRect().height;
-  return height <= maxHeight + 0.5;
+  const headLen = Math.ceil(keep / 2);
+  const tailLen = keep - headLen;
+  return `${joinChars(chars, 0, headLen)}${dots}${joinChars(chars, chars.length - tailLen, chars.length)}`;
 }
 async function updateEllipsis() {
   if (isServer()) {
@@ -164,7 +120,7 @@ async function updateEllipsis() {
   const sourceText = props.text ?? "";
   if (container.clientWidth <= 0) {
     ellipsisText.value = sourceText;
-    isTruncated.value = false;
+    isOverflow.value = false;
     return;
   }
   if (isExpanded.value || !sourceText) {
@@ -173,41 +129,58 @@ async function updateEllipsis() {
   }
   const style = getStyle(textRef.value ?? container);
   const lineHeight = getLineHeightPx(style);
-  const maxHeight = lineHeight * maxRows.value;
-  if (maxHeight <= 0) {
+  if (lineHeight <= 0) {
     ellipsisText.value = sourceText;
-    isTruncated.value = false;
+    isOverflow.value = false;
     return;
   }
-  const elements = createMeasureElements(container);
-  try {
-    syncMeasureStyles(elements, container, textRef.value, actionRef.value);
-    if (fits(elements, sourceText, "", maxHeight)) {
-      ellipsisText.value = sourceText;
-      isTruncated.value = false;
-      return;
-    }
-    isTruncated.value = true;
-    const actionText = props.action ? props.moreText : "";
-    const chars = [...sourceText];
-    const dots = props.dots ?? "";
-    let low = 0;
-    let high = chars.length;
-    let best = "";
-    while (low <= high) {
-      const mid = Math.floor((low + high) / 2);
-      const candidate = buildCandidate(chars, mid, dots, props.position);
-      if (fits(elements, candidate, actionText, maxHeight)) {
-        best = candidate;
-        low = mid + 1;
+  const availableWidth = getAvailableWidth(container);
+  const textFont = getFontShorthand(style);
+  if (measureLineCount(sourceText, textFont, availableWidth) <= maxRows.value) {
+    ellipsisText.value = sourceText;
+    isOverflow.value = false;
+    return;
+  }
+  isOverflow.value = true;
+  const actionText = props.action ? props.moreText : "";
+  const actionFont = actionRef.value ? getFontShorthand(getStyle(actionRef.value)) : textFont;
+  const dots = props.dots ?? "";
+  if (props.position === "end") {
+    const prepared = prepareWithSegments(sourceText, textFont);
+    const { lines } = layoutWithLines(prepared, availableWidth, lineHeight);
+    const baseText = lines.slice(0, maxRows.value).map((l) => l.text).join("");
+    const baseChars = [...baseText];
+    let low2 = 0;
+    let high2 = baseChars.length;
+    let best2 = "";
+    while (low2 <= high2) {
+      const mid = Math.floor((low2 + high2) / 2);
+      const candidate = `${joinChars(baseChars, 0, mid)}${dots}`;
+      if (measureLineCount(candidate, textFont, availableWidth, actionText, actionFont) <= maxRows.value) {
+        best2 = candidate;
+        low2 = mid + 1;
       } else {
-        high = mid - 1;
+        high2 = mid - 1;
       }
     }
-    ellipsisText.value = best || dots;
-  } finally {
-    elements.container.remove();
+    ellipsisText.value = best2 || dots;
+    return;
+  }
+  const chars = [...sourceText];
+  let low = 0;
+  let high = chars.length;
+  let best = "";
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    const candidate = buildCandidate(chars, mid, dots, props.position);
+    if (measureLineCount(candidate, textFont, availableWidth, actionText, actionFont) <= maxRows.value) {
+      best = candidate;
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
   }
+  ellipsisText.value = best || dots;
 }
 watch(
   () => props,
@@ -224,6 +197,10 @@ watch(
   }
 );
 useResizeObserver(containerRef, updateEllipsis);
+defineExpose({
+  isExpanded,
+  isOverflow
+});
 </script>
 
 <template>
@@ -231,7 +208,7 @@ useResizeObserver(containerRef, updateEllipsis);
     <span ref="textRef" class="pxd-ellipsis-text--text">{{ displayText.content }}</span>
 
     <span
-      v-if="action && (isTruncated || isExpanded)"
+      v-if="action && (isOverflow || isExpanded)"
       ref="actionRef"
       :class="computedActionClass"
       @click="toggleAction"

package/dist/components/ellipsis-text/types.d.ts

@@ -6,7 +6,8 @@ export interface EllipsisTextProps {
   position?: 'start' | 'middle' | 'end'
   moreText?: string
   lessText?: string
-  actionClass?: string
+  moreActionClass?: string
+  lessActionClass?: string
 }
 
 export interface EllipsisTextEmits {

package/dist/components/error/index.vue

@@ -19,7 +19,7 @@ const errorVariant = tv({
   variants: {
     size: {
       xs: "text-xs [--mt:0.125rem]",
-      sm: "text-13px [--mt:0.125rem]",
+      sm: "text-13 [--mt:0.125rem]",
       md: "text-sm [--mt:0.125rem]",
       lg: "text-base [--mt:0.25rem]"
     }

package/dist/components/fader/index.vue

@@ -4,7 +4,7 @@ import { useResizeObserver } from "../../composables/use-browser-observer";
 import { cachedOff, cachedOn } from "../../utils/event";
 import { getCssUnitValue } from "../../utils/format";
 import { unrefElement } from "../../utils/ref";
-import { throttleByRaf } from "../../utils/throttle";
+import { throttleByRaf } from "../../utils/timing";
 defineOptions({
   name: "PFader",
   inheritAttrs: false
@@ -95,12 +95,8 @@ onBeforeUnmount(() => {
   content: '';
   position: absolute;
   border-radius: inherit;
-  background: linear-gradient(var(--dir), transparent, var(--fader-color, var(--color-gray-100)));
-  mask-image: linear-gradient(
-    var(--dir-revert),
-    var(--fader-color, var(--color-gray-100)) 50%,
-    transparent
-  );
+  background: linear-gradient(var(--dir), transparent, var(--fader-color));
+  mask-image: linear-gradient(var(--dir-revert), var(--fader-color) 50%, transparent);
   transition-property: opacity;
   opacity: 0;
 }
@@ -116,7 +112,7 @@ onBeforeUnmount(() => {
   &::before,
   &::after {
     top: 0;
-    width: var(--fader-size, 16px);
+    width: var(--fader-size);
     height: 100%;
   }
 
@@ -138,7 +134,7 @@ onBeforeUnmount(() => {
   &::after {
     left: 0;
     width: 100%;
-    height: var(--fader-size, 16px);
+    height: var(--fader-size);
   }
 
   &::before {

package/dist/components/gauge/index.vue

@@ -27,6 +27,7 @@ const SIZES = {
 const PROGRESS_BAR_GAP = 5;
 const MIN_VISIBLE_TRACK = PROGRESS_BAR_GAP * 2;
 const RADIUS = 42;
+const STROKE_WIDTH = 10;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 const GAP_LENGTH = PROGRESS_BAR_GAP / 100 * CIRCUMFERENCE;
 const defaultColors = {
@@ -47,8 +48,8 @@ const progressArc = computed(() => {
     return progress.value / 100 * CIRCUMFERENCE;
   }
   const baseArc = progress.value / 100 * CIRCUMFERENCE;
-  const visualCorrection = 8;
-  return Math.max(0, baseArc - visualCorrection);
+  const roundCapTrim = STROKE_WIDTH;
+  return Math.max(0, baseArc - roundCapTrim);
 });
 const progressStatus = computed(() => {
   const _progress = progress.value;
@@ -106,38 +107,42 @@ const progressColors = computed(() => {
     v-bind="$attrs"
   >
     <svg
-      class="pxd-gauge--svg block size-(--gauge-size) -rotate-85 overflow-visible"
+      class="pxd-gauge--svg block size-(--gauge-size) overflow-visible"
       aria-hidden="true"
       fill="none"
       viewBox="0 0 100 100"
     >
-      <circle
-        v-if="progressStatus.hasProgress"
-        cx="50"
-        cy="50"
-        fill="none"
-        :r="RADIUS"
-        stroke-width="10"
-        stroke-dashoffset="0"
-        stroke-linecap="round"
-        :stroke="progressColors.primary"
-        class="pxd-gauge--bar motion-safe:transition-all"
-        :stroke-dasharray="`${progressArc} ${CIRCUMFERENCE}`"
-      />
+      <g transform="rotate(-83 50 50)">
+        <circle
+          v-if="shouldShowTrack"
+          cx="50"
+          cy="50"
+          fill="none"
+          :r="RADIUS"
+          :stroke-width="STROKE_WIDTH"
+          stroke-linecap="round"
+          :stroke-dashoffset="trackOffset"
+          :stroke="progressColors.secondary"
+          class="pxd-gauge--track motion-safe:transition-appearance"
+          :stroke-dasharray="
+  progressStatus.hasProgress ? `${trackArc} ${CIRCUMFERENCE}` : void 0
+"
+        />
 
-      <circle
-        v-if="shouldShowTrack"
-        cx="50"
-        cy="50"
-        fill="none"
-        :r="RADIUS"
-        stroke-width="10"
-        stroke-linecap="round"
-        :stroke-dashoffset="trackOffset"
-        :stroke="progressColors.secondary"
-        class="pxd-gauge--track motion-safe:transition-all"
-        :stroke-dasharray="progressStatus.hasProgress ? `${trackArc} ${CIRCUMFERENCE}` : void 0"
-      />
+        <circle
+          v-if="progressStatus.hasProgress || progressStatus.isComplete"
+          cx="50"
+          cy="50"
+          fill="none"
+          :r="RADIUS"
+          :stroke-width="STROKE_WIDTH"
+          stroke-dashoffset="0"
+          stroke-linecap="round"
+          :stroke="progressColors.primary"
+          class="pxd-gauge--bar motion-safe:transition-appearance"
+          :stroke-dasharray="`${progressArc} ${CIRCUMFERENCE}`"
+        />
+      </g>
     </svg>
 
     <div

package/dist/components/grid/index.vue

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

package/dist/components/grid-item/index.vue

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

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

@@ -8,22 +8,20 @@ type __VLS_Slots = {} & {
     suffix?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<HoldButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    pointerdown: (args_0: PointerEvent) => any;
-    pointerup: (args_0: PointerEvent) => any;
-    finished: (args_0: boolean) => any;
+    cancel: () => any;
     confirm: () => any;
-    canceled: () => any;
+    release: (confirmed: boolean) => any;
+    pointerup: (args_0: PointerEvent) => any;
+    pointerdown: (args_0: PointerEvent) => any;
 }, string, import("vue").PublicProps, Readonly<HoldButtonProps> & Readonly<{
-    onPointerdown?: ((args_0: PointerEvent) => any) | undefined;
-    onPointerup?: ((args_0: PointerEvent) => any) | undefined;
-    onFinished?: ((args_0: boolean) => any) | undefined;
+    onCancel?: (() => any) | undefined;
     onConfirm?: (() => any) | undefined;
-    onCanceled?: (() => any) | undefined;
+    onRelease?: ((confirmed: boolean) => any) | undefined;
+    onPointerup?: ((args_0: PointerEvent) => any) | undefined;
+    onPointerdown?: ((args_0: PointerEvent) => any) | undefined;
 }>, {
-    durations: number | string;
     vibrate: boolean;
     scalable: boolean;
-    maskColor: string;
 }, {}, {}, {}, 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/hold-button/index.vue

@@ -1,51 +1,44 @@
 <script setup>
-import { computed, onBeforeUnmount, shallowRef } from "vue";
+import { computed, onBeforeUnmount, shallowRef, useAttrs } from "vue";
 import { getStyle } from "../../utils/dom";
 import { off, once } from "../../utils/event";
 import PButton from "../button/index.vue";
 defineOptions({
-  name: "PHoldButton"
+  name: "PHoldButton",
+  inheritAttrs: false
 });
 const props = defineProps({
   vibrate: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false },
   scalable: { type: Boolean, required: false, default: true },
-  durations: { type: [Number, String], required: false, default: 2e3 },
-  maskColor: { type: String, required: false, default: "var(--color-gray-alpha-600)" },
+  durations: { type: [Number, String], required: false },
   cancelable: { type: Boolean, required: false },
-  variant: { type: String, required: false },
-  size: { type: String, required: false },
-  shape: { type: String, required: false },
-  align: { type: String, required: false },
-  icon: { type: Boolean, required: false },
-  loading: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  fullWidth: { type: Boolean, required: false }
+  progressColor: { type: String, required: false }
 });
-const emits = defineEmits(["confirm", "canceled", "finished", "pointerup", "pointerdown"]);
+const emits = defineEmits(["cancel", "confirm", "release", "pointerup", "pointerdown"]);
+const attrs = useAttrs();
 const status = shallowRef("idle");
 const computedAttrs = computed(() => {
-  const { scalable, durations, maskColor, cancelable, ...rest } = props;
   return {
     class: [
-      "pxd-hold-button relative motion-safe:transition-all",
+      "pxd-hold-button relative motion-safe:transition-appearance",
       {
-        scalable,
+        scalable: props.scalable,
         effective: status.value !== "canceled"
       }
     ],
-    ...rest
+    ...attrs
   };
 });
 const computedStyle = computed(() => {
-  const { durations, maskColor } = props;
+  const { durations, progressColor } = props;
   let _durations = Number(durations);
   if (Number.isNaN(_durations) || _durations < 0) {
-    console.warn("Invalid durations value provided to PHoldButton, defaulting to 2000");
     _durations = 2e3;
   }
   return {
     "--hold-button-durations": `${_durations}ms`,
-    "--hold-button-mask-color": maskColor
+    "--hold-button-progress-color": progressColor
   };
 });
 function onTriggerVibrate() {
@@ -75,7 +68,7 @@ function onPointerLeave(e) {
   }
   if (status.value === "loading" || status.value === "confirmed") {
     status.value = "canceled";
-    emits("canceled");
+    emits("cancel");
   }
 }
 function onPointerDown(event) {
@@ -93,7 +86,7 @@ function onPointerUp(event) {
   }
   const isConfirmed = status.value === "confirmed";
   status.value = "idle";
-  emits("finished", isConfirmed);
+  emits("release", isConfirmed);
   emits("pointerup", event);
   onTriggerVibrate();
   cleanPointerReleaseEvents();
@@ -139,8 +132,8 @@ onBeforeUnmount(() => {
     <template #suffix>
       <slot name="suffix" />
       <div
-        class="pxd-hold-button--overlay pointer-events-none absolute -inset-px rounded-inherit bg-(--hold-button-mask-color) default-transition-timing-function!"
-        :class="{ finished: status === 'confirmed' }"
+        class="pxd-hold-button--overlay pointer-events-none absolute -inset-px rounded-inherit bg-(--hold-button-progress-color) default-transition-timing-function!"
+        :class="{ confirmed: status === 'confirmed' }"
         :style="computedStyle"
         @transitionend="onTransitionEnd"
       />
@@ -154,10 +147,8 @@ onBeforeUnmount(() => {
     transform: scale(0.97);
   }
 
-  &:hover {
-    .pxd-hold-button--overlay {
-      will-change: clip-path;
-    }
+  &:hover .pxd-hold-button--overlay {
+    will-change: clip-path;
   }
 
   .pxd-hold-button--overlay {
@@ -168,7 +159,7 @@ onBeforeUnmount(() => {
       clip-path 0.1s,
       opacity 0s;
 
-    &.finished {
+    &.confirmed {
       --opacity: 0.68;
     }
   }

package/dist/components/hold-button/types.d.ts

@@ -1,19 +1,18 @@
-import type { ButtonProps } from '../button/types'
-
 export type HoldButtonStatus = 'idle' | 'loading' | 'canceled' | 'confirmed'
 
-export interface HoldButtonProps extends Omit<ButtonProps, 'as'> {
+export interface HoldButtonProps {
   vibrate?: boolean
+  disabled?: boolean
   scalable?: boolean
   durations?: number | string
-  maskColor?: string
   cancelable?: boolean
+  progressColor?: string
 }
 
 export interface HoldButtonEmits {
+  cancel: []
   confirm: []
-  canceled: []
-  finished: [boolean]
+  release: [confirmed: boolean]
   pointerup: [PointerEvent]
   pointerdown: [PointerEvent]
 }

package/dist/components/index.d.ts

@@ -5,7 +5,9 @@ export { default as Backtop } from './backtop/index.vue';
 export { default as Badge } from './badge/index.vue';
 export { default as Book } from './book/index.vue';
 export { default as Browser } from './browser/index.vue';
+export { default as Bubble } from './bubble/index.vue';
 export { default as Button } from './button/index.vue';
+export { default as ButtonGroup } from './button-group/index.vue';
 export { default as Carousel } from './carousel/index.vue';
 export { default as CarouselItem } from './carousel-item/index.vue';
 export { default as Checkbox } from './checkbox/index.vue';
@@ -15,6 +17,7 @@ export { default as Choicebox } from './choicebox/index.vue';
 export { default as ChoiceboxItem } from './choicebox-item/index.vue';
 export { default as Collapse } from './collapse/index.vue';
 export { default as CollapseGroup } from './collapse-group/index.vue';
+export { default as ColorSelector } from './color-selector/index.vue';
 export { default as CommandMenu } from './command-menu/index.vue';
 export { default as CommandMenuGroup } from './command-menu-group/index.vue';
 export { default as ConfigProvider } from './config-provider/index.vue';
@@ -60,7 +63,9 @@ export { default as RadioGroup } from './radio-group/index.vue';
 export { default as Resizable } from './resizable/index.vue';
 export { default as ResizableHandle } from './resizable-handle/index.vue';
 export { default as ResizablePanel } from './resizable-panel/index.vue';
+export { default as ScalableText } from './scalable-text/index.vue';
 export { default as Scrollable } from './scrollable/index.vue';
+export { default as Separator } from './separator/index.vue';
 export { default as Skeleton } from './skeleton/index.vue';
 export { default as Slider } from './slider/index.vue';
 export { default as Snippet } from './snippet/index.vue';
@@ -69,6 +74,8 @@ export { default as Stack } from './stack/index.vue';
 export { default as StatusDot } from './status-dot/index.vue';
 export { default as Switch } from './switch/index.vue';
 export { default as SwitchItem } from './switch-item/index.vue';
+export { default as Tabs } from './tabs/index.vue';
+export { default as TabsItem } from './tabs-item/index.vue';
 export { default as Teleport } from './teleport/index.vue';
 export { default as Text } from './text/index.vue';
 export { default as Textarea } from './textarea/index.vue';