pxd 0.0.55 → 0.0.60

package/dist/components/popover/index.vue

@@ -1,14 +1,13 @@
 <script setup>
-import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
-import { computed, shallowRef, watch } from "vue";
-import { useIntersectionObserver } from "../../composables/use-browser-observer";
+import { arrow, autoUpdate, computePosition, flip, shift, hide } from "@floating-ui/dom";
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
 import { useDelayDestroy } from "../../composables/use-delay-destroy";
 import { useLockScroll } from "../../composables/use-lock-scroll";
 import { useOutsideClick } from "../../composables/use-outside-click";
 import { debounce } from "../../utils/debounce";
 import { cachedOff, cachedOn, sleep } from "../../utils/event";
 import { getCssUnitValue, toArray } from "../../utils/format";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 import PTeleport from "../teleport/index.vue";
 defineOptions({
   name: "PPopover",
@@ -30,7 +29,7 @@ const props = defineProps({
   autoPosition: { type: Boolean, required: false, default: true },
   wrapperClass: { type: [String, Array, Object], required: false },
   contentClass: { type: [String, Array, Object], required: false },
-  contentStyle: { type: null, required: false },
+  contentStyle: { type: [Object, String], required: false },
   unsetPosition: { type: Boolean, required: false, default: false },
   transitionType: { type: String, required: false, default: "fade-scale" },
   toggleOnTrigger: { type: Boolean, required: false, default: true },
@@ -39,8 +38,10 @@ const props = defineProps({
   lockScrollOnVisible: { type: Boolean, required: false }
 });
 const emits = defineEmits(["show", "hide", "escape", "outside-click", "trigger-click", "visible-change"]);
+let isLockedScroll = false;
 let showPopoverTimer;
 let hidePopoverTimer;
+let cleanupAutoUpdate = null;
 const allowedMethods = ["click", "manual", "contextmenu"];
 const arrayRef = shallowRef(null);
 const triggerRef = shallowRef(null);
@@ -49,6 +50,7 @@ const localPosition = shallowRef(props.position);
 const triggerMethods = computed(() => toArray(props.trigger));
 const wrapperStyle = computed(() => ({
   "z-index": props.zIndex,
+  "--popover-offset": props.offset,
   "--popover-arrow-bg": props.arrowColor,
   "--popover-max-width": getCssUnitValue(props.maxWidth)
 }));
@@ -68,11 +70,13 @@ const {
     emits("visible-change", v);
     if (v) {
       if (props.lockScrollOnVisible) {
+        isLockedScroll = true;
         lockScroll();
       }
       emits("show");
     } else {
-      if (props.lockScrollOnVisible) {
+      if (isLockedScroll) {
+        isLockedScroll = false;
         unlockScroll();
       }
       emits("hide");
@@ -99,11 +103,44 @@ useOutsideClick(wrapperRef, {
     { edges: ["leading"] }
   )
 });
-useIntersectionObserver(triggerRef, ([entry]) => {
-  if (props.closeOnInvisible && isVisible.value && entry.intersectionRatio === 0) {
+function disposeAutoUpdate() {
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+    cleanupAutoUpdate = null;
+  }
+}
+async function updatePosition() {
+  const { x, y, placement, middlewareData } = await computePosition(
+    triggerRef.value,
+    wrapperRef.value,
+    {
+      placement: props.position,
+      middleware: [
+        shift(),
+        props.autoPosition && flip(),
+        props.showArrow && arrow({ element: arrayRef.value }),
+        props.closeOnInvisible && hide({ strategy: "referenceHidden" }),
+        props.closeOnInvisible && hide({ strategy: "escaped" })
+      ]
+    }
+  );
+  localPosition.value = placement;
+  if (middlewareData.hide?.referenceHidden || middlewareData.hide?.escaped) {
     handlePopoverHide(true);
+    return;
   }
-});
+  Object.assign(wrapperRef.value.style, {
+    left: `${x}px`,
+    top: `${y}px`
+  });
+  if (middlewareData.arrow) {
+    const { x: arrowX, y: arrowY } = middlewareData.arrow;
+    Object.assign(arrayRef.value.style, {
+      left: arrowX != null ? `${Math.max(arrowX, 5)}px` : "",
+      top: arrowY != null ? `${Math.max(arrowY, 5)}px` : ""
+    });
+  }
+}
 async function handlePopoverShow() {
   if (showPopoverTimer || props.disabled) {
     return;
@@ -126,30 +163,11 @@ async function handlePopoverShow() {
     Object.assign(wrapperRef.value.style, { left: "0", top: "0" });
     return;
   }
-  const { x, y, placement, middlewareData } = await computePosition(
-    triggerRef.value,
-    wrapperRef.value,
-    {
-      placement: localPosition.value,
-      middleware: [
-        shift(),
-        offset(props.offset),
-        props.autoPosition && flip(),
-        props.showArrow && arrow({ element: arrayRef.value })
-      ]
-    }
-  );
-  localPosition.value = placement;
-  Object.assign(wrapperRef.value.style, {
-    left: `${x}px`,
-    top: `${y}px`
-  });
-  if (middlewareData.arrow) {
-    const { x: x2, y: y2 } = middlewareData.arrow;
-    Object.assign(arrayRef.value.style, {
-      left: x2 != null ? `${Math.max(x2, 5)}px` : "",
-      top: y2 != null ? `${Math.max(y2, 5)}px` : ""
-    });
+  disposeAutoUpdate();
+  if (props.autoPosition) {
+    cleanupAutoUpdate = autoUpdate(triggerRef.value, wrapperRef.value, updatePosition);
+  } else {
+    await updatePosition();
   }
 }
 async function handlePopoverHide(immediate = false) {
@@ -169,6 +187,7 @@ async function handlePopoverHide(immediate = false) {
       immediate ? 0 : props.hideDelay
     );
   });
+  disposeAutoUpdate();
   await hidePopover();
   if (props.closeOnPressEscape) {
     cachedOff(document, "keydown", onPopoverKeystroke);
@@ -264,6 +283,13 @@ watch(
     }
   }
 );
+onBeforeUnmount(() => {
+  if (isLockedScroll) {
+    isLockedScroll = false;
+    unlockScroll();
+  }
+  disposeAutoUpdate();
+});
 defineExpose({
   show: handlePopoverShow,
   hide: handlePopoverHide
@@ -273,7 +299,9 @@ defineExpose({
 <template>
   <div
     ref="triggerRef"
-    class="pxd-popover inline-flex max-w-full active:select-none"
+    class="pxd-popover inline-flex max-w-full active:select-none data-[disabled=true]:pointer-events-none data-[visible=true]:pointer-events-auto"
+    :data-visible="isVisible"
+    :data-disabled="disabled"
     v-bind="$attrs"
     @click="onTriggerClick"
     @focusin="onTriggerFocusin"
@@ -292,19 +320,28 @@ defineExpose({
         :class="wrapperClass"
         :style="wrapperStyle"
         :data-visible="isVisible"
+        :data-position="localPosition"
         :data-interactive="interactive"
-        class="pxd-popover--wrapper sm:max-w-(--popover-max-width) absolute isolate z-10 flex max-w-full outline-none data-[interactive=false]:pointer-events-none data-[visible=false]:pointer-events-none motion-reduce:data-[visible=false]:hidden"
+        :data-unset-position="unsetPosition"
+        class="pxd-popover--wrapper sm:max-w-(--popover-max-width) absolute isolate z-10 flex max-h-full max-w-full outline-none data-[interactive=false]:pointer-events-none data-[visible=false]:pointer-events-none motion-reduce:data-[visible=false]:hidden"
         @pointerenter="onContentPointerEnter"
         @pointerleave="onContentPointerLeave"
       >
         <div
-          class="pxd-popover--container pointer-events-auto relative z-1 w-inherit transform-gpu default-animation-duration default-animation-timing-function"
-          :data-position="localPosition"
+          class="pxd-popover--container pointer-events-auto relative z-1 max-h-[80dvh] max-h-[80vh] w-inherit transform-gpu default-animation-duration default-animation-timing-function"
           :data-transition-type="transitionType"
           :data-show-transition="configProvider.popoverShowTransition"
         >
-          <i v-if="showArrow" ref="arrayRef" class="pxd-popover--arrow absolute z-1 border-solid" />
-          <div class="pxd-popover--content" :class="contentClass" :style="contentStyle">
+          <i
+            v-if="showArrow"
+            ref="arrayRef"
+            class="pxd-popover--arrow absolute z-1 rotate-45 border-5 border-(--popover-arrow-bg)"
+          />
+          <div
+            class="pxd-popover--content h-full max-h-inherit overflow-auto"
+            :class="contentClass"
+            :style="contentStyle"
+          >
             <slot name="content" />
           </div>
         </div>
@@ -389,6 +426,7 @@ defineExpose({
 }
 
 .pxd-popover--container {
+  --popover-padding: calc(var(--popover-offset, 8) * 1px);
   animation-name: popover-fade-show;
   animation-fill-mode: forwards;
 
@@ -424,84 +462,84 @@ defineExpose({
     animation-name: popover-fade-slide-hide;
   }
 
-  &[data-position='top'] {
-    transform-origin: bottom center;
+  [data-position='top'] & {
+    transform-origin: 50% 100%;
   }
 
-  &[data-position='top-start'] {
-    transform-origin: bottom left;
+  [data-position='top-start'] & {
+    transform-origin: 0% 100%;
   }
 
-  &[data-position='top-end'] {
-    transform-origin: bottom right;
+  [data-position='top-end'] & {
+    transform-origin: 100% 100%;
   }
 
-  &[data-position='bottom'] {
+  [data-position='bottom'] & {
     transform-origin: top center;
   }
 
-  &[data-position='bottom-start'] {
+  [data-position='bottom-start'] & {
     transform-origin: top left;
   }
 
-  &[data-position='bottom-end'] {
+  [data-position='bottom-end'] & {
     transform-origin: top right;
   }
 
-  &[data-position='left'] {
+  [data-position='left'] & {
     transform-origin: right center;
   }
 
-  &[data-position='left-start'] {
+  [data-position='left-start'] & {
     transform-origin: right top;
   }
 
-  &[data-position='left-end'] {
+  [data-position='left-end'] & {
     transform-origin: right bottom;
   }
 
-  &[data-position='right'] {
+  [data-position='right'] & {
     transform-origin: left center;
   }
 
-  &[data-position='right-start'] {
+  [data-position='right-start'] & {
     transform-origin: left top;
   }
 
-  &[data-position='right-end'] {
+  [data-position='right-end'] & {
     transform-origin: left bottom;
   }
 
-  &[data-position='top'] .pxd-popover--arrow,
-  &[data-position='top-start'] .pxd-popover--arrow,
-  &[data-position='top-end'] .pxd-popover--arrow {
-    bottom: -5px;
-    border-width: 6px 6px 0;
-    border-color: var(--popover-arrow-bg) transparent transparent;
+  [data-position^='top'][data-unset-position='false'] & {
+    padding-bottom: var(--popover-padding);
   }
 
-  &[data-position='bottom'] .pxd-popover--arrow,
-  &[data-position='bottom-start'] .pxd-popover--arrow,
-  &[data-position='bottom-end'] .pxd-popover--arrow {
-    top: -5px;
-    border-width: 0 6px 6px;
-    border-color: transparent transparent var(--popover-arrow-bg);
+  [data-position^='bottom'][data-unset-position='false'] & {
+    padding-top: var(--popover-padding);
   }
 
-  &[data-position='left'] .pxd-popover--arrow,
-  &[data-position='left-start'] .pxd-popover--arrow,
-  &[data-position='left-end'] .pxd-popover--arrow {
-    right: -5px;
-    border-width: 6px 0 6px 6px;
-    border-color: transparent transparent transparent var(--popover-arrow-bg);
+  [data-position^='left'][data-unset-position='false'] & {
+    padding-right: var(--popover-padding);
   }
 
-  &[data-position='right'] .pxd-popover--arrow,
-  &[data-position='right-start'] .pxd-popover--arrow,
-  &[data-position='right-end'] .pxd-popover--arrow {
-    left: -5px;
-    border-width: 6px 6px 6px 0;
-    border-color: transparent var(--popover-arrow-bg) transparent transparent;
+  [data-position^='right'][data-unset-position='false'] & {
+    padding-left: var(--popover-padding);
   }
 }
+
+.pxd-popover--wrapper[data-position^='top'] .pxd-popover--arrow {
+  bottom: 4px;
+}
+
+.pxd-popover--wrapper[data-position^='bottom'] .pxd-popover--arrow {
+  top: 4px;
+}
+
+.pxd-popover--wrapper[data-position^='left'] .pxd-popover--arrow {
+  right: 4px;
+}
+
+.pxd-popover--wrapper[data-position^='right'] .pxd-popover--arrow {
+  left: 4px;
+}
 </style>

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

@@ -1,3 +1,5 @@
+import type { CSSProperties } from 'vue'
+
 import type { ComponentClass, ComponentPosition } from '../../types/shared'
 
 export type PopoverTrigger = 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual'

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

@@ -11,8 +11,8 @@ declare const __VLS_base: import("vue").DefineComponent<ProgressProps, {}, {}, {
     "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
 }>, {
     label: boolean | string | number;
-    variant: import("../../types/shared").ComponentVariant | "secondary";
     max: number;
+    variant: import("../../types/shared").ComponentVariant | "secondary";
     min: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/progress/index.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { computed } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { useModelValue } from "../../composables/use-model-value";
 import { isTruthyProp } from "../../utils/format";
 import { getColorByThreshold } from "../../utils/get";
-import { progressVariant } from "./cn";
+import { tv } from "tailwind-variants";
 defineOptions({
   name: "PProgress",
   inheritAttrs: false,
@@ -23,6 +23,19 @@ const props = defineProps({
   modelValue: { type: [Number, null], required: false }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
+const progressVariant = tv({
+  base: "pxd-progress-bar flex-1 shrink-0 overflow-hidden rounded-full bg-gray-200",
+  variants: {
+    size: {
+      sm: "h-2",
+      md: "h-2.5",
+      lg: "h-3.5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 const configProvider = useConfigProvider();
 const VARIANTS_COLORS = {
   primary: "var(--color-primary)",

package/dist/components/project-banner/index.d.vue.ts

@@ -0,0 +1,18 @@
+import type { ProjectBannerProps } from './types';
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    action?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProjectBannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProjectBannerProps> & Readonly<{}>, {}, {}, {}, {}, 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/project-banner/index.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed } from "vue";
+import { tv } from "tailwind-variants";
+defineOptions({
+  name: "PProjectBanner",
+  inheritAttrs: false
+});
+const props = defineProps({
+  label: { type: [String, Number, Array, null], required: false },
+  variant: { type: String, required: false }
+});
+const projectBannerVariant = tv({
+  slots: {
+    base: "gap-x-2 py-2 leading-5 min-h-10 text-sm flex w-full -translate-y-px items-center justify-center border-y",
+    action: "ml-6 md:ml-0 font-medium cursor-pointer underline underline-offset-3 motion-safe:transition-colors"
+  },
+  variants: {
+    variant: {
+      warning: {
+        base: "border-amber-400 bg-amber-100 text-amber-900",
+        action: "text-amber-1000 decoration-amber-400 hover:border-amber-500 hover:text-amber-900"
+      },
+      success: {
+        base: "border-green-400 bg-green-100 text-green-900",
+        action: "text-green-1000 decoration-green-400 hover:border-green-500 hover:text-green-900"
+      },
+      error: {
+        base: "border-red-400 bg-red-100 text-red-900",
+        action: "text-red-1000 decoration-red-400 hover:border-red-500 hover:text-red-900"
+      },
+      info: {
+        base: "border-blue-400 bg-blue-100 text-blue-900",
+        action: "text-blue-1000 decoration-blue-400 hover:border-blue-500 hover:text-blue-900"
+      }
+    }
+  }
+});
+const computedClasses = computed(() => projectBannerVariant({ variant: props.variant }));
+</script>
+
+<template>
+  <aside :class="computedClasses.base()" v-bind="$attrs">
+    <div class="gap-2 px-6 md:justify-center md:flex-row md:items-center flex w-full flex-col">
+      <div class="gap-2 flex items-center">
+        <div v-if="$slots.icon" aria-hidden="true" class="shrink-0">
+          <slot name="icon"></slot>
+        </div>
+
+        <p class="my-0!">
+          <slot>{{ label }}</slot>
+        </p>
+      </div>
+
+      <div v-if="$slots.action" :class="computedClasses.action()">
+        <slot name="action"></slot>
+      </div>
+    </div>
+  </aside>
+</template>

package/dist/components/project-banner/types.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentLabel } from '../../types/shared'
+
+export type ProjectBannerVariant = 'warning' | 'error' | 'success' | 'info'
+
+export interface ProjectBannerProps {
+  label?: ComponentLabel
+  variant?: ProjectBannerVariant
+}

package/dist/components/radio/index.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { computed } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
-import { useUniqueId } from "../../composables/use-unique-id-context";
 import { useRadioGroupContext } from "../../contexts/radio";
 import { getUniqueId } from "../../utils/uid";
-import { radioVariant } from "./cn";
+import { tv } from "tailwind-variants";
 defineOptions({
   name: "PRadio",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -15,50 +15,92 @@ defineOptions({
 const props = defineProps({
   label: { type: [String, Number, Array, null], required: false },
   value: { type: [String, Number, Boolean], required: true },
-  required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   modelValue: { type: [String, Number, Boolean], required: false }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
+const radioVariant = tv({
+  base: "pxd-radio--inner size-4 after:content-empty after:size-2 inline-flex items-center justify-center rounded-full border peer-focus-ring after:scale-40 after:rounded-full after:bg-primary after:opacity-0 peer-checked:after:scale-100 peer-checked:after:opacity-100 motion-safe:transition-colors motion-safe:after:transition-all",
+  variants: {
+    checked: {
+      true: {
+        base: "border-primary bg-background-100 peer-checked:after:scale-100",
+        disabled: "border-gray-500 bg-gray-100 peer-disabled:after:bg-gray-500"
+      },
+      false: {
+        base: "border-gray-alpha-400 bg-background-100 group-hover/radio:bg-gray-200",
+        disabled: "border-gray-500 bg-gray-100"
+      }
+    },
+    disabled: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      checked: true,
+      disabled: false,
+      class: "border-primary bg-background-100 peer-checked:after:scale-100"
+    },
+    {
+      checked: true,
+      disabled: true,
+      class: "border-gray-500 bg-gray-100 peer-disabled:after:bg-gray-500"
+    },
+    {
+      checked: false,
+      disabled: false,
+      class: "border-gray-alpha-400 bg-background-100 group-hover/radio:bg-gray-200"
+    },
+    { checked: false, disabled: true, class: "border-gray-500 bg-gray-100" }
+  ],
+  defaultVariants: {
+    checked: false,
+    disabled: false
+  }
+});
 const uniqueId = getUniqueId();
-const modelValue = useModelValue(props, emits);
-const radioGroupName = useUniqueId("RadioGroupName");
 const radioGroupContext = useRadioGroupContext();
-const isChecked = computed(
-  () => (radioGroupContext?.modelValue ?? modelValue.value) === props.value
+const radioGroupName = radioGroupContext?.name ?? getUniqueId();
+const modelValue = useModelValue(
+  radioGroupContext?.props ?? props,
+  radioGroupContext?.emits ?? emits
 );
-const computedDisabled = computed(() => props.disabled || radioGroupContext?.disabled);
-const computedRequired = computed(() => props.required || radioGroupContext?.required);
+const isChecked = computed(() => modelValue.value === props.value);
+const isDisabled = computed(() => props.disabled || radioGroupContext?.props.disabled);
 const computedClasses = computed(() => {
   return radioVariant({
     checked: isChecked.value,
-    disabled: computedDisabled.value
+    disabled: isDisabled.value
   });
 });
-function onChangeValue() {
-  emits("update:modelValue", props.value);
+function onInputChange() {
+  if (isDisabled.value) {
+    return;
+  }
+  modelValue.value = props.value;
 }
 </script>
 
 <template>
   <label
     role="radio"
-    :aria-checked="isChecked"
-    :data-disabled="computedDisabled"
-    class="pxd-radio group/radio gap-2 inline-flex max-w-full cursor-pointer touch-manipulation items-center data-[disabled=true]:cursor-not-allowed"
-    :class="{ 'is-disabled text-gray-500': computedDisabled }"
+    :aria-selected="isChecked"
+    :data-disabled="isDisabled"
+    class="pxd-radio group/radio gap-2 inline-flex max-w-full cursor-pointer touch-manipulation items-center data-[disabled=true]:cursor-not-allowed data-[disabled=true]:text-gray-500"
     :for="uniqueId"
+    v-bind="$attrs"
   >
     <input
       :id="uniqueId"
       type="radio"
       :value="value"
-      class="peer smallest"
+      class="peer visually-hidden"
       :checked="isChecked"
       :name="radioGroupName"
-      :required="computedRequired"
-      :disabled="computedDisabled"
-      @change="onChangeValue"
+      :disabled="isDisabled"
+      @change="onInputChange"
     />
 
     <span aria-hidden="true" :class="computedClasses" />

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

@@ -1,9 +1,8 @@
-import type { ComponentLabel, ComponentOption, ComponentValue } from '../../types/shared'
+import type { ComponentLabel, ComponentValue } from '../../types/shared'
 
 export interface RadioProps {
   label?: ComponentLabel
   value: ComponentValue
-  required?: boolean
   disabled?: boolean
   modelValue?: ComponentValue
 }
@@ -12,15 +11,3 @@ export interface RadioEmits {
   change: [NonNullable<RadioProps['modelValue']>]
   'update:modelValue': [NonNullable<RadioProps['modelValue']>]
 }
-
-export interface RadioGroupProps {
-  disabled?: boolean
-  required?: boolean
-  modelValue?: ComponentValue
-  options?: ComponentOption[]
-}
-
-export interface RadioGroupEmits {
-  change: [NonNullable<RadioGroupProps['modelValue']>]
-  'update:modelValue': [NonNullable<RadioGroupProps['modelValue']>]
-}

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

@@ -1,4 +1,4 @@
-import type { RadioGroupProps } from '../radio/types';
+import type { RadioGroupProps } from './types';
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
@@ -9,9 +9,7 @@ declare const __VLS_base: import("vue").DefineComponent<RadioGroupProps, {}, {},
 }, string, import("vue").PublicProps, Readonly<RadioGroupProps> & Readonly<{
     onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | undefined>) => any) | undefined;
-}>, {
-    options: import("../../types/shared").ComponentOption[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, 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;