@coze-arch/cli 0.0.1-alpha.de5a13 → 0.0.1-alpha.deaedf

package/lib/__templates__/taro/src/components/ui/input-otp.tsx

@@ -0,0 +1,136 @@
+import * as React from "react"
+import { View, Input } from "@tarojs/components"
+import { Dot } from "lucide-react-taro"
+import { cn } from "@/lib/utils"
+
+const InputOTPContext = React.createContext<{
+  value: string
+  maxLength: number
+  isFocused: boolean
+} | null>(null)
+
+const InputOTP = React.forwardRef<
+  any,
+  {
+    value?: string
+    defaultValue?: string
+    onChange?: (value: string) => void
+    maxLength: number
+    containerClassName?: string
+    className?: string
+    disabled?: boolean
+    autoFocus?: boolean
+    children: React.ReactNode
+  }
+>(({ value: valueProp, defaultValue, onChange, maxLength, containerClassName, className, disabled, autoFocus, children }, ref) => {
+  const [valueState, setValueState] = React.useState(defaultValue || "")
+  const [isFocused, setIsFocused] = React.useState(false)
+  const value = valueProp !== undefined ? valueProp : valueState
+
+  const handleChange = (e: any) => {
+    const newValue = e.detail.value
+    if (newValue.length <= maxLength) {
+      if (valueProp === undefined) {
+        setValueState(newValue)
+      }
+      onChange?.(newValue)
+    }
+  }
+
+  return (
+    <InputOTPContext.Provider value={{ value, maxLength, isFocused }}>
+      <View
+        className={cn(
+          "relative flex items-center gap-2",
+          disabled && "opacity-50",
+          containerClassName
+        )}
+      >
+        <Input
+          className="z-10 taro-otp-hidden-input"
+          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",
+          }}
+          value={value}
+          onInput={handleChange}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          maxlength={maxLength}
+          type="number"
+          disabled={disabled}
+          focus={autoFocus}
+          ref={ref}
+        />
+        <View className={cn("flex items-center gap-2", className)}>
+          {children}
+        </View>
+      </View>
+    </InputOTPContext.Provider>
+  )
+})
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const context = React.useContext(InputOTPContext)
+  if (!context) return null
+
+  const char = context.value[index]
+  const isActive = context.isFocused && context.value.length === index
+  const hasFakeCaret = isActive
+
+  return (
+    <View
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className
+      )}
+      {...props}
+    >
+      <View>{char}</View>
+      {hasFakeCaret && (
+        <View className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <View className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </View>
+      )}
+    </View>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ ...props }, ref) => (
+  <View ref={ref} {...props}>
+    <Dot />
+  </View>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/lib/__templates__/taro/src/components/ui/input.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Input as TaroInput, View } from "@tarojs/components"
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.ComponentPropsWithoutRef<typeof TaroInput> {
+  className?: string
+  type?: React.ComponentProps<typeof TaroInput>['type']
+  autoFocus?: boolean
+}
+
+const Input = React.forwardRef<React.ElementRef<typeof TaroInput>, InputProps>(
+  ({ className, type, autoFocus, focus, onFocus, onBlur, ...props }, ref) => {
+    const [isFocused, setIsFocused] = React.useState(false)
+    const disabled = !!(props as any).disabled
+
+    React.useEffect(() => {
+      if (autoFocus || focus) setIsFocused(true)
+    }, [autoFocus, focus])
+
+    return (
+      <View
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-within:border-ring focus-within:ring-4 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
+          isFocused &&
+            "border-ring ring-4 ring-ring ring-offset-2 ring-offset-background",
+          className
+        )}
+        onTouchStart={() => {
+          if (disabled) return
+          setIsFocused(true)
+        }}
+      >
+        <TaroInput
+          type={type}
+          className="w-full flex-1 bg-transparent text-sm text-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 selection:bg-selection selection:text-selection-foreground"
+          placeholderClass="text-muted-foreground"
+          ref={ref}
+          focus={autoFocus || focus}
+          onFocus={(e) => {
+            setIsFocused(true)
+            onFocus?.(e)
+          }}
+          onBlur={(e) => {
+            setIsFocused(false)
+            onBlur?.(e)
+          }}
+          {...props}
+        />
+      </View>
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/lib/__templates__/taro/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { Label as TaroLabel } from "@tarojs/components"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof TaroLabel>,
+  React.ComponentPropsWithoutRef<typeof TaroLabel> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <TaroLabel
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = "Label"
+
+export { Label }