@public-ui/sample-react 3.0.0-rc.0 → 3.0.0-rc.10

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

@@ -1,28 +1,70 @@
+import { KolButton, KolForm, KolInputText } from '@public-ui/react';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolForm, KolInputText } from '@public-ui/react';
 
-export const FormErrorList: FC = () => (
-	<>
-		<SampleDescription>
-			<p>This sample shows a form with error messages.</p>
-		</SampleDescription>
+export const FormErrorList: FC = () => {
+	const formRef = useRef<HTMLKolFormElement | null>(null);
 
-		<KolForm
-			className="w-full"
-			_errorList={[
-				{
-					message: 'Error in Input 2',
-					selector: '#input2',
-				},
-			]}
-		>
-			<div className="grid gap-2">
-				<KolInputText id="input1" _label="Input 1" />
-				<KolInputText id="input2" _label="Input 2" _touched _msg={{ _description: 'Input error', _type: 'error' }} />
-				<KolInputText id="input3" _label="Input 3" />
-			</div>
-		</KolForm>
-	</>
-);
+	const scrollTo = () => {
+		formRef.current?.focusErrorList();
+	};
+
+	/**
+	 * Simulate the form submission
+	 */
+	useEffect(() => {
+		formRef.current?.focusErrorList();
+	}, []);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows a form with error messages.</p>
+			</SampleDescription>
+
+			<KolForm
+				className="w-full"
+				ref={formRef}
+				_on={{
+					onSubmit: scrollTo,
+				}}
+				_errorList={[
+					{
+						message: 'Error in Input 2',
+						selector: '#input2',
+					},
+					{
+						message: 'Error in Input 3',
+						selector: () => alert('Error in Input 3'),
+					},
+				]}
+			>
+				<div className="grid gap-2">
+					<KolInputText id="input1" _label="Input 1" />
+					<KolInputText
+						id="input2"
+						_label="Input 2"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
+					<KolInputText
+						id="input3"
+						_label="Input 3"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
+					<div>
+						<KolButton _label="ScrollTo" _type="submit" />
+					</div>
+				</div>
+			</KolForm>
+		</>
+	);
+};

package/src/components/handout/basic.tsx

@@ -29,7 +29,7 @@ import {
 	KolNav,
 	KolProgress,
 	KolSelect,
-	KolTable,
+	KolTableStateful,
 	KolTabs,
 	KolTextarea,
 	KolVersion,
@@ -73,16 +73,14 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolButtonWrapper _label={cell.label} style={{ fontSize: '75%' }} />);
 				},
-				sort: (data) => {
-					return data.sort((first, second) => {
-						if ((first as TableDataType).monday < (second as TableDataType).monday) {
-							return -1;
-						}
-						if ((first as TableDataType).monday > (second as TableDataType).monday) {
-							return 1;
-						}
-						return 0;
-					});
+				compareFn: (first, second) => {
+					if ((first as TableDataType).monday < (second as TableDataType).monday) {
+						return -1;
+					}
+					if ((first as TableDataType).monday > (second as TableDataType).monday) {
+						return 1;
+					}
+					return 0;
 				},
 				sortDirection: 'ASC',
 				textAlign: 'right',
@@ -97,16 +95,14 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#060" _label={cell.label}></KolBadge>);
 				},
-				sort: (data) => {
-					return data.sort((first, second) => {
-						if ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {
-							return -1;
-						}
-						if ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {
-							return 1;
-						}
-						return 0;
-					});
+				compareFn: (first, second) => {
+					if ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {
+						return -1;
+					}
+					if ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {
+						return 1;
+					}
+					return 0;
 				},
 				sortDirection: 'DESC',
 			},
