@public-ui/sample-react 4.0.0-alpha.0 → 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

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { KolInputNumber } from '@public-ui/react';
+import { KolInputNumber } from '@public-ui/react-v19';
 
 import { ERROR_MSG } from '../../../shares/constants';
 
@@ -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/partials/variants.tsx

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

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 = () => (
 	<>
@@ -11,6 +11,6 @@ export const InputPasswordBasic: FC = () => (
 			<p>KolInputPassword renders a password input field. The sample shows KolInputPassword in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputPasswordVariants} />
+		<FormWrap RefComponent={InputPasswordVariants} showButtons={false} />
 	</>
 );

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

@@ -1,23 +1,21 @@
+import type { Components } from '@public-ui/components';
+import { KolInputPassword } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
-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,12 @@ export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Compon
 				}}
 				_touched
 			/>
+			<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" />
 			<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

@@ -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 = () => (
 	<>
@@ -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 { KolHeading } from '@public-ui/react-v19';
+import { SampleColumns } from '../../SampleColumns';
+
 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

@@ -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 = () => (
 	<>
@@ -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 type { Components } from '@public-ui/components';
+import { KolInputRange } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
-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,15 @@ 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" _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-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/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} />
+		<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>
+	</>
+);