@public-ui/sample-react 3.0.0-rc.2 → 3.0.0-rc.4

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.21.0
+ * @remix-run/router v1.21.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.28.0
+ * React Router v6.28.2
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "3.0.0-rc.2",
+  "version": "3.0.0-rc.4",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -16,8 +16,8 @@
     "@types/node": "ts5.7",
     "@types/react": "18.3.4",
     "@types/react-dom": "18.3.5",
-    "@typescript-eslint/eslint-plugin": "8.18.0",
-    "@typescript-eslint/parser": "8.18.0",
+    "@typescript-eslint/eslint-plugin": "8.18.2",
+    "@typescript-eslint/parser": "8.18.2",
     "@unocss/preset-uno": "0.58.9",
     "@unocss/webpack": "0.58.9",
     "adopted-style-sheets": "1.1.7",
@@ -31,7 +31,7 @@
     "eslint-plugin-html": "8.1.2",
     "eslint-plugin-json": "^3",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react": "7.37.4",
     "file-loader": "6.2.0",
     "formik": "2.4.6",
     "knip": "5.40.0",
@@ -43,22 +43,23 @@
     "prettier": "3.4.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-number-format": "5.4.2",
-    "react-router": "6.28.0",
-    "react-router-dom": "6.28.0",
+    "react-number-format": "5.4.3",
+    "react-router": "6.28.2",
+    "react-router-dom": "6.28.2",
     "rimraf": "6.0.1",
     "sass-loader": "16.0.4",
     "string-replace-loader": "3.1.0",
     "tslib": "2.8.1",
-    "typescript": "5.7.2",
+    "typescript": "5.7.3",
     "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.2.0",
     "world_countries_lists": "2.9.0",
     "yup": "1.5.0",
-    "@public-ui/components": "3.0.0-rc.2",
-    "@public-ui/themes": "3.0.0-rc.2",
-    "@public-ui/react": "3.0.0-rc.2"
+    "@public-ui-/theme-ecl": "2.1.3",
+    "@public-ui/components": "3.0.0-rc.4",
+    "@public-ui/react": "3.0.0-rc.4",
+    "@public-ui/theme-default": "3.0.0-rc.4"
   },
   "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/App.tsx

@@ -137,7 +137,7 @@ export const App: FC = () => {
 				)}
 
 				<main className="flex flex-col items-stretch p-4" id="route-container">
-					{!hideMenus && isDraftTheme(theme) && <KolBadge className="block mb-3" _label="DRAFT" _color="#db5461" />}
+					{!hideMenus && isDraftTheme(theme) && <KolBadge className="block mb-3" _label="In progress" _color="#db5461" />}
 					<Routes>
 						{ROUTE_TREE}
 						<Route path="*" element={<Navigate to={ROUTE_LIST[0]} replace />} />

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/drawer/basic.tsx

