pxd 0.0.64 → 0.1.3

package/dist/components/questionnaire/index.vue

@@ -0,0 +1,353 @@
+<script setup>
+import ChevronDownIcon from "@gdsicon/vue/chevron-down";
+import CrossIcon from "@gdsicon/vue/cross";
+import QuestionIcon from "@gdsicon/vue/question";
+import { computed, shallowReactive, shallowRef, watch } from "vue";
+import { useCollapseMotion } from "../../composables/_internal/use-collapse-motion.js";
+import { useToggleValue } from "../../composables/use-toggle-value.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { toArray } from "../../utils/format.js";
+import PButton from "../button/index.vue";
+import PInput from "../input/index.vue";
+import PList from "../list/index.vue";
+defineOptions({
+	name: "PQuestionnaire",
+	inheritAttrs: false
+});
+const props = defineProps({ questions: {
+	type: Array,
+	required: false,
+	default: () => []
+} });
+const emits = defineEmits(["submit"]);
+const contentRef = shallowRef();
+const totalAnswers = shallowReactive({});
+const currentState = shallowRef("choosing");
+const currentIndex = shallowRef(0);
+const currentQuestion = computed(() => {
+	const question = props.questions[currentIndex.value];
+	return question ? getQuestionOptions(question) : null;
+});
+const currentAnswer = computed(() => {
+	const question = currentQuestion.value;
+	return question ? totalAnswers[question.header] : null;
+});
+const showSubmitButton = computed(() => {
+	const questionsCount = props.questions.length;
+	const question = currentQuestion.value;
+	if (!question) {
+		return false;
+	}
+	if (question.multiSelect) {
+		return true;
+	}
+	return currentIndex.value === questionsCount - 1 && question.allowFreeformInput;
+});
+const configProvider = useConfigProvider();
+const { value: isExpanded, toggle: toggleExpand } = useToggleValue(true);
+const { detailsOpen, isLeaving, skipEnterMotion } = useCollapseMotion(contentRef, isExpanded);
+function onToggleClick() {
+	toggleExpand();
+}
+function onDetailsToggle(ev) {
+	const details = ev.currentTarget;
+	// Find-in-page / fragment navigation opens <details> natively.
+	if (details.open && !isExpanded.value) {
+		skipEnterMotion();
+		isExpanded.value = true;
+	}
+}
+function createInitialAnswers(questions) {
+	return questions.reduce((answers, question) => {
+		answers[question.header] = {
+			selected: [],
+			freeText: "",
+			skipped: true
+		};
+		return answers;
+	}, {});
+}
+function createSkippedAnswers(answers) {
+	return Object.keys(answers).reduce((skippedAnswers, header) => {
+		skippedAnswers[header] = {
+			selected: [],
+			freeText: null,
+			skipped: true
+		};
+		return skippedAnswers;
+	}, {});
+}
+function getQuestionOptions(question) {
+	const options = question.options.map((option) => ({
+		...option,
+		value: option.label
+	}));
+	if (question.allowFreeformInput) {
+		options.push({
+			label: "",
+			value: "Enter custom answer",
+			description: "Enter custom answer"
+		});
+	}
+	return {
+		...question,
+		options
+	};
+}
+function getSelectedAnswerText(question, answer) {
+	if (question.multiSelect) {
+		return [...answer.selected, answer.freeText].filter(Boolean).join(", ");
+	}
+	return answer.freeText || answer.selected.join(", ");
+}
+function buildInitAnswers() {
+	Object.keys(totalAnswers).forEach((header) => {
+		delete totalAnswers[header];
+	});
+	Object.assign(totalAnswers, createInitialAnswers(props.questions));
+}
+function toggleCurrentIndex(offset) {
+	if (!props.questions.length) {
+		currentIndex.value = 0;
+		return;
+	}
+	currentIndex.value = Math.min(Math.max(currentIndex.value + offset, 0), props.questions.length - 1);
+}
+function updateCurrentAnswer(update) {
+	const question = currentQuestion.value;
+	if (!question) {
+		return;
+	}
+	const answer = totalAnswers[question.header];
+	totalAnswers[question.header] = update(answer);
+}
+function onAnswerItemSelect(item) {
+	const question = currentQuestion.value;
+	if (!question) {
+		return;
+	}
+	// Freeform row is not a real answer — undo the model update above.
+	if (!item.label) {
+		updateCurrentAnswer((answer) => ({
+			...answer,
+			selected: answer.selected.filter((itemValue) => itemValue !== String(item.value))
+		}));
+		return;
+	}
+	if (currentIndex.value === props.questions.length - 1 && !question.multiSelect && !question.allowFreeformInput) {
+		onSubmitAnswers();
+		return;
+	}
+	toggleCurrentIndex(1);
+}
+function onListModelUpdate(next) {
+	const question = currentQuestion.value;
+	if (!question) {
+		return;
+	}
+	const selected = question.multiSelect ? toArray(next).map(String) : next == null || next === "" ? [] : [String(next)];
+	updateCurrentAnswer((answer) => ({
+		...answer,
+		selected,
+		freeText: question.multiSelect ? answer.freeText : ""
+	}));
+}
+function onFreeformInput(value) {
+	updateCurrentAnswer((answer) => ({
+		...answer,
+		freeText: value
+	}));
+}
+// When the radio is selected, the selected item will be deselected if the text is entered manually.
+function onFreeformInputChange() {
+	const question = currentQuestion.value;
+	if (!question) {
+		return;
+	}
+	if (question.multiSelect) {
+		return;
+	}
+	updateCurrentAnswer((answer) => ({
+		...answer,
+		selected: []
+	}));
+}
+function getFinalAnswers() {
+	return Object.entries(totalAnswers).reduce((answers, [header, answer]) => {
+		if (answer.selected.length || answer.freeText?.trim().length) {
+			answer.skipped = false;
+		} else {
+			answer.skipped = true;
+		}
+		answers[header] = {
+			...answer,
+			skipped: !answer.selected.length && !answer.freeText?.trim().length
+		};
+		return answers;
+	}, {});
+}
+function skipAllQuestions() {
+	Object.assign(totalAnswers, createSkippedAnswers(totalAnswers));
+	currentState.value = "skipped";
+}
+function skipCurrentQuestion() {
+	updateCurrentAnswer(() => ({
+		selected: [],
+		freeText: null,
+		skipped: true
+	}));
+	if (currentIndex.value >= props.questions.length - 1) {
+		onSubmitAnswers();
+		return;
+	}
+	toggleCurrentIndex(1);
+}
+function onSubmitAnswers() {
+	currentState.value = "submitted";
+	emits("submit", getFinalAnswers());
+}
+watch(() => props.questions, () => {
+	currentState.value = "choosing";
+	currentIndex.value = 0;
+	buildInitAnswers();
+}, { immediate: true });
+</script>
+
+<template>
+  <div
+    data-questionnaire
+    class="pxd-questionnaire w-full max-w-full rounded-xl border bg-background-100 empty:hidden"
+    v-bind="$attrs"
+  >
+    <template v-if="currentState === 'choosing' && currentQuestion && currentAnswer">
+      <details class="pxd-questionnaire--details" :open="detailsOpen" @toggle="onDetailsToggle">
+        <summary
+          class="pxd-questionnaire--title py-2 ps-3 pe-2 gap-2 text-sm flex w-full cursor-pointer touch-manipulation list-none appearance-none items-center border-none bg-transparent font-inherit text-inherit self-focus-ring outline-none select-none"
+          :class="{ 'border-b': detailsOpen }"
+          @click.prevent="onToggleClick"
+        >
+          <QuestionIcon class="size-4 font-medium shrink-0" />
+
+          <span class="pxd-questionnaire--question min-w-0 font-medium flex-1 truncate">
+            {{ currentQuestion.question }}
+          </span>
+
+          <!-- preventDefault is load-bearing: stopping propagation alone would leave
+               the summary's native disclosure default action free to run. -->
+          <PButton
+            variant="ghost"
+            size="sm"
+            icon
+            :title="configProvider.locale.questionnaire.skipAll"
+            :aria-label="configProvider.locale.questionnaire.skipAll"
+            @click.prevent.stop="skipAllQuestions"
+          >
+            <CrossIcon aria-hidden="true" />
+          </PButton>
+        </summary>
+
+        <div
+          ref="contentRef"
+          class="pxd-questionnaire--content overflow-hidden rounded-b-xl border-t"
+          :class="{ 'motion-safe:transition-[height]': isExpanded || isLeaving }"
+        >
+          <PList
+            :model-value="currentAnswer.selected"
+            :multiple="currentQuestion.multiSelect"
+            :options="currentQuestion.options"
+            @update:model-value="onListModelUpdate"
+            @change="onAnswerItemSelect"
+          >
+            <template #item="{ item }">
+              <div v-if="item.label" class="flex flex-col">
+                <span>{{ item.label }}</span>
+                <span class="text-foreground-secondary">{{ item.description }}</span>
+              </div>
+
+              <PInput
+                v-else
+                :model-value="currentAnswer.freeText"
+                :placeholder="item.description"
+                class="-me-6 my-0.5 w-[calc(100%+1.5rem)] max-w-none"
+                @update:model-value="onFreeformInput"
+                @change="onFreeformInputChange"
+                @click.stop
+              />
+            </template>
+          </PList>
+
+          <div
+            v-if="questions.length > 1 || showSubmitButton"
+            class="p-2 flex items-center justify-between border-t"
+          >
+            <div v-if="questions.length > 1" class="gap-1 flex items-center">
+              <PButton
+                variant="ghost"
+                :class="{ 'pointer-events-none opacity-50': !currentIndex }"
+                icon
+                :title="configProvider.locale.questionnaire.prev"
+                :aria-label="configProvider.locale.questionnaire.prev"
+                :aria-disabled="!currentIndex"
+                @click="toggleCurrentIndex(-1)"
+              >
+                <ChevronDownIcon class="rotate-90" aria-hidden="true" />
+              </PButton>
+
+              <PButton
+                variant="ghost"
+                :class="{ 'pointer-events-none opacity-50': currentIndex >= questions.length - 1 }"
+                icon
+                :title="configProvider.locale.questionnaire.next"
+                :aria-label="configProvider.locale.questionnaire.next"
+                :aria-disabled="currentIndex >= questions.length - 1"
+                @click="toggleCurrentIndex(1)"
+              >
+                <ChevronDownIcon class="-rotate-90" aria-hidden="true" />
+              </PButton>
+
+              <span class="text-sm ms-2 text-foreground-secondary tabular-nums select-none">
+                {{ currentIndex + 1 }}/{{ questions.length }}
+              </span>
+            </div>
+
+            <div class="gap-2 ms-auto flex items-center">
+              <PButton variant="ghost" @click="skipCurrentQuestion">
+                {{ configProvider.locale.interaction.skip }}
+              </PButton>
+
+              <PButton v-show="showSubmitButton" variant="primary" @click="onSubmitAnswers">
+                {{ configProvider.locale.interaction.submit }}
+              </PButton>
+            </div>
+          </div>
+        </div>
+      </details>
+    </template>
+
+    <template v-else-if="currentState === 'submitted'">
+      <ul class="px-4! py-3! m-0! pxd-questionnaire--answers gap-2 flex list-none flex-col">
+        <li
+          v-for="(question, index) of questions"
+          :key="index"
+          class="pxd-questionnaire--item m-0! text-sm"
+        >
+          <p class="m-0! text-foreground-secondary">
+            {{ configProvider.locale.questionnaire.question }}: {{ question.question }}
+          </p>
+          <p class="m-0! font-medium">
+            {{ configProvider.locale.questionnaire.answer }}:
+            {{ getSelectedAnswerText(question, totalAnswers[question.header]) }}
+          </p>
+        </li>
+      </ul>
+    </template>
+
+    <template v-else-if="currentState === 'skipped'">
+      <p
+        class="pxd-questionnaire--skipped text-sm h-11.5 px-3 flex cursor-default items-center text-foreground-secondary italic"
+      >
+        Skipped questions
+      </p>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,30 @@
+export type QuestionnaireState = 'choosing' | 'skipped' | 'submitted'
+
+export interface QuestionnaireQuestion {
+  header: string
+  question: string
+  multiSelect: boolean
+  allowFreeformInput: boolean
+  options: Array<{ label: string; description: string }>
+}
+
+export interface QuestionnaireAnswer {
+  selected: string[]
+  freeText: string | null
+  /**
+   * True if no freeText is selected or used
+   */
+  skipped: boolean
+}
+
+export interface QuestionnaireAnswers {
+  [header: string]: QuestionnaireAnswer
+}
+
+export interface QuestionnaireProps {
+  questions?: QuestionnaireQuestion[]
+}
+
+export interface QuestionnaireEmits {
+  submit: [QuestionnaireAnswers]
+}

