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

package/src/ui/sheet.tsx

@@ -0,0 +1,289 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { X } from "@open-dy/lucide-taro"
+
+const SheetContext = React.createContext<{
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}>({ open: false, onOpenChange: () => {} })
+
+/**
+ * @desc 侧边面板组件。
+ * @param {Parameters<typeof Sheet>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Sheet>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Sheet } from '@open-dy/vibecoding-sdk-taro/ui/sheet'
+ * <Sheet />
+ * ```
+ */
+function Sheet({
+  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 [internal, setInternal] = React.useState(defaultOpen ?? false)
+  const controlled = openProp !== undefined
+  const open = controlled ? openProp : internal
+
+  return (
+    <SheetContext.Provider
+      value={{
+        open,
+        onOpenChange: (v) => {
+          if (!controlled) setInternal(v)
+          onOpenChange?.(v)
+        },
+      }}
+    >
+      {children}
+    </SheetContext.Provider>
+  )
+}
+
+/**
+ * @desc 侧边面板触发器。
+ * @param {Parameters<typeof SheetTrigger>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SheetTrigger>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Sheet, SheetTrigger } from '@open-dy/vibecoding-sdk-taro/ui/sheet'
+ * <Sheet><SheetTrigger /></Sheet>
+ * ```
+ */
+function SheetTrigger({ children, ...props }: ViewProps) {
+  const { onOpenChange } = React.useContext(SheetContext)
+  return (
+    <View data-slot="sheet-trigger" onClick={() => onOpenChange(true)} {...props}>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 侧边面板关闭按钮。
+ * @param {Parameters<typeof SheetClose>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SheetClose>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Sheet, SheetClose } from '@open-dy/vibecoding-sdk-taro/ui/sheet'
+ * <Sheet><SheetClose /></Sheet>
+ * ```
+ */
+function SheetClose({ children, ...props }: ViewProps) {
+  const { onOpenChange } = React.useContext(SheetContext)
+  return (
+    <View data-slot="sheet-close" onClick={() => onOpenChange(false)} {...props}>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 侧边面板跨层级渲染入口。
+ * @param {Parameters<typeof SheetPortal>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SheetPortal>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Sheet, SheetPortal } from '@open-dy/vibecoding-sdk-taro/ui/sheet'
+ * <Sheet><SheetPortal /></Sheet>
+ * ```
+ */
+function SheetPortal({ children }: {
+  /** @desc 要渲染的子节点；该兼容包装只返回 Fragment，不额外创建原生容器或执行挂载迁移。 */
+  children?: React.ReactNode }) {
+  return <>{children}</>
+}
+
+/**
+ * @desc 侧边面板遮罩。
+ * @param {Parameters<typeof SheetOverlay>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SheetOverlay>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Sheet, SheetOverlay } from '@open-dy/vibecoding-sdk-taro/ui/sheet'
+ * <Sheet><SheetOverlay /></Sheet>
+ * ```
+ */
+function SheetOverlay({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="sheet-overlay"
+      className={cn("fixed inset-0 z-50 bg-black/50", className)}
+      {...props}
+    />
+  )
+}
+
+const sheetVariants = cva(
+  "fixed z-50 flex flex-col gap-4 bg-background shadow-lg",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b",
+        bottom: "inset-x-0 bottom-0 border-t",
+        left: "inset-y-0 left-0 w-3/4 border-r sm:max-w-sm",
+        right: "inset-y-0 right-0 w-3/4 border-l sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+/**
+ * @desc 侧边面板内容容器。
+ * @param {Parameters<typeof SheetContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof SheetContent>[0]["side"]} props.side 面板所在边，默认 right；top/bottom 贴顶部/底部，left/right 为侧栏并设置侧向宽度。
+ * @return {ReturnType<typeof SheetContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Sheet, SheetContent } from '@open-dy/vibecoding-sdk-taro/ui/sheet'
+ * <Sheet><SheetContent /></Sheet>
+ * ```
+ */
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: ViewProps &
+  VariantProps<typeof sheetVariants> & {
+  /** @desc 是否显示内置关闭按钮，默认 true；为 false 时仍可通过遮罩或 SheetClose 关闭。 */
+  showCloseButton?: boolean }) {
+  const ctx = React.useContext(SheetContext)
+  if (!ctx.open) return null
+
+  return (
+    <View className="fixed inset-0 z-50">
+      <SheetOverlay onClick={() => ctx.onOpenChange(false)} />
+      <View
+        data-slot="sheet-content"
+        className={cn(sheetVariants({ side }), "p-4", className)}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? <View
+            className="absolute top-3 right-3 flex size-5 items-center justify-center rounded-sm opacity-70"
+            onClick={() => ctx.onOpenChange(false)}
+          >
+            <X className="size-4" />
+          </View> : null}
+      </View>
+    </View>
+  )
+}
+
+/**
+ * @desc 侧边面板头部布局。
+ * @param {Parameters<typeof SheetHeader>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SheetHeader>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Sheet, SheetHeader } from '@open-dy/vibecoding-sdk-taro/ui/sheet'
+ * <Sheet><SheetHeader /></Sheet>
+ * ```
+ */
+function SheetHeader({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 侧边面板底部布局。
+ * @param {Parameters<typeof SheetFooter>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SheetFooter>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Sheet, SheetFooter } from '@open-dy/vibecoding-sdk-taro/ui/sheet'
+ * <Sheet><SheetFooter /></Sheet>
+ * ```
+ */
+function SheetFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="sheet-footer"
+      className={cn(
+        "mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 侧边面板标题。
+ * @param {Parameters<typeof SheetTitle>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SheetTitle>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Sheet, SheetTitle } from '@open-dy/vibecoding-sdk-taro/ui/sheet'
+ * <Sheet><SheetTitle /></Sheet>
+ * ```
+ */
+function SheetTitle({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="sheet-title"
+      className={cn("text-lg font-semibold text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 侧边面板说明文本。
+ * @param {Parameters<typeof SheetDescription>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof SheetDescription>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Sheet, SheetDescription } from '@open-dy/vibecoding-sdk-taro/ui/sheet'
+ * <Sheet><SheetDescription /></Sheet>
+ * ```
+ */
+function SheetDescription({
+  className,
+  ...props
+}: ViewProps) {
+  return (
+    <View
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/src/ui/skeleton.tsx

@@ -0,0 +1,25 @@
+import { View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+
+/**
+ * @desc 骨架屏组件。
+ * @param {Parameters<typeof Skeleton>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Skeleton>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Skeleton } from '@open-dy/vibecoding-sdk-taro/ui/skeleton'
+ * <Skeleton />
+ * ```
+ */
+function Skeleton({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/ui/slider.tsx

@@ -0,0 +1,176 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+
+import { cn } from "../lib/utils"
+import { isH5 } from "../lib/platform"
+
+/**
+ * @desc 滑块组件。
+ * @param {Parameters<typeof Slider>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Slider>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { useState } from 'react'
+ * import { Slider } from '@open-dy/vibecoding-sdk-taro/ui/slider'
+ * export function VolumeSlider() {
+ *   const [value, setValue] = useState([30])
+ *   return <Slider value={value} onValueChange={setValue} min={0} max={100} step={5} />
+ * }
+ * ```
+ */
+function Slider({
+  className,
+  defaultValue,
+  value: valueProp,
+  min = 0,
+  max = 100,
+  step = 1,
+  onValueChange,
+  disabled,
+  ...props
+}: ViewProps & {
+  /** @desc 非受控初始数值数组，默认 [min]；当前只使用首元素，传入 value 后不生效。 */
+  defaultValue?: number[]
+  /** @desc 受控数值数组；当前实现只使用首元素，只支持单滑块。传入后需同步 onValueChange，空数组按 min 展示。 */
+  value?: number[]
+  /** @desc 下限，默认 0；须小于 max，外部受控值应在 min/max 范围内。 */
+  min?: number
+  /** @desc 上限，默认 100；须大于 min，用户拖动的结果会限制在 min/max 范围。 */
+  max?: number
+  /** @desc 步进值，默认 1，应大于 0；拖动结果按原始数值除以 step 四舍五入后取倍数，再限制到范围。 */
+  step?: number
+  /** @desc 触摸或 H5 鼠标拖动时连续调用，返回只有一个数值的数组；不是仅在拖动结束时调用，禁用时不触发。 */
+  onValueChange?: (value: number[]) => void
+  /** @desc 是否禁用拖动，默认 false；禁用时降低透明度且不更新内部数值或调用变化回调。 */
+  disabled?: boolean
+}) {
+  const [internal, setInternal] = React.useState<number[]>(
+    valueProp ?? defaultValue ?? [min]
+  )
+  const controlled = valueProp !== undefined
+  const values = controlled ? valueProp : internal
+  const idRef = React.useRef(`slider-${Math.random().toString(36).substr(2, 9)}`)
+  const rectRef = React.useRef<{ left: number; width: number } | null>(null)
+  const dragRef = React.useRef<{ active: boolean } | null>(null)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      const query = Taro.createSelectorQuery()
+      query
+        .select(`#${idRef.current}`)
+        .boundingClientRect((res) => {
+          const r = Array.isArray(res) ? res[0] : res
+          if (r) rectRef.current = { left: r.left, width: r.width }
+        })
+        .exec()
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [])
+
+  const getValueFromPosition = React.useCallback((x: number) => {
+    const rect = rectRef.current
+    if (!rect || rect.width === 0) return values[0] ?? min
+    const ratio = Math.max(0, Math.min(1, (x - rect.left) / rect.width))
+    const raw = min + ratio * (max - min)
+    return Math.round(raw / step) * step
+  }, [max, min, step, values])
+
+  const applyEvent = React.useCallback(
+    (e: any) => {
+      if (disabled) return
+      const touch = e?.touches?.[0] || e?.changedTouches?.[0]
+      const x =
+        typeof touch?.clientX === "number"
+          ? touch.clientX
+          : typeof touch?.pageX === "number"
+            ? touch.pageX
+            : typeof e?.clientX === "number"
+              ? e.clientX
+              : typeof e?.pageX === "number"
+                ? e.pageX
+                : null
+      if (typeof x !== "number") return
+
+      const val = getValueFromPosition(x)
+      const next = [Math.max(min, Math.min(max, val))]
+      if (!controlled) setInternal(next)
+      onValueChange?.(next)
+    },
+    [controlled, disabled, getValueFromPosition, max, min, onValueChange]
+  )
+
+  const handleTouch = (e: any) => {
+    if (disabled) return
+    applyEvent(e)
+  }
+
+  const handleMouseDown = (e: any) => {
+    if (disabled) return
+    if (!isH5() || typeof document === "undefined") return
+    dragRef.current = { active: true }
+    e?.preventDefault?.()
+    applyEvent(e)
+
+    const onMove = (ev: any) => {
+      if (!dragRef.current?.active) return
+      ev?.preventDefault?.()
+      applyEvent(ev)
+    }
+    const onUp = () => {
+      dragRef.current = null
+      document.removeEventListener("mousemove", onMove as any)
+      document.removeEventListener("mouseup", onUp as any)
+    }
+
+    document.addEventListener("mousemove", onMove as any)
+    document.addEventListener("mouseup", onUp as any)
+  }
+
+  React.useEffect(() => {
+    return () => {
+      dragRef.current = null
+    }
+  }, [])
+
+  const currentValue = values[0] ?? min
+  const percent = ((currentValue - min) / (max - min)) * 100
+
+  return (
+    <View
+      className={cn("w-full", className)}
+      data-slot="slider"
+      {...props}
+    >
+      <View
+        id={idRef.current}
+        className={cn(
+          "relative flex w-full touch-none items-center select-none",
+          disabled && "opacity-50"
+        )}
+        data-disabled={disabled || undefined}
+        onTouchMove={handleTouch}
+        onTouchStart={handleTouch}
+        {...(isH5() ? ({ onMouseDown: handleMouseDown } as any) : {})}
+      >
+        <View
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-full bg-muted h-1 w-full"
+        >
+          <View
+            data-slot="slider-range"
+            className="bg-primary h-full"
+            style={{ width: `${percent}%` }}
+          />
+        </View>
+        <View
+          data-slot="slider-thumb"
+          className="absolute block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+          style={{ left: `calc(${percent}% - 6px)` }}
+        />
+      </View>
+    </View>
+  )
+}
+
+export { Slider }

package/src/ui/sonner.tsx

@@ -0,0 +1,40 @@
+import Taro from "@tarojs/taro"
+
+/**
+ * @desc 通过 Taro.showToast 显示轻提示；默认 icon 为 none，duration 为 2000 毫秒。
+ * @param {Parameters<typeof toast>[0]} message 提示文本。
+ * @param {Parameters<typeof toast>[1]} options 轻提示图标和持续时间（毫秒）。
+ * @return {ReturnType<typeof toast>} 没有返回值。
+ * @example
+ * ```tsx
+ * import { toast } from '@open-dy/vibecoding-sdk-taro/ui/sonner'
+ * toast('已保存', { duration: 2000 })
+ * ```
+ */
+function toast(message: string, options?: {
+  /** @desc 原生提示图标，默认 "none"；当前透传给 Taro.showToast，可用值及表现受目标平台约束（类型未收窄）。 */
+  icon?: string;
+  /** @desc 显示时长，单位毫秒，默认 2000；透传给 Taro.showToast。 */
+  duration?: number }) {
+  Taro.showToast({
+    title: message,
+    icon: (options?.icon as "success" | "error" | "loading" | "none") ?? "none",
+    duration: options?.duration ?? 2000,
+  })
+}
+
+/**
+ * @desc 轻提示的兼容入口；当前返回 null，不创建独立提示容器。
+ * @param 无参数
+ * @return {ReturnType<typeof Toaster>} 固定返回 null。
+ * @example
+ * ```tsx
+ * import { Toaster } from '@open-dy/vibecoding-sdk-taro/ui/sonner'
+ * <Toaster />
+ * ```
+ */
+function Toaster() {
+  return null
+}
+
+export { Toaster, toast }

package/src/ui/spinner.tsx

@@ -0,0 +1,23 @@
+import { View, type ViewProps } from "@tarojs/components"
+import { cn } from "../lib/utils"
+import { Loader } from "@open-dy/lucide-taro"
+
+/**
+ * @desc 加载指示器组件。
+ * @param {Parameters<typeof Spinner>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Spinner>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Spinner } from '@open-dy/vibecoding-sdk-taro/ui/spinner'
+ * <Spinner />
+ * ```
+ */
+function Spinner({ className, ...props }: ViewProps) {
+  return (
+    <View data-slot="spinner" className={cn("inline-flex items-center justify-center", className)} {...props}>
+      <Loader className="size-4 animate-spin" />
+    </View>
+  )
+}
+
+export { Spinner }

package/src/ui/switch.tsx

@@ -0,0 +1,94 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+
+type SwitchProps = ViewProps & {
+  /** @desc 开关尺寸，默认 default；default 为较大轨道和滑块，sm 为紧凑轨道和滑块。 */
+  size?: "sm" | "default"
+  /** @desc 受控选中状态；传入后以该值为准，需在 onCheckedChange 中更新。省略时由内部状态管理。 */
+  checked?: boolean
+  /** @desc 非受控模式的初始选中状态，默认 false；仅初始化时读取，传入 checked 后不生效。 */
+  defaultChecked?: boolean
+  /** @desc 用户点击切换时调用，参数为下一选中状态；禁用时不触发，受控模式需同步 checked。 */
+  onCheckedChange?: (checked: boolean) => void
+  /** @desc 是否禁止用户切换；省略或 false 时可操作，true 时不触发内部切换回调。 */
+  disabled?: boolean
+}
+
+const SWITCH_SIZE_STYLES = {
+  sm: {
+    track: "h-3.5 w-6",
+    thumb: "size-3",
+    translateChecked: "translate-x-2.5",
+  },
+  default: {
+    track: "h-[1.15rem] w-8",
+    thumb: "size-4",
+    translateChecked: "translate-x-3.5",
+  },
+} as const
+
+/**
+ * @desc 开关组件。
+ * @param {Parameters<typeof Switch>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Switch>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Switch } from '@open-dy/vibecoding-sdk-taro/ui/switch'
+ * <Switch />
+ * ```
+ */
+function Switch({
+  className,
+  size = "default",
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  disabled,
+  ...props
+}: SwitchProps) {
+  const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false)
+  const isControlled = checkedProp !== undefined
+  const currentChecked = isControlled ? checkedProp : internalChecked
+  const sizeStyles = SWITCH_SIZE_STYLES[size]
+
+  return (
+    <View
+      data-slot="switch"
+      data-size={size}
+      data-checked={currentChecked ? "true" : undefined}
+      data-unchecked={!currentChecked ? "true" : undefined}
+      data-disabled={disabled || undefined}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all 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 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        sizeStyles.track,
+        currentChecked ? "bg-primary" : "bg-input",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      )}
+      onClick={(event) => {
+        if (disabled) return
+        event.stopPropagation()
+        const next = !currentChecked
+        if (!isControlled) setInternalChecked(next)
+        onCheckedChange?.(next)
+      }}
+      {...props}
+    >
+      <View
+        data-slot="switch-thumb"
+        data-checked={currentChecked ? "true" : undefined}
+        data-unchecked={!currentChecked ? "true" : undefined}
+        className={cn(
+          "pointer-events-none block rounded-full bg-background ring-0 transition-transform",
+          sizeStyles.thumb,
+          currentChecked ? sizeStyles.translateChecked : "translate-x-0",
+          currentChecked ? "dark:bg-primary-foreground" : "dark:bg-foreground"
+        )}
+      />
+    </View>
+  )
+}
+
+export { Switch }