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

package/src/components/input-password/partials/cases.tsx

@@ -1,23 +1,21 @@
 import React, { forwardRef } from 'react';
+import { KolInputPassword } from '@public-ui/react-v19';
+import type { Components } from '@public-ui/components';
 
-import { KolInputPassword } from '@public-ui/react';
-
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordCases(props, ref) {
 	return (
 		<div className="grid gap-4">
 			<div className="black-background">
 				<KolInputPassword {...props} _label="Passwort (Black background test)" />
 			</div>
-			<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
-			<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
 			<KolInputPassword
 				{...props}
 				ref={ref}
 				_accessKey="P"
 				_required
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_placeholder="Mit Icons"
 				_label="Passwort"
@@ -31,6 +29,11 @@ export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Compon
 				}}
 				_touched
 			/>
+			<KolInputPassword {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Password" />
+			<KolInputPassword {...props} _placeholder="Placeholder" _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Password" />
+			<KolInputPassword {...props} _placeholder="Placeholder" _msg={{ _type: 'success', _description: 'Success message' }} _label="Password" />
+			<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
+			<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
 			<KolInputPassword {...props} ref={ref} _shortKey="c" _label="With access key" />
 			<KolInputPassword {...props} ref={ref} _shortKey="s" _label="With short key" />
 		</div>

package/src/components/input-password/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputPasswordCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputPasswordVariants = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Password</legend>
 				<InputPasswordCases {...props} />
@@ -14,6 +15,6 @@ export const InputPasswordVariants = forwardRef<HTMLKolInputPasswordElement, Com
 				<legend>Password (hideLabel)</legend>
 				<InputPasswordCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useRef } from 'react';
 
-import { KolForm, KolInputPassword } from '@public-ui/react';
+import { KolForm, KolInputPassword } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputPasswordShowPassword: FC = () => {
@@ -18,6 +18,14 @@ export const InputPasswordShowPassword: FC = () => {
 
 			<KolForm className="w-full">
 				<KolInputPassword _placeholder="With 'Show password' button" _label="Password" ref={passwordRef} className="block" _variant="visibility-toggle" />
+				<KolInputPassword
+					_placeholder="With 'Show password' button"
+					_label="Password"
+					ref={passwordRef}
+					className="block"
+					_variant="visibility-toggle"
+					_value="Password"
+				/>
 				<KolInputPassword
 					_placeholder="With 'Show password' button and disabled"
 					_label="Password"

package/src/components/input-radio/basic.tsx

@@ -11,6 +11,6 @@ export const InputRadioBasic: FC = () => (
 			<p>KolInputRadio renders a set of radio buttons. The sample shows KolInputRadio in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputRadioVariants} />
+		<FormWrap RefComponent={InputRadioVariants} showButtons={false} />
 	</>
 );

package/src/components/input-radio/horizontal.tsx

@@ -1,14 +1,14 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react';
+import { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 
-import type { Orientation } from '@public-ui/components';
+import type { OrientationPropType } from '@public-ui/components';
 export const InputRadioHorizontal: FC = () => {
 	const [show, setShow] = useState(true);
-	const [orientation, setOrientation] = useState<Orientation>('horizontal');
+	const [orientation, setOrientation] = useState<OrientationPropType>('horizontal');
 
 	const options = [
 		{ label: 'Field 1', value: 1 },

package/src/components/input-radio/objectValue.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolForm, KolInputRadio } from '@public-ui/react';
+import { KolForm, KolInputRadio } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 

package/src/components/input-radio/partials/cases.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { KolInputRadio } from '@public-ui/react';
+import { KolInputRadio } from '@public-ui/react-v19';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
@@ -27,7 +27,6 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 			<KolInputRadio
 				{...props}
 				ref={ref}
-				_accessKey="A"
 				_orientation="horizontal"
 				_required
 				_value="Company"
@@ -68,18 +67,6 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 				_label="Salutation (horizontal with error hint and description)"
 				_hint={HINT_MSG}
 			/>
-			<KolInputRadio
-				{...props}
-				_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
-				_label="With access key"
-				_accessKey="c"
-			/>
-			<KolInputRadio
-				{...props}
-				_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
-				_label="With short key"
-				_shortKey="s"
-			/>
 		</div>
 	);
 });

package/src/components/input-radio/partials/variants.tsx

@@ -3,17 +3,20 @@ import React, { forwardRef } from 'react';
 import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
