@public-ui/sample-react 4.0.0-alpha.0 → 4.0.0-alpha.10

package/src/components/link/basic.tsx

@@ -1,35 +1,35 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkBasic: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				KolLink renders a link. This sample shows disabled links, links with hidden label and links with different CSS <code>display</code>-properties.
+				KolLink renders a link. This sample shows disabled links, links with hidden label, the boolean _inline property and links with different CSS{' '}
+				<code>display</code>-properties.
 			</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolLink _href="#/back-page" _label="Simple Link" />
-			<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" />
-			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" />
-			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" />
+			<KolLink _href="#/back-page" _inline={false} _label="Simple Link" />
+			<KolLink _disabled _href="#/back-page" _inline={false} _label="Simple Link (disabled)" />
+			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _inline={false} _label="Icon Link" />
+			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _inline={false} _label="Icon Link (disabled)" />
 			<p>
-				In this paragraph, a link is inserted that contains no additional attributes.
-				<KolLink _href="#/back-page" _label="Simple Link" />
-				It is rendered by default as a <strong>inline element</strong>.
+				In this paragraph, a link is inserted that contains no additional attributes. <KolLink _href="#/back-page" _label="Simple Link" /> It is rendered by
+				default as a <strong>inline element</strong>.
 			</p>
 			<p>
-				In this paragraph, a link is inserted that is rendered as an inline-block element.
+				In this paragraph, a link is inserted that is rendered as an inline-block element.{' '}
 				<KolLink class="d-inline-block" _accessKey="S" _href="#/back-page" _label="Simple Link" />. This allows you to assign width, height, and other
 				properties to it using CSS styles.
 				<br />
 				<br />
-				After that, there is a link that is rendered as a block element.
-				<KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, therefore, I span the entire width of the parent element, causing a line break.
+				After that, there is a link that is rendered as a block element. <KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, therefore, I span
+				the entire width of the parent element, causing a line break.
 			</p>
 		</div>
 	</>

package/src/components/link/icons.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/link/image.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkImage: FC = () => (

package/src/components/link/link-react-router.tsx

@@ -0,0 +1,31 @@
+import { KolLink } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { SampleDescription } from '../SampleDescription';
+
+export const LinkReactRouter: FC = () => {
+	const navigate = useNavigate();
+
+	const on = {
+		onClick: (event: Event) => {
+			event.preventDefault();
+			navigate('/back-page');
+		},
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample shows how KolLink works with react-router. Primary click uses preventDefault() and navigate(...), while right click open in new tab still
+					follows _href. Make sure _href and navigate(...) point to the same path.
+				</p>
+			</SampleDescription>
+
+			<div className="grid gap-4">
+				<KolLink _href="/back-page" _inline={false} _label="Go to overview" _on={on} />
+			</div>
+		</>
+	);
+};

package/src/components/link/routes.ts

@@ -1,11 +1,12 @@
 import { Routes } from '../../shares/types';
+import { LinkAccessKey } from './access-key';
+import { LinkAriaDescription } from './aria-description';
 import { LinkBasic } from './basic';
 import { LinkIcons } from './icons';
 import { LinkImage } from './image';
-import { LinkTarget } from './target';
-import { LinkAriaDescription } from './aria-description';
-import { LinkAccessKey } from './access-key';
+import { LinkReactRouter } from './link-react-router';
 import { LinkShortKey } from './short-key';
+import { LinkTarget } from './target';
 
 export const LINK_ROUTES: Routes = {
 	link: {
@@ -16,5 +17,6 @@ export const LINK_ROUTES: Routes = {
 		'aria-description': LinkAriaDescription,
 		'access-key': LinkAccessKey,
 		'short-key': LinkShortKey,
+		'react-router': LinkReactRouter,
 	},
 };

package/src/components/link/short-key.tsx

@@ -1,14 +1,14 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkShortKey: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.{' '}
+				This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.
 			</p>
 		</SampleDescription>
 

package/src/components/link/target.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/link-button/aria-description.tsx

@@ -1,6 +1,6 @@
-import { KolLinkButton } from '@public-ui/react';
-import React from 'react';
+import { KolLinkButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkButtonAriaDescription: FC = () => (
@@ -9,7 +9,7 @@ export const LinkButtonAriaDescription: FC = () => (
 			<p>This sample shows KolLinkButton with aria-description</p>
 		</SampleDescription>
 
-		<div className="flex flex-wrap gap-4">
+		<div className="flex flex-wrap gap-2">
 			<KolLinkButton _href="#/back-page" _label="Link Button Text without area description"></KolLinkButton>
 			<KolLinkButton _href="#/back-page" _label="Link Button Text" _ariaDescription="Link Button Area Description"></KolLinkButton>
 		</div>

package/src/components/link-button/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolLinkButton } from '@public-ui/react';
+import { KolLinkButton } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -15,16 +15,14 @@ export const LinkButtonBasic: FC = () => (
 			<p>KolLinkButton renders a link that looks like a button. The sample shows the different styling variants.</p>
 		</SampleDescription>
 
-		<div className="grid gap-14">
-			<div className="flex flex-wrap gap-14">
-				<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Access Key" _variant="primary" _accessKey="c" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Short Key" _variant="primary" _shortKey="s" {...ARGS}></KolLinkButton>
-			</div>
+		<div className="flex flex-wrap gap-2">
+			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Access Key" _variant="primary" _accessKey="c" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Short Key" _variant="primary" _shortKey="s" {...ARGS}></KolLinkButton>
 		</div>
 	</>
 );

package/src/components/link-button/routes.ts

@@ -1,6 +1,6 @@
 import { Routes } from '../../shares/types';
-import { LinkButtonBasic } from './basic';
 import { LinkButtonAriaDescription } from './aria-description';
+import { LinkButtonBasic } from './basic';
 
 export const LINK_BUTTON_ROUTES: Routes = {
 	'link-button': {

package/src/components/modal/basic.tsx

@@ -1,76 +1,62 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef } from 'react';
-import { useSearchParams } from 'react-router-dom';
 
-import { KolButton, KolCard, KolModal } from '@public-ui/react';
+import { KolButton, KolModal } from '@public-ui/react-v19';
+import { useSearchParams } from 'react-router';
 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);
+
+	const showModal = searchParams.get('show-modal') as string;
+
+	const blankRef = useRef<HTMLKolModalElement>(null);
+	const cardRef = useRef<HTMLKolModalElement>(null);
+
+	const onOpenBlankModal = {
+		onClick: () => blankRef.current?.openModal(),
+	};
+	const onOpenCardModal = {
+		onClick: () => cardRef.current?.openModal(),
+	};
+	const onCloseBlankModal = {
+		onClick: () => blankRef.current?.closeModal(),
+	};
 
 	useEffect(() => {
-		if (modalState === 'true') {
-			modalElement.current?.openModal();
+		if (showModal === 'true') {
+			blankRef.current?.openModal();
+			cardRef.current?.openModal();
 		}
-	}, [modalState]);
+	}, []);
 
 	return (
 		<>
 			<SampleDescription>
 				<p>
-					KolModal renders content in a popover, disabling interactivity with elements behind it. In the sample, the modal can be opened and closed using the
-					buttons &quot;Open modal&quot; and &quot;Close modal&quot;.
+					KolModal supports the variants <code>blank</code> and <code>card</code>. The card variant includes a <code>KolCard</code> container and a closer
+					button.
 				</p>
 			</SampleDescription>
 
-			<div className="flex">
-				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
-					<KolCard _label="I am a modal.">
-						<KolButton
-							_label="Open stacked modal"
-							className="mr"
-							_on={{
-								onClick: () => {
-									stackedModalElement.current?.openModal();
-								},
-							}}
-						/>
-
-						<KolButton
-							_label="Close modal"
-							_on={{
-								onClick: () => {
-									modalElement.current?.closeModal();
-								},
-							}}
-						/>
-					</KolCard>
-				</KolModal>
-
-				<KolModal _label="Stacked modal" _width="80%" ref={stackedModalElement}>
-					<KolCard _label="Stacked modal element">
-						<KolButton
-							_label="Close stacked modal"
-							_on={{
-								onClick: () => {
-									stackedModalElement.current?.closeModal();
-								},
-							}}
-						/>
-					</KolCard>
-				</KolModal>
-
-				<KolButton
-					_label="Open modal"
-					_on={{
-						onClick: () => {
-							modalElement.current?.openModal();
-						},
-					}}
-				/>
+			<div className="grid gap-8">
+				<div>
+					<KolButton _label="Open blank modal" _on={onOpenBlankModal} />
+					<KolModal ref={blankRef} _label="Blank modal" _variant="blank" _width="40%">
+						<div className="bg-white p-4 rounded shadow">
+							<p className="mt-0">You must add styling and a close button yourself.</p>
+							<KolButton _label="Open card modal" className="mr" _on={onOpenCardModal} />
+							<KolButton _label="Close" _on={onCloseBlankModal} />
+						</div>
+					</KolModal>
+				</div>
+
+				<div>
+					<KolButton _label="Open card modal" _on={onOpenCardModal} />
+					<KolModal ref={cardRef} _label="Card modal" _variant="card" _width="30%">
+						<p className="mt-0">This variant wraps content inside a KolCard.</p>
+					</KolModal>
+				</div>
 			</div>
 		</>
 	);

package/src/components/nav/aria-current.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolNav } from '@public-ui/react';
+import { KolNav } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 

package/src/components/nav/basic.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolNav } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolNav } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
-import { LINKS, LINKS_WITHOUT_SUBMENU } from './links';
+import { LINKS, LINKS_SUB_ACTIVE, LINKS_WITHOUT_SUBMENU } from './links';
 
 import type { FC } from 'react';
 export const NavBasic: FC = () => {
@@ -31,11 +31,27 @@ export const NavBasic: FC = () => {
 				</section>
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Navigation without submenu" />
-					<KolNav class="block w-fit" _label="Main navigation" _links={LINKS_WITHOUT_SUBMENU} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+					<KolNav
+						class="block w-fit"
+						_label="Navigation without submenu"
+						_links={LINKS_WITHOUT_SUBMENU}
+						_hasCompactButton
+						_hasIconsWhenExpanded={hasIconsWhenExpanded}
+					/>
 				</section>
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Navigation with submenu" />
-					<KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+					<KolNav class="block w-fit" _label="Navigation with submenu" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+				</section>
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Navigation with submenu active" />
+					<KolNav
+						class="block w-fit"
+						_label="Navigation with submenu active"
+						_links={LINKS_SUB_ACTIVE}
+						_hasCompactButton
+						_hasIconsWhenExpanded={hasIconsWhenExpanded}
+					/>
 				</section>
 			</section>
 		</>

package/src/components/nav/links.ts

@@ -128,3 +128,64 @@ export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 		_icons: 'codicon codicon-squirrel',
 	},
 ];
+
+export const LINKS_SUB_ACTIVE: ButtonOrLinkOrTextWithChildrenProps[] = [
+	{
+		_label: 'Homepage',
+		_icons: 'codicon codicon-home',
+		_on: {
+			onClick: () => console.log('Homepage clicked'),
+		},
+	},
+	{
+		_label: '2 Navigation point',
+		_href: '#/back-page',
+		_on: {
+			onClick: () => console.log('Link clicked'),
+		},
+	},
+	{
+		_label: '3 Navigation point',
+		_href: '#/back-page',
+		_icons: 'codicon codicon-home',
+		_children: [
+			{
+				_label: '3.1 Navigation point',
+				_icons: 'codicon codicon-home',
+				_href: '#/back-page',
+			},
+			{
+				_label: '3.2 Navigation point',
+				_target: 'asdasd',
+			},
+			{
+				_label: '3.3 Navigation point',
+				_href: '#/back-page',
+				_children: [
+					{
+						_label: '3.3.1 Navigation point',
+						_href: '#/back-page',
+						_active: true,
+					},
+					{ _label: '3.3.2 Navigation point', _href: '#/back-page' },
+				],
+			},
+			{
+				_label: '3.4 Navigation point',
+				_href: '#/back-page',
+				_children: [
+					{
+						_label: '3.4.1 Navigation point',
+						_href: '#/back-page',
+						_children: [
+							{ _label: '3.4.1.1 Navigation point', _href: '#/back-page' },
+							{ _label: '3.4.1.2 Navigation point (active)', _href: '#/back-page' },
+						],
+					},
+					{ _label: '3.4.2 Navigation point', _href: '#/back-page' },
+				],
+			},
+			{ _label: '3.5 Navigation point', _href: '#/back-page' },
+		],
+	},
+];

package/src/components/nav/routes.ts

@@ -1,12 +1,10 @@
 import { Routes } from '../../shares/types';
 import { NavAriaCurrent } from './aria-current';
 import { NavBasic } from './basic';
-import { NavHorizontal } from './horizontal';
 
 export const NAV_ROUTES: Routes = {
 	nav: {
 		basic: NavBasic,
 		'aria-current': NavAriaCurrent,
-		horizontal: NavHorizontal,
 	},
 };

