refactor(docs): input dx

apps/docs/content/components/input/clear-button.raw.jsx

@@ -0,0 +1,17 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      isClearable
+      className="max-w-xs"
+      defaultValue="[email protected]"
+      label="Email"
+      placeholder="Enter your email"
+      type="email"
+      variant="bordered"
+      // eslint-disable-next-line no-console
+      onClear={() => console.log("input cleared")}
+    />
+  );
+}

apps/docs/content/components/input/clear-button.ts

@@ -1,19 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      isClearable
-      type="email"
-      label="Email"
-      variant="bordered"
-      placeholder="Enter your email"
-      defaultValue="[email protected]"
-      onClear={() => console.log("input cleared")}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./clear-button.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/input/colors.raw.jsx

@@ -0,0 +1,21 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="w-full flex flex-row flex-wrap gap-4">
+      {colors.map((color) => (
+        <Input
+          key={color}
+          className="max-w-[220px]"
+          color={color}
+          defaultValue="[email protected]"
+          label="Email"
+          placeholder="Enter your email"
+          type="email"
+        />
+      ))}
+    </div>
+  );
+}

apps/docs/content/components/input/colors.ts

@@ -1,31 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-  ];
-
-  return (
-    <div className="w-full flex flex-row flex-wrap gap-4">
-      {colors.map((color) => (
-        <Input
-          key={color}
-          type="email"
-          color={color}
-          label="Email"
-          placeholder="Enter your email"
-          defaultValue="[email protected]"
-          className="max-w-[220px]"
-        />
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/input/controlled.raw.jsx

@@ -0,0 +1,12 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <div className="w-full flex flex-col gap-2 max-w-[240px]">
+      <Input label="Email" placeholder="Enter your email" value={value} onValueChange={setValue} />
+      <p className="text-default-500 text-small">Input value: {value}</p>
+    </div>
+  );
+}

apps/docs/content/components/input/controlled.ts

@@ -1,20 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState("");
-
-  return (
-    <div className="w-full flex flex-col gap-2 max-w-[240px]">
-      <Input
-        label="Email"
-        placeholder="Enter your email"
-        value={value}
-        onValueChange={setValue}
-      />
-      <p className="text-default-500 text-small">Input value: {value}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/input/custom-impl.raw.jsx

@@ -0,0 +1,162 @@
+import React, {forwardRef} from "react";
+import {useInput} from "@nextui-org/react";
+
+export const SearchIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <path
+        d="M22 22L20 20"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export const CloseFilledIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M12 2a10 10 0 1010 10A10.016 10.016 0 0012 2zm3.36 12.3a.754.754 0 010 1.06.748.748 0 01-1.06 0l-2.3-2.3-2.3 2.3a.748.748 0 01-1.06 0 .754.754 0 010-1.06l2.3-2.3-2.3-2.3A.75.75 0 019.7 8.64l2.3 2.3 2.3-2.3a.75.75 0 011.06 1.06l-2.3 2.3z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+const styles = {
+  label: "text-black/50 dark:text-white/90",
+  input: [
+    "bg-transparent",
+    "text-black/90 dark:text-white/90",
+    "placeholder:text-default-700/50 dark:placeholder:text-white/60",
+  ],
+  innerWrapper: "bg-transparent",
+  inputWrapper: [
+    "shadow-xl",
+    "bg-default-200/50",
+    "dark:bg-default/60",
+    "backdrop-blur-xl",
+    "backdrop-saturate-200",
+    "hover:bg-default-200/70",
+    "focus-within:!bg-default-200/50",
+    "dark:hover:bg-default/70",
+    "dark:focus-within:!bg-default/60",
+    "!cursor-text",
+  ],
+};
+
+const MyInput = forwardRef((props, ref) => {
+  const {
+    Component,
+    label,
+    domRef,
+    description,
+    isClearable,
+    startContent,
+    endContent,
+    shouldLabelBeOutside,
+    shouldLabelBeInside,
+    errorMessage,
+    getBaseProps,
+    getLabelProps,
+    getInputProps,
+    getInnerWrapperProps,
+    getInputWrapperProps,
+    getDescriptionProps,
+    getErrorMessageProps,
+    getClearButtonProps,
+  } = useInput({
+    ...props,
+    ref,
+    // this is just for the example, the props bellow should be passed by the parent component
+    label: "Search",
+    type: "search",
+    placeholder: "Type to search...",
+    startContent: (
+      <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+    ),
+    // custom styles
+    classNames: {
+      ...styles,
+    },
+  });
+
+  const labelContent = <label {...getLabelProps()}>{label}</label>;
+
+  const end = React.useMemo(() => {
+    if (isClearable) {
+      return <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>;
+    }
+
+    return endContent;
+  }, [isClearable, getClearButtonProps]);
+
+  const innerWrapper = React.useMemo(() => {
+    if (startContent || end) {
+      return (
+        <div {...getInnerWrapperProps()}>
+          {startContent}
+          <input {...getInputProps()} />
+          {end}
+        </div>
+      );
+    }
+
+    return <input {...getInputProps()} />;
+  }, [startContent, end, getInputProps, getInnerWrapperProps]);
+
+  return (
+    <div className="w-[340px] h-[300px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
+      <Component {...getBaseProps()}>
+        {shouldLabelBeOutside ? labelContent : null}
+        <div
+          tabIndex={0}
+          {...getInputWrapperProps()}
+          role="button"
+          onClick={() => {
+            domRef.current?.focus();
+          }}
+          onKeyDown={() => {
+            domRef.current?.focus();
+          }}
+        >
+          {shouldLabelBeInside ? labelContent : null}
+          {innerWrapper}
+        </div>
+        {description && <div {...getDescriptionProps()}>{description}</div>}
+        {errorMessage && <div {...getErrorMessageProps()}>{errorMessage}</div>}
+      </Component>
+    </div>
+  );
+});
+
+MyInput.displayName = "MyInput";
+
+export default MyInput;