Merge pull request #1550 from kadena-community/feat/numberfield-compo…

…nent

feat: add numberField component

.changeset/poor-goats-prove.md

@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': minor
+---
+
+Adds NumberField component to the form section

packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/confirm-recovery-phrase.tsx

@@ -29,7 +29,7 @@ export function ConfirmRecoveryPhrase({
         <Heading variant="h5">Confirm you wrote it down</Heading>
         <form onSubmit={handleSubmit(confirm)}>
           <label htmlFor="phrase">Enter phrase in the same order</label>
-          <TextField id="phrase" type="phrase" {...register('phrase')} />
+          <TextField id="phrase" {...register('phrase')} />
           <Button type="submit">Confirm</Button>
         </form>
         {error && <Text variant="base">{error}</Text>}

packages/libs/react-ui/src/components/Form/Form.css.ts

@@ -54,3 +54,70 @@ export const inputContainer = atoms({
   position: 'relative',
   alignItems: 'stretch',
 });
+
+// Field shared css
+
+export const startAddon = style({
+  position: 'absolute',
+  insetBlockStart: '50%',
+  transform: 'translateY(-50%)',
+  insetInlineStart: token('spacing.sm'),
+});
+
+export const endAddon = style({
+  position: 'absolute',
+  insetBlockStart: '50%',
+  transform: 'translateY(-50%)',
+  insetInlineEnd: token('spacing.sm'),
+});
+
+export const input = style([
+  atoms({
+    borderRadius: 'sm',
+    backgroundColor: 'layer-3.default',
+    border: 'none',
+    color: 'text.base.default',
+    outline: 'none',
+    flex: 1,
+    overflow: 'hidden',
+  }),
+  {
+    paddingInlineStart: token('spacing.md'),
+    paddingInlineEnd: token('spacing.md'),
+    paddingBlock: token('spacing.sm'),
+    '::placeholder': {
+      color: token('color.text.subtlest.default'),
+    },
+    boxShadow: `0px 1px 0 0 ${token('color.border.base.default')}`,
+    outlineOffset: '2px',
+    selectors: {
+      '&[data-outlined]': {
+        border: `2px solid ${token('color.border.base.default')}`,
+      },
+      '&[data-has-end-addon]': {
+        paddingInlineEnd: `calc(var(--end-addon-width) + ${token(
+          'spacing.lg',
+        )})`,
+      },
+      '&[data-has-start-addon]': {
+        paddingInlineStart: `calc(var(--start-addon-width) + ${token(
+          'spacing.lg',
+        )})`,
+      },
+      '&[data-positive]': {
+        outline: `2px solid ${token('color.border.semantic.positive.@focus')}`,
+      },
+      '&[data-disabled]': {
+        pointerEvents: 'none',
+        backgroundColor: token('color.background.base.@disabled'),
+        color: token('color.text.base.@disabled'),
+      },
+      '&[data-focused]': {
+        outline: `2px solid ${token('color.border.semantic.info.@focus')}`,
+      },
+      '&[data-invalid]': {
+        outline: `2px solid ${token('color.border.semantic.negative.@focus')}`,
+      },
+    },
+  },
+]);

packages/libs/react-ui/src/components/Form/NumberField/NumberField.css.ts

@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css';
+import { atoms, token } from '../../../styles';
+
+export const buttonContainerClass = style([
+  atoms({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    backgroundColor: 'layer-3.default',
+    color: 'text.base.default',
+    outline: 'none',
+  }),
+  {
+    borderLeft: `1px solid ${token('color.border.base.bold')}`,
+    paddingLeft: '8px',
+  },
+]);
+
+export const iconClass = style([
+  atoms({
+    color: 'text.base.default',
+  }),
+]);
+
+export const buttonClass = style([
+  {
+    padding: '0',
+  },
+]);