From 34b373260e0a9a75c69f314cfa81959fe6421222 Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Sun, 31 Mar 2024 17:04:09 +0530
Subject: [PATCH 1/7] feat/phoneInput: added phoneInput Form Feature

---
 apps/web/content/docs/forms/phone-input.mdx   | 34 ++++++++
 apps/web/data/docs-sidebar.ts                 |  1 +
 apps/web/examples/index.ts                    |  1 +
 apps/web/examples/phoneInput/index.ts         |  2 +
 .../examples/phoneInput/phoneInput.root.tsx   | 52 +++++++++++++
 .../phoneInput/phoneInput.withHelperText.tsx  | 52 +++++++++++++
 .../src/components/Flowbite/FlowbiteTheme.ts  |  2 +
 .../components/PhoneInput/PhoneInput.spec.tsx | 30 +++++++
 .../PhoneInput/PhoneInput.stories.tsx         | 43 ++++++++++
 .../src/components/PhoneInput/PhoneInput.tsx  | 78 +++++++++++++++++++
 .../ui/src/components/PhoneInput/index.ts     |  2 +
 .../ui/src/components/PhoneInput/theme.ts     | 24 ++++++
 packages/ui/src/index.ts                      |  1 +
 packages/ui/src/theme.ts                      |  2 +
 14 files changed, 324 insertions(+)
 create mode 100644 apps/web/content/docs/forms/phone-input.mdx
 create mode 100644 apps/web/examples/phoneInput/index.ts
 create mode 100644 apps/web/examples/phoneInput/phoneInput.root.tsx
 create mode 100644 apps/web/examples/phoneInput/phoneInput.withHelperText.tsx
 create mode 100644 packages/ui/src/components/PhoneInput/PhoneInput.spec.tsx
 create mode 100644 packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx
 create mode 100644 packages/ui/src/components/PhoneInput/PhoneInput.tsx
 create mode 100644 packages/ui/src/components/PhoneInput/index.ts
 create mode 100644 packages/ui/src/components/PhoneInput/theme.ts

