@tolle_/tolle-ui 18.3.0 → 18.3.2

package/registry/manifest.json

@@ -1,6 +1,6 @@
 {
   "package": "@tolle_/tolle-ui",
-  "version": "18.3.0",
+  "version": "18.3.2",
   "registry": "r/{name}.json",
   "components": [
     {
@@ -860,6 +860,62 @@
         }
       ]
     },
+    {
+      "name": "bar-list",
+      "title": "Bar List",
+      "description": "Bar List component.",
+      "category": "components",
+      "selector": "tolle-bar-list",
+      "isNew": true,
+      "import": "import { BarListComponent } from '@tolle_/tolle-ui';",
+      "install": "npx @tolle_/cli add bar-list",
+      "registryDependencies": [],
+      "dependencies": [],
+      "files": [
+        "bar-list.component.ts",
+        "utils/cn.ts"
+      ],
+      "components": [
+        {
+          "className": "BarListComponent",
+          "selector": "tolle-bar-list",
+          "kind": "component",
+          "inputs": [
+            {
+              "name": "data",
+              "type": "Record<string, any>[]",
+              "default": "[]",
+              "description": "Rows to rank, in the order they should be drawn.",
+              "required": false
+            },
+            {
+              "name": "labelKey",
+              "type": "string",
+              "default": "'label'",
+              "description": "Row key holding each row's label.",
+              "required": false
+            },
+            {
+              "name": "valueKey",
+              "type": "string",
+              "default": "'value'",
+              "description": "Row key holding each row's numeric value.",
+              "required": false
+            },
+            {
+              "name": "class",
+              "type": "string",
+              "default": "''",
+              "description": "Extra Tailwind classes merged onto the list via `cn()` (last-wins).",
+              "required": false
+            }
+          ],
+          "outputs": [],
+          "slots": [],
+          "variants": []
+        }
+      ]
+    },
     {
       "name": "breadcrumb",
       "title": "Breadcrumb",
@@ -1671,6 +1727,76 @@
         }
       ]
     },
+    {
+      "name": "category-bar",
+      "title": "Category Bar",
+      "description": "Category Bar component.",
+      "category": "components",
+      "selector": "tolle-category-bar",
+      "isNew": true,
+      "import": "import { CategoryBarComponent } from '@tolle_/tolle-ui';",
+      "install": "npx @tolle_/cli add category-bar",
+      "registryDependencies": [],
+      "dependencies": [],
+      "files": [
+        "category-bar.component.ts",
+        "utils/cn.ts"
+      ],
+      "components": [
+        {
+          "className": "CategoryBarComponent",
+          "selector": "tolle-category-bar",
+          "kind": "component",
+          "inputs": [
+            {
+              "name": "values",
+              "type": "number[]",
+              "default": "[]",
+              "description": "Width of each segment. Values that are not finite and greater than zero are dropped.",
+              "required": false
+            },
+            {
+              "name": "labels",
+              "type": "string[]",
+              "default": "[]",
+              "description": "Name for each segment, used in the accessible summary and as a title tooltip.",
+              "required": false
+            },
+            {
+              "name": "colors",
+              "type": "string[]",
+              "default": "[]",
+              "description": "Paint for each segment, by index. Falls back to the chart palette --chart-1 through --chart-5.",
+              "required": false
+            },
+            {
+              "name": "markerValue",
+              "type": "number | null",
+              "default": "null",
+              "description": "Position of the pointer, 0-100 on the same scale the segments sum to. Omit to draw no pointer.",
+              "required": false
+            },
+            {
+              "name": "ariaLabel",
+              "type": "string",
+              "default": "''",
+              "description": "Accessible name, prefixed onto the sr-only summary of segments and marker.",
+              "required": false
+            },
+            {
+              "name": "class",
+              "type": "string",
+              "default": "''",
+              "description": "Extra Tailwind classes merged onto the bar via `cn()` (last-wins).",
+              "required": false
+            }
+          ],
+          "outputs": [],
+          "slots": [],
+          "variants": []
+        }
+      ]
+    },
     {
       "name": "chain-of-thought",
       "title": "Chain Of Thought",
@@ -2094,6 +2220,13 @@
               "description": "Stacks marks on a shared baseline instead of grouping them.",
               "required": false
             },
