@public-ui/sample-react 2.1.8 → 2.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -36,9 +36,9 @@
     "typescript": "5.6.2",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0",
-    "@public-ui/components": "2.1.8",
-    "@public-ui/react": "2.1.8",
-    "@public-ui/themes": "2.1.8"
+    "@public-ui/components": "2.1.9",
+    "@public-ui/themes": "2.1.9",
+    "@public-ui/react": "2.1.9"
   },
   "files": [
     ".eslintignore",

package/public/assets/material-icons/iconfont/_variables.scss

@@ -1,3 +1,3 @@
 $material-icons-font-path: './' !default;
-$material-icons-font-size: 24px !default;
+$material-icons-font-size: rem(24) !default;
 $material-icons-font-display: block !default;

package/public/assets/material-symbols/_core.scss

@@ -3,14 +3,13 @@ $material-symbols-font-path: './' !default;
 // @see https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss
 @function material-symbols-str-replace($string, $search, $replace: '') {
   $index: str-index($string, $search);
+
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
-      material-symbols-str-replace(
-        str-slice($string, $index + str-length($search)),
-        $search,
-        $replace
-      );
+    @return str-slice($string, 1, $index - 1)+$replace +material-symbols-str-replace(str-slice($string, $index + str-length($search)),
+      $search,
+      $replace );
   }
+
   @return $string;
 }
 
@@ -31,7 +30,7 @@ $material-symbols-font-path: './' !default;
     font-family: $font-family;
     font-weight: normal;
     font-style: normal;
-    font-size: 24px;
+    font-size: rem(24);
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;

package/src/App.tsx

@@ -138,7 +138,7 @@ export const App: FC = () => {
 					/>
 				)}
 
-				<main className="flex flex-col items-start p-4" id="route-container">
+				<main className="flex flex-col items-stretch p-4" id="route-container">
 					{!hideMenus && isDraftTheme(theme) && <KolBadge className="block mb-3" _label="DRAFT" _color="#db5461" />}
 					<Routes>
 						{ROUTE_TREE}

package/src/components/SampleDescription.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useMemo } from 'react';
 
 import { PUBLIC_CODE_COMPONENT_URL, PUBLIC_DOC_COMPONENT_URL } from '../shares/constants';
 
