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

package/src/components/Sidebar.tsx

@@ -1,12 +1,40 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolButton, KolHeading, KolSelect, KolVersion } from '@public-ui/react';
+import { KolButton, KolHeading, KolSelect, KolVersion } from '@public-ui/react-v19';
 
 import { THEME_OPTIONS } from '../shares/theme';
 
 import type { Routes } from '../shares/types';
 import Navigation from './Navigation';
+
+type BuildInformationProps = {
+	buildDate?: string | null;
+	commitHash?: string | null;
+};
+const BuildInformation: FC<BuildInformationProps> = ({ buildDate, commitHash }) => {
+	if (!buildDate && !commitHash) {
+		return '';
+	}
+
+	return (
+		<div className="text-sm font-mono color-gray-5 m-t-2">
+			{buildDate && commitHash ? ( // date and hash provided
+				<>
+					Build: {commitHash}
+					<br />
+					at {buildDate}
+				</>
+			) : commitHash ? ( // hash only
+				`Build: ${commitHash}`
+			) : (
+				// date only
+				`Build date: ${buildDate}`
+			)}
+		</div>
+	);
+};
+
 type Props = {
 	version: string;
 	theme: string;
@@ -25,7 +53,7 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 	const formatSampleAsLabel = () => sample.replace(/\//g, ' ');
 
 	const handleThemeSelectChange = (_event: Event, value: unknown) => {
-		onThemeChange((value as [string])[0]);
+		onThemeChange(value as string);
 	};
 
 	const handlePreviousClick = () => {
@@ -47,16 +75,8 @@ 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" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
-
+				<BuildInformation buildDate={buildDate} commitHash={commitHash} />
+				<KolSelect _label="Theme" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={theme} class="mt"></KolSelect>
 				<KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
 				<div className="flex flex-justify-between flex-items-center mt">
 					<KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
@@ -65,7 +85,6 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 					</span>
 					<KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
 				</div>
-
 				<Navigation routes={routes} />
 			</div>
 		</aside>

package/src/components/abbr/basic.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import { KolAbbr } from '@public-ui/react';
+import { KolAbbr } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 export const AbbrBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolAbbr shows an abbreviation and the full form in parentheses, if provided.</p>
+			<p>KolAbbr shows an abbreviation and uses kol-tooltip-wc to display the long form, if provided.</p>
 		</SampleDescription>
 
 		<p>

package/src/components/accordion/basic.tsx

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

package/src/components/accordion/headlines.tsx

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

package/src/components/alert/basic.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import { KolAlert } from '@public-ui/react';
+import { KolAlert } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import type { AlertType, AlertVariant, HeadingLevel } from '@public-ui/components';
+import type { AlertTypePropType, AlertVariantPropType, HeadingLevel } from '@public-ui/components';
 import { SampleDescription } from '../SampleDescription';
 
 type PropsByType = {
 	level: HeadingLevel;
-	type: AlertType;
-	variant: AlertVariant;
+	type: AlertTypePropType;
+	variant: AlertVariantPropType;
 };
 type PropsBasic = {
-	variant?: AlertVariant;
+	variant?: AlertVariantPropType;
 };
 
 const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (

package/src/components/alert/html.tsx

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

package/src/components/avatar/basic.tsx

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

package/src/components/badge/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolBadge } from '@public-ui/react';
+import { KolBadge } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
@@ -11,7 +11,7 @@ export const BadgeBasic: FC = () => (
 			<p>KolBadge shows badges with a label, background color and optional icon.</p>
 		</SampleDescription>
 
-		<div className="flex gap-2">
+		<div className="flex flex-wrap gap-2">
 			<KolBadge _label="black"></KolBadge>
 			<KolBadge _color="#86ffc6" _label="teal"></KolBadge>
 			<KolBadge _color="#06539e" _label="blue"></KolBadge>

package/src/components/badge/button.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolBadge } from '@public-ui/react';
+import { KolBadge } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const createBadgeProps = (label: string) => ({
@@ -23,7 +23,7 @@ export const BadgeButton: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="flex gap-2">
+		<div className="flex flex-wrap gap-2">
 			<KolBadge {...createBadgeProps('black')}></KolBadge>
 			<KolBadge _color="#86ffc6" {...createBadgeProps('teal')}></KolBadge>
 			<KolBadge _color="#06539e" {...createBadgeProps('blue')}></KolBadge>

package/src/components/badge/formatted-label.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolBadge } from '@public-ui/react-v19';
+
+export const FormattedLabel = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample demonstrates the possibility of formatted text in badges via markdown syntax.</p>
+			</SampleDescription>
+
+			<div className="flex flex-col gap-4">
+				<KolBadge _color="#7db4ebff" _label="**Bold** and _italic_ Markdown label" />
+				<KolBadge _color="#8feb7dff" _label="This is ~~strikethrough~~ text" />
+				<KolBadge _color="#e6ee8eff" _label="Source code like `y = mx + n` is possible" />
+			</div>
+		</>
+	);
+};

package/src/components/badge/routes.ts

@@ -1,10 +1,12 @@
 import { Routes } from '../../shares/types';
 import { BadgeBasic } from './basic';
 import { BadgeButton } from './button';
+import { FormattedLabel } from './formatted-label';
 
 export const BADGE_ROUTES: Routes = {
 	badge: {
 		basic: BadgeBasic,
 		button: BadgeButton,
+		'formatted-label': FormattedLabel,
 	},
 };

package/src/components/breadcrumb/basic.tsx

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

package/src/components/button/access-key.tsx

@@ -1,4 +1,4 @@
-import { KolButton, KolLink } from '@public-ui/react';
+import { KolButton, KolLink } from '@public-ui/react-v19';
 import React from 'react';
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -23,16 +23,17 @@ export const ButtonAccessKey: FC = () => {
 
 			<div className="flex flex-wrap gap-4">
 				<KolButton _label="With S access key" _accessKey="S" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="Very small s" _accessKey="s" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Very small b" _accessKey="b" _on={dummyEventHandler}></KolButton>
 				<KolButton _label="Access key does not appear in label" _accessKey="x" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="access key without label" _hideLabel _accessKey="s" _icons="codicon codicon-dashboard" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="access key without label" _hideLabel _accessKey="a" _icons="codicon codicon-dashboard" _on={dummyEventHandler}></KolButton>
 				<KolButton
 					_label="with inline icons"
 					_icons={{
 						left: 'codicon codicon-dashboard',
 						right: 'codicon codicon-dashboard',
 					}}
-					_accessKey="s"
+					_accessKey="n"
+					_on={dummyEventHandler}
 				/>
 			</div>
 		</>

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

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

package/src/components/button/baselined.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolButton } from '@public-ui/react';
+import { KolButton } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -19,7 +19,7 @@ export const ButtonBaselined: FC = () => {
 				<p>This KolButton sample is used for internal testing purposes: It features multiple buttons with and without icons which are vertically aligned.</p>
 			</SampleDescription>
 
-			<div className="flex">
+			<div className="flex flex-wrap gap-2">
 				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
 				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
 				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>

package/src/components/button/icons.tsx

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { KolButton } from '@public-ui/react';
+import { KolButton } from '@public-ui/react-v19';
 import { useToasterService } from '../../../hooks/useToasterService';
 import type { ButtonSampleProps } from './type';
 
@@ -20,10 +20,10 @@ export const ButtonCases: React.FC<ButtonSampleProps> = (props) => {
 			<KolButton _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} {...other}>
 				{children}
 			</KolButton>
-			<KolButton _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler} {...other}>
+			<KolButton _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} {...other}>
 				{children}
 			</KolButton>
-			<KolButton _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} {...other}>
+			<KolButton _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler} {...other}>
 				{children}
 			</KolButton>
 			<KolButton _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} {...other}>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { ButtonCases } from './cases';
