@public-ui/sample-react 2.0.4-rc.0 → 2.0.5

package/src/components/card/flex.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolCard } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const CardFlex: FC = () => (
 	<div className="grid grid-cols-2 gap-4">

package/src/components/card/routes.ts

@@ -1,11 +1,7 @@
 import { Routes } from '../../shares/types';
-
 import { CardBasic } from './basic';
-
 import { CardConfirm } from './confirm';
-
 import { CardFlex } from './flex';
-
 import { CardSelection } from './selection';
 
 export const CARD_ROUTES: Routes = {

package/src/components/card/selection.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolButton, KolCard, KolInputCheckbox } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 const STYLE = {
 	display: 'flex',

package/src/components/details/basic.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolDetails } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const DetailsBasic: FC = () => (
 	<p className="grid gap-4">
@@ -10,6 +11,11 @@ export const DetailsBasic: FC = () => (
 			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
 		</KolDetails>
+		<KolDetails _disabled _label="Nach Laden der Seite geöffnet (deaktiviert)" _open>
+			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 ipsum dolor sit amet.
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+		</KolDetails>
 		<KolDetails _label="Nach Laden der Seite geöffnet" _open>
 			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 ipsum dolor sit amet.

package/src/components/details/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { DetailsBasic } from './basic';
 
 export const DETAILS_ROUTES: Routes = {

package/src/components/handout/basic.tsx

@@ -1,4 +1,7 @@
-import { Bundesanstalt, KoliBriTableHeaders } from '@public-ui/components';
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import React from 'react';
+
+import { Bundesanstalt } from '@public-ui/components';
 import {
 	KolAbbr,
 	KolAccordion,
@@ -32,9 +35,10 @@ import {
 	KolTextarea,
 	KolVersion,
 } from '@public-ui/react';
-import React, { FC } from 'react';
+
 import { getTheme, getThemeName } from '../../shares/store';
 
+import type { FC } from 'react';
 const TABLE_HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
@@ -815,29 +819,29 @@ export const HandoutBasic: FC = () => (
 						</div>
 						<div className="grid gap-2 py-2">
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolLinkButton _href="#" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-								<KolLinkButton _href="#" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolLinkButton _href="#" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-								<KolLinkButton _href="#" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolLinkButton _href="#" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-								<KolLinkButton _href="#" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolLinkButton _href="#" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-								<KolLinkButton _href="#" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolLinkButton _href="#" _label="ghost" _variant="ghost"></KolLinkButton>
-								<KolLinkButton _href="#" _label="ghost" _variant="ghost"></KolLinkButton>
-								<KolLinkButton _href="#" _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _label="ghost" _variant="ghost"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _label="ghost" _variant="ghost"></KolLinkButton>
+								<KolLinkButton _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
 							</div>
 						</div>
 					</KolTabs>
@@ -847,14 +851,14 @@ export const HandoutBasic: FC = () => (
 				<div slot="" className="grid gap-2 p-2">
 					<KolAccordion _label="Links" _level={3} _open>
 						<div className="grid gap-2" slot="">
-							<KolLink _href="#" _label="Linktext"></KolLink>
-							<KolLink _href="#" _icons="codicon codicon-home" _label="Linktext mit Icon"></KolLink>
-							<KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolLink>
+							<KolLink _href="#/back-page" _label="Linktext"></KolLink>
+							<KolLink _href="#/back-page" _icons="codicon codicon-home" _label="Linktext mit Icon"></KolLink>
+							<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolLink>
 							<KolLink _href="/" _label="Besuchter Link"></KolLink>
 							<p>
-								Ich bin ein <KolLink _href="#" _label="externer Link" _target="w3c"></KolLink> im Fließtext.
+								Ich bin ein <KolLink _href="#/back-page" _label="externer Link" _target="w3c"></KolLink> im Fließtext.
 							</p>
-							<KolLink _href="#" _label="">
+							<KolLink _href="#/back-page" _label="">
 								<KolLogo slot="expert" class="inline-flex w-50" _org={Bundesanstalt['Informationstechnikzentrum Bund']} />
 							</KolLink>
 						</div>
@@ -909,47 +913,47 @@ export const HandoutBasic: FC = () => (
 								{
 									_label: 'Homepage',
 									_icons: 'codicon codicon-home',
-									_href: '#/',
+									_href: '#/back-page',
 								},
 								{
 									_label: '2 Navigation point',
 									_icons: 'codicon codicon-home',
-									_href: '#/untermenu',
+									_href: '#/back-page',
 								},
 								{
 									_active: true,
 									_label: '3 Navigation point',
-									_href: '#abc',
+									_href: '#/back-page',
 									_icons: 'codicon codicon-home',
 									_children: [
 										{
 											_label: '3.1 Navigation point',
 											_icons: 'codicon codicon-home',
-											_href: '#/',
+											_href: '#/back-page',
 										},
 										{
 											_label: '3.2 External navigation point',
 											_icons: 'codicon codicon-home',
-											_href: '#abc',
+											_href: '#/back-page',
 											_target: '_blank',
 										},
 										{
 											_label: '3.3 Navigation point',
-											_href: '#abc',
+											_href: '#/back-page',
 											_icons: 'codicon codicon-home',
 											_children: [
 												{
 													_active: true,
 													_label: '3.3.1 Navigation point (active)',
 													_icons: 'codicon codicon-home',
-													_href: '#abc',
+													_href: '#/back-page',
 												},
-												{ _label: '3.3.2 Navigation point', _icons: 'codicon codicon-home', _href: '#abc' },
+												{ _label: '3.3.2 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },
 											],
 										},
 									],
 								},
-								{ _label: '3 Navigation point', _icons: 'codicon codicon-home', _href: '#abc' },
+								{ _label: '3 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },
 							]}
 							_hasCompactButton
 						/>
@@ -960,11 +964,11 @@ export const HandoutBasic: FC = () => (
 						<KolBreadcrumb
 							_label="Breadcrumb aus Text-Links"
 							_links={[
-								{ _label: 'Startseite', _href: '#/' },
-								{ _label: 'Unterseite der Startseite', _href: '#/unterseite' },
+								{ _label: 'Startseite', _href: '#/back-page' },
+								{ _label: 'Unterseite der Startseite', _href: '#/back-page' },
 								{
 									_label: 'Unterseite der Unterseite',
-									_href: '#/unterseite/unterseite',
+									_href: '#/back-page',
 								},
 							]}
 						></KolBreadcrumb>

package/src/components/handout/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { HandoutBasic } from './basic';
 
 export const HANDOUT_ROUTES: Routes = {

package/src/components/heading/badged.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolBadge, KolHeading } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const HeadingBadged: FC = () => (
 	<div className="grid gap-4">

package/src/components/heading/basic.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolHeading } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const HeadingBasic: FC = () => (
 	<div className="grid gap-4">

package/src/components/heading/paragraph.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolHeading } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const HeadingParagraph: FC = () => (
 	<div className="grid gap-4">

package/src/components/heading/routes.ts

@@ -1,9 +1,6 @@
 import { Routes } from '../../shares/types';
-
 import { HeadingBadged } from './badged';
-
 import { HeadingBasic } from './basic';
-
 import { HeadingParagraph } from './paragraph';
 
 export const HEADING_ROUTES: Routes = {

package/src/components/icon/basic.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolIcon } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const IconBasic: FC = () => (
 	<div className="grid gap-4">

package/src/components/icon/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { IconBasic } from './basic';
 
 export const ICON_ROUTES: Routes = {

package/src/components/image/basic.tsx

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { KolImage } from '@public-ui/react';
+import type { FC } from 'react';
 import React from 'react';
 
+import { KolImage } from '@public-ui/react';
+
 export const ImageBasic: FC = () => <KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />;

package/src/components/image/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { ImageBasic } from './basic';
 
 export const IMAGE_ROUTES: Routes = {

package/src/components/indented-text/basic.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolIndentedText } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const IndentedTextBasic: FC = () => (
 	<div className="grid gap-4">

package/src/components/indented-text/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { IndentedTextBasic } from './basic';
 
 export const INDENTED_ROUTES: Routes = {

package/src/components/input-checkbox/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { InputCheckboxVariants } from './partials/variants';
 

package/src/components/input-checkbox/button.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { InputCheckboxVariants } from './partials/variants';
 

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

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 
 import { KolInputCheckbox } from '@public-ui/react';
 
-import { Components } from '@public-ui/components';
 import { ERROR_MSG } from '../../../shares/constants';
 
+import type { Components } from '@public-ui/components';
 export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxCases(props, ref) {
 	return (
 		<div className="grid gap-4">

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

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { InputCheckboxCases } from './cases';
 
+import type { Components } from '@public-ui/components';
 export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">

package/src/components/input-checkbox/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { InputCheckboxBasic } from './basic';
 import { InputCheckboxButton } from './button';
 import { InputCheckboxSwitch } from './switch';

package/src/components/input-checkbox/switch.tsx

@@ -1,5 +1,7 @@
-import React, { FC } from 'react';
-import { InputCheckboxVariants } from './partials/variants';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
+import { InputCheckboxVariants } from './partials/variants';
 
 export const InputCheckboxSwitch: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />;

package/src/components/input-color/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { InputColorVariants } from './partials/variants';
 

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

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 
 import { KolInputColor } from '@public-ui/react';
 
-import { Components } from '@public-ui/components';
 import { ERROR_MSG } from '../../../shares/constants';
 
+import type { Components } from '@public-ui/components';
 export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.KolInputColor>(function InputColorCases(props, ref) {
 	return (
 		<div className="grid gap-4">

package/src/components/input-color/partials/variants.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { InputColorCases } from './cases';
 
+import type { Components } from '@public-ui/components';
 export const InputColorVariants = forwardRef<HTMLKolInputColorElement, Components.KolInputColor>(function InputColorVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">

package/src/components/input-color/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { InputColorBasic } from './basic';
 
 export const INPUT_COLOR_ROUTES: Routes = {

package/src/components/input-date/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { InputDateVariants } from './partials/variants';
 

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

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 
 import { KolInputDate } from '@public-ui/react';
 
-import { Components } from '@public-ui/components';
 import { ERROR_MSG } from '../../../shares/constants';
 
+import type { Components } from '@public-ui/components';
 export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props, ref) {
 	return (
 		<div className="grid gap-4">

package/src/components/input-date/partials/variants.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { InputDateCases } from './cases';
 
+import type { Components } from '@public-ui/components';
 export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">

package/src/components/input-date/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { InputDateBasic } from './basic';
 
 export const INPUT_DATE_ROUTES: Routes = {

package/src/components/input-email/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { InputEmailVariants } from './partials/variants';
 

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

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 
 import { KolInputEmail } from '@public-ui/react';
 
-import { Components } from '@public-ui/components';
 import { ERROR_MSG } from '../../../shares/constants';
 
+import type { Components } from '@public-ui/components';
 export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailCases(props, ref) {
 	return (
 		<div className="grid gap-4">

package/src/components/input-email/partials/variants.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { InputEmailCases } from './cases';
 
+import type { Components } from '@public-ui/components';
 export const InputEmailVariants = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">

package/src/components/input-email/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { InputEmailBasic } from './basic';
 
 export const INPUT_EMAIL_ROUTES: Routes = {

package/src/components/input-file/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { InputFileVariants } from './partials/variants';
 

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

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 
 import { KolInputFile } from '@public-ui/react';
 
-import { Components } from '@public-ui/components';
 import { ERROR_MSG } from '../../../shares/constants';
 
+import type { Components } from '@public-ui/components';
 export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileCases(props, ref) {
 	return (
 		<div className="grid gap-4">

package/src/components/input-file/partials/variants.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { InputFileCases } from './cases';
 
+import type { Components } from '@public-ui/components';
 export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">

package/src/components/input-file/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { InputFileBasic } from './basic';
 
 export const INPUT_FILE_ROUTES: Routes = {

package/src/components/input-number/basic.tsx

@@ -1,5 +1,20 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
+import { SampleDescription } from '../SampleDescription';
 import { InputNumberVariants } from './partials/variants';
 
-export const InputNumberBasic: FC = () => <FormWrap RefComponent={InputNumberVariants} />;
+export const InputNumberBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				The <code>{'kol-input-number'}</code>-component encompasses basic functionalities, utilizing the min, max, and step attributes to restrict the range of
+				input values. Despite these constraints, it allows free input that can ignore the defined minimum and maximum values, as well as step sizes. The
+				component intentionally does not emphasize validation rules, supporting examples without form validation, and refrains from additional validation
+				through native HTML element validation.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputNumberVariants} />
+	</>
+);

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

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 
 import { KolInputNumber } from '@public-ui/react';
 
-import { Components } from '@public-ui/components';
 import { ERROR_MSG } from '../../../shares/constants';
 
+import type { Components } from '@public-ui/components';
 export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components.KolInputNumber>(function InputNumberCases(props, ref) {
 	return (
 		<div className="grid gap-4">

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

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { InputNumberCases } from './cases';
 
+import type { Components } from '@public-ui/components';
 export const InputNumberVariants = forwardRef<HTMLKolInputNumberElement, Components.KolInputNumber>(function InputNumberVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">

package/src/components/input-number/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { InputNumberBasic } from './basic';
 
 export const INPUT_NUMBER_ROUTES: Routes = {

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

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { InputPasswordVariants } from './partials/variants';
 

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

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 
 import { KolInputPassword } from '@public-ui/react';
 
-import { Components } from '@public-ui/components';
 import { ERROR_MSG } from '../../../shares/constants';
 
+import type { Components } from '@public-ui/components';
 export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordCases(props, ref) {
 	return (
 		<div className="grid gap-4">