package/dist/components/radial-burst/index.d.vue.ts

@@ -0,0 +1,14 @@
+import type { RadialBurstProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<RadialBurstProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RadialBurstProps> & 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/radial-burst/index.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from "vue";
+import { getCssUnitValue } from "../../utils/format.js";
+defineOptions({
+	name: "PRadialBurst",
+	inheritAttrs: false
+});
+const props = defineProps({
+	size: {
+		type: [String, Number],
+		required: false
+	},
+	primaryColor: {
+		type: String,
+		required: false
+	},
+	backgroundColor: {
+		type: String,
+		required: false
+	}
+});
+const wrapperStyle = computed(() => {
+	return { "background-color": props.backgroundColor };
+});
+const containerStyle = computed(() => {
+	return {
+		"inline-size": getCssUnitValue(props.size),
+		"--radial-burst-color-accent": props.primaryColor
+	};
+});
+</script>
+
+<template>
+  <div
+    data-radial-burst
+    class="pxd-radial-burst min-h-40 bg-yellow-300 relative flex w-full max-w-full items-center justify-center overflow-hidden"
+    :style="wrapperStyle"
+    v-bind="$attrs"
+  >
+    <div
+      class="pxd-radial-burst--container motion-safe:animate-spin pointer-events-none absolute z-0 aspect-square -translate-x-1/2 -translate-y-1/2"
+      :style="containerStyle"
+    ></div>
+
+    <div class="pxd-radial-burst--content relative z-1 w-max">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.pxd-radial-burst--container{--radial-burst-color-accent:var(--color-yellow-400);animation-duration:30s;background-image:repeating-conic-gradient(transparent 0,transparent 13deg,var(--radial-burst-color-accent) 13deg,var(--radial-burst-color-accent) 16deg),repeating-conic-gradient(transparent 0,transparent 20deg,var(--radial-burst-color-accent) 20deg,var(--radial-burst-color-accent) 23deg),repeating-conic-gradient(transparent 0,transparent 5deg,var(--radial-burst-color-accent) 5deg,var(--radial-burst-color-accent) 8deg),repeating-conic-gradient(transparent 0,transparent 40deg,var(--radial-burst-color-accent) 40deg,var(--radial-burst-color-accent) 44deg),repeating-conic-gradient(transparent 0,transparent 10deg,var(--radial-burst-color-accent) 10deg,var(--radial-burst-color-accent) 13deg);inline-size:150%;inset:50% auto auto 50%;-webkit-mask-image:radial-gradient(transparent 0,transparent 12%,#fff 30%);mask-image:radial-gradient(transparent 0,transparent 12%,#fff 30%)}
+</style>

package/dist/components/radial-burst/types.d.ts

@@ -0,0 +1,5 @@
+export interface RadialBurstProps {
+  size?: string | number
+  primaryColor?: string
+  backgroundColor?: string
+}

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

@@ -4,11 +4,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<RadioProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: NonNullable<import("../../types/shared").ComponentValue | undefined>) => any;
-    "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | undefined>) => any;
+    change: (args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | undefined>) => any;
+    "update:modelValue": (args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<RadioProps> & Readonly<{
-    onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | undefined>) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | undefined>) => any) | undefined;
+    onChange?: ((args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | undefined>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | undefined>) => any) | undefined;
 }>, {}, {}, {}, {}, 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/radio/index.vue