-import { KolHeading } from '@public-ui/react';
+import { KolHeading } from '@public-ui/react-v19';
 import type { ButtonSampleProps } from './type';
 
 export const ButtonVariants: React.FC<ButtonSampleProps> = (props = {}) => {

package/src/components/button/routes.ts

@@ -7,6 +7,7 @@ import { ButtonIcons } from './icons';
 import { ButtonWidth } from './width';
 import { ButtonShortKey } from './short-key';
 import { ButtonExpertSlot } from './expert-slot';
+import { ButtonRowReverseTooltip } from './row-reverse-tooltip';
 
 export const BUTTON_ROUTES: Routes = {
 	button: {
@@ -18,5 +19,6 @@ export const BUTTON_ROUTES: Routes = {
 		baselined: ButtonBaselined,
 		'short-key': ButtonShortKey,
 		'expert-slot': ButtonExpertSlot,
+		'row-reverse-tooltip': ButtonRowReverseTooltip,
 	},
 };

package/src/components/button/row-reverse-tooltip.tsx

@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+import React from 'react';
+import { KolButton } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+export const ButtonRowReverseTooltip: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates how the tooltip adapts its width when containing long text inside a row-reverse flex container. The effect becomes visible
+					when inspecting the layout with DevTools and reducing the available width (e.g. by narrowing the screen).
+				</p>
+			</SampleDescription>
+
+			<div className="flex flex-row-reverse">
+				<KolButton
+					_icons="codicon codicon-home"
+					_hideLabel
+					_label="This is a very, very long tooltip text that exceeds the width."
+					_variant="primary"
+				></KolButton>
+			</div>
+		</>
+	);
+};

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

