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

package/src/components/table/with-footer.tsx

@@ -1,17 +1,18 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolTable } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableWithFooter: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable with footer data.</p>
+			<p>This sample shows KolTableStateful with footer data.</p>
 		</SampleDescription>
 
-		<KolTable
+		<KolTableStateful
 			className="w-full"
 			_label="Business hours"
+			_minWidth="auto"
 			_headers={{
 				horizontal: [
 					[

package/src/components/table/with-pagination.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTable } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react-v19';
 
 import { DATE_FORMATTER } from './formatter';
 import { SampleDescription } from '../SampleDescription';
@@ -23,10 +23,10 @@ const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 export const TableWithPagination: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows how KolTable can be navigated using a pagination.</p>
+			<p>This sample shows how KolTableStateful can be navigated using a pagination.</p>
 		</SampleDescription>
 		<div className="w-full">
-			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
+			<KolTableStateful _label="Table description" _minWidth="auto" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>
 		</div>
 	</>
 );

package/src/components/tabs/align.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTabs } from '@public-ui/react';
+import { KolHeading, KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import type { AlignPropType } from '@public-ui/components';
 

package/src/components/tabs/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTabs } from '@public-ui/react';
+import { KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const tabs = [

package/src/components/tabs/behavior.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTabs } from '@public-ui/react';
+import { KolHeading, KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const tabs = [

package/src/components/tabs/create-button.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import type { FC } from 'react';
+import { KolTabs } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+export const CreateButton: FC = () => {
+	const [tabs, setTabs] = useState([
+		{
+			_label: 'First tab',
+		},
+		{
+			_label: 'Second Tab',
+		},
+	]);
+
+	const addTab = () => {
+		setTabs([
+			...tabs,
+			{
+				_label: `Tab #${tabs.length + 1}`,
+			},
+		]);
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolTabs with a &quot;create tab&quot; button.</p>
+			</SampleDescription>
+
+			<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with create button" _hasCreateButton _on={{ onCreate: addTab }}>
+				{tabs.map((tab, index) => (
+					<div key={`tab-${index}`} slot={`tab-${index}`}>
+						Contents of {tab._label}
+					</div>
+				))}
+
+				<div slot="tab-1">Contents of Tab 2</div>
+			</KolTabs>
+		</>
+	);
+};

package/src/components/tabs/icons-only.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTabs } from '@public-ui/react';
+import { KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const tabs = [

package/src/components/tabs/routes.ts

@@ -3,10 +3,12 @@ import { TabsBasic } from './basic';
 import { TabsAlign } from './align';
 import { TabsIconsOnly } from './icons-only';
 import { TabsBehavior } from './behavior';
+import { CreateButton } from './create-button';
 
 export const TABS_ROUTES: Routes = {
 	tabs: {
 		basic: TabsBasic,
+		'create-button': CreateButton,
 		'icons-only': TabsIconsOnly,
 		behavior: TabsBehavior,
 		align: TabsAlign,

package/src/components/textarea/adjust-height.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolForm, KolTextarea } from '@public-ui/react';
+import { KolForm, KolTextarea } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore

package/src/components/textarea/basic.tsx

@@ -11,6 +11,6 @@ export const TextareaBasic: FC = () => (
 			<p>KolTextarea renders a text field. The sample shows KolTextarea in a form context with different variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={TextareaVariants} />
+		<FormWrap RefComponent={TextareaVariants} showButtons={false} />
 	</>
 );

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

@@ -1,14 +1,19 @@
 import React, { forwardRef } from 'react';
+import { KolTextarea } from '@public-ui/react-v19';
+import type { Components } from '@public-ui/components';
 
-import { KolTextarea } from '@public-ui/react';
-
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched />
+			<div className="black-background">
+				<KolTextarea {...props} ref={ref} _placeholder="Placeholder" _label="Text" />
+			</div>
+			<KolTextarea {...props} _placeholder="Placeholder" _required _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched _hint={HINT_MSG} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'info', _description: 'Just a hint' }} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'warning', _description: 'Small warning' }} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'success', _description: 'Success message' }} />
 			<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 />

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { TextareaCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const TextareaVariants = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<TextareaCases {...props} />
@@ -14,6 +15,6 @@ export const TextareaVariants = forwardRef<HTMLKolTextareaElement, Components.Ko
 				<legend>Text (hideLabel)</legend>
 				<TextareaCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

package/src/components/textarea/resize.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolForm, KolTextarea } from '@public-ui/react';
+import { KolForm, KolTextarea } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -12,11 +12,12 @@ export const TextareaResize: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolForm className="w-full grid gap-4">
-			<KolTextarea _resize="both" _label="Text input (both)" />
-			<KolTextarea _resize="vertical" _label="Text input (vertical)" className="mt" />
-			<KolTextarea _resize="horizontal" _label="Text input (horizontal)" className="mt" />
-			<KolTextarea _resize="none" _label="Text input (none)" className="mt" />
+		<KolForm className="w-full">
+			<div className="flex flex-col gap-4">
+				<KolTextarea _label="Text input (unset)" />
+				<KolTextarea _resize="vertical" _label="Text input (vertical)" />
+				<KolTextarea _resize="none" _label="Text input (none)" />
+			</div>
 		</KolForm>
 	</>
 );

