@public-ui/sample-react 1.7.0-rc.5

package/src/samples/handout/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { HandoutBasic } from './basic';
+
+export const HANDOUT_ROUTES: Routes = {
+	handout: {
+		basic: HandoutBasic,
+	},
+};

package/src/samples/heading/badged.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { KolBadge, KolHeading } from '@public-ui/react';
+
+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>
+		</KolHeading>
+		<KolHeading _label="" _level={2}>
+			Eine Überschrift mit einem <KolBadge _color="green" _label="Label"></KolBadge>
+		</KolHeading>
+		<KolHeading _label="" _level={3}>
+			Eine Überschrift mit einem <KolBadge _color="blue" _label="Label"></KolBadge>
+		</KolHeading>
+		<KolHeading _label="" _level={4}>
+			Eine Überschrift mit einem <KolBadge _color="purple" _label="Label"></KolBadge>
+		</KolHeading>
+		<KolHeading _label="" _level={5}>
+			Eine Überschrift mit einem <KolBadge _color="yellow" _label="Label"></KolBadge>
+		</KolHeading>
+		<KolHeading _label="" _level={6}>
+			Eine Überschrift mit einem <KolBadge _color="pink" _label="Label"></KolBadge>
+		</KolHeading>
+	</div>
+);

package/src/samples/heading/basic.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { KolHeading } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const HeadingBasic: FC = () => (
+	<div className="grid gap-4">
+		<KolHeading _label="Ich bin eine H1-Überschrift" _level={1} />
+		<KolHeading _label="Ich bin eine H2-Überschrift" _level={2} />
+		<KolHeading _label="Ich bin eine H3-Überschrift" _level={3} />
+		<KolHeading _label="Ich bin eine H4-Überschrift" _level={4} />
+		<KolHeading _label="Ich bin eine H5-Überschrift" _level={5} />
+		<KolHeading _label="Ich bin eine H6-Überschrift" _level={6} />
+	</div>
+);

package/src/samples/heading/paragraph.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { KolHeading } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const HeadingParagraph: FC = () => (
+	<div className="grid gap-4">
+		<KolHeading _label="Ich bin eine H1-Überschrift" _level={1} />
+		<p>
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
+		</p>
+		<KolHeading _label="Ich bin eine H2-Überschrift" _level={2} />
+		<p>
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
+		</p>
+		<KolHeading _label="Ich bin eine H3-Überschrift" _level={3} />
+		<p>
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
+		</p>
+		<KolHeading _label="Ich bin eine H4-Überschrift" _level={4} />
+		<p>
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
+		</p>
+		<KolHeading _label="Ich bin eine H5-Überschrift" _level={5} />
+		<p>
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
+		</p>
+		<KolHeading _label="Ich bin eine H6-Überschrift" _level={6} />
+		<p>
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
+		</p>
+	</div>
+);

package/src/samples/heading/routes.ts

@@ -0,0 +1,15 @@
+import { Routes } from '../../shares/types';
+
+import { HeadingBadged } from './badged';
+
+import { HeadingBasic } from './basic';
+
+import { HeadingParagraph } from './paragraph';
+
+export const HEADING_ROUTES: Routes = {
+	heading: {
+		badge: HeadingBadged,
+		basic: HeadingBasic,
+		paragraph: HeadingParagraph,
+	},
+};

package/src/samples/icon/basic.tsx

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

package/src/samples/icon/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { IconBasic } from './basic';
+
+export const ICON_ROUTES: Routes = {
+	icon: {
+		basic: IconBasic,
+	},
+};

package/src/samples/indented-text/basic.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { KolIndentedText } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const IndentedTextBasic: FC = () => (
+	<div className="grid gap-4">
+		<p>
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+		</p>
+		<KolIndentedText>
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+		</KolIndentedText>
+		<p>
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+		</p>
+	</div>
+);

package/src/samples/indented-text/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { IndentedTextBasic } from './basic';
+
+export const INDENTED_ROUTES: Routes = {
+	'indented-text': {
+		basic: IndentedTextBasic,
+	},
+};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { KolInputCheckbox } from '@public-ui/react';
+
+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>
+	</>
+);

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

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

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { KolForm, KolInputColor } from '@public-ui/react';
+
+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>
+);

