From cad71c3af754f0181cf17495e5912c54c18f2c1d Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Sun, 2 Nov 2025 22:46:49 +0800
Subject: [PATCH] feat(input): refactor input component to support compound
 pattern

Add new Input component with support for Password and Button variants through compound pattern. Move input implementation to new directory structure and enhance with label and caption support. Remove old input implementation.
---
 packages/ui/src/components/index.ts           |  2 +-
 .../components/primitives/Input/button.tsx    |  1 +
 .../src/components/primitives/Input/index.tsx | 14 ++++++
 .../src/components/primitives/Input/input.tsx | 50 +++++++++++++++++++
 .../components/primitives/Input/password.tsx  |  1 +
 .../ui/src/components/primitives/input.tsx    | 20 --------
 6 files changed, 67 insertions(+), 21 deletions(-)
 create mode 100644 packages/ui/src/components/primitives/Input/button.tsx
 create mode 100644 packages/ui/src/components/primitives/Input/index.tsx
 create mode 100644 packages/ui/src/components/primitives/Input/input.tsx
 create mode 100644 packages/ui/src/components/primitives/Input/password.tsx
 delete mode 100644 packages/ui/src/components/primitives/input.tsx

diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 86ac4c0a3e..cabc443b56 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -84,7 +84,7 @@ export { Sortable } from './composites/Sortable'
 export * from './primitives/button'
 export * from './primitives/command'
 export * from './primitives/dialog'
-export * from './primitives/input'
+export * from './primitives/Input'
 export * from './primitives/popover'
 export * from './primitives/radioGroup'
 export * from './primitives/shadcn-io/dropzone'
diff --git a/packages/ui/src/components/primitives/Input/button.tsx b/packages/ui/src/components/primitives/Input/button.tsx
new file mode 100644
index 0000000000..e8e1f767b4
--- /dev/null
+++ b/packages/ui/src/components/primitives/Input/button.tsx
@@ -0,0 +1 @@
+export function WithButton() {}
diff --git a/packages/ui/src/components/primitives/Input/index.tsx b/packages/ui/src/components/primitives/Input/index.tsx
new file mode 100644
index 0000000000..4309609ddf
--- /dev/null
+++ b/packages/ui/src/components/primitives/Input/index.tsx
@@ -0,0 +1,14 @@
+import { WithButton } from './button'
+import { Input as InternalInput } from './input'
+import { Password } from './password'
+
+type CompoundedComponent = typeof InternalInput & {
+  Password: typeof Password
+  Button: typeof WithButton
+}
+
+const Input: CompoundedComponent = InternalInput as CompoundedComponent
+Input.Password = Password
+Input.Button = WithButton
+
+export { Input }
diff --git a/packages/ui/src/components/primitives/Input/input.tsx b/packages/ui/src/components/primitives/Input/input.tsx
new file mode 100644
index 0000000000..86403b6661
--- /dev/null
+++ b/packages/ui/src/components/primitives/Input/input.tsx
@@ -0,0 +1,50 @@
+import { cn } from '@cherrystudio/ui/utils'
+import React from 'react'
+
+interface BaseInputProps extends React.ComponentPropsWithRef<'input'> {
+  startContent?: React.ReactNode
+  endContent?: React.ReactNode
+}
+
+interface WithLabel extends BaseInputProps {
+  label: string
+  caption?: string
+}
+
+interface WithoutLabel extends BaseInputProps {
+  label?: never
+  caption?: never
+}
+
+type InputProps = WithLabel | WithoutLabel
+
+export function Input({ className, type, required, label, caption, ...props }: InputProps) {
+  const id = React.useId()
+  const input = (
+    <input
+      type={type}
+      data-slot="input"
+      id={id}
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-2xs border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-primary focus-visible:ring-primary/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className
+      )}
+      required={required}
+      {...props}
+    />
+  )
+
+  if (label !== undefined) {
+    return (
+      <div className="flex flex-col w-full">
+        <label htmlFor={id}>{label}</label>
+        {input}
+        {caption && <div className="text-muted-foreground">{caption}</div>}
+      </div>
+    )
+  }
+
+  return input
+}
diff --git a/packages/ui/src/components/primitives/Input/password.tsx b/packages/ui/src/components/primitives/Input/password.tsx
new file mode 100644
index 0000000000..82b5c20fc7
--- /dev/null
+++ b/packages/ui/src/components/primitives/Input/password.tsx
@@ -0,0 +1 @@
+export function Password() {}
diff --git a/packages/ui/src/components/primitives/input.tsx b/packages/ui/src/components/primitives/input.tsx
deleted file mode 100644
index 904981587c..0000000000
--- a/packages/ui/src/components/primitives/input.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { cn } from '@cherrystudio/ui/utils'
-import * as React from 'react'
-
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }