@public-ui/sample-react 2.1.1 → 2.1.3

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.16.0
+ * @remix-run/router v1.17.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.23.0
+ * React Router v6.24.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
-    "@leanup/stack": "1.3.50",
-    "@leanup/stack-react": "1.3.50",
-    "@leanup/stack-webpack": "1.3.50",
+    "@leanup/stack": "1.3.54",
+    "@leanup/stack-react": "1.3.54",
+    "@leanup/stack-webpack": "1.3.54",
     "@types/node": "ts5.4",
-    "@types/react": "18.3.1",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@unocss/preset-uno": "0.58.9",
     "@unocss/webpack": "0.58.9",
-    "ajv": "8.12.0",
-    "chromedriver": "124.0.1",
+    "ajv": "8.16.0",
+    "chromedriver": "124.0.4",
     "cpy-cli": "5.0.0",
-    "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-plugin-react": "7.34.3",
     "formik": "2.4.6",
-    "nightwatch-axe-verbose": "2.3.0",
+    "nightwatch-axe-verbose": "2.3.1",
     "npm-run-all": "4.1.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router": "6.23.0",
-    "react-router-dom": "6.23.0",
-    "rimraf": "5.0.5",
+    "react-router": "6.24.0",
+    "react-router-dom": "6.24.0",
+    "rimraf": "5.0.7",
     "ts-prune": "0.10.3",
-    "typescript": "5.4.5",
+    "typescript": "5.5.2",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0",
-    "@public-ui/components": "2.1.1",
-    "@public-ui/themes": "2.1.1",
-    "@public-ui/react": "2.1.1"
+    "@public-ui/react": "2.1.3",
+    "@public-ui/components": "2.1.3",
+    "@public-ui/themes": "2.1.3"
   },
   "files": [
     ".eslintignore",

package/src/App.tsx

@@ -132,6 +132,8 @@ export const App: FC = () => {
 						sample={routerLocation.pathname}
 						routes={ROUTES}
 						routeList={ROUTE_LIST}
+						buildDate={process.env.BUILD_DATE}
+						commitHash={process.env.COMMIT_HASH}
 						onThemeChange={handleThemeChange}
 					/>
 				)}

package/src/components/FormWrap.tsx

@@ -1,10 +1,7 @@
+import type { FC } from 'react';
 import React from 'react';
 
 import { KolButton, KolForm } from '@public-ui/react';
