feat: add typography components

apps/www/src/content/docs/docs/components/typography.mdx

@@ -10,3 +10,51 @@ sidebar:
 ## h1
 
 <ComponentPreview name="typography-h1" />
+
+## h2
+
+<ComponentPreview name="typography-h2" />
+
+## h3
+
+<ComponentPreview name="typography-h3" />
+
+## h4
+
+<ComponentPreview name="typography-h4" />
+
+## p
+
+<ComponentPreview name="typography-p" />
+
+## blockquote
+
+<ComponentPreview name="typography-blockquote" />
+
+## table
+
+<ComponentPreview name="typography-table" />
+
+## list
+
+<ComponentPreview name="typography-list" />
+
+## Inline code
+
+<ComponentPreview name="typography-inline-code" />
+
+## Lead
+
+<ComponentPreview name="typography-lead" />
+
+## Large
+
+<ComponentPreview name="typography-large" />
+
+## Small
+
+<ComponentPreview name="typography-small" />
+
+## Muted
+
+<ComponentPreview name="typography-muted" />

apps/www/src/registry/default/example/typography-blockquote.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <blockquote class="mt-6 border-l-2 pl-6 italic">
+      "After all," he said, "everyone enjoys a good joke, so it's only fair that
+      they should pay for the privilege."
+    </blockquote>
+  `,
+})
+export class TypographyBlockquoteComponent {}
+
+export default TypographyBlockquoteComponent;

apps/www/src/registry/default/example/typography-h2.ts

@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <h2
+      class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0"
+    >
+      The People of the Kingdom
+    </h2>
+  `,
+})
+export class TypographyH2Component {}
+
+export default TypographyH2Component;

apps/www/src/registry/default/example/typography-h3.ts

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
+      The Joke Tax
+    </h3>
+  `,
+})
+export class TypographyH3Component {}
+
+export default TypographyH3Component;

apps/www/src/registry/default/example/typography-h4.ts

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
+      People stopped telling jokes
+    </h4>
+  `,
+})
+export class TypographyH4Component {}
+
+export default TypographyH4Component;

apps/www/src/registry/default/example/typography-inline-code.ts

@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <code
+      class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
+    >
+      {{ "@" }}radix-ui/react-alert-dialog
+    </code>
+  `,
+})
+export class TypographyInlineCodeComponent {}
+
+export default TypographyInlineCodeComponent;

apps/www/src/registry/default/example/typography-large.ts

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <div class="text-lg font-semibold">Are you absolutely sure?</div>
+  `,
+})
+export class TypographyLargeComponent {}
+
+export default TypographyLargeComponent;

apps/www/src/registry/default/example/typography-lead.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <p class="text-xl text-muted-foreground">
+      A modal dialog that interrupts the user with important content and expects
+      a response.
+    </p>
+  `,
+})
+export class TypographyLeadComponent {}
+
+export default TypographyLeadComponent;

apps/www/src/registry/default/example/typography-list.ts

@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <ul class="my-6 ml-6 list-disc [&>li]:mt-2">
+      <li>1st level of puns: 5 gold coins</li>
+      <li>2nd level of jokes: 10 gold coins</li>
+      <li>3rd level of one-liners : 20 gold coins</li>
+    </ul>
+  `,
+})
+export class TypographyListComponent {}
+
+export default TypographyListComponent;

apps/www/src/registry/default/example/typography-muted.ts

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <p class="text-sm text-muted-foreground">Enter your email address.</p>
+  `,
+})
+export class TypographyMutedComponent {}
+
+export default TypographyMutedComponent;

apps/www/src/registry/default/example/typography-p.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <p class="leading-7 [&:not(:first-child)]:mt-6">
+      The king, seeing how much happier his subjects were, realized the error of
+      his ways and repealed the joke tax.
+    </p>
+  `,
+})
+export class TypographyPComponent {}
+
+export default TypographyPComponent;

apps/www/src/registry/default/example/typography-small.ts

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <small class="text-sm font-medium leading-none">Email address</small>
+  `,
+})
+export class TypographySmallComponent {}
+
+export default TypographySmallComponent;

apps/www/src/registry/default/example/typography-table.ts

@@ -0,0 +1,66 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <div class="my-6 w-full overflow-y-auto">
+      <table class="w-full">
+        <thead>
+          <tr class="m-0 border-t p-0 even:bg-muted">
+            <th
+              class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              King's Treasury
+            </th>
+            <th
+              class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              People's happiness
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="m-0 border-t p-0 even:bg-muted">
+            <td
+              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              Empty
+            </td>
+            <td
+              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              Overflowing
+            </td>
+          </tr>
+          <tr class="m-0 border-t p-0 even:bg-muted">
+            <td
+              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              Modest
+            </td>
+            <td
+              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              Satisfied
+            </td>
+          </tr>
+          <tr class="m-0 border-t p-0 even:bg-muted">
+            <td
+              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              Full
+            </td>
+            <td
+              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              Ecstatic
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  `,
+})
+export class TypographyTableComponent {}
+
+export default TypographyTableComponent;

apps/www/src/registry/new-york/example/typography-blockquote.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <blockquote class="mt-6 border-l-2 pl-6 italic">
+      "After all," he said, "everyone enjoys a good joke, so it's only fair that
+      they should pay for the privilege."
+    </blockquote>
+  `,
+})
+export class TypographyBlockquoteComponent {}
+
+export default TypographyBlockquoteComponent;

apps/www/src/registry/new-york/example/typography-h2.ts

@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <h2
+      class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0"
+    >
+      The People of the Kingdom
+    </h2>
+  `,
+})
+export class TypographyH2Component {}
+
+export default TypographyH2Component;

apps/www/src/registry/new-york/example/typography-h3.ts

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
+      The Joke Tax
+    </h3>
+  `,
+})
+export class TypographyH3Component {}
+
+export default TypographyH3Component;

apps/www/src/registry/new-york/example/typography-h4.ts

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
+      People stopped telling jokes
+    </h4>
+  `,
+})
+export class TypographyH4Component {}
+
+export default TypographyH4Component;

apps/www/src/registry/new-york/example/typography-inline-code.ts

@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <code
+      class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
+    >
+      {{ "@" }}radix-ui/react-alert-dialog
+    </code>
+  `,
+})
+export class TypographyInlineCodeComponent {}
+
+export default TypographyInlineCodeComponent;

apps/www/src/registry/new-york/example/typography-large.ts

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <div class="text-lg font-semibold">Are you absolutely sure?</div>
+  `,
+})
+export class TypographyLargeComponent {}
+
+export default TypographyLargeComponent;

apps/www/src/registry/new-york/example/typography-lead.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <p class="text-xl text-muted-foreground">
+      A modal dialog that interrupts the user with important content and expects
+      a response.
+    </p>
+  `,
+})
+export class TypographyLeadComponent {}
+
+export default TypographyLeadComponent;

apps/www/src/registry/new-york/example/typography-list.ts

@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  template: `
+    <ul class="my-6 ml-6 list-disc [&>li]:mt-2">
+      <li>1st level of puns: 5 gold coins</li>
+      <li>2nd level of jokes: 10 gold coins</li>
+      <li>3rd level of one-liners : 20 gold coins</li>
+    </ul>
+  `,
+})
+export class TypographyListComponent {}
+
+export default TypographyListComponent;