@@ -14,21 +14,17 @@ export const DrawerBasic: FC = () => {
 	const defaultAlign = searchParams.get('align') as AlignPropType;
 	const hideMenus = useContext(HideMenusContext);
 	const drawerElement = useRef<HTMLKolDrawerElement>(null);
-	const drawerModalElement = useRef<HTMLKolDrawerElement>(null);
 	const [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');
 	useEffect(() => {
 		if (defaultAlign) {
-			drawerModalElement.current?.open();
+			drawerElement.current?.open();
 		}
 	}, [defaultAlign]);
 	return (
 		<>
 			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 			<SampleDescription>
-				<p>
-					KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments and the modal- and
-					non-modal modes.
-				</p>
+				<p>KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments.</p>
 			</SampleDescription>
 
 			<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
@@ -41,20 +37,6 @@ export const DrawerBasic: FC = () => {
 					<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
 				</KolDrawer>
 				<KolButton _label="Open drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
-				<KolDrawer
-					ref={drawerModalElement}
-					_modal
-					_align={align}
-					_label="I am a Drawer Modal"
-					_on={{ onClose: () => console.log('Drawer Modal onClose triggered!') }}
-				>
-					<p>
-						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-						voluptua.
-					</p>
-					<KolButton _label="Close drawer modal" _on={{ onClick: () => drawerModalElement.current?.close() }} />
-				</KolDrawer>
-				<KolButton _label="Open drawer as modal" _on={{ onClick: () => drawerModalElement.current?.open() }} />
 			</div>
 		</>
 	);

package/src/components/drawer/controlled.tsx

@@ -14,7 +14,6 @@ export const DrawerControlled: FC = () => {
 	const defaultAlign = searchParams.get('align') as AlignPropType;
 	const hideMenus = useContext(HideMenusContext);
 	const [open, setOpen] = useState(false);
-	const [modalOpen, setModalOpen] = useState(false);
 	const [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');
 	return (
 		<div>
@@ -34,13 +33,6 @@ export const DrawerControlled: FC = () => {
 					</div>
 				</KolDrawer>
 				<KolButton _label="Open drawer" _on={{ onClick: () => setOpen(true) }} />
-				<KolDrawer _open={modalOpen} _modal _align={align} _label="I'm a controlled modal drawer" _on={{ onClose: () => setModalOpen(false) }}>
-					<div>
-						<p>Lorem ipsum dolor sit amet,</p>
-						<KolButton _label="Close drawer" _on={{ onClick: () => setModalOpen(false) }} />
-					</div>
-				</KolDrawer>
-				<KolButton _label="Open drawer as modal" _on={{ onClick: () => setModalOpen(true) }} />
 			</div>
 		</div>
 	);

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

@@ -1,28 +1,70 @@
+import { KolButton, KolForm, KolInputText } from '@public-ui/react';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolForm, KolInputText } from '@public-ui/react';
 
-export const FormErrorList: FC = () => (
-	<>
-		<SampleDescription>
-			<p>This sample shows a form with error messages.</p>
-		</SampleDescription>
+export const FormErrorList: FC = () => {
+	const formRef = useRef<HTMLKolFormElement | null>(null);
 
-		<KolForm
-			className="w-full"
-			_errorList={[
-				{
-					message: 'Error in Input 2',
-					selector: '#input2',
-				},
-			]}
-		>
-			<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" />
-			</div>
-		</KolForm>
-	</>
-);
+	const scrollTo = () => {
+		formRef.current?.focusErrorList();
+	};
+
+	/**
+	 * Simulate the form submission
+	 */
+	useEffect(() => {
+		formRef.current?.focusErrorList();
+	}, []);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows a form with error messages.</p>
+			</SampleDescription>
+
+			<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"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
+					<div>
+						<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/cases.tsx

@@ -1,10 +1,9 @@
 import React, { forwardRef } from 'react';
-
 import { KolInputColor } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
 import { ERROR_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.KolInputColor>(function InputColorCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -26,6 +25,9 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 				_suggestions="['#000000','#f08080', '#0000ff','#00ff00']"
 				_touched
 			/>
+			<KolInputColor {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Color" />
+			<KolInputColor {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Color" />
+			<KolInputColor {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Color" />
 			<KolInputColor {...props} ref={ref} _accessKey="C" _hint="Hint text" _label="Color with hint" _value="#f08080" />
 			<KolInputColor {...props} _disabled _label="Color (Disabled)" _value="#f08080" />
 			<KolInputColor {...props} _label="With access key" _accessKey="c"></KolInputColor>

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/cases.tsx

@@ -1,10 +1,9 @@
 import React, { forwardRef } from 'react';
-
 import { KolInputDate } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -16,11 +15,15 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 				{...props}
 				_step={1}
 				_type="datetime-local"
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Local datetime (with seconds)"
 				_required
 				_touched
 			/>
+			<KolInputDate {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Color" />
+			<KolInputDate {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Color" />
+			<KolInputDate {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Color" />
 			<KolInputDate {...props} _type="month" _label="Month" _required />
 			<KolInputDate {...props} ref={ref} _accessKey="W" _type="week" _label="Week" _required />
 			<KolInputDate {...props} _type="time" _label="Time (standard)" _required />

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/cases.tsx

@@ -1,10 +1,9 @@
 import React, { forwardRef } from 'react';
-
 import { KolInputEmail } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -18,6 +17,7 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 				_placeholder="elke@mustermann.de"
 				_suggestions="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
 				_label="E-Mail (list)"
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_icons={{
@@ -29,6 +29,9 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 					},
 				}}
 			/>
+			<KolInputEmail {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="E-Mail" />
+			<KolInputEmail {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="E-Mail" />
+			<KolInputEmail {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="E-Mail" />
 			<KolInputEmail {...props} _disabled _value="test@mail.de" _label="E-Mail (Disabled)" />
 			<KolInputEmail {...props} _readOnly _value="test@mail.de" _label="E-Mail (Readonly)" />
 			<KolInputEmail {...props} _value="test@mail.de" _label="With access key" _accessKey="c" />

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/cases.tsx

@@ -1,10 +1,9 @@
 import React, { forwardRef } from 'react';
-
 import { KolInputFile } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -23,6 +22,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 			<KolInputFile
 				{...props}
 				_required
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Upload file (Black background test)"
 				_icons={{
@@ -32,6 +32,9 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 				}}
 				_touched
 			/>
+			<KolInputFile {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Upload file" />
+			<KolInputFile {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Upload file" />
+			<KolInputFile {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Upload file" />
 			<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Upload file (Multiple)" />
 			<KolInputFile {...props} _disabled _label="Upload file (Disabled)" />
 			<KolInputFile {...props} _label="With access key" _accessKey="c" />

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/cases.tsx

@@ -1,23 +1,21 @@
 import React, { forwardRef } from 'react';
-
 import { KolInputPassword } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-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
 				{...props}
 				ref={ref}
 				_accessKey="P"
 				_required
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_placeholder="Mit Icons"
 				_label="Passwort"
@@ -31,6 +29,11 @@ export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Compon
 				}}
 				_touched
 			/>
+			<KolInputPassword {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Password" />
+			<KolInputPassword {...props} _placeholder="Placeholder" _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Password" />
+			<KolInputPassword {...props} _placeholder="Placeholder" _msg={{ _type: 'success', _description: 'Success message' }} _label="Password" />
+			<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
+			<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
 			<KolInputPassword {...props} ref={ref} _shortKey="c" _label="With access key" />
 			<KolInputPassword {...props} ref={ref} _shortKey="s" _label="With short key" />
 		</div>

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>
 	);
 });