@public-ui/sample-react 4.3.1-rc.0 → 4.3.1-rc.4

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

@@ -2,15 +2,19 @@ import { KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { logKoliBriCallbackEvent, logKoliBriNativeEvent } from '../../shares/utils';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextBasic: FC = () => (
-	<>
+	<div className="grid gap-4">
 		<SampleDescription>
-			<p>This story showcases the most important InputText variants: default, required, validation error, disabled, read-only and with icons.</p>
+			<p>
+				This story showcases the most important InputText variants: default, required, validation error, disabled, read-only, search with clear button, and with
+				icons.
+			</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="events">
 			<KolInputText
 				_label="Name"
 				_value="Anderson-Clark"
@@ -29,22 +33,37 @@ export const InputTextBasic: FC = () => (
 				onInput={logKoliBriNativeEvent}
 				onKeyDown={logKoliBriNativeEvent}
 			/>
+		</SampleBlock>
+		<SampleBlock id="error">
 			<KolInputText _label="Name" _required _msg={{ _type: 'error', _description: 'Please enter your name' }} _touched />
+		</SampleBlock>
+		<SampleBlock id="hint">
 			<KolInputText _label="Name" _required _hint="Enter your surname" />
+		</SampleBlock>
+		<SampleBlock id="disabled">
 			<KolInputText _label="Name" _value="Anderson-Clark" _disabled />
+		</SampleBlock>
+		<SampleBlock id="info-popover">
 			<KolInputText
 				_label="Name"
 				_required
 				_value="Anderson-Clark"
 				_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
 			/>
+		</SampleBlock>
+		<SampleBlock id="readonly-popover">
 			<KolInputText
 				_label="Name"
 				_readOnly
 				_value="Anderson-Clark"
 				_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
 			/>
+		</SampleBlock>
+		<SampleBlock id="icon">
 			<KolInputText _label="Name" _icons="kolicon-house" _value="Anderson-Clark" />
-		</div>
-	</>
+		</SampleBlock>
+		<SampleBlock id="search">
+			<KolInputText _label="Search" _type="search" _value="test" _placeholder="Search with clear button" />
+		</SampleBlock>
+	</div>
 );

package/src/components/input-text/clear-button.tsx

@@ -0,0 +1,26 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleBlock } from '../SampleBlock';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextClearButton: FC = () => (
+	<div className="grid gap-4">
+		<SampleDescription>
+			<p>This sample demonstrates the clear button for search type input fields.</p>
+		</SampleDescription>
+
+		<SampleBlock id="search-empty">
+			<KolInputText _label="Search" _type="search" _placeholder="Enter search term" />
+		</SampleBlock>
+		<SampleBlock id="search-value">
+			<KolInputText _label="Search (with value)" _type="search" _value="test" _placeholder="Enter search term" />
+		</SampleBlock>
+		<SampleBlock id="search-disabled">
+			<KolInputText _label="Search (disabled)" _type="search" _disabled _value="test" _placeholder="Disabled search" />
+		</SampleBlock>
+		<SampleBlock id="text-no-clear-button">
+			<KolInputText _label="Text (no clear button)" _type="text" _value="test" _placeholder="Regular text input" />
+		</SampleBlock>
+	</div>
+);

package/src/components/input-text/counter.tsx

@@ -1,6 +1,7 @@
 import { KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextCounter: FC = () => (
@@ -9,8 +10,8 @@ export const InputTextCounter: FC = () => (
 			<p>This story showcases an input with a counter for the chars in the field. Maximal length is 30.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="counter">
 			<KolInputText _label="Name" _icons="kolicon-house" _value="Anderson-Clark" _hasCounter _maxLength={30} />
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/input-text/disabled.tsx

@@ -1,19 +1,26 @@
 import { KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextDisabled: FC = () => (
-	<>
+	<div className="grid gap-4">
 		<SampleDescription>
 			<p>This story demonstrates the disabled state of KolInputText. Disabled inputs cannot be edited or focused.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="placeholder">
 			<KolInputText _label="Disabled with placeholder" _placeholder="Placeholder text" _disabled />
+		</SampleBlock>
+		<SampleBlock id="value">
 			<KolInputText _label="Disabled with value" _value="This field is disabled" _disabled />
+		</SampleBlock>
+		<SampleBlock id="error">
 			<KolInputText _label="Disabled with error message" _value="Invalid value" _msg={{ _type: 'error', _description: 'Error message' }} _disabled _touched />
+		</SampleBlock>
+		<SampleBlock id="enabled">
 			<KolInputText _label="Comparison: Enabled" _value="This field is enabled" />
-		</div>
-	</>
+		</SampleBlock>
+	</div>
 );

package/src/components/input-text/expert-slot.tsx

@@ -1,19 +1,21 @@
 import { KolBadge, KolIcon, KolInputText, KolPopoverButton } from '@public-ui/react-v19';
 import * as React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextExpertSlot = () => {
 	return (
-		<>
+		<div className="grid gap-4">
 			<SampleDescription>
 				<p>This sample shows KolInputText with expert slot. The expert slot allows for complex custom content beyond simple text inputs.</p>
 			</SampleDescription>
 
-			<div className="grid gap-4">
+			<SampleBlock id="text">
 				<KolInputText _label="" _type="text">
 					<span slot="expert">I am more than just a input field</span>
 				</KolInputText>
-
+			</SampleBlock>
+			<SampleBlock id="badge">
 				<KolInputText _label="" _type="text" _value="Complex example">
 					<div slot="expert" className="flex items-center gap-2">
 						<KolBadge _label="Premium" _color="#1a73e8" />
@@ -21,13 +23,15 @@ export const InputTextExpertSlot = () => {
 						<span>Verified account with premium features</span>
 					</div>
 				</KolInputText>
-
+			</SampleBlock>
+			<SampleBlock id="note">
 				<KolInputText _label="" _type="text" _placeholder="Enter your email">
 					<div slot="expert" style={{ padding: '0.5rem', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
 						<strong>Note:</strong> This email will be used for account recovery and notifications.
 					</div>
 				</KolInputText>
-
+			</SampleBlock>
+			<SampleBlock id="required">
 				<KolInputText _label="" _type="text" _required>
 					<div slot="expert" className="inline-block">
 						<span className="expert-slot-required-label">Username</span>
@@ -36,7 +40,8 @@ export const InputTextExpertSlot = () => {
 						</KolPopoverButton>
 					</div>
 				</KolInputText>
-
+			</SampleBlock>
+			<SampleBlock id="readonly">
 				<KolInputText _label="" _type="text" _readOnly _value="(read only) is also not appended">
 					<div slot="expert" className="inline-block">
 						<span className="expert-slot-required-label">Username</span>
@@ -45,7 +50,7 @@ export const InputTextExpertSlot = () => {
 						</KolPopoverButton>
 					</div>
 				</KolInputText>
-			</div>
-		</>
+			</SampleBlock>
+		</div>
 	);
 };

package/src/components/input-text/hide-label.tsx

@@ -1,6 +1,7 @@
 import { KolAlert, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextHideLabel: FC = () => (
@@ -12,15 +13,15 @@ export const InputTextHideLabel: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<section>
+		<SampleBlock id="search">
 			<KolInputText _hideLabel _label="Search" _placeholder="Search..." _type="search" />
-		</section>
+		</SampleBlock>
 
-		<section>
+		<SampleBlock id="error">
 			<KolInputText _hideLabel _label="Email" _placeholder="Enter email" _msg={{ _type: 'error', _description: 'Invalid email format' }} _touched />
-		</section>
+		</SampleBlock>
 
-		<section>
+		<SampleBlock id="address-group">
 			<fieldset className="grid md:grid-cols-2 gap-4">
 				<legend>Street Address</legend>
 				<KolAlert className="col-span-2" _level={0} _type="error">
@@ -43,6 +44,6 @@ export const InputTextHideLabel: FC = () => (
 					_touched
 				/>
 			</fieldset>
-		</section>
+		</SampleBlock>
 	</div>
 );

package/src/components/input-text/hide-msg.tsx

@@ -1,6 +1,7 @@
 import { KolAlert, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextHideMsg: FC = () => (
@@ -12,10 +13,10 @@ export const InputTextHideMsg: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<section>
+		<SampleBlock id="single-error">
 			<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label="Input with error" _touched />
-		</section>
-		<section>
+		</SampleBlock>
+		<SampleBlock id="combined-error">
 			<fieldset className="grid md:grid-cols-2 gap-4">
 				<legend>Combined input field</legend>
 				<KolAlert className="col-span-2" _level={0} _type="error">
@@ -24,6 +25,6 @@ export const InputTextHideMsg: FC = () => (
 				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label="First input" _touched />
 				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label="Second input with error" _touched />
 			</fieldset>
-		</section>
+		</SampleBlock>
 	</div>
 );

package/src/components/input-text/message-types.tsx

@@ -1,20 +1,29 @@
 import { KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextMessageTypes: FC = () => (
-	<>
+	<div className="grid gap-4">
 		<SampleDescription>
 			<p>This story demonstrates all available message types for KolInputText: default, info, error, warning, and success.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="msg-default">
 			<KolInputText _label="Default message" _value="Valid value" _msg={{ _type: 'default', _description: 'This is a default message' }} _touched />
+		</SampleBlock>
+		<SampleBlock id="msg-error">
 			<KolInputText _label="Error message" _value="Invalid value" _msg={{ _type: 'error', _description: 'This is an error message' }} _touched />
+		</SampleBlock>
+		<SampleBlock id="msg-info">
 			<KolInputText _label="Info message" _value="Some value" _msg={{ _type: 'info', _description: 'This is an informational message' }} _touched />
+		</SampleBlock>
+		<SampleBlock id="msg-success">
 			<KolInputText _label="Success message" _value="Valid value" _msg={{ _type: 'success', _description: 'This is a success message' }} _touched />
+		</SampleBlock>
+		<SampleBlock id="msg-warning">
 			<KolInputText _label="Warning message" _value="Valid value" _msg={{ _type: 'warning', _description: 'This is a warning message' }} _touched />
-		</div>
-	</>
+		</SampleBlock>
+	</div>
 );

package/src/components/input-text/msg-and-counter.tsx

@@ -1,17 +1,20 @@
 import { KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextMsgAndCounter: FC = () => (
-	<>
+	<div className="grid gap-4">
 		<SampleDescription>
 			<p>Regression sample for #9073: when both _msg and _hasCounter are set, aria-describedby must reference both the message and counter elements.</p>
 			<p>Open DevTools and inspect each input to confirm aria-describedby contains both IDs.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="warning">
 			<KolInputText _label="Warning + Counter" _msg={{ _type: 'warning', _description: 'Bitte prüfen Sie Ihre Eingabe.' }} _hasCounter _maxLength={30} />
+		</SampleBlock>
+		<SampleBlock id="error">
 			<KolInputText
 				_label="Error + Counter (touched)"
 				_msg={{ _type: 'error', _description: 'Pflichtfeld – bitte ausfüllen.' }}
@@ -19,7 +22,9 @@ export const InputTextMsgAndCounter: FC = () => (
 				_maxLength={30}
 				_touched
 			/>
+		</SampleBlock>
+		<SampleBlock id="info">
 			<KolInputText _label="Info + Counter" _msg={{ _type: 'info', _description: 'Hinweis: maximal 20 Zeichen.' }} _hasCounter _maxLength={20} />
-		</div>
-	</>
+		</SampleBlock>
+	</div>
 );

package/src/components/input-text/pattern.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolInputText } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 const PATTERN = '^[A-Za-z]{3}-\\d{3}$';
@@ -11,20 +12,22 @@ export const InputTextPattern: FC = () => (
 		<SampleDescription>
 			<p>This sample demonstrates HTML5 pattern validation for both native input and KolInputText components.</p>
 		</SampleDescription>
-		<form className="grid gap-4">
-			<div className="grid gap-2">
-				<label htmlFor="native-input">Native Input (Pattern: AAA-123, case-insensitive)</label>
-				<input id="native-input" name="native-input" pattern={PATTERN} type="text" />
-			</div>
-			<KolInputText
-				_label="KoliBri Input (Pattern: AAA-123, case-insensitive)"
-				_name="kolibri-input"
-				_pattern={PATTERN}
-				_hint="Note: This input is not linked to the form element. The validation inside the Shadow DOM is currently not triggered on form submit."
-			/>
-			<div>
-				<button type="submit">Submit</button>
-			</div>
-		</form>
+		<SampleBlock id="pattern">
+			<form className="grid gap-4">
+				<div className="grid gap-2">
+					<label htmlFor="native-input">Native Input (Pattern: AAA-123, case-insensitive)</label>
+					<input id="native-input" name="native-input" pattern={PATTERN} type="text" />
+				</div>
+				<KolInputText
+					_label="KoliBri Input (Pattern: AAA-123, case-insensitive)"
+					_name="kolibri-input"
+					_pattern={PATTERN}
+					_hint="Note: This input is not linked to the form element. The validation inside the Shadow DOM is currently not triggered on form submit."
+				/>
+				<div>
+					<button type="submit">Submit</button>
+				</div>
+			</form>
+		</SampleBlock>
 	</>
 );

package/src/components/input-text/placeholder.tsx

@@ -1,20 +1,29 @@
 import { KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextPlaceholder: FC = () => (
-	<>
+	<div className="grid gap-4">
 		<SampleDescription>
 			<p>This story demonstrates the placeholder feature of KolInputText.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="first-name">
 			<KolInputText _label="First name" _placeholder="Enter your first name" />
+		</SampleBlock>
+		<SampleBlock id="email">
 			<KolInputText _label="Email address" _placeholder="user@example.com" />
+		</SampleBlock>
+		<SampleBlock id="tel">
 			<KolInputText _label="Phone number" _placeholder="+49 123 456789" _type="tel" />
+		</SampleBlock>
+		<SampleBlock id="url">
 			<KolInputText _label="Website" _placeholder="https://example.com" _type="url" />
+		</SampleBlock>
+		<SampleBlock id="search">
 			<KolInputText _label="Search" _placeholder="Search..." _type="search" />
-		</div>
-	</>
+		</SampleBlock>
+	</div>
 );

package/src/components/input-text/readonly.tsx

@@ -1,17 +1,22 @@
 import { KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextReadonly: FC = () => (
-	<>
+	<div className="grid gap-4">
 		<SampleDescription>
 			<p>This story demonstrates the readonly state of KolInputText. Readonly inputs can be focused but not edited.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="placeholder">
 			<KolInputText _label="Readonly with placeholder" _placeholder="Placeholder text" _readOnly />
+		</SampleBlock>
+		<SampleBlock id="value">
 			<KolInputText _label="Readonly with value" _value="This field is readonly" _readOnly />
+		</SampleBlock>
+		<SampleBlock id="info">
 			<KolInputText
 				_label="Readonly with info message"
 				_value="Read-only value"
@@ -19,7 +24,9 @@ export const InputTextReadonly: FC = () => (
 				_readOnly
 				_touched
 			/>
+		</SampleBlock>
+		<SampleBlock id="editable">
 			<KolInputText _label="Comparison: Editable" _value="This field is editable" />
-		</div>
-	</>
+		</SampleBlock>
+	</div>
 );

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

@@ -3,6 +3,7 @@ import { InputTextAccessShortKey } from './access-short-key';
 import { InputTextAriaDetails } from './aria-details';
 import { InputTextBackground } from './background-test';
 import { InputTextBasic } from './basic';
+import { InputTextClearButton } from './clear-button';
 import { InputTextCounter } from './counter';
 import { InputTextDisabled } from './disabled';
 import { InputTextExpertSlot } from './expert-slot';
@@ -23,6 +24,7 @@ export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		'aria-details': InputTextAriaDetails,
 		basic: InputTextBasic,
+		'clear-button': InputTextClearButton,
 		'get-value': InputTextOnInputOnChange,
 		'message-types': InputTextMessageTypes,
 		placeholder: InputTextPlaceholder,

package/src/components/input-text/select-range.tsx

@@ -1,5 +1,6 @@
 import { KolButtonLink, KolInputText } from '@public-ui/react-v19';
 import * as React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextSelectRange = () => {
@@ -25,12 +26,12 @@ export const InputTextSelectRange = () => {
 			<SampleDescription>
 				<p>This sample shows how to change the selection in a KolInputText.</p>
 			</SampleDescription>
-			<div className="grid gap-4">
+			<SampleBlock id="select-range">
 				<KolInputText _value="Very long value" _label="Text Input Label" ref={textInput} />
 				<KolButtonLink _label="Set Start" onClick={setSelectioStart} />
 				<KolButtonLink _label="Set Range" onClick={setSelectionRange} />
 				<KolButtonLink _label="Set Range Text" onClick={setRangeText} />
-			</div>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/input-text/smart-button.tsx

@@ -1,6 +1,7 @@
 import { ToasterService } from '@public-ui/components';
 import { KolInputText } from '@public-ui/react-v19';
 import * as React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 const smartButtonProps = {
@@ -31,12 +32,12 @@ export const InputTextSmartButton = () => {
 	};
 
 	return (
-		<>
+		<div className="grid gap-4">
 			<SampleDescription>
 				<p>This sample shows the smart button feature for KolInputText. It allows the usage of a button inside the bnput.</p>
 			</SampleDescription>
 
-			<div className="grid gap-4">
+			<SampleBlock id="enabled">
 				<KolInputText
 					_label="Input with button and icons"
 					_type="text"
@@ -47,6 +48,8 @@ export const InputTextSmartButton = () => {
 					}}
 					_icons={icons}
 				></KolInputText>
+			</SampleBlock>
+			<SampleBlock id="disabled">
 				<KolInputText
 					_label="Disabled input with button and icons"
 					_disabled
@@ -57,7 +60,7 @@ export const InputTextSmartButton = () => {
 					}}
 					_icons={icons}
 				></KolInputText>
-			</div>
-		</>
+			</SampleBlock>
+		</div>
 	);
 };

package/src/components/input-text/text-formatter.tsx

@@ -1,6 +1,7 @@
 import { KolForm, KolHeading, KolInputText } from '@public-ui/react-v19';
 import * as React from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 /**
@@ -208,7 +209,7 @@ export function InputTextFormatterDemo() {
 					field displays the <em>formatted</em> value for better readability.
 				</p>
 			</SampleDescription>
-			<section className="w-full flex flex-col">
+			<SampleBlock id="iban" className="w-full flex flex-col">
 				<div className="p-2">
 					<KolHeading _label="Live Formatting - IBAN" _level={2} />
 					<p className="text-sm mb-2">Formatting occurs during input with intelligent cursor control</p>
@@ -239,9 +240,9 @@ export function InputTextFormatterDemo() {
 					<KolHeading _label="Model (Unformatted Value)" _level={2} />
 					<pre className="text-base">{JSON.stringify(ibanForm.watch(), null, 2)}</pre>
 				</div>
-			</section>
+			</SampleBlock>
 
-			<section className="w-full flex flex-col">
+			<SampleBlock id="currency" className="w-full flex flex-col">
 				<div className="p-2">
 					<KolHeading _label="On-Blur Formatting - Currency" _level={2} />
 					<p className="text-sm mb-2">Formatting occurs when leaving the field (onBlur) for uninterrupted input</p>
@@ -275,7 +276,7 @@ export function InputTextFormatterDemo() {
 					<KolHeading _label="Model (Numeric Value)" _level={2} />
 					<pre className="text-base">{JSON.stringify(currencyForm.watch(), null, 2)}</pre>
 				</div>
-			</section>
+			</SampleBlock>
 		</>
 	);
 }

package/src/components/input-text/variant.tsx

@@ -17,12 +17,13 @@ import type { FC } from 'react';
 import React, { useMemo } from 'react';
 import { useSearchParams } from 'react-router';
 import { fetchVariantData } from '../../shares/fetchVariantData';
-import { getCustomThemes } from '../../shares/store';
+import { getTheme } from '../../shares/store';
+import { SampleBlock, toKebabCase } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputVariant: FC = () => {
 	const [searchParams] = useSearchParams();
-	const theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;
+	const theme = searchParams.get('theme') ?? getTheme();
 	const inputVariants = useMemo(() => (theme ? fetchVariantData(theme, 'inputVariants') : []), [theme]);
 
 	return (
@@ -33,12 +34,13 @@ export const InputVariant: FC = () => {
 
 			<div className="grid grid-cols-2 gap-8 p-8">
 				{!Array.isArray(inputVariants) || inputVariants.length === 0 ? (
-					<p>This theme has no variants for inputs.</p>
+					<SampleBlock id="no-variants">
+						<p>This theme has no variants for inputs.</p>
+					</SampleBlock>
 				) : (
 					inputVariants.map((element) => {
 						return (
-							<div key={element} className="grid gap-4 p-8">
-								<h2>Variante: {element}</h2>
+							<SampleBlock key={element} id={`variant-${toKebabCase(String(element))}`} heading={`Variante: ${String(element)}`} className="grid gap-4 p-8">
 								<KolInputText
 									_label="Input Text"
 									_hint="Enter your surname"
@@ -81,7 +83,7 @@ export const InputVariant: FC = () => {
 									_variant={element}
 								/>
 								<KolTextarea _label="Textarea" _variant={element} />
-							</div>
+							</SampleBlock>
 						);
 					})
 				)}