package/src/components/textarea/routes.ts

@@ -1,7 +1,7 @@
 import { Routes } from '../../shares/types';
 import { TextareaAdjustHeight } from './adjust-height';
 import { TextareaBasic } from './basic';
-import { TextareaCounter } from './counter';
+import { TextareaWithCounter } from './with-counter';
 import { TextareaResize } from './resize';
 import { TextareaRows } from './rows';
 
@@ -11,6 +11,6 @@ export const TEXTAREA_ROUTES: Routes = {
 		'adjust-height': TextareaAdjustHeight,
 		resize: TextareaResize,
 		rows: TextareaRows,
-		'with-counter': TextareaCounter,
+		'with-counter': TextareaWithCounter,
 	},
 };

package/src/components/textarea/rows.tsx

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

package/src/components/textarea/with-counter.tsx

@@ -0,0 +1,23 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolTextarea } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+export const TextareaWithCounter: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				The sample demonstrates various <code>KolTextarea</code> configurations — contrasting soft vs. hard <code>_maxLength</code> settings and the optional
+				<code>_hasCounter</code> — including one instance without length limits.
+			</p>
+		</SampleDescription>
+
+		<section className="w-full flex flex-col gap-4">
+			<KolTextarea _label="Textarea with soft max length" _value={'Lorem Ipsum'} className="mt-2" _maxLength={20} _hasCounter _maxLengthBehavior="soft" />
+			<KolTextarea _label="Textarea with max length" _value={'Lorem Ipsum'} className="mt-2" _maxLength={20} />
+			<KolTextarea _label="Textarea with max length and counter" _value={'Lorem Ipsum'} className="mt-2" _maxLength={20} _hasCounter />
+			<KolTextarea _label="Textarea with counter" _value={'Lorem Ipsum'} className="mt-2" _hasCounter />
+		</section>
+	</>
+);

package/src/components/toast/basic.tsx

@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { ToasterService } from '@public-ui/components';
-import { KolButton } from '@public-ui/react';
-import type { AlertType, AlertVariant } from '@public-ui/components';
+import { KolButton } from '@public-ui/react-v19';
+import type { AlertTypePropType } from '@public-ui/components';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
@@ -12,49 +12,28 @@ import type { FC } from 'react';
 
 export const ToastBasic: FC = () => {
 	const [searchParams] = useSearchParams();
-	const defaultType = searchParams.get('type') as AlertType;
-	const defaultVariant = searchParams.get('variant') as AlertVariant;
+	const defaultType = searchParams.get('type') as AlertTypePropType;
 	const toaster = ToasterService.getInstance(document);
 	const handleButtonClickSimple = () => {
 		void toaster.enqueue({
 			description: 'Toasty',
 			label: `Initial Toast`,
 			type: 'warning',
-		});
-	};
-
-	const handleButtonClickVariantMessage = () => {
-		void toaster.enqueue({
-			description: 'Toasty',
-			label: `Toast with variant 'msg'`,
-			type: 'warning',
-			variant: 'msg',
+			onClose: () => {
+				console.log('Simple toast has been closed.');
+			},
 		});
 	};
 
 	useEffect(() => {
-		if (defaultType && defaultVariant) {
+		if (defaultType) {
 			void toaster.enqueue({
 				description: 'Toasty',
-				label: `Toast with variant 'msg'`,
+				label: `Toast with type '${defaultType}'`,
 				type: defaultType,
-				variant: defaultVariant,
-			});
-		} else if (defaultType) {
-			void toaster.enqueue({
-				description: 'Toasty',
-				label: `Initial Toast`,
-				type: defaultType,
-			});
-		} else if (defaultVariant) {
-			void toaster.enqueue({
-				description: 'Toasty',
-				label: `Initial Toast`,
-				type: 'default',
-				variant: defaultVariant,
 			});
 		}
-	}, [defaultType, defaultVariant]);
+	}, [defaultType, toaster]);
 
 	const handleButtonClickComplex = () => {
 		void toaster.enqueue({
@@ -99,19 +78,13 @@ export const ToastBasic: FC = () => {
 			<SampleDescription>
 				<p>This sample demonstrates the toast service with all its options.</p>
 			</SampleDescription>
-
 			<section className="grid gap-4">
-				<section className="flex gap-2">
+				<div className="flex flex-wrap gap-2">
 					<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
-					<KolButton _label="Show toast with alert variant 'msg'" _on={{ onClick: handleButtonClickVariantMessage }}></KolButton>
 					<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
-				</section>
-				<section className="flex gap-2">
 					<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
-				</section>
-				<section className="flex gap-2">
 					<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
-				</section>
+				</div>
 			</section>
 		</>
 	);

package/src/components/toast/configurator.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import type { AlertTypePropType } from '@public-ui/components';
+import { ToasterService } from '@public-ui/components';
+import { KolButton, KolInputRadio } from '@public-ui/react-v19';
+
+import { SampleDescription } from '../SampleDescription';
+
+import type { FC } from 'react';
+
+const toastTypes = ['default', 'info', 'success', 'warning', 'error'] as const;
+const toastTypeOptions = toastTypes.map((type) => ({
+	label: type,
+	value: type,
+}));
+
+const isAlertType = (value: unknown): value is AlertTypePropType => {
+	return typeof value === 'string' && toastTypes.includes(value as AlertTypePropType);
+};
+
+export const ToastConfigurator: FC = () => {
+	const [searchParams] = useSearchParams();
+	const queryType = searchParams.get('type');
+	const defaultType = isAlertType(queryType) ? queryType : undefined;
+	const [selectedType, setSelectedType] = useState<AlertTypePropType>(() => defaultType ?? 'default');
+	const toaster = useMemo<ToasterService>(() => ToasterService.getInstance(document), []);
+
+	useEffect(() => {
+		toastTypes.forEach((type) => {
+			void toaster.enqueue({
+				description: 'Toasty',
+				label: `Toast with type '${type}'`,
+				type,
+			});
+		});
+
+		return () => {
+			toaster.closeAll();
+		};
+	}, [toaster]);
+
+	useEffect(() => {
+		if (defaultType) {
+			setSelectedType(defaultType);
+		}
+	}, [defaultType]);
+
+	const handleTypeChange = (_: Event, value: unknown) => {
+		if (isAlertType(value)) {
+			setSelectedType(value);
+		}
+	};
+
+	const handleConfiguredToast = () => {
+		void toaster.enqueue({
+			description: 'Toasty',
+			label: `Toast with type '${selectedType}'`,
+			type: selectedType,
+		});
+	};
+
+	const closeAll = () => {
+		toaster.closeAll();
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates the toast service with all its options. Use the configuration below to choose a toast type and open a toast with the card
+					variant.
+				</p>
+			</SampleDescription>
+			<section className="grid gap-4">
+				<KolInputRadio _orientation="horizontal" _label="Toast type" _value={selectedType} _options={toastTypeOptions} _on={{ onChange: handleTypeChange }} />
+				<div className="flex flex-wrap gap-2">
+					<KolButton _label={`Open ${selectedType} toast`} _on={{ onClick: handleConfiguredToast }}></KolButton>
+					<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
+				</div>
+			</section>
+		</>
+	);
+};

package/src/components/toast/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { ToastBasic } from './basic';
+import { ToastConfigurator } from './configurator';
 
 export const TOAST_ROUTES: Routes = {
 	toast: {
 		basic: ToastBasic,
+		configurator: ToastConfigurator,
 	},
 };

package/src/components/toolbar/basic.tsx

@@ -1,11 +1,40 @@
 import type { FC } from 'react';
-import React, { useContext } from 'react';
-import { KolBadge, KolToolbar } from '@public-ui/react';
-import { HideMenusContext } from '../../shares/HideMenusContext';
+import React from 'react';
+import { KolHeading, KolToolbar } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarBasic: FC = () => {
-	const hideMenus = useContext(HideMenusContext);
+	const 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: '#/back-page',
+			_label: 'Simple Link 1',
+		},
+		{
+			_href: '#/back-page',
+			_label: 'Simple Link 3',
+		},
+		{
+			_label: 'Bold',
+		},
+	];
 	return (
 		<>
 			<SampleDescription>
@@ -14,43 +43,14 @@ export const ToolbarBasic: FC = () => {
 					features button and link elements.
 				</p>
 			</SampleDescription>
-			{!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: '#/back-page',
-						_label: 'Simple Link 1',
-					},
-					{
-						_href: '#/back-page',
-						_label: 'Simple Link 3',
-					},
-					{
-						_label: 'Bold',
-					},
-				]}
-			/>
+			<div className="flex flex-col gap-4">
+				<KolHeading _label="Orientation horizontal" _level={2} />
+				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} />
+
+				<KolHeading _label="Orientation vertical" _level={2} />
+				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
+			</div>
 		</>
 	);
 };

