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

package/src/ui/card.tsx

@@ -0,0 +1,217 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+
+const CardContext = React.createContext<{
+  size: "default" | "sm"
+}>({
+  size: "default",
+})
+
+/**
+ * @desc 内容卡片组件。
+ * @param {Parameters<typeof Card>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Card>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Card } from '@open-dy/vibecoding-sdk-taro/ui/card'
+ * <Card />
+ * ```
+ */
+function Card({
+  className,
+  size = "default",
+  children,
+  ...props
+}: ViewProps & {
+  /** @desc 卡片密度，默认 default（gap-4/py-4，内区 px-4）；sm 使用 gap-3/py-3 和内区 px-3，影响标题及页脚。 */
+  size?: "default" | "sm" }) {
+  const hasFooter = React.useMemo(
+    () =>
+      React.Children.toArray(children).some(
+        (child) => React.isValidElement(child) && child.type === CardFooter
+      ),
+    [children]
+  )
+
+  return (
+    <CardContext.Provider value={{ size }}>
+      <View
+        data-slot="card"
+        data-size={size}
+        className={cn(
+          "group/card flex flex-col overflow-hidden rounded-xl bg-card text-sm text-card-foreground ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+          size === "sm" ? "gap-3 py-3" : "gap-4 py-4",
+          hasFooter && "pb-0",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </View>
+    </CardContext.Provider>
+  )
+}
+
+/**
+ * @desc 内容卡片头部布局。
+ * @param {Parameters<typeof CardHeader>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof CardHeader>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Card, CardHeader } from '@open-dy/vibecoding-sdk-taro/ui/card'
+ * <Card><CardHeader /></Card>
+ * ```
+ */
+function CardHeader({ className, children, ...props }: ViewProps) {
+  const { size } = React.useContext(CardContext)
+  const childArray = React.Children.toArray(children)
+  const hasAction = childArray.some(
+    (child) => React.isValidElement(child) && child.type === CardAction
+  )
+  const hasDescription = childArray.some(
+    (child) => React.isValidElement(child) && child.type === CardDescription
+  )
+
+  return (
+    <View
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl",
+        size === "sm" ? "px-3" : "px-4",
+        hasAction && "grid-cols-[1fr_auto]",
+        hasDescription && "grid-rows-[auto_auto]",
+        size === "sm" ? "[.border-b]:pb-3" : "[.border-b]:pb-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 内容卡片标题。
+ * @param {Parameters<typeof CardTitle>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof CardTitle>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Card, CardTitle } from '@open-dy/vibecoding-sdk-taro/ui/card'
+ * <Card><CardTitle /></Card>
+ * ```
+ */
+function CardTitle({ className, ...props }: ViewProps) {
+  const { size } = React.useContext(CardContext)
+  return (
+    <View
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium",
+        size === "sm" && "text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 内容卡片说明文本。
+ * @param {Parameters<typeof CardDescription>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof CardDescription>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Card, CardDescription } from '@open-dy/vibecoding-sdk-taro/ui/card'
+ * <Card><CardDescription /></Card>
+ * ```
+ */
+function CardDescription({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 内容卡片操作入口。
+ * @param {Parameters<typeof CardAction>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof CardAction>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Card, CardAction } from '@open-dy/vibecoding-sdk-taro/ui/card'
+ * <Card><CardAction /></Card>
+ * ```
+ */
+function CardAction({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 内容卡片内容容器。
+ * @param {Parameters<typeof CardContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof CardContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Card, CardContent } from '@open-dy/vibecoding-sdk-taro/ui/card'
+ * <Card><CardContent /></Card>
+ * ```
+ */
+function CardContent({ className, ...props }: ViewProps) {
+  const { size } = React.useContext(CardContext)
+  return (
+    <View
+      data-slot="card-content"
+      className={cn(size === "sm" ? "px-3" : "px-4", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 内容卡片底部布局。
+ * @param {Parameters<typeof CardFooter>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof CardFooter>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Card, CardFooter } from '@open-dy/vibecoding-sdk-taro/ui/card'
+ * <Card><CardFooter /></Card>
+ * ```
+ */
+function CardFooter({ className, ...props }: ViewProps) {
+  const { size } = React.useContext(CardContext)
+  return (
+    <View
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50",
+        size === "sm" ? "p-3" : "p-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/ui/carousel.tsx

@@ -0,0 +1,259 @@
+import * as React from "react"
+import { View, Swiper, SwiperItem, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import { ChevronLeft, ChevronRight } from "@open-dy/lucide-taro"
+
+type CarouselProps = ViewProps & {
+  /** @desc 轮播方向，默认 horizontal；vertical 启用原生 Swiper 的纵向模式并调整前后按钮位置。 */
+  orientation?: "horizontal" | "vertical"
+  /** @desc 兼容属性；当前组件不读取该配置，也不把它作为 Swiper 配置，不能依赖它控制轮播。 */
+  opts?: Record<string, unknown>
+  /** @desc 兼容回调；当前组件不会调用它。需要内部轮播状态时应在 Carousel 内使用 useCarousel。 */
+  setApi?: (api: unknown) => void
+}
+
+type CarouselContextProps = {
+  orientation: "horizontal" | "vertical"
+  current: number
+  setCurrent: (n: number) => void
+  total: number
+  setTotal: (n: number) => void
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+}
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+/**
+ * @desc 读取最近的 Carousel 上下文，包括当前位置、总数和前后翻页方法。
+ * @param 无参数
+ * @return {ReturnType<typeof useCarousel>} 当前上下文或锚点引用。
+ * @remarks 必须在 Carousel 的后代组件中调用；缺少上下文时会抛错。
+ * @example
+ * ```tsx
+ * import { useCarousel, CarouselNext } from '@open-dy/vibecoding-sdk-taro/ui/carousel'
+ * function Controls() { const carousel = useCarousel(); return <CarouselNext disabled={!carousel.canScrollNext} /> }
+ * // Controls 必须渲染在 Carousel 内。
+ * ```
+ */
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+  return context
+}
+
+/**
+ * @desc 轮播组件。
+ * @param {Parameters<typeof Carousel>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Carousel>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Carousel } from '@open-dy/vibecoding-sdk-taro/ui/carousel'
+ * <Carousel />
+ * ```
+ */
+function Carousel({
+  orientation = "horizontal",
+  className,
+  children,
+  ...props
+}: CarouselProps) {
+  const [current, setCurrent] = React.useState(0)
+  const [total, setTotal] = React.useState(0)
+
+  const scrollPrev = React.useCallback(() => {
+    setCurrent((prev) => Math.max(0, prev - 1))
+  }, [])
+
+  const scrollNext = React.useCallback(() => {
+    setCurrent((prev) => Math.min(total - 1, prev + 1))
+  }, [total])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        orientation,
+        current,
+        setCurrent,
+        total,
+        setTotal,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev: current > 0,
+        canScrollNext: current < total - 1,
+      }}
+    >
+      <View
+        data-slot="carousel"
+        className={cn("relative overflow-visible", className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </CarouselContext.Provider>
+  )
+}
+
+/**
+ * @desc 轮播内容容器。
+ * @param {Parameters<typeof CarouselContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof CarouselContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Carousel, CarouselContent } from '@open-dy/vibecoding-sdk-taro/ui/carousel'
+ * <Carousel><CarouselContent /></Carousel>
+ * ```
+ */
+function CarouselContent({
+  className,
+  children,
+  ...props
+}: ViewProps) {
+  const { orientation, current, setCurrent, setTotal } = useCarousel()
+  const childArray = React.Children.toArray(children)
+
+  React.useEffect(() => {
+    setTotal(childArray.length)
+  }, [childArray.length, setTotal])
+
+  return (
+    <Swiper
+      data-slot="carousel-content"
+      className={cn("overflow-hidden", className)}
+      vertical={orientation === "vertical"}
+      current={current}
+      onChange={(e) => setCurrent(e.detail.current)}
+      {...props}
+    >
+      {childArray.map((child, index) => (
+        <SwiperItem key={index}>{child}</SwiperItem>
+      ))}
+    </Swiper>
+  )
+}
+
+/**
+ * @desc 轮播条目。
+ * @param {Parameters<typeof CarouselItem>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof CarouselItem>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Carousel, CarouselItem } from '@open-dy/vibecoding-sdk-taro/ui/carousel'
+ * <Carousel><CarouselItem /></Carousel>
+ * ```
+ */
+function CarouselItem({
+  className,
+  ...props
+}: ViewProps) {
+  return (
+    <View
+      data-slot="carousel-item"
+      className={cn("min-w-0 shrink-0 grow-0 basis-full", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 轮播上一项按钮。
+ * @param {Parameters<typeof CarouselPrevious>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof CarouselPrevious>[0]["variant"]} props.variant 按钮外观，默认 outline；其余变体同 Button.variant。
+ * @param {Parameters<typeof CarouselPrevious>[0]["size"]} props.size 按钮尺寸，默认 icon-sm（size-7）；可按 Button.size 选择其他尺寸。
+ * @return {ReturnType<typeof CarouselPrevious>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Carousel, CarouselPrevious } from '@open-dy/vibecoding-sdk-taro/ui/carousel'
+ * <Carousel><CarouselPrevious /></Carousel>
+ * ```
+ */
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button> & {
+  /** @desc 沿用 Button 的原生属性；普通 View 分支不保证阻止点击。边界状态由轮播组件自身的 canScrollPrev/canScrollNext 样式控制。 */
+  disabled?: boolean }) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute z-10 touch-manipulation rounded-full bg-background/80",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        !canScrollPrev && "pointer-events-none opacity-50",
+        className
+      )}
+      onTap={scrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ChevronLeft />
+    </Button>
+  )
+}
+
+/**
+ * @desc 轮播下一项按钮。
+ * @param {Parameters<typeof CarouselNext>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof CarouselNext>[0]["variant"]} props.variant 按钮外观，默认 outline；其余变体同 Button.variant。
+ * @param {Parameters<typeof CarouselNext>[0]["size"]} props.size 按钮尺寸，默认 icon-sm（size-7）；可按 Button.size 选择其他尺寸。
+ * @return {ReturnType<typeof CarouselNext>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Carousel, CarouselNext } from '@open-dy/vibecoding-sdk-taro/ui/carousel'
+ * <Carousel><CarouselNext /></Carousel>
+ * ```
+ */
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button> & {
+  /** @desc 沿用 Button 的原生属性；普通 View 分支不保证阻止点击。边界状态由轮播组件自身的 canScrollPrev/canScrollNext 样式控制。 */
+  disabled?: boolean }) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute z-10 touch-manipulation rounded-full bg-background/80",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        !canScrollNext && "pointer-events-none opacity-50",
+        className
+      )}
+      onTap={scrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ChevronRight />
+    </Button>
+  )
+}
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+}

package/src/ui/checkbox.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+import { Check } from "@open-dy/lucide-taro"
+
+/**
+ * @desc 复选框组件。
+ * @param {Parameters<typeof Checkbox>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Checkbox>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Checkbox } from '@open-dy/vibecoding-sdk-taro/ui/checkbox'
+ * <Checkbox />
+ * ```
+ */
+function Checkbox({
+  className,
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  disabled,
+  ...props
+}: ViewProps & {
+  /** @desc 受控选中状态；传入后以该值为准，需在 onCheckedChange 中更新。省略时由内部状态管理。 */
+  checked?: boolean
+  /** @desc 非受控模式的初始选中状态，默认 false；仅初始化时读取，传入 checked 后不生效。 */
+  defaultChecked?: boolean
+  /** @desc 用户点击切换时调用，参数为下一选中状态；禁用时不触发，受控模式需同步 checked。 */
+  onCheckedChange?: (checked: boolean) => void
+  /** @desc 是否禁止用户切换；省略或 false 时可操作，true 时不触发内部切换回调。 */
+  disabled?: boolean
+}) {
+  const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false)
+  const isControlled = checkedProp !== undefined
+  const checked = isControlled ? checkedProp : internalChecked
+
+  return (
+    <View
+      data-slot="checkbox"
+      data-checked={checked || undefined}
+      aria-checked={checked}
+      aria-disabled={disabled || undefined}
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 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
+        const next = !checked
+        if (!isControlled) setInternalChecked(next)
+        onCheckedChange?.(next)
+      }}
+      {...props}
+    >
+      {checked ? <Check color="#fff" size={12} strokeWidth={3} className="text-current" /> : null}
+    </View>
+  )
+}
+
+export { Checkbox }

package/src/ui/collapsible.tsx

@@ -0,0 +1,148 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+
+const CollapsibleContext = React.createContext<{
+  open: boolean
+  toggle: () => void
+}>({ open: false, toggle: () => {} })
+
+type CollapsibleTriggerRenderProps = Omit<ViewProps, "children"> & {
+  /** @desc 组件自动注入的触发器标识；自定义 render 应转发到触发节点，不手动修改。 */
+  "data-slot": "collapsible-trigger"
+  /** @desc 组件自动注入的展开状态：open 或 closed；自定义 render 应转发以供状态样式使用。 */
+  "data-state": "open" | "closed"
+}
+
+type CollapsibleTriggerClickEvent = Parameters<
+  NonNullable<ViewProps["onClick"]>
+>[0]
+
+type CollapsibleTriggerProps = Omit<ViewProps, "children"> & {
+  /** @desc 默认触发器内的内容；设置 render 时由自定义渲染结果取代。 */
+  children?: React.ReactNode
+  /** @desc 自定义触发器元素或渲染函数；省略时使用 View。元素会被克隆并合并点击处理；函数收到状态和事件 props，必须传给实际可点击节点。 */
+  render?:
+    | React.ReactElement
+    | ((props: CollapsibleTriggerRenderProps) => React.ReactNode)
+}
+
+/**
+ * @desc 可折叠区域组件。
+ * @param {Parameters<typeof Collapsible>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Collapsible>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Collapsible } from '@open-dy/vibecoding-sdk-taro/ui/collapsible'
+ * <Collapsible />
+ * ```
+ */
+function Collapsible({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  children,
+  ...props
+}: ViewProps & {
+  /** @desc 受控展开状态；传入后以该值为准，需在 onOpenChange 中更新。省略时由组件内部管理。 */
+  open?: boolean
+  /** @desc 非受控模式的初始展开状态，默认 false；仅初始化时读取，传入 open 后不生效。 */
+  defaultOpen?: boolean
+  /** @desc 触发器或关闭操作请求改变展开状态时调用，参数为下一状态；受控模式需由调用方同步 open。 */
+  onOpenChange?: (open: boolean) => void
+}) {
+  const [internal, setInternal] = React.useState(defaultOpen ?? false)
+  const controlled = openProp !== undefined
+  const open = controlled ? openProp : internal
+
+  const toggle = React.useCallback(() => {
+    const next = !open
+    if (!controlled) setInternal(next)
+    onOpenChange?.(next)
+  }, [open, controlled, onOpenChange])
+
+  return (
+    <CollapsibleContext.Provider value={{ open, toggle }}>
+      <View data-slot="collapsible" data-state={open ? "open" : "closed"} {...props}>
+        {children}
+      </View>
+    </CollapsibleContext.Provider>
+  )
+}
+
+/**
+ * @desc 可折叠区域触发器。
+ * @param {Parameters<typeof CollapsibleTrigger>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof CollapsibleTrigger>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Collapsible, CollapsibleTrigger } from '@open-dy/vibecoding-sdk-taro/ui/collapsible'
+ * <Collapsible><CollapsibleTrigger /></Collapsible>
+ * ```
+ */
+function CollapsibleTrigger({
+  children,
+  render,
+  onClick,
+  ...props
+}: CollapsibleTriggerProps) {
+  const { open, toggle } = React.useContext(CollapsibleContext)
+  const handleClick = (event: CollapsibleTriggerClickEvent) => {
+    onClick?.(event)
+    toggle()
+  }
+
+  const triggerProps: CollapsibleTriggerRenderProps = {
+    "data-slot": "collapsible-trigger",
+    "data-state": open ? "open" : "closed",
+    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: CollapsibleTriggerClickEvent) => {
+          element.props.onClick?.(event)
+          handleClick(event)
+        },
+      })
+    }
+  }
+
+  return (
+    <View {...triggerProps}>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 可折叠区域内容容器。
+ * @param {Parameters<typeof CollapsibleContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof CollapsibleContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Collapsible, CollapsibleContent } from '@open-dy/vibecoding-sdk-taro/ui/collapsible'
+ * <Collapsible><CollapsibleContent /></Collapsible>
+ * ```
+ */
+function CollapsibleContent({ children, ...props }: ViewProps) {
+  const { open } = React.useContext(CollapsibleContext)
+  if (!open) return null
+  return (
+    <View data-slot="collapsible-content" {...props}>
+      {children}
+    </View>
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }