diff --git a/.changeset/tough-ducks-beam.md b/.changeset/tough-ducks-beam.md new file mode 100644 index 000000000..1e2e99db5 --- /dev/null +++ b/.changeset/tough-ducks-beam.md @@ -0,0 +1,5 @@ +--- +"flowbite-react": patch +--- + +feat: add `HR` component diff --git a/apps/web/content/docs/typography/hr.mdx b/apps/web/content/docs/typography/hr.mdx new file mode 100644 index 000000000..af4d137b9 --- /dev/null +++ b/apps/web/content/docs/typography/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 `
` horizontal line. + + + +## Trimmed + +Use this example to show a shorter version of the horizontal line. + + + +## Icon HR + +This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) in the middle of the HR element. + + + +## HR with Text + +Use this example to add a text in the middle of the HR component. + + + +## HR Shape (square) + +This example can be used to separate content with an HR tag as a shape instead of a line. + + + +## Theme + +To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). + + + +## References + +- [Flowbite HR](https://flowbite.com/docs/typography/hr/) diff --git a/apps/web/data/docs-sidebar.ts b/apps/web/data/docs-sidebar.ts index 933eaf146..36049fb6a 100644 --- a/apps/web/data/docs-sidebar.ts +++ b/apps/web/data/docs-sidebar.ts @@ -101,6 +101,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [ items: [ { title: "Blockquote", href: "/docs/typography/blockquote", isNew: true }, { title: "List", href: "/docs/typography/list", isNew: true }, + { title: "HR", href: "/docs/typography/hr", isNew: true }, ], }, ]; diff --git a/apps/web/examples/hr/hr.icon.tsx b/apps/web/examples/hr/hr.icon.tsx new file mode 100644 index 000000000..3d5ef6fdc --- /dev/null +++ b/apps/web/examples/hr/hr.icon.tsx @@ -0,0 +1,82 @@ +import { HRIcon } from "flowbite-react"; +import type { CodeData } from "~/components/code-demo"; + +const code = ` +import { HR } from "flowbite-react"; + +function Component() { + return ( + <> +

+ 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. +

+ +

+ 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. +

