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

package/src/components/table/test-complex-data.ts

@@ -0,0 +1,277 @@
+type ComplexData = {
+	id: number;
+	common_name: string;
+	scientific_name: string;
+	conservation_status: string;
+	habitat: string;
+	diet: string;
+	geographic_range: string;
+};
+
+const SPECIES: Omit<ComplexData, 'id'>[] = [
+	{
+		common_name: 'African elephant',
+		scientific_name: 'Loxodonta africana',
+		conservation_status: 'Vulnerable',
+		habitat: 'Savannas and forests',
+		diet: 'Herbivore',
+		geographic_range: 'Sub-Saharan Africa',
+	},
+	{
+		common_name: 'American bison',
+		scientific_name: 'Bison bison',
+		conservation_status: 'Near Threatened',
+		habitat: 'Grasslands and plains',
+		diet: 'Herbivore',
+		geographic_range: 'North America',
+	},
+	{
+		common_name: 'Arctic fox',
+		scientific_name: 'Vulpes lagopus',
+		conservation_status: 'Least Concern',
+		habitat: 'Tundra',
+		diet: 'Omnivore',
+		geographic_range: 'Arctic Circle',
+	},
+	{
+		common_name: 'Atlantic puffin',
+		scientific_name: 'Fratercula arctica',
+		conservation_status: 'Vulnerable',
+		habitat: 'Coastal cliffs and open ocean',
+		diet: 'Carnivore',
+		geographic_range: 'North Atlantic Ocean',
+	},
+	{
+		common_name: 'Bengal tiger',
+		scientific_name: 'Panthera tigris tigris',
+		conservation_status: 'Endangered',
+		habitat: 'Tropical forests and grasslands',
+		diet: 'Carnivore',
+		geographic_range: 'Indian subcontinent',
+	},
+	{
+		common_name: 'Black rhinoceros',
+		scientific_name: 'Diceros bicornis',
+		conservation_status: 'Critically Endangered',
+		habitat: 'Savannas and shrublands',
+		diet: 'Herbivore',
+		geographic_range: 'Eastern and Southern Africa',
+	},
+	{
+		common_name: 'Blue whale',
+		scientific_name: 'Balaenoptera musculus',
+		conservation_status: 'Endangered',
+		habitat: 'Open ocean',
+		diet: 'Carnivore',
+		geographic_range: 'Global oceans',
+	},
+	{
+		common_name: 'California condor',
+		scientific_name: 'Gymnogyps californianus',
+		conservation_status: 'Critically Endangered',
+		habitat: 'Cliffs and scrublands',
+		diet: 'Scavenger',
+		geographic_range: 'Western United States',
+	},
+	{
+		common_name: 'Cheetah',
+		scientific_name: 'Acinonyx jubatus',
+		conservation_status: 'Vulnerable',
+		habitat: 'Grasslands and savannas',
+		diet: 'Carnivore',
+		geographic_range: 'Africa and Iran',
+	},
+	{
+		common_name: 'Emperor penguin',
+		scientific_name: 'Aptenodytes forsteri',
+		conservation_status: 'Near Threatened',
+		habitat: 'Sea ice and open ocean',
+		diet: 'Carnivore',
+		geographic_range: 'Antarctica',
+	},
+	{
+		common_name: 'Galápagos tortoise',
+		scientific_name: 'Chelonoidis niger',
+		conservation_status: 'Vulnerable',
+		habitat: 'Volcanic highlands',
+		diet: 'Herbivore',
+		geographic_range: 'Galápagos Islands',
+	},
+	{
+		common_name: 'Giant anteater',
+		scientific_name: 'Myrmecophaga tridactyla',
+		conservation_status: 'Vulnerable',
+		habitat: 'Grasslands and forests',
+		diet: 'Insectivore',
+		geographic_range: 'Central and South America',
+	},
+	{
+		common_name: 'Giant panda',
+		scientific_name: 'Ailuropoda melanoleuca',
+		conservation_status: 'Vulnerable',
+		habitat: 'Temperate bamboo forests',
+		diet: 'Herbivore',
+		geographic_range: 'Central China',
+	},
+	{
+		common_name: 'Golden eagle',
+		scientific_name: 'Aquila chrysaetos',
+		conservation_status: 'Least Concern',
+		habitat: 'Mountains and open plains',
+		diet: 'Carnivore',
+		geographic_range: 'Northern Hemisphere',
+	},
+	{
+		common_name: 'Gray wolf',
+		scientific_name: 'Canis lupus',
+		conservation_status: 'Least Concern',
+		habitat: 'Forests and tundra',
+		diet: 'Carnivore',
+		geographic_range: 'Northern Hemisphere',
+	},
+	{
+		common_name: 'Great white shark',
+		scientific_name: 'Carcharodon carcharias',
+		conservation_status: 'Vulnerable',
+		habitat: 'Coastal and offshore waters',
+		diet: 'Carnivore',
+		geographic_range: 'Global temperate seas',
+	},
+	{
+		common_name: 'Green sea turtle',
+		scientific_name: 'Chelonia mydas',
+		conservation_status: 'Endangered',
+		habitat: 'Coastal waters and beaches',
+		diet: 'Herbivore',
+		geographic_range: 'Tropical and subtropical oceans',
+	},
+	{
+		common_name: 'Harpy eagle',
+		scientific_name: 'Harpia harpyja',
+		conservation_status: 'Near Threatened',
+		habitat: 'Tropical rainforests',
+		diet: 'Carnivore',
+		geographic_range: 'Central and South America',
+	},
+	{
+		common_name: 'Humpback whale',
+		scientific_name: 'Megaptera novaeangliae',
+		conservation_status: 'Least Concern',
+		habitat: 'Open ocean',
+		diet: 'Carnivore',
+		geographic_range: 'Global oceans',
+	},
+	{
+		common_name: 'Jaguar',
+		scientific_name: 'Panthera onca',
+		conservation_status: 'Near Threatened',
+		habitat: 'Tropical rainforests and wetlands',
+		diet: 'Carnivore',
+		geographic_range: 'Central and South America',
+	},
+	{
+		common_name: 'Koala',
+		scientific_name: 'Phascolarctos cinereus',
+		conservation_status: 'Vulnerable',
+		habitat: 'Eucalyptus woodlands',
+		diet: 'Herbivore',
+		geographic_range: 'Eastern Australia',
+	},
+	{
+		common_name: 'Monarch butterfly',
+		scientific_name: 'Danaus plexippus',
+		conservation_status: 'Endangered',
+		habitat: 'Prairies and meadows',
+		diet: 'Herbivore',
+		geographic_range: 'North America',
+	},
+	{
+		common_name: 'Mountain gorilla',
+		scientific_name: 'Gorilla beringei beringei',
+		conservation_status: 'Endangered',
+		habitat: 'Montane forests',
+		diet: 'Herbivore',
+		geographic_range: 'Central Africa',
+	},
+	{
+		common_name: 'Narwhal',
+		scientific_name: 'Monodon monoceros',
+		conservation_status: 'Near Threatened',
+		habitat: 'Arctic waters',
+		diet: 'Carnivore',
+		geographic_range: 'Arctic Circle',
+	},
+	{
+		common_name: 'Okapi',
+		scientific_name: 'Okapia johnstoni',
+		conservation_status: 'Endangered',
+		habitat: 'Rainforests',
+		diet: 'Herbivore',
+		geographic_range: 'Democratic Republic of the Congo',
+	},
+	{
+		common_name: 'Polar bear',
+		scientific_name: 'Ursus maritimus',
+		conservation_status: 'Vulnerable',
+		habitat: 'Sea ice and tundra',
+		diet: 'Carnivore',
+		geographic_range: 'Arctic Circle',
+	},
+	{
+		common_name: 'Red kangaroo',
+		scientific_name: 'Osphranter rufus',
+		conservation_status: 'Least Concern',
+		habitat: 'Deserts and grasslands',
+		diet: 'Herbivore',
+		geographic_range: 'Australia',
+	},
+	{
+		common_name: 'Red panda',
+		scientific_name: 'Ailurus fulgens',
+		conservation_status: 'Endangered',
+		habitat: 'Temperate forests',
+		diet: 'Omnivore',
+		geographic_range: 'Eastern Himalayas',
+	},
+	{
+		common_name: 'Snow leopard',
+		scientific_name: 'Panthera uncia',
+		conservation_status: 'Vulnerable',
+		habitat: 'Mountain ranges',
+		diet: 'Carnivore',
+		geographic_range: 'Central and South Asia',
+	},
+	{
+		common_name: 'Southern cassowary',
+		scientific_name: 'Casuarius casuarius',
+		conservation_status: 'Least Concern',
+		habitat: 'Tropical rainforests',
+		diet: 'Omnivore',
+		geographic_range: 'New Guinea and northeastern Australia',
+	},
+	{
+		common_name: 'Tasmanian devil',
+		scientific_name: 'Sarcophilus harrisii',
+		conservation_status: 'Endangered',
+		habitat: 'Forests and coastal scrub',
+		diet: 'Carnivore',
+		geographic_range: 'Tasmania',
+	},
+	{
+		common_name: 'Yellow-eyed penguin',
+		scientific_name: 'Megadyptes antipodes',
+		conservation_status: 'Endangered',
+		habitat: 'Coastal forests and beaches',
+		diet: 'Carnivore',
+		geographic_range: 'New Zealand',
+	},
+];
+
+export const COMPLEX_DATA: ComplexData[] = Array.from({ length: 200 }, (_, index) => {
+	const species = SPECIES[index % SPECIES.length];
+
+	return {
+		id: index + 1,
+		...species,
+	};
+});

