feat: add HR component

apps/web/content/docs/components/hr.mdx

@@ -0,0 +1,46 @@
+---
+title: React Horizontal Line (HR) - Flowbite
+description: Create a horizontal line using the HR tag to separate content such as paragraphs, blockquotes, and other elements using the utility classes from Tailwind CSS
+---
+
+The HR component can be used to separate content using a horizontal line by adding space between elements based on multiple styles, variants, and layouts.
+
+## Default HR
+
+Use this example to separate text content with a <hr /> horizontal line.
+
+<Example name="hr.root" />
+
+## Trimmed
+
+Use this example to show a shorter version of the horizontal line.
+
+<Example name="hr.trimmed" />
+
+## Icon HR
+
+This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) in the middle of the HR element.
+
+<Example name="hr.icon" />
+
+## HR with Text
+
+Use this example to add a text in the middle of the HR component.
+
+<Example name="hr.text" />
+
+## HR Shape (square)
+
+This example can be used to separate content with an HR tag as a shape instead of a line.
+
+<Example name="hr.square" />
+
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<Theme name="hr" />
+
+## References
+
+- [Flowbite HR](https://flowbite.com/docs/typography/hr/)

apps/web/data/docs-sidebar.ts

@@ -67,6 +67,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
       { title: "Dropdown", href: "/docs/components/dropdown" },
       { title: "Footer", href: "/docs/components/footer" },
       { title: "Forms", href: "/docs/components/forms" },
+      { title: "HR", href: "/docs/components/hr", isNew: true },
       { title: "KBD", href: "/docs/components/kbd", isNew: true },
       { title: "List group", href: "/docs/components/list-group" },
       { title: "Modal", href: "/docs/components/modal" },

apps/web/examples/hr/hr.icon.tsx

@@ -0,0 +1,70 @@
+import { HRIcon } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { HR } from "flowbite-react";
+
+function Component() {
+  return (
+    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+
+    <HR.Icon />
+
+    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+  )
+}
+`;
+
+const codeRSC = `
+import { HRTrimmed } from "flowbite-react";
+
+function Component() {
+  return (
+    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+
+    <HRIcon />
+
+    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+
+      <HRIcon />
+
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
+}
+
+export const icon: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/hr/hr.icon.tsx",
+  component: <Component />,
+};

apps/web/examples/hr/hr.root.tsx

@@ -0,0 +1,68 @@
+import { HR } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { HR } from "flowbite-react";
+
+function Component() {
+  return (
+    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+
+    <HR />
+
+    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+  )
+}
+`;
+
+const codeRSC = `
+import { HR } from "flowbite-react";
+
+function Component() {
+  return (
+      <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+
+      <HR />
+
+      <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+      <HR />
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
+}
+
+export const root: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/hr/hr.root.tsx",
+  component: <Component />,
+};

apps/web/examples/hr/hr.square.tsx

@@ -0,0 +1,70 @@
+import { HRSquare } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { HR } from "flowbite-react";
+
+function Component() {
+  return (
+    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+
+    <HR.Square />
+
+    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+  )
+}
+`;
+
+const codeRSC = `
+import { HRTrimmed } from "flowbite-react";
+
+function Component() {
+  return (
+    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+
+    <HRSquare />
+
+    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+
+      <HRSquare />
+
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
+}
+
+export const square: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/hr/hr.square.tsx",
+  component: <Component />,
+};

apps/web/examples/hr/hr.text.tsx

@@ -0,0 +1,70 @@
+import { HRText } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { HR } from "flowbite-react";
+
+function Component() {
+  return (
+    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+
+    <HR.Text text="or" />
+
+    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+  )
+}
+`;
+
+const codeRSC = `
+import { HRTrimmed } from "flowbite-react";
+
+function Component() {
+  return (
+    <p className="text-gray-500 dark:text-gray-400">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+
+    <HRText />
+
+    <p className="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <>
+      <p className="text-gray-500 dark:text-gray-400">
+        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
+        data from other software development tools, so your IT support and operations teams have richer contextual
+        information to rapidly respond to requests, incidents, and changes.
+      </p>
+
+      <HRText text="or" />
+
+      <p className="text-gray-500 dark:text-gray-400">
+        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
+        critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
+        change.
+      </p>
+    </>
+  );
+}
+
+export const text: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "/hr/hr.text.tsx",
+  component: <Component />,
+};