package/src/components/toolbar/disabled.tsx

@@ -1,17 +1,14 @@
 import type { FC } from 'react';
-import React, { useContext } from 'react';
-import { KolBadge, KolToolbar } from '@public-ui/react';
-import { HideMenusContext } from '../../shares/HideMenusContext';
+import React from 'react';
+import { KolToolbar } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarDisabled: FC = () => {
-	const hideMenus = useContext(HideMenusContext);
 	return (
 		<>
 			<SampleDescription>
 				<p>This sample shows KolToolbars with some of the elements disabled.</p>
 			</SampleDescription>
-			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 
 			<KolToolbar
 				_label="Toolbar"

package/src/components/tree/basic.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { useContext, useState } from 'react';
-import { KolBadge, KolButton, KolTree, KolTreeItem } from '@public-ui/react';
+import { KolButton, KolTree, KolTreeItem } from '@public-ui/react-v19';
 import { getRandomEmoji } from '../../shares/randomEmoji';
 import { useParams } from 'react-router';
 import { HideMenusContext } from '../../shares/HideMenusContext';
@@ -29,11 +29,11 @@ export const TreeBasic: FC = () => {
 			<SampleDescription>
 				<p>KolTree renders a keyboard accessible nested navigation. Branches of the tree can be collapsed or expanded.</p>
 			</SampleDescription>
-			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 
 			<KolTree _label="Sitemap" class="block w-fit">
 				<KolTreeItem _label={homeLabel} {...getItemProps('home')}></KolTreeItem>
 				<KolTreeItem _label="2 About (open initially)" {...getItemProps('about')} _open>
+					<KolTreeItem _label="2.0 Legal" {...getItemProps('legal')}></KolTreeItem>
 					<KolTreeItem _label="2.1 Team" {...getItemProps('team')}>
 						<KolTreeItem _label="2.1.1. Values" {...getItemProps('values')}></KolTreeItem>
 						<KolTreeItem _label="2.1.2. Members" {...getItemProps('members')}>
@@ -65,7 +65,7 @@ export const TreeBasic: FC = () => {
 
 			<p>Current tree item: {subPage ?? 'none'}</p>
 
-			<div className="flex flex-row gap-2">
+			<div className="flex flex-wrap gap-2">
 				<KolButton _label="Change label for '1 Home'" _on={{ onClick: updateHomeLabel }}></KolButton>
 				<KolButton _label="Toggle '2.1.2.2 Pets'" _on={{ onClick: () => setShowPets(!showPets) }}></KolButton>
 				<KolButton _label="Toggle '2.2.1 Europe' (two levels at once)" _on={{ onClick: () => setShowEurope(!showEurope) }}></KolButton>

package/src/components/version/basic.tsx

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

package/src/components/version/context.tsx

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

package/src/main.ts

@@ -1,5 +1,16 @@
 import 'uno.css'; // https://github.com/antfu/unocss
 // App style
 import './style.scss';
+
+/* Optional theme CSS (e.g. font-face declarations) */
+if (process.env.THEME_CSS) {
+	if (process.env.PLATFORM === 'win32') {
+		/* Add leading slash, required for ESBuild on Windows.
+			 Note: process.env.THEME_CSS must be used literally in the import(). Moving it to a constant breaks the import. */
+		process.env.THEME_CSS = `/${process.env.THEME_CSS}`;
+	}
+	import(/* @vite-ignore */ process.env.THEME_CSS);
+}
+
 // App
 import './react.main';