@hina-ui/vue 1.7.5 → 1.7.7

package/src/primitives/pin-input/context.ts

@@ -0,0 +1,24 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { PinInputValue } from '../../../../shared/src/primitives/pin-input'
+import { createContext } from '../utils/createContext'
+import type { Direction } from '../utils/useDirection'
+
+export type PinInputType = 'text' | 'number'
+
+export interface PinInputRootContext {
+  modelValue: Ref<PinInputValue>
+  currentModelValue: ComputedRef<PinInputValue>
+  mask: Ref<boolean>
+  otp: Ref<boolean>
+  placeholder: Ref<string>
+  type: Ref<PinInputType>
+  dir: Ref<Direction>
+  disabled: Ref<boolean>
+  isCompleted: ComputedRef<boolean>
+  inputElements?: Ref<Set<HTMLInputElement>>
+  onInputElementChange: (element: HTMLInputElement) => void
+  isNumericMode: ComputedRef<boolean>
+}
+
+export const [injectPinInputRootContext, providePinInputRootContext] =
+  createContext<PinInputRootContext>('PinInputRoot')

package/src/primitives/pin-input/index.ts

@@ -0,0 +1,3 @@
+export { injectPinInputRootContext, type PinInputRootContext, type PinInputType } from './context'
+export { PinInputInput, type PinInputInputProps } from './PinInputInput'
+export { PinInputRoot, type PinInputRootEmits, type PinInputRootProps } from './PinInputRoot'

package/src/primitives/presence/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from VueUse:
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/primitives/presence/Presence.ts

@@ -0,0 +1,70 @@
+import {
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+  toRefs,
+  type ComponentPublicInstance,
+  type SlotsType,
+  type VNode,
+} from 'vue'
+import { unrefElement } from '@vueuse/core'
+import { renderSlotFragments } from '../utils/renderSlotFragments'
+import { usePresence } from './usePresence'
+
+export interface PresenceProps {
+  present: boolean
+  forceMount?: boolean
+}
+
+export const Presence = defineComponent({
+  name: 'Presence',
+  props: {
+    present: { type: Boolean, required: true },
+    forceMount: { type: Boolean },
+  },
+  slots: Object as SlotsType<{ default: (props: { present: boolean }) => VNode[] }>,
+  setup(props, { slots, expose }) {
+    const { present, forceMount } = toRefs(props)
+    const node = ref<HTMLElement>()
+    const { isPresent } = usePresence(present, node)
+    expose({ present: isPresent })
+
+    const children = renderSlotFragments(slots.default({ present: isPresent.value }) || [])
+    const instance = getCurrentInstance()
+    if (children.length > 1) {
+      const componentName = instance?.parent?.type.name
+        ? `<${instance.parent.type.name} />`
+        : 'component'
+      throw new Error(
+        [
+          `Detected an invalid children for \`${componentName}\` for  \`Presence\` component.`,
+          '',
+          'Note: Presence works similarly to `v-if` directly, but it waits for animation/transition to finished before unmounting. So it expect only one direct child of valid VNode type.',
+          'You can apply a few solutions:',
+          [
+            'Provide a single child element so that `presence` directive attach correctly.',
+            'Ensure the first child is an actual element instead of a raw text node or comment node.',
+          ]
+            .map(line => `  - ${line}`)
+            .join('\n'),
+        ].join('\n'),
+      )
+    }
+
+    return () => {
+      if (forceMount.value || present.value || isPresent.value)
+        return h(slots.default({ present: isPresent.value })[0]!, {
+          ref: (value: Element | ComponentPublicInstance | null) => {
+            const element = unrefElement(value as HTMLElement) as HTMLElement | undefined
+            if (typeof element?.hasAttribute === 'undefined') return element
+            if (element.hasAttribute('data-reka-popper-content-wrapper'))
+              node.value = element.firstElementChild as HTMLElement
+            else node.value = element
+            return element
+          },
+        })
+      return null
+    }
+  },
+})

package/src/primitives/presence/index.ts

