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

package/src/ui/avatar.tsx

@@ -0,0 +1,238 @@
+import * as React from "react"
+import { View, Image, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+
+const AvatarContext = React.createContext<{
+  size: "default" | "sm" | "lg"
+  status: "loading" | "error" | "loaded"
+  setStatus: React.Dispatch<React.SetStateAction<"loading" | "error" | "loaded">>
+} | null>(null)
+
+const AvatarGroupContext = React.createContext<{
+  size: "default" | "sm" | "lg"
+}>({
+  size: "default",
+})
+
+type AvatarImageProps = React.ComponentPropsWithoutRef<typeof Image> & {
+  /** @desc 图片的可访问文本，传为原生 Image 的 aria-label；不会作为失败时的可见文字，请用 AvatarFallback。 */
+  alt?: string
+}
+
+/**
+ * @desc 头像组件。
+ * @param {Parameters<typeof Avatar>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Avatar>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Avatar } from '@open-dy/vibecoding-sdk-taro/ui/avatar'
+ * <Avatar />
+ * ```
+ */
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: ViewProps & {
+  /** @desc 头像尺寸，默认 default（size-8），sm 为 size-6，lg 为 size-10；同时影响后备文字和徽标尺寸。 */
+  size?: "default" | "sm" | "lg"
+}) {
+  const [status, setStatus] = React.useState<"loading" | "error" | "loaded">(
+    "loading"
+  )
+
+  return (
+    <AvatarContext.Provider value={{ size, status, setStatus }}>
+      <View
+        data-slot="avatar"
+        data-size={size}
+        className={cn(
+          "group/avatar relative flex shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
+          size === "lg" && "size-10",
+          size === "sm" && "size-6",
+          size === "default" && "size-8",
+          className
+        )}
+        {...props}
+      />
+    </AvatarContext.Provider>
+  )
+}
+
+/**
+ * @desc 头像图片。
+ * @param {Parameters<typeof AvatarImage>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof AvatarImage>[0]["onLoad"]} props.onLoad 原生图片加载成功后调用；组件先将 Avatar 状态设为 loaded，再透传原生事件，从而隐藏 AvatarFallback。
+ * @param {Parameters<typeof AvatarImage>[0]["onError"]} props.onError 原生图片失败后调用；组件先将 Avatar 状态设为 error，再透传原生事件，可通过 AvatarFallback 展示替代内容。
+ * @param {Parameters<typeof AvatarImage>[0]["src"]} props.src 必填图片来源，透传给原生 Image；缺失或空值时 Avatar 状态为 error，请组合 AvatarFallback，不会自动生成替代文字。
+ * @return {ReturnType<typeof AvatarImage>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage } from '@open-dy/vibecoding-sdk-taro/ui/avatar'
+ * <Avatar><AvatarImage src="/assets/avatar.png" /></Avatar>
+ * ```
+ */
+function AvatarImage({
+  className,
+  src,
+  alt,
+  onLoad,
+  onError,
+  ...props
+}: AvatarImageProps) {
+  const context = React.useContext(AvatarContext)
+  const setStatus = context?.setStatus
+
+  React.useEffect(() => {
+    setStatus?.(src ? "loading" : "error")
+  }, [setStatus, src])
+
+  return (
+    <Image
+      data-slot="avatar-image"
+      src={src ?? ""}
+      aria-label={alt}
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        context?.status !== "loaded" && "absolute opacity-0",
+        className
+      )}
+      onLoad={(event) => {
+        setStatus?.("loaded")
+        onLoad?.(event)
+      }}
+      onError={(event) => {
+        setStatus?.("error")
+        onError?.(event)
+      }}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 头像图片缺失时的替代内容。
+ * @param {Parameters<typeof AvatarFallback>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AvatarFallback>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarFallback } from '@open-dy/vibecoding-sdk-taro/ui/avatar'
+ * <Avatar><AvatarFallback /></Avatar>
+ * ```
+ */
+function AvatarFallback({ className, ...props }: ViewProps) {
+  const context = React.useContext(AvatarContext)
+
+  if (context?.status === "loaded") return null
+
+  return (
+    <View
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground",
+        context?.size === "sm" && "text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 头像角标。
+ * @param {Parameters<typeof AvatarBadge>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AvatarBadge>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarBadge } from '@open-dy/vibecoding-sdk-taro/ui/avatar'
+ * <Avatar><AvatarBadge /></Avatar>
+ * ```
+ */
+function AvatarBadge({ className, ...props }: ViewProps) {
+  const context = React.useContext(AvatarContext)
+
+  return (
+    <View
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        context?.size === "sm" && "size-2 [&>view]:hidden",
+        context?.size === "default" && "size-2.5 [&>view]:size-2",
+        context?.size === "lg" && "size-3 [&>view]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 头像分组容器。
+ * @param {Parameters<typeof AvatarGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AvatarGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarGroup } from '@open-dy/vibecoding-sdk-taro/ui/avatar'
+ * <Avatar><AvatarGroup /></Avatar>
+ * ```
+ */
+function AvatarGroup({ className, ...props }: ViewProps) {
+  const size = React.useMemo(() => {
+    const childArray = React.Children.toArray(props.children)
+    const avatarChild = childArray.find(
+      (child) => React.isValidElement(child) && child.type === Avatar
+    ) as React.ReactElement<{ size?: "default" | "sm" | "lg" }> | undefined
+
+    return avatarChild?.props.size ?? "default"
+  }, [props.children])
+
+  return (
+    <AvatarGroupContext.Provider value={{ size }}>
+      <View
+        data-slot="avatar-group"
+        className={cn(
+          "group/avatar-group flex -space-x-2 [&>*]:ring-2 [&>*]:ring-background",
+          className
+        )}
+        {...props}
+      />
+    </AvatarGroupContext.Provider>
+  )
+}
+
+/**
+ * @desc 头像分组计数。
+ * @param {Parameters<typeof AvatarGroupCount>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof AvatarGroupCount>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarGroupCount } from '@open-dy/vibecoding-sdk-taro/ui/avatar'
+ * <Avatar><AvatarGroupCount /></Avatar>
+ * ```
+ */
+function AvatarGroupCount({ className, ...props }: ViewProps) {
+  const { size } = React.useContext(AvatarGroupContext)
+  return (
+    <View
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background",
+        size === "lg" && "size-10 [&>view]:size-5",
+        size === "sm" && "size-6 [&>view]:size-3",
+        size === "default" && "size-8 [&>view]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}

package/src/ui/badge.tsx

@@ -0,0 +1,77 @@
+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 { collectDataIconState } from "./helpers"
+
+/**
+ * @desc 生成徽标的样式类名；接受其声明的样式变体。
+ * @param {Parameters<typeof badgeVariants>[0]} props 样式变体以及附加的 class 或 className。
+ * @param {Parameters<typeof badgeVariants>[0]["variant"]} props.variant 徽标外观，默认 default（主题色）；secondary 次要、destructive 危险色、outline 描边、ghost 透明、link 链接样式。
+ * @return {string} 合并后的样式类名。
+ * @example
+ * ```tsx
+ * import { badgeVariants } from '@open-dy/vibecoding-sdk-taro/ui/badge'
+ * badgeVariants()
+ * ```
+ */
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * @desc 徽标组件。
+ * @param {Parameters<typeof Badge>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof Badge>[0]["variant"]} props.variant 徽标外观，默认 default（主题色）；secondary 次要、destructive 危险色、outline 描边、ghost 透明、link 链接样式。
+ * @return {ReturnType<typeof Badge>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Badge } from '@open-dy/vibecoding-sdk-taro/ui/badge'
+ * <Badge />
+ * ```
+ */
+function Badge({
+  className,
+  variant = "default",
+  ...props
+}: ViewProps & VariantProps<typeof badgeVariants>) {
+  const { hasInlineStartIcon, hasInlineEndIcon } = React.useMemo(
+    () => collectDataIconState(props.children),
+    [props.children]
+  )
+
+  return (
+    <View
+      data-slot="badge"
+      className={cn(
+        badgeVariants({ variant }),
+        hasInlineStartIcon && "pl-1.5",
+        hasInlineEndIcon && "pr-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/ui/button-group.tsx

@@ -0,0 +1,173 @@
+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 { Separator } from "./separator"
+
+/**
+ * @desc 生成按钮组的样式类名；接受其声明的样式变体。
+ * @param {Parameters<typeof buttonGroupVariants>[0]} props 样式变体以及附加的 class 或 className。
+ * @param {Parameters<typeof buttonGroupVariants>[0]["orientation"]} props.orientation 排列方向，默认 horizontal（横排）；vertical 纵排。同时调整子按钮的相连边框和首尾圆角。
+ * @return {string} 合并后的样式类名。
+ * @example
+ * ```tsx
+ * import { buttonGroupVariants } from '@open-dy/vibecoding-sdk-taro/ui/button-group'
+ * buttonGroupVariants()
+ * ```
+ */
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal: "",
+        vertical: "flex-col",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+/**
+ * @desc 按钮组组件。
+ * @param {Parameters<typeof ButtonGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof ButtonGroup>[0]["orientation"]} props.orientation 排列方向，默认 horizontal（横排）；vertical 纵排。同时调整子按钮的相连边框和首尾圆角。
+ * @return {ReturnType<typeof ButtonGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ButtonGroup } from '@open-dy/vibecoding-sdk-taro/ui/button-group'
+ * <ButtonGroup />
+ * ```
+ */
+function ButtonGroup({
+  className,
+  orientation,
+  children,
+  ...props
+}: ViewProps & VariantProps<typeof buttonGroupVariants>) {
+  const resolvedOrientation = orientation ?? "horizontal"
+  const validChildren = React.Children.toArray(children).filter(React.isValidElement)
+  const lastIndex = validChildren.length - 1
+
+  return (
+    <View
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    >
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child
+
+        const index = validChildren.findIndex((item) => item === child)
+        if (index === -1) return child
+
+        const positionClassName =
+          resolvedOrientation === "vertical"
+            ? cn(
+                index < lastIndex && "rounded-b-none",
+                index > 0 && "rounded-t-none border-t-0"
+              )
+            : cn(
+                index < lastIndex && "rounded-r-none",
+                index > 0 && "rounded-l-none border-l-0"
+              )
+
+        return React.cloneElement(
+          child as React.ReactElement<{ className?: string }>,
+          {
+            className: cn((child.props as { className?: string }).className, positionClassName),
+          }
+        )
+      })}
+    </View>
+  )
+}
+
+/**
+ * @desc 按钮组文本区域。
+ * @param {Parameters<typeof ButtonGroupText>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ButtonGroupText>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ButtonGroup, ButtonGroupText } from '@open-dy/vibecoding-sdk-taro/ui/button-group'
+ * <ButtonGroup><ButtonGroupText /></ButtonGroup>
+ * ```
+ */
+function ButtonGroupText({
+  asChild = false,
+  className,
+  children,
+  ...props
+}: Omit<ViewProps, "children"> & {
+  /** @desc 文本内容；asChild 为 true 且提供单个有效 React 元素时，将样式和 props 合并到该元素。 */
+  children?: React.ReactNode
+  /** @desc 是否复用单个子元素作为容器，默认 false；否则使用 View。不是有效单元素时仍使用 View。 */
+  asChild?: boolean
+}) {
+  const textClassName = cn(
+    "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+    className
+  )
+
+  if (asChild && React.isValidElement(children)) {
+    const child = children as React.ReactElement<Record<string, any>>
+
+    return React.cloneElement(child, {
+      ...props,
+      "data-slot": "button-group-text",
+      className: cn(textClassName, child.props.className),
+    })
+  }
+
+  return (
+    <View
+      data-slot="button-group-text"
+      className={textClassName}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 按钮组分隔线。
+ * @param {Parameters<typeof ButtonGroupSeparator>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof ButtonGroupSeparator>[0]["orientation"]} props.orientation 分隔线方向，默认 vertical；横排按钮间使用 vertical，纵排按钮间可改为 horizontal。
+ * @return {ReturnType<typeof ButtonGroupSeparator>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ButtonGroup, ButtonGroupSeparator } from '@open-dy/vibecoding-sdk-taro/ui/button-group'
+ * <ButtonGroup><ButtonGroupSeparator /></ButtonGroup>
+ * ```
+ */
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input",
+        orientation === "horizontal" && "mx-px w-auto",
+        orientation === "vertical" && "my-px h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}