public-ui-kolibri

import React, { forwardRef } from 'react'; 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) { return ( <div className="grid gap-4"> <div 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: 'codicon codicon-snake', }, right: { icon: 'codicon codicon-squirrel', }, }} /> <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" /> </div> ); });