-import { KolIndentedText, KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react';
 
 import { HideMenusContext } from '../shares/HideMenusContext';
 
@@ -30,7 +30,7 @@ export const SampleDescription: FC<PropsWithChildren> = (props) => {
 
 	return hideMenus ? null : (
 		<div className="flex justify-between mb-sm">
-			<KolIndentedText>{props.children}</KolIndentedText>
+			<div className="indented-text">{props.children}</div>
 			<div className="flex flex-wrap gap-2 shrink-0 ml">
 				{codeLink && <KolLink _href={codeLink} _label="Code" _target="_blank" />}
 				{docLink && <KolLink _href={docLink} _label="Documentation" _target="_blank" />}

package/src/components/alert/basic.tsx

@@ -15,13 +15,13 @@ type PropsBasic = {
 
 const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
 	<>
-		<KolAlert _label="This is the headline of the alert." _level={level} _type={type} _variant={variant}>
+		<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant}>
 			This is the text of the alert.
 		</KolAlert>
 		<KolAlert _type={type} _variant={variant}>
 			In this alert, only the text without the heading is used.
 		</KolAlert>
-		<KolAlert _label="This is the headline of the alert." _level={level} _type={type} _variant={variant} _hasCloser>
+		<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant} _hasCloser>
 			This is the text of the alert. With close button.
 		</KolAlert>
 		<KolAlert _type={type} _variant={variant} _hasCloser>

package/src/components/button/icons.tsx

@@ -19,24 +19,26 @@ export const ButtonIcons: FC = () => {
 				<p>This sample shows KolButton with icons in all alignments.</p>
 			</SampleDescription>
 
-			<KolButton
-				_icons={{
-					bottom: 'codicon codicon-arrow-down',
-					left: {
-						icon: 'codicon codicon-arrow-left',
-					},
-					top: {
-						style: {
-							'font-size': '200%',
-							transform: 'rotate(45deg)',
+			<div>
+				<KolButton
+					_icons={{
+						bottom: 'codicon codicon-arrow-down',
+						left: {
+							icon: 'codicon codicon-arrow-left',
 						},
-						icon: 'codicon codicon-arrow-up',
-					},
-					right: 'codicon codicon-arrow-right',
-				}}
-				_label="Label"
-				_on={dummyEventHandler}
-			/>
+						top: {
+							style: {
+								'font-size': '200%',
+								transform: 'rotate(45deg)',
+							},
+							icon: 'codicon codicon-arrow-up',
+						},
+						right: 'codicon codicon-arrow-right',
+					}}
+					_label="Label"
+					_on={dummyEventHandler}
+				/>
+			</div>
 		</>
 	);
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolIndentedText } from '@public-ui/react';
+import { KolBadge, KolIndentedText } from '@public-ui/react';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -11,6 +11,9 @@ export const IndentedTextBasic: FC = () => (
 			<p>
 				KolIndentedText renders the given slot content, styled as indented text. The sample shows two regular paragraphs with an indented paragraph in between.
 			</p>
+			<p>
+				<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
+			</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">

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

@@ -8,15 +8,17 @@ import type { Components } from '@public-ui/components';
 export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.KolInputColor>(function InputColorCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputColor
-				{...props}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_icons={{
-					left: 'codicon codicon-symbol-color',
-				}}
-				_label="Color"
-				_value="#f08080"
-			/>
+			<div className="black-background">
+				<KolInputColor
+					{...props}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_icons={{
+						left: 'codicon codicon-symbol-color',
+					}}
+					_label="Color (Black background test)"
+					_value="#f08080"
+				/>
+			</div>
 			<KolInputColor
 				{...props}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}

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

@@ -8,7 +8,9 @@ import type { Components } from '@public-ui/components';
 export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputDate {...props} _type="date" _label="Date input" _required />
+			<div className="black-background">
+				<KolInputDate {...props} _type="date" _label="Date input (Black background test)" _required />{' '}
+			</div>
 			<KolInputDate {...props} _type="datetime-local" _label="Local-Datetime (Standard)" _required />
 			<KolInputDate
 				{...props}

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

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react';
+import { KolInputDate } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
+
+export const InputDateMinMaxCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props) {
+	const minDateIso = '2024-09-26';
+	const maxDateIso = '2024-09-27';
+
+	const minTimeIso = '12:00';
+	const maxTimeIso = '15:00';
+
+	const minDayTimeIso = '2024-09-26T12:00';
+	const maxDaytimeIso = '2024-09-27T15:00';
+
+	const minWeekIso = '2024-W10';
+	const maxWeekIso = '2024-W50';
+
+	const minMonthIso = '2024-02';
+	const maxMonthIso = '2024-10';
+
+	const minDate = new Date('January 10, 2024, 12:00');
+	const maxDate = new Date('October 20, 2024, 15:00');
+	return (
+		<div className="grid gap-4">
+			<KolInputDate {...props} _type="date" _label="Date with Iso" _min={minDateIso} _max={maxDateIso} />
+			<KolInputDate {...props} _type="date" _label="Date with Date" _min={minDate} _max={maxDate} />
+
+			<KolInputDate {...props} _type="time" _label="Time with Iso" _min={minTimeIso} _max={maxTimeIso} />
+			<KolInputDate {...props} _type="time" _label="Time with Date" _min={minDate} _max={maxDate} />
+
+			<KolInputDate {...props} _type="datetime-local" _label="DayTime with Iso" _min={minDayTimeIso} _max={maxDaytimeIso} />
+			<KolInputDate {...props} _type="datetime-local" _label="DayTime with Date" _min={minDate} _max={maxDate} />
+
+			<KolInputDate {...props} _type="week" _label="Week with Iso" _min={minWeekIso} _max={maxWeekIso} />
+			<KolInputDate {...props} _type="week" _label="Week with Date" _min={minDate} _max={maxDate} />
+
+			<KolInputDate {...props} _type="month" _label="Month with Iso" _min={minMonthIso} _max={maxMonthIso} />
+			<KolInputDate {...props} _type="month" _label="Month with Date" _min={minDate} _max={maxDate} />
+		</div>
+	);
+});

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

@@ -3,6 +3,7 @@ import React, { forwardRef } from 'react';
 import { InputDateCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { InputDateMinMaxCases } from './minMax';
 export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">
@@ -14,6 +15,10 @@ export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.
 				<legend>Date (hideLabel)</legend>
 				<InputDateCases ref={ref} {...props} _hideLabel />
 			</fieldset>
+			<fieldset>
+				<legend>Date (with min/max)</legend>
+				<InputDateMinMaxCases ref={ref} {...props} />
+			</fieldset>
 		</div>
 	);
 });

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

