@tolle_/tolle-ui 18.3.0 → 18.3.1

package/registry/docs-content.json

@@ -760,6 +760,54 @@
       }
     ]
   },
+  "bar-list": {
+    "category": "components",
+    "title": "Bar List",
+    "selector": "tolle-bar-list",
+    "isNew": true,
+    "import": "import { BarListComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add bar-list",
+    "components": [
+      {
+        "name": "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": []
+      }
+    ]
+  },
   "breadcrumb": {
     "category": "navigation",
     "title": "Breadcrumb",
@@ -1487,6 +1535,68 @@
       }
     ]
   },
+  "category-bar": {
+    "category": "components",
+    "title": "Category Bar",
+    "selector": "tolle-category-bar",
+    "isNew": true,
+    "import": "import { CategoryBarComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add category-bar",
+    "components": [
+      {
+        "name": "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": []
+      }
+    ]
+  },
   "chain-of-thought": {
     "category": "ai",
     "title": "Chain Of Thought",
@@ -1889,6 +1999,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",
@@ -1972,7 +2089,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
           },
           {
@@ -1996,7 +2113,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
           },
           {
@@ -2298,6 +2415,117 @@
       }
     ]
   },
+  "chart-spark": {
+    "category": "data",
+    "title": "Chart Spark",
+    "selector": "tolle-chart-spark",
+    "isNew": true,
+    "import": "import { ChartSparkComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add chart-spark",
+    "components": [
+      {
+        "name": "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": []
+      }
+    ]
+  },
   "checkbox": {
     "category": "forms",
     "title": "Checkbox",
@@ -7753,6 +7981,58 @@
       }
     ]
   },
+  "progress-circle": {
+    "category": "feedback",
+    "title": "Progress Circle",
+    "selector": "tolle-progress-circle",
+    "isNew": true,
+    "import": "import { ProgressCircleComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add progress-circle",
+    "components": [
+      {
+        "name": "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": []
+      }
+    ]
+  },
   "prompt-input": {
     "category": "ai",
     "title": "Prompt Input",
@@ -11099,6 +11379,54 @@
       }
     ]
   },
