@open-dy/vibecoding-sdk-taro 0.0.1-beta.4 → 0.0.1

package/src/ui/popover.tsx

@@ -0,0 +1,363 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+import { computePosition, getRectById } from "../lib/measure"
+import { isH5 } from "../lib/platform"
+import { cn } from "../lib/utils"
+import { Portal } from "./portal"
+
+const PopoverContext = React.createContext<{
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  triggerId: string
+ }>({
+  open: false,
+  onOpenChange: () => {},
+  triggerId: "",
+})
+
+type PopoverTriggerRenderProps = Omit<ViewProps, "children"> & {
+  /** @desc 组件自动注入的触发器标识；自定义 render 应转发到触发节点，不手动修改。 */
+  "data-slot": "popover-trigger"
+  /** @desc 组件自动注入的展开状态；自定义 render 应转发到触发节点。 */
+  "aria-expanded": boolean
+}
+
+type PopoverTriggerClickEvent = Parameters<
+  NonNullable<ViewProps["onClick"]>
+>[0]
+
+type PopoverTriggerProps = Omit<ViewProps, "children"> & {
+  /** @desc 默认触发器内的内容；设置 render 时由自定义渲染结果取代。 */
+  children?: React.ReactNode
+  /** @desc 自定义触发器元素或渲染函数；省略时使用 View。元素会被克隆并合并点击处理；函数收到状态和事件 props，必须传给实际可点击节点。 */
+  render?:
+    | React.ReactElement
+    | ((props: PopoverTriggerRenderProps) => React.ReactNode)
+}
+
+/**
+ * @desc 弹出面板组件。
+ * @param {Parameters<typeof Popover>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Popover>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Popover } from '@open-dy/vibecoding-sdk-taro/ui/popover'
+ * <Popover />
+ * ```
+ */
+function Popover({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: {
+  /** @desc 受控展开状态；传入后以该值为准，需在 onOpenChange 中更新。省略时由组件内部管理。 */
+  open?: boolean
+  /** @desc 非受控模式的初始展开状态，默认 false；仅初始化时读取，传入 open 后不生效。 */
+  defaultOpen?: boolean
+  /** @desc 触发器或关闭操作请求改变展开状态时调用，参数为下一状态；受控模式需由调用方同步 open。 */
+  onOpenChange?: (open: boolean) => void
+  /** @desc 同一实例的触发器、内容区等组合子组件；省略时不显示内容，子组件通过上下文共享状态。 */
+  children?: React.ReactNode
+}) {
+  const triggerId = React.useRef(
+    `popover-trigger-${Math.random().toString(36).slice(2, 10)}`
+  )
+  const [internal, setInternal] = React.useState(defaultOpen ?? false)
+  const controlled = openProp !== undefined
+  const open = controlled ? openProp : internal
+
+  React.useEffect(() => {
+    if (!open || !isH5() || typeof document === "undefined") return
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onOpenChange?.(false)
+        if (!controlled) setInternal(false)
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown)
+    return () => document.removeEventListener("keydown", onKeyDown)
+  }, [controlled, onOpenChange, open])
+
+  return (
+    <PopoverContext.Provider
+      value={{
+        open,
+        onOpenChange: (v) => {
+          if (!controlled) setInternal(v)
+          onOpenChange?.(v)
+        },
+        triggerId: triggerId.current,
+      }}
+    >
+      {children}
+    </PopoverContext.Provider>
+  )
+}
+
+/**
+ * @desc 弹出面板触发器。
+ * @param {Parameters<typeof PopoverTrigger>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof PopoverTrigger>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Popover, PopoverTrigger } from '@open-dy/vibecoding-sdk-taro/ui/popover'
+ * <Popover><PopoverTrigger /></Popover>
+ * ```
+ */
+function PopoverTrigger({
+  children,
+  render,
+  onClick,
+  ...props
+}: PopoverTriggerProps) {
+  const { open, onOpenChange, triggerId } = React.useContext(PopoverContext)
+
+  const handleClick = (event: PopoverTriggerClickEvent) => {
+    onClick?.(event)
+    onOpenChange(!open)
+  }
+
+  const triggerProps: PopoverTriggerRenderProps = {
+    "data-slot": "popover-trigger",
+    "aria-expanded": open,
+    id: triggerId,
+    onClick: handleClick,
+    ...props,
+  }
+
+  if (render) {
+    if (typeof render === "function") {
+      return <>{render(triggerProps)}</>
+    }
+
+    if (React.isValidElement(render)) {
+      const element = render as React.ReactElement<{
+        onClick?: ViewProps["onClick"]
+      }>
+
+      return React.cloneElement(element, {
+        ...triggerProps,
+        onClick: (event: PopoverTriggerClickEvent) => {
+          element.props.onClick?.(event)
+          handleClick(event)
+        },
+      })
+    }
+  }
+
+  return (
+    <View {...triggerProps}>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 弹出面板内容容器。
+ * @param {Parameters<typeof PopoverContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof PopoverContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Popover, PopoverContent } from '@open-dy/vibecoding-sdk-taro/ui/popover'
+ * <Popover><PopoverContent /></Popover>
+ * ```
+ */
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  side = "bottom",
+  children,
+  style,
+  ...props
+}: ViewProps & {
+  /** @desc 相对触发器的对齐位置：start 起端、center 居中、end 末端；默认 center。 */
+  align?: "start" | "center" | "end"
+  /** @desc 内容与触发器之间的间距，单位为像素，默认 4；参与测量后的浮层定位。 */
+  sideOffset?: number
+  /** @desc 内容出现的方向：top、bottom、left 或 right；默认 bottom，定位时会结合视口边界调整。 */
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  const { open, onOpenChange, triggerId } = React.useContext(PopoverContext)
+  const contentId = React.useRef(
+    `popover-content-${Math.random().toString(36).slice(2, 10)}`
+  )
+  const [position, setPosition] = React.useState<{
+    left: number
+    top: number
+  } | null>(null)
+
+  React.useEffect(() => {
+    if (!open) {
+      setPosition(null)
+      return
+    }
+
+    let cancelled = false
+
+    const updatePosition = async () => {
+      const [triggerRect, contentRect] = await Promise.all([
+        getRectById(triggerId),
+        getRectById(contentId.current),
+      ])
+
+      if (cancelled || !triggerRect?.width || !contentRect?.width) return
+
+      setPosition(
+        computePosition({
+          triggerRect,
+          contentRect,
+          align,
+          side,
+          sideOffset,
+        })
+      )
+    }
+
+    const timer =
+      typeof requestAnimationFrame !== "undefined"
+        ? requestAnimationFrame(() => updatePosition())
+        : (setTimeout(() => updatePosition(), 0) as unknown as number)
+
+    return () => {
+      cancelled = true
+      if (typeof cancelAnimationFrame !== "undefined") {
+        cancelAnimationFrame(timer)
+      } else {
+        clearTimeout(timer)
+      }
+    }
+  }, [align, open, side, sideOffset, triggerId])
+
+  if (!open) return null
+
+  const contentStyle = position
+    ? ({
+        ...(style as object),
+        left: position.left,
+        top: position.top,
+      } as React.CSSProperties)
+    : ({
+        ...(style as object),
+        left: 0,
+        top: 0,
+        opacity: 0,
+        pointerEvents: "none",
+      } as React.CSSProperties)
+
+  return (
+    <Portal>
+      <View
+        className="fixed inset-0 z-40"
+        onClick={() => onOpenChange(false)}
+      />
+      <View
+        id={contentId.current}
+        data-slot="popover-content"
+        data-state="open"
+        data-align={align}
+        data-side={side}
+        className={cn(
+          "fixed z-50 w-72 origin-[var(--transform-origin)] rounded-lg border bg-popover p-4 text-popover-foreground shadow-md outline-hidden",
+          className
+        )}
+        style={contentStyle}
+        onClick={(event) => event.stopPropagation()}
+        {...props}
+      >
+        {children}
+      </View>
+    </Portal>
+  )
+}
+
+/**
+ * @desc 弹出面板定位锚点。
+ * @param {Parameters<typeof PopoverAnchor>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof PopoverAnchor>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Popover, PopoverAnchor } from '@open-dy/vibecoding-sdk-taro/ui/popover'
+ * <Popover><PopoverAnchor /></Popover>
+ * ```
+ */
+function PopoverAnchor({ children, ...props }: ViewProps) {
+  return (
+    <View data-slot="popover-anchor" {...props}>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 弹出面板头部布局。
+ * @param {Parameters<typeof PopoverHeader>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof PopoverHeader>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Popover, PopoverHeader } from '@open-dy/vibecoding-sdk-taro/ui/popover'
+ * <Popover><PopoverHeader /></Popover>
+ * ```
+ */
+function PopoverHeader({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="popover-header"
+      className={cn("grid gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 弹出面板标题。
+ * @param {Parameters<typeof PopoverTitle>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof PopoverTitle>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Popover, PopoverTitle } from '@open-dy/vibecoding-sdk-taro/ui/popover'
+ * <Popover><PopoverTitle /></Popover>
+ * ```
+ */
+function PopoverTitle({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="popover-title"
+      className={cn("font-medium leading-none", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 弹出面板说明文本。
+ * @param {Parameters<typeof PopoverDescription>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof PopoverDescription>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Popover, PopoverDescription } from '@open-dy/vibecoding-sdk-taro/ui/popover'
+ * <Popover><PopoverDescription /></Popover>
+ * ```
+ */
+function PopoverDescription({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="popover-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}

package/src/ui/portal.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as TaroComponents from "@tarojs/components"
+import { createPortal } from "react-dom"
+import { isH5 } from "../lib/platform"
+
+const RootPortal = (TaroComponents as any).RootPortal
+
+/**
+ * @desc H5 将内容挂载到 document.body；其他端优先使用 RootPortal，不可用时保留子节点。
+ * @param {Parameters<typeof Portal>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Portal>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Portal } from '@open-dy/vibecoding-sdk-taro/ui/portal'
+ * <Portal>内容</Portal>
+ * ```
+ */
+const Portal = ({ children }: {
+  /** @desc 要挂载的节点；H5 挂到 document.body，小程序优先使用 RootPortal，不可用时在当前位置渲染。 */
+  children: React.ReactNode }) => {
+  if (isH5()) {
+    if (typeof document === "undefined") return <>{children}</>
+    return createPortal(children, document.body)
+  }
+  if (!RootPortal) {
+    return <>{children}</>
+  }
+  return <RootPortal>{children}</RootPortal>
+}
+
+export { Portal }

package/src/ui/progress.tsx

@@ -0,0 +1,182 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+
+type ProgressContextValue = {
+  formattedValue: string | null
+  percentage: number
+  value: number | null
+}
+
+type ProgressValueRender = (formattedValue: string | null, value: number | null) => React.ReactNode
+
+type ProgressValueProps = Omit<ViewProps, "children"> & {
+  /** @desc 自定义数值节点或渲染函数；函数收到格式化百分比和原始 value，缺少确定值时收到 "indeterminate" 和 null。省略时显示上下文百分比。 */
+  children?: React.ReactNode | ProgressValueRender
+}
+
+const ProgressContext = React.createContext<ProgressContextValue | null>(null)
+
+function getProgressPercentage(value = 0, max = 100) {
+  const safeMax = max > 0 ? max : 100
+  const percentage = (value / safeMax) * 100
+  return Math.min(100, Math.max(0, percentage))
+}
+
+/**
+ * @desc 进度上下文与布局容器；没有 children 时自动渲染默认轨道和指示器。
+ * @param {Parameters<typeof Progress>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof Progress>[0]["children"]} props.children 自定义组合内容；省略或 null 时自动渲染 ProgressTrack 与 ProgressIndicator，提供内容时需自行组合轨道和填充。
+ * @return {ReturnType<typeof Progress>} 组件渲染结果；类型见返回值契约。
+ * @remarks 未传 children 时自动渲染轨道和指示器；传入 children 后显式组合 ProgressTrack 和 ProgressIndicator，避免双轨道。
+ * @example
+ * ```tsx
+ * import { Progress } from '@open-dy/vibecoding-sdk-taro/ui/progress'
+ * <Progress />
+ * ```
+ */
+function Progress({
+  className,
+  children,
+  value,
+  max = 100,
+  ...props
+}: ViewProps & {
+  /** @desc 当前进度值；省略或 null 表示没有确定值（填充宽度为 0、默认数值文本为空）。数值按 max 换算百分比并限制在 0–100%。 */
+  value?: number | null
+  /** @desc 进度满值，默认 100；大于 0 时作为百分比的分母，非正数回退为 100。 */
+  max?: number
+}) {
+  const percentage = getProgressPercentage(value ?? 0, max)
+  const formattedValue = value == null ? null : `${Math.round(percentage)}%`
+
+  return (
+    <ProgressContext.Provider value={{ formattedValue, percentage, value: value ?? null }}>
+      <View
+        data-slot="progress"
+        className={cn("flex flex-wrap gap-3", className)}
+        {...props}
+      >
+        {children ?? (
+          <ProgressTrack>
+            <ProgressIndicator />
+          </ProgressTrack>
+        )}
+      </View>
+    </ProgressContext.Provider>
+  )
+}
+
+/**
+ * @desc 进度条轨道。
+ * @param {Parameters<typeof ProgressTrack>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ProgressTrack>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Progress, ProgressTrack } from '@open-dy/vibecoding-sdk-taro/ui/progress'
+ * <Progress><ProgressTrack /></Progress>
+ * ```
+ */
+function ProgressTrack({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        className
+      )}
+      data-slot="progress-track"
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 从 Progress 上下文读取百分比作为宽度；显式 style.width 优先。
+ * @param {Parameters<typeof ProgressIndicator>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof ProgressIndicator>[0]["style"]} props.style 填充条内联样式；指定 width 时优先于上下文百分比，不指定时按 Progress.value/max 计算。
+ * @return {ReturnType<typeof ProgressIndicator>} 组件渲染结果；类型见返回值契约。
+ * @remarks ProgressIndicator — 自动从 ProgressContext 读取百分比，无需手动传 style={{ width }}。 若外部显式传入 style.width，则以外部值为准。
+ * @example
+ * ```tsx
+ * import { Progress, ProgressIndicator } from '@open-dy/vibecoding-sdk-taro/ui/progress'
+ * <Progress><ProgressIndicator /></Progress>
+ * ```
+ */
+function ProgressIndicator({
+  className,
+  style,
+  ...props
+}: ViewProps) {
+  const ctx = React.useContext(ProgressContext)
+  const width = (style as React.CSSProperties | undefined)?.width ?? (ctx ? `${ctx.percentage}%` : "0%")
+
+  return (
+    <View
+      data-slot="progress-indicator"
+      className={cn("h-full bg-primary transition-all", className)}
+      style={{ ...(style as object), width }}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 进度条标签文本。
+ * @param {Parameters<typeof ProgressLabel>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ProgressLabel>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Progress, ProgressLabel } from '@open-dy/vibecoding-sdk-taro/ui/progress'
+ * <Progress><ProgressLabel /></Progress>
+ * ```
+ */
+function ProgressLabel({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn("text-sm font-medium", className)}
+      data-slot="progress-label"
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 展示进度值；支持自定义 children 或读取格式化值的渲染函数。
+ * @param {Parameters<typeof ProgressValue>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ProgressValue>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Progress, ProgressValue } from '@open-dy/vibecoding-sdk-taro/ui/progress'
+ * <Progress><ProgressValue /></Progress>
+ * ```
+ */
+function ProgressValue({ className, children, ...props }: ProgressValueProps) {
+  const context = React.useContext(ProgressContext)
+  const content = typeof children === "function"
+    ? children(context?.formattedValue ?? "indeterminate", context?.value ?? null)
+    : React.Children.count(children) > 0
+      ? children
+      : context?.formattedValue ?? null
+
+  return (
+    <View
+      className={cn(
+        "ml-auto text-sm text-muted-foreground tabular-nums",
+        className
+      )}
+      data-slot="progress-value"
+      {...props}
+    >
+      {content}
+    </View>
+  )
+}
+
+export {
+  Progress,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressValue,
+}

package/src/ui/radio-group.tsx

@@ -0,0 +1,111 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+
+const RadioGroupContext = React.createContext<{
+  value?: string
+  onValueChange?: (value: string) => void
+}>({})
+
+/**
+ * @desc 单选组组件。
+ * @param {Parameters<typeof RadioGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof RadioGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { RadioGroup } from '@open-dy/vibecoding-sdk-taro/ui/radio-group'
+ * <RadioGroup />
+ * ```
+ */
+function RadioGroup({
+  className,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  children,
+  ...props
+}: ViewProps & {
+  /** @desc 受控选中项的标识；传入后以该值为准，需在 onValueChange 中更新。省略时由内部状态管理。 */
+  value?: string
+  /** @desc 非受控模式的初始选中项，默认空字符串（没有选中项）；传入 value 后不生效。 */
+  defaultValue?: string
+  /** @desc 用户选择项目时调用，参数为下一选中项标识；受控模式需由调用方同步 value。 */
+  onValueChange?: (value: string) => void
+}) {
+  const [internal, setInternal] = React.useState(defaultValue ?? "")
+  const controlled = valueProp !== undefined
+  const value = controlled ? valueProp : internal
+
+  return (
+    <RadioGroupContext.Provider
+      value={{
+        value,
+        onValueChange: (v) => {
+          if (!controlled) setInternal(v)
+          onValueChange?.(v)
+        },
+      }}
+    >
+      <View
+        data-slot="radio-group"
+        className={cn("grid w-full gap-2", className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </RadioGroupContext.Provider>
+  )
+}
+
+/**
+ * @desc 单选组条目。
+ * @param {Parameters<typeof RadioGroupItem>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof RadioGroupItem>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem } from '@open-dy/vibecoding-sdk-taro/ui/radio-group'
+ * <RadioGroup><RadioGroupItem value="one" /></RadioGroup>
+ * ```
+ */
+function RadioGroupItem({
+  className,
+  value,
+  disabled,
+  ...props
+}: ViewProps & {
+  /** @desc 当前项目的唯一标识；必须与父组件的 value/defaultValue 对应，不同项目使用不同值。 */
+  value: string;
+  /** @desc 是否禁用当前单选项；默认可操作，禁用后不触发父组的 onValueChange。 */
+  disabled?: boolean }) {
+  const ctx = React.useContext(RadioGroupContext)
+  const checked = ctx.value === value
+
+  return (
+    <View
+      data-slot="radio-group-item"
+      data-checked={checked || undefined}
+      aria-checked={checked}
+      aria-disabled={disabled || undefined}
+      className={cn(
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        checked && "border-primary bg-primary text-primary-foreground dark:bg-primary",
+        className
+      )}
+      onClick={() => {
+        if (disabled) return
+        ctx.onValueChange?.(value)
+      }}
+      {...props}
+    >
+      {checked ? <View
+          data-slot="radio-group-indicator"
+          className="flex size-4 items-center justify-center"
+        >
+          <View className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+        </View> : null}
+    </View>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }