@public-ui/sample-react 2.1.0 → 2.1.2

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.16.0
+ * @remix-run/router v1.16.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.23.0
+ * React Router v6.23.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
-    "@leanup/stack": "1.3.50",
-    "@leanup/stack-react": "1.3.50",
-    "@leanup/stack-webpack": "1.3.50",
-    "@public-ui/components": "2.1.0",
-    "@public-ui/react": "2.1.0",
-    "@public-ui/themes": "2.1.0",
+    "@leanup/stack": "1.3.53",
+    "@leanup/stack-react": "1.3.53",
+    "@leanup/stack-webpack": "1.3.53",
     "@types/node": "ts5.4",
-    "@types/react": "18.3.1",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@unocss/preset-uno": "0.58.9",
     "@unocss/webpack": "0.58.9",
-    "ajv": "8.12.0",
-    "chromedriver": "124.0.1",
+    "ajv": "8.16.0",
+    "chromedriver": "124.0.4",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react": "7.34.2",
     "formik": "2.4.6",
-    "nightwatch-axe-verbose": "2.3.0",
+    "nightwatch-axe-verbose": "2.3.1",
     "npm-run-all": "4.1.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router": "6.23.0",
-    "react-router-dom": "6.23.0",
-    "rimraf": "5.0.5",
+    "react-router": "6.23.1",
+    "react-router-dom": "6.23.1",
+    "rimraf": "5.0.7",
     "ts-prune": "0.10.3",
     "typescript": "5.4.5",
     "world_countries_lists": "2.9.0",
-    "yup": "1.4.0"
+    "yup": "1.4.0",
+    "@public-ui/components": "2.1.2",
+    "@public-ui/themes": "2.1.2",
+    "@public-ui/react": "2.1.2"
   },
   "files": [
     ".eslintignore",

package/src/App.tsx

@@ -132,6 +132,8 @@ export const App: FC = () => {
 						sample={routerLocation.pathname}
 						routes={ROUTES}
 						routeList={ROUTE_LIST}
+						buildDate={process.env.BUILD_DATE}
+						commitHash={process.env.COMMIT_HASH}
 						onThemeChange={handleThemeChange}
 					/>
 				)}

package/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { KolAccordion, KolButton, KolHeading, KolLink, KolSelect, KolVersion } from '@public-ui/react';
 
@@ -13,6 +13,8 @@ type Props = {
 	routes: Routes;
 	routeList: string[];
 	sample: string;
+	buildDate?: string;
+	commitHash?: string;
 	onThemeChange: (theme: unknown) => void;
 };
 
@@ -24,20 +26,15 @@ const ComponentNavContainer = ({ children, isMobile }: PropsWithChildren<{ isMob
 	) : (
 		<div className="mt">{children}</div>
 	);
-export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample, onThemeChange }) => {
+export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample, buildDate, commitHash, onThemeChange }) => {
 	/* KolSelect calls onChange initially by design - work around this with a state variable  */
-	const [isFirstThemeSelectChange, setIsFirstThemeSelectChange] = useState(true);
 	const isMobile = useMobile();
 
 	const getIndexOfSample = () => routeList.indexOf(sample);
 	const formatSampleAsLabel = () => sample.replace(/\//g, ' ');
 
 	const handleThemeSelectChange = (_event: Event, value: unknown) => {
-		if (isFirstThemeSelectChange) {
-			setIsFirstThemeSelectChange(false);
-		} else {
-			onThemeChange((value as [string])[0]);
-		}
+		onThemeChange((value as [string])[0]);
 	};
 
 	const handleLinkClick = (event: Event) => {
@@ -63,6 +60,13 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 				<KolHeading _label="KoliBri React"></KolHeading>
 				<KolVersion _label={version}></KolVersion>
 			</div>
+			{(buildDate || commitHash) && (
+				<div className="text-sm font-mono color-gray-5 m-t-2">
+					{commitHash ? `Build: ${commitHash}` : ''}
+					<br />
+					{buildDate ? `at ${buildDate}` : ''}
+				</div>
+			)}
 
 			<KolSelect _label="Theme wählen" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
 

package/src/components/combobox/basic.tsx

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+import React from 'react';
+import { FormWrap } from '../FormWrap';
+import { ComboboxVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
+export const ComboboxBasic: FC = () => (
+	<>
+		<SampleDescription>The Combobox merges a text input with a suggestion list, enabling users to type or select their choice.</SampleDescription>
+		<>
+			<FormWrap RefComponent={ComboboxVariants} />
+		</>
+	</>
+);

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

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react';
+
+import { KolCombobox } from '@public-ui/react';
+
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
+
+import type { Components } from '@public-ui/components';
+import { COUNTRY_SUGGESTIONS } from '../../../shares/country';
+
+export const ComboboxCases = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function ComboboxCases(props) {
+	return (
+		<div className="grid gap-4">
+			<KolCombobox
+				{...props}
+				_hint={HINT_MSG}
+				_label="Label"
+				_suggestions={COUNTRY_SUGGESTIONS}
+				_value={'Deutschland'}
+				_on={{
+					onBlur: console.log,
+					onChange: console.log,
+					onClick: console.log,
+					onFocus: console.log,
+				}}
+			/>
+			<KolCombobox {...props} _label="Disabled" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} _disabled />
+			<KolCombobox
+				{...props}
+				_suggestions={COUNTRY_SUGGESTIONS}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_touched
+				_label="Label"
+				_placeholder="Placeholder"
+				_required
+			/>
+		</div>
+	);
+});

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { ComboboxCases } from './cases';
+
+import type { Components } from '@public-ui/components';
+export const ComboboxVariants = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Text</legend>
+				<ComboboxCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Text (hideLabel)</legend>
+				<ComboboxCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

package/src/components/combobox/routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { ComboboxBasic } from './basic';
+
+export const COMBOBOX_ROUTES: Routes = {
+	combobox: {
+		basic: ComboboxBasic,
+	},
+};

package/src/components/form/basic.tsx

@@ -0,0 +1,19 @@
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolForm, KolInputText } from '@public-ui/react';
+
+export const FormBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Dieses Beispiel zeigt ein Formular mit drei Eingabefeldern.</p>
+		</SampleDescription>
+		<KolForm>
+			<div className="grid gap-2">
+				<KolInputText id="input1" _label="Eingabe 1" />
+				<KolInputText id="input2" _label="Eingabe 2" />
+				<KolInputText id="input3" _label="Eingabe 3" />
+			</div>
+		</KolForm>
+	</>
+);

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

@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolForm, KolInputText } from '@public-ui/react';
+
+export const FormErrorList: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Dieses Beispiel zeigt ein Formular mit drei Eingabefeldern. Das zweite Eingabefeld enthält einen Fehler. </p>
+		</SampleDescription>
+		<KolForm
+			_errorList={[
+				{
+					message: 'Fehler in Eingabe 2',
+					selector: '#input2',
+				},
+			]}
+		>
+			<div className="grid gap-2">
+				<KolInputText id="input1" _label="Eingabe 1" />
+				<KolInputText id="input2" _label="Eingabe 2" _touched _msg={{ _description: 'Fehlerhafte Eingabe', _type: 'error' }} />
+				<KolInputText id="input3" _label="Eingabe 3" />
+			</div>
+		</KolForm>
+	</>
+);

package/src/components/form/routes.ts

@@ -1,5 +1,10 @@
 import { Routes } from '../../shares/types';
+import { FormBasic } from './basic';
+import { FormErrorList } from './error-list';
 
 export const FORM_ROUTES: Routes = {
-	form: {},
+	form: {
+		basic: FormBasic,
+		'error-list': FormErrorList,
+	},
 };

package/src/components/handout/basic.tsx

