@public-ui/sample-react 2.1.4 → 2.1.5-rc.2

package/src/components/textarea/counter.tsx

@@ -7,14 +7,11 @@ import { SampleDescription } from '../SampleDescription';
 export const TextareaCounter: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier ist ein Beispiel für eine Freitextfeld mit Zeichenzähler.</p>
+			<p>
+				This sample demonstrates the <code>_hasCounter</code>-property of KolTextarea. It shows how many characters have been entered.
+			</p>
 		</SampleDescription>
-		<KolTextarea
-			_hasCounter={true}
-			_label="Textara mit Counter und Hint und Fehler"
-			_msg={{ _type: 'error', _description: 'oh no' }}
-			_hint={'Hinweis'}
-			_touched
-		/>
+
+		<KolTextarea _label="Textara with counter" _hasCounter={true} />
 	</>
 );

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

@@ -12,6 +12,7 @@ export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTe
 			<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 (readonly)" _rows={3} _placeholder="Placeholder" _readOnly />
 			<KolTextarea {...props} ref={ref} _label="Text (disabled & value)" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _disabled />
 		</div>
 	);

package/src/components/textarea/resize.tsx

@@ -4,17 +4,19 @@ import { KolForm, KolTextarea } from '@public-ui/react';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
-//Umrandung im Reactsample wird nicht angepasst bei Anpassung des Textfelds. Bug?.
 export const TextareaResize: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Diese Freitextfelder können in die beschriebenen Richtungen angepasst werden. Die Umrandung ändert sich dabei nicht.</p>
+			<p>
+				This sample demonstrates the <code>_resize</code>-property of KolTextarea. The sample textarea can (only) be resized in the given direction.
+			</p>
 		</SampleDescription>
+
 		<KolForm className="grid gap-4">
-			<KolTextarea _resize="both" _label="Texteingabe (both)" />
-			<KolTextarea _resize="vertical" _label="Texteingabe (vertical)" />
-			<KolTextarea _resize="horizontal" _label="Texteingabe (horizontal)" />
-			<KolTextarea _resize="none" _label="Texteingabe (none)" />
+			<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>
 	</>
 );

package/src/components/textarea/routes.ts

@@ -2,9 +2,6 @@ import { Routes } from '../../shares/types';
 import { TextareaAdjustHeight } from './adjust-height';
 import { TextareaBasic } from './basic';
 import { TextareaCounter } from './counter';
-import { TextareaDisabled } from './disabled';
-import { TextareaPlaceholder } from './placeholder';
-import { TextareaReadOnly } from './readonly';
 import { TextareaResize } from './resize';
 import { TextareaRows } from './rows';
 
@@ -12,9 +9,6 @@ export const TEXTAREA_ROUTES: Routes = {
 	textarea: {
 		basic: TextareaBasic,
 		'adjust-height': TextareaAdjustHeight,
-		disabled: TextareaDisabled,
-		placeholder: TextareaPlaceholder,
-		readonly: TextareaReadOnly,
 		resize: TextareaResize,
 		rows: TextareaRows,
 		'with-counter': TextareaCounter,

package/src/components/textarea/rows.tsx

@@ -8,8 +8,11 @@ import { SampleDescription } from '../SampleDescription';
 export const TextareaRows: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier verstehe ich es nicht. Die Rows sind nicht wie erwartet limitiert.</p>
+			<p>
+				This sample demonstrates the <code>_rows</code>-property of KolTextarea. The sample textarea has a fixed row number of 10.
+			</p>
 		</SampleDescription>
+
 		<KolForm>
 			<KolTextarea _rows={10} _label="Texteingabe" />
 		</KolForm>

package/src/components/toast/basic.tsx

@@ -68,8 +68,9 @@ export const ToastBasic: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>Hier ist ein Beispiel für verschiedene Toasts, die beim anklicken verschiedene Popups generieren. Der untere schließt alle geöffneten Toasts.</p>
+				<p>This sample demonstrates the toast service with all its options.</p>
 			</SampleDescription>
+
 			<div>
 				<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>{' '}
 				<KolButton _label="Show toast with alert variant 'msg'" _on={{ onClick: handleButtonClickVariantMessage }}></KolButton>{' '}

package/src/components/toolbar/basic.tsx

@@ -2,12 +2,20 @@ import type { FC } from 'react';
 import React, { useContext } from 'react';
 import { KolBadge, KolToolbar } from '@public-ui/react';
 import { HideMenusContext } from '../../shares/HideMenusContext';
+import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarBasic: FC = () => {
 	const hideMenus = useContext(HideMenusContext);
 	return (
 		<>
+			<SampleDescription>
+				<p>
+					KolToolbars renders a set of given control elements grouped into one toolbar where focus can be moved using the keyboard arrow keys. The sample
+					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"
@@ -31,11 +39,11 @@ export const ToolbarBasic: FC = () => {
 						},
 					},
 					{
-						_href: '#',
+						_href: '#/back-page',
 						_label: 'Simple Link 1',
 					},
 					{
-						_href: '#',
+						_href: '#/back-page',
 						_label: 'Simple Link 3',
 					},
 					{

package/src/components/toolbar/disabled.tsx

@@ -2,12 +2,17 @@ import type { FC } from 'react';
 import React, { useContext } from 'react';
 import { KolBadge, KolToolbar } from '@public-ui/react';
 import { HideMenusContext } from '../../shares/HideMenusContext';
+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"
 				class="block w-fit"
@@ -32,11 +37,11 @@ export const ToolbarDisabled: FC = () => {
 						},
 					},
 					{
-						_href: '#',
+						_href: '#/back-page',
 						_label: 'Simple Link 1',
 					},
 					{
-						_href: '#',
+						_href: '#/back-page',
 						_disabled: true,
 						_label: 'Simple Link 3',
 					},

package/src/components/tree/basic.tsx

@@ -4,6 +4,7 @@ import { KolBadge, KolButton, KolTree, KolTreeItem } from '@public-ui/react';
 import { getRandomEmoji } from '../../shares/randomEmoji';
 import { useParams } from 'react-router';
 import { HideMenusContext } from '../../shares/HideMenusContext';
+import { SampleDescription } from '../SampleDescription';
 
 export const TreeBasic: FC = () => {
 	const hideMenus = useContext(HideMenusContext);
@@ -25,6 +26,9 @@ export const TreeBasic: FC = () => {
 
 	return (
 		<>
+			<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">

package/src/components/version/basic.tsx

@@ -7,8 +7,9 @@ import { SampleDescription } from '../SampleDescription';
 export const VersionBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier ist die Standarddarstellung der Versionsnummer.</p>
+			<p>KolVersion renders a label showing the given version number.</p>
 		</SampleDescription>
+
 		<KolVersion _label="1.1.1" />
 	</>
 );

package/src/components/version/context.tsx

@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const VersionContext: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier ist die Standardversionsnummer mit Text.</p>
+			<p>This sample shows KolVersion inline with text paragraph content.</p>
 		</SampleDescription>
+
 		<p>
 			<KolVersion _label="1.0.0" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
 			aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem

package/src/react.main.tsx

@@ -50,7 +50,7 @@ void (async () => {
 							detect: 'auto',
 						},
 				translation: {
-					name: 'de',
+					name: 'en',
 				},
 				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
 			},

package/src/scenarios/appointment-form/AppointmentForm.tsx

@@ -2,7 +2,7 @@ import { Formik } from 'formik';
 import React, { useEffect, useState, useRef } from 'react';
 import * as Yup from 'yup';
 
-import { KolTabs } from '@public-ui/react';
+import { KolLink, KolTabs } from '@public-ui/react';
 
 import { checkAppointmentAvailability } from './appointmentService';
 import { AvailableAppointmentsForm } from './AvailableAppointmentsForm';
@@ -12,6 +12,7 @@ import { Summary } from './Summary';
 
 import type { FormikHelpers, FormikProps } from 'formik';
 import type { Iso8601 } from '@public-ui/components';
+import { SampleDescription } from '../../components/SampleDescription';
 // export interface FormProps {}
 export interface FormValues {
 	district: string;
@@ -89,47 +90,57 @@ export function AppointmentForm() {
 	};
 
 	return (
-		<Formik<FormValues> innerRef={formikRef} initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
-			<KolTabs
-				_tabs={[
-					{
-						_label: '1. Einwohnermeldeamt wählen',
-					},
-					{
-						_label: '2. Freie Termine',
-						_disabled: activeFormSection < FormSection.AVAILABLE_APPOINTMENTS,
-					},
-					{
-						_label: '3. Persönliche Daten',
-						_disabled: activeFormSection < FormSection.PERSONAL_INFORMATION,
-					},
-					{
-						_label: 'Zusammenfassung',
-						_disabled: activeFormSection < FormSection.SUMMARY,
-					},
-				]}
-				_label="Formular-Navigation"
-				_selected={selectedTab}
-				_on={{
-					onSelect: (_event, selectedTab) => {
-						setActiveFormSection(selectedTab);
-						formikRef.current?.setErrors({});
-					},
-				}}
-			>
-				<div>
-					<DistrictForm />
-				</div>
-				<div>
-					<AvailableAppointmentsForm />
-				</div>
-				<div>
-					<PersonalInformationForm />
-				</div>
-				<div>
-					<Summary />
-				</div>
-			</KolTabs>
-		</Formik>
+		<>
+			<SampleDescription>
+				<p>
+					The Appointment Form is a full form example featuring a large variety of KoliBri form components,{' '}
+					<KolLink _label="Formik" _href="https://formik.org/" _target="blank" /> and{' '}
+					<KolLink _label="Yup" _href="https://github.com/jquense/yup" _target="blank" />.
+				</p>
+			</SampleDescription>
+
+			<Formik<FormValues> innerRef={formikRef} initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+				<KolTabs
+					_tabs={[
+						{
+							_label: '1. Einwohnermeldeamt wählen',
+						},
+						{
+							_label: '2. Freie Termine',
+							_disabled: activeFormSection < FormSection.AVAILABLE_APPOINTMENTS,
+						},
+						{
+							_label: '3. Persönliche Daten',
+							_disabled: activeFormSection < FormSection.PERSONAL_INFORMATION,
+						},
+						{
+							_label: 'Zusammenfassung',
+							_disabled: activeFormSection < FormSection.SUMMARY,
+						},
+					]}
+					_label="Formular-Navigation"
+					_selected={selectedTab}
+					_on={{
+						onSelect: (_event, selectedTab) => {
+							setActiveFormSection(selectedTab);
+							formikRef.current?.setErrors({});
+						},
+					}}
+				>
+					<div>
+						<DistrictForm />
+					</div>
+					<div>
+						<AvailableAppointmentsForm />
+					</div>
+					<div>
+						<PersonalInformationForm />
+					</div>
+					<div>
+						<Summary />
+					</div>
+				</KolTabs>
+			</Formik>
+		</>
 	);
 }

package/src/scenarios/custom-tooltip-width.tsx

@@ -2,7 +2,17 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolButton } from '@public-ui/react';
+import { SampleDescription } from '../components/SampleDescription';
 
 export const CustomTooltipWidth: FC = () => (
-	<KolButton _label="Tooltip mit fixer Breite" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="codicon codicon-reactions"></KolButton>
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates how a tooltip&apos;s width can be adjusted by defining the CSS custom property <code>--kol-tooltip-width</code> on one of the
+				parent elements.
+			</p>
+		</SampleDescription>
+
+		<KolButton _label="Tooltip with fixed width" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="codicon codicon-reactions"></KolButton>
+	</>
 );

package/src/scenarios/disabled-interactive-elements.tsx

@@ -49,6 +49,7 @@ export const DisabledInteractiveElements: FC = () => (
 			</ul>
 			<p>This implementation ensures standardized use for all users.</p>
 		</SampleDescription>
+
 		<div className="grid gap-4">
 			<KolCard _label="Button" _level={0}>
 				<div className="flex flex-wrap gap-4">

package/src/scenarios/focus-elements.tsx

@@ -23,6 +23,7 @@ import type { FC, ForwardRefRenderFunction } from 'react';
 import { useMemo } from 'react';
 import React, { forwardRef, useLayoutEffect, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { SampleDescription } from '../components/SampleDescription';
 import type { FocusableElement } from '@public-ui/components';
 
 const getFocusElements = () => {
@@ -96,7 +97,14 @@ const Fallback = (props: FallbackProps) => {
 	const componentNames = [...focusElements.keys()].map((key) => key);
 
 	return (
-		<div>
+		<>
+			<SampleDescription>
+				<p>
+					This sample serves for automated tests of the focus state for input components. When loading one of the examples linked below, focus will be set on
+					the element initially. When testing manually, you may have to reload the page after opening an example.
+				</p>
+			</SampleDescription>
+
 			{props.invalidComponent && (
 				<KolAlert _type="error" _variant="card">
 					Component not found.
@@ -111,7 +119,7 @@ const Fallback = (props: FallbackProps) => {
 					</li>
 				))}
 			</ul>
-		</div>
+		</>
 	);
 };
 

package/src/scenarios/inputs-get-value.tsx

@@ -93,7 +93,7 @@ export const InputsGetValue: FC = () => {
 				<EventLoggerActiveContext.Provider value={eventLoggerActive}>
 					<SampleDescription>
 						<p>
-							This sample show how the input components <code>getValue()</code> method works. It&apos;s called when clicking the &quot;getValue()&quot; button
+							This sample shows how the input components <code>getValue()</code> method works. It&apos;s called when clicking the &quot;getValue()&quot; button
 							and prints the current value right next to itself.
 						</p>
 					</SampleDescription>

package/src/scenarios/static-form.tsx

@@ -25,7 +25,7 @@ export const StaticForm: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows how you can use KoliBri in static form context, too.</p>
+				<p>This sample shows how KoliBri can be used in a static form context.</p>
 				<ol>
 					<li>
 						First you have to enable the <code>experimental mode</code>:{' '}

package/dist/3454.js

@@ -1,2 +0,0 @@
-/*! For license information please see 3454.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3454],{3454:(n,e,t)=>{t.r(e),t.d(e,{kol_span:()=>a});var i=t(6509),o=t(2781);const a=class{constructor(n){(0,i.r)(this,n),this._accessKey=void 0,this._hideLabel=!1,this._icons=void 0,this._label=void 0}render(){return(0,i.h)(o.f,{key:"8fb014c28ff509a829798007f239eff09badb7fa",_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_accessKey:this._accessKey,class:"kol-span"},(0,i.h)("slot",{key:"8ac9ed04dcf44846dbb8624687746c1ac34708a5",name:"expert",slot:"expert"}))}};a.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}}}]);

package/dist/5168.js.LICENSE.txt

@@ -1,3 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */

package/src/components/accordion/list.tsx

@@ -1,45 +0,0 @@
-import type { FC } from 'react';
-import React from 'react';
-
-import { KolAccordion } from '@public-ui/react';
-import { SampleDescription } from '../SampleDescription';
-
-const LIST = [
-	{
-		heading: 'Überschrift Accordion Tab 1',
-		content: 'Inhalt Accordion Tab 1',
-	},
-	{
-		heading: 'Überschrift Accordion Tab 2',
-		content: 'Inhalt Accordion Tab 2',
-	},
-	{
-		heading: 'Überschrift Accordion Tab 3',
-		content: 'Inhalt Accordion Tab 3',
-	},
-	{
-		heading: 'Überschrift Accordion Tab 4',
-		content: 'Inhalt Accordion Tab 4',
-	},
-	{
-		heading: 'Überschrift Accordion Tab 5',
-		content: 'Inhalt Accordion Tab 5',
-	},
-	{
-		heading: 'Überschrift Accordion Tab 6',
-		content: 'Inhalt Accordion Tab 6',
-	},
-];
-
-export const AccordionList: FC = () => (
-	<>
-		<SampleDescription>
-			<p>Beim klicken mit der Maus auf die einzelnen Überschriften, soll der Inhalt darunter aufgeklappt und beim erneuten klicken wieder zugeklappt werden.</p>
-		</SampleDescription>
-		{LIST.map(({ heading, content }, index) => (
-			<KolAccordion _label={heading} _level={1} _open={index === 1} key={index}>
-				<p>{content}</p>
-			</KolAccordion>
-		))}
-	</>
-);

package/src/components/button/hide-label.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { KolButton } from '@public-ui/react';
-
-import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
-
-const ARGS = {
-	_icons: 'codicon codicon-home',
-	_hideLabel: true,
-	_on: {
-		onClick: () => alert('Klick!'),
-	},
-};
-
-export const ButtonIconOnly: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				Hier sind Buttons aktiviert und deaktiviert. Sie beinhalten kein Label. Das Label wird beim anklicken oder als Tooltip angezeigt. Beim anklicken wird
-				ein alert als Popup ausgeführt.
-			</p>
-		</SampleDescription>
-		<div className="grid gap-14">
-			<div className="flex flex-wrap gap-14">
-				<KolButton _label="Primary" _variant="primary" _tooltipAlign="top" {...ARGS}></KolButton>
-				<KolButton _label="Secondary" _variant="secondary" _tooltipAlign="right" {...ARGS}></KolButton>
-				<KolButton _label="Normal" _variant="normal" _tooltipAlign="bottom" {...ARGS}></KolButton>
-				<KolButton _label="Danger" _variant="danger" _tooltipAlign="left" {...ARGS}></KolButton>
-				<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
-			</div>
-			<div className="flex flex-wrap gap-14">
-				<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
-				<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
-				<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>
-				<KolButton _disabled _label="Danger" _variant="danger" {...ARGS}></KolButton>
-				<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
-			</div>
-		</div>
-	</>
-);

package/src/components/card/confirm.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { KolButton, KolCard } from '@public-ui/react';
-
-import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
-
-export const CardConfirm: FC = () => (
-	<>
-		<SampleDescription>
-			<p>Hier wird eine Karte mit Beispieltext und zwei Knöpfen &apos;Speichern&apos; und &apos;Abbrechen&apos;.</p>
-		</SampleDescription>
-		<KolCard _has-footer _label="Überschrift">
-			<div>
-				<p className="p-2">
-					Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta pariatur laudantium saepe ipsa atque officia cupiditate repudiandae harum earum aut
-					doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
-					perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi molestias voluptas
-					reiciendis.
-				</p>
-				<div className="flex gap-2 flex-justify-end">
-					<KolButton className="w-12rem" _variant="primary" _label="Speichern"></KolButton>
-					<KolButton className="w-12rem" _variant="secondary" _label="Abbrechen"></KolButton>
-				</div>
-			</div>
-		</KolCard>
-	</>
-);

package/src/components/card/flex.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-
-import { KolCard } from '@public-ui/react';
-
-import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
-
-export const CardFlex: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				Hier werden mehrere Karten mit unterschiedlichen Inhalten angezeigt. Beim anklicken des &apos;x&apos; wird ein Label mit &apos;Schließen&apos;
-				angezeigt.
-			</p>
-		</SampleDescription>
-		<div className="grid grid-cols-2 gap-4">
-			<KolCard _label="Titel">
-				<div>Inhalt</div>
-			</KolCard>
-			<KolCard _label="Titel" _hasCloser>
-				<div>
-					Inhalt
-					<br />
-					Inhalt
-				</div>
-			</KolCard>
-			<KolCard _label="Titel">
-				<div>
-					Inhalt
-					<br />
-					Inhalt
-					<br />
-					Inhalt
-				</div>
-			</KolCard>
-			<KolCard _label="Titel">
-				<div>Inhalt</div>
-			</KolCard>
-			<KolCard _label="Titel">
-				<div>Inhalt</div>
-			</KolCard>
-		</div>
-	</>
-);