feat: introduce NumberInput

.changeset/witty-flies-reflect.md

@@ -0,0 +1,8 @@
+---
+"@heroui/number-input": patch
+"@heroui/shared-icons": patch
+"@heroui/theme": patch
+"@heroui/react": patch
+---
+
+introduce NumberInput

apps/docs/config/routes.json

@@ -338,6 +338,13 @@
           "keywords": "navbar, navigation, top menu, website header",
           "path": "/docs/components/navbar.mdx"
         },
+        {
+          "key": "number-input",
+          "title": "Number Input",
+          "keywords": "input, numeric input, number input",
+          "path": "/docs/components/number-input.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-input";

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

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

apps/docs/content/components/number-input/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-input/colors.raw.jsx

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

apps/docs/content/components/number-input/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-input/controlled.raw.jsx

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

apps/docs/content/components/number-input/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-input/custom-styles.raw.jsx

@@ -0,0 +1,39 @@
+import {NumberInput} from "@heroui/react";
+
+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">
+      <NumberInput
+        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",
+          ],
+          helperText: "text-black/50 dark:text-white/90",
+        }}
+        description="The number of apples that Marcus bought"
+        helperText="Must be equal or greater than 1"
+        label="Number of apples"
+        minValue={1}
+        placeholder="Enter a number..."
+        radius="lg"
+      />
+    </div>
+  );
+}

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

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

apps/docs/content/components/number-input/custom-validation.raw.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import {Button, Form, NumberInput} from "@heroui/react";
+
+export default function App() {
+  const [submitted, setSubmitted] = React.useState(null);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    setSubmitted(data);
+  };
+
+  return (
+    <Form className="w-full max-w-xs" onSubmit={onSubmit}>
+      <NumberInput
+        isRequired
+        label="Amount"
+        name="amount"
+        placeholder="Enter a number"
+        validate={(value) => {
+          if (value < 100) {
+            return "Number must be greater than 100";
+          }
+
+          if (value > 1000) {
+            return "Number must be less than 1000";
+          }
+
+          return value === 777 ? "Nice try!" : null;
+        }}
+      />
+      <Button color="primary" type="submit">
+        Submit
+      </Button>
+      {submitted && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submitted)}</code>
+        </div>
+      )}
+    </Form>
+  );
+}

apps/docs/content/components/number-input/custom-validation.ts

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

apps/docs/content/components/number-input/description.raw.jsx

@@ -0,0 +1,12 @@
+import {NumberInput} from "@heroui/react";
+
+export default function App() {
+  return (
+    <NumberInput
+      className="max-w-xs"
+      defaultValue={1024}
+      description="Enter the amount"
+      label="Amount"
+    />
+  );
+}

apps/docs/content/components/number-input/description.ts

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

apps/docs/content/components/number-input/disabled.raw.jsx

@@ -0,0 +1,13 @@
+import {NumberInput} from "@heroui/react";
+
+export default function App() {
+  return (
+    <NumberInput
+      isDisabled
+      aria-label="Amount"
+      className="max-w-xs"
+      defaultValue={1024}
+      placeholder="Enter the amount"
+    />
+  );
+}

apps/docs/content/components/number-input/disabled.ts

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

apps/docs/content/components/number-input/error-message.raw.jsx

@@ -0,0 +1,15 @@
+import {NumberInput} from "@heroui/react";
+
+export default function App() {
+  return (
+    <NumberInput
+      className="max-w-xs"
+      defaultValue={1024}
+      errorMessage="Please enter a valid number"
+      isInvalid={true}
+      label="Amount"
+      placeholder="Enter the amount"
+      variant="bordered"
+    />
+  );
+}

apps/docs/content/components/number-input/error-message.ts

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

apps/docs/content/components/number-input/format-options.raw.jsx

@@ -0,0 +1,60 @@
+import {NumberInput} from "@heroui/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+        <NumberInput
+          className="max-w-xs"
+          defaultValue={6}
+          formatOptions={{
+            style: "currency",
+            currency: "USD",
+          }}
+          label="With Currency"
+        />
+        <NumberInput
+          className="max-w-xs"
+          defaultValue={6}
+          formatOptions={{
+            signDisplay: "exceptZero",
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 2,
+          }}
+          label="With Sign"
+        />
+        <NumberInput
+          className="max-w-xs"
+          defaultValue={6}
+          formatOptions={{
+            style: "percent",
+          }}
+          label="With Percent"
+        />
+      </div>
+      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+        <NumberInput
+          className="max-w-xs"
+          defaultValue={6}
+          formatOptions={{
+            style: "currency",
+            currency: "EUR",
+            currencyDisplay: "code",
+            currencySign: "accounting",
+          }}
+          label="With Currency Vaule"
+        />
+        <NumberInput
+          className="max-w-xs"
+          defaultValue={6}
+          formatOptions={{
+            style: "unit",
+            unit: "inch",
+            unitDisplay: "long",
+          }}
+          label="With Unit"
+        />
+      </div>
+    </div>
+  );
+}

apps/docs/content/components/number-input/format-options.ts

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

apps/docs/content/components/number-input/hide-stepper.raw.jsx

@@ -0,0 +1,13 @@
+import {NumberInput} from "@heroui/react";
+
+export default function App() {
+  return (
+    <NumberInput
+      hideStepper
+      className="max-w-xs"
+      defaultValue={1024}
+      label="Amount"
+      placeholder="Enter the amount"
+    />
+  );
+}

apps/docs/content/components/number-input/hide-stepper.ts

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