@@ -1,8 +1,61 @@
-import { KolButton } from '@public-ui/react';
-import React from 'react';
+import { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
+import { useRef } from 'react';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { ToasterService } from '@public-ui/components';
+
+const RowActions: FC<{ label: string }> = ({ label }) => {
+	const toaster = ToasterService.getInstance(document);
+	const editButtonRef = useRef<HTMLKolButtonElement | null>(null);
+	const deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);
+
+	const handleEditClick = () => {
+		toaster.enqueue({
+			label: 'Edit clicked',
+			description: `The button "edit" has been clicked for ${label}`,
+			type: 'info',
+		});
+	};
+
+	const handleDeleteClick = () => {
+		toaster.enqueue({
+			label: 'Delete clicked',
+			description: `The button "delete" has been clicked for ${label}`,
+			type: 'warning',
+		});
+	};
+
+	const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
+		switch (event.code) {
+			case 'KeyE':
+				void editButtonRef.current?.kolFocus();
+				handleEditClick();
+				return;
+			case 'KeyD':
+				void deleteButtonRef.current?.kolFocus();
+				handleDeleteClick();
+				return;
+		}
+	};
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			style={{
+				display: 'flex',
+				gap: 'calc(10rem / var(--kolibri-root-font-size, 16))',
+			}}
+			onKeyUp={handleKeyUp}
+		>
+			<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />
+			<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />
+		</div>
+	);
+};
 
 export const ButtonShortKey: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -11,28 +64,77 @@ export const ButtonShortKey: FC = () => {
 		onClick: dummyClickEventHandler,
 	};
 
