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

package/src/ui/input-group.tsx

@@ -0,0 +1,320 @@
+import * as React from "react"
+import { Input as TaroInput, Textarea as TaroTextarea, View, type ViewProps } from "@tarojs/components"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+
+type InputGroupAlign = "inline-start" | "inline-end" | "block-start" | "block-end"
+
+type InputGroupState = {
+  disabled: boolean
+  invalid: boolean
+  hasInlineStartAddon: boolean
+  hasInlineEndAddon: boolean
+  hasBlockStartAddon: boolean
+  hasBlockEndAddon: boolean
+  isMultiline: boolean
+}
+
+const inputGroupContext = React.createContext<InputGroupState>({
+  disabled: false,
+  invalid: false,
+  hasInlineStartAddon: false,
+  hasInlineEndAddon: false,
+  hasBlockStartAddon: false,
+  hasBlockEndAddon: false,
+  isMultiline: false,
+})
+
+function isAriaStateEnabled(value: unknown) {
+  return value !== undefined && value !== false && value !== "false"
+}
+
+function collectInputGroupState(children: React.ReactNode): InputGroupState {
+  const state: InputGroupState = {
+    disabled: false,
+    invalid: false,
+    hasInlineStartAddon: false,
+    hasInlineEndAddon: false,
+    hasBlockStartAddon: false,
+    hasBlockEndAddon: false,
+    isMultiline: false,
+  }
+
+  const visit = (node: React.ReactNode) => {
+    React.Children.forEach(node, (child) => {
+      if (!React.isValidElement(child)) return
+
+      const props = child.props as {
+        align?: InputGroupAlign
+        disabled?: boolean
+        children?: React.ReactNode
+        "aria-invalid"?: boolean | "true" | "false"
+      }
+
+      if (props.disabled) state.disabled = true
+      if (isAriaStateEnabled(props["aria-invalid"])) state.invalid = true
+
+      if (child.type === InputGroupAddon) {
+        switch (props.align) {
+          case "inline-end":
+            state.hasInlineEndAddon = true
+            break
+          case "block-start":
+            state.hasBlockStartAddon = true
+            break
+          case "block-end":
+            state.hasBlockEndAddon = true
+            break
+          case "inline-start":
+          default:
+            state.hasInlineStartAddon = true
+            break
+        }
+      }
+
+      if (child.type === InputGroupTextarea) {
+        state.isMultiline = true
+      }
+
+      if (props.children) {
+        visit(props.children)
+      }
+    })
+  }
+
+  visit(children)
+
+  return state
+}
+
+/**
+ * @desc 输入组合组件。
+ * @param {Parameters<typeof InputGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof InputGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { InputGroup } from '@open-dy/vibecoding-sdk-taro/ui/input-group'
+ * <InputGroup />
+ * ```
+ */
+function InputGroup({ className, children, ...props }: ViewProps) {
+  const groupState = React.useMemo(
+    () => collectInputGroupState(children),
+    [children]
+  )
+  const isVertical =
+    groupState.hasBlockStartAddon ||
+    groupState.hasBlockEndAddon ||
+    groupState.isMultiline
+
+  return (
+    <inputGroupContext.Provider value={groupState}>
+      <View
+        className={cn(
+          "relative flex w-full min-w-0 rounded-lg border border-input bg-transparent transition-colors outline-none focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30",
+          isVertical ? "h-auto flex-col" : "h-8 items-center",
+          groupState.disabled &&
+            "bg-input/50 opacity-50 dark:bg-input/80",
+          groupState.invalid &&
+            "border-destructive ring-3 ring-destructive/20 dark:border-destructive/50 dark:ring-destructive/40",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </View>
+    </inputGroupContext.Provider>
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-2",
+        "inline-end": "order-last pr-2",
+        "block-start": "order-first w-full justify-start px-2.5 pt-2 pb-2",
+        "block-end": "order-last w-full justify-start px-2.5 pt-2 pb-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+/**
+ * @desc 输入组合附加内容。
+ * @param {Parameters<typeof InputGroupAddon>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof InputGroupAddon>[0]["align"]} props.align 附加区位置，默认 inline-start（行首），inline-end 行尾；block-start 顶部、block-end 底部，这两项让 InputGroup 使用纵向布局。
+ * @return {ReturnType<typeof InputGroupAddon>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon } from '@open-dy/vibecoding-sdk-taro/ui/input-group'
+ * <InputGroup><InputGroupAddon /></InputGroup>
+ * ```
+ */
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: ViewProps & VariantProps<typeof inputGroupAddonVariants>) {
+  const groupState = React.useContext(inputGroupContext)
+
+  return (
+    <View
+      className={cn(
+        inputGroupAddonVariants({ align }),
+        groupState.disabled && "opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+/**
+ * @desc 输入组合操作按钮。
+ * @param {Parameters<typeof InputGroupButton>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof InputGroupButton>[0]["variant"]} props.variant 按钮外观，默认 ghost；其余变体同 Button.variant。
+ * @param {Parameters<typeof InputGroupButton>[0]["size"]} props.size 输入组按钮尺寸，默认 xs；xs 为 h-6，sm 不额外缩小底层默认按钮，icon-xs 为 size-6，icon-sm 为 size-8。
+ * @return {ReturnType<typeof InputGroupButton>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupButton } from '@open-dy/vibecoding-sdk-taro/ui/input-group'
+ * <InputGroup><InputGroupButton /></InputGroup>
+ * ```
+ */
+function InputGroupButton({
+  className,
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 输入组合文本区域。
+ * @param {Parameters<typeof InputGroupText>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof InputGroupText>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupText } from '@open-dy/vibecoding-sdk-taro/ui/input-group'
+ * <InputGroup><InputGroupText /></InputGroup>
+ * ```
+ */
+function InputGroupText({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 输入组合输入区域。
+ * @param {Parameters<typeof InputGroupInput>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof InputGroupInput>[0]["className"]} props.className 附加到内部原生 Input 的类名；外层布局和横向内边距由 InputGroup 组合状态控制。
+ * @return {ReturnType<typeof InputGroupInput>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupInput } from '@open-dy/vibecoding-sdk-taro/ui/input-group'
+ * <InputGroup><InputGroupInput /></InputGroup>
+ * ```
+ */
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TaroInput>) {
+  const groupState = React.useContext(inputGroupContext)
+  const horizontalPadding =
+    groupState.hasInlineStartAddon || groupState.hasInlineEndAddon
+      ? "px-1.5"
+      : "px-2.5"
+
+  return (
+    <View
+      className={cn(
+        "flex min-w-0 flex-1 items-center py-2",
+        groupState.isMultiline ? "w-full" : "h-full",
+        horizontalPadding
+      )}
+    >
+      <TaroInput
+        className={cn(
+          "w-full flex-1 bg-transparent text-base text-foreground placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        {...props}
+      />
+    </View>
+  )
+}
+
+/**
+ * @desc 输入组合多行输入区域。
+ * @param {Parameters<typeof InputGroupTextarea>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof InputGroupTextarea>[0]["className"]} props.className 附加到原生 Textarea 的类名，用于覆写输入区尺寸和文字样式。
+ * @return {ReturnType<typeof InputGroupTextarea>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupTextarea } from '@open-dy/vibecoding-sdk-taro/ui/input-group'
+ * <InputGroup><InputGroupTextarea /></InputGroup>
+ * ```
+ */
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TaroTextarea>) {
+  return (
+    <TaroTextarea
+      className={cn(
+        "min-h-16 w-full flex-1 resize-none border-0 bg-transparent px-2.5 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

package/src/ui/input-otp.tsx

@@ -0,0 +1,189 @@
+import * as React from "react"
+import { View, Input as TaroInput, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+import { Minus } from "@open-dy/lucide-taro"
+
+type InputOTPProps = ViewProps & {
+  /** @desc 必填最大字符数，应为正整数；原生数字输入按此值截断，需自行渲染对应数量的 InputOTPSlot。 */
+  maxLength: number
+  /** @desc 受控验证码字符串；传入后以该值为准，需同步 onChange。受控值本身不自动截断，请保持长度不超过 maxLength。 */
+  value?: string
+  /** @desc 非受控初始验证码，默认空字符串；初始化时截断到 maxLength，传入 value 后不生效。 */
+  defaultValue?: string
+  /** @desc 原生输入改变时调用，收到截断到 maxLength 的字符串；不是 Taro 事件对象，受控模式需同步 value。 */
+  onChange?: (value: string) => void
+  /** @desc 是否禁用原生输入，默认可输入；同时降低容器透明度。 */
+  disabled?: boolean
+  /** @desc 是否请求原生输入聚焦；省略时不主动聚焦，实际行为由目标平台决定。 */
+  autoFocus?: boolean
+}
+
+/**
+ * @desc 验证码输入组件。
+ * @param {Parameters<typeof InputOTP>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof InputOTP>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { InputOTP } from '@open-dy/vibecoding-sdk-taro/ui/input-otp'
+ * <InputOTP maxLength={6} />
+ * ```
+ */
+function InputOTP({
+  className,
+  maxLength,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  disabled,
+  autoFocus,
+  children,
+  ...props
+}: InputOTPProps) {
+  const [internal, setInternal] = React.useState(() =>
+    (defaultValue ?? "").slice(0, maxLength)
+  )
+  const [isFocused, setIsFocused] = React.useState(false)
+  const controlled = valueProp !== undefined
+  const value = controlled ? valueProp : internal
+
+  const handleInput = (e: { detail: { value: string } }) => {
+    const newValue = e.detail.value.slice(0, maxLength)
+    if (!controlled) setInternal(newValue)
+    onChange?.(newValue)
+  }
+
+  return (
+    <View
+      data-slot="input-otp"
+      className={cn("relative flex items-center", disabled && "opacity-50", className)}
+      {...props}
+    >
+      <TaroInput
+        className="z-10"
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: "100%",
+          height: "100%",
+          opacity: 0,
+          zIndex: 10,
+          backgroundColor: "transparent",
+          borderWidth: 0,
+          padding: 0,
+          margin: 0,
+          outline: "none",
+          color: "transparent",
+          caretColor: "transparent",
+        }}
+        type="number"
+        maxlength={maxLength}
+        value={value}
+        onInput={handleInput}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        disabled={disabled}
+        focus={autoFocus}
+      />
+      <InputOTPContext.Provider value={{ value, maxLength, isFocused }}>
+        {children}
+      </InputOTPContext.Provider>
+    </View>
+  )
+}
+
+const InputOTPContext = React.createContext<{
+  value: string
+  maxLength: number
+  isFocused: boolean
+}>({ value: "", maxLength: 6, isFocused: false })
+
+/**
+ * @desc 验证码输入分组容器。
+ * @param {Parameters<typeof InputOTPGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof InputOTPGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { InputOTP, InputOTPGroup } from '@open-dy/vibecoding-sdk-taro/ui/input-otp'
+ * <InputOTP maxLength={6}><InputOTPGroup><InputOTPGroup /></InputOTPGroup></InputOTP>
+ * ```
+ */
+function InputOTPGroup({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="input-otp-group"
+      className={cn("flex items-center rounded-lg", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 验证码输入单字符槽位。
+ * @param {Parameters<typeof InputOTPSlot>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof InputOTPSlot>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { InputOTP, InputOTPGroup, InputOTPSlot } from '@open-dy/vibecoding-sdk-taro/ui/input-otp'
+ * <InputOTP maxLength={6}><InputOTPGroup><InputOTPSlot index={0} /></InputOTPGroup></InputOTP>
+ * ```
+ */
+function InputOTPSlot({
+  index,
+  className,
+  "aria-invalid": ariaInvalid,
+  ...props
+}: ViewProps & {
+  /** @desc 必填字符位置，从 0 开始；应小于父 InputOTP.maxLength，显示对应字符，聚焦且位于末尾时显示输入光标。 */
+  index: number
+  /** @desc 是否显示此单元格的校验失败样式；true 或 "true" 表示失败，不执行验证码校验。 */
+  "aria-invalid"?: boolean | "true" | "false"
+}) {
+  const { value, isFocused } = React.useContext(InputOTPContext)
+  const char = value[index] ?? ""
+  const isActive = isFocused && value.length === index
+
+  return (
+    <View
+      data-slot="input-otp-slot"
+      data-active={isActive || undefined}
+      aria-invalid={ariaInvalid}
+      className={cn(
+        "relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        isActive && "z-10 border-ring ring-3 ring-ring/50",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {isActive ? <View className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <View className="h-4 w-px animate-pulse bg-foreground" />
+        </View> : null}
+    </View>
+  )
+}
+
+/**
+ * @desc 验证码输入分隔线。
+ * @param {Parameters<typeof InputOTPSeparator>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof InputOTPSeparator>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { InputOTP, InputOTPGroup, InputOTPSeparator } from '@open-dy/vibecoding-sdk-taro/ui/input-otp'
+ * <InputOTP maxLength={6}><InputOTPGroup><InputOTPSeparator /></InputOTPGroup></InputOTP>
+ * ```
+ */
+function InputOTPSeparator({ ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      {...props}
+    >
+      <Minus />
+    </View>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src/ui/input.tsx

@@ -0,0 +1,60 @@
+import { Input as TaroInput, View } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+
+type InputProps = React.ComponentPropsWithoutRef<typeof TaroInput> & {
+  /** @desc 校验失败的视觉状态；true 或 "true" 设置错误边框和光圈，默认无错误样式，不执行值校验。 */
+  "aria-invalid"?: boolean | "true" | "false"
+}
+
+/**
+ * @desc 带视觉容器的 Taro 输入框；用于普通小程序和兴趣卡落地页。
+ * @param {InputProps} props 输入属性；value、onInput 等传给原生输入框，className 和 style 作用于外层 View。
+ * @param {Parameters<typeof Input>[0]["className"]} props.className 外层 View 容器的附加类名，控制边框、尺寸和布局；不会传给内部原生 Input。
+ * @param {Parameters<typeof Input>[0]["style"]} props.style 外层 View 的内联样式；内部 Input 使用固定的透明背景和零内边距样式。
+ * @param {Parameters<typeof Input>[0]["value"]} props.value 原生输入值；在 onInput 中更新可构成受控输入，事件值位于 event.detail.value。省略时沿用 Taro Input 行为。
+ * @param {Parameters<typeof Input>[0]["onInput"]} props.onInput 原生 Input 输入事件，值位于 event.detail.value；与 InputOTP.onChange 接收字符串的协议不同。
+ * @param {Parameters<typeof Input>[0]["disabled"]} props.disabled 是否禁用原生 Input，默认 false；同时对外层添加透明度和 pointer-events-none。
+ * @param {Parameters<typeof Input>[0]["type"]} props.type 输入类型，直接传给原生 Taro Input；此组件不做转换，省略时由平台默认行为决定。
+ * @return {React.JSX.Element} 一个带边框、背景、圆角、横向内边距和原生输入框的 View。
+ * @remarks 默认容器使用 h-11、w-full、rounded-lg、border、bg-background、px-3。通过 className 覆写容器，不要在外层再加相同边框、背景或内边距；横向布局的外层 View 只负责 flex 和间距。className 不会直接改变内部原生输入框的 text-sm。
+ * @example
+ * ```tsx
+ * import { Input } from '@open-dy/vibecoding-sdk-taro/ui/input'
+ * import { View } from '@tarojs/components'
+ * export function TaskInput() {
+ *   return <View className="flex gap-3"><Input placeholder="添加任务" className="flex-1 rounded-none border-4 border-black bg-white" /></View>
+ * }
+ * ```
+ */
+function Input({
+  className,
+  type,
+  disabled = false,
+  "aria-invalid": ariaInvalid,
+  style,
+  ...props
+}: InputProps) {
+  return (
+    <View
+      data-slot="input"
+      aria-invalid={ariaInvalid}
+      style={style}
+      className={cn(
+        "flex h-11 w-full min-w-0 items-center rounded-lg border border-input bg-background px-3 text-base transition-colors outline-none placeholder:text-muted-foreground focus-within:border-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        disabled && "pointer-events-none cursor-not-allowed opacity-50",
+        className
+      )}
+    >
+      <TaroInput
+        type={type}
+        disabled={disabled}
+        className="w-full flex-1 text-sm outline-none"
+        {...props}
+        style={{ backgroundColor: 'transparent', padding: 0, borderRadius: 0, height: 'auto' }}
+      />
+    </View>
+  )
+}
+
+export { Input }