diff --git a/apps/web/content/docs/forms/phone-input.mdx b/apps/web/content/docs/forms/phone-input.mdx
new file mode 100644
index 000000000..d65981f56
--- /dev/null
+++ b/apps/web/content/docs/forms/phone-input.mdx
@@ -0,0 +1,34 @@
+---
+title: React File Phone Input - Flowbite
+description: Use the phone number input component from Flowbite to set a phone number inside a form field and use sizes
+---
+
+The phone number input component from Flowbite React can be used to set a phone number inside a form field by using the native type="tel" attribute.
+
+The examples are built with the utility classes from Tailwind CSS and they are fully responsive, dark mode compatible and support RTL layouts and can be used for any type of web project.
+
+To start using the component make sure that you have imported it from Flowbite React:
+
+```jsx
+import { PhoneInput } from "flowbite-react";
+```
+
+## Default phone input
+
+Get started with the following PhoneInput example.
+
+<Example name="phoneInput.root" />
+
+## Phone Input Example with Helper Text
+
+<Example name="phoneInput.withHelperText" />
+
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<Theme name="phoneInput" />
+
+## References
+
+- [Flowbite Phone Input](https://flowbite.com/docs/forms/phone-input/)
diff --git a/apps/web/data/docs-sidebar.ts b/apps/web/data/docs-sidebar.ts
index 60c49560b..984e89fac 100644
--- a/apps/web/data/docs-sidebar.ts
+++ b/apps/web/data/docs-sidebar.ts
@@ -90,6 +90,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
     items: [
       { title: "File Input", href: "/docs/forms/file-input" },
       { title: "Floating Label", href: "/docs/forms/floating-label", isNew: true },
+      { title: "Phone Input", href: "/docs/forms/phone-input", isNew: true },
     ],
   },
   {
diff --git a/apps/web/examples/index.ts b/apps/web/examples/index.ts
index 7992d8e29..c9202217d 100644
--- a/apps/web/examples/index.ts
+++ b/apps/web/examples/index.ts
@@ -21,6 +21,7 @@ export * as listGroup from "./listGroup";
 export * as modal from "./modal";
 export * as navbar from "./navbar";
 export * as pagination from "./pagination";
+export * as phoneInput from "./phoneInput";
 export * as popover from "./popover";
 export * as progress from "./progress";
 export * as rating from "./rating";
diff --git a/apps/web/examples/phoneInput/index.ts b/apps/web/examples/phoneInput/index.ts
new file mode 100644
index 000000000..c46a0a13f
--- /dev/null
+++ b/apps/web/examples/phoneInput/index.ts
@@ -0,0 +1,2 @@
+export { root } from "./phoneInput.root";
+export { withHelperText } from "./phoneInput.withHelperText";
diff --git a/apps/web/examples/phoneInput/phoneInput.root.tsx b/apps/web/examples/phoneInput/phoneInput.root.tsx
new file mode 100644
index 000000000..e21adf760
--- /dev/null
+++ b/apps/web/examples/phoneInput/phoneInput.root.tsx
@@ -0,0 +1,52 @@
+import { PhoneInput } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { PhoneInput } from "flowbite-react";
+
+function Component() {
+    return (
+        <form className="max-w-sm mx-auto">
+            <PhoneInput />
+        </form>
+    )
+}
+`;
+
+const codeRSC = `
+function Component() {
+    return (
+        <form className="max-w-sm mx-auto">
+            <PhoneInput />
+        </form>
+    )
+}
+`;
+
+function Component() {
+  return (
+    <form className="mx-auto max-w-sm">
+      <PhoneInput />
+    </form>
+  );
+}
+
+export const root: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/phoneInput/phoneInput.root.tsx",
+  component: <Component />,
+};
diff --git a/apps/web/examples/phoneInput/phoneInput.withHelperText.tsx b/apps/web/examples/phoneInput/phoneInput.withHelperText.tsx
new file mode 100644
index 000000000..b4394e5e2
--- /dev/null
+++ b/apps/web/examples/phoneInput/phoneInput.withHelperText.tsx
@@ -0,0 +1,52 @@
+import { PhoneInput } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { PhoneInput } from "flowbite-react";
+
+function Component() {
+    return (
+        <form className="max-w-sm mx-auto">
+            <PhoneInput helperText="Select a phone number that matches the format." />
+        </form>
+    )
+}
+`;
+
+const codeRSC = `
+function Component() {
+    return (
+        <form className="max-w-sm mx-auto">
+            <PhoneInput helperText="Select a phone number that matches the format." />
+        </form>
+    )
+}
+`;
+
+function Component() {
+  return (
+    <form className="mx-auto max-w-sm">
+      <PhoneInput helperText="Select a phone number that matches the format." />
+    </form>
+  );
+}
+
+export const withHelperText: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/phoneInput/phoneInput.withHelperText.tsx",
+  component: <Component />,
+};
diff --git a/packages/ui/src/components/Flowbite/FlowbiteTheme.ts b/packages/ui/src/components/Flowbite/FlowbiteTheme.ts
index a0ce75db5..229699671 100644
--- a/packages/ui/src/components/Flowbite/FlowbiteTheme.ts
+++ b/packages/ui/src/components/Flowbite/FlowbiteTheme.ts
@@ -23,6 +23,7 @@ import type { FlowbiteListGroupTheme } from "../ListGroup";
 import type { FlowbiteModalTheme } from "../Modal";
 import type { FlowbiteNavbarTheme } from "../Navbar";
 import type { FlowbitePaginationTheme } from "../Pagination";
+import { FlowbitePhoneInputTheme } from "../PhoneInput/PhoneInput";
 import type { FlowbitePopoverTheme } from "../Popover";
 import type { FlowbiteProgressTheme } from "../Progress";
 import type { FlowbiteRadioTheme } from "../Radio";