@@ -0,0 +1,2 @@
+export { Presence, type PresenceProps } from './Presence'
+export { usePresence } from './usePresence'

package/src/primitives/presence/usePresence.ts

@@ -0,0 +1,28 @@
+import { computed, nextTick, onUnmounted, ref, watch, type Ref } from 'vue'
+import { createPresence, type PresenceState } from '../../../../shared/src/primitives/presence'
+
+export function usePresence(present: Ref<boolean>, node: Ref<HTMLElement | undefined>) {
+  const state = ref<PresenceState>(present.value ? 'mounted' : 'unmounted')
+  const presence = createPresence(present.value, next => (state.value = next), {
+    fillForwards: false,
+  })
+
+  watch(
+    present,
+    async (current, previous) => {
+      await nextTick()
+      presence.update(current, previous)
+    },
+    { immediate: true },
+  )
+
+  const stop = watch(node, element => presence.setNode(element), { immediate: true })
+
+  onUnmounted(() => {
+    stop()
+    presence.dispose()
+  })
+
+  const isPresent = computed(() => ['mounted', 'unmountSuspended'].includes(state.value))
+  return { isPresent }
+}

package/src/primitives/primitive/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from VueUse:
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/primitives/primitive/Primitive.ts

@@ -0,0 +1,45 @@
+import type { Component, PropType } from 'vue'
+import { defineComponent, h } from 'vue'
+import { Slot } from './Slot'
+
+export type AsTag =
+  | 'a'
+  | 'button'
+  | 'div'
+  | 'form'
+  | 'h2'
+  | 'h3'
+  | 'img'
+  | 'input'
+  | 'label'
+  | 'li'
+  | 'nav'
+  | 'ol'
+  | 'p'
+  | 'span'
+  | 'svg'
+  | 'ul'
+  | 'template'
+  | ({} & string)
+
+export interface PrimitiveProps {
+  asChild?: boolean
+  as?: AsTag | Component
+}
+
+const SELF_CLOSING_TAGS = ['area', 'img', 'input']
+
+export const Primitive = defineComponent({
+  name: 'Primitive',
+  inheritAttrs: false,
+  props: {
+    asChild: { type: Boolean, default: false },
+    as: { type: [String, Object] as PropType<AsTag | Component>, default: 'div' },
+  },
+  setup(props, { attrs, slots }) {
+    const tag = props.asChild ? 'template' : props.as
+    if (typeof tag === 'string' && SELF_CLOSING_TAGS.includes(tag)) return () => h(tag, attrs)
+    if (tag !== 'template') return () => h(props.as, attrs, { default: slots.default })
+    return () => h(Slot, attrs, { default: slots.default })
+  },
+})

package/src/primitives/primitive/Slot.ts

@@ -0,0 +1,22 @@
+import { cloneVNode, Comment, defineComponent, mergeProps } from 'vue'
+import { renderSlotFragments } from '../utils/renderSlotFragments'
+
+export const Slot = defineComponent({
+  name: 'PrimitiveSlot',
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    return () => {
+      if (!slots.default) return null
+      const children = renderSlotFragments(slots.default())
+      const index = children.findIndex(child => child.type !== Comment)
+      if (index === -1) return children
+      const first = children[index]!
+      delete first.props?.ref
+      const merged = first.props ? mergeProps(attrs, first.props) : attrs
+      const cloned = cloneVNode({ ...first, props: {} }, merged)
+      if (children.length === 1) return cloned
+      children[index] = cloned
+      return children
+    }
+  },
+})

package/src/primitives/primitive/index.ts

@@ -0,0 +1,2 @@
+export { Primitive, type AsTag, type PrimitiveProps } from './Primitive'
+export { Slot } from './Slot'

package/src/primitives/progress/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from VueUse:
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/primitives/progress/ProgressIndicator.vue