package/src/components/table/with-footer.tsx

@@ -1,17 +1,18 @@
+import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTable } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableWithFooter: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable with footer data.</p>
+			<p>This sample shows KolTableStateful with footer data.</p>
 		</SampleDescription>
 
-		<KolTable
+		<KolTableStateful
 			className="w-full"
 			_label="Business hours"
+			_minWidth="auto"
 			_headers={{
 				horizontal: [
 					[

package/src/components/table/with-pagination.tsx

@@ -1,10 +1,10 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTable } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react-v19';
 
-import { DATE_FORMATTER } from './formatter';
 import { SampleDescription } from '../SampleDescription';
+import { DATE_FORMATTER } from './formatter';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
 
@@ -23,10 +23,10 @@ const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 export const TableWithPagination: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows how KolTable can be navigated using a pagination.</p>
+			<p>This sample shows how KolTableStateful can be navigated using a pagination.</p>
 		</SampleDescription>
 		<div className="w-full">
-			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
+			<KolTableStateful _label="Table description" _minWidth="auto" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>
 		</div>
 	</>
 );

package/src/components/tabs/align.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTabs } from '@public-ui/react';
-import { SampleDescription } from '../SampleDescription';
 import type { AlignPropType } from '@public-ui/components';
+import { KolHeading, KolTabs } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{

package/src/components/tabs/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTabs } from '@public-ui/react';
+import { KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const tabs = [

package/src/components/tabs/behavior.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTabs } from '@public-ui/react';
+import { KolHeading, KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const tabs = [

package/src/components/tabs/create-button.tsx

@@ -0,0 +1,42 @@
+import { KolTabs } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useState } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const CreateButton: FC = () => {
+	const [tabs, setTabs] = useState([
+		{
+			_label: 'First tab',
+		},
+		{
+			_label: 'Second Tab',
+		},
+	]);
+
+	const addTab = () => {
+		setTabs([
+			...tabs,
+			{
+				_label: `Tab #${tabs.length + 1}`,
+			},
+		]);
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolTabs with a &quot;create tab&quot; button.</p>
+			</SampleDescription>
+
+			<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with create button" _hasCreateButton _on={{ onCreate: addTab }}>
+				{tabs.map((tab, index) => (
+					<div key={`tab-${index}`} slot={`tab-${index}`}>
+						Contents of {tab._label}
+					</div>
+				))}
+
+				<div slot="tab-1">Contents of Tab 2</div>
+			</KolTabs>
+		</>
+	);
+};

package/src/components/tabs/icons-only.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTabs } from '@public-ui/react';
+import { KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const tabs = [

package/src/components/tabs/routes.ts

@@ -1,12 +1,14 @@
 import { Routes } from '../../shares/types';
-import { TabsBasic } from './basic';
 import { TabsAlign } from './align';
-import { TabsIconsOnly } from './icons-only';
+import { TabsBasic } from './basic';
 import { TabsBehavior } from './behavior';
+import { CreateButton } from './create-button';
+import { TabsIconsOnly } from './icons-only';
 
 export const TABS_ROUTES: Routes = {
 	tabs: {
 		basic: TabsBasic,
+		'create-button': CreateButton,
 		'icons-only': TabsIconsOnly,
 		behavior: TabsBehavior,
 		align: TabsAlign,

package/src/components/textarea/adjust-height.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolForm, KolTextarea } from '@public-ui/react';
+import { KolForm, KolTextarea } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore

package/src/components/textarea/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { TextareaVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { TextareaVariants } from './partials/variants';
 
 export const TextareaBasic: FC = () => (
 	<>
@@ -11,6 +11,6 @@ export const TextareaBasic: FC = () => (
 			<p>KolTextarea renders a text field. The sample shows KolTextarea in a form context with different variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={TextareaVariants} />
+		<FormWrap RefComponent={TextareaVariants} showButtons={false} />
 	</>
 );

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

@@ -1,14 +1,20 @@
+import type { Components } from '@public-ui/components';
+import { KolTextarea } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
-import { KolTextarea } from '@public-ui/react';
-
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched />
+			<div className="black-background">
+				<KolTextarea {...props} ref={ref} _placeholder="Placeholder" _label="Text" />
+			</div>
+			<KolTextarea {...props} _placeholder="Placeholder" _required _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched _hint={HINT_MSG} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'info', _description: 'Just a hint' }} _touched />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'warning', _description: 'Small warning' }} _touched />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'success', _description: 'Success message' }} _touched />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'default', _description: 'Default message' }} _touched />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
 			<KolTextarea {...props} ref={ref} _label="Text (placeholder)" _rows={3} _placeholder="Placeholder" />
 			<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { TextareaCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const TextareaVariants = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<TextareaCases {...props} />
@@ -14,6 +15,6 @@ export const TextareaVariants = forwardRef<HTMLKolTextareaElement, Components.Ko
 				<legend>Text (hideLabel)</legend>
 				<TextareaCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

package/src/components/textarea/resize.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolForm, KolTextarea } from '@public-ui/react';
+import { KolForm, KolTextarea } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -12,11 +12,12 @@ export const TextareaResize: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolForm className="w-full grid gap-4">
-			<KolTextarea _resize="both" _label="Text input (both)" />
-			<KolTextarea _resize="vertical" _label="Text input (vertical)" className="mt" />
-			<KolTextarea _resize="horizontal" _label="Text input (horizontal)" className="mt" />
-			<KolTextarea _resize="none" _label="Text input (none)" className="mt" />
+		<KolForm className="w-full">
+			<div className="flex flex-col gap-4">
+				<KolTextarea _label="Text input (unset)" />
+				<KolTextarea _resize="vertical" _label="Text input (vertical)" />
+				<KolTextarea _resize="none" _label="Text input (none)" />
+			</div>
 		</KolForm>
 	</>
 );

