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

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

@@ -0,0 +1,215 @@
+import { KolForm, KolInputNumber, KolInputText } from '@public-ui/react-v19';
+import React, { type BaseSyntheticEvent } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { NumericFormat, type NumberFormatValues, type NumericFormatProps } from 'react-number-format';
+
+import { SampleDescription } from '../SampleDescription';
+
+type KolInputTextEvents = {
+	onBlur?: (event: Event) => void;
+	onChange?: (event: Event, value: unknown) => void;
+	onFocus?: (event: Event) => void;
+	onInput?: (event: Event, value: unknown) => void;
+};
+
+class NumberFormatter {
+	public parse(value: unknown): string {
+		if (value === undefined || value === null || value === '') {
+			return '';
+		}
+
+		const stringValue = String(value);
+		return stringValue.replace(/[eE.,]/g, '').replace(/\d[+-]/g, '');
+	}
+}
+
+const disallowedCharactersPattern = /[.,+eE]/;
+
+const preventInvalidKeyDown = (event: KeyboardEvent) => {
+	if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && disallowedCharactersPattern.test(event.key)) {
+		event.preventDefault();
+	}
+};
+
+type KolNumericFormatControllerProps = {
+	_label: string;
+	_msg?: React.ComponentProps<typeof KolInputText>['_msg'];
+	_touched?: boolean;
+	_on?: React.ComponentProps<typeof KolInputText>['_on'];
+	_required?: boolean;
+	value?: number;
+} & Omit<NumericFormatProps, 'customInput' | 'value' | 'onBlur' | 'onValueChange'>;
+
+function KolNumericFormat({
+	_label,
+	_msg,
+	_touched,
+	_on,
+	_required,
+	value,
+	thousandSeparator = true,
+	suffix = '€',
+	...props
+}: KolNumericFormatControllerProps) {
+	const normalizedOn = _on && typeof _on === 'object' ? (_on as KolInputTextEvents) : undefined;
+
+	return (
+		<NumericFormat
+			{...(props as any)}
+			value={value}
+			suffix={suffix}
+			thousandSeparator={thousandSeparator}
+			valueIsNumericString={false}
+			customInput={(inputProps: any) => {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+				const inputValue = inputProps.value;
+				return (
+					<KolInputText
+						{...inputProps}
+						_value={inputValue}
+						_label={_label}
+						_msg={_msg}
+						_touched={_touched}
+						_required={_required}
+						_on={{
+							// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+							onBlur: inputProps.onBlur as ((event: Event) => void) | undefined,
+							// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+							onChange: inputProps.onChange as ((event: Event, value: unknown) => void) | undefined,
+							// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+							onFocus: inputProps.onFocus as ((event: Event) => void) | undefined,
+							// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+							onInput: inputProps.onInput as ((event: Event, value: unknown) => void) | undefined,
+						}}
+					/>
+				);
+			}}
+			onValueChange={(numericValue: NumberFormatValues) => {
+				const fakeEvent = new Event('input');
+				normalizedOn?.onInput?.(fakeEvent, numericValue.floatValue);
+			}}
+			onBlur={(event) => {
+				normalizedOn?.onBlur?.(event.nativeEvent);
+			}}
+		/>
+	);
+}
+
+function KolNumericFormatController(props: any) {
+	const { name, control, rules, defaultValue, shouldUnregister, disabled, _label, _required, ...componentProps } = props;
+	return (
+		<Controller
+			name={name}
+			control={control}
+			rules={rules}
+			defaultValue={defaultValue}
+			shouldUnregister={shouldUnregister}
+			disabled={disabled}
+			render={({ field, fieldState }) => {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+				const userHandlers = componentProps._on as KolInputTextEvents | undefined;
+				return (
+					<KolNumericFormat
+						{...(componentProps as any)}
+						_label={_label}
+						_required={_required}
+						value={field.value}
+						_touched={fieldState.isTouched}
+						_msg={
+							fieldState.error
+								? {
+										_type: 'error' as const,
+										_description: fieldState.error.message || String(fieldState.error),
+									}
+								: undefined
+						}
+						_on={{
+							onInput: (event: Event, value: unknown) => {
+								field.onChange(value);
+								userHandlers?.onInput?.(event, value);
+							},
+							onBlur: () => field.onBlur(),
+						}}
+					/>
+				);
+			}}
+		/>
+	);
+}
+
+type CurrencyExampleFormValues = {
+	currency: number;
+};
+
+export function InputNumberNumberFormatter() {
+	const formatter = new NumberFormatter();
+	const [displayValue, setDisplayValue] = React.useState<number | undefined>(undefined);
+	const [value, setValue] = React.useState<number | undefined>(-128);
+	const [touched, setTouched] = React.useState(false);
+
+	const initialCurrencyExampleValues: CurrencyExampleFormValues = {
+		currency: 1000000,
+	};
+
+	const currencyForm = useForm<CurrencyExampleFormValues>({
+		defaultValues: initialCurrencyExampleValues,
+		mode: 'onTouched',
+	});
+
+	const currencyValues = currencyForm.watch();
+
+	const handleCurrencySubmit = (event: Event) => {
+		void currencyForm.handleSubmit(async () => {})(event as unknown as BaseSyntheticEvent);
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This example demonstrates formatting number input. The first example shows whole number formatting where decimal separators (. and ,) and scientific
+					notation (e) are automatically removed on input. The second example shows currency formatting with react-number-format in a react-hook-form context.
+				</p>
+			</SampleDescription>
+			<section className="w-full grid gap-4">
+				<div>
+					<KolForm>
+						<KolInputNumber
+							_label="Whole number"
+							_step={1}
+							_value={displayValue ?? value}
+							_on={{
+								onKeyDown: preventInvalidKeyDown,
+								onBlur: () => {
+									setTouched(true);
+								},
+								onInput: (_event: Event, inputValue: unknown) => {
+									const cleaned = formatter.parse(inputValue);
+									const numValue = cleaned === '' ? undefined : Number(cleaned);
+
+									setDisplayValue(numValue);
+									setValue(numValue);
+								},
+							}}
+						/>
+					</KolForm>
+					<pre className="text-base mt-2">{JSON.stringify({ value, touched }, null, 2)}</pre>
+				</div>
+
+				<div>
+					<KolForm _on={{ onSubmit: handleCurrencySubmit }}>
+						<KolNumericFormatController
+							control={currencyForm.control as any}
+							name="currency"
+							decimalScale={2}
+							displayType="input"
+							rules={{ required: 'Please enter a currency amount.' }}
+							_label="Currency"
+							_required
+						/>
+					</KolForm>
+					<pre className="text-base mt-2">{JSON.stringify(currencyValues, null, 2)}</pre>
+				</div>
+			</section>
+		</>
+	);
+}

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