package/src/samples/input-color/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { InputColorBasic } from './basic';
+
+export const INPUT_COLOR_ROUTES: Routes = {
+	'input-color': {
+		basic: InputColorBasic,
+	},
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { KolForm, KolInputDate } from '@public-ui/react';
+
+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>
+);

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

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { InputDateBasic } from './basic';
+
+export const INPUT_DATE_ROUTES: Routes = {
+	'input-date': {
+		basic: InputDateBasic,
+	},
+};

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { KolInputEmail, KolForm } from '@public-ui/react';
+
+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>
+);

package/src/samples/input-email/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { InputEmailBasic } from './basic';
+
+export const INPUT_EMAIL_ROUTES: Routes = {
+	'input-email': {
+		basic: InputEmailBasic,
+	},
+};

package/src/samples/input-file/basic.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { KolInputFile, KolForm } from '@public-ui/react';
+
+import { FC } from 'react';
+
+import { ERROR_MSG } from '../../shares/constants';
+
+export const InputFileBasic: FC = () => (
+	<KolForm className="grid gap-4">
+		<KolInputFile
+			_id="file"
+			_name="file"
+			_required
+			_error={ERROR_MSG}
+			_label="Datei hochladen"
+			_icon={{
+				left: {
+					icon: 'codicon codicon-save',
+				},
+			}}
+		/>
+		<KolInputFile _id="file" _multiple _error={ERROR_MSG} _label="Datei hochladen (Multiple)" />
+		<KolInputFile _disabled _id="file" _label="Datei hochladen (Disabled)" />
+	</KolForm>
+);

package/src/samples/input-file/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { InputFileBasic } from './basic';
+
+export const INPUT_FILE_ROUTES: Routes = {
+	'input-file': {
+		basic: InputFileBasic,
+	},
+};

package/src/samples/input-number/basic.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { KolForm, KolInputNumber } from '@public-ui/react';
+
+import { FC } from 'react';
+
+import { ERROR_MSG } from '../../shares/constants';
+
+export const InputNumberBasic: FC = () => (
+	<KolForm className="grid gap-4">
+		<KolInputNumber
+			_id="number"
+			_name="number"
+			_required
+			_error={ERROR_MSG}
+			_placeholder="Mit Icons"
+			_label="Zahleneingabe"
+			_icon={{
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			}}
+		/>
+		<KolInputNumber _id="number" _max={10} _min={-10} _step={2} _label="Zahleneingabe (-10 bis 10 in 2er Schritten)" />
+		<KolInputNumber _id="number" _read-only _label="Zahleneingabe (Readonly)" />
+		<KolInputNumber _disabled _id="number" _label="Zahleneingabe (Disabled)" />
+	</KolForm>
+);

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

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

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { KolForm, KolInputPassword } from '@public-ui/react';
+
+import { FC } from 'react';
+
+import { ERROR_MSG } from '../../shares/constants';
+
+export const InputPasswordBasic: FC = () => (
+	<KolForm className="grid gap-4">
+		<KolInputPassword
+			_id="password"
+			_name="password"
+			_required
+			_error={ERROR_MSG}
+			_placeholder="Mit Icons"
+			_label="Passwort"
+			_icon={{
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			}}
+			_smartButton={{
+				_icon: {
+					left: {
+						icon: 'codicon codicon-eye',
+					},
+				},
+				_hideLabel: true,
+				_label: 'Passwort anzeigen',
+				_on: {
+					onClick: () => {},
+				},
+			}}
+		/>
+		<KolInputPassword _disabled _id="password" _error={ERROR_MSG} _label="Passwort (Disabled)" />
+		<KolInputPassword _id="password" _read-only _label="Passwort (Readonly)" />
+	</KolForm>
+);

package/src/samples/input-password/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { InputPasswordBasic } from './basic';
+
+export const INPUT_PASSWORD_ROUTES: Routes = {
+	'input-password': {
+		basic: InputPasswordBasic,
+	},
+};

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { KolForm, KolInputRadio } from '@public-ui/react';
+
+import { FC } from 'react';
+
+import { ERROR_MSG } from '../../shares/constants';
+
+export const InputRadioBasic: FC = () => (
+	<KolForm className="grid gap-4">
+		<KolInputRadio
+			_id="anrede"
+			_error={ERROR_MSG}
+			_name="anrede"
+			_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
+			_label="Anrede"
+		/>
+		<KolInputRadio
+			_id="anrede"
+			_required
+			_error={ERROR_MSG}
+			_name="anrede2"
+			_value="Firma"
+			_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)','value':'Herr'},{'label':'Firma','value':'Firma'}]"
+			_label="Anrede"
+		/>
+		<KolInputRadio
+			_id="anrede"
+			_orientation="horizontal"
+			_required
+			_error={ERROR_MSG}
+			_name="anrede2"
+			_value="Firma"
+			_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
+			_label="Anrede (horizontal)"
+		/>
+		<KolInputRadio
+			_id="anrede"
+			_disabled
+			_error={ERROR_MSG}
+			_name="anrede3"
+			_value="Firma"
+			_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
+			_label="Anrede"
+		/>
+	</KolForm>
+);