-
-import { FocusElement } from './FocusInput';
-
-import type { FC } from 'react';
 import type { RefFormComponent } from './types';
 
 type FormWrapProps = {
@@ -14,7 +11,7 @@ type FormWrapProps = {
 export const FormWrap: FC<FormWrapProps> = (props) => (
 	<KolForm>
 		<div className="grid gap-4">
-			<FocusElement {...props} />
+			<props.RefComponent {...props} />
 			<div className="flex gap-4">
 				<KolButton _label="Submit" _icons="codicon codicon-arrow-right" _type="submit" _variant="primary" />
 				<KolButton

package/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { KolAccordion, KolButton, KolHeading, KolLink, KolSelect, KolVersion } from '@public-ui/react';
 
@@ -13,6 +13,8 @@ type Props = {
 	routes: Routes;
 	routeList: string[];
 	sample: string;
+	buildDate?: string;
+	commitHash?: string;
 	onThemeChange: (theme: unknown) => void;
 };
 
@@ -24,20 +26,15 @@ const ComponentNavContainer = ({ children, isMobile }: PropsWithChildren<{ isMob
 	) : (
 		<div className="mt">{children}</div>
 	);
-export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample, onThemeChange }) => {
+export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample, buildDate, commitHash, onThemeChange }) => {
 	/* KolSelect calls onChange initially by design - work around this with a state variable  */
-	const [isFirstThemeSelectChange, setIsFirstThemeSelectChange] = useState(true);
 	const isMobile = useMobile();
 
 	const getIndexOfSample = () => routeList.indexOf(sample);
 	const formatSampleAsLabel = () => sample.replace(/\//g, ' ');
 
 	const handleThemeSelectChange = (_event: Event, value: unknown) => {
-		if (isFirstThemeSelectChange) {
-			setIsFirstThemeSelectChange(false);
-		} else {
-			onThemeChange((value as [string])[0]);
-		}
+		onThemeChange((value as [string])[0]);
 	};
 
 	const handleLinkClick = (event: Event) => {
@@ -63,6 +60,13 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 				<KolHeading _label="KoliBri React"></KolHeading>
 				<KolVersion _label={version}></KolVersion>
 			</div>
+			{(buildDate || commitHash) && (
+				<div className="text-sm font-mono color-gray-5 m-t-2">
+					{commitHash ? `Build: ${commitHash}` : ''}
+					<br />
+					{buildDate ? `at ${buildDate}` : ''}
+				</div>
+			)}
 
 			<KolSelect _label="Theme wählen" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
 

package/src/components/button/basic.tsx

@@ -1,7 +1,5 @@
 import type { FC } from 'react';
 import React from 'react';
-
-import { FocusElement } from '../FocusInput';
 import { ButtonVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
 
@@ -10,6 +8,7 @@ export const ButtonBasic: FC = () => (
 		<SampleDescription>
 			<p>Hier sind anklickbare und nicht anklickbare Buttons. Es gibt außerdem Buttons mit Label und ohne Label.</p>
 		</SampleDescription>
-		<FocusElement RefComponent={ButtonVariants} />
+
+		<ButtonVariants />
 	</>
 );

package/src/components/form/basic.tsx

@@ -0,0 +1,19 @@
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolForm, KolInputText } from '@public-ui/react';
+
+export const FormBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Dieses Beispiel zeigt ein Formular mit drei Eingabefeldern.</p>
+		</SampleDescription>
+		<KolForm>
+			<div className="grid gap-2">
+				<KolInputText id="input1" _label="Eingabe 1" />
+				<KolInputText id="input2" _label="Eingabe 2" />
+				<KolInputText id="input3" _label="Eingabe 3" />
+			</div>
+		</KolForm>
+	</>
+);

package/src/components/form/error-list.tsx

@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolForm, KolInputText } from '@public-ui/react';
+
+export const FormErrorList: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Dieses Beispiel zeigt ein Formular mit drei Eingabefeldern. Das zweite Eingabefeld enthält einen Fehler. </p>
+		</SampleDescription>
+		<KolForm
+			_errorList={[
+				{
+					message: 'Fehler in Eingabe 2',
+					selector: '#input2',
+				},
+			]}
+		>
+			<div className="grid gap-2">
+				<KolInputText id="input1" _label="Eingabe 1" />
+				<KolInputText id="input2" _label="Eingabe 2" _touched _msg={{ _description: 'Fehlerhafte Eingabe', _type: 'error' }} />
+				<KolInputText id="input3" _label="Eingabe 3" />
+			</div>
+		</KolForm>
+	</>
+);

package/src/components/form/routes.ts

@@ -1,5 +1,10 @@
 import { Routes } from '../../shares/types';
+import { FormBasic } from './basic';
+import { FormErrorList } from './error-list';
 
 export const FORM_ROUTES: Routes = {
-	form: {},
+	form: {
+		basic: FormBasic,
+		'error-list': FormErrorList,
+	},
 };

package/src/components/handout/basic.tsx

@@ -27,7 +27,6 @@ import {
 	KolKolibri,
 	KolLink,
 	KolLinkButton,
-	KolLogo,
 	KolNav,
 	KolProgress,
 	KolSelect,
@@ -883,9 +882,6 @@ export const HandoutBasic: FC = () => (
 							<p>
 								Ich bin ein <KolLink _href="#/back-page" _label="externer Link" _target="w3c"></KolLink> im Fließtext.
 							</p>
-							<KolLink _href="#/back-page" _label="">
-								<KolLogo slot="expert" class="inline-flex w-50" _org={Bundesanstalt['Informationstechnikzentrum Bund']} />
-							</KolLink>
 						</div>
 					</KolAccordion>
 					<KolAccordion _label="ButtonLinks" _level={3}>
@@ -896,9 +892,6 @@ export const HandoutBasic: FC = () => (
 							<p>
 								Ich bin ein <KolButtonLink _label="Link"></KolButtonLink> im Fließtext.
 							</p>
-							<KolButtonLink _label="">
-								<KolLogo slot="expert" class="inline-flex w-50" _org={Bundesanstalt['Informationstechnikzentrum Bund']} />
-							</KolButtonLink>
 							<KolButtonLink
 								_icons={{
 									left: 'codicon codicon-arrow-left',

package/src/components/input-password/show-password.tsx

@@ -1,21 +1,11 @@
 import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef } from 'react';
 
 import { KolForm, KolInputPassword } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputPasswordShowPassword: FC = () => {
-	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 	const passwordRef = useRef<HTMLKolInputPasswordElement>(null);
-	const handleTogglePasswordClick = () => {
-		setIsPasswordVisible(!isPasswordVisible);
-	};
-	useEffect(() => {
-		const input = passwordRef.current?.shadowRoot?.querySelector('input');
-		if (input) {
-			input.type = isPasswordVisible ? 'text' : 'password';
-		}
-	}, [isPasswordVisible]);
 
 	return (
 		<>
@@ -26,42 +16,14 @@ export const InputPasswordShowPassword: FC = () => {
 				</p>
 			</SampleDescription>
 			<KolForm>
-				<KolInputPassword
-					_placeholder="Mit 'Passwort anzeigen' Button"
-					_label="Passwort"
-					ref={passwordRef}
-					_smartButton={{
-						_icons: {
-							left: {
-								icon: 'codicon codicon-eye',
-							},
-						},
-						_hideLabel: true,
-						_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
-						_on: {
-							onClick: handleTogglePasswordClick,
-						},
-					}}
-					className="block"
-				/>
+				<KolInputPassword _placeholder="Mit 'Passwort anzeigen' Button" _label="Passwort" ref={passwordRef} className="block" _variant="visibility-toggle" />
 				<KolInputPassword
 					_placeholder="Mit 'Passwort anzeigen' Button und disabled"
 					_label="Passwort"
 					ref={passwordRef}
-					_smartButton={{
-						_icons: {
-							left: {
-								icon: 'codicon codicon-eye',
-							},
-						},
-						_hideLabel: true,
-						_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
-						_on: {
-							onClick: handleTogglePasswordClick,
-						},
-					}}
 					className="block"
 					_disabled
+					_variant="visibility-toggle"
 				/>
 			</KolForm>
 		</>

package/src/components/input-text/routes.ts

@@ -1,14 +1,12 @@
 import { Routes } from '../../shares/types';
 import { InputTextBasic } from './basic';
 import { InputTextBlur } from './blur';
-import { InputTextFocus } from './focus';
 import { InputTextHideErrors } from './hide-errors';
 
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
 		blur: InputTextBlur,
-		focus: InputTextFocus,
 		'hide-errors': InputTextHideErrors,
 	},
 };

package/src/components/pagination/basic.tsx

@@ -13,8 +13,8 @@ export const PaginationBasic: FC = () => (
 			</p>
 		</SampleDescription>
 		<div className="grid gap-4">
-			<KolPagination _max={10} _page={6} _siblingCount={0} _label="Test Paginierung 1" _on={{}} />
-			<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 2" _on={{}} />
+			<KolPagination _max={316514} _page={15475} _siblingCount={3} _label="Test Paginierung 1" _on={{}} />
+			<KolPagination _max={14} _page={14} _siblingCount={1} _boundaryCount={2} _label="Test Paginierung 2" _on={{}} />
 			<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 3" _on={{}} />
 			<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label="Test Paginierung 4" _on={{}} />
 			<KolPagination

package/src/components/table/routes.ts

@@ -8,6 +8,7 @@ import { TableRenderCell } from './render-cell';
 import { TableSortData } from './sort-data';
 import { TableStateless } from './stateless';
 import { TableWithFooter } from './with-footer';
+import { TableStatefulWithSelection } from './stateful-with-selection';
 import { TableStatelessWithSelection } from './stateless-with-selection';
 import { TableWithPagination } from './with-pagination';
 
@@ -21,6 +22,7 @@ export const TABLE_ROUTES: Routes = {
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortData,
 		'with-footer': TableWithFooter,
+		'stateful-with-selection': TableStatefulWithSelection,
 		'stateless-with-selection': TableStatelessWithSelection,
 		'with-pagination': TableWithPagination,
 		stateless: TableStateless,

package/src/components/table/stateful-with-selection.tsx

@@ -0,0 +1,78 @@
+import type { FC } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { KolButton, KolTableStateful } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+import type { KoliBriTableSelection } from '@public-ui/components';
+
+const DATA = [
+	{ id: '1001', name: 'Foo Bar' },
+	{ id: '1002', name: 'Foo Baz' },
+];
+type Data = (typeof DATA)[0];
+
+export const TableStatefulWithSelection: FC = () => {
+	const [selectedValue, setSelectedValue] = useState<Data[]>();
+
+	const selection: KoliBriTableSelection = {
+		label: (row: Data) => `Selection for ${row.name}`,
+		selectedKeys: selectedValue ? selectedValue.map((element) => element.id) : [],
+		keyPropertyName: 'id',
+	};
+
+	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>();
+
+	const handleSelectionChangeEvent = ({ detail: selection }) => {
+		console.log('Selection change via event', selection);
+	};
+	const handleSelectionChangeCallback = (_event, selection) => {
+		console.log('Selection change via callback', selection);
+	};
+
+	const handleButtonClick = async () => {
+		const selection = await kolTableStatefulRef.current?.getSelection();
+		setSelectedValue(selection);
+	};
+
+	useEffect(() => {
+		kolTableStatefulRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+
+		return () => {
+			kolTableStatefulRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+		};
+	}, [kolTableStatefulRef]);
+
+	return (
+		<>
+			<SampleDescription>KolTableStateful with selection</SampleDescription>
+
+			<KolTableStateful
+				_label="Table with selection checkboxes"
+				_headers={{
+					horizontal: [
+						[
+							{ key: 'id', label: '#ID', textAlign: 'left' },
+							{ key: 'name', label: 'Name', textAlign: 'left' },
+						],
+					],
+				}}
+				_data={DATA}
+				_selection={selection}
+				_on={{ onSelectionChange: handleSelectionChangeCallback }}
+				className="block"
+				style={{ maxWidth: '600px' }}
+				ref={kolTableStatefulRef}
+			/>
+			<div className="grid grid-cols-3 items-end gap-4 mt-4">
+				<KolButton
+					_label="getSelection()"
+					_on={{
+						onClick: () => {
+							void handleButtonClick();
+						},
+					}}
+				></KolButton>
+				<pre>{JSON.stringify(selectedValue, null, 2)}</pre>
+			</div>
+		</>
+	);
+};

package/src/components/tabs/basic.tsx

@@ -8,6 +8,11 @@ const tabs = [
 	{
 		_icons: 'codicon codicon-pie-chart',
 		_label: 'Erster Tab',
+		_on: {
+			onSelect: (event) => {
+				console.log('Erster Tab ausgewählt', event);
+			},
+		},
 	},
 	{
 		_icons: 'codicon codicon-calendar',

package/src/components/types.tsx

@@ -1,6 +1,3 @@
-import { FormWrap } from './FormWrap';
-
-import type { ButtonVariants } from './button/partials/variants';
 import type { InputCheckboxVariants } from './input-checkbox/partials/variants';
 import type { InputColorVariants } from './input-color/partials/variants';
 import type { InputDateVariants } from './input-date/partials/variants';
@@ -27,17 +24,3 @@ export type RefFormComponent =
 	| typeof InputTextVariants
 	| typeof SelectVariants
 	| typeof TextareaVariants;
-
-export type RefComponent =
-	// | typeof AbbrVariants
-	// | typeof AccordionVariants
-	// | typeof AlertVariants
-	| typeof ButtonVariants
-	// | typeof ButtonLinkVariants
-	// | typeof CardVariants
-	// | typeof LinkVariants
-	// | typeof LinkButtonVariants
-	// | typeof PopoverVariants
-	// | typeof SplitButtonVariants
-	// | typeof TabsVariants
-	| RefFormComponent;

package/src/scenarios/focus-elements.tsx

@@ -0,0 +1,140 @@
+import {
+	KolAccordion,
+	KolAlert,
+	KolButton,
+	KolButtonLink,
+	KolDetails,
+	KolInputCheckbox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRadio,
+	KolInputRange,
+	KolInputText,
+	KolLink,
+	KolLinkButton,
+	KolSelect,
+	KolTextarea,
+} from '@public-ui/react';
+import type { FC, ForwardRefRenderFunction } from 'react';
+import { useMemo } from 'react';
+import React, { forwardRef, useLayoutEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+const getFocusElements = () => {
+	const focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();
+	focusElements.set('inputCheckbox', (_, ref) => <KolInputCheckbox _name="checkbox" _label="Checkbox" ref={ref} />);
+	focusElements.set('inputColor', (_, ref) => <KolInputColor _name="color" _label="Color" ref={ref} />);
+	focusElements.set('inputDate', (_, ref) => <KolInputDate _name="date" _label="Date" ref={ref} />);
+	focusElements.set('inputEmail', (_, ref) => <KolInputEmail _name="email" _label="Email" ref={ref} />);
+	focusElements.set('inputFile', (_, ref) => <KolInputFile _name="file" _label="File" ref={ref} />);
+	focusElements.set('inputFileMultiple', (_, ref) => <KolInputFile _name="file" _label="Files (multiple)" _multiple ref={ref} />);
+	focusElements.set('inputNumber', (_, ref) => <KolInputNumber _name="number" _label="Number" ref={ref} />);
+	focusElements.set('inputPassword', (_, ref) => <KolInputPassword _name="password" _label="Password" ref={ref} />);
+	focusElements.set('inputRadio', (_, ref) => (
+		<KolInputRadio
+			_name="radio"
+			_label="Radio"
+			_options={[
+				{ label: 'Option A', value: 'A' },
+				{ label: 'Option B', value: 'B' },
+			]}
+			_value="A"
+			ref={ref}
+		/>
+	));
+	focusElements.set('inputRange', (_, ref) => <KolInputRange _name="range" _label="Range" ref={ref} />);
+	focusElements.set('inputText', (_, ref) => <KolInputText _name="text" _label="Text" ref={ref} />);
+	focusElements.set('select', (_, ref) => (
+		<KolSelect
+			_name="select"
+			_label="Select"
+			_options={[
+				{ label: 'Option A', value: 'A' },
+				{ label: 'Option B', value: 'B' },
+			]}
+			ref={ref}
+		/>
+	));
+	focusElements.set('selectMultiple', (_, ref) => (
+		<KolSelect
+			_name="select"
+			_label="Select (multiple)"
+			_multiple
+			_options={[
+				{ label: 'Option A', value: 'A' },
+				{ label: 'Option B', value: 'B' },
+			]}
+			_rows={2}
+			ref={ref}
+		/>
+	));
+	focusElements.set('textarea', (_, ref) => <KolTextarea _name="textarea" _label="Textarea" _rows={5} ref={ref} />);
+	focusElements.set('accordion', (_, ref) => <KolAccordion _label="Accordion here" ref={ref} />);
+	focusElements.set('button', (_, ref) => <KolButton _label="Button here" ref={ref}></KolButton>);
+	focusElements.set('buttonLink', (_, ref) => <KolButtonLink _label="ButtonLink here" ref={ref}></KolButtonLink>);
+	focusElements.set('details', (_, ref) => (
+		<KolDetails _label="Details here" ref={ref}>
+			detailed details
+		</KolDetails>
+	));
+	focusElements.set('link', (_, ref) => <KolLink _label="Link here" _href="#" ref={ref}></KolLink>);
+	focusElements.set('linkButton', (_, ref) => <KolLinkButton _label="LinkButton here" _href="#" ref={ref}></KolLinkButton>);
+
+	return focusElements;
+};
+
+type FallbackProps = {
+	invalidComponent?: boolean;
+};
+const Fallback = (props: FallbackProps) => {
+	const focusElements = useMemo(() => getFocusElements(), []);
+	const componentNames = [...focusElements.keys()].map((key) => key);
+
+	return (
+		<div>
+			{props.invalidComponent && (
+				<KolAlert _type="error" _variant="card">
+					Component not found.
+				</KolAlert>
+			)}
+
+			<h4>Focus Test Cases</h4>
+			<ul>
+				{componentNames.map((componentName) => (
+					<li key={componentName}>
+						<KolLink _label={componentName} _href={`#/scenarios/focus-elements?component=${componentName}`}></KolLink>
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+};
+
+export const FocusElements: FC = () => {
+	const ref = useRef(null);
+	const focusElements = useMemo(() => getFocusElements(), []);
+	const [searchParams] = useSearchParams();
+	const componentName = searchParams.get('component');
+
+	useLayoutEffect(() => {
+		setTimeout(() => {
+			(ref.current as unknown as HTMLElement)?.focus();
+		}, 500);
+	}, [ref]);
+
+	if (componentName) {
+		const Component = focusElements.get(componentName);
+		if (!Component) {
+			return <Fallback invalidComponent />;
+		}
+		const Element = forwardRef(Component);
+
+		return <Element ref={ref} />;
+	} else {
+		return <Fallback />;
+	}
+};

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

@@ -105,7 +105,8 @@ export const InputsGetValue: FC = () => {
 
 					<div className="grid gap-4">
 						<Scenario InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />
-						<Scenario InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox' }} />
+						<Scenario InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox (value)', _value: 'Checkbox True Value' }} />
+						<Scenario InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox (boolean)' }} />
 						<Scenario InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />
 						<Scenario InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />
 						<Scenario InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />

package/src/scenarios/routes.ts

@@ -4,6 +4,7 @@ import { CustomTooltipWidth } from './custom-tooltip-width';
 import { DisabledInteractiveElements } from './disabled-interactive-elements';
 import { InputsGetValue } from './inputs-get-value';
 import { StaticForm } from './static-form';
+import { FocusElements } from './focus-elements';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
@@ -12,5 +13,6 @@ export const SCENARIO_ROUTES: Routes = {
 		'custom-tooltip-width': CustomTooltipWidth,
 		'static-form': StaticForm,
 		'disabled-interactive-scenario': DisabledInteractiveElements,
+		'focus-elements': FocusElements,
 	},
 };