Add prose component

.eslintrc.js

@@ -57,6 +57,7 @@ module.exports = {
         "react/display-name": "off",
         "react-hooks/exhaustive-deps": "off",
         "jsx-a11y/heading-has-content": "off",
+        "jsx-a11y/anchor-is-valid": "off",
         "jsx-a11y/anchor-has-content": "off",
         "jsx-a11y/control-has-associated-label": "off",
       },

src/typography/Prose/Prose.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Prose } from "./Prose"
+
+type Story = StoryObj<typeof Prose>
+
+// Meta
+export default {
+  title: "Typography/Prose",
+  component: Prose,
+  args: {
+    children: (
+      <>
+        <h1>Heading 1</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo <a href="#">consequat</a>.
+        </p>
+        <h2>Heading 2</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </p>
+        <h3>Heading 3</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </p>
+        <h4>Heading 4</h4>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </p>
+        <ul>
+          <li>Unordered List Item 1</li>
+          <li>Unordered List Item 2</li>
+          <li>Unordered List Item 3</li>
+        </ul>
+      </>
+    ),
+    ...Prose.defaultProps,
+  },
+} satisfies Meta
+
+// Stories
+export const Large = {
+  args: {
+    size: "lg",
+  },
+} satisfies Story
+
+export const Medium = {
+  args: {
+    size: "md",
+  },
+} satisfies Story
+
+export const Small = {
+  args: {
+    size: "sm",
+  },
+} satisfies Story

src/typography/Prose/Prose.tsx

@@ -0,0 +1,32 @@
+import { Slot } from "@radix-ui/react-slot"
+import type { HTMLAttributes } from "react"
+import { forwardRef } from "react"
+
+import { type VariantProps, cx } from "~/shared/cva"
+
+import { proseVariants } from "./Prose.variants"
+
+export type ProseElement = HTMLDivElement
+
+export type ProseProps = Omit<HTMLAttributes<ProseElement>, "size"> &
+  VariantProps<typeof proseVariants> & {
+    /**
+     * If set to `true`, the button will be rendered as a child within the component.
+     * This child component must be a valid React component.
+     */
+    asChild?: boolean
+  }
+
+export const Prose = forwardRef<ProseElement, ProseProps>((props, ref) => {
+  const { className, asChild, size, ...rest } = props
+  const Comp = asChild ? Slot : "div"
+
+  return <Comp className={cx(proseVariants({ size, className }))} ref={ref} {...rest} />
+})
+
+Prose.defaultProps = {
+  size: "md",
+  asChild: false,
+}
+
+Prose.displayName = "Prose"

src/typography/Prose/Prose.variants.ts

@@ -0,0 +1,21 @@
+import { cva } from "~/shared/cva"
+
+export const proseVariants = cva({
+  base: [
+    "text-pretty text-start prose",
+    // Prose Headings
+    "prose-headings:font-medium prose-h1:-tracking-1 prose-h2:-tracking-1",
+  ],
+
+  variants: {
+    size: {
+      sm: "prose-sm",
+      md: "prose-base",
+      lg: "prose-lg",
+    },
+  },
+
+  defaultVariants: {
+    size: "md",
+  },
+})

src/typography/Prose/index.ts

@@ -0,0 +1,2 @@
+export { Prose } from "./Prose"
+export type { ProseProps, ProseElement } from "./Prose"

tailwind.config.js

@@ -108,6 +108,14 @@ module.exports = {
       fontFamily: {
         sans: ["var(--font-sans)", "system-ui", "sans-serif"],
       },
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            "--tw-prose-body": theme("colors.gray[500]"),
+            "--tw-prose-headings": theme("colors.gray[900]"),
+          },
+        },
+      }),
       keyframes: {
         shimmer: {
           from: { left: "-90%" },