@@ -194,7 +190,7 @@ export const HandoutBasic: FC = () => {
 
 	return (
 		<div className="grid gap-4">
-			<div className="grid gap-4 grid-cols-[auto_1fr_1fr] items-center">
+			<div className="grid gap-4 md:grid-cols-[auto_1fr_1fr] items-center">
 				<KolKolibri className="block w-75px" _labeled={false}></KolKolibri>
 				<KolHeading _label="" _level={1}>
 					<span slot="expert">
@@ -252,10 +248,8 @@ export const HandoutBasic: FC = () => {
 						<p>
 							I am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.
 						</p>
-						<div className="grid grid-cols-2 items-center">
-							<KolProgress _variant="bar" _max={100} _value={33} _label="Progress" />
-							<KolProgress _variant="cycle" _max={100} _value={66} _label="Progress" />
-						</div>
+						<KolProgress _variant="bar" _max={100} _value={33} _label="Progress" />
+						<KolProgress _variant="cycle" _max={100} _value={66} _label="Progress" />
 					</div>
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3" _label="Button, LinkButton and Tab" _level={2}>
@@ -430,7 +424,6 @@ export const HandoutBasic: FC = () => {
 							/>
 						</div>
 						{/* <KolSkipNav></KolSkipNav> */}
-						{/* <KolLinkGroup _label=""></KolLinkGroup> */}
 						<div>
 							<KolBreadcrumb
 								_label="Breadcrumb aus Text-Links"
@@ -448,7 +441,7 @@ export const HandoutBasic: FC = () => {
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Input" _level={2}>
 					<KolForm slot="">
-						<div className="grid gap-4 grid-cols-3 p-2">
+						<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 p-2">
 							<KolInputColor _label={`Color`} />
 							<KolInputFile _label={`Upload file`} />
 							<KolInputNumber _label={`Number input`} />
@@ -467,7 +460,9 @@ export const HandoutBasic: FC = () => {
 							<div className="grid gap-4">
 								<KolInputRadio _orientation="horizontal" _options="[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]" _value="0" _label={`Salutation`} />
 								<KolInputCheckbox _label="">
-									I accept the <KolAbbr _label="General Terms and Conditions">AGB</KolAbbr>.
+									<span slot="expert">
+										I accept the <KolAbbr _label="General Terms and Conditions">AGB</KolAbbr>.
+									</span>
 								</KolInputCheckbox>
 							</div>
 							<KolTextarea _rows={4} _label={`Textarea`} />
@@ -476,7 +471,7 @@ export const HandoutBasic: FC = () => {
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Table with Pagination" _level={2}>
 					<div slot="" className="grid gap-2 p-2">
-						<KolTable _label="Table" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTable>
+						<KolTableStateful _label="Table" _minWidth="auto" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
 					</div>
 				</KolCard>
 			</div>

package/src/components/icon/basic.tsx

@@ -12,8 +12,9 @@ export const IconBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolIcon _label="" _icons="codicon codicon-home" />
+			<KolIcon className="block w-[1em] h-[1em]" _label="" _icons="codicon codicon-home" />
 			<KolIcon
+				className="block w-[1em] h-[1em]"
 				style={{
 					color: 'red',
 				}}

package/src/components/image/basic.tsx

@@ -9,6 +9,6 @@ export const ImageBasic: FC = () => (
 			<p>KolImage renders an image. The sample shows an image with alternative text.</p>
 		</SampleDescription>
 
-		<KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />
+		<KolImage className="w-image" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />
 	</>
 );

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

@@ -3,10 +3,11 @@ import React, { forwardRef } from 'react';
 import { InputCheckboxCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxVariant(props, ref) {
 	return (
 		<>
-			<div className="grid md:grid-cols-2 gap-4">
+			<SampleColumns>
 				<fieldset>
 					<legend>Label align &quot;left&quot; with label</legend>
 					<InputCheckboxCases {...props} _labelAlign="left" />
@@ -15,8 +16,8 @@ export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Com
 					<legend>Label align &quot;left&quot; without Label (hideLabel)</legend>
 					<InputCheckboxCases ref={ref} {...props} _hideLabel _labelAlign="left" />
 				</fieldset>
-			</div>
-			<div className="grid md:grid-cols-2 gap-4">
+			</SampleColumns>
+			<SampleColumns>
 				<fieldset>
 					<legend>Label align &quot;right&quot; with label</legend>
 					<InputCheckboxCases {...props} />
@@ -25,7 +26,7 @@ export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Com
 					<legend>Label align &quot;right&quot; without Label (hideLabel)</legend>
 					<InputCheckboxCases ref={ref} {...props} _hideLabel />
 				</fieldset>
-			</div>
+			</SampleColumns>
 		</>
 	);
 });

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

@@ -1,10 +1,9 @@
 import React, { forwardRef } from 'react';
-
 import { KolInputColor } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
 import { ERROR_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.KolInputColor>(function InputColorCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -26,6 +25,9 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 				_suggestions="['#000000','#f08080', '#0000ff','#00ff00']"
 				_touched
 			/>
+			<KolInputColor {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Color" />
+			<KolInputColor {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Color" />
+			<KolInputColor {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Color" />
 			<KolInputColor {...props} ref={ref} _accessKey="C" _hint="Hint text" _label="Color with hint" _value="#f08080" />
 			<KolInputColor {...props} _disabled _label="Color (Disabled)" _value="#f08080" />
 			<KolInputColor {...props} _label="With access key" _accessKey="c"></KolInputColor>

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

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

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

@@ -1,26 +1,29 @@
 import React, { forwardRef } from 'react';
-
 import { KolInputDate } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props, ref) {
 	return (
 		<div className="grid gap-4">
 			<div className="black-background">
-				<KolInputDate {...props} _type="date" _label="Date input (Black background test)" _required />{' '}
+				<KolInputDate {...props} _type="date" _label="Date input (Black background test)" _required />
 			</div>
 			<KolInputDate {...props} _type="datetime-local" _label="Local-Datetime (Standard)" _required />
 			<KolInputDate
 				{...props}
 				_step={1}
 				_type="datetime-local"
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Local datetime (with seconds)"
 				_required
 				_touched
 			/>
+			<KolInputDate {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Color" />
+			<KolInputDate {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Color" />
+			<KolInputDate {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Color" />
 			<KolInputDate {...props} _type="month" _label="Month" _required />
 			<KolInputDate {...props} ref={ref} _accessKey="W" _type="week" _label="Week" _required />
 			<KolInputDate {...props} _type="time" _label="Time (standard)" _required />

package/src/components/input-date/partials/minMax.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { KolInputDate } from '@public-ui/react';
 import type { Components } from '@public-ui/components';
 
-export const InputDateMinMaxCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props) {
+export const InputDateMinMaxCases = (props: Components.KolInputDate) => {
 	const minDateIso = '2024-09-26';
 	const maxDateIso = '2024-09-27';
 
@@ -38,4 +38,4 @@ export const InputDateMinMaxCases = forwardRef<HTMLKolInputDateElement, Componen
 			<KolInputDate {...props} _type="month" _label="Month with Date" _min={minDate} _max={maxDate} />
 		</div>
 	);
-});
+};

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

@@ -4,9 +4,10 @@ import { InputDateCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { InputDateMinMaxCases } from './minMax';
+import { SampleColumns } from '../../SampleColumns';
 export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Date</legend>
 				<InputDateCases {...props} />
@@ -17,8 +18,8 @@ export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.
 			</fieldset>
 			<fieldset>
 				<legend>Date (with min/max)</legend>
-				<InputDateMinMaxCases ref={ref} {...props} />
+				<InputDateMinMaxCases {...props} />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

package/src/components/input-date/show-hide-msg.tsx

@@ -37,11 +37,10 @@ export const InputDateShowHideMsg = () => {
 					Error-Message visible: {showMsg && isTouched && !hideMsg ? 'Yes' : 'No'} (showMsg: {showMsg ? 'Yes' : 'No'}, isTouched: {isTouched ? 'Yes' : 'No'},
 					hideMsg: {hideMsg ? 'Yes' : 'No'})
 				</pre>
-				<KolInputDate _error={showMsg ? 'error message' : undefined} _hideError={hideMsg} _label="Date (_error)" _touched={isTouched} />
 				{msgTypes.map((type) => (
 					<KolInputDate
 						key={type}
-						_hideError={hideMsg}
+						_hideMsg={hideMsg}
 						_label={`Date (_msg, ${type})`}
 						_msg={
 							showMsg

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

@@ -1,10 +1,9 @@
 import React, { forwardRef } from 'react';
-
 import { KolInputEmail } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -18,6 +17,7 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 				_placeholder="elke@mustermann.de"
 				_suggestions="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
 				_label="E-Mail (list)"
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_icons={{
@@ -29,6 +29,9 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 					},
 				}}
 			/>
+			<KolInputEmail {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="E-Mail" />
+			<KolInputEmail {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="E-Mail" />
+			<KolInputEmail {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="E-Mail" />
 			<KolInputEmail {...props} _disabled _value="test@mail.de" _label="E-Mail (Disabled)" />
 			<KolInputEmail {...props} _readOnly _value="test@mail.de" _label="E-Mail (Readonly)" />
 			<KolInputEmail {...props} _value="test@mail.de" _label="With access key" _accessKey="c" />

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

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

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

@@ -1,10 +1,9 @@
 import React, { forwardRef } from 'react';
-
 import { KolInputFile } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -23,6 +22,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 			<KolInputFile
 				{...props}
 				_required
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Upload file (Black background test)"
 				_icons={{
@@ -32,6 +32,9 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 				}}
 				_touched
 			/>
+			<KolInputFile {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Upload file" />
+			<KolInputFile {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Upload file" />
+			<KolInputFile {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Upload file" />
 			<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Upload file (Multiple)" />
 			<KolInputFile {...props} _disabled _label="Upload file (Disabled)" />
 			<KolInputFile {...props} _label="With access key" _accessKey="c" />

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

@@ -1,11 +1,12 @@
 import React, { forwardRef } from 'react';
 
 import { InputFileCases } from './cases';
+import { SampleColumns } from '../../SampleColumns';
 
 import type { Components } from '@public-ui/components';
 export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>File</legend>
 				<InputFileCases {...props} />
@@ -14,6 +15,6 @@ export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.
 				<legend>File (hideLabel)</legend>
 				<InputFileCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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-password/partials/cases.tsx

@@ -1,23 +1,21 @@
 import React, { forwardRef } from 'react';
-
 import { KolInputPassword } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-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-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';
+
 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/partials/cases.tsx

@@ -1,10 +1,9 @@
 import React, { forwardRef } from 'react';
-
 import { KolInputRange } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-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" />