@@ -27,7 +27,6 @@ import {
 	KolKolibri,
 	KolLink,
 	KolLinkButton,
-	KolLogo,
 	KolNav,
 	KolProgress,
 	KolSelect,
@@ -883,9 +882,6 @@ export const HandoutBasic: FC = () => (
 							<p>
 								Ich bin ein <KolLink _href="#/back-page" _label="externer Link" _target="w3c"></KolLink> im Fließtext.
 							</p>
-							<KolLink _href="#/back-page" _label="">
-								<KolLogo slot="expert" class="inline-flex w-50" _org={Bundesanstalt['Informationstechnikzentrum Bund']} />
-							</KolLink>
 						</div>
 					</KolAccordion>
 					<KolAccordion _label="ButtonLinks" _level={3}>
@@ -896,9 +892,6 @@ export const HandoutBasic: FC = () => (
 							<p>
 								Ich bin ein <KolButtonLink _label="Link"></KolButtonLink> im Fließtext.
 							</p>
-							<KolButtonLink _label="">
-								<KolLogo slot="expert" class="inline-flex w-50" _org={Bundesanstalt['Informationstechnikzentrum Bund']} />
-							</KolButtonLink>
 							<KolButtonLink
 								_icons={{
 									left: 'codicon codicon-arrow-left',

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

@@ -11,6 +11,13 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 			<KolInputCheckbox {...props} _label="Nicht ausgewählt" _value={false} _required />
 			<KolInputCheckbox {...props} _label="Unbestimmt (Indeterminate)" _value={null} _indeterminate />
 			<KolInputCheckbox {...props} ref={ref} _accessKey="A" _checked _label="Ausgewählt" _tooltipAlign="right" _value={true} />
+			<KolInputCheckbox
+				{...props}
+				_checked
+				_icons={{ unchecked: 'codicon codicon-close' }}
+				_label={'Mit sehr langem Label und Umbrüchen '.repeat(5)}
+				_value={true}
+			/>
 			<KolInputCheckbox {...props} _disabled _label="Disabled" _value={true} _hint="Hint text" />
 			<KolInputCheckbox {...props} _checked _disabled _label="Checked and disabled" />
 			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />

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

@@ -24,6 +24,10 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 					},
 				}}
 			/>
+			<KolInputNumber {...props} _required _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'warning', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'info', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'success', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
 			<KolInputNumber {...props} ref={ref} _accessKey="Z" _max={10} _min={-10} _step={2} _label="Zahleneingabe (-10 bis 10 in 2er Schritten)" />
 			<KolInputNumber {...props} _readOnly _label="Zahleneingabe (Readonly)" />
 			<KolInputNumber {...props} _disabled _label="Zahleneingabe (Disabled)" />

package/src/components/input-password/show-password.tsx

@@ -44,6 +44,25 @@ export const InputPasswordShowPassword: FC = () => {
 					}}
 					className="block"
 				/>
+				<KolInputPassword
+					_placeholder="Mit 'Passwort anzeigen' Button und disabled"
+					_label="Passwort"
+					ref={passwordRef}
+					_smartButton={{
+						_icons: {
+							left: {
+								icon: 'codicon codicon-eye',
+							},
+						},
+						_hideLabel: true,
+						_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
+						_on: {
+							onClick: handleTogglePasswordClick,
+						},
+					}}
+					className="block"
+					_disabled
+				/>
 			</KolForm>
 		</>
 	);

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