+import { KolHeading } from '@public-ui/react-v19';
+
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
-			<fieldset>
-				<legend>Radio</legend>
+		<SampleColumns>
+			<div className="border border-solid border-dark-100 p-3">
+				<KolHeading _level={2} _label="Radio" className="block mb-2" />
 				<InputRadioCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Radio (hideLabel)</legend>
+			</div>
+			<div className="border border-solid border-dark-100 p-3">
+				<KolHeading _level={2} _label="Radio (hideLabel)" className="block mb-2" />
 				<InputRadioCases ref={ref} {...props} _hideLabel />
-			</fieldset>
-		</div>
+			</div>
+		</SampleColumns>
 	);
 });

package/src/components/input-range/basic.tsx

@@ -14,6 +14,6 @@ export const InputRangeBasic: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputRangeVariants} />
+		<FormWrap RefComponent={InputRangeVariants} showButtons={false} />
 	</>
 );

package/src/components/input-range/partials/cases.tsx

@@ -1,10 +1,9 @@
 import React, { forwardRef } from 'react';
+import { KolInputRange } from '@public-ui/react-v19';
+import type { Components } from '@public-ui/components';
 
-import { KolInputRange } from '@public-ui/react';
-
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -33,10 +32,14 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				_min={0}
 				_max={50}
 				_step={10}
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Slider with error"
 				_touched
 			/>
