1 files changed, 62 insertions, 0 deletions

diff --git a/src/ui/objects/TextField.tsx b/src/ui/objects/TextField.tsx
new file mode 100644
index 0000000..dc7893a
--- /dev/null
+++ b/src/ui/objects/TextField.tsx
@@ -0,0 +1,62 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"input"> & {
+        "pre"?: JSX.Element;
+        "post"?: JSX.Element;
+        "invalid"?: boolean;
+        "pill"?: boolean;
+        "x-model"?: string;
+};
+
+export const TextField = ({
+        pre,
+        post,
+        disabled,
+        invalid,
+        pill,
+        placeholder,
+        readonly,
+        value,
+        pattern,
+        required,
+        "x-model": xModel,
+        class: cls,
+        ...props
+}: Props) => {
+        const extended = !!pre || !!post;
+
+        return (
+                <div
+                        class:list={[
+                                "o-text-field",
+                                {
+                                        "is-disabled": disabled,
+                                        "is-invalid": invalid,
+                                        "l-media": extended,
+                                        "l-media--gapless": extended,
+                                        "o-text-field--extended": extended,
+                                        "o-text-field--pill": pill,
+                                },
+                                cls,
+                        ]}
+                        {...props}
+                >
+                        {pre}{" "}
+                        <input
+                                class="o-text-field__native"
+                                class:list={{
+                                        "l-media__block": extended,
+                                        "l-media__block--main": extended,
+                                }}
+                                disabled={disabled}
+                                pattern={pattern}
+                                placeholder={placeholder}
+                                readonly={readonly}
+                                required={required}
+                                value={value}
+                                x-model={xModel}
+                        />{" "}
+                        {post} <div class="o-text-field__bg"></div>
+                </div>
+        );
+};