+            {
+              "name": "orientation",
+              "type": "ChartOrientation",
+              "default": "'vertical'",
+              "description": "Which physical axis carries the category vs the value. Only bars support\n'horizontal' — line/area marks stay vertical regardless.",
+              "required": false
+            },
             {
               "name": "hover",
               "type": "boolean",
@@ -2177,7 +2310,7 @@
               "name": "vertical",
               "type": "boolean",
               "default": "false",
-              "description": "Also draws a rule at every x position.",
+              "description": "Also draws a rule at every category position.",
               "required": false
             },
             {
@@ -2201,7 +2334,7 @@
               "name": "charWidth",
               "type": "number",
               "default": "7",
-              "description": "Approximate px per character, used to decide when labels would collide.",
+              "description": "Approximate px per character, used to decide when category labels would\ncollide. Only consulted in the vertical orientation.",
               "required": false
             },
             {
@@ -2516,6 +2649,130 @@
         }
       ]
     },
+    {
+      "name": "chart-spark",
+      "title": "Chart Spark",
+      "description": "Chart Spark component.",
+      "category": "data",
+      "selector": "tolle-chart-spark",
+      "isNew": true,
+      "import": "import { ChartSparkComponent } from '@tolle_/tolle-ui';",
+      "install": "npx @tolle_/cli add chart-spark",
+      "registryDependencies": [
+        "chart"
+      ],
+      "dependencies": [
+        "class-variance-authority"
+      ],
+      "files": [
+        "chart-spark.component.ts",
+        "chart.service.ts",
+        "utils/cn.ts"
+      ],
+      "components": [
+        {
+          "className": "ChartSparkComponent",
+          "selector": "tolle-chart-spark",
+          "kind": "component",
+          "inputs": [
+            {
+              "name": "data",
+              "type": "Record<string, any>[]",
+              "default": "[]",
+              "description": "Rows to plot, in x order.",
+              "required": false
+            },
+            {
+              "name": "valueKey",
+              "type": "string",
+              "default": "'value'",
+              "description": "Row key holding each row's numeric value.",
+              "required": false
+            },
+            {
+              "name": "xKey",
+              "type": "string",
+              "default": "''",
+              "description": "Row key holding each row's x position. Only matters once `hover` is on.",
+              "required": false
+            },
+            {
+              "name": "type",
+              "type": "'line' | 'area' | 'bar'",
+              "default": "'line'",
+              "description": "Which mark to draw.",
+              "required": false
+            },
+            {
+              "name": "curve",
+              "type": "'linear' | 'smooth'",
+              "default": "'linear'",
+              "description": "Interpolation for line/area.",
+              "required": false
+            },
+            {
+              "name": "maxBarWidth",
+              "type": "number",
+              "default": "6",
+              "description": "Largest bar thickness in px, used when `type` is 'bar'.",
+              "required": false
+            },
+            {
+              "name": "height",
+              "type": "number",
+              "default": "32",
+              "description": "Height in px.",
+              "required": false
+            },
+            {
+              "name": "hover",
+              "type": "boolean",
+              "default": "false",
+              "description": "Renders the crosshair, hit layer and tooltip.",
+              "required": false
+            },
+            {
+              "name": "showTable",
+              "type": "boolean",
+              "default": "false",
+              "description": "Shows the data table instead of leaving it visually hidden.",
+              "required": false
+            },
+            {
+              "name": "ariaLabel",
+              "type": "string",
+              "default": "''",
+              "description": "Accessible name, used as the svg <title>.",
+              "required": false
+            },
+            {
+              "name": "description",
+              "type": "string",
+              "default": "''",
+              "description": "Longer summary used as the svg <desc>. Falls back to `ariaLabel`.",
+              "required": false
+            },
+            {
+              "name": "margin",
+              "type": "ChartMargin",
+              "default": "{ top: 2, right: 2, bottom: 2, left: 2 }",
+              "description": "Space reserved around the plot — a sparkline has no axis labels to fit.",
+              "required": false
+            },
+            {
+              "name": "class",
+              "type": "string",
+              "default": "''",
+              "description": "Extra Tailwind classes merged onto the chart via `cn()` (last-wins).",
+              "required": false
+            }
+          ],
+          "outputs": [],
+          "slots": [],
+          "variants": []
+        }
+      ]
+    },
     {
       "name": "checkbox",
       "title": "Checkbox",
@@ -8501,6 +8758,66 @@
         }
       ]
     },
