@public-ui/sample-react 4.3.1-rc.0 → 4.3.1-rc.4

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

@@ -2,7 +2,14 @@ import type { Components } from '@public-ui/components';
 import { KolInputDate } from '@public-ui/react-v19';
 import React from 'react';
 
-export const InputDateMinMaxCases = (props: Components.KolInputDate) => {
+import { SampleBlock } from '../../SampleBlock';
+
+type InputDateMinMaxCasesProps = Components.KolInputDate & {
+	/** Prefixes the visual block ids so the same cases can be rendered more than once per route. */
+	blockIdPrefix: string;
+};
+
+export const InputDateMinMaxCases = ({ blockIdPrefix, ...props }: InputDateMinMaxCasesProps) => {
 	const minDateIso = '2024-09-26';
 	const maxDateIso = '2024-09-27';
 
@@ -22,20 +29,40 @@ export const InputDateMinMaxCases = (props: Components.KolInputDate) => {
 	const maxDate = new Date('October 20, 2024, 15:00');
 	return (
 		<div className="grid gap-4">
-			<KolInputDate {...props} _type="date" _label="Date with Iso" _min={minDateIso} _max={maxDateIso} />
-			<KolInputDate {...props} _type="date" _label="Date with Date" _min={minDate} _max={maxDate} />
+			<SampleBlock id={`${blockIdPrefix}-date-iso`}>
+				<KolInputDate {...props} _type="date" _label="Date with Iso" _min={minDateIso} _max={maxDateIso} />
+			</SampleBlock>
+			<SampleBlock id={`${blockIdPrefix}-date-object`}>
+				<KolInputDate {...props} _type="date" _label="Date with Date" _min={minDate} _max={maxDate} />
+			</SampleBlock>
 
-			<KolInputDate {...props} _type="time" _label="Time with Iso" _min={minTimeIso} _max={maxTimeIso} />
-			<KolInputDate {...props} _type="time" _label="Time with Date" _min={minDate} _max={maxDate} />
+			<SampleBlock id={`${blockIdPrefix}-time-iso`}>
+				<KolInputDate {...props} _type="time" _label="Time with Iso" _min={minTimeIso} _max={maxTimeIso} />
+			</SampleBlock>
+			<SampleBlock id={`${blockIdPrefix}-time-object`}>
+				<KolInputDate {...props} _type="time" _label="Time with Date" _min={minDate} _max={maxDate} />
+			</SampleBlock>
 
-			<KolInputDate {...props} _type="datetime-local" _label="DayTime with Iso" _min={minDayTimeIso} _max={maxDaytimeIso} />
-			<KolInputDate {...props} _type="datetime-local" _label="DayTime with Date" _min={minDate} _max={maxDate} />
+			<SampleBlock id={`${blockIdPrefix}-datetime-iso`}>
+				<KolInputDate {...props} _type="datetime-local" _label="DayTime with Iso" _min={minDayTimeIso} _max={maxDaytimeIso} />
+			</SampleBlock>
+			<SampleBlock id={`${blockIdPrefix}-datetime-object`}>
+				<KolInputDate {...props} _type="datetime-local" _label="DayTime with Date" _min={minDate} _max={maxDate} />
+			</SampleBlock>
 
-			<KolInputDate {...props} _type="week" _label="Week with Iso" _min={minWeekIso} _max={maxWeekIso} />
-			<KolInputDate {...props} _type="week" _label="Week with Date" _min={minDate} _max={maxDate} />
+			<SampleBlock id={`${blockIdPrefix}-week-iso`}>
+				<KolInputDate {...props} _type="week" _label="Week with Iso" _min={minWeekIso} _max={maxWeekIso} />
+			</SampleBlock>
+			<SampleBlock id={`${blockIdPrefix}-week-object`}>
+				<KolInputDate {...props} _type="week" _label="Week with Date" _min={minDate} _max={maxDate} />
+			</SampleBlock>
 
-			<KolInputDate {...props} _type="month" _label="Month with Iso" _min={minMonthIso} _max={maxMonthIso} />
-			<KolInputDate {...props} _type="month" _label="Month with Date" _min={minDate} _max={maxDate} />
+			<SampleBlock id={`${blockIdPrefix}-month-iso`}>
+				<KolInputDate {...props} _type="month" _label="Month with Iso" _min={minMonthIso} _max={maxMonthIso} />
+			</SampleBlock>
+			<SampleBlock id={`${blockIdPrefix}-month-object`}>
+				<KolInputDate {...props} _type="month" _label="Month with Date" _min={minDate} _max={maxDate} />
+			</SampleBlock>
 		</div>
 	);
 };

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

@@ -4,22 +4,20 @@ import { InputDateCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { SampleGroup } from '../../SampleGroup';
 import { InputDateMinMaxCases } from './minMax';
 export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateVariant(props, ref) {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>Date</legend>
-				<InputDateCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Date (hideLabel)</legend>
-				<InputDateCases ref={ref} {...props} _hideLabel />
-			</fieldset>
-			<fieldset>
-				<legend>Date (with min/max)</legend>
-				<InputDateMinMaxCases {...props} />
-			</fieldset>
+			<SampleGroup heading="Date">
+				<InputDateCases blockIdPrefix="label" {...props} />
+			</SampleGroup>
+			<SampleGroup heading="Date (hideLabel)">
+				<InputDateCases blockIdPrefix="hide-label" snapshotOnly="datetime-seconds" ref={ref} {...props} _hideLabel />
+			</SampleGroup>
+			<SampleGroup heading="Date (with min/max)">
+				<InputDateMinMaxCases blockIdPrefix="min-max" {...props} />
+			</SampleGroup>
 		</SampleColumns>
 	);
 });

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

@@ -3,40 +3,79 @@ import { KolInputEmail } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
+import { SampleBlock } from '../../SampleBlock';
 
-export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailCases(props, ref) {
+type InputEmailCasesProps = Components.KolInputEmail & {
+	/** Prefixes the visual block ids so the same cases can be rendered more than once per route. */
+	blockIdPrefix: string;
+	/**
+	 * Restricts the snapshots of this rendering to the case with this id; every other block is
+	 * rendered with `skipSnapshot`. Used for the `_hideLabel` groups: hiding the label mainly
+	 * changes how the message is laid out, so snapshotting every case a second time would only
+	 * duplicate the labelled group.
+	 */
+	snapshotOnly?: string;
+};
+
+export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, InputEmailCasesProps>(function InputEmailCases(
+	{ blockIdPrefix, snapshotOnly, ...props },
+	ref,
+) {
+	// Blocks outside `snapshotOnly` stay visible in the sample but are excluded from the snapshots.
+	const block = (caseId: string) => ({ id: `${blockIdPrefix}-${caseId}`, skipSnapshot: snapshotOnly !== undefined && caseId !== snapshotOnly });
 	return (
 		<div className="grid gap-4">
-			<div className="black-background">
+			<SampleBlock {...block('black-bg')} className="black-background">
 				<KolInputEmail {...props} _required _value="test@mail.de" _msg={{ _type: 'error', _description: ERROR_MSG }} _label="E-Mail (Black background test)" />
-			</div>
-			<KolInputEmail
-				{...props}
-				ref={ref}
-				_accessKey="M"
-				_placeholder="elke@mustermann.de"
-				_suggestions="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
-				_label="E-Mail (list)"
-				_hint={HINT_MSG}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_touched
-				_icons={{
-					left: {
-						icon: 'kolicon-chevron-left',
-					},
-					right: {
-						icon: 'kolicon-chevron-right',
-					},
-				}}
-			/>
-			<KolInputEmail {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="E-Mail" _touched />
-			<KolInputEmail {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="E-Mail" _touched />
-			<KolInputEmail {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="E-Mail" _touched />
-			<KolInputEmail {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="E-Mail" _touched />
-			<KolInputEmail {...props} _disabled _value="test@mail.de" _label="E-Mail (Disabled)" />
-			<KolInputEmail {...props} _readOnly _value="test@mail.de" _label="E-Mail (Readonly)" />
-			<KolInputEmail {...props} _value="test@mail.de" _label="With access key" _accessKey="c" />
-			<KolInputEmail {...props} _value="test@mail.de" _label="With short key" _shortKey="s" />
+			</SampleBlock>
+			<SampleBlock {...block('suggestions')}>
+				<KolInputEmail
+					{...props}
+					ref={ref}
+					_accessKey="M"
+					_placeholder="elke@mustermann.de"
+					_suggestions="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
+					_label="E-Mail (list)"
+					_hint={HINT_MSG}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_touched
+					_icons={{
+						left: {
+							icon: 'kolicon-chevron-left',
+						},
+						right: {
+							icon: 'kolicon-chevron-right',
+						},
+					}}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('info-popover')}>
+				<KolInputEmail {...props} _required _label="E-Mail" _infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }} />
+			</SampleBlock>
+			<SampleBlock {...block('msg-info')}>
+				<KolInputEmail {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="E-Mail" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-warning')}>
+				<KolInputEmail {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="E-Mail" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-success')}>
+				<KolInputEmail {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="E-Mail" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-default')}>
+				<KolInputEmail {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="E-Mail" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('disabled')}>
+				<KolInputEmail {...props} _disabled _value="test@mail.de" _label="E-Mail (Disabled)" />
+			</SampleBlock>
+			<SampleBlock {...block('readonly')}>
+				<KolInputEmail {...props} _readOnly _value="test@mail.de" _label="E-Mail (Readonly)" />
+			</SampleBlock>
+			<SampleBlock {...block('access-key')}>
+				<KolInputEmail {...props} _value="test@mail.de" _label="With access key" _accessKey="c" />
+			</SampleBlock>
+			<SampleBlock {...block('short-key')}>
+				<KolInputEmail {...props} _value="test@mail.de" _label="With short key" _shortKey="s" />
+			</SampleBlock>
 		</div>
 	);
 });

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

@@ -4,17 +4,16 @@ import { InputEmailCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { SampleGroup } from '../../SampleGroup';
 export const InputEmailVariants = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailVariant(props, ref) {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>Email</legend>
-				<InputEmailCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Email (hideLabel)</legend>
-				<InputEmailCases ref={ref} {...props} _hideLabel />
-			</fieldset>
+			<SampleGroup heading="Email">
+				<InputEmailCases blockIdPrefix="label" {...props} />
+			</SampleGroup>
+			<SampleGroup heading="Email (hideLabel)">
+				<InputEmailCases blockIdPrefix="hide-label" snapshotOnly="suggestions" ref={ref} {...props} _hideLabel />
+			</SampleGroup>
 		</SampleColumns>
 	);
 });

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

@@ -3,6 +3,7 @@ import { KolInputFile } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
+import { SampleBlock } from '../../SampleBlock';
 
 const handleOn = {
 	onClick: () => console.log('click'),
@@ -10,10 +11,24 @@ const handleOn = {
 	onInput: (event: Event, files: unknown) => console.log('onInput', event, files),
 };
 
-export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileCases(props, ref) {
+type InputFileCasesProps = Components.KolInputFile & {
+	/** Prefixes the visual block ids so the same cases can be rendered more than once per route. */
+	blockIdPrefix: string;
+	/**
+	 * Restricts the snapshots of this rendering to the case with this id; every other block is
+	 * rendered with `skipSnapshot`. Used for the `_hideLabel` groups: hiding the label mainly
+	 * changes how the message is laid out, so snapshotting every case a second time would only
+	 * duplicate the labelled group.
+	 */
+	snapshotOnly?: string;
+};
+
+export const InputFileCases = forwardRef<HTMLKolInputFileElement, InputFileCasesProps>(function InputFileCases({ blockIdPrefix, snapshotOnly, ...props }, ref) {
+	// Blocks outside `snapshotOnly` stay visible in the sample but are excluded from the snapshots.
+	const block = (caseId: string) => ({ id: `${blockIdPrefix}-${caseId}`, skipSnapshot: snapshotOnly !== undefined && caseId !== snapshotOnly });
 	return (
 		<div className="grid gap-4">
-			<div className="black-background">
+			<SampleBlock {...block('black-bg')} className="black-background">
 				<KolInputFile
 					{...props}
 					_label="Upload file (Black background test)"
@@ -25,28 +40,47 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 					_touched
 					_on={handleOn}
 				/>
-			</div>
-			<KolInputFile
-				{...props}
-				_required
-				_hint={HINT_MSG}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_label="Upload file (Error State)"
-				_icons={{
-					left: {
-						icon: 'kolicon-up',
-					},
-				}}
-				_touched
-			/>
-			<KolInputFile {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Upload file" _touched />
-			<KolInputFile {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Upload file" _touched />
-			<KolInputFile {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Upload file" _touched />
-			<KolInputFile {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Upload file" _touched />
-			<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Upload file (Multiple)" />
-			<KolInputFile {...props} _disabled _label="Upload file (Disabled)" />
-			<KolInputFile {...props} _label="With access key" _accessKey="c" />
-			<KolInputFile {...props} _label="With short key" _shortKey="s" />
+			</SampleBlock>
+			<SampleBlock {...block('error')}>
+				<KolInputFile
+					{...props}
+					_required
+					_hint={HINT_MSG}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_label="Upload file (Error State)"
+					_icons={{
+						left: {
+							icon: 'kolicon-up',
+						},
+					}}
+					_touched
+					_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('msg-info')}>
+				<KolInputFile {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Upload file" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-warning')}>
+				<KolInputFile {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Upload file" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-success')}>
+				<KolInputFile {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Upload file" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-default')}>
+				<KolInputFile {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Upload file" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('multiple')}>
+				<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Upload file (Multiple)" />
+			</SampleBlock>
+			<SampleBlock {...block('disabled')}>
+				<KolInputFile {...props} _disabled _label="Upload file (Disabled)" />
+			</SampleBlock>
+			<SampleBlock {...block('access-key')}>
+				<KolInputFile {...props} _label="With access key" _accessKey="c" />
+			</SampleBlock>
+			<SampleBlock {...block('short-key')}>
+				<KolInputFile {...props} _label="With short key" _shortKey="s" />
+			</SampleBlock>
 		</div>
 	);
 });

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

@@ -1,20 +1,19 @@
 import React, { forwardRef } from 'react';
 
 import { SampleColumns } from '../../SampleColumns';
+import { SampleGroup } from '../../SampleGroup';
 import { InputFileCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileVariant(props, ref) {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>File</legend>
-				<InputFileCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>File (hideLabel)</legend>
-				<InputFileCases ref={ref} {...props} _hideLabel />
-			</fieldset>
+			<SampleGroup heading="File">
+				<InputFileCases blockIdPrefix="label" {...props} />
+			</SampleGroup>
+			<SampleGroup heading="File (hideLabel)">
+				<InputFileCases blockIdPrefix="hide-label" snapshotOnly="error" ref={ref} {...props} _hideLabel />
+			</SampleGroup>
 		</SampleColumns>
 	);
 });

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

@@ -3,6 +3,7 @@ import React, { type BaseSyntheticEvent } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { NumericFormat, type NumberFormatValues, type NumericFormatProps } from 'react-number-format';
 
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 type KolInputTextEvents = {
@@ -171,7 +172,7 @@ export function InputNumberNumberFormatter() {
 				</p>
 			</SampleDescription>
 			<section className="w-full grid gap-4">
-				<div>
+				<SampleBlock id="whole-number">
 					<KolForm>
 						<KolInputNumber
 							_label="Whole number"
@@ -193,9 +194,9 @@ export function InputNumberNumberFormatter() {
 						/>
 					</KolForm>
 					<pre className="text-base mt-2">{JSON.stringify({ value, touched }, null, 2)}</pre>
-				</div>
+				</SampleBlock>
 
-				<div>
+				<SampleBlock id="currency">
 					<KolForm _on={{ onSubmit: handleCurrencySubmit }}>
 						<KolNumericFormatController
 							control={currencyForm.control as any}
@@ -208,7 +209,7 @@ export function InputNumberNumberFormatter() {
 						/>
 					</KolForm>
 					<pre className="text-base mt-2">{JSON.stringify(currencyValues, null, 2)}</pre>
-				</div>
+				</SampleBlock>
 			</section>
 		</>
 	);

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

@@ -5,37 +5,77 @@ import { KolInputNumber } from '@public-ui/react-v19';
 import { ERROR_MSG } from '../../../shares/constants';
 
 import type { Components } from '@public-ui/components';
-export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components.KolInputNumber>(function InputNumberCases(props, ref) {
+import { SampleBlock } from '../../SampleBlock';
+
+type InputNumberCasesProps = Components.KolInputNumber & {
+	/** Prefixes the visual block ids so the same cases can be rendered more than once per route. */
+	blockIdPrefix: string;
+	/**
+	 * Restricts the snapshots of this rendering to the case with this id; every other block is
+	 * rendered with `skipSnapshot`. Used for the `_hideLabel` groups: hiding the label mainly
+	 * changes how the message is laid out, so snapshotting every case a second time would only
+	 * duplicate the labelled group.
+	 */
+	snapshotOnly?: string;
+};
+
+export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, InputNumberCasesProps>(function InputNumberCases(
+	{ blockIdPrefix, snapshotOnly, ...props },
+	ref,
+) {
+	// Blocks outside `snapshotOnly` stay visible in the sample but are excluded from the snapshots.
+	const block = (caseId: string) => ({ id: `${blockIdPrefix}-${caseId}`, skipSnapshot: snapshotOnly !== undefined && caseId !== snapshotOnly });
 	return (
 		<div className="grid gap-4">
-			<div className="black-background">
+			<SampleBlock {...block('black-bg')} className="black-background">
 				<KolInputNumber {...props} _required _touched _value={123} _label="Number input (Black background test)" />
-			</div>
-			<KolInputNumber
-				{...props}
-				_required
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_touched
-				_placeholder="Mit Icons"
-				_label="Number input"
-				_icons={{
-					left: {
-						icon: 'kolicon-kolibri',
-					},
-					right: {
-						icon: 'kolicon-kolibri',
-					},
-				}}
-			/>
-			<KolInputNumber {...props} _required _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
-			<KolInputNumber {...props} _required _msg={{ _type: 'warning', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
-			<KolInputNumber {...props} _required _msg={{ _type: 'info', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
-			<KolInputNumber {...props} _required _msg={{ _type: 'success', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
-			<KolInputNumber {...props} ref={ref} _accessKey="Z" _max={10} _min={-10} _step={2} _label="Number input (-10 to 10 in steps of 2)" />
-			<KolInputNumber {...props} _readOnly _value={123} _label="Number input (Readonly)" />
-			<KolInputNumber {...props} _disabled _value={123} _label="Number input (Disabled)" />
-			<KolInputNumber {...props} _label="With access key" _accessKey="c" />
-			<KolInputNumber {...props} _label="With short key" _shortKey="s" />
+			</SampleBlock>
+			<SampleBlock {...block('icons-error')}>
+				<KolInputNumber
+					{...props}
+					_required
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_touched
+					_placeholder="Mit Icons"
+					_label="Number input"
+					_icons={{
+						left: {
+							icon: 'kolicon-kolibri',
+						},
+						right: {
+							icon: 'kolicon-kolibri',
+						},
+					}}
+					_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('msg-error')}>
+				<KolInputNumber {...props} _required _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
+			</SampleBlock>
+			<SampleBlock {...block('msg-warning')}>
+				<KolInputNumber {...props} _required _msg={{ _type: 'warning', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
+			</SampleBlock>
+			<SampleBlock {...block('msg-info')}>
+				<KolInputNumber {...props} _required _msg={{ _type: 'info', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
+			</SampleBlock>
+			<SampleBlock {...block('msg-success')}>
+				<KolInputNumber {...props} _required _msg={{ _type: 'success', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
+			</SampleBlock>
+			<SampleBlock {...block('min-max-step')}>
+				<KolInputNumber {...props} ref={ref} _accessKey="Z" _max={10} _min={-10} _step={2} _label="Number input (-10 to 10 in steps of 2)" />
+			</SampleBlock>
+			<SampleBlock {...block('readonly')}>
+				<KolInputNumber {...props} _readOnly _value={123} _label="Number input (Readonly)" />
+			</SampleBlock>
+			<SampleBlock {...block('disabled')}>
+				<KolInputNumber {...props} _disabled _value={123} _label="Number input (Disabled)" />
+			</SampleBlock>
+			<SampleBlock {...block('access-key')}>
+				<KolInputNumber {...props} _label="With access key" _accessKey="c" />
+			</SampleBlock>
+			<SampleBlock {...block('short-key')}>
+				<KolInputNumber {...props} _label="With short key" _shortKey="s" />
+			</SampleBlock>
 		</div>
 	);
 });

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

@@ -4,17 +4,16 @@ import { InputNumberCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { SampleGroup } from '../../SampleGroup';
 export const InputNumberVariants = forwardRef<HTMLKolInputNumberElement, Components.KolInputNumber>(function InputNumberVariant(props, ref) {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>Number</legend>
-				<InputNumberCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Number (hideLabel)</legend>
-				<InputNumberCases ref={ref} {...props} _hideLabel />
-			</fieldset>
+			<SampleGroup heading="Number">
+				<InputNumberCases blockIdPrefix="label" {...props} />
+			</SampleGroup>
+			<SampleGroup heading="Number (hideLabel)">
+				<InputNumberCases blockIdPrefix="hide-label" snapshotOnly="msg-error" ref={ref} {...props} _hideLabel />
+			</SampleGroup>
 		</SampleColumns>
 	);
 });