feat: introduce NumberField

.changeset/witty-flies-reflect.md

@@ -0,0 +1,8 @@
+---
+"@nextui-org/number-field": patch
+"@nextui-org/shared-icons": patch
+"@nextui-org/theme": patch
+"@nextui-org/react": minor
+---
+
+introduce NumberField

apps/docs/config/routes.json

@@ -332,6 +332,13 @@
           "keywords": "navbar, navigation, top menu, website header",
           "path": "/docs/components/navbar.mdx"
         },
+        {
+          "key": "number-field",
+          "title": "Number Field",
+          "keywords": "input, numeric input, number field",
+          "path": "/docs/components/number-field.mdx",
+          "newPost": true
+        },
         {
           "key": "pagination",
           "title": "Pagination",

apps/docs/content/components/index.ts

@@ -34,3 +34,4 @@ export * from "./table";
 export * from "./autocomplete";
 export * from "./alert";
 export * from "./drawer";
+export * from "./number-field";

apps/docs/content/components/number-field/clear-button.raw.jsx

@@ -0,0 +1,16 @@
+import {NumberField} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <NumberField
+      isClearable
+      className="max-w-xs"
+      defaultValue={1024}
+      label="Width"
+      placeholder="Enter the width"
+      variant="bordered"
+      // eslint-disable-next-line no-console
+      onClear={() => console.log("number field cleared")}
+    />
+  );
+}

apps/docs/content/components/number-field/clear-button.ts

@@ -0,0 +1,9 @@
+import App from "./clear-button.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/number-field/colors.raw.jsx

@@ -0,0 +1,20 @@
+import {NumberField} 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) => (
+        <NumberField
+          key={color}
+          className="max-w-[220px]"
+          color={color}
+          defaultValue={1024}
+          label="Width"
+          placeholder="Enter the width"
+        />
+      ))}
+    </div>
+  );
+}

apps/docs/content/components/number-field/colors.ts

@@ -0,0 +1,9 @@
+import App from "./colors.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/number-field/controlled.raw.jsx

@@ -0,0 +1,17 @@
+import {NumberField} 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]">
+      <NumberField
+        label="Width"
+        placeholder="Enter the width"
+        value={value}
+        onValueChange={setValue}
+      />
+      <p className="text-default-500 text-small">NumberField value: {value}</p>
+    </div>
+  );
+}

apps/docs/content/components/number-field/controlled.ts

@@ -0,0 +1,9 @@
+import App from "./controlled.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/number-field/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;

apps/docs/content/components/number-field/custom-impl.ts

@@ -0,0 +1,9 @@
+import App from "./custom-impl.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/number-field/custom-styles.raw.jsx

@@ -0,0 +1,68 @@
+import {NumberField} 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 default function App() {
+  return (
+    <div className="w-[340px] h-[240px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
+      <NumberField
+        isClearable
+        classNames={{
+          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",
+            "dark:hover:bg-default/70",
+            "group-data-[focus=true]:bg-default-200/50",
+            "dark:group-data-[focus=true]:bg-default/60",
+            "!cursor-text",
+          ],
+        }}
+        label="Search"
+        placeholder="Type to search..."
+        radius="lg"
+        startContent={
+          <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+        }
+      />
+    </div>
+  );
+}

apps/docs/content/components/number-field/custom-styles.ts

@@ -0,0 +1,9 @@
+import App from "./custom-styles.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};