@public-ui/sample-react 1.7.0-rc.9 → 1.7.1

package/src/components/handout/basic.tsx

@@ -785,56 +785,56 @@ export const HandoutBasic: FC = () => (
 					<KolTabs _ariaLabel="" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>
 						<div className="grid gap-2 py-2">
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolButton _icon={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolButton>
-								<KolButton _disabled _icon={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolButton>
-								<KolButton _hideLabel _icon="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolButton>
+								<KolButton _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolButton>
+								<KolButton _disabled _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolButton>
+								<KolButton _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolButton _icon={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolButton>
-								<KolButton _disabled _icon={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolButton>
-								<KolButton _hideLabel _icon="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolButton>
+								<KolButton _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolButton>
+								<KolButton _disabled _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolButton>
+								<KolButton _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolButton _icon={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolButton>
-								<KolButton _disabled _icon={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolButton>
-								<KolButton _hideLabel _icon="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolButton>
+								<KolButton _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolButton>
+								<KolButton _disabled _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolButton>
+								<KolButton _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolButton _icon={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolButton>
-								<KolButton _disabled _icon={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolButton>
-								<KolButton _hideLabel _icon="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolButton>
+								<KolButton _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolButton>
+								<KolButton _disabled _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolButton>
+								<KolButton _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 								<KolButton _label="ghost" _variant="ghost"></KolButton>
 								<KolButton _disabled _label="ghost" _variant="ghost"></KolButton>
-								<KolButton _icon="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolButton>
+								<KolButton _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolButton>
 							</div>
 						</div>
 						<div className="grid gap-2 py-2">
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolLinkButton _href="#" _icon={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _icon={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-								<KolLinkButton _href="#" _hideLabel _icon="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolLinkButton>
+								<KolLinkButton _href="#" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
+								<KolLinkButton _href="#" _disabled _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
+								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolLinkButton _href="#" _icon={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _icon={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-								<KolLinkButton _href="#" _hideLabel _icon="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolLinkButton>
+								<KolLinkButton _href="#" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+								<KolLinkButton _href="#" _disabled _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolLinkButton _href="#" _icon={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _icon={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-								<KolLinkButton _href="#" _hideLabel _icon="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolLinkButton>
+								<KolLinkButton _href="#" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
+								<KolLinkButton _href="#" _disabled _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
+								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolLinkButton _href="#" _icon={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _icon={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-								<KolLinkButton _href="#" _hideLabel _icon="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolLinkButton>
+								<KolLinkButton _href="#" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
+								<KolLinkButton _href="#" _disabled _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
+								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 								<KolLinkButton _href="#" _label="ghost" _variant="ghost"></KolLinkButton>
 								<KolLinkButton _href="#" _disabled _label="ghost" _variant="ghost"></KolLinkButton>
-								<KolLinkButton _href="#" _icon="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
+								<KolLinkButton _href="#" _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
 							</div>
 						</div>
 					</KolTabs>
@@ -845,8 +845,8 @@ export const HandoutBasic: FC = () => (
 					<KolAccordion _heading="Links" _level={3} _open>
 						<div className="grid gap-2" slot="content">
 							<KolLink _href="#" _label="Linktext"></KolLink>
-							<KolLink _href="#" _icon="codicon codicon-home" _label="Linktext mit Icon"></KolLink>
-							<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolLink>
+							<KolLink _href="#" _icons="codicon codicon-home" _label="Linktext mit Icon"></KolLink>
+							<KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolLink>
 							<KolLink _href="/" _label="Besuchter Link"></KolLink>
 							<p>
 								Ich bin ein <KolLink _href="#" _label="externer Link" _target="w3c"></KolLink> im Fließtext.
@@ -859,8 +859,8 @@ export const HandoutBasic: FC = () => (
 					<KolAccordion _heading="ButtonLinks" _level={3}>
 						<div className="grid gap-2" slot="content">
 							<KolButtonLink _label="Linktext"></KolButtonLink>
-							<KolButtonLink _icon="codicon codicon-home" _label="Linktext mit Icon"></KolButtonLink>
-							<KolButtonLink _icon="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolButtonLink>
+							<KolButtonLink _icons="codicon codicon-home" _label="Linktext mit Icon"></KolButtonLink>
+							<KolButtonLink _icons="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolButtonLink>
 							<p>
 								Ich bin ein <KolButtonLink _label="Link"></KolButtonLink> im Fließtext.
 							</p>
@@ -868,7 +868,7 @@ export const HandoutBasic: FC = () => (
 								<KolLogo slot="expert" class="inline-flex w-50" _org={Bundesanstalt['Informationstechnikzentrum Bund']} />
 							</KolButtonLink>
 							<KolButtonLink
-								_icon={{
+								_icons={{
 									left: 'codicon codicon-arrow-left',
 									right: 'codicon codicon-arrow-right',
 									top: 'codicon codicon-arrow-up',
@@ -905,48 +905,48 @@ export const HandoutBasic: FC = () => (
 							_links={[
 								{
 									_label: 'Homepage',
-									_icon: 'codicon codicon-home',
+									_icons: 'codicon codicon-home',
 									_href: '#/',
 								},
 								{
 									_label: '2 Navigation point',
-									_icon: 'codicon codicon-home',
+									_icons: 'codicon codicon-home',
 									_href: '#/untermenu',
 								},
 								{
 									_active: true,
 									_label: '3 Navigation point',
 									_href: '#abc',
-									_icon: 'codicon codicon-home',
+									_icons: 'codicon codicon-home',
 									_children: [
 										{
 											_label: '3.1 Navigation point',
-											_icon: 'codicon codicon-home',
+											_icons: 'codicon codicon-home',
 											_href: '#/',
 										},
 										{
 											_label: '3.2 External navigation point',
-											_icon: 'codicon codicon-home',
+											_icons: 'codicon codicon-home',
 											_href: '#abc',
 											_target: '_blank',
 										},
 										{
 											_label: '3.3 Navigation point',
 											_href: '#abc',
-											_icon: 'codicon codicon-home',
+											_icons: 'codicon codicon-home',
 											_children: [
 												{
 													_active: true,
 													_label: '3.3.1 Navigation point (active)',
-													_icon: 'codicon codicon-home',
+													_icons: 'codicon codicon-home',
 													_href: '#abc',
 												},
-												{ _label: '3.3.2 Navigation point', _icon: 'codicon codicon-home', _href: '#abc' },
+												{ _label: '3.3.2 Navigation point', _icons: 'codicon codicon-home', _href: '#abc' },
 											],
 										},
 									],
 								},
-								{ _label: '3 Navigation point', _icon: 'codicon codicon-home', _href: '#abc' },
+								{ _label: '3 Navigation point', _icons: 'codicon codicon-home', _href: '#abc' },
 							]}
 							_hasCompactButton
 						/>
@@ -975,7 +975,7 @@ export const HandoutBasic: FC = () => (
 						<KolInputFile>Datei hochladen</KolInputFile>
 						<KolInputNumber>Zahleneingabe</KolInputNumber>
 						<KolInputDate _type="date">Datum</KolInputDate>
-						<KolInputEmail _icon="{'left': 'codicon codicon-home'}" _error="Test einer Fehlermeldung" _touched>
+						<KolInputEmail _icons="{'left': 'codicon codicon-home'}" _error="Test einer Fehlermeldung" _touched>
 							E-Mail-Adresse
 						</KolInputEmail>
 						<KolInputText _hint="Ich bin ein Hinweis.">Vorname</KolInputText>
@@ -1005,7 +1005,7 @@ export const HandoutBasic: FC = () => (
 				</div>
 			</KolCard>
 		</div>
-		<KolVersion _version={PackageJson.version}></KolVersion>
+		<KolVersion _version="5.0.2-test.2"></KolVersion>
 		{/* <KolImage _src="assets/images/abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
 		{/* <KolIndentedText></KolIndentedText> */}
 		{/* <KolQuote></KolQuote> */}

package/src/components/heading/badged.tsx

@@ -6,22 +6,22 @@ import { FC } from 'react';
 export const HeadingBadged: FC = () => (
 	<div className="grid gap-4">
 		<KolHeading _label="" _level={1}>
-			Eine Überschrift mit einem <KolBadge _color="red" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={2}>
-			Eine Überschrift mit einem <KolBadge _color="green" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={3}>
-			Eine Überschrift mit einem <KolBadge _color="blue" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={4}>
-			Eine Überschrift mit einem <KolBadge _color="purple" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={5}>
-			Eine Überschrift mit einem <KolBadge _color="yellow" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={6}>
-			Eine Überschrift mit einem <KolBadge _color="pink" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
 		</KolHeading>
 	</div>
 );

package/src/components/icon/basic.tsx

@@ -5,13 +5,13 @@ import { FC } from 'react';
 
 export const IconBasic: FC = () => (
 	<div className="grid gap-4">
-		<KolIcon _ariaLabel="" _icon="codicon codicon-home" />
+		<KolIcon _ariaLabel="" _icons="codicon codicon-home" />
 		<KolIcon
 			style={{
 				color: 'red',
 			}}
 			_ariaLabel=""
-			_icon="codicon codicon-home"
+			_icons="codicon codicon-home"
 		/>
 	</div>
 );

package/src/components/image/basic.tsx

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { KolImage } from '@public-ui/react';
+import React from 'react';
+
+export const ImageBasic: FC = () => <KolImage _src="https://placehold.co/100x100/cc006e/white" _alt="Beispielbild: 100 × 100" />;

package/src/components/image/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { ImageBasic } from './basic';
+
+export const IMAGE_ROUTES: Routes = {
+	image: {
+		basic: ImageBasic,
+	},
+};

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

@@ -1,37 +1,5 @@
-import React from 'react';
-import { KolInputCheckbox } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { InputCheckboxVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-export const InputCheckboxBasic: FC = () => (
-	<>
-		<fieldset>
-			<legend>Checkbox</legend>
-			<KolInputCheckbox _variant="checkbox" _label="Nicht ausgewählt" _value={false} />
-			<KolInputCheckbox _variant="checkbox" _label="Unbestimmt (Indeterminate)" _value={null} _indeterminate />
-			<KolInputCheckbox _variant="checkbox" _label="Ausgewählt" _value={true} _checked />
-			<KolInputCheckbox _variant="checkbox" _label="Disabled" _value={true} _disabled />
-			<KolInputCheckbox _variant="checkbox" _label="Mit Fehler" _value={true} _error={ERROR_MSG} _touched />
-		</fieldset>
-
-		<fieldset>
-			<legend>Switch</legend>
-			<KolInputCheckbox _variant="switch" _label="Nicht ausgewählt" _value={false} />
-			<KolInputCheckbox _variant="switch" _label="Unbestimmt (Indeterminate)" _value={null} _indeterminate />
-			<KolInputCheckbox _variant="switch" _label="Ausgewählt" _value={true} _checked />
-			<KolInputCheckbox _variant="switch" _label="Disabled" _value={true} _disabled />
-			<KolInputCheckbox _variant="switch" _label="Mit Fehler" _value={true} _error={ERROR_MSG} _touched />
-		</fieldset>
-
-		<fieldset>
-			<legend>Button</legend>
-			<KolInputCheckbox _variant="button" _label="Nicht ausgewählt" _value={false} />
-			<KolInputCheckbox _variant="button" _label="Unbestimmt (Indeterminate)" _value={null} _indeterminate />
-			<KolInputCheckbox _variant="button" _label="Ausgewählt" _value={true} _checked />
-			<KolInputCheckbox _variant="button" _label="Disabled" _value={true} _disabled />
-			<KolInputCheckbox _variant="button" _label="Mit Fehler" _value={true} _error={ERROR_MSG} _touched />
-		</fieldset>
-	</>
-);
+export const InputCheckboxBasic: FC = () => <FormWrap RefComponent={InputCheckboxVariants} />;

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

@@ -0,0 +1,5 @@
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { InputCheckboxVariants } from './partials/variants';
+
+export const InputCheckboxButton: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="button" />;

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

@@ -0,0 +1,62 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputCheckbox } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputCheckbox
+				{...props}
+				_icons={{
+					unchecked: 'codicon codicon-close',
+				}}
+				_label="Nicht ausgewählt"
+				_value={false}
+			/>
+			<KolInputCheckbox
+				{...props}
+				_icons={{
+					unchecked: 'codicon codicon-close',
+				}}
+				_label="Unbestimmt (Indeterminate)"
+				_value={null}
+				_indeterminate
+			/>
+			<KolInputCheckbox
+				{...props}
+				ref={ref}
+				_checked
+				_icons={{
+					unchecked: 'codicon codicon-close',
+				}}
+				_label="Ausgewählt"
+				_tooltipAlign="right"
+				_value={true}
+			/>
+			<KolInputCheckbox
+				{...props}
+				_disabled
+				_icons={{
+					unchecked: 'codicon codicon-close',
+				}}
+				_label="Disabled"
+				_value={true}
+				_hint="Hint text"
+			/>
+			<KolInputCheckbox
+				{...props}
+				_error={ERROR_MSG}
+				_icons={{
+					unchecked: 'codicon codicon-close',
+				}}
+				_label="Mit Fehler"
+				_touched
+				_value={true}
+				_hint="Hint text"
+			/>
+		</div>
+	);
+});

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputCheckboxCases } from './cases';
+
+export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Checkbox</legend>
+				<InputCheckboxCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Checkbox (hideLabel)</legend>
+				<InputCheckboxCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

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

@@ -1,9 +1,13 @@
 import { Routes } from '../../shares/types';
 
 import { InputCheckboxBasic } from './basic';
+import { InputCheckboxButton } from './button';
+import { InputCheckboxSwitch } from './switch';
 
 export const INPUT_CHECKBOX_ROUTES: Routes = {
 	'input-checkbox': {
 		basic: InputCheckboxBasic,
+		switch: InputCheckboxSwitch,
+		button: InputCheckboxButton,
 	},
 };

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

@@ -0,0 +1,5 @@
+import React, { FC } from 'react';
+import { InputCheckboxVariants } from './partials/variants';
+import { FormWrap } from '../FormWrap';
+
+export const InputCheckboxSwitch: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />;

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

@@ -1,29 +1,5 @@
-import React from 'react';
-import { KolForm, KolInputColor } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { InputColorVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-export const InputColorBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputColor
-			_id="farbe"
-			_name="farbe"
-			_value="#ff0000"
-			_error={ERROR_MSG}
-			_label="Farbe"
-			_icon={{
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			}}
-		/>
-		<KolInputColor _id="farb1" _label="Farbe" _list="['#000000','#ff0000', '#0000ff','#00ff00']" _error={ERROR_MSG} />
-		<KolInputColor _id="farbe2" _hint="Hilfetext" _value="#ff0000" _label="Farbe (Disabled)" />
-		<KolInputColor _disabled _id="farbe3" _value="#ff0000" _label="Farbe (Disabled)" />
-	</KolForm>
-);
+export const InputColorBasic: FC = () => <FormWrap RefComponent={InputColorVariants} />;

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

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputColor } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.KolInputColor>(function InputColorCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputColor
+				{...props}
+				_error={ERROR_MSG}
+				_icons={{
+					left: 'codicon codicon-symbol-color',
+				}}
+				_label="Color"
+				_value="#f08080"
+			/>
+			<KolInputColor {...props} _error={ERROR_MSG} _label="Color with error" _list="['#000000','#f08080', '#0000ff','#00ff00']" _touched />
+			<KolInputColor {...props} ref={ref} _hint="Hint text" _label="Color with hint" _value="#f08080" />
+			<KolInputColor {...props} _disabled _label="Color (Disabled)" _value="#f08080" />
+		</div>
+	);
+});

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

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

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

@@ -1,20 +1,5 @@
-import React from 'react';
-import { KolForm, KolInputDate } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { InputDateVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-export const InputDateBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputDate _id="date1" _type="date" _label="Datumseingabe" />
-		<KolInputDate _id="datetime-local1" _type="datetime-local" _label="Local-Datetime (Standard)" />
-		<KolInputDate _id="datetime-local2" _step={1} _type="datetime-local" _error={ERROR_MSG} _label="Local-Datetime (mit Sekunden)" />
-		<KolInputDate _id="month" _type="month" _label="Monat" />
-		<KolInputDate _id="week" _type="week" _label="Woche" />
-		<KolInputDate _id="time" _type="time" _label="Zeit (Standard)" />
-		<KolInputDate _id="time" _step={1} _type="time" _label="Zeit (mit Sekunden)" />
-		<KolInputDate _id="date2" _read-only _label="Zahleneingabe (Readonly)" />
-		<KolInputDate _disabled _id="date3" _label="Zahleneingabe (Disabled)" />
-	</KolForm>
-);
+export const InputDateBasic: FC = () => <FormWrap RefComponent={InputDateVariants} />;

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

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputDate } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputDate {...props} _type="date" _label="Datumseingabe" _required />
+			<KolInputDate {...props} _type="datetime-local" _label="Local-Datetime (Standard)" _required />
+			<KolInputDate {...props} _step={1} _type="datetime-local" _error={ERROR_MSG} _label="Local-Datetime (mit Sekunden)" _required _touched />
+			<KolInputDate {...props} _type="month" _label="Monat" _required />
+			<KolInputDate {...props} ref={ref} _type="week" _label="Woche" _required />
+			<KolInputDate {...props} _type="time" _label="Zeit (Standard)" _required />
+			<KolInputDate {...props} _step={1} _type="time" _label="Zeit (mit Sekunden)" _required />
+			<KolInputDate {...props} _readOnly _label="Zahleneingabe (Readonly)" _required />
+			<KolInputDate {...props} _disabled _label="Zahleneingabe (Disabled)" _required />
+		</div>
+	);
+});

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputDateCases } from './cases';
+
+export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Date</legend>
+				<InputDateCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Date (hideLabel)</legend>
+				<InputDateCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

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

@@ -1,30 +1,5 @@
-import React from 'react';
-import { KolInputEmail, KolForm } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { InputEmailVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-export const InputEmailBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputEmail _id="email" _required _value="test@mail.de" _error={ERROR_MSG} _label="E-Mail" />
-		<KolInputEmail
-			_id="email1"
-			_name="email1"
-			_placeholder="elke@mustermann.de"
-			_list="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
-			_label="E-Mail (Liste)"
-			_error={ERROR_MSG}
-			_icon={{
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			}}
-		/>
-		<KolInputEmail _disabled _id="email2" _value="test@mail.de" _label="E-Mail (Disabled)" />
-		<KolInputEmail _id="email3" _read-only _value="test@mail.de" _label="E-Mail (Readonly)" />
-	</KolForm>
-);
+export const InputEmailBasic: FC = () => <FormWrap RefComponent={InputEmailVariants} />;

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

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputEmail } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputEmail {...props} _required _value="test@mail.de" _error={ERROR_MSG} _label="E-Mail" />
+			<KolInputEmail
+				{...props}
+				ref={ref}
+				_placeholder="elke@mustermann.de"
+				_list="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
+				_label="E-Mail (Liste)"
+				_error={ERROR_MSG}
+				_touched
+				_icons={{
+					left: {
+						icon: 'codicon codicon-arrow-left',
+					},
+					right: {
+						icon: 'codicon codicon-arrow-right',
+					},
+				}}
+			/>
+			<KolInputEmail {...props} _disabled _value="test@mail.de" _label="E-Mail (Disabled)" />
+			<KolInputEmail {...props} _readOnly _value="test@mail.de" _label="E-Mail (Readonly)" />
+		</div>
+	);
+});