package/src/components/textarea/routes.ts

@@ -1,9 +1,9 @@
 import { Routes } from '../../shares/types';
 import { TextareaAdjustHeight } from './adjust-height';
 import { TextareaBasic } from './basic';
-import { TextareaCounter } from './counter';
 import { TextareaResize } from './resize';
 import { TextareaRows } from './rows';
+import { TextareaWithCounter } from './with-counter';
 
 export const TEXTAREA_ROUTES: Routes = {
 	textarea: {
@@ -11,6 +11,6 @@ export const TEXTAREA_ROUTES: Routes = {
 		'adjust-height': TextareaAdjustHeight,
 		resize: TextareaResize,
 		rows: TextareaRows,
-		'with-counter': TextareaCounter,
+		'with-counter': TextareaWithCounter,
 	},
 };

package/src/components/textarea/rows.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolForm, KolTextarea } from '@public-ui/react';
+import { KolForm, KolTextarea } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/textarea/with-counter.tsx

@@ -0,0 +1,23 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolTextarea } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+export const TextareaWithCounter: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				The sample demonstrates various <code>KolTextarea</code> configurations — contrasting soft vs. hard <code>_maxLength</code> settings and the optional
+				<code>_hasCounter</code> — including one instance without length limits.
+			</p>
+		</SampleDescription>
+
+		<section className="w-full flex flex-col gap-4">
+			<KolTextarea _label="Textarea with soft max length" _value={'Lorem Ipsum'} className="mt-2" _maxLength={20} _hasCounter _maxLengthBehavior="soft" />
+			<KolTextarea _label="Textarea with max length" _value={'Lorem Ipsum'} className="mt-2" _maxLength={20} />
+			<KolTextarea _label="Textarea with max length and counter" _value={'Lorem Ipsum'} className="mt-2" _maxLength={20} _hasCounter />
+			<KolTextarea _label="Textarea with counter" _value={'Lorem Ipsum'} className="mt-2" _hasCounter />
+		</section>
+	</>
+);