@@ -0,0 +1,24 @@
+<script lang="ts">
+  export interface ProgressIndicatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+  import { Primitive, type PrimitiveProps } from '../primitive'
+  import { useForwardExpose } from '../utils/useForwardExpose'
+  import { injectProgressRootContext } from './context'
+
+  const props = defineProps<ProgressIndicatorProps>()
+  const rootContext = injectProgressRootContext()
+  useForwardExpose()
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    :data-state="rootContext.progressState.value"
+    :data-value="rootContext.modelValue?.value ?? undefined"
+    :data-max="rootContext.max.value"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/primitives/progress/ProgressRoot.vue

@@ -0,0 +1,95 @@
+<script lang="ts">
+  export interface ProgressRootProps extends PrimitiveProps {
+    modelValue?: number | null
+    max?: number
+    getValueLabel?: (value: number | null | undefined, max: number) => string | undefined
+    getValueText?: (value: number | null | undefined, max: number) => string | undefined
+  }
+
+  export type ProgressRootEmits = {
+    'update:modelValue': [value: number | null | undefined]
+    'update:max': [value: number]
+  }
+</script>
+
+<script setup lang="ts">
+  import { computed, nextTick, watch } from 'vue'
+  import {
+    DEFAULT_PROGRESS_MAX,
+    defaultProgressLabel,
+    isNumber,
+    isValidProgressMax,
+    isValidProgressValue,
+    progressMaxError,
+    progressState as getProgressState,
+    progressValueError,
+  } from '../../../../shared/src/primitives/progress'
+  import { Primitive, type PrimitiveProps } from '../primitive'
+  import { useForwardExpose } from '../utils/useForwardExpose'
+  import { useVModel } from '../utils/useVModel'
+  import { provideProgressRootContext } from './context'
+
+  const props = withDefaults(defineProps<ProgressRootProps>(), {
+    max: DEFAULT_PROGRESS_MAX,
+    getValueLabel: defaultProgressLabel,
+  })
+  const emit = defineEmits<ProgressRootEmits>()
+  useForwardExpose()
+
+  const modelValue = useVModel(
+    props,
+    'modelValue',
+    (_, value) => emit('update:modelValue', value),
+    {
+      passive: props.modelValue === undefined,
+    },
+  )
+  const max = useVModel(props, 'max', (_, value) => emit('update:max', value), {
+    passive: props.max === undefined,
+  })
+
+  watch(
+    () => modelValue.value,
+    async value => {
+      const corrected = isValidProgressValue(value, props.max) ? value : null
+      if (corrected === null && value != null) console.error(progressValueError(value))
+      if (corrected !== value) {
+        await nextTick()
+        modelValue.value = corrected
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    () => props.max,
+    value => {
+      const corrected = isValidProgressMax(props.max) ? props.max : DEFAULT_PROGRESS_MAX
+      if (corrected !== props.max) console.error(progressMaxError(props.max))
+      if (corrected !== value) max.value = corrected
+    },
+    { immediate: true },
+  )
+
+  const progressState = computed(() => getProgressState(modelValue.value, max.value))
+
+  provideProgressRootContext({ modelValue, max, progressState })
+</script>
+
+<template>
+  <Primitive
+    :as-child="asChild"
+    :as="as"
+    :aria-valuemax="max"
+    :aria-valuemin="0"
+    :aria-valuenow="isNumber(modelValue) ? modelValue : undefined"
+    :aria-valuetext="getValueText?.(modelValue, max)"
+    :aria-label="getValueLabel(modelValue, max)"
+    role="progressbar"
+    :data-state="progressState"
+    :data-value="modelValue ?? undefined"
+    :data-max="max"
+  >
+    <slot :modelValue="modelValue" />
+  </Primitive>
+</template>

package/src/primitives/progress/context.ts

@@ -0,0 +1,12 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { ProgressState } from '../../../../shared/src/primitives/progress'
+import { createContext } from '../utils/createContext'
+
+export interface ProgressRootContext {
+  modelValue?: Readonly<Ref<number | null | undefined>>
+  max: Readonly<Ref<number>>
+  progressState: ComputedRef<ProgressState>
+}
+
+export const [injectProgressRootContext, provideProgressRootContext] =
+  createContext<ProgressRootContext>('ProgressRoot')

package/src/primitives/progress/index.ts

@@ -0,0 +1,7 @@
+export { injectProgressRootContext, type ProgressRootContext } from './context'
+export {
+  default as ProgressRoot,
+  type ProgressRootEmits,
+  type ProgressRootProps,
+} from './ProgressRoot.vue'
+export { default as ProgressIndicator, type ProgressIndicatorProps } from './ProgressIndicator.vue'

package/src/primitives/radio-group/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from VueUse:
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/primitives/radio-group/Radio.ts

@@ -0,0 +1,110 @@
+import {
+  computed,
+  createCommentVNode,
+  defineComponent,
+  Fragment,
+  h,
+  mergeProps,
+  renderSlot,
+  toRefs,
+  withCtx,
+  withModifiers,
+  type PropType,
+} from 'vue'
+import { getLabelText } from '../../../../shared/src/primitives/label'
+import { dispatchRadioSelect } from '../../../../shared/src/primitives/radio-group'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import type { AcceptableValue } from '../utils/types'
+import { useFormControl } from '../utils/useFormControl'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useForwardScopeId } from '../utils/useForwardScopeId'
+import { useVModel } from '../utils/useVModel'
+import { VisuallyHiddenInput } from '../visually-hidden'
+
+export const Radio = defineComponent({
+  name: 'Radio',
+  inheritAttrs: false,
+  props: {
+    id: { type: String, required: false },
+    value: { type: null as unknown as PropType<AcceptableValue>, required: false },
+    disabled: { type: Boolean, required: false, default: false },
+    checked: { type: Boolean, required: false, default: undefined },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'button',
+    },
+    name: { type: String, required: false },
+    required: { type: Boolean, required: false },
+  },
+  emits: ['update:checked', 'select'],
+  setup(props, { emit, attrs, slots }) {
+    const checked = useVModel(props, 'checked', (_, value) => emit('update:checked', value), {
+      passive: props.checked === undefined,
+    })
+    const { value } = toRefs(props)
+    const { forwardRef, currentElement: triggerElement } = useForwardExpose()
+    const isFormControl = useFormControl(triggerElement)
+    const scopeIdAttrs = useForwardScopeId()
+    const ariaLabel = computed(() => getLabelText(props.id, triggerElement.value))
+
+    function handleClick(event: MouseEvent) {
+      if (props.disabled) return
+      dispatchRadioSelect(event, props.value, selectEvent => {
+        emit('select', selectEvent)
+        if (selectEvent?.defaultPrevented) return
+        checked.value = true
+        if (isFormControl.value) selectEvent.stopPropagation()
+      })
+    }
+
+    return () =>
+      h(Fragment, null, [
+        h(
+          Primitive,
+          mergeProps(
+            {
+              id: props.id,
+              ref: forwardRef,
+              role: 'radio',
+              type: props.as === 'button' ? 'button' : undefined,
+              as: props.as,
+              'aria-checked': checked.value ?? false,
+              'aria-label': ariaLabel.value,
+              'as-child': props.asChild,
+              disabled: props.disabled ? '' : undefined,
+              'data-state': checked.value ? 'checked' : 'unchecked',
+              'data-disabled': props.disabled ? '' : undefined,
+              value: value.value,
+              required: props.required,
+              name: props.name,
+            },
+            { ...scopeIdAttrs, ...attrs },
+            { onClick: withModifiers(handleClick as (event: Event) => void, ['stop']) },
+          ),
+          {
+            default: withCtx(() => [renderSlot(slots, 'default', { checked: checked.value })]),
+          },
+        ),
+        isFormControl.value && props.name
+          ? h(
+              VisuallyHiddenInput,
+              mergeProps(
+                {
+                  key: 0,
+                  type: 'radio',
+                  tabindex: '-1',
+                  value: value.value,
+                  checked: !!checked.value,
+                  name: props.name,
+                  disabled: props.disabled,
+                  required: props.required,
+                },
+                scopeIdAttrs,
+              ) as { name: string; value: unknown },
+            )
+          : createCommentVNode('v-if', true),
+      ])
+  },
+})