feat: add component input

Author: Ohh-889

packages/ui/src/components/input/Input.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { inputVariants } from './input-variants';
+import type { InputProps } from './types';
+
+const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const mergedCls = cn(inputVariants({ size }), className);
+
+  return (
+    <input
+      className={mergedCls}
+      data-slot="input"
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+Input.displayName = 'Input';
+
+export default Input;

packages/ui/src/components/input/index.ts

@@ -0,0 +1,3 @@
+export { default as Input } from './Input';
+
+export * from './types';

packages/ui/src/components/input/input-variants.ts

@@ -0,0 +1,23 @@
+import { tv } from 'tailwind-variants';
+
+export const inputVariants = tv({
+  base: [
+    `flex w-full rounded-md border border-solid border-input bg-background`,
+    `file:border-0 file:bg-transparent file:font-medium`,
+    `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary`,
+    `disabled:cursor-not-allowed disabled:opacity-50`
+  ],
+  defaultVariants: {
+    size: 'md'
+  },
+  variants: {
+    size: {
+      '2xl': 'h-12 px-4 text-xl file:py-2',
+      lg: 'h-9 px-3 text-base file:py-1.25',
+      md: 'h-8 px-2.5 text-sm file:py-1.25',
+      sm: 'h-7 px-2 text-xs file:py-1.25',
+      xl: 'h-10 px-3.5 text-lg file:py-1.25',
+      xs: 'h-6 px-1.5 text-2xs file:py-1.25'
+    }
+  }
+});

packages/ui/src/components/input/types.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithRef } from 'react';
+
+import type { BaseNodeProps } from '@/types/other';
+
+export type InputProps = BaseNodeProps<Omit<ComponentPropsWithRef<'input'>, 'size'>>;

packages/ui/src/index.ts

@@ -44,6 +44,8 @@ export * from './components/hover-card';
 
 export * from './components/icon';
 
+export * from './components/input';
+
 export * from './components/keyboard-key';
 
 export * from './components/label';

playground/src/app/(demo)/input/modules/InputDefaultDemo.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, Input } from 'soybean-react-ui';
+
+const InputDefaultDemo = () => {
+  const [modelValue, setModelValue] = useState('');
+  return (
+    <Card
+      split
+      title={`ModelValue : ${modelValue}`}
+    >
+      <div className="w-320px lt-sm:w-auto">
+        <Input
+          placeholder="Please input"
+          value={modelValue}
+          onChange={e => setModelValue(e.target.value)}
+        />
+      </div>
+    </Card>
+  );
+};
+
+export default InputDefaultDemo;

playground/src/app/(demo)/input/modules/InputDisabled.tsx

@@ -0,0 +1,20 @@
+import { Card, Input } from 'soybean-react-ui';
+
+const InputDisabled = () => {
+  return (
+    <Card
+      split
+      title="Disabled"
+    >
+      <div className="w-320px lt-sm:w-auto">
+        <Input
+          disabled
+          placeholder="Please input"
+          value="the input is disabled"
+        />
+      </div>
+    </Card>
+  );
+};
+
+export default InputDisabled;

playground/src/app/(demo)/input/modules/InputFIle.tsx

@@ -0,0 +1,16 @@
+import { Card, Input } from 'soybean-react-ui';
+
+const InputFile = () => {
+  return (
+    <Card
+      split
+      title="File"
+    >
+      <div className="w-320px lt-sm:w-auto">
+        <Input type="file" />
+      </div>
+    </Card>
+  );
+};
+
+export default InputFile;

playground/src/app/(demo)/input/modules/InputSize.tsx

@@ -0,0 +1,28 @@
+import type { ThemeSize } from 'soybean-react-ui';
+import { Card, Input } from 'soybean-react-ui';
+
+const sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+const InputSize = () => {
+  return (
+    <Card
+      split
+      title="Size"
+    >
+      <div className="w-320px flex-c-stretch gap-3 lt-sm:w-auto">
+        {sizes.map(size => (
+          <div key={size}>
+            <div>{size}</div>
+
+            <Input
+              placeholder={`${size} Please input`}
+              size={size}
+            />
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+};
+
+export default InputSize;

playground/src/app/(demo)/input/page.tsx

@@ -0,0 +1,17 @@
+import InputDefaultDemo from './modules/InputDefaultDemo';
+import InputDisabled from './modules/InputDisabled';
+import InputFile from './modules/InputFIle';
+import InputSize from './modules/InputSize';
+
+const InputPage = () => {
+  return (
+    <div className="flex-c gap-4">
+      <InputDefaultDemo />
+      <InputDisabled />
+      <InputFile />
+      <InputSize />
+    </div>
+  );
+};
+
+export default InputPage;