feat(theme/number-input): add iterations variant

Author: psychedelicious

lib/theme/components/number-input.ts

@@ -41,10 +41,56 @@ const filled = definePartsStyle((props) => {
   };
 });
 
+const variantIterations = definePartsStyle((props) => {
+  return {
+    root: { h: '28px' },
+    field: {
+      ...getInputFilledStyles(props),
+      pe: 6,
+      ps: 6,
+      borderInlineStartRadius: 'base',
+      h: 'full',
+      textAlign: 'center',
+      fontSize: 'md',
+      fontWeight: 'semibold',
+    },
+    stepperGroup: {
+      border: 'none',
+      w: 6,
+    },
+    stepper: {
+      color: 'base.200',
+      _hover: {
+        bg: 'base.700',
+        color: 'base.100',
+      },
+      _disabled: {
+        _hover: {
+          bg: 'base.800',
+          color: 'base.200',
+        },
+      },
+      _first: {
+        border: 'none',
+        margin: 0,
+        borderTopEndRadius: 'base',
+        borderBottomStartRadius: 'base',
+      },
+      _last: {
+        border: 'none',
+        margin: 0,
+        borderBottomEndRadius: 'base',
+        borderTopStartRadius: 'base',
+      },
+    },
+  };
+});
+
 export const numberInputTheme: ReturnType<typeof defineMultiStyleConfig> = defineMultiStyleConfig({
   variants: {
     filled,
     darkFilled: filled,
+    iterations: variantIterations,
   },
   defaultProps: {
     size: 'sm',

lib/theme/util/getInputFilledStyles.ts

@@ -3,8 +3,8 @@ import type { StyleFunctionProps, SystemStyleObject } from '@chakra-ui/styled-sy
 export const getInputFilledStyles = (props: StyleFunctionProps): SystemStyleObject => {
   const { variant } = props;
 
-  const bg = variant === 'darkFilled' ? 'base.800' : 'base.700';
-  const bgHover = variant === 'darkFilled' ? 'base.750' : 'base.650';
+  const bg = variant === 'darkFilled' || variant === 'iterations' ? 'base.800' : 'base.700';
+  const bgHover = variant === 'darkFilled' || variant === 'iterations' ? 'base.750' : 'base.650';
   const error = 'error.600';
   const errorHover = 'error.500';
   const fg = 'base.100';