@public-ui/sample-react 3.0.0-rc.3 → 3.0.0-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0-rc.5",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -56,9 +56,10 @@
     "webpack-dev-server": "5.2.0",
     "world_countries_lists": "2.9.0",
     "yup": "1.5.0",
-    "@public-ui/react": "3.0.0-rc.3",
-    "@public-ui/components": "3.0.0-rc.3",
-    "@public-ui/themes": "3.0.0-rc.3"
+    "@public-ui-/theme-ecl": "2.1.3",
+    "@public-ui/components": "3.0.0-rc.5",
+    "@public-ui/react": "3.0.0-rc.5",
+    "@public-ui/theme-default": "3.0.0-rc.5"
   },
   "files": [
     ".eslintignore",
@@ -75,13 +76,14 @@
     "webpack.config.js"
   ],
   "scripts": {
+    "prebuild": "pnpm -r --filter=@public-ui/theme-* --filter @public-ui-/theme-* build",
     "build": "rimraf dist && cross-env NODE_ENV=production webpack",
     "build:deps": "pnpm --filter @public-ui/sample-react^... build",
     "format": "prettier --check src",
     "lint": "tsc --noemit && eslint \"{src,tests,e2e}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
     "postinstall": "pnpm exec playwright install",
     "prepare:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
-    "prepare:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot",
+    "prepare:themes-assets": "cpy \"node_modules/@public-ui/theme-default/assets/**/*\" public/assets --dot",
     "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
     "start": "npm run serve -- --open",
     "test": "pnpm test:e2e",

package/public/index.html

@@ -7,14 +7,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="shortcut icon" type="image/x-icon" href="assets/kolibri.ico" />
 		<link rel="stylesheet" href="assets/codicons/codicon.css" />
-		<link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />
-		<link rel="stylesheet" href="assets/icofont/icofont.min.css" />
-		<link rel="stylesheet" href="assets/kreon/style.css" />
-		<link rel="stylesheet" href="assets/noto-sans/noto-sans.css" />
-		<link rel="stylesheet" href="assets/material-icons/iconfont/material-icons.css" />
-		<link rel="stylesheet" href="assets/material-symbols/index.css" />
-		<link rel="stylesheet" href="assets/roboto/roboto.css" />
-		<link rel="stylesheet" href="assets/tabler-icons/tabler-icons.css" />
 		<link rel="stylesheet" href="main.css" />
 		<meta name="robots" content="noindex" />
 		<meta name="kolibri" content="dev-mode=false;experimental-mode=true;" />

package/src/components/SampleColumns.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type PropsWithChildren } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+export function SampleColumns({ children }: PropsWithChildren) {
+	const [searchParams] = useSearchParams();
+	const noColumns = searchParams.has('noColumns');
+
+	return <div className={noColumns ? '' : 'grid md:grid-cols-2 gap-4'}>{children}</div>;
+}

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

@@ -2,10 +2,11 @@ import React from 'react';
 import type { Components } from '@public-ui/components';
 
 import { ComboboxCases } from './cases';