package/src/components/pagination/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolPagination } from '@public-ui/react';
+import { KolPagination } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -25,7 +25,7 @@ export const PaginationBasic: FC = () => (
 				_siblingCount={0}
 				_boundaryCount={2}
 				_hasButtons={false}
-				_label="Test pagination 4"
+				_label="Test pagination 5"
 				_on={{}}
 				_pageSizeOptions={[10, 100]}
 			/>

package/src/components/popover-button/basic.tsx

@@ -0,0 +1,69 @@
+import type { ToolbarItemsPropType } from '@public-ui/components';
+import { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useEffect } from 'react';
+import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
+
+export const PopoverButtonBasic: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+	const buttonRef = React.useRef<HTMLKolPopoverButtonElement>(null);
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	const TOOLBAR_ITEMS: ToolbarItemsPropType = [
+		{
+			type: 'button',
+			_label: 'Edit',
+			_icons: 'codicon codicon-edit',
+			_on: dummyEventHandler,
+		},
+		{
+			type: 'button',
+			_label: 'Delete',
+			_icons: 'codicon codicon-trash',
+			_on: dummyEventHandler,
+		},
+		{
+			type: 'button',
+			_label: 'Duplicate',
+			_icons: 'codicon codicon-copy',
+			_on: dummyEventHandler,
+		},
+	];
+
+	useEffect(() => {
+		// Ensure the popover is closed on initial render
+		if (buttonRef.current) {
+			buttonRef.current.showPopover();
+			buttonRef.current.kolFocus();
+		}
+	}, []);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					The PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,
+					right, bottom, left) using the <code>_popoverAlign</code> prop.
+				</p>
+			</SampleDescription>
+			<div className="flex flex-col gap-4">
+				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }} ref={buttonRef}>
+					<KolToolbar _label="Action toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
+				</KolPopoverButton>
+				<KolPopoverButton _label="Help" _icons="codicon codicon-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+					<div className="w-sm p-2 border border-solid border-gray">
+						<KolHeading _label="Help Information" _level={0}></KolHeading>
+						<p>
+							<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+							Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+						</p>
+					</div>
+				</KolPopoverButton>
+			</div>
+		</>
+	);
+};

package/src/components/popover-button/inline.tsx

@@ -0,0 +1,36 @@
+import { KolHeading, KolPopoverButton } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const PopoverButtonInline: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					A PopoverButton inline with some dummy text. Here the PopoverButton has the height of the surrounding text. As statet in
+					<a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding SC 2.5.5</a> target size of a help icon in text can be smaller
+					than 44px by 44px.
+				</p>
+			</SampleDescription>
+			<div className="flex flex-col gap-4">
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+					Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+					<KolPopoverButton _inline={true} _label="Help" _icons="codicon codicon-question" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+						<div className="w-sm p-2 border border-solid border-gray">
+							<KolHeading _label="Help Information" _level={0}></KolHeading>
+							<p>
+								<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+								Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+							</p>
+						</div>
+					</KolPopoverButton>
+					<br />
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+					Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+				</p>
+			</div>
+		</>
+	);
+};

package/src/components/popover-button/routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '../../shares/types';
+import { PopoverButtonBasic } from './basic';
+import { PopoverButtonInline } from './inline';
+
+export const POPOVER_BUTTON_ROUTES: Routes = {
+	'popover-button': {
+		basic: PopoverButtonBasic,
+		inline: PopoverButtonInline,
+	},
+};

package/src/components/progress/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolProgress } from '@public-ui/react';
+import { KolProgress } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -11,11 +11,18 @@ export const ProgressBasic: FC = () => (
 			<p>KolProgress renders a progress indicator. The sample shows the variants &quot;bar&quot; and &quot;cycle&quot; with and without labels.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
-			<KolProgress _variant="bar" _max={100} _value={0} _label="With label"></KolProgress>
-			<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>
-			<KolProgress _variant="bar" _max={100} _value={100}></KolProgress>
-			<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
+		<div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
+			<fieldset title="Percentages" className="flex flex-col gap-4">
+				<KolProgress _variant="bar" _max={7} _value={0}></KolProgress>
+				<KolProgress _variant="bar" _max={7} _value={2}></KolProgress>
+				<KolProgress _variant="bar" _max={7} _value={7}></KolProgress>
+				<KolProgress _variant="cycle" _max={7} _value={6}></KolProgress>
+			</fieldset>
+			<fieldset title="Custom units" className="flex flex-col gap-4">
+				<KolProgress _label="Distance" _variant="bar" _max={65434} _value={7236} _unit="m"></KolProgress>
+				<KolProgress _label="12 Tasks to do" _variant="bar" _max={12} _value={5} _unit="tasks completed"></KolProgress>
+				<KolProgress _label="Max 150 kg" _variant="cycle" _max={150} _value={42} _unit="kg"></KolProgress>
+			</fieldset>
 		</div>
 	</>
 );

package/src/components/quote/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolQuote } from '@public-ui/react';
+import { KolQuote } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const QuoteBasic: FC = () => (

package/src/components/quote/block.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolQuote } from '@public-ui/react';
+import { KolQuote } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const QuoteBlock: FC = () => (