@@ -8,7 +8,9 @@ import type { Components } from '@public-ui/components';
 export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputEmail {...props} _required _value="test@mail.de" _msg={{ _type: 'error', _description: ERROR_MSG }} _label="E-Mail" />
+			<div className="black-background">
+				<KolInputEmail {...props} _required _value="test@mail.de" _msg={{ _type: 'error', _description: ERROR_MSG }} _label="E-Mail (Black background test)" />
+			</div>
 			<KolInputEmail
 				{...props}
 				ref={ref}

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

@@ -8,11 +8,23 @@ import type { Components } from '@public-ui/components';
 export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileCases(props, ref) {
 	return (
 		<div className="grid gap-4">
+			<div className="black-background">
+				<KolInputFile
+					{...props}
+					_label="Upload file (Black background test)"
+					_icons={{
+						left: {
+							icon: 'codicon codicon-save',
+						},
+					}}
+					_touched
+				/>
+			</div>
 			<KolInputFile
 				{...props}
 				_required
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_label="Upload file"
+				_label="Upload file (Black background test)"
 				_icons={{
 					left: {
 						icon: 'codicon codicon-save',

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

@@ -8,6 +8,9 @@ import type { Components } from '@public-ui/components';
 export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components.KolInputNumber>(function InputNumberCases(props, ref) {
 	return (
 		<div className="grid gap-4">
+			<div className="black-background">
+				<KolInputNumber {...props} _required _touched _value={123} _label="Number input (Black background test)" />{' '}
+			</div>
 			<KolInputNumber
 				{...props}
 				_required

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

@@ -8,6 +8,9 @@ import type { Components } from '@public-ui/components';
 export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordCases(props, ref) {
 	return (
 		<div className="grid gap-4">
+			<div className="black-background">
+				<KolInputPassword {...props} _label="Passwort (Black background test)" />
+			</div>
 			<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
 			<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
 			<KolInputPassword

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

@@ -8,11 +8,13 @@ import type { Components } from '@public-ui/components';
 export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputRadio
-				{...props}
-				_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
-				_label="Salutation"
-			/>
+			<div className="black-background">
+				<KolInputRadio
+					{...props}
+					_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
+					_label="Salutation (Black background test)"
+				/>
+			</div>
 			<KolInputRadio
 				{...props}
 				_required

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

@@ -8,22 +8,24 @@ import type { Components } from '@public-ui/components';
 export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputRange
-				{...props}
-				_min={0}
-				_max={50}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_label="Slider"
-				_icons={{
-					left: {
-						icon: 'codicon codicon-arrow-left',
-					},
-					right: {
-						icon: 'codicon codicon-arrow-right',
-					},
-				}}
-				_touched
-			/>
+			<div className="black-background">
+				<KolInputRange
+					{...props}
+					_min={0}
+					_max={50}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_label="Slider (Black background test)"
+					_icons={{
+						left: {
+							icon: 'codicon codicon-arrow-left',
+						},
+						right: {
+							icon: 'codicon codicon-arrow-right',
+						},
+					}}
+					_touched
+				/>
+			</div>
 			<KolInputRange
 				{...props}
 				ref={ref}

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

@@ -8,6 +8,9 @@ import type { Components } from '@public-ui/components';
 export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextCases(props, ref) {
 	return (
 		<div className="grid gap-4">
+			<div className="black-background">
+				<KolInputText {...props} _value="Value" _label="First name (Black background test)" />
+			</div>
 			<KolInputText
 				{...props}
 				_hint={HINT_MSG}

package/src/components/modal/basic.tsx

@@ -1,13 +1,22 @@
 import type { FC } from 'react';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import { KolButton, KolCard, KolModal } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const ModalBasic: FC = () => {
+	const [searchParams] = useSearchParams();
+	const modalState = searchParams.get('show-modal') as string;
 	const modalElement = useRef<HTMLKolModalElement>(null);
 	const stackedModalElement = useRef<HTMLKolModalElement>(null);
 
+	useEffect(() => {
+		if (modalState === 'true') {
+			modalElement.current?.openModal();
+		}
+	}, [modalState]);
+
 	return (
 		<>
 			<SampleDescription>

package/src/components/table/horizontal-scrollbar.tsx

@@ -11,8 +11,10 @@ const DATA = [{ small: 'Small Example', large: 'Larger Example' }];
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'Large Column', key: 'large', textAlign: 'left', width: '400px' },
+			{ label: 'Large Column', key: 'large', textAlign: 'left', width: '300px' },
 			{ label: 'Small Column', key: 'small', textAlign: 'left', width: '200px' },
+			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: '400px' },
+			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: '400px' },
 		],
 	],
 };
@@ -29,7 +31,7 @@ export const TableHorizontalScrollbar: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<section className="w-full flex flex-col">
+			<section className="w-full flex flex-col gap-4">
 				<KolHeading _label="Table with scrollbar" _level={2} />
 
 				<KolTable
@@ -41,6 +43,17 @@ export const TableHorizontalScrollbar: FC = () => {
 					style={{ width: '400px' }}
 				/>
 
+				<KolHeading _label="Empty Table with scrollbar" _level={3} />
+
+				<KolTable
+					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
+					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					_headers={HEADERS}
+					_data={[]}
+					className="block"
+					style={{ width: '400px' }}
+				/>
+
 				<KolInputCheckbox
 					_checked={hasWidthRestriction}
 					_label="Toggle width restriction"

package/src/components/table/multi-sort.tsx

@@ -0,0 +1,116 @@
+import type { FC } from 'react';
+import React, { useState } from 'react';
+
+import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
+import type { KoliBriTableHeaders, KoliBriTableDataType } from '@public-ui/components';
+import type { Data } from './test-data';
+import { DATA } from './test-data';
+import { SampleDescription } from '../SampleDescription';
+
+const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
+	day: '2-digit',
+	month: '2-digit',
+	year: 'numeric',
+});
+
+const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{
+				label: 'order',
+				key: 'order',
+				textAlign: 'center',
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+					if ((data0 as Data).order < (data1 as Data).order) return -1;
+					else if ((data1 as Data).order < (data0 as Data).order) return 1;
+					else return 0;
+				},
+			},
+			{
+				label: 'date',
+				key: 'date',
+				textAlign: 'center',
+				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+					if ((data0 as Data).date < (data1 as Data).date) return -1;
+					else if ((data1 as Data).date < (data0 as Data).date) return 1;
+					else return 0;
+				},
+			},
+		],
+	],
+};
+
+const HEADERS_VERTICAL: KoliBriTableHeaders = {
+	vertical: [
+		[
+			{
+				label: 'order',
+				key: 'order',
+				textAlign: 'center',
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+					if ((data0 as Data).order < (data1 as Data).order) return -1;
+					else if ((data1 as Data).order < (data0 as Data).order) return 1;
+					else return 0;
+				},
+			},
+			{
+				label: 'date',
+				key: 'date',
+				textAlign: 'center',
+				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+					if ((data0 as Data).date < (data1 as Data).date) return -1;
+					else if ((data1 as Data).date < (data0 as Data).date) return 1;
+					else return 0;
+				},
+			},
+		],
+	],
+};
+export const MultiSortTable: FC = () => {
+	const [allowMultiSortVertical, setAllowMultiSortVertical] = useState(false);
+	const [allowMultiSortHorizontal, setAllowMultiSortHorizontal] = useState(true);
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolTable with multi-sort functionality, allowing sorting by both &quot;order&quot; and &quot;date&quot; columns.</p>
+			</SampleDescription>
+
+			<section className="w-full grid gap-4">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Vertical" />
+					<KolInputCheckbox
+						_checked={allowMultiSortVertical}
+						_label="Allow Multi-Sort"
+						_variant="switch"
+						_on={{ onChange: (_, value) => setAllowMultiSortVertical(Boolean(value)) }}
+					></KolInputCheckbox>
+					<KolTable
+						_label="Sort Table with Order and Date"
+						_data={DATA.slice(0, 10)}
+						_headers={HEADERS_VERTICAL}
+						className="block"
+						_allowMultiSort={allowMultiSortVertical}
+					/>
+				</section>
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Horizontal" />
+					<KolInputCheckbox
+						_checked={allowMultiSortHorizontal}
+						_label="Allow Multi-Sort"
+						_variant="switch"
+						_on={{ onChange: (_, value) => setAllowMultiSortHorizontal(Boolean(value)) }}
+					></KolInputCheckbox>
+					<KolTable
+						_label="Sort Table with Order and Date"
+						_data={DATA}
+						_headers={HEADERS_HORIZONTAL}
+						className="block"
+						_allowMultiSort={allowMultiSortHorizontal}
+					/>
+				</section>
+			</section>
+		</>
+	);
+};