+  "tracker": {
+    "category": "components",
+    "title": "Tracker",
+    "selector": "tolle-tracker",
+    "isNew": true,
+    "import": "import { TrackerComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add tracker",
+    "components": [
+      {
+        "name": "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": []
+      }
+    ]
+  },
   "typography": {
     "category": "layout",
     "title": "Typography",

package/registry/llms-full.txt

@@ -303,6 +303,22 @@ Variants:
 - `variant`: `default`, `secondary`, `outline`, `destructive` (default `default`)
 - `size`: `xs`, `sm`, `default` (default `default`)
 
+## Bar List
+
+- Install: `npx @tolle_/cli add bar-list`
+- Import: `import { BarListComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-bar-list>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | `Record<string, any>[]` | `[]` | Rows to rank, in the order they should be drawn. |
+| labelKey | `string` | `'label'` | Row key holding each row's label. |
+| valueKey | `string` | `'value'` | Row key holding each row's numeric value. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the list via `cn()` (last-wins). |
+
 ## Breadcrumb
 
 - Install: `npx @tolle_/cli add breadcrumb`
@@ -582,6 +598,24 @@ Slots: _default_
 
 ### `<[tolleCarouselNext]>` (directive)
 
+## Category Bar
+
+- Install: `npx @tolle_/cli add category-bar`
+- Import: `import { CategoryBarComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-category-bar>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| values | `number[]` | `[]` | Width of each segment. Values that are not finite and greater than zero are dropped. |
+| labels | `string[]` | `[]` | Name for each segment, used in the accessible summary and as a title tooltip. |
+| colors | `string[]` | `[]` | Paint for each segment, by index. Falls back to the chart palette --chart-1 through --chart-5. |
+| markerValue | `number | null` | `null` | Position of the pointer, 0-100 on the same scale the segments sum to. Omit to draw no pointer. |
+| ariaLabel | `string` | `''` | Accessible name, prefixed onto the sr-only summary of segments and marker. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the bar via `cn()` (last-wins). |
+
 ## Chain Of Thought
 
 - Install: `npx @tolle_/cli add chain-of-thought`
@@ -720,6 +754,8 @@ Inputs:
 | ariaLabel | `string` | `''` | Accessible name for the chart, used as the svg `<title>`. |
 | description | `string` | `''` | Longer summary used as the svg `<desc>`. Falls back to `ariaLabel`. |
 | stacked | `boolean` | `false` | Stacks marks on a shared baseline instead of grouping them. |
+| orientation | `ChartOrientation` | `'vertical'` | Which physical axis carries the category vs the value. Only bars support
+'horizontal' — line/area marks stay vertical regardless. |
 | hover | `boolean` | `true` | Renders the crosshair, hit layer and shared tooltip. |
 | showTable | `boolean` | `false` | Shows the data table instead of leaving it visually hidden. |
 | xHeader | `string` | `'Category'` | Column header the table fallback gives the x category. |
@@ -745,7 +781,7 @@ Inputs:
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| vertical | `boolean` | `false` | Also draws a rule at every x position. |
+| vertical | `boolean` | `false` | Also draws a rule at every category position. |
 | class | `string` | `''` | Extra Tailwind classes merged onto each rule via `cn()` (last-wins). |
 
 ### `<svg:g[tolle-chart-x-axis]>`
@@ -754,7 +790,8 @@ Inputs:
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| charWidth | `number` | `7` | Approximate px per character, used to decide when labels would collide. |
+| charWidth | `number` | `7` | Approximate px per character, used to decide when category labels would
+collide. Only consulted in the vertical orientation. |
 | class | `string` | `''` | Extra Tailwind classes merged onto each label via `cn()` (last-wins). |
 
 ### `<svg:g[tolle-chart-y-axis]>`
@@ -836,6 +873,31 @@ Outputs:
 Variants:
 - `variant`: `default`, `card` (default `default`)
 
+## Chart Spark
+
+- Install: `npx @tolle_/cli add chart-spark`
+- Import: `import { ChartSparkComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-chart-spark>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | `Record<string, any>[]` | `[]` | Rows to plot, in x order. |
+| valueKey | `string` | `'value'` | Row key holding each row's numeric value. |
+| xKey | `string` | `''` | Row key holding each row's x position. Only matters once `hover` is on. |
+| type | `'line' | 'area' | 'bar'` | `'line'` | Which mark to draw. |
+| curve | `'linear' | 'smooth'` | `'linear'` | Interpolation for line/area. |
+| maxBarWidth | `number` | `6` | Largest bar thickness in px, used when `type` is 'bar'. |
+| height | `number` | `32` | Height in px. |
+| hover | `boolean` | `false` | Renders the crosshair, hit layer and tooltip. |
+| showTable | `boolean` | `false` | Shows the data table instead of leaving it visually hidden. |
+| ariaLabel | `string` | `''` | Accessible name, used as the svg <title>. |
+| description | `string` | `''` | Longer summary used as the svg <desc>. Falls back to `ariaLabel`. |
+| margin | `ChartMargin` | `{ top: 2, right: 2, bottom: 2, left: 2 }` | Space reserved around the plot — a sparkline has no axis labels to fit. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the chart via `cn()` (last-wins). |
+
 ## Checkbox
 
 - Install: `npx @tolle_/cli add checkbox`
@@ -2731,6 +2793,24 @@ Inputs:
 | value | `number | null` | `0` |  |
 | class | `string` | `''` |  |
 
+## Progress Circle
+
+- Install: `npx @tolle_/cli add progress-circle`
+- Import: `import { ProgressCircleComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-progress-circle>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | `number | null` | `0` | Percent complete, 0-100. |
+| size | `number` | `120` | Diameter of the ring in px. |
+| strokeWidth | `number` | `8` | Thickness of the ring in px. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the ring via `cn()` (last-wins). |
+
+Slots: _default_
+
 ## Prompt Input
 
 - Install: `npx @tolle_/cli add prompt-input`
@@ -3939,6 +4019,22 @@ Inputs:
 | content | `string` | `''` |  |
 | placement | `'top' | 'bottom' | 'left' | 'right'` | `'top'` |  |
 
+## Tracker
+
+- Install: `npx @tolle_/cli add tracker`
+- Import: `import { TrackerComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-tracker>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | `TrackerBlock[]` | `[]` | One block per period, in chronological order. |
+| blockHeight | `number` | `32` | Height of each block in px. |
+| ariaLabel | `string` | `''` | Accessible name for the whole strip. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the strip via `cn()` (last-wins). |
+
 ## Typography
 
 - Install: `npx @tolle_/cli add typography`

package/registry/llms.txt

@@ -14,6 +14,7 @@
 - [Avatar](r/avatar.json): Avatar component with shape and size options.
 - [Avatar Fallback](r/avatar-fallback.json): Avatar Fallback component.
 - [Badge](r/badge.json): Badge component with variant and size options.
+- [Bar List](r/bar-list.json): Bar List component.
 - [Breadcrumb](r/breadcrumb.json): Breadcrumb component.
 - [Breadcrumb Item](r/breadcrumb-item.json): Breadcrumb Item component.
 - [Breadcrumb Link](r/breadcrumb-link.json): Breadcrumb Link component.
@@ -24,9 +25,11 @@
 - [Calendar](r/calendar.json): Calendar component.
 - [Card](r/card.json): Card component.
 - [Carousel](r/carousel.json): Carousel component.
+- [Category Bar](r/category-bar.json): Category Bar component.
 - [Chain Of Thought](r/chain-of-thought.json): Chain Of Thought component with size options.
 - [Chart](r/chart.json): Chart component with variant and density options.
 - [Chart Pie](r/chart-pie.json): Chart Pie component with variant options.
+- [Chart Spark](r/chart-spark.json): Chart Spark component.
 - [Checkbox](r/checkbox.json): Checkbox component with size and checked options.
 - [Checkpoint](r/checkpoint.json): Checkpoint component with active and size options.
 - [Collapsible](r/collapsible.json): Collapsible component.
@@ -77,6 +80,7 @@
 - [Popover](r/popover.json): Popover component.
 - [Popover Content](r/popover-content.json): Popover Content component.
 - [Progress](r/progress.json): Progress component.
+- [Progress Circle](r/progress-circle.json): Progress Circle component.
 - [Prompt Input](r/prompt-input.json): Prompt Input component with status and size options.
 - [Queue](r/queue.json): Queue component with size options.
 - [Radio Group](r/radio-group.json): Radio Group component.
@@ -115,6 +119,7 @@
 - [Tolle Cell](r/tolle-cell.json): Tolle Cell component.
 - [Tool](r/tool.json): Tool component.
 - [Tooltip](r/tooltip.json): Tooltip component.
+- [Tracker](r/tracker.json): Tracker component.
 - [Typography](r/typography.json): Typography component with variant options.
 
 ## Reference