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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "4.3.1-rc.0",
+  "version": "4.3.1-rc.1",
   "description": "This app contains samples for the KoliBri/Public UI",
   "type": "module",
   "license": "EUPL-1.2",
@@ -20,8 +20,8 @@
     "typescript": "5.9.3",
     "world_countries_lists": "3.3.0",
     "zod": "4.4.3",
-    "@public-ui/react-hook-form-adapter": "4.3.1-rc.0",
-    "@public-ui/react-v19": "4.3.1-rc.0"
+    "@public-ui/react-hook-form-adapter": "4.3.1-rc.1",
+    "@public-ui/react-v19": "4.3.1-rc.1"
   },
   "devDependencies": {
     "@types/react": "19.2.18",
@@ -37,7 +37,7 @@
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "react-router": "8.3.0",
-    "@public-ui/components": "4.3.1-rc.0"
+    "@public-ui/components": "4.3.1-rc.1"
   },
   "files": [
     "assets",

package/src/scenarios/routes.ts

@@ -12,6 +12,7 @@ import { InputsGetValue } from './inputs-get-value';
 import { PerformanceTest } from './performance-test';
 import { RHFBasic } from './react-hook-form/basic';
 import { RHFDisabled } from './react-hook-form/disabled';
+import { SameHeightOfAllFormElements } from './same-height-of-all-form-elements-with-label';
 import { SameHeightOfAllInteractiveElements } from './same-height-of-all-interactive-elements';
 import { SampleFormWithValidation } from './sample-form-with-validation';
 import { Skeleton } from './skeleton';
@@ -33,6 +34,7 @@ export const SCENARIO_ROUTES: Routes = {
 		'react-hook-form-adapter': RHFBasic,
 		'react-hook-form-adapter-disabled': RHFDisabled,
 		'same-height-of-all-interactive-elements': SameHeightOfAllInteractiveElements,
+		'same-height-of-all-form-elements-with-label': SameHeightOfAllFormElements,
 		'static-form': StaticForm,
 		'sample-form-with-validation': SampleFormWithValidation,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,

package/src/scenarios/same-height-of-all-form-elements-with-label.tsx

@@ -0,0 +1,46 @@
+import {
+	KolCombobox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRange,
+	KolInputText,
+	KolSelect,
+	KolSingleSelect,
+	KolTextarea,
+} from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const SameHeightOfAllFormElements: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>All form elements with labels, should have the same height and gaps to ensure a consistent and visually balanced user interface.</p>
+			</SampleDescription>
+			<div className="w-full flex flex-wrap gap-4">
+				<KolCombobox _icons="kolicon-house" _label="Combobox" _suggestions={[]} />
+				<KolInputColor
+					_icons={{
+						left: 'kolicon-house',
+					}}
+					_label="Input-Color"
+				/>
+				<KolInputFile _icons="kolicon-house" _label="Input-File" />
+				<KolInputDate _icons="kolicon-house" _label="Input-Date" />
+				<KolInputEmail _icons="kolicon-house" _label="Input-Email" />
+				<KolInputNumber _icons="kolicon-house" _label="Input-Number" />
+				<KolInputPassword _icons="kolicon-house" _label="Input-Password" />
+				<KolInputRange _icons="kolicon-house" _label="Input-Range" />
+				<KolInputText _icons="kolicon-house" _label="Input-Text" />
+				<KolSelect _icons="kolicon-house" _label="Select" _options={[]} />
+				<KolSingleSelect _icons="kolicon-house" _label="Single Select" _options={[]} />
+				<KolTextarea _icons="kolicon-house" _label="Textarea" />
+			</div>
+		</>
+	);
+};