@@ -68,6 +69,7 @@ export interface FlowbiteTheme {
   modal: FlowbiteModalTheme;
   navbar: FlowbiteNavbarTheme;
   pagination: FlowbitePaginationTheme;
+  phoneInput: FlowbitePhoneInputTheme;
   popover: FlowbitePopoverTheme;
   progress: FlowbiteProgressTheme;
   radio: FlowbiteRadioTheme;
diff --git a/packages/ui/src/components/PhoneInput/PhoneInput.spec.tsx b/packages/ui/src/components/PhoneInput/PhoneInput.spec.tsx
new file mode 100644
index 000000000..2d85df5e0
--- /dev/null
+++ b/packages/ui/src/components/PhoneInput/PhoneInput.spec.tsx
@@ -0,0 +1,30 @@
+import { render } from "@testing-library/react";
+import { FaPhoneAlt } from "react-icons/fa";
+import { describe, expect, it } from "vitest";
+import { PhoneInput } from "./PhoneInput";
+
+describe.concurrent("Components / PhoneInput", () => {
+  describe.concurrent("A11y", () => {
+    it('should have `role="textbox"` by default', () => {
+      const textInput = render(<PhoneInput />).getByRole("textbox");
+
+      expect(textInput).toBeInTheDocument();
+    });
+
+    it("should have Left Icon", () => {
+      const leftPage = render(<PhoneInput />).getAllByTestId("left-icon");
+
+      leftPage.forEach((leftIcon) => {
+        expect(leftIcon).toBeInTheDocument();
+      });
+    });
+
+    it("should have Right Icon", () => {
+      const rightPage = render(<PhoneInput rightIcon={FaPhoneAlt} />).getAllByTestId("right-icon");
+
+      rightPage.forEach((rightIcon) => {
+        expect(rightIcon).toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx b/packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx
new file mode 100644
index 000000000..03d4c677a
--- /dev/null
+++ b/packages/ui/src/components/PhoneInput/PhoneInput.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryFn } from "@storybook/react";
+import { FaPhoneAlt } from "react-icons/fa";
+import type { PhoneInputProps } from "./PhoneInput";
+import { PhoneInput } from "./PhoneInput";
+
+export default {
+  title: "Components/PhoneInput",
+  component: PhoneInput,
+} as Meta;
+
+const Template: StoryFn<PhoneInputProps> = (args) => {
+  return (
+    <form className="mx-auto max-w-sm">
+      <PhoneInput {...args} />
+    </form>
+  );
+};
+
+export const Default = Template.bind({});
+Default.storyName = "Phone Input";
+Default.args = {
+  placeholder: "123-456-7890",
+  pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}",
+  required: true,
+};
+
+export const WithRightIcon = Template.bind({});
+WithRightIcon.storyName = "Phone Input with Right Icon";
+WithRightIcon.args = {
+  placeholder: "123-456-7890",
+  pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}",
+  required: true,
+  rightIcon: FaPhoneAlt,
+};
+
+export const WithHelperText = Template.bind({});
+WithHelperText.storyName = "Phone Input with Helper Text";
+WithHelperText.args = {
+  placeholder: "123-456-7890",
+  pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}",
+  required: true,
+  helperText: "Select a phone number that matches the format.",
+};
diff --git a/packages/ui/src/components/PhoneInput/PhoneInput.tsx b/packages/ui/src/components/PhoneInput/PhoneInput.tsx
new file mode 100644
index 000000000..b93ac9eb3
--- /dev/null
+++ b/packages/ui/src/components/PhoneInput/PhoneInput.tsx
@@ -0,0 +1,78 @@
+import { forwardRef, type ComponentProps, type FC, type ReactNode } from "react";
+import { FaPhoneAlt } from "react-icons/fa";
+import { twMerge } from "tailwind-merge";
+import { mergeDeep } from "../../helpers/merge-deep";
+import { getTheme } from "../../theme-store";
+import type { DeepPartial } from "../../types";
+import { FlowbiteSizes } from "../Flowbite";
+import { HelperText } from "../HelperText";
+
+export interface FlowbitePhoneInputTheme {
+  root: {
+    base: string;
+    input: {
+      base: string;
+      sizes: FlowbitePhoneInputSizes;
+      startIcon: {
+        base: string;
+        icon: string;
+      };
+      rightIcon: {
+        base: string;
+        icon: string;
+      };
+    };
+  };
+}
+
+export interface FlowbitePhoneInputSizes extends Pick<FlowbiteSizes, "sm" | "md" | "lg"> {
+  [key: string]: string;
+}
+
+export interface PhoneInputProps extends Omit<ComponentProps<"input">, "ref"> {
+  helperText?: ReactNode;
+  icon?: FC<ComponentProps<"svg">>;
+  rightIcon?: FC<ComponentProps<"svg">>;
+  sizing?: keyof FlowbitePhoneInputSizes;
+  theme?: DeepPartial<FlowbitePhoneInputTheme>;
+}
+
+export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
+  (
+    { helperText, icon: LeftIcon, rightIcon: RightIcon, sizing = "md", theme: customTheme = {}, className, ...props },
+    ref,
+  ) => {
+    const theme = mergeDeep(getTheme().phoneInput.root, customTheme);
+
+    const StartIcon = LeftIcon ? LeftIcon : FaPhoneAlt;
+
+    return (
+      <>
+        <div className={twMerge(theme.base, className)}>
+          <div data-testid="left-icon" className={theme.input.startIcon.base}>
+            <StartIcon aria-hidden className={theme.input.startIcon.icon} />
+          </div>
+          <div className={theme.input.rightIcon.base}>
+            {RightIcon && (
+              <div data-testid="right-icon" className={theme.input.rightIcon.base}>
+                <RightIcon className={theme.input.rightIcon.icon} />
+              </div>
+            )}
+          </div>
+          <input
+            type="tel"
+            id="phone-input"
+            aria-describedby="phone-input"
+            data-testid="phone-input-field"
+            className={theme.input.base}
+            ref={ref}
+            {...props}
+          />
+        </div>
+        {helperText && <HelperText color="grey">{helperText}</HelperText>}
+      </>
+    );
+  },
+);
+
+PhoneInput.displayName = "PhoneInput";
diff --git a/packages/ui/src/components/PhoneInput/index.ts b/packages/ui/src/components/PhoneInput/index.ts
new file mode 100644
index 000000000..66911750c
--- /dev/null
+++ b/packages/ui/src/components/PhoneInput/index.ts
@@ -0,0 +1,2 @@
+export { PhoneInput } from "./PhoneInput";
+export type { FlowbitePhoneInputSizes, FlowbitePhoneInputTheme, PhoneInputProps } from "./PhoneInput";
diff --git a/packages/ui/src/components/PhoneInput/theme.ts b/packages/ui/src/components/PhoneInput/theme.ts
new file mode 100644
index 000000000..31c6aeb30
--- /dev/null
+++ b/packages/ui/src/components/PhoneInput/theme.ts
@@ -0,0 +1,24 @@
+import { createTheme } from "../../helpers/create-theme";
+import type { FlowbitePhoneInputTheme } from "./PhoneInput";
+
+export const phoneInputTheme: FlowbitePhoneInputTheme = createTheme({
+  root: {
+    base: "relative",
+    input: {
+      base: "block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500  dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
+      startIcon: {
+        base: "pointer-events-none absolute inset-y-0 start-0 top-0 flex items-center ps-3.5",
+        icon: "h-4 w-4 text-gray-500 dark:text-gray-400",
+      },
+      rightIcon: {
+        base: "pointer-events-none absolute inset-y-0 end-3 top-0 flex items-center ps-3.5",
+        icon: "h-4 w-4 text-gray-500 dark:text-gray-400",
+      },
+      sizes: {
+        sm: "p-2 sm:text-xs",
+        md: "p-2.5 text-sm",
+        lg: "p-4 sm:text-base",
+      },
+    },
+  },
+});
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index d4ac43525..06c6f0c95 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -25,6 +25,7 @@ export * from "./components/ListGroup";
 export * from "./components/Modal";
 export * from "./components/Navbar";
 export * from "./components/Pagination";
+export * from "./components/PhoneInput";
 export * from "./components/Popover";
 export * from "./components/Progress";
 export * from "./components/Radio";
diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
index a5c64cb0b..67d48c671 100644
--- a/packages/ui/src/theme.ts
+++ b/packages/ui/src/theme.ts
@@ -23,6 +23,7 @@ import { listGroupTheme } from "./components/ListGroup/theme";
 import { modalTheme } from "./components/Modal/theme";
 import { navbarTheme } from "./components/Navbar/theme";
 import { paginationTheme } from "./components/Pagination/theme";
+import { phoneInputTheme } from "./components/PhoneInput/theme";
 import { popoverTheme } from "./components/Popover/theme";
 import { progressTheme } from "./components/Progress/theme";
 import { radioTheme } from "./components/Radio/theme";
@@ -66,6 +67,7 @@ export const theme: FlowbiteTheme = {
   modal: modalTheme,
   navbar: navbarTheme,
   pagination: paginationTheme,
+  phoneInput: phoneInputTheme,
   popover: popoverTheme,
   progress: progressTheme,
   radio: radioTheme,

From 709b3be2e09f9b18c35afa1c5310aa0712ac6e11 Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Sun, 31 Mar 2024 17:13:46 +0530
Subject: [PATCH 2/7] fix: Example Updated for Docs

---
 apps/web/examples/phoneInput/phoneInput.root.tsx           | 2 +-
 apps/web/examples/phoneInput/phoneInput.withHelperText.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/web/examples/phoneInput/phoneInput.root.tsx b/apps/web/examples/phoneInput/phoneInput.root.tsx
index e21adf760..acd7897ca 100644
--- a/apps/web/examples/phoneInput/phoneInput.root.tsx
+++ b/apps/web/examples/phoneInput/phoneInput.root.tsx
@@ -28,7 +28,7 @@ function Component() {
 function Component() {
   return (
     <form className="mx-auto max-w-sm">
-      <PhoneInput />
+      <PhoneInput pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required placeholder="123-456-7890" />
     </form>
   );
 }
diff --git a/apps/web/examples/phoneInput/phoneInput.withHelperText.tsx b/apps/web/examples/phoneInput/phoneInput.withHelperText.tsx
index b4394e5e2..9ee257218 100644
--- a/apps/web/examples/phoneInput/phoneInput.withHelperText.tsx
+++ b/apps/web/examples/phoneInput/phoneInput.withHelperText.tsx
@@ -28,7 +28,12 @@ function Component() {
 function Component() {
   return (
     <form className="mx-auto max-w-sm">
-      <PhoneInput helperText="Select a phone number that matches the format." />
+      <PhoneInput
+        pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
+        required
+        placeholder="123-456-7890"
+        helperText="Select a phone number that matches the format."
+      />
     </form>
   );
 }

From 6e2e16f5dbb0af7bffa2d4d7656622ca85d21ed1 Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Sun, 31 Mar 2024 17:29:25 +0530
Subject: [PATCH 3/7] feat: Docs Example added with PhoneInput with Right Icon

---
 apps/web/content/docs/forms/phone-input.mdx   |  6 +-
 apps/web/examples/phoneInput/index.ts         |  1 +
 .../phoneInput/phoneInput.withRightIcon.tsx   | 59 +++++++++++++++++++
 3 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/examples/phoneInput/phoneInput.withRightIcon.tsx

diff --git a/apps/web/content/docs/forms/phone-input.mdx b/apps/web/content/docs/forms/phone-input.mdx
index d65981f56..4b7ea0657 100644
--- a/apps/web/content/docs/forms/phone-input.mdx
+++ b/apps/web/content/docs/forms/phone-input.mdx
@@ -15,7 +15,7 @@ import { PhoneInput } from "flowbite-react";
 
 ## Default phone input
 
-Get started with the following PhoneInput example.
+Get started with the following phone input example with default type as `type="tel"`.
 
 <Example name="phoneInput.root" />
 
@@ -23,6 +23,10 @@ Get started with the following PhoneInput example.
 
 <Example name="phoneInput.withHelperText" />
 
+## Phone Input Example with Icon on the right
+
+<Example name="phoneInput.withRightIcon" />
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
diff --git a/apps/web/examples/phoneInput/index.ts b/apps/web/examples/phoneInput/index.ts
index c46a0a13f..41b776d02 100644
--- a/apps/web/examples/phoneInput/index.ts
+++ b/apps/web/examples/phoneInput/index.ts
@@ -1,2 +1,3 @@
 export { root } from "./phoneInput.root";
 export { withHelperText } from "./phoneInput.withHelperText";
+export { withRightIcon } from "./phoneInput.withRightIcon";
diff --git a/apps/web/examples/phoneInput/phoneInput.withRightIcon.tsx b/apps/web/examples/phoneInput/phoneInput.withRightIcon.tsx
new file mode 100644
index 000000000..a3793aa85
--- /dev/null
+++ b/apps/web/examples/phoneInput/phoneInput.withRightIcon.tsx
@@ -0,0 +1,59 @@
+import { PhoneInput } from "flowbite-react";
+import { FaPhoneAlt } from "react-icons/fa";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { PhoneInput } from "flowbite-react";
+
+function Component() {
+    return (
+        <form className="max-w-sm mx-auto">
+            <PhoneInput helperText="Select a phone number that matches the format."  rightIcon={FaPhoneAlt}/>
+        </form>
+    )
+}
+`;
+
+const codeRSC = `
+function Component() {
+    return (
+        <form className="max-w-sm mx-auto">
+            <PhoneInput helperText="Select a phone number that matches the format." rightIcon={FaPhoneAlt} />
+        </form>
+    )
+}
+`;
+
+function Component() {
+  return (
+    <form className="mx-auto max-w-sm">
+      <PhoneInput
+        pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
+        required
+        placeholder="123-456-7890"
+        helperText="Select a phone number that matches the format."
+        rightIcon={FaPhoneAlt}
+      />
+    </form>
+  );
+}
+
+export const withRightIcon: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/phoneInput/phoneInput.withRightIcon.tsx",
+  component: <Component />,
+};

From 3dd18326507baee677092ac34ecefa471b05347e Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Sun, 31 Mar 2024 17:33:51 +0530
Subject: [PATCH 4/7] fix: renamed the heading in the docs

---
 apps/web/content/docs/forms/phone-input.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/content/docs/forms/phone-input.mdx b/apps/web/content/docs/forms/phone-input.mdx
index 4b7ea0657..958e84611 100644
--- a/apps/web/content/docs/forms/phone-input.mdx
+++ b/apps/web/content/docs/forms/phone-input.mdx
@@ -19,11 +19,11 @@ Get started with the following phone input example with default type as `type="t
 
 <Example name="phoneInput.root" />
 
-## Phone Input Example with Helper Text
+## Example with Helper Text
 
 <Example name="phoneInput.withHelperText" />
 
-## Phone Input Example with Icon on the right
+## Example with Icon on the right
 
 <Example name="phoneInput.withRightIcon" />
 

From d9752f773b87e35c3e01f4085a51e8dc79b47de4 Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Wed, 3 Apr 2024 13:11:16 +0530
Subject: [PATCH 5/7] Docs typo mistake fixed

---
 apps/web/content/docs/forms/phone-input.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/content/docs/forms/phone-input.mdx b/apps/web/content/docs/forms/phone-input.mdx
index 958e84611..3d156f3df 100644
--- a/apps/web/content/docs/forms/phone-input.mdx
+++ b/apps/web/content/docs/forms/phone-input.mdx
@@ -1,5 +1,5 @@
 ---
-title: React File Phone Input - Flowbite
+title: React Phone Input - Flowbite
 description: Use the phone number input component from Flowbite to set a phone number inside a form field and use sizes
 ---
 

From 45be9372e57080f9941683d8bcf361b15ad90739 Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Wed, 3 Apr 2024 13:32:21 +0530
Subject: [PATCH 6/7] Fixes based on the reviews

---
 apps/web/content/docs/forms/phone-input.mdx   |  6 +++---
 .../examples/phoneInput/phoneInput.root.tsx   | 20 +++++++++----------
 .../phoneInput/phoneInput.withHelperText.tsx  | 20 +++++++++----------
 .../phoneInput/phoneInput.withRightIcon.tsx   | 20 +++++++++----------
 .../src/components/Flowbite/FlowbiteTheme.ts  |  2 +-
 .../src/components/PhoneInput/PhoneInput.tsx  |  2 +-
 .../ui/src/components/PhoneInput/theme.ts     |  2 +-
 7 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/apps/web/content/docs/forms/phone-input.mdx b/apps/web/content/docs/forms/phone-input.mdx
index 3d156f3df..22e72ea8b 100644
--- a/apps/web/content/docs/forms/phone-input.mdx
+++ b/apps/web/content/docs/forms/phone-input.mdx
@@ -3,11 +3,11 @@ title: React Phone Input - Flowbite
 description: Use the phone number input component from Flowbite to set a phone number inside a form field and use sizes
 ---
 
-The phone number input component from Flowbite React can be used to set a phone number inside a form field by using the native type="tel" attribute.
+The phone number input component from Flowbite React, utilizing the native type="tel" attribute, enables users to input phone numbers within form fields.
 
-The examples are built with the utility classes from Tailwind CSS and they are fully responsive, dark mode compatible and support RTL layouts and can be used for any type of web project.
+The examples are built with the utility classes from Tailwind CSS, and they are fully responsive, dark mode compatible, and support RTL layouts, making them suitable for any type of web project.
 
-To start using the component make sure that you have imported it from Flowbite React:
+To start using the component, make sure that you have imported it from Flowbite React:
 
 ```jsx
 import { PhoneInput } from "flowbite-react";
diff --git a/apps/web/examples/phoneInput/phoneInput.root.tsx b/apps/web/examples/phoneInput/phoneInput.root.tsx
index acd7897ca..d836c254a 100644
--- a/apps/web/examples/phoneInput/phoneInput.root.tsx
+++ b/apps/web/examples/phoneInput/phoneInput.root.tsx
@@ -7,21 +7,21 @@ const code = `
 import { PhoneInput } from "flowbite-react";
 
 function Component() {
-    return (
-        <form className="max-w-sm mx-auto">
-            <PhoneInput />
-        </form>
-    )
+  return (
+    <form className="max-w-sm mx-auto">
+      <PhoneInput />
+    </form>
+  )
 }
 `;
 
 const codeRSC = `
 function Component() {
-    return (
-        <form className="max-w-sm mx-auto">
-            <PhoneInput />
-        </form>
-    )
+  return (
+    <form className="max-w-sm mx-auto">
+      <PhoneInput />
+    </form>
+  )
 }
 `;
 
diff --git a/apps/web/examples/phoneInput/phoneInput.withHelperText.tsx b/apps/web/examples/phoneInput/phoneInput.withHelperText.tsx
index 9ee257218..2ebdc5200 100644
--- a/apps/web/examples/phoneInput/phoneInput.withHelperText.tsx
+++ b/apps/web/examples/phoneInput/phoneInput.withHelperText.tsx
@@ -7,21 +7,21 @@ const code = `
 import { PhoneInput } from "flowbite-react";
 
 function Component() {
-    return (
-        <form className="max-w-sm mx-auto">
-            <PhoneInput helperText="Select a phone number that matches the format." />
-        </form>
-    )
+  return (
+    <form className="max-w-sm mx-auto">
+      <PhoneInput helperText="Select a phone number that matches the format." />
+    </form>
+  )
 }
 `;
 
 const codeRSC = `
 function Component() {
-    return (
-        <form className="max-w-sm mx-auto">
-            <PhoneInput helperText="Select a phone number that matches the format." />
-        </form>
-    )
+  return (
+    <form className="max-w-sm mx-auto">
+      <PhoneInput helperText="Select a phone number that matches the format." />
+    </form>
+  )
 }
 `;
 
diff --git a/apps/web/examples/phoneInput/phoneInput.withRightIcon.tsx b/apps/web/examples/phoneInput/phoneInput.withRightIcon.tsx
index a3793aa85..ae864afd1 100644
--- a/apps/web/examples/phoneInput/phoneInput.withRightIcon.tsx
+++ b/apps/web/examples/phoneInput/phoneInput.withRightIcon.tsx
@@ -8,21 +8,21 @@ const code = `
 import { PhoneInput } from "flowbite-react";
 
 function Component() {
-    return (
-        <form className="max-w-sm mx-auto">
-            <PhoneInput helperText="Select a phone number that matches the format."  rightIcon={FaPhoneAlt}/>
-        </form>
-    )
+  return (
+    <form className="max-w-sm mx-auto">
+      <PhoneInput helperText="Select a phone number that matches the format."  rightIcon={FaPhoneAlt} />
+    </form>
+  )
 }
 `;
 
 const codeRSC = `
 function Component() {
-    return (
-        <form className="max-w-sm mx-auto">
-            <PhoneInput helperText="Select a phone number that matches the format." rightIcon={FaPhoneAlt} />
-        </form>
-    )
+  return (
+    <form className="max-w-sm mx-auto">
+      <PhoneInput helperText="Select a phone number that matches the format." rightIcon={FaPhoneAlt} />
+    </form>
+  )
 }
 `;
 
diff --git a/packages/ui/src/components/Flowbite/FlowbiteTheme.ts b/packages/ui/src/components/Flowbite/FlowbiteTheme.ts
index 229699671..310a95785 100644
--- a/packages/ui/src/components/Flowbite/FlowbiteTheme.ts
+++ b/packages/ui/src/components/Flowbite/FlowbiteTheme.ts
@@ -23,7 +23,7 @@ import type { FlowbiteListGroupTheme } from "../ListGroup";
 import type { FlowbiteModalTheme } from "../Modal";
 import type { FlowbiteNavbarTheme } from "../Navbar";
 import type { FlowbitePaginationTheme } from "../Pagination";
-import { FlowbitePhoneInputTheme } from "../PhoneInput/PhoneInput";
+import type { FlowbitePhoneInputTheme } from "../PhoneInput/PhoneInput";
 import type { FlowbitePopoverTheme } from "../Popover";
 import type { FlowbiteProgressTheme } from "../Progress";
 import type { FlowbiteRadioTheme } from "../Radio";
diff --git a/packages/ui/src/components/PhoneInput/PhoneInput.tsx b/packages/ui/src/components/PhoneInput/PhoneInput.tsx
index b93ac9eb3..18158ba6d 100644
--- a/packages/ui/src/components/PhoneInput/PhoneInput.tsx
+++ b/packages/ui/src/components/PhoneInput/PhoneInput.tsx
@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
 import type { DeepPartial } from "../../types";
-import { FlowbiteSizes } from "../Flowbite";
+import type { FlowbiteSizes } from "../Flowbite";
 import { HelperText } from "../HelperText";
 
 export interface FlowbitePhoneInputTheme {
diff --git a/packages/ui/src/components/PhoneInput/theme.ts b/packages/ui/src/components/PhoneInput/theme.ts
index 31c6aeb30..a571cc544 100644
--- a/packages/ui/src/components/PhoneInput/theme.ts
+++ b/packages/ui/src/components/PhoneInput/theme.ts
@@ -5,7 +5,7 @@ export const phoneInputTheme: FlowbitePhoneInputTheme = createTheme({
   root: {
     base: "relative",
     input: {
-      base: "block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500  dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
+      base: "block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
       startIcon: {
         base: "pointer-events-none absolute inset-y-0 start-0 top-0 flex items-center ps-3.5",
         icon: "h-4 w-4 text-gray-500 dark:text-gray-400",

From cff0a5070844bce371330ec7f9cb87307632b291 Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Wed, 3 Apr 2024 13:48:47 +0530
Subject: [PATCH 7/7] Docs fix based on AI Review

---
 apps/web/content/docs/forms/phone-input.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/content/docs/forms/phone-input.mdx b/apps/web/content/docs/forms/phone-input.mdx
index 22e72ea8b..7e9677259 100644
--- a/apps/web/content/docs/forms/phone-input.mdx
+++ b/apps/web/content/docs/forms/phone-input.mdx
@@ -3,7 +3,7 @@ title: React Phone Input - Flowbite
 description: Use the phone number input component from Flowbite to set a phone number inside a form field and use sizes
 ---
 
-The phone number input component from Flowbite React, utilizing the native type="tel" attribute, enables users to input phone numbers within form fields.
+The phone number input component from Flowbite React, leveraging the native type="tel" attribute, simplifies entering phone numbers in form fields.
 
 The examples are built with the utility classes from Tailwind CSS, and they are fully responsive, dark mode compatible, and support RTL layouts, making them suitable for any type of web project.
 
@@ -29,7 +29,7 @@ Get started with the following phone input example with default type as `type="t
 
 ## Theme
 
-To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+For detailed instructions on customizing component appearances, refer to the [Theme documentation](/docs/customize/theme).
 
 <Theme name="phoneInput" />