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

package/src/ui/alert-dialog.tsx

@@ -0,0 +1,407 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Button, buttonVariants } from "./button"
+
+const AlertDialogContext = React.createContext<{
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}>({ open: false, onOpenChange: () => {} })
+
+const AlertDialogContentContext = React.createContext<{
+  size: "default" | "sm"
+  hasMedia: boolean
+}>({
+  size: "default",
+  hasMedia: false,
+})
+
+type AlertDialogTriggerRenderProps = Omit<ViewProps, "children"> & {
+  /** @desc 组件自动注入的触发器标识；自定义 render 应转发到触发节点，不手动修改。 */
+  "data-slot": "alert-dialog-trigger"
+}
+
+type AlertDialogTriggerClickEvent = Parameters<
+  NonNullable<ViewProps["onClick"]>
+>[0]
+
+type AlertDialogTriggerProps = Omit<ViewProps, "children"> & {
+  /** @desc 默认触发器内的内容；设置 render 时由自定义渲染结果取代。 */
+  children?: React.ReactNode
+  /** @desc 自定义触发器元素或渲染函数；省略时使用 View。元素会被克隆并合并点击处理；函数收到状态和事件 props，必须传给实际可点击节点。 */
+  render?:
+    | React.ReactElement
+    | ((props: AlertDialogTriggerRenderProps) => React.ReactNode)
+}
+
+type AlertDialogActionProps = ViewProps & VariantProps<typeof buttonVariants>
+
+/**
+ * @desc 确认对话框组件。
+ * @param {Parameters<typeof AlertDialog>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AlertDialog>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { AlertDialog } from '@open-dy/vibecoding-sdk-taro/ui/alert-dialog'
+ * <AlertDialog />
+ * ```
+ */
+function AlertDialog({
+  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 (
+    <AlertDialogContext.Provider
+      value={{
+        open,
+        onOpenChange: (v) => {
+          if (!controlled) setInternal(v)
+          onOpenChange?.(v)
+        },
+      }}
+    >
+      {children}
+    </AlertDialogContext.Provider>
+  )
+}
+
+/**
+ * @desc 确认对话框触发器。
+ * @param {Parameters<typeof AlertDialogTrigger>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AlertDialogTrigger>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger } from '@open-dy/vibecoding-sdk-taro/ui/alert-dialog'
+ * <AlertDialog><AlertDialogTrigger /></AlertDialog>
+ * ```
+ */
+function AlertDialogTrigger({
+  children,
+  render,
+  onClick,
+  ...props
+}: AlertDialogTriggerProps) {
+  const { onOpenChange } = React.useContext(AlertDialogContext)
+  const handleClick = (event: AlertDialogTriggerClickEvent) => {
+    event.stopPropagation()
+    onClick?.(event)
+    onOpenChange(true)
+  }
+
+  const triggerProps: AlertDialogTriggerRenderProps = {
+    "data-slot": "alert-dialog-trigger",
+    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: AlertDialogTriggerClickEvent) => {
+          element.props.onClick?.(event)
+          handleClick(event)
+        },
+      })
+    }
+  }
+
+  return (
+    <View {...triggerProps}>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 确认对话框跨层级渲染入口。
+ * @param {Parameters<typeof AlertDialogPortal>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AlertDialogPortal>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogPortal } from '@open-dy/vibecoding-sdk-taro/ui/alert-dialog'
+ * <AlertDialog><AlertDialogPortal /></AlertDialog>
+ * ```
+ */
+function AlertDialogPortal({ children }: {
+  /** @desc 要渲染的子节点；该兼容包装只返回 Fragment，不额外创建原生容器或执行挂载迁移。 */
+  children?: React.ReactNode }) {
+  return <>{children}</>
+}
+
+/**
+ * @desc 确认对话框遮罩。
+ * @param {Parameters<typeof AlertDialogOverlay>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AlertDialogOverlay>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogOverlay } from '@open-dy/vibecoding-sdk-taro/ui/alert-dialog'
+ * <AlertDialog><AlertDialogOverlay /></AlertDialog>
+ * ```
+ */
+function AlertDialogOverlay({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 确认对话框内容容器。
+ * @param {Parameters<typeof AlertDialogContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AlertDialogContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogContent } from '@open-dy/vibecoding-sdk-taro/ui/alert-dialog'
+ * <AlertDialog><AlertDialogContent /></AlertDialog>
+ * ```
+ */
+function AlertDialogContent({
+  className,
+  children,
+  size = "default",
+  ...props
+}: ViewProps & {
+  /** @desc 对话框尺寸，默认 default；sm 使用紧凑宽度和双列操作区，default 可在较宽屏幕扩展到 max-w-sm。 */
+  size?: "default" | "sm" }) {
+  const ctx = React.useContext(AlertDialogContext)
+
+  const hasMedia = React.useMemo(
+    () =>
+      React.Children.toArray(children).some(
+        (child) =>
+          React.isValidElement(child) &&
+          (child.props as { "data-slot"?: string })["data-slot"] === "alert-dialog-media"
+      ),
+    [children]
+  )
+
+  if (!ctx.open) return null
+
+  return (
+    <View className="fixed inset-0 z-50 flex items-center justify-center">
+      <AlertDialogOverlay />
+      <AlertDialogContentContext.Provider value={{ size, hasMedia }}>
+        <View
+          data-slot="alert-dialog-content"
+          className={cn(
+            "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none",
+            size === "sm" ? "max-w-xs" : "max-w-xs sm:max-w-sm",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </View>
+      </AlertDialogContentContext.Provider>
+    </View>
+  )
+}
+
+/**
+ * @desc 确认对话框头部布局。
+ * @param {Parameters<typeof AlertDialogHeader>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AlertDialogHeader>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogHeader } from '@open-dy/vibecoding-sdk-taro/ui/alert-dialog'
+ * <AlertDialog><AlertDialogHeader /></AlertDialog>
+ * ```
+ */
+function AlertDialogHeader({ className, ...props }: ViewProps) {
+  const { size, hasMedia } = React.useContext(AlertDialogContentContext)
+  return (
+    <View
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center",
+        hasMedia && "grid-rows-[auto_auto_1fr] gap-x-4",
+        size === "default" && "sm:place-items-start sm:text-left",
+        size === "default" && hasMedia && "sm:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 确认对话框底部布局。
+ * @param {Parameters<typeof AlertDialogFooter>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AlertDialogFooter>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogFooter } from '@open-dy/vibecoding-sdk-taro/ui/alert-dialog'
+ * <AlertDialog><AlertDialogFooter /></AlertDialog>
+ * ```
+ */
+function AlertDialogFooter({ className, ...props }: ViewProps) {
+  const { size } = React.useContext(AlertDialogContentContext)
+  return (
+    <View
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4",
+        size === "sm" && "grid grid-cols-2",
+        size !== "sm" && "sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 确认对话框标题。
+ * @param {Parameters<typeof AlertDialogTitle>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AlertDialogTitle>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTitle } from '@open-dy/vibecoding-sdk-taro/ui/alert-dialog'
+ * <AlertDialog><AlertDialogTitle /></AlertDialog>
+ * ```
+ */
+function AlertDialogTitle({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 确认对话框说明文本。
+ * @param {Parameters<typeof AlertDialogDescription>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AlertDialogDescription>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogDescription } from '@open-dy/vibecoding-sdk-taro/ui/alert-dialog'
+ * <AlertDialog><AlertDialogDescription /></AlertDialog>
+ * ```
+ */
+function AlertDialogDescription({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="alert-dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 确认对话框操作入口。
+ * @param {Parameters<typeof AlertDialogAction>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof AlertDialogAction>[0]["variant"]} props.variant 确认按钮外观，默认 default；其余变体同 Button.variant。
+ * @param {Parameters<typeof AlertDialogAction>[0]["size"]} props.size 尺寸，默认 default（h-8）；xs/sm/lg 分别为 h-6/h-7/h-9；icon/icon-xs/icon-sm/icon-lg 为 size-8/6/7/9 正方形图标按钮。
+ * @return {ReturnType<typeof AlertDialogAction>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogAction } from '@open-dy/vibecoding-sdk-taro/ui/alert-dialog'
+ * <AlertDialog><AlertDialogAction /></AlertDialog>
+ * ```
+ */
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  onClick,
+  ...props
+}: AlertDialogActionProps) {
+  const { onOpenChange } = React.useContext(AlertDialogContext)
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(buttonVariants({ variant, size }), "w-full sm:w-auto", className)}
+      onClick={(event) => {
+        onOpenChange(false)
+        onClick?.(event)
+      }}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 确认对话框取消按钮。
+ * @param {Parameters<typeof AlertDialogCancel>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof AlertDialogCancel>[0]["variant"]} props.variant 取消按钮外观，默认 outline；其余变体同 Button.variant。
+ * @param {Parameters<typeof AlertDialogCancel>[0]["size"]} props.size 尺寸，默认 default（h-8）；xs/sm/lg 分别为 h-6/h-7/h-9；icon/icon-xs/icon-sm/icon-lg 为 size-8/6/7/9 正方形图标按钮。
+ * @return {ReturnType<typeof AlertDialogCancel>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogCancel } from '@open-dy/vibecoding-sdk-taro/ui/alert-dialog'
+ * <AlertDialog><AlertDialogCancel /></AlertDialog>
+ * ```
+ */
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  onClick,
+  ...props
+}: AlertDialogActionProps) {
+  const { onOpenChange } = React.useContext(AlertDialogContext)
+  return (
+    <View
+      data-slot="alert-dialog-cancel"
+      className={cn(
+        buttonVariants({ variant, size }),
+        "mt-2 w-full sm:mt-0 sm:w-auto",
+        className
+      )}
+      onClick={(event) => {
+        onOpenChange(false)
+        onClick?.(event)
+      }}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/src/ui/alert.tsx

@@ -0,0 +1,149 @@
+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"
+
+const AlertContext = React.createContext({
+  hasAction: false,
+  hasMedia: false,
+  variant: "default" as "default" | "destructive",
+})
+
+const alertVariants = cva(
+  // Taro doesn't render `svg` icons in most cases. Only switch to the icon+content
+  // two-column layout when the first child is an Image-like element.
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-[>image]:grid-cols-[auto_1fr] has-[>image]:gap-x-2 has-[>taro-image-core]:grid-cols-[auto_1fr] has-[>taro-image-core]:gap-x-2 has-[>img]:grid-cols-[auto_1fr] has-[>img]:gap-x-2 [&>image]:row-span-2 [&>image]:translate-y-0.5 [&>taro-image-core]:row-span-2 [&>taro-image-core]:translate-y-0.5 [&>img]:row-span-2 [&>img]:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive: "bg-card text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * @desc 提示信息组件。
+ * @param {Parameters<typeof Alert>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof Alert>[0]["variant"]} props.variant 提示色彩，默认 default；destructive 使用危险操作颜色并同步到 AlertDescription，只控制视觉，不执行错误处理。
+ * @return {ReturnType<typeof Alert>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Alert } from '@open-dy/vibecoding-sdk-taro/ui/alert'
+ * <Alert />
+ * ```
+ */
+function Alert({
+  className,
+  variant,
+  children,
+  ...props
+}: ViewProps & VariantProps<typeof alertVariants>) {
+  const resolvedVariant = variant ?? "default"
+  const childArray = React.Children.toArray(children)
+  const hasAction = childArray.some(
+    (child) => React.isValidElement(child) && child.type === AlertAction
+  )
+  const hasMedia = childArray.some((child) => {
+    if (!React.isValidElement(child)) return false
+    const childType = typeof child.type === "string" ? child.type : ""
+    return childType === "image" || childType === "img" || childType === "taro-image-core"
+  })
+
+  return (
+    <AlertContext.Provider value={{ hasAction, hasMedia, variant: resolvedVariant }}>
+      <View
+        data-slot="alert"
+        className={cn(
+          alertVariants({ variant: resolvedVariant }),
+          hasAction && "relative pr-18",
+          hasMedia && "grid-cols-[auto_1fr] gap-x-2",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </View>
+    </AlertContext.Provider>
+  )
+}
+
+/**
+ * @desc 提示信息标题。
+ * @param {Parameters<typeof AlertTitle>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AlertTitle>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Alert, AlertTitle } from '@open-dy/vibecoding-sdk-taro/ui/alert'
+ * <Alert><AlertTitle /></Alert>
+ * ```
+ */
+function AlertTitle({ className, ...props }: ViewProps) {
+  const { hasMedia } = React.useContext(AlertContext)
+  return (
+    <View
+      data-slot="alert-title"
+      className={cn(
+        "font-medium [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        hasMedia && "col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 提示信息说明文本。
+ * @param {Parameters<typeof AlertDescription>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AlertDescription>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Alert, AlertDescription } from '@open-dy/vibecoding-sdk-taro/ui/alert'
+ * <Alert><AlertDescription /></Alert>
+ * ```
+ */
+function AlertDescription({
+  className,
+  ...props
+}: ViewProps) {
+  const { variant } = React.useContext(AlertContext)
+  return (
+    <View
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        variant === "destructive" && "text-destructive/90",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 提示信息操作入口。
+ * @param {Parameters<typeof AlertAction>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AlertAction>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Alert, AlertAction } from '@open-dy/vibecoding-sdk-taro/ui/alert'
+ * <Alert><AlertAction /></Alert>
+ * ```
+ */
+function AlertAction({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/src/ui/aspect-ratio.tsx

@@ -0,0 +1,37 @@
+import { View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+
+/**
+ * @desc 固定宽高比容器组件。
+ * @param {Parameters<typeof AspectRatio>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AspectRatio>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { AspectRatio } from '@open-dy/vibecoding-sdk-taro/ui/aspect-ratio'
+ * <AspectRatio ratio={16 / 9} />
+ * ```
+ */
+function AspectRatio({
+  ratio,
+  className,
+  style,
+  ...props
+}: ViewProps & {
+  /** @desc 必填宽高比（宽 ÷ 高），应为正数，例如 16 / 9；通过 CSS aspect-ratio 控制根容器，不设置固定宽度。 */
+  ratio: number }) {
+  return (
+    <View
+      data-slot="aspect-ratio"
+      style={
+        {
+          "--ratio": ratio,
+        } as React.CSSProperties
+      }
+      className={cn("relative aspect-(--ratio)", className)}
+      {...props}
+    />
+  )
+}
+
+export { AspectRatio }