+    {
+      "name": "progress-circle",
+      "title": "Progress Circle",
+      "description": "Progress Circle component.",
+      "category": "feedback",
+      "selector": "tolle-progress-circle",
+      "isNew": true,
+      "import": "import { ProgressCircleComponent } from '@tolle_/tolle-ui';",
+      "install": "npx @tolle_/cli add progress-circle",
+      "registryDependencies": [],
+      "dependencies": [],
+      "files": [
+        "progress-circle.component.ts",
+        "utils/cn.ts"
+      ],
+      "components": [
+        {
+          "className": "ProgressCircleComponent",
+          "selector": "tolle-progress-circle",
+          "kind": "component",
+          "inputs": [
+            {
+              "name": "value",
+              "type": "number | null",
+              "default": "0",
+              "description": "Percent complete, 0-100.",
+              "required": false
+            },
+            {
+              "name": "size",
+              "type": "number",
+              "default": "120",
+              "description": "Diameter of the ring in px.",
+              "required": false
+            },
+            {
+              "name": "strokeWidth",
+              "type": "number",
+              "default": "8",
+              "description": "Thickness of the ring in px.",
+              "required": false
+            },
+            {
+              "name": "class",
+              "type": "string",
+              "default": "''",
+              "description": "Extra Tailwind classes merged onto the ring via `cn()` (last-wins).",
+              "required": false
+            }
+          ],
+          "outputs": [],
+          "slots": [
+            {
+              "name": ""
+            }
+          ],
+          "variants": []
+        }
+      ]
+    },
     {
       "name": "prompt-input",
       "title": "Prompt Input",
@@ -12209,6 +12526,66 @@
         }
       ]
     },
