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

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

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

package/src/components/button-link/basic.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { KolButtonLink, KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkBasic: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -21,7 +21,7 @@ export const ButtonLinkBasic: FC = () => {
 				</p>
 			</SampleDescription>
 			<section className="text-base">
-				<KolHeading _level={2} _label="Button-Link with variant 'inline'" />
+				<KolHeading _level={2} _label="Button-Link with _inline" />
 
 				<p>
 					In this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label="Simple Link" /> It is rendered by default as an{' '}
@@ -38,16 +38,18 @@ export const ButtonLinkBasic: FC = () => {
 					Therefore, I go over the entire width of the parent element to create a line break.
 				</p>
 
-				<KolHeading _level={2} _label="Button-Link with variant 'standalone'" />
+				<KolHeading _level={2} _label="Button-Link with _inline={false}" />
+
+				<p>Use the boolean _inline property to render the link inline (default) or standalone.</p>
 
 				<p>
-					<KolButtonLink _label="Disabled ButtonLink" _disabled _variant="standalone" />
+					<KolButtonLink _label="Disabled ButtonLink" _disabled _inline={false} />
 				</p>
 				<p>
-					<KolButtonLink _label="With access key" _accessKey="c" _on={dummyEventHandler} _variant="standalone" />
+					<KolButtonLink _label="With access key" _accessKey="c" _inline={false} _on={dummyEventHandler} />
 				</p>
 				<p>
-					<KolButtonLink _label="Disabled ButtonLink" _shortKey="s" _variant="standalone" />
+					<KolButtonLink _label="Disabled ButtonLink" _inline={false} _shortKey="s" />
 				</p>
 			</section>
 		</>

package/src/components/button-link/icons.tsx

@@ -12,7 +12,7 @@ export const ButtonLinkIcons: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolButtonLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
+			<KolButtonLink _icons="codicon codicon-home" _label="I am a link with an icon on the left" />
 			<KolButtonLink
 				_icons={{
 					right: 'codicon codicon-home',
@@ -40,6 +40,7 @@ export const ButtonLinkIcons: FC = () => (
 				}}
 				_label="I am a link with all icons"
 			/>
+			<KolButtonLink _icons="codicon codicon-home" _hideLabel _label="I am a link with icon only" />
 		</div>
 	</>
 );

package/src/components/button-link/routes.ts

@@ -1,8 +1,8 @@
 import { Routes } from '../../shares/types';
+import { ButtonLinkAriaDescription } from './aria-description';
 import { ButtonLinkBasic } from './basic';
 import { ButtonLinkIcons } from './icons';
 import { ButtonLinkImage } from './image';
-import { ButtonLinkAriaDescription } from './aria-description';
 
 export const BUTTON_LINK_ROUTES: Routes = {
 	'button-link': {

package/src/components/card/headlines.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { KolCard } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const CardHeadlines: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows cards with all headline levels as title.</p>
+			</SampleDescription>
+
+			<div className="w-full grid grid-cols-2 gap-4">
+				<KolCard _label="Card with headline level 0" _level={0}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 1" _level={1}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 2" _level={2}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 3" _level={3}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 4" _level={4}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 5" _level={5}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 6" _level={6}>
+					<div>Card contents.</div>
+				</KolCard>
+			</div>
+		</>
+	);
+};

package/src/components/card/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { CardBasic } from './basic';
+import { CardHeadlines } from './headlines';
 
 export const CARD_ROUTES: Routes = {
 	card: {
 		basic: CardBasic,
+		headlines: CardHeadlines,
 	},
 };

package/src/components/combobox/basic.tsx

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

package/src/components/combobox/html.tsx

@@ -0,0 +1,16 @@
+import { KolCombobox } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const ComboboxHtml: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>A HTML only KolCombobox.</p>
+			</SampleDescription>
+
+			<KolCombobox _label="With string array in html" _suggestions="['Herr','Frau','Firma']" _value="Herr" />
+		</>
+	);
+};

package/src/components/combobox/partials/cases.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { KolCombobox } from '@public-ui/react-v19';
 
+import type { Components } from '@public-ui/components';
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 import { COUNTRY_SUGGESTIONS } from '../../../shares/country';
-import type { Components } from '@public-ui/components';
 
 export const ComboboxCases = (props: Partial<Components.KolCombobox>) => {
 	return (

package/src/components/combobox/partials/variants.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import type { Components } from '@public-ui/components';
+import React from 'react';
 
-import { ComboboxCases } from './cases';
 import { SampleColumns } from '../../SampleColumns';
+import { ComboboxCases } from './cases';
 
 export const ComboboxVariants = (props: Partial<Components.KolCombobox>) => {
 	return (

package/src/components/combobox/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { ComboboxBasic } from './basic';
+import { ComboboxHtml } from './html';
 
 export const COMBOBOX_ROUTES: Routes = {
 	combobox: {
 		basic: ComboboxBasic,
+		html: ComboboxHtml,
 	},
 };

package/src/components/drawer/basic.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import type { AlignPropType } from '@public-ui/components';
-import { KolDrawer, KolButton, KolInputCheckbox } from '@public-ui/react-v19';
+import { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { DrawerRadioAlign } from './partials/align';

package/src/components/drawer/controlled.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import type { AlignPropType } from '@public-ui/components';
-import { KolDrawer, KolButton } from '@public-ui/react-v19';
+import { KolButton, KolDrawer } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { DrawerRadioAlign } from './partials/align';

package/src/components/form/basic.tsx

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

package/src/components/handout/basic.tsx

@@ -1,6 +1,4 @@
 import type { ButtonProps, KoliBriTableHeaders } from '@public-ui/components';
-import type { FC } from 'react';
-import React from 'react';
 import {
 	KolAbbr,
 	KolAccordion,
@@ -34,11 +32,13 @@ import {
 	KolTextarea,
 	KolVersion,
 } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
 
-import { getTheme, getThemeName } from '../../shares/store';
+import { useToasterService } from '../../hooks/useToasterService';
 import { getRoot } from '../../shares/react-roots';
+import { getTheme, getThemeName } from '../../shares/store';
 import { TABLE_DATA, type TableDataType } from './table-data';
-import { useToasterService } from '../../hooks/useToasterService';
 
 function KolButtonWrapper({ _on, ...other }: ButtonProps & { style: Record<string, unknown> }) {
 	const { dummyClickEventHandler } = useToasterService();
@@ -84,6 +84,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 				},
 				sortDirection: 'ASC',
 				textAlign: 'right',
+				width: '100px',
 			},
 			{
 				key: 'tuesday',
@@ -105,6 +106,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					return 0;
 				},
 				sortDirection: 'DESC',
+				width: '100px',
 			},
 			{
 				key: 'wednesday',
@@ -116,6 +118,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#006" _label={cell.label}></KolBadge>);
 				},
+				width: '110px',
 			},
 			{
 				key: 'thursday',
@@ -127,6 +130,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#600" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 			{
 				key: 'friday',
@@ -138,6 +142,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#303" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 			{
 				key: 'saturday',
@@ -149,6 +154,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#330" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 			{
 				key: 'sunday',
@@ -160,6 +166,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#033" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 		],
 	],
@@ -470,8 +477,8 @@ export const HandoutBasic: FC = () => {
 					</KolForm>
 				</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">
-						<KolTableStateful _label="Table" _minWidth="auto" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
+					<div slot="" className="grid gap-2 p-2 flex">
+						<KolTableStateful _label="Table" _minWidth="800px" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
 					</div>
 				</KolCard>
 			</div>

package/src/components/icon/basic.tsx

@@ -8,11 +8,15 @@ import { SampleDescription } from '../SampleDescription';
 export const IconBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolIcon renders an icon. This sample shows one regular icon and one with a custom style-property, changing the icon color.</p>
+			<p>KolIcon renders codicon icons. This sample shows regular icons and one with a custom style-property, changing the icon color.</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolIcon className="block w-[1em] h-[1em]" _label="" _icons="codicon codicon-home" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-home" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-compass-active" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-debug" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-squirrel" />
+
 			<KolIcon
 				className="block w-[1em] h-[1em]"
 				style={{

package/src/components/icon/font-awesome.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { KolIcon, KolInputText } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const IconFontAwesome: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolIcon renders Font Awesome icons, if you have added this font to your theme. We are showing Font Awesome Free 6.1.1.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolIcon className="block" _label="" _icons="fa-solid fa-house"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-circle-user"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-truck"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-city"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-regular fa-heart"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-regular fa-thumbs-up"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-brands fa-github"></KolIcon>
+
+			<KolInputText
+				_label={'With Font Awesome icons'}
+				_icons={{
+					left: {
+						icon: 'fa-solid fa-phone',
+					},
+					right: {
+						icon: 'fa-solid fa-arrow-right',
+					},
+				}}
+			/>
+		</div>
+	</>
+);

package/src/components/icon/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { IconBasic } from './basic';
+import { IconFontAwesome } from './font-awesome';
 
 export const ICON_ROUTES: Routes = {
 	icon: {
 		basic: IconBasic,
+		'font-awesome': IconFontAwesome,
 	},
 };

package/src/components/image/basic.tsx

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

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

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

package/src/components/input-checkbox/button.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import type { Components } from '@public-ui/components';
 import { FormWrap } from '../FormWrap';
 import { SampleDescription } from '../SampleDescription';
-import type { Components } from '@public-ui/components';
 import { InputCheckboxVariants } from './partials/variants';
 
 export const InputCheckboxButton: FC = () => (

package/src/components/input-checkbox/switch.tsx

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

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

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

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

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolInputColor } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputColor } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG } from '../../../shares/constants';
 
@@ -25,9 +25,10 @@ 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} _msg={{ _type: 'info', _description: 'Just a hint message.' }} _label="Color" _touched />
+			<KolInputColor {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Color" _touched />
+			<KolInputColor {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Color" _touched />
+			<KolInputColor {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Color" _touched />
 			<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-date/basic.tsx

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

package/src/components/input-date/copy-paste.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { KolButton, KolInputDate, KolInputText } from '@public-ui/react-v19';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 /** -----------------------------

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

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolInputDate } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputDate } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
@@ -21,9 +21,10 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 				_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} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Date" _touched />
+			<KolInputDate {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Date" _touched />
+			<KolInputDate {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Date" _touched />
+			<KolInputDate {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Date" _touched />
 			<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,6 +1,6 @@
-import React from 'react';
-import { KolInputDate } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputDate } from '@public-ui/react-v19';
+import React from 'react';
 
 export const InputDateMinMaxCases = (props: Components.KolInputDate) => {
 	const minDateIso = '2024-09-26';

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

@@ -3,8 +3,8 @@ import React, { forwardRef } from 'react';
 import { InputDateCases } from './cases';
 
 import type { Components } from '@public-ui/components';
-import { InputDateMinMaxCases } from './minMax';
 import { SampleColumns } from '../../SampleColumns';
+import { InputDateMinMaxCases } from './minMax';
 export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateVariant(props, ref) {
 	return (
 		<SampleColumns>

package/src/components/input-date/reset.tsx

@@ -1,5 +1,5 @@
-import React, { useRef } from 'react';
 import { KolButton, KolInputDate } from '@public-ui/react-v19';
+import React, { useRef } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputDateReset = () => {

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

@@ -1,8 +1,8 @@
 import { Routes } from '../../shares/types';
 import { InputDateBasic } from './basic';
+import { InputDateCopyPaste } from './copy-paste';
 import { InputDateReset } from './reset';
 import { InputDateShowHideMsg } from './show-hide-msg';
-import { InputDateCopyPaste } from './copy-paste';
 
 export const INPUT_DATE_ROUTES: Routes = {
 	'input-date': {

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

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

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

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

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

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

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolInputFile } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputFile } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
@@ -32,9 +32,10 @@ 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} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Upload file" _touched />
+			<KolInputFile {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Upload file" _touched />
+			<KolInputFile {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Upload file" _touched />
+			<KolInputFile {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Upload file" _touched />
 			<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,7 +1,7 @@
 import React, { forwardRef } from 'react';
 
-import { InputFileCases } from './cases';
 import { SampleColumns } from '../../SampleColumns';
+import { InputFileCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileVariant(props, ref) {