+			<KolInputRange {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Slider" />
+			<KolInputRange {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Slider" />
+			<KolInputRange {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Slider" />
 			<KolInputRange {...props} _disabled _min={0} _max={50} _label="Slider (disabled)" />
 			<KolInputRange {...props} _min={0} _max={50} _label="With access key" _accessKey="c" />
 			<KolInputRange {...props} _min={0} _max={50} _label="With short key" _shortKey="s" />

package/src/components/input-range/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputRangeCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Range</legend>
 				<InputRangeCases {...props} />
@@ -14,6 +15,6 @@ export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Component
 				<legend>Range (hideLabel)</legend>
 				<InputRangeCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

package/src/components/input-text/basic.tsx

@@ -11,6 +11,6 @@ export const InputTextBasic: FC = () => (
 			<p>KolInputText renders a text input field. The sample shows KolInputText in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputTextVariants} />
+		<FormWrap RefComponent={InputTextVariants} showButtons={false} />
 	</>
 );

package/src/components/input-text/expert-slot.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolInputText } from '@public-ui/react';
+import { KolInputText } from '@public-ui/react-v19';
 
 export const InputTextExpertSlot = () => {
 	return (

package/src/components/input-text/{hide-errors.tsx → hide-msg.tsx}

@@ -1,14 +1,14 @@
-import { KolAlert, KolCard, KolInputText } from '@public-ui/react';
+import { KolAlert, KolCard, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
-export const InputTextHideErrors: FC = () => (
+export const InputTextHideMsg: FC = () => (
 	<div className="grid gap-4">
 		<SampleDescription>
 			<p>
-				This sample shows the <code>_hideError</code> feature for KolInputText. It allows to hide the error message from an input field and can be used, when
-				the error is already shown somewhere else, e.g. for a group of inputs.
+				This sample shows the <code>_hideMsg</code> feature for KolInputText. It allows to hide the message from an input field and can be used, when the
+				message (e.g. error) is already shown somewhere else, e.g. for a group of inputs.
 			</p>
 		</SampleDescription>
 
@@ -21,8 +21,8 @@ export const InputTextHideErrors: FC = () => (
 				<KolAlert className="col-span-2" _level={0} _type="error">
 					This is a combined error message
 				</KolAlert>
-				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="First input" _touched />
-				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="Second input with error" _touched />
+				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label="First input" _touched />
+				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label="Second input with error" _touched />
 			</fieldset>
 		</KolCard>
 	</div>

package/src/components/input-text/partials/cases.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { KolInputText } from '@public-ui/react';
+import { KolInputText } from '@public-ui/react-v19';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
@@ -14,13 +14,14 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText
 				{...props}
 				_hint={HINT_MSG}
-				_msg={{ _type: 'error', _description: ERROR_MSG, _label: 'test headline' }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_placeholder="With icons"
 				_icons={{
 					right: {
 						icon: 'codicon codicon-arrow-right',
 						style: {
 							'font-size': '200%',
+							'margin-right': 'calc(-8rem / var(--kolibri-root-font-size, 16))',
 						},
 					},
 				}}
@@ -41,14 +42,13 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _type="url" _label="URL (url)" />
 			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telephone (tel)" _msg={{ _type: 'warning', _description: 'Small warning' }} />
 			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telephone (tel)" _msg={{ _type: 'success', _description: 'Success message' }} />
-			<KolInputText {...props} _placeholder="Placeholder" _label="With counter" _hasCounter _maxLength={10} _value="Lorem Ipsum" />
+			<KolInputText {...props} _placeholder="Placeholder" _label="With counter" _maxLength={10} _value="Lorem Ipsum" />
 			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="First name (text, readonly)" />
 			<KolInputText {...props} _value="Value" _readOnly _label="First name (text, readonly)" />
 			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="First name (text, disabled)" />
 			<KolInputText {...props} _value="Value" _disabled _label="First name (text, disabled)" />
 			<KolInputText {...props} _value="Value" _label="With access key" _accessKey="c" />
 			<KolInputText {...props} _value="Value" _label="With short key" _shortKey="s" />
-			<KolInputText {...props} _value="Value" _label="With both key" _shortKey="d" _accessKey="e" />
 		</div>
 	);
 });

package/src/components/input-text/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputTextCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputTextVariants = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<InputTextCases {...props} />
@@ -14,6 +15,6 @@ export const InputTextVariants = forwardRef<HTMLKolInputTextElement, Components.
 				<legend>Text (hideLabel)</legend>
 				<InputTextCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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

@@ -1,6 +1,6 @@
 import { Routes } from '../../shares/types';
 import { InputTextBasic } from './basic';
-import { InputTextHideErrors } from './hide-errors';
+import { InputTextHideMsg } from './hide-msg';
 import { InputTextFormatterDemo } from './text-formatter';
 import { InputTextSmartButton } from './smart-button';
 import { InputTextExpertSlot } from './expert-slot';
@@ -8,7 +8,7 @@ import { InputTextExpertSlot } from './expert-slot';
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
-		'hide-errors': InputTextHideErrors,
+		'hide-msg': InputTextHideMsg,
 		'text-formatter': InputTextFormatterDemo,
 		'smart-button': InputTextSmartButton,
 		'expert-slot': InputTextExpertSlot,

package/src/components/input-text/smart-button.tsx

@@ -1,23 +1,32 @@
 import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
 import { ToasterService } from '@public-ui/components';
-import { KolInputText } from '@public-ui/react';
+import { KolInputText } from '@public-ui/react-v19';
+
+const smartButtonProps = {
+	_icons: 'codicon codicon-info',
+	_hideLabel: true,
+};
+
+const icons = {
+	left: {
+		icon: 'codicon codicon-arrow-left',
+	},
+	right: {
+		icon: 'codicon codicon-arrow-right',
+	},
+};
 
 export const InputTextSmartButton = () => {
 	const toaster = ToasterService.getInstance(document);
 
-	const smartButton = {
-		_icons: 'codicon codicon-info',
-		_hideLabel: true,
-		_label: 'Alert',
-		_on: {
-			onClick: () => {
-				void toaster.enqueue({
-					description: 'Smart-Button clicked',
-					label: `Toaster`,
-					type: 'default',
-				});
-			},
+	const handleClick = {
+		onClick: () => {
+			void toaster.enqueue({
+				description: 'Smart-Button clicked',
+				label: `Toaster`,
+				type: 'default',
+			});
 		},
 	};
 
@@ -27,7 +36,27 @@ export const InputTextSmartButton = () => {
 				<p>This sample shows the smart button feature for KolInputText. It allows the usage of a button inside the bnput.</p>
 			</SampleDescription>
 
-			<KolInputText _label="With Smart Button" _type="text" _smartButton={smartButton}></KolInputText>
+			<div className="grid gap-4">
+				<KolInputText
+					_label="Input with button and icons"
+					_type="text"
+					_smartButton={{
+						...smartButtonProps,
+						_label: 'Open Toast',
+						_on: handleClick,
+					}}
+					_icons={icons}
+				></KolInputText>
+				<KolInputText
+					_label="Disabled input with button and without icons"
+					_disabled
+					_type="text"
+					_smartButton={{
+						...smartButtonProps,
+						_label: 'Disabled Button',
+					}}
+				></KolInputText>
+			</div>
 		</>
 	);
 };

package/src/components/input-text/text-formatter.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Formik, Field, type FieldProps } from 'formik';
-import { KolForm, KolHeading, KolInputText } from '@public-ui/react';
+import { KolForm, KolHeading, KolInputText } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { NumericFormat, type NumberFormatValues } from 'react-number-format';
@@ -111,12 +111,11 @@ export function InputTextFormatterDemo() {
 										{({ field }: FieldProps<CurrencyExampleFormValues['currency']>) => (
 											<div className="block mt-2">
 												<NumericFormat
-													customInput={({ type, value, onBlur, onChange, onFocus, ...other }: any) => {
-														console.log('OTHER: ', other);
+													customInput={({ type, value, onBlur, onChange, onFocus }: any) => {
 														return <KolInputText _label="Currency" _type={type} _value={value} _on={{ onBlur, onChange, onFocus }} />;
 													}}
 													displayType="input"
-													value={typeof field.value === 'number' ? Number(field.value).toFixed(2) : undefined}
+													value={typeof field.value === 'number' ? field.value.toFixed(2) : undefined}
 													onBlur={() => {
 														void form.setFieldTouched('currency', true);
 													}}

package/src/components/kolibri/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolKolibri } from '@public-ui/react';
+import { KolHeading, KolKolibri } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 

package/src/components/link/access-key.tsx

@@ -1,15 +1,13 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkAccessKey: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>
-			</p>
+			<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">

package/src/components/link/aria-description.tsx

@@ -1,4 +1,4 @@
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 import React from 'react';
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/link/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink, KolHeading } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkBasic: FC = () => (
@@ -13,23 +13,25 @@ export const LinkBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolLink _href="#/back-page" _label="Simple Link" />
-			<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" />
-			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" />
-			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" />
+			<KolHeading _level={2} _label="Links with variant 'standalone'" />
+			<KolLink _href="#/back-page" _label="Simple Link" _variant="standalone" />
+			<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" _variant="standalone" />
+			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" _variant="standalone" />
+			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" _variant="standalone" />
+
+			<KolHeading _level={2} _label="Links with variant 'inline'" />
 			<p>
-				In this paragraph, a link is inserted that contains no additional attributes.
-				<KolLink _href="#/back-page" _label="Simple Link" />
-				It is rendered by default as a <strong>inline element</strong>.
+				In this paragraph, a link is inserted that contains no additional attributes. <KolLink _href="#/back-page" _label="Simple Link" /> It is rendered by
+				default as a <strong>inline element</strong>.
 			</p>
 			<p>
-				In this paragraph, a link is inserted that is rendered as an inline-block element.
+				In this paragraph, a link is inserted that is rendered as an inline-block element.{' '}
 				<KolLink class="d-inline-block" _accessKey="S" _href="#/back-page" _label="Simple Link" />. This allows you to assign width, height, and other
 				properties to it using CSS styles.
 				<br />
 				<br />
-				After that, there is a link that is rendered as a block element.
-				<KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, therefore, I span the entire width of the parent element, causing a line break.
+				After that, there is a link that is rendered as a block element. <KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, therefore, I span
+				the entire width of the parent element, causing a line break.
 			</p>
 		</div>
 	</>

package/src/components/link/icons.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/link/image.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkImage: FC = () => (

package/src/components/link/link-react-router.tsx

@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { KolLink } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+export const LinkReactRouter: FC = () => {
+	const navigate = useNavigate();
+
+	const on = {
+		onClick: (event: Event) => {
+			event.preventDefault();
+			navigate('/back-page');
+		},
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample shows how KolLink works with react-router. Primary click uses preventDefault() and navigate(...), while right click open in new tab still
+					follows _href. Make sure _href and navigate(...) point to the same path.
+				</p>
+			</SampleDescription>
+
+			<div className="grid gap-4">
+				<KolLink _href="/back-page" _label="Go to overview" _variant="standalone" _on={on} />
+			</div>
+		</>
+	);
+};

package/src/components/link/routes.ts

@@ -6,6 +6,7 @@ import { LinkTarget } from './target';
 import { LinkAriaDescription } from './aria-description';
 import { LinkAccessKey } from './access-key';
 import { LinkShortKey } from './short-key';
+import { LinkReactRouter } from './link-react-router';
 
 export const LINK_ROUTES: Routes = {
 	link: {
@@ -16,5 +17,6 @@ export const LINK_ROUTES: Routes = {
 		'aria-description': LinkAriaDescription,
 		'access-key': LinkAccessKey,
 		'short-key': LinkShortKey,
+		'react-router': LinkReactRouter,
 	},
 };

package/src/components/link/short-key.tsx

@@ -1,14 +1,14 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkShortKey: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.{' '}
+				This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.
 			</p>
 		</SampleDescription>