package/src/samples/input-radio/horizontal.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { KolButton, KolDetails, KolInputCheckbox, KolInputRadio } from '@public-ui/react';
+import { FC, useState } from 'react';
+import { Orientation } from '@public-ui/components';
+
+export const InputRadioHorizontal: FC = () => {
+	const [show, setShow] = useState(true);
+	const [orientation, setOrientation] = useState<Orientation>('horizontal');
+
+	const options = [
+		{ label: 'Field 1', value: 1 },
+		{ label: 'Field 2', value: 2 },
+	];
+
+	const showClick = () => {
+		setShow((s) => !s);
+	};
+
+	const toggleOrientation = () => {
+		setOrientation((o) => (o === 'horizontal' ? 'vertical' : 'horizontal'));
+	};
+
+	return (
+		<div className="grid gap-4">
+			<KolDetails _label="Description" _open>
+				<p>
+					This sample simulates the <code>horizontal</code> and <code>vertical</code> orientation of the <code>kol-input-radio</code>, if we rerender the
+					component.
+				</p>
+			</KolDetails>
+			<div className="flex gap-4">
+				<KolButton _label="Click me a few times" _on={{ onClick: showClick }} />
+				<KolInputCheckbox _label="Switch orientation (horizontal/vertical)" _on={{ onChange: toggleOrientation }} _variant="switch" />
+			</div>
+			{show && (
+				<div className="container my-4 d-grid gap-4">
+					<KolInputRadio _label={`Test (${orientation})`} _options={options} _orientation={orientation} />
+				</div>
+			)}
+		</div>
+	);
+};

package/src/samples/input-radio/routes.ts

@@ -0,0 +1,14 @@
+import { Routes } from '../../shares/types';
+
+import { InputRadioBasic } from './basic';
+import { InputRadioHorizontal } from './horizontal';
+
+import { InputRadioSelect } from './select';
+
+export const INPUT_RADIO_ROUTES: Routes = {
+	'input-radio': {
+		basic: InputRadioBasic,
+		horizontal: InputRadioHorizontal,
+		select: InputRadioSelect,
+	},
+};

package/src/samples/input-radio/select.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { KolForm, KolInputRadio } from '@public-ui/react';
+
+import { FC } from 'react';
+
+import { ERROR_MSG } from '../../shares/constants';
+
+const options = [
+	{ label: 'Frau', value: 'Frau' },
+	{ disabled: true, label: 'Herr (disabled)', value: 'Herr' },
+	{ label: 'Firma', value: 'Firma' },
+];
+
+export const InputRadioSelect: FC = () => (
+	<KolForm className="grid gap-4">
+		<KolInputRadio _id="anrede-radio" _error={ERROR_MSG} _name="anrede" _options={options} _label="Anrede" />
+	</KolForm>
+);

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { KolForm, KolInputRange } from '@public-ui/react';
+
+import { FC } from 'react';
+
+import { ERROR_MSG } from '../../shares/constants';
+
+export const InputRangeBasic: FC = () => (
+	<KolForm className="grid gap-4">
+		<KolInputRange
+			_id="range"
+			_min={0}
+			_max={50}
+			_name="range"
+			_error={ERROR_MSG}
+			_label="Schieberegler"
+			_icon={{
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			}}
+		/>
+		<KolInputRange _id="range" _min={0} _max={50} _step={10} _error={ERROR_MSG} _label="Schieberegler" />
+		<KolInputRange _disabled _id="range" _min={0} _max={50} _label="Schieberegler" />
+	</KolForm>
+);

package/src/samples/input-range/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { InputRangeBasic } from './basic';
+
+export const INPUT_RANGE_ROUTES: Routes = {
+	'input-range': {
+		basic: InputRangeBasic,
+	},
+};