package/src/components/table/routes.ts

@@ -13,6 +13,7 @@ import { TableStatelessWithSelection } from './stateless-with-selection';
 import { TableStatelessWithSingleSelection } from './stateless-with-single-selection';
 import { TableWithPagination } from './with-pagination';
 import { InteractiveChildElements } from './interactive-child-elements';
+import { MultiSortTable } from './multi-sort';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
@@ -30,5 +31,6 @@ export const TABLE_ROUTES: Routes = {
 		'with-pagination': TableWithPagination,
 		'interactive-child-elements': InteractiveChildElements,
 		stateless: TableStateless,
+		'multi-sort': MultiSortTable,
 	},
 };

package/src/components/tabs/align.tsx

@@ -0,0 +1,57 @@
+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';
+
+const tabs = [
+	{
+		_icons: 'codicon codicon-pie-chart',
+		_label: 'First tab',
+		_on: {
+			onSelect: (event: Event) => {
+				console.log('First tab selected', event);
+			},
+		},
+	},
+	{
+		_icons: 'codicon codicon-calendar',
+		_label: 'Second Tab',
+	},
+	{
+		_disabled: true,
+		_icons: 'codicon codicon-briefcase',
+		_label: 'Disabled Tab',
+	},
+	{
+		_icons: 'codicon codicon-telescope',
+		_label: 'Last tab',
+	},
+];
+
+export const TabsAlign: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows KolTabs with the property <code>_align</code> set to <code>left</code>, <code>right</code>, <code>top</code> and <code>bottom</code>.
+			</p>
+		</SampleDescription>
+		<div className="grid gap-8">
+			{(['left', 'right', 'top', 'bottom'] as AlignPropType[]).map((align) => {
+				const text = `Tabs with ${align} align`;
+				return (
+					<div key={align} className="grid gap-4">
+						<KolHeading _level={2} _label={text} />
+						<KolTabs _tabs={tabs} _align={align} _label={text}>
+							<div slot="tab-0">Contents of Tab 1</div>
+							<div slot="tab-1">Contents of Tab 2</div>
+							<div slot="tab-2">Contents of Tab 3</div>
+							<div slot="tab-3">Contents of Tab 4</div>
+						</KolTabs>
+					</div>
+				);
+			})}
+		</div>
+	</>
+);