+import { SampleColumns } from '../../SampleColumns';
 
 export const ComboboxVariants = (props: Partial<Components.KolCombobox>) => {
 	return (
-		<div className="w-full grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<ComboboxCases {...props} />
@@ -14,6 +15,6 @@ export const ComboboxVariants = (props: Partial<Components.KolCombobox>) => {
 				<legend>Text (hideLabel)</legend>
 				<ComboboxCases {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 };

package/src/components/form/error-list.tsx

@@ -1,10 +1,22 @@
 import { KolButton, KolForm, KolInputText } from '@public-ui/react';
 import type { FC } from 'react';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const FormErrorList: FC = () => {
 	const formRef = useRef<HTMLKolFormElement | null>(null);
+
+	const scrollTo = () => {
+		formRef.current?.focusErrorList();
+	};
+
+	/**
+	 * Simulate the form submission
+	 */
+	useEffect(() => {
+		formRef.current?.focusErrorList();
+	}, []);
+
 	return (
 		<>
 			<SampleDescription>
@@ -14,26 +26,42 @@ export const FormErrorList: FC = () => {
 			<KolForm
 				className="w-full"
 				ref={formRef}
+				_on={{
+					onSubmit: scrollTo,
+				}}
 				_errorList={[
 					{
 						message: 'Error in Input 2',
 						selector: '#input2',
 					},
+					{
+						message: 'Error in Input 3',
+						selector: () => alert('Error in Input 3'),
+					},
 				]}
 			>
 				<div className="grid gap-2">
 					<KolInputText id="input1" _label="Input 1" />
-					<KolInputText id="input2" _label="Input 2" _touched _msg={{ _description: 'Input error', _type: 'error' }} />
-					<KolInputText id="input3" _label="Input 3" />
+					<KolInputText
+						id="input2"
+						_label="Input 2"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
+					<KolInputText
+						id="input3"
+						_label="Input 3"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
 					<div>
-						<KolButton
-							_label="ScrollTo"
-							_on={{
-								onClick: () => {
-									formRef.current?.focusErrorList();
-								},
-							}}
-						/>
+						<KolButton _label="ScrollTo" _type="submit" />
 					</div>
 				</div>
 			</KolForm>

package/src/components/handout/basic.tsx

@@ -471,7 +471,7 @@ export const HandoutBasic: FC = () => {
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Table with Pagination" _level={2}>
 					<div slot="" className="grid gap-2 p-2">
-						<KolTableStateful _label="Table" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
+						<KolTableStateful _label="Table" _minWidth="auto" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
 					</div>
 				</KolCard>
 			</div>

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

@@ -3,10 +3,11 @@ import React, { forwardRef } from 'react';
 import { InputCheckboxCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxVariant(props, ref) {
 	return (
 		<>
-			<div className="grid md:grid-cols-2 gap-4">
+			<SampleColumns>
 				<fieldset>
 					<legend>Label align &quot;left&quot; with label</legend>
 					<InputCheckboxCases {...props} _labelAlign="left" />
@@ -15,8 +16,8 @@ export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Com
 					<legend>Label align &quot;left&quot; without Label (hideLabel)</legend>
 					<InputCheckboxCases ref={ref} {...props} _hideLabel _labelAlign="left" />
 				</fieldset>
-			</div>
-			<div className="grid md:grid-cols-2 gap-4">
+			</SampleColumns>
+			<SampleColumns>
 				<fieldset>
 					<legend>Label align &quot;right&quot; with label</legend>
 					<InputCheckboxCases {...props} />
@@ -25,7 +26,7 @@ export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Com
 					<legend>Label align &quot;right&quot; without Label (hideLabel)</legend>
 					<InputCheckboxCases ref={ref} {...props} _hideLabel />
 				</fieldset>
-			</div>
+			</SampleColumns>
 		</>
 	);
 });

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

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

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

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

package/src/components/input-date/show-hide-msg.tsx

@@ -40,7 +40,7 @@ export const InputDateShowHideMsg = () => {
 				{msgTypes.map((type) => (
 					<KolInputDate
 						key={type}
-						_hideError={hideMsg}
+						_hideMsg={hideMsg}
 						_label={`Date (_msg, ${type})`}
 						_msg={
 							showMsg

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputEmailCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputEmailVariants = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Email</legend>
 				<InputEmailCases {...props} />
@@ -14,6 +15,6 @@ export const InputEmailVariants = forwardRef<HTMLKolInputEmailElement, Component
 				<legend>Email (hideLabel)</legend>
 				<InputEmailCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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

@@ -1,11 +1,12 @@
 import React, { forwardRef } from 'react';
 
 import { InputFileCases } from './cases';
+import { SampleColumns } from '../../SampleColumns';
 
 import type { Components } from '@public-ui/components';
 export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>File</legend>
 				<InputFileCases {...props} />
@@ -14,6 +15,6 @@ export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.
 				<legend>File (hideLabel)</legend>
 				<InputFileCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputNumberCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputNumberVariants = forwardRef<HTMLKolInputNumberElement, Components.KolInputNumber>(function InputNumberVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Number</legend>
 				<InputNumberCases {...props} />
@@ -14,6 +15,6 @@ export const InputNumberVariants = forwardRef<HTMLKolInputNumberElement, Compone
 				<legend>Number (hideLabel)</legend>
 				<InputNumberCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputPasswordCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputPasswordVariants = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Password</legend>
 				<InputPasswordCases {...props} />
@@ -14,6 +15,6 @@ export const InputPasswordVariants = forwardRef<HTMLKolInputPasswordElement, Com
 				<legend>Password (hideLabel)</legend>
 				<InputPasswordCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Radio</legend>
 				<InputRadioCases {...props} />
@@ -14,6 +15,6 @@ export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Component
 				<legend>Radio (hideLabel)</legend>
 				<InputRadioCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputRangeCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Range</legend>
 				<InputRangeCases {...props} />
@@ -14,6 +15,6 @@ export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Component
 				<legend>Range (hideLabel)</legend>
 				<InputRangeCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

package/src/components/input-text/{hide-errors.tsx → hide-msg.tsx}

@@ -3,12 +3,12 @@ import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
-export const InputTextHideErrors: FC = () => (
+export const InputTextHideMsg: FC = () => (
 	<div className="grid gap-4">
 		<SampleDescription>
 			<p>
-				This sample shows the <code>_hideError</code> feature for KolInputText. It allows to hide the error message from an input field and can be used, when
-				the error is already shown somewhere else, e.g. for a group of inputs.
+				This sample shows the <code>_hideMsg</code> feature for KolInputText. It allows to hide the message from an input field and can be used, when the
+				message (e.g. error) is already shown somewhere else, e.g. for a group of inputs.
 			</p>
 		</SampleDescription>
 
@@ -21,8 +21,8 @@ export const InputTextHideErrors: FC = () => (
 				<KolAlert className="col-span-2" _level={0} _type="error">
 					This is a combined error message
 				</KolAlert>
-				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="First input" _touched />
-				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="Second input with error" _touched />
+				<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>
 		</KolCard>
 	</div>

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

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

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

@@ -1,6 +1,6 @@
 import { Routes } from '../../shares/types';
 import { InputTextBasic } from './basic';
-import { InputTextHideErrors } from './hide-errors';
+import { InputTextHideMsg } from './hide-msg';
 import { InputTextFormatterDemo } from './text-formatter';
 import { InputTextSmartButton } from './smart-button';
 import { InputTextExpertSlot } from './expert-slot';
@@ -8,7 +8,7 @@ import { InputTextExpertSlot } from './expert-slot';
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
-		'hide-errors': InputTextHideErrors,
+		'hide-msg': InputTextHideMsg,
 		'text-formatter': InputTextFormatterDemo,
 		'smart-button': InputTextSmartButton,
 		'expert-slot': InputTextExpertSlot,

package/src/components/modal/basic.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { KolButton, KolCard, KolModal } from '@public-ui/react';
@@ -8,14 +8,18 @@ import { SampleDescription } from '../SampleDescription';
 export const ModalBasic: FC = () => {
 	const [searchParams] = useSearchParams();
 	const modalState = searchParams.get('show-modal') as string;
+	const defaultVariant = searchParams.get('variant') as string;
 	const modalElement = useRef<HTMLKolModalElement>(null);
 	const stackedModalElement = useRef<HTMLKolModalElement>(null);
-
+	const [variant, setVariant] = useState<'card' | 'blank'>('blank');
 	useEffect(() => {
 		if (modalState === 'true') {
 			modalElement.current?.openModal();
 		}
-	}, [modalState]);
+		if (defaultVariant === 'card') {
+			setVariant(defaultVariant);
+		}
+	}, [modalState, defaultVariant]);
 
 	return (
 		<>
@@ -27,7 +31,7 @@ export const ModalBasic: FC = () => {
 			</SampleDescription>
 
 			<div className="flex">
-				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
+				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }} _variant={variant}>
 					<KolCard _label="I am a modal.">
 						<KolButton
 							_label="Open stacked modal"
@@ -62,15 +66,27 @@ export const ModalBasic: FC = () => {
 						/>
 					</KolCard>
 				</KolModal>
+				<div className="grid gap-4">
+					<KolButton
+						_label="Open modal"
+						_on={{
+							onClick: () => {
+								setVariant('blank');
+								modalElement.current?.openModal();
+							},
+						}}
+					/>
 
-				<KolButton
-					_label="Open modal"
-					_on={{
-						onClick: () => {
-							modalElement.current?.openModal();
-						},
-					}}
-				/>
+					<KolButton
+						_label="Open card modal"
+						_on={{
+							onClick: () => {
+								setVariant('card');
+								modalElement.current?.openModal();
+							},
+						}}
+					/>
+				</div>
 			</div>
 		</>
 	);

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

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

package/src/components/single-select/partials/variants.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 
 import { SingleSelectCases } from './cases';
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 
 export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<SingleSelectCases {...props} />
@@ -14,6 +15,6 @@ export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 				<legend>Text (hideLabel)</legend>
 				<SingleSelectCases {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 };

package/src/components/table/column-alignment.tsx

@@ -18,6 +18,7 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Simple table" _level={3}></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with different text align properties"
+				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
@@ -35,6 +36,7 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with sortable columns"
+				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
@@ -52,6 +54,7 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with some but not all columns sortable"
+				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
@@ -69,6 +72,7 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with vertical heading"
+				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[

package/src/components/table/complex-headers.tsx

@@ -12,6 +12,7 @@ export const TableComplexHeaders: FC = () => (
 		<section className="w-full flex flex-col">
 			<KolTableStateful
 				_label="Business hours"
+				_minWidth="auto"
 				_data={[
 					{
 						asp: 'Center',

package/src/components/table/interactive-child-elements.tsx

@@ -46,6 +46,7 @@ export const InteractiveChildElements: FC = () => (
 		<section className="w-full flex flex-col">
 			<KolTableStateless
 				_label="Button styles"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[
@@ -79,6 +80,7 @@ export const InteractiveChildElements: FC = () => (
 
 			<KolTableStateless
 				_label="Link styles"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[

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

@@ -88,6 +88,7 @@ export const MultiSortTable: FC = () => {
 					></KolInputCheckbox>
 					<KolTableStateful
 						_label="Sort Table with Order and Date"
+						_minWidth="auto"
 						_data={DATA.slice(0, 10)}
 						_headers={HEADERS_VERTICAL}
 						className="block"
@@ -104,6 +105,7 @@ export const MultiSortTable: FC = () => {
 					></KolInputCheckbox>
 					<KolTableStateful
 						_label="Sort Table with Order and Date"
+						_minWidth="auto"
 						_data={DATA}
 						_headers={HEADERS_HORIZONTAL}
 						className="block"