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

package/src/ui/empty.tsx

@@ -0,0 +1,166 @@
+import { View, type ViewProps } from "@tarojs/components"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+/**
+ * @desc 空状态组件。
+ * @param {Parameters<typeof Empty>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Empty>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Empty } from '@open-dy/vibecoding-sdk-taro/ui/empty'
+ * <Empty />
+ * ```
+ */
+function Empty({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 空状态头部布局。
+ * @param {Parameters<typeof EmptyHeader>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof EmptyHeader>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Empty, EmptyHeader } from '@open-dy/vibecoding-sdk-taro/ui/empty'
+ * <Empty><EmptyHeader /></Empty>
+ * ```
+ */
+function EmptyHeader({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * @desc 空状态媒体区域。
+ * @param {Parameters<typeof EmptyMedia>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof EmptyMedia>[0]["variant"]} props.variant 媒体区外观，默认 default（透明背景）；icon 为带底色的 size-8 图标容器。
+ * @return {ReturnType<typeof EmptyMedia>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Empty, EmptyMedia } from '@open-dy/vibecoding-sdk-taro/ui/empty'
+ * <Empty><EmptyMedia /></Empty>
+ * ```
+ */
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: ViewProps & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <View
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 空状态标题。
+ * @param {Parameters<typeof EmptyTitle>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof EmptyTitle>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Empty, EmptyTitle } from '@open-dy/vibecoding-sdk-taro/ui/empty'
+ * <Empty><EmptyTitle /></Empty>
+ * ```
+ */
+function EmptyTitle({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="empty-title"
+      className={cn(
+        "font-heading text-sm font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 空状态说明文本。
+ * @param {Parameters<typeof EmptyDescription>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof EmptyDescription>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Empty, EmptyDescription } from '@open-dy/vibecoding-sdk-taro/ui/empty'
+ * <Empty><EmptyDescription /></Empty>
+ * ```
+ */
+function EmptyDescription({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="empty-description"
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 空状态内容容器。
+ * @param {Parameters<typeof EmptyContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof EmptyContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Empty, EmptyContent } from '@open-dy/vibecoding-sdk-taro/ui/empty'
+ * <Empty><EmptyContent /></Empty>
+ * ```
+ */
+function EmptyContent({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

package/src/ui/field.tsx

@@ -0,0 +1,427 @@
+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 { Label } from "./label"
+import { Separator } from "./separator"
+
+const FieldContext = React.createContext({
+  disabled: false,
+  invalid: false,
+  orientation: "vertical" as "vertical" | "horizontal" | "responsive",
+  hasContent: false,
+})
+
+function isTruthyAriaState(value: unknown) {
+  return value !== undefined && value !== false && value !== "false"
+}
+
+function hasCheckedControl(node: React.ReactNode): boolean {
+  let found = false
+
+  const visit = (children: React.ReactNode) => {
+    React.Children.forEach(children, (child) => {
+      if (!React.isValidElement(child) || found) return
+
+      const props = child.props as {
+        checked?: boolean
+        "aria-checked"?: boolean | "true" | "false"
+        children?: React.ReactNode
+      }
+
+      if (props.checked || isTruthyAriaState(props["aria-checked"])) {
+        found = true
+        return
+      }
+
+      if (props.children) {
+        visit(props.children)
+      }
+    })
+  }
+
+  visit(node)
+  return found
+}
+
+/**
+ * @desc 表单字段字段组容器。
+ * @param {Parameters<typeof FieldSet>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof FieldSet>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { FieldSet } from '@open-dy/vibecoding-sdk-taro/ui/field'
+ * <FieldSet />
+ * ```
+ */
+function FieldSet({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="field-set"
+      className={cn("flex flex-col gap-4", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 表单字段字段组标题。
+ * @param {Parameters<typeof FieldLegend>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof FieldLegend>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend } from '@open-dy/vibecoding-sdk-taro/ui/field'
+ * <FieldSet><FieldLegend /></FieldSet>
+ * ```
+ */
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: ViewProps & {
+  /** @desc 标题字号，默认 legend（text-base），label 使用较小的 text-sm；仅改变视觉样式。 */
+  variant?: "legend" | "label" }) {
+  return (
+    <View
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium",
+        variant === "label" ? "text-sm" : "text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 表单字段分组容器。
+ * @param {Parameters<typeof FieldGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof FieldGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldGroup } from '@open-dy/vibecoding-sdk-taro/ui/field'
+ * <FieldSet><FieldGroup /></FieldSet>
+ * ```
+ */
+function FieldGroup({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal: "flex-row items-center",
+        responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center [&>.sr-only]:w-auto",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+/**
+ * @desc 表单字段组件。
+ * @param {Parameters<typeof Field>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof Field>[0]["orientation"]} props.orientation 布局方向，默认 vertical；horizontal 横排，responsive 在 FieldGroup 容器较宽时切换为横排。不会改变输入控件本身的值或禁用状态。
+ * @return {ReturnType<typeof Field>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { FieldSet, Field } from '@open-dy/vibecoding-sdk-taro/ui/field'
+ * <FieldSet><Field /></FieldSet>
+ * ```
+ */
+function Field({
+  className,
+  orientation,
+  children,
+  ...props
+}: ViewProps & VariantProps<typeof fieldVariants>) {
+  const resolvedOrientation = orientation ?? "vertical"
+  const hasContent = React.useMemo(
+    () =>
+      React.Children.toArray(children).some(
+        (child) => React.isValidElement(child) && child.type === FieldContent
+      ),
+    [children]
+  )
+  const disabled = isTruthyAriaState((props as { "aria-disabled"?: unknown })["aria-disabled"])
+  const invalid = isTruthyAriaState((props as { "aria-invalid"?: unknown })["aria-invalid"])
+
+  return (
+    <FieldContext.Provider
+      value={{
+        disabled,
+        invalid,
+        orientation: resolvedOrientation,
+        hasContent,
+      }}
+    >
+      <View
+        data-slot="field"
+        data-orientation={resolvedOrientation}
+        className={cn(
+          fieldVariants({ orientation: resolvedOrientation }),
+          invalid && "text-destructive",
+          hasContent &&
+            resolvedOrientation === "horizontal" &&
+            "items-start [&>[role=checkbox],[role=radio]]:mt-px",
+          hasContent &&
+            resolvedOrientation === "responsive" &&
+            "@md/field-group:items-start @md/field-group:[&>[role=checkbox],[role=radio]]:mt-px",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </View>
+    </FieldContext.Provider>
+  )
+}
+
+/**
+ * @desc 表单字段内容容器。
+ * @param {Parameters<typeof FieldContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof FieldContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldContent } from '@open-dy/vibecoding-sdk-taro/ui/field'
+ * <FieldSet><FieldContent /></FieldSet>
+ * ```
+ */
+function FieldContent({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 表单字段标签文本。
+ * @param {Parameters<typeof FieldLabel>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof FieldLabel>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLabel } from '@open-dy/vibecoding-sdk-taro/ui/field'
+ * <FieldSet><FieldLabel /></FieldSet>
+ * ```
+ */
+function FieldLabel({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  const { disabled } = React.useContext(FieldContext)
+  const childArray = React.Children.toArray(children)
+  const hasNestedField = childArray.some(
+    (child) => React.isValidElement(child) && child.type === Field
+  )
+  const hasCheckedChild = hasCheckedControl(children)
+
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug",
+        disabled && "opacity-50",
+        hasCheckedChild &&
+          "border-primary/30 bg-primary/5 dark:border-primary/20 dark:bg-primary/10",
+        hasNestedField && "w-full flex-col rounded-lg border",
+        hasNestedField && "*:p-2.5",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Label>
+  )
+}
+
+/**
+ * @desc 表单字段标题。
+ * @param {Parameters<typeof FieldTitle>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof FieldTitle>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldTitle } from '@open-dy/vibecoding-sdk-taro/ui/field'
+ * <FieldSet><FieldTitle /></FieldSet>
+ * ```
+ */
+function FieldTitle({ className, ...props }: ViewProps) {
+  const { disabled, orientation } = React.useContext(FieldContext)
+  return (
+    <View
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium",
+        disabled && "opacity-50",
+        orientation !== "vertical" && "flex-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 表单字段说明文本。
+ * @param {Parameters<typeof FieldDescription>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof FieldDescription>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldDescription } from '@open-dy/vibecoding-sdk-taro/ui/field'
+ * <FieldSet><FieldDescription /></FieldSet>
+ * ```
+ */
+function FieldDescription({ className, ...props }: ViewProps) {
+  const { orientation } = React.useContext(FieldContext)
+  return (
+    <View
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground",
+        orientation === "horizontal" && "text-balance",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 表单字段分隔线。
+ * @param {Parameters<typeof FieldSeparator>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof FieldSeparator>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldSeparator } from '@open-dy/vibecoding-sdk-taro/ui/field'
+ * <FieldSet><FieldSeparator /></FieldSet>
+ * ```
+ */
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: ViewProps & {
+  /** @desc 分隔线中心的可选文字或节点；内容为假值时只显示横线。 */
+  children?: React.ReactNode
+}) {
+  return (
+    <View
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children ? <View
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </View> : null}
+    </View>
+  )
+}
+
+/**
+ * @desc 表单字段错误信息。
+ * @param {Parameters<typeof FieldError>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof FieldError>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldError } from '@open-dy/vibecoding-sdk-taro/ui/field'
+ * <FieldSet><FieldError /></FieldSet>
+ * ```
+ */
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: ViewProps & {
+  /** @desc 错误列表；按 message 去重后显示，children 非空时优先显示 children；省略或无可显示内容时不渲染。 */
+  errors?: Array<{
+  /** @desc 单条错误的展示文本；省略时无对应文字，重复文本只显示一次。 */
+  message?: string } | undefined>
+}) {
+  const content = React.useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <View className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <View key={index}>{error.message}</View>
+        )}
+      </View>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <View
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </View>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

package/src/ui/helpers.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+
+type DataIconAlign = "inline-start" | "inline-end"
+
+/**
+ * @desc 扫描 React 子节点的 data-icon 标记，返回行首和行尾图标是否存在。
+ * @param {Parameters<typeof collectDataIconState>[0]} children 要检查的 React 子节点。
+ * @return {ReturnType<typeof collectDataIconState>} 包含 hasInlineStartIcon 和 hasInlineEndIcon 的对象。
+ * @example
+ * ```tsx
+ * import { View } from '@tarojs/components'
+ * import { collectDataIconState } from '@open-dy/vibecoding-sdk-taro/ui/helpers'
+ * collectDataIconState(<View data-icon="inline-start" />)
+ * ```
+ */
+function collectDataIconState(children: React.ReactNode) {
+  let hasInlineStartIcon = false
+  let hasInlineEndIcon = false
+
+  const visit = (node: React.ReactNode) => {
+    React.Children.forEach(node, (child) => {
+      if (!React.isValidElement(child)) return
+
+      const iconAlign = (child.props as { "data-icon"?: DataIconAlign })["data-icon"]
+      if (iconAlign === "inline-start") hasInlineStartIcon = true
+      if (iconAlign === "inline-end") hasInlineEndIcon = true
+
+      if (child.props?.children) {
+        visit(child.props.children)
+      }
+    })
+  }
+
+  visit(children)
+
+  return { hasInlineStartIcon, hasInlineEndIcon }
+}
+
+export { collectDataIconState }

package/src/ui/index.ts

@@ -0,0 +1,47 @@
+export * from './accordion'
+export * from './alert-dialog'
+export * from './alert'
+export * from './aspect-ratio'
+export * from './avatar'
+export * from './badge'
+export * from './button-group'
+export * from './button'
+export * from './calendar'
+export * from './card'
+export * from './carousel'
+export * from './checkbox'
+export * from './collapsible'
+export * from './combobox'
+export * from './dialog'
+export * from './drawer'
+export * from './dropdown-menu'
+export * from './empty'
+export * from './field'
+export * from './helpers'
+export * from './input-group'
+export * from './input-otp'
+export * from './input'
+export * from './item'
+export * from './label'
+export * from './menubar'
+export * from './navigation-menu'
+export * from './pagination'
+export * from './popover'
+export * from './portal'
+export * from './progress'
+export * from './radio-group'
+export * from './resizable'
+export * from './scroll-area'
+export * from './select'
+export * from './separator'
+export * from './sheet'
+export * from './skeleton'
+export * from './slider'
+export * from './sonner'
+export * from './spinner'
+export * from './switch'
+export * from './table'
+export * from './tabs'
+export * from './textarea'
+export * from './toggle-group'
+export * from './toggle'