+	type Data = {
+		label: string;
+	};
+	const DATA: Data[] = [
+		{
+			label: 'Row 1',
+		},
+		{
+			label: 'Row 2',
+		},
+	];
+
+	const HEADERS: KoliBriTableHeaders = {
+		horizontal: [
+			[
+				{
+					label: 'Label',
+					key: 'label',
+					textAlign: 'left',
+				},
+				{
+					label: 'Actions',
+					key: 'actions',
+					textAlign: 'left',
+
+					render: (el, cell) => {
+						getRoot(createReactRenderElement(el)).render(<RowActions label={(cell.data as Data).label} />);
+					},
+				},
+			],
+		],
+	};
+
 	return (
 		<>
 			<SampleDescription>
 				<p>
-					This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.{' '}
+					The first sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed
+					separately.
+				</p>
+				<p>
+					The second sample showcases a table where each row contains two KolButtons, each with its own shortcut key. To trigger an action, move the focus to
+					any of the &quot;Actions&quot; cells and press &quot;e&quot; or &quot;d.&quot; Doing so will activate the corresponding action and display a Toast
+					notification for demonstration purposes.
 				</p>
 			</SampleDescription>
 
 			<div className="flex flex-wrap gap-4">
 				<KolButton _label="With S short key" _shortKey="S" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="Very small s" _shortKey="s" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Very small b" _shortKey="b" _on={dummyEventHandler}></KolButton>
 				<KolButton _label="Short key does not appear in label" _shortKey="x" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="short key without label" _hideLabel _shortKey="s" _icons="codicon codicon-dashboard" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="short key without label" _hideLabel _shortKey="k" _icons="codicon codicon-dashboard" _on={dummyEventHandler}></KolButton>
 				<KolButton
 					_label="with inline icons"
 					_icons={{
 						left: 'codicon codicon-dashboard',
 						right: 'codicon codicon-dashboard',
 					}}
-					_shortKey="s"
+					_shortKey="n"
+					_on={dummyEventHandler}
 				/>
 			</div>
+
+			<KolHeading _level={2} _label="Interactive sample" className="mt" />
+
+			<KolTableStateful
+				_label={`Move focus within one of the "Actions" cells and press "e" or "d" to trigger an action.`}
+				_data={DATA}
+				_headers={HEADERS}
+				_minWidth="400px"
+			/>
 		</>
 	);
 };

package/src/components/button/width.tsx

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

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolButtonLink } from '@public-ui/react';
+import { KolButtonLink, KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -21,6 +21,8 @@ export const ButtonLinkBasic: FC = () => {
 				</p>
 			</SampleDescription>
 			<section className="text-base">
+				<KolHeading _level={2} _label="Button-Link with variant 'inline'" />
+
 				<p>
 					In this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label="Simple Link" /> It is rendered by default as an{' '}
 					<strong>inline element</strong>.
@@ -35,14 +37,17 @@ export const ButtonLinkBasic: FC = () => {
 					<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
 					Therefore, I go over the entire width of the parent element to create a line break.
 				</p>
+
+				<KolHeading _level={2} _label="Button-Link with variant 'standalone'" />
+
 				<p>
-					<KolButtonLink _label="Disabled ButtonLink" _disabled />
+					<KolButtonLink _label="Disabled ButtonLink" _disabled _variant="standalone" />
 				</p>
 				<p>
-					<KolButtonLink _label="With access key" _accessKey="c" _on={dummyEventHandler} />
+					<KolButtonLink _label="With access key" _accessKey="c" _on={dummyEventHandler} _variant="standalone" />
 				</p>
 				<p>
-					<KolButtonLink _label="Disabled ButtonLink" _shortKey="s" />
+					<KolButtonLink _label="Disabled ButtonLink" _shortKey="s" _variant="standalone" />
 				</p>
 			</section>
 		</>

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

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

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

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

package/src/components/card/basic.tsx

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

package/src/components/combobox/basic.tsx

@@ -1,21 +1,16 @@
 import type { FC } from 'react';
-import { useContext } from 'react';
 import React from 'react';
 import { FormWrap } from '../FormWrap';
 import { ComboboxVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
-import { KolBadge } from '@public-ui/react';
-import { HideMenusContext } from '../../shares/HideMenusContext';
 export const ComboboxBasic: FC = () => {
-	const hideMenus = useContext(HideMenusContext);
 	return (
 		<>
 			<SampleDescription>
 				<p>KolCombobox combines a text input with a suggestion list, enabling users to either type in a value or to select on of the suggestions.</p>
 			</SampleDescription>
-			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 
-			<FormWrap RefComponent={ComboboxVariants} />
+			<FormWrap RefComponent={ComboboxVariants} showButtons={false} />
 		</>
 	);
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolCombobox } from '@public-ui/react';
+import { KolCombobox } from '@public-ui/react-v19';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 import { COUNTRY_SUGGESTIONS } from '../../../shares/country';

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