+ + ); +} +`; + +const codeRSC = ` +import { HRIcon } from "flowbite-react"; + +function Component() { + return ( + <> +

+ 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. +

+ +

+ 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. +

+ + ); +} +`; + +function Component() { + return ( + <> +

+ 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. +

+ +

+ 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. +

+ + ); +} + +export const icon: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "/hr/hr.icon.tsx", + component: , +}; diff --git a/apps/web/examples/hr/hr.root.tsx b/apps/web/examples/hr/hr.root.tsx new file mode 100644 index 000000000..26d21a926 --- /dev/null +++ b/apps/web/examples/hr/hr.root.tsx @@ -0,0 +1,60 @@ +import { HR } from "flowbite-react"; +import type { CodeData } from "~/components/code-demo"; + +const code = ` +import { HR } from "flowbite-react"; + +function Component() { + return ( + <> +

+ 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. +

+
+

+ 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. +

+ + ); +} +`; + +function Component() { + return ( + <> +

+ 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. +

+
+

+ 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. +

+ + ); +} + +export const root: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code, + }, + ], + githubSlug: "/hr/hr.root.tsx", + component: , +}; diff --git a/apps/web/examples/hr/hr.square.tsx b/apps/web/examples/hr/hr.square.tsx new file mode 100644 index 000000000..698e4758e --- /dev/null +++ b/apps/web/examples/hr/hr.square.tsx @@ -0,0 +1,82 @@ +import { HRSquare } from "flowbite-react"; +import type { CodeData } from "~/components/code-demo"; + +const code = ` +import { HR } from "flowbite-react"; + +function Component() { + return ( + <> +

+ 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. +

+ +

+ 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. +

+ + ); +} +`; + +const codeRSC = ` +import { HRSquare } from "flowbite-react"; + +function Component() { + return ( + <> +

+ 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. +

+ +

+ 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. +

+ + ); +} +`; + +function Component() { + return ( + <> +

+ 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. +

+ +

+ 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. +

+ + ); +} + +export const square: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "/hr/hr.square.tsx", + component: , +}; diff --git a/apps/web/examples/hr/hr.text.tsx b/apps/web/examples/hr/hr.text.tsx new file mode 100644 index 000000000..4ee3983d0 --- /dev/null +++ b/apps/web/examples/hr/hr.text.tsx @@ -0,0 +1,82 @@ +import { HRText } from "flowbite-react"; +import type { CodeData } from "~/components/code-demo"; + +const code = ` +import { HR } from "flowbite-react"; + +function Component() { + return ( + <> +

+ 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. +

+ +

+ 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. +

+ + ); +} +`; + +const codeRSC = ` +import { HRText } from "flowbite-react"; + +function Component() { + return ( + <> +

+ 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. +

+ +

+ 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. +

+ + ); +} +`; + +function Component() { + return ( + <> +

+ 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. +

+ +

+ 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. +

+ + ); +} + +export const text: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "/hr/hr.text.tsx", + component: , +}; diff --git a/apps/web/examples/hr/hr.trimmed.tsx b/apps/web/examples/hr/hr.trimmed.tsx new file mode 100644 index 000000000..0881bbeb1 --- /dev/null +++ b/apps/web/examples/hr/hr.trimmed.tsx @@ -0,0 +1,82 @@ +import { HRTrimmed } from "flowbite-react"; +import type { CodeData } from "~/components/code-demo"; + +const code = ` +import { HR } from "flowbite-react"; + +function Component() { + return ( + <> +

+ 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. +

+ +

+ 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. +

+ + ); +} +`; + +const codeRSC = ` +import { HRTrimmed } from "flowbite-react"; + +function Component() { + return ( + <> +

+ 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. +

+ +

+ 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. +

+ + ); +} +`; + +function Component() { + return ( + <> +

+ 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. +

+ +

+ 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. +

+ + ); +} + +export const trimmed: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "/hr/hr.trimmed.tsx", + component: , +}; diff --git a/apps/web/examples/hr/index.ts b/apps/web/examples/hr/index.ts new file mode 100644 index 000000000..c7d475779 --- /dev/null +++ b/apps/web/examples/hr/index.ts @@ -0,0 +1,5 @@ +export { icon } from "./hr.icon"; +export { root } from "./hr.root"; +export { square } from "./hr.square"; +export { text } from "./hr.text"; +export { trimmed } from "./hr.trimmed"; diff --git a/apps/web/examples/index.ts b/apps/web/examples/index.ts index 8491bc69b..8f6357110 100644 --- a/apps/web/examples/index.ts +++ b/apps/web/examples/index.ts @@ -17,6 +17,7 @@ export * as fileInput from "./fileInput"; export * as floatingLabel from "./floatingLabel"; export * as footer from "./footer"; export * as forms from "./forms"; +export * as hr from "./hr"; export * as kbd from "./kbd"; export * as list from "./list"; export * as listGroup from "./listGroup"; diff --git a/packages/ui/src/components/Flowbite/FlowbiteTheme.ts b/packages/ui/src/components/Flowbite/FlowbiteTheme.ts index 8489755ce..bbcb714a4 100644 --- a/packages/ui/src/components/Flowbite/FlowbiteTheme.ts +++ b/packages/ui/src/components/Flowbite/FlowbiteTheme.ts @@ -18,6 +18,7 @@ import type { FlowbiteFileInputTheme } from "../FileInput"; import type { FlowbiteFloatingLabelTheme } from "../FloatingLabel"; import type { FlowbiteFooterTheme } from "../Footer"; import type { FlowbiteHelperTextTheme } from "../HelperText"; +import type { FlowbiteHRTheme } from "../HR/HR"; import type { FlowbiteKbdTheme } from "../Kbd"; import type { FlowbiteLabelTheme } from "../Label"; import type { FlowbiteListTheme } from "../List"; @@ -66,6 +67,7 @@ export interface FlowbiteTheme { floatingLabel: FlowbiteFloatingLabelTheme; footer: FlowbiteFooterTheme; helperText: FlowbiteHelperTextTheme; + hr: FlowbiteHRTheme; kbd: FlowbiteKbdTheme; label: FlowbiteLabelTheme; list: FlowbiteListTheme; diff --git a/packages/ui/src/components/HR/HR.spec.tsx b/packages/ui/src/components/HR/HR.spec.tsx new file mode 100644 index 000000000..c05bfd02d --- /dev/null +++ b/packages/ui/src/components/HR/HR.spec.tsx @@ -0,0 +1,43 @@ +import { render } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; +import { HR } from "./HR"; + +describe.concurrent("Components / HR", () => { + it("should have data-testid='flowbite-hr' in the document", () => { + const defaultHRTestId = render(
).getByTestId("flowbite-hr"); + + expect(defaultHRTestId).toBeInTheDocument(); + }); + + it("should have data-testid='flowbite-hr-icon' in the document", () => { + const iconHRTestId = render().getByTestId("flowbite-hr-icon"); + + expect(iconHRTestId).toBeInTheDocument(); + }); + + it("should have data-testid='flowbite-hr-square' in the document", () => { + const squareHRTestId = render().getByTestId("flowbite-hr-square"); + + expect(squareHRTestId).toBeInTheDocument(); + }); + + it("should have data-testid='flowbite-hr-text' in the document", () => { + const textHRTestId = render().getByTestId("flowbite-hr-text"); + + expect(textHRTestId).toBeInTheDocument(); + }); + + it("should have 'role=separator' in the document", () => { + const separatorTextHRTestId = render().getAllByRole("separator"); + + separatorTextHRTestId.forEach((separator) => { + expect(separator).toBeInTheDocument(); + }); + }); + + it("should have data-testid='flowbite-hr-trimmed' in the document", () => { + const getByDisplayValueHRTestId = render().getByTestId("flowbite-hr-trimmed"); + + expect(getByDisplayValueHRTestId).toBeInTheDocument(); + }); +}); diff --git a/packages/ui/src/components/HR/HR.stories.tsx b/packages/ui/src/components/HR/HR.stories.tsx new file mode 100644 index 000000000..4ff5aef40 --- /dev/null +++ b/packages/ui/src/components/HR/HR.stories.tsx @@ -0,0 +1,43 @@ +import type { Meta, StoryFn } from "@storybook/react"; +import type { HRProps } from "./HR"; +import { HR } from "./HR"; +import { HRIcon } from "./HRIcon"; +import type { HRIconProps } from "./HRIcon"; +import type { HRSquareProps } from "./HRSquare"; +import { HRSquare } from "./HRSquare"; +import { HRText } from "./HRText"; +import type { HRTextProps } from "./HRText"; +import type { HRTrimmedProps } from "./HRTrimmed"; +import { HRTrimmed } from "./HRTrimmed"; + +export default { + title: "Components/HR", + component: HR, +} as Meta; + +const Template: StoryFn = (args) =>
; + +export const DefaultHR = Template.bind({}); +DefaultHR.args = {}; + +const TrimmedTemplate: StoryFn = (args) => ; + +export const TrimmedHR = TrimmedTemplate.bind({}); +TrimmedHR.args = {}; + +const IconTemplate: StoryFn = (args) => ; + +export const IconHR = IconTemplate.bind({}); +IconHR.args = {}; + +const TextTemplate: StoryFn = (args) => ; + +export const TextHR = TextTemplate.bind({}); +TextHR.args = { + text: "or", +}; + +const SquareTemplate: StoryFn = (args) => ; + +export const SquareHR = SquareTemplate.bind({}); +SquareHR.args = {}; diff --git a/packages/ui/src/components/HR/HR.tsx b/packages/ui/src/components/HR/HR.tsx new file mode 100644 index 000000000..baf1935d4 --- /dev/null +++ b/packages/ui/src/components/HR/HR.tsx @@ -0,0 +1,49 @@ +import { forwardRef } from "react"; +import type { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; +import { HRIcon } from "./HRIcon"; +import type { FlowbiteHRIconTheme } from "./HRIcon"; +import type { FlowbiteHRSquareTheme } from "./HRSquare"; +import { HRSquare } from "./HRSquare"; +import { HRText } from "./HRText"; +import type { FlowbiteHRTextTheme } from "./HRText"; +import { HRTrimmed } from "./HRTrimmed"; +import type { FlowbiteHRTrimmedTheme } from "./HRTrimmed"; + +export interface FlowbiteHRTheme { + root: { + base: string; + }; + trimmed: FlowbiteHRTrimmedTheme; + icon: FlowbiteHRIconTheme; + text: FlowbiteHRTextTheme; + square: FlowbiteHRSquareTheme; +} + +export interface HRProps extends Omit, "ref"> { + theme?: DeepPartial; +} + +const HRComponent = forwardRef(({ theme: customTheme = {}, className, ...props }, ref) => { + const theme = mergeDeep(getTheme().hr.root, customTheme); + + return ( +
+ ); +}); + +HRComponent.displayName = "HR"; +HRTrimmed.displayName = "HR.Trimmed"; +HRIcon.displayName = "HR.Icon"; +HRText.displayName = "HR.Text"; +HRSquare.displayName = "HR.Square"; + +export const HR = Object.assign(HRComponent, { + Trimmed: HRTrimmed, + Icon: HRIcon, + Text: HRText, + Square: HRSquare, +}); diff --git a/packages/ui/src/components/HR/HRIcon.tsx b/packages/ui/src/components/HR/HRIcon.tsx new file mode 100644 index 000000000..00007fcf6 --- /dev/null +++ b/packages/ui/src/components/HR/HRIcon.tsx @@ -0,0 +1,42 @@ +import type { ComponentProps, FC } from "react"; +import { forwardRef } from "react"; +import { FaQuoteRight } from "react-icons/fa6"; +import { twMerge } from "tailwind-merge"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; + +export interface FlowbiteHRIconTheme { + base: string; + hrLine: string; + icon: { + base: string; + icon: string; + }; +} + +export interface HRIconProps extends Omit, "ref"> { + theme?: DeepPartial; + icon?: FC>; +} + +export const HRIcon = forwardRef( + ({ theme: customTheme = {}, icon: Icon = FaQuoteRight, className, ...props }, ref) => { + const theme = mergeDeep(getTheme().hr.icon, customTheme); + + return ( +
+
+
+ +
+
+ ); + }, +); diff --git a/packages/ui/src/components/HR/HRSquare.tsx b/packages/ui/src/components/HR/HRSquare.tsx new file mode 100644 index 000000000..724ac3f4f --- /dev/null +++ b/packages/ui/src/components/HR/HRSquare.tsx @@ -0,0 +1,30 @@ +import { forwardRef } from "react"; +import type { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; + +export interface FlowbiteHRSquareTheme { + base: string; +} + +export interface HRSquareProps extends Omit, "ref"> { + theme?: DeepPartial; +} + +export const HRSquare = forwardRef( + ({ theme: customTheme = {}, className, ...props }, ref) => { + const theme = mergeDeep(getTheme().hr.square, customTheme); + + return ( +
+ ); + }, +); diff --git a/packages/ui/src/components/HR/HRText.tsx b/packages/ui/src/components/HR/HRText.tsx new file mode 100644 index 000000000..83dac7136 --- /dev/null +++ b/packages/ui/src/components/HR/HRText.tsx @@ -0,0 +1,36 @@ +import { forwardRef } from "react"; +import type { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; + +export interface FlowbiteHRTextTheme { + base: string; + hrLine: string; + text: string; +} + +export interface HRTextProps extends Omit, "ref"> { + text: string; + theme?: DeepPartial; +} + +export const HRText = forwardRef( + ({ theme: customTheme = {}, text, className, ...props }, ref) => { + const theme = mergeDeep(getTheme().hr.text, customTheme); + + return ( +
+
+ {text} +
+ ); + }, +); diff --git a/packages/ui/src/components/HR/HRTrimmed.tsx b/packages/ui/src/components/HR/HRTrimmed.tsx new file mode 100644 index 000000000..6014615f3 --- /dev/null +++ b/packages/ui/src/components/HR/HRTrimmed.tsx @@ -0,0 +1,30 @@ +import { forwardRef } from "react"; +import type { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; + +export interface FlowbiteHRTrimmedTheme { + base: string; +} + +export interface HRTrimmedProps extends Omit, "ref"> { + theme?: DeepPartial; +} + +export const HRTrimmed = forwardRef( + ({ theme: customTheme = {}, className, ...props }, ref) => { + const theme = mergeDeep(getTheme().hr.trimmed, customTheme); + + return ( +
+ ); + }, +); diff --git a/packages/ui/src/components/HR/index.ts b/packages/ui/src/components/HR/index.ts new file mode 100644 index 000000000..66138ee8e --- /dev/null +++ b/packages/ui/src/components/HR/index.ts @@ -0,0 +1,14 @@ +export { HR } from "./HR"; +export type { FlowbiteHRTheme, HRProps } from "./HR"; + +export { HRIcon } from "./HRIcon"; +export type { FlowbiteHRIconTheme, HRIconProps } from "./HRIcon"; + +export { HRSquare } from "./HRSquare"; +export type { FlowbiteHRSquareTheme, HRSquareProps } from "./HRSquare"; + +export { HRText } from "./HRText"; +export type { FlowbiteHRTextTheme, HRTextProps } from "./HRText"; + +export { HRTrimmed } from "./HRTrimmed"; +export type { FlowbiteHRTrimmedTheme, HRTrimmedProps } from "./HRTrimmed"; diff --git a/packages/ui/src/components/HR/theme.ts b/packages/ui/src/components/HR/theme.ts new file mode 100644 index 000000000..9f2979935 --- /dev/null +++ b/packages/ui/src/components/HR/theme.ts @@ -0,0 +1,27 @@ +import { createTheme } from "../../helpers/create-theme"; +import type { FlowbiteHRTheme } from "./HR"; + +export const hrTheme: FlowbiteHRTheme = createTheme({ + root: { + base: "my-8 h-px border-0 bg-gray-200 dark:bg-gray-700", + }, + trimmed: { + base: "mx-auto my-4 h-1 w-48 rounded border-0 bg-gray-100 dark:bg-gray-700 md:my-10", + }, + icon: { + base: "inline-flex w-full items-center justify-center", + hrLine: "my-8 h-1 w-64 rounded border-0 bg-gray-200 dark:bg-gray-700", + icon: { + base: "absolute left-1/2 -translate-x-1/2 bg-white px-4 dark:bg-gray-900", + icon: "h-4 w-4 text-gray-700 dark:text-gray-300", + }, + }, + text: { + base: "inline-flex w-full items-center justify-center", + hrLine: "my-8 h-px w-64 border-0 bg-gray-200 dark:bg-gray-700", + text: "absolute left-1/2 -translate-x-1/2 bg-white px-3 font-medium text-gray-900 dark:bg-gray-900 dark:text-white", + }, + square: { + base: "mx-auto my-8 h-8 w-8 rounded border-0 bg-gray-200 dark:bg-gray-700 md:my-12", + }, +}); diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index f3a0ec786..96cf95a5f 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -20,6 +20,7 @@ export * from "./components/FloatingLabel"; export * from "./components/Flowbite"; export * from "./components/Footer"; export * from "./components/HelperText"; +export * from "./components/HR"; export * from "./components/Kbd"; export * from "./components/Label"; export * from "./components/List"; diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts index 1697b4b94..e4027d669 100644 --- a/packages/ui/src/theme.ts +++ b/packages/ui/src/theme.ts @@ -18,6 +18,7 @@ import { fileInputTheme } from "./components/FileInput/theme"; import { floatingLabelTheme } from "./components/FloatingLabel/theme"; import { footerTheme } from "./components/Footer/theme"; import { helperTextTheme } from "./components/HelperText/theme"; +import { hrTheme } from "./components/HR/theme"; import { kbdTheme } from "./components/Kbd/theme"; import { labelTheme } from "./components/Label/theme"; import { listTheme } from "./components/List/theme"; @@ -64,6 +65,7 @@ export const theme: FlowbiteTheme = { floatingLabel: floatingLabelTheme, footer: footerTheme, helperText: helperTextTheme, + hr: hrTheme, kbd: kbdTheme, label: labelTheme, listGroup: listGroupTheme,