+    {
+      "name": "tracker",
+      "title": "Tracker",
+      "description": "Tracker component.",
+      "category": "components",
+      "selector": "tolle-tracker",
+      "isNew": true,
+      "import": "import { TrackerComponent } from '@tolle_/tolle-ui';",
+      "install": "npx @tolle_/cli add tracker",
+      "registryDependencies": [
+        "tooltip"
+      ],
+      "dependencies": [
+        "@floating-ui/dom"
+      ],
+      "files": [
+        "tracker.component.ts",
+        "utils/cn.ts"
+      ],
+      "components": [
+        {
+          "className": "TrackerComponent",
+          "selector": "tolle-tracker",
+          "kind": "component",
+          "inputs": [
+            {
+              "name": "data",
+              "type": "TrackerBlock[]",
+              "default": "[]",
+              "description": "One block per period, in chronological order.",
+              "required": false
+            },
+            {
+              "name": "blockHeight",
+              "type": "number",
+              "default": "32",
+              "description": "Height of each block in px.",
+              "required": false
+            },
+            {
+              "name": "ariaLabel",
+              "type": "string",
+              "default": "''",
+              "description": "Accessible name for the whole strip.",
+              "required": false
+            },
+            {
+              "name": "class",
+              "type": "string",
+              "default": "''",
+              "description": "Extra Tailwind classes merged onto the strip via `cn()` (last-wins).",
+              "required": false
+            }
+          ],
+          "outputs": [],
+          "slots": [],
+          "variants": []
+        }
+      ]
+    },
     {
       "name": "typography",
       "title": "Typography",

package/registry/r/alert-dialog-dynamic.json

@@ -15,12 +15,12 @@
     {
       "path": "alert-dialog-dynamic.component.ts",
       "target": "ui/alert-dialog-dynamic.component.ts",
-      "content": "import { Component, Inject, inject, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {\n  AlertDialogComponent,\n  AlertDialogContentComponent,\n  AlertDialogHeaderComponent,\n  AlertDialogTitleComponent,\n  AlertDialogDescriptionComponent,\n  AlertDialogFooterComponent,\n  AlertDialogCancelComponent,\n  AlertDialogActionComponent\n} from './alert-dialog.component';\nimport { ButtonComponent } from './button.component';\nimport { AlertDialogConfig, AlertDialogRef } from './alert-dialog.types';\n\n@Component({\n  selector: 'tolle-alert-dialog-dynamic',\n  styles: [':host { display: block; }'],\n  standalone: true,\n  imports: [\n    CommonModule,\n    AlertDialogComponent,\n    AlertDialogContentComponent,\n    AlertDialogHeaderComponent,\n    AlertDialogTitleComponent,\n    AlertDialogDescriptionComponent,\n    AlertDialogFooterComponent,\n    AlertDialogCancelComponent,\n    AlertDialogActionComponent,\n    ButtonComponent\n  ],\n  template: `\n    <tolle-alert-dialog [open]=\"!closing\" (openChange)=\"onOpenChange($event)\">\n        <tolle-alert-dialog-content [size]=\"config.size || 'lg'\">\n          <tolle-alert-dialog-header>\n            <tolle-alert-dialog-title>{{ config.title }}</tolle-alert-dialog-title>\n            <tolle-alert-dialog-description>\n              {{ config.description }}\n            </tolle-alert-dialog-description>\n          </tolle-alert-dialog-header>\n          <tolle-alert-dialog-footer>\n            <tolle-alert-dialog-cancel (click)=\"close(false)\">\n              <tolle-button variant=\"outline\">{{ config.cancelText || 'Cancel' }}</tolle-button>\n            </tolle-alert-dialog-cancel>\n            <tolle-alert-dialog-action (click)=\"close(true)\">\n              <tolle-button [variant]=\"config.variant === 'destructive' ? 'destructive' : 'default'\">\n                {{ config.actionText || 'Continue' }}\n              </tolle-button>\n            </tolle-alert-dialog-action>\n          </tolle-alert-dialog-footer>\n        </tolle-alert-dialog-content>\n    </tolle-alert-dialog>\n  `\n})\nexport class AlertDialogDynamicComponent {\n  config!: AlertDialogConfig;\n  dialogRef!: AlertDialogRef;\n\n  /**\n   * Set by `AlertDialogService` once the dialog's result is ready, so the\n   * content panel plays its exit animation before the overlay is torn down.\n   */\n  closing = false;\n\n  onOpenChange(open: boolean) {\n    if (!open) {\n      this.close(false);\n    }\n  }\n\n  close(result: boolean) {\n    this.dialogRef.close(result);\n  }\n}\n"
+      "content": "import { Component, Inject, inject, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {\n  AlertDialogComponent,\n  AlertDialogContentComponent,\n  AlertDialogHeaderComponent,\n  AlertDialogTitleComponent,\n  AlertDialogDescriptionComponent,\n  AlertDialogFooterComponent,\n  AlertDialogCancelComponent,\n  AlertDialogActionComponent\n} from './alert-dialog.component';\nimport { ButtonComponent } from './button.component';\nimport { AlertDialogConfig, AlertDialogRef } from './alert-dialog.types';\n\n@Component({\n  selector: 'tolle-alert-dialog-dynamic',\n  styles: [':host { display: block; }'],\n  standalone: true,\n  imports: [\n    CommonModule,\n    AlertDialogComponent,\n    AlertDialogContentComponent,\n    AlertDialogHeaderComponent,\n    AlertDialogTitleComponent,\n    AlertDialogDescriptionComponent,\n    AlertDialogFooterComponent,\n    AlertDialogCancelComponent,\n    AlertDialogActionComponent,\n    ButtonComponent\n  ],\n  template: `\n    <tolle-alert-dialog [open]=\"!closing\" (openChange)=\"onOpenChange($event)\">\n        <tolle-alert-dialog-content [size]=\"config.size || 'lg'\">\n          <tolle-alert-dialog-header>\n            <tolle-alert-dialog-title>{{ config.title }}</tolle-alert-dialog-title>\n            <tolle-alert-dialog-description>\n              {{ config.description }}\n            </tolle-alert-dialog-description>\n          </tolle-alert-dialog-header>\n          <tolle-alert-dialog-footer>\n            <tolle-alert-dialog-cancel (cancelled)=\"result = false\">\n              <tolle-button variant=\"outline\">{{ config.cancelText || 'Cancel' }}</tolle-button>\n            </tolle-alert-dialog-cancel>\n            <tolle-alert-dialog-action (confirmed)=\"result = true\">\n              <tolle-button [variant]=\"config.variant === 'destructive' ? 'destructive' : 'default'\">\n                {{ config.actionText || 'Continue' }}\n              </tolle-button>\n            </tolle-alert-dialog-action>\n          </tolle-alert-dialog-footer>\n        </tolle-alert-dialog-content>\n    </tolle-alert-dialog>\n  `\n})\nexport class AlertDialogDynamicComponent {\n  config!: AlertDialogConfig;\n  dialogRef!: AlertDialogRef;\n\n  /**\n   * Set by `AlertDialogService` once the dialog's result is ready, so the\n   * content panel plays its exit animation before the overlay is torn down.\n   */\n  closing = false;\n\n  /**\n   * Result recorded by the action/cancel buttons' `confirmed`/`cancelled`\n   * outputs, which fire *before* the button drives the dialog closed. The\n   * single close path (`onOpenChange`) then reads it, so a confirm reports\n   * `true` instead of racing with the button's own `false` close signal.\n   */\n  result = false;\n\n  onOpenChange(open: boolean) {\n    if (!open) {\n      this.dialogRef.close(this.result);\n    }\n  }\n}\n"
     },
     {
       "path": "alert-dialog.types.ts",
       "target": "ui/alert-dialog.types.ts",
-      "content": "import { Subject, Observable } from 'rxjs';\n\nexport type AlertDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'fit';\n\nexport interface AlertDialogConfig {\n    title: string;\n    description: string;\n    cancelText?: string;\n    actionText?: string;\n    variant?: 'default' | 'destructive';\n    size?: AlertDialogSize;\n}\n\nexport class AlertDialogRef {\n    private readonly _afterClosed = new Subject<boolean>();\n    afterClosed$: Observable<boolean> = this._afterClosed.asObservable();\n\n    close(result: boolean = false): void {\n        this._afterClosed.next(result);\n        this._afterClosed.complete();\n    }\n}\n"
+      "content": "import { Subject, Observable } from 'rxjs';\n\nexport type AlertDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'fit';\n\nexport interface AlertDialogConfig {\n    title: string;\n    description: string;\n    cancelText?: string;\n    actionText?: string;\n    variant?: 'default' | 'destructive';\n    size?: AlertDialogSize;\n}\n\nexport class AlertDialogRef {\n    private readonly _afterClosed = new Subject<boolean>();\n    afterClosed$: Observable<boolean> = this._afterClosed.asObservable();\n\n    /** Guards against the dialog's several close paths racing to emit twice. */\n    private closed = false;\n\n    close(result: boolean = false): void {\n        if (this.closed) return;\n        this.closed = true;\n        this._afterClosed.next(result);\n        this._afterClosed.complete();\n    }\n}\n"
     },
     {
       "path": "utils/cn.ts",

package/registry/r/alert-dialog.json

@@ -15,7 +15,7 @@
     {
       "path": "alert-dialog.types.ts",
       "target": "ui/alert-dialog.types.ts",
-      "content": "import { Subject, Observable } from 'rxjs';\n\nexport type AlertDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'fit';\n\nexport interface AlertDialogConfig {\n    title: string;\n    description: string;\n    cancelText?: string;\n    actionText?: string;\n    variant?: 'default' | 'destructive';\n    size?: AlertDialogSize;\n}\n\nexport class AlertDialogRef {\n    private readonly _afterClosed = new Subject<boolean>();\n    afterClosed$: Observable<boolean> = this._afterClosed.asObservable();\n\n    close(result: boolean = false): void {\n        this._afterClosed.next(result);\n        this._afterClosed.complete();\n    }\n}\n"
+      "content": "import { Subject, Observable } from 'rxjs';\n\nexport type AlertDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'fit';\n\nexport interface AlertDialogConfig {\n    title: string;\n    description: string;\n    cancelText?: string;\n    actionText?: string;\n    variant?: 'default' | 'destructive';\n    size?: AlertDialogSize;\n}\n\nexport class AlertDialogRef {\n    private readonly _afterClosed = new Subject<boolean>();\n    afterClosed$: Observable<boolean> = this._afterClosed.asObservable();\n\n    /** Guards against the dialog's several close paths racing to emit twice. */\n    private closed = false;\n\n    close(result: boolean = false): void {\n        if (this.closed) return;\n        this.closed = true;\n        this._afterClosed.next(result);\n        this._afterClosed.complete();\n    }\n}\n"
     },
     {
       "path": "utils/cn.ts",

package/registry/r/bar-list.json

@@ -0,0 +1,21 @@
+{
+  "name": "bar-list",
+  "type": "registry:ui",
+  "title": "Bar List",
+  "description": "Bar List component.",
+  "category": "components",
+  "registryDependencies": [],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "bar-list.component.ts",
+      "target": "ui/bar-list.component.ts",
+      "content": "import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, OnChanges, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { cn } from './utils/cn';\n\n/** One resolved row: its label, its value, and its share of the list's largest value. */\nexport interface BarListRow {\n  label: string;\n  value: number;\n  percent: number;\n  formattedValue: string;\n}\n\n/**\n * A ranked list of horizontal bars — label left, value right, bar width\n * scaled to each row's share of the list's largest value. Unlike a chart\n * series or a category bar's segments, every bar is the same accent: rank is\n * carried by length, not by a categorical palette.\n * @new\n */\n@Component({\n  selector: 'tolle-bar-list',\n  styles: [':host { display: block; }'],\n  standalone: true,\n  imports: [CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div [class]=\"computedClass\">\n      <div\n        *ngFor=\"let row of rows; trackBy: trackByIndex\"\n        class=\"relative flex items-center overflow-hidden rounded-sm\"\n      >\n        <div class=\"absolute inset-y-0 left-0 rounded-sm bg-primary/15\" [style.width.%]=\"row.percent\"></div>\n        <span class=\"relative z-10 truncate px-2 py-1.5 text-sm text-foreground\">{{ row.label }}</span>\n        <span class=\"relative z-10 ml-auto shrink-0 px-2 py-1.5 text-sm font-medium tabular-nums text-foreground\">\n          {{ row.formattedValue }}\n        </span>\n      </div>\n    </div>\n  `,\n})\nexport class BarListComponent implements OnChanges {\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  /** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */\n  trackByIndex = (index: number): number => index;\n\n  /** Rows to rank, in the order they should be drawn. @default [] */\n  @Input() data: Record<string, any>[] = [];\n  /** Row key holding each row's label. @default 'label' */\n  @Input() labelKey = 'label';\n  /** Row key holding each row's numeric value. @default 'value' */\n  @Input() valueKey = 'value';\n  /** Extra Tailwind classes merged onto the list via `cn()` (last-wins). */\n  @Input() class = '';\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  get rows(): BarListRow[] {\n    const rows = this.data ?? [];\n    const values = rows.map((row) => {\n      const num = Number(row?.[this.valueKey]);\n      return Number.isFinite(num) ? num : 0;\n    });\n    const max = values.reduce((m, v) => Math.max(m, v), 0);\n\n    return rows.map((row, i) => {\n      const raw = row?.[this.labelKey];\n      const value = values[i];\n      return {\n        label: raw == null ? '' : String(raw),\n        value,\n        percent: max > 0 ? Math.max(0, Math.min(100, (value / max) * 100)) : 0,\n        formattedValue: value.toLocaleString('en-US'),\n      };\n    });\n  }\n\n  get computedClass() {\n    return cn('flex w-full flex-col gap-1', 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"
+    }
+  ]
+}

package/registry/r/category-bar.json

@@ -0,0 +1,21 @@
+{
+  "name": "category-bar",
+  "type": "registry:ui",
+  "title": "Category Bar",
+  "description": "Category Bar component.",
+  "category": "components",
+  "registryDependencies": [],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "category-bar.component.ts",
+      "target": "ui/category-bar.component.ts",
+      "content": "import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, OnChanges, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { cn } from './utils/cn';\n\n/** One resolved segment: its share of the bar's width, its paint, and the numbers behind it. */\nexport interface CategoryBarSegment {\n  label: string;\n  value: number;\n  percent: number;\n  color: string;\n}\n\n/**\n * A single bar split into proportional, labelled ranges — for showing where\n * one value falls against a scale made of categories (a credit score inside\n * \"Poor / Fair / Good / Excellent\", latency inside \"Fast / OK / Slow\").\n *\n * Segments take the chart palette by position, since a category bar has no\n * stable per-render identity to key colour off the way a chart series does —\n * pass `colors` to override.\n * @new\n */\n@Component({\n  selector: 'tolle-category-bar',\n  styles: [':host { display: block; }'],\n  standalone: true,\n  imports: [CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div [class]=\"computedClass\">\n      <div class=\"relative flex w-full gap-0.5\">\n        <div\n          *ngFor=\"let segment of segments; let i = index; trackBy: trackByIndex\"\n          class=\"h-2 first:rounded-l-full last:rounded-r-full\"\n          [style.width.%]=\"segment.percent\"\n          [style.background]=\"segment.color\"\n          [attr.title]=\"segment.label || null\"\n        ></div>\n\n        <span\n          *ngIf=\"clampedMarker !== null\"\n          class=\"absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-background bg-foreground shadow\"\n          [style.left.%]=\"clampedMarker\"\n        ></span>\n      </div>\n\n      <p class=\"sr-only\">{{ summary }}</p>\n    </div>\n  `,\n})\nexport class CategoryBarComponent implements OnChanges {\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  /** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */\n  trackByIndex = (index: number): number => index;\n\n  /** Width of each segment. Values that are not finite and greater than zero are dropped. @default [] */\n  @Input() values: number[] = [];\n  /** Name for each segment, used in the accessible summary and as a title tooltip. @default [] */\n  @Input() labels: string[] = [];\n  /** Paint for each segment, by index. Falls back to the chart palette --chart-1 through --chart-5. @default [] */\n  @Input() colors: string[] = [];\n  /** Position of the pointer, 0-100 on the same scale the segments sum to. Omit to draw no pointer. @default null */\n  @Input() markerValue: number | null = null;\n  /** Accessible name, prefixed onto the sr-only summary of segments and marker. @default '' */\n  @Input() ariaLabel = '';\n  /** Extra Tailwind classes merged onto the bar via `cn()` (last-wins). */\n  @Input() class = '';\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  private get total(): number {\n    return this.values.reduce((sum, v) => (Number.isFinite(v) && v > 0 ? sum + v : sum), 0);\n  }\n\n  get segments(): CategoryBarSegment[] {\n    const total = this.total;\n    if (total <= 0) return [];\n\n    return this.values\n      .map((value, i) => ({ value, i }))\n      .filter(({ value }) => Number.isFinite(value) && value > 0)\n      .map(({ value, i }) => ({\n        label: this.labels[i] ?? '',\n        value,\n        percent: (value / total) * 100,\n        color: this.colors[i] || 'rgb(var(--chart-' + ((i % 5) + 1) + '))',\n      }));\n  }\n\n  get clampedMarker(): number | null {\n    if (this.markerValue == null || !Number.isFinite(this.markerValue)) return null;\n    return Math.min(100, Math.max(0, this.markerValue));\n  }\n\n  get summary(): string {\n    const parts = this.segments.map((s) => (s.label ? s.label + ': ' : '') + s.percent.toFixed(0) + '%');\n    const marker = this.clampedMarker !== null ? ', current position ' + this.clampedMarker.toFixed(0) + '%' : '';\n    const prefix = this.ariaLabel ? this.ariaLabel + '. ' : '';\n    return prefix + parts.join(', ') + marker;\n  }\n\n  get computedClass() {\n    return cn('w-full', 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"
+    }
+  ]
+}