@public-ui/mcp 4.1.3 → 4.1.4-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +8 -8
- package/shared/sample-index.json +15 -7
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/mcp",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.4-rc.1",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -46,21 +46,21 @@
|
|
|
46
46
|
"express": "5.2.1",
|
|
47
47
|
"fuse.js": "7.3.0",
|
|
48
48
|
"zod": "4.3.6",
|
|
49
|
-
"@public-ui/components": "4.1.
|
|
49
|
+
"@public-ui/components": "4.1.4-rc.1"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@eslint/js": "9.39.4",
|
|
53
|
-
"@modelcontextprotocol/inspector": "0.21.
|
|
53
|
+
"@modelcontextprotocol/inspector": "0.21.2",
|
|
54
54
|
"@types/express": "5.0.6",
|
|
55
|
-
"@types/node": "25.
|
|
56
|
-
"@typescript-eslint/eslint-plugin": "8.58.
|
|
57
|
-
"@typescript-eslint/parser": "8.58.
|
|
55
|
+
"@types/node": "25.6.0",
|
|
56
|
+
"@typescript-eslint/eslint-plugin": "8.58.2",
|
|
57
|
+
"@typescript-eslint/parser": "8.58.2",
|
|
58
58
|
"eslint": "9.39.4",
|
|
59
59
|
"eslint-plugin-json": "4.0.1",
|
|
60
|
-
"globals": "17.
|
|
60
|
+
"globals": "17.5.0",
|
|
61
61
|
"knip": "5.88.1",
|
|
62
62
|
"nodemon": "3.1.14",
|
|
63
|
-
"prettier": "3.8.
|
|
63
|
+
"prettier": "3.8.3",
|
|
64
64
|
"prettier-plugin-organize-imports": "4.3.0",
|
|
65
65
|
"tsx": "4.21.0",
|
|
66
66
|
"typescript": "5.9.3",
|
package/shared/sample-index.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"generatedAt": "2026-04-
|
|
3
|
+
"generatedAt": "2026-04-24T11:09:15.635Z",
|
|
4
4
|
"buildMode": "ci",
|
|
5
5
|
"counts": {
|
|
6
|
-
"total":
|
|
6
|
+
"total": 293,
|
|
7
7
|
"totalDocs": 53,
|
|
8
8
|
"totalSpecs": 53,
|
|
9
|
-
"totalSamples":
|
|
9
|
+
"totalSamples": 168,
|
|
10
10
|
"totalScenarios": 19
|
|
11
11
|
},
|
|
12
12
|
"repo": {
|
|
13
|
-
"commit": "
|
|
13
|
+
"commit": "67730b0f60a078f0d2e36a7ef399eb9f6b3dbe89",
|
|
14
14
|
"branch": "develop",
|
|
15
15
|
"repoUrl": "https://github.com/public-ui/kolibri"
|
|
16
16
|
}
|
|
@@ -1221,7 +1221,7 @@
|
|
|
1221
1221
|
"group": "meter",
|
|
1222
1222
|
"name": "min-max",
|
|
1223
1223
|
"path": "packages/samples/react/src/components/meter/min-max.tsx",
|
|
1224
|
-
"code": "import { KolHeading, KolMeter } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const MeterMinMax: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThe _min prop defines the lower boundary of the measured range (default 0). Combined with _max it defines the full scale. The _value must lie within\n\t\t\t\tthis range.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Default min (0)\" />\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"Progress\" _max={10} _value={0} />\n\t\t\t\t\t<KolMeter _label=\"Progress\" _max={10} _value={5} />\n\t\t\t\t\t<KolMeter _label=\"Progress\" _max={10} _value={10} />\n\t\t\t\t</div>\n\t\t\t</section>\n\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Custom min\" />\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"pH value\" _min={0} _max={14} _value={7} _unit=\"pH\" />\n\t\t\t\t\t<KolMeter _label=\"Temperature range\" _min={-20} _max={40} _value={
|
|
1224
|
+
"code": "import { KolHeading, KolMeter } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const MeterMinMax: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThe _min prop defines the lower boundary of the measured range (default 0). Combined with _max it defines the full scale. The _value must lie within\n\t\t\t\tthis range.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Default min (0)\" />\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"Progress\" _max={10} _value={0} />\n\t\t\t\t\t<KolMeter _label=\"Progress\" _max={10} _value={5} />\n\t\t\t\t\t<KolMeter _label=\"Progress\" _max={10} _value={10} />\n\t\t\t\t</div>\n\t\t\t</section>\n\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Custom min\" />\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<KolMeter _label=\"pH value\" _min={0} _max={14} _value={7} _unit=\"pH\" />\n\t\t\t\t\t<KolMeter _label=\"Temperature range\" _min={-20} _max={40} _value={30} _unit=\"°C\" />\n\t\t\t\t\t<KolMeter _label=\"Temperature range\" _min={-20} _max={40} _value={-15} _unit=\"°C\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</>\n);\n",
|
|
1225
1225
|
"kind": "sample"
|
|
1226
1226
|
},
|
|
1227
1227
|
{
|
|
@@ -1424,6 +1424,14 @@
|
|
|
1424
1424
|
"code": "/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport * as React from 'react';\n\nimport { KolButton, KolInputText, KolSplitButton } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const SplitButtonWithContext: FC = () => {\n\tconst splitButtonRef = React.useRef<HTMLKolSplitButtonElement & { closePopup: any }>(null);\n\n\tconst handleCloseClick = () => {\n\t\tsplitButtonRef.current?.closePopup();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t<KolSplitButton ref={splitButtonRef as any} _label=\"Only the arrow opens\">\n\t\t\t\t\t<div style={{ width: 300, padding: 16, border: '1px solid #ccc' }} onClick={(e) => e.stopPropagation()}>\n\t\t\t\t\t\t<p>SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon.</p>\n\t\t\t\t\t\t<div style={{ gap: 16, display: 'flex', flexDirection: 'column' }}>\n\t\t\t\t\t\t\t<KolInputText _label=\"User\" />\n\t\t\t\t\t\t\t<KolInputText _label=\"Role\" />\n\t\t\t\t\t\t\t<KolButton _label=\"Close\" _on={{ onClick: handleCloseClick }} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</KolSplitButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1425
1425
|
"kind": "sample"
|
|
1426
1426
|
},
|
|
1427
|
+
{
|
|
1428
|
+
"id": "sample/table/action-and-render",
|
|
1429
|
+
"group": "table",
|
|
1430
|
+
"name": "action-and-render",
|
|
1431
|
+
"path": "packages/samples/react/src/components/table/action-render.tsx",
|
|
1432
|
+
"code": "import type { KoliBriTableCell, KoliBriTableHeaderCellWithLogic } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\ntype ProjectTask = {\n\tid: string;\n\tproject: string;\n\towner: string;\n\treact: string;\n};\n\nconst HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'project', label: 'Project' },\n\t\t\t{ key: 'owner', label: 'Owner', width: 140 },\n\t\t\t{\n\t\t\t\tlabel: 'ID',\n\t\t\t\tkey: 'id',\n\t\t\t\twidth: 100,\n\n\t\t\t\trender: (_el, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\treturn `Index: ${label}`;\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'actions',\n\t\t\t\tlabel: 'Actions',\n\t\t\t\twidth: 100,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Details',\n\t\t\t\t\t\t\t_icons: 'kolicon-eye',\n\t\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Details: ${simpleRow.id} - ${simpleRow.project}`),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst DATA: ProjectTask[] = [\n\t{\n\t\tid: 'T-01',\n\t\tproject: 'Onboarding checklist',\n\t\towner: 'Alex Rivera',\n\t\treact: 'test',\n\t},\n\t{\n\t\tid: 'T-02',\n\t\tproject: 'Accessibility audit',\n\t\towner: 'Jamie Chen',\n\t\treact: 'test',\n\t},\n];\n\nexport const TableActionAndRenderColumns: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tSimple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with\n\t\t\t\tinline action buttons demonstrate clean separation between data and UI behavior.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full\">\n\t\t\t<KolTableStateful _label=\"Tasks with action buttons\" _headers={HEADERS} _data={DATA} className=\"block\" _hasSettingsMenu />\n\t\t</section>\n\t</>\n);\n",
|
|
1433
|
+
"kind": "sample"
|
|
1434
|
+
},
|
|
1427
1435
|
{
|
|
1428
1436
|
"id": "sample/table/action-columns",
|
|
1429
1437
|
"group": "table",
|
|
@@ -1533,7 +1541,7 @@
|
|
|
1533
1541
|
"group": "table",
|
|
1534
1542
|
"name": "render-cell",
|
|
1535
1543
|
"path": "packages/samples/react/src/components/table/render-cell.tsx",
|
|
1536
|
-
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react-v19';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\n\nimport type { IconsPropType, KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';\nimport { useToasterService } from '../../hooks/useToasterService';\n\ntype Data = {\n\torder: number;\n\tdate: Date;\n\tshipped: boolean;\n};\n\n/**\n * Generates n data entries with random dates and shipping status\n * @param n - Number of data entries to generate\n * @returns Array of Data objects\n */\nfunction generateDataEntries(n: number): Data[] {\n\tconst entries: Data[] = [];\n\tconst startDate = new Date('1970-01-01').getTime();\n\tconst endDate = new Date('2025-12-31').getTime();\n\n\tfor (let i = 0; i < n; i++) {\n\t\tconst randomTimestamp = startDate + Math.random() * (endDate - startDate);\n\t\tentries.push({\n\t\t\torder: i,\n\t\t\tshipped: Math.random() > 0.5,\n\t\t\tdate: new Date(randomTimestamp),\n\t\t});\n\t}\n\n\treturn entries;\n}\n\nconst DATA: Data[] = generateDataEntries(100);\n\nfunction KolButtonWrapper({ label, icons }: { label: string; icons: IconsPropType }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _icons={icons} _on={dummyEventHandler} />;\n}\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: '#',\n\t\t\t\tkey: 'order',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 100,\n\n\t\t\t\t/* Example 1: Use render return value to format data */\n\t\t\t\trender: (_el, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\treturn `Index: ${label}`;\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Status',\n\t\t\t\tkey: 'shipped',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 100,\n\n\t\t\t\t/* Example 2: Simple render function using textContent */\n\t\t\t\trender: (el, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\tconst element = el as HTMLElement;\n\t\t\t\t\tif (label) {\n\t\t\t\t\t\telement.textContent = `Order has been dispatched 🚚`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.textContent = `Order pending 📦`;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Date (string)',\n\t\t\t\tkey: 'date',\n\t\t\t\twidth: 200,\n\t\t\t\ttextAlign: 'center',\n\n\t\t\t\t/* Example 3: Render function using innerHTML. ⚠️Make sure to sanitize data to avoid XSS. */\n\t\t\t\trender: (el, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\t(el as HTMLElement).innerHTML = `<strong>${DATE_FORMATTER.format(label as unknown as Date)}</strong>`;\n\t\t\t\t},\n\t\t\t\tcompareFn: (data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime(),\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Action (react)',\n\t\t\t\twidth: 200,\n\n\t\t\t\t/* Example 4: Render function using React */\n\t\t\t\trender: (el) => {\n\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: `grid`,\n\t\t\t\t\t\t\t\tgridAutoFlow: `column`,\n\t\t\t\t\t\t\t\talignItems: `end`,\n\t\t\t\t\t\t\t\tgap: `1rem`,\n\t\t\t\t\t\t\t\tmaxWidth: `400px`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<KolInputText _label=\"Input\" />\n\t\t\t\t\t\t\t<KolButtonWrapper label=\"Save\" icons={{ left: 'kolicon-check' }} />\n\t\t\t\t\t\t</div>,\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableRenderCell: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful using React render functions for the cell contents.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful _label=\"Sort by date column\" _data={DATA} _headers={HEADERS} className=\"w-full\" />\n\t</>\n);\n",
|
|
1544
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react-v19';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\n\nimport type { IconsPropType, KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';\nimport { useToasterService } from '../../hooks/useToasterService';\n\ntype Data = {\n\torder: number;\n\tdate: Date;\n\tshipped: boolean;\n};\n\n/**\n * Generates n data entries with random dates and shipping status\n * @param n - Number of data entries to generate\n * @returns Array of Data objects\n */\nfunction generateDataEntries(n: number): Data[] {\n\tconst entries: Data[] = [];\n\tconst startDate = new Date('1970-01-01').getTime();\n\tconst endDate = new Date('2025-12-31').getTime();\n\n\tfor (let i = 0; i < n; i++) {\n\t\tconst randomTimestamp = startDate + Math.random() * (endDate - startDate);\n\t\tentries.push({\n\t\t\torder: i,\n\t\t\tshipped: Math.random() > 0.5,\n\t\t\tdate: new Date(randomTimestamp),\n\t\t});\n\t}\n\n\treturn entries;\n}\n\nconst DATA: Data[] = generateDataEntries(100);\n\nfunction KolButtonWrapper({ label, icons }: { label: string; icons: IconsPropType }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _icons={icons} _on={dummyEventHandler} />;\n}\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: '#',\n\t\t\t\tkey: 'order',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 100,\n\n\t\t\t\t/* Example 1: Use render return value to format data */\n\t\t\t\trender: (_el, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\treturn `Index: ${label}`;\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Status',\n\t\t\t\tkey: 'shipped',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 100,\n\n\t\t\t\t/* Example 2: Simple render function using textContent */\n\t\t\t\trender: (el, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\tconst element = el as HTMLElement;\n\t\t\t\t\tif (label) {\n\t\t\t\t\t\telement.textContent = `Order has been dispatched 🚚`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.textContent = `Order pending 📦`;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Date (string)',\n\t\t\t\tkey: 'date',\n\t\t\t\twidth: 200,\n\t\t\t\ttextAlign: 'center',\n\n\t\t\t\t/* Example 3: Render function using innerHTML. ⚠️Make sure to sanitize data to avoid XSS. */\n\t\t\t\trender: (el, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\t(el as HTMLElement).innerHTML = `<strong>${DATE_FORMATTER.format(label as unknown as Date)}</strong>`;\n\t\t\t\t},\n\t\t\t\tcompareFn: (data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime(),\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Action (react)',\n\t\t\t\tkey: 'action',\n\t\t\t\twidth: 200,\n\n\t\t\t\t/* Example 4: Render function using React */\n\t\t\t\trender: (el) => {\n\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: `grid`,\n\t\t\t\t\t\t\t\tgridAutoFlow: `column`,\n\t\t\t\t\t\t\t\talignItems: `end`,\n\t\t\t\t\t\t\t\tgap: `1rem`,\n\t\t\t\t\t\t\t\tmaxWidth: `400px`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<KolInputText _label=\"Input\" />\n\t\t\t\t\t\t\t<KolButtonWrapper label=\"Save\" icons={{ left: 'kolicon-check' }} />\n\t\t\t\t\t\t</div>,\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableRenderCell: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful using React render functions for the cell contents.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful _label=\"Sort by date column\" _data={DATA} _headers={HEADERS} className=\"w-full\" _hasSettingsMenu />\n\t</>\n);\n",
|
|
1537
1545
|
"kind": "sample"
|
|
1538
1546
|
},
|
|
1539
1547
|
{
|
|
@@ -2189,7 +2197,7 @@
|
|
|
2189
2197
|
"group": "spec",
|
|
2190
2198
|
"name": "meter",
|
|
2191
2199
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/meter.md",
|
|
2192
|
-
"code": "# kol-meter\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description
|
|
2200
|
+
"code": "# kol-meter\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- |\n| `_high` | `_high` | From this value to the max value is the high range of the meter. Below this value is the middle range. | `number \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_low` | `_low` | From this value to the min value is the low range of the meter. Above this value is the middle range. | `number \\| undefined` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. Default like native component. | `number` | `1` |\n| `_min` | `_min` | Defines the minimum value of the element. Default like native component. | `number` | `0` |\n| `_optimum` | `_optimum` | Indicates the optimal range of the element. If this lies in the high range, the high range will be optimum, the middle range will be suboptimum and the low range will be critical. If this lies in the low range, the low range will be optimum, the middle range will be suboptimum and the high range will be critical. If this lies in the middle range, both low and high range will be suboptimum and nothing will be critical. | `number \\| undefined` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the meter bar is displayed horizontally or vertically. | `\"horizontal\" \\| \"vertical\"` | `'horizontal'` |\n| `_unit` | `_unit` | Defines the unit of the value. | `string` | `'%'` |\n| `_value` _(required)_ | `_value` | Defines the value of the element. Is capped between min and max. | `number` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
|
|
2193
2201
|
"kind": "spec"
|
|
2194
2202
|
},
|
|
2195
2203
|
{
|