@@ -11,7 +11,7 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText
 				{...props}
 				_hint={HINT_MSG}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG, _label: 'test überschrift' }}
 				_placeholder="Mit Icons"
 				_icons={{
 					right: {
@@ -37,6 +37,8 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Nur ein Hinweis' }} _label="Suche (search)" _type="search" />
 			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _type="url" _label="URL (url)" />
 			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" _msg={{ _type: 'warning', _description: 'Kleine Warnung' }} />
+			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" _msg={{ _type: 'success', _description: 'Erfolgsmeldung' }} />
+			<KolInputText {...props} _placeholder="Placeholder" _label="Mit Counter" _hasCounter _maxLength={10} />
 			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _value="Value" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />

package/src/components/pagination/basic.tsx

@@ -13,8 +13,8 @@ export const PaginationBasic: FC = () => (
 			</p>
 		</SampleDescription>
 		<div className="grid gap-4">
-			<KolPagination _max={10} _page={6} _siblingCount={0} _label="Test Paginierung 1" _on={{}} />
-			<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 2" _on={{}} />
+			<KolPagination _max={316514} _page={15475} _siblingCount={3} _label="Test Paginierung 1" _on={{}} />
+			<KolPagination _max={14} _page={14} _siblingCount={1} _boundaryCount={2} _label="Test Paginierung 2" _on={{}} />
 			<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 3" _on={{}} />
 			<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label="Test Paginierung 4" _on={{}} />
 			<KolPagination

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

@@ -1,17 +1,11 @@
 import React, { forwardRef } from 'react';
-import countries from 'world_countries_lists/data/countries/de/countries.json';
 
 import { KolSelect } from '@public-ui/react';
 
 import { ERROR_MSG } from '../../../shares/constants';
 
 import type { Components, SelectOption } from '@public-ui/components';
-type Country = {
-	id: number;
-	alpha2: string;
-	alpha3: string;
-	name: string;
-};
+import { COUNTRY_OPTIONS } from '../../../shares/country';
 
 const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	{
@@ -33,13 +27,6 @@ const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	},
 ];
 
-const COUNTRY_OPTIONS: SelectOption<string>[] = [
-	...(countries as Country[]).map((country) => ({
-		label: country.name,
-		value: country.alpha2,
-	})),
-];
-
 export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectCases(props, ref) {
 	return (
 		<div className="grid gap-4">

package/src/components/table/routes.ts

@@ -8,6 +8,8 @@ import { TableRenderCell } from './render-cell';
 import { TableSortData } from './sort-data';
 import { TableStateless } from './stateless';
 import { TableWithFooter } from './with-footer';
+import { TableStatefulWithSelection } from './stateful-with-selection';
+import { TableStatelessWithSelection } from './stateless-with-selection';
 import { TableWithPagination } from './with-pagination';
 
 export const TABLE_ROUTES: Routes = {
@@ -20,6 +22,8 @@ export const TABLE_ROUTES: Routes = {
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortData,
 		'with-footer': TableWithFooter,
+		'stateful-with-selection': TableStatefulWithSelection,
+		'stateless-with-selection': TableStatelessWithSelection,
 		'with-pagination': TableWithPagination,
 		stateless: TableStateless,
 	},

package/src/components/table/stateful-with-selection.tsx

@@ -0,0 +1,78 @@
+import type { FC } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { KolButton, KolTableStateful } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+import type { KoliBriTableSelection } from '@public-ui/components';
+
+const DATA = [
+	{ id: '1001', name: 'Foo Bar' },
+	{ id: '1002', name: 'Foo Baz' },
+];
+type Data = (typeof DATA)[0];
+
+export const TableStatefulWithSelection: FC = () => {
+	const [selectedValue, setSelectedValue] = useState<Data[]>();
+
+	const selection: KoliBriTableSelection = {
+		label: (row: Data) => `Selection for ${row.name}`,
+		selectedKeys: selectedValue ? selectedValue.map((element) => element.id) : [],
+		keyPropertyName: 'id',
+	};
+
+	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>();
+
+	const handleSelectionChangeEvent = ({ detail: selection }) => {
+		console.log('Selection change via event', selection);
+	};
+	const handleSelectionChangeCallback = (_event, selection) => {
+		console.log('Selection change via callback', selection);
+	};
+
+	const handleButtonClick = async () => {
+		const selection = await kolTableStatefulRef.current?.getSelection();
+		setSelectedValue(selection);
+	};
+
+	useEffect(() => {
+		kolTableStatefulRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+
+		return () => {
+			kolTableStatefulRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+		};
+	}, [kolTableStatefulRef]);
+
+	return (
+		<>
+			<SampleDescription>KolTableStateful with selection</SampleDescription>
+
+			<KolTableStateful
+				_label="Table with selection checkboxes"
+				_headers={{
+					horizontal: [
+						[
+							{ key: 'id', label: '#ID', textAlign: 'left' },
+							{ key: 'name', label: 'Name', textAlign: 'left' },
+						],
+					],
+				}}
+				_data={DATA}
+				_selection={selection}
+				_on={{ onSelectionChange: handleSelectionChangeCallback }}
+				className="block"
+				style={{ maxWidth: '600px' }}
+				ref={kolTableStatefulRef}
+			/>
+			<div className="grid grid-cols-3 items-end gap-4 mt-4">
+				<KolButton
+					_label="getSelection()"
+					_on={{
+						onClick: () => {
+							void handleButtonClick();
+						},
+					}}
+				></KolButton>
+				<pre>{JSON.stringify(selectedValue, null, 2)}</pre>
+			</div>
+		</>
+	);
+};

package/src/components/table/stateless-with-selection.tsx

@@ -0,0 +1,60 @@
+import type { FC } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { KolTableStateless } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+import type { KoliBriTableSelection } from '@public-ui/components';
+
+const DATA = [
+	{ id: '1001', name: 'Foo Bar' },
+	{ id: '1002', name: 'Foo Baz' },
+];
+type Data = (typeof DATA)[0];
+
+export const TableStatelessWithSelection: FC = () => {
+	const selection: KoliBriTableSelection = {
+		label: (row: Data) => `Selection for ${row.name}`,
+		selectedKeys: ['1002'],
+		keyPropertyName: 'id',
+	};
+
+	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>();
+
+	const handleSelectionChangeEvent = ({ detail: selection }) => {
+		console.log('Selection change via event', selection);
+	};
+	const handleSelectionChangeCallback = (_event, selection) => {
+		console.log('Selection change via callback', selection);
+	};
+
+	useEffect(() => {
+		kolTableStatelessRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+
+		return () => {
+			kolTableStatelessRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+		};
+	}, [kolTableStatelessRef]);
+
+	return (
+		<>
+			<SampleDescription>KolTableStateless with selection</SampleDescription>
+
+			<KolTableStateless
+				_label="Table with selection checkboxes"
+				_headerCells={{
+					horizontal: [
+						[
+							{ key: 'id', label: '#ID', textAlign: 'left' },
+							{ key: 'name', label: 'Name', textAlign: 'left' },
+						],
+					],
+				}}
+				_data={DATA}
+				_selection={selection}
+				_on={{ onSelectionChange: handleSelectionChangeCallback }}
+				className="block"
+				style={{ maxWidth: '600px' }}
+				ref={kolTableStatelessRef}
+			/>
+		</>
+	);
+};

package/src/components/tabs/basic.tsx

@@ -8,6 +8,11 @@ const tabs = [
 	{
 		_icons: 'codicon codicon-pie-chart',
 		_label: 'Erster Tab',
+		_on: {
+			onSelect: (event) => {
+				console.log('Erster Tab ausgewählt', event);
+			},
+		},
 	},
 	{
 		_icons: 'codicon codicon-calendar',

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

@@ -10,6 +10,9 @@ export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTe
 		<div className="grid gap-4">
 			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _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 />
+			<KolTextarea {...props} ref={ref} _label="Text (disabled & value)" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _disabled />
 		</div>
 	);
 });

package/src/components/toolbar/basic.tsx

@@ -0,0 +1,48 @@
+import type { FC } from 'react';
+import React, { useContext } from 'react';
+import { KolBadge, KolToolbar } from '@public-ui/react';
+import { HideMenusContext } from '../../shares/HideMenusContext';
+
+export const ToolbarBasic: FC = () => {
+	const hideMenus = useContext(HideMenusContext);
+	return (
+		<>
+			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
+			<KolToolbar
+				class="block w-fit"
+				_label="Toolbar"
+				_items={[
+					{
+						_label: 'Back',
+						_hideLabel: true,
+						_icons: {
+							left: {
+								icon: 'codicon codicon-arrow-left',
+							},
+						},
+					},
+					{
+						_label: 'Next',
+						_hideLabel: true,
+						_icons: {
+							right: {
+								icon: 'codicon codicon-arrow-right',
+							},
+						},
+					},
+					{
+						_href: '#',
+						_label: 'Simple Link 1',
+					},
+					{
+						_href: '#',
+						_label: 'Simple Link 3',
+					},
+					{
+						_label: 'Bold',
+					},
+				]}
+			/>
+		</>
+	);
+};