@tolle_/tolle-ui 21.1.2 → 21.2.0

package/registry/r/typography.json

@@ -0,0 +1,23 @@
+{
+  "name": "typography",
+  "type": "registry:ui",
+  "title": "Typography",
+  "description": "Typography component with variant options.",
+  "category": "layout",
+  "registryDependencies": [],
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "files": [
+    {
+      "path": "typography.component.ts",
+      "target": "ui/typography.component.ts",
+      "content": "import {\n  Component,\n  Input,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  OnChanges,\n  inject,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from './utils/cn';\n\nconst typographyVariants = cva('', {\n  variants: {\n    variant: {\n      h1: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl',\n      h2: 'scroll-m-20 border-b border-border pb-2 text-3xl font-semibold tracking-tight first:mt-0',\n      h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',\n      h4: 'scroll-m-20 text-xl font-semibold tracking-tight',\n      p: 'leading-7 [&:not(:first-child)]:mt-6',\n      blockquote: 'mt-6 border-l-2 border-border pl-6 italic',\n      lead: 'text-xl text-muted-foreground',\n      large: 'text-lg font-semibold',\n      small: 'text-sm font-medium leading-none',\n      muted: 'text-sm text-muted-foreground',\n      code: 'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold',\n    },\n  },\n  defaultVariants: { variant: 'p' },\n});\n\nexport type TypographyProps = VariantProps<typeof typographyVariants>;\n\n/**\n * Applies the theme's type scale to projected content. Renders the semantically\n * correct host tag for the chosen `variant` (`h1`–`h4`, `blockquote`, `code`,\n * otherwise `p`), so headings stay real headings for assistive tech.\n * @new\n */\n@Component({\n  selector: 'tolle-typography',\n  styles: [':host { display: block; }'],\n  imports: [CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  // `<ng-content>` may only appear once — a duplicated slot per branch would leave\n  // every branch but the first empty. Project once into a template and stamp that\n  // template into whichever tag the variant selects.\n  template: `\n    <ng-template #body><ng-content></ng-content></ng-template>\n\n    @if (variant === 'h1') {\n      <h1 [class]=\"computedClass\"><ng-container *ngTemplateOutlet=\"body\"></ng-container></h1>\n    }\n    @if (variant === 'h2') {\n      <h2 [class]=\"computedClass\"><ng-container *ngTemplateOutlet=\"body\"></ng-container></h2>\n    }\n    @if (variant === 'h3') {\n      <h3 [class]=\"computedClass\"><ng-container *ngTemplateOutlet=\"body\"></ng-container></h3>\n    }\n    @if (variant === 'h4') {\n      <h4 [class]=\"computedClass\"><ng-container *ngTemplateOutlet=\"body\"></ng-container></h4>\n    }\n    @if (variant === 'blockquote') {\n      <blockquote [class]=\"computedClass\">\n        <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n      </blockquote>\n    }\n    @if (variant === 'code') {\n      <code [class]=\"computedClass\"><ng-container *ngTemplateOutlet=\"body\"></ng-container></code>\n    }\n    @if (isParagraph) {\n      <p [class]=\"computedClass\"><ng-container *ngTemplateOutlet=\"body\"></ng-container></p>\n    }\n  `,\n})\nexport class TypographyComponent implements OnChanges {\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  /**\n   * Angular writes a bound `class` input through its styling path, which does\n   * not mark an OnPush component dirty — without this hook the component keeps\n   * rendering the class it was born with.\n   */\n  ngOnChanges(): void {\n    this.cdr.markForCheck();\n  }\n\n  /** Type scale step; also selects the rendered HTML tag. @default 'p' */\n  @Input() variant: TypographyProps['variant'] = 'p';\n  /** Extra Tailwind classes merged onto the element via `cn()` (last-wins). */\n  @Input() class = '';\n\n  /** True for the variants that have no dedicated tag and render as `<p>`. */\n  get isParagraph() {\n    return !['h1', 'h2', 'h3', 'h4', 'blockquote', 'code'].includes(this.variant ?? 'p');\n  }\n\n  get computedClass() {\n    return cn(typographyVariants({ variant: this.variant }), this.class);\n  }\n}\n"
+    },
+    {
+      "path": "utils/cn.ts",
+      "target": "ui/utils/cn.ts",
+      "content": "import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
+    }
+  ]
+}