@public-ui/sample-react 4.0.0-alpha.0 → 4.0.0-alpha.10

package/src/scenarios/change-tabindex.tsx

@@ -1,32 +1,32 @@
 /* eslint-disable jsx-a11y/tabindex-no-positive */
 
-import { SampleDescription } from '../components/SampleDescription';
+import type { Option, StencilUnknown } from '@public-ui/components';
 import {
 	KolButton,
 	KolButtonLink,
 	KolCard,
 	KolCombobox,
 	KolInputCheckbox,
+	KolInputColor,
 	KolInputDate,
 	KolInputEmail,
 	KolInputFile,
-	KolInputColor,
 	KolInputNumber,
 	KolInputPassword,
 	KolInputRadio,
 	KolInputRange,
 	KolInputText,
-	KolLinkButton,
 	KolLink,
+	KolLinkButton,
 	KolSingleSelect,
 	KolSplitButton,
 	KolTextarea,
-} from '@public-ui/react';
-import React from 'react';
+} from '@public-ui/react-v19';
 import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
 import { ERROR_MSG, HINT_MSG } from '../shares/constants';
 import { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';
-import type { Option, StencilUnknown } from '@public-ui/components';
 
 export const ChangeTabindex: FC = () => {
 	return (
@@ -37,7 +37,7 @@ export const ChangeTabindex: FC = () => {
 
 			<div className="w-full grid gap-4">
 				<KolCard _label="Button" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolButton _label="Button 1, Tabindex 4" _variant="primary" tabIndex={4} />
 						<KolButton _disabled _label="Button 2, Tabindex 3" _variant="primary" tabIndex={3} />
 						<KolButton _label="Button 3, Tabindex 2" _variant="primary" tabIndex={2} />
@@ -46,7 +46,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="ButtonLink" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolButtonLink _label="ButtonLink 1, Tabindex 4" tabIndex={4} />
 						<KolButtonLink _disabled _label="ButtonLink 2, Tabindex 3" tabIndex={3} />
 						<KolButtonLink _label="ButtonLink 3, Tabindex 2" tabIndex={2} />
@@ -55,7 +55,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="Combobox" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolCombobox _hint={HINT_MSG} _label="Combobox 1, Tabindex 4" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={4} />
 						<KolCombobox _disabled _hint={HINT_MSG} _label="Combobox 2, Tabindex 3" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={3} />
 						<KolCombobox
@@ -72,7 +72,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputCheckbox" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputCheckbox _label="InputCheckbox 4, Tabindex 1" _value={false} tabIndex={4} />
 						<KolInputCheckbox _disabled _label="InputCheckbox 3, Tabindex 2" _value={false} tabIndex={3} />
 						<KolInputCheckbox _touched _label="InputCheckbox 2, Tabindex 3" _msg={{ _type: 'error', _description: ERROR_MSG }} _value={false} tabIndex={2} />
@@ -81,7 +81,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputColor" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputColor _value="#f08080" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
 						<KolInputColor _disabled _value="#f08080" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
 						<KolInputColor _touched _value="#f08080" _label="InputCheckbox 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -90,7 +90,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputDate" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputDate _type="datetime-local" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
 						<KolInputDate _disabled _type="datetime-local" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
 						<KolInputDate
@@ -105,7 +105,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputEmail" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputEmail _label="InputEmail 1, Tabindex 4" tabIndex={4} />
 						<KolInputEmail _disabled _label="InputEmail 2, Tabindex 3" tabIndex={3} />
 						<KolInputEmail _touched _label="InputEmail 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -114,7 +114,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputFile" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputFile _label="InputFile 1, Tabindex 4" tabIndex={4} />
 						<KolInputFile _disabled _label="InputFile 2, Tabindex 3" tabIndex={3} />
 						<KolInputFile _touched _label="InputFile 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -123,7 +123,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputNumber" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputNumber _label="InputNumber 1, Tabindex 4" tabIndex={4} />
 						<KolInputNumber _disabled _label="InputNumber 2, Tabindex 3" tabIndex={3} />
 						<KolInputNumber _touched _label="InputNumber 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -132,7 +132,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputPassword" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputPassword _label="InputPassword 1, Tabindex 4" tabIndex={4} />
 						<KolInputPassword _disabled _label="InputPassword 2, Tabindex 3" tabIndex={3} />
 						<KolInputPassword _touched _label="InputPassword 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -141,7 +141,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputRadio" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputRadio
 							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
 							_label="InputRadio 1, Tabindex 4"
@@ -169,7 +169,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputRange" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputRange _label="InputRange 1, Tabindex 4" _min={0} _max={50} tabIndex={4} />
 						<KolInputRange _disabled _label="InputRange 2, Tabindex 3" _min={0} _max={50} tabIndex={3} />
 						<KolInputRange _touched _label="InputRange 3, Tabindex 2" _min={0} _max={50} _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -178,7 +178,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputText" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputText _label="InputText 1, Tabindex 4" tabIndex={4} />
 						<KolInputText _disabled _label="InputText 2, Tabindex 3" tabIndex={3} />
 						<KolInputText _touched _label="InputText 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -187,7 +187,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="LinkButton" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolLinkButton _href={'#/back-page'} _label="InputText 1, Tabindex 4" _variant="primary" tabIndex={4}></KolLinkButton>
 						<KolLinkButton _disabled _href={'#/back-page'} _label="InputText 2, Tabindex 3" _variant="primary" tabIndex={3}></KolLinkButton>
 						<KolLinkButton _href={'#/back-page'} _label="InputText 3, Tabindex 2" _variant="primary" tabIndex={2}></KolLinkButton>
@@ -196,14 +196,16 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="Link" _level={0}>
-					<KolLink _href="#/back-page" _label="InputText 1, Tabindex 4" tabIndex={4} />
-					<KolLink _disabled _href="#/back-page" _label="InputText 2, Tabindex 3" tabIndex={3} />
-					<KolLink _href="#/back-page" _label="InputText 3, Tabindex 2" tabIndex={2} />
-					<KolLink _href="#/back-page" _label="InputText 4, Tabindex 1" tabIndex={1} />
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
+						<KolLink _href="#/back-page" _label="InputText 1, Tabindex 4" tabIndex={4} />
+						<KolLink _disabled _href="#/back-page" _label="InputText 2, Tabindex 3" tabIndex={3} />
+						<KolLink _href="#/back-page" _label="InputText 3, Tabindex 2" tabIndex={2} />
+						<KolLink _href="#/back-page" _label="InputText 4, Tabindex 1" tabIndex={1} />
+					</div>
 				</KolCard>
 
 				<KolCard _label="SingleSelect" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolSingleSelect _label="InputText 1, Tabindex 4" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={4} />
 						<KolSingleSelect _disabled _label="InputText 2, Tabindex 3" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={3} />
 						<KolSingleSelect
@@ -219,7 +221,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="SplitButton" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolSplitButton _label="InputText 1, Tabindex 4" tabIndex={4}>
 							Dropdown-Inhalt
 						</KolSplitButton>
@@ -228,7 +230,7 @@ export const ChangeTabindex: FC = () => {
 						</KolSplitButton>
 						<KolSplitButton _label="InputText 3, Tabindex 2" tabIndex={2}>
 							Dropdown-Inhalt
-						</KolSplitButton>{' '}
+						</KolSplitButton>
 						<KolSplitButton _label="InputText 4, Tabindex 1" tabIndex={1}>
 							Dropdown-Inhalt
 						</KolSplitButton>
@@ -236,7 +238,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="Textarea" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolTextarea _label="Textarea 1, Tabindex 4" _rows={3} _placeholder="Placeholder" tabIndex={4} />
 						<KolTextarea _disabled _label="Textarea 2, Tabindex 3" _rows={3} _placeholder="Placeholder" tabIndex={3} />
 						<KolTextarea

package/src/scenarios/custom-tooltip-css-properties.tsx

@@ -0,0 +1,42 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolButton } from '@public-ui/react-v19';
+import { SampleDescription } from '../components/SampleDescription';
+import { useToasterService } from '../hooks/useToasterService';
+
+export const CustomTooltipCssProperties: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates how tooltip animation duration and width can be customized via
+					<code>--kolibri-tooltip-animation-duration</code> and <code>--kol-tooltip-width</code>.
+				</p>
+			</SampleDescription>
+
+			<div className="flex justify-center items-center gap-4">
+				<KolButton
+					_label="Custom duration"
+					_hideLabel
+					style={{ '--kolibri-tooltip-animation-duration': '2500ms' }}
+					_icons="codicon codicon-clock"
+					_on={dummyEventHandler}
+				></KolButton>
+				<KolButton
+					_label="Custom width"
+					_hideLabel
+					style={{ '--kol-tooltip-width': '400px' }}
+					_icons="codicon codicon-arrow-both"
+					_on={dummyEventHandler}
+				></KolButton>
+			</div>
+		</>
+	);
+};

package/src/scenarios/date-in-form.tsx

@@ -0,0 +1,24 @@
+import { KolButton, KolForm, KolInputDate } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const DateInForm: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolForm with KolInputDate inside to make sure enter on the date icon does not submit the form.</p>
+		</SampleDescription>
+
+		<KolForm
+			_on={{
+				onSubmit: () => {
+					console.error('submitted');
+					alert('submitted');
+				},
+			}}
+		>
+			<KolInputDate _label="date" _name="datum" />
+			<KolButton _label="Submit" _type="submit" />
+		</KolForm>
+	</>
+);

package/src/scenarios/disabled-interactive-elements.tsx

@@ -18,7 +18,7 @@ import {
 	KolLinkButton,
 	KolSelect,
 	KolTextarea,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';

package/src/scenarios/focus-elements.tsx

@@ -1,3 +1,4 @@
+import type { FocusableElement } from '@public-ui/components';
 import {
 	KolAccordion,
 	KolAlert,
@@ -21,13 +22,11 @@ import {
 	KolSelect,
 	KolSingleSelect,
 	KolTextarea,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 import type { FC, ForwardRefRenderFunction } from 'react';
-import { useMemo } from 'react';
-import React, { forwardRef, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { SampleDescription } from '../components/SampleDescription';
-import type { FocusableElement } from '@public-ui/components';
 
 const getFocusElements = () => {
 	const focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { KolTable, KolTabs, KolNav } from '@public-ui/react';
 import type { KoliBriTableHeaders, TabButtonProps } from '@public-ui/components';
+import { KolNav, KolTableStateful, KolTabs } from '@public-ui/react-v19';
+import * as React from 'react';
 import { SampleDescription } from '../../components/SampleDescription';
 import { LINKS } from '../../components/nav/links';
 import DATA from './databasedata.json';
@@ -47,14 +47,20 @@ function TableHorizontalScrollbarAdvanced() {
 		let width = 0;
 
 		for (const def of columnDefinitions as { width: string }[]) {
-			width += Number(def.width?.replace('px', '') || 0);
+			width += parseFloat(def.width?.replace('px', '') || '0');
 		}
 		return `${width}px`;
 	});
 
 	return (
 		<>
-			<SampleDescription></SampleDescription>
+			<SampleDescription>
+				<p>
+					This advanced scenario demonstrates a complex layout with KolTable featuring horizontal scrollbar within a tab-based navigation system. The table
+					automatically calculates its minimum width based on column definitions and provides smooth horizontal scrolling when content exceeds the container
+					width. This example showcases real-world usage in a dashboard-like interface with sidebar navigation and tabbed content areas.
+				</p>
+			</SampleDescription>
 			<div className="mainlayout">
 				<aside className="nav-area">
 					<KolNav _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded />
@@ -62,7 +68,7 @@ function TableHorizontalScrollbarAdvanced() {
 				<div className="content">
 					<KolTabs _tabs={TABS} _align="top" _label="Demo Tabs">
 						<div style={{ overflow: 'hidden' }}>
-							<KolTable
+							<KolTableStateful
 								_label="Table for demonstration purposes with horizontal scrollbar"
 								_minWidth={tableWith}
 								_headers={HEADERS}

package/src/scenarios/horizontal-scrollbar-advanced/layout.scss

@@ -1,19 +1,19 @@
-@import '../../@shared/mixins';
+@use '../../@shared/mixins' as *;
 
 .mainlayout {
-	min-height: calc(100vh - rem(32));
-	width: 100%;
 	display: grid;
+	width: 100%;
+	min-height: calc(100vh - rem(32));
 	column-gap: rem(16);
+	grid-template-areas: 'nav content';
 	grid-template-columns: rem(400) calc(100% - rem(460));
 	grid-template-rows: 1fr;
-	grid-template-areas: 'nav content';
 
-	& > .nav-area {
+	&>.nav-area {
 		grid-area: nav;
 	}
 
-	& > .content {
+	&>.content {
 		grid-area: content;
 	}
-}
+}

package/src/scenarios/input-group-with-error.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import type { SelectOption } from '@public-ui/components';
+import { KolAlert, KolInputCheckbox, KolInputText, KolSelect } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import { KolAlert, KolInputCheckbox, KolInputText, KolSelect } from '@public-ui/react';
+import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';
-import type { SelectOption } from '@public-ui/components';
 
 export const InputGroupWithError: FC = () => {
 	const phoneError = true;
@@ -42,9 +42,9 @@ export const InputGroupWithError: FC = () => {
 				{phoneError && <KolAlert _alert _type="error" _label={phoneErrorMessage} />}
 
 				<div className="grid grid-cols-3 gap-4 max-w-2xl">
-					<KolSelect _options={countryCodes} _label="CountryCode " _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
-					<KolInputText _label="Area code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
-					<KolInputText _label="Local number" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+					<KolSelect _options={countryCodes} _label="CountryCode " _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />
+					<KolInputText _label="Area code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />
+					<KolInputText _label="Local number" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />
 				</div>
 			</fieldset>
 
@@ -53,7 +53,7 @@ export const InputGroupWithError: FC = () => {
 				{pizzaError && <KolAlert _alert _type="error" _label={pizzaErrorMessage} />}
 
 				{pizzaToppings.map((topping) => (
-					<KolInputCheckbox key={topping} _label={topping} _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+					<KolInputCheckbox key={topping} _label={topping} _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />
 				))}
 			</fieldset>
 		</>

package/src/scenarios/inputs-get-value.tsx

@@ -5,6 +5,7 @@ import {
 	KolButton,
 	KolButtonLink,
 	KolCard,
+	KolCombobox,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -17,15 +18,14 @@ import {
 	KolInputText,
 	KolSelect,
 	KolSingleSelect,
-	KolCombobox,
 	KolTextarea,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 
 import { SampleDescription } from '../components/SampleDescription';
 import { COUNTRY_SUGGESTIONS } from '../shares/country';
 
-import type { HTMLStencilElement } from '@stencil/core/internal';
 import type { W3CInputValue } from '@public-ui/components';
+import type { HTMLStencilElement } from '@stencil/core/internal';
 
 const EventTargetContext = createContext<EventTarget | undefined>(undefined);
 const EventLoggerActiveContext = createContext<boolean>(false);
@@ -37,14 +37,16 @@ type Props = {
 	testId?: string;
 };
 const Scenario = (props: Props) => {
-	const ref = useRef<HTMLStencilElement & { getValue: () => Promise<any> }>();
-	const [value, setValue] = useState<unknown>(undefined);
+	const ref = useRef<HTMLStencilElement & { getValue: () => Promise<any> }>(null);
+	const [displayValue, setDisplayValue] = useState<unknown>(undefined);
+	const [modelValue, setModelValue] = useState<unknown>(props.inputProps._value);
 	const formatter = props.formatter || JSON.stringify;
 	const eventTarget = useContext(EventTargetContext);
 	const eventLoggerActive = useContext(EventLoggerActiveContext);
 
 	const handleButtonClick = async () => {
-		setValue(await ref.current?.getValue());
+		const value = await ref.current?.getValue();
+		setDisplayValue(value);
 	};
 
 	useEffect(() => {
@@ -65,6 +67,9 @@ const Scenario = (props: Props) => {
 				if (eventLoggerActive) {
 					console.log(props.inputProps._label, eventName, value, event);
 				}
+				if (eventName === 'onInput') {
+					setModelValue(value);
+				}
 			},
 		]),
 	);
@@ -72,7 +77,7 @@ const Scenario = (props: Props) => {
 	return (
 		<>
 			<div className="grid grid-cols-3 items-end gap-4" data-testid={props.testId}>
-				<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} />
+				<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} _value={modelValue} />
 				<KolButton
 					_label="getValue()"
 					_on={{
@@ -81,7 +86,7 @@ const Scenario = (props: Props) => {
 						},
 					}}
 				></KolButton>
-				<pre className="text-base">{formatter(value)}</pre>
+				<pre className="text-base">{formatter(displayValue)}</pre>
 			</div>
 		</>
 	);

package/src/scenarios/performance-test.tsx

@@ -0,0 +1,27 @@
+import { KolInputCheckbox, KolInputNumber, KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+
+const MAX_LENGTH = 333;
+const NUMBER_OF_INPUTS = new Array(MAX_LENGTH).fill(0).map((_, i) => i + 1);
+
+export const PerformanceTest: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This example renders many KoliBri components to show the performance.</p>
+			</SampleDescription>
+
+			<div className="w-full grid gap-4">
+				{NUMBER_OF_INPUTS.map((idx) => (
+					<div className="flex flex-wrap items-end gap-4" key={idx}>
+						<KolInputText _label={`TextInput #${idx}`} />
+						<KolInputNumber _label={`NumberInput #${idx}`} />
+						<KolInputCheckbox _label={`Checkbox #${idx}`} />
+					</div>
+				))}
+			</div>
+		</>
+	);
+};