package/src/components/toast/basic.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
+import type { AlertTypePropType } from '@public-ui/components';
 import { ToasterService } from '@public-ui/components';
-import { KolButton } from '@public-ui/react';
-import type { AlertType, AlertVariant } from '@public-ui/components';
+import { KolButton } from '@public-ui/react-v19';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
@@ -12,49 +12,28 @@ import type { FC } from 'react';
 
 export const ToastBasic: FC = () => {
 	const [searchParams] = useSearchParams();
-	const defaultType = searchParams.get('type') as AlertType;
-	const defaultVariant = searchParams.get('variant') as AlertVariant;
+	const defaultType = searchParams.get('type') as AlertTypePropType;
 	const toaster = ToasterService.getInstance(document);
 	const handleButtonClickSimple = () => {
 		void toaster.enqueue({
 			description: 'Toasty',
 			label: `Initial Toast`,
 			type: 'warning',
-		});
-	};
-
-	const handleButtonClickVariantMessage = () => {
-		void toaster.enqueue({
-			description: 'Toasty',
-			label: `Toast with variant 'msg'`,
-			type: 'warning',
-			variant: 'msg',
+			onClose: () => {
+				console.log('Simple toast has been closed.');
+			},
 		});
 	};
 
 	useEffect(() => {
-		if (defaultType && defaultVariant) {
+		if (defaultType) {
 			void toaster.enqueue({
 				description: 'Toasty',
-				label: `Toast with variant 'msg'`,
+				label: `Toast with type '${defaultType}'`,
 				type: defaultType,
-				variant: defaultVariant,
-			});
-		} else if (defaultType) {
-			void toaster.enqueue({
-				description: 'Toasty',
-				label: `Initial Toast`,
-				type: defaultType,
-			});
-		} else if (defaultVariant) {
-			void toaster.enqueue({
-				description: 'Toasty',
-				label: `Initial Toast`,
-				type: 'default',
-				variant: defaultVariant,
 			});
 		}
-	}, [defaultType, defaultVariant]);
+	}, [defaultType, toaster]);
 
 	const handleButtonClickComplex = () => {
 		void toaster.enqueue({
@@ -99,19 +78,13 @@ export const ToastBasic: FC = () => {
 			<SampleDescription>
 				<p>This sample demonstrates the toast service with all its options.</p>
 			</SampleDescription>
-
 			<section className="grid gap-4">
-				<section className="flex gap-2">
+				<div className="flex flex-wrap gap-2">
 					<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
-					<KolButton _label="Show toast with alert variant 'msg'" _on={{ onClick: handleButtonClickVariantMessage }}></KolButton>
 					<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
-				</section>
-				<section className="flex gap-2">
 					<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
-				</section>
-				<section className="flex gap-2">
 					<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
-				</section>
+				</div>
 			</section>
 		</>
 	);