@@ -20,10 +20,10 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 				_label="Number input"
 				_icons={{
 					left: {
-						icon: 'codicon codicon-arrow-left',
+						icon: 'codicon codicon-snake',
 					},
 					right: {
-						icon: 'codicon codicon-arrow-right',
+						icon: 'codicon codicon-squirrel',
 					},
 				}}
 			/>
@@ -32,8 +32,8 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 			<KolInputNumber {...props} _required _msg={{ _type: 'info', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
 			<KolInputNumber {...props} _required _msg={{ _type: 'success', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
 			<KolInputNumber {...props} ref={ref} _accessKey="Z" _max={10} _min={-10} _step={2} _label="Number input (-10 to 10 in steps of 2)" />
-			<KolInputNumber {...props} _readOnly _label="Number input (Readonly)" />
-			<KolInputNumber {...props} _disabled _label="Number input (Disabled)" />
+			<KolInputNumber {...props} _readOnly _value={123} _label="Number input (Readonly)" />
+			<KolInputNumber {...props} _disabled _value={123} _label="Number input (Disabled)" />
 			<KolInputNumber {...props} _label="With access key" _accessKey="c" />
 			<KolInputNumber {...props} _label="With short key" _shortKey="s" />
 		</div>

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

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { InputNumberBasic } from './basic';
+import { InputNumberNumberFormatter } from './number-formatter';
 
 export const INPUT_NUMBER_ROUTES: Routes = {
 	'input-number': {
 		basic: InputNumberBasic,
+		'number-formatter': InputNumberNumberFormatter,
 	},
 };

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

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputPasswordVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputPasswordVariants } from './partials/variants';
 
 export const InputPasswordBasic: FC = () => (
 	<>

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

@@ -1,6 +1,6 @@
-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-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
@@ -29,9 +29,10 @@ 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} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Passwort" _touched />
+			<KolInputPassword {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Passwort" _touched />
+			<KolInputPassword {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Passwort" _touched />
+			<KolInputPassword {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Passwort" _touched />
 			<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" />

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

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputRadioVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputRadioVariants } from './partials/variants';
 
 export const InputRadioBasic: FC = () => (
 	<>

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

@@ -3,8 +3,8 @@ 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';
+import { SampleColumns } from '../../SampleColumns';
 
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (

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

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputRangeVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputRangeVariants } from './partials/variants';
 
 export const InputRangeBasic: FC = () => (
 	<>

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

@@ -1,6 +1,6 @@
-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-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
@@ -37,9 +37,10 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				_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} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Slider" _touched />
+			<KolInputRange {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Slider" _touched />
+			<KolInputRange {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Slider" _touched />
+			<KolInputRange {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Slider" _touched />
 			<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-text/access-short-key.tsx

@@ -0,0 +1,19 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextAccessShortKey: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates access keys and short keys for KolInputText. Access keys provide keyboard shortcuts for focusing inputs.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="With access key (Alt+F)" _value="Press Alt+F to focus" _accessKey="f" />
+			<KolInputText _label="With short key (Alt+N)" _value="Press Alt+N to focus" _shortKey="n" />
+			<KolInputText _label="Access key (Alt+E)" _value="" _placeholder="Email address" _accessKey="e" />
+			<KolInputText _label="Short key (Alt+P)" _value="" _placeholder="Phone number" _shortKey="p" />
+		</div>
+	</>
+);

package/src/components/input-text/background-test.tsx

@@ -0,0 +1,20 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextBackground: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story showcases the component placed on a colored background.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4 bg-blue-400 p-4 rounded">
+			<strong>Default background:</strong>
+			<KolInputText _label="First name" _value="John Doe" />
+
+			<strong>Unset background:</strong>
+			<KolInputText style={{ backgroundColor: 'unset' }} _label="First name" _value="John Doe" />
+		</div>
+	</>
+);

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

@@ -1,16 +1,21 @@
+import { KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-
-import { FormWrap } from '../FormWrap';
-import { InputTextVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolInputText renders a text input field. The sample shows KolInputText in a form context with all variations and states.</p>
+			<p>This story showcases the most important InputText variants: default, required, validation error, disabled, read-only, and with icons.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputTextVariants} showButtons={false} />
+		<div className="grid gap-4">
+			<KolInputText _label="Name" _value="Anderson-Clark" />
+			<KolInputText _label="Name" _required _msg={{ _type: 'error', _description: 'Please enter your name' }} _touched />
+			<KolInputText _label="Name" _required _hint="Enter your surname" />
+			<KolInputText _label="Name" _value="Anderson-Clark" _disabled />
+			<KolInputText _label="Name" _readOnly _value="Anderson-Clark" />
+			<KolInputText _label="Name" _icons="codicon codicon-account" _value="Anderson-Clark" />
+		</div>
 	</>
 );

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

@@ -0,0 +1,19 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextDisabled: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates the disabled state of KolInputText. Disabled inputs cannot be edited or focused.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="Disabled with placeholder" _placeholder="Placeholder text" _disabled />
+			<KolInputText _label="Disabled with value" _value="This field is disabled" _disabled />
+			<KolInputText _label="Disabled with error message" _value="Invalid value" _msg={{ _type: 'error', _description: 'Error message' }} _disabled _touched />
+			<KolInputText _label="Comparison: Enabled" _value="This field is enabled" />
+		</div>
+	</>
+);

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

@@ -1,17 +1,33 @@
+import { KolBadge, KolIcon, KolInputText } from '@public-ui/react-v19';
 import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolInputText } from '@public-ui/react-v19';
 
 export const InputTextExpertSlot = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample show KolInputText with expert slot.</p>
+				<p>This sample shows KolInputText with expert slot. The expert slot allows for complex custom content beyond simple text inputs.</p>
 			</SampleDescription>
 
-			<KolInputText _label="" _type="text">
-				<span slot="expert">I am more than just a input field</span>
-			</KolInputText>
+			<div className="grid gap-4">
+				<KolInputText _label="" _type="text">
+					<span slot="expert">I am more than just a input field</span>
+				</KolInputText>
+
+				<KolInputText _label="" _type="text" _value="Complex example">
+					<div slot="expert" className="flex items-center gap-2">
+						<KolBadge _label="Premium" _color="#1a73e8" />
+						<KolIcon _icons="codicon codicon-verified-filled" _label="" />
+						<span>Verified account with premium features</span>
+					</div>
+				</KolInputText>
+
+				<KolInputText _label="" _type="text" _placeholder="Enter your email">
+					<div slot="expert" style={{ padding: '0.5rem', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
+						<strong>Note:</strong> This email will be used for account recovery and notifications.
+					</div>
+				</KolInputText>
+			</div>
 		</>
 	);
 };

package/src/components/input-text/hide-label.tsx

@@ -0,0 +1,48 @@
+import { KolAlert, KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextHideLabel: FC = () => (
+	<div className="grid gap-4">
+		<SampleDescription>
+			<p>
+				This story demonstrates the <code>_hideLabel</code> feature for KolInputText. It allows hiding the label visually while keeping it accessible for screen
+				readers.
+			</p>
+		</SampleDescription>
+
+		<section>
+			<KolInputText _hideLabel _label="Search" _placeholder="Search..." _type="search" />
+		</section>
+
+		<section>
+			<KolInputText _hideLabel _label="Email" _placeholder="Enter email" _msg={{ _type: 'error', _description: 'Invalid email format' }} _touched />
+		</section>
+
+		<section>
+			<fieldset className="grid md:grid-cols-2 gap-4">
+				<legend>Street Address</legend>
+				<KolAlert className="col-span-2" _level={0} _type="error">
+					Please complete the address
+				</KolAlert>
+				<KolInputText
+					_hideLabel
+					_hideMsg
+					_label="Street name"
+					_placeholder="Street name"
+					_msg={{ _type: 'error', _description: 'Please complete the address' }}
+					_touched
+				/>
+				<KolInputText
+					_hideLabel
+					_hideMsg
+					_label="House number"
+					_placeholder="Number"
+					_msg={{ _type: 'error', _description: 'Please complete the address' }}
+					_touched
+				/>
+			</fieldset>
+		</section>
+	</div>
+);

package/src/components/input-text/hide-msg.tsx

@@ -1,4 +1,4 @@
-import { KolAlert, KolCard, KolInputText } from '@public-ui/react-v19';
+import { KolAlert, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -12,10 +12,10 @@ export const InputTextHideMsg: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolCard _label="Normal input field with error" _level={0}>
+		<section>
 			<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label="Input with error" _touched />
-		</KolCard>
-		<KolCard _label="Input fields with hidden error" _level={0}>
+		</section>
+		<section>
 			<fieldset className="grid md:grid-cols-2 gap-4">
 				<legend>Combined input field</legend>
 				<KolAlert className="col-span-2" _level={0} _type="error">
@@ -24,6 +24,6 @@ export const InputTextHideMsg: FC = () => (
 				<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>
+		</section>
 	</div>
 );

package/src/components/input-text/message-types.tsx

@@ -0,0 +1,20 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextMessageTypes: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates all available message types for KolInputText: default, info, error, warning, and success.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="Default message" _value="Valid value" _msg={{ _type: 'default', _description: 'This is a default message' }} _touched />
+			<KolInputText _label="Error message" _value="Invalid value" _msg={{ _type: 'error', _description: 'This is an error message' }} _touched />
+			<KolInputText _label="Info message" _value="Some value" _msg={{ _type: 'info', _description: 'This is an informational message' }} _touched />
+			<KolInputText _label="Success message" _value="Valid value" _msg={{ _type: 'success', _description: 'This is a success message' }} _touched />
+			<KolInputText _label="Warning message" _value="Valid value" _msg={{ _type: 'warning', _description: 'This is a warning message' }} _touched />
+		</div>
+	</>
+);

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

@@ -0,0 +1,20 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextPlaceholder: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates the placeholder feature of KolInputText.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="First name" _placeholder="Enter your first name" />
+			<KolInputText _label="Email address" _placeholder="user@example.com" />
+			<KolInputText _label="Phone number" _placeholder="+49 123 456789" _type="tel" />
+			<KolInputText _label="Website" _placeholder="https://example.com" _type="url" />
+			<KolInputText _label="Search" _placeholder="Search..." _type="search" />
+		</div>
+	</>
+);

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

@@ -0,0 +1,25 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextReadonly: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates the readonly state of KolInputText. Readonly inputs can be focused but not edited.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="Readonly with placeholder" _placeholder="Placeholder text" _readOnly />
+			<KolInputText _label="Readonly with value" _value="This field is readonly" _readOnly />
+			<KolInputText
+				_label="Readonly with info message"
+				_value="Read-only value"
+				_msg={{ _type: 'info', _description: 'This field cannot be edited' }}
+				_readOnly
+				_touched
+			/>
+			<KolInputText _label="Comparison: Editable" _value="This field is editable" />
+		</div>
+	</>
+);

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

@@ -1,16 +1,32 @@
 import { Routes } from '../../shares/types';
+import { InputTextAccessShortKey } from './access-short-key';
+import { InputTextBackground } from './background-test';
 import { InputTextBasic } from './basic';
+import { InputTextDisabled } from './disabled';
+import { InputTextExpertSlot } from './expert-slot';
+import { InputTextHideLabel } from './hide-label';
 import { InputTextHideMsg } from './hide-msg';
-import { InputTextFormatterDemo } from './text-formatter';
+import { InputTextMessageTypes } from './message-types';
+import { InputTextPlaceholder } from './placeholder';
+import { InputTextReadonly } from './readonly';
+import { InputTextSelectRange } from './select-range';
 import { InputTextSmartButton } from './smart-button';
-import { InputTextExpertSlot } from './expert-slot';
+import { InputTextFormatterDemo } from './text-formatter';
 
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
+		'message-types': InputTextMessageTypes,
+		placeholder: InputTextPlaceholder,
+		disabled: InputTextDisabled,
+		readonly: InputTextReadonly,
+		'access-short-key': InputTextAccessShortKey,
+		'hide-label': InputTextHideLabel,
 		'hide-msg': InputTextHideMsg,
 		'text-formatter': InputTextFormatterDemo,
 		'smart-button': InputTextSmartButton,
 		'expert-slot': InputTextExpertSlot,
+		'select-range': InputTextSelectRange,
+		background: InputTextBackground,
 	},
 };