@@ -1,92 +1,74 @@
 <script setup>
-import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { useRadioGroupContext } from "../../contexts/radio";
-import { getUniqueId } from "../../utils/uid";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useRadioGroupContext } from "../../contexts/radio.js";
+import { getUniqueId } from "../../utils/helper.js";
 defineOptions({
-  name: "PRadio",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PRadio",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  label: { type: [String, Number, Array, null], required: false },
-  value: { type: [String, Number, Boolean], required: true },
-  disabled: { type: Boolean, required: false },
-  modelValue: { type: [String, Number, Boolean], required: false }
+	label: {
+		type: null,
+		required: false
+	},
+	value: {
+		type: [String, Number],
+		required: true
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: [String, Number],
+		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-appearance",
-  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 radioGroupContext = useRadioGroupContext();
 const radioGroupName = radioGroupContext?.name ?? getUniqueId();
-const modelValue = useModelValue(
-  radioGroupContext?.props ?? props,
-  radioGroupContext?.emits ?? emits
-);
-const isChecked = computed(() => modelValue.value === props.value);
-const isDisabled = computed(() => props.disabled || radioGroupContext?.props.disabled);
-const computedClasses = computed(() => {
-  return radioVariant({
-    checked: isChecked.value,
-    disabled: isDisabled.value
-  });
+const isDisabled = computed(() => props.disabled || radioGroupContext?.props.disabled || false);
+const modelValue = useModelValue(radioGroupContext?.props ?? props, radioGroupContext?.emits ?? emits);
+const isSelected = computed(() => modelValue.value === props.value);
+const { classes } = useTailwindVariant({
+	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-appearance",
+	variants: {
+		checked: {
+			true: "border-primary bg-background-100",
+			false: "border-gray-alpha-400 bg-background-100"
+		},
+		disabled: {
+			true: "border-gray-500 bg-gray-100 group-hover/radio:bg-gray-100 after:bg-gray-500",
+			false: "group-hover/radio:bg-gray-200"
+		}
+	}
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({
+		checked: isSelected.value,
+		disabled: isDisabled.value
+	})
 });
 function onInputChange() {
-  if (isDisabled.value) {
-    return;
-  }
-  modelValue.value = props.value;
+	if (isDisabled.value) {
+		return;
+	}
+	modelValue.value = props.value;
 }
 </script>
 
 <template>
   <label
+    data-radio
     role="radio"
-    :aria-selected="isChecked"
+    :aria-selected="isSelected"
     :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"
@@ -97,13 +79,13 @@ function onInputChange() {
       type="radio"
       :value="value"
       class="peer visually-hidden"
-      :checked="isChecked"
-      :name="radioGroupName"
+      :checked="isSelected"
       :disabled="isDisabled"
+      :name="radioGroupName"
       @change="onInputChange"
     />
 
-    <span aria-hidden="true" :class="computedClasses" />
+    <span aria-hidden="true" :class="classes" />
 
     <span class="text-sm flex-1 shrink-0 leading-none empty:hidden">
       <slot>

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

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ComponentValue } from '../../types/shared'
+import type { ComponentLabel, ComponentValue } from '../../types/shared/props'
 
 export interface RadioProps {
   label?: ComponentLabel

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

@@ -1,14 +1,14 @@
 import type { RadioGroupProps } from './types';
-declare var __VLS_8: {};
+declare var __VLS_7: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<RadioGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: NonNullable<import("../../types/shared").ComponentValue | undefined>) => any;
-    "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | undefined>) => any;
+    change: (args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | undefined>) => any;
+    "update:modelValue": (args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | undefined>) => any;
 }, 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;
+    onChange?: ((args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | undefined>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | undefined>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;